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

core/core-frontend/src/views/common/DeResourceArrow.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+const sideTreeStatus = ref(true)
+const emits = defineEmits(['changeSideTreeStatus'])
+const handelClick = val => {
+  emits('changeSideTreeStatus', val)
+  sideTreeStatus.value = val
+}
+</script>
+
+<template>
+  <div
+    @click="handelClick(false)"
+    v-if="sideTreeStatus"
+    class="arrow-side-tree arrow-side-tree-left"
+  >
+    <el-icon>
+      <Icon name="icon_left_outlined" />
+    </el-icon>
+  </div>
+  <div @click="handelClick(true)" v-else class="arrow-side-tree arrow-side-tree-right">
+    <el-icon>
+      <Icon name="icon_right_outlined" />
+    </el-icon>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.arrow-side-tree-left {
+  top: 44px;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 5px 10px 0px #1f23291a;
+}
+
+.arrow-side-tree-right {
+  box-shadow: 0px 4px 8px 0px #0000001a;
+  top: 44px;
+  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 {
+    .ed-icon {
+      color: #3370ff;
+    }
+  }
+  .ed-icon {
+    font-size: 12px;
+  }
+}
+</style>

core/core-frontend/src/views/common/DeResourceTree.vue

@@ -531,7 +531,7 @@ defineExpose({
     font-size: 20px;
     font-weight: 500;
     color: var(--TextPrimary, #1f2329);
-    padding-bottom: 10px;
+    padding-bottom: 16px;
     .title {
       margin-right: auto;
       font-size: 16px;

core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue

@@ -5,6 +5,7 @@ import { reactive, nextTick, ref, toRefs, onBeforeMount, computed } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
+import ArrowSide from '@/views/common/DeResourceArrow.vue'
 import { initCanvasData, initCanvasDataPrepare } from '@/utils/canvasUtils'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { useRequestStoreWithOut } from '@/store/modules/request'
@@ -134,6 +135,10 @@ onBeforeMount(() => {
     dvMainStore.canvasDataInit()
   }
 })
+const sideTreeStatus = ref(true)
+const changeSideTreeStatus = val => {
+  sideTreeStatus.value = val
+}
 
 defineExpose({
   getPreviewStateInfo
@@ -142,9 +147,13 @@ defineExpose({
 
 <template>
   <div class="dv-preview dv-teleport-query">
+    <ArrowSide
+      :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
+      @change-side-tree-status="changeSideTreeStatus"
+    ></ArrowSide>
     <el-aside
       class="resource-area"
-      :class="{ 'close-side': !slideShow }"
+      :class="{ 'close-side': !slideShow, retract: !sideTreeStatus }"
       ref="node"
       :style="{ width: width + 'px' }"
     >
@@ -215,6 +224,7 @@ defineExpose({
   overflow: hidden;
   display: flex;
   background: #ffffff;
+  position: relative;
   .resource-area {
     position: relative;
     height: 100%;
@@ -222,6 +232,10 @@ defineExpose({
     padding: 0;
     border-right: 1px solid #d7d7d7;
     overflow: visible;
+
+    &.retract {
+      display: none;
+    }
   }
   .preview-area {
     flex: 1;

core/core-frontend/src/views/data-visualization/PreviewShow.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import DeResourceTree from '@/views/common/DeResourceTree.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import ArrowSide from '@/views/common/DeResourceArrow.vue'
 import { nextTick, onBeforeMount, reactive, ref, computed } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
@@ -121,6 +122,11 @@ const state = reactive({
   curPreviewGap: 0
 })
 
+const sideTreeStatus = ref(true)
+const changeSideTreeStatus = val => {
+  sideTreeStatus.value = val
+}
+
 onBeforeMount(() => {
   dvMainStore.canvasDataInit()
 })
@@ -128,9 +134,13 @@ onBeforeMount(() => {
 
 <template>
   <div class="dv-preview">
+    <ArrowSide
+      :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
+      @change-side-tree-status="changeSideTreeStatus"
+    ></ArrowSide>
     <el-aside
       class="resource-area"
-      :class="{ 'close-side': !slideShow }"
+      :class="{ 'close-side': !slideShow, retract: !sideTreeStatus }"
       ref="node"
       :style="{ width: width + 'px' }"
     >
@@ -200,6 +210,7 @@ onBeforeMount(() => {
   overflow: hidden;
   display: flex;
   background: #ffffff;
+  position: relative;
   .resource-area {
     position: relative;
     height: 100%;
@@ -207,6 +218,10 @@ onBeforeMount(() => {
     padding: 0;
     overflow: visible;
     border-right: 1px solid #d7d7d7;
+
+    &.retract {
+      display: none;
+    }
   }
   .preview-area {
     flex: 1;

core/core-frontend/src/views/visualized/data/dataset/index.vue

@@ -1,6 +1,7 @@
 <script lang="tsx" setup>
 import { useI18n } from '@/hooks/web/useI18n'
 import { ref, reactive, shallowRef, computed, watch, onBeforeMount, nextTick } from 'vue'
+import ArrowSide from '@/views/common/DeResourceArrow.vue'
 import {
   ElIcon,
   ElMessageBox,
@@ -450,6 +451,10 @@ const datasetListTree = ref()
 watch(nickName, (val: string) => {
   datasetListTree.value.filter(val)
 })
+const sideTreeStatus = ref(true)
+const changeSideTreeStatus = val => {
+  sideTreeStatus.value = val
+}
 
 const filterNode = (value: string, data: BusiTreeNode) => {
   if (!value) return true
@@ -471,7 +476,16 @@ const getMenuList = (val: boolean) => {
 
 <template>
   <div class="dataset-manage" v-loading="dtLoading">
-    <el-aside class="resource-area" ref="node" :style="{ width: width + 'px' }">
+    <ArrowSide
+      :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
+      @change-side-tree-status="changeSideTreeStatus"
+    ></ArrowSide>
+    <el-aside
+      class="resource-area"
+      :class="{ retract: !sideTreeStatus }"
+      ref="node"
+      :style="{ width: width + 'px' }"
+    >
       <div class="resource-tree">
         <div class="tree-header">
           <div class="icon-methods">
@@ -698,6 +712,7 @@ const getMenuList = (val: boolean) => {
   width: 100%;
   height: 100%;
   background: #fff;
+  position: relative;
 
   .resource-area {
     position: relative;
@@ -706,6 +721,9 @@ const getMenuList = (val: boolean) => {
     padding: 0;
     border-right: 1px solid #d7d7d7;
     overflow: visible;
+    &.retract {
+      display: none;
+    }
 
     .resource-tree {
       padding: 16px 0 0;
@@ -725,7 +743,7 @@ const getMenuList = (val: boolean) => {
         font-size: 20px;
         font-weight: 500;
         color: var(--TextPrimary, #1f2329);
-        padding-bottom: 10px;
+        padding-bottom: 16px;
 
         .title {
           margin-right: auto;

core/core-frontend/src/views/visualized/data/datasource/index.vue

@@ -4,6 +4,7 @@ import { dsTypes } from '@/views/visualized/data/datasource/form/option'
 import type { TabPaneName, ElMessageBoxOptions } from 'element-plus-secondary'
 import { ElIcon, ElMessageBox, ElMessage, ElScrollbar, ElAside } from 'element-plus-secondary'
 import GridTable from '@/components/grid-table/src/GridTable.vue'
+import ArrowSide from '@/views/common/DeResourceArrow.vue'
 import { HandleMore } from '@/components/handle-more'
 import { Icon } from '@/components/icon-custom'
 import { fieldType } from '@/utils/attr'
@@ -666,6 +667,11 @@ onMounted(() => {
   }
 })
 
+const sideTreeStatus = ref(true)
+const changeSideTreeStatus = val => {
+  sideTreeStatus.value = val
+}
+
 const getMenuList = (val: boolean) => {
   return !val || isDataEaseBi.value
     ? menuList
@@ -681,7 +687,16 @@ const getMenuList = (val: boolean) => {
 
 <template>
   <div class="datasource-manage" v-loading="dsLoading">
-    <el-aside class="resource-area" ref="node" :style="{ width: width + 'px' }">
+    <ArrowSide
+      :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
+      @change-side-tree-status="changeSideTreeStatus"
+    ></ArrowSide>
+    <el-aside
+      class="resource-area"
+      :class="{ retract: !sideTreeStatus }"
+      ref="node"
+      :style="{ width: width + 'px' }"
+    >
       <div class="resource-tree">
         <div class="tree-header">
           <div class="icon-methods">
@@ -1376,6 +1391,7 @@ const getMenuList = (val: boolean) => {
   width: 100%;
   height: 100%;
   background: #fff;
+  position: relative;
 
   .resource-area {
     position: relative;
@@ -1384,6 +1400,9 @@ const getMenuList = (val: boolean) => {
     padding: 0;
     border-right: 1px solid #d7d7d7;
     overflow: visible;
+    &.retract {
+      display: none;
+    }
 
     .resource-tree {
       padding: 16px 0 0;
@@ -1403,7 +1422,7 @@ const getMenuList = (val: boolean) => {
         font-size: 20px;
         font-weight: 500;
         color: var(--TextPrimary, #1f2329);
-        padding-bottom: 10px;
+        padding-bottom: 16px;
 
         .title {
           margin-right: auto;