LaiToolManagementSystem/src/pages/Options/LaitoolOptions/DubSetting/DubSettingTTsOptions/index.tsx

import { GetOptions, 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';

interface DubSettingTTsOptionsProps {
  visible?: boolean; // 添加 visible 属性
}

const DubSettingTTsOptions: React.FC<DubSettingTTsOptionsProps> = ({ visible }) => {

  const [form] = Form.useForm();
  const { ttsOptions, setTTsOptions } = useOptionsStore();
  const { setTopSpinning, 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(() => {
    if (!visible) return;
    setTopSpinning(true);
    setTopSpinTip("加载信息中");
    // 这边加载所有的配音数据
    GetOptions('tts').then((res) => {
      setTTsOptions(res);
      form.setFieldsValue({ edgeTTsRoles: getOptionsStringValue(res, 'EdgeTTsRoles', "{}") })
    }
    ).catch((err) => {
      console.error(err);
    }).finally(() => {
      setTopSpinning(false);
    });
  }, [visible]);


  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;