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

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

core/core-frontend/src/store/modules/app.ts

@@ -11,6 +11,7 @@ interface AppState {
   desktop: boolean
   isDataEaseBi: boolean
   isIframe: boolean
+  arrowSide: boolean
 }
 
 export const useAppStore = defineStore('app', {
@@ -22,13 +23,17 @@ export const useAppStore = defineStore('app', {
       dekey: 'DataEaseKey',
       isDataEaseBi: false,
       isIframe: false,
-      desktop: false
+      desktop: false,
+      arrowSide: false
     }
   },
   getters: {
     getSize(): boolean {
       return this.size
     },
+    getArrowSide(): boolean {
+      return this.arrowSide
+    },
     getPageLoading(): boolean {
       return this.pageLoading
     },
@@ -58,6 +63,9 @@ export const useAppStore = defineStore('app', {
     setSize(size: boolean) {
       this.size = size
     },
+    setArrowSide(ArrowSide: boolean) {
+      this.arrowSide = ArrowSide
+    },
     setIsDataEaseBi(isDataEaseBi: boolean) {
       this.isDataEaseBi = isDataEaseBi
     },

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

@@ -1,24 +1,34 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-const sideTreeStatus = ref(true)
+import { useAppStoreWithOut } from '@/store/modules/app'
+const appStore = useAppStoreWithOut()
+defineProps({
+  isInside: {
+    type: Boolean,
+    default: false
+  }
+})
 const emits = defineEmits(['changeSideTreeStatus'])
 const handleClick = val => {
+  appStore.setArrowSide(val)
   emits('changeSideTreeStatus', val)
-  sideTreeStatus.value = val
 }
 </script>
 
 <template>
   <div
     @click="handleClick(false)"
-    v-if="sideTreeStatus"
+    v-if="appStore.getArrowSide && !isInside"
     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">
+  <div
+    @click="handleClick(true)"
+    v-else-if="!appStore.getArrowSide && isInside"
+    class="arrow-side-tree arrow-side-tree-right"
+  >
     <el-icon>
       <Icon name="icon_right_outlined" />
     </el-icon>

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

@@ -140,6 +140,14 @@ const changeSideTreeStatus = val => {
   sideTreeStatus.value = val
 }
 
+const mouseenter = () => {
+  appStore.setArrowSide(true)
+}
+
+const mouseleave = () => {
+  appStore.setArrowSide(false)
+}
+
 defineExpose({
   getPreviewStateInfo
 })
@@ -150,13 +158,21 @@ defineExpose({
     <ArrowSide
       :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
       @change-side-tree-status="changeSideTreeStatus"
+      :isInside="!sideTreeStatus"
     ></ArrowSide>
     <el-aside
+      @mouseenter="mouseenter"
+      @mouseleave="mouseleave"
       class="resource-area"
       :class="{ 'close-side': !slideShow, retract: !sideTreeStatus }"
       ref="node"
       :style="{ width: width + 'px' }"
     >
+      <ArrowSide
+        :isInside="!sideTreeStatus"
+        :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
+        @change-side-tree-status="changeSideTreeStatus"
+      ></ArrowSide>
       <de-resource-tree
         ref="resourceTreeRef"
         v-show="slideShow"

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

@@ -127,6 +127,14 @@ const changeSideTreeStatus = val => {
   sideTreeStatus.value = val
 }
 
+const mouseenter = () => {
+  appStore.setArrowSide(true)
+}
+
+const mouseleave = () => {
+  appStore.setArrowSide(false)
+}
+
 onBeforeMount(() => {
   dvMainStore.canvasDataInit()
 })
@@ -137,13 +145,21 @@ onBeforeMount(() => {
     <ArrowSide
       :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
       @change-side-tree-status="changeSideTreeStatus"
+      :isInside="!sideTreeStatus"
     ></ArrowSide>
     <el-aside
       class="resource-area"
+      @mouseenter="mouseenter"
+      @mouseleave="mouseleave"
       :class="{ 'close-side': !slideShow, retract: !sideTreeStatus }"
       ref="node"
       :style="{ width: width + 'px' }"
     >
+      <ArrowSide
+        :isInside="!sideTreeStatus"
+        :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
+        @change-side-tree-status="changeSideTreeStatus"
+      ></ArrowSide>
       <de-resource-tree
         ref="resourceTreeRef"
         v-show="slideShow"

core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue

@@ -132,9 +132,6 @@ onBeforeUnmount(() => {
 })
 
 const insertParamToCodeMirror = (value: string) => {
-  mirror.value.dispatch({
-    changes: { from: 0, to: mirror.value.state.doc.toString().length, insert: '' }
-  })
   mirror.value.dispatch({
     changes: { from: mirror.value.viewState.state.selection.ranges[0].from, insert: value },
     selection: { anchor: mirror.value.viewState.state.selection.ranges[0].from }

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

@@ -460,6 +460,13 @@ const filterNode = (value: string, data: BusiTreeNode) => {
   if (!value) return true
   return data.name?.includes(value)
 }
+const mouseenter = () => {
+  appStore.setArrowSide(true)
+}
+
+const mouseleave = () => {
+  appStore.setArrowSide(false)
+}
 
 const getMenuList = (val: boolean) => {
   return !val || isDataEaseBi.value
@@ -479,13 +486,21 @@ const getMenuList = (val: boolean) => {
     <ArrowSide
       :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
       @change-side-tree-status="changeSideTreeStatus"
+      :isInside="!sideTreeStatus"
     ></ArrowSide>
     <el-aside
       class="resource-area"
+      @mouseenter="mouseenter"
+      @mouseleave="mouseleave"
       :class="{ retract: !sideTreeStatus }"
       ref="node"
       :style="{ width: width + 'px' }"
     >
+      <ArrowSide
+        :isInside="!sideTreeStatus"
+        :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
+        @change-side-tree-status="changeSideTreeStatus"
+      ></ArrowSide>
       <div class="resource-tree">
         <div class="tree-header">
           <div class="icon-methods">

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

@@ -672,6 +672,14 @@ const changeSideTreeStatus = val => {
   sideTreeStatus.value = val
 }
 
+const mouseenter = () => {
+  appStore.setArrowSide(true)
+}
+
+const mouseleave = () => {
+  appStore.setArrowSide(false)
+}
+
 const getMenuList = (val: boolean) => {
   return !val || isDataEaseBi.value
     ? menuList
@@ -690,13 +698,21 @@ const getMenuList = (val: boolean) => {
     <ArrowSide
       :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
       @change-side-tree-status="changeSideTreeStatus"
+      :isInside="!sideTreeStatus"
     ></ArrowSide>
     <el-aside
+      @mouseenter="mouseenter"
+      @mouseleave="mouseleave"
       class="resource-area"
       :class="{ retract: !sideTreeStatus }"
       ref="node"
       :style="{ width: width + 'px' }"
     >
+      <ArrowSide
+        :isInside="!sideTreeStatus"
+        :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
+        @change-side-tree-status="changeSideTreeStatus"
+      ></ArrowSide>
       <div class="resource-tree">
         <div class="tree-header">
           <div class="icon-methods">