lsh#

1

3 天以前 4e40afebef0f4eaa846f9c02bd3243c863d0a0e7

 rsf-admin/src/layout/TabsBar.jsx

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useTranslate, usePermissions } from 'react-admin';
import { Box, Tab, Tabs, IconButton, Tooltip, Divider } from '@mui/material';
import { Box, Tab, Tabs, IconButton, Tooltip, Divider, Menu, MenuItem } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import HomeIcon from '@mui/icons-material/Home';
import SettingsIcon from '@mui/icons-material/Settings';
@@ -79,6 +79,8 @@
    return normalizePath(path1) === normalizePath(path2);
};

const LONG_PRESS_MS = 300;

const TabsBar = () => {
    const location = useLocation();
    const navigate = useNavigate();
@@ -86,6 +88,42 @@
    const { permissions } = usePermissions();
    const [tabs, setTabs] = useState(getSavedTabs);
    const pendingNavigationRef = useRef(null);
    const tabsBarRef = useRef(null);
    const [contextMenu, setContextMenu] = useState(null);
    const [contextMenuTab, setContextMenuTab] = useState(null);
    const contextMenuOpenRef = useRef(false);
    contextMenuOpenRef.current = contextMenu !== null;

    const [draggingIndex, setDraggingIndex] = useState(null);
    const [dropIndicatorIndex, setDropIndicatorIndex] = useState(null);
    const longPressTimerRef = useRef(null);
    const longPressIndexRef = useRef(null);
    const justFinishedDragRef = useRef(false);

    // 在标签页右键，阻止浏览器默认菜单
    useEffect(() => {
        const onDocContextMenu = (e) => {
            const inTabsBarByTarget = tabsBarRef.current && tabsBarRef.current.contains(e.target);
            let inTabsBarByPos = false;
            if (tabsBarRef.current) {
                const rect = tabsBarRef.current.getBoundingClientRect();
                inTabsBarByPos = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
            }
            const inTabsBar = inTabsBarByTarget || inTabsBarByPos;
            const menuOpen = contextMenuOpenRef.current;
            if (inTabsBar || menuOpen) {
                e.preventDefault();
            }
        };
        document.addEventListener('contextmenu', onDocContextMenu, true);
        return () => document.removeEventListener('contextmenu', onDocContextMenu, true);
    }, []); // 用 ref 读最新状态，避免快速点击闭包滞后

    // 翻译辅助，无翻译 key 时返回默认值
    const t = useCallback((key, defaultValue) => {
        const translated = translate(key);
        return translated === key ? defaultValue : translated;
    }, [translate]);

    // 处理待执行的导航
    useEffect(() => {
@@ -196,6 +234,10 @@

    // 切换标签页
    const handleTabChange = (event, newValue) => {
        if (justFinishedDragRef.current) {
            justFinishedDragRef.current = false;
            return;
        }
        const targetTab = tabs[newValue];
        if (targetTab && targetTab.path !== location.pathname) {
            navigate(targetTab.path);
@@ -240,6 +282,126 @@
        }
    };

    // 关闭其他标签
    const handleCloseOthers = (keepTabPath) => {
        const keepTab = tabs.find(tab => tab.path === keepTabPath);
        if (!keepTab) return;
        const dashboardTab = tabs.find(tab => tab.path === '/dashboard');
        const newTabs = [];
        if (keepTab.path !== '/dashboard' && dashboardTab) {
            newTabs.push(dashboardTab);
        }
        if (!newTabs.some(tab => tab.path === keepTab.path)) {
            newTabs.push(keepTab);
        }
        saveTabs(newTabs);
        setTabs(newTabs);
        setContextMenu(null);
        setContextMenuTab(null);
    };

    // 关闭左侧标签
    const handleCloseLeft = (keepTabPath) => {
        const keepTabIndex = tabs.findIndex(tab => tab.path === keepTabPath);
        if (keepTabIndex < 0) return;
        let newTabs = tabs.slice(keepTabIndex);
        const dashboardTab = newTabs.find(tab => tab.path === '/dashboard');
        if (dashboardTab && newTabs[0].path !== '/dashboard') {
            const dashboardIndex = newTabs.findIndex(tab => tab.path === '/dashboard');
            if (dashboardIndex > 0) {
                newTabs.splice(dashboardIndex, 1);
                newTabs.unshift(dashboardTab);
            }
        }
        saveTabs(newTabs);
        setTabs(newTabs);
        setContextMenu(null);
        setContextMenuTab(null);
    };

    // 关闭右侧标签
    const handleCloseRight = (keepTabPath) => {
        const keepTabIndex = tabs.findIndex(tab => tab.path === keepTabPath);
        if (keepTabIndex < 0) return;
        const newTabs = tabs.slice(0, keepTabIndex + 1);
        saveTabs(newTabs);
        setTabs(newTabs);
        setContextMenu(null);
        setContextMenuTab(null);
    };

    // 右键菜单：打开
    const handleContextMenu = (event, tab) => {
        event.preventDefault();
        event.stopPropagation();
        if (!tab) return;
        const tabObj = tabs.find(t => t.path === tab.path || isSameResource(t.path, tab.path));
        if (!tabObj) return;
        const hasItems = tabObj.closable ||
            canCloseLeftForTab(tab.path) ||
            canCloseRightForTab(tab.path) ||
            canCloseOthersForTab(tab.path);
        if (!hasItems) return;
        setContextMenu({ mouseX: event.clientX + 2, mouseY: event.clientY - 6 });
        setContextMenuTab(tab);
    };

    const handleCloseContextMenu = () => {
        setContextMenu(null);
        setContextMenuTab(null);
    };

    // 右键菜单：关闭当前标签
    const handleCloseCurrentTab = () => {
        if (!contextMenuTab) {
            handleCloseContextMenu();
            return;
        }
        const tabPath = contextMenuTab.path;
        const tabIndex = tabs.findIndex(tab => tab.path === tabPath);
        const newTabs = tabs.filter(tab => tab.path !== tabPath);
        if (location.pathname === tabPath || isSameResource(location.pathname, tabPath)) {
            const newIndex = Math.min(tabIndex, newTabs.length - 1);
            if (newIndex >= 0 && newTabs[newIndex]) {
                pendingNavigationRef.current = newTabs[newIndex].path;
            } else {
                pendingNavigationRef.current = '/dashboard';
            }
        }
        saveTabs(newTabs);
        setTabs(newTabs);
        handleCloseContextMenu();
    };

    // 右键菜单：关闭其他/左侧/右侧
    const handleCloseOtherTabs = () => {
        if (contextMenuTab) handleCloseOthers(contextMenuTab.path);
    };
    const handleCloseLeftTabs = () => {
        if (contextMenuTab) handleCloseLeft(contextMenuTab.path);
    };
    const handleCloseRightTabs = () => {
        if (contextMenuTab) handleCloseRight(contextMenuTab.path);
    };

    // 是否可关闭其他/左侧/右侧
    const canCloseOthersForTab = (tabPath) => {
        return tabs.filter(tab => {
            const isTarget = tab.path === tabPath || isSameResource(tab.path, tabPath);
            return !isTarget && tab.closable;
        }).length > 0;
    };
    const canCloseLeftForTab = (tabPath) => {
        const tabIndex = tabs.findIndex(tab => tab.path === tabPath || isSameResource(tab.path, tabPath));
        if (tabIndex <= 0) return false;
        return tabs.slice(0, tabIndex).some(tab => tab.closable);
    };
    const canCloseRightForTab = (tabPath) => {
        const tabIndex = tabs.findIndex(tab => tab.path === tabPath || isSameResource(tab.path, tabPath));
        if (tabIndex < 0 || tabIndex >= tabs.length - 1) return false;
        return tabs.slice(tabIndex + 1).some(tab => tab.closable);
    };

    // 获取当前标签页索引
    const currentTabIndex = tabs.findIndex(tab =>
        tab.path === location.pathname || isSameResource(tab.path, location.pathname)
@@ -249,8 +411,110 @@
    // 判断是否有可关闭的标签
    const hasClosableTabs = tabs.some(tab => tab.closable);

    // 右键打开时遮罩处理
    const menuPaperRef = useRef(null);
    useEffect(() => {
        if (contextMenu === null) return;
        const onDocClick = (e) => {
            const inMenu = menuPaperRef.current && menuPaperRef.current.contains(e.target);
            const inTabsBar = tabsBarRef.current && tabsBarRef.current.contains(e.target);
            if (!inMenu && !inTabsBar) {
                setContextMenu(null);
                setContextMenuTab(null);
            }
        };
        document.addEventListener('mousedown', onDocClick, true);
        return () => document.removeEventListener('mousedown', onDocClick, true);
    }, [contextMenu]);

    const clearLongPressTimer = useCallback(() => {
        if (longPressTimerRef.current) {
            clearTimeout(longPressTimerRef.current);
            longPressTimerRef.current = null;
        }
        longPressIndexRef.current = null;
    }, []);

    const handleTabPointerDown = useCallback((e, index) => {
        if (index < 0) return;
        longPressIndexRef.current = index;
        longPressTimerRef.current = setTimeout(() => {
            longPressTimerRef.current = null;
            setDraggingIndex(index);
            setDropIndicatorIndex(index);
        }, LONG_PRESS_MS);
    }, []);

    const handleTabPointerUp = useCallback(() => {
        clearLongPressTimer();
    }, [clearLongPressTimer]);

    useEffect(() => {
        if (draggingIndex === null) return;
        const getDropIndex = (clientX) => {
            const nodes = tabsBarRef.current?.querySelectorAll('[data-tab-index]');
            if (!nodes?.length) return draggingIndex;
            for (let i = 0; i < nodes.length; i++) {
                const rect = nodes[i].getBoundingClientRect();
                const mid = rect.left + rect.width / 2;
                if (clientX <= mid) {
                    const drop = i;
                    if (draggingIndex === 0) return drop <= 0 ? 0 : draggingIndex;
                    return drop <= 0 ? 1 : drop;
                }
            }
            const drop = nodes.length;
            return draggingIndex === 0 ? 0 : drop;
        };
        const clientXFromEvent = (e) => e.clientX ?? e.touches?.[0]?.clientX;
        const onMove = (e) => {
            const x = clientXFromEvent(e);
            if (x != null) setDropIndicatorIndex(getDropIndex(x));
        };
        const onTouchMove = (e) => {
            e.preventDefault();
            onMove(e);
        };
        const onUp = () => {
            justFinishedDragRef.current = true;
            setDraggingIndex((di) => {
                setDropIndicatorIndex((dropIdx) => {
                    if (di !== null && dropIdx !== null && di !== dropIdx) {
                        const newTabs = [...tabs];
                        const [item] = newTabs.splice(di, 1);
                        const insertAt = dropIdx > di ? dropIdx - 1 : dropIdx;
                        newTabs.splice(insertAt, 0, item);
                        const dashboard = newTabs.find((t) => t.path === '/dashboard');
                        if (dashboard && newTabs[0].path !== '/dashboard') {
                            const idx = newTabs.indexOf(dashboard);
                            newTabs.splice(idx, 1);
                            newTabs.unshift(dashboard);
                        }
                        saveTabs(newTabs);
                        setTabs(newTabs);
                    }
                    return null;
                });
                return null;
            });
        };
        document.addEventListener('mousemove', onMove, true);
        document.addEventListener('mouseup', onUp, true);
        document.addEventListener('touchmove', onTouchMove, { passive: false, capture: true });
        document.addEventListener('touchend', onUp, true);
        document.addEventListener('touchcancel', onUp, true);
        return () => {
            document.removeEventListener('mousemove', onMove, true);
            document.removeEventListener('mouseup', onUp, true);
            document.removeEventListener('touchmove', onTouchMove, true);
            document.removeEventListener('touchend', onUp, true);
            document.removeEventListener('touchcancel', onUp, true);
        };
    }, [draggingIndex, tabs]);

    return (
        <Box
            ref={tabsBarRef}
            sx={{
                width: '100%',
                backgroundColor: '#fff',
@@ -282,10 +546,20 @@
                        key={tab.path}
                        label={
                            <Box
                                data-tab-index={index}
                                onContextMenu={(e) => handleContextMenu(e, tab)}
                                onMouseDown={(e) => handleTabPointerDown(e, index)}
                                onMouseUp={handleTabPointerUp}
                                onMouseLeave={handleTabPointerUp}
                                onTouchStart={(e) => handleTabPointerDown(e, index)}
                                onTouchEnd={handleTabPointerUp}
                                onTouchCancel={handleTabPointerUp}
                                sx={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: 0.5,
                                    width: '100%',
                                    ...(draggingIndex === index && { opacity: 0.7 }),
                                }}
                            >
                                {tab.path === '/dashboard' && (
@@ -297,19 +571,24 @@
                                <span>{getTabLabel(tab)}</span>
                                {tab.closable && (
                                    <Tooltip title="关闭">
                                        <IconButton
                                            size="small"
                                        <Box
                                            component="span"
                                            onClick={(e) => handleCloseTab(e, tab.path)}
                                            sx={{
                                                display: 'inline-flex',
                                                alignItems: 'center',
                                                justifyContent: 'center',
                                                p: 0.25,
                                                ml: 0.5,
                                                borderRadius: '50%',
                                                cursor: 'pointer',
                                                '&:hover': {
                                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
                                                },
                                            }}
                                        >
                                            <CloseIcon sx={{ fontSize: 14 }} />
                                        </IconButton>
                                        </Box>
                                    </Tooltip>
                                )}
                            </Box>
@@ -357,6 +636,54 @@
                    </Tooltip>
                </Box>
            )}
            {/* 右键菜单 */}
            <Menu
                open={contextMenu !== null}
                onClose={handleCloseContextMenu}
                anchorReference="anchorPosition"
                anchorPosition={
                    contextMenu !== null
                        ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
                        : undefined
                }
                disableScrollLock
                ModalProps={{
                    disablePortal: true,
                    BackdropProps: { sx: { pointerEvents: 'none' } }, // 不拦右键，便于再右键另一个标签
                }}
                PaperProps={{
                    ref: menuPaperRef,
                    sx: {
                        minWidth: 120,
                        borderRadius: '8px',
                        boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
                        mt: 0.5,
                        py: 0.5,
                    },
                }}
                MenuListProps={{ sx: { py: 0 } }}
            >
                {/*{contextMenuTab && contextMenuTab.closable && (*/}
                {/*    <MenuItem onClick={handleCloseCurrentTab} sx={{ fontSize: '0.8125rem', py: 0.75, px: 1.5, minHeight: 'auto' }}>*/}
                {/*        {t('ra.action.close', '关闭当前标签')}*/}
                {/*    </MenuItem>*/}
                {/*)}*/}
                {contextMenuTab && canCloseLeftForTab(contextMenuTab.path) && (
                    <MenuItem onClick={handleCloseLeftTabs} sx={{ fontSize: '0.8125rem', py: 0.75, px: 1.5, minHeight: 'auto' }}>
                        {t('ra.action.closeLeft', '关闭左侧标签')}
                    </MenuItem>
                )}
                {contextMenuTab && canCloseRightForTab(contextMenuTab.path) && (
                    <MenuItem onClick={handleCloseRightTabs} sx={{ fontSize: '0.8125rem', py: 0.75, px: 1.5, minHeight: 'auto' }}>
                        {t('ra.action.closeRight', '关闭右侧标签')}
                    </MenuItem>
                )}
                {contextMenuTab && canCloseOthersForTab(contextMenuTab.path) && (
                    <MenuItem onClick={handleCloseOtherTabs} sx={{ fontSize: '0.8125rem', py: 0.75, px: 1.5, minHeight: 'auto' }}>
                        {t('ra.action.closeOthers', '关闭其他标签')}
                    </MenuItem>
                )}
            </Menu>
        </Box>
    );
};