From ac0df2d399a20b95b9bb4212647ff25b1a2e1434 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Mon, 1 Jun 2026 18:37:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BB=9F=E4=B8=80=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E5=89=AA=E8=B4=B4=E6=9D=BF=E5=A4=8D=E5=88=B6=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                     |  6 +++++
 frontend/src/components/ApiDocs.vue         | 22 ++----------------
 frontend/src/components/ApiTokenManager.vue | 24 +++-----------------
 frontend/src/components/HistoryPanel.vue    | 25 +--------------------
 frontend/src/composables/clipboard.ts       | 23 +++++++++++++++++++
 5 files changed, 35 insertions(+), 65 deletions(-)
 create mode 100644 frontend/src/composables/clipboard.ts

diff --git a/docs/project_context.md b/docs/project_context.md
index ee71461..fe98a8a 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -638,3 +638,9 @@
 - `app/utils/files.py` now provides `remove_file_safely()` for best-effort temporary file cleanup.
 - Database table export and history archive download routes now reuse this helper instead of carrying duplicate private `_remove_file()` functions.
 - Verification performed: `.venv\Scripts\python.exe -m compileall app`, `npm run build`, and `cargo check --manifest-path src-tauri\Cargo.toml` with a temporary sidecar placeholder all passed. Generated build output, Python caches, and temporary Tauri sidecar files were removed after verification.
+
+## 2026-06-01: Clipboard helper cleanup
+
+- `frontend/src/composables/clipboard.ts` centralizes browser clipboard writes with the existing hidden-textarea fallback.
+- API documentation, API Token management, and history detail log copying now reuse `writeClipboardText()` instead of each component carrying its own clipboard fallback.
+- Verification performed: `npm run build`, `.venv\Scripts\python.exe -m compileall app`, and `cargo check --manifest-path src-tauri\Cargo.toml` with a temporary sidecar placeholder all passed. Generated build output, Python caches, and temporary Tauri sidecar files were removed after verification.
diff --git a/frontend/src/components/ApiDocs.vue b/frontend/src/components/ApiDocs.vue
index 6aa22de..a106599 100644
--- a/frontend/src/components/ApiDocs.vue
+++ b/frontend/src/components/ApiDocs.vue
@@ -26,6 +26,7 @@ import SwaggerUIBundle from 'swagger-ui-dist/swagger-ui-bundle.js';
 import 'swagger-ui-dist/swagger-ui.css';
 
 import { apiUrl, getApiBaseUrl, getToken } from '../api/client';
+import { writeClipboardText } from '../composables/clipboard';
 
 type SwaggerSystem = {
   getSystem?: () => {
@@ -92,28 +93,9 @@ function initSwagger() {
 }
 
 async function copyHeaderSample() {
-  await writeClipboard('Authorization: Bearer <token>\nX-API-Token: <token>');
+  await writeClipboardText('Authorization: Bearer <token>\nX-API-Token: <token>');
   message.success('传参示例已复制');
 }
-
-async function writeClipboard(text: string) {
-  if (navigator.clipboard?.writeText) {
-    await navigator.clipboard.writeText(text);
-    return;
-  }
-
-  const textarea = document.createElement('textarea');
-  textarea.value = text;
-  textarea.style.position = 'fixed';
-  textarea.style.top = '-1000px';
-  document.body.appendChild(textarea);
-  textarea.select();
-  try {
-    document.execCommand('copy');
-  } finally {
-    document.body.removeChild(textarea);
-  }
-}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/ApiTokenManager.vue b/frontend/src/components/ApiTokenManager.vue
index f435662..89cc139 100644
--- a/frontend/src/components/ApiTokenManager.vue
+++ b/frontend/src/components/ApiTokenManager.vue
@@ -171,6 +171,7 @@ import { useDialog, useMessage, type DropdownOption } from 'naive-ui';
 import { AddOutline, ChevronDownOutline, CopyOutline, EyeOffOutline, EyeOutline, RefreshOutline } from '@vicons/ionicons5';
 
 import { apiGet, apiPost } from '../api/client';
+import { writeClipboardText } from '../composables/clipboard';
 import type { ApiMessage, ApiTokenListResponse, ApiTokenMutationResponse, ApiTokenRecord } from '../types';
 
 defineProps<{
@@ -365,12 +366,12 @@ async function copyToken(token: ApiTokenRecord) {
     message.warning('该 Token 是旧版本生成的，未保存完整值，请重生成后再复制');
     return;
   }
-  await writeClipboard(token.token);
+  await writeClipboardText(token.token);
   message.success('Token 已复制');
 }
 
 async function copyRawToken() {
-  await writeClipboard(rawToken.value);
+  await writeClipboardText(rawToken.value);
   message.success('Token 已复制');
 }
 
@@ -433,25 +434,6 @@ function tokenDisplayValue(token: ApiTokenRecord): string {
   return `${token.prefix}...${token.suffix}`;
 }
 
-async function writeClipboard(text: string) {
-  if (navigator.clipboard?.writeText) {
-    await navigator.clipboard.writeText(text);
-    return;
-  }
-
-  const textarea = document.createElement('textarea');
-  textarea.value = text;
-  textarea.style.position = 'fixed';
-  textarea.style.top = '-1000px';
-  document.body.appendChild(textarea);
-  textarea.select();
-  try {
-    document.execCommand('copy');
-  } finally {
-    document.body.removeChild(textarea);
-  }
-}
-
 function tokenStatusText(token: ApiTokenRecord): string {
   if (!token.enabled) return '已停用';
   if (token.expired) return '已过期';
diff --git a/frontend/src/components/HistoryPanel.vue b/frontend/src/components/HistoryPanel.vue
index 0542098..5ae6662 100644
--- a/frontend/src/components/HistoryPanel.vue
+++ b/frontend/src/components/HistoryPanel.vue
@@ -186,6 +186,7 @@ import {
 
 import { apiGet, apiPost, download as downloadFile } from '../api/client';
 import type { CacheSize, HistoryDetail, HistoryFileEntry, HistoryFilesResponse, HistoryRecord } from '../types';
+import { writeClipboardText } from '../composables/clipboard';
 import { showDownloadCompleteDialog } from '../composables/downloadFeedback';
 import { toColoredLogLines } from '../composables/logLines';
 import { resetPageHeader, setPageHeader } from '../composables/pageHeader';
@@ -401,30 +402,6 @@ async function copyDetailLogs() {
   }
 }
 
-async function writeClipboardText(text: string) {
-  if (navigator.clipboard?.writeText) {
-    await navigator.clipboard.writeText(text);
-    return;
-  }
-
-  const textarea = document.createElement('textarea');
-  textarea.value = text;
-  textarea.setAttribute('readonly', 'true');
-  textarea.style.position = 'fixed';
-  textarea.style.top = '-1000px';
-  textarea.style.opacity = '0';
-  document.body.appendChild(textarea);
-  textarea.select();
-
-  try {
-    if (!document.execCommand('copy')) {
-      throw new Error('copy failed');
-    }
-  } finally {
-    document.body.removeChild(textarea);
-  }
-}
-
 function confirmDelete(recordId: string) {
   dialog.warning({
     title: '删除历史记录',
diff --git a/frontend/src/composables/clipboard.ts b/frontend/src/composables/clipboard.ts
new file mode 100644
index 0000000..fe50643
--- /dev/null
+++ b/frontend/src/composables/clipboard.ts
@@ -0,0 +1,23 @@
+export async function writeClipboardText(text: string): Promise<void> {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.setAttribute('readonly', 'true');
+  textarea.style.position = 'fixed';
+  textarea.style.top = '-1000px';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  textarea.select();
+
+  try {
+    if (!document.execCommand('copy')) {
+      throw new Error('copy failed');
+    }
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}