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.
This commit is contained in:
t0ng7u
2025-06-22 16:49:44 +08:00
parent dce794dbf7
commit d7c97d4d34
2 changed files with 45 additions and 9 deletions

View File

@@ -639,20 +639,53 @@ const TokensTable = () => {
type="warning"
icon={<IconCopy />}
className="!rounded-full flex-1 md:flex-initial"
onClick={async () => {
onClick={() => {
if (selectedKeys.length === 0) {
showError(t('请至少选择一个令牌!'));
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>
<div className="w-full md:hidden"></div>
<Button

View File

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