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/system/menu/MenuList.jsx | 68 +++++++++++++++++++++++++++++----
1 files changed, 59 insertions(+), 9 deletions(-)
diff --git a/rsf-admin/src/page/system/menu/MenuList.jsx b/rsf-admin/src/page/system/menu/MenuList.jsx
index ab0e3c7..5c50e52 100644
--- a/rsf-admin/src/page/system/menu/MenuList.jsx
+++ b/rsf-admin/src/page/system/menu/MenuList.jsx
@@ -127,6 +127,8 @@
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
maxWidth: 600,
+ // 纭繚鎵�鏈夊崟鍏冩牸鏈夊熀鏈殑鍐呰竟璺�
+ padding: '8px 16px',
}));
const TreeTableRow = (props) => {
@@ -139,15 +141,41 @@
const isOpen = openNodes[row.id] || false;
+ // 鏇存槑鏄剧殑閫忔槑搴︽笎鍙�
+ const getOpacity = (currentDepth) => {
+ // 绗竴绾э細100%锛岀浜岀骇锛�75%锛岀涓夌骇锛�50%锛岀鍥涚骇锛�40%
+ const opacities = [1, 0.9, 0.8, 0.7];
+ return opacities[currentDepth] || 0.4;
+ };
+
+ const opacity = getOpacity(depth);
+
return (
<React.Fragment>
- <StyledTableRow hover tabIndex={-1} key={row.id}>
- <StyledTableCell sx={{ padding: 0 }}>
- {row.children && (
+ <StyledTableRow
+ hover
+ tabIndex={-1}
+ key={row.id}
+ sx={{
+ opacity: depth > 0 ? opacity : 1,
+ // 娣诲姞鑳屾櫙鑹叉笎鍙樺寮烘晥鏋�
+ backgroundColor: depth > 0 ? `rgba(0, 0, 0, ${0.02 * (3 - depth)})` : 'inherit',
+ }}
+ >
+ <StyledTableCell sx={{
+ padding: 0,
+ width: 60,
+ // 杩涗竴姝ュ噺灏忕缉杩涜窛绂诲埌12px
+ paddingLeft: depth * 4
+ }}>
+ {row.children && row.children.length > 0 && (
<IconButton
aria-label="expand row"
size="small"
onClick={() => toggleNode(row.id)}
+ sx={{
+ opacity: depth > 0 ? opacity : 1,
+ }}
>
{isOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
@@ -164,10 +192,20 @@
key={column.id}
align={column.align || 'left'}
style={{
- paddingLeft: idx === 0 && (depth * 16 + 16),
- opacity: column.id === 'icon' && .6
+ // 鍚嶇О鍒椾篃浣跨敤12px缂╄繘
+ paddingLeft: idx === 0 ? (depth * 24 + 16) : 16,
+ // opacity: column.id === 'icon' && .6
}}
- onClick={() => toggleNode(row.id)}
+ onClick={() => column.id === 'name' && toggleNode(row.id)}
+ sx={{
+ opacity: column.id === 'icon' ? 0.6 : (depth > 0 ? opacity : 1),
+ color: depth > 0 ? `rgba(0, 0, 0, ${opacity})` : 'inherit',
+ fontWeight: 400,
+ // 浣跨敤瀛椾綋澶у皬鎴栭鑹叉潵鍖哄垎灞傜骇
+ fontSize: depth === 0 ? '0.95rem' : '0.9rem',
+ // 鎴栬�呬娇鐢ㄤ笉鍚岀殑棰滆壊
+ color: depth === 0 ? 'text.primary' : `rgba(0, 0, 0, ${opacity})`,
+ }}
>
{column.format ? column.format(value) : value}
</StyledTableCell>
@@ -176,18 +214,30 @@
})}
<StyledTableCell>
<Tooltip title="Edit">
- <IconButton onClick={() => onEdit(row)}>
+ <IconButton
+ onClick={() => onEdit(row)}
+ sx={{
+ opacity: depth > 0 ? opacity : 1,
+ }}
+ size="small"
+ >
<Edit />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
- <IconButton onClick={() => onDelete(row)}>
+ <IconButton
+ onClick={() => onDelete(row)}
+ sx={{
+ opacity: depth > 0 ? opacity : 1,
+ }}
+ size="small"
+ >
<Delete />
</IconButton>
</Tooltip>
</StyledTableCell>
</StyledTableRow>
- {row.children && isOpen && (
+ {row.children && row.children.length > 0 && isOpen && (
row.children.map((child) => (
<TreeTableRow
key={child.id}
--
Gitblit v1.9.1