From 0ccd6dc750369c3ace7322df62f3d1e40f08ea48 Mon Sep 17 00:00:00 2001
From: pixelmaxQM <flipped_aurora@163.com>
Date: Thu, 24 Apr 2025 21:47:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=A1=B6=E6=A0=8F?=
 =?UTF-8?q?=E5=A4=9A=E5=87=BA=E4=B8=80=E4=B8=AA...=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/aside/asideComponent/index.vue     |  2 +-
 web/src/view/layout/aside/headMode.vue        | 39 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/web/src/view/layout/aside/asideComponent/index.vue b/web/src/view/layout/aside/asideComponent/index.vue
index 32e7d4186..cebcc4a57 100644
--- a/web/src/view/layout/aside/asideComponent/index.vue
+++ b/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 {
diff --git a/web/src/view/layout/aside/headMode.vue b/web/src/view/layout/aside/headMode.vue
index f72fa32ff..d29f849e9 100644
--- a/web/src/view/layout/aside/headMode.vue
+++ b/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 = {}