@jiangood/open-admin 3.0.11 → 3.0.12

package/package.json

@@ -14,8 +14,9 @@
     "@ant-design/icons": "^6.0.0",
     "@tinymce/tinymce-react": "^6.0.0",
     "antd": "^6.0.0",
-    "antd-img-crop": "^4.23.0",
     "axios": "^1.13.2",
+    "compressorjs": "^1.2.1",
+    "cropperjs": "^1.6.2",
     "dayjs": "^1.11.13",
     "lodash": "^4.17.23",
     "qs": "^6.14.0",
@@ -48,5 +49,5 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   },
-  "version": "3.0.11"
+  "version": "3.0.12"
 }

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

@@ -281,8 +281,7 @@ export class DownloadModal extends React.Component<DownloadModalProps, ModalStat
         <div style={{padding: '20px 0'}}>
           {/* 文件名 */}
           <div style={{marginBottom: 16, fontSize: 15, fontWeight: 500, color: '#333'}}>
-            <DownloadOutlined style={{marginRight: 8}}/>
-            {fileName || '未知文件'}
+            文件名：{fileName || '未知文件'}
           </div>
 
           {/* 下载中 */}

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

@@ -1,6 +1,4 @@
 import React from "react";
-import ImgCrop from "antd-img-crop";
-import type {ImgCropProps} from "antd-img-crop";
 import {message, Modal, Upload} from "antd";
 import type {UploadChangeParam, UploadFile, UploadProps} from "antd";
 import { UploadOutlined } from "@ant-design/icons";
@@ -14,10 +12,6 @@ export type SysUploadFile = UploadFile & { objectName?: string };
 export interface FieldUploadFileProps extends FieldProps<string> {
     /** 最大上传数量，默认 1 */
     maxCount?: number;
-    /** 是否启用上传前裁切图片 */
-    cropImage?: boolean;
-    /** 裁切配置（antd-img-crop 的 cropperProps） */
-    cropperProps?: ImgCropProps['cropperProps'];
     /** 上传列表的内建样式，默认 picture-card */
     listType?: UploadProps['listType'];
     /** 接受的文件类型，如 image/* */
@@ -30,7 +24,6 @@ export interface FieldUploadFileProps extends FieldProps<string> {
 
 interface FieldUploadFileState {
     maxCount: number;
-    cropImage: boolean;
     fileList: SysUploadFile[];
     /** 逗号分隔的文件 objectName */
     value: string | null;
@@ -39,16 +32,13 @@ interface FieldUploadFileState {
 }
 
 /**
- * 上传图片前裁切， 单张图片
- *
- * 可参考 react-easy-crop
+ * 通用文件上传（不含图片压缩/裁切，图片上传请使用 FieldUploadImage）
  */
 export class FieldUploadFile extends React.Component<FieldUploadFileProps, FieldUploadFileState & { errorTitle?: string; errorContent?: string; previewObjectName?: string }> {
 
     state: FieldUploadFileState & { errorTitle?: string; errorContent?: string; previewObjectName?: string } = {
         // 传入的参数
         maxCount: 1,
-        cropImage: false,
         visibility: 'public',
 
         // 内部参数
@@ -65,7 +55,6 @@ export class FieldUploadFile extends React.Component<FieldUploadFileProps, Field
     componentDidUpdate(prevProps: FieldUploadFileProps) {
         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;
@@ -142,12 +131,6 @@ export class FieldUploadFile extends React.Component<FieldUploadFileProps, Field
     };
 
     render() {
-        if (this.state.cropImage) {
-            return <ImgCrop cropperProps={this.props.cropperProps} modalTitle={'裁剪图片'} fillColor={null}>
-                {this.getUpload()}
-            </ImgCrop>;
-        }
-
         return <>
             {this.getUpload()}
             <Modal open={!!this.state.errorTitle} title={this.state.errorTitle} okText="确定"

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

@@ -0,0 +1,334 @@
+import React, {useCallback, useEffect, useRef, useState} from "react";
+import {Alert, Button, Modal, Space, Upload, message} from "antd";
+import {DeleteOutlined, PlusOutlined, ScissorOutlined} from "@ant-design/icons";
+import Compressor from "compressorjs";
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+import {HttpUtils} from "../../utils";
+import {UrlUtils} from "../../utils";
+import type {FieldProps} from '../types';
+
+interface FieldUploadImageProps extends FieldProps<string> {
+    /** 最大上传数量，默认 1 */
+    maxCount?: number;
+    /** 压缩图目标宽度（强制目标比例），默认 800 */
+    targetWidth?: number;
+    /** 压缩图目标高度（强制目标比例），默认 600 */
+    targetHeight?: number;
+    /** 缩略图最长边，默认 300 */
+    thumbWidth?: number;
+    /** 压缩质量，默认 0.8 */
+    quality?: number;
+    /** 文件可见性，默认 public */
+    visibility?: 'public' | 'private';
+    /** 接受的文件类型 */
+    accept?: string;
+}
+
+interface Dims {
+    width: number;
+    height: number;
+}
+
+/** 弹窗内预览结果：压缩图 + 缩略图 */
+interface PreviewResult {
+    cUrl: string;
+    tUrl: string;
+    cFile: File;
+    tFile: File;
+    cSize: number;
+    tSize: number;
+    cdims: Dims;
+    tdims: Dims;
+}
+
+function formatSize(bytes: number): string {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1024 / 1024).toFixed(2) + ' MB';
+}
+
+function readDims(url: string): Promise<Dims> {
+    return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => resolve({width: img.naturalWidth, height: img.naturalHeight});
+        img.onerror = () => resolve({width: 0, height: 0});
+        img.src = url;
+    });
+}
+
+function compressToFile(source: Blob, maxWidth: number, maxHeight: number, quality: number): Promise<File> {
+    return new Promise((resolve, reject) => {
+        new Compressor(source, {
+            maxWidth,
+            maxHeight,
+            quality,
+            success(result) {
+                const file = result instanceof File ? result : new File([result], 'image.jpg', {type: result.type || 'image/jpeg'});
+                resolve(file);
+            },
+            error: reject,
+        });
+    });
+}
+
+export function FieldUploadImage(props: FieldUploadImageProps) {
+    const {
+        value, onChange, maxCount = 1, targetWidth = 800, targetHeight = 600,
+        thumbWidth = 300, quality = 0.8, visibility = 'public', accept = 'image/*',
+    } = props;
+
+    const [objectNames, setObjectNames] = useState<string[]>(() => (value ? value.split(',') : []));
+    const [modalOpen, setModalOpen] = useState(false);
+    const [originalUrl, setOriginalUrl] = useState<string>();
+    const [originalDims, setOriginalDims] = useState<Dims>();
+    const [originalSize, setOriginalSize] = useState(0);
+    const [preview, setPreview] = useState<PreviewResult>();
+    const [needsCrop, setNeedsCrop] = useState(false);
+    const [cropperActive, setCropperActive] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const [fullPreviewUrl, setFullPreviewUrl] = useState<string>();
+
+    const imgRef = useRef<HTMLImageElement>(null);
+    const cropperRef = useRef<Cropper>();
+    const selectedFileRef = useRef<File>();
+    const previewUrlsRef = useRef<string[]>([]);
+
+    const targetRatio = targetWidth / targetHeight;
+
+    // 父组件 value 变化时同步
+    useEffect(() => {
+        const parsed = value ? value.split(',') : [];
+        setObjectNames(parsed);
+    }, [value]);
+
+    const revokePreviewUrls = useCallback(() => {
+        previewUrlsRef.current.forEach((u) => URL.revokeObjectURL(u));
+        previewUrlsRef.current = [];
+    }, []);
+
+    const closeModal = useCallback(() => {
+        if (cropperRef.current) {
+            cropperRef.current.destroy();
+            cropperRef.current = undefined;
+        }
+        setModalOpen(false);
+        setCropperActive(false);
+        setNeedsCrop(false);
+        setUploading(false);
+        setOriginalUrl(undefined);
+        setOriginalDims(undefined);
+        setOriginalSize(0);
+        setPreview(undefined);
+        if (originalUrl) URL.revokeObjectURL(originalUrl);
+        revokePreviewUrls();
+    }, [originalUrl, revokePreviewUrls]);
+
+    /**
+     * 基于源文件生成压缩图 + 缩略图（含各自尺寸/大小），用于弹窗展示
+     */
+    const regenerate = useCallback(async (source: Blob) => {
+        const cFile = await compressToFile(source, targetWidth, targetHeight, quality);
+        const tFile = await compressToFile(cFile, thumbWidth, thumbWidth, quality);
+        const cUrl = URL.createObjectURL(cFile);
+        const tUrl = URL.createObjectURL(tFile);
+        const cdims = await readDims(cUrl);
+        const tdims = await readDims(tUrl);
+        revokePreviewUrls();
+        previewUrlsRef.current = [cUrl, tUrl];
+        setPreview({cUrl, tUrl, cFile, tFile, cSize: cFile.size, tSize: tFile.size, cdims, tdims});
+    }, [quality, revokePreviewUrls, targetHeight, targetWidth, thumbWidth]);
+
+    const handleBeforeUpload = useCallback(async (file: File) => {
+        if (objectNames.length >= maxCount) {
+            message.warning('已达到最大上传数量');
+            return Upload.LIST_IGNORE;
+        }
+        if (!file.type.startsWith('image/')) {
+            message.error('请选择图片文件');
+            return Upload.LIST_IGNORE;
+        }
+
+        selectedFileRef.current = file;
+        const url = URL.createObjectURL(file);
+        setOriginalUrl(url);
+        setOriginalSize(file.size);
+        setModalOpen(true);
+        setCropperActive(false);
+
+        try {
+            // EXIF 方向感知地读取原始尺寸
+            const bitmap = await createImageBitmap(file, {imageOrientation: 'from-image'});
+            const dims = {width: bitmap.width, height: bitmap.height};
+            bitmap.close();
+            setOriginalDims(dims);
+            const ratioDiff = Math.abs(dims.width / dims.height - targetRatio);
+            setNeedsCrop(ratioDiff / targetRatio > 0.02);
+        } catch (e) {
+            message.error('读取图片失败');
+            closeModal();
+            return;
+        }
+
+        await regenerate(file);
+        return Upload.LIST_IGNORE;
+    }, [closeModal, maxCount, objectNames.length, regenerate, targetRatio]);
+
+    const startCrop = useCallback(() => {
+        setCropperActive(true);
+        setTimeout(() => {
+            const el = imgRef.current;
+            if (!el) return;
+            if (cropperRef.current) cropperRef.current.destroy();
+            cropperRef.current = new Cropper(el, {
+                aspectRatio: targetRatio,
+                viewMode: 1,
+                autoCropArea: 1,
+                dragMode: 'move',
+            });
+        }, 0);
+    }, [targetRatio]);
+
+    const confirmCrop = useCallback(() => {
+        const cropper = cropperRef.current;
+        const file = selectedFileRef.current;
+        if (!cropper || !file) return;
+        const canvas = cropper.getCroppedCanvas();
+        const mime = file.type || 'image/jpeg';
+        canvas.toBlob(async (blob) => {
+            if (cropperRef.current) {
+                cropperRef.current.destroy();
+                cropperRef.current = undefined;
+            }
+            setCropperActive(false);
+            setNeedsCrop(false);
+            if (blob) {
+                const croppedFile = new File([blob], 'cropped.jpg', {type: mime});
+                await regenerate(croppedFile);
+            }
+        }, mime, quality);
+    }, [quality, regenerate]);
+
+    const cancelCrop = useCallback(() => {
+        if (cropperRef.current) {
+            cropperRef.current.destroy();
+            cropperRef.current = undefined;
+        }
+        setCropperActive(false);
+    }, []);
+
+    const handleConfirm = useCallback(async () => {
+        if (needsCrop || !preview) return;
+        setUploading(true);
+        try {
+            const fd = new FormData();
+            fd.append('file', preview.cFile);
+            fd.append('thumb', preview.tFile);
+            fd.append('visibility', visibility);
+            const rs = await HttpUtils.post('admin/sysFile/uploadImage', fd, null, {headers: {'Content-Type': 'multipart/form-data'}});
+            const newNames = [...objectNames, rs.objectName];
+            setObjectNames(newNames);
+            onChange?.(newNames.join(','));
+            closeModal();
+        } catch (e) {
+            message.error(HttpUtils.extractErrorMessage(e));
+        } finally {
+            setUploading(false);
+        }
+    }, [closeModal, needsCrop, objectNames, onChange, preview, visibility]);
+
+    const removeImage = useCallback((name: string) => {
+        const newNames = objectNames.filter((n) => n !== name);
+        setObjectNames(newNames);
+        onChange?.(newNames.join(','));
+    }, [objectNames, onChange]);
+
+    const renderPanel = (title: string, url: string | undefined, dims: Dims | undefined, size: number | undefined) => (
+        <div style={{flex: 1, textAlign: 'center'}}>
+            <div style={{fontWeight: 600, marginBottom: 8}}>{title}</div>
+            {url ? (
+                <img src={url} style={{maxWidth: '100%', maxHeight: 160, display: 'block', margin: '0 auto'}}/>
+            ) : (
+                <div style={{height: 120, lineHeight: '120px', color: '#999'}}>生成中...</div>
+            )}
+            <div style={{color: '#666', marginTop: 8}}>
+                {dims ? `${dims.width} x ${dims.height}` : '--'}
+                {size != null && size > 0 && <span> · {formatSize(size)}</span>}
+            </div>
+        </div>
+    );
+
+    return (
+        <>
+            <div>
+                {objectNames.map((name) => (
+                    <div key={name} style={{position: 'relative', display: 'inline-block', marginRight: 8, verticalAlign: 'top'}}>
+                        <img
+                            src={UrlUtils.contextPath(`/file/${name}?thumb=1`)}
+                            width={80}
+                            height={80}
+                            style={{objectFit: 'cover', borderRadius: 4, cursor: 'pointer'}}
+                            onClick={() => setFullPreviewUrl(UrlUtils.contextPath(`/file/${name}`))}
+                            alt={name}
+                        />
+                        <Button
+                            size="small"
+                            danger
+                            icon={<DeleteOutlined/>}
+                            style={{position: 'absolute', top: -8, right: -8}}
+                            onClick={() => removeImage(name)}
+                        />
+                    </div>
+                ))}
+                {objectNames.length < maxCount && (
+                    <Upload accept={accept} showUploadList={false} beforeUpload={handleBeforeUpload} multiple={false}>
+                        <Button icon={<PlusOutlined/>}>选择图片</Button>
+                    </Upload>
+                )}
+            </div>
+
+            <Modal
+                open={modalOpen}
+                title="图片预览"
+                width={900}
+                okText="确定"
+                cancelText="取消"
+                onOk={handleConfirm}
+                onCancel={closeModal}
+                confirmLoading={uploading}
+                okButtonProps={{disabled: needsCrop}}
+            >
+                {cropperActive ? (
+                    <div>
+                        {originalUrl && <img ref={imgRef} src={originalUrl} style={{maxWidth: '100%'}} alt="待裁切"/>}
+                        <Space style={{marginTop: 12}}>
+                            <Button type="primary" onClick={confirmCrop}>确认裁切</Button>
+                            <Button onClick={cancelCrop}>取消裁切</Button>
+                        </Space>
+                    </div>
+                ) : (
+                    <>
+                        {needsCrop && (
+                            <Alert type="warning" showIcon
+                                   message="图片比例与目标尺寸不符，请点击下方「裁切」按钮按比例处理后再确定"
+                                   style={{marginBottom: 12}}/>
+                        )}
+                        <div style={{display: 'flex', gap: 16}}>
+                            {renderPanel('原图', originalUrl, originalDims, originalSize)}
+                            {renderPanel('压缩图', preview?.cUrl, preview?.cdims, preview?.cSize)}
+                            {renderPanel('缩略图', preview?.tUrl, preview?.tdims, preview?.tSize)}
+                        </div>
+                        <Button icon={<ScissorOutlined/>} onClick={startCrop} style={{marginTop: 12}}>裁切</Button>
+                    </>
+                )}
+            </Modal>
+
+            <Modal open={!!fullPreviewUrl} title="图片预览" width="70vw" footer={null}
+                   onCancel={() => setFullPreviewUrl(undefined)}>
+                {fullPreviewUrl && <img src={fullPreviewUrl} style={{maxWidth: '100%'}} alt="预览"/>}
+            </Modal>
+        </>
+    );
+}
+
+export default FieldUploadImage;

package/src/framework/fields/index.ts

@@ -16,4 +16,5 @@ export * from './FieldSysOrgTreeSelect'
 export * from './FieldSysOrgTree'
 export * from './FieldPercent'
 export * from './FieldUploadFile';
+export * from './FieldUploadImage';
 export * from '../biz/OrgTree';

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

@@ -22,31 +22,35 @@ export class ViewImage extends React.Component {
     }
 
     const urlList = [];
+    const thumbList = [];
     for (let v of vs) {
       const isAbsUrl = v.startsWith('http');
       const isDataUrl = v.startsWith('data:');
       const isObjectName = v.startsWith('public/') || v.startsWith('private/');
       if (isAbsUrl || isDataUrl) {
         urlList.push(v);
+        thumbList.push(v);
         continue;
       }
 
       if (isObjectName) {
         urlList.push(UrlUtils.contextPath('/file/' + v));
+        thumbList.push(UrlUtils.contextPath('/file/' + v + '?thumb=1'));
         continue;
       }
 
       urlList.push(UrlUtils.contextPath(v));
+      thumbList.push(UrlUtils.contextPath(v));
     }
 
     const closeModal = () => this.setState({modalOpen: false});
 
-    const imgs = urlList.map((url) => (
+    const imgs = thumbList.map((thumb, i) => (
       <img
         style={{ display: 'inline-block' }}
-        key={url}
-        src={url}
-        onClick={() => this.setState({modalOpen: true, previewUrl: url})}
+        key={urlList[i]}
+        src={thumb}
+        onClick={() => this.setState({modalOpen: true, previewUrl: urlList[i]})}
         width={60}
         height={60}
       />

package/src/layouts/index.tsx

@@ -91,6 +91,7 @@ export class Layouts extends React.Component<LayoutsProps> {
             GlobalData.setSiteArticles(data.siteArticles);
 
             if (data.needUpdatePwd) {
+                this.setState({loginChecked: true});
                 history.push('/standalone/forceUpdatePwd');
                 return;
             }

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

@@ -6,7 +6,7 @@ import {
     FieldBoolean,
     FieldDictSelect,
     FieldEditor,
-    FieldUploadFile,
+    FieldUploadImage,
     FormModal,
     HttpUtils,
     Page,
@@ -136,7 +136,7 @@ export default class extends React.Component {
                 </Form.Item>
 
                 <Form.Item label='主图' name='mainImage'>
-                    <FieldUploadFile maxCount={1} cropImage accept='image/*'/>
+                    <FieldUploadImage maxCount={1}/>
                 </Form.Item>
 
                 <Form.Item label='内容' name='content'>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Button, Form, Input, Modal} from 'antd'
+import {Button, Empty, Form, Input, Modal, Pagination, Tabs} from 'antd'
 import {CloudUploadOutlined} from "@ant-design/icons";
 
 import {PermActions, DictUtils, FieldDateRange, FieldDictSelect, FieldUploadFile, HttpUtils, Page, ProTable, UrlUtils} from "../../../framework";
@@ -8,7 +8,12 @@ export default class extends React.Component {
 
     state = {
         formOpen: false,
-        formValues: {}
+        formValues: {},
+        gridPage: 1,
+        gridList: [],
+        gridTotal: 0,
+        gridLoading: false,
+        previewUrl: undefined,
     }
 
     tableRef = React.createRef()
@@ -20,6 +25,16 @@ export default class extends React.Component {
         })
     }
 
+    loadGrid = page => {
+        const p = page || this.state.gridPage
+        this.setState({gridLoading: true})
+        HttpUtils.get('admin/sysFile/page', {page: p, size: 50, type: 'image'}).then(rs => {
+            this.setState({gridList: rs.content || [], gridTotal: Number(rs.totalElements || 0), gridPage: p})
+        }).finally(() => {
+            this.setState({gridLoading: false})
+        })
+    }
+
     columns = [
         {
             title: '原始名称',
@@ -85,14 +100,32 @@ export default class extends React.Component {
         },
     ]
 
-    render() {
-        return <Page title="文件管理" description="管理系统上传文件">
+    renderUploadModal = () => (
+        <Modal open={this.state.formOpen} title='上传文件'
+               width={800}
+               onCancel={() => {
+                   this.setState({formOpen: false})
+                   this.tableRef.current.reload()
+               }}
+               footer={null}
+               destroyOnHidden
+        >
+            <Form ref={this.formRef}
+                  initialValues={this.state.formValues}
+            >
+                <Form.Item name='文件'>
+                    <FieldUploadFile accept="*/*"/>
+                </Form.Item>
+            </Form>
+        </Modal>
+    )
+
+    renderTable = () => (
+        <>
             <ProTable
                 actionRef={this.tableRef}
                 toolBarRender={() => (
-                    <PermActions>
-                        <Button type='primary' perm='sys-file:upload' icon={<CloudUploadOutlined/>} onClick={() => this.setState({formOpen: true})}>上传文件</Button>
-                    </PermActions>
+                    <Button type='primary' icon={<CloudUploadOutlined/>} onClick={() => this.setState({formOpen: true})}>上传文件</Button>
                 )}
                 request={(params) => {
                     return HttpUtils.get('admin/sysFile/page', params);
@@ -110,39 +143,68 @@ export default class extends React.Component {
                         <Form.Item label='状态' name='status'>
                             <FieldDictSelect typeCode='fileStatus'/>
                         </Form.Item>
-                        <Form.Item label='类型' name='type'>
-                            <FieldDictSelect typeCode='materialType'/>
-                        </Form.Item>
                         <Form.Item label='上传时间' name='dateRange'>
                             <FieldDateRange/>
                         </Form.Item>
                     </>
                 )}
             />
+            {this.renderUploadModal()}
+        </>
+    )
+
+    renderImageGrid = () => {
+        const {gridList, gridTotal, gridPage, gridLoading, previewUrl} = this.state
+        return (
+            <div style={{minHeight: 200, position: 'relative'}}>
+                {gridList.length === 0 && !gridLoading && <Empty style={{marginTop: 80}} description="暂无图片"/>}
+                <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: 8}}>
+                    {gridList.map(item => (
+                        <div key={item.objectName}
+                             style={{borderRadius: 4, overflow: 'hidden', cursor: 'pointer', border: '1px solid #eee'}}
+                             onClick={() => this.setState({previewUrl: UrlUtils.contextPath('/file/' + item.objectName)})}>
+                            <img
+                                src={UrlUtils.contextPath('/file/' + item.objectName + '?thumb=1')}
+                                style={{width: '100%', height: 120, objectFit: 'cover', display: 'block'}}
+                                alt={item.originName || item.objectName}
+                            />
+                        </div>
+                    ))}
+                </div>
+                {gridTotal > 0 && (
+                    <div style={{display: 'flex', justifyContent: 'flex-end', marginTop: 16}}>
+                        <Pagination
+                            current={gridPage}
+                            pageSize={50}
+                            total={gridTotal}
+                            showTotal={(total) => `共 ${total} 张`}
+                            onChange={(page) => this.loadGrid(page)}
+                        />
+                    </div>
+                )}
 
-            <Modal open={this.state.formOpen} title='上传文件'
-                   width={800}
-                   onCancel={() => {
-                       this.setState({formOpen: false})
-                       this.tableRef.current.reload()
-                   }}
-                   footer={null}
-                   destroyOnHidden
-            >
-                <Form ref={this.formRef}
-                      initialValues={this.state.formValues}
-                >
-                    <Form.Item name='文件'>
-                        <FieldUploadFile accept="*/*"/>
-                    </Form.Item>
-
-
-                </Form>
-            </Modal>
+                <Modal open={!!previewUrl} title="图片预览" width="70vw" footer={null}
+                       onCancel={() => this.setState({previewUrl: undefined})}>
+                    {previewUrl && <img src={previewUrl} style={{maxWidth: '100%'}} alt="预览"/>}
+                </Modal>
+            </div>
+        )
+    }
 
+    render() {
+        return <Page title="文件管理" description="管理系统上传文件">
+            <Tabs
+                defaultActiveKey="table"
+                onChange={(key) => {
+                    if (key === 'image' && this.state.gridList.length === 0) {
+                        this.loadGrid(1)
+                    }
+                }}
+                items={[
+                    {key: 'table', label: '全部', children: this.renderTable()},
+                    {key: 'image', label: '图片', children: this.renderImageGrid()},
+                ]}
+            />
         </Page>
     }
 }
-
-
-

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

@@ -13,7 +13,7 @@ import {
     Tag
 } from 'antd'
 import {PlusOutlined} from "@ant-design/icons";
-import {FormModal, HttpUtils, Page, PermActions, ProTable, StringUtils, UrlUtils, ValueType} from "../../../framework";
+import {FormModal, HttpUtils, Page, PermActions, ProTable, UrlUtils, ValueType} from "../../../framework";
 
 
 const cronOptions = [
@@ -61,7 +61,7 @@ export default class extends React.Component {
         HttpUtils.get('admin/job/job-class-options').then(rs => {
             this.setState({jobClassOptions: rs})
         }).catch(e => {
-            console.error('[Job] 加载作业类选项失败:', e);
+            console.error('[Job] 加载任务类选项失败:', e);
         })
     }
 
@@ -79,7 +79,7 @@ export default class extends React.Component {
         HttpUtils.post("admin/job/get-job-param-fields", jobData || {}, {className}).then(rs => {
             this.setState({paramList: rs})
         }).catch(e => {
-            console.error('[Job] 加载作业参数字段失败:', e);
+            console.error('[Job] 加载任务参数字段失败:', e);
         })
     }
 
@@ -91,12 +91,12 @@ export default class extends React.Component {
     }
 
     handleDelete = row => {
-        const hide = message.loading("删除作业中...")
+        const hide = message.loading("删除任务中...")
         HttpUtils.post('admin/job/delete', {id: row.id}).then(rs => {
             hide();
             this.tableRef.current.reload();
         }).catch(e => {
-            console.error('[Job] 删除作业失败:', e);
+            console.error('[Job] 删除任务失败:', e);
             hide();
         })
     }
@@ -105,7 +105,7 @@ export default class extends React.Component {
         HttpUtils.post('admin/job/trigger-job', {id: row.id}).then(rs => {
             this.tableRef.current.reload();
         }).catch(e => {
-            console.error('[Job] 触发作业失败:', e);
+            console.error('[Job] 触发任务失败:', e);
         })
     }
 
@@ -117,8 +117,7 @@ export default class extends React.Component {
         },
         {
             title: '执行类',
-            dataIndex: 'jobClass',
-
+            dataIndex: 'jobClassName',
         },
 
         {
@@ -181,7 +180,7 @@ export default class extends React.Component {
 
 
     render() {
-        return <Page title="作业调度" description="管理定时作业任务">
+        return <Page title="定时任务" description="管理定时任务">
             <ProTable
                 actionRef={this.tableRef}
                 toolBarRender={() => (
@@ -205,11 +204,11 @@ export default class extends React.Component {
             />
 
 
-            <FormModal ref={this.modalRef} title='作业调度' width={800}
+            <FormModal ref={this.modalRef} title='定时任务' width={800}
                        onFinish={this.onFinish}
                        onValuesChange={this.onValuesChange}>
                 <Form.Item label='执行类' name='jobClass' rules={[{required: true}]}
-                           tooltip='org.quartz.Job接口，参考io.tmgg.job.builtin.DemoJob'>
+                           tooltip='继承 BaseJob，参考 HelloWorldJob'>
                     <Select options={this.state.jobClassOptions}/>
                 </Form.Item>
                 <Form.Item label='名称' name='name' rules={[{required: true}]}>
@@ -227,7 +226,7 @@ export default class extends React.Component {
 
                 {this.state.paramList?.map(p => (
                     <div key={p.name}>
-                        <Divider>作业参数</Divider>
+                        <Divider>任务参数</Divider>
                         <Form.Item label={p.label}
                                    name={['jobData', p.name]}
                                    key={p.name}
@@ -242,7 +241,7 @@ export default class extends React.Component {
                 ))}
             </FormModal>
 
-            <Modal title='作业调度状态'
+            <Modal title='定时任务状态'
                    open={this.state.statusOpen}
                    onCancel={() => this.setState({statusOpen: false})}
                    footer={null}
@@ -252,7 +251,7 @@ export default class extends React.Component {
 
             </Modal>
 
-            <Modal title='作业调度记录'
+            <Modal title='定时任务记录'
                    open={this.state.executeRecordOpen}
                    onCancel={() => this.setState({executeRecordOpen: false})}
                    footer={null}
@@ -311,8 +310,9 @@ export default class extends React.Component {
             const option = this.state.jobClassOptions.find(o => o.value === changed.jobClass)
             if (option) {
                 const {label} = option;
-                if (StringUtils.contains(label, " ")) { // 取中文名部门设置为name
-                    this.modalRef.current.formInstance.setFieldValue("name", label.split(" ")[1])
+                const match = label.match(/[（(](.*?)[）)]/);
+                if (match) { // 取括号内中文描述设置为name
+                    this.modalRef.current.formInstance.setFieldValue("name", match[1])
                 }
             }
         }

package/src/pages/userCenter/index.jsx

@@ -26,15 +26,7 @@ export default class extends React.Component {
     }
 
     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()
-            })
-        })
+        return HttpUtils.get("admin/sysUser/pwd-strength", {password: value}, {showError: false})
     }
 
     render() {