Skip to content

Commit 4faca62

Browse files
author
yangjiale
committed
style: optimize blacklist card style in dark theme
Signed-off-by: yangjiale <yjl516914@digital-engine.com>
1 parent 6069839 commit 4faca62

3 files changed

Lines changed: 158 additions & 35 deletions

File tree

‎src/components/clusters/blacklist.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Autocomplete, Box, Button, Grid, TextField, Tooltip, Typography } from '@mui/material';
1+
import { Autocomplete, Box, Button, Grid, TextField, Tooltip, Typography, Paper } from '@mui/material';
22
import { forwardRef, memo, Ref, useEffect, useImperativeHandle, useState, useMemo, useCallback } from 'react';
33
import DeleteIcon from '@mui/icons-material/Delete';
44
import HelpIcon from '@mui/icons-material/Help';
@@ -202,15 +202,22 @@ const BlacklistItemCard = memo(
202202
const isFirstRowDisabled = !item.type || !item.config || !item.subConfig;
203203

204204
return (
205-
<Box
205+
<Paper
206206
key={`${index}-${item.type}`}
207207
data-testid="blacklist-item"
208+
elevation={0}
208209
sx={{
209-
border: '1px solid rgba(0, 0, 0, 0.08)',
210-
borderRadius: 1,
211210
p: 1.5,
212211
backgroundColor: 'rgba(255, 255, 255, 0.02)',
213-
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)',
212+
border: '1px solid',
213+
borderColor: 'divider',
214+
boxShadow: 'var(--palette-card-box-shadow)',
215+
transition: 'all 0.2s ease-in-out',
216+
'&:hover': {
217+
backgroundColor: 'rgba(255, 255, 255, 0.04)',
218+
borderColor: 'var(--palette-button-color)',
219+
boxShadow: '0 2px 8px rgba(0, 122, 255, 0.1)',
220+
},
214221
}}
215222
>
216223
{/* 第一行: Type | Config | Sub Config */}
@@ -428,7 +435,7 @@ const BlacklistItemCard = memo(
428435
<div style={{ paddingTop: '0.25rem' }}>Delete</div>
429436
</Button>
430437
</Box>
431-
</Box>
438+
</Paper>
432439
);
433440
},
434441
);

‎src/components/clusters/information.module.css‎

Lines changed: 65 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -380,16 +380,16 @@
380380
}
381381

382382
.blacklistServiceHeader {
383-
padding: 1rem 1.2rem;
384-
background: linear-gradient(90deg, var(--palette-grey-background-color) 0%, transparent 100%);
385-
border-bottom: 2px solid var(--palette-button-color);
383+
padding: 0.8rem 1.2rem;
384+
background-color: transparent;
385+
border-bottom: 1px solid var(--palette-divider-color);
386386
margin-bottom: 0;
387387
}
388388

389389
.blacklistServiceTitle {
390390
font-family: 'mabry-bold' !important;
391-
font-size: 1.1rem;
392-
color: var(--palette-text-color);
391+
font-size: 0.95rem;
392+
color: var(--palette-button-color);
393393
}
394394

395395
/* 表格样式 */
@@ -405,13 +405,19 @@
405405

406406
.blacklistTableHeader {
407407
padding: 0.8rem 1rem;
408-
text-align: left;
408+
text-align: center;
409409
font-family: 'mabry-bold' !important;
410410
font-size: 0.85rem;
411411
color: var(--palette-table-title-text-color);
412412
border-bottom: 1px solid var(--palette-divider-color);
413413
}
414414

415+
.blacklistTableHeaderText {
416+
font-family: 'mabry-bold' !important;
417+
font-size: 0.85rem;
418+
color: var(--palette-table-title-text-color);
419+
}
420+
415421
/* 固定列宽，确保 Client 和 Seed Client 表格对齐 */
416422
.blacklistTableHeader:nth-child(1) {
417423
width: 18%;
@@ -483,6 +489,59 @@
483489
opacity: 0.5;
484490
}
485491

492+
/* URL 单元格样式 */
493+
.blacklistUrlCell {
494+
display: flex;
495+
flex-direction: column;
496+
align-items: flex-start;
497+
gap: 0.3rem;
498+
max-width: 100%;
499+
}
500+
501+
.blacklistUrlItem {
502+
font-size: 0.85rem;
503+
color: var(--palette-text-secondary);
504+
word-break: break-all;
505+
line-height: 1.4;
506+
}
507+
508+
.blacklistUrlMoreButton {
509+
background: none;
510+
border: none;
511+
color: var(--palette-button-color);
512+
cursor: pointer;
513+
font-size: 0.85rem;
514+
padding: 0.2rem 0;
515+
font-family: 'mabry-bold' !important;
516+
text-decoration: none;
517+
transition: all 0.2s ease;
518+
}
519+
520+
.blacklistUrlMoreButton:hover {
521+
text-decoration: underline;
522+
background-color: var(--palette-action-hover);
523+
}
524+
525+
/* URL 弹窗样式 */
526+
.blacklistUrlDialogContainer {
527+
max-height: 60vh;
528+
overflow-y: auto;
529+
padding: 1rem 1.5rem !important;
530+
}
531+
532+
.blacklistUrlDialogItem {
533+
padding: 0.6rem 0;
534+
border-bottom: 1px solid var(--palette-divider-color);
535+
word-break: break-all;
536+
line-height: 1.5;
537+
color: var(--palette-text-color);
538+
font-size: 0.9rem;
539+
}
540+
541+
.blacklistUrlDialogItem:last-child {
542+
border-bottom: none;
543+
}
544+
486545
/* 小屏幕隐藏次要列 */
487546
@media only screen and (max-width: 1199px) {
488547
.blacklistTableHeader:nth-child(n+4),

‎src/components/clusters/information.tsx‎

Lines changed: 80 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,8 @@ export default function Information() {
120120
const [errorMessageText, setErrorMessageText] = useState('');
121121
const [deleteLoadingButton, setDeleteLoadingButton] = useState(false);
122122
const [openDeleteCluster, setOpenDeleteCluster] = useState(false);
123+
const [openUrlsDialog, setOpenUrlsDialog] = useState(false);
124+
const [currentUrls, setCurrentUrls] = useState<string[] | null>(null);
123125

124126
const params = useParams();
125127
const navigate = useNavigate();
@@ -1012,26 +1014,56 @@ export default function Information() {
10121014
<Typography className={styles.blacklistServiceTitle}>{serviceTypeGroup.serviceType}</Typography>
10131015
</Box>
10141016
<Table className={styles.blacklistTable}>
1015-
<TableHead className={styles.blacklistTableHead}>
1017+
<TableHead
1018+
className={styles.blacklistTableHead}
1019+
sx={{ backgroundColor: 'var(--palette-table-title-color)' }}
1020+
>
10161021
<TableRow>
1017-
<TableCell className={styles.blacklistTableHeader}>Task Type</TableCell>
1018-
<TableCell className={styles.blacklistTableHeader}>Feature</TableCell>
1019-
<TableCell className={styles.blacklistTableHeader}>Applications</TableCell>
1020-
<TableCell className={styles.blacklistTableHeader}>Urls</TableCell>
1021-
<TableCell className={styles.blacklistTableHeader}>Tags</TableCell>
1022-
<TableCell className={styles.blacklistTableHeader}>Priorities</TableCell>
1022+
<TableCell align="center" className={styles.blacklistTableHeader}>
1023+
<Typography variant="subtitle1" className={styles.blacklistTableHeaderText}>
1024+
Task Type
1025+
</Typography>
1026+
</TableCell>
1027+
<TableCell align="center" className={styles.blacklistTableHeader}>
1028+
<Typography variant="subtitle1" className={styles.blacklistTableHeaderText}>
1029+
Feature
1030+
</Typography>
1031+
</TableCell>
1032+
<TableCell align="center" className={styles.blacklistTableHeader}>
1033+
<Typography variant="subtitle1" className={styles.blacklistTableHeaderText}>
1034+
Applications
1035+
</Typography>
1036+
</TableCell>
1037+
<TableCell align="center" className={styles.blacklistTableHeader}>
1038+
<Typography variant="subtitle1" className={styles.blacklistTableHeaderText}>
1039+
Urls
1040+
</Typography>
1041+
</TableCell>
1042+
<TableCell align="center" className={styles.blacklistTableHeader}>
1043+
<Typography variant="subtitle1" className={styles.blacklistTableHeaderText}>
1044+
Tags
1045+
</Typography>
1046+
</TableCell>
1047+
<TableCell align="center" className={styles.blacklistTableHeader}>
1048+
<Typography variant="subtitle1" className={styles.blacklistTableHeaderText}>
1049+
Priorities
1050+
</Typography>
1051+
</TableCell>
10231052
</TableRow>
10241053
</TableHead>
10251054
<TableBody>
10261055
{serviceTypeGroup.rows.map((row, rowIndex) => (
10271056
<TableRow key={`row-${serviceIndex}-${rowIndex}`} className={styles.blacklistTableRow}>
1028-
<TableCell className={`${styles.blacklistTableCell} ${styles.blacklistTableTaskType}`}>
1057+
<TableCell
1058+
align="center"
1059+
className={`${styles.blacklistTableCell} ${styles.blacklistTableTaskType}`}
1060+
>
10291061
{row.taskType}
10301062
</TableCell>
1031-
<TableCell className={styles.blacklistTableCell}>
1063+
<TableCell align="center" className={styles.blacklistTableCell}>
10321064
<span className={styles.blacklistTableFeature}>{row.feature}</span>
10331065
</TableCell>
1034-
<TableCell className={styles.blacklistTableCell}>
1066+
<TableCell align="center" className={styles.blacklistTableCell}>
10351067
<Typography variant="body2" className={styles.blacklistCellText}>
10361068
<MuiTooltip
10371069
title={row.applications.length > 0 ? row.applications.join(', ') : '-'}
@@ -1047,20 +1079,35 @@ export default function Information() {
10471079
</MuiTooltip>
10481080
</Typography>
10491081
</TableCell>
1050-
<TableCell className={styles.blacklistTableCell}>
1051-
<Typography variant="body2" className={styles.blacklistCellText}>
1052-
<MuiTooltip title={row.urls.length > 0 ? row.urls.join(', ') : '-'} placement="top">
1053-
<span>
1054-
{row.urls.length > 0 ? (
1055-
row.urls.join(', ')
1056-
) : (
1057-
<span className={styles.blacklistOptionEmpty}>-</span>
1082+
<TableCell align="center" className={styles.blacklistTableCell}>
1083+
<Box className={styles.blacklistUrlCell}>
1084+
{row.urls.length === 0 ? (
1085+
<Typography variant="body2" className={styles.blacklistOptionEmpty}>
1086+
-
1087+
</Typography>
1088+
) : (
1089+
<>
1090+
{row.urls.slice(0, 4).map((url, index) => (
1091+
<Typography key={index} variant="body2" className={styles.blacklistUrlItem}>
1092+
{url}
1093+
</Typography>
1094+
))}
1095+
{row.urls.length > 4 && (
1096+
<button
1097+
className={styles.blacklistUrlMoreButton}
1098+
onClick={() => {
1099+
setCurrentUrls(row.urls);
1100+
setOpenUrlsDialog(true);
1101+
}}
1102+
>
1103+
More
1104+
</button>
10581105
)}
1059-
</span>
1060-
</MuiTooltip>
1061-
</Typography>
1106+
</>
1107+
)}
1108+
</Box>
10621109
</TableCell>
1063-
<TableCell className={styles.blacklistTableCell}>
1110+
<TableCell align="center" className={styles.blacklistTableCell}>
10641111
<Typography variant="body2" className={styles.blacklistCellText}>
10651112
<MuiTooltip title={row.tags.length > 0 ? row.tags.join(', ') : '-'} placement="top">
10661113
<span>
@@ -1073,7 +1120,7 @@ export default function Information() {
10731120
</MuiTooltip>
10741121
</Typography>
10751122
</TableCell>
1076-
<TableCell className={styles.blacklistTableCell}>
1123+
<TableCell align="center" className={styles.blacklistTableCell}>
10771124
<Typography variant="body2" className={styles.blacklistCellText}>
10781125
<MuiTooltip
10791126
title={
@@ -1104,6 +1151,16 @@ export default function Information() {
11041151
)}
11051152
</Box>
11061153
</Box>
1154+
<Dialog maxWidth="sm" fullWidth open={openUrlsDialog} onClose={() => setOpenUrlsDialog(false)}>
1155+
<DialogTitle>URLs</DialogTitle>
1156+
<DialogContent dividers className={styles.blacklistUrlDialogContainer}>
1157+
{currentUrls?.map((url, index) => (
1158+
<Typography key={index} className={styles.blacklistUrlDialogItem}>
1159+
{url}
1160+
</Typography>
1161+
))}
1162+
</DialogContent>
1163+
</Dialog>
11071164
</Box>
11081165
);
11091166
}

0 commit comments

Comments
 (0)