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

Merge branch 'main' into fix-display-home-content

Browse Source
This commit is contained in:
Calcium-Ion
2024-03-05 23:16:35 +08:00
committed by GitHub
parent 5cb933a278 d5c5c30312
commit 415d296171
28 changed files with 729 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/package.json
View File

@@ -3,10 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@douyinfe/semi-ui": "^2.46.1",
"@douyinfe/semi-icons": "^2.46.1",
"@visactor/vchart": "~1.8.8",
"@douyinfe/semi-ui": "^2.46.1",
"@visactor/react-vchart": "~1.8.8",
"@visactor/vchart": "~1.8.8",
"@visactor/vchart-semi-theme": "~1.8.8",
"axios": "^0.27.2",
"history": "^5.3.0",
@@ -17,6 +17,7 @@
"react-fireworks": "^1.0.4",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-telegram-login": "^1.1.2",
"react-toastify": "^9.0.8",
"react-turnstile": "^1.0.5",
"semantic-ui-css": "^2.5.0",

76
web/src/components/LoginForm.js
View File

@@ -1,14 +1,15 @@
import React, {useContext, useEffect, useState} from 'react';
import {Link, useNavigate, useSearchParams} from 'react-router-dom';
import {UserContext} from '../context/User';
import {API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning} from '../helpers';
import {onGitHubOAuthClicked} from './utils';
import React, { useContext, useEffect, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { UserContext } from '../context/User';
import { API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning } from '../helpers';
import { onGitHubOAuthClicked } from './utils';
import Turnstile from "react-turnstile";
import {Layout, Card, Image, Form, Button, Divider, Modal} from "@douyinfe/semi-ui";
import { Layout, Card, Image, Form, Button, Divider, Modal } from "@douyinfe/semi-ui";
import Title from "@douyinfe/semi-ui/lib/es/typography/title";
import Text from "@douyinfe/semi-ui/lib/es/typography/text";
import TelegramLoginButton from 'react-telegram-login';
import {IconGithubLogo} from '@douyinfe/semi-icons';
import { IconGithubLogo } from '@douyinfe/semi-icons';
const LoginForm = () => {
const [inputs, setInputs] = useState({
@@ -18,7 +19,7 @@ const LoginForm = () => {
});
const [searchParams, setSearchParams] = useSearchParams();
const [submitted, setSubmitted] = useState(false);
const {username, password} = inputs;
const { username, password } = inputs;
const [userState, userDispatch] = useContext(UserContext);
const [turnstileEnabled, setTurnstileEnabled] = useState(false);
const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
@@ -56,9 +57,9 @@ const LoginForm = () => {
const res = await API.get(
`/api/oauth/wechat?code=${inputs.wechat_verification_code}`
);
const {success, message, data} = res.data;
const { success, message, data } = res.data;
if (success) {
userDispatch({type: 'login', payload: data});
userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data));
navigate('/');
showSuccess('登录成功！');
@@ -69,7 +70,7 @@ const LoginForm = () => {
};
function handleChange(name, value) {
setInputs((inputs) => ({...inputs, [name]: value}));
setInputs((inputs) => ({ ...inputs, [name]: value }));
}
async function handleSubmit(e) {
@@ -83,13 +84,13 @@ const LoginForm = () => {
username,
password
});
const {success, message, data} = res.data;
const { success, message, data } = res.data;
if (success) {
userDispatch({type: 'login', payload: data});
userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data));
showSuccess('登录成功！');
if (username === 'root' && password === '123456') {
Modal.error({title: '您正在使用默认密码！', content: '请立刻修改默认密码！', centered: true});
Modal.error({ title: '您正在使用默认密码！', content: '请立刻修改默认密码！', centered: true });
}
navigate('/token');
} else {
@@ -100,16 +101,37 @@ const LoginForm = () => {
}
}
// 添加Telegram登录处理函数
const onTelegramLoginClicked = async (response) => {
const fields = ["id", "first_name", "last_name", "username", "photo_url", "auth_date", "hash", "lang"];
const params = {};
fields.forEach((field) => {
if (response[field]) {
params[field] = response[field];
}
});
const res = await API.get(`/api/oauth/telegram/login`, { params });
const { success, message, data } = res.data;
if (success) {
userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data));
showSuccess('登录成功！');
navigate('/');
} else {
showError(message);
}
};
return (
<div>
<Layout>
<Layout.Header>
</Layout.Header>
<Layout.Content>
<div style={{justifyContent: 'center', display: "flex", marginTop: 120}}>
<div style={{width: 500}}>
<div style={{ justifyContent: 'center', display: "flex", marginTop: 120 }}>
<div style={{ width: 500 }}>
<Card>
<Title heading={2} style={{textAlign: 'center'}}>
<Title heading={2} style={{ textAlign: 'center' }}>
用户登录
</Title>
<Form>
@@ -129,12 +151,12 @@ const LoginForm = () => {
onChange={(value) => handleChange('password', value)}
/>
<Button theme='solid' style={{width: '100%'}} type={'primary'} size='large'
htmlType={'submit'} onClick={handleSubmit}>
<Button theme='solid' style={{ width: '100%' }} type={'primary'} size='large'
htmlType={'submit'} onClick={handleSubmit}>
登录
</Button>
</Form>
<div style={{display: 'flex', justifyContent: 'space-between', marginTop: 20}}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
<Text>
没有账号请先 <Link to='/register'>注册账号</Link>
</Text>
@@ -142,16 +164,16 @@ const LoginForm = () => {
忘记密码 <Link to='/reset'>点击重置</Link>
</Text>
</div>
{status.github_oauth || status.wechat_login ? (
{status.github_oauth || status.wechat_login || status.telegram_oauth ? (
<>
<Divider margin='12px' align='center'>
第三方登录
</Divider>
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
{status.github_oauth ? (
<Button
type='primary'
icon={<IconGithubLogo/>}
icon={<IconGithubLogo />}
onClick={() => onGitHubOAuthClicked(status.github_client_id)}
/>
) : (
@@ -167,6 +189,12 @@ const LoginForm = () => {
{/*) : (*/}
{/* <></>*/}
{/*)}*/}
{status.telegram_oauth ? (
<TelegramLoginButton dataOnauth={onTelegramLoginClicked} botName={status.telegram_bot_name} />
) : (
<></>
)}
</div>
</>
) : (
@@ -208,7 +236,7 @@ const LoginForm = () => {
{/*</Modal>*/}
</Card>
{turnstileEnabled ? (
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
<Turnstile
sitekey={turnstileSiteKey}
onVerify={(token) => {

20
web/src/components/PersonalSetting.js
View File

@@ -21,6 +21,7 @@ import {getQuotaPerUnit, renderQuota, renderQuotaWithPrompt, stringToColor} from
import EditToken from "../pages/Token/EditToken";
import EditUser from "../pages/User/EditUser";
import passwordResetConfirm from "./PasswordResetConfirm";
import TelegramLoginButton from 'react-telegram-login';
const PersonalSetting = () => {
const [userState, userDispatch] = useContext(UserContext);
@@ -443,6 +444,25 @@ const PersonalSetting = () => {
</div>
</div>
<div style={{marginTop: 10}}>
<Typography.Text strong>Telegram</Typography.Text>
<div style={{display: 'flex', justifyContent: 'space-between'}}>
<div>
<Input
value={userState.user && userState.user.telegram_id !== ''?userState.user.telegram_id:'未绑定'}
readonly={true}
></Input>
</div>
<div>
{status.telegram_oauth ?
userState.user.telegram_id !== '' ? <Button disabled={true}>已绑定</Button>
: <TelegramLoginButton dataAuthUrl="/api/oauth/telegram/bind" botName={status.telegram_bot_name} />
: <Button disabled={true}>未启用</Button>
}
</div>
</div>
</div>
<div style={{marginTop: 10}}>
<Space>
<Button onClick={generateAccessToken}>生成系统访问令牌</Button>

113
web/src/components/SystemSetting.js
View File

@@ -1,6 +1,6 @@
import React, {useEffect, useState} from 'react';
import {Button, Divider, Form, Grid, Header, Modal, Message} from 'semantic-ui-react';
import {API, removeTrailingSlash, showError, verifyJSON} from '../helpers';
import React, { useEffect, useState } from 'react';
import { Button, Divider, Form, Grid, Header, Modal, Message } from 'semantic-ui-react';
import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers';
const SystemSetting = () => {
let [inputs, setInputs] = useState({
@@ -20,8 +20,10 @@ const SystemSetting = () => {
EpayId: '',
EpayKey: '',
Price: 7.3,
MinTopUp: 1,
TopupGroupRatio: '',
PayAddress: '',
CustomCallbackAddress: '',
Footer: '',
WeChatAuthEnabled: '',
WeChatServerAddress: '',
@@ -32,7 +34,11 @@ const SystemSetting = () => {
TurnstileSecretKey: '',
RegisterEnabled: '',
EmailDomainRestrictionEnabled: '',
EmailDomainWhitelist: ''
EmailDomainWhitelist: '',
// telegram login
TelegramOAuthEnabled: '',
TelegramBotToken: '',
TelegramBotName: '',
});
const [originInputs, setOriginInputs] = useState({});
let [loading, setLoading] = useState(false);
@@ -42,7 +48,7 @@ const SystemSetting = () => {
const getOptions = async () => {
const res = await API.get('/api/option/');
const {success, message, data} = res.data;
const { success, message, data } = res.data;
if (success) {
let newInputs = {};
data.forEach((item) => {
@@ -58,7 +64,7 @@ const SystemSetting = () => {
setOriginInputs(newInputs);
setEmailDomainWhitelist(newInputs.EmailDomainWhitelist.split(',').map((item) => {
return {key: item, text: item, value: item};
return { key: item, text: item, value: item };
}));
} else {
showError(message);
@@ -77,6 +83,7 @@ const SystemSetting = () => {
case 'EmailVerificationEnabled':
case 'GitHubOAuthEnabled':
case 'WeChatAuthEnabled':
case 'TelegramOAuthEnabled':
case 'TurnstileCheckEnabled':
case 'EmailDomainRestrictionEnabled':
case 'RegisterEnabled':
@@ -89,7 +96,7 @@ const SystemSetting = () => {
key,
value
});
const {success, message} = res.data;
const { success, message } = res.data;
if (success) {
if (key === 'EmailDomainWhitelist') {
value = value.split(',');
@@ -106,7 +113,7 @@ const SystemSetting = () => {
setLoading(false);
};
const handleInputChange = async (e, {name, value}) => {
const handleInputChange = async (e, { name, value }) => {
if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') {
// block disabling password login
setShowPasswordWarningModal(true);
@@ -128,9 +135,11 @@ const SystemSetting = () => {
name === 'TurnstileSiteKey' ||
name === 'TurnstileSecretKey' ||
name === 'EmailDomainWhitelist' ||
name === 'TopupGroupRatio'
name === 'TopupGroupRatio' ||
name === 'TelegramBotToken' ||
name === 'TelegramBotName'
) {
setInputs((inputs) => ({...inputs, [name]: value}));
setInputs((inputs) => ({ ...inputs, [name]: value }));
} else {
await updateOption(name, value);
}
@@ -234,6 +243,12 @@ const SystemSetting = () => {
}
};
const submitTelegramSettings = async () => {
// await updateOption('TelegramOAuthEnabled', inputs.TelegramOAuthEnabled);
await updateOption('TelegramBotToken', inputs.TelegramBotToken);
await updateOption('TelegramBotName', inputs.TelegramBotName);
};
const submitTurnstile = async () => {
if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey);
@@ -280,7 +295,7 @@ const SystemSetting = () => {
更新服务器地址
</Form.Button>
<Divider/>
<Header as='h3'>支付设置（当前仅支持易支付接口，使用上方服务器地址作为回调地址！）</Header>
<Header as='h3'>支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）</Header>
<Form.Group widths='equal'>
<Form.Input
label='支付地址，不填写则不启用在线支付'
@@ -303,14 +318,31 @@ const SystemSetting = () => {
name='EpayKey'
onChange={handleInputChange}
/>
<Form.Input
label='充值价格（x元/美金）'
placeholder='例如：7，就是7元/美金'
value={inputs.Price}
name='Price'
min={0}
onChange={handleInputChange}
</Form.Group>
<Form.Group widths='equal'>
<Form.Input
label='回调地址，不填写则使用上方服务器地址作为回调地址'
placeholder='例如：https://yourdomain.com'
value={inputs.CustomCallbackAddress}
name='CustomCallbackAddress'
onChange={handleInputChange}
/>
<Form.Input
label='充值价格（x元/美金）'
placeholder='例如：7，就是7元/美金'
value={inputs.Price}
name='Price'
min={0}
onChange={handleInputChange}
/>
<Form.Input
label='最低充值数量'
placeholder='例如：2，就是最低充值2$'
value={inputs.MinTopUp}
name='MinTopUp'
min={1}
onChange={handleInputChange}
/>
</Form.Group>
<Form.Group widths='equal'>
@@ -318,7 +350,7 @@ const SystemSetting = () => {
label='充值分组倍率'
name='TopupGroupRatio'
onChange={handleInputChange}
style={{minHeight: 250, fontFamily: 'JetBrains Mono, Consolas'}}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
autoComplete='new-password'
value={inputs.TopupGroupRatio}
placeholder='为一个 JSON 文本，键为组名称，值为倍率'
@@ -327,7 +359,7 @@ const SystemSetting = () => {
<Form.Button onClick={submitPayAddress}>
更新支付设置
</Form.Button>
<Divider/>
<Divider />
<Header as='h3'>配置登录注册</Header>
<Form.Group inline>
<Form.Checkbox
@@ -342,7 +374,7 @@ const SystemSetting = () => {
open={showPasswordWarningModal}
onClose={() => setShowPasswordWarningModal(false)}
size={'tiny'}
style={{maxWidth: '450px'}}
style={{ maxWidth: '450px' }}
>
<Modal.Header>警告</Modal.Header>
<Modal.Content>
@@ -386,6 +418,12 @@ const SystemSetting = () => {
name='WeChatAuthEnabled'
onChange={handleInputChange}
/>
<Form.Checkbox
checked={inputs.TelegramOAuthEnabled === 'true'}
label='允许通过 Telegram 进行登录'
name='TelegramOAuthEnabled'
onChange={handleInputChange}
/>
</Form.Group>
<Form.Group inline>
<Form.Checkbox
@@ -401,7 +439,7 @@ const SystemSetting = () => {
onChange={handleInputChange}
/>
</Form.Group>
<Divider/>
<Divider />
<Header as='h3'>
配置邮箱域名白名单
<Header.Subheader>用以防止恶意用户利用临时邮箱批量注册</Header.Subheader>
@@ -443,13 +481,13 @@ const SystemSetting = () => {
autoComplete='new-password'
placeholder='输入新的允许的邮箱域名'
value={restrictedDomainInput}
onChange={(e, {value}) => {
onChange={(e, { value }) => {
setRestrictedDomainInput(value);
}}
/>
</Form.Group>
<Form.Button onClick={submitEmailDomainWhitelist}>保存邮箱域名白名单设置</Form.Button>
<Divider/>
<Divider />
<Header as='h3'>
配置 SMTP
<Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
@@ -500,7 +538,7 @@ const SystemSetting = () => {
/>
</Form.Group>
<Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
<Divider/>
<Divider />
<Header as='h3'>
配置 GitHub OAuth App
<Header.Subheader>
@@ -538,7 +576,7 @@ const SystemSetting = () => {
<Form.Button onClick={submitGitHubOAuth}>
保存 GitHub OAuth 设置
</Form.Button>
<Divider/>
<Divider />
<Header as='h3'>
配置 WeChat Server
<Header.Subheader>
@@ -582,7 +620,28 @@ const SystemSetting = () => {
<Form.Button onClick={submitWeChat}>
保存 WeChat Server 设置
</Form.Button>
<Divider/>
<Divider />
<Header as='h3'>配置 Telegram 登录</Header>
<Form.Group inline>
<Form.Input
label='Telegram Bot Token'
name='TelegramBotToken'
onChange={handleInputChange}
value={inputs.TelegramBotToken}
placeholder='输入你的 Telegram Bot Token'
/>
<Form.Input
label='Telegram Bot 名称'
name='TelegramBotName'
onChange={handleInputChange}
value={inputs.TelegramBotName}
placeholder='输入你的 Telegram Bot 名称'
/>
</Form.Group>
<Form.Button onClick={submitTelegramSettings}>
保存 Telegram 登录设置
</Form.Button>
<Divider />
<Header as='h3'>
配置 Turnstile
<Header.Subheader>

2
web/src/helpers/render.js
View File

@@ -132,6 +132,8 @@ export const modelColorMap = {
'gpt-4-0314': 'rgb(70,130,180)', // 钢蓝色
'gpt-4-0613': 'rgb(100,149,237)', // 矢车菊蓝
'gpt-4-1106-preview': 'rgb(30,144,255)', // 道奇蓝
'gpt-4-0125-preview': 'rgb(2,177,236)', // 深天蓝
'gpt-4-turbo-preview': 'rgb(2,177,255)', // 深天蓝
'gpt-4-32k': 'rgb(104,111,238)', // 中紫色
'gpt-4-32k-0314': 'rgb(90,105,205)', // 暗灰蓝色
'gpt-4-32k-0613': 'rgb(61,71,139)', // 暗蓝灰色

4
web/src/pages/Channel/EditChannel.js
View File

@@ -241,7 +241,7 @@ const EditChannel = (props) => {
const addCustomModel = () => {
if (customModel.trim() === '') return;
if (inputs.models.includes(customModel)) return;
if (inputs.models.includes(customModel)) return showError("该模型已存在！");
let localModels = [...inputs.models];
localModels.push(customModel);
let localModelOptions = [];
@@ -454,7 +454,7 @@ const EditChannel = (props) => {
placeholder='输入自定义模型名称'
value={customModel}
onChange={(value) => {
setCustomModel(value);
setCustomModel(value.trim());
}}
/>
</div>

217
web/src/pages/Home/index.js
View File

@@ -5,117 +5,126 @@ import { StatusContext } from '../../context/Status';
import { marked } from 'marked';
const Home = () => {
const [statusState] = useContext(StatusContext);
const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
const [homePageContent, setHomePageContent] = useState('');
const [statusState] = useContext(StatusContext);
const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
const [homePageContent, setHomePageContent] = useState('');
const displayNotice = async () => {
const res = await API.get('/api/notice');
const { success, message, data } = res.data;
if (success) {
let oldNotice = localStorage.getItem('notice');
if (data !== oldNotice && data !== '') {
const htmlNotice = marked(data);
showNotice(htmlNotice, true);
localStorage.setItem('notice', data);
}
} else {
showError(message);
}
};
const displayNotice = async () => {
const res = await API.get('/api/notice');
const { success, message, data } = res.data;
if (success) {
let oldNotice = localStorage.getItem('notice');
if (data !== oldNotice && data !== '') {
const htmlNotice = marked(data);
showNotice(htmlNotice, true);
localStorage.setItem('notice', data);
}
} else {
showError(message);
}
};
const displayHomePageContent = async () => {
setHomePageContent(localStorage.getItem('home_page_content') || '');
const res = await API.get('/api/home_page_content');
const { success, message, data } = res.data;
if (success) {
let content = data;
if (!data.startsWith('https://')) {
content = marked.parse(data);
}
setHomePageContent(content);
localStorage.setItem('home_page_content', content);
} else {
showError(message);
setHomePageContent('加载首页内容失败...');
}
setHomePageContentLoaded(true);
};
const displayHomePageContent = async () => {
setHomePageContent(localStorage.getItem('home_page_content') || '');
const res = await API.get('/api/home_page_content');
const { success, message, data } = res.data;
if (success) {
let content = data;
if (!data.startsWith('https://')) {
content = marked.parse(data);
}
setHomePageContent(content);
localStorage.setItem('home_page_content', content);
} else {
showError(message);
setHomePageContent('加载首页内容失败...');
}
setHomePageContentLoaded(true);
};
const getStartTimeString = () => {
const timestamp = statusState?.status?.start_time;
return statusState.status ? timestamp2string(timestamp) : '';
};
const getStartTimeString = () => {
const timestamp = statusState?.status?.start_time;
return statusState.status ? timestamp2string(timestamp) : '';
};
useEffect(() => {
displayNotice().then();
displayHomePageContent().then();
}, []);
return (
<>
useEffect(() => {
displayNotice().then();
displayHomePageContent().then();
}, []);
return (
<>
{
homePageContentLoaded && homePageContent === '' ?
<>
<Card
bordered={false}
headerLine={false}
title='系统状况'
bodyStyle={{ padding: '10px 20px' }}
>
<Row gutter={16}>
<Col span={12}>
<Card
title='系统信息'
headerExtraContent={<span
style={{ fontSize: '12px', color: 'var(--semi-color-text-1)' }}>系统信息总览</span>}>
<p>名称：{statusState?.status?.system_name}</p>
<p>版本：{statusState?.status?.version ? statusState?.status?.version : 'unknown'}</p>
<p>
源码：
<a
href='https://github.com/songquanpeng/one-api'
target='_blank' rel='noreferrer'
>
https://github.com/songquanpeng/one-api
</a>
</p>
<p>启动时间：{getStartTimeString()}</p>
</Card>
</Col>
<Col span={12}>
<Card
title='系统配置'
headerExtraContent={<span
style={{ fontSize: '12px', color: 'var(--semi-color-text-1)' }}>系统配置总览</span>}>
<p>
邮箱验证：
{statusState?.status?.email_verification === true ? '已启用' : '未启用'}
</p>
<p>
GitHub 身份验证：
{statusState?.status?.github_oauth === true ? '已启用' : '未启用'}
</p>
<p>
微信身份验证：
{statusState?.status?.wechat_login === true ? '已启用' : '未启用'}
</p>
<p>
Turnstile 用户校验：
{statusState?.status?.turnstile_check === true ? '已启用' : '未启用'}
</p>
<p>
Telegram 身份验证：
{statusState?.status?.telegram_oauth === true
? '已启用' : '未启用'}
</p>
</Card>
</Col>
</Row>
</Card>
</>
: <>
{
homePageContentLoaded && homePageContent === '' ? <>
<Card
bordered={false}
headerLine={false}
title='系统状况'
bodyStyle={{padding: '10px 20px'}}
>
<Row gutter={16}>
<Col span={12}>
<Card
title='系统信息'
headerExtraContent={<span style={{ fontSize:'12px', color: 'var(--semi-color-text-1)'}}>系统信息总览</span>}>
<p>名称：{statusState?.status?.system_name}</p>
<p>版本：{statusState?.status?.version ? statusState?.status?.version : "unknown"}</p>
<p>
源码：
<a
href='https://github.com/songquanpeng/one-api'
target='_blank' rel="noreferrer"
>
https://github.com/songquanpeng/one-api
</a>
</p>
<p>启动时间：{getStartTimeString()}</p>
</Card>
</Col>
<Col span={12}>
<Card
title='系统配置'
headerExtraContent={<span style={{ fontSize:'12px', color: 'var(--semi-color-text-1)'}}>系统配置总览</span>}>
<p>
邮箱验证：
{statusState?.status?.email_verification === true ? '已启用': '未启用'}
</p>
<p>
GitHub 身份验证：
{statusState?.status?.github_oauth === true ? '已启用' : '未启用'}
</p>
<p>
微信身份验证：
{statusState?.status?.wechat_login === true ? '已启用' : '未启用'}
</p>
<p>
Turnstile 用户校验：
{statusState?.status?.turnstile_check === true ? '已启用' : '未启用'}
</p>
</Card>
</Col>
</Row>
</Card>
</> : <>
{
homePageContent.startsWith('https://') ? <iframe
src={homePageContent}
style={{ width: '100%', height: '100vh', border: 'none' }}
/> : <div style={{ fontSize: 'larger' }} dangerouslySetInnerHTML={{ __html: homePageContent }}></div>
}
</>
homePageContent.startsWith('https://') ?
<iframe src={homePageContent} style={{ width: '100%', height: '100vh', border: 'none' }} /> :
<div style={{ fontSize: 'larger' }} dangerouslySetInnerHTML={{ __html: homePageContent }}></div>
}
</>
}
</>
);
</>
);
};
export default Home;

17
web/src/pages/TopUp/index.js
View File

@@ -10,6 +10,7 @@ const TopUp = () => {
const [topUpCount, setTopUpCount] = useState(10);
const [minTopupCount, setMinTopUpCount] = useState(1);
const [amount, setAmount] = useState(0.0);
const [minTopUp, setMinTopUp] = useState(1);
const [topUpLink, setTopUpLink] = useState('');
const [enableOnlineTopUp, setEnableOnlineTopUp] = useState(false);
const [userQuota, setUserQuota] = useState(0);
@@ -61,6 +62,10 @@ const TopUp = () => {
if (amount === 0) {
await getAmount();
}
if (topUpCount < minTopUp) {
showInfo('充值数量不能小于' + minTopUp);
return;
}
setPayWay(payment)
setOpen(true);
}
@@ -69,6 +74,10 @@ const TopUp = () => {
if (amount === 0) {
await getAmount();
}
if (topUpCount < minTopUp) {
showInfo('充值数量不能小于' + minTopUp);
return;
}
setOpen(false);
try {
const res = await API.post('/api/user/pay', {
@@ -132,6 +141,9 @@ const TopUp = () => {
if (status.top_up_link) {
setTopUpLink(status.top_up_link);
}
if (status.min_topup) {
setMinTopUp(status.min_topup);
}
if (status.enable_online_topup) {
setEnableOnlineTopUp(status.enable_online_topup);
}
@@ -239,12 +251,13 @@ const TopUp = () => {
disabled={!enableOnlineTopUp}
field={'redemptionCount'}
label={'实付金额：' + renderAmount()}
placeholder='充值数量'
placeholder={'充值数量，最低' + minTopUp + '$'}
name='redemptionCount'
type={'number'}
value={topUpCount}
suffix={'$'}
min={1}
min={minTopUp}
defaultValue={minTopUp}
max={100000}
onChange={async (value) => {
if (value < 1) {

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

@@ -1,9 +1,9 @@
import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {API, isMobile, showError, showSuccess} from '../../helpers';
import { API, isMobile, showError, showSuccess } from '../../helpers';
import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
import Title from "@douyinfe/semi-ui/lib/es/typography/title";
import {SideSheet, Space, Button, Spin, Input, Typography, Select, Divider} from "@douyinfe/semi-ui";
import { SideSheet, Space, Button, Spin, Input, Typography, Select, Divider } from "@douyinfe/semi-ui";
const EditUser = (props) => {
const userId = props.editingUser.id;
@@ -19,8 +19,8 @@ const EditUser = (props) => {
group: 'default'
});
const [groupOptions, setGroupOptions] = useState([]);
const { username, display_name, password, github_id, wechat_id, email, quota, group } =
inputs;
const { username, display_name, password, github_id, wechat_id, telegram_id, email, quota, group } =
inputs;
const handleInputChange = (name, value) => {
setInputs((inputs) => ({ ...inputs, [name]: value }));
};
@@ -88,126 +88,132 @@ const EditUser = (props) => {
};
return (
<>
<SideSheet
placement={'right'}
title={<Title level={3}>{'编辑用户'}</Title>}
headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
visible={props.visible}
footer={
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
<Space>
<Button theme='solid' size={'large'} onClick={submit}>提交</Button>
<Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
</Space>
<>
<SideSheet
placement={'right'}
title={<Title level={3}>{'编辑用户'}</Title>}
headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
visible={props.visible}
footer={
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Space>
<Button theme='solid' size={'large'} onClick={submit}>提交</Button>
<Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
</Space>
</div>
}
closeIcon={null}
onCancel={() => handleCancel()}
width={isMobile() ? '100%' : 600}
>
<Spin spinning={loading}>
<div style={{ marginTop: 20 }}>
<Typography.Text>用户名</Typography.Text>
</div>
<Input
label='用户名'
name='username'
placeholder={'请输入新的用户名'}
onChange={value => handleInputChange('username', value)}
value={username}
autoComplete='new-password'
/>
<div style={{ marginTop: 20 }}>
<Typography.Text>密码</Typography.Text>
</div>
<Input
label='密码'
name='password'
type={'password'}
placeholder={'请输入新的密码，最短 8 位'}
onChange={value => handleInputChange('password', value)}
value={password}
autoComplete='new-password'
/>
<div style={{ marginTop: 20 }}>
<Typography.Text>显示名称</Typography.Text>
</div>
<Input
label='显示名称'
name='display_name'
placeholder={'请输入新的显示名称'}
onChange={value => handleInputChange('display_name', value)}
value={display_name}
autoComplete='new-password'
/>
{
userId && <>
<div style={{ marginTop: 20 }}>
<Typography.Text>分组</Typography.Text>
</div>
}
closeIcon={null}
onCancel={() => handleCancel()}
width={isMobile() ? '100%' : 600}
>
<Spin spinning={loading}>
<div style={{marginTop: 20}}>
<Typography.Text>用户名</Typography.Text>
</div>
<Input
label='用户名'
name='username'
placeholder={'请输入新的用户名'}
onChange={value => handleInputChange('username', value)}
value={username}
<Select
placeholder={'请选择分组'}
name='group'
fluid
search
selection
allowAdditions
additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
onChange={value => handleInputChange('group', value)}
value={inputs.group}
autoComplete='new-password'
/>
<div style={{marginTop: 20}}>
<Typography.Text>密码</Typography.Text>
</div>
<Input
label='密码'
name='password'
type={'password'}
placeholder={'请输入新的密码，最短 8 位'}
onChange={value => handleInputChange('password', value)}
value={password}
optionList={groupOptions}
/>
<div style={{ marginTop: 20 }}>
<Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
</div>
<Input
name='quota'
placeholder={'请输入新的剩余额度'}
onChange={value => handleInputChange('quota', value)}
value={quota}
type={'number'}
autoComplete='new-password'
/>
<div style={{marginTop: 20}}>
<Typography.Text>显示名称</Typography.Text>
</div>
<Input
label='显示名称'
name='display_name'
placeholder={'请输入新的显示名称'}
onChange={value => handleInputChange('display_name', value)}
value={display_name}
autoComplete='new-password'
/>
{
userId && <>
<div style={{marginTop: 20}}>
<Typography.Text>分组</Typography.Text>
</div>
<Select
placeholder={'请选择分组'}
name='group'
fluid
search
selection
allowAdditions
additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
onChange={value => handleInputChange('group', value)}
value={inputs.group}
autoComplete='new-password'
optionList={groupOptions}
/>
<div style={{marginTop: 20}}>
<Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
</div>
<Input
name='quota'
placeholder={'请输入新的剩余额度'}
onChange={value => handleInputChange('quota', value)}
value={quota}
type={'number'}
autoComplete='new-password'
/>
</>
}
<Divider style={{marginTop: 20}}>以下信息不可修改</Divider>
<div style={{marginTop: 20}}>
<Typography.Text>已绑定的 GitHub 账户</Typography.Text>
</div>
<Input
name='github_id'
value={github_id}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readonly
/>
<div style={{marginTop: 20}}>
<Typography.Text>已绑定的微信账户</Typography.Text>
</div>
<Input
name='wechat_id'
value={wechat_id}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readonly
/>
<div style={{marginTop: 20}}>
<Typography.Text>已绑定的邮箱账户</Typography.Text>
</div>
<Input
name='email'
value={email}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readonly
/>
</Spin>
</SideSheet>
</>
/>
</>
}
<Divider style={{ marginTop: 20 }}>以下信息不可修改</Divider>
<div style={{ marginTop: 20 }}>
<Typography.Text>已绑定的 GitHub 账户</Typography.Text>
</div>
<Input
name='github_id'
value={github_id}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readonly
/>
<div style={{ marginTop: 20 }}>
<Typography.Text>已绑定的微信账户</Typography.Text>
</div>
<Input
name='wechat_id'
value={wechat_id}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readonly
/>
<Input
name='telegram_id'
value={telegram_id}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readonly
/>
<div style={{ marginTop: 20 }}>
<Typography.Text>已绑定的邮箱账户</Typography.Text>
</div>
<Input
name='email'
value={email}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readonly
/>
</Spin>
</SideSheet>
</>
);
};