@jiangood/open-admin 3.1.8 → 3.1.10

package/src/layouts/admin/AdminTabs.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {CloseOutlined} from '@ant-design/icons';
+import {CloseOutlined, DownOutlined} from '@ant-design/icons';
+import {Dropdown} from 'antd';
 import {ContextMenu} from '../../framework';
 import './AdminTabs.less';
 
@@ -7,6 +8,88 @@ export class AdminTabs extends React.Component {
     state = {
         contextMenu: null,
         contextMenuTabKey: null,
+        overflowing: false,
+    };
+
+    barRef = React.createRef();
+    activeTabRef = React.createRef();
+    resizeObserver = null;
+
+    componentDidMount() {
+        this.scrollActiveIntoView();
+        this.updateOverflow();
+        this.observeOverflow();
+        this.barRef.current?.addEventListener('wheel', this.handleWheel, {passive: false});
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.activeKey !== this.props.activeKey) {
+            this.scrollActiveIntoView();
+        }
+        this.updateOverflow();
+    }
+
+    componentWillUnmount() {
+        this.resizeObserver?.disconnect();
+        this.barRef.current?.removeEventListener('wheel', this.handleWheel);
+    }
+
+    observeOverflow = () => {
+        if (typeof ResizeObserver === 'undefined' || !this.barRef.current) return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateOverflow();
+            // 窗口变窄后激活标签可能被挤出可视区，跟随重新定位
+            this.scrollActiveIntoView();
+        });
+        this.resizeObserver.observe(this.barRef.current);
+    };
+
+    /** 标签总宽是否超过条带可用宽度（不含溢出时给按钮预留的 padding） */
+    isOverflowing = () => {
+        const bar = this.barRef.current;
+        if (!bar) return false;
+        const tabsWidth = [...bar.querySelectorAll('.admin-tab')]
+            .reduce((sum, tab) => sum + tab.getBoundingClientRect().width, 0);
+        // 基础左右 padding 各 8px；溢出时额外加的 40px 不参与判断，避免无法恢复
+        return tabsWidth > bar.clientWidth - 16 + 1;
+    };
+
+    /** 标签超出可视宽度时显示右侧「全部标签」入口 */
+    updateOverflow = () => {
+        const overflowing = this.isOverflowing();
+        if (overflowing !== this.state.overflowing) {
+            this.setState({overflowing});
+        }
+    };
+
+    /** 竖向滚轮在标签栏上转为横向滚动，避免标签被隐藏时无操作入口 */
+    handleWheel = e => {
+        const bar = this.barRef.current;
+        if (!bar || !this.isOverflowing()) return;
+        if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+        bar.scrollLeft += e.deltaY;
+        e.preventDefault();
+    };
+
+    /** 激活的标签被滚动到可视区外时（标签过多），横向带入视野 */
+    scrollActiveIntoView = () => {
+        const bar = this.barRef.current;
+        const tab = this.activeTabRef.current;
+        if (!bar || !tab) return;
+        const margin = 8;
+        // 溢出时右侧有「全部标签」按钮，避免激活标签滚到按钮下面
+        const rightMargin = this.isOverflowing() ? 44 : margin;
+        const barRect = bar.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        let delta = 0;
+        if (tabRect.left < barRect.left + margin) {
+            delta = tabRect.left - barRect.left - margin;
+        } else if (tabRect.right > barRect.right - rightMargin) {
+            delta = tabRect.right - barRect.right + rightMargin;
+        }
+        if (delta !== 0) {
+            bar.scrollTo({left: bar.scrollLeft + delta, behavior: 'smooth'});
+        }
     };
 
     handleContextMenu = (e, key) => {
@@ -34,39 +117,64 @@ export class AdminTabs extends React.Component {
 
     render() {
         const {tabs, activeKey, onChange, onClose} = this.props;
-        const {contextMenu} = this.state;
+        const {contextMenu, overflowing} = this.state;
 
         return (
             <>
-                <div className="admin-tabs-bar">
-                    {tabs.map(tab => (
-                        <div
-                            key={tab.key}
-                            className={`admin-tab${tab.key === activeKey ? ' active' : ''}`}
-                            role="tab"
-                            tabIndex={tab.key === activeKey ? 0 : -1}
-                            aria-selected={tab.key === activeKey}
-                            onClick={() => onChange(tab.key)}
-                            onKeyDown={e => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault();
-                                    onChange(tab.key);
-                                }
-                            }}
-                            onContextMenu={e => this.handleContextMenu(e, tab.key)}
-                        >
-                            <span className="admin-tab-label">{tab.label}</span>
-                            {tabs.length > 1 && (
-                                <CloseOutlined
-                                    className="admin-tab-close"
-                                    onClick={e => {
-                                        e.stopPropagation();
-                                        onClose(tab.key);
-                                    }}
-                                />
-                            )}
-                        </div>
-                    ))}
+                <div className={`admin-tabs-wrap${overflowing ? ' overflowing' : ''}`}>
+                    <div className="admin-tabs-bar" ref={this.barRef}>
+                        {tabs.map(tab => (
+                            <div
+                                key={tab.key}
+                                ref={tab.key === activeKey ? this.activeTabRef : null}
+                                className={`admin-tab${tab.key === activeKey ? ' active' : ''}`}
+                                role="tab"
+                                title={tab.label}
+                                tabIndex={tab.key === activeKey ? 0 : -1}
+                                aria-selected={tab.key === activeKey}
+                                onClick={() => onChange(tab.key)}
+                                onKeyDown={e => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        onChange(tab.key);
+                                    }
+                                }}
+                                onContextMenu={e => this.handleContextMenu(e, tab.key)}
+                            >
+                                <span className="admin-tab-label">{tab.label}</span>
+                                {tabs.length > 1 && (
+                                    <CloseOutlined
+                                        className="admin-tab-close"
+                                        onClick={e => {
+                                            e.stopPropagation();
+                                            onClose(tab.key);
+                                        }}
+                                    />
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                    {overflowing && (
+                        <>
+                            <div className="admin-tabs-fade"/>
+                            <Dropdown
+                                trigger={['click']}
+                                placement="bottomRight"
+                                menu={{
+                                    items: tabs.map(tab => ({key: tab.key, label: tab.label})),
+                                    selectable: true,
+                                    selectedKeys: [activeKey],
+                                    onClick: ({key}) => onChange(key),
+                                    style: {maxHeight: 320, overflowY: 'auto'},
+                                }}
+                            >
+                                <button type="button" className="admin-tabs-more" title="全部标签"
+                                        aria-label="全部标签">
+                                    <DownOutlined/>
+                                </button>
+                            </Dropdown>
+                        </>
+                    )}
                 </div>
                 {contextMenu && (
                     <ContextMenu

package/src/layouts/admin/AdminTabs.less

@@ -1,10 +1,23 @@
+.admin-tabs-wrap {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    min-width: 0;
+}
+
 .admin-tabs-bar {
     display: flex;
     flex-wrap: nowrap;
+    align-items: stretch;
     overflow-x: auto;
     overflow-y: hidden;
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--oa-color-border, #e8e8e8);
+    scrollbar-width: none;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: var(--oa-control-height, 32px);
+    padding: 0 8px;
+    /* 条带与顶栏同色，和灰色页面拉开层次；底线用 inset 阴影绘制，选中标签可盖住 */
+    box-shadow: inset 0 -1px 0 var(--oa-color-border, #e8e8e8);
     background: var(--oa-color-bg-container, #fff);
 
     &::-webkit-scrollbar {
@@ -14,28 +27,38 @@
     .admin-tab {
         display: inline-flex;
         align-items: center;
-        gap: 4px;
-        padding: 0 12px;
-        height: var(--oa-control-height, 32px);
-        line-height: var(--oa-control-height, 32px);
+        gap: 6px;
+        padding: 0 8px 0 10px;
         font-size: 13px;
+        line-height: 1.4;
         cursor: pointer;
-        border-right: 1px solid var(--oa-color-border, #e8e8e8);
         white-space: nowrap;
         color: var(--oa-color-text-secondary, rgba(0, 0, 0, 0.65));
-        background: var(--oa-color-fill, #fafafa);
-        transition: color 0.2s, background 0.2s;
-        position: relative;
+        background: transparent;
+        /* 方形标签，标签之间仅用 1px 竖线分隔，贴近系统 / IDEA 原生观感 */
+        border-radius: 0;
+        transition: color 0.15s, background 0.15s;
         flex-shrink: 0;
 
+        /* 分隔线画在相邻标签之间，条带首尾不留多余竖线 */
+        & + .admin-tab {
+            border-left: 1px solid var(--oa-color-border, #e8e8e8);
+        }
+
         &:hover {
-            color: var(--primary-color);
+            color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
+            background: var(--oa-color-fill, rgba(0, 0, 0, 0.06));
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--primary-color, #1677ff);
+            outline-offset: -2px;
         }
 
         &.active {
-            color: var(--primary-color);
-            background: var(--oa-color-bg-container, #fff);
-            font-weight: 500;
+            /* IDEA 式：选中标签用页面底色盖住条带底线，文字用主色点明选中项 */
+            color: var(--primary-color, #1677ff);
+            background: var(--oa-color-bg-layout, #f5f5f5);
         }
 
         .admin-tab-label {
@@ -53,11 +76,67 @@
             font-size: 12px;
             border-radius: 50%;
             color: var(--oa-color-text-tertiary, rgba(0, 0, 0, 0.45));
+            /* 未选中的标签不常驻关闭按钮，减少视觉噪音 */
+            opacity: 0;
+            transition: opacity 0.15s, background 0.2s, color 0.2s;
 
             &:hover {
                 background: var(--oa-color-fill, rgba(0, 0, 0, 0.08));
                 color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
             }
         }
+
+        &:hover .admin-tab-close,
+        &.active .admin-tab-close {
+            opacity: 1;
+        }
+    }
+}
+
+/* 标签溢出：右侧渐隐 + 全部标签入口，改由按钮触发下拉 */
+.admin-tabs-wrap.overflowing {
+    .admin-tabs-bar {
+        /* 给右侧按钮让位，滚到最右时最后一个标签不会被遮住 */
+        padding-right: 40px;
+    }
+
+    .admin-tabs-fade {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 1px;
+        width: 44px;
+        pointer-events: none;
+        background: linear-gradient(to right, transparent, var(--oa-color-bg-container, #fff) 68%);
+    }
+
+    .admin-tabs-more {
+        position: absolute;
+        top: 50%;
+        right: 6px;
+        transform: translateY(-50%);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        border: none;
+        border-radius: var(--oa-border-radius, 6px);
+        background: var(--oa-color-bg-container, #fff);
+        color: var(--oa-color-text-secondary, rgba(0, 0, 0, 0.65));
+        font-size: 12px;
+        cursor: pointer;
+        transition: background 0.15s, color 0.15s;
+
+        &:hover {
+            background: var(--oa-color-fill, rgba(0, 0, 0, 0.06));
+            color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--primary-color, #1677ff);
+            outline-offset: -2px;
+        }
     }
 }

package/src/layouts/admin/index.jsx

@@ -202,6 +202,8 @@ export default class AdminLayout extends React.Component {
 
     render() {
         const {siteInfo, loginInfo} = this.state
+        // 侧栏空间有限，优先显示系统简称；未配置时回退完整标题
+        const siderTitle = (siteInfo.shortTitle || '').trim() || siteInfo.title || '首页';
 
 return <Layout className='main-layout'>
              {/* 侧栏单独套暗色算法，使分割线/边框在深色底上可见，并按预设覆盖侧栏底色 */}
@@ -217,7 +219,8 @@ return <Layout className='main-layout'>
                             <img src="./logo.png" alt={siteInfo.title || '首页'}/>
                         </button>
                         <h3 className='hide-on-mobile'>
-                            <Link to="/" style={{color: 'var(--oa-sider-text, rgba(255,255,255,0.85))'}}>{siteInfo.title}</Link>
+                            <Link to="/" title={siteInfo.title || siderTitle}
+                                  style={{color: 'var(--oa-sider-text, rgba(255,255,255,0.85))'}}>{siderTitle}</Link>
                         </h3>
                     </div>
                     {this.renderLeftMenu()}

package/src/layouts/admin/index.less

@@ -61,13 +61,13 @@
         font: inherit;
 
         &:hover {
-          color: var(--primary-color, #1677ff);
+          /* hover 只给底色，主色保留给当前项，避免悬停项比 active 更抢眼 */
+          color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
           background: var(--oa-color-fill, rgba(0, 0, 0, 0.06));
         }
 
         &.active {
           color: var(--primary-color, #1677ff);
-          box-shadow: inset 0 -2px 0 var(--primary-color, #1677ff);
         }
       }
     }

package/src/layouts/index.tsx

@@ -3,8 +3,8 @@ import {App, ConfigProvider, Modal} from "antd";
 import zhCN from 'antd/locale/zh_CN';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import {ErrorBoundary, GlobalData, HttpClient, PageFrame, PageLoading, PageUtils, history, getThemeConfig, getThemeMode, setThemeColors, setMessageApi, EventBus} from "../framework";
-import type {ThemeColors} from "../framework";
+import {ErrorBoundary, GlobalData, HttpClient, LOGIN_EXPIRED_REASON_CONCURRENT_LOGIN, PageFrame, PageLoading, PageUtils, history, getThemeConfig, getThemeMode, setThemeColors, setMessageApi, EventBus} from "../framework";
+import type {LoginExpiredPayload, ThemeColors} from "../framework";
 
 import AdminLayout from "./admin"
 
@@ -42,12 +42,15 @@ interface LayoutsProps {
     colors?: Partial<ThemeColors>;
 }
 
+const DEFAULT_LOGIN_EXPIRED_MESSAGE = '登录已过期，请重新登录';
+
 export class Layouts extends React.Component<LayoutsProps> {
     state = {
         location: history.location,
         siteInfoLoaded: false,
         loginChecked: false,
         loginExpiredVisible: false,
+        loginExpiredMessage: DEFAULT_LOGIN_EXPIRED_MESSAGE,
         themeMode: getThemeMode(),
         themeVersion: 0,
     };
@@ -56,6 +59,8 @@ export class Layouts extends React.Component<LayoutsProps> {
     unsubscribeLoginExpired: (() => void) | null = null;
     unsubscribeLogoutSuccess: (() => void) | null = null;
     unsubscribeTheme: (() => void) | null = null;
+    /** 本次登录失效弹窗的原因。同步字段（非 state）：同一次失效会并发上报多个 401，setState 异步可能读到旧值 */
+    private loginExpiredReason: string = '';
 
     constructor(props: LayoutsProps) {
         super(props);
@@ -66,6 +71,29 @@ export class Layouts extends React.Component<LayoutsProps> {
         this.setState({location});
     };
 
+    /**
+     * 处理登录失效事件并从后端载荷解析弹窗文案。
+     * 一次登录失效会并发触发多个请求（各自返回 401、各自上报），已经拿到更具体的原因（并发被顶下线）时不再降级，
+     * 避免后到的通用 401 覆盖掉「已在别处登录」文案
+     */
+    onLoginExpired = (payload?: LoginExpiredPayload) => {
+        const concurrent = payload?.reason === LOGIN_EXPIRED_REASON_CONCURRENT_LOGIN;
+        if (this.loginExpiredReason === LOGIN_EXPIRED_REASON_CONCURRENT_LOGIN && !concurrent) {
+            this.setState({loginExpiredVisible: true});
+            return;
+        }
+        this.loginExpiredReason = concurrent ? LOGIN_EXPIRED_REASON_CONCURRENT_LOGIN : '';
+        this.setState({
+            loginExpiredVisible: true,
+            loginExpiredMessage: this.resolveLoginExpiredMessage(payload),
+        });
+    };
+
+    closeLoginExpiredModal = () => {
+        this.loginExpiredReason = '';
+        this.setState({loginExpiredVisible: false});
+    };
+
     getPageType(pathname): 'public' | 'standalone' | 'protected' {
         if (pathname === '/' || pathname === '/index') return 'protected';
         if (pathname.startsWith('/public/')) return 'public';
@@ -116,11 +144,7 @@ export class Layouts extends React.Component<LayoutsProps> {
 
     componentDidMount() {
         this.unlisten = history.listen(this.onLocationChange);
-        this.unsubscribeLoginExpired = EventBus.on('loginExpired', () => {
-            if (!this.state.loginExpiredVisible) {
-                this.setState({loginExpiredVisible: true});
-            }
-        });
+        this.unsubscribeLoginExpired = EventBus.on('loginExpired', this.onLoginExpired);
         this.unsubscribeLogoutSuccess = EventBus.on('logoutSuccess', () => {
             this.setState({loginChecked: false});
         });
@@ -154,6 +178,18 @@ export class Layouts extends React.Component<LayoutsProps> {
         }
     }
 
+    /**
+     * 解析登录失效弹窗文案：
+     * - 并发被顶下线：优先用后端随 401 下发的文案（sys.concurrent-login-message）
+     * - 其它（空闲超时/未登录）：用站点信息里的文案（sys.login-expired-message）
+     */
+    resolveLoginExpiredMessage(payload?: LoginExpiredPayload): string {
+        if (payload?.reason === LOGIN_EXPIRED_REASON_CONCURRENT_LOGIN && payload.message) {
+            return payload.message;
+        }
+        return GlobalData.getSiteInfo().loginExpiredMessage || payload?.message || DEFAULT_LOGIN_EXPIRED_MESSAGE;
+    }
+
     render() {
         const {location, siteInfoLoaded, loginChecked} = this.state;
         const {pathname, search} = location;
@@ -190,12 +226,13 @@ export class Layouts extends React.Component<LayoutsProps> {
     renderLoginExpiredModal() {
         return (
             <Modal open={this.state.loginExpiredVisible} title="确认操作" okText="确定"
-                   onCancel={() => this.setState({loginExpiredVisible: false})}
+                   onCancel={this.closeLoginExpiredModal}
                    onOk={() => {
-                       this.setState({loginExpiredVisible: false, loginChecked: false});
+                       this.closeLoginExpiredModal();
+                       this.setState({loginChecked: false});
                        PageUtils.redirectToLogin();
                    }}>
-                登录已过期，请重新登录
+                {this.state.loginExpiredMessage}
             </Modal>
         );
     }