hrp-ui-base 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hrp-ui-base",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "HRP 前端公共组件、工具方法和基础样式包",
   "type": "module",
   "sideEffects": [
@@ -68,8 +68,10 @@
   "peerDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.10.7",
+    "pinia": "^3.0.3",
     "vant": "^4.9.0",
-    "vue": "^3.5.19"
+    "vue": "^3.5.19",
+    "vue-router": "^4.0.0"
   },
   "dependencies": {
     "ali-oss": "^6.20.0",

package/src/components/layout/LayoutContainer.vue

@@ -0,0 +1,503 @@
+<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>
+</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 { 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";
+
+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 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, true, router);
+};
+
+const goHomePage = () => {
+  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 = () => {
+  router?.push({ path: "/bms/base-manage/base-information/export-center" });
+};
+
+const handleTodoClick = () => {
+  router?.push({ path: "/bms/base-manage/base-information/approval-center" });
+};
+
+const handleMessageNavigate = async (notice: NoticeVO) => {
+  await noticeStore.readNoticeInfo(notice.noticeId);
+  await noticeStore.getNoReadNoticeCount();
+  updateNum.value += 1;
+  if (notice.urlRoute.startsWith("/project/")) {
+    options?.onCrossAppNavigate?.(notice.urlRoute);
+  } else {
+    await router?.push(buildRouteLocation(notice.urlRoute));
+  }
+};
+
+const handleMessageDownload = async (notice: NoticeVO) => {
+  await noticeStore.readNoticeInfo(notice.noticeId);
+  await noticeStore.getNoReadNoticeCount();
+  updateNum.value += 1;
+  options?.onFileDownload?.(notice);
+};
+
+const handleMessageUpdateCount = async () => {
+  await noticeStore.getNoReadNoticeCount();
+  updateNum.value += 1;
+};
+
+const handlePersonalSign = () => {
+  // TODO: 打开签名弹窗
+};
+
+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") {
+      options?.onFileDownload?.(notice);
+    } else if (notice.urlRoute.startsWith("/project/")) {
+      options?.onCrossAppNavigate?.(notice.urlRoute);
+    } else {
+      await router?.push(buildRouteLocation(notice.urlRoute));
+    }
+    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;
+};
+
+// ====== 辅助函数 ======
+const buildRouteLocation = (urlRoute: string) => {
+  const [path, search] = urlRoute.split("?");
+  const query: Record<string, string> = {};
+  if (search) {
+    new URLSearchParams(search).forEach((value, key) => {
+      query[key] = value;
+    });
+  }
+  return { path: path || "/", query };
+};
+
+// ====== 生命周期 ======
+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>

package/src/components/layout/index.ts

@@ -7,6 +7,7 @@ export { default as SideMenu } from './sideMenu.vue'
 export { default as SideMenuSonList } from './sideMenuSonList.vue'
 export { default as PersonalizationGuideDialog } from './personalization-guide-dialog.vue'
 export { default as MessageNotificationDrawer } from './message/message-notification-drawer.vue'
+export { default as LayoutContainer } from './LayoutContainer.vue'
 
 // Sub-components
 export { default as DarkComponent } from './components/dark-component.vue'
@@ -20,5 +21,12 @@ export { default as AvatarComponent } from './components/avatar-component.vue'
 // Types
 export * from './types'
 
+// Stores
+export * from './stores'
+
+// Plugin
+export { createLayoutPlugin } from './plugin'
+export type { LayoutPluginOptions } from './plugin'
+
 // Message dictionary
 export { NOTIFICATION_TYPE } from './message/message-dictionary'

package/src/components/layout/plugin.ts

@@ -0,0 +1,32 @@
+import type { App } from "vue";
+import type NoticeVO from "../../api/notice/bo/NoticeVO";
+
+export interface LayoutPluginOptions {
+  /** Vue Router 实例 */
+  router: any;
+  /** 首页路径（默认 /home） */
+  homeUrl?: string;
+  /** 应用入口路径（默认 /application-entry） */
+  entryUrl?: string;
+  /** 文件下载处理函数（业务自定义） */
+  onFileDownload?: (notice: NoticeVO) => void;
+  /** PMS 跨应用跳转处理 */
+  onCrossAppNavigate?: (urlRoute: string) => void;
+}
+
+/** 全局注入 key */
+export const LAYOUT_ROUTER_KEY = "__layout_router__";
+export const LAYOUT_OPTIONS_KEY = "__layout_options__";
+
+/**
+ * 创建布局插件
+ * SCM 在 main.ts 中使用：app.use(createLayoutPlugin({ router, ... }))
+ */
+export function createLayoutPlugin(options: LayoutPluginOptions) {
+  return {
+    install(app: App) {
+      app.provide(LAYOUT_ROUTER_KEY, options.router);
+      app.provide(LAYOUT_OPTIONS_KEY, options);
+    },
+  };
+}

package/src/components/layout/stores/index.ts

@@ -0,0 +1,5 @@
+export { useLayoutConfigStore, UserConfigBo } from "./useLayoutConfigStore";
+export { useLayoutMenuStore } from "./useLayoutMenuStore";
+export { useLayoutTabsStore } from "./useLayoutTabsStore";
+export type { TabsOptions } from "./useLayoutTabsStore";
+export { useLayoutNoticeStore } from "./useLayoutNoticeStore";