xinyin025/new-api
1
0
Fork 0
mirror of https://github.com/linux-do/new-api.git synced 2025-09-19 17:06:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: 运营设置-绘图设置

Browse Source
This commit is contained in:
QuentinHsu 2024-05-09 17:20:51 +08:00
parent 83dd62982e
commit 9886cdd527
No known key found for this signature in database
GPG Key ID: 20D465A435D740D0
2 changed files with 185 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/components/OperationSetting.js
View File

@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import { Divider, Form, Grid, Header } from 'semantic-ui-react'; import { Divider, Form, Grid, Header } from 'semantic-ui-react';
import { Card } from '@douyinfe/semi-ui'; import { Card } from '@douyinfe/semi-ui';
import GeneralSettings from '../pages/Setting/Operation/GeneralSettings.js'; import GeneralSettings from '../pages/Setting/Operation/GeneralSettings.js';
import DrawingSettings from '../pages/Setting/Operation/DrawingSettings.js';
import { import {
API, API,
showError, showError,
@ -235,50 +236,17 @@ const OperationSetting = () => {
}; };
return ( return (
<> <>
{/* 通用设置 */}
<Card> <Card>
{/* 通用设置 */}
<GeneralSettings options={inputs} /> <GeneralSettings options={inputs} />
</Card> </Card>
{/* 绘图设置 */}
<Card style={{ marginTop: '10px' }}>
<DrawingSettings options={inputs} />
</Card>
<Grid columns={1}> <Grid columns={1}>
<Grid.Column> <Grid.Column>
<Form loading={loading} inverted={isDark}> <Form loading={loading} inverted={isDark}>
<Divider />
<Header as='h3' inverted={isDark}>
绘图设置
</Header>
<Form.Group inline>
<Form.Checkbox
checked={inputs.DrawingEnabled === 'true'}
label='启用绘图功能'
name='DrawingEnabled'
onChange={handleInputChange}
/>
<Form.Checkbox
checked={inputs.MjNotifyEnabled === 'true'}
label='允许回调（会泄露服务器ip地址）'
name='MjNotifyEnabled'
onChange={handleInputChange}
/>
<Form.Checkbox
checked={inputs.MjAccountFilterEnabled === 'true'}
label='允许AccountFilter参数'
name='MjAccountFilterEnabled'
onChange={handleInputChange}
/>
<Form.Checkbox
checked={inputs.MjForwardUrlEnabled === 'true'}
label='开启之后将上游地址替换为服务器地址'
name='MjForwardUrlEnabled'
onChange={handleInputChange}
/>
<Form.Checkbox
checked={inputs.MjModeClearEnabled === 'true'}
label='开启之后会清除用户提示词中的--fast、--relax以及--turbo参数'
name='MjModeClearEnabled'
onChange={handleInputChange}
/>
</Form.Group>
<Divider />
<Header as='h3' inverted={isDark}> <Header as='h3' inverted={isDark}>
屏蔽词过滤设置 屏蔽词过滤设置
</Header> </Header>

179
web/src/pages/Setting/Operation/DrawingSettings.js Normal file
View File

@ -0,0 +1,179 @@
import React, { useEffect, useState, useRef } from 'react';
import { Button, Col, Form, Row, Spin, Tag } from '@douyinfe/semi-ui';
import {
compareObjects,
API,
showError,
showSuccess,
showWarning,
} from '../../../helpers';
export default function GeneralSettings(props) {
const [loading, setLoading] = useState(false);
const [inputs, setInputs] = useState({
DrawingEnabled: false,
MjNotifyEnabled: false,
MjAccountFilterEnabled: false,
MjForwardUrlEnabled: false,
MjModeClearEnabled: false,
});
const refForm = useRef();
const [inputsRow, setInputsRow] = useState(inputs);
function onSubmit() {
const updateArray = compareObjects(inputs, inputsRow);
if (!updateArray.length) return showWarning('你似乎并没有修改什么');
const requestQueue = updateArray.map((item) => {
let value = '';
if (typeof inputs[item.key] === 'boolean') {
value = String(inputs[item.key]);
} else {
value = inputs[item.key];
}
return API.put('/api/option/', {
key: item.key,
value,
});
});
setLoading(true);
Promise.all(requestQueue)
.then((res) => {
if (requestQueue.length === 1) {
if (res.includes(undefined)) return;
} else if (requestQueue.length > 1) {
if (res.includes(undefined)) return showError('部分更新失败');
}
showSuccess('更新成功');
})
.catch(() => {
showError('更新失败');
})
.finally(() => {
setLoading(false);
setInputsRow(structuredClone(inputs));
});
}
useEffect(() => {
const currentInputs = {};
for (let key in props.options) {
if (Object.keys(inputs).includes(key)) {
currentInputs[key] = props.options[key];
}
}
setInputs(currentInputs);
setInputsRow(structuredClone(currentInputs));
refForm.current.setValues(currentInputs);
}, [props.options]);
return (
<>
<Spin spinning={loading}>
<Form
values={inputs}
getFormApi={(formAPI) => (refForm.current = formAPI)}
style={{ marginBottom: 15 }}
>
<Form.Section text={'绘图设置'}>
<Row gutter={16}>
<Col span={8}>
<Form.Switch
field={'DrawingEnabled'}
label={'启用绘图功能'}
size='large'
checkedText='｜'
uncheckedText='〇'
defaultChecked={false}
checked={false}
onChange={(value) => {
setInputs({
...inputs,
DrawingEnabled: value,
});
}}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'MjNotifyEnabled'}
label={'允许回调（会泄露服务器 IP 地址）'}
size='large'
checkedText='｜'
uncheckedText='〇'
defaultChecked={false}
checked={false}
onChange={(value) =>
setInputs({
...inputs,
MjNotifyEnabled: value,
})
}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'MjAccountFilterEnabled'}
label={'允许 AccountFilter 参数'}
size='large'
checkedText='｜'
uncheckedText='〇'
defaultChecked={false}
checked={false}
onChange={(value) =>
setInputs({
...inputs,
MjAccountFilterEnabled: value,
})
}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'MjForwardUrlEnabled'}
label={'开启之后将上游地址替换为服务器地址'}
size='large'
checkedText='｜'
uncheckedText='〇'
defaultChecked={false}
checked={false}
onChange={(value) =>
setInputs({
...inputs,
MjForwardUrlEnabled: value,
})
}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'MjModeClearEnabled'}
label={
<>
开启之后会清除用户提示词中的 <Tag>--fast</Tag> 、
<Tag>--relax</Tag> 以及 <Tag>--turbo</Tag> 参数
</>
}
size='large'
checkedText='｜'
uncheckedText='〇'
defaultChecked={false}
checked={false}
onChange={(value) =>
setInputs({
...inputs,
MjModeClearEnabled: value,
})
}
/>
</Col>
</Row>
<Row>
<Button size='large' onClick={onSubmit}>
保存绘图设置
</Button>
</Row>
</Form.Section>
</Form>
</Spin>
</>
);
}