Merge remote-tracking branch 'origin/main'

# Conflicts: # controller/relay-text.go # go.mod # web/src/components/PersonalSetting.js # web/src/components/TokensTable.js # web/src/pages/Home/index.js
2025-11-12 00:53:41 +08:00 · 2023-08-25 00:51:02 +08:00
parent 3b0f1ae978 efeb9a16ce
commit c0f0201f5f
48 changed files with 2169 additions and 445 deletions
--- a/web/src/components/ChannelsTable.js
+++ b/web/src/components/ChannelsTable.js
@@ -376,9 +376,12 @@ const ChannelsTable = () => {
                  <Table.Cell>{renderQuota(channel.used_quota)}</Table.Cell>
                  <Table.Cell>
                    <Popup
-                      content={channel.balance_updated_time ? renderTimestamp(channel.balance_updated_time) : '未更新'}
-                      key={channel.id}
-                      trigger={renderBalance(channel.type, channel.balance)}
+                      trigger={<span onClick={() => {
+                        updateChannelBalance(channel.id, channel.name, idx);
+                      }} style={{ cursor: 'pointer' }}>
+                      {renderBalance(channel.type, channel.balance)}
+                    </span>}
+                      content='点击更新'
                      basic
                    />
                  </Table.Cell>
@@ -393,16 +396,16 @@ const ChannelsTable = () => {
                      >
                        测试
                      </Button>
-                      <Button
-                        size={'small'}
-                        positive
-                        loading={updatingBalance}
-                        onClick={() => {
-                          updateChannelBalance(channel.id, channel.name, idx);
-                        }}
-                      >
-                        更新余额
-                      </Button>
+                      {/*<Button*/}
+                      {/*  size={'small'}*/}
+                      {/*  positive*/}
+                      {/*  loading={updatingBalance}*/}
+                      {/*  onClick={() => {*/}
+                      {/*    updateChannelBalance(channel.id, channel.name, idx);*/}
+                      {/*  }}*/}
+                      {/*>*/}
+                      {/*  更新余额*/}
+                      {/*</Button>*/}
                      <Popup
                        trigger={
                          <Button size='small' negative>
--- a/web/src/components/LogsTable.js
+++ b/web/src/components/LogsTable.js
@@ -43,6 +43,7 @@ function renderType(type) {

 const LogsTable = () => {
  const [logs, setLogs] = useState([]);
+  const [showStat, setShowStat] = useState(false);
  const [loading, setLoading] = useState(true);
  const [activePage, setActivePage] = useState(1);
  const [searchKeyword, setSearchKeyword] = useState('');
@@ -92,6 +93,17 @@ const LogsTable = () => {
    }
  };

+  const handleEyeClick = async () => {
+    if (!showStat) {
+      if (isAdminUser) {
+        await getLogStat();
+      } else {
+        await getLogSelfStat();
+      }
+    }
+    setShowStat(!showStat);
+  };
+
  const loadLogs = async (startIdx) => {
    let url = '';
    let localStartTimestamp = Date.parse(start_timestamp) / 1000;
@@ -129,13 +141,8 @@ const LogsTable = () => {

  const refresh = async () => {
    setLoading(true);
-    setActivePage(1)
+    setActivePage(1);
    await loadLogs(0);
-    if (isAdminUser) {
-      getLogStat().then();
-    } else {
-      getLogSelfStat().then();
-    }
  };

  useEffect(() => {
@@ -169,7 +176,7 @@ const LogsTable = () => {
    if (logs.length === 0) return;
    setLoading(true);
    let sortedLogs = [...logs];
-    if (typeof sortedLogs[0][key] === 'string'){
+    if (typeof sortedLogs[0][key] === 'string') {
      sortedLogs.sort((a, b) => {
        return ('' + a[key]).localeCompare(b[key]);
      });
@@ -190,7 +197,12 @@ const LogsTable = () => {
  return (
    <>
      <Segment>
-        <Header as='h3'>使用明细（总消耗额度：{renderQuota(stat.quota)}）</Header>
+        <Header as='h3'>
+          使用明细（总消耗额度：
+          {showStat && renderQuota(stat.quota)}
+          {!showStat && <span onClick={handleEyeClick} style={{ cursor: 'pointer', color: 'gray' }}>点击查看</span>}
+          ）
+        </Header>
        <Form>
          <Form.Group>
            {
--- a/web/src/components/OtherSetting.js
+++ b/web/src/components/OtherSetting.js
@@ -112,7 +112,7 @@ const OtherSetting = () => {
          <Form.Group widths='equal'>
            <Form.TextArea
              label='公告'
-              placeholder='在此输入新的公告内容'
+              placeholder='在此输入新的公告内容，支持 Markdown & HTML 代码'
              value={inputs.Notice}
              name='Notice'
              onChange={handleInputChange}
--- a/web/src/components/PersonalSetting.js
+++ b/web/src/components/PersonalSetting.js
@@ -1,13 +1,13 @@
-import React, {useContext, useEffect, useState} from 'react';
-import {Button, Checkbox, Divider, Form, Header, Image, Input, Message, Modal} from 'semantic-ui-react';
-import {Link, useNavigate} from 'react-router-dom';
-import {API, copy, showError, showInfo, showNotice, showSuccess} from '../helpers';
+import React, { useContext, useEffect, useState } from 'react';
+import { Button, Divider, Form, Header, Image, Message, Modal } from 'semantic-ui-react';
+import { Link, useNavigate } from 'react-router-dom';
+import { API, copy, showError, showInfo, showNotice, showSuccess } from '../helpers';
 import Turnstile from 'react-turnstile';
-import {UserContext} from '../context/User';
+import { UserContext } from '../context/User';

 const PersonalSetting = () => {
-    const [userState, userDispatch] = useContext(UserContext);
-    let navigate = useNavigate();
+  const [userState, userDispatch] = useContext(UserContext);
+  let navigate = useNavigate();

    const [inputs, setInputs] = useState({
        wechat_verification_code: '',
@@ -29,6 +29,8 @@ const PersonalSetting = () => {
    const [loading, setLoading] = useState(false);
    const [disableButton, setDisableButton] = useState(false);
    const [countdown, setCountdown] = useState(30);
+  const [affLink, setAffLink] = useState("");
+  const [systemToken, setSystemToken] = useState("");

    // setStableMode(userState.user.stableMode, userState.user.maxPrice);
    console.log(userState.user)
@@ -84,8 +86,9 @@ const PersonalSetting = () => {
        const res = await API.get('/api/user/token');
        const {success, message, data} = res.data;
        if (success) {
-            await copy(data);
-            showSuccess(`令牌已重置并已复制到剪贴板：${data}`);
+            setSystemToken(data);
+      setAffLink("");await copy(data);
+            showSuccess(`令牌已重置并已复制到剪贴板`);
        } else {
            showError(message);
        }
@@ -96,88 +99,99 @@ const PersonalSetting = () => {
        const {success, message, data} = res.data;
        if (success) {
            let link = `${window.location.origin}/register?aff=${data}`;
-            await copy(link);
-            showNotice(`邀请链接已复制到剪切板：${link}`);
+            setAffLink(link);
+      setSystemToken("");await copy(link);
+            showSuccess(`邀请链接已复制到剪切板`);
        } else {
            showError(message);
        }
    };

-    const deleteAccount = async () => {
+    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 () => {
        if (inputs.self_account_deletion_confirmation !== userState.user.username) {
            showError('请输入你的账户名以确认删除！');
            return;
        }

-        const res = await API.delete('/api/user/self');
-        const {success, message} = res.data;
+    const res = await API.delete('/api/user/self');
+    const { success, message } = res.data;

-        if (success) {
-            showSuccess('账户已删除！');
-            await API.get('/api/user/logout');
-            userDispatch({type: 'logout'});
-            localStorage.removeItem('user');
-            navigate('/login');
-        } else {
-            showError(message);
-        }
-    };
+    if (success) {
+      showSuccess('账户已删除！');
+      await API.get('/api/user/logout');
+      userDispatch({ type: 'logout' });
+      localStorage.removeItem('user');
+      navigate('/login');
+    } else {
+      showError(message);
+    }
+  };

-    const bindWeChat = async () => {
-        if (inputs.wechat_verification_code === '') return;
-        const res = await API.get(
-            `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`
-        );
-        const {success, message} = res.data;
-        if (success) {
-            showSuccess('微信账户绑定成功！');
-            setShowWeChatBindModal(false);
-        } else {
-            showError(message);
-        }
-    };
+  const bindWeChat = async () => {
+    if (inputs.wechat_verification_code === '') return;
+    const res = await API.get(
+      `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('微信账户绑定成功！');
+      setShowWeChatBindModal(false);
+    } else {
+      showError(message);
+    }
+  };

-    const openGitHubOAuth = () => {
-        window.open(
-            `https://github.com/login/oauth/authorize?client_id=${status.github_client_id}&scope=user:email`
-        );
-    };
+  const openGitHubOAuth = () => {
+    window.open(
+      `https://github.com/login/oauth/authorize?client_id=${status.github_client_id}&scope=user:email`
+    );
+  };

-    const sendVerificationCode = async () => {
-        setDisableButton(true);
-        if (inputs.email === '') return;
-        if (turnstileEnabled && turnstileToken === '') {
-            showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
-            return;
-        }
-        setLoading(true);
-        const res = await API.get(
-            `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
-        );
-        const {success, message} = res.data;
-        if (success) {
-            showSuccess('验证码发送成功，请检查邮箱！');
-        } else {
-            showError(message);
-        }
-        setLoading(false);
-    };
+  const sendVerificationCode = async () => {
+    setDisableButton(true);
+    if (inputs.email === '') return;
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('验证码发送成功，请检查邮箱！');
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };

-    const bindEmail = async () => {
-        if (inputs.email_verification_code === '') return;
-        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);
-        } else {
-            showError(message);
-        }
-        setLoading(false);
-    };
+  const bindEmail = async () => {
+    if (inputs.email_verification_code === '') return;
+    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);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };

    // const setStableMod = ;

@@ -255,7 +269,24 @@ const PersonalSetting = () => {
            {/*    }*/}
            {/*}></Checkbox>*/}
            {/*<Input label="最高接受价格（n元/刀）" type="integer"></Input>*/}
-            <Divider/>
+            {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/>
            <Header as='h3'>账号绑定</Header>
            {
                status.wechat_login && (
@@ -349,16 +380,26 @@ const PersonalSetting = () => {
                            ) : (
                                <></>
                            )}
-                            <Button
+                            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
+              <Button
                                color=''
                                fluid
                                size='large'
                                onClick={bindEmail}
                                loading={loading}
                            >
-                                绑定
+                                确认绑定
                            </Button>
-                        </Form>
+                        <div style={{ width: '1rem' }}></div>
+              <Button
+                fluid
+                size='large'
+                onClick={() => setShowEmailBindModal(false)}
+              >
+                取消
+              </Button>
+              </div>
+            </Form>
                    </Modal.Description>
                </Modal.Content>
            </Modal>
@@ -369,8 +410,9 @@ const PersonalSetting = () => {
                size={'tiny'}
                style={{maxWidth: '450px'}}
            >
-                <Modal.Header>确认删除自己的帐户</Modal.Header>
-                <Modal.Content>
+                <Modal.Header>危险操作</Modal.Header>
+        <Modal.Content>
+        <Message>您正在删除自己的帐户，将清空所有数据且不可恢复</Message>
                    <Modal.Description>
                        <Form size='large'>
                            <Form.Input
@@ -389,7 +431,7 @@ const PersonalSetting = () => {
                                />
                            ) : (
                                <></>
-                            )}
+                            )}<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
                            <Button
                                color='red'
                                fluid
@@ -397,8 +439,16 @@ const PersonalSetting = () => {
                                onClick={deleteAccount}
                                loading={loading}
                            >
-                                删除
-                            </Button>
+                                确认删除
+                            </Button><div style={{ width: '1rem' }}></div>
+                <Button
+                  fluid
+                  size='large'
+                  onClick={() => setShowAccountDeleteModal(false)}
+                >
+                  取消
+                </Button>
+              </div>
                        </Form>
                    </Modal.Description>
                </Modal.Content>
--- a/web/src/components/RedemptionsTable.js
+++ b/web/src/components/RedemptionsTable.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Label, Message, 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';

@@ -240,15 +240,25 @@ const RedemptionsTable = () => {
                      >
                        复制
                      </Button>
-                      <Button
-                        size={'small'}
-                        negative
-                        onClick={() => {
-                          manageRedemption(redemption.id, 'delete', idx);
-                        }}
+                      <Popup
+                        trigger={
+                          <Button size='small' negative>
+                            删除
+                          </Button>
+                        }
+                        on='click'
+                        flowing
+                        hoverable
                      >
-                        删除
-                      </Button>
+                        <Button
+                          negative
+                          onClick={() => {
+                            manageRedemption(redemption.id, 'delete', idx);
+                          }}
+                        >
+                          确认删除
+                        </Button>
+                      </Popup>
                      <Button
                        size={'small'}
                        disabled={redemption.status === 3}  // used
--- a/web/src/components/SystemSetting.js
+++ b/web/src/components/SystemSetting.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Divider, Form, Grid, Header, Message } from 'semantic-ui-react';
-import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers';
+import { Button, Divider, Form, Grid, Header, Modal, Message } from 'semantic-ui-react';
+import { API, removeTrailingSlash, showError } from '../helpers';

 const SystemSetting = () => {
  let [inputs, setInputs] = useState({
@@ -26,9 +26,14 @@ const SystemSetting = () => {
    TurnstileSiteKey: '',
    TurnstileSecretKey: '',
    RegisterEnabled: '',
+    EmailDomainRestrictionEnabled: '',
+    EmailDomainWhitelist: ''
  });
  const [originInputs, setOriginInputs] = useState({});
  let [loading, setLoading] = useState(false);
+  const [EmailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
+  const [restrictedDomainInput, setRestrictedDomainInput] = useState('');
+  const [showPasswordWarningModal, setShowPasswordWarningModal] = useState(false);

  const getOptions = async () => {
    const res = await API.get('/api/option/');
@@ -38,8 +43,15 @@ const SystemSetting = () => {
      data.forEach((item) => {
        newInputs[item.key] = item.value;
      });
-      setInputs(newInputs);
+      setInputs({
+        ...newInputs,
+        EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(',')
+      });
      setOriginInputs(newInputs);
+
+      setEmailDomainWhitelist(newInputs.EmailDomainWhitelist.split(',').map((item) => {
+        return { key: item, text: item, value: item };
+      }));
    } else {
      showError(message);
    }
@@ -58,6 +70,7 @@ const SystemSetting = () => {
      case 'GitHubOAuthEnabled':
      case 'WeChatAuthEnabled':
      case 'TurnstileCheckEnabled':
+      case 'EmailDomainRestrictionEnabled':
      case 'RegisterEnabled':
        value = inputs[key] === 'true' ? 'false' : 'true';
        break;
@@ -70,7 +83,12 @@ const SystemSetting = () => {
    });
    const { success, message } = res.data;
    if (success) {
-      setInputs((inputs) => ({ ...inputs, [key]: value }));
+      if (key === 'EmailDomainWhitelist') {
+        value = value.split(',');
+      }
+      setInputs((inputs) => ({
+        ...inputs, [key]: value
+      }));
    } else {
      showError(message);
    }
@@ -78,6 +96,11 @@ const SystemSetting = () => {
  };

  const handleInputChange = async (e, { name, value }) => {
+    if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') {
+      // block disabling password login
+      setShowPasswordWarningModal(true);
+      return;
+    }
    if (
      name === 'Notice' ||
      name.startsWith('SMTP') ||
@@ -88,7 +111,8 @@ const SystemSetting = () => {
      name === 'WeChatServerToken' ||
      name === 'WeChatAccountQRCodeImageURL' ||
      name === 'TurnstileSiteKey' ||
-      name === 'TurnstileSecretKey'
+      name === 'TurnstileSecretKey' ||
+      name === 'EmailDomainWhitelist'
    ) {
      setInputs((inputs) => ({ ...inputs, [name]: value }));
    } else {
@@ -125,6 +149,16 @@ const SystemSetting = () => {
    }
  };

+
+  const submitEmailDomainWhitelist = async () => {
+    if (
+      originInputs['EmailDomainWhitelist'] !== inputs.EmailDomainWhitelist.join(',') &&
+      inputs.SMTPToken !== ''
+    ) {
+      await updateOption('EmailDomainWhitelist', inputs.EmailDomainWhitelist.join(','));
+    }
+  };
+
  const submitWeChat = async () => {
    if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
      await updateOption(
@@ -173,6 +207,22 @@ const SystemSetting = () => {
    }
  };

+  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 (
    <Grid columns={1}>
      <Grid.Column>
@@ -199,6 +249,32 @@ const SystemSetting = () => {
              name='PasswordLoginEnabled'
              onChange={handleInputChange}
            />
+            {
+              showPasswordWarningModal &&
+              <Modal
+                open={showPasswordWarningModal}
+                onClose={() => setShowPasswordWarningModal(false)}
+                size={'tiny'}
+                style={{ maxWidth: '450px' }}
+              >
+                <Modal.Header>警告</Modal.Header>
+                <Modal.Content>
+                  <p>取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？</p>
+                </Modal.Content>
+                <Modal.Actions>
+                  <Button onClick={() => setShowPasswordWarningModal(false)}>取消</Button>
+                  <Button
+                    color='yellow'
+                    onClick={async () => {
+                      setShowPasswordWarningModal(false);
+                      await updateOption('PasswordLoginEnabled', 'false');
+                    }}
+                  >
+                    确定
+                  </Button>
+                </Modal.Actions>
+              </Modal>
+            }
            <Form.Checkbox
              checked={inputs.PasswordRegisterEnabled === 'true'}
              label='允许通过密码进行注册'
@@ -239,6 +315,54 @@ const SystemSetting = () => {
            />
          </Form.Group>
          <Divider />
+          <Header as='h3'>
+            配置邮箱域名白名单
+            <Header.Subheader>用以防止恶意用户利用临时邮箱批量注册</Header.Subheader>
+          </Header>
+          <Form.Group widths={3}>
+            <Form.Checkbox
+              label='启用邮箱域名白名单'
+              name='EmailDomainRestrictionEnabled'
+              onChange={handleInputChange}
+              checked={inputs.EmailDomainRestrictionEnabled === 'true'}
+            />
+          </Form.Group>
+          <Form.Group widths={2}>
+            <Form.Dropdown
+              label='允许的邮箱域名'
+              placeholder='允许的邮箱域名'
+              name='EmailDomainWhitelist'
+              required
+              fluid
+              multiple
+              selection
+              onChange={handleInputChange}
+              value={inputs.EmailDomainWhitelist}
+              autoComplete='new-password'
+              options={EmailDomainWhitelist}
+            />
+            <Form.Input
+              label='添加新的允许的邮箱域名'
+              action={
+                <Button type='button' onClick={() => {
+                  submitNewRestrictedDomain();
+                }}>填入</Button>
+              }
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  submitNewRestrictedDomain();
+                }
+              }}
+              autoComplete='new-password'
+              placeholder='输入新的允许的邮箱域名'
+              value={restrictedDomainInput}
+              onChange={(e, { value }) => {
+                setRestrictedDomainInput(value);
+              }}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitEmailDomainWhitelist}>保存邮箱域名白名单设置</Form.Button>
+          <Divider />
          <Header as='h3'>
            配置 SMTP
            <Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
@@ -284,7 +408,7 @@ const SystemSetting = () => {
              onChange={handleInputChange}
              type='password'
              autoComplete='new-password'
-              value={inputs.SMTPToken}
+              checked={inputs.RegisterEnabled === 'true'}
              placeholder='敏感信息不会发送到前端显示'
            />
          </Form.Group>
--- a/web/src/components/TokensTable.js
+++ b/web/src/components/TokensTable.js
@@ -1,11 +1,22 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Label, Modal, 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 { ITEMS_PER_PAGE } from '../constants';
 import { renderQuota } from '../helpers/render';

+const COPY_OPTIONS = [
+  { key: 'next', text: 'ChatGPT Next Web', value: 'next' },
+  { key: 'ama', text: 'AMA 问天', value: 'ama' },
+  { 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) {
  return (
    <>
@@ -68,6 +79,84 @@ const TokensTable = () => {
  const refresh = async () => {
    setLoading(true);
    await loadTokens(activePage - 1);
+  };
+
+  const onCopy = 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 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;
+    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;
+      case 'next':
+        url = nextUrl;
+        break;
+      default:
+        url = `sk-${key}`;
+    }
+    if (await copy(url)) {
+      showSuccess('已复制到剪贴板！');
+    } else {
+      showWarning('无法复制到剪贴板，请手动复制，已将令牌填入搜索框。');
+      setSearchKeyword(url);
+    }
+  };
+
+  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(() => {
@@ -235,6 +324,51 @@ const TokensTable = () => {
                  <Table.Cell>{token.expired_time === -1 ? '永不过期' : renderTimestamp(token.expired_time)}</Table.Cell>
                  <Table.Cell>
                    <div>
+                    <Button.Group color='green' size={'small'}>
+                        <Button
+                          size={'small'}
+                          positive
+                          onClick={async () => {
+                            await onCopy('', token.key);
+                          }}
+                        >
+                          复制
+                        </Button>
+                        <Dropdown
+                          className='button icon'
+                          floating
+                          options={COPY_OPTIONS.map(option => ({
+                            ...option,
+                            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={<></>}
+                          />
+                      </Button.Group>
+                      {' '}
                      <Popup
                        trigger={
                          <Button
--- a/web/src/components/UsersTable.js
+++ b/web/src/components/UsersTable.js
@@ -227,7 +227,7 @@ const UsersTable = () => {
                      content={user.email ? user.email : '未绑定邮箱地址'}
                      key={user.username}
                      header={user.display_name ? user.display_name : user.username}
-                      trigger={<span>{renderText(user.username, 10)}</span>}
+                      trigger={<span>{renderText(user.username, 15)}</span>}
                      hoverable
                    />
                  </Table.Cell>