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

feat: 更方便地编辑用户额度

Browse Source
This commit is contained in:
CaIon 2024-05-12 16:06:19 +08:00
parent 6fb1fbfe96
commit b427f0278f
1 changed files with 47 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
web/src/pages/User/EditUser.js
View File

@ -1,12 +1,13 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { API, isMobile, showError, showSuccess } from '../../helpers'; import { API, isMobile, showError, showSuccess } from '../../helpers';
import { renderQuotaWithPrompt } from '../../helpers/render'; import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
import Title from '@douyinfe/semi-ui/lib/es/typography/title'; import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import { import {
Button, Button,
Divider, Divider,
Input, Input,
Modal,
Select, Select,
SideSheet, SideSheet,
Space, Space,
@ -17,6 +18,8 @@ import {
const EditUser = (props) => { const EditUser = (props) => {
const userId = props.editingUser.id; const userId = props.editingUser.id;
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [addQuotaModalOpen, setIsModalOpen] = useState(false);
const [addQuotaLocal, setAddQuotaLocal] = useState(0);
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
username: '', username: '',
display_name: '', display_name: '',
@ -107,6 +110,16 @@ const EditUser = (props) => {
setLoading(false); setLoading(false);
}; };
const addLocalQuota = () => {
let newQuota = parseInt(quota) + addQuotaLocal;
setInputs((inputs) => ({ ...inputs, quota: newQuota }));
};
const openAddQuotaModal = () => {
setAddQuotaLocal(0);
setIsModalOpen(true);
};
return ( return (
<> <>
<SideSheet <SideSheet
@ -192,14 +205,17 @@ const EditUser = (props) => {
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text> <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
</div> </div>
<Input <Space>
name='quota' <Input
placeholder={'请输入新的剩余额度'} name='quota'
onChange={(value) => handleInputChange('quota', value)} placeholder={'请输入新的剩余额度'}
value={quota} onChange={(value) => handleInputChange('quota', value)}
type={'number'} value={quota}
autoComplete='new-password' type={'number'}
/> autoComplete='new-password'
/>
<Button onClick={openAddQuotaModal}>添加额度</Button>
</Space>
</> </>
)} )}
<Divider style={{ marginTop: 20 }}>以下信息不可修改</Divider> <Divider style={{ marginTop: 20 }}>以下信息不可修改</Divider>
@ -245,6 +261,28 @@ const EditUser = (props) => {
/> />
</Spin> </Spin>
</SideSheet> </SideSheet>
<Modal
centered={true}
visible={addQuotaModalOpen}
onOk={() => {
addLocalQuota();
setIsModalOpen(false);
}}
onCancel={() => setIsModalOpen(false)}
closable={null}
>
<div style={{ marginTop: 20 }}>
<Typography.Text>{`新额度${renderQuota(quota)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(quota + addQuotaLocal)}`}</Typography.Text>
</div>
<Input
name='addQuotaLocal'
placeholder={'需要添加的额度'}
onChange={(value) => setAddQuotaLocal(parseInt(value))}
value={addQuotaLocal}
type={'number'}
autoComplete='new-password'
/>
</Modal>
</> </>
); );
}; };