129 lines
4.4 KiB
TypeScript
129 lines
4.4 KiB
TypeScript
import {Button, Divider, Empty, Space} from "antd";
|
|
import TextArea from "antd/es/input/TextArea";
|
|
import {useEffect, useState} from "react";
|
|
import {CheckOutlined, EditOutlined, ReloadOutlined} from "@ant-design/icons";
|
|
|
|
type PropsType = {
|
|
title: string;
|
|
maxLength: number;
|
|
text: string;
|
|
newText: string;
|
|
handleGenerate: () => void;
|
|
handleSave: (newText: string) => void;
|
|
}
|
|
|
|
export default function AiHelperText(props: PropsType) {
|
|
|
|
const [text, setText] = useState('');
|
|
const [newText, setNewText] = useState('');
|
|
const [isTextEdit, setIsTextEdit] = useState(false);
|
|
const [isNewTextEdit, setIsNewTextEdit] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setText(props.text);
|
|
setNewText(props.newText);
|
|
}, [props.text, props.newText])
|
|
|
|
const renderTextBtn = () => {
|
|
if (!newText) {
|
|
if (!isTextEdit) {
|
|
return (
|
|
<Space>
|
|
<Button type="link" style={{cursor: 'pointer'}} onClick={() => {
|
|
props.handleGenerate();
|
|
}}>AI生成</Button>
|
|
{
|
|
text ? (
|
|
<Button type="link" style={{cursor: 'pointer'}} onClick={() => {
|
|
setIsTextEdit(true);
|
|
}}><EditOutlined/> 编辑</Button>
|
|
) : <></>
|
|
}
|
|
</Space>
|
|
)
|
|
}
|
|
return (
|
|
<Space>
|
|
<Button type="link" style={{cursor: 'pointer'}} onClick={() => {
|
|
props.handleSave(text);
|
|
setIsTextEdit(false);
|
|
}}><CheckOutlined/> 保存结果</Button>
|
|
</Space>
|
|
)
|
|
}
|
|
if (!isNewTextEdit) {
|
|
return (
|
|
<Space>
|
|
<Button type="link" style={{cursor: 'pointer'}} onClick={() => {
|
|
props.handleSave(newText);
|
|
setIsNewTextEdit(false);
|
|
}}><CheckOutlined/> 保存结果</Button>
|
|
<Button type="link" style={{cursor: 'pointer'}} onClick={() => {
|
|
props.handleGenerate();
|
|
}}><ReloadOutlined/> 重新生成</Button>
|
|
<Button type="link" style={{cursor: 'pointer'}} onClick={() => {
|
|
setIsNewTextEdit(true);
|
|
}}><EditOutlined/> 编辑</Button>
|
|
</Space>
|
|
)
|
|
}
|
|
return (
|
|
<Space>
|
|
<Button type="link" style={{cursor: 'pointer'}} onClick={() => {
|
|
setIsNewTextEdit(false);
|
|
}}><CheckOutlined/> 确定</Button>
|
|
</Space>
|
|
)
|
|
}
|
|
|
|
const renderTextDom = () => {
|
|
if(!text) {
|
|
return <Empty description="暂无内容"/>
|
|
}
|
|
if(!isTextEdit) {
|
|
return <div>{text}</div>
|
|
}
|
|
return (
|
|
<TextArea autoSize={true} value={text} placeholder={`请编辑${props.title}`} maxLength={props.maxLength} onChange={(e) => {
|
|
setText(e.currentTarget.value);
|
|
}}/>
|
|
)
|
|
}
|
|
|
|
const renderNewTextDom = () => {
|
|
if(!newText) {
|
|
return <></>
|
|
}
|
|
if(!isNewTextEdit) {
|
|
return (
|
|
<>
|
|
<Divider orientation="right" plain>新{props.title}</Divider>
|
|
<div>{newText}</div>
|
|
</>
|
|
)
|
|
}
|
|
return (
|
|
<>
|
|
<Divider orientation="right" plain>新{props.title}</Divider>
|
|
<TextArea autoSize={true} value={newText} placeholder={`请编辑${props.title}`} maxLength={props.maxLength} onChange={(e) => {
|
|
setNewText(e.currentTarget.value);
|
|
}}/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div style={{padding: '5px 0 0 0', fontWeight: 'bold'}}>{props.title}</div>
|
|
<div style={{padding: '5px 0 0 0'}}>
|
|
{newText ? <Divider orientation="right" plain>原{props.title}</Divider> : <></>}
|
|
{renderTextDom()}
|
|
{renderNewTextDom()}
|
|
</div>
|
|
<div style={{padding: '5px 0 0 0', textAlign: 'center'}}>
|
|
{renderTextBtn()}
|
|
</div>
|
|
</>
|
|
)
|
|
|
|
} |