明树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) => { ...@@ -254,6 +254,7 @@ const handleCurrentPageChange = (page) => {
getProjectData(searchForm.value); getProjectData(searchForm.value);
}; };
const previewProject = (item) => { const previewProject = (item) => {
sessionStorage.removeItem("xmdak_detail_tab_state");
router.push({ router.push({
name: "xmdakDetaill", name: "xmdakDetaill",
......
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, markRaw, onMounted } from "vue"; import { ref, computed, markRaw, onMounted, watch } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { import {
Document, Document,
...@@ -66,13 +66,6 @@ import { ...@@ -66,13 +66,6 @@ import {
const route = useRoute(); const route = useRoute();
// 初始化时自动加载第一个tab的第一个子项
onMounted(async () => {
if (projectId.value) {
await switchTab(0);
}
});
// Tab 配置 // Tab 配置
const tabs = ref([ const tabs = ref([
{ {
...@@ -103,6 +96,37 @@ const isLoading = ref(false); ...@@ -103,6 +96,37 @@ const isLoading = ref(false);
// 获取 projectId // 获取 projectId
const projectId = ref(route.query.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结尾的详情组件 // 路由配置 - 使用Add结尾的详情组件
const routeChildren = { const routeChildren = {
projectManage: [ projectManage: [
...@@ -216,6 +240,26 @@ const currentTabChildren = computed(() => { ...@@ -216,6 +240,26 @@ const currentTabChildren = computed(() => {
return routeChildren[currentKey] || []; 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 // 切换 Tab
const switchTab = async (index) => { const switchTab = async (index) => {
activeTab.value = index; activeTab.value = index;
...@@ -231,7 +275,7 @@ const switchTab = async (index) => { ...@@ -231,7 +275,7 @@ const switchTab = async (index) => {
}; };
// 处理子项点击 - 直接加载详情组件 // 处理子项点击 - 直接加载详情组件
const handleSubItemClick = async (item) => { const handleSubItemClick = async (item, shouldSave = true) => {
if (!projectId.value) { if (!projectId.value) {
console.warn("缺少 projectId 参数"); console.warn("缺少 projectId 参数");
return; return;
...@@ -241,6 +285,11 @@ const handleSubItemClick = async (item) => { ...@@ -241,6 +285,11 @@ const handleSubItemClick = async (item) => {
isLoading.value = true; isLoading.value = true;
currentComponent.value = null; currentComponent.value = null;
// 切换后保存状态
if (shouldSave) {
saveTabState();
}
try { try {
const module = await item.importFn(); const module = await item.importFn();
currentComponent.value = markRaw(module.default); 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