@jiangood/open-admin 3.1.6 → 3.1.8

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

@@ -1,10 +1,10 @@
 import React from "react";
-import {Button, Divider, Modal, Radio, Select, Space, Upload, message} from "antd";
+import {Button, Divider, Modal, Radio, Select, Space, Upload} from "antd";
 import {DeleteOutlined, EyeOutlined, PlusOutlined} from "@ant-design/icons";
 import Compressor from "compressorjs";
 import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
-import {HttpClient, ObjectUtils, UrlUtils} from "../../utils";
+import {HttpClient, getMessageApi, ObjectUtils, UrlUtils} from "../../utils";
 import type {FieldProps} from '../types';
 
 export interface FieldUploadImageProps extends FieldProps<string> {
@@ -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;
@@ -290,19 +290,19 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
             this.revokePreviewUrls();
             this.previewUrlsRef = [cUrl];
             this.setState({preview: {cUrl, cFile, cSize: cFile.size, cdims}, tool: undefined});
-            message.success(`已压缩：${cdims.width} x ${cdims.height} / ${formatSize(cFile.size)}`);
+            getMessageApi().success(`已压缩：${cdims.width} x ${cdims.height} / ${formatSize(cFile.size)}`);
         } catch {
-            message.error('压缩失败');
+            getMessageApi().error('压缩失败');
         }
     };
 
     private handleBeforeUpload = async (file: File) => {
         if (this.state.objectNames.length >= this.state.maxCount) {
-            message.warning('已达到最大上传数量');
+            getMessageApi().warning('已达到最大上传数量');
             return Upload.LIST_IGNORE;
         }
         if (!file.type.startsWith('image/')) {
-            message.error('请选择图片文件');
+            getMessageApi().error('请选择图片文件');
             return Upload.LIST_IGNORE;
         }
 
@@ -319,7 +319,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
             // 默认展示原图，不做压缩处理，用户可点击「压缩」按钮手动压缩
             await this.loadOriginalPreview(file, url, dims);
         } catch {
-            message.error('读取图片失败');
+            getMessageApi().error('读取图片失败');
             this.closeModal();
             return;
         }
@@ -370,7 +370,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
             );
             this.closeModal();
         } catch (e) {
-            message.error(HttpClient.errToMsg(e));
+            getMessageApi().error(HttpClient.errToMsg(e));
         } finally {
             this.setState({uploading: false});
         }
@@ -390,7 +390,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
         if (canvasImg?.url) {
             return <img src={canvasImg.url} style={{maxWidth: '100%', maxHeight: '100%'}} alt="预览"/>;
         }
-        return <div style={{color: '#999'}}>生成中...</div>;
+        return <div style={{color: 'var(--oa-color-text-tertiary, #999)'}}>生成中...</div>;
     };
 
     render() {
@@ -487,14 +487,14 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
                         <div style={{flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 12}}>
                             <div style={{
                                 flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                background: '#f5f5f5', borderRadius: 8, border: '1px dashed #d9d9d9', position: 'relative', overflow: 'hidden',
+                                background: 'var(--oa-color-fill, #f5f5f5)', borderRadius: 8, border: '1px dashed var(--oa-color-border, #d9d9d9)', position: 'relative', overflow: 'hidden',
                             }}>
                                 {this.renderCanvas(preview, canvasImg, originalUrl)}
                             </div>
                         </div>
 
                         {/* 右侧属性栏 */}
-                        <div style={{width: 240, flexShrink: 0, borderLeft: '1px solid #f0f0f0', paddingLeft: 16, display: 'flex', flexDirection: 'column', overflow: 'hidden'}}>
+                        <div style={{width: 240, flexShrink: 0, borderLeft: '1px solid var(--oa-color-border, #f0f0f0)', paddingLeft: 16, display: 'flex', flexDirection: 'column', overflow: 'hidden'}}>
                             <div style={{flex: 1, overflowY: 'auto'}}>
                                 {/* 工具栏（横排） */}
                                 {tool !== 'crop' && (
@@ -520,14 +520,14 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
                                         >
                                             {CROP_RATIOS.map((r) => (
                                                 <Radio key={r.ratio ? `${r.ratio.width}:${r.ratio.height}` : 'free'} value={r.ratio ? `${r.ratio.width}:${r.ratio.height}` : 'free'}>
-                                                    {r.label}{r.desc ? <span style={{color: '#999', fontSize: 12}}>（{r.desc}）</span> : null}
+                                                    {r.label}{r.desc ? <span style={{color: 'var(--oa-color-text-tertiary, #999)', fontSize: 12}}>（{r.desc}）</span> : null}
                                                 </Radio>
                                             ))}
                                         </Radio.Group>
                                 ) : (
                                     <>
                                         {canvasImg && (
-                                            <div style={{color: '#666'}}>
+                                            <div style={{color: 'var(--oa-color-text-secondary, #666)'}}>
                                                 <div>尺寸：{canvasImg.dims ? `${canvasImg.dims.width} x ${canvasImg.dims.height}` : '--'}</div>
                                                 <div>体积：{formatSize(canvasImg.size)}</div>
                                             </div>
@@ -537,7 +537,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
                                         <Divider style={{margin: '12px 0'}}/>
                                         <div style={{fontWeight: 600, marginBottom: 8}}>压缩处理</div>
                                         <div style={{marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8}}>
-                                            <span style={{color: '#666', flexShrink: 0}}>最大宽度</span>
+                                            <span style={{color: 'var(--oa-color-text-secondary, #666)', flexShrink: 0}}>最大宽度</span>
                                             <Select
                                                 value={compressWidth}
                                                 onChange={(v) => this.setState({compressWidth: v})}
@@ -555,7 +555,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
                                             />
                                         </div>
                                         <div style={{marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8}}>
-                                            <span style={{color: '#666', flexShrink: 0}}>最大体积</span>
+                                            <span style={{color: 'var(--oa-color-text-secondary, #666)', flexShrink: 0}}>最大体积</span>
                                             <Select
                                                 value={compressSize}
                                                 onChange={(v) => this.setState({compressSize: v})}

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import {Tag} from 'antd';
+import {HttpClient} from '../../utils';
+import type {FieldProps} from '../types';
+import {formatUserLabel, type PickerUser} from '../../biz/pickerUser';
+import {UserPicker} from '../../biz/UserPicker';
+
+export interface FieldUserPickerProps extends FieldProps<string[]> {
+    /** 是否多选，默认 true */
+    multiple?: boolean;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 空值提示，默认 请选择用户 */
+    placeholder?: string;
+    /** 弹窗标题 */
+    title?: string;
+    /** 分页数据源地址，默认 admin/sysUser/page */
+    requestUrl?: string;
+    /** 按 id 查询用户详情地址（用于回显），默认 admin/sysUser/by-ids */
+    usersUrl?: string;
+}
+
+interface FieldUserPickerState {
+    open: boolean;
+    users: PickerUser[];
+}
+
+/**
+ * 选人表单组件
+ *
+ * 展示已选用户标签并提供弹窗选择，遵循字段组件约定：value + onChange（value 为用户 id 数组）。
+ */
+export class FieldUserPicker extends React.Component<FieldUserPickerProps, FieldUserPickerState> {
+
+    static readonly defaultProps = {
+        multiple: true,
+        placeholder: '请选择用户',
+    };
+
+    state: FieldUserPickerState = {
+        open: false,
+        users: [],
+    };
+
+    componentDidMount() {
+        this.syncUsers();
+    }
+
+    componentDidUpdate(prevProps: FieldUserPickerProps) {
+        if (prevProps.value !== this.props.value) {
+            this.syncUsers();
+        }
+    }
+
+    getUsersUrl = () => this.props.usersUrl || 'admin/sysUser/by-ids';
+
+    // 根据 value(ids) 拉取并补全用户详情，按 ids 顺序展示
+    syncUsers = () => {
+        const ids = this.props.value || [];
+        const known = new Map(this.state.users.map(user => [user.id, user]));
+        const missing = ids.filter(id => !known.has(id));
+        if (missing.length === 0) {
+            this.setState({users: ids.map(id => known.get(id)).filter(Boolean) as PickerUser[]});
+            return;
+        }
+        HttpClient.get<PickerUser[]>(this.getUsersUrl(), {ids}, {toastError: false}).then(rs => {
+            const merged = new Map(this.state.users.map(user => [user.id, user]));
+            (rs.data || []).forEach(user => merged.set(user.id, user));
+            const currentIds = this.props.value || [];
+            this.setState({users: currentIds.map(id => merged.get(id)).filter(Boolean) as PickerUser[]});
+        });
+    };
+
+    remove = (id: string) => {
+        this.props.onChange?.((this.props.value || []).filter(value => value !== id));
+    };
+
+    handleOk = (ids: string[], users: PickerUser[]) => {
+        this.setState({open: false, users});
+        this.props.onChange?.(ids);
+    };
+
+    render() {
+        const {disabled, placeholder, multiple, title, requestUrl, usersUrl, value} = this.props;
+        const {open, users} = this.state;
+        return <>
+            <div style={{
+                minHeight: 32,
+                display: 'flex',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                gap: 4,
+                padding: '4px 8px',
+                border: '1px solid var(--oa-color-border, #d9d9d9)',
+                borderRadius: 'var(--oa-border-radius, 6px)',
+                background: disabled ? 'var(--oa-color-fill, #f5f5f5)' : 'var(--oa-color-bg-container, #fff)',
+                cursor: disabled ? 'not-allowed' : undefined,
+            }}>
+                {users.length === 0 && <span style={{color: 'var(--oa-color-text-tertiary, #999)'}}>{placeholder}</span>}
+                {users.map(user => (
+                    <Tag key={user.id} closable={!disabled} onClose={(e) => {
+                        e.preventDefault();
+                        this.remove(user.id);
+                    }}>
+                        {formatUserLabel(user)}
+                    </Tag>
+                ))}
+                {!disabled && (
+                    <a style={{marginLeft: users.length ? 'auto' : 0}} onClick={() => this.setState({open: true})}>选择</a>
+                )}
+            </div>
+            <UserPicker
+                open={open}
+                title={title}
+                multiple={multiple}
+                value={value}
+                requestUrl={requestUrl}
+                usersUrl={usersUrl}
+                onOk={this.handleOk}
+                onCancel={() => this.setState({open: false})}
+            />
+        </>;
+    }
+}

package/src/framework/fields/index.ts

@@ -14,6 +14,7 @@ export * from './FieldTable'
 export * from './FieldTableSelect'
 export * from './FieldSysOrgTreeSelect'
 export * from './FieldSysOrgTree'
+export * from './FieldUserPicker'
 export * from './FieldPercent'
 export * from './FieldUploadFile';
 export * from './FieldUploadImage';

package/src/framework/utils/HttpClient.ts

@@ -1,8 +1,8 @@
 import axios from "axios";
 import type {AxiosProgressEvent, AxiosRequestConfig} from "axios";
 import qs from 'qs';
-import {message as messageApi} from "antd";
 import {EventBus} from "./EventBus";
+import {getMessageApi} from "./MessageApi";
 
 /**
  * 单一 Promise 风格 HTTP 工具类（所有请求方法均返回 Promise，无 success/error 回调）
@@ -224,6 +224,11 @@ export class HttpClient {
         return url.startsWith('admin') ? '/' + url : url;
     }
 
+    /** 判断是否为普通对象（用于决定是否附加 X-Body-Fields） */
+    private static isPlainObject(data: unknown): data is Record<string, unknown> {
+        return data !== null && typeof data === 'object' && !Array.isArray(data);
+    }
+
     private static coreRequest<T = unknown>(settings: AjaxSettings): Promise<AjaxBody<T>> {
         const {url, method, params, data, headers, toastError = true, toastSuccess = true} = settings;
         const config: AxiosRequestConfig = {url: HttpClient.prefixUrl(url), method, params, data, headers};
@@ -231,6 +236,12 @@ export class HttpClient {
         // FormData 请求交由浏览器自动生成带 boundary 的 multipart Content-Type
         if (typeof FormData !== 'undefined' && data instanceof FormData) {
             config.headers = {...config.headers, 'Content-Type': undefined};
+        } else if (method === 'POST' && HttpClient.isPlainObject(data)) {
+            // 告知后端本次 JSON body 的顶层字段；值为 undefined 的键不会被 JSON.stringify 序列化，需排除
+            const bodyFields = Object.keys(data)
+                .filter((key) => data[key] !== undefined)
+                .join(',');
+            config.headers = {...config.headers, 'X-Body-Fields': bodyFields};
         }
 
         const promise = new Promise<AjaxBody<T>>((resolve, reject) => {
@@ -249,7 +260,7 @@ export class HttpClient {
                     return;
                 }
                 if (toastSuccess && message) {
-                    messageApi.success(message);
+                    getMessageApi().success(message);
                 }
                 resolve(body);
             }).catch((e: unknown) => {
@@ -268,7 +279,7 @@ export class HttpClient {
             EventBus.emit('loginExpired');
             const err: AjaxError = {code: 401, message: '登录过期'};
             if (toastError) {
-                messageApi.error('登录过期');
+                getMessageApi().error('登录过期');
             }
             reject(err);
             return;
@@ -276,7 +287,7 @@ export class HttpClient {
         const err = HttpClient.toAjaxError(e);
         if (toastError) {
             console.warn(`[HttpClient] ${label}: ${url}`, err.message);
-            messageApi.error(err.message);
+            getMessageApi().error(err.message);
         }
         reject(err);
     }

package/src/framework/utils/MessageApi.ts

@@ -1,5 +1,18 @@
-import {message} from 'antd';
+import {message as staticMessage} from 'antd';
+import type {MessageInstance} from 'antd/es/message/interface';
 
-export function getMessageApi() {
-    return message;
+/**
+ * message 实例持有者。
+ * 静态 message 无法消费 ConfigProvider 主题（暗色模式下仍是浅色），
+ * 由布局内的 MessageBridge 通过 App.useApp() 注入跟随主题的实例。
+ */
+let messageInstance: MessageInstance = staticMessage;
+
+/** 注入 App 上下文中的 message 实例；不传则恢复为静态 message */
+export function setMessageApi(instance?: MessageInstance) {
+    messageInstance = instance ?? staticMessage;
+}
+
+export function getMessageApi(): MessageInstance {
+    return messageInstance;
 }

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/framework/views/ViewText/index.tsx

@@ -31,7 +31,7 @@ export class ViewText extends React.Component {
                         style={{
                             background: 'none',
                             border: 'none',
-                            borderBottom: '1px dashed #d9d9d9',
+                            borderBottom: '1px dashed var(--oa-color-border, #d9d9d9)',
                             padding: 0,
                             font: 'inherit',
                             cursor: 'pointer',

package/src/layouts/admin/AdminTabs.less

@@ -4,8 +4,8 @@
     overflow-x: auto;
     overflow-y: hidden;
     flex-shrink: 0;
-    border-bottom: 1px solid #e8e8e8;
-    background: #fff;
+    border-bottom: 1px solid var(--oa-color-border, #e8e8e8);
+    background: var(--oa-color-bg-container, #fff);
 
     &::-webkit-scrollbar {
         height: 0;
@@ -16,14 +16,14 @@
         align-items: center;
         gap: 4px;
         padding: 0 12px;
-        height: 32px;
-        line-height: 32px;
+        height: var(--oa-control-height, 32px);
+        line-height: var(--oa-control-height, 32px);
         font-size: 13px;
         cursor: pointer;
-        border-right: 1px solid #e8e8e8;
+        border-right: 1px solid var(--oa-color-border, #e8e8e8);
         white-space: nowrap;
-        color: rgba(0, 0, 0, 0.65);
-        background: #fafafa;
+        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;
         flex-shrink: 0;
@@ -34,7 +34,7 @@
 
         &.active {
             color: var(--primary-color);
-            background: #fff;
+            background: var(--oa-color-bg-container, #fff);
             font-weight: 500;
         }
 
@@ -52,11 +52,11 @@
             height: 16px;
             font-size: 12px;
             border-radius: 50%;
-            color: rgba(0, 0, 0, 0.45); /* NOSONAR: 次要文本颜色，设计如此 */
+            color: var(--oa-color-text-tertiary, rgba(0, 0, 0, 0.45));
 
             &:hover {
-                background: rgba(0, 0, 0, 0.08);
-                color: rgba(0, 0, 0, 0.88); /* NOSONAR: 悬停态主文本色，对比度设计如此 */
+                background: var(--oa-color-fill, rgba(0, 0, 0, 0.08));
+                color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
             }
         }
     }

package/src/layouts/admin/HeaderRight.jsx

@@ -1,21 +1,19 @@
 import {Avatar, Dropdown, Modal} from "antd";
+import {BgColorsOutlined} from "@ant-design/icons";
 import React from "react";
-import {DeviceUtils, HttpClient, PageUtils, GlobalData, getToken, history, EventBus, ARTICLE_HEADER_AVATAR_DROPDOWN, ARTICLE_HEADER_RIGHT} from "../../framework";
+import {HttpClient, PageUtils, GlobalData, getToken, history, EventBus, ThemeSettings, ARTICLE_HEADER_AVATAR_DROPDOWN, ARTICLE_HEADER_RIGHT} from "../../framework";
 
 export class HeaderRight extends React.Component {
 
     state = {
-        isMobileDevice: false,
         dropdownArticles: [],
         headerArticles: [],
         alertVisible: false,
         confirmVisible: false,
+        themeSettingsVisible: false,
     };
 
     componentDidMount() {
-        if (DeviceUtils.isMobileDevice()) {
-            this.setState({isMobileDevice: true})
-        }
         this.loadArticles()
     }
 
@@ -45,17 +43,26 @@ export class HeaderRight extends React.Component {
         PageUtils.open('/article/' + code, title)
     }
 
+    renderThemeSettings = () => {
+        return (
+            <button type="button" className='item' title="界面设置" aria-label="界面设置"
+                    onClick={() => this.setState({themeSettingsVisible: true})}>
+                <BgColorsOutlined/>
+            </button>
+        )
+    }
+
+    renderThemeSettingsDrawer = () => {
+        return (
+            <ThemeSettings open={this.state.themeSettingsVisible}
+                           onClose={() => this.setState({themeSettingsVisible: false})}/>
+        )
+    }
+
     render() {
         const info = GlobalData.getLoginInfo()
         const {dropdownArticles, headerArticles} = this.state
 
-        if (this.state.isMobileDevice) {
-            return <div className='header-right'>
-                <button type="button" style={{background: 'none', border: 'none', padding: 0, font: 'inherit', cursor: 'pointer'}}
-                        onClick={this.logout}>退出</button>
-            </div>
-        }
-
         const articleItems = dropdownArticles.map(a => ({
             key: 'article:' + a.code,
             label: a.title,
@@ -75,6 +82,8 @@ export class HeaderRight extends React.Component {
                 </button>
             ))}
 
+            {this.renderThemeSettings()}
+
             <Dropdown menu={{
                 onClick: ({key}) => {
                     if (key === 'userCenter') {
@@ -116,6 +125,8 @@ export class HeaderRight extends React.Component {
                    }}>
                 退出登录失败，是否清空缓存
             </Modal>
+
+            {this.renderThemeSettingsDrawer()}
         </div>
     }
 }

package/src/layouts/admin/SinglePageLayout.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {history, PageFrame} from "../../framework";
+
+/**
+ * 单页布局：不使用标签页，仅渲染当前路由对应页面。
+ * 路由变化时按 url 重新挂载 PageFrame，页面状态随之重置。
+ */
+export class SinglePageLayout extends React.Component {
+    state = {location: history.location};
+
+    unlisten = null;
+
+    componentDidMount() {
+        this.unlisten = history.listen(({location}) => {
+            this.setState({location});
+        });
+    }
+
+    componentWillUnmount() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+    }
+
+    render() {
+        const {pathname, search} = this.state.location;
+        const url = pathname + search;
+        return (
+            <div style={{height: '100%'}}>
+                <PageFrame key={url} url={url} show/>
+            </div>
+        );
+    }
+}
+
+export default SinglePageLayout;

package/src/layouts/admin/TabLayout.jsx

@@ -83,8 +83,28 @@ export class TabLayout extends React.Component {
         this.unsubscribeClosePage = EventBus.on('closePage', this.handleClosePageEvent);
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps) {
         this.activeKey = this.state.activeKey;
+        // 菜单信息晚于 Tab 创建时才加载完成：路径/菜单映射变化后回填「未命名」Tab 标题
+        if (this.props.pathMenuMap !== prevProps.pathMenuMap) {
+            this.refreshTabLabels();
+        }
+    }
+
+    refreshTabLabels() {
+        this.setState(prev => {
+            let changed = false;
+            const tabs = prev.tabs.map(t => {
+                const qIndex = t.key.indexOf('?');
+                const pathname = qIndex === -1 ? t.key : t.key.substring(0, qIndex);
+                const search = qIndex === -1 ? '' : t.key.substring(qIndex);
+                const label = getLabel(pathname, search, this.props.pathMenuMap);
+                if (label === t.label) return t;
+                changed = true;
+                return {...t, label};
+            });
+            return changed ? {tabs} : null;
+        });
     }
 
     componentWillUnmount() {