@jiangood/open-admin 2.5.9 → 3.0.1

package/package.json

@@ -1,10 +1,14 @@
 {
   "devDependencies": {
+    "@playwright/test": "^1.62.0",
     "@types/qs": "^6.15.1",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6.0.0",
     "babel-plugin-react-compiler": "^1.0.0",
-    "typescript": "^6.0.3"
+    "less": "^4.2.0",
+    "typescript": "^7.0.0",
+    "vite": "^8.0.0"
   },
   "peerDependencies": {
     "@ant-design/icons": "^6.0.0",
@@ -16,8 +20,7 @@
     "lodash": "^4.17.23",
     "qs": "^6.14.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "umi": "^4.0.0"
+    "react-dom": "^19.0.0"
   },
   "name": "@jiangood/open-admin",
   "repository": {
@@ -25,16 +28,25 @@
     "url": "https://github.com/jiangood/open-admin"
   },
   "description": "open-admin",
+  "type": "module",
   "files": [
     "src/*",
-    "config/*",
-    "!src/.umi",
+    "vite-plugin/*",
     "!src/pages/test/*"
   ],
   "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./vite-plugin": "./vite-plugin/index.js",
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "dev": "umi dev",
-    "build": "umi build"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
-  "version": "2.5.9"
+  "version": "3.0.1"
 }

package/src/framework/GlobalData.ts

@@ -0,0 +1,85 @@
+import {StorageUtils} from './utils/StorageUtils';
+
+const SITE_INFO_KEY = "siteInfo";
+const LOGIN_INFO_KEY = "loginInfo";
+const DICT_INFO_KEY = "dictInfo";
+const SITE_ARTICLES_KEY = "siteArticles";
+
+export interface SiteInfo {
+    title?: string;
+    waterMark?: boolean;
+    [key: string]: unknown;
+}
+
+export interface LoginInfo {
+    name?: string;
+    account?: string;
+    phone?: string;
+    email?: string;
+    unit?: string;
+    dept?: string;
+    roles?: string;
+    createTime?: string;
+    permissions?: string[];
+    [key: string]: unknown;
+}
+
+export interface DictItem {
+    code: string | number;
+    label: string;
+    color?: string;
+    typeCode?: string;
+}
+
+export interface ArticleItem {
+    code: string;
+    title: string;
+    [key: string]: unknown;
+}
+
+export interface SiteArticles {
+    HEADER_AVATAR_DROPDOWN?: ArticleItem[];
+    HEADER_RIGHT?: ArticleItem[];
+    HEADER_LEFT?: ArticleItem[];
+    [key: string]: unknown;
+}
+
+export class GlobalData {
+    static setSiteInfo(data: SiteInfo): void {
+        StorageUtils.set(SITE_INFO_KEY, data);
+    }
+
+    static getSiteInfo(): SiteInfo {
+        return StorageUtils.get<SiteInfo>(SITE_INFO_KEY) || {};
+    }
+
+    static setLoginInfo(data: LoginInfo): void {
+        StorageUtils.set(LOGIN_INFO_KEY, data);
+    }
+
+    static getLoginInfo(): LoginInfo {
+        return StorageUtils.get<LoginInfo>(LOGIN_INFO_KEY) || {};
+    }
+
+    static setDictInfo(data: DictItem[] | null): void {
+        StorageUtils.set(DICT_INFO_KEY, data);
+    }
+
+    static getDictInfo(): DictItem[] | null {
+        return StorageUtils.get<DictItem[]>(DICT_INFO_KEY);
+    }
+
+    static setSiteArticles(data: SiteArticles): void {
+        StorageUtils.set(SITE_ARTICLES_KEY, data);
+    }
+
+    static getSiteArticles(): SiteArticles {
+        return StorageUtils.get<SiteArticles>(SITE_ARTICLES_KEY) || {};
+    }
+}
+
+export const ARTICLE_HEADER_LEFT = 'HEADER_LEFT';
+export const ARTICLE_HEADER_RIGHT = 'HEADER_RIGHT';
+export const ARTICLE_HEADER_AVATAR_DROPDOWN = 'HEADER_AVATAR_DROPDOWN';
+
+export { SITE_INFO_KEY, LOGIN_INFO_KEY, DICT_INFO_KEY, SITE_ARTICLES_KEY };

package/src/framework/biz/OrgTree.tsx

@@ -1,7 +1,7 @@
 import {Alert, Skeleton, Tree} from 'antd';
 import React from 'react';
-import * as Icons from '@ant-design/icons';
 import {HttpUtils} from "../utils";
+import {NamedIcon} from "../components/NamedIcon";
 
 interface OrgTreeProps {
     onChange?: (orgId: string | null) => void;
@@ -48,12 +48,7 @@ export class OrgTree extends React.Component<OrgTreeProps, OrgTreeState> {
             onSelect={this.onSelectOrg}
             showIcon
             blockNode
-            icon={item => {
-                const icon = Icons[item.iconName]
-                if (icon) {
-                    return React.createElement(icon)
-                }
-            }}
+            icon={item => item.iconName ? <NamedIcon name={item.iconName}/> : null}
         />
     }
 }

package/src/framework/biz/Perm.tsx

@@ -0,0 +1,11 @@
+import React, {ReactNode} from "react";
+import {PermUtils} from "../utils";
+
+export class Perm extends React.Component<{ code: string, children: ReactNode }> {
+    render() {
+        if (PermUtils.hasPermission(this.props.code)) {
+            return this.props.children;
+        }
+        return null;
+    }
+}

package/src/framework/biz/PermActions.tsx

@@ -2,22 +2,25 @@ import React from 'react';
 import { Space } from 'antd';
 import { PermUtils } from '../utils';
 
-/**
- * 带权限的操作区。根据子元素的 `perm` 属性控制显隐，默认用 Space 包裹。
- * @param gap - 是否在操作项之间增加间距，默认 true
- */
-export function PermActions(props) {
-  const { children, gap = true } = props;
+interface PermActionsProps {
+    gap?: boolean;
+    children?: React.ReactNode;
+}
+
+export class PermActions extends React.Component<PermActionsProps> {
+    render() {
+        const { children, gap = true } = this.props;
 
-  const checkPerm = (element) => {
-    const _props = element?.props;
-    return !_props?.perm || PermUtils.hasPermission(_props.perm);
-  };
+        const checkPerm = (element) => {
+            const _props = element?.props;
+            return !_props?.perm || PermUtils.hasPermission(_props.perm);
+        };
 
-  const nodes = React.Children.toArray(children).filter(
-    (child) => child != null && checkPerm(child)
-  );
+        const nodes = React.Children.toArray(children).filter(
+            (child) => child != null && checkPerm(child)
+        );
 
-  if (!gap) return <>{nodes}</>;
-  return <Space>{nodes}</Space>;
+        if (!gap) return <>{nodes}</>;
+        return <Space>{nodes}</Space>;
+    }
 }

package/src/framework/biz/index.tsx

@@ -1,31 +1,46 @@
-import {FieldRemoteSelect, FieldRemoteSelectMultiple, FieldRemoteTreeSelect} from "../fields";
-import React from "react";
+import {FieldRemoteSelect, FieldRemoteTreeSelect} from "../fields";
+import React, {type ComponentProps} from "react";
 
 export * from './PermActions'
-export * from './HasPerm'
+export * from './Perm'
 export * from './OrgTree'
 export * from './RoleTree'
 
-export function FieldUserSelect(props) {
-    return <FieldRemoteSelect url="admin/sysUser/options" {...props} />;
+class InnerFieldUserSelect extends React.Component<ComponentProps<typeof FieldRemoteSelect>> {
+    render() {
+        return <FieldRemoteSelect url="admin/sysUser/options" {...this.props} />;
+    }
 }
-export function FieldUserSelectMultiple(props) {
-    return <FieldRemoteSelectMultiple url="admin/sysUser/options" {...props} />;
+class InnerFieldUserSelectMultiple extends React.Component<ComponentProps<typeof FieldRemoteSelect>> {
+    render() {
+        return <FieldRemoteSelect url="admin/sysUser/options" multiple {...this.props} />;
+    }
 }
-
-export function FieldUnitTreeSelect(props) {
-    return <FieldRemoteTreeSelect url="admin/sysOrg/unit-tree" {...props} />;
+class InnerFieldUnitTreeSelect extends React.Component<ComponentProps<typeof FieldRemoteTreeSelect>> {
+    render() {
+        return <FieldRemoteTreeSelect url="admin/sysOrg/unit-tree" {...this.props} />;
+    }
 }
-
-export function FieldDeptTreeSelect(props) {
-    return <FieldRemoteTreeSelect url="admin/sysOrg/dept-tree" {...props} />;
+class InnerFieldDeptTreeSelect extends React.Component<ComponentProps<typeof FieldRemoteTreeSelect>> {
+    render() {
+        return <FieldRemoteTreeSelect url="admin/sysOrg/dept-tree" {...this.props} />;
+    }
 }
-
-export function FieldOrgTreeSelect(props) {
-    return <FieldRemoteTreeSelect url="admin/sysOrg/dept-tree" {...props} />;
+class InnerFieldOrgTreeSelect extends React.Component<ComponentProps<typeof FieldRemoteTreeSelect>> {
+    render() {
+        return <FieldRemoteTreeSelect url="admin/sysOrg/dept-tree" {...this.props} />;
+    }
 }
-
-export function FieldOrgTreeMultipleSelect(props) {
-    return <FieldRemoteSelectMultiple url="/sysOrg/dept-tree" {...props} />;
+class InnerFieldOrgTreeMultipleSelect extends React.Component<ComponentProps<typeof FieldRemoteTreeSelect>> {
+    render() {
+        return <FieldRemoteTreeSelect url="admin/sysOrg/dept-tree" multiple {...this.props} />;
+    }
 }
 
+export const FieldUserSelect = InnerFieldUserSelect;
+export const FieldUserSelectMultiple = InnerFieldUserSelectMultiple;
+export const FieldUnitTreeSelect = InnerFieldUnitTreeSelect;
+export const FieldDeptTreeSelect = InnerFieldDeptTreeSelect;
+export const FieldOrgTreeSelect = InnerFieldOrgTreeSelect;
+export const FieldOrgTreeMultipleSelect = InnerFieldOrgTreeMultipleSelect;
+

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
 interface ContextMenuItem {
     key: string;
@@ -17,83 +17,110 @@ interface ContextMenuProps {
     onClose: () => void;
 }
 
-export const ContextMenu: React.FC<ContextMenuProps> = ({ x, y, items, onClick, onClose }) => {
-    const ref = useRef<HTMLDivElement>(null);
+export class ContextMenu extends React.Component<ContextMenuProps> {
+    menuRef = React.createRef<HTMLDivElement>();
+    timer: ReturnType<typeof setTimeout> | null = null;
 
-    useEffect(() => {
-        const handleMouseDown = (e: MouseEvent) => {
-            if (ref.current && !ref.current.contains(e.target as Node)) {
-                onClose();
-            }
-        };
-        const handleScroll = () => onClose();
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Escape') onClose();
-        };
-        const timer = setTimeout(() => {
-            document.addEventListener('mousedown', handleMouseDown);
-            document.addEventListener('scroll', handleScroll, true);
-            document.addEventListener('keydown', handleKeyDown);
+    handleMouseDown = (e: MouseEvent) => {
+        if (this.menuRef.current && !this.menuRef.current.contains(e.target as Node)) {
+            this.props.onClose();
+        }
+    };
+
+    handleScroll = () => {
+        this.props.onClose();
+    };
+
+    handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') this.props.onClose();
+    };
+
+    componentDidMount() {
+        this.timer = setTimeout(() => {
+            document.addEventListener('mousedown', this.handleMouseDown);
+            document.addEventListener('scroll', this.handleScroll, true);
+            document.addEventListener('keydown', this.handleKeyDown);
         }, 0);
-        return () => {
-            clearTimeout(timer);
-            document.removeEventListener('mousedown', handleMouseDown);
-            document.removeEventListener('scroll', handleScroll, true);
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [onClose]);
+    }
+
+    componentDidUpdate(prevProps: ContextMenuProps) {
+        if (prevProps.onClose !== this.props.onClose) {
+            if (this.timer !== null) clearTimeout(this.timer);
+            document.removeEventListener('mousedown', this.handleMouseDown);
+            document.removeEventListener('scroll', this.handleScroll, true);
+            document.removeEventListener('keydown', this.handleKeyDown);
+            this.timer = setTimeout(() => {
+                document.addEventListener('mousedown', this.handleMouseDown);
+                document.addEventListener('scroll', this.handleScroll, true);
+                document.addEventListener('keydown', this.handleKeyDown);
+            }, 0);
+        }
+    }
 
-    return (
-        <div
-            ref={ref}
-            style={{
-                position: 'fixed',
-                left: x,
-                top: y,
-                zIndex: 1050,
-                background: '#fff',
-                borderRadius: 4,
-                padding: '4px 0',
-                minWidth: 120,
-                boxShadow: '0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)',
-            }}
-        >
-            {items.map(item => (
-                item.divider ? (
-                    <div key={item.key} style={{ height: 1, background: '#f0f0f0', margin: '4px 0' }} />
-                ) : (
-                    <div
-                        key={item.key}
-                        onClick={() => {
-                            if (!item.disabled) {
-                                onClick({ key: item.key });
-                                onClose();
-                            }
-                        }}
-                        style={{
-                            padding: '5px 12px',
-                            fontSize: 13,
-                            cursor: item.disabled ? 'not-allowed' : 'pointer',
-                            color: item.danger ? '#ff4d4f' : item.disabled ? 'rgba(0,0,0,0.25)' : '#333',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 8,
-                            background: 'transparent',
-                            transition: 'background 0.15s',
-                            userSelect: 'none',
-                        }}
-                        onMouseEnter={(e) => {
-                            if (!item.disabled) e.currentTarget.style.background = '#f5f5f5';
-                        }}
-                        onMouseLeave={(e) => {
-                            e.currentTarget.style.background = 'transparent';
-                        }}
-                    >
-                        {item.icon && <span style={{ fontSize: 14, lineHeight: 1 }}>{item.icon}</span>}
-                        <span>{item.label}</span>
-                    </div>
-                )
-            ))}
-        </div>
-    );
-};
+    componentWillUnmount() {
+        if (this.timer !== null) {
+            clearTimeout(this.timer);
+        }
+        document.removeEventListener('mousedown', this.handleMouseDown);
+        document.removeEventListener('scroll', this.handleScroll, true);
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+
+    render() {
+        const { x, y, items, onClick, onClose } = this.props;
+
+        return (
+            <div
+                ref={this.menuRef}
+                style={{
+                    position: 'fixed',
+                    left: x,
+                    top: y,
+                    zIndex: 1050,
+                    background: '#fff',
+                    borderRadius: 4,
+                    padding: '4px 0',
+                    minWidth: 120,
+                    boxShadow: '0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)',
+                }}
+            >
+                {items.map(item => (
+                    item.divider ? (
+                        <div key={item.key} style={{ height: 1, background: '#f0f0f0', margin: '4px 0' }} />
+                    ) : (
+                        <div
+                            key={item.key}
+                            onClick={() => {
+                                if (!item.disabled) {
+                                    onClick({ key: item.key });
+                                    onClose();
+                                }
+                            }}
+                            style={{
+                                padding: '5px 12px',
+                                fontSize: 13,
+                                cursor: item.disabled ? 'not-allowed' : 'pointer',
+                                color: item.danger ? '#ff4d4f' : item.disabled ? 'rgba(0,0,0,0.25)' : '#333',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 8,
+                                background: 'transparent',
+                                transition: 'background 0.15s',
+                                userSelect: 'none',
+                            }}
+                            onMouseEnter={(e) => {
+                                if (!item.disabled) e.currentTarget.style.background = '#f5f5f5';
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.background = 'transparent';
+                            }}
+                        >
+                            {item.icon && <span style={{ fontSize: 14, lineHeight: 1 }}>{item.icon}</span>}
+                            <span>{item.label}</span>
+                        </div>
+                    )
+                ))}
+            </div>
+        );
+    }
+}

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

@@ -9,7 +9,7 @@ import axios from "axios";
 import qs from 'qs';
 
 const axiosInstance = axios.create({
-  baseURL: (typeof SERVLET_CONTEXT !== 'undefined' && SERVLET_CONTEXT) || '',
+  baseURL: import.meta.env.VITE_SERVER_SERVLET_CONTEXT_PATH,
   withCredentials: true,
   headers: {'Content-Type': 'application/json'},
   paramsSerializer: (params) => qs.stringify(params, {indices: false})
@@ -34,15 +34,19 @@ interface ModalState {
   errorMessage: string;
 }
 
-export class DownloadModal extends React.Component<{}, ModalState> {
-  static instance: DownloadModal | null = null;
+export interface DownloadModalProps {
+  title?: string;
+  onFinish?: () => void;
+}
+
+export class DownloadModal extends React.Component<DownloadModalProps, ModalState> {
   private abortController: AbortController | null = null;
   private lastOptions: DownloadOptions | null = null;
   private lastTime: number = 0;
   private lastLoaded: number = 0;
   private speedTimer: ReturnType<typeof setInterval> | null = null;
 
-  constructor(props: {}) {
+  constructor(props: DownloadModalProps) {
     super(props);
     this.state = {
       open: false,
@@ -54,21 +58,14 @@ export class DownloadModal extends React.Component<{}, ModalState> {
       speed: '',
       errorMessage: '',
     };
-    DownloadModal.instance = this;
   }
 
-  static download(options: DownloadOptions) {
-    const instance = DownloadModal.instance;
-    if (instance) {
-      instance.startDownload(options);
-    } else {
-      console.warn('[DownloadModal] 组件未挂载，download() 调用被忽略');
-    }
-  }
+  download = (options: DownloadOptions) => {
+    this.startDownload(options);
+  };
 
   componentWillUnmount() {
     this.clearSpeedTimer();
-    DownloadModal.instance = null;
   }
 
   private clearSpeedTimer() {
@@ -236,6 +233,7 @@ export class DownloadModal extends React.Component<{}, ModalState> {
         speed: '',
         loaded: total || this.state.loaded,
       });
+      this.props.onFinish?.();
     }).catch((error: any) => {
       this.clearSpeedTimer();
       if (axios.isCancel(error)) {
@@ -260,9 +258,9 @@ export class DownloadModal extends React.Component<{}, ModalState> {
 
     return (
       <Modal
-        title={<span><DownloadOutlined style={{marginRight: 8}}/>文件下载</span>}
+        title={<span><DownloadOutlined style={{marginRight: 8}}/>{this.props.title || '文件下载'}</span>}
         open={open}
-        maskClosable={false}
+        mask={{closable: false}}
         closable={status !== 'downloading'}
         onCancel={this.handleClose}
         footer={
@@ -275,7 +273,7 @@ export class DownloadModal extends React.Component<{}, ModalState> {
             </>
           ) : null
         }
-        destroyOnClose
+        destroyOnHidden
       >
         <div style={{padding: '20px 0'}}>
           {/* 文件名 */}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Button, Collapse, Result} from 'antd';
-import {ThemeUtils} from '../../utils';
+import {getToken} from '../../config';
 
 interface Props {
     children: React.ReactNode;
@@ -69,7 +69,7 @@ export default class ErrorBoundary extends React.Component<Props, State> {
             fontSize: 12, fontFamily: 'monospace',
             whiteSpace: 'pre-wrap', wordBreak: 'break-all',
             background: '#f5f5f5', padding: 12, borderRadius: 4,
-            color: ThemeUtils.getColor('error-color') || '#ff4d4f',
+            color: getToken().colorError,
         };
 
         return (

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

@@ -0,0 +1,76 @@
+import {Form, FormInstance, Modal} from 'antd'
+import React from 'react'
+
+export interface FormModalProps {
+  title: string
+  onFinish?: (values: Record<string, any>) => Promise<void> | void
+  onValuesChange?: (changedValues: any, allValues: any) => void
+  width?: number
+  labelCol?: Record<string, any>
+  children?: React.ReactNode
+}
+
+export default class FormModal extends React.Component<FormModalProps> {
+
+  state = {
+    visible: false,
+    confirmLoading: false,
+  }
+
+  private pendingValues: Record<string, any> | null = null
+  private formRef = React.createRef<FormInstance>()
+
+  get formInstance() {
+    return this.formRef.current
+  }
+
+  open = (values?: Record<string, any>) => {
+    this.pendingValues = values || {}
+    this.setState({visible: true})
+  }
+
+  componentDidUpdate(_: Readonly<FormModalProps>, prevState: Readonly<{ visible: boolean; confirmLoading: boolean }>) {
+    if (this.state.visible && !prevState.visible) {
+      setTimeout(() => {
+        if (this.pendingValues && Object.keys(this.pendingValues).length > 0) {
+          this.formRef.current?.setFieldsValue(this.pendingValues)
+        } else {
+          this.formRef.current?.resetFields()
+        }
+        this.pendingValues = null
+      })
+    }
+  }
+
+  private handleOk = async () => {
+    this.setState({confirmLoading: true})
+    try {
+      const values = await this.formRef.current?.validateFields()
+      if (values == null) return
+      await this.props.onFinish?.(values)
+      this.setState({visible: false})
+    } finally {
+      this.setState({confirmLoading: false})
+    }
+  }
+
+  render() {
+    return (
+      <Modal
+        title={this.props.title}
+        open={this.state.visible}
+        confirmLoading={this.state.confirmLoading}
+        onOk={this.handleOk}
+        onCancel={() => this.setState({visible: false})}
+        destroyOnHidden
+        width={this.props.width ?? 600}
+      >
+        <Form ref={this.formRef} labelCol={this.props.labelCol ?? {flex: '100px'}}
+              onValuesChange={this.props.onValuesChange}>
+          <Form.Item name='id' noStyle/>
+          {this.props.children}
+        </Form>
+      </Modal>
+    )
+  }
+}