client: use image-uploader in wiki setting

packages/client/src/components/wiki/setting/base/index.module.scss

@@ -1,70 +1,15 @@
-.coverWrap {
+.cover {
-  display: flex;
+  margin-bottom: 12px;
-  flex-wrap: nowrap;
 
-  .cover {
+  img {
-    margin-right: 24px;
+    width: 104px;
-
+    height: 96px;
-    img {
+    border-radius: 4px;
-      width: 104px;
-      height: 96px;
-      margin-bottom: 16px;
-      border-radius: 4px;
-    }
-  }
-
-  .right {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: auto;
-
-    .placeholderWrapper {
-      display: flex;
-      flex-wrap: nowrap;
-
-      .coverPlaceholder {
-        flex-shrink: 0;
-        width: 96px;
-        height: 96px;
-        cursor: pointer;
-
-        & + .coverPlaceholder {
-          margin-left: 16px;
-        }
-
-        img {
-          width: 96px;
-          height: 96px;
-          border-radius: 4px;
-        }
-      }
-    }
   }
 }
 
 @media (max-width: 768px) {
-  .coverWrap {
+  .cover {
-    flex-wrap: wrap;
-
-    .cover {
-      width: 100%;
-      margin-right: 0;
-    }
-  }
-
-  .right {
     width: 100%;
-
-    .placeholderWrapper {
-      width: 100%;
-      margin: 16px 0;
-      overflow: auto;
-
-      .coverPlaceholder {
-        flex-shrink: 0;
-      }
-    }
   }
 }

packages/client/src/components/wiki/setting/base/index.tsx

@@ -1,12 +1,20 @@
-import { Button, Form, Toast } from '@douyinfe/semi-ui';
+import { Avatar, Button, Form, Toast } from '@douyinfe/semi-ui';
 import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
 import { WIKI_AVATARS } from '@think/constants';
 import type { IWiki } from '@think/domains';
-import { Upload } from 'components/upload';
+import { ImageUploader } from 'components/image-uploader';
 import { useEffect, useRef, useState } from 'react';
 
 import styles from './index.module.scss';
 
+const images = [
+  {
+    key: 'placeholers',
+    title: '图库',
+    images: WIKI_AVATARS,
+  },
+];
+
 type IUpdateWIKI = Partial<IWiki>;
 
 interface IProps {
@@ -60,23 +68,22 @@ export const Base: React.FC<IProps> = ({ wiki, update }) => {
         rules={[{ required: true, message: '请输入知识库简介' }]}
       ></Form.TextArea>
       <Form.Slot label="封面">
-        <div className={styles.coverWrap}>
+        <div className={styles.cover}>
-          <div className={styles.cover}>
+          <Avatar
-            <img src={currentCover} />
+            shape="square"
-          </div>
+            src={currentCover}
-          <div className={styles.right}>
+            style={{
-            <div className={styles.placeholderWrapper}>
+              width: 96,
-              {WIKI_AVATARS.map((cover) => {
+              height: 96,
-                return (
+              borderRadius: 4,
-                  <div key={cover} className={styles.coverPlaceholder} onClick={() => setCover(cover)}>
+            }}
-                    <img src={cover} alt="系统默认图片" />
+          >
-                  </div>
+            {wiki && wiki.name.charAt(0)}
-                );
+          </Avatar>
-              })}
-            </div>
-          </div>
         </div>
-        <Upload onOK={setCover}></Upload>
+        <ImageUploader images={images} selectImage={setCover}>
+          <Button>更换封面</Button>
+        </ImageUploader>
       </Form.Slot>
       <div
         style={{