Skip to content

phsl / new-api

Go to a project
Commit 4e11fcd7 by Yolo° Committed by GitHub
Options

feat: add chat button for each token (#363) 

* fork

* fork

* chore: update style

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>
parent 618e3b4c
Showing with 164 additions and 20 deletions
i18n/en.json
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
"%d 点额度": "%d point quota", "%d 点额度": "%d point quota",
"尚未实现": "Not yet implemented", "尚未实现": "Not yet implemented",
"余额不足": "Insufficient balance", "余额不足": "Insufficient balance",
"危险操作": "Hazardous operations",
"输入你的账户名": "Enter your account name",
"确认删除": "Confirm Delete",
"确认绑定": "Confirm Binding",
"您正在删除自己的帐户，将清空所有数据且不可恢复": "You are deleting your account, all data will be cleared and unrecoverable.",
"\"通道「%s」（#%d）已被禁用\"": "\"Channel %s (#%d) has been disabled\"", "\"通道「%s」（#%d）已被禁用\"": "\"Channel %s (#%d) has been disabled\"",
"通道「%s」（#%d）已被禁用，原因：%s": "Channel %s (#%d) has been disabled, reason: %s", "通道「%s」（#%d）已被禁用，原因：%s": "Channel %s (#%d) has been disabled, reason: %s",
"测试已在运行中": "Test is already running", "测试已在运行中": "Test is already running",
...@@ -427,7 +432,7 @@ ...@@ -427,7 +432,7 @@
"一分钟后过期": "Expires after one minute", "一分钟后过期": "Expires after one minute",
"创建新的令牌": "Create New Token", "创建新的令牌": "Create New Token",
"注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。": "Note that the quota of the token is only used to limit the maximum quota usage of the token itself, and the actual usage is limited by the remaining quota of the account.", "注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。": "Note that the quota of the token is only used to limit the maximum quota usage of the token itself, and the actual usage is limited by the remaining quota of the account.",
"设置为无限额度": "Set to unlimited quota", "设为无限额度": "Set to unlimited quota",
"更新令牌信息": "Update Token Information", "更新令牌信息": "Update Token Information",
"请输入充值码！": "Please enter the recharge code!", "请输入充值码！": "Please enter the recharge code!",
"请输入名称": "Please enter a name", "请输入名称": "Please enter a name",
...@@ -493,6 +498,7 @@ ...@@ -493,6 +498,7 @@
"参数替换为你的部署名称（模型名称中的点会被剔除）": "Replace the parameter with your deployment name (dots in the model name will be removed)", "参数替换为你的部署名称（模型名称中的点会被剔除）": "Replace the parameter with your deployment name (dots in the model name will be removed)",
"模型映射必须是合法的 JSON 格式！": "Model mapping must be in valid JSON format!", "模型映射必须是合法的 JSON 格式！": "Model mapping must be in valid JSON format!",
"取消无限额度": "Cancel unlimited quota", "取消无限额度": "Cancel unlimited quota",
"取消": "Cancel",
"请输入新的剩余额度": "Please enter the new remaining quota", "请输入新的剩余额度": "Please enter the new remaining quota",
"请输入单个兑换码中包含的额度": "Please enter the quota included in a single redemption code", "请输入单个兑换码中包含的额度": "Please enter the quota included in a single redemption code",
"请输入用户名": "Please enter username", "请输入用户名": "Please enter username",
......
web/src/components/PersonalSetting.js
...@@ -25,6 +25,8 @@ const PersonalSetting = () => { ...@@ -25,6 +25,8 @@ const PersonalSetting = () => {
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 [systemToken, setSystemToken] = useState("");
useEffect(() => { useEffect(() => {
let status = localStorage.getItem('status'); let status = localStorage.getItem('status');
...@@ -59,8 +61,10 @@ const PersonalSetting = () => { ...@@ -59,8 +61,10 @@ const PersonalSetting = () => {
const res = await API.get('/api/user/token'); const res = await API.get('/api/user/token');
const { success, message, data } = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
setSystemToken(data);
setAffLink("");
await copy(data); await copy(data);
showSuccess(`令牌已重置并已复制到剪贴板：${data}`); showSuccess(`令牌已重置并已复制到剪贴板`);
} else { } else {
showError(message); showError(message);
} }
...@@ -71,13 +75,27 @@ const PersonalSetting = () => { ...@@ -71,13 +75,27 @@ const PersonalSetting = () => {
const { success, message, data } = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
let link = `${window.location.origin}/register?aff=${data}`; let link = `${window.location.origin}/register?aff=${data}`;
setAffLink(link);
setSystemToken("");
await copy(link); await copy(link);
showNotice(`邀请链接已复制到剪切板：${link}`); showSuccess(`邀请链接已复制到剪切板`);
} else { } else {
showError(message); showError(message);
} }
}; };
const handleAffLinkClick = async (e) => {
e.target.select();
await copy(e.target.value);
showSuccess(`邀请链接已复制到剪切板`);
};
const handleSystemTokenClick = async (e) => {
e.target.select();
await copy(e.target.value);
showSuccess(`系统令牌已复制到剪切板`);
};
const deleteAccount = async () => { const deleteAccount = async () => {
if (inputs.self_account_deletion_confirmation !== userState.user.username) { if (inputs.self_account_deletion_confirmation !== userState.user.username) {
showError('请输入你的账户名以确认删除！'); showError('请输入你的账户名以确认删除！');
...@@ -168,6 +186,25 @@ const PersonalSetting = () => { ...@@ -168,6 +186,25 @@ const PersonalSetting = () => {
<Button onClick={() => { <Button onClick={() => {
setShowAccountDeleteModal(true); setShowAccountDeleteModal(true);
}}>删除个人账户</Button> }}>删除个人账户</Button>
{systemToken && (
<Form.Input
fluid
readOnly
value={systemToken}
onClick={handleSystemTokenClick}
style={{ marginTop: '10px' }}
/>
)}
{affLink && (
<Form.Input
fluid
readOnly
value={affLink}
onClick={handleAffLinkClick}
style={{ marginTop: '10px' }}
/>
)}
<Divider /> <Divider />
<Header as='h3'>账号绑定</Header> <Header as='h3'>账号绑定</Header>
{ {
...@@ -262,6 +299,7 @@ const PersonalSetting = () => { ...@@ -262,6 +299,7 @@ const PersonalSetting = () => {
) : ( ) : (
<></> <></>
)} )}
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
<Button <Button
color='' color=''
fluid fluid
...@@ -269,8 +307,17 @@ const PersonalSetting = () => { ...@@ -269,8 +307,17 @@ const PersonalSetting = () => {
onClick={bindEmail} onClick={bindEmail}
loading={loading} loading={loading}
> >
绑定 确认绑定
</Button> </Button>
<div style={{ width: '1rem' }}></div>
<Button
fluid
size='large'
onClick={() => setShowEmailBindModal(false)}
>
取消
</Button>
</div>
</Form> </Form>
</Modal.Description> </Modal.Description>
</Modal.Content> </Modal.Content>
...@@ -282,8 +329,9 @@ const PersonalSetting = () => { ...@@ -282,8 +329,9 @@ const PersonalSetting = () => {
size={'tiny'} size={'tiny'}
style={{ maxWidth: '450px' }} style={{ maxWidth: '450px' }}
> >
<Modal.Header>确认删除自己的帐户</Modal.Header> <Modal.Header>危险操作</Modal.Header>
<Modal.Content> <Modal.Content>
<Message>您正在删除自己的帐户，将清空所有数据且不可恢复</Message>
<Modal.Description> <Modal.Description>
<Form size='large'> <Form size='large'>
<Form.Input <Form.Input
...@@ -303,6 +351,7 @@ const PersonalSetting = () => { ...@@ -303,6 +351,7 @@ const PersonalSetting = () => {
) : ( ) : (
<></> <></>
)} )}
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
<Button <Button
color='red' color='red'
fluid fluid
...@@ -310,8 +359,17 @@ const PersonalSetting = () => { ...@@ -310,8 +359,17 @@ const PersonalSetting = () => {
onClick={deleteAccount} onClick={deleteAccount}
loading={loading} loading={loading}
> >
删除 确认删除
</Button> </Button>
<div style={{ width: '1rem' }}></div>
<Button
fluid
size='large'
onClick={() => setShowAccountDeleteModal(false)}
>
取消
</Button>
</div>
</Form> </Form>
</Modal.Description> </Modal.Description>
</Modal.Content> </Modal.Content>
......
web/src/components/TokensTable.js
...@@ -12,6 +12,11 @@ const COPY_OPTIONS = [ ...@@ -12,6 +12,11 @@ const COPY_OPTIONS = [
{ key: 'opencat', text: 'OpenCat', value: 'opencat' }, { key: 'opencat', text: 'OpenCat', value: 'opencat' },
]; ];
const OPEN_LINK_OPTIONS = [
{ key: 'ama', text: 'AMA 问天', value: 'ama' },
{ key: 'opencat', text: 'OpenCat', value: 'opencat' },
];
function renderTimestamp(timestamp) { function renderTimestamp(timestamp) {
return ( return (
<> <>
...@@ -87,6 +92,15 @@ const TokensTable = () => { ...@@ -87,6 +92,15 @@ const TokensTable = () => {
serverAddress = window.location.origin; serverAddress = window.location.origin;
} }
let encodedServerAddress = encodeURIComponent(serverAddress); let encodedServerAddress = encodeURIComponent(serverAddress);
const nextLink = localStorage.getItem('chat_link');
let nextUrl;
if (nextLink) {
nextUrl = nextLink + `/#/?settings={"key":"sk-${key}"}`;
} else {
nextUrl = `https://chat.oneapi.pro/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
}
let url; let url;
switch (type) { switch (type) {
case 'ama': case 'ama':
...@@ -96,7 +110,7 @@ const TokensTable = () => { ...@@ -96,7 +110,7 @@ const TokensTable = () => {
url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`; url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
break; break;
case 'next': case 'next':
url = `https://chat.oneapi.pro/#/?settings=%7B%22key%22:%22sk-${key}%22,%22url%22:%22${serverAddress}%22%7D`; url = nextUrl;
break; break;
default: default:
url = `sk-${key}`; url = `sk-${key}`;
...@@ -109,6 +123,42 @@ const TokensTable = () => { ...@@ -109,6 +123,42 @@ const TokensTable = () => {
} }
}; };
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');
let defaultUrl;
if (chatLink) {
defaultUrl = chatLink + `/#/?settings={"key":"sk-${key}"}`;
} else {
defaultUrl = `https://chat.oneapi.pro/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
}
let url;
switch (type) {
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;
default:
url = defaultUrl;
}
window.open(url, '_blank');
}
useEffect(() => { useEffect(() => {
loadTokens(0) loadTokens(0)
.then() .then()
...@@ -280,18 +330,41 @@ const TokensTable = () => { ...@@ -280,18 +330,41 @@ const TokensTable = () => {
positive positive
onClick={async () => { onClick={async () => {
await onCopy('', token.key); await onCopy('', token.key);
} }}
}
> >
复制 复制
</Button> </Button>
<Dropdown <Dropdown
className='button icon' className='button icon'
floating floating
options={COPY_OPTIONS} options={COPY_OPTIONS.map(option => ({
onChange={async (e, { value } = {}) => { ...option,
await onCopy(value, token.key); onClick: async () => {
}} await onCopy(option.value, token.key);
}
}))}
trigger={<></>}
/>
</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={<></>} trigger={<></>}
/> />
</Button.Group> </Button.Group>
......
web/src/pages/Token/EditToken.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Form, Header, Message, Segment } from 'semantic-ui-react'; import { Button, Form, Header, Message, Segment } from 'semantic-ui-react';
import { useParams } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';
import { API, showError, showSuccess, timestamp2string } from '../../helpers'; import { API, showError, showSuccess, timestamp2string } from '../../helpers';
import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render'; import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
...@@ -17,11 +17,13 @@ const EditToken = () => { ...@@ -17,11 +17,13 @@ const EditToken = () => {
}; };
const [inputs, setInputs] = useState(originInputs); const [inputs, setInputs] = useState(originInputs);
const { name, remain_quota, expired_time, unlimited_quota } = inputs; const { name, remain_quota, expired_time, unlimited_quota } = inputs;
const navigate = useNavigate();
const handleInputChange = (e, { name, value }) => { const handleInputChange = (e, { name, value }) => {
setInputs((inputs) => ({ ...inputs, [name]: value })); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
const handleCancel = () => {
navigate("/token");
}
const setExpiredTime = (month, day, hour, minute) => { const setExpiredTime = (month, day, hour, minute) => {
let now = new Date(); let now = new Date();
let timestamp = now.getTime() / 1000; let timestamp = now.getTime() / 1000;
...@@ -150,8 +152,9 @@ const EditToken = () => { ...@@ -150,8 +152,9 @@ const EditToken = () => {
</Form.Field> </Form.Field>
<Button type={'button'} onClick={() => { <Button type={'button'} onClick={() => {
setUnlimitedQuota(); setUnlimitedQuota();
}}>{unlimited_quota ? '取消无限额度' : '设置为无限额度'}</Button> }}>{unlimited_quota ? '取消无限额度' : '设为无限额度'}</Button>
<Button positive onClick={submit}>提交</Button> <Button floated='right' positive onClick={submit}>提交</Button>
<Button floated='right' onClick={handleCancel}>取消</Button>
</Form> </Form>
</Segment> </Segment>
</> </>
......
web/src/pages/User/EditUser.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Form, Header, Segment } from 'semantic-ui-react'; import { Button, Form, Header, Segment } from 'semantic-ui-react';
import { useParams } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';
import { API, showError, showSuccess } from '../../helpers'; import { API, showError, showSuccess } from '../../helpers';
import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render'; import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
...@@ -36,7 +36,10 @@ const EditUser = () => { ...@@ -36,7 +36,10 @@ const EditUser = () => {
showError(error.message); showError(error.message);
} }
}; };
const navigate = useNavigate();
const handleCancel = () => {
navigate("/setting");
}
const loadUser = async () => { const loadUser = async () => {
let res = undefined; let res = undefined;
if (userId) { if (userId) {
...@@ -176,6 +179,7 @@ const EditUser = () => { ...@@ -176,6 +179,7 @@ const EditUser = () => {
readOnly readOnly
/> />
</Form.Field> </Form.Field>
<Button onClick={handleCancel}>取消</Button>
<Button positive onClick={submit}>提交</Button> <Button positive onClick={submit}>提交</Button>
</Form> </Form>
</Segment> </Segment>
......
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