Skip to content

phsl / new-api

Go to a project
Commit 3ff7e73e by Calcium-Ion Committed by GitHub
Options

Merge pull request #248 from QuentinHsu/refactor-settings-operation 

Refactor settings operation
parents fef9f188 09804935
Showing with 1322 additions and 1 deletions
web/package.json
......@@ -5,11 +5,12 @@
"type": "module",
"dependencies": {
"@douyinfe/semi-icons": "^2.46.1",
"@douyinfe/semi-ui": "^2.46.1",
"@douyinfe/semi-ui": "^2.55.3",
"@visactor/react-vchart": "~1.8.8",
"@visactor/vchart": "~1.8.8",
"@visactor/vchart-semi-theme": "~1.8.8",
"axios": "^0.27.2",
"dayjs": "^1.11.11",
"history": "^5.3.0",
"marked": "^4.1.1",
"react": "^18.2.0",
......
web/src/helpers/utils.js
......@@ -220,3 +220,28 @@ export function shouldShowPrompt(id) {
export function setPromptShown(id) {
localStorage.setItem(`prompt-${id}`, 'true');
}
/**
* 比较两个对象的属性，找出有变化的属性，并返回包含变化属性信息的数组
* @param {Object} oldObject - 旧对象
* @param {Object} newObject - 新对象
* @return {Array} 包含变化属性信息的数组，每个元素是一个对象，包含 key, oldValue 和 newValue
*/
export function compareObjects(oldObject, newObject) {
const changedProperties = [];
// 比较两个对象的属性
for (const key in oldObject) {
if (oldObject.hasOwnProperty(key) && newObject.hasOwnProperty(key)) {
if (oldObject[key] !== newObject[key]) {
changedProperties.push({
key: key,
oldValue: oldObject[key],
newValue: newObject[key],
});
}
}
}
return changedProperties;
}
web/src/pages/Setting/Operation/SettingsCreditLimit.js 0 → 100644
import React, { useEffect, useState, useRef } from 'react';
import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
import {
compareObjects,
API,
showError,
showSuccess,
showWarning,
} from '../../../helpers';
export default function SettingsCreditLimit(props) {
const [loading, setLoading] = useState(false);
const [inputs, setInputs] = useState({
QuotaForNewUser: '',
PreConsumedQuota: '',
QuotaForInviter: '',
QuotaForInvitee: '',
});
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('保存成功');
props.refresh();
})
.catch(() => {
showError('保存失败，请重试');
})
.finally(() => {
setLoading(false);
});
}
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={6}>
<Form.InputNumber
label={'新用户初始额度'}
field={'QuotaForNewUser'}
step={1}
min={0}
suffix={'Token'}
placeholder={''}
onChange={(value) =>
setInputs({
...inputs,
QuotaForNewUser: String(value),
})
}
/>
</Col>
<Col span={6}>
<Form.InputNumber
label={'请求预扣费额度'}
field={'PreConsumedQuota'}
step={1}
min={0}
suffix={'Token'}
extraText={'请求结束后多退少补'}
placeholder={''}
onChange={(value) =>
setInputs({
...inputs,
PreConsumedQuota: String(value),
})
}
/>
</Col>
<Col span={6}>
<Form.InputNumber
label={'邀请新用户奖励额度'}
field={'QuotaForInviter'}
step={1}
min={0}
suffix={'Token'}
extraText={''}
placeholder={'例如：2000'}
onChange={(value) =>
setInputs({
...inputs,
QuotaForInviter: String(value),
})
}
/>
</Col>
<Col span={6}>
<Form.InputNumber
label={'新用户使用邀请码奖励额度'}
field={'QuotaForInvitee'}
step={1}
min={0}
suffix={'Token'}
extraText={''}
placeholder={'例如：1000'}
onChange={(value) =>
setInputs({
...inputs,
QuotaForInvitee: String(value),
})
}
/>
</Col>
</Row>
<Row>
<Button size='large' onClick={onSubmit}>
保存额度设置
</Button>
</Row>
</Form.Section>
</Form>
</Spin>
</>
);
}
web/src/pages/Setting/Operation/SettingsDataDashboard.js 0 → 100644
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 DataDashboard(props) {
const optionsDataExportDefaultTime = [
{ key: 'hour', label: '小时', value: 'hour' },
{ key: 'day', label: '天', value: 'day' },
{ key: 'week', label: '周', value: 'week' },
];
const [loading, setLoading] = useState(false);
const [inputs, setInputs] = useState({
DataExportEnabled: false,
DataExportInterval: '',
DataExportDefaultTime: '',
});
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('保存成功');
props.refresh();
})
.catch(() => {
showError('保存失败，请重试');
})
.finally(() => {
setLoading(false);
});
}
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);
localStorage.setItem(
'data_export_default_time',
String(inputs.DataExportDefaultTime),
);
}, [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={'DataExportEnabled'}
label={'启用数据看板（实验性）'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) => {
setInputs({
...inputs,
DataExportEnabled: value,
});
}}
/>
</Col>
</Row>
<Row>
<Col span={8}>
<Form.InputNumber
label={'数据看板更新间隔 '}
step={1}
min={1}
suffix={'分钟'}
extraText={'设置过短会影响数据库性能'}
placeholder={'数据看板更新间隔'}
field={'DataExportInterval'}
onChange={(value) =>
setInputs({
...inputs,
DataExportInterval: String(value),
})
}
/>
</Col>
<Col span={8}>
<Form.Select
label='数据看板默认时间粒度'
optionList={optionsDataExportDefaultTime}
field={'DataExportDefaultTime'}
extraText={'仅修改展示粒度，统计精确到小时'}
placeholder={'数据看板默认时间粒度'}
style={{ width: 180 }}
onChange={(value) =>
setInputs({
...inputs,
DataExportDefaultTime: String(value),
})
}
/>
</Col>
</Row>
<Row>
<Button size='large' onClick={onSubmit}>
保存数据看板设置
</Button>
</Row>
</Form.Section>
</Form>
</Spin>
</>
);
}
web/src/pages/Setting/Operation/SettingsDrawing.js 0 → 100644
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 SettingsDrawing(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('保存成功');
props.refresh();
})
.catch(() => {
showError('保存失败，请重试');
})
.finally(() => {
setLoading(false);
});
}
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);
localStorage.setItem('mj_notify_enabled', String(inputs.MjNotifyEnabled));
}, [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='〇'
onChange={(value) => {
setInputs({
...inputs,
DrawingEnabled: value,
});
}}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'MjNotifyEnabled'}
label={'允许回调（会泄露服务器 IP 地址）'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) =>
setInputs({
...inputs,
MjNotifyEnabled: value,
})
}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'MjAccountFilterEnabled'}
label={'允许 AccountFilter 参数'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) =>
setInputs({
...inputs,
MjAccountFilterEnabled: value,
})
}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'MjForwardUrlEnabled'}
label={'开启之后将上游地址替换为服务器地址'}
size='large'
checkedText='｜'
uncheckedText='〇'
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='〇'
onChange={(value) =>
setInputs({
...inputs,
MjModeClearEnabled: value,
})
}
/>
</Col>
</Row>
<Row>
<Button size='large' onClick={onSubmit}>
保存绘图设置
</Button>
</Row>
</Form.Section>
</Form>
</Spin>
</>
);
}
web/src/pages/Setting/Operation/SettingsGeneral.js 0 → 100644
import React, { useEffect, useState, useRef } from 'react';
import { Button, Col, Form, Row, Spin } 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({
TopUpLink: '',
ChatLink: '',
ChatLink2: '',
QuotaPerUnit: '',
RetryTimes: '',
DisplayInCurrencyEnabled: false,
DisplayTokenStatEnabled: false,
DefaultCollapseSidebar: false,
});
const refForm = useRef();
const [inputsRow, setInputsRow] = useState(inputs);
function onChange(value, e) {
const name = e.target.id;
setInputs((inputs) => ({ ...inputs, [name]: value }));
}
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('保存成功');
props.refresh();
})
.catch(() => {
showError('保存失败，请重试');
})
.finally(() => {
setLoading(false);
});
}
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.Input
field={'TopUpLink'}
label={'充值链接'}
initValue={''}
placeholder={'例如发卡网站的购买链接'}
onChange={onChange}
showClear
/>
</Col>
<Col span={8}>
<Form.Input
field={'ChatLink'}
label={'默认聊天页面链接'}
initValue={''}
placeholder='例如 ChatGPT Next Web 的部署地址'
onChange={onChange}
showClear
/>
</Col>
<Col span={8}>
<Form.Input
field={'ChatLink2'}
label={'聊天页面 2 链接'}
initValue={''}
placeholder='例如 ChatGPT Next Web 的部署地址'
onChange={onChange}
showClear
/>
</Col>
<Col span={8}>
<Form.Input
field={'QuotaPerUnit'}
label={'单位美元额度'}
initValue={''}
placeholder='一单位货币能兑换的额度'
onChange={onChange}
showClear
/>
</Col>
<Col span={8}>
<Form.Input
field={'RetryTimes'}
label={'失败重试次数'}
initValue={''}
placeholder='失败重试次数'
onChange={onChange}
showClear
/>
</Col>
</Row>
<Row gutter={16}>
<Col span={8}>
<Form.Switch
field={'DisplayInCurrencyEnabled'}
label={'以货币形式显示额度'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) => {
setInputs({
...inputs,
DisplayInCurrencyEnabled: value,
});
}}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'DisplayTokenStatEnabled'}
label={'Billing 相关 API 显示令牌额度而非用户额度'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) =>
setInputs({
...inputs,
DisplayTokenStatEnabled: value,
})
}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'DefaultCollapseSidebar'}
label={'默认折叠侧边栏'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) =>
setInputs({
...inputs,
DefaultCollapseSidebar: value,
})
}
/>
</Col>
</Row>
<Row>
<Button size='large' onClick={onSubmit}>
保存通用设置
</Button>
</Row>
</Form.Section>
</Form>
</Spin>
</>
);
}
web/src/pages/Setting/Operation/SettingsLog.js 0 → 100644
import React, { useEffect, useState, useRef } from 'react';
import { Button, Col, Form, Row, Spin, DatePicker } from '@douyinfe/semi-ui';
import dayjs from 'dayjs';
import {
compareObjects,
API,
showError,
showSuccess,
showWarning,
} from '../../../helpers';
export default function SettingsLog(props) {
const [loading, setLoading] = useState(false);
const [loadingCleanHistoryLog, setLoadingCleanHistoryLog] = useState(false);
const [inputs, setInputs] = useState({
LogConsumeEnabled: false,
historyTimestamp: dayjs().subtract(1, 'month').toDate(),
});
const refForm = useRef();
const [inputsRow, setInputsRow] = useState(inputs);
function onSubmit() {
const updateArray = compareObjects(inputs, inputsRow).filter(
(item) => item.key !== 'historyTimestamp',
);
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('保存成功');
props.refresh();
})
.catch(() => {
showError('保存失败，请重试');
})
.finally(() => {
setLoading(false);
});
}
async function onCleanHistoryLog() {
try {
setLoadingCleanHistoryLog(true);
if (!inputs.historyTimestamp) throw new Error('请选择日志记录时间');
const res = await API.delete(
`/api/log/?target_timestamp=${Date.parse(inputs.historyTimestamp) / 1000}`,
);
const { success, message, data } = res.data;
if (success) {
showSuccess(`${data} 条日志已清理！`);
return;
} else {
throw new Error('日志清理失败：' + message);
}
} catch (error) {
showError(error.message);
} finally {
setLoadingCleanHistoryLog(false);
}
}
useEffect(() => {
const currentInputs = {};
for (let key in props.options) {
if (Object.keys(inputs).includes(key)) {
currentInputs[key] = props.options[key];
}
}
currentInputs['historyTimestamp'] = inputs.historyTimestamp;
setInputs(Object.assign(inputs, 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={'LogConsumeEnabled'}
label={'启用额度消费日志记录'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) => {
setInputs({
...inputs,
LogConsumeEnabled: value,
});
}}
/>
</Col>
<Col span={8}>
<Spin spinning={loadingCleanHistoryLog}>
<Form.DatePicker
label='日志记录时间'
field={'historyTimestamp'}
type='dateTime'
inputReadOnly={true}
onChange={(value) => {
setInputs({
...inputs,
historyTimestamp: value,
});
}}
/>
<Button size='default' onClick={onCleanHistoryLog}>
清除历史日志
</Button>
</Spin>
</Col>
</Row>
<Row>
<Button size='large' onClick={onSubmit}>
保存日志设置
</Button>
</Row>
</Form.Section>
</Form>
</Spin>
</>
);
}
web/src/pages/Setting/Operation/SettingsMagnification.js 0 → 100644
import React, { useEffect, useState, useRef } from 'react';
import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
import {
compareObjects,
API,
showError,
showSuccess,
showWarning,
verifyJSON,
} from '../../../helpers';
export default function SettingsMagnification(props) {
const [loading, setLoading] = useState(false);
const [inputs, setInputs] = useState({
ModelPrice: '',
ModelRatio: '',
CompletionRatio: '',
GroupRatio: '',
});
const refForm = useRef();
const [inputsRow, setInputsRow] = useState(inputs);
async function onSubmit() {
try {
await refForm.current.validate();
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('保存成功');
props.refresh();
})
.catch(() => {
showError('保存失败，请重试');
})
.finally(() => {
setLoading(false);
});
} catch (error) {
showError('请检查输入');
console.error(error);
} finally {
}
}
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={16}>
<Form.TextArea
label={'模型固定价格'}
extraText={'一次调用消耗多少刀，优先级大于模型倍率'}
placeholder={
'为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀'
}
field={'ModelPrice'}
autosize={{ minRows: 6, maxRows: 12 }}
trigger='blur'
rules={[
{
validator: (rule, value) => verifyJSON(value),
message: '不是合法的 JSON 字符串',
},
]}
onChange={(value) =>
setInputs({
...inputs,
ModelPrice: value,
})
}
/>
</Col>
</Row>
<Row gutter={16}>
<Col span={16}>
<Form.TextArea
label={'模型倍率'}
extraText={''}
placeholder={'为一个 JSON 文本，键为模型名称，值为倍率'}
field={'ModelRatio'}
autosize={{ minRows: 6, maxRows: 12 }}
trigger='blur'
rules={[
{
validator: (rule, value) => verifyJSON(value),
message: '不是合法的 JSON 字符串',
},
]}
onChange={(value) =>
setInputs({
...inputs,
ModelRatio: value,
})
}
/>
</Col>
</Row>
<Row gutter={16}>
<Col span={16}>
<Form.TextArea
label={'模型补全倍率'}
extraText={'仅对自定义模型有效'}
placeholder={'为一个 JSON 文本，键为模型名称，值为倍率'}
field={'CompletionRatio'}
autosize={{ minRows: 6, maxRows: 12 }}
trigger='blur'
rules={[
{
validator: (rule, value) => verifyJSON(value),
message: '不是合法的 JSON 字符串',
},
]}
onChange={(value) =>
setInputs({
...inputs,
CompletionRatio: value,
})
}
/>
</Col>
</Row>
<Row gutter={16}>
<Col span={16}>
<Form.TextArea
label={'分组倍率'}
extraText={''}
placeholder={'为一个 JSON 文本，键为分组名称，值为倍率'}
field={'GroupRatio'}
autosize={{ minRows: 6, maxRows: 12 }}
trigger='blur'
rules={[
{
validator: (rule, value) => verifyJSON(value),
message: '不是合法的 JSON 字符串',
},
]}
onChange={(value) =>
setInputs({
...inputs,
GroupRatio: value,
})
}
/>
</Col>
</Row>
<Row>
<Button size='large' onClick={onSubmit}>
保存倍率设置
</Button>
</Row>
</Form.Section>
</Form>
</Spin>
</>
);
}
web/src/pages/Setting/Operation/SettingsMonitoring.js 0 → 100644
import React, { useEffect, useState, useRef } from 'react';
import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
import {
compareObjects,
API,
showError,
showSuccess,
showWarning,
} from '../../../helpers';
export default function SettingsMonitoring(props) {
const [loading, setLoading] = useState(false);
const [inputs, setInputs] = useState({
ChannelDisableThreshold: '',
QuotaRemindThreshold: '',
AutomaticDisableChannelEnabled: false,
AutomaticEnableChannelEnabled: 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('保存成功');
props.refresh();
})
.catch(() => {
showError('保存失败，请重试');
})
.finally(() => {
setLoading(false);
});
}
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.InputNumber
label={'最长响应时间'}
step={1}
min={0}
suffix={'秒'}
extraText={'当运行通道全部测试时，超过此时间将自动禁用通道'}
placeholder={''}
field={'ChannelDisableThreshold'}
onChange={(value) =>
setInputs({
...inputs,
ChannelDisableThreshold: String(value),
})
}
/>
</Col>
<Col span={8}>
<Form.InputNumber
label={'额度提醒阈值'}
step={1}
min={0}
suffix={'Token'}
extraText={'低于此额度时将发送邮件提醒用户'}
placeholder={''}
field={'QuotaRemindThreshold'}
onChange={(value) =>
setInputs({
...inputs,
QuotaRemindThreshold: String(value),
})
}
/>
</Col>
</Row>
<Row gutter={16}>
<Col span={8}>
<Form.Switch
field={'AutomaticDisableChannelEnabled'}
label={'失败时自动禁用通道'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) => {
setInputs({
...inputs,
AutomaticDisableChannelEnabled: value,
});
}}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'AutomaticEnableChannelEnabled'}
label={'成功时自动启用通道'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) =>
setInputs({
...inputs,
AutomaticEnableChannelEnabled: value,
})
}
/>
</Col>
</Row>
<Row>
<Button size='large' onClick={onSubmit}>
保存监控设置
</Button>
</Row>
</Form.Section>
</Form>
</Spin>
</>
);
}
web/src/pages/Setting/Operation/SettingsSensitiveWords.js 0 → 100644
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 SettingsSensitiveWords(props) {
const [loading, setLoading] = useState(false);
const [inputs, setInputs] = useState({
CheckSensitiveEnabled: false,
CheckSensitiveOnPromptEnabled: false,
SensitiveWords: '',
});
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('保存成功');
props.refresh();
})
.catch(() => {
showError('保存失败，请重试');
})
.finally(() => {
setLoading(false);
});
}
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={'CheckSensitiveEnabled'}
label={'启用屏蔽词过滤功能'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) => {
setInputs({
...inputs,
CheckSensitiveEnabled: value,
});
}}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'CheckSensitiveOnPromptEnabled'}
label={'启用 Prompt 检查'}
size='large'
checkedText='｜'
uncheckedText='〇'
onChange={(value) =>
setInputs({
...inputs,
CheckSensitiveOnPromptEnabled: value,
})
}
/>
</Col>
</Row>
<Row>
<Col span={16}>
<Form.TextArea
label={'屏蔽词列表'}
extraText={'一行一个屏蔽词，不需要符号分割'}
placeholder={'一行一个屏蔽词，不需要符号分割'}
field={'SensitiveWords'}
onChange={(value) =>
setInputs({
...inputs,
SensitiveWords: value,
})
}
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }}
/>
</Col>
</Row>
<Row>
<Button size='large' onClick={onSubmit}>
保存屏蔽词过滤设置
</Button>
</Row>
</Form.Section>
</Form>
</Spin>
</>
);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment