Laitool 设置中新增绘图设置，添加fluxapi模型列表设置

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",

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;
+

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> {

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 {

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: '通用配置',
+      label: <strong>通用配置</strong>,
-      children: <SimpleOptions></SimpleOptions>,
+      children: <SimpleOptions visible={activeKeys.includes('simpleOptions')} />,
     }, {
       key: 'trailOptions',
-      label: '试用设置',
+      label: <strong>试用设置</strong>,
-      children: <TrailOptions />,
+      children: <TrailOptions visible={activeKeys.includes('trailOptions')} />,
+    }, {
+      key: 'imageOptions',
+      label: <strong>绘图设置</strong>,
+      children: <ImageOptions visible={activeKeys.includes('imageOptions')} />,
     }
   ];
 

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', "{}") })
+    if (!visible) return;
-  }, [ttsOptions])
+    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 (

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

@@ -1,43 +1,24 @@
-import { Card, Collapse, CollapseProps, Form } from 'antd';
+import { Collapse, CollapseProps, Form } from 'antd';
-import React, { useEffect } from 'react';
+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 [activeKeys, setActiveKeys] = useState<string[]>([]);
-  const { setTopSpinning, setTopSpinTip } = useSoftStore();
 
   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',
+      key: 'ttsSimpeSetting',
-      label: '配置',
+      label: <strong>配置</strong>,
       children: <p></p>,
     },
     {
-      key: '2',
+      key: 'edgeTTS',
       label: <strong>Edge TTS</strong>,
-      children: <DubSettingTTsOptions />,
+      children: <DubSettingTTsOptions visible={activeKeys.includes('edgeTTS')} />,
     },
   ];
 

src/services/enum/optionEnum.ts

@@ -3,3 +3,11 @@ export enum OptionType {
   JSON = 2,
   Number = 3,
 }
+
+
+
+export enum OptionKeyName {
+
+  /** laitool Flux API 模型类型 */
+  LaitoolFluxApiModelList = "LaitoolFluxApiModelList",
+}