@jiangood/open-admin 3.1.6 → 3.1.7

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/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() {

package/src/layouts/admin/index.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import {Layout, Menu, Skeleton, Watermark} from 'antd';
+import {ConfigProvider, Layout, Menu, Skeleton, Watermark} from 'antd';
 
 import "./index.less"
-import {HttpClient, NamedIcon, PageUtils, GlobalData, TreeUtils, history, Link, ARTICLE_HEADER_LEFT, OrgSwitcher} from "../../framework";
+import {HttpClient, NamedIcon, PageUtils, GlobalData, TreeUtils, history, Link, ARTICLE_HEADER_LEFT, OrgSwitcher, getSiderThemeConfig, getLayoutMode, EventBus} from "../../framework";
 
 import { HeaderRight } from "./HeaderRight";
 import { TabLayout } from "./TabLayout";
+import { SinglePageLayout } from "./SinglePageLayout";
 const {Header, Sider, Content} = Layout;
 /**
  * 带菜单的布局，主要处理布局宇框架结构
@@ -30,9 +31,13 @@ export default class AdminLayout extends React.Component {
         siteInfo: {},
 
         headerLeftArticles: [],
+
+        layoutMode: getLayoutMode(),
     }
 
 
+    unsubscribeLayout = null;
+
     componentDidMount() {
         // 判断是否手机端，自动收起菜单
 
@@ -45,6 +50,16 @@ export default class AdminLayout extends React.Component {
 
         const siteArticles = GlobalData.getSiteArticles();
         this.setState({headerLeftArticles: siteArticles[ARTICLE_HEADER_LEFT] || []})
+
+        this.unsubscribeLayout = EventBus.on('layoutChange', () => {
+            this.setState({layoutMode: getLayoutMode()});
+        })
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeLayout) {
+            this.unsubscribeLayout();
+        }
     }
 
 
@@ -60,7 +75,7 @@ export default class AdminLayout extends React.Component {
                 if (item.type === 'divider') {
                     return
                 }
-                item.icon = <NamedIcon name={item.icon || 'AppstoreOutlined'} style={{fontSize: 12}}/>
+                item.icon = <NamedIcon name={item.icon || 'AppstoreOutlined'} style={{fontSize: 16}}/>
             })
 
             const {topMenus} = this.classifyMenus(menuTree);
@@ -119,7 +134,7 @@ export default class AdminLayout extends React.Component {
             const defaultGroup = {
                 key: '_default_group',
                 label: '业务模块',
-                icon: <NamedIcon name="AppstoreOutlined" style={{fontSize: 12}}/>,
+                icon: <NamedIcon name="AppstoreOutlined" style={{fontSize: 16}}/>,
                 children: leafRootNodes,
                 type: 'directory',
             };
@@ -189,23 +204,26 @@ export default class AdminLayout extends React.Component {
         const {siteInfo, loginInfo} = this.state
 
 return <Layout className='main-layout'>
-             <Sider id='left-sider'
-                   width={180}
-                   collapsible
-                   breakpoint={'md'}
-             >
-                <div className='sider-header'>
-                    <button type="button" className='logo-img'
-                            onClick={() => history.push('/')}>
-                        <img src="./logo.png" alt='logo'/>
-                    </button>
-                    <h3 className='hide-on-mobile'>
-                        <Link to="/" style={{color: 'rgba(255,255,255,0.85)'}}>{siteInfo.title}</Link>
-                    </h3>
-                </div>
-                {this.renderLeftMenu()}
-
-            </Sider>
+             {/* 侧栏单独套暗色算法，使分割线/边框在深色底上可见，并按预设覆盖侧栏底色 */}
+             <ConfigProvider theme={getSiderThemeConfig()}>
+                 <Sider id='left-sider'
+                        width={180}
+                        collapsible
+                        breakpoint={'md'}
+                 >
+                    <div className='sider-header'>
+                        <button type="button" className='logo-img'
+                                onClick={() => history.push('/')}>
+                            <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>
+                        </h3>
+                    </div>
+                    {this.renderLeftMenu()}
+
+                </Sider>
+             </ConfigProvider>
 
             <Layout style={{flex: 1, overflow: 'hidden'}}>
                 <Header className='header'>
@@ -250,16 +268,18 @@ return <Layout className='main-layout'>
     }
 
     renderCenterContent = () => {
-        const {siteInfo, loginInfo} = this.state
+        const {siteInfo, loginInfo, layoutMode} = this.state
         // 即使菜单为空也直接显示页面内容，不要一直显示 Skeleton
-        const tabPageRenderNode = <TabLayout pathMenuMap={this.state.pathMenuMap}/>;
+        const contentNode = layoutMode === 'single'
+            ? <SinglePageLayout/>
+            : <TabLayout pathMenuMap={this.state.pathMenuMap}/>;
         if (siteInfo.waterMark === true) {
             return <Watermark content={[loginInfo.name, loginInfo.account]}>
-                {tabPageRenderNode}
+                {contentNode}
             </Watermark>
         }
 
-        return tabPageRenderNode
+        return contentNode
     };
 }
 

package/src/layouts/admin/index.less

@@ -6,16 +6,45 @@
     height: 48px;
     display: flex;
     align-items: center;
-    background-color: #fff;
-    border-bottom: 1px solid #e8e8e8;
+    min-width: 0;
+    background-color: var(--oa-color-bg-container, #fff);
+    border-bottom: 1px solid var(--oa-color-border, #e8e8e8);
+
+    /* 顶栏文字按钮：一级菜单左侧入口与右侧入口统一交互态 */
+    .item {
+      display: inline-flex;
+      align-items: center;
+      height: 100%;
+      padding: 0 0.5rem;
+      cursor: pointer;
+      color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
+      white-space: nowrap;
+      flex-shrink: 0;
+      background: none;
+      border: none;
+      font: inherit;
+
+      &:hover {
+        background: var(--oa-color-fill, rgba(0, 0, 0, 0.06));
+        color: var(--primary-color, #1677ff);
+      }
+    }
 
     .top-nav {
       flex: 1;
+      min-width: 0;
       display: flex;
       align-items: center;
       margin: 0;
       height: 100%;
-      overflow: hidden;
+      /* 一级菜单过多时横向滚动，避免被裁切 */
+      overflow-x: auto;
+      overflow-y: hidden;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        height: 0;
+      }
 
       .top-nav-item {
         display: inline-flex;
@@ -24,7 +53,7 @@
         padding: 0 16px;
         height: 100%;
         cursor: pointer;
-        color: rgba(0, 0, 0, 0.65);
+        color: var(--oa-color-text-secondary, rgba(0, 0, 0, 0.65));
         transition: color 0.2s;
         white-space: nowrap;
         background: none;
@@ -32,36 +61,27 @@
         font: inherit;
 
         &:hover {
-          color: var(--primary-color, var(--primary-color, #1961AC));
+          color: var(--primary-color, #1677ff);
+          background: var(--oa-color-fill, rgba(0, 0, 0, 0.06));
         }
 
         &.active {
-          color: var(--primary-color, var(--primary-color, #1961AC));
-          box-shadow: inset 0 -2px 0 var(--primary-color, var(--primary-color, #1961AC));
+          color: var(--primary-color, #1677ff);
+          box-shadow: inset 0 -2px 0 var(--primary-color, #1677ff);
         }
       }
     }
 
+    /* 组织切换等固定宽度控件不被压缩 */
+    .ant-select {
+      flex-shrink: 0;
+    }
+
     .header-right {
       line-height: 36px;
       display: flex;
       align-items: center;
       flex-shrink: 0;
-
-      .item {
-        display: inline-flex;
-        align-items: center;
-        padding: 0 0.5rem;
-        cursor: pointer;
-        background: none;
-        border: none;
-        font: inherit;
-
-        &:hover {
-          background: var(--primary-color-hover, #4990CD);
-          color: white; /* NOSONAR: 主题色悬停态，对比度由主题色决定 */
-        }
-      }
     }
 
   }
@@ -111,7 +131,7 @@
 
       .ant-menu-submenu-selected {
         &>div {
-          color: white;
+          color: var(--oa-sider-text, rgba(255, 255, 255, 0.85));
         }
       }