@ganwei-web/ganwei-pc-cli 6.2.6 → 6.2.7

package/ganwei-iotcenter-index-6.2.3/packages/ganwei-iotcenter-index/src/components/layouts/Navigation/ContractMenu.vue

@@ -0,0 +1,347 @@
+<template>
+  <!-- 弹出面板内的目录菜单：平铺显示子菜单 -->
+  <div v-if="inPopup && isDirectory" class="menu-list-level">
+    <p>
+      <span class="iconBox" :style="iconBoxStyle">
+        <i class="iconfont" :class="menuIcon" />
+      </span>
+      <label>{{ data.name }}</label>
+    </p>
+    <ContractMenu
+      v-for="item in data.children"
+      :key="item.resourceId"
+      :data="item"
+      :is-collapse="isCollapse"
+      :in-popup="true"
+    />
+  </div>
+
+  <!-- 一级子菜单：显示为可展开的 el-sub-menu -->
+  <el-sub-menu
+    v-else-if="isSubMenu"
+    :key="`${data.resourceId}-sub-menu`"
+    :index="String(data.resourceId)"
+    class="menu-list-item-scale"
+    :title="data.name"
+  >
+    <template #title>
+      <div class="iconBox" :style="iconBoxStyle">
+        <i class="iconfont" :class="menuIcon" />
+      </div>
+    </template>
+    <ContractMenu
+      v-for="item in data.children"
+      :key="item.resourceId"
+      :data="item"
+      :is-collapse="isCollapse"
+      :in-popup="true"
+    />
+  </el-sub-menu>
+
+  <!-- 3级及以下菜单：在弹出面板中平铺显示 -->
+  <div v-else-if="isLowerLevelMenu" class="menu-list-level">
+    <p>
+      <span class="iconBox" :style="iconBoxStyle">
+        <i class="iconfont" :class="menuIcon" />
+      </span>
+      <label>{{ data.name }}</label>
+    </p>
+    <ContractMenu
+      v-for="item in data.children"
+      :key="item.resourceId"
+      :data="item"
+      :is-collapse="isCollapse"
+      :in-popup="true"
+    />
+  </div>
+
+  <!-- 菜单项 -->
+  <el-menu-item
+    v-else-if="isMenuItem"
+    :name="data.resourceId"
+    :key="`${data.resourceId}-menu-item`"
+    :index="data.route"
+    class="menu-list-item-scale"
+    :title="showTitle ? data.name : ''"
+    @click="handleMenuClick"
+  >
+    <div class="iconBox" :style="iconBoxStyle">
+      <i class="iconfont" :class="data.icon" />
+    </div>
+    <label>{{ data.name }}</label>
+  </el-menu-item>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, onMounted, ref } from 'vue'
+
+/**
+ * 菜单数据类型定义
+ */
+interface MenuData {
+  resourceId: string | number
+  name: string
+  route?: string
+  icon?: string
+  backgroundColor?: string
+  menuOwner: number // 1:WEB 2:APP 3:桌面 4:三维 5:小程序 6:全部
+  nodeType: number // 1:目录 2:菜单
+  level: number // 1:一级菜单 2:二级菜单 3:三级菜单
+  children?: MenuData[]
+}
+
+interface Props {
+  data: MenuData
+  isCollapse?: boolean
+  hasParent?: boolean
+  inPopup?: boolean // 是否在弹出面板中
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isCollapse: false,
+  hasParent: false,
+  inPopup: false,
+})
+
+// 获取当前组件实例
+const instance = getCurrentInstance()
+
+// State
+const showTopNav = ref(true)
+
+/**
+ * 判断是否为目录类型（有子菜单）
+ */
+const isDirectory = computed(() => {
+  return (
+    props.data.menuOwner === 1 &&
+    props.data.nodeType === 1 &&
+    props.data.children &&
+    props.data.children.length > 0
+  )
+})
+
+/**
+ * 判断是否为一级子菜单
+ * 如果 showTopNav 为 true，一级菜单在顶部导航，左侧从二级开始
+ * 如果 showTopNav 为 false，左侧显示所有菜单，一级菜单作为子菜单显示
+ */
+const isSubMenu = computed(() => {
+  const isDirectory = props.data.menuOwner === 1 && props.data.nodeType === 1
+  const hasChildren = props.data.children && props.data.children.length > 0
+
+  if (!isDirectory || !hasChildren) return false
+
+  // 如果显示顶部导航，左侧菜单从二级开始（level >= 2）
+  // 如果不显示顶部导航，左侧显示所有菜单（level >= 1）
+  const minLevel = showTopNav.value ? 2 : 1
+  return props.data.level >= minLevel
+})
+
+/**
+ * 判断是否为更低级别的菜单（3级及以下）
+ * 这些菜单在弹出面板中以分组形式显示
+ */
+const isLowerLevelMenu = computed(() => {
+  // level >= 3 的目录类型菜单在弹出面板中特殊显示
+  return (
+    props.data.menuOwner === 1 &&
+    props.data.nodeType === 1 &&
+    props.data.level >= 3 &&
+    props.data.children &&
+    props.data.children.length > 0
+  )
+})
+
+/**
+ * 判断是否为菜单项
+ */
+const isMenuItem = computed(() => {
+  return props.data.menuOwner === 1 && props.data.nodeType === 2
+})
+
+/**
+ * 是否显示标题（tooltip）
+ */
+const showTitle = computed(() => {
+  return props.data.level === 1
+})
+
+/**
+ * 图标盒子样式
+ */
+const iconBoxStyle = computed(() => {
+  return props.data.backgroundColor
+    ? { backgroundColor: props.data.backgroundColor }
+    : {}
+})
+
+/**
+ * 菜单图标
+ */
+const menuIcon = computed(() => {
+  if (props.data.icon) {
+    return props.data.icon
+  }
+
+  // 如果没有图标，尝试使用第一个子菜单的图标
+  if (props.data.children && props.data.children.length > 0) {
+    const firstChild = props.data.children[0]
+    return firstChild.icon || ''
+  }
+
+  return ''
+})
+
+/**
+ * 处理菜单点击事件
+ */
+const handleMenuClick = () => {
+  if (instance?.appContext.config.globalProperties.$bus) {
+    instance.appContext.config.globalProperties.$bus.emit('jumpUrl', props.data.route)
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  try {
+    const configData = JSON.parse(sessionStorage.configInfoData || '{}')
+    showTopNav.value = configData?.showTopNav ?? true
+  } catch (error) {
+    console.error('解析配置数据失败:', error)
+    showTopNav.value = true
+  }
+})
+</script>
+
+<style lang="scss">
+// 缩起状态
+.minActive {
+
+  .el-sub-menu__title {
+    padding: 0;
+
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  .menu-list-item-scale {
+    position: relative;
+
+    label {
+      padding-left: 0 !important;
+      display: none;
+    }
+
+    &:hover {
+      background-color: transparent !important;
+    }
+
+    &.is-active {
+      background-color: transparent !important;
+
+      &::after {
+        content: "";
+        position: absolute;
+        right: -20px;
+        top: 0;
+        width: 1px;
+        height: 100%;
+        border-right: 3px solid var(--menu-background__active);
+      }
+    }
+
+    .iconBox {
+      min-width: 32px;
+      width: 32px !important;
+      height: 32px !important;
+      border-radius: 8px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .iconfont {
+        color: white !important;
+        font-size: 16px !important;
+        margin: 0;
+      }
+    }
+  }
+
+  >li {
+    margin-bottom: 10px;
+  }
+}
+
+.el-popper .newMenuMinActive {
+  padding: 20px;
+
+  .menu-list-item-scale {
+    padding: 0px 20px !important;
+    line-height: 40px;
+
+    label {
+      cursor: pointer;
+    }
+  }
+
+  :deep(.el-menu) {
+    box-shadow: none !important;
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  :deep(.el-menu-item):hover {
+    color: var(--menu-background__active);
+    background-color: transparent;
+  }
+
+  .menu-list-level {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding-left: 35px;
+
+    >p {
+      width: 100%;
+      display: flex;
+      margin: 10px 0 0 -15px;
+
+      label {
+        opacity: 0.3;
+      }
+    }
+
+    >li {
+      display: flex;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0px 20px;
+    }
+
+    .menu-list-level {
+      padding-left: 35px;
+    }
+  }
+
+  .iconBox {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    margin-right: 10px;
+
+    .iconfont {
+      color: white !important;
+      font-size: 16px !important;
+    }
+  }
+}
+</style>