@jiangood/open-admin 3.1.7 → 3.1.9

package/src/framework/config/themeConfig.ts

@@ -12,7 +12,13 @@ export interface ThemeColors {
     colorWarning?: string;
     colorError?: string;
     colorInfo?: string;
+    /** 页面底色（antd token），仅浅色模式生效；暗色模式请用 darkColorBgLayout */
     colorBgLayout?: string;
+    /**
+     * 暗色模式页面底色（框架自定义字段，非 antd token）。
+     * 不设置时由 antd 暗色算法推导（#000000）。
+     */
+    darkColorBgLayout?: string;
     /** 侧栏底色（深色系）；不设置时使用 antd 默认值 */
     siderBg?: string;
     /** 侧栏子菜单底色；缺省与 siderBg 相同 */
@@ -266,8 +272,22 @@ function getMergedColors(): ThemeColors {
     };
 }
 
-function hasExplicitBgLayout(): boolean {
-    return businessColors?.colorBgLayout != null || getActivePreset()?.colors.colorBgLayout != null;
+/** 页面底色：浅色用 colorBgLayout；暗色只认 darkColorBgLayout，未传则交给 antd 暗色算法推导 */
+function resolveBgLayout(mode: ThemeMode): string | undefined {
+    if (mode === 'dark') {
+        return businessColors?.darkColorBgLayout ?? getActivePreset()?.colors.darkColorBgLayout;
+    }
+    return getMergedColors().colorBgLayout;
+}
+
+let warnedBgLayoutIgnored = false;
+
+/** 暗色模式下浅色 colorBgLayout 被忽略时提示一次，避免业务配置静默失效 */
+function warnIfBgLayoutIgnored() {
+    if (warnedBgLayoutIgnored || currentMode !== 'dark') return;
+    if (businessColors?.colorBgLayout == null || businessColors.darkColorBgLayout != null) return;
+    warnedBgLayoutIgnored = true;
+    console.warn('[open-admin] 暗色模式下 colors.colorBgLayout 不生效，请改用 colors.darkColorBgLayout 指定暗色页面底色。');
 }
 
 function invalidate() {
@@ -295,10 +315,11 @@ function buildConfig(): ThemeConfig {
         colorError: merged.colorError,
         colorInfo: merged.colorInfo,
     };
-    // colorBgLayout 仅浅色模式默认覆盖；暗色模式交给算法推导，避免被强制成浅灰。
-    // 业务/预设显式传入 colorBgLayout 时两种模式都尊重。
-    if (currentMode === 'light' || hasExplicitBgLayout()) {
-        token.colorBgLayout = merged.colorBgLayout;
+    // 页面底色：浅色用 colorBgLayout；暗色只认 darkColorBgLayout，未传则交给算法推导，
+    // 避免业务按浅色习惯传入的浅灰把暗色页面染成浅底。
+    const bgLayout = resolveBgLayout(currentMode);
+    if (bgLayout != null) {
+        token.colorBgLayout = bgLayout;
     }
 
     const resolved = getDesignToken({ token, algorithm } as ThemeConfig);
@@ -377,6 +398,7 @@ function syncCssVars(token: Record<string, unknown>) {
     setVar(el, '--oa-color-text-secondary', token.colorTextSecondary);
     setVar(el, '--oa-color-text-tertiary', token.colorTextTertiary);
     setVar(el, '--oa-color-fill', token.colorFillTertiary);
+    setVar(el, '--oa-color-fill-quaternary', token.colorFillQuaternary);
     setVar(el, '--oa-color-primary-bg', token.colorPrimaryBg);
     setVar(el, '--oa-color-error', token.colorError);
     // 尺寸/圆角变量，供 less 复用，使自定义样式跟随密度与圆角预设
@@ -397,6 +419,7 @@ export function setThemeColors(colors?: Partial<ThemeColors>) {
     businessColors = colors || null;
     invalidate();
     syncCssVars(getToken());
+    warnIfBgLayoutIgnored();
 }
 
 export function getThemeConfig(): ThemeConfig {
@@ -487,6 +510,7 @@ export function setThemeMode(mode: ThemeMode) {
     }
     invalidate();
     syncCssVars(getToken());
+    warnIfBgLayoutIgnored();
     EventBus.emit('themeChange', mode);
 }
 

package/src/framework/fields/BaseRemoteSelect/index.tsx

@@ -21,8 +21,8 @@ export interface BaseRemoteSelectProps {
  * 处理通用的数据加载、防抖搜索、竞态处理、错误提示逻辑。
  * 子类只需覆写 getLoadParams() 和 render()。
  */
-export class BaseRemoteSelect<P extends BaseRemoteSelectProps = BaseRemoteSelectProps> extends React.Component<P, BaseRemoteSelectState> { // NOSONAR: state/防抖字段构造器赋值
-    private fetchIdRef: number = 0; // NOSONAR: 构造器中赋值
+export class BaseRemoteSelect<P extends BaseRemoteSelectProps = BaseRemoteSelectProps> extends React.Component<P, BaseRemoteSelectState> {
+    private fetchIdRef: number = 0;
     private loadDataDebounce: ReturnType<typeof debounce>;
 
     static readonly defaultProps = {
@@ -117,14 +117,14 @@ export class BaseRemoteSelect<P extends BaseRemoteSelectProps = BaseRemoteSelect
 
     // ========== Helper 方法 ==========
 
-    getShowSearch(): { filterOption: false; onSearch: (value: string) => void } { // NOSONAR: 由子类通过 this.getShowSearch() 调用
+    getShowSearch(): { filterOption: false; onSearch: (value: string) => void } {
         return {
             filterOption: false,
             onSearch: this.handleSearch,
         };
     }
 
-    getNotFoundContent(): React.ReactNode { // NOSONAR: 由子类通过 this.getNotFoundContent() 调用
+    getNotFoundContent(): React.ReactNode {
         return this.state.loading ? <Spin size="small" /> : '数据为空';
     }
 }

package/src/framework/fields/FieldDateRange/index.tsx

@@ -11,7 +11,7 @@ import type {FieldProps} from '../types';
 const SP = StringUtils.ISO_SPLITTER;
 
 /** 日期范围值，形如 "2024-01-01/2024-01-31"（起止以 / 分隔） */
-export type FieldDateRangeValue = string; // NOSONAR: npm 包导出类型，业务项目引用
+export type FieldDateRangeValue = string;
 
 export interface FieldDateRangeProps extends FieldProps<FieldDateRangeValue> {
     /** 日期类型，如 YYYY-MM-DD、YYYY-MM、HH:mm:ss 等，默认 YYYY-MM-DD */

package/src/framework/fields/FieldDictSelect/index.tsx

@@ -12,7 +12,7 @@ export class FieldDictSelect extends React.Component<FieldDictSelectProps> {
     render() {
         const {value, typeCode} = this.props;
         const options = DictUtils.dictOptions(typeCode);
-        const strValue = value == null ? null : String(value); // NOSONAR: value 经 String() 显式转换，无隐式字符串化
+        const strValue = value == null ? null : String(value);
 
         return <Select value={strValue}
                        onChange={this.props.onChange}

package/src/framework/fields/FieldNumberRange/index.tsx

@@ -6,7 +6,7 @@ import type {FieldProps} from '../types';
 const SP = StringUtils.ISO_SPLITTER;
 
 /** 数字范围值，形如 "1/100"（起止以 / 分隔） */
-export type FieldNumberRangeValue = string; // NOSONAR: npm 包导出类型，业务项目引用
+export type FieldNumberRangeValue = string;
 
 export type RangePartValue = number | string | null;
 

package/src/framework/fields/FieldTable/styles.less

@@ -4,9 +4,9 @@
     border-spacing: 0;
 
     th {
-      background-color: rgb(250, 250, 250);
-      padding: 16px;
-      color: rgba(0, 0, 0, 0.88);
+      /* 跟随明暗主题，禁止硬编码浅色 */
+      background-color: var(--oa-color-fill, #fafafa);
+      color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
     }
 
 

package/src/framework/fields/FieldUploadImage/index.tsx

@@ -91,7 +91,7 @@ function readDims(url: string): Promise<Dims> {
 
 function compressToFile(source: Blob, options: {maxWidth?: number; maxHeight?: number; width?: number; height?: number; quality?: number}): Promise<File> {
     return new Promise((resolve, reject) => {
-        new Compressor(source, { // NOSONAR (typescript:S1848) — compressorjs 通过构造函数副作用异步压缩，回调内 resolve/reject，实例无需保留
+        new Compressor(source, {
             maxWidth: options.maxWidth,
             maxHeight: options.maxHeight,
             width: options.width,
@@ -139,9 +139,9 @@ async function compressToTarget(source: Blob, maxWidth: number | undefined, targ
     return best;
 }
 
-export class FieldUploadImage extends React.Component<FieldUploadImageProps, FieldUploadImageState> { // NOSONAR: state 构造器中按 props 初始化，无法全部 readonly
+export class FieldUploadImage extends React.Component<FieldUploadImageProps, FieldUploadImageState> {
 
-    state: FieldUploadImageState = { // NOSONAR: 构造器中按 props 初始化，无法 readonly
+    state: FieldUploadImageState = {
         // 传入的参数
         maxCount: 1,
         thumbWidth: 300,
@@ -170,7 +170,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
         if (props.value) this.state.objectNames = props.value.split(',');
     }
 
-    componentDidUpdate(prevProps: FieldUploadImageProps, prevState: FieldUploadImageState) { // NOSONAR: 顺序同步多个 props 到 state，拆分反而更难读
+    componentDidUpdate(prevProps: FieldUploadImageProps, prevState: FieldUploadImageState) {
         const next: Partial<FieldUploadImageState> = {};
         if (this.props.maxCount !== prevProps.maxCount) next.maxCount = this.props.maxCount;
         if (this.props.thumbWidth !== prevProps.thumbWidth) next.thumbWidth = this.props.thumbWidth;

package/src/framework/utils/HttpClient.ts

@@ -15,7 +15,8 @@ import {getMessageApi} from "./MessageApi";
  * - 失败默认自动 console.warn + message.error，并 reject(AjaxError)；传 {toastError: false} 可完全静默（仅 reject）
  * - 返回值被忽略也安全：内部已对返回的 Promise 挂 no-op catch，不会产生 unhandled rejection
  * - reject 的 AjaxError {code, message}：业务失败 code 为后端业务码，网络异常 code 为 HTTP 状态码，message 始终为人类可读提示
- * - HTTP 401 或业务 code=401 均广播 loginExpired（全局关注点），弹错仍按 toastError 决定
+ * - HTTP 401 或业务 code=401 均广播 loginExpired，载荷为 {message, reason}，交由全局登录失效弹窗统一提示（不再单独弹错）
+ * - 非 AjaxResult 响应体（如纯文本、HTML 错误页）一律按失败处理，不再当成功 resolve，避免掩盖登录失效
  *
  * 用法：
  * ```ts
@@ -48,6 +49,8 @@ import {getMessageApi} from "./MessageApi";
 export interface AjaxError {
     code?: number | string;
     message: string;
+    /** 登录失效原因（仅 code=401 时可能携带），见 LOGIN_EXPIRED_REASON_CONCURRENT_LOGIN */
+    loginExpiredReason?: string;
 }
 
 /** 后端统一响应结构 AjaxResult；putExtData 附加字段在顶层，data 为业务数据 */
@@ -57,9 +60,25 @@ export interface AjaxBody<T = unknown> {
     data: T;
     message?: string;
     traceId?: string;
+    /** 登录失效原因（框架在 401 响应中透传，如并发登录被顶下线） */
+    loginExpiredReason?: string;
     [key: string]: unknown;
 }
 
+/**
+ * 登录失效原因：同一账号并发登录被顶下线（后端扩展字段 loginExpiredReason 的取值之一）。
+ * 全局登录失效弹窗据此使用后端下发的定制文案，而非站点级默认文案。
+ */
+export const LOGIN_EXPIRED_REASON_CONCURRENT_LOGIN = 'CONCURRENT_LOGIN';
+
+/** loginExpired 事件载荷 */
+export interface LoginExpiredPayload {
+    /** 提示文案，来自后端 401 响应体的 message */
+    message?: string;
+    /** 原因标识，来自后端 401 响应体的扩展字段 loginExpiredReason */
+    reason?: string;
+}
+
 /** 请求选项：headers 自定义请求头；toastError=false 时失败不自动弹错（完全静默，仅 reject）；toastSuccess=false 时成功不自动弹后端 message */
 export interface RequestOptions {
     headers?: AxiosRequestConfig['headers'];
@@ -144,16 +163,13 @@ export class HttpClient {
             }).then((response) => {
                 const blob: Blob = response.data;
 
-                if (blob.type === 'application/json') {
+                if (blob.type.toLowerCase().startsWith('application/json')) {
                     const reader = new FileReader();
                     reader.onerror = () => HttpClient.fail(url, toastError, reject, {message: '读取下载数据失败'}, '下载失败');
                     reader.onload = () => {
                         try {
                             const rs = JSON.parse(reader.result as string);
-                            if (rs.code === 401) {
-                                EventBus.emit('loginExpired');
-                            }
-                            HttpClient.fail(url, toastError, reject, {code: rs.code, message: rs.message || '下载失败'}, '下载失败');
+                            HttpClient.fail(url, toastError, reject, rs, '下载失败', rs.code === 401 ? 401 : undefined);
                         } catch {
                             HttpClient.fail(url, toastError, reject, {message: '解析错误响应失败'}, '下载失败');
                         }
@@ -246,21 +262,29 @@ export class HttpClient {
 
         const promise = new Promise<AjaxBody<T>>((resolve, reject) => {
             axiosInstance(config).then((response) => {
-                const body = response.data as AjaxBody<T>;
-                const {success: ok, message} = body;
-                if (ok == undefined) {
-                    resolve(body);
+                const body = response.data as AjaxBody<T> | undefined;
+
+                // 非 AjaxResult 响应体（如被过滤器/Servlet 容器拦截返回的纯文本、HTML 错误页）
+                // 一律按失败处理：曾经被当成成功 resolve，会掩盖登录失效等错误
+                // （axios 默认对 4xx/5xx 直接 reject，这里主要覆盖 2xx 却是非 JSON 的响应；401 分支为自定义 validateStatus 等场景兜底）
+                if (body == null || typeof body !== 'object' || body.success === undefined) {
+                    HttpClient.fail(url, toastError, reject, {
+                        code: response.status,
+                        message: response.status === 401 ? '登录过期' : `响应格式错误（HTTP ${response.status}）`,
+                    }, '请求失败', response.status);
                     return;
                 }
-                if (!ok) {
-                    if (body.code === 401) {
-                        EventBus.emit('loginExpired');
-                    }
-                    HttpClient.fail(url, toastError, reject, {code: body.code, message: message || '操作失败'});
+
+                if (!body.success) {
+                    HttpClient.fail(url, toastError, reject, {
+                        code: body.code,
+                        message: body.message || '操作失败',
+                        loginExpiredReason: body.loginExpiredReason,
+                    }, '请求失败', body.code === 401 ? 401 : undefined);
                     return;
                 }
-                if (toastSuccess && message) {
-                    getMessageApi().success(message);
+                if (toastSuccess && body.message) {
+                    getMessageApi().success(body.message);
                 }
                 resolve(body);
             }).catch((e: unknown) => {
@@ -273,14 +297,28 @@ export class HttpClient {
         return promise;
     }
 
-    /** 统一的失败处理：HTTP 401 广播 loginExpired 并弹"登录过期"，其余提取可读消息后按 toastError 决定是否弹错，最终 reject(AjaxError) */
-    private static fail(url: string, toastError: boolean, reject: (reason?: unknown) => void, e: unknown, label = '请求失败'): void {
-        if (axios.isAxiosError(e) && e.response?.status === 401) {
-            EventBus.emit('loginExpired');
-            const err: AjaxError = {code: 401, message: '登录过期'};
-            if (toastError) {
-                getMessageApi().error('登录过期');
-            }
+    /** 从 axios 异常 / AjaxResult / AjaxError 中提取登录失效文案与原因 */
+    private static loginExpiredInfo(e: unknown): {message: string; loginExpiredReason?: string} {
+        const data = (axios.isAxiosError(e) ? e.response?.data : e) as AjaxError | undefined;
+        return {
+            message: typeof data?.message === 'string' && data.message ? data.message : '登录过期',
+            loginExpiredReason: typeof data?.loginExpiredReason === 'string' ? data.loginExpiredReason : undefined,
+        };
+    }
+
+    /**
+     * 统一的失败处理：
+     * - HTTP 401 / 业务 code=401：广播 loginExpired（载荷含后端文案与原因），由全局登录失效弹窗统一提示，
+     *   不再单独弹错，避免与弹窗重复；最终 reject(AjaxError)
+     * - 其余：提取可读消息后按 toastError 决定是否弹错，最终 reject(AjaxError)
+     */
+    private static fail(url: string, toastError: boolean, reject: (reason?: unknown) => void, e: unknown, label = '请求失败', httpStatus?: number): void {
+        const status = httpStatus ?? (axios.isAxiosError(e) ? e.response?.status : undefined);
+        if (status === 401) {
+            const {message, loginExpiredReason} = HttpClient.loginExpiredInfo(e);
+            const payload: LoginExpiredPayload = {message, reason: loginExpiredReason};
+            EventBus.emit('loginExpired', payload);
+            const err: AjaxError = {code: 401, message, loginExpiredReason};
             reject(err);
             return;
         }

package/src/framework/utils/UrlUtils.ts

@@ -67,6 +67,6 @@ export class UrlUtils {
     static contextPath(path: string): string {
         const base = import.meta.env.VITE_SERVER_SERVLET_CONTEXT_PATH;
         if (base === '/' || base === '') return path;
-        return base.replace(/\/+$/, '') + path; // NOSONAR: 需去除尾部斜杠，正则已最简
+        return base.replace(/\/+$/, '') + path;
     }
 }

package/src/layouts/admin/AdminTabs.jsx

@@ -9,6 +9,38 @@ export class AdminTabs extends React.Component {
         contextMenuTabKey: null,
     };
 
+    barRef = React.createRef();
+    activeTabRef = React.createRef();
+
+    componentDidMount() {
+        this.scrollActiveIntoView();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.activeKey !== this.props.activeKey) {
+            this.scrollActiveIntoView();
+        }
+    }
+
+    /** 激活的标签被滚动到可视区外时（标签过多），横向带入视野 */
+    scrollActiveIntoView = () => {
+        const bar = this.barRef.current;
+        const tab = this.activeTabRef.current;
+        if (!bar || !tab) return;
+        const margin = 8;
+        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 - margin) {
+            delta = tabRect.right - barRect.right + margin;
+        }
+        if (delta !== 0) {
+            bar.scrollTo({left: bar.scrollLeft + delta, behavior: 'smooth'});
+        }
+    };
+
     handleContextMenu = (e, key) => {
         e.preventDefault();
         this.setState({
@@ -38,12 +70,14 @@ export class AdminTabs extends React.Component {
 
         return (
             <>
-                <div className="admin-tabs-bar">
+                <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)}

package/src/layouts/admin/AdminTabs.less

@@ -1,11 +1,15 @@
 .admin-tabs-bar {
     display: flex;
     flex-wrap: nowrap;
+    align-items: flex-end;
+    gap: 2px;
     overflow-x: auto;
     overflow-y: hidden;
     flex-shrink: 0;
+    padding: 4px 8px 0;
     border-bottom: 1px solid var(--oa-color-border, #e8e8e8);
-    background: var(--oa-color-bg-container, #fff);
+    /* 条带用页面底色，与白色顶栏拉开层次；选中标签再用容器色浮起 */
+    background: var(--oa-color-bg-layout, #f5f5f5);
 
     &::-webkit-scrollbar {
         height: 0;
@@ -14,28 +18,37 @@
     .admin-tab {
         display: inline-flex;
         align-items: center;
-        gap: 4px;
-        padding: 0 12px;
+        gap: 6px;
+        padding: 0 8px 0 12px;
         height: var(--oa-control-height, 32px);
         line-height: var(--oa-control-height, 32px);
         font-size: 13px;
         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);
+        background: transparent;
+        border-right: none;
+        border-radius: var(--oa-border-radius, 6px) var(--oa-border-radius, 6px) 0 0;
         transition: color 0.2s, background 0.2s;
         position: relative;
         flex-shrink: 0;
 
         &:hover {
-            color: var(--primary-color);
+            color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
+            background: color-mix(in srgb, var(--oa-color-text, rgba(0, 0, 0, 0.88)) 6%, transparent);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--primary-color, #1677ff);
+            outline-offset: -2px;
         }
 
         &.active {
-            color: var(--primary-color);
+            color: var(--primary-color, #1677ff);
             background: var(--oa-color-bg-container, #fff);
             font-weight: 500;
+            /* 顶部主色指示条；inset 保证不撑高标签 */
+            box-shadow: inset 0 2px 0 var(--primary-color, #1677ff);
         }
 
         .admin-tab-label {
@@ -53,11 +66,19 @@
             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;
+        }
     }
 }

package/src/layouts/admin/index.jsx

@@ -112,7 +112,7 @@ export default class AdminLayout extends React.Component {
             this.setState({menuLoading: false})
         })
     }
-    actionRef = React.createRef() // NOSONAR: React ref 由父组件通过 ref 访问
+    actionRef = React.createRef()
 
     classifyMenus = (menuTree) => {
         const topMenus = [];

package/src/layouts/admin/index.less

@@ -95,7 +95,11 @@
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 12px 16px;
+      /* 与顶栏同高，保证 logo 基线与一级菜单对齐 */
+      height: 48px;
+      padding: 0 16px;
+      /* 底边线：与右侧顶栏/标签栏分隔线连成一线；色值由侧栏文字变量派生，避免硬编码 */
+      border-bottom: 1px solid color-mix(in srgb, var(--oa-sider-text, rgba(255, 255, 255, 0.85)) 14%, transparent);
 
       .logo-img {
         height: 36px;
@@ -115,10 +119,25 @@
         margin: 0;
         font-size: 14px;
         line-height: 1;
+        /* 允许在 flex 中收缩，长站点名省略号截断而不溢出侧栏 */
+        min-width: 0;
+        overflow: hidden;
         white-space: nowrap;
+
+        a {
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
     }
 
+    /* 折叠态：logo 居中，去掉左侧内边距 */
+    &.ant-layout-sider-collapsed .sider-header {
+      justify-content: center;
+      padding-inline: 0;
+    }
+
     &.ant-layout-sider-collapsed .sider-header h3 {
       display: none;
     }
@@ -129,6 +148,11 @@
       scrollbar-width: thin;
       scrollbar-color: unset;
 
+      /* 菜单分隔线：加大上下间距，让不同菜单分组更清晰 */
+      .ant-menu-item-divider {
+        margin-block: 8px;
+      }
+
       .ant-menu-submenu-selected {
         &>div {
           color: var(--oa-sider-text, rgba(255, 255, 255, 0.85));

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>
         );
     }

package/src/pages/article/$code.jsx

@@ -26,13 +26,13 @@ export default class ArticlePage extends React.Component {
         const {article, loading} = this.state
 
         if (loading) {
-            return <Page title="加载中...">
+            return <Page>
                 <div>加载中...</div>
             </Page>
         }
 
         if (!article) {
-            return <Page title="文章不存在">
+            return <Page>
                 <div>文章不存在或已禁用</div>
             </Page>
         }