@lambo-design/pro-layout 1.0.0-beta.384 → 1.0.0-beta.388

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.384",
+  "version": "1.0.0-beta.388",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,8 +10,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/core": "^4.7.1-beta.162",
-    "@lambo-design/shared": "^1.0.0-beta.264"
+    "@lambo-design/core": "^4.7.1-beta.167",
+    "@lambo-design/shared": "^1.0.0-beta.280"
   },
   "scripts": {
     "release-pro-layout": "pnpm release-beta && git push --follow-tags && pnpm re-publish",

package/src/components/pro-layout-header/index.vue

@@ -12,7 +12,9 @@
     </div>
     <div class="nav-box" v-show="!systemInfo || !systemInfo.navType || systemInfo.navType == 'dropdown'">
       <slot name="pro-layout-nav">
-        <LamboProNav></LamboProNav>
+        <LamboProNav
+            :available-width="availableWidth"
+        ></LamboProNav>
       </slot>
     </div>
     <div class="tools-box">
@@ -25,8 +27,11 @@
         </template>
       </LamboProTools>
     </div>
-    <div v-show="systemInfo && systemInfo.navType && systemInfo.navType == 'slide'">
-      <LamboProNavSilde></LamboProNavSilde>
+    <div class="nav-slide-container" v-show="systemInfo && systemInfo.navType && systemInfo.navType == 'slide'" ref="slideContainer">
+      <LamboProNavSilde
+          :available-width="availableWidth"
+          @width-change="handleSlideWidthChange"
+      ></LamboProNavSilde>
     </div>
   </div>
 </template>
@@ -38,6 +43,7 @@ import LamboProNav from './pro-layout-nav'
 import LamboProNavSilde from './pro-layout-nav/index-slide'
 import LamboProTools from './pro-layout-tools'
 import Bus from "@lambo-design/shared/utils/bus";
+
 export default {
   name: "pro-layout-header",
   props:{
@@ -53,6 +59,8 @@ export default {
   data(){
     return {
       systemInfo: {},
+      availableWidth: 0,
+      resizeTimer: null,
     }
   },
   components: {
@@ -72,16 +80,92 @@ export default {
       Bus.$on('system-info',(data)=>{
         this.initSystem(data)
       });
+
+      // 监听窗口大小变化
+      window.addEventListener('resize', this.handleResize);
     },
     destroyListener(){
-      Bus.$off('system-info')
+      Bus.$off('system-info');
+      window.removeEventListener('resize', this.handleResize);
     },
     initSystem(data){
       if (data) {
         this.systemInfo = data;
+        // 当系统信息加载完成后，如果是slide模式，计算可用宽度
+        this.$nextTick(() => {
+          this.calculateAvailableWidth();
+        });
+      }
+    },
+    // 计算slide导航可用宽度
+    calculateAvailableWidth() {
+      if (!this.systemInfo) {
+        return;
+      }
+
+      try {
+        // 获取页面总宽度
+        const docWidth = document.getElementById("app")?.clientWidth || window.innerWidth;
+
+        // 获取各个组件的宽度
+        const triggerBoxWidth = this.getTriggerBoxWidth();
+        const logoBoxWidth = this.getLogoBoxWidth();
+        const toolsBoxWidth = this.getToolsBoxWidth();
+
+        // 预留一些空间给箭头按钮和边距
+        const reservedWidth = 150;
+
+        // 计算可用宽度
+        this.availableWidth = docWidth - triggerBoxWidth - logoBoxWidth - toolsBoxWidth - reservedWidth;
+
+        // 确保最小宽度
+        this.availableWidth = Math.max(this.availableWidth, 200);
+
+      } catch (error) {
+        console.warn('Error calculating available width:', error);
+        this.availableWidth = 800; // 默认值
       }
+    },
+
+    // 获取trigger组件宽度
+    getTriggerBoxWidth() {
+      const triggerBox = document.querySelector('.trigger-box');
+      return triggerBox ? triggerBox.clientWidth : 0;
+    },
+
+    // 获取logo组件宽度
+    getLogoBoxWidth() {
+      const logoBox = document.querySelector('.logo-box');
+      return logoBox ? logoBox.clientWidth : 0;
+    },
+
+    // 获取tools组件宽度
+    getToolsBoxWidth() {
+      const toolsBox = document.querySelector('.tools-box');
+      return toolsBox ? toolsBox.clientWidth : 0;
+    },
+
+    // 处理窗口大小变化
+    handleResize() {
+      // 防抖处理
+      clearTimeout(this.resizeTimer);
+      this.resizeTimer = setTimeout(() => {
+        this.calculateAvailableWidth();
+      }, 150);
+    },
+
+    // 处理slide组件宽度变化
+    handleSlideWidthChange(data) {
+      // console.log('Slide width change:', data);
+      // 可以在这里处理slide组件宽度变化的逻辑
     }
   },
+  mounted() {
+    // 组件挂载后计算一次宽度
+    this.$nextTick(() => {
+      this.calculateAvailableWidth();
+    });
+  },
   created(){
     this.initListener();
   },
@@ -105,6 +189,11 @@ export default {
   .nav-box{
     float: left;
   }
+  .nav-slide-container{
+    float: left;
+    flex: 1;
+    overflow: hidden;
+  }
   .tools-box{
     float: right;
   }

package/src/components/pro-layout-header/pro-layout-nav/components/pro-layout-nav-slide-menu.vue

@@ -1,12 +1,17 @@
 <template>
-  <div class="menu-list" >
+  <div class="menu-list" ref="menuList">
     <ul class="top-menu" :style="layoutSize === 'default' ? {height: '64px'} : {height: '50px'}" ref="topNav">
-      <li class="top-menu-item" v-show="pointer <= index && index < pointer + topMenuNum && flag" :class="{ 'active': activeName === item.appId }" v-for="(item,index) in topMenList"  :key="item.appId"  @click="selectApp(item.appId)">
-        <div class="menu-item" :style="layoutSize === 'default' ? {paddingTop: '10px'} : {paddingTop: '2px'}">
-          <p class="menu-icon" v-show="systemInfo.navLogo==='1'"><Icon :type="item.icon" :size="20"></Icon></p>
-          <p class="menu-txt" :title="item.name">{{ item.name }}</p>
-        </div>
-      </li>
+      <template v-for="(item,index) in topMenList" >
+        <li class="top-menu-item"
+            :class="{ 'active': activeName === item.appId }"
+            :key="item.appId"
+            @click="selectApp(item.appId)">
+          <div class="menu-item" :style="layoutSize === 'default' ? {paddingTop: '10px'} : {paddingTop: '2px'}">
+            <p class="menu-icon" v-show="systemInfo.navLogo==='1'"><Icon :type="item.icon" :size="20"></Icon></p>
+            <p class="menu-txt" :title="item.name">{{ item.name }}</p>
+          </div>
+        </li>
+      </template>
     </ul>
   </div>
 </template>
@@ -24,13 +29,16 @@ export default {
     topMenListNum: {
       type: Number,
       default: 0
+    },
+    availableWidth: {
+      type: Number,
+      default: 800
     }
   },
   data() {
     return {
       systemInfo:{},
       pointer:0,
-      flag:true,
       arrowFlag: true,
       acceptAppId: '',
       navList: [],
@@ -39,9 +47,12 @@ export default {
       otherList: [],
       activeName: '',
       topMenuNum: 7,
+      displayMenuNum: 7, // 实际显示的菜单数量
       lastTopMenuNum:-1,
       originMenuList: [],
-      layoutSize:"default"
+      layoutSize:"default",
+      // menuItemWidths: [], // 存储每个菜单项的宽度
+      resizeObserver: null,
     }
   },
   methods: {
@@ -79,18 +90,13 @@ export default {
       }
       this.navList = data
       this.lastTopMenuNum = this.topMenuNum
-      if (data.length > this.topMenuNum) {
-        let navList = deepCopy(data)
-        this.topMenList = navList
-        this.$emit('topMen-list', this.topMenList);
-        this.$emit('topMen-num', this.topMenuNum);
-        this.$emit('topMen-true', true);
-        // this.topMenList = navList.splice(0, this.topMenuNum)
-        // this.otherList = navList
-      } else {
-        this.topMenList = this.navList
-        this.$emit('topMen-true', false);
-      }
+
+      this.topMenList = data
+      this.$emit('topMen-list', this.topMenList);
+
+      // 计算可以显示的菜单数量
+      this.calculateDisplayMenuNum();
+
       if (this.topMenList.length > 0) {
         let appId = this.topMenList[0].appId
         for (let i = 0; i < this.topMenList.length; i++) {
@@ -104,6 +110,94 @@ export default {
         this.selectApp(appId)
       }
     },
+    // 计算可以显示的菜单数量
+    calculateDisplayMenuNum() {
+      this.$nextTick(() => {
+        if (!this.$refs.menuList) return;
+
+        // 获取单个菜单项的平均宽度
+        // const menuItems = this.$refs.menuList.querySelectorAll('.top-menu-item');
+        // if (menuItems.length === 0) return;
+
+        let totalWidth = 0;
+        let itemWidths = [];
+
+        // 临时显示所有菜单项以测量宽度
+        // menuItems.forEach((item, index) => {
+        //   item.style.display = 'block';
+        //   const width = item.offsetWidth;
+        //   itemWidths.push(width);
+        //   totalWidth += width;
+        // });
+
+        // this.menuItemWidths = itemWidths;
+
+        // 计算可以显示的菜单数量
+        let displayCount = 0;
+        let accumulatedWidth = 0;
+        const reservedWidth = 40; // 预留一些边距
+
+        this.navList.forEach((item, index) => {
+          const estimatedWidth = this.estimateMenuItemWidth(item);
+          if (accumulatedWidth + estimatedWidth <= this.availableWidth - reservedWidth) {
+            accumulatedWidth += estimatedWidth;
+            displayCount++;
+          }
+        })
+        //
+        // for (let i = 0; i < itemWidths.length; i++) {
+        //   if (accumulatedWidth + itemWidths[i] <= this.availableWidth - reservedWidth) {
+        //     accumulatedWidth += itemWidths[i];
+        //     displayCount++;
+        //   } else {
+        //     break;
+        //   }
+        // }
+
+        // 确保至少显示一个菜单项
+        let displayMenuNum = Math.max(1, displayCount);
+
+        // 如果配置的数量更小则依赖配置
+        if(this.topMenuNum < displayMenuNum){
+          this.displayMenuNum = this.topMenuNum
+        }else{
+          this.displayMenuNum = displayMenuNum
+        }
+
+        // this.displayMenuNum = Math.max(1, displayCount);
+        // 判断是否需要显示箭头
+        const needArrows = this.topMenList.length > this.displayMenuNum;
+        this.$emit('topMen-num', this.displayMenuNum);
+        this.$emit('topMen-true', needArrows);
+
+        // 向父组件报告实际宽度
+        this.$emit('menu-width-change', totalWidth);
+
+        //重新调整样式
+        menuItems.forEach((item, index) => {
+          if(!(this.pointer <= index && index < (this.pointer + this.displayMenuNum))){
+            item.style.display = 'none';
+          }else{
+            item.style.display = 'block'
+          }
+        });
+      });
+    },
+    estimateMenuItemWidth(item) {
+      // 基础宽度：内边距 + 边框
+      let baseWidth = 30;
+
+      // 图标宽度
+      if (item.icon && this.systemInfo.navLogo === '1') {
+        baseWidth += 30;
+      }
+
+      // 文字宽度估算（每个字符约14px）
+
+      const textWidth = (item.name || '').length * 14;
+      return baseWidth + textWidth;
+    },
+
     selectApp(appId) {
       if (appId) {
         this.activeName = appId
@@ -115,18 +209,60 @@ export default {
       if (appId) {
         this.activeName = appId
       }
+    },
+    // 监听菜单容器大小变化
+    observeResize() {
+      if (window.ResizeObserver) {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.calculateDisplayMenuNum();
+          this.controlVisable()
+        });
+
+        if (this.$refs.menuList) {
+          this.resizeObserver.observe(this.$refs.menuList);
+        }
+      }
+    },
+    controlVisable(){
+      //重新调整样式
+      const menuItems = this.$refs.menuList.querySelectorAll('.top-menu-item');
+      menuItems.forEach((item, index) => {
+        if(!(this.pointer <= index && index < (this.pointer + this.displayMenuNum))){
+          item.style.display = 'none';
+        }else{
+          item.style.display = 'block';
+        }
+      });
     }
   },
   watch: {
     acceptInt(val){
       this.pointer = val;
+      this.controlVisable()
+    },
+    availableWidth(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.calculateDisplayMenuNum();
+      }
+    },
+    topMenList() {
+      this.calculateDisplayMenuNum();
     }
   },
+  mounted() {
+    this.calculateDisplayMenuNum();
+    this.$nextTick(() => {
+      this.observeResize();
+    });
+  },
   created() {
     this.initListener()
   },
   beforeDestroy() {
-    this.destroyListener()
+    this.destroyListener();
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   }
 }
 </script>
@@ -136,58 +272,54 @@ export default {
 .menu-list {
   height: 100%;
   line-height: 24px;
-  //color: #ffffff;
   cursor: pointer;
   font-size: 16px;
   margin-left: 15px;
+  overflow: hidden;
+
   .top-menu {
     overflow: hidden;
+    white-space: nowrap;
+
     .top-menu-item {
       padding-left: 15px;
       padding-right: 15px;
       position: relative;
       height: 100%;
-      //color: #FFFFFF;
       list-style: none;
       float: left;
+      transition: all 0.3s ease;
+
       &:hover {
-        //background: transparent;
         .menu-item {
-          //color: #fff;
+          // hover styles
         }
       }
       &.active {
-        //background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) !important;
-        //border-bottom: 2px solid var(--primary-color-tint-5, @_primary-color-tint-5);
         .menu-item {
-          //color: #fff;
-          //width: 135px;
+          // active styles
         }
       }
       .menu-item {
         display: flex;
         margin-top: 10px;
         text-align: center;
-        //padding-right: 10px;
-        //width: 135px;
-
       }
       .menu-icon {
         height: 20px;
         line-height: 20px;
         text-align: center;
         margin-right: 10px;
-        //margin-left: 10px;
         margin-top: 3px;
       }
       .menu-txt {
         text-align: center;
         font-size: 14px;
         line-height: 2;
-        //width: 135px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        max-width: 120px; // 限制最大宽度
       }
     }
   }

package/src/components/pro-layout-header/pro-layout-nav/index-slide.vue

@@ -1,10 +1,17 @@
 <template>
-  <div class="pro-layout-nav-slide-wrapper">
-    <div class="nav-box-slide">
-      <LamboProNavSlideMenu :accept-int="pointer" @topMen-list="handleCustomEvent" @topMen-num="topMen"  @topMen-true="topMenTrue"></LamboProNavSlideMenu>
+  <div class="pro-layout-nav-slide-wrapper" ref="slideWrapper">
+    <div class="nav-box-slide" ref="navBox" :style="{ width: availableWidth + 'px' }">
+      <LamboProNavSlideMenu
+          :accept-int="pointer"
+          :available-width="availableWidth"
+          @topMen-list="handleCustomEvent"
+          @topMen-num="topMen"
+          @topMen-true="topMenTrue"
+          @menu-width-change="handleMenuWidthChange"
+      ></LamboProNavSlideMenu>
     </div>
     <!--slide按钮-->
-    <div class="tools-box-slide">
+    <div class="tools-box-slide" v-if="shouldShowArrows">
       <div style="margin-right: 50px;">
         <Icon
             class="more-menu"
@@ -12,12 +19,14 @@
             type="md-arrow-dropleft-circle"
             v-if="arrowFlag"
             @click="moveMenu('left')"
+            :style="{ opacity: canMoveLeft ? 1 : 0.3 }"
         />
         <Icon
             type="md-arrow-dropright-circle"
             class="more-menu"
             v-if="arrowFlag"
             @click="moveMenu('right')"
+            :style="{ opacity: canMoveRight ? 1 : 0.3 }"
         />
       </div>
     </div>
@@ -26,13 +35,29 @@
 
 <script>
 import LamboProNavSlideMenu from './components/pro-layout-nav-slide-menu'
+
 export default {
+  props: {
+    availableWidth: {
+      type: Number,
+      default: 800
+    },
+    autoCalculateWidth: {
+      type: Boolean,
+      default: true
+    }
+  },
   data(){
     return {
-      pointer:0,
-      topList:[],
-      topNum:0,
-      arrowFlag: true,
+      pointer: 0,
+      topList: [],
+      topNum: 0,
+      arrowFlag: false,
+      menuActualWidth: 0,
+      shouldShowArrows: false,
+      canMoveLeft: false,
+      canMoveRight: false,
+      resizeObserver: null,
     }
   },
   components: {
@@ -42,48 +67,154 @@ export default {
     handleCustomEvent(data) {
       // 接收子组件传递的数据
       this.topList = data;
+      this.checkWidthAndArrows();
     },
     topMen(data){
       this.topNum = data;
+      this.checkWidthAndArrows();
     },
     topMenTrue(data){
-      this.arrowFlag = data
+      this.arrowFlag = data;
+      this.checkWidthAndArrows();
+    },
+    // 处理菜单宽度变化
+    handleMenuWidthChange(width) {
+      this.menuActualWidth = width;
+      this.checkWidthAndArrows();
+    },
+    // 检查宽度并决定是否显示箭头
+    checkWidthAndArrows() {
+      this.$nextTick(() => {
+        if (!this.autoCalculateWidth) {
+          this.shouldShowArrows = this.arrowFlag;
+          return;
+        }
+
+        // 计算实际菜单宽度
+        const navBox = this.$refs.navBox;
+        if (navBox) {
+          const menuContainer = navBox.querySelector('.menu-list');
+          if (menuContainer) {
+            this.menuActualWidth = menuContainer.scrollWidth;
+          }
+        }
+
+        // 预留箭头按钮空间
+        const arrowSpace = 80;
+        const effectiveWidth = this.availableWidth - arrowSpace;
+
+        // 判断是否需要显示箭头
+        this.shouldShowArrows = this.menuActualWidth > effectiveWidth;
+
+        if (this.shouldShowArrows) {
+          this.updateArrowStates();
+        }
+
+        // 触发宽度变化事件
+        this.$emit('width-change', {
+          available: this.availableWidth,
+          actual: this.menuActualWidth,
+          needArrows: this.shouldShowArrows
+        });
+
+      });
+    },
+    // 更新箭头状态
+    updateArrowStates() {
+      if (!this.shouldShowArrows) {
+        this.canMoveLeft = false;
+        this.canMoveRight = false;
+        return;
+      }
+
+      // 计算最大可移动位置
+      const maxPointer = Math.max(0, this.topList.length - this.topNum);
+
+      this.canMoveLeft = this.pointer > 0;
+      this.canMoveRight = this.pointer < maxPointer;
     },
     moveMenu: function (direction) {
+      if (!this.shouldShowArrows) return;
+
+      const maxPointer = Math.max(0, this.topList.length - this.topNum);
+
       if (direction === "right") {
-        if (this.pointer + this.topNum === this.topList.length) {
-          return;
+        if (this.pointer < maxPointer) {
+          this.pointer++;
         }
-        this.pointer++;
       } else {
-        if (this.pointer === 0) {
-          return;
+        if (this.pointer > 0) {
+          this.pointer--;
         }
-        this.pointer--;
       }
+
+      this.updateArrowStates();
+
       this.flag = false;
       let self = this;
       setTimeout(() => {
         self.flag = true;
       }, 0);
     },
+    // 监听容器大小变化
+    observeResize() {
+      if (window.ResizeObserver) {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.checkWidthAndArrows();
+        });
 
+        if (this.$refs.slideWrapper) {
+          this.resizeObserver.observe(this.$refs.slideWrapper);
+        }
+      }
+    },
   },
+  watch: {
+    availableWidth(newVal) {
+      this.checkWidthAndArrows();
+    },
+    pointer() {
+      this.updateArrowStates();
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.checkWidthAndArrows();
+      this.observeResize();
+    });
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
 }
 </script>
 
 <style scoped lang="less">
+.pro-layout-nav-slide-wrapper {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  .nav-box-slide{
+    overflow: hidden;
+    flex: 1;
+  }
+
+  .tools-box-slide{
+    flex-shrink: 0;
+  }
+}
 
 .more-menu {
-  //color: #d9eeec;
   font-size: 22px;
   cursor: pointer;
-}
+  transition: opacity 0.3s ease;
 
-.nav-box-slide{
-  float: left;
-}
-.tools-box-slide{
-  float: right;
+  &:hover {
+    opacity: 0.8 !important;
+  }
 }
 </style>

package/src/components/pro-layout-header/pro-layout-nav/index.vue

@@ -1,55 +1,55 @@
 <template>
   <div class="pro-layout-nav-wrapper">
     <Menu
-      ref="topNav"
-      mode="horizontal"
-      theme="dark"
-      :active-name="activeName"
-      @on-select="selectApp"
+        ref="topNav"
+        mode="horizontal"
+        theme="dark"
+        :active-name="activeName"
+        @on-select="selectApp"
     >
       <template v-for="item in topMenList">
         <MenuItem v-if="!item.children" :key="item.appId" :name="item.appId">
           <Icon
-            v-bind="getIcon(item)"
-            :size="20"
-            v-show="systemInfo.navLogo === '1'"
+              v-bind="getIcon(item)"
+              :size="20"
+              v-show="systemInfo.navLogo === '1'"
           ></Icon
           >{{ item.name }}
           <div class="line"></div>
         </MenuItem>
         <Submenu
-          class="ibp-nav-sub-menu"
-          v-else
-          :name="item.name"
-          :key="item.name"
+            class="ibp-nav-sub-menu"
+            v-else
+            :name="item.name"
+            :key="item.name"
         >
           <template slot="title">
             {{ item.name }}
           </template>
           <MenuItem
-            v-for="itemL2 in item.children"
-            :key="itemL2.appId"
-            :name="itemL2.appId"
-            ><Icon
+              v-for="itemL2 in item.children"
+              :key="itemL2.appId"
+              :name="itemL2.appId"
+          ><Icon
               :type="itemL2.icon"
               :size="20"
               v-show="systemInfo.navLogo === '1'"
-            ></Icon
-            >{{ itemL2.name }}</MenuItem
+          ></Icon
+          >{{ itemL2.name }}</MenuItem
           >
         </Submenu>
       </template>
       <Submenu name="other" v-if="otherList.length > 0">
         <template slot="title"> ... </template>
         <MenuItem
-          :name="item.appId"
-          v-for="item in otherList"
-          :key="item.appId"
+            :name="item.appId"
+            v-for="item in otherList"
+            :key="item.appId"
         >
           <Icon
-            v-bind="getIcon(item)"
-            :size="20"
-            v-show="systemInfo.navLogo === '1'"
+              v-bind="getIcon(item)"
+              :size="20"
+              v-show="systemInfo.navLogo === '1'"
           ></Icon
           >{{ item.name }}
         </MenuItem>
@@ -66,7 +66,12 @@ import _ from "lodash";
 
 export default {
   name: "pro-layout-nav",
-  props: {},
+  props: {
+    availableWidth: {
+      type: Number,
+      default: 800
+    }
+  },
   data() {
     return {
       systemInfo: {},
@@ -79,6 +84,11 @@ export default {
       lastTopMenuNum: -1,
       acceptAppId: "",
       originMenuList: [],
+      // 新增响应式相关状态
+      resizeObserver: null,
+      menuActualWidth: 0,
+      shouldShowMore: false,
+      autoCalculateWidth: true,
     };
   },
   methods: {
@@ -95,12 +105,19 @@ export default {
       Bus.$on("menu-list", (data) => {
         this.initMenu(data);
       });
+      // 初始化响应式监听
+      this.initResizeObserver();
     },
     destroyListener() {
       Bus.$off("system-info");
       Bus.$off("nav-list");
       Bus.$off("menu-list");
       Bus.$off("change-app");
+      // 清理 ResizeObserver
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
     },
     initSystemInfo(data) {
       if (data) {
@@ -115,9 +132,9 @@ export default {
     },
     initNav(data) {
       if (
-        _.some(data, (app) => app.children?.length) || // 分组以后会死循环调用，中断一下
-        (arraysEqual(this.originNavList, data) &&
-          this.topMenuNum === this.lastTopMenuNum)
+          _.some(data, (app) => app.children?.length) || // 分组以后会死循环调用，中断一下
+          (arraysEqual(this.originNavList, data) &&
+              this.topMenuNum === this.lastTopMenuNum)
       ) {
         return;
       }
@@ -137,25 +154,25 @@ export default {
       // 如果组织了二级菜单展现，则对菜单进行分组
       if (!_.isEmpty(parentNameEnum)) {
         let rlt = _.reduce(
-          dataClone,
-          (acc, cur) => {
-            let parentName = parentNameEnum[cur.appId];
-            if (parentName) {
-              let curApp = _.find(acc, { name: parentName });
-              if (curApp) {
-                curApp.children.push(cur);
+            dataClone,
+            (acc, cur) => {
+              let parentName = parentNameEnum[cur.appId];
+              if (parentName) {
+                let curApp = _.find(acc, { name: parentName });
+                if (curApp) {
+                  curApp.children.push(cur);
+                } else {
+                  acc.push({
+                    name: parentName,
+                    children: [cur],
+                  });
+                }
               } else {
-                acc.push({
-                  name: parentName,
-                  children: [cur],
-                });
+                acc.push(cur);
               }
-            } else {
-              acc.push(cur);
-            }
-            return acc;
-          },
-          []
+              return acc;
+            },
+            []
         );
         this.navList = rlt;
       } else {
@@ -208,39 +225,166 @@ export default {
     },
     // 顶部导航的导航配置多的话，分辨率低的场景下，需要计算一下剩余空间能展示多少，动态计算topMenuNum
     calcTopMenus() {
-      let docWidth = document.getElementById("app").clientWidth;
-      let triggerBoxWidth =
-        document.getElementsByClassName("trigger-box")[0].clientWidth;
-      let logoBoxWidth =
-        document.getElementsByClassName("logo-box")[0].clientWidth;
-      let toolsBoxWidth =
-        document.getElementsByClassName("tools-box")[0].clientWidth;
-      let othersWidth = 80; // 其他按钮的宽度
-      let remainSpace =
-        docWidth - triggerBoxWidth - logoBoxWidth - toolsBoxWidth - othersWidth;
-
-      let topMenuNum = 0
-      let sumWidth = 0
-      // document.getElementsByClassName('pro-layout-nav-wrapper')?.[0]?.getElementsByTagName('li')?.forEach(dom => {
-      document.querySelectorAll('.pro-layout-nav-wrapper>.ivu-menu>li')?.forEach((dom) => {
-        sumWidth += dom.clientWidth
-        if (sumWidth < remainSpace) {
-          topMenuNum++
+      // this.$nextTick(() => {
+      if (!this.autoCalculateWidth) {
+        return;
+      }
+
+      // 计算可用宽度
+      // this.calculateAvailableWidth();
+
+      // 计算实际菜单宽度
+      this.calculateMenuActualWidth();
+
+      // 预留"更多"按钮空间
+      const moreButtonSpace = 80;
+      const effectiveWidth = this.availableWidth - moreButtonSpace;
+
+      // 判断是否需要显示"更多"按钮
+      this.shouldShowMore = this.menuActualWidth > effectiveWidth;
+
+      // 根据可用宽度计算能显示的菜单数量
+      this.calculateTopMenuNum();
+
+      // 更新显示列表
+      this.updateMenuLists();
+
+      // 触发宽度变化事件
+      this.$emit('width-change', {
+        available: this.availableWidth,
+        actual: this.menuActualWidth,
+        needMore: this.shouldShowMore
+      });
+      // });
+    },
+
+    // 计算可用宽度
+    // calculateAvailableWidth() {
+    //   const appElement = document.getElementById("app");
+    //   if (!appElement) return;
+    //
+    //   const docWidth = appElement.clientWidth;
+    //   const triggerBoxWidth = this.getElementWidth("trigger-box");
+    //   const logoBoxWidth = this.getElementWidth("logo-box");
+    //   const toolsBoxWidth = this.getElementWidth("tools-box");
+    //   const othersWidth = 80; // 其他按钮的宽度
+    //
+    //   this.availableWidth = docWidth - triggerBoxWidth - logoBoxWidth - toolsBoxWidth - othersWidth;
+    // },
+
+    // 计算实际菜单宽度
+    calculateMenuActualWidth() {
+      const navWrapper = this.$el;
+      if (!navWrapper) return;
+
+      const menuContainer = navWrapper.querySelector('.ivu-menu');
+      if (menuContainer) {
+        // 计算所有菜单项的实际宽度
+        let totalWidth = 0;
+        const menuItems = menuContainer.querySelectorAll('li');
+        menuItems.forEach(item => {
+          totalWidth += item.offsetWidth;
+        });
+        this.menuActualWidth = totalWidth;
+      }
+    },
+
+    // 计算顶部菜单数量
+    calculateTopMenuNum() {
+      if (!this.navList || this.navList.length === 0) return;
+
+      let topMenuNum = 0;
+      let sumWidth = 0;
+
+      // 模拟计算每个菜单项的宽度
+      this.navList.forEach((item, index) => {
+        // 估算每个菜单项的宽度（包括图标、文字、边距等）
+        const estimatedWidth = this.estimateMenuItemWidth(item);
+
+        if (sumWidth + estimatedWidth < this.availableWidth) {
+          topMenuNum++;
+          sumWidth += estimatedWidth;
         }
-      })
+      });
+
       // 如果计算值为0，就不要触发事件，如果系统配置要展示少量，也不要触发事件
-      if (topMenuNum && this.systemInfo?.topMenu > topMenuNum) {
+      if (topMenuNum && (!this.systemInfo?.topMenu || this.systemInfo?.topMenu > topMenuNum)) {
         this.topMenuNum = topMenuNum;
-        if (this.navList.length > this.topMenuNum) {
-          let navList = deepCopy(this.navList);
-          this.topMenList = navList.splice(0, this.topMenuNum);
-          this.otherList = navList;
-        } else {
-          this.topMenList = this.navList;
-          this.otherList = [];
+      }else{
+        this.topMenuNum = this.systemInfo.topMenu;
+      }
+    },
+
+    // 估算菜单项宽度
+    estimateMenuItemWidth(item) {
+      // 基础宽度：内边距 + 边框
+      let baseWidth = 40;
+
+      // 图标宽度
+      if (item.icon && this.systemInfo.navLogo === '1') {
+        baseWidth += 26;
+      }
+
+      // 文字宽度估算（每个字符约14px）
+      // const fontSize = parseInt(window.getComputedStyle(document.querySelector('#customVars')).getPropertyValue('--font-size-base').replace("px",""))
+      var customVars=window.getComputedStyle(document.querySelector('#customVars'));
+      var fontSizeVar=customVars.getPropertyValue('--font-size-base');
+      var fontSize=parseInt(fontSizeVar.replace("px",""));
+
+      const textWidth = (item.name || '').length * fontSize;
+
+      return baseWidth + textWidth;
+    },
+
+    // 更新菜单列表
+    updateMenuLists() {
+      if (this.navList.length > this.topMenuNum) {
+        const navList = deepCopy(this.navList);
+        this.topMenList = navList.splice(0, this.topMenuNum);
+        this.otherList = navList;
+      } else {
+        this.topMenList = this.navList;
+        this.otherList = [];
+      }
+      console.log("topMenList",this.topMenList.length)
+      console.log("otherList",this.otherList.length)
+    },
+
+    // 获取元素宽度的辅助方法
+    getElementWidth(className) {
+      const element = document.getElementsByClassName(className)[0];
+      return element ? element.clientWidth : 0;
+    },
+
+    // 初始化 ResizeObserver
+    initResizeObserver() {
+      if (window.ResizeObserver) {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.calcTopMenus();
+        });
+      }
+    },
+
+    // 开始监听容器大小变化
+    startResizeObserving() {
+      if (this.resizeObserver && this.$el) {
+        this.resizeObserver.observe(this.$el);
+
+        // 同时监听父容器
+        const appElement = document.getElementById("app");
+        if (appElement) {
+          this.resizeObserver.observe(appElement);
         }
       }
     },
+
+    // 停止监听容器大小变化
+    stopResizeObserving() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+    },
+
     //获取icon图标
     getIcon(item){
       const icon = item.icon
@@ -261,12 +405,31 @@ export default {
         this.$refs.topNav.updateActiveName();
       });
     },
+    // 监听可用宽度变化
+    availableWidth(newVal) {
+      console.log("availableWidth",newVal)
+      this.calcTopMenus();
+    },
+    // 监听系统信息变化
+    systemInfo: {
+      handler() {
+        this.calcTopMenus();
+      },
+      deep: true
+    }
   },
   created() {
     this.initListener();
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.calcTopMenus();
+      this.startResizeObserving();
+    });
+  },
   beforeDestroy() {
     this.destroyListener();
+    this.stopResizeObserving();
   },
 };
 </script>

package/src/components/pro-layout-header/pro-layout-tools/components/pro-layout-tools-quick-icons.vue

@@ -53,7 +53,6 @@ export default {
   },
   methods: {
     initListener() {
-      debugger
       Bus.$on('system-info',(data) => {
         this.initSystemInfo(data);
       })
@@ -62,7 +61,6 @@ export default {
       Bus.$off('system-info')
     },
     initSystemInfo(data){
-      debugger
       if (data && data.rightTopOptButtonList) {
         this.rightTopOptButtonList = deepCopy(data.rightTopOptButtonList)
       }