@jiangood/open-admin 3.0.12 → 3.0.14

package/src/framework/utils/system/HttpUtils.ts

@@ -21,6 +21,12 @@ export class HttpUtils {
         const url = config.url as string;
         config.url = url.startsWith('admin') ? '/' + url : url;
 
+        // FormData 请求交由浏览器自动生成带 boundary 的 multipart Content-Type，
+        // 否则手动指定 Content-Type 会缺失 boundary 导致后端解析失败
+        if (typeof FormData !== 'undefined' && config.data instanceof FormData) {
+            config.headers = {...config.headers, 'Content-Type': undefined};
+        }
+
         return new Promise<T>((resolve, reject) => {
             axiosInstance(config).then((response) => {
                 const body = response.data;

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

@@ -1,71 +1,77 @@
 import React from 'react';
-import {Modal} from 'antd';
+import {Image} from 'antd';
 import {UrlUtils} from '../../utils';
 
-
+/**
+ * 图片展示组件
+ *
+ * 支持的属性：
+ * - value: 图片地址，支持多个（逗号分隔或数组）。objectName（public/、private/ 开头）自动拼 /file/ 前缀
+ * - size: 缩略图尺寸（正方形边长），默认 60
+ * - borderRadius: 圆角，默认 4
+ * - preview: 是否可点击放大预览，默认 true
+ * - previewTitle: 预览弹窗标题，默认「预览图片」
+ * - placeholder: value 为空时展示的内容，默认不渲染
+ * - style: 附加到 img 的样式
+ */
 export class ViewImage extends React.Component {
 
-  state = {
-    modalOpen: false,
-    previewUrl: null,
+  static previewGroupProps = {
+    preview: {
+      scaleStep: 0.3,
+    },
+  };
+
+  resolveUrl = (v) => {
+    const isAbsUrl = v.startsWith('http');
+    const isDataUrl = v.startsWith('data:');
+    const isObjectName = v.startsWith('public/') || v.startsWith('private/');
+    if (isAbsUrl || isDataUrl) {
+      return {url: v, thumb: v};
+    }
+    if (isObjectName) {
+      return {
+        url: UrlUtils.contextPath('/file/' + v),
+        thumb: UrlUtils.contextPath('/file/' + v + '?thumb=1'),
+      };
+    }
+    return {url: UrlUtils.contextPath(v), thumb: UrlUtils.contextPath(v)};
   };
 
   render() {
-    let vs = this.props.value
+    const {value, size = 60, borderRadius = 4, preview = true, previewTitle = '预览图片',
+           placeholder, style} = this.props;
 
-    if (!vs) {
-      return;
+    if (!value) {
+      return placeholder || null;
     }
 
+    let vs = value;
     if (typeof vs === 'string') {
       vs = vs.split(',');
     }
 
-    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 items = vs.map(this.resolveUrl);
+    const previewConfig = {
+      scaleStep: 0.3,
+    };
+    if (previewTitle) {
+      previewConfig.title = previewTitle;
     }
 
-    const closeModal = () => this.setState({modalOpen: false});
-
-    const imgs = thumbList.map((thumb, i) => (
-      <img
-        style={{ display: 'inline-block' }}
-        key={urlList[i]}
-        src={thumb}
-        onClick={() => this.setState({modalOpen: true, previewUrl: urlList[i]})}
-        width={60}
-        height={60}
-      />
-    ));
-
     return (
-      <>
-        {imgs}
-        <Modal open={this.state.modalOpen} title="预览图片" width="70vw" footer={null}
-               onCancel={closeModal}>
-          <div style={{maxHeight:'70vh',overflow:'auto'}}>
-            <img src={this.state.previewUrl} style={{maxWidth: '100%'}}/>
-          </div>
-        </Modal>
-      </>
+      <Image.PreviewGroup preview={previewConfig}>
+        {items.map((item, i) => (
+          <Image
+            key={item.url}
+            src={item.thumb}
+            width={size}
+            height={size}
+            style={{display: 'inline-block', objectFit: 'cover', borderRadius, cursor: preview ? 'pointer' : undefined, ...style}}
+            preview={preview ? {src: item.url} : false}
+          />
+        ))}
+      </Image.PreviewGroup>
     );
   }
 }

package/src/layouts/admin/index.less

@@ -72,7 +72,7 @@
       padding: 12px 16px;
 
       .logo-img {
-        height: 38px;
+        height: 36px;
         cursor: pointer;
       }
 

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

@@ -1,5 +1,6 @@
 import React from "react";
 import {HttpUtils, Page, UrlUtils} from "../../framework";
+import "./article.less";
 
 export default class extends React.Component {
 
@@ -36,13 +37,26 @@ export default class extends React.Component {
             </Page>
         }
 
-        return <Page title={article.title}>
-            {article.mainImage && (
-                <div style={{marginBottom: 16}}>
-                    <img src={UrlUtils.contextPath('/file/' + article.mainImage)} style={{maxWidth: '100%'}} alt='主图'/>
+        return <Page>
+            <div className="oa-article">
+                <div className="oa-article-title">
+                    <h1>{article.title}</h1>
+                    <div className="oa-article-meta">
+                        {article.createUserLabel && <span>发布人：{article.createUserLabel}</span>}
+                        {article.createTime && <span>发布时间：{article.createTime}</span>}
+                    </div>
                 </div>
-            )}
-            <div dangerouslySetInnerHTML={{__html: article.content}}/>
+                {article.mainImage && (
+                    <div style={{marginBottom: 16, textAlign: 'center'}}>
+                        <img
+                            src={UrlUtils.contextPath('/file/' + article.mainImage)}
+                            style={{maxWidth: '100%', maxHeight: 400, borderRadius: 4}}
+                            alt='主图'
+                        />
+                    </div>
+                )}
+                <div dangerouslySetInnerHTML={{__html: article.content}}/>
+            </div>
         </Page>
     }
 }

package/src/pages/article/article.less

@@ -0,0 +1,124 @@
+.oa-article {
+  max-width: 800px;
+  margin: 0 auto;
+  background: #fff;
+  padding: 24px 32px;
+  border-radius: 4px;
+  font-size: 15px;
+  line-height: 1.8;
+  color: rgba(0, 0, 0, 0.88);
+  word-wrap: break-word;
+
+  .oa-article-title {
+    text-align: center;
+    padding-bottom: 16px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid #eee;
+
+    h1 {
+      font-size: 26px;
+      font-weight: 600;
+      line-height: 1.4;
+      margin: 0 0 8px;
+    }
+
+    .oa-article-meta {
+      color: #999;
+      font-size: 13px;
+      display: flex;
+      justify-content: center;
+      gap: 16px;
+    }
+  }
+
+  p {
+    margin: 0 0 16px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 24px 0 12px;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  h1 { font-size: 24px; }
+  h2 { font-size: 21px; }
+  h3 { font-size: 18px; }
+  h4 { font-size: 16px; }
+  h5, h6 { font-size: 15px; }
+
+  ul, ol {
+    margin: 0 0 16px;
+    padding-left: 24px;
+  }
+
+  li {
+    margin-bottom: 4px;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto 16px;
+  }
+
+  a {
+    color: #1677ff;
+  }
+
+  blockquote {
+    margin: 0 0 16px;
+    padding: 8px 16px;
+    border-left: 4px solid #e8e8e8;
+    background: #fafafa;
+    color: #666;
+  }
+
+  pre {
+    background: #f6f8fa;
+    padding: 12px 16px;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 0 0 16px;
+  }
+
+  code {
+    background: #f6f8fa;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 90%;
+  }
+
+  pre code {
+    padding: 0;
+    background: none;
+  }
+
+  table {
+    border-collapse: collapse;
+    margin: 0 0 16px;
+    width: 100%;
+  }
+
+  th, td {
+    border: 1px solid #e0e0e0;
+    padding: 8px 12px;
+    text-align: left;
+  }
+
+  th {
+    background: #f5f5f5;
+    font-weight: 600;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid #eee;
+    margin: 24px 0;
+  }
+
+  @media screen and (max-width: 600px) {
+    padding: 16px;
+  }
+}

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

@@ -1,5 +1,5 @@
 import {PlusOutlined} from '@ant-design/icons'
-import {Button, Form, Input, InputNumber, Modal} from 'antd'
+import {Button, Form, Input, InputNumber} from 'antd'
 import React from 'react'
 import {
     DictUtils,
@@ -10,18 +10,16 @@ import {
     FormModal,
     HttpUtils,
     Page,
+    PageUtils,
     PermActions,
     ProTable,
-    UrlUtils
+    ViewImage
 } from "../../../framework";
 
-const {TextArea} = Input;
-
 export default class extends React.Component {
 
     state = {
         editing: false,
-        previewArticle: null,
     }
 
     modalRef = React.createRef()
@@ -38,7 +36,7 @@ export default class extends React.Component {
     }
 
     handlePreview = record => {
-        this.setState({previewArticle: record})
+        PageUtils.open('/article/' + record.code, record.title)
     }
 
     onFinish = async values => {
@@ -63,6 +61,14 @@ export default class extends React.Component {
             title: '标题',
             dataIndex: 'title',
         },
+        {
+            title: '主图',
+            dataIndex: 'mainImage',
+            width: 80,
+            render(v) {
+                return <ViewImage value={v} size={48}/>
+            },
+        },
         {
             title: '显示位置',
             dataIndex: 'position',
@@ -99,7 +105,6 @@ export default class extends React.Component {
     ]
 
     render() {
-        const {previewArticle} = this.state
         return <Page
             title="文章管理"
             description="管理系统文章，如关于、帮助等页面"
@@ -155,21 +160,6 @@ 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,5 +1,5 @@
 import {DeleteOutlined, EditOutlined, PlusOutlined} from '@ant-design/icons';
-import {AutoComplete, Button, Card, Descriptions, Empty, Form, Input, InputNumber, Popconfirm, Splitter, Tree, Tag, TreeSelect, Typography} from 'antd';
+import {AutoComplete, Button, Card, Descriptions, Empty, Form, Input, InputNumber, Splitter, Tree, Tag, TreeSelect, Typography} from 'antd';
 import React from 'react';
 import {
     PermActions,
@@ -168,7 +168,9 @@ export default class extends React.Component {
                           size='small'
                           title={<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                               <Typography.Text strong>字典类型</Typography.Text>
-                              <Button size='small' perm='sys-dict:create' icon={<PlusOutlined/>} onClick={this.handleTypeAdd}>新增类型</Button>
+                              <PermActions size='small' actions={[
+                                  {label: '新增类型', perm: 'sys-dict:create', icon: <PlusOutlined/>, onClick: this.handleTypeAdd},
+                              ]}/>
                           </div>}
                     >
                         <Tree
@@ -188,14 +190,16 @@ export default class extends React.Component {
                         <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8}}>
                             <Typography.Text strong>类型信息</Typography.Text>
                             {hasTypeSelected && (
-                                <span>
-                                    <Button size='small' icon={<EditOutlined/>} perm='sys-dict:update'
-                                            onClick={this.handleTypeEdit} style={{marginRight: 4}}>编辑</Button>
-                                    <Popconfirm perm='sys-dict:delete' title='是否确定删除此类型及其所有子类型和字典项？'
-                                                onConfirm={this.handleTypeDelete}>
-                                        <Button size='small' icon={<DeleteOutlined/>}>删除</Button>
-                                    </Popconfirm>
-                                </span>
+                                <PermActions size='small' actions={[
+                                    {label: '编辑', perm: 'sys-dict:update', icon: <EditOutlined/>, onClick: this.handleTypeEdit},
+                                    {
+                                        label: '删除',
+                                        perm: 'sys-dict:delete',
+                                        icon: <DeleteOutlined/>,
+                                        confirm: '是否确定删除此类型及其所有子类型和字典项？',
+                                        onClick: this.handleTypeDelete,
+                                    },
+                                ]}/>
                             )}
                         </div>
                         {hasTypeSelected && <Descriptions size='small' column={3}>

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

@@ -1,19 +1,14 @@
 import React from 'react'
-import {Button, Empty, Form, Input, Modal, Pagination, Tabs} from 'antd'
+import {Button, Form, Input, Modal, Space} from 'antd'
 import {CloudUploadOutlined} from "@ant-design/icons";
 
-import {PermActions, DictUtils, FieldDateRange, FieldDictSelect, FieldUploadFile, HttpUtils, Page, ProTable, UrlUtils} from "../../../framework";
+import {PermActions, DictUtils, FieldDateRange, FieldDictSelect, FieldUploadFile, HttpUtils, Page, ProTable, UrlUtils, ViewImage} from "../../../framework";
 
 export default class extends React.Component {
 
     state = {
         formOpen: false,
         formValues: {},
-        gridPage: 1,
-        gridList: [],
-        gridTotal: 0,
-        gridLoading: false,
-        previewUrl: undefined,
     }
 
     tableRef = React.createRef()
@@ -25,74 +20,105 @@ 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})
+    handleBatchDelete = ids => {
+        HttpUtils.post('admin/sysFile/deleteBatch', ids).then(rs => {
+            this.tableRef.current.reload()
+            this.tableRef.current.clearSelection()
         })
     }
 
     columns = [
+        {
+            title: '缩略图',
+            dataIndex: 'objectName',
+            width: 80,
+            render: (objectName, record) => {
+                if (record.type !== 'image') {
+                    return '-'
+                }
+                return <ViewImage value={objectName} size={48}/>
+            },
+        },
         {
             title: '原始名称',
             tooltip: '上传时候的文件名',
             dataIndex: 'originName',
             width: 200,
         },
-        {
-            title: '状态',
-            dataIndex: 'status',
-            width: 120,
-            render(status) {
-                return DictUtils.dictTag('fileStatus', status) || (status || '-')
-            },
-        },
         {
             title: '存储名称',
             dataIndex: 'objectName',
-            tooltip: '文件唯一标识id'
+            tooltip: '文件唯一标识id',
+            width: 200,
         },
-
         {
             title: '文件大小',
             dataIndex: 'sizeInfo',
+            width: 100,
+        },
+        {
+            title: '扩展名',
+            dataIndex: 'suffix',
+            width: 90,
         },
-
         {
-            title: 'mime',
+            title: 'MIME',
             dataIndex: 'mimeType',
+            width: 130,
         },
         {
-            title: '扩展名',
-            dataIndex: 'suffix',
+            title: '类型',
+            dataIndex: 'type',
+            width: 80,
+            render(v) {
+                return v || '-'
+            },
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            width: 100,
+            render(status) {
+                return DictUtils.dictTag('fileStatus', status) || (status || '-')
+            },
         },
-
         {
             title: '上传时间',
             dataIndex: 'createTime',
+            width: 160,
         },
         {
             title: '上传者',
             dataIndex: 'createUserLabel',
+            width: 100,
         },
         {
-            title: '预览',
-            dataIndex: 'objectName',
-            render(objectName) {
-                return <a href={UrlUtils.contextPath('/file/' + objectName)} target='_blank'>预览</a>
-            }
+            title: '关联表',
+            dataIndex: 'joinTable',
+            width: 120,
+            render(v) {
+                return v || '-'
+            },
+        },
+        {
+            title: '关联ID',
+            dataIndex: 'joinId',
+            width: 160,
+            render(v) {
+                return v || '-'
+            },
         },
         {
             title: '操作',
             dataIndex: 'option',
+            fixed: 'right',
+            width: 120,
             render: (_, record) => (
                 <PermActions
                     more
                     size="small"
                     actions={[
+                        {label: '预览', onClick: () => window.open(UrlUtils.contextPath('/file/' + record.objectName), '_blank')},
                         {label: '删除', perm: 'sys-file:delete', confirm: '是否确定删除文件信息', onClick: () => this.handleDelete(record)},
                     ]}
                 />
@@ -120,12 +146,25 @@ export default class extends React.Component {
         </Modal>
     )
 
-    renderTable = () => (
-        <>
+    render() {
+        return <Page>
             <ProTable
                 actionRef={this.tableRef}
-                toolBarRender={() => (
-                    <Button type='primary' icon={<CloudUploadOutlined/>} onClick={() => this.setState({formOpen: true})}>上传文件</Button>
+                rowSelection={{}}
+                toolBarRender={(params, selection) => (
+                    <Space>
+                        <Button type='primary' icon={<CloudUploadOutlined/>} onClick={() => this.setState({formOpen: true})}>上传文件</Button>
+                        <PermActions
+                            actions={[{
+                                label: `批量删除${selection.selectedRowKeys.length ? `(${selection.selectedRowKeys.length})` : ''}`,
+                                perm: 'sys-file:delete',
+                                danger: true,
+                                disabled: !selection.selectedRowKeys.length,
+                                confirm: `是否确定删除选中的 ${selection.selectedRowKeys.length} 个文件?`,
+                                onClick: () => this.handleBatchDelete(selection.selectedRowKeys),
+                            }]}
+                        />
+                    </Space>
                 )}
                 request={(params) => {
                     return HttpUtils.get('admin/sysFile/page', params);
@@ -150,61 +189,6 @@ export default class extends React.Component {
                 )}
             />
             {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={!!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>
     }
 }