@jiangood/open-admin 3.0.11 → 3.0.13

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

@@ -1,67 +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 = [];
-    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);
-        continue;
-      }
-
-      if (isObjectName) {
-        urlList.push(UrlUtils.contextPath('/file/' + v));
-        continue;
-      }
-
-      urlList.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 = urlList.map((url) => (
-      <img
-        style={{ display: 'inline-block' }}
-        key={url}
-        src={url}
-        onClick={() => this.setState({modalOpen: true, previewUrl: url})}
-        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/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/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,27 +1,25 @@
 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,
     FieldBoolean,
     FieldDictSelect,
     FieldEditor,
-    FieldUploadFile,
+    FieldUploadImage,
     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="管理系统文章，如关于、帮助等页面"
@@ -136,7 +141,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'>
@@ -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/file/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import {Button, Form, Input, Modal} 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: {}
+        formValues: {},
     }
 
     tableRef = React.createRef()
@@ -20,64 +20,105 @@ export default class extends React.Component {
         })
     }
 
+    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: 'mime',
+            title: '扩展名',
+            dataIndex: 'suffix',
+            width: 90,
+        },
+        {
+            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)},
                     ]}
                 />
@@ -85,14 +126,45 @@ export default class extends React.Component {
         },
     ]
 
+    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>
+    )
+
     render() {
-        return <Page title="文件管理" description="管理系统上传文件">
+        return <Page>
             <ProTable
                 actionRef={this.tableRef}
-                toolBarRender={() => (
-                    <PermActions>
-                        <Button type='primary' perm='sys-file:upload' icon={<CloudUploadOutlined/>} onClick={() => this.setState({formOpen: true})}>上传文件</Button>
-                    </PermActions>
+                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);
@@ -110,39 +182,13 @@ 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>
                     </>
                 )}
             />
-
-            <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>
-
+            {this.renderUploadModal()}
         </Page>
     }
 }
-
-
-