62 lines
2.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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;