@lambo-design/pro-layout 1.0.0-beta.48 → 1.0.0-beta.481

package/src/index.vue

@@ -1,22 +1,51 @@
 <template>
-  <i-layout class="pro-layout" :class="layoutClass">
-    <i-header class="pro-layout-header">
-      <LamboProLayoutHeader></LamboProLayoutHeader>
+  <i-layout
+      class="pro-layout"
+      :class="[layoutClass, { 'show-sider-scrollbar': systemInfo.showSiderScrollbar === '1' }]"
+  >
+    <i-header class="pro-layout-header" :style="systemInfo.headBackground ? headBackgroundStyle : ''">
+      <LamboProLayoutHeader :is-home="isHome" :is-show-left-menu="isShowLeftMenu" ref="header">
+        <template slot = "pro-layout-trigger">
+          <slot name="pro-layout-trigger"></slot>
+        </template>
+        <template slot = "pro-layout-logo">
+          <slot name="pro-layout-logo"></slot>
+        </template>
+        <template slot = "pro-layout-nav">
+          <slot name="pro-layout-nav"></slot>
+        </template>
+        <template slot = "pro-layout-icons">
+          <slot name="pro-layout-icons"></slot>
+        </template>
+        <template slot="pro-layout-custom-icons">
+          <slot name="pro-layout-custom-icons"></slot>
+        </template>
+        <template slot = "pro-layout-user">
+          <slot name="pro-layout-user"></slot>
+        </template>
+      </LamboProLayoutHeader>
     </i-header>
     <i-layout>
       <i-sider
+          v-show="isShowLeftMenu"
           class="pro-layout-sider"
           hide-trigger
           collapsible
-          :width="220"
+          :width="siderWidth"
           :collapsed-width="64"
           v-model="collapsed">
         <LamboProLayoutSider ref="sider"></LamboProLayoutSider>
+        <!-- 拖拽条 -->
+        <div
+            v-show="isShowLeftMenu"
+            class="sider-resize-bar"
+            @mousedown.stop.prevent="startResize"
+        ></div>
       </i-sider>
       <i-content class="pro-layout-content">
         <i-layout class="pro-layout-content-layout">
-          <div class="pro-layout-tabs">
-            <LamboProLayoutTabs></LamboProLayoutTabs>
+          <div class="pro-layout-tabs" v-show="isShowLeftMenu">
+            <LamboProLayoutTabs ref="tabs" :not-single-app="notSingleApp"></LamboProLayoutTabs>
           </div>
           <i-content class="pro-layout-page">
             <slot>
@@ -25,9 +54,15 @@
         </i-layout>
       </i-content>
     </i-layout>
+    <!-- 拖拽时的全局捕获层 -->
+    <div
+        v-if="isResizing"
+        class="resize-mask"
+        @mousemove="onMouseMove"
+        @mouseup="stopResize"
+    ></div>
   </i-layout>
 </template>
-
 <script>
 import LamboProLayoutHeader from './components/pro-layout-header'
 import LamboProLayoutSider from './components/pro-layout-sider'
@@ -35,19 +70,38 @@ import LamboProLayoutTabs from './components/pro-layout-tabs'
 import Bus from '@lambo-design/shared/utils/bus'
 import config from "@lambo-design/shared/config/config";
 import {
-  getTagNavListFromLocalstorage, routeEqual, tagExists,
+  getTagNavListFromLocalstorage, isOpenBlank, routeEqual, tagExists,getTagNavListFromSessionstorage, getTagNavListKey
 } from "@lambo-design/shared/utils/platform";
 import {deepCopy} from "@lambo-design/shared/utils/assist";
+import Locale from '@lambo-design/core/src/mixins/locale';
+
 export default {
+  mixins: [Locale],
   props:{
+    notSingleApp: {
+      type: Boolean,
+      default: true
+    },
+    isHome: {
+      type: Boolean,
+      default: true
+    },
     systemInfo: {
       type: Object,
       default: () => {
         return {
-          systemName: '后台管理系统',
+          systemName: this.t('pro-layout.common.systemName'),
           systemLogo: '',
           layoutSize: '',
-          tabNum: 8,
+          acceptAppId: '',
+          tabNum: 5,
+          topMenu: 4,
+          rightTopOptButtonList: [],
+          menuScaling:'1',
+          headBackground:'',
+          menuLogo: '1',
+          titleShow:'wrap',
+          showSiderScrollbar: '0'  //'1' 显示滚动条，'0' 隐藏滚动条
         }
       }
     },
@@ -59,15 +113,31 @@ export default {
       type: Array,
       default: () => []
     },
+    originalAllMenuList: {
+      type: Array,
+      default: () => []
+    },
     menuList: {
       type: Array,
       default: () => []
     },
+    historyMenuList: {
+      type: Array,
+      default: () => []
+    },
+    collectMenuList: {
+      type: Array,
+      default: () => []
+    },
     homeRouter: {
       type: Object,
       default: () => {
         return config.homeRouter
       }
+    },
+    otherDatas: {
+      type: Object,
+      default: () => {}
     }
   },
   data(){
@@ -75,7 +145,12 @@ export default {
       collapsed: false,
       appId: '',
       activeName: '',
-      tagList: []
+      tagList: [],
+      isShowLeftMenu: true,
+      siderWidth: 220,
+      isResizing: false,
+      minWidth: 180,
+      maxWidth: 600,
     }
   },
   components: {
@@ -85,19 +160,29 @@ export default {
   },
   computed: {
     allData(){
-      const { systemInfo, userInfo, navList, menuList, homeRouter} = this;
+      const { systemInfo, userInfo, navList, originalAllMenuList, menuList, historyMenuList, collectMenuList, homeRouter, otherDatas} = this;
       return {
         systemInfo,
         userInfo,
         navList,
+        originalAllMenuList,
         menuList,
-        homeRouter
+        historyMenuList,
+        collectMenuList,
+        homeRouter,
+        otherDatas
+      }
+    },
+    headBackgroundStyle(){
+      return{
+        background: `url(${this.systemInfo.headBackground}) no-repeat`,
+        backgroundSize: 'cover',
       }
     },
     layoutClass(){
       if (this.systemInfo && this.systemInfo.layoutSize) {
         let layoutSize = this.systemInfo.layoutSize;
-        if (layoutSize == 'default') {
+        if (layoutSize === 'default') {
           return '';
         } else {
           return 'small';
@@ -113,9 +198,49 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    collapsed(val) {
+      if (val) {
+        this.siderWidth = 64
+      } else {
+        const savedWidth = localStorage.getItem('siderWidth')
+        this.siderWidth = savedWidth ? parseInt(savedWidth) : 220
+      }
+    },
+    isHome: {
+      handler() {
+        if (this.isHome) {
+          this.isShowLeftMenu = false
+        }
+      },
+      immediate: true
     }
   },
   methods: {
+    startResize(e) {
+      e.preventDefault()
+      e.stopPropagation()
+
+      this.isResizing = true
+      this.startX = e.clientX
+      this.startWidth = this.siderWidth
+    },
+
+    onMouseMove(e) {
+      if (!this.isResizing) return
+
+      const moveX = e.clientX - this.startX
+      const newWidth = this.startWidth + moveX
+
+      if (newWidth < this.minWidth) return
+      if (newWidth > this.maxWidth) return
+
+      this.siderWidth = newWidth
+    },
+
+    stopResize() {
+      this.isResizing = false
+    },
     initListener(){
       Bus.$on('trigger-change',(data)=>{
         this.triggerChange(data)
@@ -132,6 +257,36 @@ export default {
       Bus.$on('tag-list',(data,current)=>{
         this.changeTabs(data,current)
       });
+      Bus.$on('get-history-menu-list',() => {
+        this.getHistoryMenuList()
+      })
+      Bus.$on('delete-history-menu',(data) => {
+        this.deleteHistoryMenu(data)
+      })
+      Bus.$on('delete-collect-menu',(data) => {
+        this.deleteCollectMenu(data)
+      })
+      Bus.$on('toggle-collect-menu',(actionType,data) => {
+        this.toggleCollectMenu(actionType,data)
+      })
+      Bus.$on('click-logo',()=>{
+        this.clickLogo();
+      })
+      Bus.$on('other-operate',(type,data)=>{
+        this.otherOperate(type,data);
+      })
+      Bus.$on('change-search-keyword',(keyword,tab)=>{
+        this.$emit('other-operate','search-keyword',{
+          keyword:keyword,
+          tab:tab
+        })
+      })
+      Bus.$on('change-search-tab',(keyword,tab)=>{
+        this.$emit('other-operate','search-keyword',{
+          keyword:keyword,
+          tab:tab
+        })
+      })
     },
     destroyListener(){
       Bus.$off('trigger-change')
@@ -139,15 +294,35 @@ export default {
       Bus.$off('user-action')
       Bus.$off('menu-click')
       Bus.$off('tag-list')
+      Bus.$off('get-history-menu-list')
+      Bus.$off('delete-history-menu')
+      Bus.$off('delete-collect-menu')
+      Bus.$off('toggle-collect-menu')
+      Bus.$off('click-logo')
+      Bus.$off('other-operate')
+      Bus.$off('change-keyword')
+      Bus.$off('change-tab')
     },
     initEmit(){
+      //在这里改this.menuList
       Bus.$emit('system-info',this.systemInfo)
       Bus.$emit('user-info',this.userInfo)
       Bus.$emit('nav-list',this.navList)
-      Bus.$emit('menu-list',this.menuList)
+      this.menuList.map(item => {
+        // 如果 uri 不以 '/' 开头，添加 '/'
+        if (item.uri&&!item.uri.startsWith('/')&&!item.uri.startsWith('http')) {
+          item.uri = '/' + item.uri;
+        }
+      });
+      Bus.$emit('origin-all-menu-list',this.originalAllMenuList);
+      Bus.$emit('menu-list',this.menuList);
+      Bus.$emit('history-menu-list',this.historyMenuList);
+      Bus.$emit('collect-menu-list',this.collectMenuList);
+      Bus.$emit('other-datas',this.otherDatas)
     },
     initTags(){
-      let tagList = getTagNavListFromLocalstorage(config.routerBase + '-tagNavList');
+      // let tagList = getTagNavListFromLocalstorage(config.routerBase + '-tagNavList');
+        let tagList = getTagNavListFromSessionstorage(getTagNavListKey());
       if (tagList.length == 0) {
         tagList.push(this.homeRouter);
       }
@@ -165,6 +340,25 @@ export default {
       if (!appInfo) {
         appInfo = this.navList.filter(item => item.appId == appId)[0];
       }
+      let appConfig={}
+      //sc中台
+      if(appInfo && appInfo.extendProps){
+        appConfig=appInfo.extendProps
+      }
+      //x1中台
+      if(appInfo && appInfo.setting){
+        appConfig=JSON.parse(appInfo.setting)
+      }
+
+      // 优先使用 appConfig最后使用默认值
+      if (appConfig && appConfig.hasOwnProperty("is_hide_left_menu")){
+        this.isShowLeftMenu = appConfig.is_hide_left_menu != '1'
+      } else if (appId == 'backHome'){
+        this.isShowLeftMenu = false
+      } else {
+        this.isShowLeftMenu = true
+      }
+
       this.appId = appId;
       this.$emit('change-app',{appId,appInfo})
     },
@@ -173,18 +367,21 @@ export default {
     },
     menuClick(name, item){
       if (!item) {
-        let res = this.menuList.filter(item => item.name == name);
+        let res = this.menuList.filter(item => item.name == name );
         if (res && res.length > 0) {
           item = res[0];
         }
       }
-      sessionStorage.setItem('activeName',name);
+      if (!isOpenBlank(item)) {
+        sessionStorage.setItem('activeName',name);
+      }
       this.$emit('menu-click', name, item)
     },
     changeTabs(data,current){
+      // data = data.filter(item => item.name === current);
       this.$emit('change-tabs',data,current)
     },
-    openMenuInTabs(menu){
+    openMenuInTabs(menu,forceUpdate = false){
       let name = '';
       let menuItem = {};
       if (typeof menu === 'string') {
@@ -194,27 +391,53 @@ export default {
           menuItem = res[0];
         }
         this.$refs.sider.handleSelect(name);
-      } else {
+      } else if (menu && menu.name){
         name = menu.name;
         menuItem = deepCopy(menu);
-        let tagList = getTagNavListFromLocalstorage(config.routerBase + '-tagNavList');
+        // let tagList = getTagNavListFromLocalstorage(config.routerBase + '-tagNavList');
+      let tagList = getTagNavListFromSessionstorage(getTagNavListKey());
         if (!tagExists(tagList,name)) {
           tagList.push(menuItem);
         } else {
           let tag = tagList.filter(item => item.name == name)[0];
-          if (!routeEqual(tag,menuItem)) {
+          if (forceUpdate || (!routeEqual(tag,menuItem) && 'home' != name)) {
             let res = tagList.filter(item => item.name !== name);
             tag = Object.assign(tag, menu);
+            tag.cts = new Date().getTime();
             res.push(tag);
             tagList = deepCopy(res);
           }
         }
+
         Bus.$emit('tag-list', tagList, name)
       }
+    },
+    getHistoryMenuList(){
+      this.$emit('get-history-menu-list');
+    },
+    deleteHistoryMenu(data){
+      this.$emit('delete-history-menu',data);
+    },
+    deleteCollectMenu(data){
+      this.$emit('delete-collect-menu',data);
+    },
+    toggleCollectMenu(actionType,data){
+      this.$emit('toggle-collect-menu',actionType,data);
+    },
+    clickLogo(){
+      this.$emit('click-logo')
+    },
+    otherOperate(type,data){
+      this.$emit('other-operate', type, data)
     }
   },
   mounted(){
     this.initTags();
+    const savedWidth = localStorage.getItem('siderWidth')
+    if (savedWidth) {
+      this.siderWidth = parseInt(savedWidth)
+    }
+    this.initEmit();
   },
   created(){
     this.initListener();
@@ -227,36 +450,72 @@ export default {
 
 <style lang="less">
 @import "@lambo-design/core/src/styles/default";
-.pro-layout{
-  color: #ffffff;
+@import "styles/color";
+.resize-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999999;
+  background: transparent;
+  cursor: col-resize;
+}
+.sider-resize-bar {
+  position: absolute;
+  right: -3px;
+  top: 0;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 99999;
+  background: transparent;
+}
+
+.sider-resize-bar:hover {
+  background: #ddd;
+}
+
+.pro-layout {
   height: 100vh;
   width: 100%;
   overflow: hidden;
+  min-width: 1100px;
   .ivu-layout-header{
     padding: 0;
   }
-  .pro-layout-sider{
+  .pro-layout-sider {
     overflow: hidden;
-    .ivu-layout-sider-children{
+    position: relative;
+    .ivu-layout-sider-children {
       height: calc(100vh - 65px);
       overflow-y: scroll;
       margin-right: -18px;
+      padding-right: 17px;
+
+      &::-webkit-scrollbar {
+        /* 隐藏默认的滚动条 */
+        display: none;
+      }
+      // Firefox 隐藏
+      scrollbar-width: none;
+      // IE/Edge 隐藏
+      -ms-overflow-style: none;
     }
   }
-  .pro-layout-content{
-    .pro-layout-content-layout{
-      height: ~"calc(100vh - 53px)";
+  .pro-layout-content {
+    .pro-layout-content-layout {
+      height: calc(100vh - 65px);
       .pro-layout-page{
         overflow: hidden;
-        color: var(--text-color,@_text-color);
       }
     }
   }
   &.small {
-    .ivu-layout-header{
+    .ivu-layout-header {
       height: 50px;
       line-height: 50px;
-      .pro-layout-header-wrapper{
+      .pro-layout-header-wrapper {
         height: 50px;
         .trigger-box{
           .sider-trigger-a{
@@ -265,31 +524,94 @@ export default {
             height: 50px;
           }
         }
-        .logo-box{
-          .pro-layout-logo-wrapper{
-            .logo{
-              height: 45px;
-              margin-top: 14px;
+        .logo-box {
+          .pro-layout-logo-wrapper {
+            .logo {
+              height: 40px;
             }
-            .divider{
+            .divider {
               height: 26px;
               margin: 12px;
             }
           }
         }
-        .nav-box{
-          .pro-layout-nav-wrapper{
-            .ivu-menu-horizontal{
+        .nav-box {
+          .pro-layout-nav-wrapper {
+            .ivu-menu-horizontal {
               height: 46px;
-              line-height: 46px;
+              line-height: var(--layout-menu-item-horizontal-line-height,@_layout-menu-item-horizontal-line-height);
             }
           }
         }
       }
     }
-    .pro-layout-sider{
-      .ivu-layout-sider-children{
+    .pro-layout-sider {
+      .ivu-layout-sider-children {
         height: calc(100vh - 50px);
+        padding-right: 17px;
+
+        &::-webkit-scrollbar {
+          /* 隐藏默认的滚动条 */
+          display: none;
+        }
+      }
+    }
+    .pro-layout-content {
+      .pro-layout-content-layout {
+        height: calc(100vh - 50px);
+        .pro-layout-page{
+          overflow: hidden;
+        }
+      }
+    }
+  }
+
+  // 通过 systemInfo 控制显示滚动条
+  &.show-sider-scrollbar {
+    .pro-layout-sider {
+      .ivu-layout-sider-children {
+        // 移除隐藏的 hack
+        margin-right: 0;
+        padding-right: 0;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+          display: block;
+          width: 6px;
+          height: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: transparent;
+          border-radius: 3px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: #c1c1c1;
+          border-radius: 3px;
+          transition: background 0.2s;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+          background: #a8a8a8;
+        }
+
+        // Firefox 显示
+        scrollbar-width: auto;
+        scrollbar-color: #c1c1c1 transparent;
+      }
+    }
+
+    &.small {
+      .pro-layout-sider {
+        .ivu-layout-sider-children {
+          padding-right: 0;
+
+          &::-webkit-scrollbar {
+            display: block;
+            width: 6px;
+          }
+        }
       }
     }
   }