fix: 切换数据管理页时刷新表列表

This commit is contained in:
2026-05-18 16:35:28 +08:00
parent e212955613
commit 627fd8f575
2 changed files with 36 additions and 2 deletions
+7
View File
@@ -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` 移除数据库状态卡片里的独立“重新检测”文字按钮,把刷新动作合并到“快速导入”的状态徽标上。
+29 -2
View File
@@ -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;