Merge pull request #8141 from dataease/pr@dev-v2_dzz_mobile

feat(仪表板): 树列表侧边栏新增展开、收起功能
2024-02-23 16:10:42 +08:00 · 2024-02-23 16:10:42 +08:00 · 13b73a5723
commit 13b73a5723
parent a5328976c1 f7fe6db8a3
6 changed files with 144 additions and 7 deletions
--- a/core/core-frontend/src/views/common/DeResourceArrow.vue
+++ b/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 handleClick = val => {
+  emits('changeSideTreeStatus', val)
+  sideTreeStatus.value = val
+}
+</script>
+
+<template>
+  <div
+    @click="handleClick(false)"
+    v-if="sideTreeStatus"
+    class="arrow-side-tree arrow-side-tree-left"
+  >
+    <el-icon>
+      <Icon name="icon_left_outlined" />
+    </el-icon>
+  </div>
+  <div @click="handleClick(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>
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/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;
--- a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
+++ b/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;
--- a/core/core-frontend/src/views/data-visualization/PreviewShow.vue
+++ b/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;
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/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;
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/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;