Web页面优化

lbq

18 小时以前 56ca28233a84c5aa3ca93cae266b2d008ea348e1

 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}