Merge pull request #4485 from dataease/pr@dev@refactor_menu-cache

refactor: 优化仪表板数据集菜单操作逻辑，防止菜单量大时可能造成的卡顿
2026-05-23 22:08:34 +08:00 · 2023-02-08 16:25:58 +08:00
parent 3560aebd0f 59f7cfe257
commit 9ba044f741
17 changed files with 521 additions and 273 deletions
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -8,7 +8,7 @@ import {
 import { ApplicationContext } from '@/utils/ApplicationContext'
 import { uuid } from 'vue-uuid'
 import store from '@/store'
-import { AIDED_DESIGN, MOBILE_SETTING, PANEL_CHART_INFO, TAB_COMMON_STYLE, PAGE_LINE_DESIGN } from '@/views/panel/panel'
+import { AIDED_DESIGN, MOBILE_SETTING, PAGE_LINE_DESIGN, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
 import html2canvas from 'html2canvasde'

 export function deepCopy(target) {
@@ -271,3 +271,135 @@ export function findCurComponentIndex(componentData, curComponent) {
  }
  return curIndex
 }
+
+export function deleteTreeNode(nodeId, tree, nodeTarget) {
+  if (!nodeId || !tree || !tree.length) {
+    return
+  }
+  for (let i = 0, len = tree.length; i < len; i++) {
+    if (tree[i].id === nodeId) {
+      if (nodeTarget) {
+        nodeTarget['target'] = tree[i]
+      }
+      tree.splice(i, 1)
+      return
+    } else if (tree[i].children && tree[i].children.length) {
+      deleteTreeNode(nodeId, tree[i].children, nodeTarget)
+    }
+  }
+}
+
+export function moveTreeNode(nodeInfo, tree) {
+  const nodeTarget = { target: null }
+  deleteTreeNode(nodeInfo.id, tree, nodeTarget)
+  if (nodeTarget.target) {
+    nodeTarget.target.pid = nodeInfo.pid
+    insertTreeNode(nodeTarget.target, tree)
+  }
+}
+
+export function updateTreeNode(nodeInfo, tree) {
+  if (!nodeInfo) {
+    return
+  }
+  for (let i = 0, len = tree.length; i < len; i++) {
+    if (tree[i].id === nodeInfo.id) {
+      tree[i].name = nodeInfo.name
+      tree[i].label = nodeInfo.label
+      if (tree[i].isDefault) {
+        tree[i].isDefault = nodeInfo.isDefault
+      }
+      return
+    } else if (tree[i].children && tree[i].children.length) {
+      updateTreeNode(nodeInfo, tree[i].children)
+    }
+  }
+}
+
+export function toDefaultTree(nodeId, tree) {
+  if (!nodeId) {
+    return
+  }
+  for (let i = 0, len = tree.length; i < len; i++) {
+    if (tree[i].id === nodeId) {
+      tree[i].isDefault = true
+      return
+    } else if (tree[i].children && tree[i].children.length) {
+      toDefaultTree(nodeId, tree[i].children)
+    }
+  }
+}
+
+export function insertTreeNode(nodeInfo, tree) {
+  if (!nodeInfo) {
+    return
+  }
+  if (nodeInfo.pid === 0 || nodeInfo.pid === '0') {
+    tree.push(nodeInfo)
+    return
+  }
+  for (let i = 0, len = tree.length; i < len; i++) {
+    if (tree[i].id === nodeInfo.pid) {
+      if (!tree[i].children) {
+        tree[i].children = []
+      }
+      tree[i].children.push(nodeInfo)
+      return
+    } else if (tree[i].children && tree[i].children.length) {
+      insertTreeNode(nodeInfo, tree[i].children)
+    }
+  }
+}
+
+export function insertBatchTreeNode(nodeInfoArray, tree) {
+  if (!nodeInfoArray || nodeInfoArray.size === 0) {
+    return
+  }
+  const pid = nodeInfoArray[0].pid
+  for (let i = 0, len = tree.length; i < len; i++) {
+    if (tree[i].id === pid) {
+      if (!tree[i].children) {
+        tree[i].children = []
+      }
+      tree[i].children = tree[i].children.concat(nodeInfoArray)
+      return
+    } else if (tree[i].children && tree[i].children.length) {
+      insertBatchTreeNode(nodeInfoArray, tree[i].children)
+    }
+  }
+}
+
+export function updateCacheTree(opt, treeName, nodeInfo, tree) {
+  if (opt === 'new' || opt === 'copy') {
+    insertTreeNode(nodeInfo, tree)
+  } else if (opt === 'move') {
+    moveTreeNode(nodeInfo, tree)
+  } else if (opt === 'rename') {
+    updateTreeNode(nodeInfo, tree)
+  } else if (opt === 'delete') {
+    deleteTreeNode(nodeInfo, tree)
+  } else if (opt === 'newFirstFolder') {
+    tree.push(nodeInfo)
+  } else if (opt === 'batchNew') {
+    insertBatchTreeNode(nodeInfo, tree)
+  } else if (opt === 'toDefaultPanel') {
+    toDefaultTree(nodeInfo.source, tree)
+  }
+  localStorage.setItem(treeName, JSON.stringify(tree))
+}
+
+export function formatDatasetTreeFolder(tree) {
+  if (tree && tree.length) {
+    for (let len = tree.length - 1; len > -1; len--) {
+      if (tree[len].modelInnerType !== 'group') {
+        tree.splice(len, 1)
+      } else if (tree[len].children && tree[len].children.length) {
+        formatDatasetTreeFolder(tree[len].children)
+      }
+    }
+  }
+}
+
+export function getCacheTree(treeName) {
+  return JSON.parse(localStorage.getItem(treeName))
+}
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/frontend/src/views/dataset/add/AddApi.vue
@@ -9,7 +9,7 @@
      class="arrow-right"
      @click="showLeft = true"
    >
-      <i class="el-icon-d-arrow-right" />
+      <i class="el-icon-d-arrow-right"/>
    </p>
    <div
      v-show="showLeft"
@@ -172,8 +172,8 @@
          class="data"
        >
          <span class="result-num">{{
-            `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
-          }}</span>
+              `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
+            }}</span>
          <div class="table-grid">
            <ux-grid
              ref="plxTable"
@@ -214,11 +214,12 @@
 </template>

 <script>
-import { listApiDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
+import { isKettleRunning, listApiDatasource, post } from '@/api/dataset/dataset'
 import { dbPreview, engineMode } from '@/api/system/engine'
 import cancelMix from './cancelMix'
 import msgCfm from '@/components/msgCfm/index'
 import { pySort } from './util'
+import { updateCacheTree } from '@/components/canvas/utils/utils'

 export default {
  name: 'AddApi',
@@ -442,6 +443,7 @@ export default {
      post('/dataset/table/batchAdd', tables)
        .then((response) => {
          this.openMessageSuccess('deDataset.set_saved_successfully')
+          updateCacheTree('batchNew', 'dataset-tree', response.data, JSON.parse(localStorage.getItem('dataset-tree')))
          this.cancel(response.data)
        })
        .finally(() => {
@@ -485,10 +487,12 @@ export default {
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
  }
+
  .table-list {
    p {
      margin: 0;
    }
+
    height: 100%;
    width: 240px;
    padding: 16px 12px;
@@ -501,6 +505,7 @@ export default {
      display: flex;
      justify-content: space-between;
      color: var(--deTextPrimary, #1f2329);
+
      i {
        cursor: pointer;
        font-size: 12px;
@@ -511,6 +516,7 @@ export default {
    .search {
      margin: 12px 0;
    }
+
    .ds-list {
      margin: 12px 0 24px 0;
      width: 100%;
@@ -519,6 +525,7 @@ export default {
    .table-checkbox-list {
      height: calc(100% - 190px);
      overflow-y: auto;
+
      .item {
        height: 40px;
        width: 100%;
@@ -556,12 +563,14 @@ export default {
          text-overflow: ellipsis;
          white-space: nowrap;
        }
+
        .error-name-exist {
          position: absolute;
          top: 10px;
          right: 10px;
        }
      }
+
      .not-allow {
        cursor: not-allowed;
        color: var(--deTextDisable, #bbbfc4);
@@ -573,6 +582,7 @@ export default {
    font-family: PingFang SC;
    flex: 1;
    overflow: hidden;
+
    .top-table-detail {
      height: 64px;
      width: 100%;
@@ -580,6 +590,7 @@ export default {
      background: #f5f6f7;
      display: flex;
      align-items: center;
+
      .el-select {
        width: 120px;
        margin-right: 12px;
@@ -593,6 +604,7 @@ export default {
      display: flex;
      align-items: center;
      position: relative;
+
      .name {
        font-size: 14px;
        font-weight: 400;
@@ -611,6 +623,7 @@ export default {
      height: calc(100% - 140px);
      width: 100%;
      box-sizing: border-box;
+
      .result-num {
        font-weight: 400;
        display: inline-block;
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -9,7 +9,7 @@
      class="arrow-right"
      @click="showLeft = true"
    >
-      <i class="el-icon-d-arrow-right" />
+      <i class="el-icon-d-arrow-right"/>
    </p>
    <div
      v-show="showLeft"
@@ -179,8 +179,8 @@
          class="data"
        >
          <span class="result-num">{{
-            `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
-          }}</span>
+              `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
+            }}</span>
          <div class="table-grid">
            <ux-grid
              ref="plxTable"
@@ -221,12 +221,14 @@
 </template>

 <script>
-import { listDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
-import { engineMode, dbPreview } from '@/api/system/engine'
+import { isKettleRunning, listDatasource, post } from '@/api/dataset/dataset'
+import { dbPreview, engineMode } from '@/api/system/engine'
 import msgCfm from '@/components/msgCfm/index'
 import cancelMix from './cancelMix'

 import { pySort } from './util'
+import { updateCacheTree } from '@/components/canvas/utils/utils'
+
 export default {
  name: 'AddDB',
  mixins: [msgCfm, cancelMix],
@@ -460,6 +462,7 @@ export default {
      post('/dataset/table/batchAdd', tables)
        .then((response) => {
          this.openMessageSuccess('deDataset.set_saved_successfully')
+          updateCacheTree('batchNew', 'dataset-tree', response.data, JSON.parse(localStorage.getItem('dataset-tree')))
          this.cancel(response.data)
        })
        .finally(() => {
@@ -503,10 +506,12 @@ export default {
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
  }
+
  .table-list {
    p {
      margin: 0;
    }
+
    height: 100%;
    width: 240px;
    padding: 16px 12px;
@@ -519,6 +524,7 @@ export default {
      display: flex;
      justify-content: space-between;
      color: var(--deTextPrimary, #1f2329);
+
      i {
        cursor: pointer;
        font-size: 12px;
@@ -529,6 +535,7 @@ export default {
    .search {
      margin: 12px 0;
    }
+
    .ds-list {
      margin: 12px 0 24px 0;
      width: 100%;
@@ -537,6 +544,7 @@ export default {
    .table-checkbox-list {
      height: calc(100% - 190px);
      overflow-y: auto;
+
      .item {
        height: 40px;
        width: 100%;
@@ -574,12 +582,14 @@ export default {
          text-overflow: ellipsis;
          white-space: nowrap;
        }
+
        .error-name-exist {
          position: absolute;
          top: 10px;
          right: 10px;
        }
      }
+
      .not-allow {
        cursor: not-allowed;
        color: var(--deTextDisable, #bbbfc4);
@@ -591,6 +601,7 @@ export default {
    font-family: PingFang SC;
    flex: 1;
    overflow: hidden;
+
    .top-table-detail {
      height: 64px;
      width: 100%;
@@ -598,6 +609,7 @@ export default {
      background: #f5f6f7;
      display: flex;
      align-items: center;
+
      .el-select {
        width: 120px;
        margin-right: 12px;
@@ -611,6 +623,7 @@ export default {
      display: flex;
      align-items: center;
      position: relative;
+
      .name {
        font-size: 14px;
        font-weight: 400;
@@ -629,6 +642,7 @@ export default {
      height: calc(100% - 140px);
      width: 100%;
      box-sizing: border-box;
+
      .result-num {
        font-weight: 400;
        display: inline-block;
--- a/frontend/src/views/dataset/group/CreatDsGroup.vue
+++ b/frontend/src/views/dataset/group/CreatDsGroup.vue
@@ -18,7 +18,7 @@
        :label="$t('dataset.name')"
        prop="name"
      >
-        <el-input v-model="datasetForm.name" />
+        <el-input v-model="datasetForm.name"/>
      </el-form-item>
      <el-form-item
        :label="$t('deDataset.folder')"
@@ -44,8 +44,8 @@
              slot-scope="{ data }"
              class="custom-tree-node-dataset"
            >
-              <span v-if="data.type === 'group'">
-                <svg-icon icon-class="scene" />
+              <span v-if="data.modelInnerType === 'group'">
+                <svg-icon icon-class="scene"/>
              </span>
              <span
                style="
@@ -84,7 +84,8 @@
      <deBtn
        secondary
        @click="resetForm"
-      >{{ $t('dataset.cancel') }}</deBtn>
+      >{{ $t('dataset.cancel') }}
+      </deBtn>
      <deBtn
        type="primary"
        @click="saveDataset"
@@ -97,7 +98,8 @@
 <script>
 import { post } from '@/api/dataset/dataset'
 import { datasetTypeMap } from './options'
-import { groupTree } from '@/api/dataset/dataset'
+import { formatDatasetTreeFolder, getCacheTree } from '@/components/canvas/utils/utils'
+
 export default {
  data() {
    return {
@@ -203,21 +205,8 @@ export default {
      )
    },
    tree() {
-      this.loading = true
-      groupTree({
-        name: '',
-        pid: '0',
-        level: 0,
-        type: 'group',
-        children: [],
-        sort: 'type desc,name asc'
-      })
-        .then((res) => {
-          this.tData = res.data
-        })
-        .finally(() => {
-          this.loading = false
-        })
+      this.tData = getCacheTree('dataset-tree')
+      formatDatasetTreeFolder(this.tData)
    },
    nodeClick({ id, label }) {
      this.selectDatasets = [
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -111,8 +111,8 @@
              class="no-tdata-new"
              @click="() => clickAdd()"
            >{{
-              $t('deDataset.create')
-            }}</span>
+                $t('deDataset.create')
+              }}</span>
          </div>
          <el-tree
            v-else
@@ -134,7 +134,7 @@
            >
              <span style="display: flex; flex: 1; width: 0">
                <span>
-                  <svg-icon icon-class="scene" />
+                  <svg-icon icon-class="scene"/>
                </span>
                <span
                  style="
@@ -242,15 +242,15 @@
                      class="de-card-dropdown"
                    >
                      <el-dropdown-item command="rename">
-                        <svg-icon icon-class="de-ds-rename" />
+                        <svg-icon icon-class="de-ds-rename"/>
                        {{ $t('dataset.rename') }}
                      </el-dropdown-item>
                      <el-dropdown-item command="move">
-                        <svg-icon icon-class="de-ds-move" />
+                        <svg-icon icon-class="de-ds-move"/>
                        {{ $t('dataset.move_to') }}
                      </el-dropdown-item>
                      <el-dropdown-item command="delete">
-                        <svg-icon icon-class="de-ds-trash" />
+                        <svg-icon icon-class="de-ds-trash"/>
                        {{ $t('dataset.delete') }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
@@ -353,15 +353,15 @@
                      class="de-card-dropdown"
                    >
                      <el-dropdown-item command="editTable">
-                        <svg-icon icon-class="de-ds-rename" />
+                        <svg-icon icon-class="de-ds-rename"/>
                        {{ $t('dataset.rename') }}
                      </el-dropdown-item>
                      <el-dropdown-item command="moveDs">
-                        <svg-icon icon-class="de-ds-move" />
+                        <svg-icon icon-class="de-ds-move"/>
                        {{ $t('dataset.move_to') }}
                      </el-dropdown-item>
                      <el-dropdown-item command="deleteTable">
-                        <svg-icon icon-class="de-ds-trash" />
+                        <svg-icon icon-class="de-ds-trash"/>
                        {{ $t('dataset.delete') }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
@@ -405,7 +405,8 @@
          <deBtn
            secondary
            @click="close()"
-          >{{ $t('dataset.cancel') }}</deBtn>
+          >{{ $t('dataset.cancel') }}
+          </deBtn>
          <deBtn
            type="primary"
            @click="saveGroup(groupForm)"
@@ -433,7 +434,7 @@
          :label="$t('dataset.name')"
          prop="name"
        >
-          <el-input v-model="tableForm.name" />
+          <el-input v-model="tableForm.name"/>
        </el-form-item>
      </el-form>
      <div
@@ -444,8 +445,9 @@
          secondary
          @click="closeTable()"
        >{{
-          $t('dataset.cancel')
-        }}</deBtn>
+            $t('dataset.cancel')
+          }}
+        </deBtn>
        <deBtn
          type="primary"
          @click="saveTable(tableForm)"
@@ -467,8 +469,8 @@
          :title="moveDialogTitle"
          class="text-overflow"
        >{{
-          moveDialogTitle
-        }}</span>
+            moveDialogTitle
+          }}</span>
        {{ $t('dataset.m2') }}
      </template>
      <group-move-selector
@@ -481,8 +483,9 @@
          secondary
          @click="closeMoveGroup()"
        >{{
-          $t('dataset.cancel')
-        }}</deBtn>
+            $t('dataset.cancel')
+          }}
+        </deBtn>
        <deBtn
          :disabled="groupMoveConfirmDisabled"
          type="primary"
@@ -505,8 +508,8 @@
          :title="moveDialogTitle"
          class="text-overflow"
        >{{
-          moveDialogTitle
-        }}</span>
+            moveDialogTitle
+          }}</span>
        {{ $t('dataset.m2') }}
      </template>
      <group-move-selector
@@ -518,8 +521,9 @@
          secondary
          @click="closeMoveDs()"
        >{{
-          $t('dataset.cancel')
-        }}</deBtn>
+            $t('dataset.cancel')
+          }}
+        </deBtn>
        <deBtn
          :disabled="dsMoveConfirmDisabled"
          type="primary"
@@ -530,21 +534,12 @@
    </el-drawer>

    <!-- 新增数据集文件夹 -->
-    <CreatDsGroup ref="CreatDsGroup" />
+    <CreatDsGroup ref="CreatDsGroup"/>
  </el-col>
 </template>

 <script>
-import {
-  loadTable,
-  getScene,
-  addGroup,
-  delGroup,
-  delTable,
-  post,
-  isKettleRunning,
-  alter
-} from '@/api/dataset/dataset'
+import { addGroup, alter, delGroup, delTable, getScene, isKettleRunning, loadTable, post } from '@/api/dataset/dataset'
 import { getDatasetRelationship } from '@/api/chart/chart.js'

 import msgContent from '@/views/system/datasource/MsgContent.vue'
@@ -555,6 +550,7 @@ import { engineMode } from '@/api/system/engine'
 import _ from 'lodash'
 import msgCfm from '@/components/msgCfm/index'
 import { checkPermission } from '@/utils/permission'
+import { updateCacheTree } from '@/components/canvas/utils/utils'

 export default {
  name: 'Group',
@@ -688,34 +684,49 @@ export default {
    })
  },
  mounted() {
-    const { id, name } = this.$route.params
-    this.treeLoading = true
-    queryAuthModel({ modelType: 'dataset' }, true)
-      .then((res) => {
-        localStorage.setItem('dataset-tree', JSON.stringify(res.data))
-        this.tData = res.data || []
-        this.$nextTick(() => {
-          this.$refs.datasetTreeRef?.filter(this.filterText)
-          if (id && name.includes(this.filterText)) {
-            this.dfsTableData(this.tData, id)
-          } else {
-            const currentNodeId = sessionStorage.getItem('dataset-current-node')
-            if (currentNodeId) {
-              sessionStorage.setItem('dataset-current-node', '')
-              this.dfsTableData(this.tData, currentNodeId)
-            }
-          }
-        })
-      })
-      .finally(() => {
-        this.treeLoading = false
-      })
-    this.refresh()
+    this.init(true)
  },
  beforeDestroy() {
    sessionStorage.setItem('dataset-current-node', this.currentNodeId)
  },
  methods: {
+    init(cache = true) {
+      const { id, name } = this.$route.params
+      const modelInfo = localStorage.getItem('dataset-tree')
+      const userCache = modelInfo && cache
+      if (userCache) {
+        this.tData = JSON.parse(modelInfo)
+        this.queryAfter(id)
+      } else {
+        this.treeLoading = true
+      }
+      queryAuthModel({ modelType: 'dataset' }, !userCache)
+        .then((res) => {
+          localStorage.setItem('dataset-tree', JSON.stringify(res.data))
+          if (!userCache) {
+            this.tData = res.data || []
+            this.queryAfter(id)
+          }
+        })
+        .finally(() => {
+          this.treeLoading = false
+        })
+      this.refresh()
+    },
+    queryAfter(id) {
+      this.$nextTick(() => {
+        this.$refs.datasetTreeRef?.filter(this.filterText)
+        if (id && name.includes(this.filterText)) {
+          this.dfsTableData(this.tData, id)
+        } else {
+          const currentNodeId = sessionStorage.getItem('dataset-current-node')
+          if (currentNodeId) {
+            sessionStorage.setItem('dataset-current-node', '')
+            this.dfsTableData(this.tData, currentNodeId)
+          }
+        }
+      })
+    },
    getDatasetRelationship({ queryType, label, id }) {
      return getDatasetRelationship(id).then((res) => {
        const arr = res.data ? [res.data] : []
@@ -852,7 +863,8 @@ export default {
            this.close()
            this.openMessageSuccess('dataset.save_success')
            this.expandedArray.push(group.pid)
-            this.treeNode()
+            const opt = group.id ? 'rename' : 'new'
+            updateCacheTree(opt, 'dataset-tree', res.data, this.tData)
          })
        } else {
          return false
@@ -872,7 +884,9 @@ export default {
            this.openMessageSuccess('dataset.save_success')
            _this.expandedArray.push(table.sceneId)
            _this.$refs.datasetTreeRef.setCurrentKey(table.id)
-            _this.treeNode()
+            const renameNode = { id: table.id, name: table.name, label: table.name }
+            updateCacheTree('rename', 'dataset-tree', renameNode, this.tData)
+            ('rename', 'dataset-tree', response.data, this.tData)
            this.$emit('switchComponent', { name: '' })
          })
        } else {
@@ -894,11 +908,12 @@ export default {
        .then(() => {
          delGroup(data.id).then((response) => {
            this.openMessageSuccess('dataset.delete_success')
-            this.treeNode()
+            updateCacheTree('delete', 'dataset-tree', data.id, this.tData)
            this.$emit('switchComponent', { name: '' })
          })
        })
-        .catch(() => {})
+        .catch(() => {
+        })
    },

    async deleteTable(data) {
@@ -916,7 +931,7 @@ export default {
        cb: () => {
          delTable(data.id).then((response) => {
            this.openMessageSuccess('dataset.delete_success')
-            this.treeNode()
+            updateCacheTree('delete', 'dataset-tree', data.id, this.tData)
            this.$emit('switchComponent', { name: '' })
            this.$store.dispatch('dataset/setTable', new Date().getTime())
          })
@@ -1108,7 +1123,7 @@ export default {
      addGroup(this.groupForm).then((res) => {
        this.openMessageSuccess('dept.move_success')
        this.closeMoveGroup()
-        this.treeNode()
+        updateCacheTree('move', 'dataset-tree', res.data, this.tData)
      })
    },
    targetGroup(val) {
@@ -1133,12 +1148,14 @@ export default {
    },
    saveMoveDs() {
      const newSceneId = this.tDs.id
+      const nodeId = this.dsForm.id
      this.dsForm.sceneId = newSceneId
      this.dsForm.isRename = true
      alter(this.dsForm).then((res) => {
        this.closeMoveDs()
        this.expandedArray.push(newSceneId)
-        this.treeNode()
+        const moveNode = { id: nodeId, pid: newSceneId }
+        updateCacheTree('move', 'dataset-tree', moveNode, this.tData)
        this.openMessageSuccess('移动成功')
      })
    },
@@ -1213,6 +1230,7 @@ export default {

 .custom-tree-container {
  margin-top: 10px;
+
  .no-tdata {
    text-align: center;
    margin-top: 80px;
@@ -1220,6 +1238,7 @@ export default {
    font-size: 14px;
    color: var(--deTextSecondary, #646a73);
    font-weight: 400;
+
    .no-tdata-new {
      cursor: pointer;
      color: var(--primary, #3370ff);
@@ -1273,6 +1292,7 @@ export default {
  width: 100%;
  display: flex;
 }
+
 .scene-title-name {
  width: 100%;
  overflow: hidden;
@@ -1280,9 +1300,11 @@ export default {
  white-space: nowrap;
  text-overflow: ellipsis;
 }
+
 .father .child {
  visibility: hidden;
 }
+
 .father:hover .child {
  visibility: visible;
 }
@@ -1299,19 +1321,25 @@ export default {
  padding: 10px 24px;
  height: 100%;
  overflow-y: auto;
+
  .main-area-input {
+    //width: calc(100% - 80px);
+
    .el-input-group__append {
      width: 70px;
      background: transparent;
+
      .el-input__inner {
        padding-left: 12px;
      }
    }
  }
+
  .title-css {
    display: flex;
    justify-content: space-between;
  }
+
  .el-icon-plus {
    width: 28px;
    height: 28px;
@@ -1332,6 +1360,7 @@ export default {
    }
  }
 }
+
 .de-dataset-dropdown {
  .el-dropdown-menu__item {
    height: 40px;
@@ -1342,6 +1371,7 @@ export default {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
+
    .svg-icon {
      margin-right: 8.75px;
      width: 16.5px;
@@ -1358,6 +1388,7 @@ export default {
      color: #fff;
    }
  }
+
  .de-top-border {
    border-top: 1px solid rgba(31, 35, 41, 0.15);
  }
--- a/frontend/src/views/dataset/group/GroupMoveSelector.vue
+++ b/frontend/src/views/dataset/group/GroupMoveSelector.vue
@@ -23,8 +23,8 @@
          :class="treeClass(data, node)"
        >
          <span style="display: flex; flex: 1; width: 0">
-            <span v-if="data.type === 'group'">
-              <svg-icon icon-class="scene" />
+            <span v-if="data.modelInnerType === 'group'">
+              <svg-icon icon-class="scene"/>
            </span>
            <span
              style="
@@ -44,7 +44,7 @@
 </template>

 <script>
-import { groupTree } from '@/api/dataset/dataset'
+import { formatDatasetTreeFolder, getCacheTree } from '@/components/canvas/utils/utils'

 export default {
  name: 'GroupMoveSelector',
@@ -87,22 +87,23 @@ export default {
  },
  methods: {
    tree(group) {
-      groupTree(group).then((res) => {
-        if (this.moveDir) {
-          this.tData = [
-            {
-              id: '0',
-              name: this.$t('dataset.dataset_group'),
-              pid: '0',
-              privileges: 'grant,manage,use',
-              type: 'group',
-              children: res.data
-            }
-          ]
-          return
-        }
-        this.tData = res.data
-      })
+      const treeData = getCacheTree('dataset-tree')
+      formatDatasetTreeFolder(treeData)
+      if (this.moveDir) {
+        this.tData = [
+          {
+            id: '0',
+            name: this.$t('dataset.dataset_group'),
+            pid: '0',
+            privileges: 'grant,manage,use',
+            modelInnerType: 'group',
+            children: treeData
+          }
+        ]
+        return
+      } else {
+        this.tData = treeData
+      }
    },
    filterNode(value, data) {
      if (!value) return true
@@ -143,10 +144,12 @@ export default {
 <style lang="scss">
 .ds-move-tree {
  height: 100%;
+
  .tree {
    height: calc(100% - 115px);
    overflow-y: auto;
  }
+
  .select-tree-keywords {
    color: var(--primary, #3370ff);
  }
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -459,6 +459,7 @@ import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
 import TreeSelector from '@/components/treeSelector'
 import { queryAuthModel } from '@/api/authModel/authModel'
 import msgCfm from '@/components/msgCfm/index'
+import { updateCacheTree } from '@/components/canvas/utils/utils'

 export default {
  name: 'PanelList',
@@ -469,7 +470,7 @@ export default {
      lastActiveDefaultPanelId: null, // 激活的节点 在这个节点下面动态放置子节点
      responseSource: 'panelQuery',
      defaultExpansion: false,
-      clearLocalStorage: ['chart-tree', 'dataset-tree'],
+      clearLocalStorage: ['dataset-tree'],
      historyRequestId: null,
      lastActiveNode: null, // 激活的节点 在这个节点下面动态放置子节点
      lastActiveNodeData: null,
@@ -578,7 +579,7 @@ export default {
        all: this.$t('commons.all'),
        folder: this.$t('commons.folder')
      },
-      initLocalStorage: ['chart', 'dataset']
+      initLocalStorage: ['dataset']
    }
  },
  computed: {
@@ -611,7 +612,6 @@ export default {
    }
  },
  beforeDestroy() {
-    bus.$off('newPanelFromMarket', this.newPanelFromMarket)
  },
  mounted() {
    this.clearCanvas()
@@ -654,18 +654,12 @@ export default {
      })
      this.responseSource = 'panelQuery'
    },
-    newPanelFromMarket(panelInfo) {
-      if (panelInfo) {
-        this.tree()
-        this.edit(panelInfo, null)
-      }
-    },
    initCache() {
      // 初始化时提前加载视图和数据集的缓存
      this.initLocalStorage.forEach((item) => {
        if (!localStorage.getItem(item + '-tree')) {
          queryAuthModel({ modelType: item }, false).then((res) => {
-            localStorage.setItem(item + '-tree', JSON.stringify(res.data))
+            localStorage.setItem(item + '-tree', JSON.stringify(res.data || []))
          })
        }
      })
@@ -673,8 +667,10 @@ export default {
    closeEditPanelDialog(panelInfo) {
      this.editPanel.visible = false
      if (panelInfo) {
-        this.defaultTree(false)
-        this.tree()
+        if (this.editPanel.optType === 'toDefaultPanel') {
+          this.defaultTree(false)
+        }
+        updateCacheTree(this.editPanel.optType, 'panel-main-tree', panelInfo, this.tData)
        if (this.editPanel.optType === 'rename' && panelInfo.id === this.$store.state.panel.panelInfo.id) {
          this.$store.state.panel.panelInfo.name = panelInfo.name
        }
@@ -689,13 +685,7 @@ export default {
            return
          }
          // 复制后的仪表板 放在父节点下面
-          if (this.editPanel.optType === 'copy') {
-            this.lastActiveNode.parent.data.children.push(panelInfo)
-          } else {
-            if (!this.lastActiveNodeData.children) {
-              this.$set(this.lastActiveNodeData, 'children', [])
-            }
-            this.lastActiveNodeData.children.push(panelInfo)
+          if (this.editPanel.optType !== 'copy') {
            this.lastActiveNode.expanded = true
          }
          this.activeNodeAndClick(panelInfo)
@@ -745,6 +735,7 @@ export default {
          this.editPanel = {
            visible: true,
            titlePre: this.$t('panel.to_default'),
+            optType: 'toDefaultPanel',
            panelInfo: {
              id: param.data.id,
              name: param.data.name,
@@ -869,7 +860,7 @@ export default {
              showClose: true
            })
            this.clearCanvas()
-            this.tree()
+            updateCacheTree('delete', 'panel-main-tree', data.id, this.tData)
            this.defaultTree(false)
          })
        }
@@ -906,7 +897,7 @@ export default {
        this.tData = JSON.parse(modelInfo)
      }
      groupTree(this.groupForm, !userCache).then((res) => {
-        localStorage.setItem('panel-main-tree', JSON.stringify(res.data))
+        localStorage.setItem('panel-main-tree', JSON.stringify(res.data || []))
        if (!userCache) {
          this.tData = res.data
        }
@@ -937,7 +928,7 @@ export default {
      defaultTree(requestInfo, false).then((res) => {
        localStorage.setItem('panel-default-tree', JSON.stringify(res.data))
        if (!userCache) {
-          this.defaultData = res.data
+          this.defaultData = res.data || []
          if (showFirst && this.defaultData && this.defaultData.length > 0) {
            this.activeDefaultNodeAndClickOnly(this.defaultData[0].id)
          }
@@ -1054,7 +1045,7 @@ export default {
          _this.$nextTick(() => {
            document.querySelector('.is-current').firstChild.click()
            // 如果是仪表板列表的仪表板 直接进入编辑界面
-            if (panelInfo.nodeType === 'panel') {
+            if (panelInfo.nodeType === 'panel' && this.editPanel.optType !== 'copy') {
              _this.edit(this.lastActiveNodeData, this.lastActiveNode)
            }
          })
@@ -1109,11 +1100,11 @@ export default {
              id: 'panel_list',
              name: _this.$t('panel.panel_list'),
              label: _this.$t('panel.panel_list'),
-              children: res.data
+              children: res.data || []
            }
          ]
        } else {
-          _this.tGroupData = res.data
+          _this.tGroupData = res.data || []
        }
        _this.moveGroup = true
      })
@@ -1126,7 +1117,7 @@ export default {
      this.moveInfo.pid = this.tGroup.id
      this.moveInfo['optType'] = 'move'
      panelUpdate(this.moveInfo).then((response) => {
-        this.tree()
+        updateCacheTree('move', 'panel-main-tree', response.data, this.tData)
        this.closeMoveGroup()
      })
    },
--- a/frontend/src/views/panel/list/editPanel/index.vue
+++ b/frontend/src/views/panel/list/editPanel/index.vue
@@ -240,7 +240,7 @@ export default {
            showClose: true
          })
          this.loading = false
-          this.$emit('closeEditPanelDialog', { id: response.data, name: this.editPanel.panelInfo.name })
+          this.$emit('closeEditPanelDialog', response.data)
        }).catch(() => {
          this.loading = false
        })