feat(仪表板): 树列表侧边栏新增展开、收起功能

core/frontend/src/components/dataease/DeArrowSide.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    @click="handleClick(false)"
+    v-if="arrowSide && !isInside"
+    class="arrow-side-tree arrow-side-tree-left"
+  >
+    <svg-icon
+      icon-class="icon_left_outlined"
+      class="icon16"
+    />
+  </div>
+  <div
+    @click="handleClick(true)"
+    v-else-if="!arrowSide && isInside"
+    class="arrow-side-tree arrow-side-tree-right"
+  >
+    <svg-icon
+      icon-class="icon_right_outlined"
+      class="icon16"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'DeArrowSide',
+  props: {
+    isInside: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    ...mapState('app', [
+      'arrowSide'
+    ])
+  },
+  methods: {
+    handleClick(val) {
+      this.$store.dispatch('app/setArrowSide', val)
+      this.$emit('changeSideTreeStatus', val)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.arrow-side-tree-left {
+  top: 146px;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 5px 10px 0px #1f23291a;
+  z-index: 100;
+}
+
+.arrow-side-tree-right {
+  box-shadow: 0px 4px 8px 0px #0000001a;
+  top: 146px;
+  height: 24px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  padding-left: 2px;
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+  &:hover {
+    padding-left: 4px;
+    width: 24px;
+  }
+}
+
+.arrow-side-tree {
+  position: absolute;
+  border: 1px solid #dee0e3;
+  background: #fff;
+  cursor: pointer;
+  z-index: 10;
+  &:hover {
+    .icon16 {
+      color: #3370ff;
+    }
+  }
+  .icon16 {
+    font-size: 12px;
+  }
+}
+</style>

core/frontend/src/components/dataease/DeAsideContainer.vue

@@ -1,10 +1,16 @@
 <template>
   <el-aside
     :width="currentWidth"
+    @mouseenter.native="mouseenter"
+    @mouseleave.native="mouseleave"
     class="ms-aside-container"
+    :class="{ retract: !sideTreeStatus }"
     :style="{'margin-left': !asideHidden ? 0 : '-' + currentWidth}"
   >
-    <slot />
+    <DeArrowSide @changeSideTreeStatus="changeSideTreeStatus" :style="{ left: (sideTreeStatus ? parseInt(currentWidth) - 12 : 0) + 'px' }" :isInside="!sideTreeStatus"></DeArrowSide>
+    <keep-alive>
+      <slot v-if="sideTreeStatus"/>
+    </keep-alive>
     <de-horizontal-drag-bar
       v-if="isSystem"
       :type="type"
@@ -15,9 +21,10 @@
 <script>
 import DeHorizontalDragBar from './dragbar/DeLeft2RightDragBar'
 import { getLayout } from '@/utils/LayoutUtil'
+import DeArrowSide from '@/components/dataease/DeArrowSide.vue'
 export default {
   name: 'DeAsideContainer',
-  components: { DeHorizontalDragBar },
+  components: { DeHorizontalDragBar, DeArrowSide },
   props: {
     width: {
       type: String,
@@ -47,7 +54,8 @@ export default {
   data() {
     return {
       asideHidden: false,
-      currentWidth: ''
+      currentWidth: '',
+      sideTreeStatus: true,
     }
   },
   computed: {
@@ -65,12 +73,23 @@ export default {
   methods: {
     setCurrentWidth() {
       this.currentWidth = this.isCollapseWidth || this.type && getLayout(this.type) || this.width
+    },
+    mouseenter() {
+      if(!this.sideTreeStatus) return
+      this.$store.dispatch('app/setArrowSide', true)
+    },
+    mouseleave() {
+      if(!this.sideTreeStatus) return
+      this.$store.dispatch('app/setArrowSide', false)
+    },
+    changeSideTreeStatus(val) {
+      this.sideTreeStatus = val
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 
   .ms-aside-container {
     /* border: 1px solid #E6E6E6; */
@@ -81,6 +100,12 @@ export default {
     border-right: 0px;
     position: relative;
     padding-bottom: 50px;
+    overflow: visible;
+    
+    &.retract {
+      width: 0 !important;
+      min-width: 0 !important;
+    }
   }
 
   /* .collapse-style {

core/frontend/src/store/modules/app.js

@@ -7,8 +7,9 @@ const state = {
     hide: false
   },
   device: 'desktop',
-
-  size: Cookies.get('size') || 'small'
+  
+  size: Cookies.get('size') || 'small',
+  arrowSide: false
 }
 
 const mutations = {
@@ -36,7 +37,10 @@ const mutations = {
   SET_SIZE: (state, size) => {
     state.size = size
     Cookies.set('size', size)
-  }
+  },
+  SET_ARROW_SIDE: (state, arrowSide) => {
+    state.arrowSide = arrowSide
+  },
 }
 
 const actions = {
@@ -54,6 +58,9 @@ const actions = {
   },
   setSize({ commit }, size) {
     commit('SET_SIZE', size)
+  },
+  setArrowSide({ commit }, arrowSide) {
+    commit('SET_ARROW_SIDE', arrowSide)
   }
 }