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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.43",
+  "version": "1.0.0-beta.431",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,8 +10,15 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/core": "^4.7.1-beta.58",
-    "@lambo-design/shared": "^1.0.0-beta.43"
+    "@lambo-design/shared": "^1.0.0-beta.351",
+    "@lambo-design/core": "^4.7.1-beta.176"
   },
-  "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,218 @@
+<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 :show-back-to-home="hideMenuLogo"></LamboProLogo>
+      </slot>
+    </div>
+    <div class="nav-box" v-show="!systemInfo || !systemInfo.navType || systemInfo.navType == 'dropdown'">
+      <slot name="pro-layout-nav">
+        <LamboProNav
+            :available-width="availableWidth"
+            :not-home-index="hideMenuLogo"
+        ></LamboProNav>
+      </slot>
+    </div>
+    <div class="tools-box">
+      <LamboProTools :show-tools-quick-icons="hideMenuLogo">
+        <template slot = "pro-layout-icons">
+          <slot name="pro-layout-icons"></slot>
+        </template>
+        <template slot="pro-layout-custom-icons">
+          <slot name="pro-layout-custom-icons"></slot>
+        </template>
+        <template slot = "pro-layout-user">
+          <slot name="pro-layout-user"></slot>
+        </template>
+      </LamboProTools>
+    </div>
+    <div class="slogan-box" style="display: none;">
+      <slot name="pro-layout-slogan">
+        <LamboProSlogan></LamboProSlogan>
+      </slot>
+    </div>
+    <div class="nav-slide-container" v-show="systemInfo && systemInfo.navType && systemInfo.navType == 'slide'" ref="slideContainer">
+      <LamboProNavSilde
+          :available-width="availableWidth"
+          :not-home-index="hideMenuLogo"
+          @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 LamboProSlogan from './pro-layout-slogan/index'
+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,
+    LamboProSlogan,
+    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;
+  }
+  .slogan-box {
+    float: right;
+  }
+  .tools-box{
+    float: right;
+  }
+}
+</style>

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

@@ -0,0 +1,206 @@
+<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>
+      <Col v-if="'1' === systemInfo.backToHome && 'button' === systemInfo.backToHomeStyle && showBackToHome">
+        <Button class="home-btn" shape="circle" icon="ios-home">{{ systemInfo.backToHomeText || '返回工作台' }}</Button>
+      </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: {
+      type: String,
+      default: ''
+    },
+    showBackToHome: {
+      type: Boolean,
+      default: true
+    }
+  },
+  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;
+    },
+    backStyle() {
+      let style = '';
+      if (this.systemInfo && this.systemInfo.nameSize) {
+        const lines = this.systemInfo.nameSize;
+        const maxHeight = lineHeight * lines;
+
+        const fontSize = Math.max(15 - (lines - 1) * 3, 10);
+        const lineHeight = fontSize + 5;
+        const width = (this.systemName.length / lines) * fontSize *0.45 + 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;`;
+
+        // 添加按钮基础样式
+        style += 'cursor: pointer;';
+        style += 'border: none;';
+        style += 'outline: none;';
+        style += 'transition: all 0.3s ease;';
+        style += 'background: transparent;';
+        style += 'display: flex;';
+        style += 'align-items: center;';
+      }
+      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;
+
+  }
+  .home-btn {
+    cursor: pointer;
+    border: none;
+    outline: none;
+    color: var(--primary-color,@_primary-color) !important;
+    background: #FFFFFF !important;
+    padding: 8px 14px;
+    display: flex;
+    align-items: center;
+    opacity: 0.9;
+    transition: opacity 0.3s ease;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+</style>