From 529513f84869d8a6d0a657c6f57ef3cbed06a4fb Mon Sep 17 00:00:00 2001
From: tbphp <admin@tbphp.net>
Date: Wed, 23 Jul 2025 18:22:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=8C=E6=AD=A5=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/keys/GroupInfoCard.vue | 17 ++++++++++++++++
 web/src/components/keys/KeyTable.vue      | 24 +++++++++++++++++++++--
 web/src/utils/app-state.ts                | 17 ++++++++++++++++
 3 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/web/src/components/keys/GroupInfoCard.vue b/web/src/components/keys/GroupInfoCard.vue
index 227b689..c75ca50 100644
--- a/web/src/components/keys/GroupInfoCard.vue
+++ b/web/src/components/keys/GroupInfoCard.vue
@@ -78,6 +78,23 @@ watch(
   }
 );
 
+// 监听同步操作完成事件，自动刷新当前分组数据
+watch(
+  () => appState.syncOperationTrigger,
+  () => {
+    // 检查是否需要刷新当前分组的数据
+    if (appState.lastSyncOperation && props.group) {
+      // 通过分组名称匹配
+      const isCurrentGroup = appState.lastSyncOperation.groupName === props.group.name;
+
+      if (isCurrentGroup) {
+        // 刷新当前分组的统计数据
+        loadStats();
+      }
+    }
+  }
+);
+
 async function loadStats() {
   if (!props.group?.id) {
     stats.value = null;
diff --git a/web/src/components/keys/KeyTable.vue b/web/src/components/keys/KeyTable.vue
index a5fe5da..a1fcd25 100644
--- a/web/src/components/keys/KeyTable.vue
+++ b/web/src/components/keys/KeyTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { keysApi } from "@/api/keys";
 import type { APIKey, Group, KeyStatus } from "@/types/models";
-import { appState } from "@/utils/app-state";
+import { appState, triggerSyncOperationRefresh } from "@/utils/app-state";
 import { copy } from "@/utils/clipboard";
 import { getGroupDisplayName, maskKey } from "@/utils/display";
 import {
@@ -171,6 +171,15 @@ async function loadKeys() {
   }
 }
 
+// 处理批量删除成功后的刷新
+async function handleBatchDeleteSuccess() {
+  await loadKeys();
+  // 触发同步操作刷新
+  if (props.selectedGroup) {
+    triggerSyncOperationRefresh(props.selectedGroup.name, "BATCH_DELETE");
+  }
+}
+
 async function copyKey(key: KeyRow) {
   const success = await copy(key.key_value);
   if (success) {
@@ -201,6 +210,9 @@ async function testKey(_key: KeyRow) {
         closable: true,
       });
     }
+    await loadKeys();
+    // 触发同步操作刷新
+    triggerSyncOperationRefresh(props.selectedGroup.name, "TEST_SINGLE");
   } catch (_error) {
     console.error("测试失败");
   } finally {
@@ -234,6 +246,8 @@ async function restoreKey(key: KeyRow) {
       try {
         await keysApi.restoreKeys(props.selectedGroup.id, key.key_value);
         await loadKeys();
+        // 触发同步操作刷新
+        triggerSyncOperationRefresh(props.selectedGroup.name, "RESTORE_SINGLE");
       } catch (_error) {
         console.error("恢复失败");
       } finally {
@@ -265,6 +279,8 @@ async function deleteKey(key: KeyRow) {
       try {
         await keysApi.deleteKeys(props.selectedGroup.id, key.key_value);
         await loadKeys();
+        // 触发同步操作刷新
+        triggerSyncOperationRefresh(props.selectedGroup.name, "DELETE_SINGLE");
       } catch (_error) {
         console.error("删除失败");
       } finally {
@@ -356,6 +372,8 @@ async function restoreAllInvalid() {
       try {
         await keysApi.restoreAllInvalidKeys(props.selectedGroup.id);
         await loadKeys();
+        // 触发同步操作刷新
+        triggerSyncOperationRefresh(props.selectedGroup.name, "RESTORE_ALL_INVALID");
       } catch (_error) {
         console.error("恢复失败");
       } finally {
@@ -408,6 +426,8 @@ async function clearAllInvalid() {
         const { data } = await keysApi.clearAllInvalidKeys(props.selectedGroup.id);
         window.$message.success(data?.message || "清除成功");
         await loadKeys();
+        // 触发同步操作刷新
+        triggerSyncOperationRefresh(props.selectedGroup.name, "CLEAR_ALL_INVALID");
       } catch (_error) {
         console.error("删除失败");
       } finally {
@@ -631,7 +651,7 @@ function resetPage() {
       v-model:show="deleteDialogShow"
       :group-id="selectedGroup.id"
       :group-name="getGroupDisplayName(selectedGroup!)"
-      @success="loadKeys"
+      @success="handleBatchDeleteSuccess"
     />
   </div>
 </template>
diff --git a/web/src/utils/app-state.ts b/web/src/utils/app-state.ts
index 3bf75ce..708aa44 100644
--- a/web/src/utils/app-state.ts
+++ b/web/src/utils/app-state.ts
@@ -4,15 +4,32 @@ interface AppState {
   loading: boolean;
   taskPollingTrigger: number;
   groupDataRefreshTrigger: number;
+  syncOperationTrigger: number;
   lastCompletedTask?: {
     groupName: string;
     taskType: string;
     finishedAt: string;
   };
+  lastSyncOperation?: {
+    groupName: string;
+    operationType: string;
+    finishedAt: string;
+  };
 }
 
 export const appState = reactive<AppState>({
   loading: false,
   taskPollingTrigger: 0,
   groupDataRefreshTrigger: 0,
+  syncOperationTrigger: 0,
 });
+
+// 触发同步操作后的数据刷新
+export function triggerSyncOperationRefresh(groupName: string, operationType: string) {
+  appState.lastSyncOperation = {
+    groupName,
+    operationType,
+    finishedAt: new Date().toISOString(),
+  };
+  appState.syncOperationTrigger++;
+}