refactor: 运营设置-额度设置

This commit is contained in:
QuentinHsu 2024-05-11 17:48:05 +08:00
parent 88bc295855
commit 968ef1e5fa
No known key found for this signature in database
GPG Key ID: 20D465A435D740D0
2 changed files with 161 additions and 53 deletions

View File

@ -7,6 +7,7 @@ import SettingsSensitiveWords from '../pages/Setting/Operation/SettingsSensitive
import SettingsLog from '../pages/Setting/Operation/SettingsLog.js';
import SettingsDataDashboard from '../pages/Setting/Operation/SettingsDataDashboard.js';
import SettingsMonitoring from '../pages/Setting/Operation/SettingsMonitoring.js';
import SettingsCreditLimit from '../pages/Setting/Operation/SettingsCreditLimit.js';
import {
API,
@ -244,6 +245,10 @@ const OperationSetting = () => {
<Card style={{ marginTop: '10px' }}>
<SettingsMonitoring options={inputs} />
</Card>
{/* 额度设置 */}
<Card style={{ marginTop: '10px' }}>
<SettingsCreditLimit options={inputs} />
</Card>
<Grid columns={1}>
<Grid.Column>
<Form loading={loading} inverted={isDark}>
@ -267,59 +272,6 @@ const OperationSetting = () => {
{/* />*/}
{/*</Form.Group>*/}
<Divider />
<Header as='h3' inverted={isDark}>
额度设置
</Header>
<Form.Group widths={4}>
<Form.Input
label='新用户初始额度'
name='QuotaForNewUser'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.QuotaForNewUser}
type='number'
min='0'
placeholder='例如100'
/>
<Form.Input
label='请求预扣费额度'
name='PreConsumedQuota'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.PreConsumedQuota}
type='number'
min='0'
placeholder='请求结束后多退少补'
/>
<Form.Input
label='邀请新用户奖励额度'
name='QuotaForInviter'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.QuotaForInviter}
type='number'
min='0'
placeholder='例如2000'
/>
<Form.Input
label='新用户使用邀请码奖励额度'
name='QuotaForInvitee'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.QuotaForInvitee}
type='number'
min='0'
placeholder='例如1000'
/>
</Form.Group>
<Form.Button
onClick={() => {
submitConfig('quota').then();
}}
>
保存额度设置
</Form.Button>
<Divider />
<Header as='h3' inverted={isDark}>
倍率设置

View File

@ -0,0 +1,156 @@
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('更新成功');
})
.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={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>
</>
);
}