@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/TopNav.vue

@@ -0,0 +1,393 @@
+<template>
+  <div :class="$style.topNavWrapper" id="topNavWarpper">
+    <span v-if="showLeftArrow" :class="[$style.arrow, $style.arrowLeft]" class="iconfont icon-tubiao24_you"
+      @click.prevent.stop="handleArrowClick('left')" />
+
+    <div :class="$style.scrollView" id="topNavScrollView">
+      <div :class="$style.topNavContainer" id="topNavContainer">
+        <div v-for="item in options" :key="item.id" :id="`${item.id}${item.name}`"
+          :class="[$style.topNavItem, { [$style.active]: modelValue === item.index }]" @click="handleItemClick(item)">
+          <div :class="$style.iconBox" :style="{ backgroundColor: item.backgroundColor }">
+            <i v-if="item.icon" class="iconfont" :class="item.icon" />
+          </div>
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+
+    <span v-if="showRightArrow" :class="[$style.arrow, $style.arrowRight]" class="iconfont icon-tubiao24_you"
+      @click.prevent.stop="handleArrowClick('right')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type ComputedRef, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+/**
+ * 顶部导航组件
+ * 支持左右滚动，自动定位到当前路由
+ */
+
+interface NavOption {
+  id: string | number
+  name: string
+  index: number
+  route?: string
+  icon?: string
+  backgroundColor?: string
+}
+
+interface Props {
+  modelValue?: number
+  options?: NavOption[]
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: number): void
+  (e: 'select', value: number): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: -1,
+  options: () => [],
+})
+
+const emit = defineEmits<Emits>()
+
+// Inject - 父组件 provide 的是 computed，所以类型是 ComputedRef
+const routesMap = inject<ComputedRef<Record<string, number>>>('routesMap')
+
+// Route
+const route = useRoute()
+
+// Instance
+const instance = getCurrentInstance()
+const $bus = instance?.appContext.config.globalProperties.$bus
+
+// State
+const showLeftArrow = ref(false)
+const showRightArrow = ref(false)
+const resizeTimer = ref<number | null>(null)
+
+/**
+ * 更新箭头显示状态
+ */
+const updateArrowShow = () => {
+  if (resizeTimer.value) {
+    clearTimeout(resizeTimer.value)
+    resizeTimer.value = null
+  }
+
+  resizeTimer.value = window.setTimeout(() => {
+    const wrapper = document.getElementById('topNavWarpper')
+    const container = document.getElementById('topNavContainer')
+
+    if (wrapper && container) {
+      const needScroll = wrapper.clientWidth < container.clientWidth
+      showLeftArrow.value = needScroll
+      showRightArrow.value = needScroll
+    }
+
+    scrollToActiveItem()
+  }, 500)
+}
+
+/**
+ * 滚动到激活的项
+ */
+const scrollToActiveItem = () => {
+  if (props.options && props.options.length > 0) {
+    const item = props.options[props.modelValue]
+    if (item) {
+      const dom = document.getElementById(`${item.id}${item.name}`)
+      dom?.scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+}
+
+/**
+ * 处理项点击
+ */
+const handleItemClick = (item: NavOption) => {
+  // 处理外部链接
+  if (item.route && item.route.includes('http') && item.route.includes('target=_blank')) {
+    const url = item.route.replace(/\??target=_blank/, '')
+    window.open(url)
+    return
+  }
+
+  emit('update:modelValue', item.index)
+  emit('select', item.index)
+
+  const dom = document.getElementById(`${item.id}${item.name}`)
+  dom?.scrollIntoView({ behavior: 'smooth' })
+}
+
+/**
+ * 处理箭头点击
+ */
+const handleArrowClick = (type: 'left' | 'right') => {
+  const scrollView = document.getElementById('topNavScrollView')
+  if (!scrollView) return
+
+  const scrollDistance = 200
+
+  if (type === 'left') {
+    scrollView.scrollTo({
+      left: scrollView.scrollLeft - scrollDistance,
+      behavior: 'smooth'
+    })
+  } else {
+    scrollView.scrollTo({
+      left: scrollView.scrollLeft + scrollDistance,
+      behavior: 'smooth'
+    })
+  }
+}
+
+/**
+ * 窗口大小调整处理
+ */
+const handleResize = () => {
+  updateArrowShow()
+}
+
+// 监听路由变化，自动更新选中项
+watch(
+  () => route.fullPath,
+  (fullPath) => {
+    // 安全检查：确保 routesMap 数据已加载
+    if (!routesMap?.value || Object.keys(routesMap.value).length === 0) {
+      console.log('TopNav routesMap 数据尚未加载，跳过路由匹配')
+      return
+    }
+
+    const map = routesMap.value
+    const decodedPath = decodeURIComponent(fullPath as string)
+    let routeBase = decodedPath
+
+    // 移除查询参数获取基础路径
+    if (routeBase.indexOf('?') != -1) {
+      routeBase = routeBase.split('?')[0]
+    }
+
+    // 优先精确匹配
+    if (decodedPath in map) {
+      const index = map[decodedPath]
+      if (index !== props.modelValue) {
+        emit('update:modelValue', index)
+      }
+    } else {
+      // 如果精确匹配失败，遍历 routesMap 查找匹配的基础路径（适用于外部链接）
+      let matchedIndex = -1
+      for (const [mapKey, index] of Object.entries(map)) {
+        const mapKeyBase = mapKey.indexOf('?') != -1 ? mapKey.split('?')[0] : mapKey
+        // 移除可能存在的空格后比较
+        if (mapKeyBase.trim() === routeBase.trim()) {
+          matchedIndex = index
+          break
+        }
+      }
+      if (matchedIndex !== -1 && matchedIndex !== props.modelValue) {
+        emit('update:modelValue', matchedIndex)
+      } else {
+        console.log('TopNav 未匹配到菜单:', { decodedPath, routeBase })
+      }
+    }
+  },
+  { immediate: true }
+)
+
+// 监听 routesMap 变化
+watch(
+  () => routesMap?.value,
+  (newMap) => {
+    // 安全检查
+    if (!newMap || Object.keys(newMap).length === 0) {
+      console.log('TopNav routesMap 变化但数据为空，跳过匹配')
+      return
+    }
+    const fullPath = route.fullPath
+    const decodedPath = decodeURIComponent(fullPath as string)
+    let routeBase = decodedPath
+
+    if (routeBase.indexOf('?') != -1) {
+      routeBase = routeBase.split('?')[0]
+    }
+
+    if (decodedPath in newMap) {
+      const index = newMap[decodedPath]
+      if (index !== props.modelValue) {
+        emit('update:modelValue', index)
+      }
+    } else {
+      let matchedIndex = -1
+      for (const [mapKey, index] of Object.entries(newMap)) {
+        const mapKeyBase = mapKey.indexOf('?') != -1 ? mapKey.split('?')[0] : mapKey
+        if (mapKeyBase.trim() === routeBase.trim()) {
+          matchedIndex = index
+          break
+        }
+      }
+      if (matchedIndex !== -1 && matchedIndex !== props.modelValue) {
+        emit('update:modelValue', matchedIndex)
+      }
+    }
+  },
+  { deep: true }
+)
+
+// 监听 modelValue 变化
+watch(() => props.modelValue, () => {
+  updateArrowShow()
+})
+
+// Lifecycle
+onMounted(() => {
+  updateArrowShow()
+  window.addEventListener('resize', handleResize)
+
+  // 监听 topResize 事件
+  $bus?.on('topResize', updateArrowShow)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  $bus?.off('topResize', updateArrowShow)
+
+  if (resizeTimer.value) {
+    clearTimeout(resizeTimer.value)
+  }
+})
+</script>
+
+<style module lang="scss">
+.topNavWrapper {
+  display: flex;
+  width: calc(100% - 380px);
+  min-width: 140px;
+  max-width: 980px;
+  position: relative;
+  align-items: center;
+  height: 50px;
+  user-select: none;
+}
+
+.arrow {
+  display: block;
+  font-size: 24px;
+  color: var(--menu-color);
+  cursor: pointer;
+  z-index: 2;
+  opacity: 1;
+  transition: opacity 0.3s ease;
+}
+
+.arrowLeft {
+  transform: rotateY(180deg);
+  z-index: 10000;
+}
+
+.arrowRight {
+  // 默认方向
+}
+
+.scrollView {
+  overflow: auto;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+
+  // 隐藏滚动条
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+}
+
+.topNavContainer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  line-height: 32px;
+  transition: transform 0.3s ease-in-out;
+  gap: 10px;
+}
+
+.topNavItem {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 400;
+  color: var(--menu-color);
+  position: relative;
+  cursor: pointer;
+  padding: 0 20px;
+  border: 1px solid transparent;
+  height: 32px;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+
+  &:hover,
+  &.active {
+    color: var(--gw-color-primary);
+    border: 1px solid var(--gw-color-primary);
+    border-radius: 8px;
+    background: rgba(56, 117, 255, 0.1);
+
+    .iconBox i {
+      color: var(--gw-color-primary) !important;
+    }
+  }
+}
+
+.iconBox {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  margin-right: 6px;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  background: transparent !important;
+
+  i {
+    font-size: 16px !important;
+    color: var(--menu-color) !important;
+    transition: color 0.3s ease;
+  }
+}
+</style>
+
+<style lang="scss">
+// 绿色主题特殊样式
+[data-theme="green"] #topNavContainer {
+  >.active {
+    height: 100%;
+    background: rgba(56, 117, 255, 0.1);
+    color: rgb(10 235 222 / 75%);
+    border: 1px solid rgb(10 235 222 / 75%);
+    z-index: -1;
+
+    .iconBox i {
+      color: rgb(10 235 222 / 75%) !important;
+    }
+  }
+
+  .top-nav-item:hover {
+    background: rgba(56, 117, 255, 0.1);
+    color: rgb(10 235 222 / 75%);
+    border: 1px solid rgb(10 235 222 / 75%);
+
+    .iconBox i {
+      color: rgb(10 235 222 / 75%) !important;
+    }
+  }
+}
+</style>