feat: 异步任务更新前端数据

web/src/components/GlobalTaskProgressBar.vue

@@ -62,6 +62,16 @@ async function pollOnce() {
               localStorage.setItem("last_closed_task", task.finished_at || "");
             },
           });
+
+          // 触发分组数据刷新
+          if (task.group_name && task.finished_at) {
+            appState.lastCompletedTask = {
+              groupName: task.group_name,
+              taskType: task.task_type,
+              finishedAt: task.finished_at,
+            };
+            appState.groupDataRefreshTrigger++;
+          }
         }
       }
       return;

web/src/components/keys/GroupInfoCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { keysApi } from "@/api/keys";
 import type { Group, GroupConfigOption, GroupStatsResponse } from "@/types/models";
+import { appState } from "@/utils/app-state";
 import { copy } from "@/utils/clipboard";
 import { getGroupDisplayName } from "@/utils/display";
 import { Pencil, Trash } from "@vicons/ionicons5";
@@ -56,6 +57,27 @@ watch(
   }
 );
 
+// 监听任务完成事件，自动刷新当前分组数据
+watch(
+  () => appState.groupDataRefreshTrigger,
+  () => {
+    // 检查是否需要刷新当前分组的数据
+    if (appState.lastCompletedTask && props.group) {
+      // 通过分组名称匹配
+      const isCurrentGroup = appState.lastCompletedTask.groupName === props.group.name;
+
+      const shouldRefresh =
+        appState.lastCompletedTask.taskType === "KEY_VALIDATION" ||
+        appState.lastCompletedTask.taskType === "KEY_IMPORT";
+
+      if (isCurrentGroup && shouldRefresh) {
+        // 刷新当前分组的统计数据
+        loadStats();
+      }
+    }
+  }
+);
+
 async function loadStats() {
   if (!props.group?.id) {
     stats.value = null;

web/src/components/keys/KeyTable.vue

@@ -2,8 +2,8 @@
 import { keysApi } from "@/api/keys";
 import type { APIKey, Group, KeyStatus } from "@/types/models";
 import { appState } from "@/utils/app-state";
-import { getGroupDisplayName, maskKey } from "@/utils/display";
 import { copy } from "@/utils/clipboard";
+import { getGroupDisplayName, maskKey } from "@/utils/display";
 import {
   AddCircleOutline,
   AlertCircleOutline,
@@ -96,6 +96,27 @@ watch([currentPage, pageSize, statusFilter], async () => {
   await loadKeys();
 });
 
+// 监听任务完成事件，自动刷新密钥列表
+watch(
+  () => appState.groupDataRefreshTrigger,
+  () => {
+    // 检查是否需要刷新当前分组的密钥列表
+    if (appState.lastCompletedTask && props.selectedGroup) {
+      // 通过分组名称匹配
+      const isCurrentGroup = appState.lastCompletedTask.groupName === props.selectedGroup.name;
+
+      const shouldRefresh =
+        appState.lastCompletedTask.taskType === "KEY_VALIDATION" ||
+        appState.lastCompletedTask.taskType === "KEY_IMPORT";
+
+      if (isCurrentGroup && shouldRefresh) {
+        // 刷新当前分组的密钥列表
+        loadKeys();
+      }
+    }
+  }
+);
+
 // 处理搜索输入的防抖
 function handleSearchInput() {
   currentPage.value = 1; // 搜索时重置到第一页

web/src/utils/app-state.ts

@@ -3,9 +3,16 @@ import { reactive } from "vue";
 interface AppState {
   loading: boolean;
   taskPollingTrigger: number;
+  groupDataRefreshTrigger: number;
+  lastCompletedTask?: {
+    groupName: string;
+    taskType: string;
+    finishedAt: string;
+  };
 }
 
 export const appState = reactive<AppState>({
   loading: false,
   taskPollingTrigger: 0,
+  groupDataRefreshTrigger: 0,
 });