Skip to content

phsl / new-api

Go to a project
Commit 8de14b00 by QuentinHsu
Options

refactor: 运营设置-通用设置

parent 4a2e9695
Showing with 258 additions and 87 deletions
web/src/components/OperationSetting.js
import React, { useEffect, useState } from 'react'; 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 GeneralSettings from '../pages/Setting/Operation/GeneralSettings.js';
import { import {
API, API,
showError, showError,
...@@ -30,8 +32,8 @@ const OperationSetting = () => { ...@@ -30,8 +32,8 @@ const OperationSetting = () => {
AutomaticEnableChannelEnabled: '', AutomaticEnableChannelEnabled: '',
ChannelDisableThreshold: 0, ChannelDisableThreshold: 0,
LogConsumeEnabled: '', LogConsumeEnabled: '',
DisplayInCurrencyEnabled: '', DisplayInCurrencyEnabled: false,
DisplayTokenStatEnabled: '', DisplayTokenStatEnabled: false,
CheckSensitiveEnabled: '', CheckSensitiveEnabled: '',
CheckSensitiveOnPromptEnabled: '', CheckSensitiveOnPromptEnabled: '',
CheckSensitiveOnCompletionEnabled: '', CheckSensitiveOnCompletionEnabled: '',
...@@ -45,7 +47,7 @@ const OperationSetting = () => { ...@@ -45,7 +47,7 @@ const OperationSetting = () => {
DataExportEnabled: '', DataExportEnabled: '',
DataExportDefaultTime: 'hour', DataExportDefaultTime: 'hour',
DataExportInterval: 5, DataExportInterval: 5,
DefaultCollapseSidebar: '', // 默认折叠侧边栏 DefaultCollapseSidebar: false, // 默认折叠侧边栏
RetryTimes: 0, RetryTimes: 0,
}); });
const [originInputs, setOriginInputs] = useState({}); const [originInputs, setOriginInputs] = useState({});
...@@ -72,8 +74,16 @@ const OperationSetting = () => { ...@@ -72,8 +74,16 @@ const OperationSetting = () => {
) { ) {
item.value = JSON.stringify(JSON.parse(item.value), null, 2); item.value = JSON.stringify(JSON.parse(item.value), null, 2);
} }
if (
item.key.endsWith('Enabled') ||
['DefaultCollapseSidebar'].includes(item.key)
) {
newInputs[item.key] = item.value === 'true' ? true : false;
} else {
newInputs[item.key] = item.value; newInputs[item.key] = item.value;
}
}); });
setInputs(newInputs); setInputs(newInputs);
setOriginInputs(newInputs); setOriginInputs(newInputs);
} else { } else {
...@@ -224,89 +234,14 @@ const OperationSetting = () => { ...@@ -224,89 +234,14 @@ const OperationSetting = () => {
showError('日志清理失败：' + message); showError('日志清理失败：' + message);
}; };
return ( return (
<>
<Card>
{/* 通用设置 */}
<GeneralSettings options={inputs} />
</Card>
<Grid columns={1}> <Grid columns={1}>
<Grid.Column> <Grid.Column>
<Form loading={loading} inverted={isDark}> <Form loading={loading} inverted={isDark}>
<Header as='h3' inverted={isDark}>
通用设置
</Header>
<Form.Group widths={4}>
<Form.Input
label='充值链接'
name='TopUpLink'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.TopUpLink}
type='link'
placeholder='例如发卡网站的购买链接'
/>
<Form.Input
label='默认聊天页面链接'
name='ChatLink'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.ChatLink}
type='link'
placeholder='例如 ChatGPT Next Web 的部署地址'
/>
<Form.Input
label='聊天页面2链接'
name='ChatLink2'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.ChatLink2}
type='link'
placeholder='例如 ChatGPT Web & Midjourney 的部署地址'
/>
<Form.Input
label='单位美元额度'
name='QuotaPerUnit'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.QuotaPerUnit}
type='number'
step='0.01'
placeholder='一单位货币能兑换的额度'
/>
<Form.Input
label='失败重试次数'
name='RetryTimes'
type={'number'}
step='1'
min='0'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.RetryTimes}
placeholder='失败重试次数'
/>
</Form.Group>
<Form.Group inline>
<Form.Checkbox
checked={inputs.DisplayInCurrencyEnabled === 'true'}
label='以货币形式显示额度'
name='DisplayInCurrencyEnabled'
onChange={handleInputChange}
/>
<Form.Checkbox
checked={inputs.DisplayTokenStatEnabled === 'true'}
label='Billing 相关 API 显示令牌额度而非用户额度'
name='DisplayTokenStatEnabled'
onChange={handleInputChange}
/>
<Form.Checkbox
checked={inputs.DefaultCollapseSidebar === 'true'}
label='默认折叠侧边栏'
name='DefaultCollapseSidebar'
onChange={handleInputChange}
/>
</Form.Group>
<Form.Button
onClick={() => {
submitConfig('general').then();
}}
>
保存通用设置
</Form.Button>
<Divider /> <Divider />
<Header as='h3' inverted={isDark}> <Header as='h3' inverted={isDark}>
绘图设置 绘图设置
...@@ -393,7 +328,10 @@ const OperationSetting = () => { ...@@ -393,7 +328,10 @@ const OperationSetting = () => {
label='屏蔽词列表，一行一个屏蔽词，不需要符号分割' label='屏蔽词列表，一行一个屏蔽词，不需要符号分割'
name='SensitiveWords' name='SensitiveWords'
onChange={handleInputChange} onChange={handleInputChange}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }} style={{
minHeight: 250,
fontFamily: 'JetBrains Mono, Consolas',
}}
value={inputs.SensitiveWords} value={inputs.SensitiveWords}
placeholder='一行一个屏蔽词' placeholder='一行一个屏蔽词'
/> />
...@@ -576,7 +514,10 @@ const OperationSetting = () => { ...@@ -576,7 +514,10 @@ const OperationSetting = () => {
label='模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）' label='模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）'
name='ModelPrice' name='ModelPrice'
onChange={handleInputChange} onChange={handleInputChange}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }} style={{
minHeight: 250,
fontFamily: 'JetBrains Mono, Consolas',
}}
autoComplete='new-password' autoComplete='new-password'
value={inputs.ModelPrice} value={inputs.ModelPrice}
placeholder='为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀' placeholder='为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀'
...@@ -587,7 +528,10 @@ const OperationSetting = () => { ...@@ -587,7 +528,10 @@ const OperationSetting = () => {
label='模型倍率' label='模型倍率'
name='ModelRatio' name='ModelRatio'
onChange={handleInputChange} onChange={handleInputChange}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }} style={{
minHeight: 250,
fontFamily: 'JetBrains Mono, Consolas',
}}
autoComplete='new-password' autoComplete='new-password'
value={inputs.ModelRatio} value={inputs.ModelRatio}
placeholder='为一个 JSON 文本，键为模型名称，值为倍率' placeholder='为一个 JSON 文本，键为模型名称，值为倍率'
...@@ -598,7 +542,10 @@ const OperationSetting = () => { ...@@ -598,7 +542,10 @@ const OperationSetting = () => {
label='分组倍率' label='分组倍率'
name='GroupRatio' name='GroupRatio'
onChange={handleInputChange} onChange={handleInputChange}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }} style={{
minHeight: 250,
fontFamily: 'JetBrains Mono, Consolas',
}}
autoComplete='new-password' autoComplete='new-password'
value={inputs.GroupRatio} value={inputs.GroupRatio}
placeholder='为一个 JSON 文本，键为分组名称，值为倍率' placeholder='为一个 JSON 文本，键为分组名称，值为倍率'
...@@ -614,6 +561,7 @@ const OperationSetting = () => { ...@@ -614,6 +561,7 @@ const OperationSetting = () => {
</Form> </Form>
</Grid.Column> </Grid.Column>
</Grid> </Grid>
</>
); );
}; };
......
web/src/helpers/utils.js
...@@ -220,3 +220,28 @@ export function shouldShowPrompt(id) { ...@@ -220,3 +220,28 @@ export function shouldShowPrompt(id) {
export function setPromptShown(id) { export function setPromptShown(id) {
localStorage.setItem(`prompt-${id}`, 'true'); 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/GeneralSettings.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('更新成功');
})
.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.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='〇'
defaultChecked={false}
checked={false}
onChange={(value) => {
setInputs({
...inputs,
DisplayInCurrencyEnabled: value,
});
}}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'DisplayTokenStatEnabled'}
label={'Billing 相关 API 显示令牌额度而非用户额度'}
size='large'
checkedText='｜'
uncheckedText='〇'
defaultChecked={false}
checked={false}
onChange={(value) =>
setInputs({
...inputs,
DisplayTokenStatEnabled: value,
})
}
/>
</Col>
<Col span={8}>
<Form.Switch
field={'DefaultCollapseSidebar'}
label={'默认折叠侧边栏'}
size='large'
checkedText='｜'
uncheckedText='〇'
defaultChecked={false}
checked={false}
onChange={(value) =>
setInputs({
...inputs,
DefaultCollapseSidebar: value,
})
}
/>
</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