Skip to content

phsl / new-api

Go to a project
Commit bc0b1b86 by licoy
Options

优化设置页面的模块间距与部分数据获取提示

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