@jiangood/open-admin 2.5.8 → 3.0.0

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

@@ -38,5 +38,5 @@ export const Gap: React.FC<GapProps> = ({
     ...rest.style,
   };
 
-  return <div style={style} {...rest} />;
+  return <div {...rest} style={style} />;
 };

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

@@ -1,6 +1,25 @@
-import * as Icons from '@ant-design/icons';
-import { WarningOutlined } from '@ant-design/icons';
-import React from 'react';
+import {WarningOutlined} from '@ant-design/icons';
+import React, {useEffect, useState} from 'react';
+
+type IconComponent = React.ComponentType<React.ComponentProps<typeof WarningOutlined>>;
+
+/**
+ * 构建期生成 "图标名 -> 按需加载函数" 的映射。
+ * 避免 import * as Icons 全量打包 @ant-design/icons（800+ 图标），
+ * 每个图标编译为独立 chunk，仅在菜单/数据引用时按需加载。
+ */
+const iconLoaders: Record<string, () => Promise<{ default: IconComponent }>> = {};
+for (const [path, loader] of Object.entries(
+    import.meta.glob('/node_modules/@ant-design/icons/es/icons/*.js')
+)) {
+    const name = /([^/]+)\.js$/.exec(path)?.[1];
+    if (name) {
+        iconLoaders[name] = loader as () => Promise<{ default: IconComponent }>;
+    }
+}
+
+/** 已加载图标缓存，命中后渲染为同步 */
+const iconCache = new Map<string, IconComponent>();
 
 type NamedIconProps = {
     name: string;
@@ -8,12 +27,39 @@ type NamedIconProps = {
 
 export function NamedIcon(props: NamedIconProps): React.ReactElement {
     const {name, ...rest} = props;
-    const IconType = Icons[name as keyof typeof Icons];
+    const [loaded, setLoaded] = useState<{ name: string; comp: IconComponent } | null>(null);
 
-    if (IconType) {
-        return <IconType {...rest}></IconType>;
-    }
+    useEffect(() => {
+        if (iconCache.has(name)) {
+            return;
+        }
+        const loader = iconLoaders[name];
+        if (!loader) {
+            console.warn(`NamedIcon: icon "${name}" not found, using fallback`);
+            return;
+        }
+        let cancelled = false;
+        loader().then(mod => {
+            iconCache.set(name, mod.default);
+            if (!cancelled) {
+                setLoaded({name, comp: mod.default});
+            }
+        }).catch(e => {
+            console.warn(`NamedIcon: failed to load icon "${name}"`, e);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [name]);
+
+    const Icon = (loaded && loaded.name === name) ? loaded.comp : iconCache.get(name);
 
-    console.warn(`NamedIcon: icon "${name}" not found, using fallback`);
-    return <WarningOutlined {...rest} />;
+    if (Icon) {
+        return <Icon {...rest} />;
+    }
+    if (!iconLoaders[name]) {
+        return <WarningOutlined {...rest} />;
+    }
+    // 加载中：1em 占位，避免菜单布局抖动
+    return <span style={{display: 'inline-block', width: '1em', height: '1em', verticalAlign: '-0.125em'}}/>;
 }

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

@@ -2,7 +2,6 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: #f5f7fa;
 
   .oa-page-header {
     margin-bottom: 16px;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Typography } from "antd";
 import './index.less'
-import {ThemeUtils} from "../../utils";
+import {getToken} from "../../config";
 import { PermActions } from "../../biz/PermActions";
 
 interface PageProps {
@@ -14,34 +14,41 @@ interface PageProps {
     children?: React.ReactNode;
 }
 
-export const Page: React.FC<PageProps> = ({ padding = true, backgroundGray = false, debug = false, title, description, actions, children }) => {
-    const hasHeader = title != null;
-    const style: React.CSSProperties = {};
+export class Page extends React.Component<PageProps> {
+    render() {
+        const { padding = true, backgroundGray = false, debug = false, title, description, actions, children } = this.props;
+        const hasHeader = title != null || description != null || actions != null;
+        const style: React.CSSProperties = {};
 
-    if (padding) {
-        style.padding = 16;
-    }
-    if (backgroundGray) {
-        style.backgroundColor = ThemeUtils.getColor("background-color");
-    }
-    if (debug) {
-        style.backgroundColor = 'rgba(255, 0, 0, 0.08)';
-    }
+        if (padding) {
+            style.padding = 16;
+        }
+        const token = getToken();
+        if (backgroundGray) {
+            style.backgroundColor = token.colorBgLayout;
+        }
+        if (debug) {
+            style.backgroundColor = 'rgba(255, 0, 0, 0.08)';
+        }
+        if (!style.backgroundColor) {
+            style.backgroundColor = token.colorBgLayout;
+        }
 
-    return <div className={'oa-page'} style={style}>
-        {hasHeader && (
-            <div className="oa-page-header">
-                <div className="oa-page-header-top">
-                    <div className="oa-page-header-left">
-                        <div>
-                            {title && <Typography.Title level={5} style={{ margin: 0 }}>{title}</Typography.Title>}
-                            {description && <div><Typography.Text type="secondary">{description}</Typography.Text></div>}
+        return <div className={'oa-page'} style={style}>
+            {hasHeader && (
+                <div className="oa-page-header">
+                    <div className="oa-page-header-top">
+                        <div className="oa-page-header-left">
+                            <div>
+                                {title && <Typography.Title level={5} style={{ margin: 0 }}>{title}</Typography.Title>}
+                                {description && <div><Typography.Text type="secondary">{description}</Typography.Text></div>}
+                            </div>
                         </div>
+                        {actions && <PermActions>{actions}</PermActions>}
                     </div>
-                    {actions && <PermActions>{actions}</PermActions>}
                 </div>
-            </div>
-        )}
-        {children}
-    </div>
-};
+            )}
+            {children}
+        </div>;
+    }
+}

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

@@ -0,0 +1,15 @@
+.oa-page-loading {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .oa-page-loading-content {
+    text-align: center;
+
+    .oa-page-loading-messages {
+      margin-top: 24px;
+    }
+  }
+}

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

@@ -1,24 +1,40 @@
 import React from "react";
 import {Alert, Spin} from "antd";
-import {ThemeUtils} from "../../utils";
+import {LoadingOutlined} from "@ant-design/icons";
+import {getToken} from "../../config";
+import './index.less'
 
-export function PageLoading(props: { message?: string; messages?: string[] }) {
+export interface PageLoadingProps {
+    message?: string;
+    messages?: string[];
+}
+
+export function PageLoading(props: PageLoadingProps) {
     const titles = props.messages || (props.message ? [props.message] : ['页面加载中...']);
+    const primaryColor = getToken().colorPrimary;
 
-    return <div style={{
-        height: '100vh', width: '100%',
-        display: 'flex', alignItems: 'center', justifyContent: "center",
-        color: ThemeUtils.getColor("primary-color")
-    }}>
-        <div style={{textAlign: "center", marginTop: '-10rem'}}>
-            <div>
-                <Spin size={"large"}></Spin>
-            </div>
-            <div style={{marginTop: '1rem'}}>
-                {titles.map((msg, i) => (
-                    <Alert key={i} message={msg} type="info" showIcon style={{marginBottom: i < titles.length - 1 ? 8 : 0}} />
-                ))}
+    return (
+        <div className="oa-page-loading">
+            <div className="oa-page-loading-content">
+                <div>
+                    <Spin indicator={<LoadingOutlined style={{fontSize: 48, color: primaryColor}} spin/>}/>
+                </div>
+                <div className="oa-page-loading-messages">
+                    {titles.map((msg, i) => (
+                        <Alert
+                            key={i}
+                            title={<span style={{color: primaryColor}}>{msg}</span>}
+                            type="info"
+                            showIcon
+                            style={{
+                                marginBottom: i < titles.length - 1 ? 8 : 0,
+                                border: `1px solid ${primaryColor}20`,
+                                background: `${primaryColor}08`,
+                            }}
+                        />
+                    ))}
+                </div>
             </div>
         </div>
-    </div>;
+    );
 }

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

@@ -1,15 +1,81 @@
 import React from "react";
 import {Button, Form, Table} from 'antd';
+import type {FormInstance, TableProps} from 'antd';
 
 import {StringUtils} from "../../utils";
 
 import './index.less'
 
+/** 通过 actionRef 暴露的表格操作 */
+export interface ProTableActionRef {
+    reload: () => void;
+}
+
+/** request 返回结构（Spring Data Page 序列化 + 扩展数据） */
+export interface ProTableRequestResult<T = any> {
+    content: T[];
+    totalElements: number | string;
+    size: number;
+    extData?: {
+        summary?: React.ReactNode;
+        [key: string]: any;
+    };
+}
+
+export interface ProTableProps<T = any> {
+    /** 数据请求，框架自动注入 page/size/sort 参数 */
+    request: (params: Record<string, any>) => Promise<ProTableRequestResult<T>>;
+    /** antd Table 列定义 */
+    columns: TableProps<T>['columns'];
+    /** 获取表格操作句柄（reload） */
+    actionRef?: React.MutableRefObject<ProTableActionRef | undefined>;
+    /** 获取搜索表单实例 */
+    formRef?: React.MutableRefObject<FormInstance | undefined>;
+    /** 工具栏渲染，参数为当前搜索值与行选择状态 */
+    toolBarRender?: (params: Record<string, any>, selection: {
+        selectedRows: T[];
+        selectedRowKeys: React.Key[];
+    }) => React.ReactNode;
+    rowKey?: string;
+    /** 行选择：true 为默认 checkbox，对象可覆盖 type/onChange */
+    rowSelection?: boolean | {
+        type?: 'checkbox' | 'radio';
+        onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+    };
+    defaultPageSize?: number;
+    /** 搜索栏每行列数，默认 4 */
+    searchFormCols?: number;
+    /** 搜索表单渲染函数，返回 Form.Item 列表 */
+    searchFormRender?: () => React.ReactNode;
+    scrollY?: number | string;
+    bordered?: boolean;
+}
 
-export class ProTable extends React.Component {
+interface ProTableState<T = any> {
+    selectedRowKeys: React.Key[];
+    selectedRows: T[];
+    tableSize: 'small' | 'middle' | 'large';
+    loading: boolean;
+    params: Record<string, any>;
+    dataSource: T[];
+    total: number;
+    current: number;
+    pageSize: number;
+    sorter: {
+        field?: string;
+        order?: 'ascend' | 'descend' | null;
+    };
+    extData: {
+        summary?: React.ReactNode;
+        [key: string]: any;
+    };
+    scrollY: number | string | null;
+}
+
+export class ProTable<T = any> extends React.Component<ProTableProps<T>, ProTableState<T>> {
 
 
-    state = {
+    state: ProTableState<T> = {
         selectedRowKeys: [],
         selectedRows: [],
 
@@ -39,7 +105,10 @@ export class ProTable extends React.Component {
     }
 
 
-    constructor(props) {
+    id: string;
+    formRef: React.RefObject<FormInstance | null> = React.createRef();
+
+    constructor(props: ProTableProps<T>) {
         super(props);
         if (props.defaultPageSize) {
             this.state.pageSize = props.defaultPageSize
@@ -47,8 +116,6 @@ export class ProTable extends React.Component {
         this.id = StringUtils.random(32)
     }
 
-    formRef = React.createRef()
-
     componentDidMount() {
         this.loadData()
         if (this.props.actionRef) {
@@ -72,7 +139,7 @@ export class ProTable extends React.Component {
         const {sorter} = this.state
 
         const {field, order} = sorter
-        if (field) {
+        if (field && order) {
             params.sort = field + "," + (order === 'ascend' ? 'asc' : 'desc')
         }
 
@@ -82,7 +149,7 @@ export class ProTable extends React.Component {
             const {content, totalElements, size,extData} = rs;
 
 
-            this.setState({dataSource: content, total: parseInt(totalElements),pageSize:size})
+            this.setState({dataSource: content, total: Number(totalElements),pageSize:size})
             if (extData) {
                 this.setState({extData})
             }
@@ -160,19 +227,23 @@ export class ProTable extends React.Component {
 
 
     renderForm = () => {
-        if (!this.props.children) return
+        if (this.props.children) {
+            throw new Error('[ProTable] children 已废弃，请使用 searchFormRender prop 替代')
+        }
+        const searchContent = this.props.searchFormRender?.()
+        if (!searchContent) return
 
         return (
             <Form
                 className="filter-bar"
-                style={{gridTemplateColumns: `repeat(${this.props.searchColumns ?? 4}, 1fr)`}}
+                style={{gridTemplateColumns: `repeat(${this.props.searchFormCols ?? 4}, 1fr)`}}
                 onFinish={(values) => this.onSearch(values)}
                 ref={(instance) => {
                     this.formRef.current = instance;
                     if (this.props.formRef) this.props.formRef.current = instance;
                 }}
             >
-                {this.props.children}
+                {searchContent}
                 <div className="filter-actions">
                     <Button type='primary' htmlType="submit">查询</Button>
                     <Button onClick={() => {
@@ -184,7 +255,7 @@ export class ProTable extends React.Component {
         )
     };
 
-    getToolBarRenderNode(toolBarRender) {
+    getToolBarRenderNode(toolBarRender: NonNullable<ProTableProps<T>['toolBarRender']>) {
         if (!toolBarRender) {
             return
         }
@@ -195,7 +266,7 @@ export class ProTable extends React.Component {
         });
     }
 
-    getRowSelectionProps = rowSelection => {
+    getRowSelectionProps = (rowSelection: ProTableProps<T>['rowSelection']) => {
         if (rowSelection == null || rowSelection === false) {
             return null
         }
@@ -217,11 +288,11 @@ export class ProTable extends React.Component {
         };
     };
 
-    onSearch = (values) => {
-        this.setState({params: values, current: 1}, this.loadData)
+    onSearch = (values: Record<string, any>) => {
+        this.setState({params: values, current: 1, sorter: {}}, this.loadData)
     }
 
-    changeFormValues = (values) => {
+    changeFormValues = (values: Record<string, any>) => {
         if (this.formRef.current) {
             this.formRef.current.resetFields()
             this.formRef.current.setFieldsValue(values)

package/src/framework/components/index.ts

@@ -8,3 +8,4 @@ export * from './ValueType'
 export * from './ContextMenu'
 export * from './DownloadModal'
 export { default as ErrorBoundary } from './ErrorBoundary'
+export { default as FormModal } from './FormModal'

package/src/framework/config/index.ts

@@ -0,0 +1 @@
+export { getThemeConfig, getToken } from './themeConfig'

package/src/framework/config/themeConfig.ts

@@ -0,0 +1,39 @@
+import { theme } from 'antd';
+import type { ThemeConfig } from 'antd';
+
+const { getDesignToken } = theme;
+
+let cachedConfig: ThemeConfig | null = null;
+let cachedToken: Record<string, any> | null = null;
+
+function buildConfig(): ThemeConfig {
+  const token: Record<string, any> = { borderRadius: 4 };
+  const components: Record<string, any> = {
+    Layout: { headerBg: 'white', triggerHeight: 32 },
+  };
+
+  try {
+    const env = import.meta.env;
+    if (env.VITE_THEME_PRIMARY_COLOR) token.colorPrimary = env.VITE_THEME_PRIMARY_COLOR;
+    if (env.VITE_THEME_SUCCESS_COLOR) token.colorSuccess = env.VITE_THEME_SUCCESS_COLOR;
+    if (env.VITE_THEME_WARNING_COLOR) token.colorWarning = env.VITE_THEME_WARNING_COLOR;
+    if (env.VITE_THEME_ERROR_COLOR) token.colorError = env.VITE_THEME_ERROR_COLOR;
+    if (env.VITE_THEME_BACKGROUND_COLOR) token.colorBgLayout = env.VITE_THEME_BACKGROUND_COLOR;
+  } catch (e) {}
+
+  return { token, components };
+}
+
+export function getThemeConfig(): ThemeConfig {
+  if (!cachedConfig) {
+    cachedConfig = buildConfig();
+  }
+  return cachedConfig;
+}
+
+export function getToken(): Record<string, any> {
+  if (!cachedToken) {
+    cachedToken = getDesignToken(getThemeConfig());
+  }
+  return cachedToken;
+}

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

@@ -11,8 +11,17 @@
  */
 import React from 'react';
 import {Checkbox, Radio, Select, Switch} from 'antd';
+import type {FieldProps} from '../types';
 
-export class FieldBoolean extends React.Component {
+/** 布尔值的展示类型 */
+export type FieldBooleanType = 'select' | 'radio' | 'checkbox' | 'switch';
+
+export interface FieldBooleanProps extends FieldProps<boolean> {
+    /** 展示类型，默认 select */
+    type?: FieldBooleanType;
+}
+
+export class FieldBoolean extends React.Component<FieldBooleanProps> {
 
     static defaultProps = {
         type: 'select'
@@ -58,7 +67,7 @@ export class FieldBoolean extends React.Component {
 
     }
 
-    parseBoolean(v) {
+    parseBoolean(v: any): boolean | undefined {
         if (v === null || v === undefined) {
             return undefined;
         }

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

@@ -5,15 +5,29 @@ import React from "react";
 import dayjs from "dayjs";
 import {DatePicker, TimePicker} from "antd";
 import {DateUtils} from "../../utils";
+import type {FieldProps} from '../types';
 
-export class FieldDate extends React.Component {
+export interface FieldDateProps extends FieldProps<string> {
+    /** 日期类型，如 YYYY-MM-DD、YYYY-MM、HH:mm:ss 等，默认 YYYY-MM-DD */
+    type?: string;
+    /** 占位文本（透传给 DatePicker/TimePicker） */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 其余属性透传给 DatePicker/TimePicker */
+    [key: string]: any;
+}
+
+export class FieldDate extends React.Component<FieldDateProps> {
     static defaultProps = {
         type: 'YYYY-MM-DD'
     };
 
     render() {
         const {type, value, onChange, ...rest} = this.props;
-        const formattedType = DateUtils.convertTypeToFormat(type);
+        const formattedType = DateUtils.convertTypeToFormat(type as string);
 
         switch (formattedType) {
             case 'YYYY':
@@ -77,19 +91,20 @@ export class FieldDate extends React.Component {
 
     }
 
-    strToDate(value, fmt) {
+    strToDate(value: string | number | dayjs.Dayjs | null | undefined, fmt: string): dayjs.Dayjs | null | undefined {
         if (value != null && value !== '') {
             const type = typeof value;
             if (type === 'string' || type === 'number') {
-                return dayjs(value, fmt);
+                return dayjs(value as string | number, fmt);
             }
         }
 
-        return value;
+        return value as dayjs.Dayjs | null | undefined;
     }
 
-    dateToStr(date, fmt) {
-        return date ? date.format(fmt) : null;
+    dateToStr(date: dayjs.Dayjs | null | undefined, fmt: string): string {
+        // 清空时 date 为 null，此时按 null 回调给父组件
+        return date ? date.format(fmt) : (null as unknown as string);
     }
 
 }

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

@@ -5,17 +5,34 @@ import React from "react";
 import dayjs from "dayjs";
 import {DatePicker, TimePicker} from "antd";
 import {DateUtils, StringUtils} from "../../utils";
+import type {FieldProps} from '../types';
 
 const SP = StringUtils.ISO_SPLITTER;
 
-export class FieldDateRange extends React.Component {
+/** 日期范围值，形如 "2024-01-01/2024-01-31"（起止以 / 分隔） */
+export type FieldDateRangeValue = string;
+
+export interface FieldDateRangeProps extends FieldProps<FieldDateRangeValue> {
+    /** 日期类型，如 YYYY-MM-DD、YYYY-MM、HH:mm:ss 等，默认 YYYY-MM-DD */
+    type?: string;
+    /** 占位文本（透传给 RangePicker） */
+    placeholder?: string | [string, string];
+    /** 是否禁用 */
+    disabled?: boolean | [boolean, boolean];
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 其余属性透传给 RangePicker */
+    [key: string]: any;
+}
+
+export class FieldDateRange extends React.Component<FieldDateRangeProps> {
     static defaultProps = {
         type: 'YYYY-MM-DD'
     };
 
     render() {
         const {type, value, onChange, ...rest} = this.props;
-        const formattedType = DateUtils.convertTypeToFormat(type);
+        const formattedType = DateUtils.convertTypeToFormat(type as string);
 
         switch (formattedType) {
             case 'YYYY':
@@ -79,7 +96,7 @@ export class FieldDateRange extends React.Component {
 
     }
 
-    strToDate(v, fmt) {
+    strToDate(v: string | null | undefined, fmt: string): [dayjs.Dayjs, dayjs.Dayjs] | null {
         if (!v) {
             return null;
         }
@@ -90,9 +107,10 @@ export class FieldDateRange extends React.Component {
         return [dayjs(s1), dayjs(s2)];
     }
 
-    dateToStr(dateArr, fmt) {
-        const d1 = dateArr[0];
-        const d2 = dateArr[1];
+    dateToStr(dateArr: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null, fmt: string): string {
+        const arr = dateArr as [dayjs.Dayjs | null, dayjs.Dayjs | null];
+        const d1 = arr[0];
+        const d2 = arr[1];
 
         const s1 = d1 ? d1.format(fmt) : "";
         const s2 = d2 ? d2.format(fmt) : "";

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

@@ -18,6 +18,7 @@ export class FieldDictSelect extends React.Component<FieldDictSelectProps> {
                        onChange={this.props.onChange}
                        style={{width: '100%', minWidth: 200}}
                        options={options}
+                       notFoundContent={options.length === 0 ? '暂无字典数据' : undefined}
         />;
     }
 }

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

@@ -1,13 +1,19 @@
 import React from 'react';
 import {Editor as TinyMceEditor} from '@tinymce/tinymce-react';
 import {UrlUtils} from '../../utils';
+import type {FieldProps} from '../types';
+
+export interface FieldEditorProps extends FieldProps<string> {
+    /** 编辑器高度，默认 300 */
+    height?: number;
+}
 
 /**
  * 富文本编辑器
  *
  * 图片上传相关配置 https://www.tiny.cloud/docs/tinymce/7/image/
  */
-export class FieldEditor extends React.Component {
+export class FieldEditor extends React.Component<FieldEditorProps> {
     render() {
         const uploadUrl = UrlUtils.contextPath('/admin/sysFile/upload');
         const jsUrl = UrlUtils.contextPath('/admin/tinymce/tinymce.min.js');