@lambo-design/pro-layout 1.0.0-beta.21 → 1.0.0-beta.211

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.211",
   "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.16"
+  "devDependencies": {
+    "@lambo-design/shared": "^1.0.0-beta.115",
+    "@lambo-design/core": "^4.7.1-beta.118"
   },
   "scripts": {}
 }

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

@@ -20,13 +20,234 @@ import LamboProTrigger from './pro-layout-trigger'
 import LamboProLogo from './pro-layout-logo'
 import LamboProNav from './pro-layout-nav'
 import LamboProTools from './pro-layout-tools'
+import Bus from "@lambo-design/shared/utils/bus";
+import {deepCopy} from "@lambo-design/shared/utils/assist";
+import generatorMenuList from "@lambo-design/shared/utils/menu";
+import {filterMenuName, filterMenuUri, tagExists} from "@lambo-design/shared/utils/platform";
+import {findComponentsDownward} from "@lambo-design/core/src/utils/assist";
 export default {
   name: "pro-layout-header",
+  props:{
+    acceptAppId: {
+      type: String,
+      default:''
+    }
+  },
+  data(){
+    return {
+      systemInfo: {},
+      isShowSearch:'1',
+      navList: [],
+      originMenuList:[],
+      menuList: [],
+      appId: '',
+      primaryColor: '#ff0000',
+      collapsed: false,
+      accordion: true,
+      activeName: '',
+      openedNames: [],
+      activeMenu: null,
+      selectedMenuParent: null,
+      activeMenuItem: null,
+      openedSubMenu: null,
+      currentMenuItem: null,
+      selectedTopParent: '',
+      activeIcon: null,
+      tagValue: '',
+      tagList: []
+    }
+  },
   components: {
     LamboProTrigger,
     LamboProLogo,
     LamboProNav,
     LamboProTools
+  },
+  methods:{
+    initListener(){
+      Bus.$on('system-info',(data)=>{
+        this.initSystem(data)
+      });
+      Bus.$on('nav-list',(data)=>{
+        this.initNav(data)
+      });
+      Bus.$on('menu-list',(data)=>{
+        this.initMenu(data)
+      });
+      Bus.$on('trigger-change',(data)=>{
+        this.triggerChange(data)
+      });
+      Bus.$on('change-app', ({appId,appInfo})=> {
+        this.changeApp(appId,appInfo)
+      })
+      Bus.$on('tag-list',(data,current)=>{
+        this.initTags(data,current)
+      });
+      Bus.$on('menu-click',(current)=>{
+        this.menuClick(current)
+      });
+    },
+    destroyListener(){
+      Bus.$off('system-info')
+      Bus.$off('nav-list')
+      Bus.$off('menu-list')
+      Bus.$off('trigger-change')
+      Bus.$off('change-app')
+      Bus.$off('tag-list')
+      Bus.$off('menu-click')
+    },
+    initSystem(data){
+      if (data) {
+        this.systemInfo = data;
+        if (data.isShowSearch) {
+          this.isShowSearch = data.isShowSearch;
+        }
+      }
+    },
+    initNav(data){
+      if (data.toString() === this.navList.toString()) {
+        return;
+      }
+      this.navList = data;
+    },
+    handleSelect(name,uri,pid){
+      let menu = null;
+      if (name.indexOf("isTurnByHref_") > -1) {
+        name = name.replace("isTurnByHref_","");
+        menu = filterMenuUri(this.menuList,name);
+      } else {
+        menu = filterMenuName(this.menuList,name);
+      }
+      let tagList = this.tagList;
+      if (menu && menu.name) {
+        if (!tagExists(tagList,menu.name)) {
+          tagList.push(menu);
+        }
+        Bus.$emit('tag-list', tagList, menu.name)
+      }
+      if (menu.meta && Array.isArray(menu.meta.crumbs)) {
+        let parentMenu = menu.meta.crumbs[0]
+        this.$set(this, 'selectedTopParent', parentMenu.name);
+      } else {
+        // 处理没有父菜单的情况
+        this.$set(this, 'selectedTopParent', menu.name);
+      }
+      // 如果 uri 为空，则需要根据 pid 判断是展开父菜单还是同时展开父菜单和当前菜单
+      if (!uri) {
+        let parentName;
+        if (pid === 0) {
+          // 如果 pid 为 0，表示是最外层菜单
+          parentName = this.getNameOrHref(menu);
+          //console.log('parentName',parentName)
+          this.openedNames = [parentName]; // 设置最外层父菜单为展开状态
+        } else {
+          // 如果 pid 不等于 0，查找并打开对应的最外层父菜单
+          parentName = this.getTopParent(menu);
+          this.openedNames = [parentName]; // 设置最外层父菜单为展开状态
+          this.activeName = menu.name; // 设置当前菜单为激活状态
+        }
+      }
+    },
+
+    getTopParent(menu) {
+      return menu.parent ? this.getTopParent(menu.parent) : menu.name;
+    },
+    initMenu(data){
+      if (data && data.length > 0) {
+        let item = data[0];
+        if (item.appId && item.appId !== this.appId) {
+          return;
+        }
+      }
+      this.originMenuList = deepCopy(data);
+      this.changeMenu()
+    },
+    changeApp(appId,appInfo){
+      this.appId = appId;
+      this.changeMenu()
+    },
+    changeMenu(){
+      let treeMenuList = generatorMenuList(this.originMenuList,this.appId);
+      if (treeMenuList && treeMenuList.length > 0) {
+        this.menuList = treeMenuList;
+      } else {
+        this.menuList = [];
+      }
+      this.openedNames = this.getOpenedNamesByActiveName();
+    },
+    activeIconBackground(item) {
+      // 如果当前菜单项是激活的，返回一个颜色值，否则返回空
+      return this.selectedMenuParent=== item.parent ? this.primaryColor : '';
+    },
+    triggerChange(data){
+      this.collapsed = data;
+    },
+    initTags(data,name){
+      this.tagList = data;
+      this.value = name;
+    },
+    menuClick(current) {
+      let item = this.originMenuList.filter(menu => menu.name === current);
+      if (item && item.length > 0){
+        let type = item[0].type;
+        if (type == 2) {
+          this.activeName = current;
+        } else {
+          let pItem = this.originMenuList.filter(menu => menu.permissionId === item[0].pid);
+          if (pItem && pItem.length > 0){
+            this.activeName = pItem[0].name;
+          }
+        }
+      } else {
+        this.activeName = current;
+      }
+    },
+    getOpenedNamesByActiveName(){
+      let res = filterMenuName(this.menuList,this.activeName);
+      let openNames = []
+      if (res) {
+        const crumbs = res.meta.crumbs;
+        if (crumbs) {
+          crumbs.forEach(item => {
+            if (item.type === 1) {
+              openNames.push(item.name)
+            }
+          })
+        }
+      }
+      return openNames
+    },
+    updateOpened () {
+      const items = findComponentsDownward(this, 'Submenu');
+      if (items.length) {
+        items.forEach(item => {
+          if (this.openedNames.indexOf(item.name) > -1) item.opened = true;
+          else item.opened = false;
+        });
+      }
+    },
+    updateActiveName () {
+      if (this.currentActiveName === undefined) {
+        this.currentActiveName = -1;
+      }
+    }
+  },
+  watch:{
+    activeName(){
+      this.openedNames = this.getOpenedNamesByActiveName();
+    },
+    openedNames() {
+      this.$nextTick(() => {
+        this.updateOpened()
+        this.updateActiveName()
+      })
+    }
+  },
+  created(){
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
   }
 }
 </script>
@@ -49,4 +270,4 @@ export default {
     float: right;
   }
 }
-</style>
+</style>

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

@@ -1,30 +1,99 @@
 <template>
-  <div class="pro-layout-logo-wrapper">
-    <div class="logo" :style="logoStyle"></div>
-    <div class="divider"></div>
-    <div class="system-name">{{systemName}}</div>
+  <div class="pro-layout-logo-wrapper" @click="handleClick">
+    <div class="logo" v-if="systemInfo.systemLogo !='hide'" :style="logoStyle"></div>
+    <div class="divider" v-if="systemInfo.systemLogo !='hide'"></div>
+    <div class="system-name" :style="nameStyle">{{systemName}}</div>
   </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%;`;
+        // 如果 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() {
+    //   const fontSize = 20; // 固定的字体大小是 20px
+    //   const lineHeight = 50; // 固定的行高是 50px
+    //   const nameSize = this.systemInfo.nameSize || 1; // 默认行数为1，如果未指定则使用1
+    //   // 计算总高度
+    //   const height = lineHeight * nameSize; // 确保至少有一行高度，即使nameSize小于1
+    //   return {
+    //     'font-size': `${fontSize}px`, // 应用固定的字体大小
+    //     'line-height': `${lineHeight}px`, // 应用固定的行高
+    //     'height': `${height}px`, // 应用计算出的总高度
+    //     'overflow': 'hidden', // 确保多余的文本被裁剪
+    //     'white-space': 'pre-wrap', // 允许换行
+    //     'word-break': 'break-all'
+    //   };
+    // }
+
+    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: 12.8px;`;
+        } else if (lines === '2') {
+          style += `margin-top: 6px; `;
+        }
+
+        // 动态计算字体大小
+        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 +109,8 @@ export default {
           this.systemName = data.systemName;
         }
       }
-    }
+    },
+
   },
   created(){
     this.initListener();
@@ -54,13 +124,14 @@ export default {
 <style scoped lang="less">
 .pro-layout-logo-wrapper{
   overflow: hidden;
+  cursor:pointer;
   .logo{
     width: 150px;
     height: 55px;
-    background: url("../styles/images/logo.png") no-repeat;
+    background: url("../styles/images/inspur.png") no-repeat;
     background-size: 100%;
     float: left;
-    margin-top: 8px;
+    margin-top: 20px;
   }
   .divider{
     height: 33px;
@@ -74,6 +145,7 @@ export default {
     font-weight: bold;
     font-size: 20px;
     margin-right: 15px;
+
   }
 }
-</style>
+</style>

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

@@ -2,7 +2,7 @@
   <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}}
+        {{ item.name }}
         <div class="line"></div>
       </MenuItem>
       <Submenu name="other" v-if="otherList.length > 0">
@@ -10,7 +10,7 @@
           ...
         </template>
         <MenuItem :name="item.appId" v-for="item in otherList" :key="item.appId">
-        {{item.name}}
+          {{ item.name }}
         </MenuItem>
       </Submenu>
     </Menu>
@@ -18,127 +18,170 @@
 </template>
 
 <script>
-import Bus from "@lambo-design/shared/utils/bus";
-import {deepCopy} from "@lambo-design/shared/utils/assist";
-import config from "@lambo-design/shared/config/config";
+import Bus from '@lambo-design/shared/utils/bus'
+import { deepCopy } from '@lambo-design/shared/utils/assist'
 
 export default {
-  name: "pro-layout-logo",
-  data(){
+  name: 'pro-layout-',
+  props: {
+
+  },
+  data() {
     return {
-      navList : [],
-      topMenList : [],
-      otherList : [],
-      activeName : '',
-      topMenuNum : 4,
+      navList: [],
+      topMenList: [],
+      otherList: [],
+      activeName: '',
+      topMenuNum: 4,
+      lastTopMenuNum:-1,
+      acceptAppId: '',
       originMenuList: []
     }
   },
   methods: {
-    initListener(){
-      Bus.$on('nav-list',(data)=>{
+    initListener() {
+      Bus.$on('system-info',(data) => {
+        this.initSystemInfo();
+      })
+      Bus.$on('nav-list', (data) => {
         this.initNav(data)
-      });
-      Bus.$on('change-app', ({appId,appInfo})=> {
-        this.changeApp(appId,appInfo)
-      });
-      Bus.$on('menu-list',(data)=>{
+      })
+      Bus.$on('change-app', ({ appId, appInfo }) => {
+        this.changeApp(appId, appInfo)
+      })
+      Bus.$on('menu-list', (data) => {
         this.initMenu(data)
-      });
+      })
+
     },
-    destroyListener(){
+    destroyListener() {
+      Bus.$off('system-info')
       Bus.$off('nav-list')
       Bus.$off('menu-list')
       Bus.$off('change-app')
     },
-    initNav(data){
-      if (data.toString() === this.navList.toString()) {
-        return;
+    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.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;
+        let navList = deepCopy(data)
+        this.topMenList = navList.splice(0, this.topMenuNum)
+        this.otherList = navList
       } else {
         this.topMenList = this.navList
       }
-      if (this.topMenList.length > 0){
-        let appId = this.topMenList[0].appId;
+      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;
+          appId = this.activeName
         }
-        this.selectApp(appId);
+        this.selectApp(appId)
       }
     },
-    initMenu(data){
-      this.originMenuList = deepCopy(data);
+    initMenu(data) {
+      this.originMenuList = deepCopy(data)
     },
-    selectApp(appId){
-      this.activeName = appId;
-      let res = this.navList.filter(app => app.appId == appId);
-      Bus.$emit('change-app', {appId,appInfo:res[0]})
+    selectApp(appId) {
+      this.activeName = appId
+      let res = this.navList.filter(app => app.appId == appId)
+      Bus.$emit('change-app', { appId, appInfo: res[0] })
     },
-    changeApp(appId,appInfo) {
-      this.activeName = appId;
+    changeApp(appId, appInfo) {
+      this.activeName = appId
       this.$nextTick(() => {
         this.$refs.topNav.updateActiveName()
       })
     }
   },
   watch: {
-    activeName(){
-      this.$nextTick(()=>{
-        this.$refs.topNav.updateActiveName();
+    activeName() {
+      this.$nextTick(() => {
+        this.$refs.topNav.updateActiveName()
       })
+    },
+    acceptAppId(val) {
+      if (val) {
+        this.selectApp(val)
+      }
     }
   },
-  created(){
-    this.initListener();
+  created() {
+    this.initListener()
   },
-  beforeDestroy(){
-    this.destroyListener();
+  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{
-        background: rgba(255,255,255,0.2);
-        .line{
-          border-bottom: 2px solid var(--primary-color,@_primary-color);
+
+.pro-layout-nav-wrapper {
+  .ivu-menu {
+    .ivu-menu-item {
+      &:hover {
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
+
+        .line {
+          border-bottom: 3.35px solid var(--primary-color-tint-5, @_primary-color-tint-5);
+          position: absolute;
+          left: 0;
+          right: 0;
         }
       }
-      &.ivu-menu-item-active,&.ivu-menu-item-selected{
-        background: rgba(255,255,255,0.2);
-        .line{
-          border-bottom: 2px solid var(--primary-color,@_primary-color);
+
+      &.ivu-menu-item-active, &.ivu-menu-item-selected {
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
+
+        .line {
+          border-bottom: 3.35px solid var(--primary-color-tint-5, @_primary-color-tint-5);
+          position: absolute;
+          left: 0;
+          right: 0;
+          //bottom: 0;
         }
       }
     }
-    /deep/.ivu-menu-submenu{
-      .ivu-menu-submenu-title > i{
-        &.ivu-menu-submenu-title-icon{
+
+    /deep/ .ivu-menu-submenu {
+      .ivu-menu-submenu-title > i {
+        &.ivu-menu-submenu-title-icon {
 
         }
       }
-      .ivu-select-dropdown{
-        background: var(--menu-dark-title,@_menu-dark-title);
-        color: var(--heading-color-dark,@_heading-color-dark);
-        .ivu-menu-drop-list{
-          .ivu-menu-item{
-            color: var(--menu-dark-subsidiary-color,@_menu-dark-subsidiary-color);
-            &:hover{
-              background: rgba(255,255,255,0.2);
-              color: var(--heading-color-dark,@_heading-color-dark);
+
+      .ivu-select-dropdown {
+        background: var(--menu-dark-title, @_menu-dark-title);
+        color: var(--heading-color-dark, @_heading-color-dark);
+
+        .ivu-menu-drop-list {
+          .ivu-menu-item {
+            color: var(--menu-dark-subsidiary-color, @_menu-dark-subsidiary-color);
+
+            &:hover {
+              background: rgba(255, 255, 255, 0.2);
+              color: var(--heading-color-dark, @_heading-color-dark);
             }
-            &.ivu-menu-item-active,&.ivu-menu-item-selected{
-              background: rgba(255,255,255,0.2);
-              color: var(--heading-color-dark,@_heading-color-dark);
+
+            &.ivu-menu-item-active, &.ivu-menu-item-selected {
+              background: rgba(255, 255, 255, 0.2);
+              color: var(--heading-color-dark, @_heading-color-dark);
             }
           }
         }
@@ -147,4 +190,4 @@ export default {
   }
 }
 
-</style>
+</style>