Merge branch 'feature/headermenu-scroll' into develop

Former-commit-id: d2a29601bbce9559be7b016b5f1275cc2cd031ea [formerly d2a29601bbce9559be7b016b5f1275cc2cd031ea [formerly d2a29601bbce9559be7b016b5f1275cc2cd031ea [formerly d2a29601bbce9559be7b016b5f1275cc2cd031ea [formerly db12e38c06a3a458a779bf207f6e69644e8d472c [formerly 26aab1c943ca70fa3f0848e99bb51370079df053]]]]]
Former-commit-id: 45e961ff8fd0a6fb6284e04d5d0f51a1af52afd3
Former-commit-id: bcc54f9eb11678b08d64355cad18fc5b2a63d265
Former-commit-id: ac710eb0fa53a347037eed876f0df5b1fdcc887d [formerly 721a336c500bf0c9b4f018f2ee9ac07e1ec42ec5]
Former-commit-id: 463f549ddffad87c13ebc6bd645a9693861d5a4e
Former-commit-id: 8f79135d1d6095db4c9241866cadb521ce113487
Former-commit-id: cdbb290544ca7beff658b2eedbabed200e37a322
Former-commit-id: 0300b36e8275aa09d12836759ec4aa7e1e80e7da
Former-commit-id: dce7e1b1d5bdce4211277ff48ee27fe3658e9fe9

src/assets/style/theme/theme-base.scss.REMOVED.git-id

@@ -1 +1 @@
-134f6af0a62409abc3a59f2e23a1a00817f44b4c
+35339c248c50cb38d1ef2787c8bd7b86f24b4e30

src/assets/style/theme/theme.scss.REMOVED.git-id

@@ -1 +1 @@
-5e28075542c22533bf13f61de9a2eaf52bf18157
+12a8c966ed20571d09f5e912f7a83bc86264bf83

src/layout/header-aside/components/menu-header/index.vue

@@ -1,10 +1,22 @@
 <template>
-  <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
-    <template v-for="(menu, menuIndex) in header">
-      <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
-      <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
-    </template>
-  </el-menu>
+  <div class="d2-theme-header-menu" ref="page" :class="{'is-scrollable': isScroll}" flex="cross:center">
+    <div class="d2-theme-header-menu__content" ref="content" flex-box="1" flex>
+      <div class="d2-theme-header-menu__scroll" ref="scroll" flex-box="0" :style="'transform: translateX(' + currentTranslateX + 'px);'">
+        <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
+          <template v-for="(menu, menuIndex) in header">
+            <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
+            <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
+          </template>
+        </el-menu>
+      </div>
+    </div>
+    <div v-if="isScroll" class="d2-theme-header-menu__prev" flex-box="0" @click="scroll('left')" flex="main:center cross:center">
+      <i class="el-icon-arrow-left"></i>
+    </div>
+    <div v-if="isScroll" class="d2-theme-header-menu__next" flex-box="0" @click="scroll('right')" flex="cross:center">
+      <i class="el-icon-arrow-right"></i>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -28,7 +40,11 @@ export default {
   },
   data () {
     return {
-      active: ''
+      active: '',
+      isScroll: false,
+      scrollWidth: 0,
+      contentWidth: 0,
+      currentTranslateX: 0
     }
   },
   watch: {
@@ -38,6 +54,65 @@ export default {
       },
       immediate: true
     }
+  },
+  methods: {
+    scroll (direction) {
+      if (direction === 'left') {
+        // 向右滚动
+        this.currentTranslateX = 0
+      } else {
+        // 向左滚动
+        if (this.contentWidth * 2 - this.currentTranslateX <= this.scrollWidth) {
+          this.currentTranslateX -= this.contentWidth
+        } else {
+          this.currentTranslateX = this.contentWidth - this.scrollWidth
+        }
+      }
+    }
+  },
+  mounted () {
+    const checkScroll = () => {
+      let contentWidth = this.$refs.content.clientWidth
+      let scrollWidth = this.$refs.scroll.clientWidth
+      if (this.isScroll) {
+        // 页面依旧允许滚动的情况，需要更新width
+        if (this.contentWidth - this.scrollWidth === this.currentTranslateX) {
+          // currentTranslateX 也需要相应变化【在右端到头的情况时】
+          this.currentTranslateX = contentWidth - scrollWidth
+          // 快速的滑动依旧存在判断和计算时对应的contentWidth变成正数，所以需要限制一下
+          if (this.currentTranslateX > 0) {
+            this.currentTranslateX = 0
+          }
+        }
+        // 更新元素数据
+        this.contentWidth = contentWidth
+        this.scrollWidth = scrollWidth
+        // 判断何时滚动消失: 当page > content + btns(40)
+        if (contentWidth > scrollWidth + 40) {
+          this.isScroll = false
+        }
+      }
+      // 判断何时滚动出现: 当page < content
+      if (!this.isScroll && contentWidth < scrollWidth) {
+        this.isScroll = true
+        // 注意，当isScroll变为true，对应的元素盒子大小会发生变化
+        this.$nextTick(() => {
+          contentWidth = this.$refs.content.clientWidth
+          scrollWidth = this.$refs.scroll.clientWidth
+          this.contentWidth = contentWidth
+          this.scrollWidth = scrollWidth
+          this.currentTranslateX = 0
+        })
+      }
+    }
+    // 初始化判断
+    checkScroll()
+
+    // 默认判断父元素和子元素的大小，以确定初始情况是否显示滚动
+    // 全局窗口变化监听，判断父元素和子元素的大小，从而控制isScroll的开关
+    window.onresize = () => {
+      checkScroll()
+    }
   }
 }
 </script>

src/layout/header-aside/layout.vue

@@ -13,17 +13,18 @@
         :style="{
           opacity: this.searchActive ? 0.5 : 1
         }"
-        flex-box="0">
-        <div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
+        flex-box="0"
+        flex>
+        <div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}" flex-box="0">
           <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
           <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
         </div>
-        <div class="toggle-aside-btn" @click="handleToggleAside">
+        <div class="toggle-aside-btn" @click="handleToggleAside" flex-box="0">
           <d2-icon name="bars"/>
         </div>
-        <d2-menu-header/>
+        <d2-menu-header flex-box="1"/>
         <!-- 顶栏右侧 -->
-        <div class="d2-header-right">
+        <div class="d2-header-right" flex-box="0">
           <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
           <d2-header-search @click="handleSearchClick"/>
           <d2-header-error-log/>