From 56ca28233a84c5aa3ca93cae266b2d008ea348e1 Mon Sep 17 00:00:00 2001
From: lbq <1065079612@qq.com>
Date: 星期三, 24 十二月 2025 09:54:13 +0800
Subject: [PATCH] Web页面优化
---
rsf-admin/src/page/dashboard/NbCard.jsx | 365 ++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 310 insertions(+), 55 deletions(-)
diff --git a/rsf-admin/src/page/dashboard/NbCard.jsx b/rsf-admin/src/page/dashboard/NbCard.jsx
index 80c8772..b1f1ac4 100644
--- a/rsf-admin/src/page/dashboard/NbCard.jsx
+++ b/rsf-admin/src/page/dashboard/NbCard.jsx
@@ -25,74 +25,329 @@
const NbCard = (props) => {
const { tasks, total, ...rset } = props;
const translate = useTranslate();
+
+ // 鐘舵�佺鐞嗗睆骞曢珮搴�
+ const [screenHeight, setScreenHeight] = React.useState(window.innerHeight);
+ const [containerHeight, setContainerHeight] = React.useState('100vh');
- const display = 'display';
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ React.useEffect(() => {
+ const handleResize = () => {
+ setScreenHeight(window.innerHeight);
+ };
+
+ window.addEventListener('resize', handleResize);
+
+ // 璁＄畻瀹瑰櫒楂樺害锛堝噺鍘诲彲鑳界殑澶撮儴瀵艰埅鏍忛珮搴︼級
+ const calculateContainerHeight = () => {
+ const headerHeight = 64; // 鍋囪澶撮儴瀵艰埅鏍忛珮搴︿负64px
+ const padding = 16; // 涓婁笅杈硅窛
+ return `calc(${screenHeight}px - ${headerHeight + padding * 2}px)`;
+ };
+
+ setContainerHeight(calculateContainerHeight());
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, [screenHeight]);
return (
- <>
+ <Box sx={{
+ height: containerHeight, // 鍔ㄦ�佽绠楃殑楂樺害
+ maxHeight: 690, //containerHeight,
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: '400px', // 鏈�灏忛珮搴︿繚璇�
+ // overflowY: 'auto'
+ }}>
<CardWithIcon
icon={CommentIcon}
title={translate('page.dashboard.pending_reviews')}
subtitle={total}
{...rset}
+ sx={{
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ minHeight: 0,
+ }}
>
- <List sx={{ display }}>
- {tasks?.map((record) => (
- <ListItem key={record.id} disablePadding>
- <ListItemButton
- alignItems="flex-start"
- component={Link}
- to={`/task/${record.id}`}
- >
- <Grid container item md={12}>
- <Box sx={{ display: 'flex' }}>
- <Box sx={{ display: 'flex', padding: '1em' }}>
- <Typography color="textSecondary">{translate("table.field.task.taskCode")}锛�</Typography>
- <Typography color="textSecondary">{record?.taskCode}</Typography>
- </Box>
- </Box>
- <Box sx={{ display: 'flex' }}>
- <Box sx={{ display: 'flex', padding: '1em' }}>
- <Typography color="textSecondary">{translate("table.field.task.taskType")}锛�</Typography>
- <Typography color="textSecondary" maxWidth="200" overflow="hidden">{record?.taskType$}</Typography>
- </Box>
- </Box>
- <Box sx={{ display: 'flex' }}>
- <Box sx={{ display: 'flex', padding: '1em' }}>
- <Typography color="textSecondary">{translate("table.field.task.taskStatus")}锛�</Typography>
- <Typography color="textSecondary">{record?.taskStatus$}</Typography>
- </Box>
- </Box>
- <Box sx={{ display: 'flex' }}>
- <Box sx={{ display: 'flex', padding: '1em' }}>
- <Typography color="textSecondary">{translate("table.field.task.startTime")}锛�</Typography>
- <Typography color="textSecondary">{record?.createTime}</Typography>
- </Box>
- </Box>
- </Grid>
- </ListItemButton>
- <Spacer />
- </ListItem>
- ))}
- </List>
- <Box flexGrow={1}> </Box>
- {/* <Button
- sx={{ borderRadius: 0 }}
- component={Link}
- to="/task"
- size="small"
- color="primary"
- >
- <Box p={1} sx={{ color: 'primary.main' }}>
- {translate('pos.dashboard.all_reviews')}
+ {/* 鍐呭瀹瑰櫒 - 鑷�傚簲楂樺害 */}
+ <Box sx={{
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: 0,
+ height: '100%',
+ }}>
+ {/* 鍒楄〃鍖哄煙 - 鑷姩婊氬姩 */}
+ <Box sx={{
+ flex: 1,
+ overflow: 'auto',
+ minHeight: 0,
+ '&::-webkit-scrollbar': {
+ width: '6px',
+ },
+ '&::-webkit-scrollbar-track': {
+ background: 'transparent',
+ },
+ '&::-webkit-scrollbar-thumb': {
+ background: '#ccc',
+ borderRadius: '3px',
+ '&:hover': {
+ background: '#aaa',
+ }
+ }
+ }}>
+ <List sx={{ py: 0, minHeight: 'min-content' }}>
+ {tasks?.length > 0 ? (
+ tasks.map((record) => (
+ <ListItem
+ key={record.id}
+ disablePadding
+ sx={{
+ borderBottom: '1px solid',
+ borderColor: 'divider',
+ '&:last-child': {
+ borderBottom: 'none',
+ }
+ }}
+ >
+ <ListItemButton
+ component={Link}
+ to={`/task/${record.id}`}
+ sx={{
+ py: 1.5,
+ px: 2,
+ '&:hover': {
+ backgroundColor: 'action.hover',
+ }
+ }}
+ >
+ <Grid container spacing={1}>
+ {/* 绗竴琛岋細浠诲姟缂栫爜鍜岀被鍨� */}
+ <Grid item xs={12} sx={{ display: 'flex', alignItems: 'center' }}>
+ <Box sx={{
+ display: 'flex',
+ alignItems: 'center',
+ minWidth: 0,
+ flex: 1,
+ mr: 2
+ }}>
+ <Typography
+ variant="body2"
+ sx={{
+ fontWeight: 600,
+ color: 'primary.main',
+ minWidth: '80px',
+ flexShrink: 0,
+ }}
+ >
+ {translate("table.field.task.taskCode")}锛�
+ </Typography>
+ <Typography
+ variant="body2"
+ sx={{
+ color: 'text.primary',
+ fontWeight: 500,
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ }}
+ >
+ {record?.taskCode}
+ </Typography>
+ </Box>
+
+ <Box sx={{
+ display: 'flex',
+ alignItems: 'center',
+ minWidth: 0,
+ flex: 1
+ }}>
+ <Typography
+ variant="body2"
+ sx={{
+ fontWeight: 600,
+ color: 'primary.main',
+ minWidth: '80px',
+ flexShrink: 0,
+ }}
+ >
+ {translate("table.field.task.taskType")}锛�
+ </Typography>
+ <Typography
+ variant="body2"
+ sx={{
+ color: 'text.primary',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ }}
+ title={record?.taskType$}
+ >
+ {record?.taskType$}
+ </Typography>
+ </Box>
+ </Grid>
+
+ {/* 绗簩琛岋細鐘舵�佸拰鏃堕棿 */}
+ <Grid item xs={12} sx={{ display: 'flex', alignItems: 'center' }}>
+ <Box sx={{
+ display: 'flex',
+ alignItems: 'center',
+ minWidth: 0,
+ flex: 1,
+ mr: 2
+ }}>
+ <Typography
+ variant="body2"
+ sx={{
+ fontWeight: 600,
+ color: 'primary.main',
+ minWidth: '80px',
+ flexShrink: 0,
+ }}
+ >
+ {translate("table.field.task.taskStatus")}锛�
+ </Typography>
+ <Typography
+ variant="body2"
+ sx={{
+ color: getStatusColor(record?.taskStatus$),
+ fontWeight: 600,
+ px: 1,
+ py: 0.5,
+ borderRadius: 1,
+ backgroundColor: getStatusBackground(record?.taskStatus$),
+ fontSize: '0.75rem',
+ }}
+ >
+ {record?.taskStatus$}
+ </Typography>
+ </Box>
+
+ <Box sx={{
+ display: 'flex',
+ alignItems: 'center',
+ minWidth: 0,
+ flex: 1
+ }}>
+ <Typography
+ variant="body2"
+ sx={{
+ fontWeight: 600,
+ color: 'primary.main',
+ minWidth: '80px',
+ flexShrink: 0,
+ }}
+ >
+ {translate("table.field.task.startTime")}锛�
+ </Typography>
+ <Typography
+ variant="body2"
+ sx={{
+ color: 'text.secondary',
+ fontFamily: 'monospace',
+ fontSize: '0.875rem',
+ }}
+ >
+ {formatDateTime(record?.createTime)}
+ </Typography>
+ </Box>
+ </Grid>
+ </Grid>
+ </ListItemButton>
+ </ListItem>
+ ))
+ ) : (
+ // 绌虹姸鎬佹彁绀� - 灞呬腑鏄剧ず
+ <Box sx={{
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ height: '100%',
+ minHeight: 120,
+ color: 'text.secondary'
+ }}>
+ <Typography variant="body2">
+ {translate('common.noData')}
+ </Typography>
+ </Box>
+ )}
+ </List>
</Box>
- </Button> */}
+
+ {/* 搴曢儴鎸夐挳鍖哄煙 - 鍥哄畾鍦ㄥ簳閮� */}
+ {tasks?.length > 0 && (
+ <Box sx={{
+ borderTop: '1px solid',
+ borderColor: 'divider',
+ flexShrink: 0,
+ mt: 'auto',
+ }}>
+ <Button
+ component={Link}
+ to="/task"
+ size="small"
+ color="primary"
+ fullWidth
+ sx={{
+ borderRadius: 0,
+ py: 1,
+ fontSize: '0.875rem',
+ fontWeight: 500,
+ }}
+ >
+ {translate('pos.dashboard.all_reviews')}
+ </Button>
+ </Box>
+ )}
+ </Box>
</CardWithIcon>
- </>
+ </Box>
);
};
-const Spacer = () => <span style={{ width: '1em', }} />;
+// 鐘舵�侀鑹叉槧灏�
+const getStatusColor = (status) => {
+ const statusMap = {
+ 'pending': 'warning.main',
+ 'completed': 'success.main',
+ 'processing': 'info.main',
+ 'cancelled': 'error.main',
+ 'failed': 'error.main',
+ };
+ return statusMap[status?.toLowerCase()] || 'text.secondary';
+};
+// 鐘舵�佽儗鏅壊
+const getStatusBackground = (status) => {
+ const backgroundMap = {
+ 'pending': 'warning.light',
+ 'completed': 'success.light',
+ 'processing': 'info.light',
+ 'cancelled': 'error.light',
+ 'failed': 'error.light',
+ };
+ return backgroundMap[status?.toLowerCase()] || 'grey.100';
+};
-export default NbCard;
+// 鏍煎紡鍖栨棩鏈熸椂闂�
+const formatDateTime = (dateTime) => {
+ if (!dateTime) return '-';
+ try {
+ return new Date(dateTime).toLocaleDateString('zh-CN', {
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+ } catch {
+ return dateTime;
+ }
+};
+
+export default NbCard;
\ No newline at end of file
--
Gitblit v1.9.1