mirror of
https://github.com/linux-do/new-api.git
synced 2025-09-21 09:46:37 +08:00
优化设置页面的模块间距与部分数据获取提示
This commit is contained in:
licoy
parent
c6dae4b879
commit
bf75df8f04
@ -90,7 +90,7 @@ const OperationSetting = () => {
|
|||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
await getOptions();
|
await getOptions();
|
||||||
showSuccess('刷新成功');
|
// showSuccess('刷新成功');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
showError('刷新失败');
|
showError('刷新失败');
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, { useContext, useEffect, useState } from 'react';
|
import React, {useContext, useEffect, useState} from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import {useNavigate} from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
API,
|
API,
|
||||||
copy,
|
copy,
|
||||||
@ -9,8 +9,8 @@ import {
|
|||||||
showSuccess,
|
showSuccess,
|
||||||
} from '../helpers';
|
} from '../helpers';
|
||||||
import Turnstile from 'react-turnstile';
|
import Turnstile from 'react-turnstile';
|
||||||
import { UserContext } from '../context/User';
|
import {UserContext} from '../context/User';
|
||||||
import { onGitHubOAuthClicked, onLinuxDOOAuthClicked } from './utils';
|
import {onGitHubOAuthClicked, onLinuxDOOAuthClicked} from './utils';
|
||||||
import {
|
import {
|
||||||
Avatar,
|
Avatar,
|
||||||
Banner,
|
Banner,
|
||||||
@ -101,12 +101,12 @@ const PersonalSetting = () => {
|
|||||||
}, [disableButton, countdown]);
|
}, [disableButton, countdown]);
|
||||||
|
|
||||||
const handleInputChange = (name, value) => {
|
const handleInputChange = (name, value) => {
|
||||||
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
setInputs((inputs) => ({...inputs, [name]: value}));
|
||||||
};
|
};
|
||||||
|
|
||||||
const generateAccessToken = async () => {
|
const generateAccessToken = async () => {
|
||||||
const res = await API.get('/api/user/token');
|
const res = await API.get('/api/user/token');
|
||||||
const { success, message, data } = res.data;
|
const {success, message, data} = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
setSystemToken(data);
|
setSystemToken(data);
|
||||||
await copy(data);
|
await copy(data);
|
||||||
@ -118,7 +118,7 @@ const PersonalSetting = () => {
|
|||||||
|
|
||||||
const getAffLink = async () => {
|
const getAffLink = async () => {
|
||||||
const res = await API.get('/api/user/aff');
|
const res = await API.get('/api/user/aff');
|
||||||
const { success, message, data } = res.data;
|
const {success, message, data} = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
let link = `${window.location.origin}/register?aff=${data}`;
|
let link = `${window.location.origin}/register?aff=${data}`;
|
||||||
setAffLink(link);
|
setAffLink(link);
|
||||||
@ -129,9 +129,9 @@ const PersonalSetting = () => {
|
|||||||
|
|
||||||
const getUserData = async () => {
|
const getUserData = async () => {
|
||||||
let res = await API.get(`/api/user/self`);
|
let res = await API.get(`/api/user/self`);
|
||||||
const { success, message, data } = res.data;
|
const {success, message, data} = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
userDispatch({ type: 'login', payload: data });
|
userDispatch({type: 'login', payload: data});
|
||||||
} else {
|
} else {
|
||||||
showError(message);
|
showError(message);
|
||||||
}
|
}
|
||||||
@ -139,7 +139,7 @@ const PersonalSetting = () => {
|
|||||||
|
|
||||||
const loadModels = async () => {
|
const loadModels = async () => {
|
||||||
let res = await API.get(`/api/user/models`);
|
let res = await API.get(`/api/user/models`);
|
||||||
const { success, message, data } = res.data;
|
const {success, message, data} = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
setModels(data);
|
setModels(data);
|
||||||
console.log(data);
|
console.log(data);
|
||||||
@ -167,12 +167,12 @@ const PersonalSetting = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const res = await API.delete('/api/user/self');
|
const res = await API.delete('/api/user/self');
|
||||||
const { success, message } = res.data;
|
const {success, message} = res.data;
|
||||||
|
|
||||||
if (success) {
|
if (success) {
|
||||||
showSuccess('账户已删除！');
|
showSuccess('账户已删除！');
|
||||||
await API.get('/api/user/logout');
|
await API.get('/api/user/logout');
|
||||||
userDispatch({ type: 'logout' });
|
userDispatch({type: 'logout'});
|
||||||
localStorage.removeItem('user');
|
localStorage.removeItem('user');
|
||||||
navigate('/login');
|
navigate('/login');
|
||||||
} else {
|
} else {
|
||||||
@ -185,7 +185,7 @@ const PersonalSetting = () => {
|
|||||||
const res = await API.get(
|
const res = await API.get(
|
||||||
`/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`,
|
`/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`,
|
||||||
);
|
);
|
||||||
const { success, message } = res.data;
|
const {success, message} = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
showSuccess('微信账户绑定成功！');
|
showSuccess('微信账户绑定成功！');
|
||||||
setShowWeChatBindModal(false);
|
setShowWeChatBindModal(false);
|
||||||
@ -202,7 +202,7 @@ const PersonalSetting = () => {
|
|||||||
const res = await API.put(`/api/user/self`, {
|
const res = await API.put(`/api/user/self`, {
|
||||||
password: inputs.set_new_password,
|
password: inputs.set_new_password,
|
||||||
});
|
});
|
||||||
const { success, message } = res.data;
|
const {success, message} = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
showSuccess('密码修改成功！');
|
showSuccess('密码修改成功！');
|
||||||
setShowWeChatBindModal(false);
|
setShowWeChatBindModal(false);
|
||||||
@ -220,7 +220,7 @@ const PersonalSetting = () => {
|
|||||||
const res = await API.post(`/api/user/aff_transfer`, {
|
const res = await API.post(`/api/user/aff_transfer`, {
|
||||||
quota: transferAmount,
|
quota: transferAmount,
|
||||||
});
|
});
|
||||||
const { success, message } = res.data;
|
const {success, message} = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
showSuccess(message);
|
showSuccess(message);
|
||||||
setOpenTransfer(false);
|
setOpenTransfer(false);
|
||||||
@ -244,7 +244,7 @@ const PersonalSetting = () => {
|
|||||||
const res = await API.get(
|
const res = await API.get(
|
||||||
`/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
|
`/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
|
||||||
);
|
);
|
||||||
const { success, message } = res.data;
|
const {success, message} = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
showSuccess('验证码发送成功，请检查邮箱！');
|
showSuccess('验证码发送成功，请检查邮箱！');
|
||||||
} else {
|
} else {
|
||||||
@ -262,7 +262,7 @@ const PersonalSetting = () => {
|
|||||||
const res = await API.get(
|
const res = await API.get(
|
||||||
`/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`,
|
`/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`,
|
||||||
);
|
);
|
||||||
const { success, message } = res.data;
|
const {success, message} = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
showSuccess('邮箱账户绑定成功！');
|
showSuccess('邮箱账户绑定成功！');
|
||||||
setShowEmailBindModal(false);
|
setShowEmailBindModal(false);
|
||||||
@ -290,7 +290,7 @@ const PersonalSetting = () => {
|
|||||||
showSuccess('已复制：' + text);
|
showSuccess('已复制：' + text);
|
||||||
} else {
|
} else {
|
||||||
// setSearchKeyword(text);
|
// setSearchKeyword(text);
|
||||||
Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
|
Modal.error({title: '无法复制到剪贴板，请手动复制', content: text});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -307,15 +307,15 @@ const PersonalSetting = () => {
|
|||||||
size={'small'}
|
size={'small'}
|
||||||
centered={true}
|
centered={true}
|
||||||
>
|
>
|
||||||
<div style={{ marginTop: 20 }}>
|
<div style={{marginTop: 20}}>
|
||||||
<Typography.Text>{`可用额度${renderQuotaWithPrompt(userState?.user?.aff_quota)}`}</Typography.Text>
|
<Typography.Text>{`可用额度${renderQuotaWithPrompt(userState?.user?.aff_quota)}`}</Typography.Text>
|
||||||
<Input
|
<Input
|
||||||
style={{ marginTop: 5 }}
|
style={{marginTop: 5}}
|
||||||
value={userState?.user?.aff_quota}
|
value={userState?.user?.aff_quota}
|
||||||
disabled={true}
|
disabled={true}
|
||||||
></Input>
|
></Input>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ marginTop: 20 }}>
|
<div style={{marginTop: 20}}>
|
||||||
<Typography.Text>
|
<Typography.Text>
|
||||||
{`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` +
|
{`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` +
|
||||||
renderQuota(getQuotaPerUnit())}
|
renderQuota(getQuotaPerUnit())}
|
||||||
@ -323,7 +323,7 @@ const PersonalSetting = () => {
|
|||||||
<div>
|
<div>
|
||||||
<InputNumber
|
<InputNumber
|
||||||
min={0}
|
min={0}
|
||||||
style={{ marginTop: 5 }}
|
style={{marginTop: 5}}
|
||||||
value={transferAmount}
|
value={transferAmount}
|
||||||
onChange={(value) => setTransferAmount(value)}
|
onChange={(value) => setTransferAmount(value)}
|
||||||
disabled={false}
|
disabled={false}
|
||||||
@ -331,7 +331,7 @@ const PersonalSetting = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
<div style={{ marginTop: 20 }}>
|
<div style={{marginTop: 20}}>
|
||||||
<Card
|
<Card
|
||||||
title={
|
title={
|
||||||
<Card.Meta
|
<Card.Meta
|
||||||
@ -339,7 +339,7 @@ const PersonalSetting = () => {
|
|||||||
<Avatar
|
<Avatar
|
||||||
size='default'
|
size='default'
|
||||||
color={stringToColor(getUsername())}
|
color={stringToColor(getUsername())}
|
||||||
style={{ marginRight: 4 }}
|
style={{marginRight: 4}}
|
||||||
>
|
>
|
||||||
{typeof getUsername() === 'string' &&
|
{typeof getUsername() === 'string' &&
|
||||||
getUsername().slice(0, 1)}
|
getUsername().slice(0, 1)}
|
||||||
@ -378,7 +378,7 @@ const PersonalSetting = () => {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Typography.Title heading={6}>可用模型</Typography.Title>
|
<Typography.Title heading={6}>可用模型</Typography.Title>
|
||||||
<div style={{ marginTop: 10 }}>
|
<div style={{marginTop: 10}}>
|
||||||
<Space wrap>
|
<Space wrap>
|
||||||
{models.map((model) => (
|
{models.map((model) => (
|
||||||
<Tag
|
<Tag
|
||||||
@ -395,11 +395,12 @@ const PersonalSetting = () => {
|
|||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
<Card
|
<Card
|
||||||
|
style={{marginTop: 10}}
|
||||||
footer={
|
footer={
|
||||||
<div>
|
<div>
|
||||||
<Typography.Text>邀请链接</Typography.Text>
|
<Typography.Text>邀请链接</Typography.Text>
|
||||||
<Input
|
<Input
|
||||||
style={{ marginTop: 10 }}
|
style={{marginTop: 10}}
|
||||||
value={affLink}
|
value={affLink}
|
||||||
onClick={handleAffLinkClick}
|
onClick={handleAffLinkClick}
|
||||||
readOnly
|
readOnly
|
||||||
@ -408,17 +409,17 @@ const PersonalSetting = () => {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Typography.Title heading={6}>邀请信息</Typography.Title>
|
<Typography.Title heading={6}>邀请信息</Typography.Title>
|
||||||
<div style={{ marginTop: 10 }}>
|
<div style={{marginTop: 10}}>
|
||||||
<Descriptions row>
|
<Descriptions row>
|
||||||
<Descriptions.Item itemKey='待使用收益'>
|
<Descriptions.Item itemKey='待使用收益'>
|
||||||
<span style={{ color: 'rgba(var(--semi-red-5), 1)' }}>
|
<span style={{color: 'rgba(var(--semi-red-5), 1)'}}>
|
||||||
{renderQuota(userState?.user?.aff_quota)}
|
{renderQuota(userState?.user?.aff_quota)}
|
||||||
</span>
|
</span>
|
||||||
<Button
|
<Button
|
||||||
type={'secondary'}
|
type={'secondary'}
|
||||||
onClick={() => setOpenTransfer(true)}
|
onClick={() => setOpenTransfer(true)}
|
||||||
size={'small'}
|
size={'small'}
|
||||||
style={{ marginLeft: 10 }}
|
style={{marginLeft: 10}}
|
||||||
>
|
>
|
||||||
划转
|
划转
|
||||||
</Button>
|
</Button>
|
||||||
@ -432,12 +433,12 @@ const PersonalSetting = () => {
|
|||||||
</Descriptions>
|
</Descriptions>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card style={{marginTop: 10}}>
|
||||||
<Typography.Title heading={6}>个人信息</Typography.Title>
|
<Typography.Title heading={6}>个人信息</Typography.Title>
|
||||||
<div style={{ marginTop: 20 }}>
|
<div style={{marginTop: 20}}>
|
||||||
<Typography.Text strong>邮箱</Typography.Text>
|
<Typography.Text strong>邮箱</Typography.Text>
|
||||||
<div
|
<div
|
||||||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
style={{display: 'flex', justifyContent: 'space-between'}}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<Input
|
<Input
|
||||||
@ -462,10 +463,10 @@ const PersonalSetting = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ marginTop: 10 }}>
|
<div style={{marginTop: 10}}>
|
||||||
<Typography.Text strong>微信</Typography.Text>
|
<Typography.Text strong>微信</Typography.Text>
|
||||||
<div
|
<div
|
||||||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
style={{display: 'flex', justifyContent: 'space-between'}}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<Input
|
<Input
|
||||||
@ -489,10 +490,10 @@ const PersonalSetting = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ marginTop: 10 }}>
|
<div style={{marginTop: 10}}>
|
||||||
<Typography.Text strong>GitHub</Typography.Text>
|
<Typography.Text strong>GitHub</Typography.Text>
|
||||||
<div
|
<div
|
||||||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
style={{display: 'flex', justifyContent: 'space-between'}}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<Input
|
<Input
|
||||||
@ -519,10 +520,10 @@ const PersonalSetting = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ marginTop: 10 }}>
|
<div style={{marginTop: 10}}>
|
||||||
<Typography.Text strong>Telegram</Typography.Text>
|
<Typography.Text strong>Telegram</Typography.Text>
|
||||||
<div
|
<div
|
||||||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
style={{display: 'flex', justifyContent: 'space-between'}}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<Input
|
<Input
|
||||||
@ -550,10 +551,10 @@ const PersonalSetting = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ marginTop: 10 }}>
|
<div style={{marginTop: 10}}>
|
||||||
<Typography.Text strong>LinuxDO</Typography.Text>
|
<Typography.Text strong>LinuxDO</Typography.Text>
|
||||||
<div
|
<div
|
||||||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
style={{display: 'flex', justifyContent: 'space-between'}}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<Input
|
<Input
|
||||||
@ -580,7 +581,7 @@ const PersonalSetting = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ marginTop: 10 }}>
|
<div style={{marginTop: 10}}>
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={generateAccessToken}>
|
<Button onClick={generateAccessToken}>
|
||||||
生成系统访问令牌
|
生成系统访问令牌
|
||||||
@ -607,7 +608,7 @@ const PersonalSetting = () => {
|
|||||||
readOnly
|
readOnly
|
||||||
value={systemToken}
|
value={systemToken}
|
||||||
onClick={handleSystemTokenClick}
|
onClick={handleSystemTokenClick}
|
||||||
style={{ marginTop: '10px' }}
|
style={{marginTop: '10px'}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{status.wechat_login && (
|
{status.wechat_login && (
|
||||||
@ -625,8 +626,8 @@ const PersonalSetting = () => {
|
|||||||
visible={showWeChatBindModal}
|
visible={showWeChatBindModal}
|
||||||
size={'small'}
|
size={'small'}
|
||||||
>
|
>
|
||||||
<Image src={status.wechat_qrcode} />
|
<Image src={status.wechat_qrcode}/>
|
||||||
<div style={{ textAlign: 'center' }}>
|
<div style={{textAlign: 'center'}}>
|
||||||
<p>
|
<p>
|
||||||
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
|
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
|
||||||
</p>
|
</p>
|
||||||
@ -676,7 +677,7 @@ const PersonalSetting = () => {
|
|||||||
{disableButton ? `重新发送 (${countdown})` : '获取验证码'}
|
{disableButton ? `重新发送 (${countdown})` : '获取验证码'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ marginTop: 10 }}>
|
<div style={{marginTop: 10}}>
|
||||||
<Input
|
<Input
|
||||||
fluid
|
fluid
|
||||||
placeholder='验证码'
|
placeholder='验证码'
|
||||||
@ -705,14 +706,14 @@ const PersonalSetting = () => {
|
|||||||
centered={true}
|
centered={true}
|
||||||
onOk={deleteAccount}
|
onOk={deleteAccount}
|
||||||
>
|
>
|
||||||
<div style={{ marginTop: 20 }}>
|
<div style={{marginTop: 20}}>
|
||||||
<Banner
|
<Banner
|
||||||
type='danger'
|
type='danger'
|
||||||
description='您正在删除自己的帐户，将清空所有数据且不可恢复'
|
description='您正在删除自己的帐户，将清空所有数据且不可恢复'
|
||||||
closeIcon={null}
|
closeIcon={null}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ marginTop: 20 }}>
|
<div style={{marginTop: 20}}>
|
||||||
<Input
|
<Input
|
||||||
placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
|
placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
|
||||||
name='self_account_deletion_confirmation'
|
name='self_account_deletion_confirmation'
|
||||||
@ -743,7 +744,7 @@ const PersonalSetting = () => {
|
|||||||
centered={true}
|
centered={true}
|
||||||
onOk={changePassword}
|
onOk={changePassword}
|
||||||
>
|
>
|
||||||
<div style={{ marginTop: 20 }}>
|
<div style={{marginTop: 20}}>
|
||||||
<Input
|
<Input
|
||||||
name='set_new_password'
|
name='set_new_password'
|
||||||
placeholder='新密码'
|
placeholder='新密码'
|
||||||
@ -753,7 +754,7 @@ const PersonalSetting = () => {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
style={{ marginTop: 20 }}
|
style={{marginTop: 20}}
|
||||||
name='set_new_password_confirmation'
|
name='set_new_password_confirmation'
|
||||||
placeholder='确认新密码'
|
placeholder='确认新密码'
|
||||||
value={inputs.set_new_password_confirmation}
|
value={inputs.set_new_password_confirmation}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user