From 208b887f79a48d840a88bf2e27470631f4e6e65d Mon Sep 17 00:00:00 2001
From: lq1405 <2769838458@qq.com>
Date: Sat, 22 Feb 2025 14:58:48 +0800
Subject: [PATCH] =?UTF-8?q?Laitool=20=E8=AE=BE=E7=BD=AE=E4=B8=AD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E7=BB=98=E5=9B=BE=E8=AE=BE=E7=BD=AE=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0fluxapi=E6=A8=A1=E5=9E=8B=E5=88=97=E8=A1=A8=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 .../BasicOptions/ImageOptions.tsx             | 73 +++++++++++++++++++
 .../BasicOptions/SimpleOptions/index.tsx      |  9 ++-
 .../BasicOptions/TrialOptions/index.tsx       | 12 +--
 .../LaitoolOptions/BasicOptions/index.tsx     | 17 +++--
 .../DubSetting/DubSettingTTsOptions/index.tsx | 27 +++++--
 .../LaitoolOptions/DubSetting/index.tsx       | 35 ++-------
 src/services/enum/optionEnum.ts               |  8 ++
 8 files changed, 138 insertions(+), 44 deletions(-)
 create mode 100644 src/pages/Options/LaitoolOptions/BasicOptions/ImageOptions.tsx

diff --git a/package.json b/package.json
index c3c41ee..e3f033d 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@ant-design/icons": "^4.8.1",
     "@ant-design/pro-components": "^2.7.19",
     "@umijs/route-utils": "^2.2.2",
+    "ahooks": "^3.8.4",
     "antd": "^5.21.3",
     "antd-style": "^3.6.2",
     "axios": "^1.7.7",
diff --git a/src/pages/Options/LaitoolOptions/BasicOptions/ImageOptions.tsx b/src/pages/Options/LaitoolOptions/BasicOptions/ImageOptions.tsx
new file mode 100644
index 0000000..1030877
--- /dev/null
+++ b/src/pages/Options/LaitoolOptions/BasicOptions/ImageOptions.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import { Form, Card, Row, Col, InputNumber, Button, Input, message } from 'antd';
+import TextArea from 'antd/es/input/TextArea';
+import { useSoftStore } from '@/store/software';
+import { GetOptions, getOptionsStringValue, SaveOptions } from '@/services/services/options/optionsTool';
+import { OptionKeyName } from '@/services/enum/optionEnum';
+
+interface ImageOptionsProps {
+  // Add your props here
+  visible?: boolean;
+}
+
+const ImageOptions: React.FC<ImageOptionsProps> = ({ visible }) => {
+  const [form] = Form.useForm();
+  const { setTopSpinning, setTopSpinTip } = useSoftStore();
+  const [messageApi, messageHolder] = message.useMessage();
+
+  useEffect(() => {
+    if (!visible) return;
+    setTopSpinning(true);
+    setTopSpinTip("加载信息中");
+    GetOptions("image").then((res) => {
+      form.setFieldsValue({
+        [OptionKeyName.LaitoolFluxApiModelList]: getOptionsStringValue(res, OptionKeyName.LaitoolFluxApiModelList, "{}"),
+      });
+    }).catch((err: any) => {
+      messageApi.error(err.message);
+    }).finally(() => {
+      setTopSpinning(false);
+    });
+
+  }, [visible]);
+
+  const onFinish = async (values: any) => {
+    setTopSpinning(true);
+    setTopSpinTip("正在保存试用设置");
+    try {
+      await SaveOptions(values);
+      messageApi.success('保存软件试用设置成功');
+    } catch (error: any) {
+      messageApi.error(error.message);
+    } finally {
+      setTopSpinning(false);
+    }
+  }
+
+  return (
+    <Card title="绘图设置" bordered={false}>
+
+      <Form form={form} layout="vertical" onFinish={onFinish}>
+        <Row gutter={24} >
+          <Col span={12} >
+            <Form.Item
+              label="FLUX API模型列表"
+              name={OptionKeyName.LaitoolFluxApiModelList}
+              rules={[{ required: true, message: '请输入FLUX API模型列表' }]}
+            >
+              <TextArea placeholder="请输入FLUX API模型列表，JSON格式" autoSize={{ minRows: 6, maxRows: 6 }} />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Form.Item>
+          <Button color="primary" variant="filled" htmlType='submit'>保存绘图设置</Button>
+        </Form.Item>
+      </Form>
+
+      {messageHolder}
+    </Card>
+  );
+};
+
+export default ImageOptions;
+
diff --git a/src/pages/Options/LaitoolOptions/BasicOptions/SimpleOptions/index.tsx b/src/pages/Options/LaitoolOptions/BasicOptions/SimpleOptions/index.tsx
index 1333992..004614b 100644
--- a/src/pages/Options/LaitoolOptions/BasicOptions/SimpleOptions/index.tsx
+++ b/src/pages/Options/LaitoolOptions/BasicOptions/SimpleOptions/index.tsx
@@ -6,7 +6,11 @@ import TextArea from 'antd/es/input/TextArea';
 import { message } from 'antd/lib';
 import React, { useEffect } from 'react';
 
-const SimpleOptions: React.FC = () => {
+interface SimpleOptionsProps {
+  visible?: boolean; // 添加 visible 属性
+}
+
+const SimpleOptions: React.FC<SimpleOptionsProps> = ({ visible }) => {
 
   const { setTopSpinning, setTopSpinTip } = useSoftStore();
   const [messageApi, messageHolder] = message.useMessage();
@@ -15,6 +19,7 @@ const SimpleOptions: React.FC = () => {
 
 
   useEffect(() => {
+    if (!visible) return;
     setTopSpinning(true);
     setTopSpinTip("加载信息中");
     // 这边加载所有的配音数据
@@ -33,7 +38,7 @@ const SimpleOptions: React.FC = () => {
       setTopSpinning(false);
     });
 
-  }, []);
+  }, [visible]);
 
 
   async function onFinish(values: any): Promise<void> {
diff --git a/src/pages/Options/LaitoolOptions/BasicOptions/TrialOptions/index.tsx b/src/pages/Options/LaitoolOptions/BasicOptions/TrialOptions/index.tsx
index 533b921..c6e2e26 100644
--- a/src/pages/Options/LaitoolOptions/BasicOptions/TrialOptions/index.tsx
+++ b/src/pages/Options/LaitoolOptions/BasicOptions/TrialOptions/index.tsx
@@ -3,17 +3,19 @@ import { GetOptions, getOptionsStringValue, SaveOptions } from '@/services/servi
 import { Button, Col, Form, Input, InputNumber, message, Row, Space } from 'antd';
 import { useSoftStore } from '@/store/software';
 
-type TrailOptionsProps = {
-  LaiToolTrialDays: number;
+
+interface TrailOptionsProps {
+  visible?: boolean; // 添加 visible 属性
 }
 
-const TrailOptions: React.FC = () => {
+const TrailOptions: React.FC<TrailOptionsProps> = ({ visible }) => {
 
   const [form] = Form.useForm();
   const { setTopSpinning, setTopSpinTip } = useSoftStore();
   const [messageApi, messageHolder] = message.useMessage();
 
   useEffect(() => {
+    if (!visible) return;
     setTopSpinning(true);
     setTopSpinTip("加载信息中");
     GetOptions("trial").then((res) => {
@@ -26,14 +28,14 @@ const TrailOptions: React.FC = () => {
       setTopSpinning(false);
     });
 
-  }, []);
+  }, [visible]);
 
   const formStyle: React.CSSProperties = {
     maxWidth: 'none',
     padding: 24,
   };
 
-  const onFinish = async (values: TrailOptionsProps) => {
+  const onFinish = async (values: any) => {
     setTopSpinning(true);
     setTopSpinTip("正在保存试用设置");
     try {
diff --git a/src/pages/Options/LaitoolOptions/BasicOptions/index.tsx b/src/pages/Options/LaitoolOptions/BasicOptions/index.tsx
index 84d41f5..12fa4d0 100644
--- a/src/pages/Options/LaitoolOptions/BasicOptions/index.tsx
+++ b/src/pages/Options/LaitoolOptions/BasicOptions/index.tsx
@@ -1,23 +1,30 @@
 import { Card, Collapse, CollapseProps, Form } from 'antd';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import SimpleOptions from './SimpleOptions';
 import TrailOptions from './TrialOptions';
+import ImageOptions from './ImageOptions';
 
 
 const DubSetting: React.FC = () => {
+  const [activeKeys, setActiveKeys] = useState<string[]>([]);
 
   const onChange = (key: string | string[]) => {
+    setActiveKeys(Array.isArray(key) ? key : [key]);
   };
 
   const items: CollapseProps['items'] = [
     {
       key: 'simpleOptions',
-      label: '通用配置',
-      children: <SimpleOptions></SimpleOptions>,
+      label: <strong>通用配置</strong>,
+      children: <SimpleOptions visible={activeKeys.includes('simpleOptions')} />,
     }, {
       key: 'trailOptions',
-      label: '试用设置',
-      children: <TrailOptions />,
+      label: <strong>试用设置</strong>,
+      children: <TrailOptions visible={activeKeys.includes('trailOptions')} />,
+    }, {
+      key: 'imageOptions',
+      label: <strong>绘图设置</strong>,
+      children: <ImageOptions visible={activeKeys.includes('imageOptions')} />,
     }
   ];
 
diff --git a/src/pages/Options/LaitoolOptions/DubSetting/DubSettingTTsOptions/index.tsx b/src/pages/Options/LaitoolOptions/DubSetting/DubSettingTTsOptions/index.tsx
index b523831..7ae702f 100644
--- a/src/pages/Options/LaitoolOptions/DubSetting/DubSettingTTsOptions/index.tsx
+++ b/src/pages/Options/LaitoolOptions/DubSetting/DubSettingTTsOptions/index.tsx
@@ -1,15 +1,19 @@
-import { getOptionsStringValue, SaveOptions } from '@/services/services/options/optionsTool';
+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';
 
-const DubSettingTTsOptions: React.FC = () => {
+interface DubSettingTTsOptionsProps {
+  visible?: boolean; // 添加 visible 属性
+}
+
+const DubSettingTTsOptions: React.FC<DubSettingTTsOptionsProps> = ({ visible }) => {
 
   const [form] = Form.useForm();
   const { ttsOptions, setTTsOptions } = useOptionsStore();
-  const { topSpinning, setTopSpinning, topSpinTip, setTopSpinTip } = useSoftStore();
+  const { setTopSpinning, setTopSpinTip } = useSoftStore();
   const [messageApi, messageHolder] = message.useMessage();
 
   async function onFinish(values: any): Promise<void> {
@@ -30,9 +34,22 @@ const DubSettingTTsOptions: React.FC = () => {
       setTopSpinning(false);
     }
   }
+
   useEffect(() => {
-    form.setFieldsValue({ edgeTTsRoles: getOptionsStringValue(ttsOptions, 'EdgeTTsRoles', "{}") })
-  }, [ttsOptions])
+    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 (
diff --git a/src/pages/Options/LaitoolOptions/DubSetting/index.tsx b/src/pages/Options/LaitoolOptions/DubSetting/index.tsx
index 2189d7b..77fb102 100644
--- a/src/pages/Options/LaitoolOptions/DubSetting/index.tsx
+++ b/src/pages/Options/LaitoolOptions/DubSetting/index.tsx
@@ -1,43 +1,24 @@
-import { Card, Collapse, CollapseProps, Form } from 'antd';
-import React, { useEffect } from 'react';
+import { Collapse, CollapseProps, Form } from 'antd';
+import React, { useState } from 'react';
 import DubSettingTTsOptions from './DubSettingTTsOptions';
-import { useOptionsStore } from '@/store/options';
-import { useSoftStore } from '@/store/software';
-import { GetOptions } from '@/services/services/options/optionsTool';
-
 
 const DubSetting: React.FC = () => {
-  const { ttsOptions, setTTsOptions } = useOptionsStore();
-  const { setTopSpinning, setTopSpinTip } = useSoftStore();
+  const [activeKeys, setActiveKeys] = useState<string[]>([]);
 
   const onChange = (key: string | string[]) => {
+    setActiveKeys(Array.isArray(key) ? key : [key]);
   };
 
-  useEffect(() => {
-    setTopSpinning(true);
-    setTopSpinTip("加载信息中");
-    // 这边加载所有的配音数据
-    GetOptions('tts').then((res) => {
-      setTTsOptions(res);
-    }
-    ).catch((err) => {
-      console.error(err);
-    }).finally(() => {
-      setTopSpinning(false);
-    });
-
-  }, []);
-
   const items: CollapseProps['items'] = [
     {
-      key: '1',
-      label: '配置',
+      key: 'ttsSimpeSetting',
+      label: <strong>配置</strong>,
       children: <p></p>,
     },
     {
-      key: '2',
+      key: 'edgeTTS',
       label: <strong>Edge TTS</strong>,
-      children: <DubSettingTTsOptions />,
+      children: <DubSettingTTsOptions visible={activeKeys.includes('edgeTTS')} />,
     },
   ];
 
diff --git a/src/services/enum/optionEnum.ts b/src/services/enum/optionEnum.ts
index 2f7c722..64b3061 100644
--- a/src/services/enum/optionEnum.ts
+++ b/src/services/enum/optionEnum.ts
@@ -2,4 +2,12 @@ export enum OptionType {
   String = 1,
   JSON = 2,
   Number = 3,
+}
+
+
+
+export enum OptionKeyName {
+
+  /** laitool Flux API 模型类型 */
+  LaitoolFluxApiModelList = "LaitoolFluxApiModelList",
 }
\ No newline at end of file