mirror of https://github.com/fantasticit/think.git
client: use image-uploader in wiki setting
This commit is contained in:
parent
bbaeeebf3f
commit
37c310363d
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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={{
|
||||||
|
|
Loading…
Reference in New Issue