From e34543465a4446e6db73f2513a3c15aadb28f990 Mon Sep 17 00:00:00 2001 From: lzq <357099073@qq.com> Date: Wed, 4 Nov 2026 18:09:53 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96backend=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/components.d.ts | 2 + backend/src/assets/less/style.less | 45 +- backend/src/components/AsideMenuItem.vue | 41 + backend/src/components/CommonAside.vue | 922 +++++---------- backend/src/components/CommonHeader.vue | 1007 ++++++++++++++--- backend/src/components/MenuIcon.vue | 37 + backend/src/composables/useAdminNavigation.js | 318 ++++++ backend/src/stores/index.js | 78 +- backend/src/utils/theme.js | 64 ++ backend/src/views/Main.vue | 171 ++- backend/src/views/home/index.vue | 117 +- 11 files changed, 1899 insertions(+), 903 deletions(-) create mode 100644 backend/src/components/AsideMenuItem.vue create mode 100644 backend/src/components/MenuIcon.vue create mode 100644 backend/src/composables/useAdminNavigation.js create mode 100644 backend/src/utils/theme.js diff --git a/backend/components.d.ts b/backend/components.d.ts index ee53407..7bb0292 100644 --- a/backend/components.d.ts +++ b/backend/components.d.ts @@ -11,6 +11,7 @@ export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { + AsideMenuItem: typeof import('./src/components/AsideMenuItem.vue')['default'] CommonAside: typeof import('./src/components/CommonAside.vue')['default'] CommonHeader: typeof import('./src/components/CommonHeader.vue')['default'] ElAlert: typeof import('element-plus/es')['ElAlert'] @@ -87,6 +88,7 @@ declare module 'vue' { ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect'] ElUpload: typeof import('element-plus/es')['ElUpload'] FlowCanvas: typeof import('./src/components/approval/FlowCanvas.vue')['default'] + MenuIcon: typeof import('./src/components/MenuIcon.vue')['default'] MessageDetailDialog: typeof import('./src/components/MessageDetailDialog.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] diff --git a/backend/src/assets/less/style.less b/backend/src/assets/less/style.less index 339e226..d31adaa 100644 --- a/backend/src/assets/less/style.less +++ b/backend/src/assets/less/style.less @@ -1,12 +1,51 @@ -// Element Plus Message z-index +// 全局主题：浅蓝白后台框架 +// 自定义变量供顶栏 / 侧栏 / 内容区统一取色，Element Plus 主色同步收敛。 :root { --el-message-z-index: 9999; + + --el-color-primary: #2f6bff; + --el-color-primary-light-3: #6f97ff; + --el-color-primary-light-5: #97b5ff; + --el-color-primary-light-7: #c5d8ff; + --el-color-primary-light-8: #dce7ff; + --el-color-primary-light-9: #eef4ff; + --el-color-primary-dark-2: #2555cc; + + --yz-primary: #2f6bff; + --yz-primary-soft: #eef4ff; + --yz-primary-softer: #f6f9ff; + --yz-header-bg: #ffffff; + --yz-aside-bg: #ffffff; + --yz-page-bg: #f4f7fd; + --yz-card-bg: #ffffff; + --yz-border: #e8edf7; + --yz-text: #24304a; + --yz-text-regular: #5b6785; + --yz-text-muted: #93a0b8; + --yz-shadow: 0 2px 12px rgba(31, 61, 130, 0.06); + --yz-header-height: 64px; +} + +// 暗色模式：只覆盖框架自定义变量，Element Plus 变量交给官方 dark css-vars +html.dark { + --yz-primary: #6f97ff; + --yz-primary-soft: rgba(64, 110, 220, 0.2); + --yz-primary-softer: rgba(64, 110, 220, 0.12); + --yz-header-bg: #1b1f2b; + --yz-aside-bg: #1b1f2b; + --yz-page-bg: #131720; + --yz-card-bg: #1f2431; + --yz-border: #2c3344; + --yz-text: #e8ecf6; + --yz-text-regular: #b9c2d6; + --yz-text-muted: #8692ac; + --yz-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } // body 样式 body { - // background-color: #f5f7fa; - color: #303133; + color: var(--yz-text); + background-color: var(--yz-page-bg); transition: background-color 0.3s ease, color 0.3s ease; } diff --git a/backend/src/components/AsideMenuItem.vue b/backend/src/components/AsideMenuItem.vue new file mode 100644 index 0000000..983c821 --- /dev/null +++ b/backend/src/components/AsideMenuItem.vue @@ -0,0 +1,41 @@ + + + diff --git a/backend/src/components/CommonAside.vue b/backend/src/components/CommonAside.vue index 59db294..ae11032 100644 --- a/backend/src/components/CommonAside.vue +++ b/backend/src/components/CommonAside.vue @@ -8,7 +8,7 @@ > @@ -18,210 +18,98 @@ 重新加载 - -

{{ isCollapse ? "管理" : asideTitle }}

- - - - - - - - - - - - - - -
-
- + + + -
- {{ miniApps[0].name || "小程序" - }} 等 {{ miniApps.length }} 个 + + +
+ 暂无子菜单 +
+ + +
+
+ 用数据 + 让管理更美好 +
+ + + + + +
+
+ +
+ {{ miniApps[0].name || "小程序" + }} 等 {{ miniApps.length }} 个 +
-
+ @@ -809,3 +927,592 @@ onUnmounted(() => { text-align: left; } + + + + + + diff --git a/backend/src/components/MenuIcon.vue b/backend/src/components/MenuIcon.vue new file mode 100644 index 0000000..20b366d --- /dev/null +++ b/backend/src/components/MenuIcon.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/backend/src/composables/useAdminNavigation.js b/backend/src/composables/useAdminNavigation.js new file mode 100644 index 0000000..2b54e7f --- /dev/null +++ b/backend/src/composables/useAdminNavigation.js @@ -0,0 +1,318 @@ +import { computed } from "vue"; +import { useRoute } from "vue-router"; +import { useMenuStore } from "@/stores/menu"; +import { pickDefaultChild, isWorkbenchMenu } from "@/router/menuDefaults"; + +/** + * 后台框架导航模型。 + * + * 层级约定： + * 模块（从门户 /home 进入，如「OA管理」/apps/oa） + * └─ 顶级菜单（顶部导航，如「仪表盘」「审批中心」） + * └─ 左侧菜单（选中顶级菜单后的内容） + * + * 顶部导航展示的是当前模块下的顶级菜单，不是门户里的模块卡片。 + * 选中态直接由当前路由反推，因此标签页切换、刷新、深链接都能自动还原。 + */ + +const fixedCmsMenu = { + id: -200, + path: "/apps/cms", + title: "内容管理", + icon: "Document", + sort: -200, + order: -200, + children: [ + { + id: -2001, + path: "/apps/cms/analytics/content", + title: "内容统计", + icon: "DataAnalysis", + sort: 0, + order: 0, + children: [], + }, + { + id: -201, + path: "/apps/cms/article", + title: "文章管理", + icon: "Document", + sort: 1, + order: 1, + children: [], + }, + { + id: -202, + path: "/apps/cms/article/type", + title: "文章分类", + icon: "Folder", + sort: 2, + order: 2, + children: [], + }, + { + id: -203, + path: "/apps/cms/products", + title: "产品管理", + icon: "Goods", + sort: 3, + order: 3, + children: [], + }, + { + id: -204, + path: "/apps/cms/products/types", + title: "产品分类", + icon: "Folder", + sort: 4, + order: 4, + children: [], + }, + { + id: -205, + path: "/apps/cms/solutions", + title: "解决方案管理", + icon: "Promotion", + sort: 5, + order: 5, + children: [], + }, + { + id: -206, + path: "/apps/cms/solutions/types", + title: "解决方案分类", + icon: "Folder", + sort: 6, + order: 6, + children: [], + }, + ], +}; + +function processMenus(menus) { + return (menus || []) + .filter((menu) => { + // is_visible 只控制侧栏/顶部是否展示，不影响动态路由注册 + if (menu.is_visible !== undefined && Number(menu.is_visible) === 0) { + return false; + } + if (menu.path && String(menu.path).trim() !== "") return true; + return !!(menu.children && menu.children.length > 0); + }) + .map((menu) => { + const sort = Number(menu.sort) || 0; + return { + id: menu.id, + pid: menu.pid || 0, + path: menu.path, + icon: menu.icon || "Grid", + title: menu.title, + component_path: menu.component_path || "", + type: menu.type, + locked: !!menu.locked, + sort, + order: sort, + children: menu.children ? processMenus(menu.children) : [], + }; + }); +} + +function mergeFixedCmsMenu(menus) { + return menus.some((menu) => menu.path === fixedCmsMenu.path) + ? menus + : [fixedCmsMenu, ...menus]; +} + +function sortMenusRecursively(menus) { + (menus || []).forEach((menu) => { + if (menu.children && menu.children.length > 0) { + menu.children.sort((a, b) => { + if (a.order !== b.order) return a.order - b.order; + return (Number(a.id) || 0) - (Number(b.id) || 0); + }); + sortMenusRecursively(menu.children); + } + }); + return menus; +} + +function findMenuItem(menus, targetIndex) { + for (const menu of menus || []) { + if (menu.path === targetIndex) return menu; + if (menu.children && menu.children.length > 0) { + const found = findMenuItem(menu.children, targetIndex); + if (found) return found; + } + } + return null; +} + +function isPathInSubtree(base, currentPath) { + if (!base) return false; + const normalized = base.replace(/\/+$/, ""); + return currentPath === normalized || currentPath.startsWith(`${normalized}/`); +} + +function findParentModule(menus, currentPath) { + for (const menu of menus) { + if (!menu.path || menu.path === "/home") { + const found = findParentModule(menu.children || [], currentPath); + if (found) return found; + continue; + } + + if (isPathInSubtree(menu.path, currentPath)) return menu; + + for (const child of menu.children || []) { + if (isPathInSubtree(child.path, currentPath)) return menu; + for (const grandchild of child.children || []) { + if (isPathInSubtree(grandchild.path, currentPath)) return menu; + } + } + } + return null; +} + +/** 在当前模块的顶级菜单里，找出路径最具体覆盖当前路由的那一项 */ +function findActiveTopMenu(topMenus, currentPath) { + let best = null; + for (const top of topMenus) { + const stack = [top]; + while (stack.length) { + const node = stack.pop(); + if (node.path && isPathInSubtree(node.path, currentPath)) { + const length = node.path.length; + if (!best || length > best.length) { + best = { menu: top, length }; + } + } + if (node.children && node.children.length) { + stack.push(...node.children); + } + } + } + return best?.menu || null; +} + +/** 点击顶级菜单时落到具体页面，避免多出一个「目录」标签页 */ +function resolveLandingMenu(menu) { + if (!menu) return null; + if (menu.locked) return menu.path ? menu : null; + + let current = menu; + const visited = new Set(); + while (current.children && current.children.length > 0 && !visited.has(current.id)) { + visited.add(current.id); + // 目录本身有页面时，访问目录路径即可（路由会渲染 index 子路由） + if (current.component_path) break; + const next = pickDefaultChild(current.children); + if (!next) break; + current = next; + } + return current.path ? current : menu.path ? menu : null; +} + +function flattenMenus(menus, parentTitle = "") { + const result = []; + for (const menu of menus || []) { + // 只把「可直接打开的页面」放进搜索结果，纯目录交给路由 redirect， + // 否则会同时产生「目录」和「落地页」两个标签页 + const isPage = !menu.children?.length || !!menu.component_path; + if (menu.path && menu.path !== "/home" && isPage) { + result.push({ + id: menu.id, + path: menu.path, + title: menu.title, + icon: menu.icon, + locked: menu.locked, + parentTitle: parentTitle || menu.title, + }); + } + if (menu.children && menu.children.length) { + result.push(...flattenMenus(menu.children, menu.title || parentTitle)); + } + } + return result; +} + +/** 在当前模块下找到可直接打开的「仪表盘 / 工作台」页面，作为默认标签页 */ +function findWorkbenchPage(menus) { + const stack = [...menus]; + const visited = new Set(); + while (stack.length) { + const node = stack.shift(); + if (!node || visited.has(node.id)) continue; + visited.add(node.id); + if ( + node.path && + isWorkbenchMenu(node) && + (!node.children?.length || !!node.component_path) + ) { + return node; + } + if (node.children?.length) stack.push(...node.children); + } + return null; +} + +export function useAdminNavigation() { + const route = useRoute(); + const menuStore = useMenuStore(); + + const list = computed(() => + sortMenusRecursively(processMenus(mergeFixedCmsMenu(menuStore.menus || []))), + ); + + const currentModule = computed(() => { + const path = route.path; + if (!path || path === "/" || path === "/home") return null; + return findParentModule(list.value, path); + }); + + const topMenus = computed(() => currentModule.value?.children || []); + + const activeTopMenu = computed(() => { + const menus = topMenus.value; + if (!menus.length) return null; + return ( + findActiveTopMenu(menus, route.path) || + pickDefaultChild(menus) || + menus[0] || + null + ); + }); + + const sideMenus = computed(() => { + const active = activeTopMenu.value; + if (!active) return []; + return active.children && active.children.length ? active.children : [active]; + }); + + const sideTitle = computed( + () => activeTopMenu.value?.title || currentModule.value?.title || "功能菜单", + ); + + const searchableMenus = computed(() => flattenMenus(list.value)); + + // 「首页」已移除：进入模块后默认展示该模块的仪表盘 / 工作台 + const defaultTab = computed(() => { + const module = currentModule.value; + if (!module) return null; + const target = + findWorkbenchPage(module.children || []) || resolveLandingMenu(module); + return target?.path ? target : null; + }); + + return { + list, + currentModule, + topMenus, + activeTopMenu, + sideMenus, + sideTitle, + defaultTab, + searchableMenus, + findMenuItem, + resolveLandingMenu, + }; +} diff --git a/backend/src/stores/index.js b/backend/src/stores/index.js index 37396e0..03189a0 100644 --- a/backend/src/stores/index.js +++ b/backend/src/stores/index.js @@ -58,27 +58,23 @@ import { ref as vueRef } from 'vue'; * } */ export const useTabsStore = defineTabsStore('tabs', () => { - // 固定首页tab - const defaultDashboardPath = '/home'; + // 默认标签页：不再固定「首页」，而是由 Main.vue 按当前模块设置成仪表盘 + const defaultDashboardPath = vueRef(''); - // 从 localStorage 恢复 tabs 状态 + // 从 localStorage 恢复 tabs 状态（兼容旧版本里遗留的 /home 首页标签） function loadTabsFromStorage() { try { const savedTabs = localStorage.getItem('tabs_list'); - const savedActiveTab = localStorage.getItem('active_tab'); if (savedTabs) { const tabs = JSON.parse(savedTabs); - // 确保至少包含首页 - const hasHome = tabs.some(t => t.fullPath === defaultDashboardPath); - if (!hasHome) { - tabs.unshift({ title: '首页', fullPath: defaultDashboardPath, name: 'Home' }); + if (Array.isArray(tabs)) { + return tabs.filter(t => t && t.fullPath && t.fullPath !== '/home'); } - return tabs; } } catch (e) { console.warn('恢复 tabs 失败:', e); } - return [{ title: '首页', fullPath: defaultDashboardPath, name: 'Home' }]; + return []; } // 保存 tabs 到 localStorage @@ -95,7 +91,29 @@ export const useTabsStore = defineTabsStore('tabs', () => { const tabList = vueRef(loadTabsFromStorage()); const savedActiveTab = localStorage.getItem('active_tab'); - const activeTab = vueRef(savedActiveTab || defaultDashboardPath); + const activeTab = vueRef( + savedActiveTab && savedActiveTab !== '/home' ? savedActiveTab : '' + ); + + // 设置当前模块的默认仪表盘标签：始终排在第一位且不可关闭 + function setDefaultTab(tab) { + const path = tab?.fullPath || ''; + if (!path) return; + defaultDashboardPath.value = path; + + const idx = tabList.value.findIndex(t => t.fullPath === path); + if (idx === -1) { + tabList.value.unshift(tab); + } else if (idx > 0) { + const [exist] = tabList.value.splice(idx, 1); + tabList.value.unshift(exist); + } + + if (!activeTab.value || !tabList.value.some(t => t.fullPath === activeTab.value)) { + activeTab.value = path; + } + saveTabsToStorage(tabList.value, activeTab.value); + } // 添加tab，若已存在则激活 function addTab(tab) { @@ -107,8 +125,9 @@ export const useTabsStore = defineTabsStore('tabs', () => { saveTabsToStorage(tabList.value, activeTab.value); } - // 删除指定tab并切换激活tab + // 删除指定tab并切换激活tab（默认仪表盘标签不可关闭） function removeTab(fullPath) { + if (fullPath === defaultDashboardPath.value) return; const idx = tabList.value.findIndex((t) => t.fullPath === fullPath); if (idx > -1) { tabList.value.splice(idx, 1); @@ -119,33 +138,31 @@ export const useTabsStore = defineTabsStore('tabs', () => { const newIdx = idx >= tabList.value.length ? tabList.value.length - 1 : idx; activeTab.value = tabList.value[newIdx].fullPath; } else { - // 全部关闭，兜底首页 - activeTab.value = defaultDashboardPath; + activeTab.value = defaultDashboardPath.value; } } saveTabsToStorage(tabList.value, activeTab.value); } } - // 关闭其他，只留首页和当前激活tab + // 关闭其他，只留默认仪表盘和当前激活tab function closeOthers() { tabList.value = tabList.value.filter( - (t) => t.fullPath === defaultDashboardPath || t.fullPath === activeTab.value + (t) => t.fullPath === defaultDashboardPath.value || t.fullPath === activeTab.value ); saveTabsToStorage(tabList.value, activeTab.value); } - // 关闭左侧（关闭指定tab左侧的所有tab，保留首页和目标tab） + // 关闭左侧（关闭指定tab左侧的所有tab，保留默认仪表盘和目标tab） function closeLeft(targetFullPath) { const targetIndex = tabList.value.findIndex((t) => t.fullPath === targetFullPath); if (targetIndex > -1) { - // 保留首页和目标tab及其右侧的所有tab const beforeIndex = tabList.value.slice(0, targetIndex); - const hasCloseableLeft = beforeIndex.some(t => t.fullPath !== defaultDashboardPath); + const hasCloseableLeft = beforeIndex.some(t => t.fullPath !== defaultDashboardPath.value); if (hasCloseableLeft) { tabList.value = tabList.value.filter((t, index) => - t.fullPath === defaultDashboardPath || index >= targetIndex + t.fullPath === defaultDashboardPath.value || index >= targetIndex ); // 如果关闭的tab中包含了当前激活的tab，则激活目标tab if (!tabList.value.find(t => t.fullPath === activeTab.value)) { @@ -156,17 +173,16 @@ export const useTabsStore = defineTabsStore('tabs', () => { } } - // 关闭右侧（关闭指定tab右侧的所有tab，保留首页和目标tab） + // 关闭右侧（关闭指定tab右侧的所有tab，保留默认仪表盘和目标tab） function closeRight(targetFullPath) { const targetIndex = tabList.value.findIndex((t) => t.fullPath === targetFullPath); if (targetIndex > -1) { - // 保留首页和目标tab及其左侧的所有tab const afterIndex = tabList.value.slice(targetIndex + 1); const hasCloseableRight = afterIndex.length > 0; if (hasCloseableRight) { tabList.value = tabList.value.filter((t, index) => - t.fullPath === defaultDashboardPath || index <= targetIndex + t.fullPath === defaultDashboardPath.value || index <= targetIndex ); // 如果关闭的tab中包含了当前激活的tab，则激活目标tab if (!tabList.value.find(t => t.fullPath === activeTab.value)) { @@ -177,10 +193,13 @@ export const useTabsStore = defineTabsStore('tabs', () => { } } - // 关闭全部，只留首页 + // 关闭全部，只留默认仪表盘 function closeAll() { - tabList.value = tabList.value.filter((t) => t.fullPath === defaultDashboardPath); - activeTab.value = defaultDashboardPath; + const target = defaultDashboardPath.value || activeTab.value; + tabList.value = target + ? tabList.value.filter((t) => t.fullPath === target) + : []; + activeTab.value = tabList.value.length ? target : ''; saveTabsToStorage(tabList.value, activeTab.value); } @@ -192,8 +211,9 @@ export const useTabsStore = defineTabsStore('tabs', () => { // 重置 tabs store 到初始状态（登出时使用） function resetTabs() { - tabList.value = [{ title: '首页', fullPath: defaultDashboardPath, name: 'Dashboard' }]; - activeTab.value = defaultDashboardPath; + tabList.value = []; + activeTab.value = ''; + defaultDashboardPath.value = ''; // 清除 localStorage 中的 tabs 数据 localStorage.removeItem('tabs_list'); localStorage.removeItem('active_tab'); @@ -202,7 +222,9 @@ export const useTabsStore = defineTabsStore('tabs', () => { return { tabList, activeTab, + defaultDashboardPath, addTab, + setDefaultTab, removeTab, closeOthers, closeLeft, diff --git a/backend/src/utils/theme.js b/backend/src/utils/theme.js new file mode 100644 index 0000000..8a8960f --- /dev/null +++ b/backend/src/utils/theme.js @@ -0,0 +1,64 @@ +/** + * 全站主题模式：跟随系统 / 亮色 / 暗色。 + * + * 顶栏个人中心菜单与门户页共用这一份状态，避免出现两处各自维护 + * 「是否暗色」而互相覆盖的情况。 + */ + +const MODE_KEY = "yz-theme-mode"; +// 兼容旧版本：此前只保存最终的亮/暗结果 +const LEGACY_KEY = "element-plus-theme"; + +export const THEME_OPTIONS = [ + { value: "system", label: "跟随系统" }, + { value: "light", label: "亮色" }, + { value: "dark", label: "暗色" }, +]; + +export function getThemeMode() { + try { + const mode = localStorage.getItem(MODE_KEY); + if (["system", "light", "dark"].includes(mode)) return mode; + const legacy = localStorage.getItem(LEGACY_KEY); + if (legacy === "dark" || legacy === "light") return legacy; + } catch (e) { + // localStorage 不可用时退化为跟随系统 + } + return "system"; +} + +export function isDarkByMode(mode) { + if (mode === "dark") return true; + if (mode === "light") return false; + return ( + typeof window !== "undefined" && + !!window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches + ); +} + +/** 应用主题并返回当前是否为暗色 */ +export function applyThemeMode(mode) { + const dark = isDarkByMode(mode); + document.documentElement.classList.toggle("dark", dark); + try { + localStorage.setItem(MODE_KEY, mode); + localStorage.setItem(LEGACY_KEY, dark ? "dark" : "light"); + } catch (e) { + // 存储失败不影响本次主题生效 + } + return dark; +} + +/** 监听系统配色变化，返回取消监听函数 */ +export function onSystemThemeChange(handler) { + if (typeof window === "undefined" || !window.matchMedia) return () => {}; + const query = window.matchMedia("(prefers-color-scheme: dark)"); + const listener = () => handler(query.matches); + if (query.addEventListener) { + query.addEventListener("change", listener); + return () => query.removeEventListener("change", listener); + } + query.addListener(listener); + return () => query.removeListener(listener); +} diff --git a/backend/src/views/Main.vue b/backend/src/views/Main.vue index f631f61..ce64eb3 100644 --- a/backend/src/views/Main.vue +++ b/backend/src/views/Main.vue @@ -7,12 +7,35 @@ import { useRouter, useRoute } from 'vue-router'; import { ref, watch, reactive, nextTick, onMounted, onBeforeUnmount, computed } from 'vue'; import { More, Close, CircleClose, ArrowUp, Fold, Expand } from '@element-plus/icons-vue'; import { ElMessage } from 'element-plus'; +import { useAdminNavigation } from '@/composables/useAdminNavigation'; const tabsStore = useTabsStore(); const dictStore = useDictStore(); const router = useRouter(); const route = useRoute(); -const defaultDashboardPath = '/home'; +const { defaultTab } = useAdminNavigation(); + +// 「首页」已移除：默认标签 = 当前模块的仪表盘，随模块切换自动更新 +const defaultDashboardPath = computed( + () => tabsStore.defaultDashboardPath || route.fullPath +); + +let lastDefaultPath = ''; +watch( + defaultTab, + (tab) => { + const path = tab?.path || ''; + if (!path || path === lastDefaultPath) return; + lastDefaultPath = path; + tabsStore.setDefaultTab({ + title: tab.title, + fullPath: path, + name: tab.title, + icon: tab.icon, + }); + }, + { immediate: true } +); // ========== 手机端侧栏抽屉控制 ========== const MOBILE_QUERY = '(max-width: 768px)'; @@ -144,9 +167,9 @@ watch( const handleAsideMenuClick = async (menuItem) => { const targetPath = menuItem.path; - if (targetPath === '/home') { + if (targetPath === '/home' || targetPath === '/') { tabsStore.closeAll(); - router.push('/home'); + router.push(defaultDashboardPath.value || '/'); return; } @@ -203,7 +226,7 @@ const closeOthers = () => { }; const closeAll = () => { tabsStore.closeAll(); - router.push(defaultDashboardPath); + router.push(defaultDashboardPath.value || route.fullPath); }; // 主动监听tab激活，保证切tab时内容区切换（仅用于tab点击切换，菜单点击由handleAsideMenuClick处理） // 使用 immediate: false 避免初始化时触发，使用 flush: 'post' 确保在 DOM 更新后执行 @@ -213,9 +236,9 @@ watch( // 如果新值和当前路由路径不同，且不是初始化（oldVal 不为 undefined），才进行跳转 // 注意：这个watch主要用于处理tab点击切换，菜单点击由handleAsideMenuClick直接处理 if (newVal && oldVal !== undefined && router.currentRoute.value.fullPath !== newVal) { - // 如果切换到首页，关闭其他所有tab - if (newVal === '/home') { - tabsStore.closeAll(); + // 切回默认仪表盘时，清掉其它标签页 + if (newVal === defaultDashboardPath.value) { + tabsStore.closeOthers(); } // 检查路由是否存在 @@ -391,7 +414,7 @@ function hideContextMenu() { contextMenu.tab = null; } function closeTabContextTab() { - if (contextMenu.tab && contextMenu.tab.fullPath !== defaultDashboardPath) { + if (contextMenu.tab && contextMenu.tab.fullPath !== defaultDashboardPath.value) { tabsStore.removeTab(contextMenu.tab.fullPath); } hideContextMenu(); @@ -436,15 +459,15 @@ function closeOthersContextTab() { function closeAllTabs() { tabsStore.closeAll(); hideContextMenu(); - router.push(defaultDashboardPath); + router.push(defaultDashboardPath.value || route.fullPath); } // 计算是否可以关闭左侧/右侧 const canCloseLeft = computed(() => { if (!contextMenu.tab) return false; const targetIndex = tabsStore.tabList.findIndex(t => t.fullPath === contextMenu.tab.fullPath); - // 至少左侧有一个可关闭的tab（排除首页） - return targetIndex > 0 && tabsStore.tabList.slice(0, targetIndex).some(t => t.fullPath !== defaultDashboardPath); + // 至少左侧有一个可关闭的tab（排除默认仪表盘） + return targetIndex > 0 && tabsStore.tabList.slice(0, targetIndex).some(t => t.fullPath !== defaultDashboardPath.value); }); const canCloseRight = computed(() => { @@ -478,16 +501,17 @@ const canCloseRight = computed(() => { >
- - - - - - + + + + + + +
{ pointer-events: auto !important; } + + + diff --git a/backend/src/views/home/index.vue b/backend/src/views/home/index.vue index 15c309a..4bcd8ee 100644 --- a/backend/src/views/home/index.vue +++ b/backend/src/views/home/index.vue @@ -3,6 +3,10 @@
+
+ + 云泽管理平台 +
@@ -209,7 +213,7 @@