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 => {
-      if (res.code === 0) {
-        setImgBed(res.data);
-      }
-    });
-  };
+  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,18 +328,22 @@ 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={classnames(
-                              styles.imgItem,
-                              curSelectedImg === item ? styles.seleted : '',
-                            )}
+                          <div 
+                            className={styles.imgItem} 
                             key={i}
-                            onClick={() => this.handleImgSelected(item)}
-                          >
-                            <img src={this.getImageUrl(item)} alt="熊猫运维中台系统" />
-                            <span className={styles.iconBtn}>
-                              <CheckCircleFilled />
-                            </span>
+                            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>{this.getFileName(item)}</span>
                           </div>
                         );
                       })}