@lambo-design/pro-layout 1.0.0-beta.29 → 1.0.0-beta.290

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.29",
+  "version": "1.0.0-beta.290",
   "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.39",
-    "@lambo-design/shared": "^1.0.0-beta.18"
+  "devDependencies": {
+    "@lambo-design/core": "^4.7.1-beta.129",
+    "@lambo-design/shared": "^1.0.0-beta.136"
   },
   "scripts": {}
 }

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

@@ -0,0 +1,95 @@
+<template>
+  <div class="pro-layout-header-wrapper">
+    <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" 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'">
+      <LamboProNavSilde></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:''
+    }
+  },
+  data(){
+    return {
+      systemInfo: {},
+    }
+  },
+  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)
+      });
+    },
+    destroyListener(){
+      Bus.$off('system-info')
+    },
+    initSystem(data){
+      if (data) {
+        this.systemInfo = data;
+      }
+    }
+  },
+  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;
+  }
+  .tools-box{
+    float: right;
+  }
+}
+</style>

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

@@ -0,0 +1,146 @@
+<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'
+export default {
+
+  name: "pro-layout-logo",
+  props:{
+    routeName:String,
+    default:''
+  },
+  data(){
+    return {
+      systemInfo: {},
+      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%;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 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: 150px;
+    height: 43px;
+    background: url("../../../styles/images/inspur.png") no-repeat;
+    background-size: 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,185 @@
+<template>
+  <div class="menu-list" >
+    <ul class="top-menu" :style="layoutSize === 'default' ? {height: '64px'} : {height: '50px'}" 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" :style="layoutSize === 'default' ? {paddingTop: '10px'} : {paddingTop: '2px'}"  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 {
+      systemInfo:{},
+      pointer:0,
+      flag:true,
+      arrowFlag: true,
+      acceptAppId: '',
+      navList: [],
+      topMenList: [],
+      topTqmMenList:[],
+      otherList: [],
+      activeName: '',
+      topMenuNum: 7,
+      lastTopMenuNum:-1,
+      originMenuList: [],
+      layoutSize:"default"
+    }
+  },
+  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.layoutSize = data.layoutSize ? data.layoutSize : 'default';
+        this.topMenuNum = data.topMenuNum ? data.topMenuNum : 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
+      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)
+      }
+    },
+    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
+      }
+    }
+  },
+  watch: {
+    acceptInt(val){
+      this.pointer = 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;
+    .top-menu-item {
+      margin-left: 34px;
+      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 {
+        display: flex;
+        margin-top: 10px;
+        padding-right: 10px;
+      }
+      .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;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,89 @@
+<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>
+    <!--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 LamboProNavSlideMenu from './components/pro-layout-nav-slide-menu'
+export default {
+  data(){
+    return {
+      pointer:0,
+      topList:[],
+      topNum:0,
+      arrowFlag: true,
+    }
+  },
+  components: {
+    LamboProNavSlideMenu
+  },
+  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-header/pro-layout-nav/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="pro-layout-nav-wrapper">
+    <Menu ref="topNav" mode="horizontal" theme="dark" :active-name="activeName" @on-select="selectApp">
+      <MenuItem :name="item.appId" v-for="item in topMenList" :key="item.appId">
+        {{ item.name }}
+        <div class="line"></div>
+      </MenuItem>
+      <Submenu name="other" v-if="otherList.length > 0">
+        <template slot="title">
+          ...
+        </template>
+        <MenuItem :name="item.appId" v-for="item in otherList" :key="item.appId">
+          {{ item.name }}
+        </MenuItem>
+      </Submenu>
+    </Menu>
+  </div>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import { deepCopy } from '@lambo-design/shared/utils/assist'
+
+export default {
+  name: 'pro-layout-nav',
+  props: {
+
+  },
+  data() {
+    return {
+      navList: [],
+      topMenList: [],
+      otherList: [],
+      activeName: '',
+      topMenuNum: 4,
+      lastTopMenuNum:-1,
+      acceptAppId: '',
+      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)
+      })
+      Bus.$on('menu-list', (data) => {
+        this.initMenu(data)
+      })
+
+    },
+    destroyListener() {
+      Bus.$off('system-info')
+      Bus.$off('nav-list')
+      Bus.$off('menu-list')
+      Bus.$off('change-app')
+    },
+    initSystemInfo(data) {
+      if (data) {
+        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
+      if (data.length > this.topMenuNum) {
+        let navList = deepCopy(data)
+        this.topMenList = navList.splice(0, this.topMenuNum)
+        this.otherList = navList
+      } else {
+        this.topMenList = this.navList
+        this.otherList = []
+      }
+      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)
+      }
+    },
+    initMenu(data) {
+      this.originMenuList = deepCopy(data)
+    },
+    selectApp(appId) {
+      if (appId) {
+        let res = this.navList.filter(app => app.appId == appId)
+        if (res && res.length > 0) {
+          Bus.$emit('change-app', { appId, appInfo: res[0] })
+        }
+      }
+    },
+    changeApp(appId, appInfo) {
+      if (appId) {
+        this.activeName = appId
+        this.$nextTick(() => {
+          this.$refs.topNav.updateActiveName()
+        })
+      }
+    }
+  },
+  watch: {
+    activeName() {
+      this.$nextTick(() => {
+        this.$refs.topNav.updateActiveName()
+      })
+    }
+  },
+  created() {
+    this.initListener()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '@lambo-design/core/src/styles/default.less';
+.pro-layout-nav-wrapper {
+  .ivu-menu {
+    .ivu-menu-item {
+      &:hover {
+        .line {
+          position: absolute;
+          left: 0;
+          right: 0;
+        }
+      }
+      &.ivu-menu-item-active, &.ivu-menu-item-selected {
+        .line {
+          position: absolute;
+          left: 0;
+          right: 0;
+        }
+      }
+    }
+  }
+}
+
+</style>