hrp-ui-base 1.4.7 → 1.4.8

package/src/components/layout/LayoutContainer.vue

@@ -1,542 +1,542 @@
-<template>
-  <BaseLayout :isLeftMenu="isLeftMenu">
-    <template #header>
-      <SysHeader
-        :userConfig="userConfigData"
-        :menuList="systemMenuList"
-        :currentApplication="currentApplication"
-        :currentPath="currentPath"
-        :showSubmenuDrawer="!isLeftMenu"
-        :noticeCount="noticeStore.unReadCount"
-        :approvalCount="0"
-        :downloadActive="false"
-        :todoActive="false"
-        @menu-item-click="handleMenuItemClick"
-        @parent-click="handleParentClick"
-        @logo-click="goHomePage"
-        @collapse-change="handleCollapseChange"
-        @change-dark="handleChangeDark"
-        @change-follow-system="handleChangeFollowSystem"
-        @change-font-size="handleChangeFontSize"
-        @change-menu-position="handleChangeMenuPosition"
-        @download-click="handleDownloadClick"
-        @todo-click="handleTodoClick"
-        @message-navigate="handleMessageNavigate"
-        @message-download="handleMessageDownload"
-        @message-update-count="handleMessageUpdateCount"
-        @personal-sign="handlePersonalSign"
-        @clean-cache="handleCleanCache"
-        @logout="handleLogout"
-      />
-    </template>
-    <template #extra>
-      <PersonalizationGuideDialog
-        :visible="showNoviceGuide"
-        :menuPosition="configStore.userConfig.menuPosition"
-        :fontSize="configStore.userConfig.fontSize"
-        :dayOrNight="configStore.userConfig.dayOrNight"
-        :followSystem="configStore.userConfig.followSystem"
-        @update:visible="(val: boolean) => (showNoviceGuide = val)"
-        @preview="handleGuidePreview"
-        @finish="handleGuideFinish"
-        @skip="handleGuideSkip"
-        @restore="handleGuideRestore"
-      />
-    </template>
-    <template #side-menu>
-      <SideMenu
-        v-if="Array.isArray(leftMenuList) && leftMenuList.length > 0"
-        :menuList="leftMenuList"
-        menuPosition="left"
-        :currentPath="currentPath"
-        :navigationBar="configStore.userConfig.navigationBar"
-        @menu-item-click="handleMenuItemClick"
-        @parent-click="() => {}"
-        @collapse-change="handleCollapseChange"
-      />
-    </template>
-    <template #tabs>
-      <SysHeaderTabs
-        v-if="showTabs"
-        :tabs="tabsMenuList"
-        :activeTab="tabsMenuValue"
-        :homeUrl="options?.homeUrl || '/home'"
-        @tab-click="handleTabClick"
-        @tab-close="handleTabClose"
-        @tab-close-other="handleTabCloseOther"
-        @tab-close-all="handleTabCloseAll"
-        @tab-close-left="handleTabCloseLeft"
-        @tab-close-right="handleTabCloseRight"
-      />
-    </template>
-    <!-- 页面内容区域（默认插槽透传） -->
-    <slot></slot>
-  </BaseLayout>
-
-  <!-- 下载中心抽屉 -->
-  <ExportCenterDrawer v-model:visible="exportDrawerVisible" />
-  <!-- 审批中心抽屉 -->
-  <ApprovalCenterDrawer v-model:visible="approvalDrawerVisible" />
-  <!-- 个人签名弹窗 -->
-  <PersonalSignDialog ref="personalSignDialogRef" />
-</template>
-
-<script lang="ts" setup>
-import {
-  ref,
-  computed,
-  inject,
-  onMounted,
-  onUnmounted,
-  watch,
-  provide,
-  nextTick,
-} from "vue";
-import BaseLayout from "../base-layout/index.vue";
-import SysHeader from "./SysHeader.vue";
-import SysHeaderTabs from "./SysHeaderTabs.vue";
-import SideMenu from "./sideMenu.vue";
-import PersonalizationGuideDialog from "./personalization-guide-dialog.vue";
-import ExportCenterDrawer from "./ExportCenterDrawer.vue";
-import ApprovalCenterDrawer from "./ApprovalCenterDrawer.vue";
-import PersonalSignDialog from "./personal-sign/PersonalSignDialog.vue";
-import { useLayoutConfigStore } from "./stores/useLayoutConfigStore";
-import { useLayoutMenuStore } from "./stores/useLayoutMenuStore";
-import { useLayoutTabsStore } from "./stores/useLayoutTabsStore";
-import { useLayoutNoticeStore } from "./stores/useLayoutNoticeStore";
-import { LAYOUT_ROUTER_KEY, LAYOUT_OPTIONS_KEY } from "./plugin";
-import type { LayoutPluginOptions } from "./plugin";
-import type { TabsOptions } from "./stores/useLayoutTabsStore";
-import type HomeMenu from "../../api/bms/home/bo/HomeMenu";
-import type NoticeVO from "../../api/notice/bo/NoticeVO";
-import { ElNotification, ElMessage } from "element-plus";
-import { navigateByDomainRoute, navigateToPmsAuthRoute } from "./utils/redirect";
-
-defineOptions({ name: "LayoutContainer" });
-
-const props = defineProps({
-  /** 是否显示 tabs 栏 */
-  showTabs: { type: Boolean, default: true },
-});
-
-// ====== 注入 ======
-const router = inject<any>(LAYOUT_ROUTER_KEY);
-const options = inject<LayoutPluginOptions>(LAYOUT_OPTIONS_KEY);
-
-// ====== Stores ======
-const configStore = useLayoutConfigStore();
-const menuStore = useLayoutMenuStore();
-const tabsStore = useLayoutTabsStore();
-const noticeStore = useLayoutNoticeStore();
-
-// ====== Computed ======
-const menuPosition = computed(
-  () => configStore.userConfig.menuPosition || "top"
-);
-const isLeftMenu = computed(() => menuPosition.value === "left");
-
-const leftMenuList = computed(() => {
-  const currentSystem =
-    menuStore.routerData[0]?.children?.[menuStore.currentSecondIndex] ||
-    menuStore.routerData[0]?.children?.[0];
-  return currentSystem?.children || [];
-});
-
-const systemMenuList = computed(() => {
-  const arr: HomeMenu[] = [];
-  for (let i = 0; i < menuStore.routerData.length; i++) {
-    arr.push(...(menuStore.routerData[i].children || []));
-  }
-  return arr;
-});
-
-const currentApplication = computed(() => menuStore.currentApplication);
-
-const currentPath = computed(() => {
-  return router?.currentRoute?.value?.path || "";
-});
-
-const tabsMenuList = computed(() => tabsStore.tabsMenuList as any[]);
-const tabsMenuValue = computed(() => tabsStore.tabsMenuValue);
-
-const userConfigData = computed(() => ({
-  fontSize: configStore.userConfig.fontSize,
-  dayOrNight: configStore.userConfig.dayOrNight,
-  followSystem: configStore.userConfig.followSystem,
-  menuPosition: configStore.userConfig.menuPosition,
-  navigationBar: configStore.userConfig.navigationBar,
-  noviceGuide: configStore.userConfig.noviceGuide,
-  avatar: configStore.userConfig.avatar,
-  fileUploadType: configStore.userConfig.fileUploadType,
-}));
-
-// ====== 状态 ======
-const showNoviceGuide = ref(false);
-const exportDrawerVisible = ref(false);
-const approvalDrawerVisible = ref(false);
-const updateNum = ref<number>(0);
-const notificationRefs = ref<Map<string, any>>(new Map());
-
-provide("updateNum", updateNum);
-
-// ====== 菜单同步 ======
-const syncSystemMenuByRoute = (path: string) => {
-  const systemList = menuStore.routerData[0]?.children || [];
-  for (let i = 0; i < systemList.length; i++) {
-    if (hasMenuPath(systemList[i], path)) {
-      if (i !== menuStore.currentSecondIndex) {
-        menuStore.changeCurrentSecondIndex(i, false);
-      }
-      return;
-    }
-  }
-};
-
-const hasMenuPath = (menu: HomeMenu, path: string): boolean => {
-  if (isSameMenuPath(menu.url, path)) return true;
-  return !!menu.children?.some((child: HomeMenu) => hasMenuPath(child, path));
-};
-
-const isSameMenuPath = (menuUrl?: string, currentPath?: string) => {
-  if (!menuUrl || !currentPath) return false;
-  return menuUrl.split("?")[0] === currentPath.split("?")[0];
-};
-
-// ====== SysHeader 事件处理 ======
-const handleMenuItemClick = (item: HomeMenu) => {
-  if (item.url && currentPath.value !== item.url) {
-    router?.push({ path: item.url });
-  }
-};
-
-const handleParentClick = (_item: HomeMenu, index: number) => {
-  menuStore.changeCurrentSecondIndex(index, menuPosition.value === "left", router);
-};
-
-const goHomePage = () => {
-  const subApps = [
-    "imd",
-    "agoal",
-    "scm",
-    "bms",
-    "coc",
-    "hws",
-    "kbs",
-    "fms",
-    "hrm",
-    "hrms",
-    "itrms",
-    "personalization",
-    "projectManagement",
-  ];
-  const pathname = window.location.pathname;
-  // 获取最后一个 / 之间的内容
-  const segments = pathname.replace(/\/$/, "").split("/");
-  const lastSegment = segments[segments.length - 1];
-
-  if (subApps.includes(lastSegment)) {
-    // 删除最后一个路径段
-    segments.pop();
-    const basePath = segments.join("/") || "/";
-    const targetUrl =
-      window.location.origin +
-      (basePath.endsWith("/") ? basePath : basePath + "/") +
-      "#/application-entry";
-    window.location.replace(targetUrl);
-  } else {
-    router?.replace({ path: options?.entryUrl || "/application-entry" });
-  }
-};
-
-const handleCollapseChange = (collapsed: boolean) => {
-  configStore.userConfig.navigationBar = collapsed;
-  configStore.changeUserConfig();
-};
-
-const handleChangeDark = (value: string, ref?: HTMLElement) => {
-  configStore.changeDarkAnimation(
-    value as "day" | "night",
-    ref
-      ? {
-          clientX: ref.getBoundingClientRect().x,
-          clientY: ref.getBoundingClientRect().y,
-        }
-      : undefined
-  );
-};
-
-const handleChangeFollowSystem = (value: boolean) => {
-  configStore.followSystemColorModel(value);
-};
-
-const handleChangeFontSize = (value: string) => {
-  configStore.changeFontSize(value as "small" | "medium" | "large");
-};
-
-const handleChangeMenuPosition = (value: string) => {
-  configStore.changeMenuPosition(value as "top" | "left");
-};
-
-const handleDownloadClick = () => {
-  exportDrawerVisible.value = true;
-};
-
-const handleTodoClick = () => {
-  approvalDrawerVisible.value = true;
-};
-
-const handleMessageNavigate = async (notice: NoticeVO) => {
-  await noticeStore.readNoticeInfo(notice.noticeId);
-  await noticeStore.getNoReadNoticeCount();
-  updateNum.value += 1;
-  if (notice.noticeType === "file-notice") return;
-  if (!notice.urlRoute) return;
-  if (notice.urlRoute.startsWith("/project/")) {
-    navigateToPmsAuthRoute(notice.urlRoute);
-  } else {
-    await navigateByDomainRoute(notice.urlRoute, router);
-  }
-};
-
-const handleMessageDownload = async (notice: NoticeVO) => {
-  await noticeStore.readNoticeInfo(notice.noticeId);
-  await noticeStore.getNoReadNoticeCount();
-  updateNum.value += 1;
-  if (options?.onFileDownload) {
-    options.onFileDownload(notice);
-  }
-};
-
-const handleMessageUpdateCount = async () => {
-  await noticeStore.getNoReadNoticeCount();
-  updateNum.value += 1;
-};
-
-const personalSignDialogRef = ref<InstanceType<typeof PersonalSignDialog>>();
-const handlePersonalSign = () => {
-  personalSignDialogRef.value?.open();
-};
-
-const handleCleanCache = () => {
-  sessionStorage.clear();
-  ElMessage.success("缓存清理成功");
-};
-
-const handleLogout = () => {
-  menuStore.doExitLogin();
-};
-
-// ====== Tabs 事件处理 ======
-const handleTabClick = (tab: any) => {
-  if (tab.path !== currentPath.value) {
-    router?.push({ path: tab.path, query: tab.query });
-  }
-};
-
-const handleTabClose = (tab: any) => {
-  tabsStore.removeTabs(tab.path, router);
-};
-
-const handleTabCloseOther = (tab: any) => {
-  tabsStore.closeMultipleTab(tab.path);
-  if (currentPath.value !== tab.path) {
-    router?.push({ path: tab.path, query: tab.query });
-  }
-};
-
-const handleTabCloseAll = () => {
-  tabsStore.closeAllTabs(router);
-};
-
-const handleTabCloseLeft = (tab: any) => {
-  tabsStore.closeLeftTabs(tab.path, router);
-};
-
-const handleTabCloseRight = (tab: any) => {
-  tabsStore.closeRightTabs(tab.path, router);
-};
-
-// ====== 新手引导事件 ======
-const handleGuidePreview = (config: {
-  menuPosition: string;
-  fontSize: string;
-  colorMode: string;
-  followSystem: boolean;
-}) => {
-  configStore.changeFontSize(config.fontSize as "small" | "medium" | "large", true);
-  configStore.changeDark(config.colorMode as "day" | "night", true);
-  configStore.userConfig.menuPosition = config.menuPosition as "top" | "left";
-};
-
-const handleGuideFinish = (config: {
-  menuPosition: string;
-  fontSize: string;
-  colorMode: string;
-}) => {
-  configStore.userConfig.menuPosition = config.menuPosition as "top" | "left";
-  configStore.changeFontSize(config.fontSize as "small" | "medium" | "large", true);
-  configStore.changeDark(config.colorMode as "day" | "night", true);
-  configStore.changeNoviceGuide(false);
-  showNoviceGuide.value = false;
-};
-
-const handleGuideSkip = () => {
-  configStore.changeNoviceGuide(false);
-  showNoviceGuide.value = false;
-};
-
-const handleGuideRestore = (config: {
-  menuPosition: string;
-  fontSize: string;
-  followSystem: boolean;
-  dayOrNight: string;
-}) => {
-  configStore.userConfig.menuPosition = config.menuPosition as "top" | "left";
-  configStore.changeFontSize(config.fontSize as "small" | "medium" | "large", true);
-  configStore.followSystemColorModel(config.followSystem, true);
-};
-
-// ====== 通知弹窗 ======
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-const showNoticeNotification = async (notice: NoticeVO) => {
-  const spanId = `notice-action-${notice.noticeId}`;
-  const noticeId = notice.noticeId;
-
-  const closeNotification = () => {
-    const inst = notificationRefs.value.get(noticeId);
-    if (inst) {
-      inst.close();
-      notificationRefs.value.delete(noticeId);
-    }
-  };
-
-  const handleClick = async () => {
-    await noticeStore.readNoticeInfo(notice.noticeId);
-    await noticeStore.getNoReadNoticeCount();
-    updateNum.value += 1;
-    if (notice.noticeType === "file-notice") {
-      if (options?.onFileDownload) {
-        options.onFileDownload(notice);
-      }
-    } else if (notice.urlRoute?.startsWith("/project/")) {
-      navigateToPmsAuthRoute(notice.urlRoute);
-    } else {
-      await navigateByDomainRoute(notice.urlRoute, router);
-    }
-    closeNotification();
-  };
-
-  const inst = ElNotification({
-    dangerouslyUseHTMLString: true,
-    title: notice.noticeTitle,
-    message: `<div>
-      <span style="display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.5em;max-height:7.5em">
-        ${notice.noticeContent}
-      </span>
-    </div>
-    <div style="text-align:right">
-      <span id="${spanId}" style="color:#409eff;border-bottom:1px solid #409eff;cursor:pointer">
-        ${notice.noticeType === "file-notice" ? "下载" : "查看详情"}
-      </span>
-    </div>`,
-    duration: 5000,
-    customClass: "notification-group",
-    offset: 40,
-    onClose: () => notificationRefs.value.delete(noticeId),
-    onClick: handleClick,
-  });
-
-  notificationRefs.value.set(noticeId, inst);
-
-  nextTick(() => {
-    const spanEl = document.getElementById(spanId);
-    if (spanEl) {
-      spanEl.addEventListener("click", (e) => {
-        e.stopPropagation();
-        handleClick();
-      });
-    }
-  });
-
-  await noticeStore.getNoReadNoticeCount();
-  updateNum.value += 1;
-};
-
-// ====== 生命周期 ======
-onMounted(async () => {
-  // 初始化用户配置
-  configStore.initUserConfig();
-  await configStore.getUserConfig();
-
-  // 加载菜单
-  const routePath = router?.currentRoute?.value?.path || "";
-  await menuStore.getDomainAndHomeMenu(routePath, router);
-
-  // 恢复标签页
-  tabsStore.restoreTabsFromStorage();
-
-  // 新手引导
-  if (configStore.userConfig.noviceGuide) {
-    showNoviceGuide.value = true;
-  }
-
-  // 启动消息轮询
-  noticeStore.startPolling(async (notices) => {
-    for (let i = 0; i < notices.length; i++) {
-      showNoticeNotification(notices[i]);
-      if (i < notices.length - 1) {
-        await delay(100);
-      }
-    }
-  });
-});
-
-onUnmounted(() => {
-  noticeStore.stopPolling();
-});
-
-// 监听路由变化，添加标签页
-watch(
-  () => router?.currentRoute?.value,
-  (toPath: any) => {
-    if (!toPath?.path || toPath.path === "/") return;
-    const params: TabsOptions = {
-      title:
-        (toPath.meta?.title as string) ||
-        (toPath.name as string) ||
-        "未命名页面",
-      path: toPath.path,
-      query: toPath.query as Record<string, any>,
-      name: toPath.name as string,
-      cachedCode: toPath.meta?.cachedCode as string,
-    };
-    tabsStore.addTabs(params);
-  },
-  { immediate: true, deep: true }
-);
-
-// 监听路由同步顶部菜单
-watch(
-  [() => currentPath.value, () => menuStore.routerData],
-  ([routePath]) => {
-    if (routePath) syncSystemMenuByRoute(routePath);
-  },
-  { immediate: true, deep: true }
-);
-</script>
-
-<style lang="scss">
-.notification-group {
-  .el-notification__group {
-    position: static;
-    width: 100%;
-  }
-  .el-notification__content {
-    word-break: break-all;
-  }
-}
-.notification-group:hover {
-  cursor: pointer;
-}
-</style>
+<template>
+  <BaseLayout :isLeftMenu="isLeftMenu">
+    <template #header>
+      <SysHeader
+        :userConfig="userConfigData"
+        :menuList="systemMenuList"
+        :currentApplication="currentApplication"
+        :currentPath="currentPath"
+        :showSubmenuDrawer="!isLeftMenu"
+        :noticeCount="noticeStore.unReadCount"
+        :approvalCount="0"
+        :downloadActive="false"
+        :todoActive="false"
+        @menu-item-click="handleMenuItemClick"
+        @parent-click="handleParentClick"
+        @logo-click="goHomePage"
+        @collapse-change="handleCollapseChange"
+        @change-dark="handleChangeDark"
+        @change-follow-system="handleChangeFollowSystem"
+        @change-font-size="handleChangeFontSize"
+        @change-menu-position="handleChangeMenuPosition"
+        @download-click="handleDownloadClick"
+        @todo-click="handleTodoClick"
+        @message-navigate="handleMessageNavigate"
+        @message-download="handleMessageDownload"
+        @message-update-count="handleMessageUpdateCount"
+        @personal-sign="handlePersonalSign"
+        @clean-cache="handleCleanCache"
+        @logout="handleLogout"
+      />
+    </template>
+    <template #extra>
+      <PersonalizationGuideDialog
+        :visible="showNoviceGuide"
+        :menuPosition="configStore.userConfig.menuPosition"
+        :fontSize="configStore.userConfig.fontSize"
+        :dayOrNight="configStore.userConfig.dayOrNight"
+        :followSystem="configStore.userConfig.followSystem"
+        @update:visible="(val: boolean) => (showNoviceGuide = val)"
+        @preview="handleGuidePreview"
+        @finish="handleGuideFinish"
+        @skip="handleGuideSkip"
+        @restore="handleGuideRestore"
+      />
+    </template>
+    <template #side-menu>
+      <SideMenu
+        v-if="Array.isArray(leftMenuList) && leftMenuList.length > 0"
+        :menuList="leftMenuList"
+        menuPosition="left"
+        :currentPath="currentPath"
+        :navigationBar="configStore.userConfig.navigationBar"
+        @menu-item-click="handleMenuItemClick"
+        @parent-click="() => {}"
+        @collapse-change="handleCollapseChange"
+      />
+    </template>
+    <template #tabs>
+      <SysHeaderTabs
+        v-if="showTabs"
+        :tabs="tabsMenuList"
+        :activeTab="tabsMenuValue"
+        :homeUrl="options?.homeUrl || '/home'"
+        @tab-click="handleTabClick"
+        @tab-close="handleTabClose"
+        @tab-close-other="handleTabCloseOther"
+        @tab-close-all="handleTabCloseAll"
+        @tab-close-left="handleTabCloseLeft"
+        @tab-close-right="handleTabCloseRight"
+      />
+    </template>
+    <!-- 页面内容区域（默认插槽透传） -->
+    <slot></slot>
+  </BaseLayout>
+
+  <!-- 下载中心抽屉 -->
+  <ExportCenterDrawer v-model:visible="exportDrawerVisible" />
+  <!-- 审批中心抽屉 -->
+  <ApprovalCenterDrawer v-model:visible="approvalDrawerVisible" />
+  <!-- 个人签名弹窗 -->
+  <PersonalSignDialog ref="personalSignDialogRef" />
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  inject,
+  onMounted,
+  onUnmounted,
+  watch,
+  provide,
+  nextTick,
+} from "vue";
+import BaseLayout from "../base-layout/index.vue";
+import SysHeader from "./SysHeader.vue";
+import SysHeaderTabs from "./SysHeaderTabs.vue";
+import SideMenu from "./sideMenu.vue";
+import PersonalizationGuideDialog from "./personalization-guide-dialog.vue";
+import ExportCenterDrawer from "./ExportCenterDrawer.vue";
+import ApprovalCenterDrawer from "./ApprovalCenterDrawer.vue";
+import PersonalSignDialog from "./personal-sign/PersonalSignDialog.vue";
+import { useLayoutConfigStore } from "./stores/useLayoutConfigStore";
+import { useLayoutMenuStore } from "./stores/useLayoutMenuStore";
+import { useLayoutTabsStore } from "./stores/useLayoutTabsStore";
+import { useLayoutNoticeStore } from "./stores/useLayoutNoticeStore";
+import { LAYOUT_ROUTER_KEY, LAYOUT_OPTIONS_KEY } from "./plugin";
+import type { LayoutPluginOptions } from "./plugin";
+import type { TabsOptions } from "./stores/useLayoutTabsStore";
+import type HomeMenu from "../../api/bms/home/bo/HomeMenu";
+import type NoticeVO from "../../api/notice/bo/NoticeVO";
+import { ElNotification, ElMessage } from "element-plus";
+import { navigateByDomainRoute, navigateToPmsAuthRoute } from "./utils/redirect";
+
+defineOptions({ name: "LayoutContainer" });
+
+const props = defineProps({
+  /** 是否显示 tabs 栏 */
+  showTabs: { type: Boolean, default: true },
+});
+
+// ====== 注入 ======
+const router = inject<any>(LAYOUT_ROUTER_KEY);
+const options = inject<LayoutPluginOptions>(LAYOUT_OPTIONS_KEY);
+
+// ====== Stores ======
+const configStore = useLayoutConfigStore();
+const menuStore = useLayoutMenuStore();
+const tabsStore = useLayoutTabsStore();
+const noticeStore = useLayoutNoticeStore();
+
+// ====== Computed ======
+const menuPosition = computed(
+  () => configStore.userConfig.menuPosition || "top"
+);
+const isLeftMenu = computed(() => menuPosition.value === "left");
+
+const leftMenuList = computed(() => {
+  const currentSystem =
+    menuStore.routerData[0]?.children?.[menuStore.currentSecondIndex] ||
+    menuStore.routerData[0]?.children?.[0];
+  return currentSystem?.children || [];
+});
+
+const systemMenuList = computed(() => {
+  const arr: HomeMenu[] = [];
+  for (let i = 0; i < menuStore.routerData.length; i++) {
+    arr.push(...(menuStore.routerData[i].children || []));
+  }
+  return arr;
+});
+
+const currentApplication = computed(() => menuStore.currentApplication);
+
+const currentPath = computed(() => {
+  return router?.currentRoute?.value?.path || "";
+});
+
+const tabsMenuList = computed(() => tabsStore.tabsMenuList as any[]);
+const tabsMenuValue = computed(() => tabsStore.tabsMenuValue);
+
+const userConfigData = computed(() => ({
+  fontSize: configStore.userConfig.fontSize,
+  dayOrNight: configStore.userConfig.dayOrNight,
+  followSystem: configStore.userConfig.followSystem,
+  menuPosition: configStore.userConfig.menuPosition,
+  navigationBar: configStore.userConfig.navigationBar,
+  noviceGuide: configStore.userConfig.noviceGuide,
+  avatar: configStore.userConfig.avatar,
+  fileUploadType: configStore.userConfig.fileUploadType,
+}));
+
+// ====== 状态 ======
+const showNoviceGuide = ref(false);
+const exportDrawerVisible = ref(false);
+const approvalDrawerVisible = ref(false);
+const updateNum = ref<number>(0);
+const notificationRefs = ref<Map<string, any>>(new Map());
+
+provide("updateNum", updateNum);
+
+// ====== 菜单同步 ======
+const syncSystemMenuByRoute = (path: string) => {
+  const systemList = menuStore.routerData[0]?.children || [];
+  for (let i = 0; i < systemList.length; i++) {
+    if (hasMenuPath(systemList[i], path)) {
+      if (i !== menuStore.currentSecondIndex) {
+        menuStore.changeCurrentSecondIndex(i, false);
+      }
+      return;
+    }
+  }
+};
+
+const hasMenuPath = (menu: HomeMenu, path: string): boolean => {
+  if (isSameMenuPath(menu.url, path)) return true;
+  return !!menu.children?.some((child: HomeMenu) => hasMenuPath(child, path));
+};
+
+const isSameMenuPath = (menuUrl?: string, currentPath?: string) => {
+  if (!menuUrl || !currentPath) return false;
+  return menuUrl.split("?")[0] === currentPath.split("?")[0];
+};
+
+// ====== SysHeader 事件处理 ======
+const handleMenuItemClick = (item: HomeMenu) => {
+  if (item.url && currentPath.value !== item.url) {
+    router?.push({ path: item.url });
+  }
+};
+
+const handleParentClick = (_item: HomeMenu, index: number) => {
+  menuStore.changeCurrentSecondIndex(index, menuPosition.value === "left", router);
+};
+
+const goHomePage = () => {
+  const subApps = [
+    "imd",
+    "agoal",
+    "scm",
+    "bms",
+    "coc",
+    "hws",
+    "kbs",
+    "fms",
+    "hrm",
+    "hrms",
+    "itrms",
+    "personalization",
+    "projectManagement",
+  ];
+  const pathname = window.location.pathname;
+  // 获取最后一个 / 之间的内容
+  const segments = pathname.replace(/\/$/, "").split("/");
+  const lastSegment = segments[segments.length - 1];
+
+  if (subApps.includes(lastSegment)) {
+    // 删除最后一个路径段
+    segments.pop();
+    const basePath = segments.join("/") || "/";
+    const targetUrl =
+      window.location.origin +
+      (basePath.endsWith("/") ? basePath : basePath + "/") +
+      "#/application-entry";
+    window.location.replace(targetUrl);
+  } else {
+    router?.replace({ path: options?.entryUrl || "/application-entry" });
+  }
+};
+
+const handleCollapseChange = (collapsed: boolean) => {
+  configStore.userConfig.navigationBar = collapsed;
+  configStore.changeUserConfig();
+};
+
+const handleChangeDark = (value: string, ref?: HTMLElement) => {
+  configStore.changeDarkAnimation(
+    value as "day" | "night",
+    ref
+      ? {
+          clientX: ref.getBoundingClientRect().x,
+          clientY: ref.getBoundingClientRect().y,
+        }
+      : undefined
+  );
+};
+
+const handleChangeFollowSystem = (value: boolean) => {
+  configStore.followSystemColorModel(value);
+};
+
+const handleChangeFontSize = (value: string) => {
+  configStore.changeFontSize(value as "small" | "medium" | "large");
+};
+
+const handleChangeMenuPosition = (value: string) => {
+  configStore.changeMenuPosition(value as "top" | "left");
+};
+
+const handleDownloadClick = () => {
+  exportDrawerVisible.value = true;
+};
+
+const handleTodoClick = () => {
+  approvalDrawerVisible.value = true;
+};
+
+const handleMessageNavigate = async (notice: NoticeVO) => {
+  await noticeStore.readNoticeInfo(notice.noticeId);
+  await noticeStore.getNoReadNoticeCount();
+  updateNum.value += 1;
+  if (notice.noticeType === "file-notice") return;
+  if (!notice.urlRoute) return;
+  if (notice.urlRoute.startsWith("/project/")) {
+    navigateToPmsAuthRoute(notice.urlRoute);
+  } else {
+    await navigateByDomainRoute(notice.urlRoute, router);
+  }
+};
+
+const handleMessageDownload = async (notice: NoticeVO) => {
+  await noticeStore.readNoticeInfo(notice.noticeId);
+  await noticeStore.getNoReadNoticeCount();
+  updateNum.value += 1;
+  if (options?.onFileDownload) {
+    options.onFileDownload(notice);
+  }
+};
+
+const handleMessageUpdateCount = async () => {
+  await noticeStore.getNoReadNoticeCount();
+  updateNum.value += 1;
+};
+
+const personalSignDialogRef = ref<InstanceType<typeof PersonalSignDialog>>();
+const handlePersonalSign = () => {
+  personalSignDialogRef.value?.open();
+};
+
+const handleCleanCache = () => {
+  sessionStorage.clear();
+  ElMessage.success("缓存清理成功");
+};
+
+const handleLogout = () => {
+  menuStore.doExitLogin();
+};
+
+// ====== Tabs 事件处理 ======
+const handleTabClick = (tab: any) => {
+  if (tab.path !== currentPath.value) {
+    router?.push({ path: tab.path, query: tab.query });
+  }
+};
+
+const handleTabClose = (tab: any) => {
+  tabsStore.removeTabs(tab.path, router);
+};
+
+const handleTabCloseOther = (tab: any) => {
+  tabsStore.closeMultipleTab(tab.path);
+  if (currentPath.value !== tab.path) {
+    router?.push({ path: tab.path, query: tab.query });
+  }
+};
+
+const handleTabCloseAll = () => {
+  tabsStore.closeAllTabs(router);
+};
+
+const handleTabCloseLeft = (tab: any) => {
+  tabsStore.closeLeftTabs(tab.path, router);
+};
+
+const handleTabCloseRight = (tab: any) => {
+  tabsStore.closeRightTabs(tab.path, router);
+};
+
+// ====== 新手引导事件 ======
+const handleGuidePreview = (config: {
+  menuPosition: string;
+  fontSize: string;
+  colorMode: string;
+  followSystem: boolean;
+}) => {
+  configStore.changeFontSize(config.fontSize as "small" | "medium" | "large", true);
+  configStore.changeDark(config.colorMode as "day" | "night", true);
+  configStore.userConfig.menuPosition = config.menuPosition as "top" | "left";
+};
+
+const handleGuideFinish = (config: {
+  menuPosition: string;
+  fontSize: string;
+  colorMode: string;
+}) => {
+  configStore.userConfig.menuPosition = config.menuPosition as "top" | "left";
+  configStore.changeFontSize(config.fontSize as "small" | "medium" | "large", true);
+  configStore.changeDark(config.colorMode as "day" | "night", true);
+  configStore.changeNoviceGuide(false);
+  showNoviceGuide.value = false;
+};
+
+const handleGuideSkip = () => {
+  configStore.changeNoviceGuide(false);
+  showNoviceGuide.value = false;
+};
+
+const handleGuideRestore = (config: {
+  menuPosition: string;
+  fontSize: string;
+  followSystem: boolean;
+  dayOrNight: string;
+}) => {
+  configStore.userConfig.menuPosition = config.menuPosition as "top" | "left";
+  configStore.changeFontSize(config.fontSize as "small" | "medium" | "large", true);
+  configStore.followSystemColorModel(config.followSystem, true);
+};
+
+// ====== 通知弹窗 ======
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const showNoticeNotification = async (notice: NoticeVO) => {
+  const spanId = `notice-action-${notice.noticeId}`;
+  const noticeId = notice.noticeId;
+
+  const closeNotification = () => {
+    const inst = notificationRefs.value.get(noticeId);
+    if (inst) {
+      inst.close();
+      notificationRefs.value.delete(noticeId);
+    }
+  };
+
+  const handleClick = async () => {
+    await noticeStore.readNoticeInfo(notice.noticeId);
+    await noticeStore.getNoReadNoticeCount();
+    updateNum.value += 1;
+    if (notice.noticeType === "file-notice") {
+      if (options?.onFileDownload) {
+        options.onFileDownload(notice);
+      }
+    } else if (notice.urlRoute?.startsWith("/project/")) {
+      navigateToPmsAuthRoute(notice.urlRoute);
+    } else {
+      await navigateByDomainRoute(notice.urlRoute, router);
+    }
+    closeNotification();
+  };
+
+  const inst = ElNotification({
+    dangerouslyUseHTMLString: true,
+    title: notice.noticeTitle,
+    message: `<div>
+      <span style="display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.5em;max-height:7.5em">
+        ${notice.noticeContent}
+      </span>
+    </div>
+    <div style="text-align:right">
+      <span id="${spanId}" style="color:#409eff;border-bottom:1px solid #409eff;cursor:pointer">
+        ${notice.noticeType === "file-notice" ? "下载" : "查看详情"}
+      </span>
+    </div>`,
+    duration: 5000,
+    customClass: "notification-group",
+    offset: 40,
+    onClose: () => notificationRefs.value.delete(noticeId),
+    onClick: handleClick,
+  });
+
+  notificationRefs.value.set(noticeId, inst);
+
+  nextTick(() => {
+    const spanEl = document.getElementById(spanId);
+    if (spanEl) {
+      spanEl.addEventListener("click", (e) => {
+        e.stopPropagation();
+        handleClick();
+      });
+    }
+  });
+
+  await noticeStore.getNoReadNoticeCount();
+  updateNum.value += 1;
+};
+
+// ====== 生命周期 ======
+onMounted(async () => {
+  // 初始化用户配置
+  configStore.initUserConfig();
+  await configStore.getUserConfig();
+
+  // 加载菜单
+  const routePath = router?.currentRoute?.value?.path || "";
+  await menuStore.getDomainAndHomeMenu(routePath, router);
+
+  // 恢复标签页
+  tabsStore.restoreTabsFromStorage();
+
+  // 新手引导
+  if (configStore.userConfig.noviceGuide) {
+    showNoviceGuide.value = true;
+  }
+
+  // 启动消息轮询
+  noticeStore.startPolling(async (notices) => {
+    for (let i = 0; i < notices.length; i++) {
+      showNoticeNotification(notices[i]);
+      if (i < notices.length - 1) {
+        await delay(100);
+      }
+    }
+  });
+});
+
+onUnmounted(() => {
+  noticeStore.stopPolling();
+});
+
+// 监听路由变化，添加标签页
+watch(
+  () => router?.currentRoute?.value,
+  (toPath: any) => {
+    if (!toPath?.path || toPath.path === "/") return;
+    const params: TabsOptions = {
+      title:
+        (toPath.meta?.title as string) ||
+        (toPath.name as string) ||
+        "未命名页面",
+      path: toPath.path,
+      query: toPath.query as Record<string, any>,
+      name: toPath.name as string,
+      cachedCode: toPath.meta?.cachedCode as string,
+    };
+    tabsStore.addTabs(params);
+  },
+  { immediate: true, deep: true }
+);
+
+// 监听路由同步顶部菜单
+watch(
+  [() => currentPath.value, () => menuStore.routerData],
+  ([routePath]) => {
+    if (routePath) syncSystemMenuByRoute(routePath);
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
+<style lang="scss">
+.notification-group {
+  .el-notification__group {
+    position: static;
+    width: 100%;
+  }
+  .el-notification__content {
+    word-break: break-all;
+  }
+}
+.notification-group:hover {
+  cursor: pointer;
+}
+</style>