明树Git Lab

Commit f4c9ec20 authored by zhanghan's avatar zhanghan

处理tab问题

parent 54be8a5c
Pipeline #109868 passed with stage
in 20 seconds
......@@ -254,6 +254,7 @@ const handleCurrentPageChange = (page) => {
getProjectData(searchForm.value);
};
const previewProject = (item) => {
sessionStorage.removeItem("xmdak_detail_tab_state");
router.push({
name: "xmdakDetaill",
......
......@@ -54,7 +54,7 @@
</template>
<script setup>
import { ref, computed, markRaw, onMounted } from "vue";
import { ref, computed, markRaw, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import {
Document,
......@@ -66,13 +66,6 @@ import {
const route = useRoute();
// 初始化时自动加载第一个tab的第一个子项
onMounted(async () => {
if (projectId.value) {
await switchTab(0);
}
});
// Tab 配置
const tabs = ref([
{
......@@ -103,6 +96,37 @@ const isLoading = ref(false);
// 获取 projectId
const projectId = ref(route.query.projectId || "");
// sessionStorage 缓存 key
const STORAGE_KEY = "xmdak_detail_tab_state";
// 保存当前 tab 状态到 sessionStorage
const saveTabState = () => {
const state = {
projectId: projectId.value,
activeTab: activeTab.value,
activeSubItem: activeSubItem.value,
};
sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
};
// 从 sessionStorage 恢复 tab 状态
const restoreTabState = () => {
try {
const raw = sessionStorage.getItem(STORAGE_KEY);
if (!raw) return null;
const state = JSON.parse(raw);
// 只在 projectId 一致时恢复,不同项目不恢复
if (state.projectId === projectId.value) {
return state;
}
// projectId 不一致,清除旧缓存
sessionStorage.removeItem(STORAGE_KEY);
return null;
} catch {
return null;
}
};
// 路由配置 - 使用Add结尾的详情组件
const routeChildren = {
projectManage: [
......@@ -216,6 +240,26 @@ const currentTabChildren = computed(() => {
return routeChildren[currentKey] || [];
});
// 初始化:优先恢复缓存状态,否则加载默认 tab
onMounted(async () => {
if (projectId.value) {
const saved = restoreTabState();
if (saved && saved.activeTab !== undefined && saved.activeSubItem) {
// 恢复之前离开的位置
activeTab.value = saved.activeTab;
const children = routeChildren[tabs.value[saved.activeTab].key];
const targetItem = children?.find((c) => c.name === saved.activeSubItem);
if (targetItem) {
await handleSubItemClick(targetItem, false);
} else {
await switchTab(saved.activeTab);
}
} else {
await switchTab(0);
}
}
});
// 切换 Tab
const switchTab = async (index) => {
activeTab.value = index;
......@@ -231,7 +275,7 @@ const switchTab = async (index) => {
};
// 处理子项点击 - 直接加载详情组件
const handleSubItemClick = async (item) => {
const handleSubItemClick = async (item, shouldSave = true) => {
if (!projectId.value) {
console.warn("缺少 projectId 参数");
return;
......@@ -241,6 +285,11 @@ const handleSubItemClick = async (item) => {
isLoading.value = true;
currentComponent.value = null;
// 切换后保存状态
if (shouldSave) {
saveTabState();
}
try {
const module = await item.importFn();
currentComponent.value = markRaw(module.default);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment