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

chore: update default theme style

Browse Source
This commit is contained in:
JustSong
2025-01-31 23:53:00 +08:00
parent 76c3f87351
commit 0f205a3aa3
5 changed files with 230 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/default/src/components/ChannelsTable.js
View File

@@ -435,7 +435,7 @@ const ChannelsTable = () => {
点击下方详情按钮可以显示余额以及设置额外的测试模型。
</Message>
)}
<Table basic compact size='small'>
<Table basic={'very'} compact size='small'>
<Table.Header>
<Table.Row>
<Table.HeaderCell

2
web/default/src/components/LogsTable.js
View File

@@ -388,7 +388,7 @@ const LogsTable = () => {
</>
)}
</Form>
<Table basic compact size='small'>
<Table basic={'very'} compact size='small'>
<Table.Header>
<Table.Row>
<Table.HeaderCell

85
web/default/src/components/RedemptionsTable.js
View File

@@ -1,29 +1,59 @@
import React, { useEffect, useState } from 'react';
import { Button, Form, Label, Popup, Pagination, Table } from 'semantic-ui-react';
import {
Button,
Form,
Label,
Popup,
Pagination,
Table,
} from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import { API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string } from '../helpers';
import {
API,
copy,
showError,
showInfo,
showSuccess,
showWarning,
timestamp2string,
} from '../helpers';
import { ITEMS_PER_PAGE } from '../constants';
import { renderQuota } from '../helpers/render';
function renderTimestamp(timestamp) {
return (
<>
{timestamp2string(timestamp)}
</>
);
return <>{timestamp2string(timestamp)}</>;
}
function renderStatus(status) {
switch (status) {
case 1:
return <Label basic color='green'>未使用</Label>;
return (
<Label basic color='green'>
未使用
</Label>
);
case 2:
return <Label basic color='red'> 已禁用 </Label>;
return (
<Label basic color='red'>
{' '}
已禁用{' '}
</Label>
);
case 3:
return <Label basic color='grey'> 已使用 </Label>;
return (
<Label basic color='grey'>
{' '}
已使用{' '}
</Label>
);
default:
return <Label basic color='black'> 未知状态 </Label>;
return (
<Label basic color='black'>
{' '}
未知状态{' '}
</Label>
);
}
}
@@ -110,7 +140,9 @@ const RedemptionsTable = () => {
return;
}
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;
if (success) {
setRedemptions(data);
@@ -159,7 +191,7 @@ const RedemptionsTable = () => {
/>
</Form>
<Table basic compact size='small'>
<Table basic={'very'} compact size='small'>
<Table.Header>
<Table.Row>
<Table.HeaderCell
@@ -225,11 +257,19 @@ const RedemptionsTable = () => {
return (
<Table.Row key={redemption.id}>
<Table.Cell>{redemption.id}</Table.Cell>
<Table.Cell>{redemption.name ? redemption.name : '无'}</Table.Cell>
<Table.Cell>
{redemption.name ? redemption.name : '无'}
</Table.Cell>
<Table.Cell>{renderStatus(redemption.status)}</Table.Cell>
<Table.Cell>{renderQuota(redemption.quota)}</Table.Cell>
<Table.Cell>{renderTimestamp(redemption.created_time)}</Table.Cell>
<Table.Cell>{redemption.redeemed_time ? renderTimestamp(redemption.redeemed_time) : "尚未兑换"} </Table.Cell>
<Table.Cell>
{renderTimestamp(redemption.created_time)}
</Table.Cell>
<Table.Cell>
{redemption.redeemed_time
? renderTimestamp(redemption.redeemed_time)
: '尚未兑换'}{' '}
</Table.Cell>
<Table.Cell>
<div>
<Button
@@ -239,7 +279,9 @@ const RedemptionsTable = () => {
if (await copy(redemption.key)) {
showSuccess('已复制到剪贴板！');
} else {
showWarning('无法复制到剪贴板，请手动复制，已将兑换码填入搜索框。')
showWarning(
'无法复制到剪贴板，请手动复制，已将兑换码填入搜索框。'
);
setSearchKeyword(redemption.key);
}
}}
@@ -267,7 +309,7 @@ const RedemptionsTable = () => {
</Popup>
<Button
size={'small'}
disabled={redemption.status === 3} // used
disabled={redemption.status === 3} // used
onClick={() => {
manageRedemption(
redemption.id,
@@ -295,7 +337,12 @@ const RedemptionsTable = () => {
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan='8'>
<Button size='small' as={Link} to='/redemption/add' loading={loading}>
<Button
size='small'
as={Link}
to='/redemption/add'
loading={loading}
>
添加新的兑换码
</Button>
<Pagination

164
web/default/src/components/TokensTable.js
View File

@@ -1,7 +1,22 @@
import React, { useEffect, useState } from 'react';
import { Button, Dropdown, Form, Label, Pagination, Popup, Table } from 'semantic-ui-react';
import {
Button,
Dropdown,
Form,
Label,
Pagination,
Popup,
Table,
} from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import { API, copy, showError, showSuccess, showWarning, timestamp2string } from '../helpers';
import {
API,
copy,
showError,
showSuccess,
showWarning,
timestamp2string,
} from '../helpers';
import { ITEMS_PER_PAGE } from '../constants';
import { renderQuota } from '../helpers/render';
@@ -21,25 +36,45 @@ const OPEN_LINK_OPTIONS = [
];
function renderTimestamp(timestamp) {
return (
<>
{timestamp2string(timestamp)}
</>
);
return <>{timestamp2string(timestamp)}</>;
}
function renderStatus(status) {
switch (status) {
case 1:
return <Label basic color='green'>已启用</Label>;
return (
<Label basic color='green'>
已启用
</Label>
);
case 2:
return <Label basic color='red'> 已禁用 </Label>;
return (
<Label basic color='red'>
{' '}
已禁用{' '}
</Label>
);
case 3:
return <Label basic color='yellow'> 已过期 </Label>;
return (
<Label basic color='yellow'>
{' '}
已过期{' '}
</Label>
);
case 4:
return <Label basic color='grey'> 已耗尽 </Label>;
return (
<Label basic color='grey'>
{' '}
已耗尽{' '}
</Label>
);
default:
return <Label basic color='black'> 未知状态 </Label>;
return (
<Label basic color='black'>
{' '}
未知状态{' '}
</Label>
);
}
}
@@ -98,9 +133,10 @@ const TokensTable = () => {
let encodedServerAddress = encodeURIComponent(serverAddress);
const nextLink = localStorage.getItem('chat_link');
let nextUrl;
if (nextLink) {
nextUrl = nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
nextUrl =
nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
} else {
nextUrl = `https://app.nextchat.dev/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
}
@@ -117,7 +153,9 @@ const TokensTable = () => {
url = nextUrl;
break;
case 'lobechat':
url = nextLink + `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
url =
nextLink +
`/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
break;
default:
url = `sk-${key}`;
@@ -135,7 +173,7 @@ const TokensTable = () => {
let serverAddress = '';
if (status) {
status = JSON.parse(status);
serverAddress = status.server_address;
serverAddress = status.server_address;
}
if (serverAddress === '') {
serverAddress = window.location.origin;
@@ -143,9 +181,10 @@ const TokensTable = () => {
let encodedServerAddress = encodeURIComponent(serverAddress);
const chatLink = localStorage.getItem('chat_link');
let defaultUrl;
if (chatLink) {
defaultUrl = chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
defaultUrl =
chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
} else {
defaultUrl = `https://app.nextchat.dev/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
}
@@ -154,21 +193,23 @@ const TokensTable = () => {
case 'ama':
url = `ama://set-api-key?server=${encodedServerAddress}&key=sk-${key}`;
break;
case 'opencat':
url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
break;
case 'lobechat':
url = chatLink + `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
url =
chatLink +
`/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
break;
default:
url = defaultUrl;
}
window.open(url, '_blank');
}
};
useEffect(() => {
loadTokens(0, orderBy)
@@ -274,7 +315,7 @@ const TokensTable = () => {
/>
</Form>
<Table basic compact size='small'>
<Table basic={'very'} compact size='small'>
<Table.Header>
<Table.Row>
<Table.HeaderCell
@@ -342,12 +383,20 @@ const TokensTable = () => {
<Table.Cell>{token.name ? token.name : '无'}</Table.Cell>
<Table.Cell>{renderStatus(token.status)}</Table.Cell>
<Table.Cell>{renderQuota(token.used_quota)}</Table.Cell>
<Table.Cell>{token.unlimited_quota ? '无限制' : renderQuota(token.remain_quota, 2)}</Table.Cell>
<Table.Cell>
{token.unlimited_quota
? '无限制'
: renderQuota(token.remain_quota, 2)}
</Table.Cell>
<Table.Cell>{renderTimestamp(token.created_time)}</Table.Cell>
<Table.Cell>{token.expired_time === -1 ? '永不过期' : renderTimestamp(token.expired_time)}</Table.Cell>
<Table.Cell>
{token.expired_time === -1
? '永不过期'
: renderTimestamp(token.expired_time)}
</Table.Cell>
<Table.Cell>
<div>
<Button.Group color='green' size={'small'}>
<Button.Group color='green' size={'small'}>
<Button
size={'small'}
positive
@@ -360,38 +409,37 @@ const TokensTable = () => {
<Dropdown
className='button icon'
floating
options={COPY_OPTIONS.map(option => ({
options={COPY_OPTIONS.map((option) => ({
...option,
onClick: async () => {
await onCopy(option.value, token.key);
}
},
}))}
trigger={<></>}
/>
</Button.Group>
{' '}
</Button.Group>{' '}
<Button.Group color='blue' size={'small'}>
<Button
size={'small'}
positive
onClick={() => {
onOpenLink('', token.key);
}}>
聊天
</Button>
<Dropdown
className="button icon"
floating
options={OPEN_LINK_OPTIONS.map(option => ({
...option,
onClick: async () => {
await onOpenLink(option.value, token.key);
}
}))}
trigger={<></>}
/>
</Button.Group>
{' '}
size={'small'}
positive
onClick={() => {
onOpenLink('', token.key);
}}
>
聊天
</Button>
<Dropdown
className='button icon'
floating
options={OPEN_LINK_OPTIONS.map((option) => ({
...option,
onClick: async () => {
await onOpenLink(option.value, token.key);
},
}))}
trigger={<></>}
/>
</Button.Group>{' '}
<Popup
trigger={
<Button size='small' negative>
@@ -443,14 +491,24 @@ const TokensTable = () => {
<Button size='small' as={Link} to='/token/add' loading={loading}>
添加新的令牌
</Button>
<Button size='small' onClick={refresh} loading={loading}>刷新</Button>
<Button size='small' onClick={refresh} loading={loading}>
刷新
</Button>
<Dropdown
placeholder='排序方式'
selection
options={[
{ key: '', text: '默认排序', value: '' },
{ key: 'remain_quota', text: '按剩余额度排序', value: 'remain_quota' },
{ key: 'used_quota', text: '按已用额度排序', value: 'used_quota' },
{
key: 'remain_quota',
text: '按剩余额度排序',
value: 'remain_quota',
},
{
key: 'used_quota',
text: '按已用额度排序',
value: 'used_quota',
},
]}
value={orderBy}
onChange={handleOrderByChange}

62
web/default/src/components/UsersTable.js
View File

@@ -1,10 +1,23 @@
import React, { useEffect, useState } from 'react';
import { Button, Form, Label, Pagination, Popup, Table, Dropdown } from 'semantic-ui-react';
import {
Button,
Form,
Label,
Pagination,
Popup,
Table,
Dropdown,
} from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import { API, showError, showSuccess } from '../helpers';
import { ITEMS_PER_PAGE } from '../constants';
import { renderGroup, renderNumber, renderQuota, renderText } from '../helpers/render';
import {
renderGroup,
renderNumber,
renderQuota,
renderText,
} from '../helpers/render';
function renderRole(role) {
switch (role) {
@@ -66,7 +79,7 @@ const UsersTable = () => {
(async () => {
const res = await API.post('/api/user/manage', {
username,
action
action,
});
const { success, message } = res.data;
if (success) {
@@ -169,7 +182,7 @@ const UsersTable = () => {
/>
</Form>
<Table basic compact size='small'>
<Table basic={'very'} compact size='small'>
<Table.Header>
<Table.Row>
<Table.HeaderCell
@@ -239,7 +252,9 @@ const UsersTable = () => {
<Popup
content={user.email ? user.email : '未绑定邮箱地址'}
key={user.username}
header={user.display_name ? user.display_name : user.username}
header={
user.display_name ? user.display_name : user.username
}
trigger={<span>{renderText(user.username, 15)}</span>}
hoverable
/>
@@ -249,9 +264,22 @@ const UsersTable = () => {
{/* {user.email ? <Popup hoverable content={user.email} trigger={<span>{renderText(user.email, 24)}</span>} /> : '无'}*/}
{/*</Table.Cell>*/}
<Table.Cell>
<Popup content='剩余额度' trigger={<Label basic>{renderQuota(user.quota)}</Label>} />
<Popup content='已用额度' trigger={<Label basic>{renderQuota(user.used_quota)}</Label>} />
<Popup content='请求次数' trigger={<Label basic>{renderNumber(user.request_count)}</Label>} />
<Popup
content='剩余额度'
trigger={<Label basic>{renderQuota(user.quota)}</Label>}
/>
<Popup
content='已用额度'
trigger={
<Label basic>{renderQuota(user.used_quota)}</Label>
}
/>
<Popup
content='请求次数'
trigger={
<Label basic>{renderNumber(user.request_count)}</Label>
}
/>
</Table.Cell>
<Table.Cell>{renderRole(user.role)}</Table.Cell>
<Table.Cell>{renderStatus(user.status)}</Table.Cell>
@@ -279,7 +307,11 @@ const UsersTable = () => {
</Button>
<Popup
trigger={
<Button size='small' negative disabled={user.role === 100}>
<Button
size='small'
negative
disabled={user.role === 100}
>
删除
</Button>
}
@@ -335,8 +367,16 @@ const UsersTable = () => {
options={[
{ key: '', text: '默认排序', value: '' },
{ key: 'quota', text: '按剩余额度排序', value: 'quota' },
{ key: 'used_quota', text: '按已用额度排序', value: 'used_quota' },
{ key: 'request_count', text: '按请求次数排序', value: 'request_count' },
{
key: 'used_quota',
text: '按已用额度排序',
value: 'used_quota',
},
{
key: 'request_count',
text: '按请求次数排序',
value: 'request_count',
},
]}
value={orderBy}
onChange={handleOrderByChange}