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 | 398 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 322 insertions(+), 76 deletions(-)
diff --git a/rsf-admin/src/page/dashboard/NbCard.jsx b/rsf-admin/src/page/dashboard/NbCard.jsx
index 442af08..b1f1ac4 100644
--- a/rsf-admin/src/page/dashboard/NbCard.jsx
+++ b/rsf-admin/src/page/dashboard/NbCard.jsx
@@ -4,12 +4,15 @@
Box,
Button,
List,
+ Grid,
ListItem,
+ Typography,
ListItemAvatar,
ListItemButton,
ListItemText,
} from '@mui/material';
import CommentIcon from '@mui/icons-material/Comment';
+import CardWithIcon from '../components/CardWithIcon';
import { Link } from 'react-router-dom';
import {
ReferenceField,
@@ -18,90 +21,333 @@
useTranslate,
useIsDataLoaded,
} from 'react-admin';
-import CardWithIcon from '../components/CardWithIcon';
const NbCard = (props) => {
- const { list, ...rest } = props;
+ const { tasks, total, ...rset } = props;
const translate = useTranslate();
- const {
- data: reviews,
- total,
- isPending,
- } = useGetList('reviews', {
- filter: { status: 'pending' },
- sort: { field: 'date', order: 'DESC' },
- pagination: { page: 1, perPage: 100 },
- });
+
+ // 鐘舵�佺鐞嗗睆骞曢珮搴�
+ const [screenHeight, setScreenHeight] = React.useState(window.innerHeight);
+ const [containerHeight, setContainerHeight] = React.useState('100vh');
- const display = 'display';
- const newList = list.concat(list);
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ 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 (
- <CardWithIcon
- icon={CommentIcon}
- title={translate('pos.dashboard.pending_reviews')}
- subtitle={total}
- {...rest}
- >
- <List sx={{ display }}>
- {newList?.map((record) => (
- <ListItem key={record.id} disablePadding>
- <ListItemButton
- alignItems="flex-start"
- component={Link}
- to={`/reviews/${record.id}`}
- >
- {/* <ListItemAvatar>
- <Avatar
- sx={{
- // bgcolor: 'primary.main',
- bgcolor: '#a2beeaff',
- color: 'primary.contrastText', // 閬垮厤鐧藉瓧鐧藉簳
- // width: 40,
- // height: 40,
- // fontSize: 16,
- }}
- >
- {record.id}
- </Avatar>
- </ListItemAvatar> */}
-
- <ListItemText
- // primary={
- // <StarRatingField
- // record={record}
- // source="rating"
- // />
- // }
- primary={record.date + record.date}
- secondary={record.total}
- sx={{
- overflowY: 'hidden',
- height: '3em',
- display: '-webkit-box',
- WebkitLineClamp: 2,
- WebkitBoxOrient: 'vertical',
- paddingRight: 0,
- }}
- />
- </ListItemButton>
- </ListItem>
- ))}
- </List>
- <Box flexGrow={1}> </Box>
- <Button
- sx={{ borderRadius: 0 }}
- component={Link}
- to="/reviews"
- size="small"
- color="primary"
+ <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,
+ }}
>
- <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>
+
+ {/* 搴曢儴鎸夐挳鍖哄煙 - 鍥哄畾鍦ㄥ簳閮� */}
+ {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>
- </Button>
- </CardWithIcon>
+ </CardWithIcon>
+ </Box>
);
};
-export default NbCard;
+// 鐘舵�侀鑹叉槧灏�
+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';
+};
+
+// 鏍煎紡鍖栨棩鏈熸椂闂�
+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