@jiangood/open-admin 3.0.4 → 3.0.6

package/package.json

@@ -48,5 +48,5 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   },
-  "version": "3.0.4"
+  "version": "3.0.6"
 }

package/src/framework/biz/PermActions.tsx

@@ -1,26 +1,143 @@
 import React from 'react';
-import { Space } from 'antd';
+import { Button, Dropdown, Popconfirm, Space } from 'antd';
+import { EllipsisOutlined } from '@ant-design/icons';
 import { PermUtils } from '../utils';
 
-interface PermActionsProps {
-    gap?: boolean;
+export interface PermAction {
+    /** 按钮文本 */
+    label: React.ReactNode;
+    /** 权限码，无权限时隐藏该操作（如 `sys-user:update`） */
+    perm?: string;
+    /** 点击回调（配合 confirm 时在确认后触发） */
+    onClick?: () => void;
+    /** 确认提示文案，设置后点击需二次确认 */
+    confirm?: React.ReactNode;
+    /** 危险操作样式（红色），常与 confirm 配合用于删除 */
+    danger?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 按钮类型，仅非下拉模式生效 */
+    type?: 'primary' | 'dashed' | 'link' | 'text' | 'default';
+}
+
+export interface PermActionsProps {
+    /** 是否折叠为「第一个操作 + 更多下拉」，多余操作进入 `...` 菜单 */
+    more?: boolean;
+    /** 按钮尺寸 */
+    size?: 'small' | 'middle' | 'large';
+    /** 传统写法：包裹带 `perm` 属性的子元素，按 `perm` 过滤。不推荐，建议改用 `actions` 数据驱动 */
     children?: React.ReactNode;
+    /** 数据驱动模式：操作数组，按每个 action 的 perm 过滤 */
+    actions?: PermAction[];
 }
 
 export class PermActions extends React.Component<PermActionsProps> {
+    static defaultProps: Partial<PermActionsProps> = {
+        more: false,
+        size: 'small',
+    };
+
     render() {
-        const { children, gap = true } = this.props;
+        const { children, more, size, actions } = this.props;
+
+        if (actions) {
+            return this.renderActions(actions, more, size);
+        }
 
         const checkPerm = (element) => {
             const _props = element?.props;
             return !_props?.perm || PermUtils.hasPermission(_props.perm);
         };
 
+        if (children != null) {
+            console.warn(
+                '[PermActions] children 写法已不推荐，请改用 actions 数据驱动模式：' +
+                '<PermActions actions={[{ label, perm, onClick }]} />'
+            );
+        }
+
         const nodes = React.Children.toArray(children).filter(
             (child) => child != null && checkPerm(child)
         );
 
-        if (!gap) return <>{nodes}</>;
+        if (nodes.length === 0) return null;
         return <Space>{nodes}</Space>;
     }
+
+    private renderButton(action: PermAction, size: 'small' | 'middle' | 'large') {
+        const button = (
+            <Button
+                size={size}
+                type={action.type}
+                icon={action.icon}
+                danger={action.danger}
+                disabled={action.disabled}
+                onClick={action.confirm ? undefined : action.onClick}
+            >
+                {action.label}
+            </Button>
+        );
+        if (action.confirm) {
+            return (
+                <Popconfirm title={action.confirm} onConfirm={action.onClick}>
+                    {button}
+                </Popconfirm>
+            );
+        }
+        return button;
+    }
+
+    private renderActions(
+        actions: PermAction[],
+        more?: boolean,
+        size: 'small' | 'middle' | 'large' = 'small'
+    ) {
+        const visible = actions.filter((a) => !a.perm || PermUtils.hasPermission(a.perm));
+        if (visible.length === 0) return null;
+
+        if (!more || visible.length <= 1) {
+            const buttons = visible.map((action, index) => (
+                <React.Fragment key={index}>{this.renderButton(action, size)}</React.Fragment>
+            ));
+            return <Space>{buttons}</Space>;
+        }
+
+        const [first, ...rest] = visible;
+
+        const items = rest.map((action, index) => {
+            const label = action.confirm ? (
+                <Popconfirm title={action.confirm} onConfirm={action.onClick}>
+                    <span>{action.label}</span>
+                </Popconfirm>
+            ) : (
+                action.label
+            );
+            return {
+                key: `more-${index}`,
+                label,
+                icon: action.icon,
+                danger: action.danger,
+                disabled: action.disabled,
+                onClick: (info) => {
+                    if (action.confirm) {
+                        info.domEvent.preventDefault();
+                        info.domEvent.stopPropagation();
+                    } else {
+                        action.onClick?.();
+                    }
+                },
+            };
+        });
+
+        return (
+            <Space.Compact>
+                {this.renderButton(first, size)}
+                <Dropdown menu={{ items }} placement="bottomRight">
+                    <Button size={size} icon={<EllipsisOutlined/>}/>
+                </Dropdown>
+            </Space.Compact>
+        );
+    }
 }

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

@@ -0,0 +1,58 @@
+import React from "react";
+import {TreeSelect} from "antd";
+import {HttpUtils} from "../../utils";
+
+interface OrgNode {
+    title: string;
+    key: string;
+    children?: OrgNode[];
+}
+
+const countUnits = (nodes: OrgNode[] = []): number =>
+    nodes.reduce((sum, n) => sum + 1 + countUnits(n.children), 0);
+
+/**
+ * 组织机构切换器：切换当前组织机构（单位），默认隐藏，由 Layouts 的 orgSwitcher 插槽按需渲染。
+ */
+export class OrgSwitcher extends React.Component<{}, {tree: OrgNode[]; currentOrgId: string | null}> {
+    state = {tree: [], currentOrgId: null};
+
+    componentDidMount() {
+        HttpUtils.get("admin/myOrgs").then(data => {
+            if (data) {
+                this.setState({tree: data.tree || [], currentOrgId: data.currentOrgId || null});
+            }
+        });
+    }
+
+    handleChange = (orgId: string) => {
+        HttpUtils.post("admin/switchOrg", {orgId}).then(() => {
+            setTimeout(() => location.reload(), 1000);
+        }).catch(() => {
+        });
+    };
+
+    render() {
+        const {tree, currentOrgId} = this.state;
+
+        if (countUnits(tree) === 0) {
+            return <span style={{marginRight: 8, color: "#999"}}>暂无组织机构</span>;
+        }
+
+        if (countUnits(tree) === 1) {
+            return <span style={{marginRight: 8}}>{tree[0].title}</span>;
+        }
+
+        return (
+            <TreeSelect
+                style={{width: 160, marginRight: 8}}
+                treeData={tree}
+                value={currentOrgId || undefined}
+                placeholder="选择组织机构"
+                onChange={this.handleChange}
+                treeDefaultExpandAll
+                showSearch
+            />
+        );
+    }
+}

package/src/framework/components/index.ts

@@ -7,5 +7,6 @@ export * from './Page'
 export * from './ValueType'
 export * from './ContextMenu'
 export * from './DownloadModal'
+export * from './OrgSwitcher'
 export { default as ErrorBoundary } from './ErrorBoundary'
 export { default as FormModal } from './FormModal'

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

@@ -6,6 +6,8 @@ import type {FieldProps} from '../types';
 export interface FieldEditorProps extends FieldProps<string> {
     /** 编辑器高度，默认 300 */
     height?: number;
+    /** 图片上传可见性，默认 public（富文本图片需公开访问） */
+    visibility?: 'public' | 'private';
 }
 
 /**
@@ -15,7 +17,8 @@ export interface FieldEditorProps extends FieldProps<string> {
  */
 export class FieldEditor extends React.Component<FieldEditorProps> {
     render() {
-        const uploadUrl = UrlUtils.contextPath('/admin/sysFile/upload');
+        const visibility = this.props.visibility || 'public';
+        const uploadUrl = UrlUtils.contextPath('/admin/sysFile/upload') + '?visibility=' + visibility;
         const jsUrl = UrlUtils.contextPath('/admin/tinymce/tinymce.min.js');
         const {value, onChange, height} = this.props;
 

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

@@ -8,8 +8,8 @@ import {ViewFile} from "../../views";
 import {ObjectUtils, UrlUtils} from "../../utils";
 import type {FieldProps} from '../types';
 
-/** 框架内使用的上传文件对象，额外携带 sysFile 的 id */
-export type SysUploadFile = UploadFile & { id?: string };
+/** 框架内使用的上传文件对象，额外携带 sysFile 的 objectName */
+export type SysUploadFile = UploadFile & { objectName?: string };
 
 export interface FieldUploadFileProps extends FieldProps<string> {
     /** 最大上传数量，默认 1 */
@@ -22,6 +22,8 @@ export interface FieldUploadFileProps extends FieldProps<string> {
     listType?: UploadProps['listType'];
     /** 接受的文件类型，如 image/* */
     accept?: string;
+    /** 文件可见性，默认 public */
+    visibility?: 'public' | 'private';
     /** 文件列表变化回调（新增文件上传成功后才触发） */
     onFileChange?: (fileList: SysUploadFile[]) => void;
 }
@@ -30,9 +32,10 @@ interface FieldUploadFileState {
     maxCount: number;
     cropImage: boolean;
     fileList: SysUploadFile[];
-    /** 逗号分隔的文件 id */
+    /** 逗号分隔的文件 objectName */
     value: string | null;
     accept?: string;
+    visibility?: 'public' | 'private';
 }
 
 /**
@@ -40,16 +43,17 @@ interface FieldUploadFileState {
  *
  * 可参考 react-easy-crop
  */
-export class FieldUploadFile extends React.Component<FieldUploadFileProps, FieldUploadFileState & { errorTitle?: string; errorContent?: string; previewFileId?: string }> {
+export class FieldUploadFile extends React.Component<FieldUploadFileProps, FieldUploadFileState & { errorTitle?: string; errorContent?: string; previewObjectName?: string }> {
 
-    state: FieldUploadFileState & { errorTitle?: string; errorContent?: string; previewFileId?: string } = {
+    state: FieldUploadFileState & { errorTitle?: string; errorContent?: string; previewObjectName?: string } = {
         // 传入的参数
         maxCount: 1,
         cropImage: false,
+        visibility: 'public',
 
         // 内部参数
         fileList: [],
-        value: null, // 都好分隔的文件id
+        value: null, // 逗号分隔的文件objectName
     };
 
     constructor(props: FieldUploadFileProps) {
@@ -62,6 +66,7 @@ export class FieldUploadFile extends React.Component<FieldUploadFileProps, Field
         const next: Partial<FieldUploadFileState> = {};
         if (this.props.maxCount !== prevProps.maxCount) next.maxCount = this.props.maxCount;
         if (this.props.cropImage !== prevProps.cropImage) next.cropImage = this.props.cropImage;
+        if (this.props.visibility !== prevProps.visibility) next.visibility = this.props.visibility;
 
         const prevValue = prevProps.value ?? null;
         const curValue = this.props.value ?? null;
@@ -77,9 +82,9 @@ export class FieldUploadFile extends React.Component<FieldUploadFileProps, Field
         const list: SysUploadFile[] = [];
         if (value && value.length > 0) {
             const arr = value.split(",");
-            for (const id of arr) {
-                const url = UrlUtils.contextPath('/admin/sysFile/preview/' + id);
-                const file = {id, url, uid: id, name: id, status: 'done', fileName: id} as SysUploadFile;
+            for (const objectName of arr) {
+                const url = UrlUtils.contextPath('/file/' + objectName);
+                const file = {objectName, url, uid: objectName, name: objectName, status: 'done', fileName: objectName} as SysUploadFile;
                 list.push(file);
             }
         }
@@ -88,24 +93,24 @@ export class FieldUploadFile extends React.Component<FieldUploadFileProps, Field
     }
 
     convertComponentValueToOutput(fileList: SysUploadFile[]): string[] {
-        const fileIds: string[] = [];
+        const objectNames: string[] = [];
         for (const f of fileList) {
             if (f.status === 'done') {
                 if (f.response) { // 新上传的
                     const ajaxResult = f.response;
                     if (ajaxResult.success) {
-                        const {id, name} = ajaxResult.data;
-                        f.id = id;
-                        fileIds.push(id);
+                        const {objectName, name} = ajaxResult.data;
+                        f.objectName = objectName;
+                        objectNames.push(objectName);
                     } else {
                         this.setState({errorTitle: '上传文件失败', errorContent: ajaxResult.message});
                     }
                 } else { // 老的
-                    fileIds.push(f.id as string);
+                    objectNames.push(f.objectName as string);
                 }
             }
         }
-        return fileIds;
+        return objectNames;
     }
 
     handleChange = ({fileList, event, file}: UploadChangeParam<SysUploadFile>) => {
@@ -133,7 +138,7 @@ export class FieldUploadFile extends React.Component<FieldUploadFileProps, Field
     };
 
     handlePreview = (file) => {
-        this.setState({previewFileId: file.id});
+        this.setState({previewObjectName: file.objectName});
     };
 
     render() {
@@ -150,9 +155,9 @@ export class FieldUploadFile extends React.Component<FieldUploadFileProps, Field
                    onOk={() => this.setState({errorTitle: undefined})}>
                 {this.state.errorContent}
             </Modal>
-            <Modal open={!!this.state.previewFileId} title="文件预览" width="80vw" footer={null}
-                   onCancel={() => this.setState({previewFileId: undefined})}>
-                {this.state.previewFileId && <ViewFile value={this.state.previewFileId} height='70vh'/>}
+            <Modal open={!!this.state.previewObjectName} title="文件预览" width="80vw" footer={null}
+                   onCancel={() => this.setState({previewObjectName: undefined})}>
+                {this.state.previewObjectName && <ViewFile value={this.state.previewObjectName} height='70vh'/>}
             </Modal>
         </>
     }
@@ -162,6 +167,7 @@ export class FieldUploadFile extends React.Component<FieldUploadFileProps, Field
 
         return <Upload
             action={UrlUtils.contextPath('/admin/sysFile/upload')}
+            data={{visibility: this.state.visibility}}
             listType={this.props.listType || 'picture-card'}
             fileList={fileList}
             onChange={this.handleChange}

package/src/framework/views/ViewFile/index.tsx

@@ -7,15 +7,15 @@ export class ViewFile extends React.Component {
 
 
     render() {
-        const fileId = this.props.value
+        const value = this.props.value
 
-        if (!fileId) {
+        if (!value) {
             return <Empty/>;
         }
 
-        const arr = fileId.split(',');
+        const arr = value.split(',');
 
-        const urlList = arr.map(id => UrlUtils.contextPath('/admin/sysFile/preview/' + id));
+        const urlList = arr.map(objectName => UrlUtils.contextPath('/file/' + objectName));
         const height = this.props.height;
 
         if(urlList.length === 1){

package/src/framework/views/ViewImage/index.tsx

@@ -23,16 +23,16 @@ export class ViewImage extends React.Component {
 
     const urlList = [];
     for (let v of vs) {
-      const isId = v.indexOf('/') === -1;
       const isAbsUrl = v.startsWith('http');
       const isDataUrl = v.startsWith('data:');
+      const isObjectName = v.startsWith('public/') || v.startsWith('private/');
       if (isAbsUrl || isDataUrl) {
         urlList.push(v);
         continue;
       }
 
-      if (isId) {
-        urlList.push(UrlUtils.contextPath('/admin/sysFile/preview/' + v));
+      if (isObjectName) {
+        urlList.push(UrlUtils.contextPath('/file/' + v));
         continue;
       }
 

package/src/layouts/admin/HeaderRight.jsx

@@ -38,7 +38,7 @@ export class HeaderRight extends React.Component {
     }
 
     account = () => {
-        PageUtils.open('/account', '个人中心')
+        PageUtils.open('/userCenter', '个人中心')
     }
 
     openArticle = (code, title) => {
@@ -61,7 +61,7 @@ export class HeaderRight extends React.Component {
         }))
 
         const menuItems = [
-            {key: 'account', label: '个人中心'},
+            {key: 'userCenter', label: '个人中心'},
             ...articleItems,
             {key: 'logout', label: '退出登录'},
         ]
@@ -76,7 +76,7 @@ export class HeaderRight extends React.Component {
 
             <Dropdown menu={{
                 onClick: ({key}) => {
-                    if (key === 'account') {
+                    if (key === 'userCenter') {
                         this.account()
                     } else if (key === 'logout') {
                         this.logout();

package/src/layouts/admin/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {Layout, Menu, Skeleton, Watermark} from 'antd';
 
 import "./index.less"
-import {HttpUtils, NamedIcon, PageUtils, GlobalData, TreeUtils, history, Link, ARTICLE_HEADER_LEFT} from "../../framework";
+import {HttpUtils, NamedIcon, PageUtils, GlobalData, TreeUtils, history, Link, ARTICLE_HEADER_LEFT, OrgSwitcher} from "../../framework";
 
 import { HeaderRight } from "./HeaderRight";
 import { TabLayout } from "./TabLayout";
@@ -204,6 +204,10 @@ return <Layout className='main-layout'>
                         <div key={a.code} className='item' style={{cursor: 'pointer', padding: '0 12px', whiteSpace: 'nowrap'}}
                              onClick={() => PageUtils.open('/article/' + a.code, a.title)}>{a.title}</div>
                     ))}
+                    {this.props.showOrgSwitcher?.({
+                        activeTopMenu: this.getActiveTopMenu(),
+                        loginInfo: this.props.loginInfo,
+                    }) && <OrgSwitcher/>}
                     {this.props.headerExtra?.({
                         activeTopMenu: this.getActiveTopMenu(),
                         loginInfo: this.props.loginInfo,

package/src/layouts/index.tsx

@@ -29,6 +29,7 @@ export interface HeaderExtraContext {
 
 interface LayoutsProps {
     headerExtra?: (context: HeaderExtraContext) => React.ReactNode;
+    showOrgSwitcher?: (context: HeaderExtraContext) => boolean;
 }
 
 export class Layouts extends React.Component<LayoutsProps> {
@@ -128,7 +129,7 @@ export class Layouts extends React.Component<LayoutsProps> {
         return (
             <ErrorBoundary minimal>
                 <ConfigProvider {...configProps}>
-                    {showPageFrame ? <PageFrame url={pathname + search}/> : ready ? <AdminLayout headerExtra={this.props.headerExtra} loginInfo={GlobalData.getLoginInfo()}/> : (
+                    {showPageFrame ? <PageFrame url={pathname + search}/> : ready ? <AdminLayout headerExtra={this.props.headerExtra} showOrgSwitcher={this.props.showOrgSwitcher} loginInfo={GlobalData.getLoginInfo()}/> : (
                         <PageLoading messages={[
                             !siteInfoLoaded && '加载站点信息...',
                             !loginChecked && '检查登录中...',

package/src/pages/article/$code.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {HttpUtils, Page} from "../../framework";
+import {HttpUtils, Page, UrlUtils} from "../../framework";
 
 export default class extends React.Component {
 
@@ -37,6 +37,11 @@ export default class extends React.Component {
         }
 
         return <Page title={article.title}>
+            {article.mainImage && (
+                <div style={{marginBottom: 16}}>
+                    <img src={UrlUtils.contextPath('/file/' + article.mainImage)} style={{maxWidth: '100%'}} alt='主图'/>
+                </div>
+            )}
             <div dangerouslySetInnerHTML={{__html: article.content}}/>
         </Page>
     }

package/src/pages/system/article/index.jsx

@@ -1,16 +1,18 @@
 import {PlusOutlined} from '@ant-design/icons'
-import {Button, Form, Input, InputNumber, Popconfirm} from 'antd'
+import {Button, Form, Input, InputNumber, Modal} from 'antd'
 import React from 'react'
 import {
     DictUtils,
     FieldBoolean,
     FieldDictSelect,
     FieldEditor,
+    FieldUploadFile,
     FormModal,
     HttpUtils,
     Page,
     PermActions,
-    ProTable
+    ProTable,
+    UrlUtils
 } from "../../../framework";
 
 const {TextArea} = Input;
@@ -19,6 +21,7 @@ export default class extends React.Component {
 
     state = {
         editing: false,
+        previewArticle: null,
     }
 
     modalRef = React.createRef()
@@ -34,6 +37,10 @@ export default class extends React.Component {
         this.modalRef.current.open(record)
     }
 
+    handlePreview = record => {
+        this.setState({previewArticle: record})
+    }
+
     onFinish = async values => {
         const isNew = !values.id;
         const url = isNew ? 'admin/article/create' : 'admin/article/update';
@@ -78,19 +85,20 @@ export default class extends React.Component {
             title: '操作',
             dataIndex: 'option',
             render: (_, record) => {
-                return (
-                    <PermActions>
-                        <Button size='small' perm='article:update' onClick={() => this.handleEdit(record)}>编辑</Button>
-                        <Popconfirm perm='article:delete' title='确定删除?' onConfirm={() => this.handleDelete(record)}>
-                            <Button size='small'>删除</Button>
-                        </Popconfirm>
-                    </PermActions>
-                );
+                return <PermActions
+                    more
+                    actions={[
+                        {label: '预览', onClick: () => this.handlePreview(record)},
+                        {label: '编辑', perm: 'article:update', onClick: () => this.handleEdit(record)},
+                        {label: '删除', perm: 'article:delete', confirm: '确定删除?', onClick: () => this.handleDelete(record)},
+                    ]}
+                />;
             },
         },
     ]
 
     render() {
+        const {previewArticle} = this.state
         return <Page
             title="文章管理"
             description="管理系统文章，如关于、帮助等页面"
@@ -126,6 +134,10 @@ export default class extends React.Component {
                     <Input/>
                 </Form.Item>
 
+                <Form.Item label='主图' name='mainImage'>
+                    <FieldUploadFile maxCount={1} cropImage accept='image/*'/>
+                </Form.Item>
+
                 <Form.Item label='内容' name='content'>
                     <FieldEditor />
                 </Form.Item>
@@ -142,6 +154,21 @@ export default class extends React.Component {
                     <FieldBoolean/>
                 </Form.Item>
             </FormModal>
+
+            <Modal
+                open={!!previewArticle}
+                title={previewArticle?.title}
+                width={800}
+                footer={null}
+                onCancel={() => this.setState({previewArticle: null})}
+            >
+                {previewArticle?.mainImage && (
+                    <div style={{marginBottom: 16}}>
+                        <img src={UrlUtils.contextPath('/file/' + previewArticle.mainImage)} style={{maxWidth: '100%'}} alt='主图'/>
+                    </div>
+                )}
+                <div dangerouslySetInnerHTML={{__html: previewArticle?.content || ''}}/>
+            </Modal>
         </Page>
     }
 }

package/src/pages/system/dict/index.jsx

@@ -1,10 +1,9 @@
 import {DeleteOutlined, EditOutlined, PlusOutlined} from '@ant-design/icons';
-import {Button, Card, Descriptions, Empty, Form, Input, InputNumber, Popconfirm, Splitter, Tree, Tag, TreeSelect, Typography} from 'antd';
+import {AutoComplete, Button, Card, Descriptions, Empty, Form, Input, InputNumber, Popconfirm, Splitter, Tree, Tag, TreeSelect, Typography} from 'antd';
 import React from 'react';
 import {
     PermActions,
     FieldBoolean,
-    FieldDictSelect,
     FormModal,
     HttpUtils,
     Page,
@@ -12,6 +11,18 @@ import {
     ViewSwitch,
 } from "../../../framework";
 
+const COLOR_OPTIONS = [
+    {value: 'SUCCESS', label: '成功'},
+    {value: 'PROCESSING', label: '处理中'},
+    {value: 'ERROR', label: '错误'},
+    {value: 'WARNING', label: '警告'},
+    {value: 'DEFAULT', label: '默认'},
+    {value: 'RED', label: '红色'},
+    {value: 'BLUE', label: '蓝色'},
+    {value: 'GREEN', label: '绿色'},
+    {value: 'GRAY', label: '灰色'},
+]
+
 export default class extends React.Component {
 
     state = {
@@ -134,16 +145,13 @@ export default class extends React.Component {
         {
             title: '操作', dataIndex: 'option',
             render: (_, record) => {
-                return (
-                    <PermActions>
-                        <Button size='small' perm='sys-dict:update'
-                                onClick={() => this.handleItemEdit(record)}>编辑</Button>
-                        <Popconfirm perm='sys-dict:delete' title='是否确定删除字典项'
-                                    onConfirm={() => this.handleItemDelete(record)}>
-                            <Button size='small'>删除</Button>
-                        </Popconfirm>
-                    </PermActions>
-                );
+                return <PermActions
+                    more
+                    actions={[
+                        {label: '编辑', perm: 'sys-dict:update', onClick: () => this.handleItemEdit(record)},
+                        {label: '删除', perm: 'sys-dict:delete', confirm: '是否确定删除字典项', onClick: () => this.handleItemDelete(record)},
+                    ]}
+                />;
             },
         },
     ]
@@ -249,7 +257,15 @@ export default class extends React.Component {
                     <Input/>
                 </Form.Item>
                 <Form.Item label='颜色' name='color'>
-                    <FieldDictSelect typeCode='statusColor'/>
+                    <AutoComplete
+                        allowClear
+                        maxLength={20}
+                        options={COLOR_OPTIONS}
+                        filterOption={(input, option) =>
+                            (option.value + option.label).toLowerCase().includes(input.toLowerCase())
+                        }
+                        placeholder='如 SUCCESS、#ff0000'
+                    />
                 </Form.Item>
                 <Form.Item label='序号' name='seq'>
                     <InputNumber/>

package/src/pages/system/file/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import {Button, Form, Input, Modal, Popconfirm} from 'antd'
+import {Button, Form, Input, Modal} from 'antd'
 import {CloudUploadOutlined} from "@ant-design/icons";
 
-import {PermActions, FieldDateRange, FieldDictSelect, FieldUploadFile, HttpUtils, Page, ProTable, UrlUtils} from "../../../framework";
+import {PermActions, DictUtils, FieldDateRange, FieldDictSelect, FieldUploadFile, HttpUtils, Page, ProTable, UrlUtils} from "../../../framework";
 
 export default class extends React.Component {
 
@@ -15,7 +15,7 @@ export default class extends React.Component {
     formRef = React.createRef()
 
     handleDelete = row => {
-        HttpUtils.post('admin/sysFile/delete', row).then(rs => {
+        HttpUtils.post('admin/sysFile/delete', {value: row.objectName}).then(rs => {
             this.tableRef.current.reload()
         })
     }
@@ -27,6 +27,14 @@ export default class extends React.Component {
             dataIndex: 'originName',
             width: 200,
         },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            width: 120,
+            render(status) {
+                return DictUtils.dictTag('fileStatus', status) || (status || '-')
+            },
+        },
         {
             title: '存储名称',
             dataIndex: 'objectName',
@@ -57,33 +65,21 @@ export default class extends React.Component {
         },
         {
             title: '预览',
-            dataIndex: 'id',
-            render(id, record) {
-                const nodes = [<a href={UrlUtils.contextPath('/admin/sysFile/preview/' + record.id)} target='_blank'>预览</a>]
-
-
-                if (record.imageUrls?.length > 0) {
-                    for (let item of record.imageUrls) {
-                        const url = item.url;
-                        const label = item.label;
-                        nodes.push(<a href={(url)} target='_blank' style={{marginLeft: 8}}>{label}</a>)
-                    }
-                }
-
-                return nodes;
-
+            dataIndex: 'objectName',
+            render(objectName) {
+                return <a href={UrlUtils.contextPath('/file/' + objectName)} target='_blank'>预览</a>
             }
         },
         {
             title: '操作',
             dataIndex: 'option',
             render: (_, record) => (
-                <PermActions>
-                    <Popconfirm perm='sys-file:delete' title='是否确定删除文件信息'
-                                onConfirm={() => this.handleDelete(record)}>
-                        <a>删除</a>
-                    </Popconfirm>
-                </PermActions>
+                <PermActions
+                    more
+                    actions={[
+                        {label: '删除', perm: 'sys-file:delete', confirm: '是否确定删除文件信息', onClick: () => this.handleDelete(record)},
+                    ]}
+                />
             ),
         },
     ]
@@ -110,6 +106,9 @@ export default class extends React.Component {
                         <Form.Item label='对象名称' name='objectName'>
                             <Input/>
                         </Form.Item>
+                        <Form.Item label='状态' name='status'>
+                            <FieldDictSelect typeCode='fileStatus'/>
+                        </Form.Item>
                         <Form.Item label='类型' name='type'>
                             <FieldDictSelect typeCode='materialType'/>
                         </Form.Item>

package/src/pages/system/job/index.jsx

@@ -8,9 +8,7 @@ import {
     Input,
     message,
     Modal,
-    Popconfirm,
     Select,
-    Space,
     Switch,
     Tag
 } from 'antd'
@@ -153,16 +151,15 @@ export default class extends React.Component {
             fixed: 'right',
             render: (_, record) => {
 
-                return (
-                    <Space>
-                        <Button size='small' onClick={() => this.showExecuteRecord(record)}>执行记录</Button>
-                        <Button size='small' perm='job:trigger' onClick={() => this.handleTriggerJob(record)}>执行一次</Button>
-                        <Button size='small' perm='job:update' onClick={() => this.handleEdit(record)}> 编辑 </Button>
-                        <Popconfirm perm='job:delete' title='是否确定删除?' onConfirm={() => this.handleDelete(record)}>
-                            <Button size='small'>删除</Button>
-                        </Popconfirm>
-                    </Space>
-                );
+                return <PermActions
+                    more
+                    actions={[
+                        {label: '执行记录', onClick: () => this.showExecuteRecord(record)},
+                        {label: '执行一次', perm: 'job:trigger', onClick: () => this.handleTriggerJob(record)},
+                        {label: '编辑', perm: 'job:update', onClick: () => this.handleEdit(record)},
+                        {label: '删除', perm: 'job:delete', confirm: '是否确定删除?', onClick: () => this.handleDelete(record)},
+                    ]}
+                />;
             },
         },
 
@@ -294,7 +291,7 @@ export default class extends React.Component {
                         title: '操作',
                         dataIndex: 'option',
                         render: (_, record) => {
-                            const url = UrlUtils.contextPath('/admin/sys/log/' + record.id);
+                            const url = UrlUtils.contextPath('/admin/sys/log/job/' + record.id);
                             return <a href={url} target='_blank'>日志</a>;
                         },
                     }

package/src/pages/system/role/index.jsx

@@ -1,5 +1,5 @@
 import {PlusOutlined} from '@ant-design/icons'
-import {Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Transfer, Tree} from 'antd'
+import {Button, Form, Input, InputNumber, Modal, Select, Transfer, Tree} from 'antd'
 import React from 'react'
 import {FieldBoolean, FormModal, HttpUtils, Page, PageUtils, PermActions, ProTable, ViewText} from "../../../framework";
 
@@ -112,22 +112,15 @@ export default class extends React.Component {
             dataIndex: 'option',
             render: (_, record) => {
 
-                return (
-                    <PermActions>
-                        <Button size='small' perm='sys-role:grant-permission'
-                                onClick={() => this.handleEditUser(record)}>用户设置</Button>
-
-                        <Button size='small' perm='sys-role:grant-permission'
-                                onClick={() => PageUtils.open('/system/role/rolePerm?id=' + record.id, '角色权限设置')}>权限设置</Button>
-
-                        <Button size='small' perm='sys-role:update'
-                                onClick={() => this.handleEdit(record)}>编辑</Button>
-                        <Popconfirm perm='sys-role:delete' title='是否确定删除系统角色'
-                                    onConfirm={() => this.handleDelete(record)}>
-                            <Button size='small'>删除</Button>
-                        </Popconfirm>
-                    </PermActions>
-                );
+                return <PermActions
+                    more
+                    actions={[
+                        {label: '用户设置', perm: 'sys-role:grant-permission', onClick: () => this.handleEditUser(record)},
+                        {label: '权限设置', perm: 'sys-role:grant-permission', onClick: () => PageUtils.open('/system/role/rolePerm?id=' + record.id, '角色权限设置')},
+                        {label: '编辑', perm: 'sys-role:update', onClick: () => this.handleEdit(record)},
+                        {label: '删除', perm: 'sys-role:delete', confirm: '是否确定删除系统角色', onClick: () => this.handleDelete(record)},
+                    ]}
+                />;
             },
         },
     ]

package/src/pages/system/user/index.jsx

@@ -1,5 +1,5 @@
 import {PlusOutlined} from '@ant-design/icons';
-import {Button, Card, Form, Input, Modal, Popconfirm, Select, Splitter, message} from 'antd';
+import {Button, Card, Form, Input, Modal, Select, Splitter, message} from 'antd';
 import React from 'react';
 import {
     PermActions,
@@ -123,19 +123,15 @@ export default class extends React.Component {
             dataIndex: 'option',
             fixed: 'right',
             render: (_, record) => {
-                return <PermActions>
-                    <Button size='small' perm='sys-user:update' onClick={() => this.handleEdit(record)}> 编辑 </Button>
-
-                    <Button size='small' perm='sys-user:grant-permission'
-                            onClick={() => this.permRef.current.show(record)}> 授权 </Button>
-
-                    <Button size='small' perm='sys-user:reset-password' onClick={() => this.resetPwd(record)}>重置密码</Button>
-
-                    <Popconfirm perm='sys-user:delete' title={'是否确定删除用户'}
-                                onConfirm={() => this.handleDelete(record)}>
-                        <Button size='small'>删除</Button>
-                    </Popconfirm>
-                </PermActions>;
+                return <PermActions
+                    more
+                    actions={[
+                        {label: '编辑', perm: 'sys-user:update', onClick: () => this.handleEdit(record)},
+                        {label: '授权', perm: 'sys-user:grant-permission', onClick: () => this.permRef.current.show(record)},
+                        {label: '重置密码', perm: 'sys-user:reset-password', onClick: () => this.resetPwd(record)},
+                        {label: '删除', perm: 'sys-user:delete', confirm: '是否确定删除用户', onClick: () => this.handleDelete(record)},
+                    ]}
+                />;
             },
         },
     ];
@@ -160,7 +156,7 @@ export default class extends React.Component {
 
         return <Page title="用户管理" description="管理系统用户">
             <Splitter>
-                <Splitter.Panel defaultSize={350} style={{paddingRight: 8}}>
+                <Splitter.Panel defaultSize={240} style={{paddingRight: 8}}>
                     <Card size='small'>
                         <OrgTree onChange={this.onSelectOrg}/>
                     </Card>

package/src/pages/userCenter/index.jsx

@@ -0,0 +1,99 @@
+import React from "react";
+import {Button, Card, Descriptions, Form, Input, Modal} from "antd";
+import PermView from "./permView";
+import {HttpUtils, history, Page} from "../../framework";
+
+export default class extends React.Component {
+
+    formRef = React.createRef();
+
+    state = {
+        info: {},
+        changePwdOpen: false,
+        changePwdSuccess: false,
+    }
+
+    componentDidMount() {
+        HttpUtils.get('admin/userCenter/info').then(rs => {
+            this.setState({info: rs})
+        })
+    }
+
+    onPwdFinish = (values) => {
+        HttpUtils.post('admin/userCenter/update-pwd', values).then(() => {
+            this.setState({changePwdOpen: false, changePwdSuccess: true});
+        })
+    }
+
+    pwdValidator = (rule, value) => {
+        return new Promise((resolve, reject) => {
+            HttpUtils.get("admin/sysUser/pwd-strength", {password: value}, {showError: false}).then(response => {
+                const rs = response.data
+                if (!rs.success) {
+                    reject(rs.message)
+                }
+                resolve()
+            })
+        })
+    }
+
+    render() {
+        const {info, changePwdOpen, changePwdSuccess} = this.state;
+        return <Page backgroundGray>
+
+            <Card title="个人信息"
+                  style={{marginBottom: 16}}
+                  extra={<Button onClick={() => this.setState({changePwdOpen: true})}>修改密码</Button>}>
+                <Descriptions column={2} size="middle">
+                    <Descriptions.Item label="用户名称">{info.name}</Descriptions.Item>
+                    <Descriptions.Item label="账号">{info.account}</Descriptions.Item>
+                    <Descriptions.Item label="手机号码">{info.phone}</Descriptions.Item>
+                    <Descriptions.Item label="用户邮箱">{info.email}</Descriptions.Item>
+                    <Descriptions.Item label="所属单位">{info.unit}</Descriptions.Item>
+                    <Descriptions.Item label="所属机构">{info.org}</Descriptions.Item>
+                    <Descriptions.Item label="所属角色">{(info.roles || []).join('、') || '-'}</Descriptions.Item>
+                    <Descriptions.Item label="创建日期">{info.createTime}</Descriptions.Item>
+                </Descriptions>
+            </Card>
+
+            <Card title="我的权限">
+                <PermView/>
+            </Card>
+
+            <Modal open={changePwdOpen} title="修改密码" okText="确定" cancelText="取消"
+                   onCancel={() => this.setState({changePwdOpen: false})}
+                   onOk={() => this.formRef?.submit()}>
+                <Form ref={this.formRef} onFinish={this.onPwdFinish} style={{maxWidth: 400}}>
+                    <Form.Item name='oldPassword'
+                               label='原密码'
+                               rules={[{required: true, message: '请输入原密码'}]}
+                    >
+                        <Input.Password></Input.Password>
+                    </Form.Item>
+                    <Form.Item name='newPassword'
+                               label='新密码'
+                               extra={'请输入字母、数字、特殊字符'}
+                               rules={[
+                                   {required: true, message: '请输入新密码'},
+                                   {
+                                       validator: this.pwdValidator
+                                   }
+                               ]}
+                    >
+                        <Input.Password></Input.Password>
+                    </Form.Item>
+                </Form>
+            </Modal>
+
+            <Modal open={changePwdSuccess} title="提示" okText="确定"
+                   onCancel={() => this.setState({changePwdSuccess: false})}
+                   onOk={() => {
+                       this.setState({changePwdSuccess: false});
+                       history.push('/public/login');
+                   }}>
+                修改密码成功
+            </Modal>
+
+        </Page>
+    }
+}

package/src/pages/userCenter/permView.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+import {Empty, Table, Tag} from "antd";
+import {HttpUtils, Gap} from "../../framework";
+
+export default class PermView extends React.Component {
+
+    state = {
+        data: null,
+    }
+
+    componentDidMount() {
+        HttpUtils.get('admin/userCenter/perms').then(rs => {
+            this.setState({data: rs})
+        })
+    }
+
+    render() {
+        const {data} = this.state;
+        if (!data) {
+            return <Empty description='加载中...'/>;
+        }
+
+        const orgColumns = [
+            {
+                title: '机构名称', dataIndex: 'title', key: 'title',
+            },
+            {
+                title: '状态', dataIndex: 'status', key: 'status', width: 140,
+                render: (status) => {
+                    if (status === 'mine') {
+                        return <Tag color='blue'>我的机构</Tag>;
+                    }
+                    if (status === 'owned') {
+                        return <Tag color='green'>已授权</Tag>;
+                    }
+                    return '-';
+                }
+            },
+        ];
+
+        const menuColumns = [
+            {
+                title: '菜单名称', dataIndex: 'title', key: 'title',
+            },
+            {
+                title: '权限名称', dataIndex: 'perms', key: 'perms',
+                render: (perms) => (perms || []).join('、') || '-',
+            },
+            {
+                title: '状态', dataIndex: 'status', key: 'status', width: 140,
+                render: (status) => {
+                    if (status === 'all') {
+                        return <Tag color='green'>已授权</Tag>;
+                    }
+                    if (status === 'partial') {
+                        return <Tag color='orange'>部分授权</Tag>;
+                    }
+                    return '-';
+                }
+            },
+        ];
+
+        return <div>
+            <div style={{marginBottom: 16}}>
+                <span>数据权限：
+                    <Tag color='processing'>{data.dataPermLabel || '-'}</Tag>
+                </span>
+            </div>
+            {data.orgRows && data.orgRows.length
+                ? <Table size='small' rowKey='key' columns={orgColumns} dataSource={data.orgRows}
+                         pagination={false} expandable={{defaultExpandAllRows: true}}/>
+                : <Empty description='暂无机构数据'/>}
+            <Gap/>
+            {data.menuRows && data.menuRows.length
+                ? <Table size='small' rowKey='key' columns={menuColumns} dataSource={data.menuRows}
+                         pagination={false} expandable={{defaultExpandAllRows: true}}/>
+                : <Empty description='暂无权限数据'/>}
+        </div>;
+    }
+}

package/src/pages/account/changePassword.jsx

@@ -1,65 +0,0 @@
-import React from "react";
-import {Button, Form, Input, Modal} from "antd";
-import {HttpUtils, history} from "../../framework";
-
-export default class extends React.Component {
-
-    state = {
-        successModalOpen: false,
-    };
-
-    onFinish = (values) => {
-        HttpUtils.post('admin/userCenter/update-pwd', values).then(() => {
-            this.setState({successModalOpen: true});
-        })
-    }
-
-    validator = (rule, value) => {
-        return new Promise((resolve, reject) => {
-            HttpUtils.get("admin/sysUser/pwd-strength", {password: value}, {showError: false}).then(response => {
-                const rs = response.data
-                if (!rs.success) {
-                    reject(rs.message)
-                }
-                resolve()
-            })
-        })
-
-    }
-
-    render() {
-        return <div>
-            <Modal open={this.state.successModalOpen} title="提示" okText="确定"
-                   onCancel={() => this.setState({successModalOpen: false})}
-                   onOk={() => {
-                       this.setState({successModalOpen: false});
-                       history.push('/public/login');
-                   }}>
-                修改密码成功
-            </Modal>
-
-            <Form onFinish={this.onFinish} style={{maxWidth: 400}}>
-
-                <Form.Item name='newPassword'
-                           label='新密码'
-                           extra={'请输入字母、数字、特殊字符'}
-                           rules={[
-                               {required: true},
-                               {
-                                   validator: this.validator
-                               }
-                           ]}
-                >
-                    <Input.Password></Input.Password>
-                </Form.Item>
-
-                <Form.Item wrapperCol={{offset: 5}} style={{marginTop: 40}}>
-                    <Button type="primary" htmlType="submit">
-                        确定
-                    </Button>
-                </Form.Item>
-            </Form>
-
-        </div>
-    }
-}

package/src/pages/account/index.jsx

@@ -1,87 +0,0 @@
-import React from "react";
-import {Avatar, Card, Col, Row, Tabs} from "antd";
-import ChangePassword from "./changePassword";
-import {HttpUtils, Page} from "../../framework";
-
-export default class extends React.Component {
-
-    state = {
-        info: {}
-    }
-
-    componentDidMount() {
-        HttpUtils.get('admin/userCenter/info').then(rs => {
-            this.setState({info: rs})
-        })
-    }
-
-    render() {
-        const {info} = this.state;
-        return <Page backgroundGray title="个人中心" description="查看和编辑个人资料">
-
-            <Row gutter={[16, 16]}>
-                <Col md={6} sm={24}>
-                    <Card title='个人信息'>
-
-                        <div className='flex-center' style={{marginBottom: 32}}>
-                            <Avatar size={128} title='点击修改头像'/>
-                        </div>
-
-
-                        <table className='oa-table'>
-                            <tbody>
-                            <tr>
-                                <td>用户名称</td>
-                                <td align='right'>{info.name}</td>
-                            </tr>
-                            <tr>
-                                <td>账号</td>
-                                <td align='right'>{info.account}</td>
-                            </tr>
-                            <tr>
-                                <td>手机号码</td>
-                                <td>{info.phone}</td>
-                            </tr>
-                            <tr>
-                                <td>用户邮箱</td>
-                                <td>{info.email}</td>
-                            </tr>
-                            <tr>
-                                <td>所属部门</td>
-                                <td>{info.unit} {info.dept}</td>
-                            </tr>
-                            <tr>
-                                <td>所属角色</td>
-                                <td>{info.roles}</td>
-                            </tr>
-                            <tr>
-                                <td>创建日期</td>
-                                <td>{info.createTime}</td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </Card>
-                </Col>
-                <Col md={18} sm={24}>
-                    <Card title='个人设置'>
-                        <Tabs
-                            items={[
-                                {
-                                    label: '修改密码', key: 'pwd', children: <div>
-                                        <ChangePassword/>
-                                    </div>
-                                },
-
-                            ]}
-                            tabPlacement='left'
-                        >
-                        </Tabs>
-                    </Card>
-                </Col>
-            </Row>
-
-
-        </Page>
-
-    }
-}