@jiangood/open-admin 3.0.4 → 3.0.5

package/package.json

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

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/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, Popconfirm} 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';
@@ -80,6 +87,7 @@ export default class extends React.Component {
             render: (_, record) => {
                 return (
                     <PermActions>
+                        <Button size='small' onClick={() => this.handlePreview(record)}>预览</Button>
                         <Button size='small' perm='article:update' onClick={() => this.handleEdit(record)}>编辑</Button>
                         <Popconfirm perm='article:delete' title='确定删除?' onConfirm={() => this.handleDelete(record)}>
                             <Button size='small'>删除</Button>
@@ -91,6 +99,7 @@ export default class extends React.Component {
     ]
 
     render() {
+        const {previewArticle} = this.state
         return <Page
             title="文章管理"
             description="管理系统文章，如关于、帮助等页面"
@@ -126,6 +135,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 +155,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/file/index.jsx

@@ -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()
         })
     }
@@ -57,21 +57,9 @@ 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>
             }
         },
         {

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

@@ -294,7 +294,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>;
                         },
                     }