fix: 修复顶栏多出一个...的问题

web/src/view/layout/aside/asideComponent/index.vue

@@ -37,7 +37,7 @@
   const menuComponent = computed(() => {
     if (
       props.routerInfo.children &&
-      props.routerInfo.children.filter((item) => !item.hidden).length
+      props.routerInfo.children?.filter((item) => !item.hidden).length
     ) {
       return AsyncSubmenu
     } else {

web/src/view/layout/aside/headMode.vue

@@ -1,13 +1,16 @@
 <template>
   <div
     class="bg-white h-[calc(100%-4px)] text-slate-700 dark:text-slate-300 mx-2 dark:bg-slate-900 flex items-center w-[calc(100vw-600px)] overflow-auto"
+    ref="menuContainer"
   >
     <el-menu
       :default-active="active"
       mode="horizontal"
       class="border-r-0 w-full flex gap-1 items-center box-border h-[calc(100%-1px)]"
       unique-opened
+      :ellipsis="shouldEllipsis"
       @select="selectMenuItem"
+      ref="menuRef"
     >
       <template v-for="item in routerStore.asyncRouters[0].children">
         <aside-component
@@ -23,7 +26,7 @@
 
 <script setup>
   import AsideComponent from '@/view/layout/aside/asideComponent/index.vue'
-  import { ref, provide, watchEffect } from 'vue'
+  import { ref, provide, watchEffect, onMounted, nextTick } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
   import { useRouterStore } from '@/pinia/modules/router'
   import { useAppStore } from '@/pinia'
@@ -39,6 +42,26 @@
   const routerStore = useRouterStore()
   const isCollapse = ref(false)
   const active = ref('')
+  const menuRef = ref(null)
+  const menuContainer = ref(null)
+  const shouldEllipsis = ref(false)
+
+  // 计算是否需要启用省略功能
+  const calculateEllipsis = async () => {
+    await nextTick()
+    if (!menuRef.value || !menuContainer.value) return
+
+    const menuItems = menuRef.value.$el.querySelectorAll('.el-menu-item, .el-sub-menu')
+    let totalWidth = 0
+
+    menuItems.forEach(item => {
+      totalWidth += item.offsetWidth
+    })
+
+    const containerWidth = menuContainer.value.offsetWidth
+    shouldEllipsis.value = totalWidth > containerWidth
+  }
+
   watchEffect(() => {
     if (route.name === 'Iframe') {
       active.value = decodeURIComponent(route.query.url)
@@ -53,10 +76,24 @@
     } else {
       isCollapse.value = false
     }
+    // 设备变化时重新计算
+    calculateEllipsis()
+  })
+
+  // 当路由变化时重新计算
+  watchEffect(() => {
+    if (route.name) {
+      nextTick(calculateEllipsis)
+    }
   })
 
   provide('isCollapse', isCollapse)
 
+  onMounted(() => {
+    calculateEllipsis()
+    window.addEventListener('resize', calculateEllipsis)
+  })
+
   const selectMenuItem = (index) => {
     const query = {}
     const params = {}