xinyin025/one-api
1
0
Fork 0
mirror of https://github.com/songquanpeng/one-api.git synced 2025-11-04 07:43:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update default theme style

Browse Source
This commit is contained in:
JustSong
2025-02-02 16:02:38 +08:00
parent 9b83d63896
commit c64b7c891f
7 changed files with 224 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
controller/misc.go
View File

@@ -3,12 +3,13 @@ package controller
import (
"encoding/json"
"fmt"
"net/http"
"strings"
"github.com/songquanpeng/one-api/common"
"github.com/songquanpeng/one-api/common/config"
"github.com/songquanpeng/one-api/common/message"
"github.com/songquanpeng/one-api/model"
"net/http"
"strings"
"github.com/gin-gonic/gin"
)
@@ -120,6 +121,7 @@ func SendEmailVerification(c *gin.Context) {
"<p>验证码 %d 分钟内有效，如果不是本人操作，请忽略。</p>", config.SystemName, code, common.VerificationValidMinutes)
err := message.SendEmail(subject, email, content)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),

71
web/default/public/locales/en/translation.json
View File

@@ -571,7 +571,9 @@
"qrcode_placeholder": "Enter an image URL",
"buttons": {
"save": "Save WeChat Server Settings"
}
},
"scan_tip": "Scan QR code to follow WeChat Official Account, enter 'code' to get verification code (valid for 3 minutes)",
"code_placeholder": "Verification code"
},
"turnstile": {
"title": "Turnstile Configuration",
@@ -754,5 +756,72 @@
}
},
"loading_failed": "Failed to load homepage content..."
},
"auth": {
"login": {
"title": "User Login",
"username": "Username / Email",
"password": "Password",
"button": "Login",
"forgot_password": "Forgot password?",
"reset_password": "Reset",
"no_account": "No account?",
"register": "Register",
"other_methods": "Other login methods",
"wechat": {
"scan_tip": "Scan QR code to follow WeChat Official Account, enter 'code' to get verification code (valid for 3 minutes)",
"code_placeholder": "Verification code"
}
},
"register": {
"title": "New User Registration",
"username": "Username (max 12 characters)",
"password": "Password (8-20 characters)",
"confirm_password": "Confirm password",
"email": "Email address",
"verification_code": "Verification code",
"get_code": "Get code",
"get_code_retry": "Retry ({{countdown}})",
"button": "Register",
"has_account": "Have an account?",
"login": "Login"
},
"reset": {
"title": "Password Reset",
"email": "Email address",
"button": "Submit",
"notice": "The system will send an email containing a reset link to your mailbox. Please check your email.",
"confirm": {
"title": "Password Reset Confirmation",
"new_password": "New password",
"button": "Submit",
"button_disabled": "Password reset completed",
"notice": "New password has been generated, please click the password field or button above to copy. Please login and change your password as soon as possible!"
}
}
},
"about": {
"title": "About",
"description": "One API is an open-source API management and proxy platform.",
"repository": "Repository: ",
"loading_failed": "Loading failed"
},
"messages": {
"success": {
"login": "Login successful!",
"register": "Registration successful!",
"verification_code": "Verification code sent, please check your email!",
"password_reset": "Reset email sent, please check your inbox!"
},
"error": {
"login_expired": "Not logged in or session expired, please login again!",
"password_length": "Password must be at least 8 characters!",
"password_mismatch": "Passwords do not match",
"turnstile_wait": "Please wait a few seconds, Turnstile is checking the environment!",
"root_password": "Please change the default password immediately!"
},
"notice": {
"password_copied": "New password copied to clipboard: {{password}}"
}
}
}

69
web/default/public/locales/zh/translation.json
View File

@@ -720,10 +720,10 @@
}
},
"about": {
"title": "关于系统",
"description": "可在设置页面设置关于内容，支持 HTML & Markdown",
"repository": "项目仓库地址：",
"loading_failed": "加载关于内容失败..."
"title": "关于",
"description": "One API 是一个开源的接口管理和代理平台。",
"repository": "项目地址：",
"loading_failed": "加载失败"
},
"footer": {
"built_by": "由",
@@ -758,5 +758,66 @@
}
},
"loading_failed": "加载首页内容失败..."
},
"auth": {
"login": {
"title": "用户登录",
"username": "用户名 / 邮箱地址",
"password": "密码",
"button": "登录",
"forgot_password": "忘记密码？",
"reset_password": "点击重置",
"no_account": "没有账户？",
"register": "点击注册",
"other_methods": "使用其他方式登录",
"wechat": {
"scan_tip": "微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）",
"code_placeholder": "验证码"
}
},
"register": {
"title": "新用户注册",
"username": "输入用户名，最长 12 位",
"password": "输入密码，最短 8 位，最长 20 位",
"confirm_password": "再次输入密码",
"email": "输入邮箱地址",
"verification_code": "输入验证码",
"get_code": "获取验证码",
"get_code_retry": "重试 ({{countdown}})",
"button": "注册",
"has_account": "已有账户？",
"login": "点击登录"
},
"reset": {
"title": "密码重置",
"email": "邮箱地址",
"button": "提交",
"notice": "系统将向您的邮箱发送一封包含重置链接的邮件，请注意查收。",
"confirm": {
"title": "密码重置确认",
"new_password": "新密码",
"button": "提交",
"button_disabled": "密码重置完成",
"notice": "新密码已生成，请点击密码框或上方按钮复制。请及时登录并修改密码！"
}
}
},
"messages": {
"success": {
"login": "登录成功！",
"register": "注册成功！",
"verification_code": "验证码发送成功，请检查你的邮箱！",
"password_reset": "重置邮件发送成功，请检查邮箱！"
},
"error": {
"login_expired": "未登录或登录已过期，请重新登录！",
"password_length": "密码长度不得小于 8 位！",
"password_mismatch": "两次输入的密码不一致",
"turnstile_wait": "请稍后几秒重试，Turnstile 正在检查用户环境！",
"root_password": "请立刻修改默认密码！"
},
"notice": {
"password_copied": "新密码已复制到剪贴板：{{password}}"
}
}
}

40
web/default/src/components/LoginForm.js
View File

@@ -12,12 +12,14 @@ import {
Card,
} from 'semantic-ui-react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { UserContext } from '../context/User';
import { API, getLogo, showError, showSuccess, showWarning } from '../helpers';
import { onGitHubOAuthClicked, onLarkOAuthClicked } from './utils';
import larkIcon from '../images/lark.svg';
const LoginForm = () => {
const { t } = useTranslation();
const [inputs, setInputs] = useState({
username: '',
password: '',
@@ -33,7 +35,7 @@ const LoginForm = () => {
useEffect(() => {
if (searchParams.get('expired')) {
showError('未登录或登录已过期，请重新登录！');
showError(t('messages.error.login_expired'));
}
let status = localStorage.getItem('status');
if (status) {
@@ -57,7 +59,7 @@ const LoginForm = () => {
userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data));
navigate('/');
showSuccess('登录成功！');
showSuccess(t('messages.success.login'));
setShowWeChatLoginModal(false);
} else {
showError(message);
@@ -82,11 +84,11 @@ const LoginForm = () => {
localStorage.setItem('user', JSON.stringify(data));
if (username === 'root' && password === '123456') {
navigate('/user/edit');
showSuccess('登录成功！');
showWarning('请立刻修改默认密码！');
showSuccess(t('messages.success.login'));
showWarning(t('messages.error.root_password'));
} else {
navigate('/token');
showSuccess('登录成功！');
showSuccess(t('messages.success.login'));
}
} else {
showError(message);
@@ -110,7 +112,7 @@ const LoginForm = () => {
style={{ marginBottom: '1.5em' }}
>
<Image src={logo} style={{ marginBottom: '10px' }} />
<Header.Content>用户登录</Header.Content>
<Header.Content>{t('auth.login.title')}</Header.Content>
</Header>
</Card.Header>
<Form size='large'>
@@ -118,7 +120,7 @@ const LoginForm = () => {
fluid
icon='user'
iconPosition='left'
placeholder='用户名 / 邮箱地址'
placeholder={t('auth.login.username')}
name='username'
value={username}
onChange={handleChange}
@@ -128,7 +130,7 @@ const LoginForm = () => {
fluid
icon='lock'
iconPosition='left'
placeholder='密码'
placeholder={t('auth.login.password')}
name='password'
type='password'
value={password}
@@ -145,7 +147,7 @@ const LoginForm = () => {
}}
onClick={handleSubmit}
>
登录
{t('auth.login.button')}
</Button>
</Form>
@@ -160,15 +162,15 @@ const LoginForm = () => {
}}
>
<div>
忘记密码？
{t('auth.login.forgot_password')}
<Link to='/reset' style={{ color: '#2185d0' }}>
点击重置
{t('auth.login.reset_password')}
</Link>
</div>
<div>
没有账户？
{t('auth.login.no_account')}
<Link to='/register' style={{ color: '#2185d0' }}>
点击注册
{t('auth.login.register')}
</Link>
</div>
</div>
@@ -182,7 +184,7 @@ const LoginForm = () => {
horizontal
style={{ color: '#666', fontSize: '0.9em' }}
>
使用其他方式登录
{t('auth.login.other_methods')}
</Divider>
<div
style={{
@@ -250,14 +252,12 @@ const LoginForm = () => {
<Modal.Description>
<Image src={status.wechat_qrcode} fluid />
<div style={{ textAlign: 'center' }}>
<p>
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
</p>
<p>{t('auth.login.wechat.scan_tip')}</p>
</div>
<Form size='large'>
<Form.Input
fluid
placeholder='验证码'
placeholder={t('auth.login.wechat.code_placeholder')}
name='wechat_verification_code'
value={inputs.wechat_verification_code}
onChange={handleChange}
@@ -266,13 +266,13 @@ const LoginForm = () => {
fluid
size='large'
style={{
background: '#2F73FF', // 使用更现代的蓝色
background: '#2F73FF',
color: 'white',
marginBottom: '1.5em',
}}
onClick={onSubmitWeChatVerificationCode}
>
登录
{t('auth.login.button')}
</Button>
</Form>
</Modal.Description>

37
web/default/src/components/PasswordResetConfirm.js
View File

@@ -8,29 +8,23 @@ import {
Card,
Message,
} from 'semantic-ui-react';
import {
API,
copy,
showError,
showInfo,
showNotice,
showSuccess,
} from '../helpers';
import { useTranslation } from 'react-i18next';
import { API, copy, getLogo, showError, showNotice } from '../helpers';
import { useSearchParams } from 'react-router-dom';
const PasswordResetConfirm = () => {
const { t } = useTranslation();
const [inputs, setInputs] = useState({
email: '',
token: '',
});
const { email, token } = inputs;
const [loading, setLoading] = useState(false);
const [disableButton, setDisableButton] = useState(false);
const [countdown, setCountdown] = useState(30);
const [newPassword, setNewPassword] = useState('');
const logo = getLogo();
const [countdown, setCountdown] = useState(30);
const [searchParams, setSearchParams] = useSearchParams();
useEffect(() => {
@@ -68,7 +62,7 @@ const PasswordResetConfirm = () => {
let password = res.data.data;
setNewPassword(password);
await copy(password);
showNotice(`新密码已复制到剪贴板：${password}`);
showNotice(t('messages.notice.password_copied', { password }));
} else {
showError(message);
}
@@ -90,8 +84,8 @@ const PasswordResetConfirm = () => {
textAlign='center'
style={{ marginBottom: '1.5em' }}
>
<Image src='/logo.png' style={{ marginBottom: '10px' }} />
<Header.Content>密码重置确认</Header.Content>
<Image src={logo} style={{ marginBottom: '10px' }} />
<Header.Content>{t('auth.reset.confirm.title')}</Header.Content>
</Header>
</Card.Header>
<Form size='large'>
@@ -99,7 +93,7 @@ const PasswordResetConfirm = () => {
fluid
icon='mail'
iconPosition='left'
placeholder='邮箱地址'
placeholder={t('auth.reset.email')}
name='email'
value={email}
readOnly
@@ -110,7 +104,7 @@ const PasswordResetConfirm = () => {
fluid
icon='lock'
iconPosition='left'
placeholder='新密码'
placeholder={t('auth.reset.confirm.new_password')}
name='newPassword'
value={newPassword}
readOnly
@@ -122,30 +116,29 @@ const PasswordResetConfirm = () => {
onClick={(e) => {
e.target.select();
navigator.clipboard.writeText(newPassword);
showNotice(`密码已复制到剪贴板：${newPassword}`);
showNotice(t('auth.reset.confirm.notice'));
}}
/>
)}
<Button
color='blue'
fluid
size='large'
onClick={handleSubmit}
loading={loading}
disabled={disableButton}
style={{
background: '#2F73FF', // 使用更现代的蓝色
background: '#2F73FF',
color: 'white',
marginBottom: '1.5em',
}}
>
{disableButton ? '密码重置完成' : '提交'}
{disableButton ? t('auth.reset.confirm.button_disabled') : t('auth.reset.confirm.button')}
</Button>
</Form>
{newPassword && (
<Message style={{ background: 'transparent', boxShadow: 'none' }}>
<p style={{ fontSize: '0.9em', color: '#666' }}>
新密码已生成，请点击密码框或上方按钮复制。请及时登录并修改密码！
{t('auth.reset.confirm.notice')}
</p>
</Message>
)}

20
web/default/src/components/PasswordResetForm.js
View File

@@ -8,21 +8,23 @@ import {
Card,
Message,
} from 'semantic-ui-react';
import { API, showError, showInfo, showSuccess } from '../helpers';
import { useTranslation } from 'react-i18next';
import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
import Turnstile from 'react-turnstile';
const PasswordResetForm = () => {
const { t } = useTranslation();
const [inputs, setInputs] = useState({
email: '',
});
const { email } = inputs;
const [loading, setLoading] = useState(false);
const [turnstileEnabled, setTurnstileEnabled] = useState(false);
const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
const [turnstileToken, setTurnstileToken] = useState('');
const [disableButton, setDisableButton] = useState(false);
const [countdown, setCountdown] = useState(30);
const logo = getLogo();
useEffect(() => {
let status = localStorage.getItem('status');
@@ -66,10 +68,12 @@ const PasswordResetForm = () => {
);
const { success, message } = res.data;
if (success) {
showSuccess('重置邮件发送成功，请检查邮箱！');
showSuccess(t('auth.reset.notice'));
setInputs({ ...inputs, email: '' });
} else {
showError(message);
setDisableButton(false);
setCountdown(30);
}
setLoading(false);
}
@@ -89,8 +93,8 @@ const PasswordResetForm = () => {
textAlign='center'
style={{ marginBottom: '1.5em' }}
>
<Image src='/logo.png' style={{ marginBottom: '10px' }} />
<Header.Content>密码重置</Header.Content>
<Image src={logo} style={{ marginBottom: '10px' }} />
<Header.Content>{t('auth.reset.title')}</Header.Content>
</Header>
</Card.Header>
<Form size='large'>
@@ -98,7 +102,7 @@ const PasswordResetForm = () => {
fluid
icon='mail'
iconPosition='left'
placeholder='邮箱地址'
placeholder={t('auth.reset.email')}
name='email'
value={email}
onChange={handleChange}
@@ -133,12 +137,12 @@ const PasswordResetForm = () => {
marginBottom: '1.5em',
}}
>
{disableButton ? `重试 (${countdown})` : '提交'}
{disableButton ? t('auth.register.get_code_retry', { countdown }) : t('auth.reset.button')}
</Button>
</Form>
<Message style={{ background: 'transparent', boxShadow: 'none' }}>
<p style={{ fontSize: '0.9em', color: '#666' }}>
系统将向您的邮箱发送一封包含重置链接的邮件，请注意查收。
{t('auth.reset.notice')}
</p>
</Message>
</Card.Content>

56
web/default/src/components/RegisterForm.js
View File

@@ -6,15 +6,16 @@ import {
Header,
Image,
Message,
Segment,
Card,
Divider,
} from 'semantic-ui-react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
import Turnstile from 'react-turnstile';
const RegisterForm = () => {
const { t } = useTranslation();
const [inputs, setInputs] = useState({
username: '',
password: '',
@@ -28,6 +29,8 @@ const RegisterForm = () => {
const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
const [turnstileToken, setTurnstileToken] = useState('');
const [loading, setLoading] = useState(false);
const [disableButton, setDisableButton] = useState(false);
const [countdown, setCountdown] = useState(30);
const logo = getLogo();
let affCode = new URLSearchParams(window.location.search).get('aff');
if (affCode) {
@@ -46,6 +49,19 @@ const RegisterForm = () => {
}
});
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);
}, [disableButton, countdown]);
let navigate = useNavigate();
function handleChange(e) {
@@ -56,16 +72,16 @@ const RegisterForm = () => {
async function handleSubmit(e) {
if (password.length < 8) {
showInfo('密码长度不得小于 8 位！');
showInfo(t('messages.error.password_length'));
return;
}
if (password !== password2) {
showInfo('两次输入的密码不一致');
showInfo(t('messages.error.password_mismatch'));
return;
}
if (username && password) {
if (turnstileEnabled && turnstileToken === '') {
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
showInfo(t('messages.error.turnstile_wait'));
return;
}
setLoading(true);
@@ -80,7 +96,7 @@ const RegisterForm = () => {
const { success, message } = res.data;
if (success) {
navigate('/login');
showSuccess('注册成功！');
showSuccess(t('messages.success.register'));
} else {
showError(message);
}
@@ -91,18 +107,21 @@ const RegisterForm = () => {
const sendVerificationCode = async () => {
if (inputs.email === '') return;
if (turnstileEnabled && turnstileToken === '') {
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
showInfo(t('messages.error.turnstile_wait'));
return;
}
setDisableButton(true);
setLoading(true);
const res = await API.get(
`/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
);
const { success, message } = res.data;
if (success) {
showSuccess('验证码发送成功，请检查你的邮箱！');
showSuccess(t('messages.success.verification_code'));
} else {
showError(message);
setDisableButton(false);
setCountdown(30);
}
setLoading(false);
};
@@ -123,7 +142,7 @@ const RegisterForm = () => {
style={{ marginBottom: '1.5em' }}
>
<Image src={logo} style={{ marginBottom: '10px' }} />
<Header.Content>新用户注册</Header.Content>
<Header.Content>{t('auth.register.title')}</Header.Content>
</Header>
</Card.Header>
<Form size='large'>
@@ -131,7 +150,7 @@ const RegisterForm = () => {
fluid
icon='user'
iconPosition='left'
placeholder='输入用户名，最长 12 位'
placeholder={t('auth.register.username')}
onChange={handleChange}
name='username'
style={{ marginBottom: '1em' }}
@@ -140,7 +159,7 @@ const RegisterForm = () => {
fluid
icon='lock'
iconPosition='left'
placeholder='输入密码，最短 8 位，最长 20 位'
placeholder={t('auth.register.password')}
onChange={handleChange}
name='password'
type='password'
@@ -150,7 +169,7 @@ const RegisterForm = () => {
fluid
icon='lock'
iconPosition='left'
placeholder='再次输入密码'
placeholder={t('auth.register.confirm_password')}
onChange={handleChange}
name='password2'
type='password'
@@ -163,7 +182,7 @@ const RegisterForm = () => {
fluid
icon='mail'
iconPosition='left'
placeholder='输入邮箱地址'
placeholder={t('auth.register.email')}
onChange={handleChange}
name='email'
type='email'
@@ -171,9 +190,10 @@ const RegisterForm = () => {
<Button
onClick={sendVerificationCode}
disabled={loading}
// style={{ backgroundColor: '#2F73FF', color: 'white' }}
>
获取验证码
{disableButton
? t('auth.register.get_code_retry', { countdown })
: t('auth.register.get_code')}
</Button>
}
style={{ marginBottom: '1em' }}
@@ -182,7 +202,7 @@ const RegisterForm = () => {
fluid
icon='lock'
iconPosition='left'
placeholder='输入验证码'
placeholder={t('auth.register.verification_code')}
onChange={handleChange}
name='verification_code'
style={{ marginBottom: '1em' }}
@@ -218,7 +238,7 @@ const RegisterForm = () => {
}}
loading={loading}
>
注册
{t('auth.register.button')}
</Button>
</Form>
@@ -231,9 +251,9 @@ const RegisterForm = () => {
color: '#666',
}}
>
已有账户？
{t('auth.register.has_account')}
<Link to='/login' style={{ color: '#2185d0' }}>
点击登录
{t('auth.register.login')}
</Link>
</div>
</Message>