@lambo-design/pro-layout 1.0.0-beta.40 → 1.0.0-beta.401

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.40",
+  "version": "1.0.0-beta.401",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,8 +10,15 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/core": "^4.7.1-beta.54",
-    "@lambo-design/shared": "^1.0.0-beta.39"
+    "@lambo-design/core": "^4.7.1-beta.167",
+    "@lambo-design/shared": "^1.0.0-beta.286"
   },
-  "scripts": {}
+  "scripts": {
+    "release-pro-layout": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
 }

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

@@ -0,0 +1,203 @@
+<template>
+  <div class="pro-layout-header-wrapper">
+    <div class="trigger-box" :style="menuScalingStyle">
+      <slot name="pro-layout-trigger">
+        <LamboProTrigger v-if="systemInfo.menuScaling === '1'" :menu-scaling-status="systemInfo.menuScalingStatus" :hide-menu-logo="hideMenuLogo"></LamboProTrigger>
+      </slot>
+    </div>
+    <div class="logo-box">
+      <slot name="pro-layout-logo">
+        <LamboProLogo></LamboProLogo>
+      </slot>
+    </div>
+    <div class="nav-box" v-show="!systemInfo || !systemInfo.navType || systemInfo.navType == 'dropdown'">
+      <slot name="pro-layout-nav">
+        <LamboProNav
+            :available-width="availableWidth"
+        ></LamboProNav>
+      </slot>
+    </div>
+    <div class="tools-box">
+      <LamboProTools>
+        <template slot = "pro-layout-icons">
+          <slot name="pro-layout-icons"></slot>
+        </template>
+        <template slot = "pro-layout-user">
+          <slot name="pro-layout-user"></slot>
+        </template>
+      </LamboProTools>
+    </div>
+    <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>
+
+<script>
+import LamboProTrigger from './pro-layout-trigger'
+import LamboProLogo from './pro-layout-logo'
+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:{
+    acceptAppId: {
+      type: String,
+      default:''
+    },
+    hideMenuLogo: {
+      type: Boolean,
+      default:true
+    }
+  },
+  data(){
+    return {
+      systemInfo: {},
+      availableWidth: 0,
+      resizeTimer: null,
+    }
+  },
+  components: {
+    LamboProTrigger,
+    LamboProLogo,
+    LamboProNav,
+    LamboProNavSilde,
+    LamboProTools
+  },
+  computed:{
+    menuScalingStyle(){
+      return this.systemInfo.menuScaling === '1' ? '' : {marginLeft:'25px'}
+    }
+  },
+  methods:{
+    initListener(){
+      Bus.$on('system-info',(data)=>{
+        this.initSystem(data)
+      });
+
+      // 监听窗口大小变化
+      window.addEventListener('resize', this.handleResize);
+    },
+    destroyListener(){
+      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")?.getBoundingClientRect().width || window.innerWidth;
+        // 获取各个组件的宽度
+        const triggerBoxWidth = this.getTriggerBoxWidth();
+        const logoBoxWidth = this.getLogoBoxWidth();
+        const toolsBoxWidth = this.getToolsBoxWidth();
+
+        let reservedWidth = 1;
+        // 预留一些空间给箭头按钮和边距
+        if(this.systemInfo.navType == 'slide'){
+          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.getBoundingClientRect().width : 0;
+    },
+
+    // 获取logo组件宽度
+    getLogoBoxWidth() {
+      const logoBox = document.querySelector('.logo-box');
+      return logoBox ? logoBox.getBoundingClientRect().width : 0;
+    },
+
+    // 获取tools组件宽度
+    getToolsBoxWidth() {
+      const toolsBox = document.querySelector('.tools-box');
+      return toolsBox ? toolsBox.getBoundingClientRect().width : 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();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+  }
+}
+</script>
+
+<style scoped lang="less">
+.pro-layout-header-wrapper{
+  width: auto;
+  height: 64px;
+  .trigger-box{
+    float: left;
+    height: inherit;
+  }
+  .logo-box{
+    float: left;
+  }
+  .nav-box{
+    float: left;
+  }
+  .nav-slide-container{
+    float: left;
+    flex: 1;
+    overflow: hidden;
+  }
+  .tools-box{
+    float: right;
+  }
+}
+</style>

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

@@ -0,0 +1,150 @@
+<template>
+  <div @click="handleClick">
+    <Row class="pro-layout-logo-wrapper" :style="systemInfo.layoutSize === 'default' ? {height:'64px'} :{height:'50px'} " type="flex" align="middle">
+      <Col>
+        <div class="logo" v-if="systemInfo.systemLogo" :style="logoStyle"></div>
+      </Col>
+      <Col>
+        <div class="divider" v-if="systemInfo.systemLogo"></div>
+      </Col>
+      <Col>
+        <div class="system-name" :style="nameStyle">{{systemName}}</div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import Locale from '@lambo-design/core/src/mixins/locale';
+
+export default {
+  name: "pro-layout-logo",
+  mixins: [Locale],
+  props:{
+    routeName:String,
+    default:''
+  },
+  data(){
+    return {
+      systemInfo: {},
+      systemName: this.t('pro-layout.common.systemName'),
+      isHovered: false,
+      src:''
+    }
+  },
+  computed:{
+    logoStyle() {
+      let style = '';
+      if (this.systemInfo && this.systemInfo.systemLogo) {
+        style += `background: url("${this.systemInfo.systemLogo}") no-repeat; background-size: 100% 100%;background-position:center;`;
+        // 如果 systemInfo.logoWidth 存在且不为空，则添加到样式
+        if (this.systemInfo.logoWidth && this.systemInfo.logoWidth !== '') {
+          style += `width: ${this.systemInfo.logoWidth}px;`;
+        }
+        // 如果 systemInfo.logoTop 存在且不为空，则添加到样式
+        // if (this.systemInfo.logoTop && this.systemInfo.logoTop !== '') {
+        //   style += `margin-top: ${this.systemInfo.logoTop}px;`;
+        // }
+        style += `text-align-last: justify;`
+      }
+      return style;
+    },
+
+
+    nameStyle() {
+      let style = '';
+      if (this.systemInfo && this.systemInfo.nameSize) {
+        const lines = this.systemInfo.nameSize; // 行数
+        const maxHeight = lineHeight * lines; // 计算最大高度
+
+        // 根据nameSize设置margin-top
+        // if (lines == 1) {
+        //   style += `margin-top: 12px;`;
+        // } else if (lines == 2) {
+        //   style += `margin-top: 5px; `;
+        // }
+
+        // 动态计算字体大小
+        const fontSize = Math.max(20 - (lines - 1) * 4, 15); // 字体大小递减
+        const lineHeight = fontSize + 5; // 固定行高
+        const width = (this.systemName.length / lines) * fontSize + 20;
+
+        // 组装样式字符串
+        style += `line-height: ${lineHeight}px;`;
+        style += `font-size: ${fontSize}px;`;
+        style += `max-height: ${maxHeight}px;`; // 设置最大高度限制行数
+        if (this.$cookies.get("lambo_lang_code") && this.$cookies.get("lambo_lang_code") == 'zh') {
+          style += `width: ${width}px;`; // 设置宽度
+        }
+        style += `overflow: hidden;`; // 超出部分隐藏
+        style += `word-wrap: break-word;`; // 允许单词内换行
+        style += `white-space: normal;`; // 默认的换行方式
+        style += `text-align-last: justify;`;
+        style += `text-align: justify;`;
+      }
+      return style;
+    }
+
+  },
+  methods: {
+    handleClick(){
+      Bus.$emit('click-logo')
+    },
+    initListener(){
+      Bus.$on('system-info',(data)=>{
+        this.initSystem(data)
+      });
+    },
+    destroyListener(){
+      Bus.$off('system-info')
+    },
+    initSystem(data){
+      if (data) {
+        this.systemInfo = data;
+        if (data.systemName) {
+          this.systemName = data.systemName;
+        }
+      }
+    },
+
+  },
+  created(){
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "@lambo-design/core/src/styles/default";
+.pro-layout-logo-wrapper{
+  overflow: hidden;
+  cursor:pointer;
+  .logo{
+    width: 210px;
+    height: 40px;
+    background: url("../../../styles/images/inspur.png") no-repeat;
+    background-size: 100% 100%;
+    background-position: center; /* 图片在背景区域内居中显示 */
+    //float: left;
+    //margin-top: 20px;
+  }
+  .divider{
+    height: 33px;
+    width: 2px;
+    border-right: 2px dashed fade(@_black,30%);
+    //float: left;
+    margin: 0 12px 0 14px;
+  }
+  .system-name{
+    //float: left;
+    font-weight: bold;
+    font-size: 20px;
+    margin-right: 15px;
+
+  }
+}
+</style>

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

@@ -0,0 +1,327 @@
+<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': 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>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import { deepCopy } from '@lambo-design/shared/utils/assist'
+
+export default {
+  props: {
+    acceptInt: {
+      type: Number,
+      default: 0
+    },
+    topMenListNum: {
+      type: Number,
+      default: 0
+    },
+    availableWidth: {
+      type: Number,
+      default: 800
+    }
+  },
+  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 = data.topMenu ? data.topMenu : 4;
+        this.acceptAppId = data.acceptAppId ? data.acceptAppId : '';
+        if (!this.activeName) {
+          this.activeName = this.acceptAppId
+        }
+        this.initNav(this.navList)
+      }
+    },
+    initNav(data) {
+      if (data.toString() === this.navList.toString() && this.topMenuNum === this.lastTopMenuNum) {
+        return
+      }
+      this.navList = data
+      this.lastTopMenuNum = this.topMenuNum
+
+      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++) {
+          if (this.topMenList[i].selected == true) {
+            appId = this.topMenList[i].appId
+          }
+        }
+        if (this.activeName) {
+          appId = this.activeName
+        }
+        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
+        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>