添加软件基础配置
This commit is contained in:
@@ -0,0 +1,101 @@
|
||||
import { GetOptions, getOptionsStringValue, SaveOptions } from '@/services/services/options/optionsTool';
|
||||
import { useOptionsStore } from '@/store/options';
|
||||
import { useSoftStore } from '@/store/software';
|
||||
import { Button, Card, Form, Input } from 'antd';
|
||||
import TextArea from 'antd/es/input/TextArea';
|
||||
import { message } from 'antd/lib';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
const BasicOptions: React.FC = () => {
|
||||
|
||||
const { setTopSpinning, setTopSpinTip } = useSoftStore();
|
||||
const [messageApi, messageHolder] = message.useMessage();
|
||||
const { laitoolOptions, setLaitoolOptions } = useOptionsStore();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("加载信息中");
|
||||
// 这边加载所有的配音数据
|
||||
GetOptions("software").then((res) => {
|
||||
setLaitoolOptions(res);
|
||||
form.setFieldsValue({
|
||||
LaitoolHomePage: getOptionsStringValue(res, 'LaitoolHomePage', ""),
|
||||
LaitoolUpdateContent: getOptionsStringValue(res, 'LaitoolUpdateContent', ""),
|
||||
LaitoolNotice: getOptionsStringValue(res, 'LaitoolNotice', ""),
|
||||
LaitoolVersion: getOptionsStringValue(res, 'LaitoolVersion', ""),
|
||||
});
|
||||
}
|
||||
).catch((err: any) => {
|
||||
messageApi.error(err.message);
|
||||
}).finally(() => {
|
||||
console.log('finally');
|
||||
setTopSpinning(false);
|
||||
});
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
async function onFinish(values: any): Promise<void> {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("正在保存通用设置");
|
||||
try {
|
||||
// 这边保存所有的配音数据
|
||||
await SaveOptions(values);
|
||||
// 判断Option中的key是不是在属性上
|
||||
for (let key in values) {
|
||||
setLaitoolOptions(laitoolOptions.map((item: OptionModel.Option) => {
|
||||
if (item.key === key) {
|
||||
item.value = values[key]
|
||||
}
|
||||
return item
|
||||
}));
|
||||
}
|
||||
messageApi.success('设置成功');
|
||||
} catch (error: any) {
|
||||
messageApi.error(error.message);
|
||||
} finally {
|
||||
setTopSpinning(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card title="通用设置" bordered={false}>
|
||||
<Form name="trigger" form={form} layout="vertical" autoComplete="off" onFinish={onFinish}>
|
||||
<Form.Item
|
||||
label="软件版本号"
|
||||
name="LaitoolVersion"
|
||||
>
|
||||
<Input placeholder='请输入版本号' />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="首页内容"
|
||||
name="LaitoolHomePage"
|
||||
>
|
||||
<TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址,网址用iframe,可以内嵌所有的网页" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="更新内容"
|
||||
name="LaitoolUpdateContent"
|
||||
>
|
||||
<TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址,网址用iframe" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="通知"
|
||||
name="LaitoolNotice"
|
||||
>
|
||||
<TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址,网址用iframe" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button color="primary" variant="filled" htmlType="submit">设置通用设置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
{messageHolder}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicOptions;
|
||||
@@ -0,0 +1,64 @@
|
||||
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> {
|
||||
console.log('Received values of form: ', values);
|
||||
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(() => {
|
||||
console.log("DubSettingTTsOptions", ttsOptions)
|
||||
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;
|
||||
@@ -0,0 +1,51 @@
|
||||
import { Card, Collapse, CollapseProps, Form } from 'antd';
|
||||
import React, { useEffect } 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 onChange = (key: string | string[]) => {
|
||||
console.log(key);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("加载信息中");
|
||||
// 这边加载所有的配音数据
|
||||
GetOptions('tts').then((res) => {
|
||||
setTTsOptions(res);
|
||||
}
|
||||
).catch((err) => {
|
||||
console.log(err);
|
||||
}).finally(() => {
|
||||
console.log('finally');
|
||||
setTopSpinning(false);
|
||||
});
|
||||
|
||||
}, []);
|
||||
|
||||
const items: CollapseProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: '配置',
|
||||
children: <p></p>,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: <strong>Edge TTS</strong>,
|
||||
children: <DubSettingTTsOptions />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Collapse items={items} bordered={false} ghost onChange={onChange} />
|
||||
);
|
||||
};
|
||||
|
||||
export default DubSetting;
|
||||
@@ -0,0 +1,38 @@
|
||||
import TemplateContainer from '@/pages/TemplateContainer';
|
||||
import { useModel } from '@umijs/max';
|
||||
import { Tabs, TabsProps, theme } from 'antd';
|
||||
import React from 'react';
|
||||
import DubSetting from '../DubSetting';
|
||||
import BasicOptions from '../BasicOptions';
|
||||
|
||||
|
||||
const LaitoolOptions: React.FC = () => {
|
||||
|
||||
const { initialState } = useModel('@@initialState');
|
||||
const [tabKey, setTabKey] = React.useState<string | undefined>(undefined);
|
||||
|
||||
const items = [{
|
||||
label: `软件设置`,
|
||||
key: "software",
|
||||
children: <BasicOptions />,
|
||||
style: undefined,
|
||||
}, {
|
||||
label: `配音设置`,
|
||||
key: "dub",
|
||||
children: <DubSetting />,
|
||||
style: undefined,
|
||||
destroyInactiveTabPane : true
|
||||
}]
|
||||
|
||||
const onChange = (key: string) => {
|
||||
setTabKey(key);
|
||||
};
|
||||
|
||||
return (
|
||||
<TemplateContainer title={false} navTheme={initialState?.settings?.navTheme ?? "realDark"}>
|
||||
<Tabs defaultActiveKey="1" destroyInactiveTabPane={true} items={items} onChange={onChange} />
|
||||
</TemplateContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default LaitoolOptions;
|
||||
@@ -115,7 +115,7 @@ const PromptManagement: React.FC = () => {
|
||||
width: 220,
|
||||
render: (dom, ent) => <>
|
||||
<Button size='middle' style={{ marginRight: "5px" }} type="primary" onClick={() => {
|
||||
debugger
|
||||
|
||||
setEditData(ent)
|
||||
setType("edit")
|
||||
setOpen(true)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import { Card, Spin } from 'antd';
|
||||
import { useSoftStore } from '@/store/software';
|
||||
@@ -7,9 +7,10 @@ interface TemplateContainerProps {
|
||||
children: React.ReactNode;
|
||||
navTheme: string;
|
||||
style?: React.CSSProperties;
|
||||
title?: React.ReactNode | false;
|
||||
}
|
||||
|
||||
const TemplateContainer: React.FC<TemplateContainerProps> = ({ children, navTheme, style }) => {
|
||||
const TemplateContainer: React.FC<TemplateContainerProps> = ({ children, navTheme, style, title }) => {
|
||||
|
||||
const { topSpinning, topSpinTip } = useSoftStore();
|
||||
|
||||
@@ -20,7 +21,7 @@ const TemplateContainer: React.FC<TemplateContainerProps> = ({ children, navThem
|
||||
|
||||
return (
|
||||
<Spin spinning={topSpinning} tip={topSpinTip}>
|
||||
<PageContainer>
|
||||
<PageContainer title={title}>
|
||||
<Card
|
||||
style={{
|
||||
...style,
|
||||
|
||||
@@ -27,8 +27,6 @@ const UserManagement: React.FC = () => {
|
||||
totalBoundaryShowSizeChanger: true,
|
||||
},
|
||||
});
|
||||
|
||||
const [modal, contextHolder] = Modal.useModal();
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [userId, setUserId] = useState<number>(0);
|
||||
const [openModal, setOpenModal] = useState<boolean>(false);
|
||||
|
||||
Reference in New Issue
Block a user