From a992c28593e0e5fc9478ca3127998e0570a75de7 Mon Sep 17 00:00:00 2001
From: hptangxi <hptangxi@yeah.net>
Date: Sun, 6 Jul 2025 21:21:00 +0800
Subject: [PATCH] key table

---
 web/src/App.vue                              |   3 +-
 web/src/api/keys.ts                          |  30 +++--
 web/src/components/GlobalTaskProgressBar.vue |  55 +++++++--
 web/src/components/keys/KeyTable.vue         | 121 ++++++++-----------
 web/src/types/models.ts                      |   9 +-
 5 files changed, 125 insertions(+), 93 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 2d7751e..2fe484d 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import GlobalProviders from "@/components/GlobalProviders.vue";
+import GlobalTaskProgressBar from "@/components/GlobalTaskProgressBar.vue";
 import Layout from "@/components/Layout.vue";
 import { useAuthKey } from "@/services/auth";
 import { computed } from "vue";
@@ -15,7 +16,7 @@ const isLoggedIn = computed(() => !!authKey.value);
       <router-view v-else key="auth" />
 
       <!-- 全局任务进度条 -->
-      <!-- <global-task-progress-bar /> -->
+      <global-task-progress-bar />
     </div>
   </global-providers>
 </template>
diff --git a/web/src/api/keys.ts b/web/src/api/keys.ts
index a08bc06..455ab75 100644
--- a/web/src/api/keys.ts
+++ b/web/src/api/keys.ts
@@ -118,17 +118,31 @@ export const keysApi = {
 
   // 清空所有无效密钥
   clearAllInvalidKeys(group_id: number): Promise<void> {
-    return http.post("/keys/clear-all-invalid", { group_id });
+    return http.post(
+      "/keys/clear-all-invalid",
+      { group_id },
+      {
+        hideMessage: true,
+      }
+    );
   },
 
   // 导出密钥
-  async exportKeys(
-    groupId: number,
-    filter: "all" | "valid" | "invalid" = "all"
-  ): Promise<{ keys: string[] }> {
-    const params: any = { filter };
-    const res = await http.get(`/groups/${groupId}/keys/export`, { params });
-    return res.data;
+  exportKeys(groupId: number, status: "all" | "active" | "inactive" = "all") {
+    let url = `${http.defaults.baseURL}/groups/${groupId}/keys/export`;
+    if (status !== "all") {
+      url += `?status=${status}`;
+    }
+
+    // 创建隐藏的 a 标签实现下载
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `group-${groupId}-keys-${status}.txt`;
+    link.style.display = "none";
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
   },
 
   // 验证分组密钥
diff --git a/web/src/components/GlobalTaskProgressBar.vue b/web/src/components/GlobalTaskProgressBar.vue
index 0372127..8e4eab9 100644
--- a/web/src/components/GlobalTaskProgressBar.vue
+++ b/web/src/components/GlobalTaskProgressBar.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { keysApi } from "@/api/keys";
 import type { TaskInfo } from "@/types/models";
-import { NButton, NCard, NProgress, NText } from "naive-ui";
+import { NButton, NCard, NProgress, NText, useMessage } from "naive-ui";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
 const taskInfo = ref<TaskInfo>({ is_running: false });
 const visible = ref(false);
 let pollTimer: number | null = null;
+let isPolling = false; // 添加标志位
+const message = useMessage();
 
 onMounted(() => {
   startPolling();
@@ -18,18 +20,49 @@ onBeforeUnmount(() => {
 
 function startPolling() {
   stopPolling();
-  pollTimer = setInterval(async () => {
-    try {
-      const task = await keysApi.getTaskStatus();
-      taskInfo.value = task;
-      visible.value = task.is_running;
-    } catch (_error) {
-      // 错误已记录
+  isPolling = true;
+  pollOnce();
+}
+
+async function pollOnce() {
+  if (!isPolling) {
+    return;
+  }
+
+  try {
+    const task = await keysApi.getTaskStatus();
+    taskInfo.value = task;
+    visible.value = task.is_running;
+    if (!task.is_running) {
+      stopPolling();
+      if (task.result) {
+        const lastTask = localStorage.getItem("last_closed_task");
+        if (lastTask !== task.finished_at) {
+          const { total_keys, valid_keys, invalid_keys } = task.result;
+          const msg = `任务已完成，处理了 ${total_keys} 个密钥，其中 ${valid_keys} 个有效密钥，${invalid_keys} 个无效密钥。`;
+          message.info(msg, {
+            closable: true,
+            duration: 0,
+            onClose: () => {
+              localStorage.setItem("last_closed_task", task.finished_at || "");
+            },
+          });
+        }
+      }
+      return;
     }
-  }, 1000);
+  } catch (_error) {
+    // 错误已记录
+  }
+
+  // 如果仍在轮询状态，1秒后发起下一次请求
+  if (isPolling) {
+    pollTimer = setTimeout(pollOnce, 1000);
+  }
 }
 
 function stopPolling() {
+  isPolling = false;
   if (pollTimer) {
     clearInterval(pollTimer);
     pollTimer = null;
@@ -61,7 +94,7 @@ function handleClose() {
           <span class="progress-icon">⚡</span>
           <div class="progress-details">
             <n-text strong class="progress-title">
-              {{ taskInfo.task_name || "正在处理任务" }}
+              正在处理分组 {{ taskInfo.group_name }} 的任务
             </n-text>
             <n-text depth="3" class="progress-subtitle">
               {{ getProgressText() }} ({{ getProgressPercentage() }}%)
@@ -156,6 +189,8 @@ function handleClose() {
 
 .progress-details {
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .progress-title {
diff --git a/web/src/components/keys/KeyTable.vue b/web/src/components/keys/KeyTable.vue
index 60283f8..5c0b947 100644
--- a/web/src/components/keys/KeyTable.vue
+++ b/web/src/components/keys/KeyTable.vue
@@ -279,125 +279,104 @@ function getStatusClass(status: KeyStatus): string {
 }
 
 async function copyAllKeys() {
-  if (!props.selectedGroup) {
+  if (!props.selectedGroup?.id) {
     return;
   }
 
-  try {
-    const result = await keysApi.exportKeys(props.selectedGroup.id, "all");
-    const keysText = result.keys.join("\n");
-    navigator.clipboard
-      .writeText(keysText)
-      .then(() => {
-        window.$message.success(`已复制${result.keys.length}个密钥到剪贴板`);
-      })
-      .catch(() => {
-        window.$message.error("复制失败");
-      });
-  } catch (_error) {
-    // 错误已记录
-    window.$message.error("导出失败");
-  }
+  keysApi.exportKeys(props.selectedGroup.id, "all");
 }
 
 async function copyValidKeys() {
-  if (!props.selectedGroup) {
+  if (!props.selectedGroup?.id) {
     return;
   }
 
-  try {
-    const result = await keysApi.exportKeys(props.selectedGroup.id, "valid");
-    const keysText = result.keys.join("\n");
-    navigator.clipboard
-      .writeText(keysText)
-      .then(() => {
-        window.$message.success(`已复制${result.keys.length}个有效密钥到剪贴板`);
-      })
-      .catch(() => {
-        window.$message.error("复制失败");
-      });
-  } catch (_error) {
-    // 错误已记录
-    window.$message.error("导出失败");
-  }
+  keysApi.exportKeys(props.selectedGroup.id, "active");
 }
 
 async function copyInvalidKeys() {
-  if (!props.selectedGroup) {
+  if (!props.selectedGroup?.id) {
     return;
   }
 
-  try {
-    const result = await keysApi.exportKeys(props.selectedGroup.id, "invalid");
-    const keysText = result.keys.join("\n");
-    navigator.clipboard
-      .writeText(keysText)
-      .then(() => {
-        window.$message.success(`已复制${result.keys.length}个无效密钥到剪贴板`);
-      })
-      .catch(() => {
-        window.$message.error("复制失败");
-      });
-  } catch (_error) {
-    // 错误已记录
-    window.$message.error("导出失败");
-  }
+  keysApi.exportKeys(props.selectedGroup.id, "inactive");
 }
 
 async function restoreAllInvalid() {
-  if (!props.selectedGroup) {
+  if (!props.selectedGroup?.id || restoreMsg) {
     return;
   }
 
   dialog.warning({
-    // title: "恢复密钥",
+    title: "恢复密钥",
     content: "确定要恢复所有无效密钥吗？",
     positiveText: "确定",
     negativeText: "取消",
     onPositiveClick: async () => {
+      restoreMsg = window.$message.info("正在恢复密钥...", {
+        duration: 0,
+      });
+
       try {
-        window.$message.success("所有无效密钥已恢复");
+        await keysApi.restoreAllInvalidKeys(props.selectedGroup.id);
         await loadKeys();
       } catch (_error) {
-        // 错误已记录
-        window.$message.error("恢复失败");
+        console.error("恢复失败");
+      } finally {
+        restoreMsg?.destroy();
+        restoreMsg = null;
       }
     },
   });
 }
 
 async function validateAllKeys() {
-  if (!props.selectedGroup) {
+  if (!props.selectedGroup?.id || testingMsg) {
     return;
   }
 
+  testingMsg = window.$message.info("正在验证密钥...", {
+    duration: 0,
+  });
+
   try {
-    const result = await keysApi.validateGroupKeys(props.selectedGroup.id);
-    window.$message.success(`验证完成: 有效${result.valid_count}个，无效${result.invalid_count}个`);
+    await keysApi.validateGroupKeys(props.selectedGroup.id);
+    localStorage.removeItem("last_closed_task");
   } catch (_error) {
-    // 错误已记录
-    window.$message.error("验证失败");
+    console.error("测试失败");
+  } finally {
+    testingMsg?.destroy();
+    testingMsg = null;
   }
 }
 
 async function clearAllInvalid() {
-  if (!props.selectedGroup) {
+  if (!props.selectedGroup?.id || deleteMsg) {
     return;
   }
 
-  // eslint-disable-next-line no-alert
-  const confirmed = window.confirm("确定要清除所有无效密钥吗？此操作不可恢复！");
-  if (!confirmed) {
-    return;
-  }
+  dialog.warning({
+    title: "清除密钥",
+    content: "确定要清除所有无效密钥吗？此操作不可恢复！",
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: async () => {
+      deleteMsg = window.$message.info("正在清除密钥...", {
+        duration: 0,
+      });
 
-  try {
-    window.$message.success("所有无效密钥已清除");
-    await loadKeys();
-  } catch (_error) {
-    // 错误已记录
-    window.$message.error("清除失败");
-  }
+      try {
+        const { data } = await keysApi.clearAllInvalidKeys(props.selectedGroup.id);
+        window.$message.success(data?.message || "清除成功");
+        await loadKeys();
+      } catch (_error) {
+        console.error("删除失败");
+      } finally {
+        deleteMsg?.destroy();
+        deleteMsg = null;
+      }
+    },
+  });
 }
 
 function changePage(page: number) {
diff --git a/web/src/types/models.ts b/web/src/types/models.ts
index 39da52d..2755715 100644
--- a/web/src/types/models.ts
+++ b/web/src/types/models.ts
@@ -57,13 +57,16 @@ export interface GroupStats {
 
 export interface TaskInfo {
   is_running: boolean;
-  task_name?: string;
-  group_id?: number;
   group_name?: string;
   processed?: number;
   total?: number;
   started_at?: string;
-  message?: string;
+  finished_at?: string;
+  result?: {
+    invalid_keys: number;
+    total_keys: number;
+    valid_keys: number;
+  };
 }
 
 export interface RequestLog {