From bf75df8f04639ae9ed3c745ca36c29997a1bf09a Mon Sep 17 00:00:00 2001 From: licoy Date: Tue, 12 Nov 2024 16:17:55 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=BE=E7=BD=AE=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E7=9A=84=E6=A8=A1=E5=9D=97=E9=97=B4=E8=B7=9D=E4=B8=8E?= =?UTF-8?q?=E9=83=A8=E5=88=86=E6=95=B0=E6=8D=AE=E8=8E=B7=E5=8F=96=E6=8F=90?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/OperationSetting.js | 2 +- web/src/components/PersonalSetting.js | 1489 ++++++++++++------------ 2 files changed, 746 insertions(+), 745 deletions(-) diff --git a/web/src/components/OperationSetting.js b/web/src/components/OperationSetting.js index 13320f2..1c50c97 100644 --- a/web/src/components/OperationSetting.js +++ b/web/src/components/OperationSetting.js @@ -90,7 +90,7 @@ const OperationSetting = () => { try { setLoading(true); await getOptions(); - showSuccess('刷新成功'); + // showSuccess('刷新成功'); } catch (error) { showError('刷新失败'); } finally { diff --git a/web/src/components/PersonalSetting.js b/web/src/components/PersonalSetting.js index 3986475..cb31333 100644 --- a/web/src/components/PersonalSetting.js +++ b/web/src/components/PersonalSetting.js @@ -1,783 +1,784 @@ -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, - isRoot, - showError, - showInfo, - showSuccess, + API, + copy, + isRoot, + showError, + showInfo, + 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, - Button, - Card, - Descriptions, - Image, - Input, - InputNumber, - Layout, - Modal, - Space, - Tag, - Typography, + Avatar, + Banner, + Button, + Card, + Descriptions, + Image, + Input, + InputNumber, + Layout, + Modal, + Space, + Tag, + Typography, } from '@douyinfe/semi-ui'; import { - getQuotaPerUnit, - renderQuota, - renderQuotaWithPrompt, - stringToColor, + getQuotaPerUnit, + renderQuota, + renderQuotaWithPrompt, + stringToColor, } from '../helpers/render'; import TelegramLoginButton from 'react-telegram-login'; const PersonalSetting = () => { - const [userState, userDispatch] = useContext(UserContext); - let navigate = useNavigate(); + const [userState, userDispatch] = useContext(UserContext); + let navigate = useNavigate(); - const [inputs, setInputs] = useState({ - wechat_verification_code: '', - email_verification_code: '', - email: '', - self_account_deletion_confirmation: '', - set_new_password: '', - set_new_password_confirmation: '', - }); - const [status, setStatus] = useState({}); - const [showChangePasswordModal, setShowChangePasswordModal] = useState(false); - const [showWeChatBindModal, setShowWeChatBindModal] = useState(false); - const [showEmailBindModal, setShowEmailBindModal] = useState(false); - const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false); - const [turnstileEnabled, setTurnstileEnabled] = useState(false); - const [turnstileSiteKey, setTurnstileSiteKey] = useState(''); - const [turnstileToken, setTurnstileToken] = useState(''); - const [loading, setLoading] = useState(false); - const [disableButton, setDisableButton] = useState(false); - const [countdown, setCountdown] = useState(30); - const [affLink, setAffLink] = useState(''); - const [systemToken, setSystemToken] = useState(''); - const [models, setModels] = useState([]); - const [openTransfer, setOpenTransfer] = useState(false); - const [transferAmount, setTransferAmount] = useState(0); - - useEffect(() => { - // let user = localStorage.getItem('user'); - // if (user) { - // userDispatch({ type: 'login', payload: user }); - // } - // console.log(localStorage.getItem('user')) - - let status = localStorage.getItem('status'); - if (status) { - status = JSON.parse(status); - setStatus(status); - if (status.turnstile_check) { - setTurnstileEnabled(true); - setTurnstileSiteKey(status.turnstile_site_key); - } - } - getUserData().then((res) => { - console.log(userState); + const [inputs, setInputs] = useState({ + wechat_verification_code: '', + email_verification_code: '', + email: '', + self_account_deletion_confirmation: '', + set_new_password: '', + set_new_password_confirmation: '', }); - loadModels().then(); - getAffLink().then(); - setTransferAmount(getQuotaPerUnit()); - }, []); + const [status, setStatus] = useState({}); + const [showChangePasswordModal, setShowChangePasswordModal] = useState(false); + const [showWeChatBindModal, setShowWeChatBindModal] = useState(false); + const [showEmailBindModal, setShowEmailBindModal] = useState(false); + const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false); + const [turnstileEnabled, setTurnstileEnabled] = useState(false); + const [turnstileSiteKey, setTurnstileSiteKey] = useState(''); + const [turnstileToken, setTurnstileToken] = useState(''); + const [loading, setLoading] = useState(false); + const [disableButton, setDisableButton] = useState(false); + const [countdown, setCountdown] = useState(30); + const [affLink, setAffLink] = useState(''); + const [systemToken, setSystemToken] = useState(''); + const [models, setModels] = useState([]); + const [openTransfer, setOpenTransfer] = useState(false); + const [transferAmount, setTransferAmount] = useState(0); - useEffect(() => { - let countdownInterval = null; - if (disableButton && countdown > 0) { - countdownInterval = setInterval(() => { - setCountdown(countdown - 1); - }, 1000); - } else if (countdown === 0) { - setDisableButton(false); - setCountdown(30); - } - return () => clearInterval(countdownInterval); // Clean up on unmount - }, [disableButton, countdown]); + useEffect(() => { + // let user = localStorage.getItem('user'); + // if (user) { + // userDispatch({ type: 'login', payload: user }); + // } + // console.log(localStorage.getItem('user')) - const handleInputChange = (name, value) => { - setInputs((inputs) => ({ ...inputs, [name]: value })); - }; + let status = localStorage.getItem('status'); + if (status) { + status = JSON.parse(status); + setStatus(status); + if (status.turnstile_check) { + setTurnstileEnabled(true); + setTurnstileSiteKey(status.turnstile_site_key); + } + } + getUserData().then((res) => { + console.log(userState); + }); + loadModels().then(); + getAffLink().then(); + setTransferAmount(getQuotaPerUnit()); + }, []); - const generateAccessToken = async () => { - const res = await API.get('/api/user/token'); - const { success, message, data } = res.data; - if (success) { - setSystemToken(data); - await copy(data); - showSuccess(`令牌已重置并已复制到剪贴板`); - } else { - showError(message); - } - }; + useEffect(() => { + let countdownInterval = null; + if (disableButton && countdown > 0) { + countdownInterval = setInterval(() => { + setCountdown(countdown - 1); + }, 1000); + } else if (countdown === 0) { + setDisableButton(false); + setCountdown(30); + } + return () => clearInterval(countdownInterval); // Clean up on unmount + }, [disableButton, countdown]); - const getAffLink = async () => { - const res = await API.get('/api/user/aff'); - const { success, message, data } = res.data; - if (success) { - let link = `${window.location.origin}/register?aff=${data}`; - setAffLink(link); - } else { - showError(message); - } - }; + const handleInputChange = (name, value) => { + setInputs((inputs) => ({...inputs, [name]: value})); + }; - const getUserData = async () => { - let res = await API.get(`/api/user/self`); - const { success, message, data } = res.data; - if (success) { - userDispatch({ type: 'login', payload: data }); - } else { - showError(message); - } - }; + const generateAccessToken = async () => { + const res = await API.get('/api/user/token'); + const {success, message, data} = res.data; + if (success) { + setSystemToken(data); + await copy(data); + showSuccess(`令牌已重置并已复制到剪贴板`); + } else { + showError(message); + } + }; - const loadModels = async () => { - let res = await API.get(`/api/user/models`); - const { success, message, data } = res.data; - if (success) { - setModels(data); - console.log(data); - } else { - showError(message); - } - }; + const getAffLink = async () => { + const res = await API.get('/api/user/aff'); + const {success, message, data} = res.data; + if (success) { + let link = `${window.location.origin}/register?aff=${data}`; + setAffLink(link); + } else { + showError(message); + } + }; - const handleAffLinkClick = async (e) => { - e.target.select(); - await copy(e.target.value); - showSuccess(`邀请链接已复制到剪切板`); - }; + const getUserData = async () => { + let res = await API.get(`/api/user/self`); + const {success, message, data} = res.data; + if (success) { + userDispatch({type: 'login', payload: data}); + } else { + showError(message); + } + }; - const handleSystemTokenClick = async (e) => { - e.target.select(); - await copy(e.target.value); - showSuccess(`系统令牌已复制到剪切板`); - }; + const loadModels = async () => { + let res = await API.get(`/api/user/models`); + const {success, message, data} = res.data; + if (success) { + setModels(data); + console.log(data); + } else { + showError(message); + } + }; - const deleteAccount = async () => { - if (inputs.self_account_deletion_confirmation !== userState.user.username) { - showError('请输入你的账户名以确认删除！'); - return; - } + const handleAffLinkClick = async (e) => { + e.target.select(); + await copy(e.target.value); + showSuccess(`邀请链接已复制到剪切板`); + }; - const res = await API.delete('/api/user/self'); - const { success, message } = res.data; + const handleSystemTokenClick = async (e) => { + e.target.select(); + await copy(e.target.value); + showSuccess(`系统令牌已复制到剪切板`); + }; - if (success) { - showSuccess('账户已删除！'); - await API.get('/api/user/logout'); - userDispatch({ type: 'logout' }); - localStorage.removeItem('user'); - navigate('/login'); - } else { - showError(message); - } - }; + const deleteAccount = async () => { + if (inputs.self_account_deletion_confirmation !== userState.user.username) { + showError('请输入你的账户名以确认删除！'); + return; + } - const bindWeChat = async () => { - if (inputs.wechat_verification_code === '') return; - const res = await API.get( - `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`, - ); - const { success, message } = res.data; - if (success) { - showSuccess('微信账户绑定成功！'); - setShowWeChatBindModal(false); - } else { - showError(message); - } - }; + const res = await API.delete('/api/user/self'); + const {success, message} = res.data; - const changePassword = async () => { - if (inputs.set_new_password !== inputs.set_new_password_confirmation) { - showError('两次输入的密码不一致！'); - return; - } - const res = await API.put(`/api/user/self`, { - password: inputs.set_new_password, - }); - const { success, message } = res.data; - if (success) { - showSuccess('密码修改成功！'); - setShowWeChatBindModal(false); - } else { - showError(message); - } - setShowChangePasswordModal(false); - }; + if (success) { + showSuccess('账户已删除！'); + await API.get('/api/user/logout'); + userDispatch({type: 'logout'}); + localStorage.removeItem('user'); + navigate('/login'); + } else { + showError(message); + } + }; - const transfer = async () => { - if (transferAmount < getQuotaPerUnit()) { - showError('划转金额最低为' + renderQuota(getQuotaPerUnit())); - return; - } - const res = await API.post(`/api/user/aff_transfer`, { - quota: transferAmount, - }); - const { success, message } = res.data; - if (success) { - showSuccess(message); - setOpenTransfer(false); - getUserData().then(); - } else { - showError(message); - } - }; + const bindWeChat = async () => { + if (inputs.wechat_verification_code === '') return; + const res = await API.get( + `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`, + ); + const {success, message} = res.data; + if (success) { + showSuccess('微信账户绑定成功！'); + setShowWeChatBindModal(false); + } else { + showError(message); + } + }; - const sendVerificationCode = async () => { - if (inputs.email === '') { - showError('请输入邮箱！'); - return; - } - setDisableButton(true); - if (turnstileEnabled && turnstileToken === '') { - showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); - return; - } - setLoading(true); - const res = await API.get( - `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`, - ); - const { success, message } = res.data; - if (success) { - showSuccess('验证码发送成功，请检查邮箱！'); - } else { - showError(message); - } - setLoading(false); - }; + const changePassword = async () => { + if (inputs.set_new_password !== inputs.set_new_password_confirmation) { + showError('两次输入的密码不一致！'); + return; + } + const res = await API.put(`/api/user/self`, { + password: inputs.set_new_password, + }); + const {success, message} = res.data; + if (success) { + showSuccess('密码修改成功！'); + setShowWeChatBindModal(false); + } else { + showError(message); + } + setShowChangePasswordModal(false); + }; - const bindEmail = async () => { - if (inputs.email_verification_code === '') { - showError('请输入邮箱验证码！'); - return; - } - setLoading(true); - const res = await API.get( - `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`, - ); - const { success, message } = res.data; - if (success) { - showSuccess('邮箱账户绑定成功！'); - setShowEmailBindModal(false); - userState.user.email = inputs.email; - } else { - showError(message); - } - setLoading(false); - }; + const transfer = async () => { + if (transferAmount < getQuotaPerUnit()) { + showError('划转金额最低为' + renderQuota(getQuotaPerUnit())); + return; + } + const res = await API.post(`/api/user/aff_transfer`, { + quota: transferAmount, + }); + const {success, message} = res.data; + if (success) { + showSuccess(message); + setOpenTransfer(false); + getUserData().then(); + } else { + showError(message); + } + }; - const getUsername = () => { - if (userState.user) { - return userState.user.username; - } else { - return 'null'; - } - }; + const sendVerificationCode = async () => { + if (inputs.email === '') { + showError('请输入邮箱！'); + return; + } + setDisableButton(true); + if (turnstileEnabled && turnstileToken === '') { + showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); + return; + } + setLoading(true); + const res = await API.get( + `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`, + ); + const {success, message} = res.data; + if (success) { + showSuccess('验证码发送成功，请检查邮箱！'); + } else { + showError(message); + } + setLoading(false); + }; - const handleCancel = () => { - setOpenTransfer(false); - }; + const bindEmail = async () => { + if (inputs.email_verification_code === '') { + showError('请输入邮箱验证码！'); + return; + } + setLoading(true); + const res = await API.get( + `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`, + ); + const {success, message} = res.data; + if (success) { + showSuccess('邮箱账户绑定成功！'); + setShowEmailBindModal(false); + userState.user.email = inputs.email; + } else { + showError(message); + } + setLoading(false); + }; - const copyText = async (text) => { - if (await copy(text)) { - showSuccess('已复制：' + text); - } else { - // setSearchKeyword(text); - Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text }); - } - }; + const getUsername = () => { + if (userState.user) { + return userState.user.username; + } else { + return 'null'; + } + }; - return ( -
- - - -
- {`可用额度${renderQuotaWithPrompt(userState?.user?.aff_quota)}`} - -
-
- - {`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` + - renderQuota(getQuotaPerUnit())} - -
- setTransferAmount(value)} - disabled={false} - > -
-
- -
- { + setOpenTransfer(false); + }; + + const copyText = async (text) => { + if (await copy(text)) { + showSuccess('已复制：' + text); + } else { + // setSearchKeyword(text); + Modal.error({title: '无法复制到剪贴板，请手动复制', content: text}); + } + }; + + return ( +
+ + + - {typeof getUsername() === 'string' && - getUsername().slice(0, 1)} - - } - title={{getUsername()}} - description={ - isRoot() ? ( - 管理员 - ) : ( - 普通用户 - ) - } - > - } - headerExtraContent={ - <> - - {'ID: ' + userState?.user?.id} - {userState?.user?.group} - - - } - footer={ - - - {renderQuota(userState?.user?.quota)} - - - {renderQuota(userState?.user?.used_quota)} - - - {userState.user?.request_count} - - - } - > - 可用模型 -
- - {models.map((model) => ( - { - copyText(model); - }} - > - {model} - - ))} - -
- - - 邀请链接 - -
- } - > - 邀请信息 -
- - - +
+ {`可用额度${renderQuotaWithPrompt(userState?.user?.aff_quota)}`} + +
+
+ + {`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` + + renderQuota(getQuotaPerUnit())} + +
+ setTransferAmount(value)} + disabled={false} + > +
+
+ +
+ + {typeof getUsername() === 'string' && + getUsername().slice(0, 1)} + + } + title={{getUsername()}} + description={ + isRoot() ? ( + 管理员 + ) : ( + 普通用户 + ) + } + > + } + headerExtraContent={ + <> + + {'ID: ' + userState?.user?.id} + {userState?.user?.group} + + + } + footer={ + + + {renderQuota(userState?.user?.quota)} + + + {renderQuota(userState?.user?.used_quota)} + + + {userState.user?.request_count} + + + } + > + 可用模型 +
+ + {models.map((model) => ( + { + copyText(model); + }} + > + {model} + + ))} + +
+ + + 邀请链接 + +
+ } + > + 邀请信息 +
+ + + {renderQuota(userState?.user?.aff_quota)} - - - - {renderQuota(userState?.user?.aff_history_quota)} - - - {userState?.user?.aff_count} - - -
- - - 个人信息 -
- 邮箱 -
-
- -
-
- -
-
-
-
- 微信 -
-
- -
-
- -
-
-
-
- GitHub -
-
- -
-
- -
-
-
-
- Telegram -
-
- -
-
- {status.telegram_oauth ? ( - userState.user.telegram_id !== '' ? ( - - ) : ( - - ) - ) : ( - - )} -
-
-
-
- LinuxDO -
-
- -
-
- -
-
-
-
- - - - - + + + + {renderQuota(userState?.user?.aff_history_quota)} + + + {userState?.user?.aff_count} + + +
+ + + 个人信息 +
+ 邮箱 +
+
+ +
+
+ +
+
+
+
+ 微信 +
+
+ +
+
+ +
+
+
+
+ GitHub +
+
+ +
+
+ +
+
+
+
+ Telegram +
+
+ +
+
+ {status.telegram_oauth ? ( + userState.user.telegram_id !== '' ? ( + + ) : ( + + ) + ) : ( + + )} +
+
+
+
+ LinuxDO +
+
+ +
+
+ +
+
+
+
+ + + + + - {systemToken && ( - - )} - {status.wechat_login && ( - - )} - setShowWeChatBindModal(false)} - // onOpen={() => setShowWeChatBindModal(true)} - visible={showWeChatBindModal} - size={'small'} - > - -
-

- 微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效） -

-
- - handleInputChange('wechat_verification_code', v) - } - /> - - -
- - setShowEmailBindModal(false)} - // onOpen={() => setShowEmailBindModal(true)} - onOk={bindEmail} - visible={showEmailBindModal} - size={'small'} - centered={true} - maskClosable={false} - > - 绑定邮箱地址 -
- handleInputChange('email', value)} - name='email' - type='email' - /> - -
-
- - handleInputChange('email_verification_code', value) - } - /> -
- {turnstileEnabled ? ( - { - setTurnstileToken(token); - }} - /> - ) : ( - <> - )} - - setShowAccountDeleteModal(false)} - visible={showAccountDeleteModal} - size={'small'} - centered={true} - onOk={deleteAccount} - > -
- -
-
- - handleInputChange( - 'self_account_deletion_confirmation', - value, - ) - } - /> - {turnstileEnabled ? ( - { - setTurnstileToken(token); - }} - /> - ) : ( - <> - )} -
- - setShowChangePasswordModal(false)} - visible={showChangePasswordModal} - size={'small'} - centered={true} - onOk={changePassword} - > -
- - handleInputChange('set_new_password', value) - } - /> - - handleInputChange('set_new_password_confirmation', value) - } - /> - {turnstileEnabled ? ( - { - setTurnstileToken(token); - }} - /> - ) : ( - <> - )} -
- -
- - -
- ); + {systemToken && ( + + )} + {status.wechat_login && ( + + )} + setShowWeChatBindModal(false)} + // onOpen={() => setShowWeChatBindModal(true)} + visible={showWeChatBindModal} + size={'small'} + > + +
+

+ 微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效） +

+
+ + handleInputChange('wechat_verification_code', v) + } + /> + + +
+ + setShowEmailBindModal(false)} + // onOpen={() => setShowEmailBindModal(true)} + onOk={bindEmail} + visible={showEmailBindModal} + size={'small'} + centered={true} + maskClosable={false} + > + 绑定邮箱地址 +
+ handleInputChange('email', value)} + name='email' + type='email' + /> + +
+
+ + handleInputChange('email_verification_code', value) + } + /> +
+ {turnstileEnabled ? ( + { + setTurnstileToken(token); + }} + /> + ) : ( + <> + )} + + setShowAccountDeleteModal(false)} + visible={showAccountDeleteModal} + size={'small'} + centered={true} + onOk={deleteAccount} + > +
+ +
+
+ + handleInputChange( + 'self_account_deletion_confirmation', + value, + ) + } + /> + {turnstileEnabled ? ( + { + setTurnstileToken(token); + }} + /> + ) : ( + <> + )} +
+ + setShowChangePasswordModal(false)} + visible={showChangePasswordModal} + size={'small'} + centered={true} + onOk={changePassword} + > +
+ + handleInputChange('set_new_password', value) + } + /> + + handleInputChange('set_new_password_confirmation', value) + } + /> + {turnstileEnabled ? ( + { + setTurnstileToken(token); + }} + /> + ) : ( + <> + )} +
+ + + + + + ); }; export default PersonalSetting;