@lambo-design/pro-layout 1.0.0-beta.1 → 1.0.0-beta.2

package/package.json

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

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

@@ -33,9 +33,12 @@ export default {
 
 <style scoped lang="less">
 .pro-layout-header{
-  overflow: hidden;
+  width: auto;
+  height: 64px;
   .trigger-box{
     float: left;
+    height: inherit;
+    border: 1px solid #000000;
   }
   .logo-box{
     float: left;

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

@@ -39,6 +39,8 @@ export default {
 
 <style scoped lang="less">
 .pro-layout-logo{
+  overflow: hidden;
+  border-bottom: 1px solid #000000;
   .logo{
     width: 150px;
     height: 55px;
@@ -46,6 +48,7 @@ export default {
     background-size: 100%;
     float: left;
     margin-top: 8px;
+    border-bottom: 1px solid #000000;
   }
   .divider{
     height: 33px;

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

@@ -1,17 +1,16 @@
 <template>
   <div class="pro-layout-nav">
-    <Menu mode="horizontal" :active-name="activeName" @on-select="selectApp">
+    <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">
-        <Icon :type="item.icon ? item.icon : 'ios-paper'" />
         {{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">
-          <Icon :type="item.icon ? item.icon : 'ios-paper'" />
-          {{item.name}}
+        {{item.name}}
         </MenuItem>
       </Submenu>
     </Menu>
@@ -20,6 +19,8 @@
 
 <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";
 
 export default {
   name: "pro-layout-logo",
@@ -28,7 +29,9 @@ export default {
       navList : [],
       topMenList : [],
       otherList : [],
-      activeName : ''
+      activeName : '',
+      topMenuNum : 4,
+      originMenuList: []
     }
   },
   methods: {
@@ -36,28 +39,58 @@ export default {
       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('nav-list')
+      Bus.$off('menu-list')
+      Bus.$off('change-app')
     },
     initNav(data){
+      if (data.toString() === this.navList.toString()) {
+        return;
+      }
       this.navList = data;
-      if (data.length > 5) {
-        this.topMenList = this.navList.sublist(0,5);
-        this.otherList = this.navList.sublist(5,this.navList.length);
+      if (data.length > this.topMenuNum) {
+        let navList = deepCopy(data);
+        this.topMenList = navList.splice(0,this.topMenuNum);
+        this.otherList = navList;
       } else {
         this.topMenList = this.navList
       }
-    },
-    selectApp(appId){
-      let appInfo = {};
-      for (let item of this.navList){
-        if (item.appId == appId) {
-          appInfo = item;
-          break;
+      if (this.topMenList.length > 0){
+        let appId = this.topMenList[0].appId;
+        if (this.activeName) {
+          appId = this.activeName;
         }
+        this.selectApp(appId);
       }
-      Bus.$emit("change-app", {appId,appInfo})
+    },
+    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]})
+    },
+    changeApp(appId,appInfo) {
+      this.activeName = appId;
+      this.$nextTick(() => {
+        this.$refs.topNav.updateActiveName()
+      })
+    }
+  },
+  watch: {
+    activeName(){
+      this.$nextTick(()=>{
+        this.$refs.topNav.updateActiveName();
+      })
     }
   },
   created(){
@@ -69,6 +102,49 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+@import '@lambo-design/core/src/styles/default.less';
+.pro-layout-nav{
+  .ivu-menu{
+    .ivu-menu-item{
+      &:hover{
+        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: rgba(255,255,255,0.2);
+        .line{
+          border-bottom: 2px solid var(--primary-color,@_primary-color);
+        }
+      }
+    }
+    /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-menu-item-active,&.ivu-menu-item-selected{
+              background: rgba(255,255,255,0.2);
+              color: var(--heading-color-dark,@_heading-color-dark);
+            }
+          }
+        }
+      }
+    }
+  }
+}
 
 </style>

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

@@ -0,0 +1,94 @@
+<template>
+  <Dropdown ref="dropdown" :class="hideTitle ? '' : 'collased-menu-dropdown'" :placement="placement"
+            :transfer="hideTitle" @on-click="handleClick">
+    <a :style="{textAlign: !hideTitle ? 'left' : ''}" class="drop-menu-a" type="text"
+       @mouseover="handleMousemove($event, children)">
+      <ProLayoutSiderIcon :icon-type="parentItem.meta.icon"></ProLayoutSiderIcon>
+      <span v-if="!hideTitle" class="menu-title">{{ showTitle(parentItem) }}</span>
+      <Icon v-if="!hideTitle" :size="20" style="float: right;" type="ios-arrow-forward"/>
+    </a>
+    <DropdownMenu ref="dropdown" slot="list">
+      <template v-for="child in children">
+        <ProLayoutSiderCollapsedMenu v-if="showChildren(child)" :key="`drop-${child.name}`"
+                        :parent-item="child">
+        </ProLayoutSiderCollapsedMenu>
+        <DropdownItem v-else :key="`drop-${child.name}`" :name="child.name">
+          <ProLayoutSiderIcon :icon-type="child.meta.icon"></ProLayoutSiderIcon>
+          <span class="menu-title">{{ showTitle(child) }}</span>
+        </DropdownItem>
+      </template>
+    </DropdownMenu>
+  </Dropdown>
+</template>
+<script>
+import sider from '../utils/sider'
+import menuItem from '../utils/menuItem'
+import {findNodeUpperByClasses} from '@lambo-design/shared/utils/platform'
+
+export default {
+  name: 'ProLayoutSiderCollapsedMenu',
+  mixins: [sider, menuItem],
+  props: {
+    hideTitle: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      placement: 'right-start'
+    }
+  },
+  methods: {
+    handleClick(name) {
+      this.$emit('on-click', name)
+    },
+    handleMousemove(event, children) {
+      const {pageY} = event
+      const height = children.length * 38
+      const isOverflow = pageY + height < window.innerHeight
+      this.placement = isOverflow ? 'right-start' : 'right-end'
+    }
+  },
+  mounted() {
+    let dropdown = findNodeUpperByClasses(this.$refs.dropdown.$el, ['ivu-select-dropdown', 'ivu-dropdown-transfer'])
+    if (dropdown) dropdown.style.overflow = 'visible'
+  }
+}
+</script>
+<style lang="less" scoped>
+@import "@lambo-design/core/src/styles/default";
+.collased-menu-dropdown {
+  width: 100%;
+  margin: 0;
+  line-height: normal;
+  padding: 7px 0 6px 16px;
+  clear: both;
+  font-size: var(--font-size-base, 14px) !important;
+  white-space: nowrap;
+  list-style: none;
+  cursor: pointer;
+  transition: background 0.2s ease-in-out;
+  &:hover{
+    color: var(--heading-color, @_heading-color);
+    background: rgba(26,26,26,0.05);
+  }
+  a.drop-menu-a{
+    display: inline-block;
+    width: 100%;
+    font-weight: normal;
+    color: var(--text-color, @_text-color);
+    &:hover{
+      color: var(--heading-color, @_heading-color);
+    }
+  }
+}
+</style>
+<style lang="less">
+.ivu-select-dropdown {
+  &.ivu-dropdown-transfer {
+    max-height: 400px;
+    max-width: 150px;
+  }
+}
+</style>

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

@@ -0,0 +1,81 @@
+<template>
+  <Icon v-if="isIvuIcon" :type="typeName" :size="iconSize"></Icon>
+  <i v-else class="iconfont" :style="renderImage"></i>
+</template>
+
+<script>
+export default {
+  name: "pro-layout-sider-icon",
+  props: {
+    iconType: {
+      type: String,
+      default: 'icon'
+    },
+    iconSize: {
+      type: String | Number,
+      default: 14
+    }
+  },
+  computed: {
+    isIvuIcon(){
+      if (this.iconType && this.iconType.indexOf('iconfont') > -1) {
+        return false
+      }
+      return true;
+    },
+    typeName(){
+      let iconType = this.iconType;
+      if (!iconType) {
+        iconType = 'ios-folder';
+      }
+      if (iconType == 'icon'){
+        iconType = 'ios-folder'
+      }
+      return iconType;
+    },
+    renderImage(){
+      let iconType = this.iconType;
+      if (!iconType) {
+        iconType = 'icon'
+      }
+      if (iconType.indexOf('iconfont') > -1) {
+        let imgName = iconType.replace('iconfont','').replace(/\s+/g,'');
+        return 'background: url('+ require('../styles/images/menuicon/' + imgName + '-s.png') +') no-repeat;background-size: 100%;';
+      }
+      return '';
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .iconfont{
+    width: 14px;
+    height: 14px;
+    float: left;
+    margin-top: 6px;
+    filter: brightness(0.8);
+  }
+  .ivu-menu-submenu{
+    .ivu-menu-submenu-title{
+      &:hover {
+        .iconfont{
+          filter: brightness(1.4);
+        }
+      }
+    }
+  }
+  .menu-collapsed{
+    a.drop-menu-a{
+      .iconfont{
+        width: 26px;
+        height: 26px;
+      }
+      &:hover{
+        .iconfont{
+          filter: brightness(1.4);
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <Submenu v-show="isShow" :name="`${parentName}`">
+    <template slot="title">
+      <ProLayoutSiderIcon :icon-type="parentItem.meta.icon"></ProLayoutSiderIcon>
+      <span>{{ showTitle(parentItem) }}</span>
+    </template>
+    <template v-for="item in children">
+      <template v-if="item.children && item.children.length === 1">
+        <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
+                        :parent-item="item">
+        </ProLayoutSiderMenuItem>
+        <menu-item v-else :key="`menu-${item.children[0].name}`" :name="getNameOrHref(item, true)">
+          <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
+          <span>{{ showTitle(item.children[0]) }}</span>
+        </menu-item>
+      </template>
+      <template v-else>
+        <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
+                        :parent-item="item">
+        </ProLayoutSiderMenuItem>
+        <menu-item v-else :key="`menu-${item.name}`" :name="getNameOrHref(item)">
+          <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
+          <span>{{ showTitle(item) }}</span>
+        </menu-item>
+      </template>
+    </template>
+  </Submenu>
+</template>
+<script>
+import sider from '../utils/sider'
+import menuItem from '../utils/menuItem'
+
+export default {
+  name: 'ProLayoutSiderMenuItem',
+  mixins: [sider, menuItem],
+}
+</script>

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

@@ -1,15 +1,228 @@
 <template>
   <div class="pro-layout-sider">
-    sider
+    <Menu v-show="!collapsed" ref="menu"
+          :accordion="accordion" :active-name="activeName"
+          :open-names="openedNames" theme="dark"
+          width="auto" @on-select="handleSelect">
+      <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">
+          </ProLayoutSiderMenuItem>
+          <MenuItem v-else :key="`menu-${item.children[0].name}`"
+                     :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">
+          </ProLayoutSiderMenuItem>
+          <MenuItem v-else :key="`menu-${item.name}`"
+                     :name="getNameOrHref(item)">
+            <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
+            <span>{{ showTitle(item) }}</span>
+          </MenuItem>
+        </template>
+      </template>
+    </Menu>
+    <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">
+        </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>
+        </Tooltip>
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
+import Bus from "@lambo-design/shared/utils/bus";
+import {deepCopy} from "@lambo-design/shared/utils/assist";
+import generatorMenuList from "@lambo-design/shared/utils/menu/index";
+import sider from '../utils/sider'
+import ProLayoutSiderMenuItem from './pro-layout-sider-menu-item'
+import ProLayoutSiderCollapsedMenu from './pro-layout-sider-collapsed-menu'
+import {
+  filterMenuName,
+  filterMenuUri,
+  tagExists
+} from "@lambo-design/shared/utils/platform";
+
 export default {
-  name: "pro-layout-logo"
+  name: "pro-layout-sider",
+  components: {
+    ProLayoutSiderMenuItem,
+    ProLayoutSiderCollapsedMenu
+  },
+  data(){
+    return {
+      navList: [],
+      originMenuList:[],
+      menuList: [],
+      appId: '',
+      collapsed: false,
+      accordion: true,
+      activeName: '',
+      openedNames: [],
+      tagValue: '',
+      tagList: []
+    }
+  },
+  mixins:[sider],
+  methods: {
+    initListener(){
+      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')
+    },
+    initNav(data){
+      if (data.toString() === this.navList.toString()) {
+        return;
+      }
+      this.navList = data;
+    },
+    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();
+    },
+    handleSelect(name){
+      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)
+      }
+      //Bus.$emit('menu-click', name)
+    },
+    triggerChange(data){
+      this.collapsed = data;
+    },
+    initTags(data,name){
+      this.tagList = data;
+      this.value = name;
+    },
+    menuClick(current) {
+      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
+    }
+  },
+  watch:{
+    activeName(){
+      this.openedNames = this.getOpenedNamesByActiveName();
+    },
+    openedNames() {
+      this.$nextTick(() => {
+        this.$refs.menu.updateOpened()
+        this.$refs.menu.updateActiveName()
+      })
+    }
+  },
+  created(){
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+  }
+
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+@import "@lambo-design/core/src/styles/default";
+.pro-layout-sider{
+  /deep/.ivu-menu-submenu{
+    .ivu-menu{
+      background: #1A1A1A;
+    }
+  }
+  .menu-collapsed {
+    padding-top: 10px;
+    /deep/a.drop-menu-a{
+      display: inline-block;
+      padding: 6px 20px;
+      width: 100%;
+      text-align: center;
+      font-weight: normal;
+      color: var(--menu-dark-subsidiary-color, @_menu-dark-subsidiary-color);
+      &:hover{
+        color: var(--heading-color-dark, @_heading-color-dark);
+      }
+    }
+  }
+}
 </style>