@lambo-design/pro-layout 1.0.0-beta.43 → 1.0.0-beta.431

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

@@ -0,0 +1,360 @@
+<template>
+  <div class="menu-list" ref="menuList">
+    <ul class="top-menu" :style="layoutSize === 'default' ? {height: '64px'} : {height: '50px'}" ref="topNav">
+      <template v-for="(item,index) in topMenList" >
+        <li class="top-menu-item"
+            :class="{ 'active': notHomeIndex ? activeName === item.appId : 'backHome' === 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>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import { deepCopy } from '@lambo-design/shared/utils/assist'
+import _ from "lodash";
+
+export default {
+  props: {
+    acceptInt: {
+      type: Number,
+      default: 0
+    },
+    topMenListNum: {
+      type: Number,
+      default: 0
+    },
+    availableWidth: {
+      type: Number,
+      default: 800
+    },
+    notHomeIndex: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      systemInfo:{},
+      pointer:0,
+      arrowFlag: true,
+      acceptAppId: '',
+      navList: [],
+      topMenList: [],
+      topTqmMenList:[],
+      otherList: [],
+      activeName: '',
+      topMenuNum: 7,
+      displayMenuNum: 7, // 实际显示的菜单数量
+      lastTopMenuNum:-1,
+      originMenuList: [],
+      layoutSize:"default",
+      // menuItemWidths: [], // 存储每个菜单项的宽度
+      resizeObserver: null,
+    }
+  },
+  methods: {
+    initListener() {
+      Bus.$on('system-info',(data) => {
+        this.initSystemInfo(data);
+      })
+      Bus.$on('nav-list', (data) => {
+        this.initNav(data)
+      })
+      Bus.$on('change-app', ({ appId, appInfo }) => {
+        this.changeApp(appId, appInfo)
+      })
+    },
+    destroyListener() {
+      Bus.$off('system-info')
+      Bus.$off('nav-list')
+      Bus.$off('change-app')
+    },
+    initSystemInfo(data) {
+      if (data) {
+        this.systemInfo = data
+        this.layoutSize = data.layoutSize ? data.layoutSize : 'default';
+        this.topMenuNum =  Number.isInteger(data.topMenu) ? data.topMenu : 4;
+        this.acceptAppId = data.acceptAppId ? data.acceptAppId : '';
+        if (!this.activeName && this.notHomeIndex) {
+          this.activeName = this.acceptAppId
+        }
+        this.initNav(this.navList)
+      }
+    },
+    initNav(data) {
+      // 过滤掉首页项，获取真实的业务数据
+      const realData = data.filter(item => item.appId !== 'backHome');
+      if (realData.toString() === this.navList.toString() && this.topMenuNum === this.lastTopMenuNum) {
+        return
+      }
+      this.navList = realData
+      this.lastTopMenuNum = this.topMenuNum
+
+      let dataClone = _.cloneDeep(realData);
+      // 如果配置了显示首页且显示样式是应用式，在列表最前面添加首页项
+      if (dataClone && dataClone.length > 0 && this.systemInfo.backToHome && this.systemInfo.backToHomeStyle === "app") {
+        const homeItem = {
+          appId: 'backHome',
+          name: this.systemInfo.backToHomeText || '首页',
+          icon: 'ios-home',
+          selected: false
+        };
+        dataClone.unshift(homeItem);
+      }
+
+      this.topMenList = dataClone
+      this.$emit('topMen-list', this.topMenList);
+
+      // 计算可以显示的菜单数量
+      this.calculateDisplayMenuNum();
+
+      if (this.topMenList.length > 0) {
+        let appId = this.topMenList[0].appId
+        if (this.systemInfo.backToHome && this.systemInfo.backToHomeStyle === "app") {
+          appId = this.topMenList[1].appId;
+        }
+        for (let i = 0; i < this.topMenList.length; i++) {
+          if (this.topMenList[i].selected == true) {
+            appId = this.topMenList[i].appId
+          }
+        }
+        if (this.activeName) {
+          appId = this.activeName
+        }
+        if (this.notHomeIndex) {
+          this.selectApp(appId)
+        } else if (this.systemInfo.backToHome === "1" && this.systemInfo.backToHomeStyle === "app") {
+          this.activeName = 'backHome'
+        }
+      }
+    },
+    // 计算可以显示的菜单数量
+    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.topMenList.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.displayMenuNum > 0;
+        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) {
+        if (appId === 'backHome') {
+          Bus.$emit("change-app", {
+            appId,
+            appInfo: {}
+          });
+          return;
+        }
+        this.activeName = appId
+        let res = this.navList.filter(app => app.appId == appId)
+        Bus.$emit('change-app', { appId, appInfo: res[0] })
+      }
+    },
+    changeApp(appId, appInfo){
+      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();
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '@lambo-design/core/src/styles/default.less';
+.menu-list {
+  height: 100%;
+  line-height: 24px;
+  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%;
+      list-style: none;
+      float: left;
+      transition: all 0.3s ease;
+
+      &:hover {
+        .menu-item {
+          // hover styles
+        }
+      }
+      &.active {
+        .menu-item {
+          // active styles
+        }
+      }
+      .menu-item {
+        display: flex;
+        margin-top: 10px;
+        text-align: center;
+      }
+      .menu-icon {
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        margin-right: 10px;
+        margin-top: 3px;
+      }
+      .menu-txt {
+        text-align: center;
+        font-size: 14px;
+        line-height: 2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 120px; // 限制最大宽度
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,225 @@
+<template>
+  <div class="pro-layout-nav-slide-wrapper" ref="slideWrapper">
+    <div class="nav-box-slide" ref="navBox" :style="{ width: availableWidth + 'px' }">
+      <LamboProNavSlideMenu
+          :not-home-index="notHomeIndex"
+          :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" v-if="shouldShowArrows">
+      <div style="margin-right: 50px;">
+        <Icon
+            class="more-menu"
+            style="margin-right: 10px"
+            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>
+  </div>
+</template>
+
+<script>
+import LamboProNavSlideMenu from './components/pro-layout-nav-slide-menu'
+
+export default {
+  props: {
+    availableWidth: {
+      type: Number,
+      default: 800
+    },
+    autoCalculateWidth: {
+      type: Boolean,
+      default: true
+    },
+    notHomeIndex: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data(){
+    return {
+      pointer: 0,
+      topList: [],
+      topNum: 0,
+      arrowFlag: false,
+      menuActualWidth: 0,
+      shouldShowArrows: false,
+      canMoveLeft: false,
+      canMoveRight: false,
+      resizeObserver: null,
+    }
+  },
+  components: {
+    LamboProNavSlideMenu
+  },
+  methods:{
+    handleCustomEvent(data) {
+      // 接收子组件传递的数据
+      this.topList = data;
+      this.checkWidthAndArrows();
+    },
+    topMen(data){
+      this.topNum = data;
+      this.checkWidthAndArrows();
+    },
+    topMenTrue(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 < maxPointer) {
+          this.pointer++;
+        }
+      } else {
+        if (this.pointer > 0) {
+          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 {
+  font-size: 22px;
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    opacity: 0.8 !important;
+  }
+}
+</style>