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

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.100",
   "description": "",
   "main": "index.js",
-  "scripts": {
-    
-  },
+  "scripts": {},
   "author": "lambo",
   "license": "ISC",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/core": "workspace:*",
-    "@lambo-design/shared": "workspace:*"
+    "@lambo-design/core": "workspace:^",
+    "@lambo-design/shared": "workspace:^"
   }
 }

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

@@ -1,13 +1,13 @@
 <template>
-  <div class="pro-layout-header">
+  <div class="pro-layout-header-wrapper">
     <div class="trigger-box">
       <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>
@@ -22,20 +22,33 @@ import LamboProNav from './pro-layout-nav'
 import LamboProTools from './pro-layout-tools'
 export default {
   name: "pro-layout-header",
+  props:{
+    acceptAppId: {
+      type: String,
+      default:''
+    }
+  },
   components: {
     LamboProTrigger,
     LamboProLogo,
     LamboProNav,
     LamboProTools
+  },
+  methods:{
+    handleClick(){
+      this.$emit('clickLogo')
+    }
   }
 }
 </script>
 
 <style scoped lang="less">
-.pro-layout-header{
-  overflow: hidden;
+.pro-layout-header-wrapper{
+  width: auto;
+  height: 64px;
   .trigger-box{
     float: left;
+    height: inherit;
   }
   .logo-box{
     float: left;

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

@@ -1,6 +1,8 @@
 <template>
-  <div class="pro-layout-logo">
-    <div class="logo"></div>
+  <div class="pro-layout-logo-wrapper">
+    <div class="logo" :style="logoStyle"
+         @click="handleClick"
+    ></div>
     <div class="divider"></div>
     <div class="system-name">{{systemName}}</div>
   </div>
@@ -10,22 +12,44 @@
 import Bus from '@lambo-design/shared/utils/bus'
 export default {
   name: "pro-layout-logo",
+  props:{
+    routeName:String,
+    default:''
+  },
   data(){
     return {
-      systemName: '后台管理系统'
+      systemInfo: {},
+      systemName: '后台管理系统',
+      isHovered: false,
+    }
+  },
+  computed:{
+    logoStyle(){
+      if (this.systemInfo && this.systemInfo.systemLogo) {
+        return 'background: url("' + this.systemInfo.systemLogo + '") no-repeat;background-size: 100%;'
+      }
+      return '';
     }
   },
   methods: {
+    handleClick(){
+      this.$emit('clickLogo')
+    },
     initListener(){
-      Bus.$on('system-name-change',(data)=>{
-        this.systemNameChange(data)
+      Bus.$on('system-info',(data)=>{
+        this.initSystem(data)
       });
     },
     destroyListener(){
-      Bus.$off('system-name-change')
+      Bus.$off('system-info')
     },
-    systemNameChange(data){
-      this.systemName = data;
+    initSystem(data){
+      if (data) {
+        this.systemInfo = data;
+        if (data.systemName) {
+          this.systemName = data.systemName;
+        }
+      }
     }
   },
   created(){
@@ -38,14 +62,16 @@ export default {
 </script>
 
 <style scoped lang="less">
-.pro-layout-logo{
+.pro-layout-logo-wrapper{
+  overflow: hidden;
   .logo{
+    cursor:pointer;
     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;
@@ -61,4 +87,4 @@ export default {
     margin-right: 15px;
   }
 }
-</style>
+</style>

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">
+  <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">
-        <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,15 +19,25 @@
 
 <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",
+  props:{
+    acceptAppId: {
+      type: String,
+      default: ''
+    }
+  },
   data(){
     return {
       navList : [],
       topMenList : [],
       otherList : [],
-      activeName : ''
+      activeName : '',
+      topMenuNum : 4,
+      originMenuList: []
     }
   },
   methods: {
@@ -36,28 +45,67 @@ 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;
+        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;
+        }
+        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();
+      })
+    },
+    acceptAppId(val) {
+      console.log('监听成功')
+      this.selectApp(val)
     }
   },
   created(){
@@ -69,6 +117,49 @@ export default {
 }
 </script>
 
-<style scoped>
+<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);
+        }
+      }
+      &.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-other-menu.vue

@@ -0,0 +1,137 @@
+<template>
+  <div :class="classes">
+    <div class="other-menu-item" @click="onChange('history')">
+      <Tooltip :disabled="!collapsed" content="历史" placement="right" transfer>
+        <div>
+          <Icon class="other-menu-icon" type="md-time"/>
+          <span class="other-menu-title"> 历史</span>
+        </div>
+      </Tooltip>
+    </div>
+    <div class="other-menu-item" @click="onChange('collect')">
+      <Tooltip :disabled="!collapsed" content="收藏" placement="right" transfer>
+        <div>
+          <Icon class="other-menu-icon" type="md-star-outline"/>
+          <span class="other-menu-title"> 收藏</span>
+        </div>
+
+      </Tooltip>
+    </div>
+    <Drawer v-model="drawer.model"
+            :class-name="drawerClasses"
+            :closable="false"
+            :mask-style="{backgroundColor: 'unset'}"
+            :scrollable="true"
+            :title="drawer.title"
+            placement="left"
+    >
+      <div v-if="drawer.type=='history'" class="other-menu-history">
+        <div v-for="item in list" class="other-menu-history-item">
+          <div class="content" @click="handleClick(item)">
+            <common-icon :type="item.icon"></common-icon>
+            <span> {{ item.label }}</span>
+          </div>
+          <div class="delete">
+            <common-icon type="ios-close" @click.native="handleHistoryDelete(item)"></common-icon>
+          </div>
+        </div>
+      </div>
+      <div v-if="drawer.type=='collect'" class="other-menu-collect">
+        <div v-for="item in list" class="other-menu-collect-item" @click="handleClick(item)">
+          <div class="content">
+            <Tooltip :content="item.label" :delay="1000">
+              <common-icon :size="40" :type="item.icon"></common-icon>
+            </Tooltip>
+          </div>
+          <div class="delete">
+            <common-icon type="ios-close" @click.native.stop="handleCollectDelete(item)"></common-icon>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import ajax from '@lambo-design/shared/utils/ajax';
+import config from "@lambo-design/shared/config/config";
+
+export default {
+  name: "other-menu",
+  components: {},
+  props: {
+    collapsed: {
+      type: Boolean
+    },
+  },
+  data() {
+    return {
+      drawer: {
+        model: false,
+        url: '',
+        title: '',
+        type: '',
+      },
+      list: []
+    }
+  },
+  computed: {
+    classes() {
+      let classes = ["other-menu"]
+      return this.collapsed ? ["other-menu-collapsed", ...classes] : [...classes]
+    },
+    drawerClasses() {
+      return this.collapsed ? "other-menu-drawer-wrap-collapsed" : "other-menu-drawer-wrap"
+    }
+  },
+  methods: {
+    onChange(value) {
+      if (value == 'history') {
+        this.drawer.title = '历史菜单'
+        this.drawer.url = '/manage/upmsMenuHistory/list'
+
+      } else {
+        this.drawer.title = '收藏菜单'
+        this.drawer.url = '/manage/upmsMenuCollect/list'
+      }
+      this.getList()
+      this.drawer.type = value
+      this.drawer.model = !this.drawer.model
+    },
+    getList() {
+      this.list = []
+      ajax.get(config.upmsServerContext + this.drawer.url).then(resp => {
+        if (resp.data.code == 1) {
+          this.list = resp.data.data
+          if (this.drawer.type == 'collect') {
+            this.$store.commit('setCollectMenuList', this.list)
+          }
+        }
+      })
+    },
+    handleClick(item) {
+      this.$emit('on-select', item.name)
+      this.drawer.model = false
+    },
+    handleHistoryDelete(item) {
+      ajax.get(config.upmsServerContext + "/manage/upmsMenuHistory/delete/" + item.historyId).then(resp => {
+        if (resp.data.code == 1) {
+          this.getList()
+        }
+      })
+    },
+    handleCollectDelete(item) {
+      ajax.get(config.upmsServerContext + "/manage/upmsMenuCollect/delete/" + item.collectId).then(resp => {
+        if (resp.data.code == 1) {
+          this.getList()
+        }
+      })
+    }
+  }
+}
+</script>
+
+
+<style lang="less">
+@import '../styles/other-menu.less';
+</style>

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

@@ -0,0 +1,91 @@
+<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"
+       @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>
+      <Icon v-if="!hideTitle" :size="16"type="ios-arrow-forward"/>
+    </a>
+    <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">
+        </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;
+  display: block;
+  &:hover{
+    color: var(--heading-color, @_heading-color);
+    background: rgba(26,26,26,0.05);
+  }
+  /deep/.ivu-dropdown-rel{
+    a.drop-menu-a{
+      display: inline-block;
+      width: 100%;
+      font-weight: normal;
+      margin-left: -5px;
+      color: var(--text-color, @_text-color) !important;
+      text-decoration: none;
+      &:hover{
+        color: var(--heading-color, @_heading-color) !important;
+      }
+    }
+  }
+}
+</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>