no message

skyouc

1 天以前 db67c55c72b4f506db5f3afaf30ce8af1dcc2312

 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,19 @@
                                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),
                                    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 +213,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}
@@ -217,6 +266,14 @@
    const [editRecord, setEditRecord] = React.useState(null);
    const [openNodes, setOpenNodes] = React.useState({});
    const [expandAll, setExpandAll] = React.useState(false);
    const notifyState = React.useRef({ last: '', at: 0 });
    const pushNotify = React.useCallback((type, msg) => {
        const text = typeof msg === 'string' ? msg : (msg || '');
        const now = Date.now();
        if (notifyState.current.last === text && now - notifyState.current.at < 1500) return;
        notifyState.current = { last: text, at: now };
        notify(text, { type, messageArgs: { _: text } });
    }, [notify]);

    const http = async () => {
        const res = await request.post(RESOURCE + '/tree', {
@@ -225,7 +282,8 @@
        if (res?.data?.code === 200) {
            setTreeData(res.data.data);
        } else {
            notify(res.data.msg);
            const msg = translate('ra.notification.http_error', { _: res?.data?.msg || 'Request failed' });
            pushNotify('warning', msg);
        }
    }

@@ -255,10 +313,12 @@
                {
                    onSuccess: () => {
                        handleRefresh();
                        notify('Department deleted successfully', { type: 'info', messageArgs: { _: 'Department deleted successfully' } });
                        const msg = translate('ra.message.delete_success', { _: 'Deleted successfully' });
                        pushNotify('success', msg);
                    },
                    onError: (error) => {
                        notify(`Error: ${error.message}`, { type: 'warning', messageArgs: { _: `Error: ${error.message}` } });
                        const msg = translate('ra.notification.http_error', { _: error?.message || 'Network error' });
                        pushNotify('error', msg);
                    },
                }
            );
@@ -270,6 +330,7 @@
            const newExpandAll = !prevExpandAll;
            const newOpenNodes = {};
            const updateOpenNodes = (nodes) => {
                if (!nodes) return;
                nodes.forEach(node => {
                    newOpenNodes[node.id] = newExpandAll;
                    if (node.children) {
@@ -392,4 +453,4 @@
    );
};

export default MenuList;
export default MenuList;