@jiangood/open-admin 2.0.1 → 2.2.5

package/src/layouts/admin/TabPageRender.jsx

@@ -1,173 +1,153 @@
-import React from "react";
-import {withRouter} from "umi";
-import {Tabs} from "antd";
+import React, {useState, useEffect, useRef} from "react";
+import {history} from "umi";
 import {PageRender} from "../PageRender";
-import {PageUtils} from "../../framework";
+import {UrlUtils} from "../../framework";
 
 const MAX_TABS = 20;
 
-class TabPageRenderComponent extends React.Component {
-
-    state = {
-        active: null,
-        urlLabelMap: {},
-        tabs: [],
-    }
-
-    accessOrder = [];
-
-    componentDidMount() {
-        const url = this.getUrl(this.props)
-        this.onUrlChange(url);
-
-        document.addEventListener('close-page-event', (e)=>{
-            const url = e.detail.url
-            this.onRemove(url)
-        })
-    }
-
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        const url = this.getUrl(this.props)
-        const pUrl = this.getUrl(prevProps)
-
-        if (url !== pUrl) {
-            this.onUrlChange(url);
-        }
-    }
-
-    recordAccess(url) {
-        this.accessOrder = this.accessOrder.filter(k => k !== url);
-        this.accessOrder.push(url);
-    }
+function getLabel(pathname, search, pathMenuMap) {
+    if (pathname === '/') return '首页';
+    const params = UrlUtils.getParams(search);
+    if (params._label) return params._label;
+    const menu = pathMenuMap[pathname];
+    if (menu) return menu.name;
+    return '临时';
+}
 
-    onUrlChange = url => {
-        const {location} = this.props
-        const {pathname, search} = location
-        const {tabs} = this.state
+export function TabPageRender({pathMenuMap}) {
+    const [tabs, setTabs] = useState([]);
+    const [activeKey, setActiveKey] = useState(null);
+    const accessOrderRef = useRef([]);
+    const lastClickTimeRef = useRef({});
+    const activeKeyRef = useRef(activeKey);
+    activeKeyRef.current = activeKey;
+    const pathMenuMapRef = useRef(pathMenuMap);
+    pathMenuMapRef.current = pathMenuMap;
+
+    const recordAccess = (key) => {
+        accessOrderRef.current = accessOrderRef.current.filter(k => k !== key);
+        accessOrderRef.current.push(key);
+    };
 
-        const old = tabs.find(t => t.key === url)
-        if (old == null) {
-            const cmp = <PageRender pathname={pathname} search={search}/>
-            const label = this.getLabel(pathname);
-            tabs.push({
-                key: url,
-                label: label,
-                children: cmp
+    // Use history.listen to monitor route changes
+    useEffect(() => {
+        const unlisten = history.listen(({location}) => {
+            const {pathname, search} = location;
+            const key = pathname + (search || '');
+            recordAccess(key);
+
+            setTabs(prev => {
+                if (prev.find(t => t.key === key)) return prev;
+                const content = <PageRender pathname={pathname}/>;
+                const label = getLabel(pathname, search, pathMenuMapRef.current);
+                const next = [...prev, {key, label, closable: true, content}];
+                if (next.length > MAX_TABS) {
+                    const keep = new Set([key, ...accessOrderRef.current.slice(-3)]);
+                    const removeIdx = next.findIndex(t => !keep.has(t.key));
+                    if (removeIdx > -1) next.splice(removeIdx, 1);
+                }
+                return next;
             });
 
-            if (tabs.length > MAX_TABS) {
-                const keep = new Set([url, ...this.accessOrder.slice(-3)]);
-                const removeIdx = tabs.findIndex(t => !keep.has(t.key));
-                if (removeIdx > -1) {
-                    tabs.splice(removeIdx, 1);
+            setActiveKey(key);
+        });
+
+        // Trigger for initial route
+        const {pathname, search} = history.location;
+        const key = pathname + (search || '');
+        recordAccess(key);
+        setTabs([{key, label: getLabel(pathname, search, pathMenuMap), closable: false, content: <PageRender pathname={pathname}/>}]);
+        setActiveKey(key);
+
+        return unlisten;
+    }, []);
+
+    // Listen for close-page-event (stable listener, no re-registration)
+    useEffect(() => {
+        const handler = (e) => {
+            const url = e.detail.url;
+            setTabs(prev => {
+                const next = prev.filter(t => t.key !== url);
+                accessOrderRef.current = accessOrderRef.current.filter(k => k !== url);
+                if (url === activeKeyRef.current && next.length > 0) {
+                    history.push(next[next.length - 1].key);
                 }
-            }
-
-            this.setState({tabs: [...tabs]})
-        }else {
-            const menu = this.props.pathMenuMap[pathname]
-            if (menu && menu.refreshOnTabClick) {
-                this.refresh(pathname)
-            }
-        }
-
-        this.recordAccess(url);
-        this.setState({active: url})
-    };
-
-    getLabel(path) {
-        if (path === '/') {
-            return '首页'
-        }
-        const label = PageUtils.currentLabel();
-
-        if (!label) {
-            const menu = this.props.pathMenuMap[path]
-            if (menu) {
-                return menu.name
-            }
-        }
-
-        return label;
-    }
-
-
-    render() {
-        const {tabs} = this.state
-        if (tabs.length === 0) {
-            return null
-        }
-
-        return <>
-            <Tabs
-                items={tabs}
-                activeKey={this.state.active}
-                onChange={this.onChange}
-                onEdit={this.onRemove}
-
-                hideAdd
-                size='small'
-                type='editable-card'
-                style={{background: 'white'}}
-                rootClassName='tmgg-layout-tabs'
-
-                onTabClick={this.onTabClick}
-
-            >
-            </Tabs>
-        </>
-    }
-
-    lastTabClickTime = 0
-    onTabClick = (key, event) => {
-        const now = new Date().getTime();
-        const doubleClick = now - this.lastTabClickTime < 300;
-        if (doubleClick) {
-            this.refresh(key);
+                return next;
+            });
+        };
+        document.addEventListener('close-page-event', handler);
+        return () => document.removeEventListener('close-page-event', handler);
+    }, []);
+
+    const handleTabClick = (key) => {
+        const now = Date.now();
+        const last = lastClickTimeRef.current[key] || 0;
+        lastClickTimeRef.current[key] = now;
+        if (now - last < 300) {
+            // Double click → refresh
+            setTabs(prev => {
+                const idx = prev.findIndex(t => t.key === key);
+                if (idx === -1) return prev;
+                const originalContent = prev[idx].content;
+                const next = [...prev];
+                next[idx] = {...next[idx], content: '刷新中...'};
+                requestAnimationFrame(() => {
+                    setTabs(prev2 => {
+                        const idx2 = prev2.findIndex(t => t.key === key);
+                        if (idx2 === -1) return prev2;
+                        const next2 = [...prev2];
+                        next2[idx2] = {...next2[idx2], content: originalContent};
+                        return next2;
+                    });
+                });
+                return next;
+            });
+        } else if (key !== activeKey) {
+            history.push(key);
         }
-
-        this.lastTabClickTime = now
     };
 
-    refresh = key => {
-        const tabs = this.state.tabs;
-        const tab = tabs.find(t => t.key === key)
-        if(tab != null){
-            const old = tab.children
-            if(old != null){
-                tab.children = '刷新中...'
-                this.setState({tabs}, () => {
-                    tab.children = old
-                    this.setState({tabs})
-                })
+    const handleClose = (key, e) => {
+        e.stopPropagation();
+        setTabs(prev => {
+            const next = prev.filter(t => t.key !== key);
+            accessOrderRef.current = accessOrderRef.current.filter(k => k !== key);
+            if (key === activeKeyRef.current && next.length > 0) {
+                history.push(next[next.length - 1].key);
             }
-        }
+            return next;
+        });
     };
 
-    onChange = url => {
-        if (url !== this.state.active) {
-            this.props.history.push(url)
-        }
-    };
-
-    onRemove = url => {
-        let {tabs} = this.state
-        tabs = tabs.filter(t => t.key !== url)
-        this.accessOrder = this.accessOrder.filter(k => k !== url);
-
-        this.setState({tabs})
-        if (tabs.length > 0) {
-            this.setState({active: tabs[tabs.length - 1].key})
-        }
-    };
-
-    getUrl = props => {
-        const {location} = props
-        const {pathname, search} = location
-        return pathname + search;
-    }
-
-}
-
-
-export const TabPageRender = withRouter(TabPageRenderComponent)
+    if (tabs.length === 0) return null;
+
+    return (
+        <div className="oa-tabs">
+            <div className="oa-tab-bar">
+                {tabs.map(tab => (
+                    <div
+                        key={tab.key}
+                        className={'oa-tab' + (tab.key === activeKey ? ' active' : '')}
+                        onClick={() => handleTabClick(tab.key)}
+                    >
+                        <span className="oa-tab-label">{tab.label}</span>
+                        {tab.closable && tabs.length > 1 && (
+                            <span className="oa-tab-close" onClick={(e) => handleClose(tab.key, e)}>×</span>
+                        )}
+                    </div>
+                ))}
+            </div>
+            <div className="oa-tabs-content">
+                {tabs.map(tab => (
+                    <div
+                        key={tab.key}
+                        style={{display: tab.key === activeKey ? undefined : 'none'}}
+                        className="oa-tab-pane"
+                    >
+                        {tab.content}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/layouts/admin/index.jsx

@@ -25,6 +25,9 @@ export default class extends React.Component {
 
         currentMenuKey: null,
 
+        topMenus: [],
+        sideMenus: [],
+        activeTopMenuKey: null,
 
         siteInfo: {},
 
@@ -55,24 +58,130 @@ export default class extends React.Component {
                 item.icon = <NamedIcon name={item.icon || 'AppstoreOutlined'} style={{fontSize: 12}}/>
             })
 
+            const {topMenus} = this.classifyMenus(menuTree);
+
+            // 确定当前活跃的顶部菜单和侧边菜单
+            let activeTopMenuKey = null;
+            let sideMenus = [];
+            let currentMenuKey = null;
+
             if (pathname !== "" && pathname !== "/") {
-                const menu = pathMenuMap[pathname]
-                if (menu) {
-                    this.setState({currentMenuKey: menu.key})
+                const menuDef = pathMenuMap[pathname];
+                if (menuDef) {
+                    currentMenuKey = menuDef.id;
+                    const matched = this.findActiveTopMenu(topMenus, menuDef, menuMap);
+                    if (matched) {
+                        activeTopMenuKey = matched.key;
+                        sideMenus = matched.children || [];
+                    }
                 }
             }
 
-            this.setState({menuTree, pathMenuMap})
+            // 默认选中第一个顶部菜单
+            if (!activeTopMenuKey && topMenus.length > 0) {
+                activeTopMenuKey = topMenus[0].key;
+                sideMenus = topMenus[0].children || [];
+                if (!currentMenuKey && sideMenus.length > 0) {
+                    currentMenuKey = sideMenus[0].key;
+                    if (sideMenus[0].path) {
+                        history.push(sideMenus[0].path);
+                    }
+                }
+            }
+
+            this.setState({menuTree, pathMenuMap, topMenus, sideMenus, activeTopMenuKey, currentMenuKey})
 
             this.loadBadge(menuMap)
+        }).catch(err => {
+            console.error('加载菜单失败:', err)
+            this.setState({menuTree: [], topMenus: [], sideMenus: []})
         }).finally(()=>{
             this.setState({menuLoading: false})
         })
+    }
+    actionRef = React.createRef()
+
+    classifyMenus = (menuTree) => {
+        const topMenus = [];
+        const leafRootNodes = [];
 
+        (menuTree || []).forEach(node => {
+            const isDir = node.type === 'directory' || (node.children && node.children.length > 0);
+            if (isDir) {
+                topMenus.push(node);
+            } else {
+                leafRootNodes.push(node);
+            }
+        });
+
+        if (leafRootNodes.length > 0) {
+            const defaultGroup = {
+                key: '_default_group',
+                label: '默认',
+                title: '默',
+                icon: <NamedIcon name="AppstoreOutlined" style={{fontSize: 12}}/>,
+                children: leafRootNodes,
+                type: 'directory',
+            };
+            topMenus.unshift(defaultGroup);
+        }
 
+        return {topMenus};
     }
-    actionRef = React.createRef()
 
+    findActiveTopMenu = (topMenus, menuDef, menuMap) => {
+        if (!menuDef) return null;
+
+        // 从 menuDef 的 pid 链向上查找匹配的 topMenu
+        let pid = menuDef.pid || menuDef.parentKey;
+        while (pid) {
+            const match = topMenus.find(t => t.key === pid);
+            if (match) return match;
+            const parent = menuMap[pid];
+            pid = parent ? (parent.pid || parent.parentKey) : null;
+        }
+        return null;
+    }
+
+    onTopMenuClick = ({key}) => {
+        const topMenu = this.state.topMenus.find(t => t.key === key);
+        if (!topMenu) return;
+
+        const sideMenus = topMenu.children || [];
+        this.setState({activeTopMenuKey: key, sideMenus});
+
+        if (sideMenus.length > 0 && sideMenus[0].path) {
+            this.setState({currentMenuKey: sideMenus[0].key});
+            history.push(sideMenus[0].path);
+        }
+    }
+
+    onLeftMenuClick = ({key}) => {
+        const menu = this.state.menuMap[key];
+        if (!menu) return;
+        const {path} = menu;
+        this.setState({currentMenuKey: key});
+        history.push(path);
+    }
+
+    renderTopMenu = () => {
+        if (this.state.menuLoading) return null;
+        const {topMenus, activeTopMenuKey} = this.state;
+        if (!topMenus || topMenus.length === 0) return null;
+        return (
+            <nav className="top-nav">
+                {topMenus.map(item => (
+                    <span
+                        key={item.key}
+                        className={'top-nav-item' + (item.key === activeTopMenuKey ? ' active' : '')}
+                        onClick={() => this.onTopMenuClick({key: item.key})}
+                    >
+                        {item.label}
+                    </span>
+                ))}
+            </nav>
+        );
+    }
 
     loadBadge = menuMap => {
         for (let id in menuMap) {
@@ -88,7 +197,8 @@ export default class extends React.Component {
                     menu.icon = <Badge dot count={rs} size={"small"}>{menu.icon}</Badge>
                     this.setState({menuTree: [...menuTree]})
                 }
-
+            }).catch(e => {
+                console.error('[Layout] 加载消息数失败:', e);
             })
         }
     };
@@ -97,7 +207,7 @@ export default class extends React.Component {
     render() {
         const {siteInfo, loginInfo} = this.state
 
-        return <Layout className='main-layout'>
+        return <Layout className='main-layout' style={{'--primary-color': ThemeUtils.getColor("primary-color"), '--primary-color-click': ThemeUtils.getColor("primary-color-click")}}>
             <Header className='header'>
                 <div className='header-left'>
                     {siteInfo.showLogo !== false && siteInfo.logoUrl &&
@@ -107,10 +217,11 @@ export default class extends React.Component {
                     </h3>
 
                 </div>
+                {this.renderTopMenu()}
                 <HeaderRight/>
             </Header>
 
-            <Layout style={{height: '100%'}}>
+            <Layout style={{flex: 1, overflow: 'hidden'}}>
                 <Sider id='left-sider'
                        collapsible
                        breakpoint={'md'}
@@ -137,17 +248,12 @@ export default class extends React.Component {
         if(this.state.menuLoading){
             return <div style={{padding: 16}}><Skeleton active title={false} paragraph={{rows: 8}} /></div>;
         }
-        return <Menu items={this.state.menuTree}
+        return <Menu items={this.state.sideMenus}
                      theme='dark'
                      mode="inline"
                      className='left-menu'
-                     onClick={({key}) => {
-                         const menu = this.state.menuMap[key]
-                         const {path} = menu;
-                         this.setState({currentMenuKey: key})
-                         history.push(path)
-                     }}
-                     selectedKeys={[this.state.currentMenuKey]}
+                     onClick={this.onLeftMenuClick}
+                     selectedKeys={this.state.currentMenuKey ? [this.state.currentMenuKey] : []}
                      inlineIndent={16}
         >
         </Menu>;
@@ -155,9 +261,7 @@ export default class extends React.Component {
 
     renderCenterContent = () => {
         const {siteInfo, loginInfo} = this.state
-        if (this.state.menuTree.length === 0) { // 加载菜单中
-            return <Skeleton active paragraph={{rows: 10}} style={{padding: 24}} />
-        }
+        // 即使菜单为空也直接显示页面内容，不要一直显示 Skeleton
         const tabPageRenderNode = <TabPageRender pathMenuMap={this.state.pathMenuMap}/>;
         if (siteInfo.waterMark === true) {
             return <Watermark content={[loginInfo.name, loginInfo.account]}>

package/src/layouts/admin/index.less

@@ -1,10 +1,10 @@
 .main-layout {
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
   .header {
     padding: 0 20px;
     height: 48px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid rgb(233, 237, 240);
     background-color: rgb(246, 248, 250);
@@ -14,6 +14,7 @@
       display: flex;
       align-items: center;
       gap: 8px;
+      flex-shrink: 0;
 
       .logo-img {
         height: 38px;
@@ -21,17 +22,48 @@
       }
     }
 
+    .top-nav {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      margin: 0 16px;
+      height: 100%;
+      overflow: hidden;
+
+      .top-nav-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 0 16px;
+        height: 100%;
+        cursor: pointer;
+        color: rgba(0, 0, 0, 0.65);
+        transition: color 0.2s;
+        white-space: nowrap;
+
+        &:hover {
+          color: var(--primary-color, var(--primary-color, #1961AC));
+        }
+
+        &.active {
+          color: var(--primary-color, var(--primary-color, #1961AC));
+          box-shadow: inset 0 -2px 0 var(--primary-color, var(--primary-color, #1961AC));
+        }
+      }
+    }
+
     .header-right {
       line-height: 36px;
       display: flex;
       align-items: center;
+      flex-shrink: 0;
 
       .item {
         padding: 0 0.5rem;
         cursor: pointer;
 
         &:hover {
-          background: #063A69;
+          background: var(--primary-color-click, #124B93);
           color: white;
         }
       }
@@ -59,10 +91,96 @@
   }
 
   #admin-layout-content {
-    .tmgg-layout-tabs {
-      &>.ant-tabs-nav {
-        margin-bottom: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .oa-tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+
+      .oa-tab-bar {
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        flex-shrink: 0;
+        margin-bottom: 0;
+        border-bottom: 1px solid #e8e8e8;
+        background: #fff;
+
+        &::-webkit-scrollbar {
+          height: 0;
+        }
+      }
+
+      .oa-tab {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 0 12px;
+        height: 32px;
+        line-height: 32px;
+        font-size: 13px;
+        cursor: pointer;
+        border-right: 1px solid #e8e8e8;
+        white-space: nowrap;
+        color: rgba(0, 0, 0, 0.65);
+        background: #fafafa;
+        transition: color 0.2s, background 0.2s;
+        position: relative;
+        flex-shrink: 0;
+
+        &:hover {
+          color: var(--primary-color, #1961AC);
+        }
+
+        &.active {
+          color: var(--primary-color, #1961AC);
+          background: #fff;
+          font-weight: 500;
+        }
+
+        .oa-tab-label {
+          max-width: 120px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .oa-tab-close {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 16px;
+          height: 16px;
+          font-size: 12px;
+          line-height: 1;
+          border-radius: 50%;
+          color: rgba(0, 0, 0, 0.45);
+
+          &:hover {
+            background: rgba(0, 0, 0, 0.08);
+            color: rgba(0, 0, 0, 0.88);
+          }
+        }
+      }
+
+      .oa-tabs-content {
+        flex: 1;
+        overflow: hidden;
+
+        .oa-tab-pane {
+          height: 100%;
+        }
       }
     }
   }
 }
+
+@media (max-width: 768px) {
+  .top-nav {
+    display: none !important;
+  }
+}