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

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

@@ -0,0 +1,86 @@
+<template>
+  <div class="user-avatar-dropdown">
+    <Dropdown @on-click="handleClick" :transfer="false">
+      <span>{{ t('pro-layout.header.user-welcome') }}，{{ userInfo.userName }}</span>
+      <span class="user-avatar" :style="buildAvaterStyle(userInfo.userAvater)" v-if="userInfo.userAvater"></span>
+      <Icon type="ios-contact" v-if="!userInfo.userAvater" class="user-avatar-icon"></Icon>
+      <Icon v-if="userInfo.dropList.length > 0" type="ios-arrow-down"/>
+      <DropdownMenu v-if="userInfo.dropList.length > 0" slot="list">
+        <DropdownItem v-if="userInfo.dropList.includes('theme')" name="theme"><span>{{ t('pro-layout.header.user-change-theme') }}</span></DropdownItem>
+        <DropdownItem v-if="userInfo.dropList.includes('showTheme')" name="showTheme"><span>{{ t('pro-layout.header.user-custom-theme') }}</span></DropdownItem>
+        <DropdownItem v-if="userInfo.dropList.includes('personalCenter')" name="personalCenter"><span>{{ t('pro-layout.header.user-person-center') }}</span></DropdownItem>
+        <DropdownItem v-if="userInfo.dropList.includes('noticeList')" name="noticeList"><span>{{ t('pro-layout.header.user-notice') }}</span></DropdownItem>
+        <DropdownItem v-if="userInfo.dropList.includes('customGsUpdatePass')" name="customGsUpdatePass"><span>修改密码</span></DropdownItem>
+        <DropdownItem v-if="userInfo.dropList.includes('logout')" name="logout"><span>{{ t('pro-layout.header.user-logout') }}</span></DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  </div>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import Locale from "@lambo-design/core/src/mixins/locale";
+import config from "@lambo-design/shared/config/config"
+
+export default {
+  name: 'pro-layout-tools-user',
+  mixins: [Locale],
+  data() {
+    return {
+      userInfo: {
+        userName: this.t('pro-layout.header.user-default-name'),
+        dropList: ['theme', 'personalCenter', 'noticeList', 'logout'],
+        userAvater: ''
+      }
+    }
+  },
+  methods: {
+    initListener() {
+      Bus.$on('user-info', (data) => {
+        this.handleUser(data)
+      })
+    },
+    destroyListener() {
+      Bus.$off('user-info')
+    },
+    handleUser(data) {
+      this.userInfo = Object.assign(this.userInfo, data)
+    },
+    handleClick(name) {
+      Bus.$emit('user-action', name)
+    },
+    buildAvaterStyle(avater){
+      return 'backgroundImage:url(' + config.ossServerContext + '/oss/file/get/' + avater + ')';
+    }
+  },
+  created() {
+    this.initListener()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  }
+}
+</script>
+<style lang="less" scoped>
+@import '@lambo-design/core/src/styles/default.less';
+.user-avatar-dropdown {
+  float: left;
+  cursor: pointer;
+  vertical-align: middle;
+  font-size: var(--font-size-base, @_font-size-base);
+  .user-avatar{
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 4px;
+    width: 18px;
+    height: 18px;
+    border-radius: 8px;
+    background-size: cover;
+    background-position: center;
+  }
+  .user-avatar-icon{
+    margin-left: 4px;
+    font-size:18px;
+  }
+}
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="pro-layout-tools-wrapper">
+    <slot name="pro-layout-icons">
+      <LamboProLayoutToolsQuickIcons>
+        <template slot="pro-layout-custom-icons">
+            <slot name="pro-layout-custom-icons"></slot>
+        </template>
+      </LamboProLayoutToolsQuickIcons>
+    </slot>
+    <slot name="pro-layout-user">
+      <LamboProLayoutToolsUser></LamboProLayoutToolsUser>
+    </slot>
+  </div>
+</template>
+
+<script>
+import LamboProLayoutToolsQuickIcons from './components/pro-layout-tools-quick-icons'
+import LamboProLayoutToolsUser from './components/pro-layout-tools-user'
+export default {
+  name: "pro-layout-tools",
+  components: {
+    LamboProLayoutToolsQuickIcons,
+    LamboProLayoutToolsUser
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .pro-layout-tools-wrapper{
+    margin-right: 15px;
+  }
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+  <a @click="handleChange" type="text" :class="['sider-trigger-a', collapsed ? 'collapsed' : '']">
+    <Icon type="md-menu" size="26" v-show="isShow" />
+  </a>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+export default {
+  name: "pro-layout-trigger",
+  props:{
+    isShow: {
+      type: Boolean,
+      default:true
+    },
+    menuScalingStatus: {
+      type: String,
+      default:'1'
+    }
+  },
+  data(){
+    return {
+      collapsed: false
+    }
+  },
+  created(){
+    this.initCollapsed();
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+  },
+  watch: {
+    menuScalingStatus(val) {
+      this.initCollapsed();
+    }
+  },
+  methods: {
+    initListener(){
+      Bus.$on('trigger-change-icon',(data)=>{
+        this.collapsed = data
+        Bus.$emit('trigger-change', data)
+      });
+    },
+    destroyListener(){
+      Bus.$off('trigger-change-icon')
+    },
+    handleChange(){
+      this.collapsed = !this.collapsed
+      Bus.$emit('trigger-change', this.collapsed)
+    },
+    initCollapsed(){
+      if(this.menuScalingStatus==='0'){
+        this.collapsed=true
+      }
+      Bus.$emit('trigger-change', this.collapsed)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.trans{
+  transition: transform .2s ease;
+}
+@size: 64px;
+.sider-trigger-a{
+  float: left;
+  padding: 6px;
+  width: @size;
+  height: @size;
+  display: inline-block;
+  text-align: center;
+  margin-top: 12px;
+  i{
+    .trans;
+    vertical-align: top;
+  }
+  &.collapsed i{
+    transform: rotateZ(90deg);
+    .trans;
+  }
+}
+</style>

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

@@ -0,0 +1,123 @@
+<template>
+  <div class="app-fast-con" :class="tabsHeight != 46 ? 'custom-tabs' : ''">
+    <div class="app-fast-con-side" >
+      <div class="sideApp">
+        <div class="app-name">
+          <Icon :type="appInfo.icon || 'ios-apps-outline'"  size="16"/>
+          <span>
+          {{ appInfo.name}}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Bus from "@lambo-design/shared/utils/bus";
+import {deepCopy} from "@lambo-design/shared/utils/assist";
+import {getThemeVarByKey} from "@lambo-design/shared/utils/theme";
+import {getAllElements} from "@lambo-design/shared/utils/platform"
+
+export default {
+  name: "AppName",
+  data () {
+    return {
+      tabsHeight: 46,
+      appInfo:{}
+    }
+  },
+  methods:{
+    initListener(){
+      Bus.$on('system-info',(data)=>{
+        this.initSystemInfo(data)
+      })
+      Bus.$on('change-app',(data)=>{
+        this.initApp(data.appInfo)
+      })
+    },
+    destroyListener(){
+      Bus.$off('system-info')
+      Bus.$off('change-app')
+    },
+    initSystemInfo(data){
+      this.systemInfo = deepCopy(data)
+    },
+    initApp(data){
+      if (data.isGroup){
+        this.appInfo = data
+      }else {
+        let appInfo = sessionStorage.getItem("appInfo")
+        this.appInfo = JSON.parse(appInfo)
+      }
+    },
+
+    loadingCustomStyle(){
+      let themeKey = localStorage.getItem("theme") ? localStorage.getItem("theme") : "default"
+      let tabsHeight = getThemeVarByKey(themeKey,'--layout-tabs-height');
+      if (tabsHeight) {
+        this.tabsHeight = tabsHeight;
+      }
+    }
+  },
+  created(){
+    this.initListener();
+    this.loadingCustomStyle();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "@lambo-design/core/src/styles/default.less";
+.app-fast-con{
+  width: 100%;
+  position: absolute;
+  top: 0px;
+  z-index: 1000;
+  border-bottom: 1px solid var(--border-color-split,@_border-color-split);
+  .app-fast-con-side{
+    width: 100%;
+    .sideApp{
+      width: 100%;
+      padding: 3px 0 4px 0;
+      transform: translateX(-14px);
+      display: flex;
+      align-items: center;
+      /deep/.ivu-icon{
+        height: 40px;
+        line-height: 40px;
+        font-weight: 400;
+      }
+    }
+    .app-name{
+      display: flex;
+      align-items: center;
+      //font-size: 14px;
+      //width: 100%;
+      //height: 40px;
+      //font-weight: 400;
+      //border: none;
+      font-weight: bold;      /* 关键字，等于 700 */
+      padding-left: 37px;
+    }
+
+  }
+  &.custom-tabs{
+    .app-fast-con-side{
+      .sideApp {
+        height: 30px;
+        /deep/.ivu-icon{
+          height: 36px;
+          line-height: 36px;
+        }
+      }
+      /deep/.app-name{
+        height: 36px;
+      }
+    }
+  }
+}
+
+</style>

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

@@ -1,28 +1,29 @@
 <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"
+            :transfer="transfer" :transfer-class-name="transfer ? 'collased-menu-transfer' : ''" @on-click="handleClick">
+    <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>
+      <span v-if="!hideTitle" >&nbsp;{{ 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">
+                                     :parent-item="child" :transfer="false">
         </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>
+          <span class="menu-title-nochildren">&nbsp;{{ showTitle(child) }}</span>
         </DropdownItem>
       </template>
     </DropdownMenu>
   </Dropdown>
 </template>
 <script>
-import sider from '../utils/sider'
-import menuItem from '../utils/menuItem'
+import sider from '../../../utils/sider'
+import menuItem from '../../../utils/menuItem'
 import {findNodeUpperByClasses} from '@lambo-design/shared/utils/platform'
 
 export default {
@@ -32,6 +33,10 @@ export default {
     hideTitle: {
       type: Boolean,
       default: false
+    },
+    transfer: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -58,6 +63,7 @@ export default {
 </script>
 <style lang="less" scoped>
 @import "@lambo-design/core/src/styles/default";
+@import '../../../styles/other-menu.less';
 .collased-menu-dropdown {
   width: 100%;
   margin: 0;
@@ -71,7 +77,7 @@ export default {
   transition: background 0.2s ease-in-out;
   display: block;
   &:hover{
-    color: var(--heading-color, @_heading-color);
+    //color: var(--heading-color, @_heading-color);
     background: rgba(26,26,26,0.05);
   }
   /deep/.ivu-dropdown-rel{
@@ -80,12 +86,25 @@ export default {
       width: 100%;
       font-weight: normal;
       margin-left: -5px;
-      color: var(--text-color, @_text-color) !important;
+      //color: var(--text-color, @_text-color) !important;
       text-decoration: none;
       &:hover{
-        color: var(--heading-color, @_heading-color) !important;
+        //color: var(--heading-color, @_heading-color) !important;
       }
     }
   }
 }
-</style>
+.collased-menu-transfer{
+  .ivu-dropdown-menu{
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* 隐藏滚动条 */
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Edge */
+    }
+    /* Firefox */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+</style>

package/src/components/{pro-layout-sider-icon.vue → pro-layout-sider/components/pro-layout-sider-icon.vue}

@@ -40,7 +40,7 @@ export default {
       }
       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 'background: url('+ require('../../../styles/images/menuicon/' + imgName + '-s.png') +') no-repeat;background-size: 100%;';
       }
       return '';
     }
@@ -78,4 +78,4 @@ export default {
       }
     }
   }
-</style>
+</style>

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

@@ -0,0 +1,139 @@
+<template>
+  <Submenu :name="`${parentName}`">
+    <template slot="title">
+      <Row type="flex" justify="center" align="top">
+        <Col :span="getSpanNum(systemInfo,'icon')">
+          <ProLayoutSiderIcon v-if="systemInfo.menuLogo == '1'" :icon-type="parentItem.meta.icon"></ProLayoutSiderIcon>
+        </Col>
+        <Col :span="getSpanNum(systemInfo,'title')">
+          <div>
+            <Tooltip style="width: 100%" v-if="systemInfo.titleShow ==='ellipsis'" placement="right" transfer :content="showTitle(parentItem)">
+              <div class="menu-title-ellipsis">{{ showTitle(parentItem)}}</div>
+            </Tooltip>
+            <span v-else class="menu-title-wrap">{{ showTitle(parentItem)}}</span>
+          </div>
+        </Col>
+      </Row>
+    </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"
+                                :collect-map="collectMap"
+                                :system-info="systemInfo"
+                                :nav-list="navList">
+        </ProLayoutSiderMenuItem>
+        <menu-item v-else :key="`menu-${item.children[0].name}`" :name="getNameOrHref(item, true)">
+          <Row type="flex" justify="center" align="top">
+            <Col :span="getSpanNum(systemInfo,'icon')">
+              <Icon v-if="systemInfo.menuLogo == '1'" :type="collectMap.hasOwnProperty(item.name) ? 'ios-star' : 'ios-star-outline'"
+                    @click.stop="toggleCollect(item)"></Icon>
+            </Col>
+            <Col :span="getSpanNum(systemInfo,'title')">
+              <div :class="['menu-title-' + item.children[0].permissionId,'draggable-text']" v-draggable-menu="dragOptions(item.children[0])">
+                <Tooltip style="width: 100%" v-if="systemInfo.titleShow ==='ellipsis'" placement="right" transfer :content="showTitle(item.children[0])">
+                  <div class="menu-title-nochildren-ellipsis">{{ showTitle(item.children[0]) }}</div>
+                </Tooltip>
+                <span v-else class="menu-title-nochildren-wrap">{{ showTitle(item.children[0])}}</span>
+              </div>
+            </Col>
+          </Row>
+        </menu-item>
+      </template>
+      <template v-else>
+        <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
+                                :parent-item="item"
+                                :collect-map="collectMap"
+                                :system-info="systemInfo"
+                                :nav-list="navList">
+        </ProLayoutSiderMenuItem>
+        <menu-item v-else :key="`menu-${item.name}`" :name="getNameOrHref(item)">
+          <Row type="flex" justify="center" align="top">
+            <Col :span="getSpanNum(systemInfo,'icon')">
+              <Icon v-if="systemInfo.menuLogo == '1'" :type="collectMap.hasOwnProperty(item.name) ? 'ios-star' : 'ios-star-outline'"
+                    @click.stop="toggleCollect(item)"></Icon>
+            </Col>
+            <Col :span="getSpanNum(systemInfo,'title')">
+              <div :class="['menu-title-' + item.permissionId,'draggable-text']" v-draggable-menu="dragOptions(item)">
+                <Tooltip style="width: 100%" v-if="systemInfo.titleShow ==='ellipsis'" placement="right" transfer :content="showTitle(item)">
+                  <div class="menu-title-nochildren-ellipsis">{{ showTitle(item) }}</div>
+                </Tooltip>
+                <span v-else class="menu-title-nochildren-wrap">{{ showTitle(item) }}</span>
+              </div>
+            </Col>
+          </Row>
+        </menu-item>
+      </template>
+    </template>
+  </Submenu>
+</template>
+<script>
+import sider from '../../../utils/sider'
+import menuItem from '../../../utils/menuItem'
+import Bus from '@lambo-design/shared/utils/bus'
+import Locale from "@lambo-design/core/src/mixins/locale";
+import {addOttCode} from "@lambo-design/shared/utils/platform";
+
+export default {
+  name: 'ProLayoutSiderMenuItem',
+  mixins: [sider, menuItem, Locale],
+  props: {
+    collectMap: {
+      type: Object,
+      default: () => {}
+    },
+    systemInfo: {
+      type: Object,
+      default: () => {
+        return {
+          systemName: this.t('pro-layout.common.systemName'),
+          systemLogo: '',
+          layoutSize: 'small',
+          acceptAppId: '',
+          tabNum: 5,
+          topMenu: 4,
+          rightTopOptButtonList: [],
+          menuScaling:'1',
+          headBackground:'',
+          menuLogo: '1',
+          titleShow:'wrap',
+        }
+      }
+    },
+    navList: {
+      type: Array,
+      default : () => {
+        return []
+      }
+    }
+  },
+  methods: {
+    toggleCollect(item) {
+      Bus.$emit('toggle-collect-menu',!this.collectMap[item.name],item)
+    },
+    dragOptions(item) {
+      if (!item) {
+        item = {}
+      }
+      item.navList = this.navList;
+      return {
+        trigger: '.menu-title-' + item.permissionId,
+        body: '.menu-title-' + item.permissionId,
+        recover: true,
+        item: item,
+        canMove: this.systemInfo?.menuDraggable !== '0'
+      }
+    },
+  },
+  computed:{
+    showTooltip() {
+      const ellipsisDiv = this.$refs['ellipsisDiv' + this.index];
+      return ellipsisDiv.clientWidth < ellipsisDiv.scrollWidth;
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '../../../styles/other-menu.less';
+</style>