From 627fd8f575126c36f3d5a9a652a8b0cf7c7909ec Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Mon, 18 May 2026 16:35:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=87=E6=8D=A2=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E6=97=B6=E5=88=B7=E6=96=B0=E8=A1=A8?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                   |  7 +++++
 frontend/src/components/DatabasePanel.vue | 31 +++++++++++++++++++++--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index e0ee3e9..efca973 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -1,5 +1,12 @@
 # 项目上下文记录
 
+## 2026-05-18：数据管理页切换时刷新表列表
+
+- `frontend/src/components/DatabasePanel.vue` 在数据管理页激活时会重新执行 `loadTables()`，确保从其他页面切回时左侧表列表拉取最新状态。
+- 离开数据管理页时会清空表列表、当前选中表和表数据，避免已删除的表在下次进入前短暂残留。
+- 表列表请求增加 `tableLoadToken`，忽略离开页面后返回的旧请求，防止过期响应把已清空的列表重新写回。
+- 已执行 `npm run build`，构建通过；未启动浏览器或 headless Chrome。
+
 ## 2026-05-18：合并数据管理页快速导入检测入口
 
 - `frontend/src/components/DatabasePanel.vue` 移除数据库状态卡片里的独立“重新检测”文字按钮，把刷新动作合并到“快速导入”的状态徽标上。
diff --git a/frontend/src/components/DatabasePanel.vue b/frontend/src/components/DatabasePanel.vue
index 38cecd2..16b92e4 100644
--- a/frontend/src/components/DatabasePanel.vue
+++ b/frontend/src/components/DatabasePanel.vue
@@ -124,7 +124,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onActivated, onBeforeUnmount, onMounted, ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
 import { useDialog, useMessage } from 'naive-ui';
 import type { DataTableColumns } from 'naive-ui';
 import { TrashOutline } from '@vicons/ionicons5';
@@ -149,6 +150,7 @@ const pageSize = ref(50);
 const loadingTables = ref(false);
 const loadingData = ref(false);
 const testing = ref(false);
+let tableLoadToken = 0;
 
 const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));
 const loadDataInfileText = computed(() => {
@@ -191,6 +193,14 @@ onMounted(() => {
   void loadTables();
 });
 
+onActivated(() => {
+  void loadTables();
+});
+
+onBeforeRouteLeave(() => {
+  resetTableState();
+});
+
 onBeforeUnmount(() => {
   resetPageHeader();
 });
@@ -211,9 +221,11 @@ async function testConnection() {
 }
 
 async function loadTables() {
+  const currentToken = ++tableLoadToken;
   loadingTables.value = true;
   try {
     const result = await apiGet<{ tables: string[] }>('/api/database/tables');
+    if (currentToken !== tableLoadToken) return;
     tables.value = result.tables;
     if (selectedTable.value && !tables.value.includes(selectedTable.value)) {
       selectedTable.value = null;
@@ -222,12 +234,27 @@ async function loadTables() {
       total.value = 0;
     }
   } catch (error) {
+    if (currentToken !== tableLoadToken) return;
     message.error(error instanceof Error ? error.message : '加载数据表失败');
   } finally {
-    loadingTables.value = false;
+    if (currentToken === tableLoadToken) {
+      loadingTables.value = false;
+    }
   }
 }
 
+function resetTableState() {
+  tableLoadToken += 1;
+  tables.value = [];
+  selectedTable.value = null;
+  tableInfo.value = null;
+  rows.value = [];
+  total.value = 0;
+  page.value = 1;
+  loadingTables.value = false;
+  loadingData.value = false;
+}
+
 async function loadTable(table: string) {
   selectedTable.value = table;
   page.value = 1;