@jiangood/open-admin 3.1.6 → 3.1.8

package/src/framework/components/ProTable/index.less

@@ -1,13 +1,14 @@
 .oa-pro-table {
     .filter-bar {
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        /* 列数由 searchFormCols 通过 --oa-filter-cols 注入，窄窗口下按断点收敛 */
+        grid-template-columns: repeat(var(--oa-filter-cols, 4), 1fr);
         gap: 12px 20px;
         align-items: center;
         padding: 16px 20px;
-        background: #fff;
-        border: 1px solid #e8e8e8;
-        border-radius: 6px;
+        background: var(--oa-color-bg-container, #fff);
+        border: 1px solid var(--oa-color-border, #e8e8e8);
+        border-radius: var(--oa-border-radius, 6px);
         margin-bottom: 16px;
 
         .ant-form-item {
@@ -28,7 +29,7 @@
 
                 label {
                     font-size: 13px;
-                    color: #666;
+                    color: var(--oa-color-text-secondary, #666);
                 }
             }
 
@@ -50,9 +51,9 @@
     }
 
     .pro-table-wrapper {
-        background: #fff;
-        border: 1px solid #e8e8e8;
-        border-radius: 6px;
+        background: var(--oa-color-bg-container, #fff);
+        border: 1px solid var(--oa-color-border, #e8e8e8);
+        border-radius: var(--oa-border-radius, 6px);
     }
 
     .pro-table-toolbar {
@@ -68,6 +69,11 @@
             gap: 8px;
             flex: 1;
             min-width: 0;
+
+            /* 仅内联搜索时允许换行，存量工具栏布局与之前完全一致 */
+            &.has-inline-search {
+                flex-wrap: wrap;
+            }
         }
 
         .pro-table-toolbar-right {
@@ -79,5 +85,61 @@
             margin-left: auto;
         }
     }
+
+    /* searchInline：搜索控件内联在工具栏左侧，与操作按钮同一行 */
+    .pro-table-search-inline {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: wrap;
+        margin: 0;
+
+        /* 定宽由 --oa-search-inline-width 控制，业务侧可覆盖；noStyle 的输入控件同样收敛 */
+        > .ant-form-item,
+        > .ant-input,
+        > .ant-input-affix-wrapper,
+        > .ant-picker,
+        > .ant-select {
+            width: var(--oa-search-inline-width, 260px);
+            max-width: 100%;
+        }
+
+        .ant-form-item {
+            margin: 0;
+        }
+
+        /* 视觉隐藏的提交按钮：保留回车提交能力，且不占位（不用 display:none，避免浏览器忽略默认提交按钮） */
+        .pro-table-search-submit {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            min-width: 0;
+            padding: 0;
+            margin: -1px;
+            border: 0;
+            overflow: hidden;
+            white-space: nowrap;
+            clip-path: inset(50%);
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    /* 桌面窄窗口下收敛搜索栏列数，避免标签+输入挤压/溢出 */
+    @media (max-width: 1400px) {
+        .filter-bar {
+            --oa-filter-cols: 3 !important;
+        }
+    }
+
+    @media (max-width: 1100px) {
+        .filter-bar {
+            --oa-filter-cols: 2 !important;
+
+            .filter-actions {
+                grid-column: 1 / -1;
+            }
+        }
+    }
 }
 

package/src/framework/components/ProTable/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {Button, Form, Table} from 'antd';
+import {Button, Empty, Form, Table} from 'antd';
 import type {FormInstance, TableProps} from 'antd';
 
 import {StringUtils, type AjaxBody} from "../../utils";
@@ -57,8 +57,14 @@ export interface ProTableProps<T = unknown> {
         onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
     };
     defaultPageSize?: number;
-    /** 搜索栏每行列数，默认 4 */
+    /** 搜索栏每行列数，默认 4（searchInline 时忽略） */
     searchFormCols?: number;
+    /**
+     * 搜索表单内联渲染到工具栏左侧，与操作按钮同一行（单条件页面省一行空间）。
+     * 内联模式不渲染「查询/重置」按钮：回车提交，条件清空后自动回到无筛选状态。
+     * 默认 false = 现有独立筛选卡
+     */
+    searchInline?: boolean;
     /** 搜索表单渲染函数，返回 Form.Item 列表 */
     searchFormRender?: () => React.ReactNode;
     scrollY?: number | string;
@@ -198,14 +204,18 @@ this.setState({loading: true})
             rowSelection,
             rowKey = "id",
         } = this.props
+        // 有筛选条件时区分「无匹配结果」与「暂无数据」，避免业务人员误以为数据丢失
+        const hasFilter = Object.keys(this.state.params || {}).length > 0
 
+        const inlineSearch = this.renderInlineSearch()
 
         return <div className={'oa-pro-table '} id={this.id}>
             {this.renderForm()}
             <div className="pro-table-wrapper">
-                {(toolBarRender || toolBarRightRender) && <div className="pro-table-toolbar">
-                    {toolBarRender && <div className="pro-table-toolbar-left">
-                        {this.getToolBarRenderNode(toolBarRender)}
+                {(inlineSearch || toolBarRender || toolBarRightRender) && <div className="pro-table-toolbar">
+                    {(inlineSearch || toolBarRender) && <div className={'pro-table-toolbar-left' + (inlineSearch ? ' has-inline-search' : '')}>
+                        {inlineSearch}
+                        {toolBarRender && this.getToolBarRenderNode(toolBarRender)}
                     </div>}
                     {toolBarRightRender && <div className="pro-table-toolbar-right">
                         {this.getToolBarRenderNode(toolBarRightRender)}
@@ -226,7 +236,7 @@ this.setState({loading: true})
                         total: this.state.total,
                         pageSize: this.state.pageSize,
                         current: this.state.current,
-                        pageSizeOptions: [10, 20, 50, 100, 500, 1000, 5000],
+                        pageSizeOptions: [10, 20, 50, 100],
                         showTotal: (total) => `共 ${total} 条`
                     }}
 
@@ -244,6 +254,10 @@ this.setState({loading: true})
 
                     footer={this.state.extData.summary ? () => this.state.extData.summary : null}
                     bordered={this.props.bordered ?? false}
+                    locale={{
+                        emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}
+                                           description={hasFilter ? '没有符合条件的数据' : '暂无数据'}/>,
+                    }}
                 />
             </div>
         </div>
@@ -252,21 +266,17 @@ this.setState({loading: true})
 
 
     renderForm = () => {
-        if (this.props.children) {
-            throw new Error('[ProTable] children 已废弃，请使用 searchFormRender prop 替代')
-        }
-        const searchContent = this.props.searchFormRender?.()
+        // 内联模式：搜索表单改由工具栏渲染（见 renderInlineSearch）
+        if (this.props.searchInline) return
+        const searchContent = this.getSearchContent()
         if (!searchContent) return
 
         return (
             <Form
                 className="filter-bar"
-                style={{gridTemplateColumns: `repeat(${this.props.searchFormCols ?? 4}, 1fr)`}}
+                style={{'--oa-filter-cols': this.props.searchFormCols ?? 4} as React.CSSProperties}
                 onFinish={(values) => this.onSearch(values)}
-                ref={(instance) => {
-                    this.formRef.current = instance;
-                    if (this.props.formRef) this.props.formRef.current = instance;
-                }}
+                ref={this.bindFormRef}
             >
                 {searchContent}
                 <div className="filter-actions">
@@ -280,6 +290,43 @@ this.setState({loading: true})
         )
     };
 
+    /** 内联搜索：单条件页面把搜索控件放到工具栏左侧，回车即查询，复用 onSearch 的取数逻辑 */
+    renderInlineSearch = () => {
+        if (!this.props.searchInline) return
+        const searchContent = this.getSearchContent()
+        if (!searchContent) return
+
+        return (
+            <Form
+                className="pro-table-search-inline"
+                onFinish={(values) => this.onSearch(values)}
+                onValuesChange={(changedValues) => {
+                    // 条件被清空（allowClear 等）后自动回到无筛选状态，否则用户还要再按一次回车
+                    const cleared = Object.values(changedValues).some(v => v == null || v === '' || (Array.isArray(v) && v.length === 0))
+                    if (cleared) this.formRef.current?.submit()
+                }}
+                ref={this.bindFormRef}
+            >
+                {searchContent}
+                {/* 视觉隐藏的提交按钮：多字段内联时也能回车提交 */}
+                <Button className="pro-table-search-submit" htmlType="submit" tabIndex={-1} aria-hidden/>
+            </Form>
+        )
+    };
+
+    /** 校验已废弃的 children 用法，返回搜索表单内容（无搜索表单时返回空） */
+    getSearchContent = () => {
+        if (this.props.children) {
+            throw new Error('[ProTable] children 已废弃，请使用 searchFormRender prop 替代')
+        }
+        return this.props.searchFormRender?.()
+    }
+
+    bindFormRef = (instance: FormInstance | null) => {
+        this.formRef.current = instance;
+        if (this.props.formRef) this.props.formRef.current = instance;
+    }
+
     getToolBarRenderNode(toolBarRender: ProTableToolBarRender<T>) {
         if (!toolBarRender) {
             return
@@ -317,7 +364,7 @@ this.setState({loading: true})
         this.setState({params: values, current: 1, sorter: {}}, this.loadData)
     }
 
-    changeFormValues = (values: Record<string, unknown>) => { // NOSONAR: ref 暴露给父组件/业务项目调用的公共 API
+    changeFormValues = (values: Record<string, unknown>) => {
         if (this.formRef.current) {
             this.formRef.current.resetFields()
             this.formRef.current.setFieldsValue(values)

package/src/framework/components/ThemeSettings/index.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { Button, Drawer, Segmented } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
+import {
+    THEME_PRESETS,
+    DEFAULT_COLORS,
+    DEFAULT_SIDER_BG,
+    applyThemePreset,
+    getActivePresetKey,
+    getThemeMode,
+    resetAllSettings,
+    setThemeMode,
+    DENSITY_PRESETS,
+    RADIUS_PRESETS,
+    applyDensityPreset,
+    getActiveDensityKey,
+    applyRadiusPreset,
+    getActiveRadiusKey,
+    getLayoutMode,
+    setLayoutMode,
+} from '../../config';
+import type { ThemeMode, ThemeDensity, ThemeRadius, LayoutMode } from '../../config';
+import { EventBus } from '../../utils/EventBus';
+
+export interface ThemeSettingsProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+    return <div style={{ margin: '20px 0 12px', fontWeight: 600 }}>{children}</div>;
+}
+
+/**
+ * 界面设置面板：外观模式、主题色、界面密度、圆角、界面布局。
+ * 所有变更即时生效并持久化到 localStorage。
+ */
+export function ThemeSettings({ open, onClose }: ThemeSettingsProps) {
+    const [activeKey, setActiveKey] = React.useState(getActivePresetKey());
+    const [mode, setMode] = React.useState<ThemeMode>(getThemeMode());
+    const [density, setDensity] = React.useState<ThemeDensity>(getActiveDensityKey());
+    const [radius, setRadius] = React.useState<ThemeRadius>(getActiveRadiusKey());
+    const [layout, setLayout] = React.useState<LayoutMode>(getLayoutMode());
+
+    React.useEffect(() => {
+        const offTheme = EventBus.on('themeChange', () => {
+            setActiveKey(getActivePresetKey());
+            setMode(getThemeMode());
+            setDensity(getActiveDensityKey());
+            setRadius(getActiveRadiusKey());
+        });
+        const offLayout = EventBus.on('layoutChange', () => {
+            setLayout(getLayoutMode());
+        });
+        return () => {
+            offTheme();
+            offLayout();
+        };
+    }, []);
+
+    const radiusValue = (key: ThemeRadius) =>
+        (RADIUS_PRESETS.find(p => p.key === key)?.token.borderRadius as number) ?? 6;
+
+    return (
+        <Drawer title="界面设置" open={open} onClose={onClose} size={340}>
+            <div style={{ fontWeight: 600 }}>外观模式</div>
+            <Segmented
+                block
+                style={{ marginTop: 12 }}
+                value={mode}
+                onChange={value => setThemeMode(value as ThemeMode)}
+                options={[
+                    { label: '浅色', value: 'light' },
+                    { label: '深色', value: 'dark' },
+                ]}
+            />
+
+            <SectionTitle>主题色</SectionTitle>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
+                {THEME_PRESETS.map(preset => {
+                    const primary = preset.colors.colorPrimary || DEFAULT_COLORS.colorPrimary || '#1677ff';
+                    const sider = preset.colors.siderBg || DEFAULT_SIDER_BG;
+                    const active = preset.key === activeKey;
+                    return (
+                        <button
+                            key={preset.key}
+                            type="button"
+                            aria-pressed={active}
+                            onClick={() => applyThemePreset(preset.key)}
+                            style={{
+                                cursor: 'pointer',
+                                padding: 0,
+                                overflow: 'hidden',
+                                borderRadius: 8,
+                                textAlign: 'left',
+                                background: 'transparent',
+                                border: active
+                                    ? `2px solid ${primary}`
+                                    : '1px solid var(--oa-color-border, #e8e8e8)',
+                            }}
+                        >
+                            <div style={{ display: 'flex', height: 44 }}>
+                                <div
+                                    style={{
+                                        width: '50%',
+                                        background: primary,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        color: '#fff',
+                                    }}
+                                >
+                                    {active && <CheckOutlined />}
+                                </div>
+                                <div style={{ width: '50%', background: sider }} />
+                            </div>
+                            <div style={{ padding: '6px 8px', fontSize: 12 }}>{preset.name}</div>
+                        </button>
+                    );
+                })}
+            </div>
+
+            <SectionTitle>界面密度</SectionTitle>
+            <Segmented
+                block
+                value={density}
+                onChange={value => applyDensityPreset(value as ThemeDensity)}
+                options={DENSITY_PRESETS.map(p => ({ label: p.name, value: p.key }))}
+            />
+
+            <SectionTitle>圆角</SectionTitle>
+            <Segmented
+                block
+                value={radius}
+                onChange={value => applyRadiusPreset(value as ThemeRadius)}
+                options={RADIUS_PRESETS.map(p => ({
+                    value: p.key,
+                    label: (
+                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+                            <span
+                                style={{
+                                    display: 'inline-block',
+                                    width: 14,
+                                    height: 14,
+                                    border: '1.5px solid currentColor',
+                                    borderRadius: radiusValue(p.key),
+                                }}
+                            />
+                            {p.name}
+                        </span>
+                    ),
+                }))}
+            />
+
+            <SectionTitle>界面布局</SectionTitle>
+            <Segmented
+                block
+                value={layout}
+                onChange={value => setLayoutMode(value as LayoutMode)}
+                options={[
+                    { label: '多标签页', value: 'tabs' },
+                    { label: '单页', value: 'single' },
+                ]}
+            />
+
+            <Button block style={{ marginTop: 20 }} onClick={() => resetAllSettings()}>
+                恢复默认
+            </Button>
+        </Drawer>
+    );
+}
+
+export default ThemeSettings;

package/src/framework/components/index.ts

@@ -8,6 +8,7 @@ export * from './ValueType'
 export * from './ContextMenu'
 export * from './DownloadModal'
 export * from './OrgSwitcher'
+export * from './ThemeSettings'
 export { default as ErrorBoundary } from './ErrorBoundary'
 export { default as FormModal } from './FormModal'
 export { default as FormDrawer } from './DrawerForm'

package/src/framework/config/index.ts

@@ -1,2 +1,44 @@
-export { getThemeConfig, getToken, setThemeColors } from './themeConfig'
-export type { ThemeColors } from './themeConfig'
+export {
+    getThemeConfig,
+    getSiderThemeConfig,
+    getToken,
+    setThemeColors,
+    getThemeMode,
+    setThemeMode,
+    toggleThemeMode,
+    applyThemePreset,
+    getActivePresetKey,
+    applyDensityPreset,
+    getActiveDensityKey,
+    applyRadiusPreset,
+    getActiveRadiusKey,
+    resetUserTheme,
+    DEFAULT_COLORS,
+    DEFAULT_PRESET_KEY,
+    DEFAULT_SIDER_BG,
+    DEFAULT_SIDER_TRIGGER_BG,
+    THEME_PRESETS,
+    DEFAULT_DENSITY_KEY,
+    DENSITY_PRESETS,
+    DEFAULT_RADIUS_KEY,
+    RADIUS_PRESETS,
+} from './themeConfig'
+export type { ThemeColors, ThemeMode, ThemePreset, ThemeDensity, ThemeRadius, ThemeDensityPreset, ThemeRadiusPreset } from './themeConfig'
+
+export {
+    getLayoutMode,
+    setLayoutMode,
+    toggleLayoutMode,
+    resetLayoutMode,
+    DEFAULT_LAYOUT_MODE,
+} from './layoutConfig'
+export type { LayoutMode } from './layoutConfig'
+
+import { resetUserTheme } from './themeConfig'
+import { resetLayoutMode } from './layoutConfig'
+
+/** 一键恢复全部界面设置：主题（颜色/明暗/密度/圆角）+ 布局 */
+export function resetAllSettings() {
+    resetUserTheme()
+    resetLayoutMode()
+}

package/src/framework/config/layoutConfig.ts

@@ -0,0 +1,52 @@
+import { EventBus } from '../utils/EventBus';
+
+export type LayoutMode = 'tabs' | 'single';
+
+const LAYOUT_MODE_KEY = 'oa-layout-tabs';
+
+export const DEFAULT_LAYOUT_MODE: LayoutMode = 'tabs';
+
+const LAYOUT_MODES: LayoutMode[] = ['tabs', 'single'];
+
+function readStoredLayoutMode(): LayoutMode {
+    if (typeof window === 'undefined') return DEFAULT_LAYOUT_MODE;
+    try {
+        const mode = localStorage.getItem(LAYOUT_MODE_KEY);
+        if (mode && LAYOUT_MODES.includes(mode as LayoutMode)) return mode as LayoutMode;
+    } catch {
+        // 隐私模式下 localStorage 不可用，忽略
+    }
+    return DEFAULT_LAYOUT_MODE;
+}
+
+let currentLayoutMode: LayoutMode = readStoredLayoutMode();
+
+/** 当前布局模式：'tabs' 多标签页 / 'single' 单页 */
+export function getLayoutMode(): LayoutMode {
+    return currentLayoutMode;
+}
+
+/** 设置布局模式，持久化并广播 layoutChange 供管理布局重渲染 */
+export function setLayoutMode(mode: LayoutMode) {
+    if (!LAYOUT_MODES.includes(mode) || currentLayoutMode === mode) return;
+    currentLayoutMode = mode;
+    if (typeof window !== 'undefined') {
+        try {
+            localStorage.setItem(LAYOUT_MODE_KEY, mode);
+        } catch {
+            // 忽略
+        }
+    }
+    EventBus.emit('layoutChange', mode);
+}
+
+export function toggleLayoutMode(): LayoutMode {
+    const next: LayoutMode = currentLayoutMode === 'tabs' ? 'single' : 'tabs';
+    setLayoutMode(next);
+    return next;
+}
+
+/** 恢复默认布局（多标签页） */
+export function resetLayoutMode() {
+    setLayoutMode(DEFAULT_LAYOUT_MODE);
+}