Skip to content

phsl / new-api

Go to a project
Commit add3b05d by CaIon
Options

chore: reformat code

parent 7c547cbc
Showing with 5779 additions and 5845 deletions
common/model-ratio.go
...@@ -13,7 +13,7 @@ import ( ...@@ -13,7 +13,7 @@ import (
// TODO: when a new api is enabled, check the pricing here // TODO: when a new api is enabled, check the pricing here
// 1 === $0.002 / 1K tokens // 1 === $0.002 / 1K tokens
// 1 === ￥0.014 / 1k tokens // 1 === ￥0.014 / 1k tokens
var ModelRatio = map[string]float64{ var DefaultModelRatio = map[string]float64{
//"midjourney": 50, //"midjourney": 50,
"gpt-4-gizmo-*": 15, "gpt-4-gizmo-*": 15,
"gpt-4": 15, "gpt-4": 15,
...@@ -115,6 +115,7 @@ var DefaultModelPrice = map[string]float64{ ...@@ -115,6 +115,7 @@ var DefaultModelPrice = map[string]float64{
} }
var ModelPrice = map[string]float64{} var ModelPrice = map[string]float64{}
var ModelRatio = map[string]float64{}
func ModelPrice2JSONString() string { func ModelPrice2JSONString() string {
if len(ModelPrice) == 0 { if len(ModelPrice) == 0 {
...@@ -150,6 +151,9 @@ func GetModelPrice(name string, printErr bool) float64 { ...@@ -150,6 +151,9 @@ func GetModelPrice(name string, printErr bool) float64 {
} }
func ModelRatio2JSONString() string { func ModelRatio2JSONString() string {
if len(ModelRatio) == 0 {
ModelRatio = DefaultModelRatio
}
jsonBytes, err := json.Marshal(ModelRatio) jsonBytes, err := json.Marshal(ModelRatio)
if err != nil { if err != nil {
SysError("error marshalling model ratio: " + err.Error()) SysError("error marshalling model ratio: " + err.Error())
...@@ -163,6 +167,9 @@ func UpdateModelRatioByJSONString(jsonStr string) error { ...@@ -163,6 +167,9 @@ func UpdateModelRatioByJSONString(jsonStr string) error {
} }
func GetModelRatio(name string) float64 { func GetModelRatio(name string) float64 {
if len(ModelRatio) == 0 {
ModelRatio = DefaultModelRatio
}
if strings.HasPrefix(name, "gpt-4-gizmo") { if strings.HasPrefix(name, "gpt-4-gizmo") {
name = "gpt-4-gizmo-*" name = "gpt-4-gizmo-*"
} }
......
web/package.json
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"prettier": "^2.7.1", "prettier": "2.8.8",
"typescript": "4.4.2" "typescript": "4.4.2"
}, },
"prettier": { "prettier": {
......
web/src/App.js
...@@ -8,12 +8,11 @@ import LoginForm from './components/LoginForm'; ...@@ -8,12 +8,11 @@ import LoginForm from './components/LoginForm';
import NotFound from './pages/NotFound'; import NotFound from './pages/NotFound';
import Setting from './pages/Setting'; import Setting from './pages/Setting';
import EditUser from './pages/User/EditUser'; import EditUser from './pages/User/EditUser';
import { API, getLogo, getSystemName, showError, showNotice } from './helpers'; import { getLogo, getSystemName } from './helpers';
import PasswordResetForm from './components/PasswordResetForm'; import PasswordResetForm from './components/PasswordResetForm';
import GitHubOAuth from './components/GitHubOAuth'; import GitHubOAuth from './components/GitHubOAuth';
import PasswordResetConfirm from './components/PasswordResetConfirm'; import PasswordResetConfirm from './components/PasswordResetConfirm';
import { UserContext } from './context/User'; import { UserContext } from './context/User';
import { StatusContext } from './context/Status';
import Channel from './pages/Channel'; import Channel from './pages/Channel';
import Token from './pages/Token'; import Token from './pages/Token';
import EditChannel from './pages/Channel/EditChannel'; import EditChannel from './pages/Channel/EditChannel';
...@@ -21,12 +20,13 @@ import Redemption from './pages/Redemption'; ...@@ -21,12 +20,13 @@ import Redemption from './pages/Redemption';
import TopUp from './pages/TopUp'; import TopUp from './pages/TopUp';
import Log from './pages/Log'; import Log from './pages/Log';
import Chat from './pages/Chat'; import Chat from './pages/Chat';
import {Layout} from "@douyinfe/semi-ui"; import { Layout } from '@douyinfe/semi-ui';
import Midjourney from "./pages/Midjourney"; import Midjourney from './pages/Midjourney';
import Detail from "./pages/Detail"; import Detail from './pages/Detail';
const Home = lazy(() => import('./pages/Home')); const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About')); const About = lazy(() => import('./pages/About'));
function App() { function App() {
const [userState, userDispatch] = useContext(UserContext); const [userState, userDispatch] = useContext(UserContext);
// const [statusState, statusDispatch] = useContext(StatusContext); // const [statusState, statusDispatch] = useContext(StatusContext);
...@@ -47,7 +47,7 @@ function App() { ...@@ -47,7 +47,7 @@ function App() {
} }
let logo = getLogo(); let logo = getLogo();
if (logo) { if (logo) {
let linkElement = document.querySelector("link[rel~='icon']"); let linkElement = document.querySelector('link[rel~=\'icon\']');
if (linkElement) { if (linkElement) {
linkElement.href = logo; linkElement.href = logo;
} }
...@@ -56,185 +56,185 @@ function App() { ...@@ -56,185 +56,185 @@ function App() {
return ( return (
<Layout> <Layout>
<Layout.Content> <Layout.Content>
<Routes> <Routes>
<Route <Route
path='/' path="/"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<Home /> <Home />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/channel' path="/channel"
element={ element={
<PrivateRoute> <PrivateRoute>
<Channel /> <Channel />
</PrivateRoute> </PrivateRoute>
} }
/> />
<Route <Route
path='/channel/edit/:id' path="/channel/edit/:id"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<EditChannel /> <EditChannel />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/channel/add' path="/channel/add"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<EditChannel /> <EditChannel />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/token' path="/token"
element={ element={
<PrivateRoute> <PrivateRoute>
<Token /> <Token />
</PrivateRoute> </PrivateRoute>
} }
/> />
<Route <Route
path='/redemption' path="/redemption"
element={ element={
<PrivateRoute> <PrivateRoute>
<Redemption /> <Redemption />
</PrivateRoute> </PrivateRoute>
} }
/> />
<Route <Route
path='/user' path="/user"
element={ element={
<PrivateRoute> <PrivateRoute>
<User /> <User />
</PrivateRoute> </PrivateRoute>
} }
/> />
<Route <Route
path='/user/edit/:id' path="/user/edit/:id"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<EditUser /> <EditUser />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/user/edit' path="/user/edit"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<EditUser /> <EditUser />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/user/reset' path="/user/reset"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<PasswordResetConfirm /> <PasswordResetConfirm />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/login' path="/login"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<LoginForm /> <LoginForm />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/register' path="/register"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<RegisterForm /> <RegisterForm />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/reset' path="/reset"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<PasswordResetForm /> <PasswordResetForm />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/oauth/github' path="/oauth/github"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<GitHubOAuth /> <GitHubOAuth />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/setting' path="/setting"
element={ element={
<PrivateRoute> <PrivateRoute>
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<Setting /> <Setting />
</Suspense> </Suspense>
</PrivateRoute> </PrivateRoute>
} }
/> />
<Route <Route
path='/topup' path="/topup"
element={ element={
<PrivateRoute> <PrivateRoute>
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<TopUp /> <TopUp />
</Suspense> </Suspense>
</PrivateRoute> </PrivateRoute>
} }
/> />
<Route <Route
path='/log' path="/log"
element={ element={
<PrivateRoute> <PrivateRoute>
<Log /> <Log />
</PrivateRoute> </PrivateRoute>
} }
/> />
<Route <Route
path='/detail' path="/detail"
element={ element={
<PrivateRoute> <PrivateRoute>
<Detail /> <Detail />
</PrivateRoute> </PrivateRoute>
} }
/> />
<Route <Route
path='/midjourney' path="/midjourney"
element={ element={
<PrivateRoute> <PrivateRoute>
<Midjourney /> <Midjourney />
</PrivateRoute> </PrivateRoute>
} }
/> />
<Route <Route
path='/about' path="/about"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<About /> <About />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path='/chat' path="/chat"
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<Chat /> <Chat />
</Suspense> </Suspense>
} }
/> />
<Route path='*' element={ <Route path="*" element={
<NotFound /> <NotFound />
} /> } />
</Routes> </Routes>
</Layout.Content> </Layout.Content>
</Layout> </Layout>
); );
} }
......
web/src/components/ChannelsTable.js
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from 'react';
import { import { API, isMobile, shouldShowPrompt, showError, showInfo, showSuccess, timestamp2string } from '../helpers';
API,
isMobile, import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants';
shouldShowPrompt, import { renderGroup, renderNumberWithPoint, renderQuota } from '../helpers/render';
showError,
showInfo,
showSuccess,
timestamp2string
} from '../helpers';
import {CHANNEL_OPTIONS, ITEMS_PER_PAGE} from '../constants';
import {renderGroup, renderNumber, renderNumberWithPoint, renderQuota, renderQuotaWithPrompt} from '../helpers/render';
import { import {
Avatar,
Tag,
Table,
Button, Button,
Popover, Dropdown,
Form, Form,
Modal, InputNumber,
Popconfirm, Popconfirm,
Space, Space,
Tooltip, SplitButtonGroup,
Switch, Switch,
Typography, InputNumber, Dropdown, SplitButtonGroup Table,
} from "@douyinfe/semi-ui"; Tag,
import EditChannel from "../pages/Channel/EditChannel"; Tooltip,
import {IconTreeTriangleDown} from "@douyinfe/semi-icons"; Typography
} from '@douyinfe/semi-ui';
import EditChannel from '../pages/Channel/EditChannel';
import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
function renderTimestamp(timestamp) { function renderTimestamp(timestamp) {
return ( return (
<> <>
{timestamp2string(timestamp)} {timestamp2string(timestamp)}
</> </>
); );
} }
let type2label = undefined; let type2label = undefined;
function renderType(type) { function renderType(type) {
if (!type2label) { if (!type2label) {
type2label = new Map; type2label = new Map();
for (let i = 0; i < CHANNEL_OPTIONS.length; i++) { for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i]; type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i];
}
type2label[0] = {value: 0, text: '未知类型', color: 'grey'};
} }
return <Tag size='large' color={type2label[type]?.color}>{type2label[type]?.text}</Tag>; type2label[0] = { value: 0, text: '未知类型', color: 'grey' };
}
return <Tag size="large" color={type2label[type]?.color}>{type2label[type]?.text}</Tag>;
} }
const ChannelsTable = () => { const ChannelsTable = () => {
const columns = [ const columns = [
// { // {
// title: '', // title: '',
// dataIndex: 'checkbox', // dataIndex: 'checkbox',
// className: 'checkbox', // className: 'checkbox',
// }, // },
{ {
title: 'ID', title: 'ID',
dataIndex: 'id', dataIndex: 'id'
}, },
{ {
title: '名称', title: '名称',
dataIndex: 'name', dataIndex: 'name'
}, },
{ {
title: '分组', title: '分组',
dataIndex: 'group', dataIndex: 'group',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
<Space spacing={2}> <Space spacing={2}>
{ {
text.split(',').map((item, index) => { text.split(',').map((item, index) => {
return (renderGroup(item)) return (renderGroup(item));
})
}
</Space>
</div>
);
},
},
{
title: '类型',
dataIndex: 'type',
render: (text, record, index) => {
return (
<div>
{renderType(text)}
</div>
);
},
},
{
title: '状态',
dataIndex: 'status',
render: (text, record, index) => {
return (
<div>
{renderStatus(text)}
</div>
);
},
},
{
title: '响应时间',
dataIndex: 'response_time',
render: (text, record, index) => {
return (
<div>
{renderResponseTime(text)}
</div>
);
},
},
{
title: '已用/剩余',
dataIndex: 'expired_time',
render: (text, record, index) => {
return (
<div>
<Space spacing={1}>
<Tooltip content={'已用额度'}>
<Tag color='white' type='ghost' size='large'>{renderQuota(record.used_quota)}</Tag>
</Tooltip>
<Tooltip content={'剩余额度' + record.balance + '，点击更新'}>
<Tag color='white' type='ghost' size='large' onClick={() => {updateChannelBalance(record)}}>${renderNumberWithPoint(record.balance)}</Tag>
</Tooltip>
</Space>
</div>
);
},
},
{
title: '优先级',
dataIndex: 'priority',
render: (text, record, index) => {
return (
<div>
<InputNumber
style={{width: 70}}
name='priority'
onBlur={e => {
manageChannel(record.id, 'priority', record, e.target.value);
}}
keepFocus={true}
innerButtons
defaultValue={record.priority}
min={-999}
/>
</div>
);
},
},
{
title: '权重',
dataIndex: 'weight',
render: (text, record, index) => {
return (
<div>
<InputNumber
style={{width: 70}}
name='weight'
onBlur={e => {
manageChannel(record.id, 'weight', record, e.target.value);
}}
keepFocus={true}
innerButtons
defaultValue={record.weight}
min={0}
/>
</div>
);
},
},
{
title: '',
dataIndex: 'operate',
render: (text, record, index) => (
<div>
<SplitButtonGroup style={{marginRight: 1}} aria-label="测试操作项目组">
<Button theme="light" onClick={()=>{testChannel(record, '')}}>测试</Button>
<Dropdown trigger="click" position="bottomRight" menu={record.test_models}
>
<Button style={ { padding: '8px 4px'}} type="primary" icon={<IconTreeTriangleDown />}></Button>
</Dropdown>
</SplitButtonGroup>
{/*<Button theme='light' type='primary' style={{marginRight: 1}} onClick={()=>testChannel(record)}>测试</Button>*/}
<Popconfirm
title="确定是否要删除此渠道？"
content="此修改将不可逆"
okType={'danger'}
position={'left'}
onConfirm={() => {
manageChannel(record.id, 'delete', record).then(
() => {
removeRecord(record.id);
}
)
}}
>
<Button theme='light' type='danger' style={{marginRight: 1}}>删除</Button>
</Popconfirm>
{
record.status === 1 ?
<Button theme='light' type='warning' style={{marginRight: 1}} onClick={
async () => {
manageChannel(
record.id,
'disable',
record
)
}
}>禁用</Button> :
<Button theme='light' type='secondary' style={{marginRight: 1}} onClick={
async () => {
manageChannel(
record.id,
'enable',
record
);
}
}>启用</Button>
}
<Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={
() => {
setEditingChannel(record);
setShowEdit(true);
}
}>编辑</Button>
</div>
),
},
];
const [channels, setChannels] = useState([]);
const [loading, setLoading] = useState(true);
const [activePage, setActivePage] = useState(1);
const [idSort, setIdSort] = useState(false);
const [searchKeyword, setSearchKeyword] = useState('');
const [searchGroup, setSearchGroup] = useState('');
const [searchModel, setSearchModel] = useState('');
const [searching, setSearching] = useState(false);
const [updatingBalance, setUpdatingBalance] = useState(false);
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
const [showPrompt, setShowPrompt] = useState(shouldShowPrompt("channel-test"));
const [channelCount, setChannelCount] = useState(pageSize);
const [groupOptions, setGroupOptions] = useState([]);
const [showEdit, setShowEdit] = useState(false);
const [enableBatchDelete, setEnableBatchDelete] = useState(false);
const [editingChannel, setEditingChannel] = useState({
id: undefined,
});
const [selectedChannels, setSelectedChannels] = useState([]);
const removeRecord = id => {
let newDataSource = [...channels];
if (id != null) {
let idx = newDataSource.findIndex(data => data.id === id);
if (idx > -1) {
newDataSource.splice(idx, 1);
setChannels(newDataSource);
}
}
};
const setChannelFormat = (channels) => {
for (let i = 0; i < channels.length; i++) {
channels[i].key = '' + channels[i].id;
let test_models = []
channels[i].models.split(',').forEach((item, index) => {
test_models.push({
node: 'item',
name: item,
onClick: () => {
testChannel(channels[i], item)
}
}) })
}) }
channels[i].test_models = test_models </Space>
} </div>
// data.key = '' + data.id );
setChannels(channels); }
if (channels.length >= pageSize) { },
setChannelCount(channels.length + pageSize); {
} else { title: '类型',
setChannelCount(channels.length); dataIndex: 'type',
} render: (text, record, index) => {
} return (
<div>
const loadChannels = async (startIdx, pageSize, idSort) => { {renderType(text)}
setLoading(true); </div>
const res = await API.get(`/api/channel/?p=${startIdx}&page_size=${pageSize}&id_sort=${idSort}`); );
const {success, message, data} = res.data; }
if (success) { },
if (startIdx === 0) { {
setChannelFormat(data); title: '状态',
} else { dataIndex: 'status',
let newChannels = [...channels]; render: (text, record, index) => {
newChannels.splice(startIdx * pageSize, data.length, ...data); return (
setChannelFormat(newChannels); <div>
} {renderStatus(text)}
} else { </div>
showError(message); );
} }
setLoading(false); },
}; {
title: '响应时间',
const refresh = async () => { dataIndex: 'response_time',
await loadChannels(activePage - 1, pageSize, idSort); render: (text, record, index) => {
}; return (
<div>
useEffect(() => { {renderResponseTime(text)}
// console.log('default effect') </div>
const localIdSort = localStorage.getItem('id-sort') === 'true'; );
const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE; }
setIdSort(localIdSort) },
setPageSize(localPageSize) {
loadChannels(0, localPageSize, localIdSort) title: '已用/剩余',
.then() dataIndex: 'expired_time',
.catch((reason) => { render: (text, record, index) => {
showError(reason); return (
}); <div>
fetchGroups().then(); <Space spacing={1}>
}, []); <Tooltip content={'已用额度'}>
<Tag color="white" type="ghost" size="large">{renderQuota(record.used_quota)}</Tag>
const manageChannel = async (id, action, record, value) => { </Tooltip>
let data = {id}; <Tooltip content={'剩余额度' + record.balance + '，点击更新'}>
let res; <Tag color="white" type="ghost" size="large" onClick={() => {
switch (action) { updateChannelBalance(record);
case 'delete': }}>${renderNumberWithPoint(record.balance)}</Tag>
res = await API.delete(`/api/channel/${id}/`); </Tooltip>
break; </Space>
case 'enable': </div>
data.status = 1; );
res = await API.put('/api/channel/', data); }
break; },
case 'disable': {
data.status = 2; title: '优先级',
res = await API.put('/api/channel/', data); dataIndex: 'priority',
break; render: (text, record, index) => {
case 'priority': return (
if (value === '') { <div>
return; <InputNumber
style={{ width: 70 }}
name="priority"
onBlur={e => {
manageChannel(record.id, 'priority', record, e.target.value);
}}
keepFocus={true}
innerButtons
defaultValue={record.priority}
min={-999}
/>
</div>
);
}
},
{
title: '权重',
dataIndex: 'weight',
render: (text, record, index) => {
return (
<div>
<InputNumber
style={{ width: 70 }}
name="weight"
onBlur={e => {
manageChannel(record.id, 'weight', record, e.target.value);
}}
keepFocus={true}
innerButtons
defaultValue={record.weight}
min={0}
/>
</div>
);
}
},
{
title: '',
dataIndex: 'operate',
render: (text, record, index) => (
<div>
<SplitButtonGroup style={{ marginRight: 1 }} aria-label="测试操作项目组">
<Button theme="light" onClick={() => {
testChannel(record, '');
}}>测试</Button>
<Dropdown trigger="click" position="bottomRight" menu={record.test_models}
>
<Button style={{ padding: '8px 4px' }} type="primary" icon={<IconTreeTriangleDown />}></Button>
</Dropdown>
</SplitButtonGroup>
{/*<Button theme='light' type='primary' style={{marginRight: 1}} onClick={()=>testChannel(record)}>测试</Button>*/}
<Popconfirm
title="确定是否要删除此渠道？"
content="此修改将不可逆"
okType={'danger'}
position={'left'}
onConfirm={() => {
manageChannel(record.id, 'delete', record).then(
() => {
removeRecord(record.id);
} }
data.priority = parseInt(value); );
res = await API.put('/api/channel/', data); }}
break; >
case 'weight': <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
if (value === '') { </Popconfirm>
return; {
record.status === 1 ?
<Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
async () => {
manageChannel(
record.id,
'disable',
record
);
} }
data.weight = parseInt(value); }>禁用</Button> :
if (data.weight < 0) { <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
data.weight = 0; async () => {
manageChannel(
record.id,
'enable',
record
);
} }
res = await API.put('/api/channel/', data); }>启用</Button>
break; }
} <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
const {success, message} = res.data; () => {
if (success) { setEditingChannel(record);
showSuccess('操作成功完成！'); setShowEdit(true);
let channel = res.data.data;
let newChannels = [...channels];
if (action === 'delete') {
} else {
record.status = channel.status;
} }
setChannels(newChannels); }>编辑</Button>
} else { </div>
showError(message); )
} }
}; ];
const renderStatus = (status) => { const [channels, setChannels] = useState([]);
switch (status) { const [loading, setLoading] = useState(true);
case 1: const [activePage, setActivePage] = useState(1);
return <Tag size='large' color='green'>已启用</Tag>; const [idSort, setIdSort] = useState(false);
case 2: const [searchKeyword, setSearchKeyword] = useState('');
return ( const [searchGroup, setSearchGroup] = useState('');
<Tag size='large' color='yellow'> const [searchModel, setSearchModel] = useState('');
已禁用 const [searching, setSearching] = useState(false);
</Tag> const [updatingBalance, setUpdatingBalance] = useState(false);
); const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
case 3: const [showPrompt, setShowPrompt] = useState(shouldShowPrompt('channel-test'));
return ( const [channelCount, setChannelCount] = useState(pageSize);
<Tag size='large' color='yellow'> const [groupOptions, setGroupOptions] = useState([]);
自动禁用 const [showEdit, setShowEdit] = useState(false);
</Tag> const [enableBatchDelete, setEnableBatchDelete] = useState(false);
); const [editingChannel, setEditingChannel] = useState({
default: id: undefined
return ( });
<Tag size='large' color='grey'> const [selectedChannels, setSelectedChannels] = useState([]);
未知状态
</Tag> const removeRecord = id => {
); let newDataSource = [...channels];
} if (id != null) {
}; let idx = newDataSource.findIndex(data => data.id === id);
const renderResponseTime = (responseTime) => { if (idx > -1) {
let time = responseTime / 1000; newDataSource.splice(idx, 1);
time = time.toFixed(2) + ' 秒'; setChannels(newDataSource);
if (responseTime === 0) { }
return <Tag size='large' color='grey'>未测试</Tag>; }
} else if (responseTime <= 1000) { };
return <Tag size='large' color='green'>{time}</Tag>;
} else if (responseTime <= 3000) { const setChannelFormat = (channels) => {
return <Tag size='large' color='lime'>{time}</Tag>; for (let i = 0; i < channels.length; i++) {
} else if (responseTime <= 5000) { channels[i].key = '' + channels[i].id;
return <Tag size='large' color='yellow'>{time}</Tag>; let test_models = [];
} else { channels[i].models.split(',').forEach((item, index) => {
return <Tag size='large' color='red'>{time}</Tag>; test_models.push({
} node: 'item',
}; name: item,
onClick: () => {
const searchChannels = async (searchKeyword, searchGroup, searchModel) => { testChannel(channels[i], item);
if (searchKeyword === '' && searchGroup === '' && searchModel === '') { }
// if keyword is blank, load files instead. });
await loadChannels(0, pageSize, idSort); });
setActivePage(1); channels[i].test_models = test_models;
return; }
} // data.key = '' + data.id
setSearching(true); setChannels(channels);
const res = await API.get(`/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}`); if (channels.length >= pageSize) {
const {success, message, data} = res.data; setChannelCount(channels.length + pageSize);
if (success) { } else {
setChannels(data); setChannelCount(channels.length);
setActivePage(1); }
} else { };
showError(message);
} const loadChannels = async (startIdx, pageSize, idSort) => {
setSearching(false); setLoading(true);
}; const res = await API.get(`/api/channel/?p=${startIdx}&page_size=${pageSize}&id_sort=${idSort}`);
const { success, message, data } = res.data;
const testChannel = async (record, model) => { if (success) {
const res = await API.get(`/api/channel/test/${record.id}?model=${model}`); if (startIdx === 0) {
const {success, message, time} = res.data; setChannelFormat(data);
if (success) { } else {
record.response_time = time * 1000; let newChannels = [...channels];
record.test_time = Date.now() / 1000; newChannels.splice(startIdx * pageSize, data.length, ...data);
showInfo(`通道 ${record.name} 测试成功，耗时 ${time.toFixed(2)} 秒。`); setChannelFormat(newChannels);
} else { }
showError(message); } else {
} showError(message);
}; }
setLoading(false);
const testAllChannels = async () => { };
const res = await API.get(`/api/channel/test`);
const {success, message} = res.data; const refresh = async () => {
if (success) { await loadChannels(activePage - 1, pageSize, idSort);
showInfo('已成功开始测试所有通道，请刷新页面查看结果。'); };
} else {
showError(message); useEffect(() => {
} // console.log('default effect')
}; const localIdSort = localStorage.getItem('id-sort') === 'true';
const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE;
const deleteAllDisabledChannels = async () => { setIdSort(localIdSort);
const res = await API.delete(`/api/channel/disabled`); setPageSize(localPageSize);
const {success, message, data} = res.data; loadChannels(0, localPageSize, localIdSort)
if (success) { .then()
showSuccess(`已删除所有禁用渠道，共计 ${data} 个`); .catch((reason) => {
await refresh(); showError(reason);
} else { });
showError(message); fetchGroups().then();
} }, []);
};
const manageChannel = async (id, action, record, value) => {
const updateChannelBalance = async (record) => { let data = { id };
const res = await API.get(`/api/channel/update_balance/${record.id}/`); let res;
const {success, message, balance} = res.data; switch (action) {
if (success) { case 'delete':
record.balance = balance; res = await API.delete(`/api/channel/${id}/`);
record.balance_updated_time = Date.now() / 1000; break;
showInfo(`通道 ${record.name} 余额更新成功！`); case 'enable':
} else { data.status = 1;
showError(message); res = await API.put('/api/channel/', data);
} break;
}; case 'disable':
data.status = 2;
const updateAllChannelsBalance = async () => { res = await API.put('/api/channel/', data);
setUpdatingBalance(true); break;
const res = await API.get(`/api/channel/update_balance`); case 'priority':
const {success, message} = res.data; if (value === '') {
if (success) { return;
showInfo('已更新完毕所有已启用通道余额！');
} else {
showError(message);
} }
setUpdatingBalance(false); data.priority = parseInt(value);
}; res = await API.put('/api/channel/', data);
break;
const batchDeleteChannels = async () => { case 'weight':
if (selectedChannels.length === 0) { if (value === '') {
showError('请先选择要删除的通道！'); return;
return;
} }
setLoading(true); data.weight = parseInt(value);
let ids = []; if (data.weight < 0) {
selectedChannels.forEach((channel) => { data.weight = 0;
ids.push(channel.id);
});
const res = await API.post(`/api/channel/batch`, {ids: ids});
const {success, message, data} = res.data;
if (success) {
showSuccess(`已删除 ${data} 个通道！`);
await refresh();
} else {
showError(message);
} }
setLoading(false); res = await API.put('/api/channel/', data);
break;
} }
const { success, message } = res.data;
const fixChannelsAbilities = async () => { if (success) {
const res = await API.post(`/api/channel/fix`); showSuccess('操作成功完成！');
const {success, message, data} = res.data; let channel = res.data.data;
if (success) { let newChannels = [...channels];
showSuccess(`已修复 ${data} 个通道！`); if (action === 'delete') {
await refresh();
} else { } else {
showError(message); record.status = channel.status;
} }
setChannels(newChannels);
} else {
showError(message);
}
};
const renderStatus = (status) => {
switch (status) {
case 1:
return <Tag size="large" color="green">已启用</Tag>;
case 2:
return (
<Tag size="large" color="yellow">
已禁用
</Tag>
);
case 3:
return (
<Tag size="large" color="yellow">
自动禁用
</Tag>
);
default:
return (
<Tag size="large" color="grey">
未知状态
</Tag>
);
}
};
const renderResponseTime = (responseTime) => {
let time = responseTime / 1000;
time = time.toFixed(2) + ' 秒';
if (responseTime === 0) {
return <Tag size="large" color="grey">未测试</Tag>;
} else if (responseTime <= 1000) {
return <Tag size="large" color="green">{time}</Tag>;
} else if (responseTime <= 3000) {
return <Tag size="large" color="lime">{time}</Tag>;
} else if (responseTime <= 5000) {
return <Tag size="large" color="yellow">{time}</Tag>;
} else {
return <Tag size="large" color="red">{time}</Tag>;
}
};
const searchChannels = async (searchKeyword, searchGroup, searchModel) => {
if (searchKeyword === '' && searchGroup === '' && searchModel === '') {
// if keyword is blank, load files instead.
await loadChannels(0, pageSize, idSort);
setActivePage(1);
return;
}
setSearching(true);
const res = await API.get(`/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}`);
const { success, message, data } = res.data;
if (success) {
setChannels(data);
setActivePage(1);
} else {
showError(message);
} }
setSearching(false);
};
const testChannel = async (record, model) => {
const res = await API.get(`/api/channel/test/${record.id}?model=${model}`);
const { success, message, time } = res.data;
if (success) {
record.response_time = time * 1000;
record.test_time = Date.now() / 1000;
showInfo(`通道 ${record.name} 测试成功，耗时 ${time.toFixed(2)} 秒。`);
} else {
showError(message);
}
};
const testAllChannels = async () => {
const res = await API.get(`/api/channel/test`);
const { success, message } = res.data;
if (success) {
showInfo('已成功开始测试所有通道，请刷新页面查看结果。');
} else {
showError(message);
}
};
const deleteAllDisabledChannels = async () => {
const res = await API.delete(`/api/channel/disabled`);
const { success, message, data } = res.data;
if (success) {
showSuccess(`已删除所有禁用渠道，共计 ${data} 个`);
await refresh();
} else {
showError(message);
}
};
const updateChannelBalance = async (record) => {
const res = await API.get(`/api/channel/update_balance/${record.id}/`);
const { success, message, balance } = res.data;
if (success) {
record.balance = balance;
record.balance_updated_time = Date.now() / 1000;
showInfo(`通道 ${record.name} 余额更新成功！`);
} else {
showError(message);
}
};
const updateAllChannelsBalance = async () => {
setUpdatingBalance(true);
const res = await API.get(`/api/channel/update_balance`);
const { success, message } = res.data;
if (success) {
showInfo('已更新完毕所有已启用通道余额！');
} else {
showError(message);
}
setUpdatingBalance(false);
};
let pageData = channels.slice((activePage - 1) * pageSize, activePage * pageSize); const batchDeleteChannels = async () => {
if (selectedChannels.length === 0) {
showError('请先选择要删除的通道！');
return;
}
setLoading(true);
let ids = [];
selectedChannels.forEach((channel) => {
ids.push(channel.id);
});
const res = await API.post(`/api/channel/batch`, { ids: ids });
const { success, message, data } = res.data;
if (success) {
showSuccess(`已删除 ${data} 个通道！`);
await refresh();
} else {
showError(message);
}
setLoading(false);
};
const fixChannelsAbilities = async () => {
const res = await API.post(`/api/channel/fix`);
const { success, message, data } = res.data;
if (success) {
showSuccess(`已修复 ${data} 个通道！`);
await refresh();
} else {
showError(message);
}
};
const handlePageChange = page => { let pageData = channels.slice((activePage - 1) * pageSize, activePage * pageSize);
setActivePage(page);
if (page === Math.ceil(channels.length / pageSize) + 1) {
// In this case we have to load more data and then append them.
loadChannels(page - 1, pageSize, idSort).then(r => {
});
}
};
const handlePageSizeChange = async(size) => {
localStorage.setItem('page-size', size + '')
setPageSize(size)
setActivePage(1)
loadChannels(0, size, idSort)
.then()
.catch((reason) => {
showError(reason);
})
};
const fetchGroups = async () => {
try {
let res = await API.get(`/api/group/`);
// add 'all' option
// res.data.data.unshift('all');
setGroupOptions(res.data.data.map((group) => ({
label: group,
value: group,
})));
} catch (error) {
showError(error.message);
}
};
const closeEdit = () => { const handlePageChange = page => {
setShowEdit(false); setActivePage(page);
if (page === Math.ceil(channels.length / pageSize) + 1) {
// In this case we have to load more data and then append them.
loadChannels(page - 1, pageSize, idSort).then(r => {
});
} }
};
const handlePageSizeChange = async (size) => {
localStorage.setItem('page-size', size + '');
setPageSize(size);
setActivePage(1);
loadChannels(0, size, idSort)
.then()
.catch((reason) => {
showError(reason);
});
};
const fetchGroups = async () => {
try {
let res = await API.get(`/api/group/`);
// add 'all' option
// res.data.data.unshift('all');
setGroupOptions(res.data.data.map((group) => ({
label: group,
value: group
})));
} catch (error) {
showError(error.message);
}
};
const closeEdit = () => {
setShowEdit(false);
};
const handleRow = (record, index) => { const handleRow = (record, index) => {
if (record.status !== 1) { if (record.status !== 1) {
return { return {
style: { style: {
background: 'var(--semi-color-disabled-border)', background: 'var(--semi-color-disabled-border)'
},
};
} else {
return {};
} }
}; };
} else {
return {};
return ( }
<> };
<EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel}/>
<Form onSubmit={() => {searchChannels(searchKeyword, searchGroup, searchModel)}} labelPosition='left'>
<div style={{display: 'flex'}}> return (
<Space> <>
<Form.Input <EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel} />
field='search_keyword' <Form onSubmit={() => {
label='搜索渠道关键词' searchChannels(searchKeyword, searchGroup, searchModel);
placeholder='ID，名称和密钥 ...' }} labelPosition="left">
value={searchKeyword} <div style={{ display: 'flex' }}>
loading={searching} <Space>
onChange={(v)=>{ <Form.Input
setSearchKeyword(v.trim()) field="search_keyword"
}} label="搜索渠道关键词"
/> placeholder="ID，名称和密钥 ..."
<Form.Input value={searchKeyword}
field='search_model' loading={searching}
label='模型' onChange={(v) => {
placeholder='模型关键字' setSearchKeyword(v.trim());
value={searchModel} }}
loading={searching} />
onChange={(v)=>{ <Form.Input
setSearchModel(v.trim()) field="search_model"
}} label="模型"
/> placeholder="模型关键字"
<Form.Select field="group" label='分组' optionList={groupOptions} onChange={(v) => { value={searchModel}
setSearchGroup(v) loading={searching}
searchChannels(searchKeyword, v, searchModel) onChange={(v) => {
}}/> setSearchModel(v.trim());
<Button label='查询' type="primary" htmlType="submit" className="btn-margin-right" }}
style={{marginRight: 8}}>查询</Button> />
</Space> <Form.Select field="group" label="分组" optionList={groupOptions} onChange={(v) => {
</div> setSearchGroup(v);
</Form> searchChannels(searchKeyword, v, searchModel);
<div style={{marginTop: 10, display: 'flex'}}> }} />
<Space> <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
<Space> style={{ marginRight: 8 }}>查询</Button>
<Typography.Text strong>使用ID排序</Typography.Text> </Space>
<Switch checked={idSort} label='使用ID排序' uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => { </div>
localStorage.setItem('id-sort', v + '') </Form>
setIdSort(v) <div style={{ marginTop: 10, display: 'flex' }}>
loadChannels(0, pageSize, v) <Space>
.then() <Space>
.catch((reason) => { <Typography.Text strong>使用ID排序</Typography.Text>
showError(reason); <Switch checked={idSort} label="使用ID排序" uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => {
}) localStorage.setItem('id-sort', v + '');
}}></Switch> setIdSort(v);
</Space> loadChannels(0, pageSize, v)
</Space> .then()
</div> .catch((reason) => {
showError(reason);
<Table className={'channel-table'} style={{marginTop: 15}} columns={columns} dataSource={pageData} pagination={{ });
currentPage: activePage, }}></Switch>
pageSize: pageSize, </Space>
total: channelCount, </Space>
pageSizeOpts: [10, 20, 50, 100], </div>
showSizeChanger: true,
formatPageText:(page) => '', <Table className={'channel-table'} style={{ marginTop: 15 }} columns={columns} dataSource={pageData} pagination={{
onPageSizeChange: (size) => { currentPage: activePage,
handlePageSizeChange(size).then() pageSize: pageSize,
}, total: channelCount,
onPageChange: handlePageChange, pageSizeOpts: [10, 20, 50, 100],
}} loading={loading} onRow={handleRow} rowSelection={ showSizeChanger: true,
enableBatchDelete ? formatPageText: (page) => '',
{ onPageSizeChange: (size) => {
onChange: (selectedRowKeys, selectedRows) => { handlePageSizeChange(size).then();
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); },
setSelectedChannels(selectedRows); onPageChange: handlePageChange
}, }} loading={loading} onRow={handleRow} rowSelection={
} : null enableBatchDelete ?
}/> {
<div style={{display: isMobile()?'':'flex', marginTop: isMobile()?0:-45, zIndex: 999, position: 'relative', pointerEvents: 'none'}}> onChange: (selectedRowKeys, selectedRows) => {
<Space style={{pointerEvents: 'auto', marginTop: isMobile() ? 0 : 45}}> // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
<Button theme='light' type='primary' style={{marginRight: 8}} onClick={ setSelectedChannels(selectedRows);
() => { }
setEditingChannel({ } : null
id: undefined, } />
}); <div style={{
setShowEdit(true) display: isMobile() ? '' : 'flex',
} marginTop: isMobile() ? 0 : -45,
}>添加渠道</Button> zIndex: 999,
<Popconfirm position: 'relative',
title="确定？" pointerEvents: 'none'
okType={'warning'} }}>
onConfirm={testAllChannels} <Space style={{ pointerEvents: 'auto', marginTop: isMobile() ? 0 : 45 }}>
position={isMobile()?'top':'top'} <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
> () => {
<Button theme='light' type='warning' style={{marginRight: 8}}>测试所有通道</Button> setEditingChannel({
</Popconfirm> id: undefined
<Popconfirm });
title="确定？" setShowEdit(true);
okType={'secondary'} }
onConfirm={updateAllChannelsBalance} }>添加渠道</Button>
> <Popconfirm
<Button theme='light' type='secondary' style={{marginRight: 8}}>更新所有已启用通道余额</Button> title="确定？"
</Popconfirm> okType={'warning'}
<Popconfirm onConfirm={testAllChannels}
title="确定是否要删除禁用通道？" position={isMobile() ? 'top' : 'top'}
content="此修改将不可逆" >
okType={'danger'} <Button theme="light" type="warning" style={{ marginRight: 8 }}>测试所有通道</Button>
onConfirm={deleteAllDisabledChannels} </Popconfirm>
> <Popconfirm
<Button theme='light' type='danger' style={{marginRight: 8}}>删除禁用通道</Button> title="确定？"
</Popconfirm> okType={'secondary'}
onConfirm={updateAllChannelsBalance}
<Button theme='light' type='primary' style={{marginRight: 8}} onClick={refresh}>刷新</Button> >
</Space> <Button theme="light" type="secondary" style={{ marginRight: 8 }}>更新所有已启用通道余额</Button>
{/*<div style={{width: '100%', pointerEvents: 'none', position: 'absolute'}}>*/} </Popconfirm>
<Popconfirm
{/*</div>*/} title="确定是否要删除禁用通道？"
</div> content="此修改将不可逆"
<div style={{marginTop: 20}}> okType={'danger'}
<Space> onConfirm={deleteAllDisabledChannels}
<Typography.Text strong>开启批量删除</Typography.Text> >
<Switch label='开启批量删除' uncheckedText="关" aria-label="是否开启批量删除" onChange={(v) => { <Button theme="light" type="danger" style={{ marginRight: 8 }}>删除禁用通道</Button>
setEnableBatchDelete(v) </Popconfirm>
}}></Switch>
<Popconfirm <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={refresh}>刷新</Button>
title="确定是否要删除所选通道？" </Space>
content="此修改将不可逆" {/*<div style={{width: '100%', pointerEvents: 'none', position: 'absolute'}}>*/}
okType={'danger'}
onConfirm={batchDeleteChannels} {/*</div>*/}
disabled={!enableBatchDelete} </div>
position={'top'} <div style={{ marginTop: 20 }}>
> <Space>
<Button disabled={!enableBatchDelete} theme='light' type='danger' style={{marginRight: 8}}>删除所选通道</Button> <Typography.Text strong>开启批量删除</Typography.Text>
</Popconfirm> <Switch label="开启批量删除" uncheckedText="关" aria-label="是否开启批量删除" onChange={(v) => {
<Popconfirm setEnableBatchDelete(v);
title="确定是否要修复数据库一致性？" }}></Switch>
content="进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用" <Popconfirm
okType={'warning'} title="确定是否要删除所选通道？"
onConfirm={fixChannelsAbilities} content="此修改将不可逆"
position={'top'} okType={'danger'}
> onConfirm={batchDeleteChannels}
<Button theme='light' type='secondary' style={{marginRight: 8}}>修复数据库一致性</Button> disabled={!enableBatchDelete}
</Popconfirm> position={'top'}
</Space> >
</div> <Button disabled={!enableBatchDelete} theme="light" type="danger"
</> style={{ marginRight: 8 }}>删除所选通道</Button>
); </Popconfirm>
<Popconfirm
title="确定是否要修复数据库一致性？"
content="进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用"
okType={'warning'}
onConfirm={fixChannelsAbilities}
position={'top'}
>
<Button theme="light" type="secondary" style={{ marginRight: 8 }}>修复数据库一致性</Button>
</Popconfirm>
</Space>
</div>
</>
);
}; };
export default ChannelsTable; export default ChannelsTable;
web/src/components/Footer.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { getFooterHTML, getSystemName } from '../helpers'; import { getFooterHTML, getSystemName } from '../helpers';
import {Layout} from "@douyinfe/semi-ui"; import { Layout } from '@douyinfe/semi-ui';
const Footer = () => { const Footer = () => {
const systemName = getSystemName(); const systemName = getSystemName();
...@@ -29,30 +29,30 @@ const Footer = () => { ...@@ -29,30 +29,30 @@ const Footer = () => {
return ( return (
<Layout> <Layout>
<Layout.Content style={{textAlign: 'center'}}> <Layout.Content style={{ textAlign: 'center' }}>
{footer ? ( {footer ? (
<div <div
className='custom-footer' className="custom-footer"
dangerouslySetInnerHTML={{ __html: footer }} dangerouslySetInnerHTML={{ __html: footer }}
></div> ></div>
) : ( ) : (
<div className='custom-footer'> <div className="custom-footer">
<a <a
href='https://github.com/Calcium-Ion/new-api' href="https://github.com/Calcium-Ion/new-api"
target='_blank' target="_blank" rel="noreferrer"
> >
New API {process.env.REACT_APP_VERSION}{' '} New API {process.env.REACT_APP_VERSION}{' '}
</a> </a>
由{' '} 由{' '}
<a href='https://github.com/Calcium-Ion' target='_blank'> <a href="https://github.com/Calcium-Ion" target="_blank" rel="noreferrer">
Calcium-Ion Calcium-Ion
</a>{' '} </a>{' '}
开发，基于{' '} 开发，基于{' '}
<a href='https://github.com/songquanpeng/one-api' target='_blank'> <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noreferrer">
One API v0.5.4 One API v0.5.4
</a>{' '} </a>{' '}
，本项目根据{' '} ，本项目根据{' '}
<a href='https://opensource.org/licenses/mit-license.php'> <a href="https://opensource.org/licenses/mit-license.php">
MIT 许可证 MIT 许可证
</a>{' '} </a>{' '}
授权 授权
......
web/src/components/GitHubOAuth.js
...@@ -49,7 +49,7 @@ const GitHubOAuth = () => { ...@@ -49,7 +49,7 @@ const GitHubOAuth = () => {
return ( return (
<Segment style={{ minHeight: '300px' }}> <Segment style={{ minHeight: '300px' }}>
<Dimmer active inverted> <Dimmer active inverted>
<Loader size='large'>{prompt}</Loader> <Loader size="large">{prompt}</Loader>
</Dimmer> </Dimmer>
</Segment> </Segment>
); );
......
web/src/components/HeaderBar.js
import React, {useContext, useEffect, useRef, useState} from 'react'; import React, { useContext, useEffect, useState } from 'react';
import {Link, useNavigate} from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import {UserContext} from '../context/User'; import { UserContext } from '../context/User';
import {API, getLogo, getSystemName, isAdmin, isMobile, showSuccess} from '../helpers'; import { API, getLogo, getSystemName, showSuccess } from '../helpers';
import '../index.css'; import '../index.css';
import fireworks from 'react-fireworks'; import fireworks from 'react-fireworks';
import { import { IconHelpCircle, IconKey, IconUser } from '@douyinfe/semi-icons';
IconKey, import { Avatar, Dropdown, Layout, Nav, Switch } from '@douyinfe/semi-ui';
IconUser, import { stringToColor } from '../helpers/render';
IconHelpCircle
} from '@douyinfe/semi-icons';
import {Nav, Avatar, Dropdown, Layout, Switch} from '@douyinfe/semi-ui';
import {stringToColor} from "../helpers/render";
// HeaderBar Buttons // HeaderBar Buttons
let headerButtons = [ let headerButtons = [
{ {
text: '关于', text: '关于',
itemKey: 'about', itemKey: 'about',
to: '/about', to: '/about',
icon: <IconHelpCircle/> icon: <IconHelpCircle />
}, }
]; ];
if (localStorage.getItem('chat_link')) { if (localStorage.getItem('chat_link')) {
headerButtons.splice(1, 0, { headerButtons.splice(1, 0, {
name: '聊天', name: '聊天',
to: '/chat', to: '/chat',
icon: 'comments' icon: 'comments'
}); });
} }
const HeaderBar = () => { const HeaderBar = () => {
const [userState, userDispatch] = useContext(UserContext); const [userState, userDispatch] = useContext(UserContext);
let navigate = useNavigate(); let navigate = useNavigate();
const [showSidebar, setShowSidebar] = useState(false); const [showSidebar, setShowSidebar] = useState(false);
const [dark, setDark] = useState(false); const [dark, setDark] = useState(false);
const systemName = getSystemName(); const systemName = getSystemName();
const logo = getLogo(); const logo = getLogo();
var themeMode = localStorage.getItem('theme-mode'); var themeMode = localStorage.getItem('theme-mode');
const currentDate = new Date(); const currentDate = new Date();
// enable fireworks on new year(1.1 and 2.9-2.24) // enable fireworks on new year(1.1 and 2.9-2.24)
const isNewYear = (currentDate.getMonth() === 0 && currentDate.getDate() === 1) || (currentDate.getMonth() === 1 && currentDate.getDate() >= 9 && currentDate.getDate() <= 24); const isNewYear = (currentDate.getMonth() === 0 && currentDate.getDate() === 1) || (currentDate.getMonth() === 1 && currentDate.getDate() >= 9 && currentDate.getDate() <= 24);
async function logout() { async function logout() {
setShowSidebar(false); setShowSidebar(false);
await API.get('/api/user/logout'); await API.get('/api/user/logout');
showSuccess('注销成功!'); showSuccess('注销成功!');
userDispatch({type: 'logout'}); userDispatch({ type: 'logout' });
localStorage.removeItem('user'); localStorage.removeItem('user');
navigate('/login'); navigate('/login');
} }
const handleNewYearClick = () => { const handleNewYearClick = () => {
fireworks.init("root",{}); fireworks.init('root', {});
fireworks.start(); fireworks.start();
setTimeout(() => { setTimeout(() => {
fireworks.stop(); fireworks.stop();
setTimeout(() => { setTimeout(() => {
window.location.reload(); window.location.reload();
}, 10000); }, 10000);
}, 3000); }, 3000);
}; };
useEffect(() => { useEffect(() => {
if (themeMode === 'dark') { if (themeMode === 'dark') {
switchMode(true); switchMode(true);
} }
if (isNewYear) { if (isNewYear) {
console.log('Happy New Year!'); console.log('Happy New Year!');
} }
}, []); }, []);
const switchMode = (model) => { const switchMode = (model) => {
const body = document.body; const body = document.body;
if (!model) { if (!model) {
body.removeAttribute('theme-mode'); body.removeAttribute('theme-mode');
localStorage.setItem('theme-mode', 'light'); localStorage.setItem('theme-mode', 'light');
} else { } else {
body.setAttribute('theme-mode', 'dark'); body.setAttribute('theme-mode', 'dark');
localStorage.setItem('theme-mode', 'dark'); localStorage.setItem('theme-mode', 'dark');
} }
setDark(model); setDark(model);
}; };
return ( return (
<> <>
<Layout> <Layout>
<div style={{width: '100%'}}> <div style={{ width: '100%' }}>
<Nav <Nav
mode={'horizontal'} mode={'horizontal'}
// bodyStyle={{ height: 100 }} // bodyStyle={{ height: 100 }}
renderWrapper={({itemElement, isSubNav, isInSubNav, props}) => { renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
const routerMap = { const routerMap = {
about: "/about", about: '/about',
login: "/login", login: '/login',
register: "/register", register: '/register'
}; };
return ( return (
<Link <Link
style={{textDecoration: "none"}} style={{ textDecoration: 'none' }}
to={routerMap[props.itemKey]} to={routerMap[props.itemKey]}
> >
{itemElement} {itemElement}
</Link> </Link>
); );
}} }}
selectedKeys={[]} selectedKeys={[]}
// items={headerButtons} // items={headerButtons}
onSelect={key => { onSelect={key => {
}} }}
footer={ footer={
<> <>
{isNewYear && {isNewYear &&
// happy new year // happy new year
<Dropdown <Dropdown
position="bottomRight" position="bottomRight"
render={ render={
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item onClick={handleNewYearClick}>Happy New Year!!!</Dropdown.Item> <Dropdown.Item onClick={handleNewYearClick}>Happy New Year!!!</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
} }
> >
<Nav.Item itemKey={'new-year'} text={'🏮'}/> <Nav.Item itemKey={'new-year'} text={'🏮'} />
</Dropdown> </Dropdown>
} }
<Nav.Item itemKey={'about'} icon={<IconHelpCircle />} /> <Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
<Switch checkedText="🌞" size={'large'} checked={dark} uncheckedText="🌙" onChange={switchMode} /> <Switch checkedText="🌞" size={'large'} checked={dark} uncheckedText="🌙" onChange={switchMode} />
{userState.user ? {userState.user ?
<> <>
<Dropdown <Dropdown
position="bottomRight" position="bottomRight"
render={ render={
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item onClick={logout}>退出</Dropdown.Item> <Dropdown.Item onClick={logout}>退出</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
} }
>
<Avatar size="small" color={stringToColor(userState.user.username)} style={{ margin: 4 }}>
{userState.user.username[0]}
</Avatar>
<span>{userState.user.username}</span>
</Dropdown>
</>
:
<>
<Nav.Item itemKey={'login'} text={'登录'} icon={<IconKey />} />
<Nav.Item itemKey={'register'} text={'注册'} icon={<IconUser />} />
</>
}
</>
}
> >
</Nav> <Avatar size="small" color={stringToColor(userState.user.username)} style={{ margin: 4 }}>
</div> {userState.user.username[0]}
</Layout> </Avatar>
</> <span>{userState.user.username}</span>
); </Dropdown>
</>
:
<>
<Nav.Item itemKey={'login'} text={'登录'} icon={<IconKey />} />
<Nav.Item itemKey={'register'} text={'注册'} icon={<IconUser />} />
</>
}
</>
}
>
</Nav>
</div>
</Layout>
</>
);
}; };
export default HeaderBar; export default HeaderBar;
web/src/components/Loading.js
import React from 'react'; import React from 'react';
import { Segment, Dimmer, Loader } from 'semantic-ui-react'; import { Dimmer, Loader, Segment } from 'semantic-ui-react';
const Loading = ({ prompt: name = 'page' }) => { const Loading = ({ prompt: name = 'page' }) => {
return ( return (
......
web/src/components/LoginForm.js
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom'; import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { UserContext } from '../context/User'; import { UserContext } from '../context/User';
import { API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning } from '../helpers'; import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
import { onGitHubOAuthClicked } from './utils'; import { onGitHubOAuthClicked } from './utils';
import Turnstile from "react-turnstile"; import Turnstile from 'react-turnstile';
import { Layout, Card, Image, Form, Button, Divider, Modal, Icon } from '@douyinfe/semi-ui'; import { Button, Card, Divider, Form, Icon, Layout, Modal } from '@douyinfe/semi-ui';
import Title from "@douyinfe/semi-ui/lib/es/typography/title"; import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import Text from "@douyinfe/semi-ui/lib/es/typography/text"; import Text from '@douyinfe/semi-ui/lib/es/typography/text';
import TelegramLoginButton from 'react-telegram-login'; import TelegramLoginButton from 'react-telegram-login';
import { IconGithubLogo } from '@douyinfe/semi-icons'; import { IconGithubLogo } from '@douyinfe/semi-icons';
import WeChatIcon from './WeChatIcon'; import WeChatIcon from './WeChatIcon';
const LoginForm = () => { const LoginForm = () => {
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
username: '', username: '',
password: '', password: '',
wechat_verification_code: '' wechat_verification_code: ''
}); });
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const [submitted, setSubmitted] = useState(false); const [submitted, setSubmitted] = useState(false);
const { username, password } = inputs; const { username, password } = inputs;
const [userState, userDispatch] = useContext(UserContext); const [userState, userDispatch] = useContext(UserContext);
const [turnstileEnabled, setTurnstileEnabled] = useState(false); const [turnstileEnabled, setTurnstileEnabled] = useState(false);
const [turnstileSiteKey, setTurnstileSiteKey] = useState(''); const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
const [turnstileToken, setTurnstileToken] = useState(''); const [turnstileToken, setTurnstileToken] = useState('');
let navigate = useNavigate(); let navigate = useNavigate();
const [status, setStatus] = useState({}); const [status, setStatus] = useState({});
const logo = getLogo(); const logo = getLogo();
useEffect(() => { useEffect(() => {
if (searchParams.get('expired')) { if (searchParams.get('expired')) {
showError('未登录或登录已过期，请重新登录！'); showError('未登录或登录已过期，请重新登录！');
} }
let status = localStorage.getItem('status'); let status = localStorage.getItem('status');
if (status) { if (status) {
status = JSON.parse(status); status = JSON.parse(status);
setStatus(status); setStatus(status);
if (status.turnstile_check) { if (status.turnstile_check) {
setTurnstileEnabled(true); setTurnstileEnabled(true);
setTurnstileSiteKey(status.turnstile_site_key); setTurnstileSiteKey(status.turnstile_site_key);
} }
} }
}, []); }, []);
const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
const onWeChatLoginClicked = () => { const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
setShowWeChatLoginModal(true);
};
const onSubmitWeChatVerificationCode = async () => { const onWeChatLoginClicked = () => {
if (turnstileEnabled && turnstileToken === '') { setShowWeChatLoginModal(true);
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); };
return;
}
const res = await API.get(
`/api/oauth/wechat?code=${inputs.wechat_verification_code}`
);
const { success, message, data } = res.data;
if (success) {
userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data));
navigate('/');
showSuccess('登录成功！');
setShowWeChatLoginModal(false);
} else {
showError(message);
}
};
function handleChange(name, value) { const onSubmitWeChatVerificationCode = async () => {
setInputs((inputs) => ({ ...inputs, [name]: value })); if (turnstileEnabled && turnstileToken === '') {
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
return;
} }
const res = await API.get(
`/api/oauth/wechat?code=${inputs.wechat_verification_code}`
);
const { success, message, data } = res.data;
if (success) {
userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data));
navigate('/');
showSuccess('登录成功！');
setShowWeChatLoginModal(false);
} else {
showError(message);
}
};
async function handleSubmit(e) { function handleChange(name, value) {
if (turnstileEnabled && turnstileToken === '') { setInputs((inputs) => ({ ...inputs, [name]: value }));
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); }
return;
} async function handleSubmit(e) {
setSubmitted(true); if (turnstileEnabled && turnstileToken === '') {
if (username && password) { showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, { return;
username, }
password setSubmitted(true);
}); if (username && password) {
const { success, message, data } = res.data; const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, {
if (success) { username,
userDispatch({ type: 'login', payload: data }); password
localStorage.setItem('user', JSON.stringify(data)); });
showSuccess('登录成功！'); const { success, message, data } = res.data;
if (username === 'root' && password === '123456') { if (success) {
Modal.error({ title: '您正在使用默认密码！', content: '请立刻修改默认密码！', centered: true }); userDispatch({ type: 'login', payload: data });
} localStorage.setItem('user', JSON.stringify(data));
navigate('/token'); showSuccess('登录成功！');
} else { if (username === 'root' && password === '123456') {
showError(message); Modal.error({ title: '您正在使用默认密码！', content: '请立刻修改默认密码！', centered: true });
}
} else {
showError('请输入用户名和密码！');
} }
navigate('/token');
} else {
showError(message);
}
} else {
showError('请输入用户名和密码！');
} }
}
// 添加Telegram登录处理函数 // 添加Telegram登录处理函数
const onTelegramLoginClicked = async (response) => { const onTelegramLoginClicked = async (response) => {
const fields = ["id", "first_name", "last_name", "username", "photo_url", "auth_date", "hash", "lang"]; const fields = ['id', 'first_name', 'last_name', 'username', 'photo_url', 'auth_date', 'hash', 'lang'];
const params = {}; const params = {};
fields.forEach((field) => { fields.forEach((field) => {
if (response[field]) { if (response[field]) {
params[field] = response[field]; params[field] = response[field];
} }
}); });
const res = await API.get(`/api/oauth/telegram/login`, { params }); const res = await API.get(`/api/oauth/telegram/login`, { params });
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 });
localStorage.setItem('user', JSON.stringify(data)); localStorage.setItem('user', JSON.stringify(data));
showSuccess('登录成功！'); showSuccess('登录成功！');
navigate('/'); navigate('/');
} else { } else {
showError(message); showError(message);
} }
}; };
return ( return (
<div> <div>
<Layout> <Layout>
<Layout.Header> <Layout.Header>
</Layout.Header> </Layout.Header>
<Layout.Content> <Layout.Content>
<div style={{ justifyContent: 'center', display: "flex", marginTop: 120 }}> <div style={{ justifyContent: 'center', display: 'flex', marginTop: 120 }}>
<div style={{ width: 500 }}> <div style={{ width: 500 }}>
<Card> <Card>
<Title heading={2} style={{ textAlign: 'center' }}> <Title heading={2} style={{ textAlign: 'center' }}>
用户登录 用户登录
</Title> </Title>
<Form> <Form>
<Form.Input <Form.Input
field={'username'} field={'username'}
label={'用户名'} label={'用户名'}
placeholder='用户名' placeholder="用户名"
name='username' name="username"
onChange={(value) => handleChange('username', value)} onChange={(value) => handleChange('username', value)}
/> />
<Form.Input <Form.Input
field={'password'} field={'password'}
label={'密码'} label={'密码'}
placeholder='密码' placeholder="密码"
name='password' name="password"
type='password' type="password"
onChange={(value) => handleChange('password', value)} onChange={(value) => handleChange('password', value)}
/> />
<Button theme='solid' style={{ width: '100%' }} type={'primary'} size='large' <Button theme="solid" style={{ width: '100%' }} type={'primary'} size="large"
htmlType={'submit'} onClick={handleSubmit}> htmlType={'submit'} onClick={handleSubmit}>
登录 登录
</Button> </Button>
</Form> </Form>
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}> <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
<Text> <Text>
没有账号请先 <Link to='/register'>注册账号</Link> 没有账号请先 <Link to="/register">注册账号</Link>
</Text> </Text>
<Text> <Text>
忘记密码 <Link to='/reset'>点击重置</Link> 忘记密码 <Link to="/reset">点击重置</Link>
</Text> </Text>
</div> </div>
{status.github_oauth || status.wechat_login || status.telegram_oauth ? ( {status.github_oauth || status.wechat_login || status.telegram_oauth ? (
<> <>
<Divider margin='12px' align='center'> <Divider margin="12px" align="center">
第三方登录 第三方登录
</Divider> </Divider>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}> <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
{status.github_oauth ? ( {status.github_oauth ? (
<Button <Button
type='primary' type="primary"
icon={<IconGithubLogo />} icon={<IconGithubLogo />}
onClick={() => onGitHubOAuthClicked(status.github_client_id)} onClick={() => onGitHubOAuthClicked(status.github_client_id)}
/> />
) : ( ) : (
<></> <></>
)} )}
{status.wechat_login ? ( {status.wechat_login ? (
<Button <Button
type='primary' type="primary"
style={{color: 'rgba(var(--semi-green-5), 1)'}} style={{ color: 'rgba(var(--semi-green-5), 1)' }}
icon={<Icon svg={<WeChatIcon />} />} icon={<Icon svg={<WeChatIcon />} />}
onClick={onWeChatLoginClicked} onClick={onWeChatLoginClicked}
/> />
) : ( ) : (
<></> <></>
)} )}
{status.telegram_oauth ? ( {status.telegram_oauth ? (
<TelegramLoginButton dataOnauth={onTelegramLoginClicked} botName={status.telegram_bot_name} /> <TelegramLoginButton dataOnauth={onTelegramLoginClicked} botName={status.telegram_bot_name} />
) : ( ) : (
<></> <></>
)} )}
</div>
</>
) : (
<></>
)}
<Modal
title="微信扫码登录"
visible={showWeChatLoginModal}
maskClosable={true}
onOk={onSubmitWeChatVerificationCode}
onCancel={() => setShowWeChatLoginModal(false)}
okText={'登录'}
size={'small'}
centered={true}
>
<div style={{ display: 'flex', alignItem: 'center', flexDirection: 'column' }}>
<img src={status.wechat_qrcode}/>
</div>
<div style={{textAlign: 'center'}}>
<p>
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
</p>
</div>
<Form size='large'>
<Form.Input
field={'wechat_verification_code'}
placeholder='验证码'
label={'验证码'}
value={inputs.wechat_verification_code}
onChange={(value) => handleChange('wechat_verification_code', value)}
/>
</Form>
</Modal>
</Card>
{turnstileEnabled ? (
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
<Turnstile
sitekey={turnstileSiteKey}
onVerify={(token) => {
setTurnstileToken(token);
}}
/>
</div>
) : (
<></>
)}
</div>
</div> </div>
</>
) : (
<></>
)}
<Modal
title="微信扫码登录"
visible={showWeChatLoginModal}
maskClosable={true}
onOk={onSubmitWeChatVerificationCode}
onCancel={() => setShowWeChatLoginModal(false)}
okText={'登录'}
size={'small'}
centered={true}
>
<div style={{ display: 'flex', alignItem: 'center', flexDirection: 'column' }}>
<img src={status.wechat_qrcode} />
</div>
<div style={{ textAlign: 'center' }}>
<p>
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
</p>
</div>
<Form size="large">
<Form.Input
field={'wechat_verification_code'}
placeholder="验证码"
label={'验证码'}
value={inputs.wechat_verification_code}
onChange={(value) => handleChange('wechat_verification_code', value)}
/>
</Form>
</Modal>
</Card>
{turnstileEnabled ? (
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
<Turnstile
sitekey={turnstileSiteKey}
onVerify={(token) => {
setTurnstileToken(token);
}}
/>
</div>
) : (
<></>
)}
</div>
</div>
</Layout.Content> </Layout.Content>
</Layout> </Layout>
</div> </div>
); );
}; };
export default LoginForm; export default LoginForm;
web/src/components/LogsTable.js
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from 'react';
import {API, copy, isAdmin, showError, showSuccess, timestamp2string} from '../helpers'; import { API, copy, isAdmin, showError, showSuccess, timestamp2string } from '../helpers';
import {Table, Avatar, Tag, Form, Button, Layout, Select, Popover, Modal, Spin, Space} from '@douyinfe/semi-ui'; import { Avatar, Button, Form, Layout, Modal, Select, Space, Spin, Table, Tag } from '@douyinfe/semi-ui';
import {ITEMS_PER_PAGE} from '../constants'; import { ITEMS_PER_PAGE } from '../constants';
import {renderNumber, renderQuota, stringToColor} from '../helpers/render'; import { renderNumber, renderQuota, stringToColor } from '../helpers/render';
import Paragraph from "@douyinfe/semi-ui/lib/es/typography/paragraph"; import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
const {Header} = Layout; const { Header } = Layout;
function renderTimestamp(timestamp) { function renderTimestamp(timestamp) {
return ( return (<>
<> {timestamp2string(timestamp)}
{timestamp2string(timestamp)} </>);
</>
);
} }
const MODE_OPTIONS = [ const MODE_OPTIONS = [{ key: 'all', text: '全部用户', value: 'all' }, { key: 'self', text: '当前用户', value: 'self' }];
{key: 'all', text: '全部用户', value: 'all'},
{key: 'self', text: '当前用户', value: 'self'}
];
const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo', const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'lime', 'orange', 'pink', 'purple', 'red', 'teal', 'violet', 'yellow'];
'light-blue', 'lime', 'orange', 'pink',
'purple', 'red', 'teal', 'violet', 'yellow'
]
function renderType(type) { function renderType(type) {
switch (type) { switch (type) {
case 1: case 1:
return <Tag color='cyan' size='large'> 充值 </Tag>; return <Tag color="cyan" size="large"> 充值 </Tag>;
case 2: case 2:
return <Tag color='lime' size='large'> 消费 </Tag>; return <Tag color="lime" size="large"> 消费 </Tag>;
case 3: case 3:
return <Tag color='orange' size='large'> 管理 </Tag>; return <Tag color="orange" size="large"> 管理 </Tag>;
case 4: case 4:
return <Tag color='purple' size='large'> 系统 </Tag>; return <Tag color="purple" size="large"> 系统 </Tag>;
default: default:
return <Tag color='black' size='large'> 未知 </Tag>; return <Tag color="black" size="large"> 未知 </Tag>;
} }
} }
function renderIsStream(bool) { function renderIsStream(bool) {
if (bool) { if (bool) {
return <Tag color='blue' size='large'>流</Tag>; return <Tag color="blue" size="large">流</Tag>;
} else { } else {
return <Tag color='purple' size='large'>非流</Tag>; return <Tag color="purple" size="large">非流</Tag>;
} }
} }
function renderUseTime(type) { function renderUseTime(type) {
const time = parseInt(type); const time = parseInt(type);
if (time < 101) { if (time < 101) {
return <Tag color='green' size='large'> {time} s </Tag>; return <Tag color="green" size="large"> {time} s </Tag>;
} else if (time < 300) { } else if (time < 300) {
return <Tag color='orange' size='large'> {time} s </Tag>; return <Tag color="orange" size="large"> {time} s </Tag>;
} else { } else {
return <Tag color='red' size='large'> {time} s </Tag>; return <Tag color="red" size="large"> {time} s </Tag>;
} }
} }
const LogsTable = () => { const LogsTable = () => {
const columns = [ const columns = [{
{ title: '时间', dataIndex: 'timestamp2string'
title: '时间', }, {
dataIndex: 'timestamp2string', title: '渠道',
}, dataIndex: 'channel',
{ className: isAdmin() ? 'tableShow' : 'tableHiddle',
title: '渠道', render: (text, record, index) => {
dataIndex: 'channel', return (isAdminUser ? record.type === 0 || record.type === 2 ? <div>
className: isAdmin() ? 'tableShow' : 'tableHiddle', {<Tag color={colors[parseInt(text) % colors.length]} size="large"> {text} </Tag>}
render: (text, record, index) => { </div> : <></> : <></>);
return ( }
isAdminUser ? }, {
record.type === 0 || record.type === 2 ? title: '用户',
<div> dataIndex: 'username',
{<Tag color={colors[parseInt(text) % colors.length]} size='large'> {text} </Tag>} className: isAdmin() ? 'tableShow' : 'tableHiddle',
</div> render: (text, record, index) => {
: return (isAdminUser ? <div>
<></> <Avatar size="small" color={stringToColor(text)} style={{ marginRight: 4 }}
: onClick={() => showUserInfo(record.user_id)}>
<></> {typeof text === 'string' && text.slice(0, 1)}
); </Avatar>
}, {text}
}, </div> : <></>);
{ }
title: '用户', }, {
dataIndex: 'username', title: '令牌', dataIndex: 'token_name', render: (text, record, index) => {
className: isAdmin() ? 'tableShow' : 'tableHiddle', return (record.type === 0 || record.type === 2 ? <div>
render: (text, record, index) => { <Tag color="grey" size="large" onClick={() => {
return ( copyText(text);
isAdminUser ? }}> {text} </Tag>
<div> </div> : <></>);
<Avatar size="small" color={stringToColor(text)} style={{marginRight: 4}} }
onClick={() => showUserInfo(record.user_id)}> }, {
{typeof text === 'string' && text.slice(0, 1)} title: '类型', dataIndex: 'type', render: (text, record, index) => {
</Avatar> return (<div>
{text} {renderType(text)}
</div> </div>);
: }
<></> }, {
); title: '模型', dataIndex: 'model_name', render: (text, record, index) => {
}, return (record.type === 0 || record.type === 2 ? <div>
}, <Tag color={stringToColor(text)} size="large" onClick={() => {
{ copyText(text);
title: '令牌', }}> {text} </Tag>
dataIndex: 'token_name', </div> : <></>);
render: (text, record, index) => { }
return ( }, {
record.type === 0 || record.type === 2 ? title: '用时', dataIndex: 'use_time', render: (text, record, index) => {
<div> return (<div>
<Tag color='grey' size='large' onClick={() => { <Space>
copyText(text) {renderUseTime(text)}
}}> {text} </Tag> {renderIsStream(record.is_stream)}
</div> </Space>
: </div>);
<></> }
); }, {
}, title: '提示', dataIndex: 'prompt_tokens', render: (text, record, index) => {
}, return (record.type === 0 || record.type === 2 ? <div>
{ {<span> {text} </span>}
title: '类型', </div> : <></>);
dataIndex: 'type', }
render: (text, record, index) => { }, {
return ( title: '补全', dataIndex: 'completion_tokens', render: (text, record, index) => {
<div> return (parseInt(text) > 0 && (record.type === 0 || record.type === 2) ? <div>
{renderType(text)} {<span> {text} </span>}
</div> </div> : <></>);
); }
}, }, {
}, title: '花费', dataIndex: 'quota', render: (text, record, index) => {
{ return (record.type === 0 || record.type === 2 ? <div>
title: '模型', {renderQuota(text, 6)}
dataIndex: 'model_name', </div> : <></>);
render: (text, record, index) => { }
return ( }, {
record.type === 0 || record.type === 2 ? title: '详情', dataIndex: 'content', render: (text, record, index) => {
<div> return <Paragraph ellipsis={{ rows: 2, showTooltip: { type: 'popover', opts: { style: { width: 240 } } } }}
<Tag color={stringToColor(text)} size='large' onClick={() => { style={{ maxWidth: 240 }}>
copyText(text) {text}
}}> {text} </Tag> </Paragraph>;
</div> }
: }];
<></>
);
},
},
{
title: '用时',
dataIndex: 'use_time',
render: (text, record, index) => {
return (
<div>
<Space>
{renderUseTime(text)}
{renderIsStream(record.is_stream)}
</Space>
</div>
);
},
},
{
title: '提示',
dataIndex: 'prompt_tokens',
render: (text, record, index) => {
return (
record.type === 0 || record.type === 2 ?
<div>
{<span> {text} </span>}
</div>
:
<></>
);
},
},
{
title: '补全',
dataIndex: 'completion_tokens',
render: (text, record, index) => {
return (
parseInt(text) > 0 && (record.type === 0 || record.type === 2) ?
<div>
{<span> {text} </span>}
</div>
:
<></>
);
},
},
{
title: '花费',
dataIndex: 'quota',
render: (text, record, index) => {
return (
record.type === 0 || record.type === 2 ?
<div>
{
renderQuota(text, 6)
}
</div>
:
<></>
);
}
},
{
title: '详情',
dataIndex: 'content',
render: (text, record, index) => {
return <Paragraph ellipsis={{rows: 2, showTooltip: {type: 'popover', opts: {style: {width: 240}}}}}
style={{maxWidth: 240}}>
{text}
</Paragraph>
}
}
];
const [logs, setLogs] = useState([]); const [logs, setLogs] = useState([]);
const [showStat, setShowStat] = useState(false); const [showStat, setShowStat] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [loadingStat, setLoadingStat] = useState(false); const [loadingStat, setLoadingStat] = useState(false);
const [activePage, setActivePage] = useState(1); const [activePage, setActivePage] = useState(1);
const [logCount, setLogCount] = useState(ITEMS_PER_PAGE); const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
const [searchKeyword, setSearchKeyword] = useState(''); const [searchKeyword, setSearchKeyword] = useState('');
const [searching, setSearching] = useState(false); const [searching, setSearching] = useState(false);
const [logType, setLogType] = useState(0); const [logType, setLogType] = useState(0);
const isAdminUser = isAdmin(); const isAdminUser = isAdmin();
let now = new Date(); let now = new Date();
// 初始化start_timestamp为前一天 // 初始化start_timestamp为前一天
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
username: '', username: '',
token_name: '', token_name: '',
model_name: '', model_name: '',
start_timestamp: timestamp2string(now.getTime() / 1000 - 86400), start_timestamp: timestamp2string(now.getTime() / 1000 - 86400),
end_timestamp: timestamp2string(now.getTime() / 1000 + 3600), end_timestamp: timestamp2string(now.getTime() / 1000 + 3600),
channel: '' channel: ''
}); });
const {username, token_name, model_name, start_timestamp, end_timestamp, channel} = inputs; const { username, token_name, model_name, start_timestamp, end_timestamp, channel } = inputs;
const [stat, setStat] = useState({ const [stat, setStat] = useState({
quota: 0, quota: 0, token: 0
token: 0 });
});
const handleInputChange = (value, name) => { const handleInputChange = (value, name) => {
setInputs((inputs) => ({...inputs, [name]: value})); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
const getLogSelfStat = async () => { const getLogSelfStat = async () => {
let localStartTimestamp = Date.parse(start_timestamp) / 1000; let localStartTimestamp = Date.parse(start_timestamp) / 1000;
let localEndTimestamp = Date.parse(end_timestamp) / 1000; let localEndTimestamp = Date.parse(end_timestamp) / 1000;
let res = await API.get(`/api/log/self/stat?type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`); let res = await API.get(`/api/log/self/stat?type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`);
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
setStat(data); setStat(data);
} else { } else {
showError(message); showError(message);
} }
}; };
const getLogStat = async () => { const getLogStat = async () => {
let localStartTimestamp = Date.parse(start_timestamp) / 1000; let localStartTimestamp = Date.parse(start_timestamp) / 1000;
let localEndTimestamp = Date.parse(end_timestamp) / 1000; let localEndTimestamp = Date.parse(end_timestamp) / 1000;
let res = await API.get(`/api/log/stat?type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`); let res = await API.get(`/api/log/stat?type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`);
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
setStat(data); setStat(data);
} else { } else {
showError(message); showError(message);
} }
}; };
const handleEyeClick = async () => { const handleEyeClick = async () => {
setLoadingStat(true); setLoadingStat(true);
if (isAdminUser) { if (isAdminUser) {
await getLogStat(); await getLogStat();
} else { } else {
await getLogSelfStat(); await getLogSelfStat();
} }
setShowStat(true); setShowStat(true);
setLoadingStat(false); setLoadingStat(false);
}; };
const showUserInfo = async (userId) => { const showUserInfo = async (userId) => {
if (!isAdminUser) { if (!isAdminUser) {
return; return;
} }
const res = await API.get(`/api/user/${userId}`); const res = await API.get(`/api/user/${userId}`);
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
Modal.info({ Modal.info({
title: '用户信息', title: '用户信息', content: <div style={{ padding: 12 }}>
content: <div style={{padding: 12}}> <p>用户名: {data.username}</p>
<p>用户名: {data.username}</p> <p>余额: {renderQuota(data.quota)}</p>
<p>余额: {renderQuota(data.quota)}</p> <p>已用额度：{renderQuota(data.used_quota)}</p>
<p>已用额度：{renderQuota(data.used_quota)}</p> <p>请求次数：{renderNumber(data.request_count)}</p>
<p>请求次数：{renderNumber(data.request_count)}</p> </div>, centered: true
</div>, });
centered: true, } else {
}) showError(message);
} else { }
showError(message); };
}
};
const setLogsFormat = (logs) => { const setLogsFormat = (logs) => {
for (let i = 0; i < logs.length; i++) { for (let i = 0; i < logs.length; i++) {
logs[i].timestamp2string = timestamp2string(logs[i].created_at); logs[i].timestamp2string = timestamp2string(logs[i].created_at);
logs[i].key = '' + logs[i].id; logs[i].key = '' + logs[i].id;
}
// data.key = '' + data.id
setLogs(logs);
setLogCount(logs.length + ITEMS_PER_PAGE);
// console.log(logCount);
} }
// data.key = '' + data.id
setLogs(logs);
setLogCount(logs.length + ITEMS_PER_PAGE);
// console.log(logCount);
};
const loadLogs = async (startIdx, pageSize) => { const loadLogs = async (startIdx, pageSize, logType = 0) => {
setLoading(true); setLoading(true);
let url = ''; let url = '';
let localStartTimestamp = Date.parse(start_timestamp) / 1000; let localStartTimestamp = Date.parse(start_timestamp) / 1000;
let localEndTimestamp = Date.parse(end_timestamp) / 1000; let localEndTimestamp = Date.parse(end_timestamp) / 1000;
if (isAdminUser) { if (isAdminUser) {
url = `/api/log/?p=${startIdx}&page_size=${pageSize}&type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`; url = `/api/log/?p=${startIdx}&page_size=${pageSize}&type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`;
} else { } else {
url = `/api/log/self/?p=${startIdx}&page_size=${pageSize}&type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`; url = `/api/log/self/?p=${startIdx}&page_size=${pageSize}&type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
} }
const res = await API.get(url); const res = await API.get(url);
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
if (startIdx === 0) { if (startIdx === 0) {
setLogsFormat(data); setLogsFormat(data);
} else { } else {
let newLogs = [...logs]; let newLogs = [...logs];
newLogs.splice(startIdx * pageSize, data.length, ...data); newLogs.splice(startIdx * pageSize, data.length, ...data);
setLogsFormat(newLogs); setLogsFormat(newLogs);
} }
} else { } else {
showError(message); showError(message);
} }
setLoading(false); setLoading(false);
}; };
const pageData = logs.slice((activePage - 1) * pageSize, activePage * pageSize); const pageData = logs.slice((activePage - 1) * pageSize, activePage * pageSize);
const handlePageChange = page => { const handlePageChange = page => {
setActivePage(page); setActivePage(page);
if (page === Math.ceil(logs.length / pageSize) + 1) { if (page === Math.ceil(logs.length / pageSize) + 1) {
// In this case we have to load more data and then append them. // In this case we have to load more data and then append them.
loadLogs(page - 1, pageSize).then(r => { loadLogs(page - 1, pageSize).then(r => {
}); });
} }
}; };
const handlePageSizeChange = async (size) => { const handlePageSizeChange = async (size) => {
localStorage.setItem('page-size', size + '') localStorage.setItem('page-size', size + '');
setPageSize(size) setPageSize(size);
setActivePage(1) setActivePage(1);
loadLogs(0, size) loadLogs(0, size)
.then() .then()
.catch((reason) => { .catch((reason) => {
showError(reason); showError(reason);
}) });
}; };
const refresh = async () => { const refresh = async (localLogType) => {
// setLoading(true); // setLoading(true);
setActivePage(1); setActivePage(1);
await loadLogs(0, pageSize); await loadLogs(0, pageSize, localLogType);
}; };
const copyText = async (text) => { const copyText = async (text) => {
if (await copy(text)) { if (await copy(text)) {
showSuccess('已复制：' + text); showSuccess('已复制：' + text);
} else { } else {
// setSearchKeyword(text); // setSearchKeyword(text);
Modal.error({title: '无法复制到剪贴板，请手动复制', content: text}); Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
}
} }
};
// useEffect(() => { useEffect(() => {
// refresh().then(); // console.log('default effect')
// }, [logType]); const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE;
setPageSize(localPageSize);
loadLogs(0, localPageSize)
.then()
.catch((reason) => {
showError(reason);
});
}, []);
useEffect(() => { const searchLogs = async () => {
// console.log('default effect') if (searchKeyword === '') {
const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE; // if keyword is blank, load files instead.
setPageSize(localPageSize) await loadLogs(0, pageSize);
loadLogs(0, localPageSize) setActivePage(1);
.then() return;
.catch((reason) => { }
showError(reason); setSearching(true);
}); const res = await API.get(`/api/log/self/search?keyword=${searchKeyword}`);
}, []); const { success, message, data } = res.data;
if (success) {
const searchLogs = async () => { setLogs(data);
if (searchKeyword === '') { setActivePage(1);
// if keyword is blank, load files instead. } else {
await loadLogs(0, pageSize); showError(message);
setActivePage(1); }
return; setSearching(false);
} };
setSearching(true);
const res = await API.get(`/api/log/self/search?keyword=${searchKeyword}`);
const {success, message, data} = res.data;
if (success) {
setLogs(data);
setActivePage(1);
} else {
showError(message);
}
setSearching(false);
};
return ( return (<>
<Layout>
<Header>
<Spin spinning={loadingStat}>
<h3>使用明细（总消耗额度：
<span onClick={handleEyeClick} style={{
cursor: 'pointer', color: 'gray'
}}>{showStat ? renderQuota(stat.quota) : '点击查看'}</span>
）
</h3>
</Spin>
</Header>
<Form layout="horizontal" style={{ marginTop: 10 }}>
<> <>
<Layout> <Form.Input field="token_name" label="令牌名称" style={{ width: 176 }} value={token_name}
<Header> placeholder={'可选值'} name="token_name"
<Spin spinning={loadingStat}> onChange={value => handleInputChange(value, 'token_name')} />
<h3>使用明细（总消耗额度： <Form.Input field="model_name" label="模型名称" style={{ width: 176 }} value={model_name}
<span onClick={handleEyeClick} style={{ placeholder="可选值"
cursor: 'pointer', name="model_name"
color: 'gray' onChange={value => handleInputChange(value, 'model_name')} />
}}>{showStat ? renderQuota(stat.quota) : "点击查看"}</span> <Form.DatePicker field="start_timestamp" label="起始时间" style={{ width: 272 }}
） initValue={start_timestamp}
</h3> value={start_timestamp} type="dateTime"
</Spin> name="start_timestamp"
</Header> onChange={value => handleInputChange(value, 'start_timestamp')} />
<Form layout='horizontal' style={{marginTop: 10}}> <Form.DatePicker field="end_timestamp" fluid label="结束时间" style={{ width: 272 }}
<> initValue={end_timestamp}
<Form.Input field="token_name" label='令牌名称' style={{width: 176}} value={token_name} value={end_timestamp} type="dateTime"
placeholder={'可选值'} name='token_name' name="end_timestamp"
onChange={value => handleInputChange(value, 'token_name')}/> onChange={value => handleInputChange(value, 'end_timestamp')} />
<Form.Input field="model_name" label='模型名称' style={{width: 176}} value={model_name} {isAdminUser && <>
placeholder='可选值' <Form.Input field="channel" label="渠道 ID" style={{ width: 176 }} value={channel}
name='model_name' placeholder="可选值" name="channel"
onChange={value => handleInputChange(value, 'model_name')}/> onChange={value => handleInputChange(value, 'channel')} />
<Form.DatePicker field="start_timestamp" label='起始时间' style={{width: 272}} <Form.Input field="username" label="用户名称" style={{ width: 176 }} value={username}
initValue={start_timestamp} placeholder={'可选值'} name="username"
value={start_timestamp} type='dateTime' onChange={value => handleInputChange(value, 'username')} />
name='start_timestamp' </>}
onChange={value => handleInputChange(value, 'start_timestamp')}/> <Form.Section>
<Form.DatePicker field="end_timestamp" fluid label='结束时间' style={{width: 272}} <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
initValue={end_timestamp} onClick={refresh} loading={loading}>查询</Button>
value={end_timestamp} type='dateTime' </Form.Section>
name='end_timestamp'
onChange={value => handleInputChange(value, 'end_timestamp')}/>
{
isAdminUser && <>
<Form.Input field="channel" label='渠道 ID' style={{width: 176}} value={channel}
placeholder='可选值' name='channel'
onChange={value => handleInputChange(value, 'channel')}/>
<Form.Input field="username" label='用户名称' style={{width: 176}} value={username}
placeholder={'可选值'} name='username'
onChange={value => handleInputChange(value, 'username')}/>
</>
}
<Form.Section>
<Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
onClick={refresh} loading={loading}>查询</Button>
</Form.Section>
</>
</Form>
<Table style={{marginTop: 5}} columns={columns} dataSource={pageData} pagination={{
currentPage: activePage,
pageSize: pageSize,
total: logCount,
pageSizeOpts: [10, 20, 50, 100],
showSizeChanger: true,
onPageSizeChange: (size) => {
handlePageSizeChange(size).then()
},
onPageChange: handlePageChange,
}}/>
<Select defaultValue="0" style={{width: 120}} onChange={
(value) => {
setLogType(parseInt(value));
}
}>
<Select.Option value="0">全部</Select.Option>
<Select.Option value="1">充值</Select.Option>
<Select.Option value="2">消费</Select.Option>
<Select.Option value="3">管理</Select.Option>
<Select.Option value="4">系统</Select.Option>
</Select>
</Layout>
</> </>
); </Form>
<Table style={{ marginTop: 5 }} columns={columns} dataSource={pageData} pagination={{
currentPage: activePage,
pageSize: pageSize,
total: logCount,
pageSizeOpts: [10, 20, 50, 100],
showSizeChanger: true,
onPageSizeChange: (size) => {
handlePageSizeChange(size).then();
},
onPageChange: handlePageChange
}} />
<Select defaultValue="0" style={{ width: 120 }} onChange={(value) => {
setLogType(parseInt(value));
refresh(parseInt(value)).then();
}}>
<Select.Option value="0">全部</Select.Option>
<Select.Option value="1">充值</Select.Option>
<Select.Option value="2">消费</Select.Option>
<Select.Option value="3">管理</Select.Option>
<Select.Option value="4">系统</Select.Option>
</Select>
</Layout>
</>);
}; };
export default LogsTable; export default LogsTable;
web/src/components/MjLogsTable.js
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from 'react';
import {API, copy, isAdmin, showError, showSuccess, timestamp2string} from '../helpers'; import { API, copy, isAdmin, showError, showSuccess, timestamp2string } from '../helpers';
import { import { Button, Form, ImagePreview, Layout, Modal, Progress, Table, Tag, Typography } from '@douyinfe/semi-ui';
Table, import { ITEMS_PER_PAGE } from '../constants';
Avatar,
Tag,
Form,
Button,
Layout,
Select,
Popover,
Modal,
ImagePreview,
Typography, Progress
} from '@douyinfe/semi-ui';
import {ITEMS_PER_PAGE} from '../constants';
import {renderNumber, renderQuota, stringToColor} from '../helpers/render';
const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo', const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
'light-blue', 'lime', 'orange', 'pink', 'light-blue', 'lime', 'orange', 'pink',
'purple', 'red', 'teal', 'violet', 'yellow' 'purple', 'red', 'teal', 'violet', 'yellow'
] ];
function renderType(type) { function renderType(type) {
switch (type) { switch (type) {
case 'IMAGINE': case 'IMAGINE':
return <Tag color="blue" size='large'>绘图</Tag>; return <Tag color="blue" size="large">绘图</Tag>;
case 'UPSCALE': case 'UPSCALE':
return <Tag color="orange" size='large'>放大</Tag>; return <Tag color="orange" size="large">放大</Tag>;
case 'VARIATION': case 'VARIATION':
return <Tag color="purple" size='large'>变换</Tag>; return <Tag color="purple" size="large">变换</Tag>;
case 'HIGH_VARIATION': case 'HIGH_VARIATION':
return <Tag color="purple" size='large'>强变换</Tag>; return <Tag color="purple" size="large">强变换</Tag>;
case 'LOW_VARIATION': case 'LOW_VARIATION':
return <Tag color="purple" size='large'>弱变换</Tag>; return <Tag color="purple" size="large">弱变换</Tag>;
case 'PAN': case 'PAN':
return <Tag color="cyan" size='large'>平移</Tag>; return <Tag color="cyan" size="large">平移</Tag>;
case 'DESCRIBE': case 'DESCRIBE':
return <Tag color="yellow" size='large'>图生文</Tag>; return <Tag color="yellow" size="large">图生文</Tag>;
case 'BLEND': case 'BLEND':
return <Tag color="lime" size='large'>图混合</Tag>; return <Tag color="lime" size="large">图混合</Tag>;
case 'SHORTEN': case 'SHORTEN':
return <Tag color="pink" size='large'>缩词</Tag>; return <Tag color="pink" size="large">缩词</Tag>;
case 'REROLL': case 'REROLL':
return <Tag color="indigo" size='large'>重绘</Tag>; return <Tag color="indigo" size="large">重绘</Tag>;
case 'INPAINT': case 'INPAINT':
return <Tag color="violet" size='large'>局部重绘-提交</Tag>; return <Tag color="violet" size="large">局部重绘-提交</Tag>;
case 'ZOOM': case 'ZOOM':
return <Tag color="teal" size='large'>变焦</Tag>; return <Tag color="teal" size="large">变焦</Tag>;
case 'CUSTOM_ZOOM': case 'CUSTOM_ZOOM':
return <Tag color="teal" size='large'>自定义变焦-提交</Tag>; return <Tag color="teal" size="large">自定义变焦-提交</Tag>;
case 'MODAL': case 'MODAL':
return <Tag color="green" size='large'>窗口处理</Tag>; return <Tag color="green" size="large">窗口处理</Tag>;
case 'SWAP_FACE': case 'SWAP_FACE':
return <Tag color="light-green" size='large'>换脸</Tag>; return <Tag color="light-green" size="large">换脸</Tag>;
default: default:
return <Tag color="white" size='large'>未知</Tag>; return <Tag color="white" size="large">未知</Tag>;
} }
} }
function renderCode(code) { function renderCode(code) {
switch (code) { switch (code) {
case 1: case 1:
return <Tag color="green" size='large'>已提交</Tag>; return <Tag color="green" size="large">已提交</Tag>;
case 21: case 21:
return <Tag color="lime" size='large'>等待中</Tag>; return <Tag color="lime" size="large">等待中</Tag>;
case 22: case 22:
return <Tag color="orange" size='large'>重复提交</Tag>; return <Tag color="orange" size="large">重复提交</Tag>;
case 0: case 0:
return <Tag color="yellow" size='large'>未提交</Tag>; return <Tag color="yellow" size="large">未提交</Tag>;
default: default:
return <Tag color="white" size='large'>未知</Tag>; return <Tag color="white" size="large">未知</Tag>;
} }
} }
function renderStatus(type) { function renderStatus(type) {
// Ensure all cases are string literals by adding quotes. // Ensure all cases are string literals by adding quotes.
switch (type) { switch (type) {
case 'SUCCESS': case 'SUCCESS':
return <Tag color="green" size='large'>成功</Tag>; return <Tag color="green" size="large">成功</Tag>;
case 'NOT_START': case 'NOT_START':
return <Tag color="grey" size='large'>未启动</Tag>; return <Tag color="grey" size="large">未启动</Tag>;
case 'SUBMITTED': case 'SUBMITTED':
return <Tag color="yellow" size='large'>队列中</Tag>; return <Tag color="yellow" size="large">队列中</Tag>;
case 'IN_PROGRESS': case 'IN_PROGRESS':
return <Tag color="blue" size='large'>执行中</Tag>; return <Tag color="blue" size="large">执行中</Tag>;
case 'FAILURE': case 'FAILURE':
return <Tag color="red" size='large'>失败</Tag>; return <Tag color="red" size="large">失败</Tag>;
case 'MODAL': case 'MODAL':
return <Tag color="yellow" size='large'>窗口等待</Tag>; return <Tag color="yellow" size="large">窗口等待</Tag>;
default: default:
return <Tag color="white" size='large'>未知</Tag>; return <Tag color="white" size="large">未知</Tag>;
} }
} }
const renderTimestamp = (timestampInSeconds) => { const renderTimestamp = (timestampInSeconds) => {
const date = new Date(timestampInSeconds * 1000); // 从秒转换为毫秒 const date = new Date(timestampInSeconds * 1000); // 从秒转换为毫秒
const year = date.getFullYear(); // 获取年份 const year = date.getFullYear(); // 获取年份
const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，从0开始需要+1，并保证两位数 const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，从0开始需要+1，并保证两位数
const day = ('0' + date.getDate()).slice(-2); // 获取日期，并保证两位数 const day = ('0' + date.getDate()).slice(-2); // 获取日期，并保证两位数
const hours = ('0' + date.getHours()).slice(-2); // 获取小时，并保证两位数 const hours = ('0' + date.getHours()).slice(-2); // 获取小时，并保证两位数
const minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并保证两位数 const minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并保证两位数
const seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，并保证两位数 const seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，并保证两位数
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出 return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出
}; };
const LogsTable = () => { const LogsTable = () => {
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [modalContent, setModalContent] = useState(''); const [modalContent, setModalContent] = useState('');
const columns = [ const columns = [
{ {
title: '提交时间', title: '提交时间',
dataIndex: 'submit_time', dataIndex: 'submit_time',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
{renderTimestamp(text / 1000)} {renderTimestamp(text / 1000)}
</div> </div>
); );
}, }
}, },
{ {
title: '渠道', title: '渠道',
dataIndex: 'channel_id', dataIndex: 'channel_id',
className: isAdmin() ? 'tableShow' : 'tableHiddle', className: isAdmin() ? 'tableShow' : 'tableHiddle',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
<Tag color={colors[parseInt(text) % colors.length]} size='large' onClick={() => { <Tag color={colors[parseInt(text) % colors.length]} size="large" onClick={() => {
copyText(text); // 假设copyText是用于文本复制的函数 copyText(text); // 假设copyText是用于文本复制的函数
}}> {text} </Tag> }}> {text} </Tag>
</div> </div>
); );
}, }
}, },
{ {
title: '类型', title: '类型',
dataIndex: 'action', dataIndex: 'action',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
{renderType(text)} {renderType(text)}
</div> </div>
); );
}, }
}, },
{ {
title: '任务ID', title: '任务ID',
dataIndex: 'mj_id', dataIndex: 'mj_id',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
{text} {text}
</div> </div>
); );
}, }
}, },
{ {
title: '提交结果', title: '提交结果',
dataIndex: 'code', dataIndex: 'code',
className: isAdmin() ? 'tableShow' : 'tableHiddle', className: isAdmin() ? 'tableShow' : 'tableHiddle',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
{renderCode(text)} {renderCode(text)}
</div> </div>
); );
}, }
}, },
{ {
title: '任务状态', title: '任务状态',
dataIndex: 'status', dataIndex: 'status',
className: isAdmin() ? 'tableShow' : 'tableHiddle', className: isAdmin() ? 'tableShow' : 'tableHiddle',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
{renderStatus(text)} {renderStatus(text)}
</div> </div>
); );
}, }
}, },
{ {
title: '进度', title: '进度',
dataIndex: 'progress', dataIndex: 'progress',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
{ {
// 转换例如100%为数字100，如果text未定义，返回0 // 转换例如100%为数字100，如果text未定义，返回0
<Progress stroke={record.status === "FAILURE"?"var(--semi-color-warning)":null} percent={text ? parseInt(text.replace('%', '')) : 0} showInfo={true} <Progress stroke={record.status === 'FAILURE' ? 'var(--semi-color-warning)' : null}
aria-label="drawing progress"/> percent={text ? parseInt(text.replace('%', '')) : 0} showInfo={true}
} aria-label="drawing progress" />
</div>
);
},
},
{
title: '结果图片',
dataIndex: 'image_url',
render: (text, record, index) => {
if (!text) {
return '无';
}
return (
<Button
onClick={() => {
setModalImageUrl(text); // 更新图片URL状态
setIsModalOpenurl(true); // 打开模态框
}}
>
查看图片
</Button>
);
}
},
{
title: 'Prompt',
dataIndex: 'prompt',
render: (text, record, index) => {
// 如果text未定义，返回替代文本，例如空字符串''或其他
if (!text) {
return '无';
}
return (
<Typography.Text
ellipsis={{showTooltip: true}}
style={{width: 100}}
onClick={() => {
setModalContent(text);
setIsModalOpen(true);
}}
>
{text}
</Typography.Text>
);
}
},
{
title: 'PromptEn',
dataIndex: 'prompt_en',
render: (text, record, index) => {
// 如果text未定义，返回替代文本，例如空字符串''或其他
if (!text) {
return '无';
}
return (
<Typography.Text
ellipsis={{showTooltip: true}}
style={{width: 100}}
onClick={() => {
setModalContent(text);
setIsModalOpen(true);
}}
>
{text}
</Typography.Text>
);
}
},
{
title: '失败原因',
dataIndex: 'fail_reason',
render: (text, record, index) => {
// 如果text未定义，返回替代文本，例如空字符串''或其他
if (!text) {
return '无';
}
return (
<Typography.Text
ellipsis={{showTooltip: true}}
style={{width: 100}}
onClick={() => {
setModalContent(text);
setIsModalOpen(true);
}}
>
{text}
</Typography.Text>
);
} }
</div>
);
}
},
{
title: '结果图片',
dataIndex: 'image_url',
render: (text, record, index) => {
if (!text) {
return '无';
} }
return (
]; <Button
onClick={() => {
const [logs, setLogs] = useState([]); setModalImageUrl(text); // 更新图片URL状态
const [loading, setLoading] = useState(true); setIsModalOpenurl(true); // 打开模态框
const [activePage, setActivePage] = useState(1); }}
const [logCount, setLogCount] = useState(ITEMS_PER_PAGE); >
const [logType, setLogType] = useState(0); 查看图片
const isAdminUser = isAdmin(); </Button>
const [isModalOpenurl, setIsModalOpenurl] = useState(false); );
}
// 定义模态框图片URL的状态和更新函数 },
const [modalImageUrl, setModalImageUrl] = useState(''); {
let now = new Date(); title: 'Prompt',
// 初始化start_timestamp为前一天 dataIndex: 'prompt',
const [inputs, setInputs] = useState({ render: (text, record, index) => {
channel_id: '', // 如果text未定义，返回替代文本，例如空字符串''或其他
mj_id: '', if (!text) {
start_timestamp: timestamp2string(now.getTime() / 1000 - 2592000), return '无';
end_timestamp: timestamp2string(now.getTime() / 1000 + 3600),
});
const {channel_id, mj_id, start_timestamp, end_timestamp} = inputs;
const [stat, setStat] = useState({
quota: 0,
token: 0
});
const handleInputChange = (value, name) => {
setInputs((inputs) => ({...inputs, [name]: value}));
};
const setLogsFormat = (logs) => {
for (let i = 0; i < logs.length; i++) {
logs[i].timestamp2string = timestamp2string(logs[i].created_at);
logs[i].key = '' + logs[i].id;
} }
// data.key = '' + data.id
setLogs(logs);
setLogCount(logs.length + ITEMS_PER_PAGE);
// console.log(logCount);
}
const loadLogs = async (startIdx) => {
setLoading(true);
let url = ''; return (
let localStartTimestamp = Date.parse(start_timestamp); <Typography.Text
let localEndTimestamp = Date.parse(end_timestamp); ellipsis={{ showTooltip: true }}
if (isAdminUser) { style={{ width: 100 }}
url = `/api/mj/?p=${startIdx}&channel_id=${channel_id}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`; onClick={() => {
} else { setModalContent(text);
url = `/api/mj/self/?p=${startIdx}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`; setIsModalOpen(true);
}}
>
{text}
</Typography.Text>
);
}
},
{
title: 'PromptEn',
dataIndex: 'prompt_en',
render: (text, record, index) => {
// 如果text未定义，返回替代文本，例如空字符串''或其他
if (!text) {
return '无';
} }
const res = await API.get(url);
const {success, message, data} = res.data; return (
if (success) { <Typography.Text
if (startIdx === 0) { ellipsis={{ showTooltip: true }}
setLogsFormat(data); style={{ width: 100 }}
} else { onClick={() => {
let newLogs = [...logs]; setModalContent(text);
newLogs.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data); setIsModalOpen(true);
setLogsFormat(newLogs); }}
} >
} else { {text}
showError(message); </Typography.Text>
);
}
},
{
title: '失败原因',
dataIndex: 'fail_reason',
render: (text, record, index) => {
// 如果text未定义，返回替代文本，例如空字符串''或其他
if (!text) {
return '无';
} }
setLoading(false);
};
const pageData = logs.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE); return (
<Typography.Text
ellipsis={{ showTooltip: true }}
style={{ width: 100 }}
onClick={() => {
setModalContent(text);
setIsModalOpen(true);
}}
>
{text}
</Typography.Text>
);
}
}
const handlePageChange = page => { ];
setActivePage(page);
if (page === Math.ceil(logs.length / ITEMS_PER_PAGE) + 1) { const [logs, setLogs] = useState([]);
// In this case we have to load more data and then append them. const [loading, setLoading] = useState(true);
loadLogs(page - 1).then(r => { const [activePage, setActivePage] = useState(1);
}); const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
} const [logType, setLogType] = useState(0);
}; const isAdminUser = isAdmin();
const [isModalOpenurl, setIsModalOpenurl] = useState(false);
const refresh = async () => {
// setLoading(true); // 定义模态框图片URL的状态和更新函数
setActivePage(1); const [modalImageUrl, setModalImageUrl] = useState('');
await loadLogs(0); let now = new Date();
}; // 初始化start_timestamp为前一天
const [inputs, setInputs] = useState({
const copyText = async (text) => { channel_id: '',
if (await copy(text)) { mj_id: '',
showSuccess('已复制：' + text); start_timestamp: timestamp2string(now.getTime() / 1000 - 2592000),
} else { end_timestamp: timestamp2string(now.getTime() / 1000 + 3600)
// setSearchKeyword(text); });
Modal.error({title: '无法复制到剪贴板，请手动复制', content: text}); const { channel_id, mj_id, start_timestamp, end_timestamp } = inputs;
}
const [stat, setStat] = useState({
quota: 0,
token: 0
});
const handleInputChange = (value, name) => {
setInputs((inputs) => ({ ...inputs, [name]: value }));
};
const setLogsFormat = (logs) => {
for (let i = 0; i < logs.length; i++) {
logs[i].timestamp2string = timestamp2string(logs[i].created_at);
logs[i].key = '' + logs[i].id;
} }
// data.key = '' + data.id
setLogs(logs);
setLogCount(logs.length + ITEMS_PER_PAGE);
// console.log(logCount);
};
const loadLogs = async (startIdx) => {
setLoading(true);
let url = '';
let localStartTimestamp = Date.parse(start_timestamp);
let localEndTimestamp = Date.parse(end_timestamp);
if (isAdminUser) {
url = `/api/mj/?p=${startIdx}&channel_id=${channel_id}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
} else {
url = `/api/mj/self/?p=${startIdx}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
}
const res = await API.get(url);
const { success, message, data } = res.data;
if (success) {
if (startIdx === 0) {
setLogsFormat(data);
} else {
let newLogs = [...logs];
newLogs.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
setLogsFormat(newLogs);
}
} else {
showError(message);
}
setLoading(false);
};
const pageData = logs.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
useEffect(() => { const handlePageChange = page => {
refresh().then(); setActivePage(page);
}, [logType]); if (page === Math.ceil(logs.length / ITEMS_PER_PAGE) + 1) {
// In this case we have to load more data and then append them.
loadLogs(page - 1).then(r => {
return ( });
<> }
};
<Layout>
<Form layout='horizontal' style={{marginTop: 10}}> const refresh = async () => {
<> // setLoading(true);
<Form.Input field="channel_id" label='渠道 ID' style={{width: 176}} value={channel_id} setActivePage(1);
placeholder={'可选值'} name='channel_id' await loadLogs(0);
onChange={value => handleInputChange(value, 'channel_id')}/> };
<Form.Input field="mj_id" label='任务 ID' style={{width: 176}} value={mj_id}
placeholder='可选值' const copyText = async (text) => {
name='mj_id' if (await copy(text)) {
onChange={value => handleInputChange(value, 'mj_id')}/> showSuccess('已复制：' + text);
<Form.DatePicker field="start_timestamp" label='起始时间' style={{width: 272}} } else {
initValue={start_timestamp} // setSearchKeyword(text);
value={start_timestamp} type='dateTime' Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
name='start_timestamp' }
onChange={value => handleInputChange(value, 'start_timestamp')}/> };
<Form.DatePicker field="end_timestamp" fluid label='结束时间' style={{width: 272}}
initValue={end_timestamp} useEffect(() => {
value={end_timestamp} type='dateTime' refresh().then();
name='end_timestamp' }, [logType]);
onChange={value => handleInputChange(value, 'end_timestamp')}/>
<Form.Section> return (
<Button label='查询' type="primary" htmlType="submit" className="btn-margin-right" <>
onClick={refresh}>查询</Button>
</Form.Section> <Layout>
</> <Form layout="horizontal" style={{ marginTop: 10 }}>
</Form> <>
<Table style={{marginTop: 5}} columns={columns} dataSource={pageData} pagination={{ <Form.Input field="channel_id" label="渠道 ID" style={{ width: 176 }} value={channel_id}
currentPage: activePage, placeholder={'可选值'} name="channel_id"
pageSize: ITEMS_PER_PAGE, onChange={value => handleInputChange(value, 'channel_id')} />
total: logCount, <Form.Input field="mj_id" label="任务 ID" style={{ width: 176 }} value={mj_id}
pageSizeOpts: [10, 20, 50, 100], placeholder="可选值"
onPageChange: handlePageChange, name="mj_id"
}} loading={loading}/> onChange={value => handleInputChange(value, 'mj_id')} />
<Modal <Form.DatePicker field="start_timestamp" label="起始时间" style={{ width: 272 }}
visible={isModalOpen} initValue={start_timestamp}
onOk={() => setIsModalOpen(false)} value={start_timestamp} type="dateTime"
onCancel={() => setIsModalOpen(false)} name="start_timestamp"
closable={null} onChange={value => handleInputChange(value, 'start_timestamp')} />
bodyStyle={{height: '400px', overflow: 'auto'}} // 设置模态框内容区域样式 <Form.DatePicker field="end_timestamp" fluid label="结束时间" style={{ width: 272 }}
width={800} // 设置模态框宽度 initValue={end_timestamp}
> value={end_timestamp} type="dateTime"
<p style={{whiteSpace: 'pre-line'}}>{modalContent}</p> name="end_timestamp"
</Modal> onChange={value => handleInputChange(value, 'end_timestamp')} />
<ImagePreview
src={modalImageUrl} <Form.Section>
visible={isModalOpenurl} <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
onVisibleChange={(visible) => setIsModalOpenurl(visible)} onClick={refresh}>查询</Button>
/> </Form.Section>
</>
</Layout> </Form>
</> <Table style={{ marginTop: 5 }} columns={columns} dataSource={pageData} pagination={{
); currentPage: activePage,
pageSize: ITEMS_PER_PAGE,
total: logCount,
pageSizeOpts: [10, 20, 50, 100],
onPageChange: handlePageChange
}} loading={loading} />
<Modal
visible={isModalOpen}
onOk={() => setIsModalOpen(false)}
onCancel={() => setIsModalOpen(false)}
closable={null}
bodyStyle={{ height: '400px', overflow: 'auto' }} // 设置模态框内容区域样式
width={800} // 设置模态框宽度
>
<p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
</Modal>
<ImagePreview
src={modalImageUrl}
visible={isModalOpenurl}
onVisibleChange={(visible) => setIsModalOpenurl(visible)}
/>
</Layout>
</>
);
}; };
export default LogsTable; export default LogsTable;
web/src/components/OperationSetting.js
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from 'react';
import {Divider, Form, Grid, Header} from 'semantic-ui-react'; import { Divider, Form, Grid, Header } from 'semantic-ui-react';
import {API, showError, showSuccess, timestamp2string, verifyJSON} from '../helpers'; import { API, showError, showSuccess, timestamp2string, verifyJSON } from '../helpers';
const OperationSetting = () => { const OperationSetting = () => {
let now = new Date(); let now = new Date();
let [inputs, setInputs] = useState({ let [inputs, setInputs] = useState({
QuotaForNewUser: 0, QuotaForNewUser: 0,
QuotaForInviter: 0, QuotaForInviter: 0,
QuotaForInvitee: 0, QuotaForInvitee: 0,
QuotaRemindThreshold: 0, QuotaRemindThreshold: 0,
PreConsumedQuota: 0, PreConsumedQuota: 0,
ModelRatio: '', ModelRatio: '',
ModelPrice: '', ModelPrice: '',
GroupRatio: '', GroupRatio: '',
TopUpLink: '', TopUpLink: '',
ChatLink: '', ChatLink: '',
ChatLink2: '', // 添加的新状态变量 ChatLink2: '', // 添加的新状态变量
QuotaPerUnit: 0, QuotaPerUnit: 0,
AutomaticDisableChannelEnabled: '', AutomaticDisableChannelEnabled: '',
AutomaticEnableChannelEnabled: '', AutomaticEnableChannelEnabled: '',
ChannelDisableThreshold: 0, ChannelDisableThreshold: 0,
LogConsumeEnabled: '', LogConsumeEnabled: '',
DisplayInCurrencyEnabled: '', DisplayInCurrencyEnabled: '',
DisplayTokenStatEnabled: '', DisplayTokenStatEnabled: '',
MjNotifyEnabled: '', MjNotifyEnabled: '',
DrawingEnabled: '', DrawingEnabled: '',
DataExportEnabled: '', DataExportEnabled: '',
DataExportDefaultTime: 'hour', DataExportDefaultTime: 'hour',
DataExportInterval: 5, DataExportInterval: 5,
DefaultCollapseSidebar: '', // 默认折叠侧边栏 DefaultCollapseSidebar: '', // 默认折叠侧边栏
RetryTimes: 0 RetryTimes: 0
}); });
const [originInputs, setOriginInputs] = useState({}); const [originInputs, setOriginInputs] = useState({});
let [loading, setLoading] = useState(false); let [loading, setLoading] = useState(false);
let [historyTimestamp, setHistoryTimestamp] = useState(timestamp2string(now.getTime() / 1000 - 30 * 24 * 3600)); // a month ago let [historyTimestamp, setHistoryTimestamp] = useState(timestamp2string(now.getTime() / 1000 - 30 * 24 * 3600)); // a month ago
// 精确时间选项（小时，天，周） // 精确时间选项（小时，天，周）
const timeOptions = [ const timeOptions = [
{key: 'hour', text: '小时', value: 'hour'}, { key: 'hour', text: '小时', value: 'hour' },
{key: 'day', text: '天', value: 'day'}, { key: 'day', text: '天', value: 'day' },
{key: 'week', text: '周', value: 'week'} { key: 'week', text: '周', value: 'week' }
]; ];
const getOptions = async () => { const getOptions = async () => {
const res = await API.get('/api/option/'); const res = await API.get('/api/option/');
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
let newInputs = {}; let newInputs = {};
data.forEach((item) => { data.forEach((item) => {
if (item.key === 'ModelRatio' || item.key === 'GroupRatio' || item.key === 'ModelPrice') { if (item.key === 'ModelRatio' || item.key === 'GroupRatio' || item.key === 'ModelPrice') {
item.value = JSON.stringify(JSON.parse(item.value), null, 2); item.value = JSON.stringify(JSON.parse(item.value), null, 2);
}
newInputs[item.key] = item.value;
});
setInputs(newInputs);
setOriginInputs(newInputs);
} else {
showError(message);
} }
}; newInputs[item.key] = item.value;
});
setInputs(newInputs);
setOriginInputs(newInputs);
} else {
showError(message);
}
};
useEffect(() => { useEffect(() => {
getOptions().then(); getOptions().then();
}, []); }, []);
const updateOption = async (key, value) => { const updateOption = async (key, value) => {
setLoading(true); setLoading(true);
if (key.endsWith('Enabled')) { if (key.endsWith('Enabled')) {
value = inputs[key] === 'true' ? 'false' : 'true'; value = inputs[key] === 'true' ? 'false' : 'true';
} }
if (key === 'DefaultCollapseSidebar') { if (key === 'DefaultCollapseSidebar') {
value = inputs[key] === 'true' ? 'false' : 'true'; value = inputs[key] === 'true' ? 'false' : 'true';
}
console.log(key, value);
const res = await API.put('/api/option/', {
key,
value
});
const { success, message } = res.data;
if (success) {
setInputs((inputs) => ({ ...inputs, [key]: value }));
} else {
showError(message);
}
setLoading(false);
};
const handleInputChange = async (e, { name, value }) => {
if (name.endsWith('Enabled') || name === 'DataExportInterval' || name === 'DataExportDefaultTime' || name === 'DefaultCollapseSidebar') {
if (name === 'DataExportDefaultTime') {
localStorage.setItem('data_export_default_time', value);
}
await updateOption(name, value);
} else {
setInputs((inputs) => ({ ...inputs, [name]: value }));
}
};
const submitConfig = async (group) => {
switch (group) {
case 'monitor':
if (originInputs['ChannelDisableThreshold'] !== inputs.ChannelDisableThreshold) {
await updateOption('ChannelDisableThreshold', inputs.ChannelDisableThreshold);
} }
console.log(key, value) if (originInputs['QuotaRemindThreshold'] !== inputs.QuotaRemindThreshold) {
const res = await API.put('/api/option/', { await updateOption('QuotaRemindThreshold', inputs.QuotaRemindThreshold);
key,
value
});
const {success, message} = res.data;
if (success) {
setInputs((inputs) => ({...inputs, [key]: value}));
} else {
showError(message);
} }
setLoading(false); break;
}; case 'ratio':
if (originInputs['ModelRatio'] !== inputs.ModelRatio) {
const handleInputChange = async (e, {name, value}) => { if (!verifyJSON(inputs.ModelRatio)) {
if (name.endsWith('Enabled') || name === 'DataExportInterval' || name === 'DataExportDefaultTime' || name === 'DefaultCollapseSidebar') { showError('模型倍率不是合法的 JSON 字符串');
if (name === 'DataExportDefaultTime') { return;
localStorage.setItem('data_export_default_time', value); }
} await updateOption('ModelRatio', inputs.ModelRatio);
await updateOption(name, value);
} else {
setInputs((inputs) => ({...inputs, [name]: value}));
} }
}; if (originInputs['GroupRatio'] !== inputs.GroupRatio) {
if (!verifyJSON(inputs.GroupRatio)) {
const submitConfig = async (group) => { showError('分组倍率不是合法的 JSON 字符串');
switch (group) { return;
case 'monitor': }
if (originInputs['ChannelDisableThreshold'] !== inputs.ChannelDisableThreshold) { await updateOption('GroupRatio', inputs.GroupRatio);
await updateOption('ChannelDisableThreshold', inputs.ChannelDisableThreshold);
}
if (originInputs['QuotaRemindThreshold'] !== inputs.QuotaRemindThreshold) {
await updateOption('QuotaRemindThreshold', inputs.QuotaRemindThreshold);
}
break;
case 'ratio':
if (originInputs['ModelRatio'] !== inputs.ModelRatio) {
if (!verifyJSON(inputs.ModelRatio)) {
showError('模型倍率不是合法的 JSON 字符串');
return;
}
await updateOption('ModelRatio', inputs.ModelRatio);
}
if (originInputs['GroupRatio'] !== inputs.GroupRatio) {
if (!verifyJSON(inputs.GroupRatio)) {
showError('分组倍率不是合法的 JSON 字符串');
return;
}
await updateOption('GroupRatio', inputs.GroupRatio);
}
if (originInputs['ModelPrice'] !== inputs.ModelPrice) {
if (!verifyJSON(inputs.ModelPrice)) {
showError('模型固定价格不是合法的 JSON 字符串');
return;
}
await updateOption('ModelPrice', inputs.ModelPrice);
}
break;
case 'quota':
if (originInputs['QuotaForNewUser'] !== inputs.QuotaForNewUser) {
await updateOption('QuotaForNewUser', inputs.QuotaForNewUser);
}
if (originInputs['QuotaForInvitee'] !== inputs.QuotaForInvitee) {
await updateOption('QuotaForInvitee', inputs.QuotaForInvitee);
}
if (originInputs['QuotaForInviter'] !== inputs.QuotaForInviter) {
await updateOption('QuotaForInviter', inputs.QuotaForInviter);
}
if (originInputs['PreConsumedQuota'] !== inputs.PreConsumedQuota) {
await updateOption('PreConsumedQuota', inputs.PreConsumedQuota);
}
break;
case 'general':
if (originInputs['TopUpLink'] !== inputs.TopUpLink) {
await updateOption('TopUpLink', inputs.TopUpLink);
}
if (originInputs['ChatLink'] !== inputs.ChatLink) {
await updateOption('ChatLink', inputs.ChatLink);
}
if (originInputs['ChatLink2'] !== inputs.ChatLink2) {
await updateOption('ChatLink2', inputs.ChatLink2);
}
if (originInputs['QuotaPerUnit'] !== inputs.QuotaPerUnit) {
await updateOption('QuotaPerUnit', inputs.QuotaPerUnit);
}
if (originInputs['RetryTimes'] !== inputs.RetryTimes) {
await updateOption('RetryTimes', inputs.RetryTimes);
}
break;
} }
}; if (originInputs['ModelPrice'] !== inputs.ModelPrice) {
if (!verifyJSON(inputs.ModelPrice)) {
const deleteHistoryLogs = async () => { showError('模型固定价格不是合法的 JSON 字符串');
console.log(inputs);
const res = await API.delete(`/api/log/?target_timestamp=${Date.parse(historyTimestamp) / 1000}`);
const {success, message, data} = res.data;
if (success) {
showSuccess(`${data} 条日志已清理！`);
return; return;
}
await updateOption('ModelPrice', inputs.ModelPrice);
} }
showError('日志清理失败：' + message); break;
}; case 'quota':
return ( if (originInputs['QuotaForNewUser'] !== inputs.QuotaForNewUser) {
<Grid columns={1}> await updateOption('QuotaForNewUser', inputs.QuotaForNewUser);
<Grid.Column> }
<Form loading={loading}> if (originInputs['QuotaForInvitee'] !== inputs.QuotaForInvitee) {
<Header as='h3'> await updateOption('QuotaForInvitee', inputs.QuotaForInvitee);
通用设置 }
</Header> if (originInputs['QuotaForInviter'] !== inputs.QuotaForInviter) {
<Form.Group widths={4}> await updateOption('QuotaForInviter', inputs.QuotaForInviter);
<Form.Input }
label='充值链接' if (originInputs['PreConsumedQuota'] !== inputs.PreConsumedQuota) {
name='TopUpLink' await updateOption('PreConsumedQuota', inputs.PreConsumedQuota);
onChange={handleInputChange} }
autoComplete='new-password' break;
value={inputs.TopUpLink} case 'general':
type='link' if (originInputs['TopUpLink'] !== inputs.TopUpLink) {
placeholder='例如发卡网站的购买链接' await updateOption('TopUpLink', inputs.TopUpLink);
/> }
<Form.Input if (originInputs['ChatLink'] !== inputs.ChatLink) {
label='默认聊天页面链接' await updateOption('ChatLink', inputs.ChatLink);
name='ChatLink' }
onChange={handleInputChange} if (originInputs['ChatLink2'] !== inputs.ChatLink2) {
autoComplete='new-password' await updateOption('ChatLink2', inputs.ChatLink2);
value={inputs.ChatLink} }
type='link' if (originInputs['QuotaPerUnit'] !== inputs.QuotaPerUnit) {
placeholder='例如 ChatGPT Next Web 的部署地址' await updateOption('QuotaPerUnit', inputs.QuotaPerUnit);
/> }
<Form.Input if (originInputs['RetryTimes'] !== inputs.RetryTimes) {
label='聊天页面2链接' await updateOption('RetryTimes', inputs.RetryTimes);
name='ChatLink2' }
onChange={handleInputChange} break;
autoComplete='new-password' }
value={inputs.ChatLink2} };
type='link'
placeholder='例如 ChatGPT Web & Midjourney 的部署地址' const deleteHistoryLogs = async () => {
/> console.log(inputs);
<Form.Input const res = await API.delete(`/api/log/?target_timestamp=${Date.parse(historyTimestamp) / 1000}`);
label='单位美元额度' const { success, message, data } = res.data;
name='QuotaPerUnit' if (success) {
onChange={handleInputChange} showSuccess(`${data} 条日志已清理！`);
autoComplete='new-password' return;
value={inputs.QuotaPerUnit} }
type='number' showError('日志清理失败：' + message);
step='0.01' };
placeholder='一单位货币能兑换的额度' return (
/> <Grid columns={1}>
<Form.Input <Grid.Column>
label='失败重试次数' <Form loading={loading}>
name='RetryTimes' <Header as="h3">
type={'number'} 通用设置
step='1' </Header>
min='0' <Form.Group widths={4}>
onChange={handleInputChange} <Form.Input
autoComplete='new-password' label="充值链接"
value={inputs.RetryTimes} name="TopUpLink"
placeholder='失败重试次数' onChange={handleInputChange}
/> autoComplete="new-password"
</Form.Group> value={inputs.TopUpLink}
<Form.Group inline> type="link"
<Form.Checkbox placeholder="例如发卡网站的购买链接"
checked={inputs.DisplayInCurrencyEnabled === 'true'} />
label='以货币形式显示额度' <Form.Input
name='DisplayInCurrencyEnabled' label="默认聊天页面链接"
onChange={handleInputChange} name="ChatLink"
/> onChange={handleInputChange}
<Form.Checkbox autoComplete="new-password"
checked={inputs.DisplayTokenStatEnabled === 'true'} value={inputs.ChatLink}
label='Billing 相关 API 显示令牌额度而非用户额度' type="link"
name='DisplayTokenStatEnabled' placeholder="例如 ChatGPT Next Web 的部署地址"
onChange={handleInputChange} />
/> <Form.Input
<Form.Checkbox label="聊天页面2链接"
checked={inputs.DefaultCollapseSidebar === 'true'} name="ChatLink2"
label='默认折叠侧边栏' onChange={handleInputChange}
name='DefaultCollapseSidebar' autoComplete="new-password"
onChange={handleInputChange} value={inputs.ChatLink2}
/> type="link"
</Form.Group> placeholder="例如 ChatGPT Web & Midjourney 的部署地址"
<Form.Button onClick={() => { />
submitConfig('general').then(); <Form.Input
}}>保存通用设置</Form.Button> label="单位美元额度"
<Divider/> name="QuotaPerUnit"
<Header as='h3'> onChange={handleInputChange}
绘图设置 autoComplete="new-password"
</Header> value={inputs.QuotaPerUnit}
<Form.Group inline> type="number"
<Form.Checkbox step="0.01"
checked={inputs.DrawingEnabled === 'true'} placeholder="一单位货币能兑换的额度"
label='启用绘图功能' />
name='DrawingEnabled' <Form.Input
onChange={handleInputChange} label="失败重试次数"
/> name="RetryTimes"
<Form.Checkbox type={'number'}
checked={inputs.MjNotifyEnabled === 'true'} step="1"
label='允许回调（会泄露服务器ip地址）' min="0"
name='MjNotifyEnabled' onChange={handleInputChange}
onChange={handleInputChange} autoComplete="new-password"
/> value={inputs.RetryTimes}
</Form.Group> placeholder="失败重试次数"
<Divider/> />
<Header as='h3'> </Form.Group>
日志设置 <Form.Group inline>
</Header> <Form.Checkbox
<Form.Group inline> checked={inputs.DisplayInCurrencyEnabled === 'true'}
<Form.Checkbox label="以货币形式显示额度"
checked={inputs.LogConsumeEnabled === 'true'} name="DisplayInCurrencyEnabled"
label='启用额度消费日志记录' onChange={handleInputChange}
name='LogConsumeEnabled' />
onChange={handleInputChange} <Form.Checkbox
/> checked={inputs.DisplayTokenStatEnabled === 'true'}
</Form.Group> label="Billing 相关 API 显示令牌额度而非用户额度"
<Form.Group widths={4}> name="DisplayTokenStatEnabled"
<Form.Input label='目标时间' value={historyTimestamp} type='datetime-local' onChange={handleInputChange}
name='history_timestamp' />
onChange={(e, {name, value}) => { <Form.Checkbox
setHistoryTimestamp(value); checked={inputs.DefaultCollapseSidebar === 'true'}
}}/> label="默认折叠侧边栏"
</Form.Group> name="DefaultCollapseSidebar"
<Form.Button onClick={() => { onChange={handleInputChange}
deleteHistoryLogs().then(); />
}}>清理历史日志</Form.Button> </Form.Group>
<Divider/> <Form.Button onClick={() => {
<Header as='h3'> submitConfig('general').then();
数据看板 }}>保存通用设置</Form.Button>
</Header> <Divider />
<Form.Checkbox <Header as="h3">
checked={inputs.DataExportEnabled === 'true'} 绘图设置
label='启用数据看板（实验性）' </Header>
name='DataExportEnabled' <Form.Group inline>
onChange={handleInputChange} <Form.Checkbox
/> checked={inputs.DrawingEnabled === 'true'}
<Form.Group> label="启用绘图功能"
<Form.Input name="DrawingEnabled"
label='数据看板更新间隔（分钟，设置过短会影响数据库性能）' onChange={handleInputChange}
name='DataExportInterval' />
type={'number'} <Form.Checkbox
step='1' checked={inputs.MjNotifyEnabled === 'true'}
min='1' label="允许回调（会泄露服务器ip地址）"
onChange={handleInputChange} name="MjNotifyEnabled"
autoComplete='new-password' onChange={handleInputChange}
value={inputs.DataExportInterval} />
placeholder='数据看板更新间隔（分钟，设置过短会影响数据库性能）' </Form.Group>
/> <Divider />
<Form.Select <Header as="h3">
label='数据看板默认时间粒度（仅修改展示粒度，统计精确到小时）' 日志设置
options={timeOptions} </Header>
name='DataExportDefaultTime' <Form.Group inline>
onChange={handleInputChange} <Form.Checkbox
autoComplete='new-password' checked={inputs.LogConsumeEnabled === 'true'}
value={inputs.DataExportDefaultTime} label="启用额度消费日志记录"
placeholder='数据看板默认时间粒度' name="LogConsumeEnabled"
/> onChange={handleInputChange}
</Form.Group> />
<Divider/> </Form.Group>
<Header as='h3'> <Form.Group widths={4}>
监控设置 <Form.Input label="目标时间" value={historyTimestamp} type="datetime-local"
</Header> name="history_timestamp"
<Form.Group widths={3}> onChange={(e, { name, value }) => {
<Form.Input setHistoryTimestamp(value);
label='最长响应时间' }} />
name='ChannelDisableThreshold' </Form.Group>
onChange={handleInputChange} <Form.Button onClick={() => {
autoComplete='new-password' deleteHistoryLogs().then();
value={inputs.ChannelDisableThreshold} }}>清理历史日志</Form.Button>
type='number' <Divider />
min='0' <Header as="h3">
placeholder='单位秒，当运行通道全部测试时，超过此时间将自动禁用通道' 数据看板
/> </Header>
<Form.Input <Form.Checkbox
label='额度提醒阈值' checked={inputs.DataExportEnabled === 'true'}
name='QuotaRemindThreshold' label="启用数据看板（实验性）"
onChange={handleInputChange} name="DataExportEnabled"
autoComplete='new-password' onChange={handleInputChange}
value={inputs.QuotaRemindThreshold} />
type='number' <Form.Group>
min='0' <Form.Input
placeholder='低于此额度时将发送邮件提醒用户' label="数据看板更新间隔（分钟，设置过短会影响数据库性能）"
/> name="DataExportInterval"
</Form.Group> type={'number'}
<Form.Group inline> step="1"
<Form.Checkbox min="1"
checked={inputs.AutomaticDisableChannelEnabled === 'true'} onChange={handleInputChange}
label='失败时自动禁用通道' autoComplete="new-password"
name='AutomaticDisableChannelEnabled' value={inputs.DataExportInterval}
onChange={handleInputChange} placeholder="数据看板更新间隔（分钟，设置过短会影响数据库性能）"
/> />
<Form.Checkbox <Form.Select
checked={inputs.AutomaticEnableChannelEnabled === 'true'} label="数据看板默认时间粒度（仅修改展示粒度，统计精确到小时）"
label='成功时自动启用通道' options={timeOptions}
name='AutomaticEnableChannelEnabled' name="DataExportDefaultTime"
onChange={handleInputChange} onChange={handleInputChange}
/> autoComplete="new-password"
</Form.Group> value={inputs.DataExportDefaultTime}
<Form.Button onClick={() => { placeholder="数据看板默认时间粒度"
submitConfig('monitor').then(); />
}}>保存监控设置</Form.Button> </Form.Group>
<Divider/> <Divider />
<Header as='h3'> <Header as="h3">
额度设置 监控设置
</Header> </Header>
<Form.Group widths={4}> <Form.Group widths={3}>
<Form.Input <Form.Input
label='新用户初始额度' label="最长响应时间"
name='QuotaForNewUser' name="ChannelDisableThreshold"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.QuotaForNewUser} value={inputs.ChannelDisableThreshold}
type='number' type="number"
min='0' min="0"
placeholder='例如：100' placeholder="单位秒，当运行通道全部测试时，超过此时间将自动禁用通道"
/> />
<Form.Input <Form.Input
label='请求预扣费额度' label="额度提醒阈值"
name='PreConsumedQuota' name="QuotaRemindThreshold"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.PreConsumedQuota} value={inputs.QuotaRemindThreshold}
type='number' type="number"
min='0' min="0"
placeholder='请求结束后多退少补' placeholder="低于此额度时将发送邮件提醒用户"
/> />
<Form.Input </Form.Group>
label='邀请新用户奖励额度' <Form.Group inline>
name='QuotaForInviter' <Form.Checkbox
onChange={handleInputChange} checked={inputs.AutomaticDisableChannelEnabled === 'true'}
autoComplete='new-password' label="失败时自动禁用通道"
value={inputs.QuotaForInviter} name="AutomaticDisableChannelEnabled"
type='number' onChange={handleInputChange}
min='0' />
placeholder='例如：2000' <Form.Checkbox
/> checked={inputs.AutomaticEnableChannelEnabled === 'true'}
<Form.Input label="成功时自动启用通道"
label='新用户使用邀请码奖励额度' name="AutomaticEnableChannelEnabled"
name='QuotaForInvitee' onChange={handleInputChange}
onChange={handleInputChange} />
autoComplete='new-password' </Form.Group>
value={inputs.QuotaForInvitee} <Form.Button onClick={() => {
type='number' submitConfig('monitor').then();
min='0' }}>保存监控设置</Form.Button>
placeholder='例如：1000' <Divider />
/> <Header as="h3">
</Form.Group> 额度设置
<Form.Button onClick={() => { </Header>
submitConfig('quota').then(); <Form.Group widths={4}>
}}>保存额度设置</Form.Button> <Form.Input
<Divider/> label="新用户初始额度"
<Header as='h3'> name="QuotaForNewUser"
倍率设置 onChange={handleInputChange}
</Header> autoComplete="new-password"
<Form.Group widths='equal'> value={inputs.QuotaForNewUser}
<Form.TextArea type="number"
label='模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）' min="0"
name='ModelPrice' placeholder="例如：100"
onChange={handleInputChange} />
style={{minHeight: 250, fontFamily: 'JetBrains Mono, Consolas'}} <Form.Input
autoComplete='new-password' label="请求预扣费额度"
value={inputs.ModelPrice} name="PreConsumedQuota"
placeholder='为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀' onChange={handleInputChange}
/> autoComplete="new-password"
</Form.Group> value={inputs.PreConsumedQuota}
<Form.Group widths='equal'> type="number"
<Form.TextArea min="0"
label='模型倍率' placeholder="请求结束后多退少补"
name='ModelRatio' />
onChange={handleInputChange} <Form.Input
style={{minHeight: 250, fontFamily: 'JetBrains Mono, Consolas'}} label="邀请新用户奖励额度"
autoComplete='new-password' name="QuotaForInviter"
value={inputs.ModelRatio} onChange={handleInputChange}
placeholder='为一个 JSON 文本，键为模型名称，值为倍率' autoComplete="new-password"
/> value={inputs.QuotaForInviter}
</Form.Group> type="number"
<Form.Group widths='equal'> min="0"
<Form.TextArea placeholder="例如：2000"
label='分组倍率' />
name='GroupRatio' <Form.Input
onChange={handleInputChange} label="新用户使用邀请码奖励额度"
style={{minHeight: 250, fontFamily: 'JetBrains Mono, Consolas'}} name="QuotaForInvitee"
autoComplete='new-password' onChange={handleInputChange}
value={inputs.GroupRatio} autoComplete="new-password"
placeholder='为一个 JSON 文本，键为分组名称，值为倍率' value={inputs.QuotaForInvitee}
/> type="number"
</Form.Group> min="0"
<Form.Button onClick={() => { placeholder="例如：1000"
submitConfig('ratio').then(); />
}}>保存倍率设置</Form.Button> </Form.Group>
</Form> <Form.Button onClick={() => {
</Grid.Column> submitConfig('quota').then();
</Grid> }}>保存额度设置</Form.Button>
) <Divider />
; <Header as="h3">
倍率设置
</Header>
<Form.Group widths="equal">
<Form.TextArea
label="模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）"
name="ModelPrice"
onChange={handleInputChange}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
autoComplete="new-password"
value={inputs.ModelPrice}
placeholder='为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀'
/>
</Form.Group>
<Form.Group widths="equal">
<Form.TextArea
label="模型倍率"
name="ModelRatio"
onChange={handleInputChange}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
autoComplete="new-password"
value={inputs.ModelRatio}
placeholder="为一个 JSON 文本，键为模型名称，值为倍率"
/>
</Form.Group>
<Form.Group widths="equal">
<Form.TextArea
label="分组倍率"
name="GroupRatio"
onChange={handleInputChange}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
autoComplete="new-password"
value={inputs.GroupRatio}
placeholder="为一个 JSON 文本，键为分组名称，值为倍率"
/>
</Form.Group>
<Form.Button onClick={() => {
submitConfig('ratio').then();
}}>保存倍率设置</Form.Button>
</Form>
</Grid.Column>
</Grid>
)
;
}; };
export default OperationSetting; export default OperationSetting;
web/src/components/OtherSetting.js
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Col, Row , Form, Button, Banner } from '@douyinfe/semi-ui'; import { Banner, Button, Col, Form, Row } from '@douyinfe/semi-ui';
import { API, showError, showSuccess } from '../helpers'; import { API, showError, showSuccess } from '../helpers';
import { marked } from 'marked'; import { marked } from 'marked';
...@@ -57,8 +57,8 @@ const OtherSetting = () => { ...@@ -57,8 +57,8 @@ const OtherSetting = () => {
await updateOption('Notice', inputs.Notice); await updateOption('Notice', inputs.Notice);
showSuccess('公告已更新'); showSuccess('公告已更新');
} catch (error) { } catch (error) {
console.error("公告更新失败", error); console.error('公告更新失败', error);
showError("公告更新失败") showError('公告更新失败');
} finally { } finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: false })); setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: false }));
} }
...@@ -72,8 +72,8 @@ const OtherSetting = () => { ...@@ -72,8 +72,8 @@ const OtherSetting = () => {
await updateOption('SystemName', inputs.SystemName); await updateOption('SystemName', inputs.SystemName);
showSuccess('系统名称已更新'); showSuccess('系统名称已更新');
} catch (error) { } catch (error) {
console.error("系统名称更新失败", error); console.error('系统名称更新失败', error);
showError("系统名称更新失败") showError('系统名称更新失败');
} finally { } finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, SystemName: false })); setLoadingInput((loadingInput) => ({ ...loadingInput, SystemName: false }));
} }
...@@ -86,8 +86,8 @@ const OtherSetting = () => { ...@@ -86,8 +86,8 @@ const OtherSetting = () => {
await updateOption('Logo', inputs.Logo); await updateOption('Logo', inputs.Logo);
showSuccess('Logo 已更新'); showSuccess('Logo 已更新');
} catch (error) { } catch (error) {
console.error("Logo 更新失败", error); console.error('Logo 更新失败', error);
showError("Logo 更新失败") showError('Logo 更新失败');
} finally { } finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: false })); setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: false }));
} }
...@@ -99,8 +99,8 @@ const OtherSetting = () => { ...@@ -99,8 +99,8 @@ const OtherSetting = () => {
await updateOption(key, inputs[key]); await updateOption(key, inputs[key]);
showSuccess('首页内容已更新'); showSuccess('首页内容已更新');
} catch (error) { } catch (error) {
console.error("首页内容更新失败", error); console.error('首页内容更新失败', error);
showError("首页内容更新失败") showError('首页内容更新失败');
} finally { } finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, HomePageContent: false })); setLoadingInput((loadingInput) => ({ ...loadingInput, HomePageContent: false }));
} }
...@@ -112,8 +112,8 @@ const OtherSetting = () => { ...@@ -112,8 +112,8 @@ const OtherSetting = () => {
await updateOption('About', inputs.About); await updateOption('About', inputs.About);
showSuccess('关于内容已更新'); showSuccess('关于内容已更新');
} catch (error) { } catch (error) {
console.error("关于内容更新失败", error); console.error('关于内容更新失败', error);
showError("关于内容更新失败"); showError('关于内容更新失败');
} finally { } finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, About: false })); setLoadingInput((loadingInput) => ({ ...loadingInput, About: false }));
} }
...@@ -125,16 +125,14 @@ const OtherSetting = () => { ...@@ -125,16 +125,14 @@ const OtherSetting = () => {
await updateOption('Footer', inputs.Footer); await updateOption('Footer', inputs.Footer);
showSuccess('页脚内容已更新'); showSuccess('页脚内容已更新');
} catch (error) { } catch (error) {
console.error("页脚内容更新失败", error); console.error('页脚内容更新失败', error);
showError("页脚内容更新失败"); showError('页脚内容更新失败');
} finally { } finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, Footer: false })); setLoadingInput((loadingInput) => ({ ...loadingInput, Footer: false }));
} }
}; };
const openGitHubRelease = () => { const openGitHubRelease = () => {
window.location = window.location =
'https://github.com/songquanpeng/one-api/releases/latest'; 'https://github.com/songquanpeng/one-api/releases/latest';
...@@ -173,16 +171,17 @@ const OtherSetting = () => { ...@@ -173,16 +171,17 @@ const OtherSetting = () => {
} }
}; };
useEffect( () => { useEffect(() => {
getOptions(); getOptions();
}, []); }, []);
return ( return (
<Row > <Row>
<Col span={24}> <Col span={24}>
{/* 通用设置 */} {/* 通用设置 */}
<Form values={inputs} getFormApi={formAPI => formAPISettingGeneral.current = formAPI} style={{marginBottom: 15}}> <Form values={inputs} getFormApi={formAPI => formAPISettingGeneral.current = formAPI}
style={{ marginBottom: 15 }}>
<Form.Section text={'通用设置'}> <Form.Section text={'通用设置'}>
<Form.TextArea <Form.TextArea
label={'公告'} label={'公告'}
...@@ -191,26 +190,27 @@ const OtherSetting = () => { ...@@ -191,26 +190,27 @@ const OtherSetting = () => {
onChange={handleInputChange} onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }} style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }} autosize={{ minRows: 6, maxRows: 12 }}
/> />
<Button onClick={submitNotice} loading={loadingInput['Notice']}>设置公告</Button> <Button onClick={submitNotice} loading={loadingInput['Notice']}>设置公告</Button>
</Form.Section> </Form.Section>
</Form> </Form>
{/* 个性化设置 */} {/* 个性化设置 */}
<Form values={inputs} getFormApi={formAPI => formAPIPersonalization.current = formAPI} style={{marginBottom: 15}}> <Form values={inputs} getFormApi={formAPI => formAPIPersonalization.current = formAPI}
style={{ marginBottom: 15 }}>
<Form.Section text={'个性化设置'}> <Form.Section text={'个性化设置'}>
<Form.Input <Form.Input
label={'系统名称'} label={'系统名称'}
placeholder={'在此输入系统名称'} placeholder={'在此输入系统名称'}
field={'SystemName'} field={'SystemName'}
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Button onClick={submitSystemName} loading={loadingInput['SystemName']}>设置系统名称</Button> <Button onClick={submitSystemName} loading={loadingInput['SystemName']}>设置系统名称</Button>
<Form.Input <Form.Input
label={'Logo 图片地址'} label={'Logo 图片地址'}
placeholder={'在此输入 Logo 图片地址'} placeholder={'在此输入 Logo 图片地址'}
field={'Logo'} field={'Logo'}
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Button onClick={submitLogo} loading={loadingInput['Logo']}>设置 Logo</Button> <Button onClick={submitLogo} loading={loadingInput['Logo']}>设置 Logo</Button>
<Form.TextArea <Form.TextArea
label={'首页内容'} label={'首页内容'}
...@@ -219,8 +219,9 @@ const OtherSetting = () => { ...@@ -219,8 +219,9 @@ const OtherSetting = () => {
onChange={handleInputChange} onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }} style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }} autosize={{ minRows: 6, maxRows: 12 }}
/> />
<Button onClick={() => submitOption('HomePageContent')} loading={loadingInput['HomePageContent']}>设置首页内容</Button> <Button onClick={() => submitOption('HomePageContent')}
loading={loadingInput['HomePageContent']}>设置首页内容</Button>
<Form.TextArea <Form.TextArea
label={'关于'} label={'关于'}
placeholder={'在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。'} placeholder={'在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。'}
...@@ -228,7 +229,7 @@ const OtherSetting = () => { ...@@ -228,7 +229,7 @@ const OtherSetting = () => {
onChange={handleInputChange} onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }} style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }} autosize={{ minRows: 6, maxRows: 12 }}
/> />
<Button onClick={submitAbout} loading={loadingInput['About']}>设置关于</Button> <Button onClick={submitAbout} loading={loadingInput['About']}>设置关于</Button>
{/* */} {/* */}
<Banner <Banner
...@@ -236,14 +237,14 @@ const OtherSetting = () => { ...@@ -236,14 +237,14 @@ const OtherSetting = () => {
type="info" type="info"
description="移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。" description="移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。"
closeIcon={null} closeIcon={null}
style={{ marginTop: 15 }} style={{ marginTop: 15 }}
/> />
<Form.Input <Form.Input
label={'页脚'} label={'页脚'}
placeholder={'在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码'} placeholder={'在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码'}
field={'Footer'} field={'Footer'}
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Button onClick={submitFooter} loading={loadingInput['Footer']}>设置页脚</Button> <Button onClick={submitFooter} loading={loadingInput['Footer']}>设置页脚</Button>
</Form.Section> </Form.Section>
</Form> </Form>
...@@ -270,7 +271,7 @@ const OtherSetting = () => { ...@@ -270,7 +271,7 @@ const OtherSetting = () => {
{/* />*/} {/* />*/}
{/* </Modal.Actions>*/} {/* </Modal.Actions>*/}
{/*</Modal>*/} {/*</Modal>*/}
</Row> </Row>
); );
}; };
......
web/src/components/PasswordResetConfirm.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react'; import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
import { API, copy, showError, showInfo, showNotice, showSuccess } from '../helpers'; import { API, copy, showError, showNotice } from '../helpers';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
const PasswordResetConfirm = () => { const PasswordResetConfirm = () => {
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
email: '', email: '',
token: '', token: ''
}); });
const { email, token } = inputs; const { email, token } = inputs;
...@@ -23,7 +23,7 @@ const PasswordResetConfirm = () => { ...@@ -23,7 +23,7 @@ const PasswordResetConfirm = () => {
let email = searchParams.get('email'); let email = searchParams.get('email');
setInputs({ setInputs({
token, token,
email, email
}); });
}, []); }, []);
...@@ -37,7 +37,7 @@ const PasswordResetConfirm = () => { ...@@ -37,7 +37,7 @@ const PasswordResetConfirm = () => {
setDisableButton(false); setDisableButton(false);
setCountdown(30); setCountdown(30);
} }
return () => clearInterval(countdownInterval); return () => clearInterval(countdownInterval);
}, [disableButton, countdown]); }, [disableButton, countdown]);
async function handleSubmit(e) { async function handleSubmit(e) {
...@@ -46,7 +46,7 @@ const PasswordResetConfirm = () => { ...@@ -46,7 +46,7 @@ const PasswordResetConfirm = () => {
setLoading(true); setLoading(true);
const res = await API.post(`/api/user/reset`, { const res = await API.post(`/api/user/reset`, {
email, email,
token, token
}); });
const { success, message } = res.data; const { success, message } = res.data;
if (success) { if (success) {
...@@ -59,44 +59,44 @@ const PasswordResetConfirm = () => { ...@@ -59,44 +59,44 @@ const PasswordResetConfirm = () => {
} }
setLoading(false); setLoading(false);
} }
return ( return (
<Grid textAlign='center' style={{ marginTop: '48px' }}> <Grid textAlign="center" style={{ marginTop: '48px' }}>
<Grid.Column style={{ maxWidth: 450 }}> <Grid.Column style={{ maxWidth: 450 }}>
<Header as='h2' color='' textAlign='center'> <Header as="h2" color="" textAlign="center">
<Image src='/logo.png' /> 密码重置确认 <Image src="/logo.png" /> 密码重置确认
</Header> </Header>
<Form size='large'> <Form size="large">
<Segment> <Segment>
<Form.Input <Form.Input
fluid fluid
icon='mail' icon="mail"
iconPosition='left' iconPosition="left"
placeholder='邮箱地址' placeholder="邮箱地址"
name='email' name="email"
value={email} value={email}
readOnly readOnly
/> />
{newPassword && ( {newPassword && (
<Form.Input <Form.Input
fluid fluid
icon='lock' icon="lock"
iconPosition='left' iconPosition="left"
placeholder='新密码' placeholder="新密码"
name='newPassword' name="newPassword"
value={newPassword} value={newPassword}
readOnly readOnly
onClick={(e) => { onClick={(e) => {
e.target.select(); e.target.select();
navigator.clipboard.writeText(newPassword); navigator.clipboard.writeText(newPassword);
showNotice(`密码已复制到剪贴板：${newPassword}`); showNotice(`密码已复制到剪贴板：${newPassword}`);
}} }}
/> />
)} )}
<Button <Button
color='green' color="green"
fluid fluid
size='large' size="large"
onClick={handleSubmit} onClick={handleSubmit}
loading={loading} loading={loading}
disabled={disableButton} disabled={disableButton}
...@@ -107,7 +107,7 @@ const PasswordResetConfirm = () => { ...@@ -107,7 +107,7 @@ const PasswordResetConfirm = () => {
</Form> </Form>
</Grid.Column> </Grid.Column>
</Grid> </Grid>
); );
}; };
export default PasswordResetConfirm; export default PasswordResetConfirm;
web/src/components/PasswordResetForm.js
...@@ -56,19 +56,19 @@ const PasswordResetForm = () => { ...@@ -56,19 +56,19 @@ const PasswordResetForm = () => {
} }
return ( return (
<Grid textAlign='center' style={{ marginTop: '48px' }}> <Grid textAlign="center" style={{ marginTop: '48px' }}>
<Grid.Column style={{ maxWidth: 450 }}> <Grid.Column style={{ maxWidth: 450 }}>
<Header as='h2' color='' textAlign='center'> <Header as="h2" color="" textAlign="center">
<Image src='/logo.png' /> 密码重置 <Image src="/logo.png" /> 密码重置
</Header> </Header>
<Form size='large'> <Form size="large">
<Segment> <Segment>
<Form.Input <Form.Input
fluid fluid
icon='mail' icon="mail"
iconPosition='left' iconPosition="left"
placeholder='邮箱地址' placeholder="邮箱地址"
name='email' name="email"
value={email} value={email}
onChange={handleChange} onChange={handleChange}
/> />
...@@ -83,9 +83,9 @@ const PasswordResetForm = () => { ...@@ -83,9 +83,9 @@ const PasswordResetForm = () => {
<></> <></>
)} )}
<Button <Button
color='green' color="green"
fluid fluid
size='large' size="large"
onClick={handleSubmit} onClick={handleSubmit}
loading={loading} loading={loading}
disabled={disableButton} disabled={disableButton}
......
web/src/components/PersonalSetting.js
import React, {useContext, useEffect, useState} from 'react'; import React, { useContext, useEffect, useState } from 'react';
import {Link, useNavigate} from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import {API, copy, isRoot, showError, showInfo, showNotice, showSuccess} from '../helpers'; import { API, copy, isRoot, showError, showInfo, showSuccess } from '../helpers';
import Turnstile from 'react-turnstile'; import Turnstile from 'react-turnstile';
import {UserContext} from '../context/User'; import { UserContext } from '../context/User';
import {onGitHubOAuthClicked} from './utils'; import { onGitHubOAuthClicked } from './utils';
import { import {
Avatar, Banner, Avatar,
Button, Banner,
Card, Button,
Descriptions, Card,
Divider, Image, Descriptions,
Input, InputNumber, Image,
Layout, Input,
Modal, InputNumber,
Space, Layout,
Tag, Modal,
Typography Space,
} from "@douyinfe/semi-ui"; Tag,
import {getQuotaPerUnit, renderQuota, renderQuotaWithPrompt, stringToColor} from "../helpers/render"; Typography
import EditToken from "../pages/Token/EditToken"; } from '@douyinfe/semi-ui';
import EditUser from "../pages/User/EditUser"; import { getQuotaPerUnit, renderQuota, renderQuotaWithPrompt, stringToColor } from '../helpers/render';
import passwordResetConfirm from "./PasswordResetConfirm";
import TelegramLoginButton from 'react-telegram-login'; import TelegramLoginButton from 'react-telegram-login';
const PersonalSetting = () => { const PersonalSetting = () => {
const [userState, userDispatch] = useContext(UserContext); const [userState, userDispatch] = useContext(UserContext);
let navigate = useNavigate(); let navigate = useNavigate();
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
wechat_verification_code: '', wechat_verification_code: '',
email_verification_code: '', email_verification_code: '',
email: '', email: '',
self_account_deletion_confirmation: '', self_account_deletion_confirmation: '',
set_new_password: '', set_new_password: '',
set_new_password_confirmation: '', set_new_password_confirmation: ''
}); });
const [status, setStatus] = useState({}); const [status, setStatus] = useState({});
const [showChangePasswordModal, setShowChangePasswordModal] = useState(false); const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
const [showWeChatBindModal, setShowWeChatBindModal] = useState(false); const [showWeChatBindModal, setShowWeChatBindModal] = useState(false);
const [showEmailBindModal, setShowEmailBindModal] = useState(false); const [showEmailBindModal, setShowEmailBindModal] = useState(false);
const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false); const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false);
const [turnstileEnabled, setTurnstileEnabled] = useState(false); const [turnstileEnabled, setTurnstileEnabled] = useState(false);
const [turnstileSiteKey, setTurnstileSiteKey] = useState(''); const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
const [turnstileToken, setTurnstileToken] = useState(''); const [turnstileToken, setTurnstileToken] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [disableButton, setDisableButton] = useState(false); const [disableButton, setDisableButton] = useState(false);
const [countdown, setCountdown] = useState(30); const [countdown, setCountdown] = useState(30);
const [affLink, setAffLink] = useState(""); const [affLink, setAffLink] = useState('');
const [systemToken, setSystemToken] = useState(""); const [systemToken, setSystemToken] = useState('');
const [models, setModels] = useState([]); const [models, setModels] = useState([]);
const [openTransfer, setOpenTransfer] = useState(false); const [openTransfer, setOpenTransfer] = useState(false);
const [transferAmount, setTransferAmount] = useState(0); const [transferAmount, setTransferAmount] = useState(0);
useEffect(() => { useEffect(() => {
// let user = localStorage.getItem('user'); // let user = localStorage.getItem('user');
// if (user) { // if (user) {
// userDispatch({ type: 'login', payload: user }); // userDispatch({ type: 'login', payload: user });
// } // }
// console.log(localStorage.getItem('user')) // console.log(localStorage.getItem('user'))
let status = localStorage.getItem('status'); let status = localStorage.getItem('status');
if (status) { if (status) {
status = JSON.parse(status); status = JSON.parse(status);
setStatus(status); setStatus(status);
if (status.turnstile_check) { if (status.turnstile_check) {
setTurnstileEnabled(true); setTurnstileEnabled(true);
setTurnstileSiteKey(status.turnstile_site_key); setTurnstileSiteKey(status.turnstile_site_key);
} }
} }
getUserData().then( getUserData().then(
(res) => { (res) => {
console.log(userState) console.log(userState);
} }
); );
loadModels().then(); loadModels().then();
getAffLink().then(); getAffLink().then();
setTransferAmount(getQuotaPerUnit()) setTransferAmount(getQuotaPerUnit());
}, []); }, []);
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 handleInputChange = (name, value) => { useEffect(() => {
setInputs((inputs) => ({...inputs, [name]: value})); 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 generateAccessToken = async () => { const handleInputChange = (name, value) => {
const res = await API.get('/api/user/token'); setInputs((inputs) => ({ ...inputs, [name]: value }));
const {success, message, data} = res.data; };
if (success) {
setSystemToken(data);
await copy(data);
showSuccess(`令牌已重置并已复制到剪贴板`);
} else {
showError(message);
}
};
const getAffLink = async () => { const generateAccessToken = async () => {
const res = await API.get('/api/user/aff'); const res = await API.get('/api/user/token');
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
let link = `${window.location.origin}/register?aff=${data}`; setSystemToken(data);
setAffLink(link); await copy(data);
} else { showSuccess(`令牌已重置并已复制到剪贴板`);
showError(message); } else {
} showError(message);
}; }
};
const getUserData = async () => { const getAffLink = async () => {
let res = await API.get(`/api/user/self`); const res = await API.get('/api/user/aff');
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
userDispatch({type: 'login', payload: data}); let link = `${window.location.origin}/register?aff=${data}`;
} else { setAffLink(link);
showError(message); } else {
} showError(message);
} }
};
const loadModels = async () => { const getUserData = async () => {
let res = await API.get(`/api/user/models`); let res = await API.get(`/api/user/self`);
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
setModels(data); userDispatch({ type: 'login', payload: data });
console.log(data) } else {
} else { showError(message);
showError(message);
}
} }
};
const handleAffLinkClick = async (e) => { const loadModels = async () => {
e.target.select(); let res = await API.get(`/api/user/models`);
await copy(e.target.value); const { success, message, data } = res.data;
showSuccess(`邀请链接已复制到剪切板`); if (success) {
}; setModels(data);
console.log(data);
} else {
showError(message);
}
};
const handleSystemTokenClick = async (e) => { const handleAffLinkClick = async (e) => {
e.target.select(); e.target.select();
await copy(e.target.value); await copy(e.target.value);
showSuccess(`系统令牌已复制到剪切板`); showSuccess(`邀请链接已复制到剪切板`);
}; };
const deleteAccount = async () => { const handleSystemTokenClick = async (e) => {
if (inputs.self_account_deletion_confirmation !== userState.user.username) { e.target.select();
showError('请输入你的账户名以确认删除！'); await copy(e.target.value);
return; showSuccess(`系统令牌已复制到剪切板`);
} };
const res = await API.delete('/api/user/self'); const deleteAccount = async () => {
const {success, message} = res.data; if (inputs.self_account_deletion_confirmation !== userState.user.username) {
showError('请输入你的账户名以确认删除！');
return;
}
if (success) { const res = await API.delete('/api/user/self');
showSuccess('账户已删除！'); const { success, message } = res.data;
await API.get('/api/user/logout');
userDispatch({type: 'logout'});
localStorage.removeItem('user');
navigate('/login');
} else {
showError(message);
}
};
const bindWeChat = async () => { if (success) {
if (inputs.wechat_verification_code === '') return; showSuccess('账户已删除！');
const res = await API.get( await API.get('/api/user/logout');
`/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}` userDispatch({ type: 'logout' });
); localStorage.removeItem('user');
const {success, message} = res.data; navigate('/login');
if (success) { } else {
showSuccess('微信账户绑定成功！'); showError(message);
setShowWeChatBindModal(false); }
} else { };
showError(message);
}
};
const changePassword = async () => { const bindWeChat = async () => {
if (inputs.set_new_password !== inputs.set_new_password_confirmation) { if (inputs.wechat_verification_code === '') return;
showError('两次输入的密码不一致！'); const res = await API.get(
return; `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`
} );
const res = await API.put( const { success, message } = res.data;
`/api/user/self`, if (success) {
{ showSuccess('微信账户绑定成功！');
password: inputs.set_new_password setShowWeChatBindModal(false);
} } else {
); showError(message);
const {success, message} = res.data; }
if (success) { };
showSuccess('密码修改成功！');
setShowWeChatBindModal(false);
} else {
showError(message);
}
setShowChangePasswordModal(false);
};
const transfer = async () => { const changePassword = async () => {
if (transferAmount < getQuotaPerUnit()) { if (inputs.set_new_password !== inputs.set_new_password_confirmation) {
showError('划转金额最低为' + renderQuota(getQuotaPerUnit())); showError('两次输入的密码不一致！');
return; return;
} }
const res = await API.post( const res = await API.put(
`/api/user/aff_transfer`, `/api/user/self`,
{ {
quota: transferAmount password: inputs.set_new_password
} }
); );
const {success, message} = res.data; const { success, message } = res.data;
if (success) { if (success) {
showSuccess(message); showSuccess('密码修改成功！');
setOpenTransfer(false); setShowWeChatBindModal(false);
getUserData().then(); } else {
} else { showError(message);
showError(message); }
} setShowChangePasswordModal(false);
}; };
const sendVerificationCode = async () => { const transfer = async () => {
if (inputs.email === '') { if (transferAmount < getQuotaPerUnit()) {
showError('请输入邮箱！'); showError('划转金额最低为' + renderQuota(getQuotaPerUnit()));
return; return;
} }
setDisableButton(true); const res = await API.post(
if (turnstileEnabled && turnstileToken === '') { `/api/user/aff_transfer`,
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); {
return; quota: transferAmount
} }
setLoading(true); );
const res = await API.get( const { success, message } = res.data;
`/api/verification?email=${inputs.email}&turnstile=${turnstileToken}` if (success) {
); showSuccess(message);
const {success, message} = res.data; setOpenTransfer(false);
if (success) { getUserData().then();
showSuccess('验证码发送成功，请检查邮箱！'); } else {
} else { showError(message);
showError(message); }
} };
setLoading(false);
};
const bindEmail = async () => { const sendVerificationCode = async () => {
if (inputs.email_verification_code === '') { if (inputs.email === '') {
showError('请输入邮箱验证码！'); showError('请输入邮箱！');
return; return;
} }
setLoading(true); setDisableButton(true);
const res = await API.get( if (turnstileEnabled && turnstileToken === '') {
`/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}` showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
); return;
const {success, message} = res.data; }
if (success) { setLoading(true);
showSuccess('邮箱账户绑定成功！'); const res = await API.get(
setShowEmailBindModal(false); `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
userState.user.email = inputs.email; );
} else { const { success, message } = res.data;
showError(message); if (success) {
} showSuccess('验证码发送成功，请检查邮箱！');
setLoading(false); } else {
}; showError(message);
}
setLoading(false);
};
const getUsername = () => { const bindEmail = async () => {
if (userState.user) { if (inputs.email_verification_code === '') {
return userState.user.username; showError('请输入邮箱验证码！');
} else { return;
return 'null';
}
} }
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 handleCancel = () => { const getUsername = () => {
setOpenTransfer(false); if (userState.user) {
return userState.user.username;
} else {
return 'null';
} }
};
const copyText = async (text) => { const handleCancel = () => {
if (await copy(text)) { setOpenTransfer(false);
showSuccess('已复制：' + text); };
} else {
// setSearchKeyword(text); const copyText = async (text) => {
Modal.error({title: '无法复制到剪贴板，请手动复制', content: text}); if (await copy(text)) {
} showSuccess('已复制：' + text);
} else {
// setSearchKeyword(text);
Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
} }
};
return ( return (
<div> <div>
<Layout> <Layout>
<Layout.Content> <Layout.Content>
<Modal <Modal
title="请输入要划转的数量" title="请输入要划转的数量"
visible={openTransfer} visible={openTransfer}
onOk={transfer} onOk={transfer}
onCancel={handleCancel} onCancel={handleCancel}
maskClosable={false} maskClosable={false}
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 style={{marginTop: 5}} value={userState?.user?.aff_quota} disabled={true}></Input> <Input style={{ marginTop: 5 }} value={userState?.user?.aff_quota} disabled={true}></Input>
</div> </div>
<div style={{marginTop: 20}}> <div style={{ marginTop: 20 }}>
<Typography.Text>{`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` + renderQuota(getQuotaPerUnit())}</Typography.Text> <Typography.Text>{`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` + renderQuota(getQuotaPerUnit())}</Typography.Text>
<div> <div>
<InputNumber min={0} style={{marginTop: 5}} value={transferAmount} onChange={(value)=>setTransferAmount(value)} disabled={false}></InputNumber> <InputNumber min={0} style={{ marginTop: 5 }} value={transferAmount}
</div> onChange={(value) => setTransferAmount(value)} disabled={false}></InputNumber>
</div> </div>
</Modal> </div>
<div style={{marginTop: 20}}> </Modal>
<Card <div style={{ marginTop: 20 }}>
title={ <Card
<Card.Meta title={
avatar={<Avatar size="default" color={stringToColor(getUsername())} <Card.Meta
style={{marginRight: 4}}> avatar={<Avatar size="default" color={stringToColor(getUsername())}
{typeof getUsername() === 'string' && getUsername().slice(0, 1)} style={{ marginRight: 4 }}>
</Avatar>} {typeof getUsername() === 'string' && getUsername().slice(0, 1)}
title={<Typography.Text>{getUsername()}</Typography.Text>} </Avatar>}
description={isRoot()?<Tag color="red">管理员</Tag>:<Tag color="blue">普通用户</Tag>} title={<Typography.Text>{getUsername()}</Typography.Text>}
></Card.Meta> description={isRoot() ? <Tag color="red">管理员</Tag> : <Tag color="blue">普通用户</Tag>}
} ></Card.Meta>
headerExtraContent={ }
<> headerExtraContent={
<Space vertical align="start"> <>
<Tag color="green">{'ID: ' + userState?.user?.id}</Tag> <Space vertical align="start">
<Tag color="blue">{userState?.user?.group}</Tag> <Tag color="green">{'ID: ' + userState?.user?.id}</Tag>
</Space> <Tag color="blue">{userState?.user?.group}</Tag>
</> </Space>
} </>
footer={ }
<Descriptions row> footer={
<Descriptions.Item itemKey="当前余额">{renderQuota(userState?.user?.quota)}</Descriptions.Item> <Descriptions row>
<Descriptions.Item itemKey="历史消耗">{renderQuota(userState?.user?.used_quota)}</Descriptions.Item> <Descriptions.Item itemKey="当前余额">{renderQuota(userState?.user?.quota)}</Descriptions.Item>
<Descriptions.Item itemKey="请求次数">{userState.user?.request_count}</Descriptions.Item> <Descriptions.Item itemKey="历史消耗">{renderQuota(userState?.user?.used_quota)}</Descriptions.Item>
</Descriptions> <Descriptions.Item itemKey="请求次数">{userState.user?.request_count}</Descriptions.Item>
} </Descriptions>
> }
<Typography.Title heading={6}>可用模型</Typography.Title> >
<div style={{marginTop: 10}}> <Typography.Title heading={6}>可用模型</Typography.Title>
<Space wrap> <div style={{ marginTop: 10 }}>
{models.map((model) => ( <Space wrap>
<Tag key={model} color="cyan" onClick={() => { {models.map((model) => (
copyText(model) <Tag key={model} color="cyan" onClick={() => {
}}> copyText(model);
{model} }}>
</Tag> {model}
))} </Tag>
</Space> ))}
</div> </Space>
</div>
</Card> </Card>
<Card <Card
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
/> />
</div> </div>
} }
> >
<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 type={'secondary'} onClick={()=>setOpenTransfer(true)} size={'small'} style={{marginLeft: 10}}>划转</Button> <Button type={'secondary'} onClick={() => setOpenTransfer(true)} size={'small'}
</Descriptions.Item> style={{ marginLeft: 10 }}>划转</Button>
<Descriptions.Item itemKey="总收益">{renderQuota(userState?.user?.aff_history_quota)}</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item itemKey="邀请人数">{userState?.user?.aff_count}</Descriptions.Item> <Descriptions.Item
</Descriptions> itemKey="总收益">{renderQuota(userState?.user?.aff_history_quota)}</Descriptions.Item>
</div> <Descriptions.Item itemKey="邀请人数">{userState?.user?.aff_count}</Descriptions.Item>
</Card> </Descriptions>
<Card> </div>
<Typography.Title heading={6}>个人信息</Typography.Title> </Card>
<div style={{marginTop: 20}}> <Card>
<Typography.Text strong>邮箱</Typography.Text> <Typography.Title heading={6}>个人信息</Typography.Title>
<div style={{display: 'flex', justifyContent: 'space-between'}}> <div style={{ marginTop: 20 }}>
<div> <Typography.Text strong>邮箱</Typography.Text>
<Input <div style={{ display: 'flex', justifyContent: 'space-between' }}>
value={userState.user && userState.user.email !== ''?userState.user.email:'未绑定'} <div>
readonly={true} <Input
></Input> value={userState.user && userState.user.email !== '' ? userState.user.email : '未绑定'}
</div> readonly={true}
<div> ></Input>
<Button onClick={()=>{setShowEmailBindModal(true)}}>{ </div>
userState.user && userState.user.email !== ''?'修改绑定':'绑定邮箱' <div>
}</Button> <Button onClick={() => {
</div> setShowEmailBindModal(true);
</div> }}>{
</div> userState.user && userState.user.email !== '' ? '修改绑定' : '绑定邮箱'
<div style={{marginTop: 10}}> }</Button>
<Typography.Text strong>微信</Typography.Text> </div>
<div style={{display: 'flex', justifyContent: 'space-between'}}> </div>
<div> </div>
<Input <div style={{ marginTop: 10 }}>
value={userState.user && userState.user.wechat_id !== ''?'已绑定':'未绑定'} <Typography.Text strong>微信</Typography.Text>
readonly={true} <div style={{ display: 'flex', justifyContent: 'space-between' }}>
></Input> <div>
</div> <Input
<div> value={userState.user && userState.user.wechat_id !== '' ? '已绑定' : '未绑定'}
<Button disabled={(userState.user && userState.user.wechat_id !== '') || !status.wechat_login}> readonly={true}
{ ></Input>
status.wechat_login?'绑定':'未启用' </div>
} <div>
</Button> <Button disabled={(userState.user && userState.user.wechat_id !== '') || !status.wechat_login}>
</div> {
</div> status.wechat_login ? '绑定' : '未启用'
</div> }
<div style={{marginTop: 10}}> </Button>
<Typography.Text strong>GitHub</Typography.Text> </div>
<div style={{display: 'flex', justifyContent: 'space-between'}}> </div>
<div> </div>
<Input <div style={{ marginTop: 10 }}>
value={userState.user && userState.user.github_id !== ''?userState.user.github_id:'未绑定'} <Typography.Text strong>GitHub</Typography.Text>
readonly={true} <div style={{ display: 'flex', justifyContent: 'space-between' }}>
></Input> <div>
</div> <Input
<div> value={userState.user && userState.user.github_id !== '' ? userState.user.github_id : '未绑定'}
<Button readonly={true}
onClick={() => {onGitHubOAuthClicked(status.github_client_id)}} ></Input>
disabled={(userState.user && userState.user.github_id !== '') || !status.github_oauth} </div>
> <div>
{ <Button
status.github_oauth?'绑定':'未启用' onClick={() => {
} onGitHubOAuthClicked(status.github_client_id);
</Button> }}
</div> disabled={(userState.user && userState.user.github_id !== '') || !status.github_oauth}
</div> >
</div> {
status.github_oauth ? '绑定' : '未启用'
}
</Button>
</div>
</div>
</div>
<div style={{marginTop: 10}}> <div style={{ marginTop: 10 }}>
<Typography.Text strong>Telegram</Typography.Text> <Typography.Text strong>Telegram</Typography.Text>
<div style={{display: 'flex', justifyContent: 'space-between'}}> <div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div> <div>
<Input <Input
value={userState.user && userState.user.telegram_id !== ''?userState.user.telegram_id:'未绑定'} value={userState.user && userState.user.telegram_id !== '' ? userState.user.telegram_id : '未绑定'}
readonly={true} readonly={true}
></Input> ></Input>
</div> </div>
<div> <div>
{status.telegram_oauth ? {status.telegram_oauth ?
userState.user.telegram_id !== '' ? <Button disabled={true}>已绑定</Button> userState.user.telegram_id !== '' ? <Button disabled={true}>已绑定</Button>
: <TelegramLoginButton dataAuthUrl="/api/oauth/telegram/bind" botName={status.telegram_bot_name} /> : <TelegramLoginButton dataAuthUrl="/api/oauth/telegram/bind"
: <Button disabled={true}>未启用</Button> botName={status.telegram_bot_name} />
} : <Button disabled={true}>未启用</Button>
</div> }
</div> </div>
</div> </div>
</div>
<div style={{marginTop: 10}}> <div style={{ marginTop: 10 }}>
<Space> <Space>
<Button onClick={generateAccessToken}>生成系统访问令牌</Button> <Button onClick={generateAccessToken}>生成系统访问令牌</Button>
<Button onClick={() => { <Button onClick={() => {
setShowChangePasswordModal(true); setShowChangePasswordModal(true);
}}>修改密码</Button> }}>修改密码</Button>
<Button type={'danger'} onClick={() => { <Button type={'danger'} onClick={() => {
setShowAccountDeleteModal(true); setShowAccountDeleteModal(true);
}}>删除个人账户</Button> }}>删除个人账户</Button>
</Space> </Space>
{systemToken && ( {systemToken && (
<Input <Input
readOnly readOnly
value={systemToken} value={systemToken}
onClick={handleSystemTokenClick} onClick={handleSystemTokenClick}
style={{marginTop: '10px'}} style={{ marginTop: '10px' }}
/> />
)} )}
{ {
status.wechat_login && ( status.wechat_login && (
<Button <Button
onClick={() => { onClick={() => {
setShowWeChatBindModal(true); setShowWeChatBindModal(true);
}} }}
> >
绑定微信账号 绑定微信账号
</Button> </Button>
) )
} }
<Modal <Modal
onCancel={() => setShowWeChatBindModal(false)} onCancel={() => setShowWeChatBindModal(false)}
// onOpen={() => setShowWeChatBindModal(true)} // onOpen={() => setShowWeChatBindModal(true)}
visible={showWeChatBindModal} visible={showWeChatBindModal}
size={'mini'} size={'mini'}
> >
<Image src={status.wechat_qrcode}/> <Image src={status.wechat_qrcode} />
<div style={{textAlign: 'center'}}> <div style={{ textAlign: 'center' }}>
<p> <p>
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效） 微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
</p> </p>
</div> </div>
<Input <Input
placeholder='验证码' placeholder="验证码"
name='wechat_verification_code' name="wechat_verification_code"
value={inputs.wechat_verification_code} value={inputs.wechat_verification_code}
onChange={(v)=>handleInputChange('wechat_verification_code', v)} onChange={(v) => handleInputChange('wechat_verification_code', v)}
/> />
<Button color='' fluid size='large' onClick={bindWeChat}> <Button color="" fluid size="large" onClick={bindWeChat}>
绑定 绑定
</Button> </Button>
</Modal> </Modal>
</div> </div>
</Card> </Card>
<Modal <Modal
onCancel={() => setShowEmailBindModal(false)} onCancel={() => setShowEmailBindModal(false)}
// onOpen={() => setShowEmailBindModal(true)} // onOpen={() => setShowEmailBindModal(true)}
onOk={bindEmail} onOk={bindEmail}
visible={showEmailBindModal} visible={showEmailBindModal}
size={'small'} size={'small'}
centered={true} centered={true}
maskClosable={false} maskClosable={false}
> >
<Typography.Title heading={6}>绑定邮箱地址</Typography.Title> <Typography.Title heading={6}>绑定邮箱地址</Typography.Title>
<div style={{marginTop: 20, display: 'flex', justifyContent: 'space-between'}}> <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between' }}>
<Input <Input
fluid fluid
placeholder='输入邮箱地址' placeholder="输入邮箱地址"
onChange={(value)=>handleInputChange('email', value)} onChange={(value) => handleInputChange('email', value)}
name='email' name="email"
type='email' type="email"
/> />
<Button onClick={sendVerificationCode} <Button onClick={sendVerificationCode}
disabled={disableButton || loading}> disabled={disableButton || loading}>
{disableButton ? `重新发送(${countdown})` : '获取验证码'} {disableButton ? `重新发送(${countdown})` : '获取验证码'}
</Button> </Button>
</div> </div>
<div style={{marginTop: 10}}> <div style={{ marginTop: 10 }}>
<Input <Input
fluid fluid
placeholder='验证码' placeholder="验证码"
name='email_verification_code' name="email_verification_code"
value={inputs.email_verification_code} value={inputs.email_verification_code}
onChange={(value)=>handleInputChange('email_verification_code', value)} onChange={(value) => handleInputChange('email_verification_code', value)}
/> />
</div> </div>
{turnstileEnabled ? ( {turnstileEnabled ? (
<Turnstile <Turnstile
sitekey={turnstileSiteKey} sitekey={turnstileSiteKey}
onVerify={(token) => { onVerify={(token) => {
setTurnstileToken(token); setTurnstileToken(token);
}} }}
/> />
) : ( ) : (
<></> <></>
)} )}
</Modal> </Modal>
<Modal <Modal
onCancel={() => setShowAccountDeleteModal(false)} onCancel={() => setShowAccountDeleteModal(false)}
visible={showAccountDeleteModal} visible={showAccountDeleteModal}
size={'small'} size={'small'}
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"
value={inputs.self_account_deletion_confirmation} value={inputs.self_account_deletion_confirmation}
onChange={(value)=>handleInputChange('self_account_deletion_confirmation', value)} onChange={(value) => handleInputChange('self_account_deletion_confirmation', value)}
/> />
{turnstileEnabled ? ( {turnstileEnabled ? (
<Turnstile <Turnstile
sitekey={turnstileSiteKey} sitekey={turnstileSiteKey}
onVerify={(token) => { onVerify={(token) => {
setTurnstileToken(token); setTurnstileToken(token);
}} }}
/> />
) : ( ) : (
<></> <></>
)} )}
</div> </div>
</Modal> </Modal>
<Modal <Modal
onCancel={() => setShowChangePasswordModal(false)} onCancel={() => setShowChangePasswordModal(false)}
visible={showChangePasswordModal} visible={showChangePasswordModal}
size={'small'} size={'small'}
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="新密码"
value={inputs.set_new_password} value={inputs.set_new_password}
onChange={(value)=>handleInputChange('set_new_password', value)} onChange={(value) => handleInputChange('set_new_password', value)}
/> />
<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}
onChange={(value)=>handleInputChange('set_new_password_confirmation', value)} onChange={(value) => handleInputChange('set_new_password_confirmation', value)}
/> />
{turnstileEnabled ? ( {turnstileEnabled ? (
<Turnstile <Turnstile
sitekey={turnstileSiteKey} sitekey={turnstileSiteKey}
onVerify={(token) => { onVerify={(token) => {
setTurnstileToken(token); setTurnstileToken(token);
}} }}
/> />
) : ( ) : (
<></> <></>
)} )}
</div> </div>
</Modal> </Modal>
</div> </div>
</Layout.Content> </Layout.Content>
</Layout> </Layout>
</div> </div>
); );
}; };
export default PersonalSetting; export default PersonalSetting;
web/src/components/PrivateRoute.js
...@@ -5,7 +5,7 @@ import { history } from '../helpers'; ...@@ -5,7 +5,7 @@ import { history } from '../helpers';
function PrivateRoute({ children }) { function PrivateRoute({ children }) {
if (!localStorage.getItem('user')) { if (!localStorage.getItem('user')) {
return <Navigate to='/login' state={{ from: history.location }} />; return <Navigate to="/login" state={{ from: history.location }} />;
} }
return children; return children;
} }
......
web/src/components/RedemptionsTable.js
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from 'react';
import {API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string} from '../helpers'; import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
import {ITEMS_PER_PAGE} from '../constants'; import { ITEMS_PER_PAGE } from '../constants';
import {renderQuota} from '../helpers/render'; import { renderQuota } from '../helpers/render';
import {Button, Modal, Popconfirm, Popover, Table, Tag, Form} from "@douyinfe/semi-ui"; import { Button, Form, Modal, Popconfirm, Popover, Table, Tag } from '@douyinfe/semi-ui';
import EditRedemption from "../pages/Redemption/EditRedemption"; import EditRedemption from '../pages/Redemption/EditRedemption';
function renderTimestamp(timestamp) { function renderTimestamp(timestamp) {
return ( return (
<> <>
{timestamp2string(timestamp)} {timestamp2string(timestamp)}
</> </>
); );
} }
function renderStatus(status) { function renderStatus(status) {
switch (status) { switch (status) {
case 1: case 1:
return <Tag color='green' size='large'>未使用</Tag>; return <Tag color="green" size="large">未使用</Tag>;
case 2: case 2:
return <Tag color='red' size='large'> 已禁用 </Tag>; return <Tag color="red" size="large"> 已禁用 </Tag>;
case 3: case 3:
return <Tag color='grey' size='large'> 已使用 </Tag>; return <Tag color="grey" size="large"> 已使用 </Tag>;
default: default:
return <Tag color='black' size='large'> 未知状态 </Tag>; return <Tag color="black" size="large"> 未知状态 </Tag>;
} }
} }
const RedemptionsTable = () => { const RedemptionsTable = () => {
const columns = [ const columns = [
{ {
title: 'ID', title: 'ID',
dataIndex: 'id', dataIndex: 'id'
}, },
{ {
title: '名称', title: '名称',
dataIndex: 'name', dataIndex: 'name'
}, },
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
{renderStatus(text)} {renderStatus(text)}
</div> </div>
); );
}, }
}, },
{ {
title: '额度', title: '额度',
dataIndex: 'quota', dataIndex: 'quota',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
{renderQuota(parseInt(text))} {renderQuota(parseInt(text))}
</div> </div>
); );
}, }
}, },
{ {
title: '创建时间', title: '创建时间',
dataIndex: 'created_time', dataIndex: 'created_time',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
{renderTimestamp(text)} {renderTimestamp(text)}
</div> </div>
); );
}, }
}, },
{ {
title: '兑换人ID', title: '兑换人ID',
dataIndex: 'used_user_id', dataIndex: 'used_user_id',
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
{text === 0 ? '无' : text} {text === 0 ? '无' : text}
</div> </div>
); );
}, }
}, },
{ {
title: '', title: '',
dataIndex: 'operate', dataIndex: 'operate',
render: (text, record, index) => ( render: (text, record, index) => (
<div> <div>
<Popover <Popover
content={ content={
record.key record.key
} }
style={{padding: 20}} style={{ padding: 20 }}
position="top" position="top"
> >
<Button theme='light' type='tertiary' style={{marginRight: 1}}>查看</Button> <Button theme="light" type="tertiary" style={{ marginRight: 1 }}>查看</Button>
</Popover> </Popover>
<Button theme='light' type='secondary' style={{marginRight: 1}} <Button theme="light" type="secondary" style={{ marginRight: 1 }}
onClick={async (text) => { onClick={async (text) => {
await copyText(record.key) await copyText(record.key);
}} }}
>复制</Button> >复制</Button>
<Popconfirm <Popconfirm
title="确定是否要删除此兑换码？" title="确定是否要删除此兑换码？"
content="此修改将不可逆" content="此修改将不可逆"
okType={'danger'} okType={'danger'}
position={'left'} position={'left'}
onConfirm={() => { onConfirm={() => {
manageRedemption(record.id, 'delete', record).then( manageRedemption(record.id, 'delete', record).then(
() => { () => {
removeRecord(record.key); removeRecord(record.key);
} }
) );
}} }}
> >
<Button theme='light' type='danger' style={{marginRight: 1}}>删除</Button> <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
</Popconfirm> </Popconfirm>
{ {
record.status === 1 ? record.status === 1 ?
<Button theme='light' type='warning' style={{marginRight: 1}} onClick={ <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
async () => { async () => {
manageRedemption( manageRedemption(
record.id, record.id,
'disable', 'disable',
record record
) );
} }
}>禁用</Button> : }>禁用</Button> :
<Button theme='light' type='secondary' style={{marginRight: 1}} onClick={ <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
async () => { async () => {
manageRedemption( manageRedemption(
record.id, record.id,
'enable', 'enable',
record record
); );
} }
} disabled={record.status === 3}>启用</Button> } disabled={record.status === 3}>启用</Button>
} }
<Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={ <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
() => { () => {
setEditingRedemption(record); setEditingRedemption(record);
setShowEdit(true); setShowEdit(true);
} }
} disabled={record.status !== 1}>编辑</Button> } disabled={record.status !== 1}>编辑</Button>
</div> </div>
), )
}, }
]; ];
const [redemptions, setRedemptions] = useState([]); const [redemptions, setRedemptions] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [activePage, setActivePage] = useState(1); const [activePage, setActivePage] = useState(1);
const [searchKeyword, setSearchKeyword] = useState(''); const [searchKeyword, setSearchKeyword] = useState('');
const [searching, setSearching] = useState(false); const [searching, setSearching] = useState(false);
const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE); const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE);
const [selectedKeys, setSelectedKeys] = useState([]); const [selectedKeys, setSelectedKeys] = useState([]);
const [editingRedemption, setEditingRedemption] = useState({ const [editingRedemption, setEditingRedemption] = useState({
id: undefined, id: undefined
}); });
const [showEdit, setShowEdit] = useState(false); const [showEdit, setShowEdit] = useState(false);
const closeEdit = () => { const closeEdit = () => {
setShowEdit(false); setShowEdit(false);
} };
// const setCount = (data) => { // const setCount = (data) => {
// if (data.length >= (activePage) * ITEMS_PER_PAGE) { // if (data.length >= (activePage) * ITEMS_PER_PAGE) {
// setTokenCount(data.length + 1); // setTokenCount(data.length + 1);
// } else { // } else {
// setTokenCount(data.length); // setTokenCount(data.length);
// } // }
// } // }
const setRedemptionFormat = (redeptions) => { const setRedemptionFormat = (redeptions) => {
// for (let i = 0; i < redeptions.length; i++) { // for (let i = 0; i < redeptions.length; i++) {
// redeptions[i].key = '' + redeptions[i].id; // redeptions[i].key = '' + redeptions[i].id;
// } // }
// data.key = '' + data.id // data.key = '' + data.id
setRedemptions(redeptions); setRedemptions(redeptions);
if (redeptions.length >= (activePage) * ITEMS_PER_PAGE) { if (redeptions.length >= (activePage) * ITEMS_PER_PAGE) {
setTokenCount(redeptions.length + 1); setTokenCount(redeptions.length + 1);
} else { } else {
setTokenCount(redeptions.length); setTokenCount(redeptions.length);
}
} }
};
const loadRedemptions = async (startIdx) => { const loadRedemptions = async (startIdx) => {
const res = await API.get(`/api/redemption/?p=${startIdx}`); const res = await API.get(`/api/redemption/?p=${startIdx}`);
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
if (startIdx === 0) { if (startIdx === 0) {
setRedemptionFormat(data); setRedemptionFormat(data);
} else { } else {
let newRedemptions = redemptions; let newRedemptions = redemptions;
newRedemptions.push(...data); newRedemptions.push(...data);
setRedemptionFormat(newRedemptions); setRedemptionFormat(newRedemptions);
} }
} else { } else {
showError(message); showError(message);
} }
setLoading(false); setLoading(false);
}; };
const removeRecord = key => { const removeRecord = key => {
let newDataSource = [...redemptions]; let newDataSource = [...redemptions];
if (key != null) { if (key != null) {
let idx = newDataSource.findIndex(data => data.key === key); let idx = newDataSource.findIndex(data => data.key === key);
if (idx > -1) { if (idx > -1) {
newDataSource.splice(idx, 1); newDataSource.splice(idx, 1);
setRedemptions(newDataSource); setRedemptions(newDataSource);
} }
} }
}; };
const copyText = async (text) => { const copyText = async (text) => {
if (await copy(text)) { if (await copy(text)) {
showSuccess('已复制到剪贴板！'); showSuccess('已复制到剪贴板！');
} else { } else {
// setSearchKeyword(text); // setSearchKeyword(text);
Modal.error({title: '无法复制到剪贴板，请手动复制', content: text}); Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
}
} }
};
const onPaginationChange = (e, {activePage}) => { const onPaginationChange = (e, { activePage }) => {
(async () => { (async () => {
if (activePage === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) { if (activePage === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) {
// In this case we have to load more data and then append them. // In this case we have to load more data and then append them.
await loadRedemptions(activePage - 1); await loadRedemptions(activePage - 1);
} }
setActivePage(activePage); setActivePage(activePage);
})(); })();
}; };
useEffect(() => { useEffect(() => {
loadRedemptions(0) loadRedemptions(0)
.then() .then()
.catch((reason) => { .catch((reason) => {
showError(reason); showError(reason);
}); });
}, []); }, []);
const refresh = async () => { const refresh = async () => {
await loadRedemptions(activePage - 1); await loadRedemptions(activePage - 1);
}; };
const manageRedemption = async (id, action, record) => { const manageRedemption = async (id, action, record) => {
let data = {id}; let data = { id };
let res; let res;
switch (action) { switch (action) {
case 'delete': case 'delete':
res = await API.delete(`/api/redemption/${id}/`); res = await API.delete(`/api/redemption/${id}/`);
break; break;
case 'enable': case 'enable':
data.status = 1; data.status = 1;
res = await API.put('/api/redemption/?status_only=true', data); res = await API.put('/api/redemption/?status_only=true', data);
break; break;
case 'disable': case 'disable':
data.status = 2; data.status = 2;
res = await API.put('/api/redemption/?status_only=true', data); res = await API.put('/api/redemption/?status_only=true', data);
break; break;
} }
const {success, message} = res.data; const { success, message } = res.data;
if (success) { if (success) {
showSuccess('操作成功完成！'); showSuccess('操作成功完成！');
let redemption = res.data.data; let redemption = res.data.data;
let newRedemptions = [...redemptions]; let newRedemptions = [...redemptions];
// let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx; // let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
if (action === 'delete') { if (action === 'delete') {
} else { } else {
record.status = redemption.status; record.status = redemption.status;
} }
setRedemptions(newRedemptions); setRedemptions(newRedemptions);
} else { } else {
showError(message); showError(message);
} }
}; };
const searchRedemptions = async () => { const searchRedemptions = async () => {
if (searchKeyword === '') { if (searchKeyword === '') {
// if keyword is blank, load files instead. // if keyword is blank, load files instead.
await loadRedemptions(0); await loadRedemptions(0);
setActivePage(1); setActivePage(1);
return; return;
} }
setSearching(true); setSearching(true);
const res = await API.get(`/api/redemption/search?keyword=${searchKeyword}`); const res = await API.get(`/api/redemption/search?keyword=${searchKeyword}`);
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
setRedemptions(data); setRedemptions(data);
setActivePage(1); setActivePage(1);
} else { } else {
showError(message); showError(message);
} }
setSearching(false); setSearching(false);
}; };
const handleKeywordChange = async (value) => { const handleKeywordChange = async (value) => {
setSearchKeyword(value.trim()); setSearchKeyword(value.trim());
}; };
const sortRedemption = (key) => { const sortRedemption = (key) => {
if (redemptions.length === 0) return; if (redemptions.length === 0) return;
setLoading(true); setLoading(true);
let sortedRedemptions = [...redemptions]; let sortedRedemptions = [...redemptions];
sortedRedemptions.sort((a, b) => { sortedRedemptions.sort((a, b) => {
return ('' + a[key]).localeCompare(b[key]); return ('' + a[key]).localeCompare(b[key]);
}); });
if (sortedRedemptions[0].id === redemptions[0].id) { if (sortedRedemptions[0].id === redemptions[0].id) {
sortedRedemptions.reverse(); sortedRedemptions.reverse();
} }
setRedemptions(sortedRedemptions); setRedemptions(sortedRedemptions);
setLoading(false); setLoading(false);
}; };
const handlePageChange = page => { const handlePageChange = page => {
setActivePage(page); setActivePage(page);
if (page === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) { if (page === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) {
// In this case we have to load more data and then append them. // In this case we have to load more data and then append them.
loadRedemptions(page - 1).then(r => { loadRedemptions(page - 1).then(r => {
}); });
} }
}; };
let pageData = redemptions.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE); let pageData = redemptions.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
const rowSelection = { const rowSelection = {
onSelect: (record, selected) => { onSelect: (record, selected) => {
}, },
onSelectAll: (selected, selectedRows) => { onSelectAll: (selected, selectedRows) => {
}, },
onChange: (selectedRowKeys, selectedRows) => { onChange: (selectedRowKeys, selectedRows) => {
setSelectedKeys(selectedRows); setSelectedKeys(selectedRows);
}, }
}; };
const handleRow = (record, index) => { const handleRow = (record, index) => {
if (record.status !== 1) { if (record.status !== 1) {
return { return {
style: { style: {
background: 'var(--semi-color-disabled-border)', background: 'var(--semi-color-disabled-border)'
},
};
} else {
return {};
} }
}; };
} else {
return {};
}
};
return ( return (
<> <>
<EditRedemption refresh={refresh} editingRedemption={editingRedemption} visiable={showEdit} <EditRedemption refresh={refresh} editingRedemption={editingRedemption} visiable={showEdit}
handleClose={closeEdit}></EditRedemption> handleClose={closeEdit}></EditRedemption>
<Form onSubmit={searchRedemptions}> <Form onSubmit={searchRedemptions}>
<Form.Input <Form.Input
label='搜索关键字' label="搜索关键字"
field='keyword' field="keyword"
icon='search' icon="search"
iconPosition='left' iconPosition="left"
placeholder='关键字(id或者名称)' placeholder="关键字(id或者名称)"
value={searchKeyword} value={searchKeyword}
loading={searching} loading={searching}
onChange={handleKeywordChange} onChange={handleKeywordChange}
/> />
</Form> </Form>
<Table style={{marginTop: 20}} columns={columns} dataSource={pageData} pagination={{ <Table style={{ marginTop: 20 }} columns={columns} dataSource={pageData} pagination={{
currentPage: activePage, currentPage: activePage,
pageSize: ITEMS_PER_PAGE, pageSize: ITEMS_PER_PAGE,
total: tokenCount, total: tokenCount,
// showSizeChanger: true, // showSizeChanger: true,
// pageSizeOptions: [10, 20, 50, 100], // pageSizeOptions: [10, 20, 50, 100],
formatPageText: (page) => `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${redemptions.length} 条`, formatPageText: (page) => `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${redemptions.length} 条`,
// onPageSizeChange: (size) => { // onPageSizeChange: (size) => {
// setPageSize(size); // setPageSize(size);
// setActivePage(1); // setActivePage(1);
// }, // },
onPageChange: handlePageChange, onPageChange: handlePageChange
}} loading={loading} rowSelection={rowSelection} onRow={handleRow}> }} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
</Table> </Table>
<Button theme='light' type='primary' style={{marginRight: 8}} onClick={ <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
() => { () => {
setEditingRedemption({ setEditingRedemption({
id: undefined, id: undefined
}); });
setShowEdit(true); setShowEdit(true);
} }
}>添加兑换码</Button> }>添加兑换码</Button>
<Button label='复制所选兑换码' type="warning" onClick={ <Button label="复制所选兑换码" type="warning" onClick={
async () => { async () => {
if (selectedKeys.length === 0) { if (selectedKeys.length === 0) {
showError('请至少选择一个兑换码！'); showError('请至少选择一个兑换码！');
return; return;
} }
let keys = ""; let keys = '';
for (let i = 0; i < selectedKeys.length; i++) { for (let i = 0; i < selectedKeys.length; i++) {
keys += selectedKeys[i].name + " " + selectedKeys[i].key + "\n"; keys += selectedKeys[i].name + ' ' + selectedKeys[i].key + '\n';
} }
await copyText(keys); await copyText(keys);
} }
}>复制所选兑换码到剪贴板</Button> }>复制所选兑换码到剪贴板</Button>
</> </>
); );
}; };
export default RedemptionsTable; export default RedemptionsTable;
web/src/components/RegisterForm.js
...@@ -98,49 +98,49 @@ const RegisterForm = () => { ...@@ -98,49 +98,49 @@ const RegisterForm = () => {
}; };
return ( return (
<Grid textAlign='center' style={{ marginTop: '48px' }}> <Grid textAlign="center" style={{ marginTop: '48px' }}>
<Grid.Column style={{ maxWidth: 450 }}> <Grid.Column style={{ maxWidth: 450 }}>
<Header as='h2' color='' textAlign='center'> <Header as="h2" color="" textAlign="center">
<Image src={logo} /> 新用户注册 <Image src={logo} /> 新用户注册
</Header> </Header>
<Form size='large'> <Form size="large">
<Segment> <Segment>
<Form.Input <Form.Input
fluid fluid
icon='user' icon="user"
iconPosition='left' iconPosition="left"
placeholder='输入用户名，最长 12 位' placeholder="输入用户名，最长 12 位"
onChange={handleChange} onChange={handleChange}
name='username' name="username"
/> />
<Form.Input <Form.Input
fluid fluid
icon='lock' icon="lock"
iconPosition='left' iconPosition="left"
placeholder='输入密码，最短 8 位，最长 20 位' placeholder="输入密码，最短 8 位，最长 20 位"
onChange={handleChange} onChange={handleChange}
name='password' name="password"
type='password' type="password"
/> />
<Form.Input <Form.Input
fluid fluid
icon='lock' icon="lock"
iconPosition='left' iconPosition="left"
placeholder='输入密码，最短 8 位，最长 20 位' placeholder="输入密码，最短 8 位，最长 20 位"
onChange={handleChange} onChange={handleChange}
name='password2' name="password2"
type='password' type="password"
/> />
{showEmailVerification ? ( {showEmailVerification ? (
<> <>
<Form.Input <Form.Input
fluid fluid
icon='mail' icon="mail"
iconPosition='left' iconPosition="left"
placeholder='输入邮箱地址' placeholder="输入邮箱地址"
onChange={handleChange} onChange={handleChange}
name='email' name="email"
type='email' type="email"
action={ action={
<Button onClick={sendVerificationCode} disabled={loading}> <Button onClick={sendVerificationCode} disabled={loading}>
获取验证码 获取验证码
...@@ -149,11 +149,11 @@ const RegisterForm = () => { ...@@ -149,11 +149,11 @@ const RegisterForm = () => {
/> />
<Form.Input <Form.Input
fluid fluid
icon='lock' icon="lock"
iconPosition='left' iconPosition="left"
placeholder='输入验证码' placeholder="输入验证码"
onChange={handleChange} onChange={handleChange}
name='verification_code' name="verification_code"
/> />
</> </>
) : ( ) : (
...@@ -170,9 +170,9 @@ const RegisterForm = () => { ...@@ -170,9 +170,9 @@ const RegisterForm = () => {
<></> <></>
)} )}
<Button <Button
color='green' color="green"
fluid fluid
size='large' size="large"
onClick={handleSubmit} onClick={handleSubmit}
loading={loading} loading={loading}
> >
...@@ -182,7 +182,7 @@ const RegisterForm = () => { ...@@ -182,7 +182,7 @@ const RegisterForm = () => {
</Form> </Form>
<Message> <Message>
已有账户？ 已有账户？
<Link to='/login' className='btn btn-link'> <Link to="/login" className="btn btn-link">
点击登录 点击登录
</Link> </Link>
</Message> </Message>
......
web/src/components/SiderBar.js
import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'; import React, { useContext, useEffect, useMemo, useState } from 'react';
import {Link, useNavigate} from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import {UserContext} from '../context/User'; import { UserContext } from '../context/User';
import { StatusContext } from '../context/Status'; import { StatusContext } from '../context/Status';
import { API, getLogo, getSystemName, isAdmin, isMobile, showError, showSuccess } from '../helpers'; import { API, getLogo, getSystemName, isAdmin, isMobile, showError } from '../helpers';
import '../index.css'; import '../index.css';
import { import {
IconCalendarClock, IconCalendarClock,
IconHistogram, IconComment,
IconGift, IconCreditCard,
IconKey, IconGift,
IconUser, IconHistogram,
IconLayers, IconHome,
IconSetting, IconImage,
IconCreditCard, IconKey,
IconComment, IconLayers,
IconHome, IconSetting,
IconImage IconUser
} from '@douyinfe/semi-icons'; } from '@douyinfe/semi-icons';
import {Nav, Avatar, Dropdown, Layout} from '@douyinfe/semi-ui'; import { Layout, Nav } from '@douyinfe/semi-ui';
// HeaderBar Buttons // HeaderBar Buttons
const SiderBar = () => { const SiderBar = () => {
const [userState, userDispatch] = useContext(UserContext); const [userState, userDispatch] = useContext(UserContext);
const [statusState, statusDispatch] = useContext(StatusContext); const [statusState, statusDispatch] = useContext(StatusContext);
const defaultIsCollapsed = isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true'; const defaultIsCollapsed = isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true';
let navigate = useNavigate(); let navigate = useNavigate();
const [selectedKeys, setSelectedKeys] = useState(['home']); const [selectedKeys, setSelectedKeys] = useState(['home']);
const systemName = getSystemName(); const systemName = getSystemName();
const logo = getLogo(); const logo = getLogo();
const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed); const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed);
const headerButtons = useMemo(() => [ const headerButtons = useMemo(() => [
{ {
text: '首页', text: '首页',
itemKey: 'home', itemKey: 'home',
to: '/', to: '/',
icon: <IconHome/> icon: <IconHome />
}, },
{ {
text: '渠道', text: '渠道',
itemKey: 'channel', itemKey: 'channel',
to: '/channel', to: '/channel',
icon: <IconLayers/>, icon: <IconLayers />,
className: isAdmin()?'semi-navigation-item-normal':'tableHiddle', className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
}, },
{ {
text: '聊天', text: '聊天',
itemKey: 'chat', itemKey: 'chat',
to: '/chat', to: '/chat',
icon: <IconComment />, icon: <IconComment />,
className: localStorage.getItem('chat_link')?'semi-navigation-item-normal':'tableHiddle', className: localStorage.getItem('chat_link') ? 'semi-navigation-item-normal' : 'tableHiddle'
}, },
{ {
text: '令牌', text: '令牌',
itemKey: 'token', itemKey: 'token',
to: '/token', to: '/token',
icon: <IconKey/> icon: <IconKey />
}, },
{ {
text: '兑换码', text: '兑换码',
itemKey: 'redemption', itemKey: 'redemption',
to: '/redemption', to: '/redemption',
icon: <IconGift/>, icon: <IconGift />,
className: isAdmin()?'semi-navigation-item-normal':'tableHiddle', className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
}, },
{ {
text: '钱包', text: '钱包',
itemKey: 'topup', itemKey: 'topup',
to: '/topup', to: '/topup',
icon: <IconCreditCard/> icon: <IconCreditCard />
}, },
{ {
text: '用户管理', text: '用户管理',
itemKey: 'user', itemKey: 'user',
to: '/user', to: '/user',
icon: <IconUser/>, icon: <IconUser />,
className: isAdmin()?'semi-navigation-item-normal':'tableHiddle', className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
}, },
{ {
text: '日志', text: '日志',
itemKey: 'log', itemKey: 'log',
to: '/log', to: '/log',
icon: <IconHistogram/> icon: <IconHistogram />
}, },
{ {
text: '数据看板', text: '数据看板',
itemKey: 'detail', itemKey: 'detail',
to: '/detail', to: '/detail',
icon: <IconCalendarClock />, icon: <IconCalendarClock />,
className: localStorage.getItem('enable_data_export') === 'true'?'semi-navigation-item-normal':'tableHiddle', className: localStorage.getItem('enable_data_export') === 'true' ? 'semi-navigation-item-normal' : 'tableHiddle'
}, },
{ {
text: '绘图', text: '绘图',
itemKey: 'midjourney', itemKey: 'midjourney',
to: '/midjourney', to: '/midjourney',
icon: <IconImage/>, icon: <IconImage />,
className: localStorage.getItem('enable_drawing') === 'true'?'semi-navigation-item-normal':'tableHiddle', className: localStorage.getItem('enable_drawing') === 'true' ? 'semi-navigation-item-normal' : 'tableHiddle'
}, },
{ {
text: '设置', text: '设置',
itemKey: 'setting', itemKey: 'setting',
to: '/setting', to: '/setting',
icon: <IconSetting/> icon: <IconSetting />
}, }
// { // {
// text: '关于', // text: '关于',
// itemKey: 'about', // itemKey: 'about',
// to: '/about', // to: '/about',
// icon: <IconAt/> // icon: <IconAt/>
// } // }
], [localStorage.getItem('enable_data_export'), localStorage.getItem('enable_drawing'), localStorage.getItem('chat_link'), isAdmin()]); ], [localStorage.getItem('enable_data_export'), localStorage.getItem('enable_drawing'), localStorage.getItem('chat_link'), isAdmin()]);
const loadStatus = async () => { const loadStatus = async () => {
const res = await API.get('/api/status'); const res = await API.get('/api/status');
const { success, data } = res.data; const { success, data } = res.data;
if (success) { if (success) {
localStorage.setItem('status', JSON.stringify(data)); localStorage.setItem('status', JSON.stringify(data));
statusDispatch({ type: 'set', payload: data }); statusDispatch({ type: 'set', payload: data });
localStorage.setItem('system_name', data.system_name); localStorage.setItem('system_name', data.system_name);
localStorage.setItem('logo', data.logo); localStorage.setItem('logo', data.logo);
localStorage.setItem('footer_html', data.footer_html); localStorage.setItem('footer_html', data.footer_html);
localStorage.setItem('quota_per_unit', data.quota_per_unit); localStorage.setItem('quota_per_unit', data.quota_per_unit);
localStorage.setItem('display_in_currency', data.display_in_currency); localStorage.setItem('display_in_currency', data.display_in_currency);
localStorage.setItem('enable_drawing', data.enable_drawing); localStorage.setItem('enable_drawing', data.enable_drawing);
localStorage.setItem('enable_data_export', data.enable_data_export); localStorage.setItem('enable_data_export', data.enable_data_export);
localStorage.setItem('data_export_default_time', data.data_export_default_time); localStorage.setItem('data_export_default_time', data.data_export_default_time);
localStorage.setItem('default_collapse_sidebar', data.default_collapse_sidebar); localStorage.setItem('default_collapse_sidebar', data.default_collapse_sidebar);
if (data.chat_link) { if (data.chat_link) {
localStorage.setItem('chat_link', data.chat_link); localStorage.setItem('chat_link', data.chat_link);
} else { } else {
localStorage.removeItem('chat_link'); localStorage.removeItem('chat_link');
} }
if (data.chat_link2) { if (data.chat_link2) {
localStorage.setItem('chat_link2', data.chat_link2); localStorage.setItem('chat_link2', data.chat_link2);
} else { } else {
localStorage.removeItem('chat_link2'); localStorage.removeItem('chat_link2');
} }
} else { } else {
showError('无法正常连接至服务器！'); showError('无法正常连接至服务器！');
} }
}; };
useEffect(() => { useEffect(() => {
loadStatus().then(() => { loadStatus().then(() => {
setIsCollapsed(isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true'); setIsCollapsed(isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true');
}); });
},[]) }, []);
return ( return (
<> <>
<Layout> <Layout>
<div style={{height: '100%'}}> <div style={{ height: '100%' }}>
<Nav <Nav
// bodyStyle={{ maxWidth: 200 }} // bodyStyle={{ maxWidth: 200 }}
style={{ maxWidth: 200 }} style={{ maxWidth: 200 }}
defaultIsCollapsed={isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true'} defaultIsCollapsed={isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true'}
isCollapsed={isCollapsed} isCollapsed={isCollapsed}
onCollapseChange={collapsed => { onCollapseChange={collapsed => {
setIsCollapsed(collapsed); setIsCollapsed(collapsed);
}} }}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
renderWrapper={({itemElement, isSubNav, isInSubNav, props}) => { renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
const routerMap = { const routerMap = {
home: "/", home: '/',
channel: "/channel", channel: '/channel',
token: "/token", token: '/token',
redemption: "/redemption", redemption: '/redemption',
topup: "/topup", topup: '/topup',
user: "/user", user: '/user',
log: "/log", log: '/log',
midjourney: "/midjourney", midjourney: '/midjourney',
setting: "/setting", setting: '/setting',
about: "/about", about: '/about',
chat: "/chat", chat: '/chat',
detail: "/detail", detail: '/detail'
}; };
return ( return (
<Link <Link
style={{textDecoration: "none"}} style={{ textDecoration: 'none' }}
to={routerMap[props.itemKey]} to={routerMap[props.itemKey]}
> >
{itemElement} {itemElement}
</Link> </Link>
); );
}} }}
items={headerButtons} items={headerButtons}
onSelect={key => { onSelect={key => {
setSelectedKeys([key.itemKey]); setSelectedKeys([key.itemKey]);
}} }}
header={{ header={{
logo: <img src={logo} alt='logo' style={{marginRight: '0.75em'}}/>, logo: <img src={logo} alt="logo" style={{ marginRight: '0.75em' }} />,
text: systemName, text: systemName
}} }}
// footer={{ // footer={{
// text: '© 2021 NekoAPI', // text: '© 2021 NekoAPI',
// }} // }}
> >
<Nav.Footer collapseButton={true}> <Nav.Footer collapseButton={true}>
</Nav.Footer> </Nav.Footer>
</Nav> </Nav>
</div> </div>
</Layout> </Layout>
</> </>
); );
}; };
export default SiderBar; export default SiderBar;
web/src/components/SystemSetting.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Divider, Form, Grid, Header, Modal, Message } from 'semantic-ui-react'; import { Button, Divider, Form, Grid, Header, Message, Modal } from 'semantic-ui-react';
import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers'; import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers';
const SystemSetting = () => { const SystemSetting = () => {
let [inputs, setInputs] = useState({ let [inputs, setInputs] = useState({
PasswordLoginEnabled: '', PasswordLoginEnabled: '',
PasswordRegisterEnabled: '', PasswordRegisterEnabled: '',
EmailVerificationEnabled: '', EmailVerificationEnabled: '',
GitHubOAuthEnabled: '', GitHubOAuthEnabled: '',
GitHubClientId: '', GitHubClientId: '',
GitHubClientSecret: '', GitHubClientSecret: '',
Notice: '', Notice: '',
SMTPServer: '', SMTPServer: '',
SMTPPort: '', SMTPPort: '',
SMTPAccount: '', SMTPAccount: '',
SMTPFrom: '', SMTPFrom: '',
SMTPToken: '', SMTPToken: '',
ServerAddress: '', ServerAddress: '',
EpayId: '', EpayId: '',
EpayKey: '', EpayKey: '',
Price: 7.3, Price: 7.3,
MinTopUp: 1, MinTopUp: 1,
TopupGroupRatio: '', TopupGroupRatio: '',
PayAddress: '', PayAddress: '',
CustomCallbackAddress: '', CustomCallbackAddress: '',
Footer: '', Footer: '',
WeChatAuthEnabled: '', WeChatAuthEnabled: '',
WeChatServerAddress: '', WeChatServerAddress: '',
WeChatServerToken: '', WeChatServerToken: '',
WeChatAccountQRCodeImageURL: '', WeChatAccountQRCodeImageURL: '',
TurnstileCheckEnabled: '', TurnstileCheckEnabled: '',
TurnstileSiteKey: '', TurnstileSiteKey: '',
TurnstileSecretKey: '', TurnstileSecretKey: '',
RegisterEnabled: '', RegisterEnabled: '',
EmailDomainRestrictionEnabled: '', EmailDomainRestrictionEnabled: '',
EmailDomainWhitelist: '', EmailDomainWhitelist: '',
// telegram login // telegram login
TelegramOAuthEnabled: '', TelegramOAuthEnabled: '',
TelegramBotToken: '', TelegramBotToken: '',
TelegramBotName: '', TelegramBotName: ''
}); });
const [originInputs, setOriginInputs] = useState({}); const [originInputs, setOriginInputs] = useState({});
let [loading, setLoading] = useState(false); let [loading, setLoading] = useState(false);
const [EmailDomainWhitelist, setEmailDomainWhitelist] = useState([]); const [EmailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
const [restrictedDomainInput, setRestrictedDomainInput] = useState(''); const [restrictedDomainInput, setRestrictedDomainInput] = useState('');
const [showPasswordWarningModal, setShowPasswordWarningModal] = useState(false); const [showPasswordWarningModal, setShowPasswordWarningModal] = useState(false);
const getOptions = async () => {
const res = await API.get('/api/option/');
const { success, message, data } = res.data;
if (success) {
let newInputs = {};
data.forEach((item) => {
if (item.key === 'TopupGroupRatio') {
item.value = JSON.stringify(JSON.parse(item.value), null, 2);
}
newInputs[item.key] = item.value;
});
setInputs({
...newInputs,
EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(',')
});
setOriginInputs(newInputs);
setEmailDomainWhitelist(newInputs.EmailDomainWhitelist.split(',').map((item) => { const getOptions = async () => {
return { key: item, text: item, value: item }; const res = await API.get('/api/option/');
})); const { success, message, data } = res.data;
} else { if (success) {
showError(message); let newInputs = {};
data.forEach((item) => {
if (item.key === 'TopupGroupRatio') {
item.value = JSON.stringify(JSON.parse(item.value), null, 2);
} }
}; newInputs[item.key] = item.value;
});
setInputs({
...newInputs,
EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(',')
});
setOriginInputs(newInputs);
useEffect(() => { setEmailDomainWhitelist(newInputs.EmailDomainWhitelist.split(',').map((item) => {
getOptions().then(); return { key: item, text: item, value: item };
}, []); }));
} else {
showError(message);
}
};
const updateOption = async (key, value) => { useEffect(() => {
setLoading(true); getOptions().then();
switch (key) { }, []);
case 'PasswordLoginEnabled':
case 'PasswordRegisterEnabled':
case 'EmailVerificationEnabled':
case 'GitHubOAuthEnabled':
case 'WeChatAuthEnabled':
case 'TelegramOAuthEnabled':
case 'TurnstileCheckEnabled':
case 'EmailDomainRestrictionEnabled':
case 'RegisterEnabled':
value = inputs[key] === 'true' ? 'false' : 'true';
break;
default:
break;
}
const res = await API.put('/api/option/', {
key,
value
});
const { success, message } = res.data;
if (success) {
if (key === 'EmailDomainWhitelist') {
value = value.split(',');
}
if (key === 'Price') {
value = parseFloat(value);
}
setInputs((inputs) => ({
...inputs, [key]: value
}));
} else {
showError(message);
}
setLoading(false);
};
const handleInputChange = async (e, { name, value }) => { const updateOption = async (key, value) => {
if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') { setLoading(true);
// block disabling password login switch (key) {
setShowPasswordWarningModal(true); case 'PasswordLoginEnabled':
return; case 'PasswordRegisterEnabled':
} case 'EmailVerificationEnabled':
if ( case 'GitHubOAuthEnabled':
name === 'Notice' || case 'WeChatAuthEnabled':
name.startsWith('SMTP') || case 'TelegramOAuthEnabled':
name === 'ServerAddress' || case 'TurnstileCheckEnabled':
name === 'EpayId' || case 'EmailDomainRestrictionEnabled':
name === 'EpayKey' || case 'RegisterEnabled':
name === 'Price' || value = inputs[key] === 'true' ? 'false' : 'true';
name === 'PayAddress' || break;
name === 'GitHubClientId' || default:
name === 'GitHubClientSecret' || break;
name === 'WeChatServerAddress' || }
name === 'WeChatServerToken' || const res = await API.put('/api/option/', {
name === 'WeChatAccountQRCodeImageURL' || key,
name === 'TurnstileSiteKey' || value
name === 'TurnstileSecretKey' || });
name === 'EmailDomainWhitelist' || const { success, message } = res.data;
name === 'TopupGroupRatio' || if (success) {
name === 'TelegramBotToken' || if (key === 'EmailDomainWhitelist') {
name === 'TelegramBotName' value = value.split(',');
) { }
setInputs((inputs) => ({ ...inputs, [name]: value })); if (key === 'Price') {
} else { value = parseFloat(value);
await updateOption(name, value); }
} setInputs((inputs) => ({
}; ...inputs, [key]: value
}));
} else {
showError(message);
}
setLoading(false);
};
const submitServerAddress = async () => { const handleInputChange = async (e, { name, value }) => {
let ServerAddress = removeTrailingSlash(inputs.ServerAddress); if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') {
await updateOption('ServerAddress', ServerAddress); // block disabling password login
}; setShowPasswordWarningModal(true);
return;
}
if (
name === 'Notice' ||
name.startsWith('SMTP') ||
name === 'ServerAddress' ||
name === 'EpayId' ||
name === 'EpayKey' ||
name === 'Price' ||
name === 'PayAddress' ||
name === 'GitHubClientId' ||
name === 'GitHubClientSecret' ||
name === 'WeChatServerAddress' ||
name === 'WeChatServerToken' ||
name === 'WeChatAccountQRCodeImageURL' ||
name === 'TurnstileSiteKey' ||
name === 'TurnstileSecretKey' ||
name === 'EmailDomainWhitelist' ||
name === 'TopupGroupRatio' ||
name === 'TelegramBotToken' ||
name === 'TelegramBotName'
) {
setInputs((inputs) => ({ ...inputs, [name]: value }));
} else {
await updateOption(name, value);
}
};
const submitPayAddress = async () => { const submitServerAddress = async () => {
if (inputs.ServerAddress === '') { let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
showError('请先填写服务器地址'); await updateOption('ServerAddress', ServerAddress);
return };
}
if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
if (!verifyJSON(inputs.TopupGroupRatio)) {
showError('充值分组倍率不是合法的 JSON 字符串');
return;
}
await updateOption('TopupGroupRatio', inputs.TopupGroupRatio);
}
let PayAddress = removeTrailingSlash(inputs.PayAddress);
await updateOption('PayAddress', PayAddress);
if (inputs.EpayId !== '') {
await updateOption('EpayId', inputs.EpayId);
}
if (inputs.EpayKey !== '') {
await updateOption('EpayKey', inputs.EpayKey);
}
await updateOption('Price', "" + inputs.Price);
};
const submitSMTP = async () => { const submitPayAddress = async () => {
if (originInputs['SMTPServer'] !== inputs.SMTPServer) { if (inputs.ServerAddress === '') {
await updateOption('SMTPServer', inputs.SMTPServer); showError('请先填写服务器地址');
} return;
if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) { }
await updateOption('SMTPAccount', inputs.SMTPAccount); if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
} if (!verifyJSON(inputs.TopupGroupRatio)) {
if (originInputs['SMTPFrom'] !== inputs.SMTPFrom) { showError('充值分组倍率不是合法的 JSON 字符串');
await updateOption('SMTPFrom', inputs.SMTPFrom); return;
} }
if ( await updateOption('TopupGroupRatio', inputs.TopupGroupRatio);
originInputs['SMTPPort'] !== inputs.SMTPPort && }
inputs.SMTPPort !== '' let PayAddress = removeTrailingSlash(inputs.PayAddress);
) { await updateOption('PayAddress', PayAddress);
await updateOption('SMTPPort', inputs.SMTPPort); if (inputs.EpayId !== '') {
} await updateOption('EpayId', inputs.EpayId);
if ( }
originInputs['SMTPToken'] !== inputs.SMTPToken && if (inputs.EpayKey !== '') {
inputs.SMTPToken !== '' await updateOption('EpayKey', inputs.EpayKey);
) { }
await updateOption('SMTPToken', inputs.SMTPToken); await updateOption('Price', '' + inputs.Price);
} };
};
const submitSMTP = async () => {
if (originInputs['SMTPServer'] !== inputs.SMTPServer) {
await updateOption('SMTPServer', inputs.SMTPServer);
}
if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) {
await updateOption('SMTPAccount', inputs.SMTPAccount);
}
if (originInputs['SMTPFrom'] !== inputs.SMTPFrom) {
await updateOption('SMTPFrom', inputs.SMTPFrom);
}
if (
originInputs['SMTPPort'] !== inputs.SMTPPort &&
inputs.SMTPPort !== ''
) {
await updateOption('SMTPPort', inputs.SMTPPort);
}
if (
originInputs['SMTPToken'] !== inputs.SMTPToken &&
inputs.SMTPToken !== ''
) {
await updateOption('SMTPToken', inputs.SMTPToken);
}
};
const submitEmailDomainWhitelist = async () => {
if (
originInputs['EmailDomainWhitelist'] !== inputs.EmailDomainWhitelist.join(',') &&
inputs.SMTPToken !== ''
) {
await updateOption('EmailDomainWhitelist', inputs.EmailDomainWhitelist.join(','));
}
};
const submitWeChat = async () => { const submitEmailDomainWhitelist = async () => {
if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) { if (
await updateOption( originInputs['EmailDomainWhitelist'] !== inputs.EmailDomainWhitelist.join(',') &&
'WeChatServerAddress', inputs.SMTPToken !== ''
removeTrailingSlash(inputs.WeChatServerAddress) ) {
); await updateOption('EmailDomainWhitelist', inputs.EmailDomainWhitelist.join(','));
} }
if ( };
originInputs['WeChatAccountQRCodeImageURL'] !==
inputs.WeChatAccountQRCodeImageURL
) {
await updateOption(
'WeChatAccountQRCodeImageURL',
inputs.WeChatAccountQRCodeImageURL
);
}
if (
originInputs['WeChatServerToken'] !== inputs.WeChatServerToken &&
inputs.WeChatServerToken !== ''
) {
await updateOption('WeChatServerToken', inputs.WeChatServerToken);
}
};
const submitGitHubOAuth = async () => { const submitWeChat = async () => {
if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) { if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
await updateOption('GitHubClientId', inputs.GitHubClientId); await updateOption(
} 'WeChatServerAddress',
if ( removeTrailingSlash(inputs.WeChatServerAddress)
originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret && );
inputs.GitHubClientSecret !== '' }
) { if (
await updateOption('GitHubClientSecret', inputs.GitHubClientSecret); originInputs['WeChatAccountQRCodeImageURL'] !==
} inputs.WeChatAccountQRCodeImageURL
}; ) {
await updateOption(
'WeChatAccountQRCodeImageURL',
inputs.WeChatAccountQRCodeImageURL
);
}
if (
originInputs['WeChatServerToken'] !== inputs.WeChatServerToken &&
inputs.WeChatServerToken !== ''
) {
await updateOption('WeChatServerToken', inputs.WeChatServerToken);
}
};
const submitTelegramSettings = async () => { const submitGitHubOAuth = async () => {
// await updateOption('TelegramOAuthEnabled', inputs.TelegramOAuthEnabled); if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) {
await updateOption('TelegramBotToken', inputs.TelegramBotToken); await updateOption('GitHubClientId', inputs.GitHubClientId);
await updateOption('TelegramBotName', inputs.TelegramBotName); }
}; if (
originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret &&
inputs.GitHubClientSecret !== ''
) {
await updateOption('GitHubClientSecret', inputs.GitHubClientSecret);
}
};
const submitTurnstile = async () => { const submitTelegramSettings = async () => {
if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) { // await updateOption('TelegramOAuthEnabled', inputs.TelegramOAuthEnabled);
await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey); await updateOption('TelegramBotToken', inputs.TelegramBotToken);
} await updateOption('TelegramBotName', inputs.TelegramBotName);
if ( };
originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey &&
inputs.TurnstileSecretKey !== ''
) {
await updateOption('TurnstileSecretKey', inputs.TurnstileSecretKey);
}
};
const submitNewRestrictedDomain = () => { const submitTurnstile = async () => {
const localDomainList = inputs.EmailDomainWhitelist; if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
if (restrictedDomainInput !== '' && !localDomainList.includes(restrictedDomainInput)) { await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey);
setRestrictedDomainInput(''); }
setInputs({ if (
...inputs, originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey &&
EmailDomainWhitelist: [...localDomainList, restrictedDomainInput], inputs.TurnstileSecretKey !== ''
}); ) {
setEmailDomainWhitelist([...EmailDomainWhitelist, { await updateOption('TurnstileSecretKey', inputs.TurnstileSecretKey);
key: restrictedDomainInput, }
text: restrictedDomainInput, };
value: restrictedDomainInput,
}]); const submitNewRestrictedDomain = () => {
} const localDomainList = inputs.EmailDomainWhitelist;
if (restrictedDomainInput !== '' && !localDomainList.includes(restrictedDomainInput)) {
setRestrictedDomainInput('');
setInputs({
...inputs,
EmailDomainWhitelist: [...localDomainList, restrictedDomainInput]
});
setEmailDomainWhitelist([...EmailDomainWhitelist, {
key: restrictedDomainInput,
text: restrictedDomainInput,
value: restrictedDomainInput
}]);
} }
};
return ( return (
<Grid columns={1}> <Grid columns={1}>
<Grid.Column> <Grid.Column>
<Form loading={loading}> <Form loading={loading}>
<Header as='h3'>通用设置</Header> <Header as="h3">通用设置</Header>
<Form.Group widths='equal'> <Form.Group widths="equal">
<Form.Input <Form.Input
label='服务器地址' label="服务器地址"
placeholder='例如：https://yourdomain.com' placeholder="例如：https://yourdomain.com"
value={inputs.ServerAddress} value={inputs.ServerAddress}
name='ServerAddress' name="ServerAddress"
onChange={handleInputChange} onChange={handleInputChange}
/> />
</Form.Group> </Form.Group>
<Form.Button onClick={submitServerAddress}> <Form.Button onClick={submitServerAddress}>
更新服务器地址 更新服务器地址
</Form.Button> </Form.Button>
<Divider/> <Divider />
<Header as='h3'>支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）</Header> <Header as="h3">支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）</Header>
<Form.Group widths='equal'> <Form.Group widths="equal">
<Form.Input <Form.Input
label='支付地址，不填写则不启用在线支付' label="支付地址，不填写则不启用在线支付"
placeholder='例如：https://yourdomain.com' placeholder="例如：https://yourdomain.com"
value={inputs.PayAddress} value={inputs.PayAddress}
name='PayAddress' name="PayAddress"
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Form.Input <Form.Input
label='易支付商户ID' label="易支付商户ID"
placeholder='例如：0001' placeholder="例如：0001"
value={inputs.EpayId} value={inputs.EpayId}
name='EpayId' name="EpayId"
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Form.Input <Form.Input
label='易支付商户密钥' label="易支付商户密钥"
placeholder='例如：dejhfueqhujasjmndbjkqaw' placeholder="例如：dejhfueqhujasjmndbjkqaw"
value={inputs.EpayKey} value={inputs.EpayKey}
name='EpayKey' name="EpayKey"
onChange={handleInputChange} onChange={handleInputChange}
/> />
</Form.Group> </Form.Group>
<Form.Group widths='equal'> <Form.Group widths="equal">
<Form.Input <Form.Input
label='回调地址，不填写则使用上方服务器地址作为回调地址' label="回调地址，不填写则使用上方服务器地址作为回调地址"
placeholder='例如：https://yourdomain.com' placeholder="例如：https://yourdomain.com"
value={inputs.CustomCallbackAddress} value={inputs.CustomCallbackAddress}
name='CustomCallbackAddress' name="CustomCallbackAddress"
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Form.Input <Form.Input
label='充值价格（x元/美金）' label="充值价格（x元/美金）"
placeholder='例如：7，就是7元/美金' placeholder="例如：7，就是7元/美金"
value={inputs.Price} value={inputs.Price}
name='Price' name="Price"
min={0} min={0}
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Form.Input <Form.Input
label='最低充值数量' label="最低充值数量"
placeholder='例如：2，就是最低充值2$' placeholder="例如：2，就是最低充值2$"
value={inputs.MinTopUp} value={inputs.MinTopUp}
name='MinTopUp' name="MinTopUp"
min={1} min={1}
onChange={handleInputChange} onChange={handleInputChange}
/> />
</Form.Group> </Form.Group>
<Form.Group widths='equal'> <Form.Group widths="equal">
<Form.TextArea <Form.TextArea
label='充值分组倍率' label="充值分组倍率"
name='TopupGroupRatio' name="TopupGroupRatio"
onChange={handleInputChange} onChange={handleInputChange}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }} style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
autoComplete='new-password' autoComplete="new-password"
value={inputs.TopupGroupRatio} value={inputs.TopupGroupRatio}
placeholder='为一个 JSON 文本，键为组名称，值为倍率' placeholder="为一个 JSON 文本，键为组名称，值为倍率"
/> />
</Form.Group> </Form.Group>
<Form.Button onClick={submitPayAddress}> <Form.Button onClick={submitPayAddress}>
更新支付设置 更新支付设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'>配置登录注册</Header> <Header as="h3">配置登录注册</Header>
<Form.Group inline> <Form.Group inline>
<Form.Checkbox <Form.Checkbox
checked={inputs.PasswordLoginEnabled === 'true'} checked={inputs.PasswordLoginEnabled === 'true'}
label='允许通过密码进行登录' label="允许通过密码进行登录"
name='PasswordLoginEnabled' name="PasswordLoginEnabled"
onChange={handleInputChange} onChange={handleInputChange}
/> />
{ {
showPasswordWarningModal && showPasswordWarningModal &&
<Modal <Modal
open={showPasswordWarningModal} open={showPasswordWarningModal}
onClose={() => setShowPasswordWarningModal(false)} onClose={() => setShowPasswordWarningModal(false)}
size={'tiny'} size={'tiny'}
style={{ maxWidth: '450px' }} style={{ maxWidth: '450px' }}
> >
<Modal.Header>警告</Modal.Header> <Modal.Header>警告</Modal.Header>
<Modal.Content> <Modal.Content>
<p>取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？</p> <p>取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？</p>
</Modal.Content> </Modal.Content>
<Modal.Actions> <Modal.Actions>
<Button onClick={() => setShowPasswordWarningModal(false)}>取消</Button> <Button onClick={() => setShowPasswordWarningModal(false)}>取消</Button>
<Button <Button
color='yellow' color="yellow"
onClick={async () => { onClick={async () => {
setShowPasswordWarningModal(false); setShowPasswordWarningModal(false);
await updateOption('PasswordLoginEnabled', 'false'); await updateOption('PasswordLoginEnabled', 'false');
}} }}
> >
确定 确定
</Button> </Button>
</Modal.Actions> </Modal.Actions>
</Modal> </Modal>
} }
<Form.Checkbox <Form.Checkbox
checked={inputs.PasswordRegisterEnabled === 'true'} checked={inputs.PasswordRegisterEnabled === 'true'}
label='允许通过密码进行注册' label="允许通过密码进行注册"
name='PasswordRegisterEnabled' name="PasswordRegisterEnabled"
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Form.Checkbox <Form.Checkbox
checked={inputs.EmailVerificationEnabled === 'true'} checked={inputs.EmailVerificationEnabled === 'true'}
label='通过密码注册时需要进行邮箱验证' label="通过密码注册时需要进行邮箱验证"
name='EmailVerificationEnabled' name="EmailVerificationEnabled"
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Form.Checkbox <Form.Checkbox
checked={inputs.GitHubOAuthEnabled === 'true'} checked={inputs.GitHubOAuthEnabled === 'true'}
label='允许通过 GitHub 账户登录 & 注册' label="允许通过 GitHub 账户登录 & 注册"
name='GitHubOAuthEnabled' name="GitHubOAuthEnabled"
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Form.Checkbox <Form.Checkbox
checked={inputs.WeChatAuthEnabled === 'true'} checked={inputs.WeChatAuthEnabled === 'true'}
label='允许通过微信登录 & 注册' label="允许通过微信登录 & 注册"
name='WeChatAuthEnabled' name="WeChatAuthEnabled"
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Form.Checkbox <Form.Checkbox
checked={inputs.TelegramOAuthEnabled === 'true'} checked={inputs.TelegramOAuthEnabled === 'true'}
label='允许通过 Telegram 进行登录' label="允许通过 Telegram 进行登录"
name='TelegramOAuthEnabled' name="TelegramOAuthEnabled"
onChange={handleInputChange} onChange={handleInputChange}
/> />
</Form.Group> </Form.Group>
<Form.Group inline> <Form.Group inline>
<Form.Checkbox <Form.Checkbox
checked={inputs.RegisterEnabled === 'true'} checked={inputs.RegisterEnabled === 'true'}
label='允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）' label="允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）"
name='RegisterEnabled' name="RegisterEnabled"
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Form.Checkbox <Form.Checkbox
checked={inputs.TurnstileCheckEnabled === 'true'} checked={inputs.TurnstileCheckEnabled === 'true'}
label='启用 Turnstile 用户校验' label="启用 Turnstile 用户校验"
name='TurnstileCheckEnabled' name="TurnstileCheckEnabled"
onChange={handleInputChange} onChange={handleInputChange}
/> />
</Form.Group> </Form.Group>
<Divider /> <Divider />
<Header as='h3'> <Header as="h3">
配置邮箱域名白名单 配置邮箱域名白名单
<Header.Subheader>用以防止恶意用户利用临时邮箱批量注册</Header.Subheader> <Header.Subheader>用以防止恶意用户利用临时邮箱批量注册</Header.Subheader>
</Header> </Header>
<Form.Group widths={3}> <Form.Group widths={3}>
<Form.Checkbox <Form.Checkbox
label='启用邮箱域名白名单' label="启用邮箱域名白名单"
name='EmailDomainRestrictionEnabled' name="EmailDomainRestrictionEnabled"
onChange={handleInputChange} onChange={handleInputChange}
checked={inputs.EmailDomainRestrictionEnabled === 'true'} checked={inputs.EmailDomainRestrictionEnabled === 'true'}
/> />
</Form.Group> </Form.Group>
<Form.Group widths={2}> <Form.Group widths={2}>
<Form.Dropdown <Form.Dropdown
label='允许的邮箱域名' label="允许的邮箱域名"
placeholder='允许的邮箱域名' placeholder="允许的邮箱域名"
name='EmailDomainWhitelist' name="EmailDomainWhitelist"
required required
fluid fluid
multiple multiple
selection selection
onChange={handleInputChange} onChange={handleInputChange}
value={inputs.EmailDomainWhitelist} value={inputs.EmailDomainWhitelist}
autoComplete='new-password' autoComplete="new-password"
options={EmailDomainWhitelist} options={EmailDomainWhitelist}
/> />
<Form.Input <Form.Input
label='添加新的允许的邮箱域名' label="添加新的允许的邮箱域名"
action={ action={
<Button type='button' onClick={() => { <Button type="button" onClick={() => {
submitNewRestrictedDomain(); submitNewRestrictedDomain();
}}>填入</Button> }}>填入</Button>
} }
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
submitNewRestrictedDomain(); submitNewRestrictedDomain();
} }
}} }}
autoComplete='new-password' autoComplete="new-password"
placeholder='输入新的允许的邮箱域名' placeholder="输入新的允许的邮箱域名"
value={restrictedDomainInput} value={restrictedDomainInput}
onChange={(e, { value }) => { onChange={(e, { value }) => {
setRestrictedDomainInput(value); setRestrictedDomainInput(value);
}} }}
/> />
</Form.Group> </Form.Group>
<Form.Button onClick={submitEmailDomainWhitelist}>保存邮箱域名白名单设置</Form.Button> <Form.Button onClick={submitEmailDomainWhitelist}>保存邮箱域名白名单设置</Form.Button>
<Divider /> <Divider />
<Header as='h3'> <Header as="h3">
配置 SMTP 配置 SMTP
<Header.Subheader>用以支持系统的邮件发送</Header.Subheader> <Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
</Header> </Header>
<Form.Group widths={3}> <Form.Group widths={3}>
<Form.Input <Form.Input
label='SMTP 服务器地址' label="SMTP 服务器地址"
name='SMTPServer' name="SMTPServer"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.SMTPServer} value={inputs.SMTPServer}
placeholder='例如：smtp.qq.com' placeholder="例如：smtp.qq.com"
/> />
<Form.Input <Form.Input
label='SMTP 端口' label="SMTP 端口"
name='SMTPPort' name="SMTPPort"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.SMTPPort} value={inputs.SMTPPort}
placeholder='默认: 587' placeholder="默认: 587"
/> />
<Form.Input <Form.Input
label='SMTP 账户' label="SMTP 账户"
name='SMTPAccount' name="SMTPAccount"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.SMTPAccount} value={inputs.SMTPAccount}
placeholder='通常是邮箱地址' placeholder="通常是邮箱地址"
/> />
</Form.Group> </Form.Group>
<Form.Group widths={3}> <Form.Group widths={3}>
<Form.Input <Form.Input
label='SMTP 发送者邮箱' label="SMTP 发送者邮箱"
name='SMTPFrom' name="SMTPFrom"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.SMTPFrom} value={inputs.SMTPFrom}
placeholder='通常和邮箱地址保持一致' placeholder="通常和邮箱地址保持一致"
/> />
<Form.Input <Form.Input
label='SMTP 访问凭证' label="SMTP 访问凭证"
name='SMTPToken' name="SMTPToken"
onChange={handleInputChange} onChange={handleInputChange}
type='password' type="password"
autoComplete='new-password' autoComplete="new-password"
checked={inputs.RegisterEnabled === 'true'} checked={inputs.RegisterEnabled === 'true'}
placeholder='敏感信息不会发送到前端显示' placeholder="敏感信息不会发送到前端显示"
/> />
</Form.Group> </Form.Group>
<Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button> <Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
<Divider /> <Divider />
<Header as='h3'> <Header as="h3">
配置 GitHub OAuth App 配置 GitHub OAuth App
<Header.Subheader> <Header.Subheader>
用以支持通过 GitHub 进行登录注册， 用以支持通过 GitHub 进行登录注册，
<a href='https://github.com/settings/developers' target='_blank'> <a href="https://github.com/settings/developers" target="_blank" rel="noreferrer">
点击此处 点击此处
</a> </a>
管理你的 GitHub OAuth App 管理你的 GitHub OAuth App
</Header.Subheader> </Header.Subheader>
</Header> </Header>
<Message> <Message>
Homepage URL 填 <code>{inputs.ServerAddress}</code> Homepage URL 填 <code>{inputs.ServerAddress}</code>
，Authorization callback URL 填{' '} ，Authorization callback URL 填{' '}
<code>{`${inputs.ServerAddress}/oauth/github`}</code> <code>{`${inputs.ServerAddress}/oauth/github`}</code>
</Message> </Message>
<Form.Group widths={3}> <Form.Group widths={3}>
<Form.Input <Form.Input
label='GitHub Client ID' label="GitHub Client ID"
name='GitHubClientId' name="GitHubClientId"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.GitHubClientId} value={inputs.GitHubClientId}
placeholder='输入你注册的 GitHub OAuth APP 的 ID' placeholder="输入你注册的 GitHub OAuth APP 的 ID"
/> />
<Form.Input <Form.Input
label='GitHub Client Secret' label="GitHub Client Secret"
name='GitHubClientSecret' name="GitHubClientSecret"
onChange={handleInputChange} onChange={handleInputChange}
type='password' type="password"
autoComplete='new-password' autoComplete="new-password"
value={inputs.GitHubClientSecret} value={inputs.GitHubClientSecret}
placeholder='敏感信息不会发送到前端显示' placeholder="敏感信息不会发送到前端显示"
/> />
</Form.Group> </Form.Group>
<Form.Button onClick={submitGitHubOAuth}> <Form.Button onClick={submitGitHubOAuth}>
保存 GitHub OAuth 设置 保存 GitHub OAuth 设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'> <Header as="h3">
配置 WeChat Server 配置 WeChat Server
<Header.Subheader> <Header.Subheader>
用以支持通过微信进行登录注册， 用以支持通过微信进行登录注册，
<a <a
href='https://github.com/songquanpeng/wechat-server' href="https://github.com/songquanpeng/wechat-server"
target='_blank' target="_blank" rel="noreferrer"
> >
点击此处 点击此处
</a> </a>
了解 WeChat Server 了解 WeChat Server
</Header.Subheader> </Header.Subheader>
</Header> </Header>
<Form.Group widths={3}> <Form.Group widths={3}>
<Form.Input <Form.Input
label='WeChat Server 服务器地址' label="WeChat Server 服务器地址"
name='WeChatServerAddress' name="WeChatServerAddress"
placeholder='例如：https://yourdomain.com' placeholder="例如：https://yourdomain.com"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.WeChatServerAddress} value={inputs.WeChatServerAddress}
/> />
<Form.Input <Form.Input
label='WeChat Server 访问凭证' label="WeChat Server 访问凭证"
name='WeChatServerToken' name="WeChatServerToken"
type='password' type="password"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.WeChatServerToken} value={inputs.WeChatServerToken}
placeholder='敏感信息不会发送到前端显示' placeholder="敏感信息不会发送到前端显示"
/> />
<Form.Input <Form.Input
label='微信公众号二维码图片链接' label="微信公众号二维码图片链接"
name='WeChatAccountQRCodeImageURL' name="WeChatAccountQRCodeImageURL"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.WeChatAccountQRCodeImageURL} value={inputs.WeChatAccountQRCodeImageURL}
placeholder='输入一个图片链接' placeholder="输入一个图片链接"
/> />
</Form.Group> </Form.Group>
<Form.Button onClick={submitWeChat}> <Form.Button onClick={submitWeChat}>
保存 WeChat Server 设置 保存 WeChat Server 设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'>配置 Telegram 登录</Header> <Header as="h3">配置 Telegram 登录</Header>
<Form.Group inline> <Form.Group inline>
<Form.Input <Form.Input
label='Telegram Bot Token' label="Telegram Bot Token"
name='TelegramBotToken' name="TelegramBotToken"
onChange={handleInputChange} onChange={handleInputChange}
value={inputs.TelegramBotToken} value={inputs.TelegramBotToken}
placeholder='输入你的 Telegram Bot Token' placeholder="输入你的 Telegram Bot Token"
/> />
<Form.Input <Form.Input
label='Telegram Bot 名称' label="Telegram Bot 名称"
name='TelegramBotName' name="TelegramBotName"
onChange={handleInputChange} onChange={handleInputChange}
value={inputs.TelegramBotName} value={inputs.TelegramBotName}
placeholder='输入你的 Telegram Bot 名称' placeholder="输入你的 Telegram Bot 名称"
/> />
</Form.Group> </Form.Group>
<Form.Button onClick={submitTelegramSettings}> <Form.Button onClick={submitTelegramSettings}>
保存 Telegram 登录设置 保存 Telegram 登录设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'> <Header as="h3">
配置 Turnstile 配置 Turnstile
<Header.Subheader> <Header.Subheader>
用以支持用户校验， 用以支持用户校验，
<a href='https://dash.cloudflare.com/' target='_blank'> <a href="https://dash.cloudflare.com/" target="_blank" rel="noreferrer">
点击此处 点击此处
</a> </a>
管理你的 Turnstile Sites，推荐选择 Invisible Widget Type 管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
</Header.Subheader> </Header.Subheader>
</Header> </Header>
<Form.Group widths={3}> <Form.Group widths={3}>
<Form.Input <Form.Input
label='Turnstile Site Key' label="Turnstile Site Key"
name='TurnstileSiteKey' name="TurnstileSiteKey"
onChange={handleInputChange} onChange={handleInputChange}
autoComplete='new-password' autoComplete="new-password"
value={inputs.TurnstileSiteKey} value={inputs.TurnstileSiteKey}
placeholder='输入你注册的 Turnstile Site Key' placeholder="输入你注册的 Turnstile Site Key"
/> />
<Form.Input <Form.Input
label='Turnstile Secret Key' label="Turnstile Secret Key"
name='TurnstileSecretKey' name="TurnstileSecretKey"
onChange={handleInputChange} onChange={handleInputChange}
type='password' type="password"
autoComplete='new-password' autoComplete="new-password"
value={inputs.TurnstileSecretKey} value={inputs.TurnstileSecretKey}
placeholder='敏感信息不会发送到前端显示' placeholder="敏感信息不会发送到前端显示"
/> />
</Form.Group> </Form.Group>
<Form.Button onClick={submitTurnstile}> <Form.Button onClick={submitTurnstile}>
保存 Turnstile 设置 保存 Turnstile 设置
</Form.Button> </Form.Button>
</Form> </Form>
</Grid.Column> </Grid.Column>
</Grid> </Grid>
); );
}; };
export default SystemSetting; export default SystemSetting;
web/src/components/TokensTable.js
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from 'react';
import {API, copy, isAdmin, showError, showSuccess, showWarning, timestamp2string} from '../helpers'; import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
import {ITEMS_PER_PAGE} from '../constants'; import { ITEMS_PER_PAGE } from '../constants';
import {renderQuota, stringToColor} from '../helpers/render'; import { renderQuota } from '../helpers/render';
import { import { Button, Dropdown, Form, Modal, Popconfirm, Popover, SplitButtonGroup, Table, Tag } from '@douyinfe/semi-ui';
Avatar,
Tag, import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
Table, import EditToken from '../pages/Token/EditToken';
Button,
Popover,
Form,
Modal,
Popconfirm,
SplitButtonGroup,
Dropdown
} from "@douyinfe/semi-ui";
import {
IconTreeTriangleDown,
} from '@douyinfe/semi-icons';
import EditToken from "../pages/Token/EditToken";
const COPY_OPTIONS = [ const COPY_OPTIONS = [
{key: 'next', text: 'ChatGPT Next Web', value: 'next'}, { key: 'next', text: 'ChatGPT Next Web', value: 'next' },
{key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama'}, { key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama' },
{key: 'opencat', text: 'OpenCat', value: 'opencat'}, { key: 'opencat', text: 'OpenCat', value: 'opencat' }
]; ];
const OPEN_LINK_OPTIONS = [ const OPEN_LINK_OPTIONS = [
{key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama'}, { key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama' },
{key: 'opencat', text: 'OpenCat', value: 'opencat'}, { key: 'opencat', text: 'OpenCat', value: 'opencat' }
]; ];
function renderTimestamp(timestamp) { function renderTimestamp(timestamp) {
return ( return (
<> <>
{timestamp2string(timestamp)} {timestamp2string(timestamp)}
</> </>
); );
} }
function renderStatus(status, model_limits_enabled = false) { function renderStatus(status, model_limits_enabled = false) {
switch (status) { switch (status) {
case 1: case 1:
if (model_limits_enabled) { if (model_limits_enabled) {
return <Tag color='green' size='large'>已启用：限制模型</Tag>; return <Tag color="green" size="large">已启用：限制模型</Tag>;
} else { } else {
return <Tag color='green' size='large'>已启用</Tag>; return <Tag color="green" size="large">已启用</Tag>;
} }
case 2: case 2:
return <Tag color='red' size='large'> 已禁用 </Tag>; return <Tag color="red" size="large"> 已禁用 </Tag>;
case 3: case 3:
return <Tag color='yellow' size='large'> 已过期 </Tag>; return <Tag color="yellow" size="large"> 已过期 </Tag>;
case 4: case 4:
return <Tag color='grey' size='large'> 已耗尽 </Tag>; return <Tag color="grey" size="large"> 已耗尽 </Tag>;
default: default:
return <Tag color='black' size='large'> 未知状态 </Tag>; return <Tag color="black" size="large"> 未知状态 </Tag>;
} }
} }
const TokensTable = () => { const TokensTable = () => {
const link_menu = [ const link_menu = [
{node: 'item', key: 'next', name: 'ChatGPT Next Web', onClick: () => {onOpenLink('next')}}, {
{node: 'item', key: 'ama', name: 'AMA 问天', value: 'ama'}, node: 'item', key: 'next', name: 'ChatGPT Next Web', onClick: () => {
{node: 'item', key: 'next-mj', name: 'ChatGPT Web & Midjourney', value: 'next-mj', onClick: () => {onOpenLink('next-mj')}}, onOpenLink('next');
{node: 'item', key: 'opencat', name: 'OpenCat', value: 'opencat'}, }
]; },
{ node: 'item', key: 'ama', name: 'AMA 问天', value: 'ama' },
const columns = [ {
{ node: 'item', key: 'next-mj', name: 'ChatGPT Web & Midjourney', value: 'next-mj', onClick: () => {
title: '名称', onOpenLink('next-mj');
dataIndex: 'name', }
}, },
{ { node: 'item', key: 'opencat', name: 'OpenCat', value: 'opencat' }
title: '状态', ];
dataIndex: 'status',
key: 'status', const columns = [
render: (text, record, index) => { {
return ( title: '名称',
<div> dataIndex: 'name'
{renderStatus(text, record.model_limits_enabled)} },
</div> {
); title: '状态',
}, dataIndex: 'status',
}, key: 'status',
{ render: (text, record, index) => {
title: '已用额度', return (
dataIndex: 'used_quota', <div>
render: (text, record, index) => { {renderStatus(text, record.model_limits_enabled)}
return ( </div>
<div> );
{renderQuota(parseInt(text))} }
</div> },
); {
}, title: '已用额度',
}, dataIndex: 'used_quota',
{ render: (text, record, index) => {
title: '剩余额度', return (
dataIndex: 'remain_quota', <div>
render: (text, record, index) => { {renderQuota(parseInt(text))}
return ( </div>
<div> );
{record.unlimited_quota ? <Tag size={'large'} color={'white'}>无限制</Tag> : <Tag size={'large'} color={'light-blue'}>{renderQuota(parseInt(text))}</Tag>} }
</div> },
); {
}, title: '剩余额度',
}, dataIndex: 'remain_quota',
{ render: (text, record, index) => {
title: '创建时间', return (
dataIndex: 'created_time', <div>
render: (text, record, index) => { {record.unlimited_quota ? <Tag size={'large'} color={'white'}>无限制</Tag> :
return ( <Tag size={'large'} color={'light-blue'}>{renderQuota(parseInt(text))}</Tag>}
<div> </div>
{renderTimestamp(text)} );
</div> }
); },
}, {
}, title: '创建时间',
{ dataIndex: 'created_time',
title: '过期时间', render: (text, record, index) => {
dataIndex: 'expired_time', return (
render: (text, record, index) => { <div>
return ( {renderTimestamp(text)}
<div> </div>
{record.expired_time === -1 ? "永不过期" : renderTimestamp(text)} );
</div> }
); },
}, {
}, title: '过期时间',
{ dataIndex: 'expired_time',
title: '', render: (text, record, index) => {
dataIndex: 'operate', return (
render: (text, record, index) => ( <div>
<div> {record.expired_time === -1 ? '永不过期' : renderTimestamp(text)}
<Popover </div>
content={ );
'sk-' + record.key }
} },
style={{padding: 20}} {
position="top" title: '',
> dataIndex: 'operate',
<Button theme='light' type='tertiary' style={{marginRight: 1}}>查看</Button> render: (text, record, index) => (
</Popover> <div>
<Button theme='light' type='secondary' style={{marginRight: 1}} <Popover
onClick={async (text) => { content={
await copyText('sk-' + record.key) 'sk-' + record.key
}}
>复制</Button>
<SplitButtonGroup style={{marginRight: 1}} aria-label="项目操作按钮组">
<Button theme="light" style={{ color: 'rgba(var(--semi-teal-7), 1)' }} onClick={()=>{onOpenLink('next', record.key)}}>聊天</Button>
<Dropdown trigger="click" position="bottomRight" menu={
[
{node: 'item', key: 'next', disabled: !localStorage.getItem('chat_link'), name: 'ChatGPT Next Web', onClick: () => {onOpenLink('next', record.key)}},
{node: 'item', key: 'next-mj', disabled: !localStorage.getItem('chat_link2'), name: 'ChatGPT Web & Midjourney', onClick: () => {onOpenLink('next-mj', record.key)}},
{node: 'item', key: 'ama', name: 'AMA 问天（BotGem）', onClick: () => {onOpenLink('ama', record.key)}},
{node: 'item', key: 'opencat', name: 'OpenCat', onClick: () => {onOpenLink('opencat', record.key)}},
]
}
>
<Button style={ { padding: '8px 4px', color: 'rgba(var(--semi-teal-7), 1)' }} type="primary" icon={<IconTreeTriangleDown />}></Button>
</Dropdown>
</SplitButtonGroup>
<Popconfirm
title="确定是否要删除此令牌？"
content="此修改将不可逆"
okType={'danger'}
position={'left'}
onConfirm={() => {
manageToken(record.id, 'delete', record).then(
() => {
removeRecord(record.key);
}
)
}}
>
<Button theme='light' type='danger' style={{marginRight: 1}}>删除</Button>
</Popconfirm>
{
record.status === 1 ?
<Button theme='light' type='warning' style={{marginRight: 1}} onClick={
async () => {
manageToken(
record.id,
'disable',
record
)
}
}>禁用</Button> :
<Button theme='light' type='secondary' style={{marginRight: 1}} onClick={
async () => {
manageToken(
record.id,
'enable',
record
);
}
}>启用</Button>
}
<Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={
() => {
setEditingToken(record);
setShowEdit(true);
}
}>编辑</Button>
</div>
),
},
];
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
const [showEdit, setShowEdit] = useState(false);
const [tokens, setTokens] = useState([]);
const [selectedKeys, setSelectedKeys] = useState([]);
const [tokenCount, setTokenCount] = useState(pageSize);
const [loading, setLoading] = useState(true);
const [activePage, setActivePage] = useState(1);
const [searchKeyword, setSearchKeyword] = useState('');
const [searchToken, setSearchToken] = useState('');
const [searching, setSearching] = useState(false);
const [showTopUpModal, setShowTopUpModal] = useState(false);
const [targetTokenIdx, setTargetTokenIdx] = useState(0);
const [editingToken, setEditingToken] = useState({
id: undefined,
});
const closeEdit = () => {
setShowEdit(false);
setTimeout(() => {
setEditingToken({
id: undefined,
});
}, 500);
}
const setTokensFormat = (tokens) => {
setTokens(tokens);
if (tokens.length >= pageSize) {
setTokenCount(tokens.length + pageSize);
} else {
setTokenCount(tokens.length);
}
}
let pageData = tokens.slice((activePage - 1) * pageSize, activePage * pageSize);
const loadTokens = async (startIdx) => {
setLoading(true);
const res = await API.get(`/api/token/?p=${startIdx}&size=${pageSize}`);
const {success, message, data} = res.data;
if (success) {
if (startIdx === 0) {
setTokensFormat(data);
} else {
let newTokens = [...tokens];
newTokens.splice(startIdx * pageSize, data.length, ...data);
setTokensFormat(newTokens);
} }
} else { style={{ padding: 20 }}
showError(message); position="top"
} >
setLoading(false); <Button theme="light" type="tertiary" style={{ marginRight: 1 }}>查看</Button>
}; </Popover>
<Button theme="light" type="secondary" style={{ marginRight: 1 }}
const onPaginationChange = (e, {activePage}) => { onClick={async (text) => {
(async () => { await copyText('sk-' + record.key);
if (activePage === Math.ceil(tokens.length / pageSize) + 1) { }}
// In this case we have to load more data and then append them. >复制</Button>
await loadTokens(activePage - 1); <SplitButtonGroup style={{ marginRight: 1 }} aria-label="项目操作按钮组">
<Button theme="light" style={{ color: 'rgba(var(--semi-teal-7), 1)' }} onClick={() => {
onOpenLink('next', record.key);
}}>聊天</Button>
<Dropdown trigger="click" position="bottomRight" menu={
[
{
node: 'item',
key: 'next',
disabled: !localStorage.getItem('chat_link'),
name: 'ChatGPT Next Web',
onClick: () => {
onOpenLink('next', record.key);
}
},
{
node: 'item',
key: 'next-mj',
disabled: !localStorage.getItem('chat_link2'),
name: 'ChatGPT Web & Midjourney',
onClick: () => {
onOpenLink('next-mj', record.key);
}
},
{
node: 'item', key: 'ama', name: 'AMA 问天（BotGem）', onClick: () => {
onOpenLink('ama', record.key);
}
},
{
node: 'item', key: 'opencat', name: 'OpenCat', onClick: () => {
onOpenLink('opencat', record.key);
}
}
]
}
>
<Button style={{ padding: '8px 4px', color: 'rgba(var(--semi-teal-7), 1)' }} type="primary"
icon={<IconTreeTriangleDown />}></Button>
</Dropdown>
</SplitButtonGroup>
<Popconfirm
title="确定是否要删除此令牌？"
content="此修改将不可逆"
okType={'danger'}
position={'left'}
onConfirm={() => {
manageToken(record.id, 'delete', record).then(
() => {
removeRecord(record.key);
}
);
}}
>
<Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
</Popconfirm>
{
record.status === 1 ?
<Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
async () => {
manageToken(
record.id,
'disable',
record
);
}
}>禁用</Button> :
<Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
async () => {
manageToken(
record.id,
'enable',
record
);
}
}>启用</Button>
}
<Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
() => {
setEditingToken(record);
setShowEdit(true);
} }
setActivePage(activePage); }>编辑</Button>
})(); </div>
}; )
}
];
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
const [showEdit, setShowEdit] = useState(false);
const [tokens, setTokens] = useState([]);
const [selectedKeys, setSelectedKeys] = useState([]);
const [tokenCount, setTokenCount] = useState(pageSize);
const [loading, setLoading] = useState(true);
const [activePage, setActivePage] = useState(1);
const [searchKeyword, setSearchKeyword] = useState('');
const [searchToken, setSearchToken] = useState('');
const [searching, setSearching] = useState(false);
const [showTopUpModal, setShowTopUpModal] = useState(false);
const [targetTokenIdx, setTargetTokenIdx] = useState(0);
const [editingToken, setEditingToken] = useState({
id: undefined
});
const closeEdit = () => {
setShowEdit(false);
setTimeout(() => {
setEditingToken({
id: undefined
});
}, 500);
};
const setTokensFormat = (tokens) => {
setTokens(tokens);
if (tokens.length >= pageSize) {
setTokenCount(tokens.length + pageSize);
} else {
setTokenCount(tokens.length);
}
};
let pageData = tokens.slice((activePage - 1) * pageSize, activePage * pageSize);
const loadTokens = async (startIdx) => {
setLoading(true);
const res = await API.get(`/api/token/?p=${startIdx}&size=${pageSize}`);
const { success, message, data } = res.data;
if (success) {
if (startIdx === 0) {
setTokensFormat(data);
} else {
let newTokens = [...tokens];
newTokens.splice(startIdx * pageSize, data.length, ...data);
setTokensFormat(newTokens);
}
} else {
showError(message);
}
setLoading(false);
};
const refresh = async () => { const onPaginationChange = (e, { activePage }) => {
(async () => {
if (activePage === Math.ceil(tokens.length / pageSize) + 1) {
// In this case we have to load more data and then append them.
await loadTokens(activePage - 1); await loadTokens(activePage - 1);
}; }
setActivePage(activePage);
const onCopy = async (type, key) => { })();
let status = localStorage.getItem('status'); };
let serverAddress = '';
if (status) { const refresh = async () => {
status = JSON.parse(status); await loadTokens(activePage - 1);
serverAddress = status.server_address; };
}
if (serverAddress === '') { const onCopy = async (type, key) => {
serverAddress = window.location.origin; let status = localStorage.getItem('status');
} let serverAddress = '';
let encodedServerAddress = encodeURIComponent(serverAddress); if (status) {
const nextLink = localStorage.getItem('chat_link'); status = JSON.parse(status);
const mjLink = localStorage.getItem('chat_link2'); serverAddress = status.server_address;
let nextUrl; }
if (serverAddress === '') {
if (nextLink) { serverAddress = window.location.origin;
nextUrl = nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`; }
} else { let encodedServerAddress = encodeURIComponent(serverAddress);
nextUrl = `https://chat.oneapi.pro/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`; const nextLink = localStorage.getItem('chat_link');
} const mjLink = localStorage.getItem('chat_link2');
let nextUrl;
let url;
switch (type) { if (nextLink) {
case 'ama': nextUrl = nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
url = mjLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`; } else {
break; nextUrl = `https://chat.oneapi.pro/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
case 'opencat':
url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
break;
case 'next':
url = nextUrl;
break;
default:
url = `sk-${key}`;
}
// if (await copy(url)) {
// showSuccess('已复制到剪贴板！');
// } else {
// showWarning('无法复制到剪贴板，请手动复制，已将令牌填入搜索框。');
// setSearchKeyword(url);
// }
};
const copyText = async (text) => {
if (await copy(text)) {
showSuccess('已复制到剪贴板！');
} else {
// setSearchKeyword(text);
Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
}
} }
const onOpenLink = async (type, key) => { let url;
let status = localStorage.getItem('status'); switch (type) {
let serverAddress = ''; case 'ama':
if (status) { url = mjLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
status = JSON.parse(status); break;
serverAddress = status.server_address; case 'opencat':
} url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
if (serverAddress === '') { break;
serverAddress = window.location.origin; case 'next':
} url = nextUrl;
let encodedServerAddress = encodeURIComponent(serverAddress); break;
const chatLink = localStorage.getItem('chat_link'); default:
const mjLink = localStorage.getItem('chat_link2'); url = `sk-${key}`;
let defaultUrl; }
// if (await copy(url)) {
// showSuccess('已复制到剪贴板！');
// } else {
// showWarning('无法复制到剪贴板，请手动复制，已将令牌填入搜索框。');
// setSearchKeyword(url);
// }
};
const copyText = async (text) => {
if (await copy(text)) {
showSuccess('已复制到剪贴板！');
} else {
// setSearchKeyword(text);
Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
}
};
const onOpenLink = async (type, key) => {
let status = localStorage.getItem('status');
let serverAddress = '';
if (status) {
status = JSON.parse(status);
serverAddress = status.server_address;
}
if (serverAddress === '') {
serverAddress = window.location.origin;
}
let encodedServerAddress = encodeURIComponent(serverAddress);
const chatLink = localStorage.getItem('chat_link');
const mjLink = localStorage.getItem('chat_link2');
let defaultUrl;
if (chatLink) { if (chatLink) {
defaultUrl = chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`; defaultUrl = chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
} }
let url; let url;
switch (type) { switch (type) {
case 'ama': case 'ama':
url = `ama://set-api-key?server=${encodedServerAddress}&key=sk-${key}`; url = `ama://set-api-key?server=${encodedServerAddress}&key=sk-${key}`;
break; break;
case 'opencat': case 'opencat':
url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`; url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
break; break;
case 'next-mj': case 'next-mj':
url = mjLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`; url = mjLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
break; break;
default: default:
if (!chatLink) { if (!chatLink) {
showError('管理员未设置聊天链接') showError('管理员未设置聊天链接');
return; return;
}
url = defaultUrl;
} }
url = defaultUrl;
}
window.open(url, '_blank'); window.open(url, '_blank');
};
useEffect(() => {
loadTokens(0)
.then()
.catch((reason) => {
showError(reason);
});
}, [pageSize]);
const removeRecord = key => {
let newDataSource = [...tokens];
if (key != null) {
let idx = newDataSource.findIndex(data => data.key === key);
if (idx > -1) {
newDataSource.splice(idx, 1);
setTokensFormat(newDataSource);
}
} }
};
const manageToken = async (id, action, record) => {
setLoading(true);
let data = { id };
let res;
switch (action) {
case 'delete':
res = await API.delete(`/api/token/${id}/`);
break;
case 'enable':
data.status = 1;
res = await API.put('/api/token/?status_only=true', data);
break;
case 'disable':
data.status = 2;
res = await API.put('/api/token/?status_only=true', data);
break;
}
const { success, message } = res.data;
if (success) {
showSuccess('操作成功完成！');
let token = res.data.data;
let newTokens = [...tokens];
// let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
if (action === 'delete') {
} else {
record.status = token.status;
// newTokens[realIdx].status = token.status;
}
setTokensFormat(newTokens);
} else {
showError(message);
}
setLoading(false);
};
const searchTokens = async () => {
if (searchKeyword === '' && searchToken === '') {
// if keyword is blank, load files instead.
await loadTokens(0);
setActivePage(1);
return;
}
setSearching(true);
const res = await API.get(`/api/token/search?keyword=${searchKeyword}&token=${searchToken}`);
const { success, message, data } = res.data;
if (success) {
setTokensFormat(data);
setActivePage(1);
} else {
showError(message);
}
setSearching(false);
};
const handleKeywordChange = async (value) => {
setSearchKeyword(value.trim());
};
const handleSearchTokenChange = async (value) => {
setSearchToken(value.trim());
};
const sortToken = (key) => {
if (tokens.length === 0) return;
setLoading(true);
let sortedTokens = [...tokens];
sortedTokens.sort((a, b) => {
return ('' + a[key]).localeCompare(b[key]);
});
if (sortedTokens[0].id === tokens[0].id) {
sortedTokens.reverse();
}
setTokens(sortedTokens);
setLoading(false);
};
useEffect(() => {
loadTokens(0)
.then()
.catch((reason) => {
showError(reason);
});
}, [pageSize]);
const removeRecord = key => {
let newDataSource = [...tokens];
if (key != null) {
let idx = newDataSource.findIndex(data => data.key === key);
if (idx > -1) {
newDataSource.splice(idx, 1);
setTokensFormat(newDataSource);
}
}
};
const manageToken = async (id, action, record) => {
setLoading(true);
let data = {id};
let res;
switch (action) {
case 'delete':
res = await API.delete(`/api/token/${id}/`);
break;
case 'enable':
data.status = 1;
res = await API.put('/api/token/?status_only=true', data);
break;
case 'disable':
data.status = 2;
res = await API.put('/api/token/?status_only=true', data);
break;
}
const {success, message} = res.data;
if (success) {
showSuccess('操作成功完成！');
let token = res.data.data;
let newTokens = [...tokens];
// let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
if (action === 'delete') {
} else {
record.status = token.status;
// newTokens[realIdx].status = token.status;
}
setTokensFormat(newTokens);
} else {
showError(message);
}
setLoading(false);
};
const searchTokens = async () => {
if (searchKeyword === '' && searchToken === '') {
// if keyword is blank, load files instead.
await loadTokens(0);
setActivePage(1);
return;
}
setSearching(true);
const res = await API.get(`/api/token/search?keyword=${searchKeyword}&token=${searchToken}`);
const {success, message, data} = res.data;
if (success) {
setTokensFormat(data);
setActivePage(1);
} else {
showError(message);
}
setSearching(false);
};
const handleKeywordChange = async (value) => {
setSearchKeyword(value.trim());
};
const handleSearchTokenChange = async (value) => {
setSearchToken(value.trim());
};
const sortToken = (key) => {
if (tokens.length === 0) return;
setLoading(true);
let sortedTokens = [...tokens];
sortedTokens.sort((a, b) => {
return ('' + a[key]).localeCompare(b[key]);
});
if (sortedTokens[0].id === tokens[0].id) {
sortedTokens.reverse();
}
setTokens(sortedTokens);
setLoading(false);
};
const handlePageChange = page => {
setActivePage(page);
if (page === Math.ceil(tokens.length / pageSize) + 1) {
// In this case we have to load more data and then append them.
loadTokens(page - 1).then(r => {
});
}
};
const rowSelection = {
onSelect: (record, selected) => {
},
onSelectAll: (selected, selectedRows) => {
},
onChange: (selectedRowKeys, selectedRows) => {
setSelectedKeys(selectedRows);
}
};
const handlePageChange = page => { const handleRow = (record, index) => {
setActivePage(page); if (record.status !== 1) {
if (page === Math.ceil(tokens.length / pageSize) + 1) { return {
// In this case we have to load more data and then append them. style: {
loadTokens(page - 1).then(r => { background: 'var(--semi-color-disabled-border)'
});
} }
}; };
} else {
const rowSelection = { return {};
onSelect: (record, selected) => { }
}, };
onSelectAll: (selected, selectedRows) => {
}, return (
onChange: (selectedRowKeys, selectedRows) => { <>
setSelectedKeys(selectedRows); <EditToken refresh={refresh} editingToken={editingToken} visiable={showEdit} handleClose={closeEdit}></EditToken>
<Form layout="horizontal" style={{ marginTop: 10 }} labelPosition={'left'}>
<Form.Input
field="keyword"
label="搜索关键字"
placeholder="令牌名称"
value={searchKeyword}
loading={searching}
onChange={handleKeywordChange}
/>
<Form.Input
field="token"
label="Key"
placeholder="密钥"
value={searchToken}
loading={searching}
onChange={handleSearchTokenChange}
/>
<Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
onClick={searchTokens} style={{ marginRight: 8 }}>查询</Button>
</Form>
<Table style={{ marginTop: 20 }} columns={columns} dataSource={pageData} pagination={{
currentPage: activePage,
pageSize: pageSize,
total: tokenCount,
showSizeChanger: true,
pageSizeOptions: [10, 20, 50, 100],
formatPageText: (page) => `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${tokens.length} 条`,
onPageSizeChange: (size) => {
setPageSize(size);
setActivePage(1);
}, },
}; onPageChange: handlePageChange
}} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
const handleRow = (record, index) => { </Table>
if (record.status !== 1) { <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
return { () => {
style: { setEditingToken({
background: 'var(--semi-color-disabled-border)', id: undefined
}, });
}; setShowEdit(true);
} else {
return {};
} }
}; }>添加令牌</Button>
<Button label="复制所选令牌" type="warning" onClick={
return ( async () => {
<> if (selectedKeys.length === 0) {
<EditToken refresh={refresh} editingToken={editingToken} visiable={showEdit} handleClose={closeEdit}></EditToken> showError('请至少选择一个令牌！');
<Form layout='horizontal' style={{marginTop: 10}} labelPosition={'left'}> return;
<Form.Input }
field="keyword" let keys = '';
label='搜索关键字' for (let i = 0; i < selectedKeys.length; i++) {
placeholder='令牌名称' keys += selectedKeys[i].name + ' sk-' + selectedKeys[i].key + '\n';
value={searchKeyword} }
loading={searching} await copyText(keys);
onChange={handleKeywordChange} }
/> }>复制所选令牌到剪贴板</Button>
<Form.Input </>
field="token" );
label='Key'
placeholder='密钥'
value={searchToken}
loading={searching}
onChange={handleSearchTokenChange}
/>
<Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
onClick={searchTokens} style={{marginRight: 8}}>查询</Button>
</Form>
<Table style={{marginTop: 20}} columns={columns} dataSource={pageData} pagination={{
currentPage: activePage,
pageSize: pageSize,
total: tokenCount,
showSizeChanger: true,
pageSizeOptions: [10, 20, 50, 100],
formatPageText: (page) => `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${tokens.length} 条`,
onPageSizeChange: (size) => {
setPageSize(size);
setActivePage(1);
},
onPageChange: handlePageChange,
}} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
</Table>
<Button theme='light' type='primary' style={{marginRight: 8}} onClick={
() => {
setEditingToken({
id: undefined,
});
setShowEdit(true);
}
}>添加令牌</Button>
<Button label='复制所选令牌' type="warning" onClick={
async () => {
if (selectedKeys.length === 0) {
showError('请至少选择一个令牌！');
return;
}
let keys = "";
for (let i = 0; i < selectedKeys.length; i++) {
keys += selectedKeys[i].name + " sk-" + selectedKeys[i].key + "\n";
}
await copyText(keys);
}
}>复制所选令牌到剪贴板</Button>
</>
);
}; };
export default TokensTable; export default TokensTable;
web/src/components/UsersTable.js
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from 'react';
import {API, isAdmin, showError, showSuccess} from '../helpers'; import { API, showError, showSuccess } from '../helpers';
import {Button, Modal, Popconfirm, Popover, Table, Tag, Form, Tooltip, Space} from "@douyinfe/semi-ui"; import { Button, Form, Popconfirm, Space, Table, Tag, Tooltip } from '@douyinfe/semi-ui';
import {ITEMS_PER_PAGE} from '../constants'; import { ITEMS_PER_PAGE } from '../constants';
import {renderGroup, renderNumber, renderQuota, renderText, stringToColor} from '../helpers/render'; import { renderGroup, renderNumber, renderQuota } from '../helpers/render';
import AddUser from "../pages/User/AddUser"; import AddUser from '../pages/User/AddUser';
import EditUser from "../pages/User/EditUser"; import EditUser from '../pages/User/EditUser';
function renderRole(role) { function renderRole(role) {
switch (role) { switch (role) {
case 1: case 1:
return <Tag size='large'>普通用户</Tag>; return <Tag size="large">普通用户</Tag>;
case 10: case 10:
return <Tag color='yellow' size='large'>管理员</Tag>; return <Tag color="yellow" size="large">管理员</Tag>;
case 100: case 100:
return <Tag color='orange' size='large'>超级管理员</Tag>; return <Tag color="orange" size="large">超级管理员</Tag>;
default: default:
return <Tag color='red' size='large'>未知身份</Tag>; return <Tag color="red" size="large">未知身份</Tag>;
} }
} }
const UsersTable = () => { const UsersTable = () => {
const columns = [{ const columns = [{
title: 'ID', dataIndex: 'id', title: 'ID', dataIndex: 'id'
}, { }, {
title: '用户名', dataIndex: 'username', title: '用户名', dataIndex: 'username'
}, { }, {
title: '分组', dataIndex: 'group', render: (text, record, index) => { title: '分组', dataIndex: 'group', render: (text, record, index) => {
return (<div> return (<div>
{renderGroup(text)} {renderGroup(text)}
</div>); </div>);
}, }
}, { }, {
title: '统计信息', dataIndex: 'info', render: (text, record, index) => { title: '统计信息', dataIndex: 'info', render: (text, record, index) => {
return (<div> return (<div>
<Space spacing={1}> <Space spacing={1}>
<Tooltip content={'剩余额度'}> <Tooltip content={'剩余额度'}>
<Tag color='white' size='large'>{renderQuota(record.quota)}</Tag> <Tag color="white" size="large">{renderQuota(record.quota)}</Tag>
</Tooltip> </Tooltip>
<Tooltip content={'已用额度'}> <Tooltip content={'已用额度'}>
<Tag color='white' size='large'>{renderQuota(record.used_quota)}</Tag> <Tag color="white" size="large">{renderQuota(record.used_quota)}</Tag>
</Tooltip> </Tooltip>
<Tooltip content={'调用次数'}> <Tooltip content={'调用次数'}>
<Tag color='white' size='large'>{renderNumber(record.request_count)}</Tag> <Tag color="white" size="large">{renderNumber(record.request_count)}</Tag>
</Tooltip> </Tooltip>
</Space> </Space>
</div>); </div>);
} }
}, { }, {
title: '邀请信息', dataIndex: 'invite', render: (text, record, index) => { title: '邀请信息', dataIndex: 'invite', render: (text, record, index) => {
return (<div> return (<div>
<Space spacing={1}> <Space spacing={1}>
<Tooltip content={'邀请人数'}> <Tooltip content={'邀请人数'}>
<Tag color='white' size='large'>{renderNumber(record.aff_count)}</Tag> <Tag color="white" size="large">{renderNumber(record.aff_count)}</Tag>
</Tooltip> </Tooltip>
<Tooltip content={'邀请总收益'}> <Tooltip content={'邀请总收益'}>
<Tag color='white' size='large'>{renderQuota(record.aff_history_quota)}</Tag> <Tag color="white" size="large">{renderQuota(record.aff_history_quota)}</Tag>
</Tooltip> </Tooltip>
<Tooltip content={'邀请人ID'}> <Tooltip content={'邀请人ID'}>
{record.inviter_id === 0 ? <Tag color='white' size='large'>无</Tag> : {record.inviter_id === 0 ? <Tag color="white" size="large">无</Tag> :
<Tag color='white' size='large'>{record.inviter_id}</Tag>} <Tag color="white" size="large">{record.inviter_id}</Tag>}
</Tooltip> </Tooltip>
</Space> </Space>
</div>); </div>);
} }
}, { }, {
title: '角色', dataIndex: 'role', render: (text, record, index) => { title: '角色', dataIndex: 'role', render: (text, record, index) => {
return (<div> return (<div>
{renderRole(text)} {renderRole(text)}
</div>); </div>);
}, }
}, { }, {
title: '状态', dataIndex: 'status', render: (text, record, index) => { title: '状态', dataIndex: 'status', render: (text, record, index) => {
return (<div> return (<div>
{record.DeletedAt !== null? <Tag color='red'>已注销</Tag> : renderStatus(text)} {record.DeletedAt !== null ? <Tag color="red">已注销</Tag> : renderStatus(text)}
</div>); </div>);
}, }
}, { }, {
title: '', dataIndex: 'operate', render: (text, record, index) => (<div> title: '', dataIndex: 'operate', render: (text, record, index) => (<div>
{ {
record.DeletedAt !== null ? <></>: record.DeletedAt !== null ? <></> :
<> <>
<Popconfirm <Popconfirm
title="确定？" title="确定？"
okType={'warning'} okType={'warning'}
onConfirm={() => { onConfirm={() => {
manageUser(record.username, 'promote', record) manageUser(record.username, 'promote', record);
}} }}
> >
<Button theme='light' type='warning' style={{marginRight: 1}}>提升</Button> <Button theme="light" type="warning" style={{ marginRight: 1 }}>提升</Button>
</Popconfirm> </Popconfirm>
<Popconfirm
title="确定？"
okType={'warning'}
onConfirm={() => {
manageUser(record.username, 'demote', record)
}}
>
<Button theme='light' type='secondary' style={{marginRight: 1}}>降级</Button>
</Popconfirm>
{record.status === 1 ?
<Button theme='light' type='warning' style={{marginRight: 1}} onClick={async () => {
manageUser(record.username, 'disable', record)
}}>禁用</Button> :
<Button theme='light' type='secondary' style={{marginRight: 1}} onClick={async () => {
manageUser(record.username, 'enable', record);
}} disabled={record.status === 3}>启用</Button>}
<Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={() => {
setEditingUser(record);
setShowEditUser(true);
}}>编辑</Button>
</>
}
<Popconfirm <Popconfirm
title="确定是否要删除此用户？" title="确定？"
content="硬删除，此修改将不可逆" okType={'warning'}
okType={'danger'} onConfirm={() => {
position={'left'} manageUser(record.username, 'demote', record);
onConfirm={() => { }}
manageUser(record.username, 'delete', record).then(() => {
removeRecord(record.id);
})
}}
> >
<Button theme='light' type='danger' style={{marginRight: 1}}>删除</Button> <Button theme="light" type="secondary" style={{ marginRight: 1 }}>降级</Button>
</Popconfirm> </Popconfirm>
</div>), {record.status === 1 ?
},]; <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={async () => {
manageUser(record.username, 'disable', record);
}}>禁用</Button> :
<Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={async () => {
manageUser(record.username, 'enable', record);
}} disabled={record.status === 3}>启用</Button>}
<Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={() => {
setEditingUser(record);
setShowEditUser(true);
}}>编辑</Button>
</>
const [users, setUsers] = useState([]); }
const [loading, setLoading] = useState(true); <Popconfirm
const [activePage, setActivePage] = useState(1); title="确定是否要删除此用户？"
const [searchKeyword, setSearchKeyword] = useState(''); content="硬删除，此修改将不可逆"
const [searching, setSearching] = useState(false); okType={'danger'}
const [userCount, setUserCount] = useState(ITEMS_PER_PAGE); position={'left'}
const [showAddUser, setShowAddUser] = useState(false); onConfirm={() => {
const [showEditUser, setShowEditUser] = useState(false); manageUser(record.username, 'delete', record).then(() => {
const [editingUser, setEditingUser] = useState({ removeRecord(record.id);
id: undefined, });
}); }}
>
<Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
</Popconfirm>
</div>)
}];
const setCount = (data) => { const [users, setUsers] = useState([]);
if (data.length >= (activePage) * ITEMS_PER_PAGE) { const [loading, setLoading] = useState(true);
setUserCount(data.length + 1); const [activePage, setActivePage] = useState(1);
} else { const [searchKeyword, setSearchKeyword] = useState('');
setUserCount(data.length); const [searching, setSearching] = useState(false);
} const [userCount, setUserCount] = useState(ITEMS_PER_PAGE);
const [showAddUser, setShowAddUser] = useState(false);
const [showEditUser, setShowEditUser] = useState(false);
const [editingUser, setEditingUser] = useState({
id: undefined
});
const setCount = (data) => {
if (data.length >= (activePage) * ITEMS_PER_PAGE) {
setUserCount(data.length + 1);
} else {
setUserCount(data.length);
} }
};
const removeRecord = key => { const removeRecord = key => {
console.log(key); console.log(key);
let newDataSource = [...users]; let newDataSource = [...users];
if (key != null) { if (key != null) {
let idx = newDataSource.findIndex(data => data.id === key); let idx = newDataSource.findIndex(data => data.id === key);
if (idx > -1) { if (idx > -1) {
newDataSource.splice(idx, 1); newDataSource.splice(idx, 1);
setUsers(newDataSource); setUsers(newDataSource);
} }
} }
}; };
const loadUsers = async (startIdx) => { const loadUsers = async (startIdx) => {
const res = await API.get(`/api/user/?p=${startIdx}`); const res = await API.get(`/api/user/?p=${startIdx}`);
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
if (startIdx === 0) { if (startIdx === 0) {
setUsers(data); setUsers(data);
setCount(data); setCount(data);
} else { } else {
let newUsers = users; let newUsers = users;
newUsers.push(...data); newUsers.push(...data);
setUsers(newUsers); setUsers(newUsers);
setCount(newUsers); setCount(newUsers);
} }
} else { } else {
showError(message); showError(message);
} }
setLoading(false); setLoading(false);
}; };
const onPaginationChange = (e, {activePage}) => { const onPaginationChange = (e, { activePage }) => {
(async () => { (async () => {
if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) { if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
// In this case we have to load more data and then append them. // In this case we have to load more data and then append them.
await loadUsers(activePage - 1); await loadUsers(activePage - 1);
} }
setActivePage(activePage); setActivePage(activePage);
})(); })();
}; };
useEffect(() => { useEffect(() => {
loadUsers(0) loadUsers(0)
.then() .then()
.catch((reason) => { .catch((reason) => {
showError(reason); showError(reason);
}); });
}, []); }, []);
const manageUser = async (username, action, record) => { const manageUser = async (username, action, record) => {
const res = await API.post('/api/user/manage', { const res = await API.post('/api/user/manage', {
username, action username, action
}); });
const {success, message} = res.data; const { success, message } = res.data;
if (success) { if (success) {
showSuccess('操作成功完成！'); showSuccess('操作成功完成！');
let user = res.data.data; let user = res.data.data;
let newUsers = [...users]; let newUsers = [...users];
if (action === 'delete') { if (action === 'delete') {
} else { } else {
record.status = user.status; record.status = user.status;
record.role = user.role; record.role = user.role;
} }
setUsers(newUsers); setUsers(newUsers);
} else { } else {
showError(message); showError(message);
} }
}; };
const renderStatus = (status) => { const renderStatus = (status) => {
switch (status) { switch (status) {
case 1: case 1:
return <Tag size='large'>已激活</Tag>; return <Tag size="large">已激活</Tag>;
case 2: case 2:
return (<Tag size='large' color='red'> return (<Tag size="large" color="red">
已封禁 已封禁
</Tag>); </Tag>);
default: default:
return (<Tag size='large' color='grey'> return (<Tag size="large" color="grey">
未知状态 未知状态
</Tag>); </Tag>);
} }
}; };
const searchUsers = async () => { const searchUsers = async () => {
if (searchKeyword === '') { if (searchKeyword === '') {
// if keyword is blank, load files instead. // if keyword is blank, load files instead.
await loadUsers(0); await loadUsers(0);
setActivePage(1); setActivePage(1);
return; return;
} }
setSearching(true); setSearching(true);
const res = await API.get(`/api/user/search?keyword=${searchKeyword}`); const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
setUsers(data); setUsers(data);
setActivePage(1); setActivePage(1);
} else { } else {
showError(message); showError(message);
} }
setSearching(false); setSearching(false);
}; };
const handleKeywordChange = async (value) => { const handleKeywordChange = async (value) => {
setSearchKeyword(value.trim()); setSearchKeyword(value.trim());
}; };
const sortUser = (key) => { const sortUser = (key) => {
if (users.length === 0) return; if (users.length === 0) return;
setLoading(true); setLoading(true);
let sortedUsers = [...users]; let sortedUsers = [...users];
sortedUsers.sort((a, b) => { sortedUsers.sort((a, b) => {
return ('' + a[key]).localeCompare(b[key]); return ('' + a[key]).localeCompare(b[key]);
}); });
if (sortedUsers[0].id === users[0].id) { if (sortedUsers[0].id === users[0].id) {
sortedUsers.reverse(); sortedUsers.reverse();
} }
setUsers(sortedUsers); setUsers(sortedUsers);
setLoading(false); setLoading(false);
}; };
const handlePageChange = page => { const handlePageChange = page => {
setActivePage(page); setActivePage(page);
if (page === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) { if (page === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
// In this case we have to load more data and then append them. // In this case we have to load more data and then append them.
loadUsers(page - 1).then(r => { loadUsers(page - 1).then(r => {
}); });
} }
}; };
const pageData = users.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE); const pageData = users.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
const closeAddUser = () => { const closeAddUser = () => {
setShowAddUser(false); setShowAddUser(false);
} };
const closeEditUser = () => { const closeEditUser = () => {
setShowEditUser(false); setShowEditUser(false);
setEditingUser({ setEditingUser({
id: undefined, id: undefined
}); });
} };
const refresh = async () => { const refresh = async () => {
if (searchKeyword === '') { if (searchKeyword === '') {
await loadUsers(activePage - 1); await loadUsers(activePage - 1);
} else { } else {
await searchUsers(); await searchUsers();
} }
}; };
return ( return (
<> <>
<AddUser refresh={refresh} visible={showAddUser} handleClose={closeAddUser}></AddUser> <AddUser refresh={refresh} visible={showAddUser} handleClose={closeAddUser}></AddUser>
<EditUser refresh={refresh} visible={showEditUser} handleClose={closeEditUser} editingUser={editingUser}></EditUser> <EditUser refresh={refresh} visible={showEditUser} handleClose={closeEditUser}
<Form onSubmit={searchUsers}> editingUser={editingUser}></EditUser>
<Form.Input <Form onSubmit={searchUsers}>
label='搜索关键字' <Form.Input
icon='search' label="搜索关键字"
field='keyword' icon="search"
iconPosition='left' field="keyword"
placeholder='搜索用户的 ID，用户名，显示名称，以及邮箱地址 ...' iconPosition="left"
value={searchKeyword} placeholder="搜索用户的 ID，用户名，显示名称，以及邮箱地址 ..."
loading={searching} value={searchKeyword}
onChange={value => handleKeywordChange(value)} loading={searching}
/> onChange={value => handleKeywordChange(value)}
</Form> />
</Form>
<Table columns={columns} dataSource={pageData} pagination={{ <Table columns={columns} dataSource={pageData} pagination={{
currentPage: activePage, currentPage: activePage,
pageSize: ITEMS_PER_PAGE, pageSize: ITEMS_PER_PAGE,
total: userCount, total: userCount,
pageSizeOpts: [10, 20, 50, 100], pageSizeOpts: [10, 20, 50, 100],
onPageChange: handlePageChange, onPageChange: handlePageChange
}} loading={loading}/> }} loading={loading} />
<Button theme='light' type='primary' style={{marginRight: 8}} onClick={ <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
() => { () => {
setShowAddUser(true); setShowAddUser(true);
} }
}>添加用户</Button> }>添加用户</Button>
</> </>
); );
}; };
export default UsersTable; export default UsersTable;
web/src/components/WeChatIcon.js
...@@ -3,14 +3,14 @@ import { Icon } from '@douyinfe/semi-ui'; ...@@ -3,14 +3,14 @@ import { Icon } from '@douyinfe/semi-ui';
const WeChatIcon = () => { const WeChatIcon = () => {
function CustomIcon() { function CustomIcon() {
return <svg t='1709714447384' className='icon' viewBox='0 0 1024 1024' version='1.1' return <svg t="1709714447384" className="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns='http://www.w3.org/2000/svg' p-id='5091' width='16' height='16'> xmlns="http://www.w3.org/2000/svg" p-id="5091" width="16" height="16">
<path <path
d='M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z' d="M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z"
p-id='5092'></path> p-id="5092"></path>
<path <path
d='M866.7 792.7c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-0.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7 2.4 0 4.7-0.9 6.4-2.6 1.7-1.7 2.6-4 2.6-6.4 0-2.2-0.9-4.4-1.4-6.6-0.3-1.2-7.6-28.3-12.2-45.3-0.5-1.9-0.9-3.8-0.9-5.7 0.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9z m179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c-0.1 19.8-16.2 35.9-36 35.9z' d="M866.7 792.7c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-0.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7 2.4 0 4.7-0.9 6.4-2.6 1.7-1.7 2.6-4 2.6-6.4 0-2.2-0.9-4.4-1.4-6.6-0.3-1.2-7.6-28.3-12.2-45.3-0.5-1.9-0.9-3.8-0.9-5.7 0.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9z m179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c-0.1 19.8-16.2 35.9-36 35.9z"
p-id='5093'></path> p-id="5093"></path>
</svg>; </svg>;
} }
......
web/src/pages/Redemption/EditRedemption.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import {API, downloadTextAsFile, isMobile, showError, showSuccess} from '../../helpers'; import { API, downloadTextAsFile, isMobile, showError, showSuccess } from '../../helpers';
import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render'; import { renderQuotaWithPrompt } from '../../helpers/render';
import {SideSheet, Space, Spin, Button, Input, Typography, AutoComplete, Modal} from "@douyinfe/semi-ui"; import { AutoComplete, Button, Input, Modal, SideSheet, Space, Spin, Typography } from '@douyinfe/semi-ui';
import Title from "@douyinfe/semi-ui/lib/es/typography/title"; import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import {Divider} from "semantic-ui-react"; import { Divider } from 'semantic-ui-react';
const EditRedemption = (props) => { const EditRedemption = (props) => {
const isEdit = props.editingRedemption.id !== undefined; const isEdit = props.editingRedemption.id !== undefined;
const [loading, setLoading] = useState(isEdit); const [loading, setLoading] = useState(isEdit);
const params = useParams(); const params = useParams();
const navigate = useNavigate() const navigate = useNavigate();
const originInputs = { const originInputs = {
name: '', name: '',
quota: 100000, quota: 100000,
...@@ -22,8 +22,8 @@ const EditRedemption = (props) => { ...@@ -22,8 +22,8 @@ const EditRedemption = (props) => {
const handleCancel = () => { const handleCancel = () => {
props.handleClose(); props.handleClose();
} };
const handleInputChange = (name, value) => { const handleInputChange = (name, value) => {
setInputs((inputs) => ({ ...inputs, [name]: value })); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
...@@ -43,9 +43,9 @@ const EditRedemption = (props) => { ...@@ -43,9 +43,9 @@ const EditRedemption = (props) => {
useEffect(() => { useEffect(() => {
if (isEdit) { if (isEdit) {
loadRedemption().then( loadRedemption().then(
() => { () => {
// console.log(inputs); // console.log(inputs);
} }
); );
} else { } else {
setInputs(originInputs); setInputs(originInputs);
...@@ -82,21 +82,21 @@ const EditRedemption = (props) => { ...@@ -82,21 +82,21 @@ const EditRedemption = (props) => {
showError(message); showError(message);
} }
if (!isEdit && data) { if (!isEdit && data) {
let text = ""; let text = '';
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
text += data[i] + "\n"; text += data[i] + '\n';
} }
// downloadTextAsFile(text, `${inputs.name}.txt`); // downloadTextAsFile(text, `${inputs.name}.txt`);
Modal.confirm({ Modal.confirm({
title: '兑换码创建成功', title: '兑换码创建成功',
content: ( content: (
<div> <div>
<p>兑换码创建成功，是否下载兑换码？</p> <p>兑换码创建成功，是否下载兑换码？</p>
<p>兑换码将以文本文件的形式下载，文件名为兑换码的名称。</p> <p>兑换码将以文本文件的形式下载，文件名为兑换码的名称。</p>
</div> </div>
), ),
onOk: () => { onOk: () => {
downloadTextAsFile(text, `${inputs.name}.txt`); downloadTextAsFile(text, `${inputs.name}.txt`);
} }
}); });
} }
...@@ -106,71 +106,71 @@ const EditRedemption = (props) => { ...@@ -106,71 +106,71 @@ const EditRedemption = (props) => {
return ( return (
<> <>
<SideSheet <SideSheet
placement={isEdit ? 'right' : 'left'} placement={isEdit ? 'right' : 'left'}
title={<Title level={3}>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Title>} title={<Title level={3}>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Title>}
headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}} headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}} bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
visible={props.visiable} visible={props.visiable}
footer={ footer={
<div style={{display: 'flex', justifyContent: 'flex-end'}}> <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Space> <Space>
<Button theme='solid' size={'large'} onClick={submit}>提交</Button> <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
<Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button> <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
</Space> </Space>
</div> </div>
} }
closeIcon={null} closeIcon={null}
onCancel={() => handleCancel()} onCancel={() => handleCancel()}
width={isMobile() ? '100%' : 600} width={isMobile() ? '100%' : 600}
> >
<Spin spinning={loading}> <Spin spinning={loading}>
<Input <Input
style={{ marginTop: 20 }} style={{ marginTop: 20 }}
label='名称' label="名称"
name='name' name="name"
placeholder={'请输入名称'} placeholder={'请输入名称'}
onChange={value => handleInputChange('name', value)} onChange={value => handleInputChange('name', value)}
value={name} value={name}
autoComplete='new-password' autoComplete="new-password"
required={!isEdit} required={!isEdit}
/> />
<Divider/> <Divider />
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Typography.Text>{`额度${renderQuotaWithPrompt(quota)}`}</Typography.Text> <Typography.Text>{`额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
</div> </div>
<AutoComplete <AutoComplete
style={{ marginTop: 8 }} style={{ marginTop: 8 }}
name='quota' name="quota"
placeholder={'请输入额度'} placeholder={'请输入额度'}
onChange={(value) => handleInputChange('quota', value)} onChange={(value) => handleInputChange('quota', value)}
value={quota} value={quota}
autoComplete='new-password' autoComplete="new-password"
type='number' type="number"
position={'bottom'} position={'bottom'}
data={[ data={[
{value: 500000, label: '1$'}, { value: 500000, label: '1$' },
{value: 5000000, label: '10$'}, { value: 5000000, label: '10$' },
{value: 25000000, label: '50$'}, { value: 25000000, label: '50$' },
{value: 50000000, label: '100$'}, { value: 50000000, label: '100$' },
{value: 250000000, label: '500$'}, { value: 250000000, label: '500$' },
{value: 500000000, label: '1000$'}, { value: 500000000, label: '1000$' }
]} ]}
/> />
{ {
!isEdit && <> !isEdit && <>
<Divider/> <Divider />
<Typography.Text>生成数量</Typography.Text> <Typography.Text>生成数量</Typography.Text>
<Input <Input
style={{ marginTop: 8 }} style={{ marginTop: 8 }}
label='生成数量' label="生成数量"
name='count' name="count"
placeholder={'请输入生成数量'} placeholder={'请输入生成数量'}
onChange={value => handleInputChange('count', value)} onChange={value => handleInputChange('count', value)}
value={count} value={count}
autoComplete='new-password' autoComplete="new-password"
type='number' type="number"
/> />
</> </>
} }
</Spin> </Spin>
</SideSheet> </SideSheet>
......
web/src/pages/Token/EditToken.js
import React, {useEffect, useRef, useState} from 'react'; import React, { useEffect, useState } from 'react';
import {useParams, useNavigate} from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import {API, isMobile, showError, showSuccess, timestamp2string} from '../../helpers'; import { API, isMobile, showError, showSuccess, timestamp2string } from '../../helpers';
import {renderQuota, renderQuotaWithPrompt} from '../../helpers/render'; import { renderQuotaWithPrompt } from '../../helpers/render';
import { import {
Layout, AutoComplete,
SideSheet, Banner,
Button, Button,
Checkbox,
DatePicker,
Input,
Select,
SideSheet,
Space, Space,
Spin, Spin,
Banner, Typography
Input, } from '@douyinfe/semi-ui';
DatePicker, import Title from '@douyinfe/semi-ui/lib/es/typography/title';
AutoComplete, import { Divider } from 'semantic-ui-react';
Typography,
Checkbox, Select
} from "@douyinfe/semi-ui";
import Title from "@douyinfe/semi-ui/lib/es/typography/title";
import {Divider} from "semantic-ui-react";
const EditToken = (props) => { const EditToken = (props) => {
const [isEdit, setIsEdit] = useState(false); const [isEdit, setIsEdit] = useState(false);
const [loading, setLoading] = useState(isEdit); const [loading, setLoading] = useState(isEdit);
const originInputs = { const originInputs = {
name: '', name: '',
remain_quota: isEdit ? 0 : 500000, remain_quota: isEdit ? 0 : 500000,
expired_time: -1, expired_time: -1,
unlimited_quota: false, unlimited_quota: false,
model_limits_enabled: false, model_limits_enabled: false,
model_limits: [], model_limits: []
}; };
const [inputs, setInputs] = useState(originInputs); const [inputs, setInputs] = useState(originInputs);
const {name, remain_quota, expired_time, unlimited_quota, model_limits_enabled, model_limits} = inputs; const { name, remain_quota, expired_time, unlimited_quota, model_limits_enabled, model_limits } = inputs;
// const [visible, setVisible] = useState(false); // const [visible, setVisible] = useState(false);
const [models, setModels] = useState({}); const [models, setModels] = useState({});
const navigate = useNavigate(); const navigate = useNavigate();
const handleInputChange = (name, value) => { const handleInputChange = (name, value) => {
setInputs((inputs) => ({...inputs, [name]: value})); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
const handleCancel = () => { const handleCancel = () => {
props.handleClose(); props.handleClose();
};
const setExpiredTime = (month, day, hour, minute) => {
let now = new Date();
let timestamp = now.getTime() / 1000;
let seconds = month * 30 * 24 * 60 * 60;
seconds += day * 24 * 60 * 60;
seconds += hour * 60 * 60;
seconds += minute * 60;
if (seconds !== 0) {
timestamp += seconds;
setInputs({ ...inputs, expired_time: timestamp2string(timestamp) });
} else {
setInputs({ ...inputs, expired_time: -1 });
} }
const setExpiredTime = (month, day, hour, minute) => { };
let now = new Date();
let timestamp = now.getTime() / 1000;
let seconds = month * 30 * 24 * 60 * 60;
seconds += day * 24 * 60 * 60;
seconds += hour * 60 * 60;
seconds += minute * 60;
if (seconds !== 0) {
timestamp += seconds;
setInputs({...inputs, expired_time: timestamp2string(timestamp)});
} else {
setInputs({...inputs, expired_time: -1});
}
};
const setUnlimitedQuota = () => { const setUnlimitedQuota = () => {
setInputs({...inputs, unlimited_quota: !unlimited_quota}); setInputs({ ...inputs, unlimited_quota: !unlimited_quota });
}; };
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) {
let localModelOptions = data.map((model) => ({ let localModelOptions = data.map((model) => ({
label: model, label: model,
value: model value: model
})); }));
setModels(localModelOptions); setModels(localModelOptions);
} else { } else {
showError(message); showError(message);
}
} }
};
const loadToken = async () => { const loadToken = async () => {
setLoading(true); setLoading(true);
let res = await API.get(`/api/token/${props.editingToken.id}`); let res = await API.get(`/api/token/${props.editingToken.id}`);
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
if (data.expired_time !== -1) { if (data.expired_time !== -1) {
data.expired_time = timestamp2string(data.expired_time); data.expired_time = timestamp2string(data.expired_time);
} }
if (data.model_limits !== '') { if (data.model_limits !== '') {
data.model_limits = data.model_limits.split(','); data.model_limits = data.model_limits.split(',');
} else { } else {
data.model_limits = []; data.model_limits = [];
} }
setInputs(data); setInputs(data);
} else { } else {
showError(message); showError(message);
}
setLoading(false);
};
useEffect(() => {
setIsEdit(props.editingToken.id !== undefined);
}, [props.editingToken.id]);
useEffect(() => {
if (!isEdit) {
setInputs(originInputs);
} else {
loadToken().then(
() => {
// console.log(inputs);
} }
setLoading(false); );
}; }
useEffect(() => { loadModels();
setIsEdit(props.editingToken.id !== undefined); }, [isEdit]);
}, [props.editingToken.id]);
useEffect(() => { // 新增 state 变量 tokenCount 来记录用户想要创建的令牌数量，默认为 1
if (!isEdit) { const [tokenCount, setTokenCount] = useState(1);
setInputs(originInputs);
} else {
loadToken().then(
() => {
// console.log(inputs);
}
);
}
loadModels();
}, [isEdit]);
// 新增 state 变量 tokenCount 来记录用户想要创建的令牌数量，默认为 1 // 新增处理 tokenCount 变化的函数
const [tokenCount, setTokenCount] = useState(1); const handleTokenCountChange = (value) => {
// 确保用户输入的是正整数
const count = parseInt(value, 10);
if (!isNaN(count) && count > 0) {
setTokenCount(count);
}
};
// 生成一个随机的四位字母数字字符串
const generateRandomSuffix = () => {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < 6; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
};
// 新增处理 tokenCount 变化的函数 const submit = async () => {
const handleTokenCountChange = (value) => { setLoading(true);
// 确保用户输入的是正整数 if (isEdit) {
const count = parseInt(value, 10); // 编辑令牌的逻辑保持不变
if (!isNaN(count) && count > 0) { let localInputs = { ...inputs };
setTokenCount(count); localInputs.remain_quota = parseInt(localInputs.remain_quota);
if (localInputs.expired_time !== -1) {
let time = Date.parse(localInputs.expired_time);
if (isNaN(time)) {
showError('过期时间格式错误！');
setLoading(false);
return;
}
localInputs.expired_time = Math.ceil(time / 1000);
}
localInputs.model_limits = localInputs.model_limits.join(',');
let res = await API.put(`/api/token/`, { ...localInputs, id: parseInt(props.editingToken.id) });
const { success, message } = res.data;
if (success) {
showSuccess('令牌更新成功！');
props.refresh();
props.handleClose();
} else {
showError(message);
}
} else {
// 处理新增多个令牌的情况
let successCount = 0; // 记录成功创建的令牌数量
for (let i = 0; i < tokenCount; i++) {
let localInputs = { ...inputs };
if (i !== 0) {
// 如果用户想要创建多个令牌，则给每个令牌一个序号后缀
localInputs.name = `${inputs.name}-${generateRandomSuffix()}`;
} }
}; localInputs.remain_quota = parseInt(localInputs.remain_quota);
// 生成一个随机的四位字母数字字符串 if (localInputs.expired_time !== -1) {
const generateRandomSuffix = () => { let time = Date.parse(localInputs.expired_time);
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; if (isNaN(time)) {
let result = ''; showError('过期时间格式错误！');
for (let i = 0; i < 6; i++) { setLoading(false);
result += characters.charAt(Math.floor(Math.random() * characters.length)); break;
}
localInputs.expired_time = Math.ceil(time / 1000);
} }
return result; localInputs.model_limits = localInputs.model_limits.join(',');
}; let res = await API.post(`/api/token/`, localInputs);
const { success, message } = res.data;
const submit = async () => { if (success) {
setLoading(true); successCount++;
if (isEdit) {
// 编辑令牌的逻辑保持不变
let localInputs = {...inputs};
localInputs.remain_quota = parseInt(localInputs.remain_quota);
if (localInputs.expired_time !== -1) {
let time = Date.parse(localInputs.expired_time);
if (isNaN(time)) {
showError('过期时间格式错误！');
setLoading(false);
return;
}
localInputs.expired_time = Math.ceil(time / 1000);
}
localInputs.model_limits = localInputs.model_limits.join(',');
let res = await API.put(`/api/token/`, {...localInputs, id: parseInt(props.editingToken.id)});
const {success, message} = res.data;
if (success) {
showSuccess('令牌更新成功！');
props.refresh();
props.handleClose();
} else {
showError(message);
}
} else { } else {
// 处理新增多个令牌的情况 showError(message);
let successCount = 0; // 记录成功创建的令牌数量 break; // 如果创建失败，终止循环
for (let i = 0; i < tokenCount; i++) {
let localInputs = {...inputs};
if (i !== 0) {
// 如果用户想要创建多个令牌，则给每个令牌一个序号后缀
localInputs.name = `${inputs.name}-${generateRandomSuffix()}`;
}
localInputs.remain_quota = parseInt(localInputs.remain_quota);
if (localInputs.expired_time !== -1) {
let time = Date.parse(localInputs.expired_time);
if (isNaN(time)) {
showError('过期时间格式错误！');
setLoading(false);
break;
}
localInputs.expired_time = Math.ceil(time / 1000);
}
localInputs.model_limits = localInputs.model_limits.join(',');
let res = await API.post(`/api/token/`, localInputs);
const {success, message} = res.data;
if (success) {
successCount++;
} else {
showError(message);
break; // 如果创建失败，终止循环
}
}
if (successCount > 0) {
showSuccess(`${successCount}个令牌创建成功，请在列表页面点击复制获取令牌！`);
props.refresh();
props.handleClose();
}
} }
setLoading(false); }
setInputs(originInputs); // 重置表单
setTokenCount(1); // 重置数量为默认值
};
if (successCount > 0) {
showSuccess(`${successCount}个令牌创建成功，请在列表页面点击复制获取令牌！`);
props.refresh();
props.handleClose();
}
}
setLoading(false);
setInputs(originInputs); // 重置表单
setTokenCount(1); // 重置数量为默认值
};
return ( return (
<> <>
<SideSheet <SideSheet
placement={isEdit ? 'right' : 'left'} placement={isEdit ? 'right' : 'left'}
title={<Title level={3}>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Title>} title={<Title level={3}>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Title>}
headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}} headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}} bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
visible={props.visiable} visible={props.visiable}
footer={ footer={
<div style={{display: 'flex', justifyContent: 'flex-end'}}> <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Space> <Space>
<Button theme='solid' size={'large'} onClick={submit}>提交</Button> <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
<Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button> <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
</Space> </Space>
</div> </div>
} }
closeIcon={null} closeIcon={null}
onCancel={() => handleCancel()} onCancel={() => handleCancel()}
width={isMobile() ? '100%' : 600} width={isMobile() ? '100%' : 600}
> >
<Spin spinning={loading}> <Spin spinning={loading}>
<Input <Input
style={{marginTop: 20}} style={{ marginTop: 20 }}
label='名称' label="名称"
name='name' name="name"
placeholder={'请输入名称'} placeholder={'请输入名称'}
onChange={(value) => handleInputChange('name', value)} onChange={(value) => handleInputChange('name', value)}
value={name} value={name}
autoComplete='new-password' autoComplete="new-password"
required={!isEdit} required={!isEdit}
/> />
<Divider/> <Divider />
<DatePicker <DatePicker
label='过期时间' label="过期时间"
name='expired_time' name="expired_time"
placeholder={'请选择过期时间'} placeholder={'请选择过期时间'}
onChange={(value) => handleInputChange('expired_time', value)} onChange={(value) => handleInputChange('expired_time', value)}
value={expired_time} value={expired_time}
autoComplete='new-password' autoComplete="new-password"
type='dateTime' type="dateTime"
/> />
<div style={{marginTop: 20}}> <div style={{ marginTop: 20 }}>
<Space> <Space>
<Button type={'tertiary'} onClick={() => { <Button type={'tertiary'} onClick={() => {
setExpiredTime(0, 0, 0, 0); setExpiredTime(0, 0, 0, 0);
}}>永不过期</Button> }}>永不过期</Button>
<Button type={'tertiary'} onClick={() => { <Button type={'tertiary'} onClick={() => {
setExpiredTime(0, 0, 1, 0); setExpiredTime(0, 0, 1, 0);
}}>一小时</Button> }}>一小时</Button>
<Button type={'tertiary'} onClick={() => { <Button type={'tertiary'} onClick={() => {
setExpiredTime(1, 0, 0, 0); setExpiredTime(1, 0, 0, 0);
}}>一个月</Button> }}>一个月</Button>
<Button type={'tertiary'} onClick={() => { <Button type={'tertiary'} onClick={() => {
setExpiredTime(0, 1, 0, 0); setExpiredTime(0, 1, 0, 0);
}}>一天</Button> }}>一天</Button>
</Space> </Space>
</div> </div>
<Divider/> <Divider />
<Banner type={'warning'} <Banner type={'warning'}
description={'注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。'}></Banner> description={'注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。'}></Banner>
<div style={{marginTop: 20}}> <div style={{ marginTop: 20 }}>
<Typography.Text>{`额度${renderQuotaWithPrompt(remain_quota)}`}</Typography.Text> <Typography.Text>{`额度${renderQuotaWithPrompt(remain_quota)}`}</Typography.Text>
</div> </div>
<AutoComplete <AutoComplete
style={{marginTop: 8}} style={{ marginTop: 8 }}
name='remain_quota' name="remain_quota"
placeholder={'请输入额度'} placeholder={'请输入额度'}
onChange={(value) => handleInputChange('remain_quota', value)} onChange={(value) => handleInputChange('remain_quota', value)}
value={remain_quota} value={remain_quota}
autoComplete='new-password' autoComplete="new-password"
type='number' type="number"
// position={'top'} // position={'top'}
data={[ data={[
{value: 500000, label: '1$'}, { value: 500000, label: '1$' },
{value: 5000000, label: '10$'}, { value: 5000000, label: '10$' },
{value: 25000000, label: '50$'}, { value: 25000000, label: '50$' },
{value: 50000000, label: '100$'}, { value: 50000000, label: '100$' },
{value: 250000000, label: '500$'}, { value: 250000000, label: '500$' },
{value: 500000000, label: '1000$'}, { value: 500000000, label: '1000$' }
]} ]}
disabled={unlimited_quota} disabled={unlimited_quota}
/> />
{!isEdit && ( {!isEdit && (
<> <>
<div style={{marginTop: 20}}> <div style={{ marginTop: 20 }}>
<Typography.Text>新建数量</Typography.Text> <Typography.Text>新建数量</Typography.Text>
</div> </div>
<AutoComplete <AutoComplete
style={{ marginTop: 8 }} style={{ marginTop: 8 }}
label='数量' label="数量"
placeholder={'请选择或输入创建令牌的数量'} placeholder={'请选择或输入创建令牌的数量'}
onChange={(value) => handleTokenCountChange(value)} onChange={(value) => handleTokenCountChange(value)}
onSelect={(value) => handleTokenCountChange(value)} onSelect={(value) => handleTokenCountChange(value)}
value={tokenCount.toString()} value={tokenCount.toString()}
autoComplete='off' autoComplete="off"
type='number' type="number"
data={[ data={[
{ value: 10, label: '10个' }, { value: 10, label: '10个' },
{ value: 20, label: '20个' }, { value: 20, label: '20个' },
{ value: 30, label: '30个' }, { value: 30, label: '30个' },
{ value: 100, label: '100个' }, { value: 100, label: '100个' }
]} ]}
disabled={unlimited_quota} disabled={unlimited_quota}
/> />
</> </>
)} )}
<div> <div>
<Button style={{marginTop: 8}} type={'warning'} onClick={() => { <Button style={{ marginTop: 8 }} type={'warning'} onClick={() => {
setUnlimitedQuota(); setUnlimitedQuota();
}}>{unlimited_quota ? '取消无限额度' : '设为无限额度'}</Button> }}>{unlimited_quota ? '取消无限额度' : '设为无限额度'}</Button>
</div> </div>
<Divider/> <Divider />
<div style={{marginTop: 10, display: 'flex'}}> <div style={{ marginTop: 10, display: 'flex' }}>
<Space> <Space>
<Checkbox <Checkbox
name='model_limits_enabled' name="model_limits_enabled"
checked={model_limits_enabled} checked={model_limits_enabled}
onChange={(e) => handleInputChange('model_limits_enabled', e.target.checked)} onChange={(e) => handleInputChange('model_limits_enabled', e.target.checked)}
> >
</Checkbox> </Checkbox>
<Typography.Text>启用模型限制（非必要，不建议启用）</Typography.Text> <Typography.Text>启用模型限制（非必要，不建议启用）</Typography.Text>
</Space> </Space>
</div> </div>
<Select <Select
style={{marginTop: 8}} style={{ marginTop: 8 }}
placeholder={'请选择该渠道所支持的模型'} placeholder={'请选择该渠道所支持的模型'}
name='models' name="models"
required required
multiple multiple
selection selection
onChange={value => { onChange={value => {
handleInputChange('model_limits', value); handleInputChange('model_limits', value);
}} }}
value={inputs.model_limits} value={inputs.model_limits}
autoComplete='new-password' autoComplete="new-password"
optionList={models} optionList={models}
disabled={!model_limits_enabled} disabled={!model_limits_enabled}
/> />
</Spin> </Spin>
</SideSheet> </SideSheet>
</> </>
); );
}; };
export default EditToken; export default EditToken;
web/src/pages/User/AddUser.js
import React, {useState} from 'react'; import React, { useState } from 'react';
import {API, isMobile, showError, showSuccess} from '../../helpers'; import { API, isMobile, showError, showSuccess } from '../../helpers';
import Title from "@douyinfe/semi-ui/lib/es/typography/title"; import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import {Button, SideSheet, Space, Input, Spin} from "@douyinfe/semi-ui"; import { Button, Input, SideSheet, Space, Spin } from '@douyinfe/semi-ui';
const AddUser = (props) => { const AddUser = (props) => {
const originInputs = { const originInputs = {
username: '', username: '',
display_name: '', display_name: '',
password: '', password: ''
}; };
const [inputs, setInputs] = useState(originInputs); const [inputs, setInputs] = useState(originInputs);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const {username, display_name, password} = inputs; const { username, display_name, password } = inputs;
const handleInputChange = (name, value) => { const handleInputChange = (name, value) => {
setInputs((inputs) => ({...inputs, [name]: value})); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
const submit = async () => { const submit = async () => {
setLoading(true); setLoading(true);
if (inputs.username === '' || inputs.password === '') return; if (inputs.username === '' || inputs.password === '') return;
const res = await API.post(`/api/user/`, inputs); const res = await API.post(`/api/user/`, inputs);
const {success, message} = res.data; const { success, message } = res.data;
if (success) { if (success) {
showSuccess('用户账户创建成功！'); showSuccess('用户账户创建成功！');
setInputs(originInputs); setInputs(originInputs);
props.refresh(); props.refresh();
props.handleClose(); props.handleClose();
} else { } else {
showError(message); showError(message);
}
setLoading(false);
};
const handleCancel = () => {
props.handleClose();
} }
setLoading(false);
};
return ( const handleCancel = () => {
<> props.handleClose();
<SideSheet };
placement={'left'}
title={<Title level={3}>{'添加用户'}</Title>} return (
headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}} <>
bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}} <SideSheet
visible={props.visible} placement={'left'}
footer={ title={<Title level={3}>{'添加用户'}</Title>}
<div style={{display: 'flex', justifyContent: 'flex-end'}}> headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
<Space> bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
<Button theme='solid' size={'large'} onClick={submit}>提交</Button> visible={props.visible}
<Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button> footer={
</Space> <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
</div> <Space>
} <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
closeIcon={null} <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
onCancel={() => handleCancel()} </Space>
width={isMobile() ? '100%' : 600} </div>
> }
<Spin spinning={loading}> closeIcon={null}
<Input onCancel={() => handleCancel()}
style={{marginTop: 20}} width={isMobile() ? '100%' : 600}
label="用户名" >
name="username" <Spin spinning={loading}>
addonBefore={'用户名'} <Input
placeholder={'请输入用户名'} style={{ marginTop: 20 }}
onChange={value => handleInputChange('username', value)} label="用户名"
value={username} name="username"
autoComplete="off" addonBefore={'用户名'}
/> placeholder={'请输入用户名'}
<Input onChange={value => handleInputChange('username', value)}
style={{marginTop: 20}} value={username}
addonBefore={'显示名'} autoComplete="off"
label="显示名称" />
name="display_name" <Input
autoComplete="off" style={{ marginTop: 20 }}
placeholder={'请输入显示名称'} addonBefore={'显示名'}
onChange={value => handleInputChange('display_name', value)} label="显示名称"
value={display_name} name="display_name"
/> autoComplete="off"
<Input placeholder={'请输入显示名称'}
style={{marginTop: 20}} onChange={value => handleInputChange('display_name', value)}
label="密 码" value={display_name}
name="password" />
type={'password'} <Input
addonBefore={'密码'} style={{ marginTop: 20 }}
placeholder={'请输入密码'} label="密 码"
onChange={value => handleInputChange('password', value)} name="password"
value={password} type={'password'}
autoComplete="off" addonBefore={'密码'}
/> placeholder={'请输入密码'}
</Spin> onChange={value => handleInputChange('password', value)}
</SideSheet> value={password}
</> autoComplete="off"
); />
</Spin>
</SideSheet>
</>
);
}; };
export default AddUser; export default AddUser;
web/src/pages/User/EditUser.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; import { 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 { renderQuotaWithPrompt } from '../../helpers/render';
import Title from "@douyinfe/semi-ui/lib/es/typography/title"; import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import { SideSheet, Space, Button, Spin, Input, Typography, Select, Divider } from "@douyinfe/semi-ui"; import { Button, Divider, Input, Select, SideSheet, Space, Spin, Typography } from '@douyinfe/semi-ui';
const EditUser = (props) => { const EditUser = (props) => {
const userId = props.editingUser.id; const userId = props.editingUser.id;
...@@ -29,7 +29,7 @@ const EditUser = (props) => { ...@@ -29,7 +29,7 @@ const EditUser = (props) => {
let res = await API.get(`/api/group/`); let res = await API.get(`/api/group/`);
setGroupOptions(res.data.data.map((group) => ({ setGroupOptions(res.data.data.map((group) => ({
label: group, label: group,
value: group, value: group
}))); })));
} catch (error) { } catch (error) {
showError(error.message); showError(error.message);
...@@ -38,7 +38,7 @@ const EditUser = (props) => { ...@@ -38,7 +38,7 @@ const EditUser = (props) => {
const navigate = useNavigate(); const navigate = useNavigate();
const handleCancel = () => { const handleCancel = () => {
props.handleClose(); props.handleClose();
} };
const loadUser = async () => { const loadUser = async () => {
setLoading(true); setLoading(true);
let res = undefined; let res = undefined;
...@@ -98,8 +98,8 @@ const EditUser = (props) => { ...@@ -98,8 +98,8 @@ const EditUser = (props) => {
footer={ footer={
<div style={{ display: 'flex', justifyContent: 'flex-end' }}> <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Space> <Space>
<Button theme='solid' size={'large'} onClick={submit}>提交</Button> <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
<Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button> <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
</Space> </Space>
</div> </div>
} }
...@@ -112,35 +112,35 @@ const EditUser = (props) => { ...@@ -112,35 +112,35 @@ const EditUser = (props) => {
<Typography.Text>用户名</Typography.Text> <Typography.Text>用户名</Typography.Text>
</div> </div>
<Input <Input
label='用户名' label="用户名"
name='username' name="username"
placeholder={'请输入新的用户名'} placeholder={'请输入新的用户名'}
onChange={value => handleInputChange('username', value)} onChange={value => handleInputChange('username', value)}
value={username} value={username}
autoComplete='new-password' autoComplete="new-password"
/> />
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Typography.Text>密码</Typography.Text> <Typography.Text>密码</Typography.Text>
</div> </div>
<Input <Input
label='密码' label="密码"
name='password' name="password"
type={'password'} type={'password'}
placeholder={'请输入新的密码，最短 8 位'} placeholder={'请输入新的密码，最短 8 位'}
onChange={value => handleInputChange('password', value)} onChange={value => handleInputChange('password', value)}
value={password} value={password}
autoComplete='new-password' autoComplete="new-password"
/> />
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Typography.Text>显示名称</Typography.Text> <Typography.Text>显示名称</Typography.Text>
</div> </div>
<Input <Input
label='显示名称' label="显示名称"
name='display_name' name="display_name"
placeholder={'请输入新的显示名称'} placeholder={'请输入新的显示名称'}
onChange={value => handleInputChange('display_name', value)} onChange={value => handleInputChange('display_name', value)}
value={display_name} value={display_name}
autoComplete='new-password' autoComplete="new-password"
/> />
{ {
userId && <> userId && <>
...@@ -149,7 +149,7 @@ const EditUser = (props) => { ...@@ -149,7 +149,7 @@ const EditUser = (props) => {
</div> </div>
<Select <Select
placeholder={'请选择分组'} placeholder={'请选择分组'}
name='group' name="group"
fluid fluid
search search
selection selection
...@@ -157,19 +157,19 @@ const EditUser = (props) => { ...@@ -157,19 +157,19 @@ const EditUser = (props) => {
additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'} additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
onChange={value => handleInputChange('group', value)} onChange={value => handleInputChange('group', value)}
value={inputs.group} value={inputs.group}
autoComplete='new-password' autoComplete="new-password"
optionList={groupOptions} optionList={groupOptions}
/> />
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text> <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
</div> </div>
<Input <Input
name='quota' name="quota"
placeholder={'请输入新的剩余额度'} placeholder={'请输入新的剩余额度'}
onChange={value => handleInputChange('quota', value)} onChange={value => handleInputChange('quota', value)}
value={quota} value={quota}
type={'number'} type={'number'}
autoComplete='new-password' autoComplete="new-password"
/> />
</> </>
} }
...@@ -178,37 +178,37 @@ const EditUser = (props) => { ...@@ -178,37 +178,37 @@ const EditUser = (props) => {
<Typography.Text>已绑定的 GitHub 账户</Typography.Text> <Typography.Text>已绑定的 GitHub 账户</Typography.Text>
</div> </div>
<Input <Input
name='github_id' name="github_id"
value={github_id} value={github_id}
autoComplete='new-password' autoComplete="new-password"
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改' placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
readonly readonly
/> />
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Typography.Text>已绑定的微信账户</Typography.Text> <Typography.Text>已绑定的微信账户</Typography.Text>
</div> </div>
<Input <Input
name='wechat_id' name="wechat_id"
value={wechat_id} value={wechat_id}
autoComplete='new-password' autoComplete="new-password"
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改' placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
readonly readonly
/> />
<Input <Input
name='telegram_id' name="telegram_id"
value={telegram_id} value={telegram_id}
autoComplete='new-password' autoComplete="new-password"
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改' placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
readonly readonly
/> />
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Typography.Text>已绑定的邮箱账户</Typography.Text> <Typography.Text>已绑定的邮箱账户</Typography.Text>
</div> </div>
<Input <Input
name='email' name="email"
value={email} value={email}
autoComplete='new-password' autoComplete="new-password"
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改' placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
readonly readonly
/> />
</Spin> </Spin>
......
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