hrp-ui-base 1.0.1 → 1.0.3

package/src/components/layout/sideMenu.vue

@@ -0,0 +1,542 @@
+<template>
+  <div
+    id="header-sidebar"
+    ref="sidebarRef"
+    :class="[
+      'menu-position-' + menuPosition,
+      { 'is-left-collapsed': isLeftMenuCollapsed },
+    ]"
+    @mouseleave="onMenuAreaLeave"
+    @click.stop
+  >
+    <!-- 左箭头 -->
+    <div
+      v-show="menuPosition === 'top' && showArrows"
+      class="scroll-arrow scroll-arrow-left"
+      @click="scrollLeft"
+    >
+      <el-icon><ArrowLeft /></el-icon>
+    </div>
+
+    <!-- 菜单滚动区域 -->
+    <div
+      class="menu-scroll-wrapper"
+      ref="scrollWrapperRef"
+      @wheel="handleWheel"
+    >
+      <div class="menu-scroll-content" ref="scrollContentRef">
+        <template
+          v-for="(item, index) in sidebarRouters"
+          :key="item.menuId + index"
+        >
+        <div
+          :title="isLeftMenuCollapsed ? item.menuName : undefined"
+          class="menu-tab-item"
+          :class="{ 'is-active': activeIndex === index || isMenuExpanded(index) || collapsedFlyoutIndex === index || (!drawerVisible && selectedIndex === index) }"
+          @mouseenter="handleMenuEnter(item, index)"
+          @click="handleMenuClick(item, index, $event)"
+        >
+          <span v-if="menuPosition === 'left'" class="menu-tab-icon">
+            <img
+              v-if="getMenuIconDisplay(item).imageName"
+              :key="getMenuIconDisplay(item).imageName"
+              class="menu-tab-icon-img"
+              :src="getMenuIconUrl(getMenuIconDisplay(item).imageName)"
+              :alt="getMenuIconDisplay(item).imageName"
+              @error="handleMenuTabIconError($event, item)"
+            />
+            <span v-else class="menu-tab-icon-fallback">{{ getMenuShortName(getMenuIconDisplay(item).fallbackName) }}</span>
+          </span>
+          <span v-if="!isLeftMenuCollapsed" class="menu-tab-name">{{ item.menuName }}</span>
+          <el-icon
+            v-if="shouldShowMenuArrow(item)"
+            class="menu-tab-arrow"
+            :class="{ 'is-open': menuPosition === 'left' ? isMenuExpanded(index) : activeIndex === index && drawerVisible }"
+          ><ArrowDown /></el-icon>
+        </div>
+        <div
+          v-if="menuPosition === 'left' && !isLeftMenuCollapsed && isMenuExpanded(index) && item.children && item.children.length > 0"
+          class="left-inline-submenu"
+        >
+          <template
+            v-for="child in item.children"
+            :key="child.menuId || child.url || child.menuName"
+          >
+            <div
+              v-if="child.children && child.children.length > 0"
+              class="left-submenu-group"
+            >
+              <div
+                class="left-submenu-group-title"
+                :class="{ 'is-active': isActive(child.url) }"
+                @click.stop="handleSubMenuClick(child)"
+              >
+                {{ child.menuName }}
+              </div>
+              <div
+                v-for="grandchild in child.children"
+                :key="grandchild.menuId || grandchild.url || grandchild.menuName"
+                class="left-submenu-item with-icon"
+                :class="{ 'is-active': isActive(grandchild.url) }"
+                @click.stop="handleSubMenuClick(grandchild)"
+              >
+                <span class="left-page-icon">
+                  <img
+                    v-if="!failedMenuIconSet.has(grandchild.menuName)"
+                    class="left-page-icon-img"
+                    :src="getMenuIconUrl(grandchild.menuName)"
+                    :alt="grandchild.menuName"
+                    @error="handleMenuIconError($event, grandchild.menuName)"
+                  />
+                  <span v-else class="left-page-icon-fallback">{{ getMenuShortName(grandchild.menuName) }}</span>
+                </span>
+                <span>{{ grandchild.menuName }}</span>
+              </div>
+            </div>
+            <div
+              v-else
+              class="left-submenu-item with-icon"
+              :class="{ 'is-active': isActive(child.url) }"
+              @click.stop="handleSubMenuClick(child)"
+            >
+              <span class="left-page-icon">
+                <img
+                  v-if="!failedMenuIconSet.has(child.menuName)"
+                  class="left-page-icon-img"
+                  :src="getMenuIconUrl(child.menuName)"
+                  :alt="child.menuName"
+                  @error="handleMenuIconError($event, child.menuName)"
+                />
+                <span v-else class="left-page-icon-fallback">{{ getMenuShortName(child.menuName) }}</span>
+              </span>
+              <span>{{ child.menuName }}</span>
+            </div>
+          </template>
+        </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- 右箭头 -->
+    <div
+      v-show="menuPosition === 'top' && showArrows"
+      class="scroll-arrow scroll-arrow-right"
+      @click="scrollRight"
+    >
+      <el-icon><ArrowRight /></el-icon>
+    </div>
+
+    <div
+      v-if="menuPosition === 'left'"
+      class="left-collapse-control"
+      @click="toggleLeftMenuCollapse"
+    >
+      <el-icon>
+        <Expand v-if="isLeftMenuCollapsed" />
+        <Fold v-else />
+      </el-icon>
+      <span v-if="!isLeftMenuCollapsed">收起菜单</span>
+    </div>
+
+    <!-- 抽屉内容 -->
+    <teleport to="body">
+      <transition name="side-drawer-slide">
+        <div
+          v-if="drawerVisible && menuPosition === 'top' && showSubmenuDrawer"
+          class="side-menu-drawer"
+          @mouseenter="onDrawerEnter"
+          @mouseleave="onDrawerLeave"
+          @click.stop
+        >
+          <sideMenuSonList
+            :currentData="currentMenuChildren"
+            :currentPath="currentPath"
+            @menu-click="onSonMenuClick"
+          />
+        </div>
+      </transition>
+    </teleport>
+
+    <!-- 左侧菜单收起时飞出面板 -->
+    <teleport to="body">
+      <transition name="left-collapsed-flyout">
+        <div
+          v-if="menuPosition === 'left' && isLeftMenuCollapsed && collapsedFlyoutMenu"
+          class="left-collapsed-flyout"
+          :style="{ top: collapsedFlyoutTop + 'px' }"
+          @click.stop
+        >
+          <template
+            v-for="child in collapsedFlyoutMenu.children"
+            :key="child.menuId || child.url || child.menuName"
+          >
+            <el-collapse
+              v-if="child.children && child.children.length > 0"
+              v-model="collapsedPanelNames"
+              class="left-collapsed-collapse"
+            >
+              <el-collapse-item :name="getCollapsedPanelName(child)">
+                <template #title>
+                  <span>{{ child.menuName }}</span>
+                </template>
+                <div
+                  v-for="grandchild in child.children"
+                  :key="grandchild.menuId || grandchild.url || grandchild.menuName"
+                  class="left-submenu-item with-icon"
+                  :class="{ 'is-active': isActive(grandchild.url) }"
+                  @click.stop="handleSubMenuClick(grandchild)"
+                >
+                  <span class="left-page-icon">
+                    <img
+                      v-if="!failedMenuIconSet.has(grandchild.menuName)"
+                      class="left-page-icon-img"
+                      :src="getMenuIconUrl(grandchild.menuName)"
+                      :alt="grandchild.menuName"
+                      @error="handleMenuIconError($event, grandchild.menuName)"
+                    />
+                    <span v-else class="left-page-icon-fallback">{{ getMenuShortName(grandchild.menuName) }}</span>
+                  </span>
+                  <span>{{ grandchild.menuName }}</span>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+            <div
+              v-else
+              class="left-submenu-item with-icon"
+              :class="{ 'is-active': isActive(child.url) }"
+              @click.stop="handleSubMenuClick(child)"
+            >
+              <span class="left-page-icon">
+                <img
+                  v-if="!failedMenuIconSet.has(child.menuName)"
+                  class="left-page-icon-img"
+                  :src="getMenuIconUrl(child.menuName)"
+                  :alt="child.menuName"
+                  @error="handleMenuIconError($event, child.menuName)"
+                />
+                <span v-else class="left-page-icon-fallback">{{ getMenuShortName(child.menuName) }}</span>
+              </span>
+              <span>{{ child.menuName }}</span>
+            </div>
+          </template>
+        </div>
+      </transition>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted, onUnmounted, nextTick, watch, PropType } from "vue";
+import { ArrowLeft, ArrowRight, ArrowDown, Expand, Fold } from "@element-plus/icons-vue";
+import sideMenuSonList from "./sideMenuSonList.vue";
+import type HomeMenu from "../../api/bms/home/bo/HomeMenu";
+
+const props = defineProps({
+  menuList: {
+    type: Array as PropType<HomeMenu[]>,
+    default: () => []
+  },
+  menuPosition: {
+    type: String as PropType<"top" | "left">,
+    default: "top"
+  },
+  showSubmenuDrawer: {
+    type: Boolean,
+    default: true
+  },
+  currentPath: {
+    type: String,
+    default: ''
+  },
+  navigationBar: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits<{
+  (event: "parent-click", item: HomeMenu, index: number): void;
+  (event: "menu-item-click", item: HomeMenu): void;
+  (event: "collapse-change", collapsed: boolean): void;
+}>();
+
+const sidebarRouters = computed(() => props.menuList);
+const menuPosition = computed(() => props.menuPosition);
+const isLeftMenuCollapsed = computed(
+  () => menuPosition.value === "left" && props.navigationBar
+);
+
+// 滚动相关
+const scrollWrapperRef = ref<HTMLElement | null>(null);
+const scrollContentRef = ref<HTMLElement | null>(null);
+const sidebarRef = ref<HTMLElement | null>(null);
+const showArrows = ref(false);
+const scrollStep = 200;
+
+// 抽屉相关
+const drawerVisible = ref(false);
+const activeIndex = ref<number | null>(null);
+const expandedIndexList = ref<number[]>([]);
+const currentMenuChildren = ref<HomeMenu[]>([]);
+const failedMenuIconSet = ref<Set<string>>(new Set());
+const menuTabIconStateMap = ref<Record<string, "module" | "page" | "text">>({});
+const collapsedFlyoutIndex = ref<number | null>(null);
+const collapsedFlyoutTop = ref(0);
+const collapsedPanelNames = ref<string[]>([]);
+
+const collapsedFlyoutMenu = computed(() => {
+  if (collapsedFlyoutIndex.value === null) return null;
+  return sidebarRouters.value[collapsedFlyoutIndex.value] || null;
+});
+
+// 根据当前路由匹配选中的菜单索引
+const selectedIndex = computed(() => {
+  const currentPath = props.currentPath;
+  for (let i = 0; i < sidebarRouters.value.length; i++) {
+    const item = sidebarRouters.value[i];
+    if (item.url && item.url === currentPath) return i;
+    if (item.children) {
+      for (const child of item.children) {
+        if (child.url && child.url === currentPath) return i;
+        if (child.children) {
+          for (const grandchild of child.children) {
+            if (grandchild.url && grandchild.url === currentPath) return i;
+          }
+        }
+      }
+    }
+  }
+  return null;
+});
+
+function checkOverflow() {
+  if (!scrollWrapperRef.value || !scrollContentRef.value) return;
+  if (menuPosition.value === "left") { showArrows.value = false; return; }
+  showArrows.value = scrollContentRef.value.scrollWidth > scrollWrapperRef.value.clientWidth;
+}
+
+function handleWheel(e: WheelEvent) {
+  if (!scrollWrapperRef.value || menuPosition.value !== "top") return;
+  e.preventDefault();
+  scrollWrapperRef.value.scrollLeft += e.deltaY;
+}
+
+function scrollLeft() {
+  if (!scrollWrapperRef.value) return;
+  scrollWrapperRef.value.scrollBy({ left: -scrollStep, behavior: 'smooth' });
+}
+
+function scrollRight() {
+  if (!scrollWrapperRef.value) return;
+  scrollWrapperRef.value.scrollBy({ left: scrollStep, behavior: 'smooth' });
+}
+
+let closeTimer: ReturnType<typeof setTimeout> | null = null;
+let openTimer: ReturnType<typeof setTimeout> | null = null;
+
+function startCloseTimer() {
+  cancelCloseTimer();
+  closeTimer = setTimeout(() => { closeDrawer(); }, 150);
+}
+function cancelCloseTimer() { if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; } }
+function cancelOpenTimer() { if (openTimer) { clearTimeout(openTimer); openTimer = null; } }
+
+function handleMenuEnter(item: HomeMenu, index: number) {
+  if (menuPosition.value === "left" || !props.showSubmenuDrawer) return;
+  cancelCloseTimer();
+  cancelOpenTimer();
+  if (!item.children || item.children.length === 0) { closeDrawer(); return; }
+  openTimer = setTimeout(() => {
+    activeIndex.value = index;
+    currentMenuChildren.value = item.children;
+    drawerVisible.value = true;
+  }, 500);
+}
+
+function onMenuAreaLeave() {
+  if (menuPosition.value === "left") return;
+  cancelOpenTimer();
+  startCloseTimer();
+}
+
+function onDrawerEnter() { cancelCloseTimer(); cancelOpenTimer(); }
+function onDrawerLeave() { startCloseTimer(); }
+
+function handleMenuClick(item: HomeMenu, index: number, event?: MouseEvent) {
+  if (menuPosition.value === "left") {
+    closeDrawer();
+    if (isLeftMenuCollapsed.value && item.children && item.children.length > 0) {
+      openCollapsedFlyout(index, event); return;
+    }
+    if (item.children && item.children.length > 0) {
+      closeCollapsedFlyout(); toggleExpandedIndex(index); return;
+    }
+    if (item.url) { emit("menu-item-click", item); }
+    return;
+  }
+  if (item.children && item.children.length > 0) {
+    closeCollapsedFlyout();
+    emit("parent-click", item, index);
+    return;
+  }
+  if (!item.children || item.children.length === 0) {
+    if (item.url) { emit("menu-item-click", item); }
+    closeDrawer();
+  }
+}
+
+function handleSubMenuClick(item: HomeMenu) {
+  if (!item.url) return;
+  emit("menu-item-click", item);
+  closeCollapsedFlyout();
+}
+
+function onSonMenuClick(menu: HomeMenu) {
+  emit("menu-item-click", menu);
+  closeDrawer();
+}
+
+function isActive(url?: string) { return !!url && props.currentPath === url; }
+function isMenuExpanded(index: number) { return expandedIndexList.value.includes(index); }
+function toggleExpandedIndex(index: number) {
+  if (isMenuExpanded(index)) { expandedIndexList.value = expandedIndexList.value.filter((i) => i !== index); return; }
+  expandedIndexList.value = [...expandedIndexList.value, index];
+}
+function setMenuExpanded(index: number) {
+  if (!isMenuExpanded(index)) expandedIndexList.value = [...expandedIndexList.value, index];
+}
+
+function shouldShowMenuArrow(item: HomeMenu) {
+  if (isLeftMenuCollapsed.value || !item.children || item.children.length === 0) return false;
+  return menuPosition.value === "left" || props.showSubmenuDrawer;
+}
+
+function getMenuShortName(menuName?: string) { return (menuName || "-").slice(0, 1); }
+function getMenuIconUrl(menuName?: string) { return `./menu-icon/${menuName || ""}.png`; }
+
+function getMenuIconDisplay(item: HomeMenu) {
+  const fallbackName = item.menuName;
+  if (!item.children || item.children.length === 0) {
+    return { imageName: failedMenuIconSet.value.has(item.menuName) ? "" : item.menuName, fallbackName };
+  }
+  const iconKey = getMenuTabIconKey(item);
+  const iconState = menuTabIconStateMap.value[iconKey] || "module";
+  if (iconState === "module") return { imageName: item.menuName, fallbackName };
+  if (iconState === "page") {
+    const firstPageMenuName = findFirstPageMenuName(item.children);
+    return { imageName: firstPageMenuName && !failedMenuIconSet.value.has(firstPageMenuName) ? firstPageMenuName : "", fallbackName };
+  }
+  return { imageName: "", fallbackName };
+}
+
+function getMenuTabIconKey(item: HomeMenu) { return String(item.menuId || item.url || item.menuName); }
+
+function findFirstPageMenuName(menuList?: HomeMenu[]): string {
+  if (!menuList || menuList.length === 0) return "";
+  for (const item of menuList) {
+    if (item.url) return item.menuName;
+    const childMenuName = findFirstPageMenuName(item.children);
+    if (childMenuName) return childMenuName;
+  }
+  return "";
+}
+
+function handleMenuIconError(event: Event, iconName?: string) {
+  const img = event.target as HTMLImageElement;
+  if (img.dataset.ext !== "jpg") { img.dataset.ext = "jpg"; img.src = `./menu-icon/${iconName || ""}.jpg`; return; }
+  const nextSet = new Set(failedMenuIconSet.value); nextSet.add(iconName || ""); failedMenuIconSet.value = nextSet;
+}
+
+function handleMenuTabIconError(event: Event, item: HomeMenu) {
+  const currentIcon = getMenuIconDisplay(item).imageName;
+  const img = event.target as HTMLImageElement;
+  if (img.dataset.ext !== "jpg") { img.dataset.ext = "jpg"; img.src = `./menu-icon/${currentIcon || ""}.jpg`; return; }
+  if (!item.children || item.children.length === 0) { const nextSet = new Set(failedMenuIconSet.value); nextSet.add(item.menuName); failedMenuIconSet.value = nextSet; return; }
+  const iconKey = getMenuTabIconKey(item);
+  const firstPageMenuName = findFirstPageMenuName(item.children);
+  const nextStateMap = { ...menuTabIconStateMap.value };
+  if ((nextStateMap[iconKey] || "module") === "module" && firstPageMenuName && firstPageMenuName !== item.menuName && !failedMenuIconSet.value.has(firstPageMenuName)) {
+    nextStateMap[iconKey] = "page";
+  } else {
+    const nextSet = new Set(failedMenuIconSet.value); if (currentIcon) nextSet.add(currentIcon); failedMenuIconSet.value = nextSet; nextStateMap[iconKey] = "text";
+  }
+  menuTabIconStateMap.value = nextStateMap;
+}
+
+function openCollapsedFlyout(index: number, event?: MouseEvent) {
+  event?.stopPropagation();
+  if (collapsedFlyoutIndex.value === index) { closeCollapsedFlyout(); return; }
+  const target = event?.currentTarget as HTMLElement | undefined;
+  const rect = target?.getBoundingClientRect();
+  collapsedFlyoutTop.value = rect ? Math.min(Math.max(rect.top - 4, 58), Math.max(window.innerHeight - 360, 58)) : 58;
+  collapsedFlyoutIndex.value = index;
+  collapsedPanelNames.value = getDefaultCollapsedPanels(sidebarRouters.value[index]);
+}
+
+function closeCollapsedFlyout() { collapsedFlyoutIndex.value = null; collapsedPanelNames.value = []; }
+function getCollapsedPanelName(item?: HomeMenu) { return String(item?.menuId || item?.url || item?.menuName || "collapsed-menu"); }
+
+function getDefaultCollapsedPanels(item?: HomeMenu) {
+  if (!item?.children) return [];
+  const activeChild = item.children.find((child) => child.children?.length && hasActiveRoute(child));
+  if (activeChild) return [getCollapsedPanelName(activeChild)];
+  const firstGroup = item.children.find((child) => child.children && child.children.length > 0);
+  return firstGroup ? [getCollapsedPanelName(firstGroup)] : [];
+}
+
+function hasActiveRoute(item: HomeMenu): boolean {
+  if (isActive(item.url)) return true;
+  return !!item.children?.some((child) => hasActiveRoute(child));
+}
+
+function toggleLeftMenuCollapse() {
+  emit("collapse-change", !props.navigationBar);
+}
+
+function closeDrawer() { drawerVisible.value = false; activeIndex.value = null; }
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && drawerVisible.value) closeDrawer();
+  if (e.key === 'Escape' && menuPosition.value === "left") { expandedIndexList.value = []; closeCollapsedFlyout(); }
+}
+
+function handleDocumentClick() { closeCollapsedFlyout(); }
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  nextTick(() => { checkOverflow(); });
+  if (scrollContentRef.value) {
+    resizeObserver = new ResizeObserver(() => { checkOverflow(); });
+    resizeObserver.observe(scrollContentRef.value);
+  }
+  document.addEventListener('keydown', handleKeydown);
+  document.addEventListener('click', handleDocumentClick);
+});
+
+onUnmounted(() => {
+  cancelCloseTimer(); cancelOpenTimer();
+  if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; }
+  document.removeEventListener('keydown', handleKeydown);
+  document.removeEventListener('click', handleDocumentClick);
+});
+
+watch(() => props.menuList, () => { closeCollapsedFlyout(); nextTick(() => { checkOverflow(); }); }, { deep: true });
+
+watch(
+  [selectedIndex, menuPosition],
+  () => {
+    if (menuPosition.value === "left" && selectedIndex.value !== null) setMenuExpanded(selectedIndex.value);
+    if (menuPosition.value === "top") { expandedIndexList.value = []; closeCollapsedFlyout(); }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+@import './sideMenu.scss';
+</style>
+
+<style lang="scss">
+@import './sideMenu-global.scss';
+</style>