feat: 图库搜索

src/components/Upload/index.less

@@ -27,7 +27,12 @@
   cursor: pointer;
   border-bottom: 1px solid #2f54eb;
 }
-
+.search{
+  width: 50%;
+}
+.hide{
+  display: none !important;
+}
 .svgBg{
   background: #aaa;
   background-image: linear-gradient(white 0px, transparent 0), linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0), linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
@@ -66,6 +71,7 @@
     &:hover>span{
       color: #2f54eb;
     }
+
     img {
       margin: auto;
       width: 100%;
@@ -76,7 +82,7 @@
       background-color: rgba(238,238,238,1);
     }
     &:hover,
-    &.seleted {
+    &>.seleted {
       .iconBtn {
         visibility: visible;
       }

src/components/Upload/index.tsx

 import React from 'react';
-import { Upload, Modal, message, Tabs, Result } from 'antd';
+import { Upload, Modal, message, Tabs, Result, Input } from 'antd';
 import { PlusOutlined, CheckCircleFilled } from '@ant-design/icons';
 import ImgCrop from 'antd-img-crop';
 import classnames from 'classnames';
@@ -46,6 +46,7 @@ interface PicturesWallType {
   type?: 'CityTemp'|'icon'|'androidMenu'|'menuNew',
   value?: string | string[],
   uploadContext: any,
+  search: string,
 }
 
 class PicturesWall extends React.Component<PicturesWallType> {
@@ -57,6 +58,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
     imgBed: this.props.uploadContext?.imgBed || [],
     curSelectedImg: '',
     prevProps:{},
+    search: '',
     fileList: this.props.value ? Array.isArray(this.props.value) ? this.props.value.map((v) => ({
       url: v,
       uid: uuid(8, 16),
@@ -331,25 +333,35 @@ class PicturesWall extends React.Component<PicturesWallType> {
             {imgBed.map((item, i) => {
               return (
                 <TabPane tab={tabNames[item.moduleName]} key={item.moduleName}>
+                  <Input 
+                    placeholder="搜索图库" 
+                    className={styles.search} 
+                    size="middle" 
+                    value={this.state.search}
+                    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={styles.imgItem} 
+                            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>{this.getFileName(item)}</span>
+                            <span>{fileName}</span>
                           </div>
                         );
                       })}