style: 优化图片库样式

src/components/Upload/context.js

@@ -2,17 +2,29 @@ import { getImageBases } from '@/services/common/api';
 import React, { useEffect, useState } from 'react';
 const UploadContext = React.createContext();
 
+const sleep = time =>
+  new Promise((res, rej) => {
+    setTimeout(() => {
+      res();
+    }, time);
+  });
+
 const PictureWallProvider = props => {
   const { children, ...rest } = props;
   const [imgBed, setImgBed] = useState([]);
 
-  const update = () => {
-    getImageBases('').then(res => {
+  const update = () =>
+    getImageBases('')
+      .then(res => {
         if (res.code === 0) {
           setImgBed(res.data);
         }
+      })
+      .catch(err => {
+        // eslint-disable-next-line no-console
+        console.error(err);
+        return sleep(3000).then(update);
       });
-  };
 
   useEffect(() => {
     update();

src/components/Upload/index.less

@@ -41,19 +41,39 @@
   overflow: auto;
 
   .imgItem {
-    flex: 0 0 50px;
+    flex: 0 0 75px;
     position: relative;
+    flex-direction: column;
+    max-width: 75px;
     // margin-right: 16px;
     // margin-bottom: 16px;
     margin: 10px;
-    width: 50px;
-    max-height: 50px;
-    overflow: hidden;
+    max-height: 100px;
+    // overflow: hidden;
     cursor: pointer;
-    background-color: rgba(238,238,238,1);
+    display: flex;
+    >div{
+      flex: 1;
+      display: flex;
+      max-height: 78px;
+    }
+    >span{
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    &:hover>span{
+      color: #2f54eb;
+    }
     img {
+      margin: auto;
       width: 100%;
-      height: 100%;
+      object-fit: contain;
+      max-height: 100%;
+    }
+    .svgGray{
+      background-color: rgba(238,238,238,1);
     }
     &:hover,
     &.seleted {

src/components/Upload/index.tsx

@@ -221,6 +221,11 @@ class PicturesWall extends React.Component<PicturesWallType> {
     return `${window.location.origin}/${path}`.replace(/\\/g, '/')
   }
 
+  getFileName(path:string){
+    const match = path.match(/(?<=[\/\\])([^\\\/\.]*)(\.?\w*)$/)
+    return match&&match[1]||''
+  }
+
   render() {
     const {
       previewVisible,
@@ -323,19 +328,23 @@ class PicturesWall extends React.Component<PicturesWallType> {
                   <div className={styles.imgBox}>
                     {item.child?.map(m => m.fileUrls).flat(Infinity).map((item: string, i: number) => {
                         return (
+                          <div 
+                            className={styles.imgItem} 
+                            key={i}
+                            onClick={() => this.handleImgSelected(item)}>
                             <div
                               className={classnames(
-                              styles.imgItem,
                                 curSelectedImg === item ? styles.seleted : '',
                                 )}
-                            key={i}
-                            onClick={() => this.handleImgSelected(item)}
+                                
                                 >
-                            <img src={this.getImageUrl(item)} alt="熊猫运维中台系统" />
+                              <img className={classnames({[styles.svgGray]: /\.svg$/.test(item)})} src={this.getImageUrl(item)} title={item} alt="熊猫运维中台系统" />
                               <span className={styles.iconBtn}>
                                 <CheckCircleFilled />
                               </span>
                             </div>
+                            <span>{this.getFileName(item)}</span>
+                          </div>
                         );
                       })}
                   </div>