client: use image-uploader in wiki setting

This commit is contained in:
fantasticit 2022-06-02 17:54:47 +08:00
parent bbaeeebf3f
commit 37c310363d
2 changed files with 32 additions and 80 deletions

View File

@ -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) { @media (max-width: 768px) {
.coverWrap { .cover {
flex-wrap: wrap;
.cover {
width: 100%;
margin-right: 0;
}
}
.right {
width: 100%; width: 100%;
.placeholderWrapper {
width: 100%;
margin: 16px 0;
overflow: auto;
.coverPlaceholder {
flex-shrink: 0;
}
}
} }
} }

View File

@ -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 { FormApi } from '@douyinfe/semi-ui/lib/es/form';
import { WIKI_AVATARS } from '@think/constants'; import { WIKI_AVATARS } from '@think/constants';
import type { IWiki } from '@think/domains'; import type { IWiki } from '@think/domains';
import { Upload } from 'components/upload'; import { ImageUploader } from 'components/image-uploader';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import styles from './index.module.scss'; import styles from './index.module.scss';
const images = [
{
key: 'placeholers',
title: '图库',
images: WIKI_AVATARS,
},
];
type IUpdateWIKI = Partial<IWiki>; type IUpdateWIKI = Partial<IWiki>;
interface IProps { interface IProps {
@ -60,23 +68,22 @@ export const Base: React.FC<IProps> = ({ wiki, update }) => {
rules={[{ required: true, message: '请输入知识库简介' }]} rules={[{ required: true, message: '请输入知识库简介' }]}
></Form.TextArea> ></Form.TextArea>
<Form.Slot label="封面"> <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> </div>
<Upload onOK={setCover}></Upload> <ImageUploader images={images} selectImage={setCover}>
<Button></Button>
</ImageUploader>
</Form.Slot> </Form.Slot>
<div <div
style={{ style={{