@lambo-design/pro-layout 1.0.0-beta.27 → 1.0.0-beta.271

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.27",
+  "version": "1.0.0-beta.271",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -9,9 +9,9 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {
-    "@lambo-design/core": "4.7.1-beta.37",
-    "@lambo-design/shared": "1.0.0-beta.17"
+  "devDependencies": {
+    "@lambo-design/shared": "^1.0.0-beta.136",
+    "@lambo-design/core": "^4.7.1-beta.129"
   },
   "scripts": {}
 }

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

@@ -1,17 +1,20 @@
 <template>
   <div class="pro-layout-header-wrapper">
-    <div class="trigger-box">
-      <LamboProTrigger></LamboProTrigger>
+    <div class="trigger-box" :style="menuScalingStyle">
+      <LamboProTrigger v-if="systemInfo.menuScaling === '1'"></LamboProTrigger>
     </div>
     <div class="logo-box">
       <LamboProLogo></LamboProLogo>
     </div>
-    <div class="nav-box">
+    <div class="nav-box" v-show="!systemInfo || !systemInfo.navType || systemInfo.navType == 'dropdown'">
       <LamboProNav></LamboProNav>
     </div>
     <div class="tools-box">
       <LamboProTools></LamboProTools>
     </div>
+    <div v-show="systemInfo && systemInfo.navType && systemInfo.navType == 'slide'">
+      <LamboProNavSildeBtn></LamboProNavSildeBtn>
+    </div>
   </div>
 </template>
 
@@ -19,14 +22,54 @@
 import LamboProTrigger from './pro-layout-trigger'
 import LamboProLogo from './pro-layout-logo'
 import LamboProNav from './pro-layout-nav'
+import LamboProNavSildeBtn from './pro-layout-nav-slide-btn'
 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:''
+    }
+  },
+  data(){
+    return {
+      systemInfo: {},
+    }
+  },
   components: {
     LamboProTrigger,
     LamboProLogo,
     LamboProNav,
+    LamboProNavSildeBtn,
     LamboProTools
+  },
+  computed:{
+    menuScalingStyle(){
+      return this.systemInfo.menuScaling === '1' ? '' : {marginLeft:'25px'}
+    }
+  },
+  methods:{
+    initListener(){
+      Bus.$on('system-info',(data)=>{
+        this.initSystem(data)
+      });
+    },
+    destroyListener(){
+      Bus.$off('system-info')
+    },
+    initSystem(data){
+      if (data) {
+        this.systemInfo = data;
+      }
+    }
+  },
+  created(){
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
   }
 }
 </script>
@@ -49,4 +92,4 @@ export default {
     float: right;
   }
 }
-</style>
+</style>

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

@@ -1,30 +1,92 @@
 <template>
-  <div class="pro-layout-logo-wrapper">
-    <div class="logo" :style="logoStyle"></div>
-    <div class="divider"></div>
-    <div class="system-name">{{systemName}}</div>
+  <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'
 export default {
+
   name: "pro-layout-logo",
+  props:{
+    routeName:String,
+    default:''
+  },
   data(){
     return {
       systemInfo: {},
-      systemName: '后台管理系统'
+      systemName: '后台管理系统',
+      isHovered: false,
+      src:''
     }
   },
   computed:{
-    logoStyle(){
+    logoStyle() {
+      let style = '';
       if (this.systemInfo && this.systemInfo.systemLogo) {
-        return 'background: url("' + this.systemInfo.systemLogo + '") no-repeat;background-size: 100%;'
+        style += `background: url("${this.systemInfo.systemLogo}") no-repeat; background-size: 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;`; // 设置最大高度限制行数
+        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 '';
+      return style;
     }
+
   },
   methods: {
+    handleClick(){
+      Bus.$emit('click-logo')
+    },
     initListener(){
       Bus.$on('system-info',(data)=>{
         this.initSystem(data)
@@ -40,7 +102,8 @@ export default {
           this.systemName = data.systemName;
         }
       }
-    }
+    },
+
   },
   created(){
     this.initListener();
@@ -52,28 +115,32 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import "@lambo-design/core/src/styles/default";
 .pro-layout-logo-wrapper{
   overflow: hidden;
+  cursor:pointer;
   .logo{
     width: 150px;
-    height: 55px;
-    background: url("../styles/images/logo.png") no-repeat;
+    height: 43px;
+    background: url("../styles/images/inspur.png") no-repeat;
     background-size: 100%;
-    float: left;
-    margin-top: 8px;
+    background-position: center; /* 图片在背景区域内居中显示 */
+    //float: left;
+    //margin-top: 20px;
   }
   .divider{
     height: 33px;
     width: 2px;
-    border-right: 2px dashed fade(#ffffff,30%);
-    float: left;
-    margin: 15px;
+    border-right: 2px dashed fade(@_black,30%);
+    //float: left;
+    margin: 0 12px 0 14px;
   }
   .system-name{
-    float: left;
+    //float: left;
     font-weight: bold;
     font-size: 20px;
     margin-right: 15px;
+
   }
 }
-</style>
+</style>

package/src/components/pro-layout-nav-slide-btn.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="pro-layout-nav-slide-wrapper">
+    <div class="nav-box-slide">
+      <LamboProNavSlide :accept-int="pointer" @topMen-list="handleCustomEvent" @topMen-num="topMen"  @topMen-true="topMenTrue"></LamboProNavSlide>
+    </div>
+    <!--slide按钮-->
+    <div class="tools-box-slide">
+      <div style="margin-right: 50px;">
+        <Icon
+            class="more-menu"
+            style="margin-right: 10px"
+            type="md-arrow-dropleft-circle"
+            v-if="arrowFlag"
+            @click="moveMenu('left')"
+        />
+        <Icon
+            type="md-arrow-dropright-circle"
+            class="more-menu"
+            v-if="arrowFlag"
+            @click="moveMenu('right')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LamboProNavSlide from './pro-layout-nav-slide.vue'
+export default {
+  data(){
+    return {
+      pointer:0,
+      topList:[],
+      topNum:0,
+      arrowFlag: true,
+    }
+  },
+  components: {
+    LamboProNavSlide
+  },
+  methods:{
+    handleCustomEvent(data) {
+      // 接收子组件传递的数据
+      this.topList = data;
+    },
+    topMen(data){
+      this.topNum = data;
+    },
+    topMenTrue(data){
+      this.arrowFlag = data
+    },
+    moveMenu: function (direction) {
+      if (direction === "right") {
+        if (this.pointer + this.topNum === this.topList.length) {
+          return;
+        }
+        this.pointer++;
+      } else {
+        if (this.pointer === 0) {
+          return;
+        }
+        this.pointer--;
+      }
+      this.flag = false;
+      let self = this;
+      setTimeout(() => {
+        self.flag = true;
+      }, 0);
+    },
+
+  },
+}
+</script>
+
+<style scoped lang="less">
+
+.more-menu {
+  //color: #d9eeec;
+  font-size: 22px;
+  cursor: pointer;
+}
+
+.nav-box-slide{
+  float: left;
+}
+.tools-box-slide{
+  float: right;
+}
+</style>

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

@@ -0,0 +1,176 @@
+<template>
+  <div class="menu-list" >
+    <ul class="top-menu"  ref="topNav">
+      <li class="top-menu-item" :class="{ 'active': activeName === item.appId }" v-for="(item,index) in topMenList"  :key="item.appId"  @click="selectApp(item.appId)">
+        <div class="menu-item" v-show="pointer <= index && index < pointer + topMenuNum && flag">
+          <p class="menu-icon"><Icon :type="item.icon" :size="20"></Icon></p>
+          <p class="menu-txt">{{ item.name }}</p>
+        </div>
+      </li>
+    </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
+    }
+  },
+  data() {
+    return {
+      pointer:0,
+      flag:true,
+      arrowFlag: true,
+      acceptAppId: '',
+      navList: [],
+      topMenList: [],
+      topTqmMenList:[],
+      otherList: [],
+      activeName: '',
+      topMenuNum: 7,
+      lastTopMenuNum:-1,
+      originMenuList: []
+    }
+  },
+  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.topMenuNum = data.topMenu ? data.topMenu : 4;
+        this.acceptAppId = data.acceptAppId ? data.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
+      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);
+      }
+      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)
+      }
+    },
+    changeApp(appId, appInfo){
+      this.activeName = appId
+    },
+    selectApp(appId) {
+      this.activeName = appId
+      let res = this.navList.filter(app => app.appId == appId)
+      Bus.$emit('change-app', { appId, appInfo: res[0] })
+    },
+  },
+  watch: {
+    acceptInt(val){
+      this.pointer = val;
+    },
+    acceptAppId(val) {
+      this.selectApp(val)
+    }
+  },
+  created() {
+    this.initListener()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '@lambo-design/core/src/styles/default.less';
+.menu-list {
+  height: 100%;
+  line-height: 24px;
+  //color: #ffffff;
+  cursor: pointer;
+  font-size: 16px;
+  margin-left: 53px;
+  .top-menu {
+    overflow: hidden;
+    height: 100%;
+    .top-menu-item {
+      position: relative;
+      height: 100%;
+      //color: #FFFFFF;
+      list-style: none;
+      float: left;
+      &:hover {
+        //background: transparent;
+        .menu-item {
+          //color: #fff;
+        }
+      }
+      &.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;
+        }
+      }
+      .menu-item {
+        padding: 2px 0px 0px 8px;
+        margin: 0px 30px;
+      }
+      .menu-icon {
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        //position: absolute;
+        left: 14px;
+      }
+      .menu-txt {
+        text-align: center;
+        font-size: 14px;
+        line-height: 2;
+      }
+    }
+  }
+}
+</style>