Просмотр исходного кода

✨ feat(tokens-table): add selectable copy modes for bulk token copy action

This commit enhances the “Copy Selected Tokens to Clipboard” feature in `TokensTable.js` by introducing a user-friendly modal that lets users choose how they want to copy tokens.

Changes made
• Replaced direct copy logic with a `Modal.info` dialog.
• Modal displays the prompt “Please choose your copy mode”.
• Added two buttons in a custom footer:
  – **Name + Secret**: copies `tokenName    sk-tokenKey`.
  – **Secret Only**: copies `sk-tokenKey`.
• Each button triggers the copy operation and closes the dialog.
• Maintains existing validations (e.g., selection check, clipboard feedback).

Benefits
• Gives users clear control over copy format, reducing manual editing.
• Aligns UI with Semi UI’s best practices via custom modal footer.

No backend/API changes are involved; all updates are limited to the front-end UI logic.
t0ng7u 8 месяцев назад
Родитель
Сommit
d7c97d4d34
2 измененных файлов с 45 добавлено и 9 удалено
  1. 41 8
      web/src/components/table/TokensTable.js
  2. 4 1
      web/src/i18n/locales/en.json

+ 41 - 8
web/src/components/table/TokensTable.js

@@ -639,20 +639,53 @@ const TokensTable = () => {
             type="warning"
             type="warning"
             icon={<IconCopy />}
             icon={<IconCopy />}
             className="!rounded-full flex-1 md:flex-initial"
             className="!rounded-full flex-1 md:flex-initial"
-            onClick={async () => {
+            onClick={() => {
               if (selectedKeys.length === 0) {
               if (selectedKeys.length === 0) {
                 showError(t('请至少选择一个令牌!'));
                 showError(t('请至少选择一个令牌!'));
                 return;
                 return;
               }
               }
-              let keys = '';
-              for (let i = 0; i < selectedKeys.length; i++) {
-                keys +=
-                  selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
-              }
-              await copyText(keys);
+              Modal.info({
+                title: t('复制令牌'),
+                icon: null,
+                content: t('请选择你的复制方式'),
+                footer: (
+                  <Space>
+                    <Button
+                      type="primary"
+                      theme="solid"
+                      icon={<IconCopy />}
+                      onClick={async () => {
+                        let content = '';
+                        for (let i = 0; i < selectedKeys.length; i++) {
+                          content +=
+                            selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
+                        }
+                        await copyText(content);
+                        Modal.destroyAll();
+                      }}
+                    >
+                      {t('名称+密钥')}
+                    </Button>
+                    <Button
+                      theme="light"
+                      icon={<IconCopy />}
+                      onClick={async () => {
+                        let content = '';
+                        for (let i = 0; i < selectedKeys.length; i++) {
+                          content += 'sk-' + selectedKeys[i].key + '\n';
+                        }
+                        await copyText(content);
+                        Modal.destroyAll();
+                      }}
+                    >
+                      {t('仅密钥')}
+                    </Button>
+                  </Space>
+                ),
+              });
             }}
             }}
           >
           >
-            {t('复制所选令牌到剪贴板')}
+            {t('复制所选令牌')}
           </Button>
           </Button>
           <div className="w-full md:hidden"></div>
           <div className="w-full md:hidden"></div>
           <Button
           <Button

+ 4 - 1
web/src/i18n/locales/en.json

@@ -813,13 +813,16 @@
   "复制所选令牌": "Copy selected token",
   "复制所选令牌": "Copy selected token",
   "请至少选择一个令牌!": "Please select at least one token!",
   "请至少选择一个令牌!": "Please select at least one token!",
   "管理员未设置查询页链接": "The administrator has not set the query page link",
   "管理员未设置查询页链接": "The administrator has not set the query page link",
-  "复制所选令牌到剪贴板": "Copy selected token to clipboard",
   "批量删除令牌": "Batch delete token",
   "批量删除令牌": "Batch delete token",
   "确定要删除所选的 {{count}} 个令牌吗?": "Are you sure you want to delete the selected {{count}} tokens?",
   "确定要删除所选的 {{count}} 个令牌吗?": "Are you sure you want to delete the selected {{count}} tokens?",
   "删除所选令牌": "Delete selected token",
   "删除所选令牌": "Delete selected token",
   "请先选择要删除的令牌!": "Please select the token to be deleted!",
   "请先选择要删除的令牌!": "Please select the token to be deleted!",
   "已删除 {{count}} 个令牌!": "Deleted {{count}} tokens!",
   "已删除 {{count}} 个令牌!": "Deleted {{count}} tokens!",
   "删除失败": "Delete failed",
   "删除失败": "Delete failed",
+  "复制令牌": "Copy token",
+  "请选择你的复制方式": "Please select your copy method",
+  "名称+密钥": "Name + key",
+  "仅密钥": "Only key",
   "查看API地址": "View API address",
   "查看API地址": "View API address",
   "打开查询页": "Open query page",
   "打开查询页": "Open query page",
   "时间(仅显示近3天)": "Time (only displays the last 3 days)",
   "时间(仅显示近3天)": "Time (only displays the last 3 days)",