@lambo-design/pro-layout 1.0.0-beta.20 → 1.0.0-beta.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.200",
   "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.35",
-    "@lambo-design/shared": "1.0.0-beta.15"
+  "devDependencies": {
+    "@lambo-design/core": "^4.7.1-beta.116",
+    "@lambo-design/shared": "^1.0.0-beta.110"
   },
   "scripts": {}
 }

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

@@ -4,14 +4,26 @@
       <LamboProTrigger></LamboProTrigger>
     </div>
     <div class="logo-box">
-      <LamboProLogo></LamboProLogo>
+      <LamboProLogo @clickLogo="handleClick"></LamboProLogo>
     </div>
     <div class="nav-box">
-      <LamboProNav></LamboProNav>
+      <LamboProNav :accept-app-id="acceptAppId"></LamboProNav>
     </div>
     <div class="tools-box">
       <LamboProTools></LamboProTools>
     </div>
+    <!--<div class="search-box" v-if="isShowSearch === '1'" >-->
+    <!--        <FastSearch-->
+    <!--          style="margin-right: 10px"-->
+    <!--          :searchType="1"-->
+    <!--          @on-select="handleSelect"-->
+    <!--        ></FastSearch>-->
+    <!--  </div>-->
+    <!--    <Menu ref="menu"-->
+    <!--          :active-name="activeName"-->
+    <!--          :open-names="openedNames"-->
+    <!--          @on-select="handleSelect">-->
+    <!--    </Menu>-->
   </div>
 </template>
 
@@ -20,13 +32,255 @@ 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 FastSearch from "./search-fast";
+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
+    LamboProTools,
+    FastSearch
+  },
+  methods:{
+
+    handleClick(){
+      this.$emit('clickLogo')
+    },
+    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('nav-list')
+      Bus.$off('menu-list')
+      Bus.$off('trigger-change')
+      Bus.$off('change-app')
+      Bus.$off('tag-list')
+      Bus.$off('menu-click')
+      Bus.$off('system-info')
+    },
+    initSystem(data){
+      if (data) {
+        this.systemInfo = data;
+        if (data.isShowSearch) {
+         // console.log('head中的isShowSearch',data.isShowSearch)
+          this.isShowSearch = data.isShowSearch;
+        }
+      }
+    },
+    initNav(data){
+      if (data.toString() === this.navList.toString()) {
+        return;
+      }
+      this.navList = data;
+    },
+    handleSelect(name,uri,pid){
+      //console.log('head中的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]
+       // console.log('parentMenu',parentMenu)
+        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; // 设置当前菜单为激活状态
+        }
+      }
+     // console.log("nextTick之前，openedNames:", this.openedNames);
+
+    },
+
+    getTopParent(menu) {
+      //console.log('menu',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) {
+      // console.log('activeBack')
+      // 如果当前菜单项是激活的，返回一个颜色值，否则返回空
+      return this.selectedMenuParent=== item.parent ? '#ff0000' : '';
+    },
+    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
+      //console.log('side中getOpenedNamesByActiveNameopenedNames:',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;
+      }
+      //   this.broadcast('Submenu', 'on-update-active-name', false);
+      //   this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName);
+    }
+  },
+  watch:{
+    activeName(){
+      this.openedNames = this.getOpenedNamesByActiveName();
+      // console.log("head中的gqz1activeName:", this.activeName);
+      // console.log("head中的gqz1openedNames:", this.openedNames);
+    },
+    openedNames() {
+      // console.log("head中的gqz3openedNames:", this.openedNames);
+      this.$nextTick(() => {
+        this.updateOpened()
+        this.updateActiveName()
+      })
+      // console.log("head中的gqz2activeName:", this.activeName);
+      // console.log("head中的gqz2openedNames:", this.openedNames);
+    }
+  },
+  created(){
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
   }
 }
 </script>
@@ -49,4 +303,4 @@ export default {
     float: right;
   }
 }
-</style>
+</style>

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

@@ -1,30 +1,100 @@
 <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 '';
+      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 style;
     }
+
   },
   methods: {
+
+    handleClick(){
+      this.$emit('clickLogo')
+    },
     initListener(){
       Bus.$on('system-info',(data)=>{
         this.initSystem(data)
@@ -40,7 +110,8 @@ export default {
           this.systemName = data.systemName;
         }
       }
-    }
+    },
+
   },
   created(){
     this.initListener();
@@ -54,13 +125,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 +146,7 @@ export default {
     font-weight: bold;
     font-size: 20px;
     margin-right: 15px;
+
   }
 }
-</style>
+</style>