@lambo-design/pro-layout 1.0.0-beta.152 → 1.0.0-beta.153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.152",
+  "version": "1.0.0-beta.153",
   "description": "",
   "main": "index.js",
   "scripts": {},

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

@@ -2,7 +2,7 @@
   <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">{{systemName}}</div>
+    <div class="system-name" :style="nameStyle">{{systemName}}</div>
   </div>
 </template>
 
@@ -23,14 +23,68 @@ export default {
     }
   },
   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
+    //   console.log('nameSize',nameSize)
+    //   // 计算总高度
+    //   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; // 计算最大高度
+
+        // 动态计算字体大小
+        const fontSize = Math.max(20 - (lines - 1) * 2, 12); // 字体大小递减
+        const lineHeight = fontSize + 5; // 固定行高
+        const width = (this.systemName.length/lines)*fontSize + 10;
+
+        // 组装样式字符串
+        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')
     },
@@ -85,6 +139,7 @@ export default {
     font-weight: bold;
     font-size: 20px;
     margin-right: 15px;
+
   }
 }
 </style>

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

@@ -10,7 +10,7 @@
           ...
         </template>
         <MenuItem :name="item.appId" v-for="item in otherList" :key="item.appId">
-        {{item.name}}
+          {{item.name}}
         </MenuItem>
       </Submenu>
     </Menu>
@@ -124,13 +124,20 @@ export default {
       &:hover{
         background: rgba(255,255,255,0.2);
         .line{
-          border-bottom: 2px solid var(--primary-color,@_primary-color);
+          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);
+          border-bottom: 3.35px solid var(--primary-color-tint-5,@_primary-color-tint-5 );
+          position: absolute;
+          left: 0;
+          right: 0;
+          //bottom: 0;
         }
       }
     }

package/src/components/pro-layout-sider-collapsed-menu.vue

@@ -1,7 +1,8 @@
 <template>
   <Dropdown ref="dropdown" :class="hideTitle ? '' : 'collased-menu-dropdown'" :placement="placement"
             :transfer="true" @on-click="handleClick">
-    <a :style="{textAlign: !hideTitle ? 'left' : '',padding: !hideTitle ? '0px' : ''}" class="drop-menu-a" type="text"
+    <a :style="{textAlign: !hideTitle ? 'left' : '',padding: !hideTitle ? '0px' : ''}"
+       :class="['drop-menu-a', activeItem.indexOf(parentItem.name) >= 0 ? 'selected-parent' : '']" type="text"
        @mouseover="handleMousemove($event, children)">
       <ProLayoutSiderIcon :icon-type="parentItem.meta.icon" :icon-size="hideTitle ? 26 : 14"></ProLayoutSiderIcon>
       <span v-if="!hideTitle" class="menu-title">{{ showTitle(parentItem) }}</span>
@@ -10,7 +11,7 @@
     <DropdownMenu ref="dropdown" slot="list" style="width: auto">
       <template v-for="child in children">
         <ProLayoutSiderCollapsedMenu v-if="showChildren(child)" :key="`drop-${child.name}`"
-                        :parent-item="child">
+                                     :parent-item="child">
         </ProLayoutSiderCollapsedMenu>
         <DropdownItem v-else :key="`drop-${child.name}`" :name="child.name">
           <ProLayoutSiderIcon :icon-type="child.meta.icon"></ProLayoutSiderIcon>
@@ -88,4 +89,4 @@ export default {
     }
   }
 }
-</style>
+</style>

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

@@ -7,21 +7,21 @@
       <template v-for="item in menuList">
         <template v-if="item.children && item.children.length === 1">
           <ProLayoutSiderMenuItem v-if="showChildren(item)"
-                          :key="`menu-${item.name}`"
-                          :parent-item="item" :server-context="serverContext">
+                                  :key="`menu-${item.name}`"
+                                  :parent-item="item" :server-context="serverContext">
           </ProLayoutSiderMenuItem>
           <MenuItem v-else :key="`menu-${item.children[0].name}`"
-                     :name="getNameOrHref(item, true)">
+                    :name="getNameOrHref(item, true)">
             <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
             <span>{{ showTitle(item.children[0]) }}</span>
           </MenuItem>
         </template>
         <template v-else>
           <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
-                          :parent-item="item" :server-context="serverContext">
+                                  :parent-item="item" :server-context="serverContext">
           </ProLayoutSiderMenuItem>
           <MenuItem v-else :key="`menu-${item.name}`"
-                     :name="getNameOrHref(item)">
+                    :name="getNameOrHref(item)">
             <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
             <span>{{ showTitle(item) }}</span>
           </MenuItem>
@@ -30,18 +30,23 @@
     </Menu>
     <ProLayoutOtherMenu :collapsed="collapsed" @on-select="selectHandle" :server-context="serverContext"></ProLayoutOtherMenu>
 
-    <div v-show="collapsed" :list="menuList" class="menu-collapsed">
+    <div v-show="collapsed" :list="menuList" class="menu-collapsed" >
       <template v-for="item in menuList">
         <ProLayoutSiderCollapsedMenu v-if="item.children && item.children.length > 1" :key="`drop-menu-${item.name}`"
-                        :parent-item="item" theme="dark" hide-title
-                        @on-click="handleSelect">
+                                     :parent-item="item" theme="dark" hide-title
+                                     @on-click="handleSelect" :active-item="openedNames">
         </ProLayoutSiderCollapsedMenu>
         <Tooltip v-else :key="`drop-menu-${item.name}`" :content="showTitle(item.children && item.children[0] ? item.children[0] : item)"
                  placement="right" transfer>
-          <a :style="{textAlign: 'center'}" class="drop-menu-a"
-             @click="handleSelect(getNameOrHref(item, true))">
-            <ProLayoutSiderIcon :icon-type="item.meta.icon" icon-size="26"></ProLayoutSiderIcon>
-          </a>
+          <template v-slot:default="{ active }">
+            <a :style="{textAlign: 'center'}"
+               :class="['drop-menu-a', item.name === selectedTopParent ? 'selected-parent' : '']"
+               @click="handleSelect(getNameOrHref(item, true))">
+              <!--              <i :class="[item.meta.icon, selectedIconType === item.meta.icon ? 'selected-icon' : '']"></i>-->
+              <ProLayoutSiderIcon :icon-type="item.meta.icon" icon-size="26" :class="{ 'selected-icon': item.name === selectedTopParent && collapsed }"
+              ></ProLayoutSiderIcon>
+            </a>
+          </template>
         </Tooltip>
       </template>
     </div>
@@ -83,10 +88,18 @@ export default {
       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: []
     }
@@ -168,7 +181,32 @@ export default {
         }
         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);
+      }
+      // console.log('this.selectedTopParent',this.selectedTopParent)
+      // console.log('this.menuList',this.menuList)
+      // console.log('this.activiname',this.activeName)
+      // console.log('this.openedNames',this.openedNames)
+    },
+    getTopParent(menu) {
+     // console.log('getTopParent')
+      return menu.parent ? this.getTopParent(menu.parent) : menu.name;
+    //  console.log('menu.parent',menu.name)
     },
+    activeIconBackground(item) {
+     // console.log('activeBack')
+      // 如果当前菜单项是激活的，返回一个颜色值，否则返回空
+      return this.selectedMenuParent=== item.parent ? '#ff0000' : '';
+    },
+
+
+
     triggerChange(data){
       this.collapsed = data;
     },
@@ -231,6 +269,7 @@ export default {
 
 <style scoped lang="less">
 @import "@lambo-design/core/src/styles/default";
+
 .pro-layout-sider-wrapper{
   margin-bottom: 50px;
   /deep/.ivu-menu-submenu{
@@ -250,6 +289,10 @@ export default {
       &:hover{
         color: var(--heading-color-dark, @_heading-color-dark);
       }
+      &.selected-parent{
+        //  color: #ffffff !important;
+        background: #306BE3 !important;
+      }
     }
   }
 }

package/src/styles/other-menu.less

@@ -15,7 +15,7 @@
 
       &:hover {
         color: #ffffff;
-        background: #061629;
+       // background: #061629;
       }
 
       .ivu-tooltip {

package/src/utils/menuItem.js

@@ -5,6 +5,12 @@ export default {
       default: () => {
       }
     },
+    activeItem: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
     isShow: {
       type: Boolean,
       default: true