style: 优化图片库

internals/webpack/webpack.base.babel.js

@@ -9,7 +9,7 @@ module.exports = options => ({
   output: Object.assign(
     {
       path: path.resolve(process.cwd(), 'build'),
-      publicPath: process.env.PUBLIC_PATH || '/reactOMS',
+      publicPath: process.env.PUBLIC_PATH || '/CivManage',
     },
     options.output,
   ), // Merge with env dependent settings

internals/webpack/webpack.prod.babel.js

@@ -18,8 +18,8 @@ module.exports = require('./webpack.base.babel')({
 
   // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
   output: {
-    filename: 'static/[name].[chunkhash].js',
-    chunkFilename: 'static/[name].[chunkhash].chunk.js',
+    filename: 'static/[name].[chunkhash:8].js',
+    chunkFilename: 'static/[name].[chunkhash:8].chunk.js',
   },
 
   optimization: {

src/components/Upload/index.less

@@ -17,7 +17,21 @@
     background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
   }
 }
-
+.modal {
+  .ant-tabs-content{
+    height: 100%;
+      .ant-tabs-tabpane{
+        padding-left: 0 !important;
+      }
+  }
+  .ant-tabs-content-holder{
+    padding: 5px 0;
+  }
+  .ant-modal-body{
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
 .wallBtn {
   position: absolute;
   left: 140px;
@@ -42,9 +56,15 @@
 .imgBox {
   display: flex;
   flex-wrap: wrap;
-  max-height: 520px;
+  max-height: calc(100% - 40px);
   overflow: auto;
-
+  .ant-collapse-content-box{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .ant-collapse{
+    width: 100%;
+  }
   .imgItem {
     flex: 0 0 75px;
     position: relative;

src/components/Upload/index.tsx

 import React from 'react';
-import { Upload, Modal, message, Tabs, Result, Input } from 'antd';
+import { Upload, Modal, message, Tabs, Result, Input, Collapse } from 'antd';
 import { PlusOutlined, CheckCircleFilled } from '@ant-design/icons';
 import ImgCrop from 'antd-img-crop';
 import classnames from 'classnames';
@@ -47,6 +47,7 @@ interface PicturesWallType {
   value?: string | string[],
   uploadContext: any,
   search: string,
+  actives: any,
 }
 
 class PicturesWall extends React.Component<PicturesWallType> {
@@ -59,6 +60,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
     curSelectedImg: '',
     prevProps:{},
     search: '',
+    actives: {},
     fileList: this.props.value ? Array.isArray(this.props.value) ? this.props.value.map((v) => ({
       url: v,
       uid: uuid(8, 16),
@@ -100,9 +102,12 @@ class PicturesWall extends React.Component<PicturesWallType> {
       }
     }
     if(imgBed != state.prevProps.uploadContext?.imgBed){
+      const activeKeys = {};
+      imgBed.forEach(item => activeKeys[item.moduleName] = item.child.map(c => c.moduleName));
       return {
         prevProps: props,
-        imgBed
+        imgBed,
+        actives: activeKeys,
       }
     }
     return {
@@ -234,6 +239,57 @@ class PicturesWall extends React.Component<PicturesWallType> {
     return match&&match[1]||''
   }
 
+  renderImgItem(url){
+    const fileName = this.getFileName(url)
+    const {curSelectedImg, search} = this.state;
+    return (
+      <div 
+        className={classnames({
+          [styles.imgItem]:true, 
+          [styles.hide]: !fileName.includes(search)
+        })} 
+        key={url}
+        onClick={() => this.handleImgSelected(url)}>
+        <div
+          className={classnames(
+            curSelectedImg === url ? styles.seleted : '',
+          )}
+        >
+          <img 
+            className={classnames({
+              [styles.svgGray]: /\.svg$/.test(url)
+            })} 
+            src={this.getImageUrl(url)} 
+            title={url} 
+            alt="熊猫运维中台系统" />
+          <span className={styles.iconBtn}>
+            <CheckCircleFilled />
+          </span>
+        </div>
+        <span>{fileName}</span>
+      </div>
+    );
+  }
+
+  renderCollapse(module){
+    const { Panel } = Collapse;
+    const items = module.fileUrls.map(url =>this.renderImgItem(url))
+    return items.length>0&&<Panel
+          forceRender
+          header={module.moduleName} 
+          key={module.moduleName}>
+            {items}
+        </Panel>
+  }
+
+  handleCollapseChange(v, moduleName){
+    const activeKeys = {...this.state.actives}
+    activeKeys[moduleName] = v;
+    this.setState({
+      actives: activeKeys
+    })
+  }
+
   render() {
     const {
       previewVisible,
@@ -242,6 +298,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
       previewTitle,
       wallModalVisible,
       imgBed,
+      actives,
       curSelectedImg,
     } = this.state;
     const {
@@ -328,11 +385,12 @@ class PicturesWall extends React.Component<PicturesWallType> {
           width={860}
           onCancel={this.handleModalCancel}
           onOk={this.handleModalOk}
+          className={styles.modal}
         >
           <Tabs defaultActiveKey={imgBed[0]?.moduleName} tabPosition="left" style={{ height: 520 }}>
             {imgBed.map((item, i) => {
               return (
-                <TabPane tab={tabNames[item.moduleName]} key={item.moduleName}>
+                <TabPane tab={tabNames[item.moduleName]||item.moduleName} key={item.moduleName}>
                   <Input 
                     placeholder="搜索图库" 
                     className={styles.search} 
@@ -341,30 +399,12 @@ class PicturesWall extends React.Component<PicturesWallType> {
                     onChange={e => this.setState({search: e.target.value})} 
                     allowClear/>
                   <div className={styles.imgBox}>
-                    {item.child?.map(m => m.fileUrls).flat(Infinity).map((item: string, i: number) => {
-                        const fileName = this.getFileName(item)
-                        return (
-                          <div 
-                            className={classnames({
-                              [styles.imgItem]:true, 
-                              [styles.hide]: !fileName.includes(this.state.search)
-                            })} 
-                            key={i}
-                            onClick={() => this.handleImgSelected(item)}>
-                            <div
-                              className={classnames(
-                                curSelectedImg === item ? styles.seleted : '',
-                                )}
-                                >
-                              <img className={classnames({[styles.svgGray]: /\.svg$/.test(item)})} src={this.getImageUrl(item)} title={item} alt="熊猫运维中台系统" />
-                              <span className={styles.iconBtn}>
-                                <CheckCircleFilled />
-                              </span>
-                            </div>
-                            <span>{fileName}</span>
-                          </div>
-                        );
-                      })}
+                    <Collapse 
+                      bordered
+                      activeKey={actives[item.moduleName]} 
+                      onChange={(v) => this.handleCollapseChange(v, item.moduleName)}>
+                      {item.child?.map(child => this.renderCollapse(child))}
+                    </Collapse>
                   </div>
                 </TabPane>
               );