62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
|
import { getOptionsStringValue, SaveOptions } from '@/services/services/options/optionsTool';
|
|||
|
|
import { useOptionsStore } from '@/store/options';
|
|||
|
|
import { useSoftStore } from '@/store/software';
|
|||
|
|
import { Button, Card, Col, Form, Input, message, Row } from 'antd';
|
|||
|
|
import TextArea from 'antd/es/input/TextArea';
|
|||
|
|
import React, { useEffect } from 'react';
|
|||
|
|
|
|||
|
|
const DubSettingTTsOptions: React.FC = () => {
|
|||
|
|
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
const { ttsOptions, setTTsOptions } = useOptionsStore();
|
|||
|
|
const { topSpinning, setTopSpinning, topSpinTip, setTopSpinTip } = useSoftStore();
|
|||
|
|
const [messageApi, messageHolder] = message.useMessage();
|
|||
|
|
|
|||
|
|
async function onFinish(values: any): Promise<void> {
|
|||
|
|
setTopSpinning(true);
|
|||
|
|
setTopSpinTip("正在保存EdgeTTs配置");
|
|||
|
|
try {
|
|||
|
|
await SaveOptions(values);
|
|||
|
|
setTTsOptions(ttsOptions.map((item: OptionModel.Option) => {
|
|||
|
|
if (item.key === "EdgeTTsRoles") {
|
|||
|
|
item.value = values.edgeTTsRoles
|
|||
|
|
}
|
|||
|
|
return item
|
|||
|
|
}));
|
|||
|
|
messageApi.success('设置成功');
|
|||
|
|
} catch (error: any) {
|
|||
|
|
messageApi.error(error.message);
|
|||
|
|
} finally {
|
|||
|
|
setTopSpinning(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
useEffect(() => {
|
|||
|
|
form.setFieldsValue({ edgeTTsRoles: getOptionsStringValue(ttsOptions, 'EdgeTTsRoles', "{}") })
|
|||
|
|
}, [ttsOptions])
|
|||
|
|
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Card title="配置" >
|
|||
|
|
<Form form={form} name="advanced_search" onFinish={onFinish} layout="vertical">
|
|||
|
|
<Row gutter={24}>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
label="语音合成角色"
|
|||
|
|
name="edgeTTsRoles"
|
|||
|
|
>
|
|||
|
|
<TextArea placeholder="请输入EdgeTTs合成角色，JSON格式" autoSize={{ minRows: 6, maxRows: 6 }} />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
<Form.Item wrapperCol={{ offset: 0, span: 16 }}>
|
|||
|
|
<Button color="primary" variant="filled" htmlType="submit">
|
|||
|
|
保存EdgeTTs配置
|
|||
|
|
</Button>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
{messageHolder}
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default DubSettingTTsOptions;
|