From d5b181858bb587528cbe7f5f26236821b3e68359 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 13 Nov 2024 10:11:02 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix(=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6):?=
 =?UTF-8?q?=20=E5=8F=AF=E4=BB=A5=E8=AE=BE=E7=BD=AE=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E5=86=85=E8=BE=B9=E8=B7=9D=20#12960?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/editor-style/VQueryChartStyle.vue  | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index 074b835942..0943c09357 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -301,6 +301,44 @@ initParams()
                 自定义组件背景
               </el-checkbox>
             </el-form-item>
+            <el-row style="padding-left: 20px" :gutter="8">
+              <el-col :span="12">
+                <el-form-item
+                  :label="t('visualization.inner_padding')"
+                  class="form-item w100"
+                  :class="'form-item-' + themes"
+                >
+                  <el-input-number
+                    style="width: 100%"
+                    :effect="themes"
+                    controls-position="right"
+                    size="middle"
+                    :min="0"
+                    :max="100"
+                    v-model="commonBackgroundPop.innerPadding"
+                    @change="onBackgroundChange"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  :label="t('visualization.board_radio')"
+                  class="form-item w100"
+                  :class="'form-item-' + themes"
+                >
+                  <el-input-number
+                    style="width: 100%"
+                    :effect="themes"
+                    controls-position="right"
+                    size="middle"
+                    :min="0"
+                    :max="100"
+                    v-model="commonBackgroundPop.borderRadius"
+                    @change="onBackgroundChange"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
             <el-form-item
               style="padding-left: 20px"
               class="form-item margin-bottom-8"

From 02605e56d34e0173d867eb557a33ef32c4a1c006 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 13 Nov 2024 10:17:18 +0800
Subject: [PATCH 2/5] =?UTF-8?q?fix(=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6):?=
 =?UTF-8?q?=20=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E6=A1=86=E5=AE=BD=E5=BA=A6=E9=9C=80=E8=A6=81=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20#12853?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/custom-component/v-query/Select.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/core/core-frontend/src/custom-component/v-query/Select.vue b/core/core-frontend/src/custom-component/v-query/Select.vue
index 0e474a85b4..548fddda18 100644
--- a/core/core-frontend/src/custom-component/v-query/Select.vue
+++ b/core/core-frontend/src/custom-component/v-query/Select.vue
@@ -640,6 +640,9 @@ defineExpose({
 <style lang="less">
 .filter-select-popper_class {
   --ed-fill-color-light: #f5f7fa47;
+  .ed-vl__window.ed-select-dropdown__list {
+    min-width: 200px;
+  }
   .ed-select-dropdown__option-item {
     .ed-checkbox__label:hover {
       color: #1f2329;

From cca8db734d2a2e22084118810c9d314d65fc4231 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 13 Nov 2024 11:05:28 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat(=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6):?=
 =?UTF-8?q?=20=E6=9F=A5=E8=AF=A2=E6=9D=A1=E4=BB=B6=E7=9A=84=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6=E5=8F=AF=E5=8D=95=E7=8B=AC=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-component/v-query/NumberInput.vue  | 14 +++++++-
 .../src/custom-component/v-query/Select.vue   | 14 +++++++-
 .../custom-component/v-query/TextSearch.vue   | 16 +++++++--
 .../src/custom-component/v-query/Time.vue     | 14 ++++++--
 .../src/custom-component/v-query/Tree.vue     | 13 ++++++-
 core/core-frontend/src/locales/zh-CN.ts       |  4 ++-
 .../editor/editor-style/VQueryChartStyle.vue  | 36 +++++++++++--------
 7 files changed, 88 insertions(+), 23 deletions(-)

diff --git a/core/core-frontend/src/custom-component/v-query/NumberInput.vue b/core/core-frontend/src/custom-component/v-query/NumberInput.vue
index 164dd0cdf3..58b79a3a66 100644
--- a/core/core-frontend/src/custom-component/v-query/NumberInput.vue
+++ b/core/core-frontend/src/custom-component/v-query/NumberInput.vue
@@ -5,6 +5,7 @@ interface SelectConfig {
   defaultValueCheck: boolean
   defaultNumValueEnd: number
   numValueEnd: number
+  queryConditionWidth: number
   numValueStart: number
   defaultNumValueStart: number
   placeholder: string
@@ -24,6 +25,7 @@ const props = defineProps({
     default: () => {
       return {
         id: '',
+        queryConditionWidth: 0,
         defaultNumValueEnd: '',
         defaultNumValueStart: '',
         numValueEnd: '',
@@ -55,8 +57,18 @@ onBeforeMount(() => {
 const queryConditionWidth = inject('com-width', Function, true)
 const customStyle = inject<{ background: string }>('$custom-style-filter')
 const isConfirmSearch = inject('is-confirm-search', Function, true)
+
+const getCustomWidth = () => {
+  if (placeholder?.value?.placeholderShow) {
+    if (props.config.queryConditionWidth === undefined) {
+      return queryConditionWidth()
+    }
+    return props.config.queryConditionWidth
+  }
+  return 227
+}
 const selectStyle = computed(() => {
-  return { width: queryConditionWidth() + 'px' }
+  return { width: getCustomWidth() + 'px' }
 })
 const handleValueChange = () => {
   if (!props.isConfig) {
diff --git a/core/core-frontend/src/custom-component/v-query/Select.vue b/core/core-frontend/src/custom-component/v-query/Select.vue
index 548fddda18..a9fcb863fe 100644
--- a/core/core-frontend/src/custom-component/v-query/Select.vue
+++ b/core/core-frontend/src/custom-component/v-query/Select.vue
@@ -26,6 +26,7 @@ interface SelectConfig {
   displayType: string
   showEmpty: boolean
   id: string
+  queryConditionWidth: number
   placeholder: string
   resultMode: number
   displayId: string
@@ -55,6 +56,7 @@ const props = defineProps({
     default: () => {
       return {
         selectValue: '',
+        queryConditionWidth: 0,
         resultMode: 0,
         defaultValue: '',
         displayType: '',
@@ -561,8 +563,18 @@ const init = () => {
   debounceOptions(optionValueSource)
 }
 
+const getCustomWidth = () => {
+  if (placeholder?.value?.placeholderShow) {
+    if (props.config.queryConditionWidth === undefined) {
+      return queryConditionWidth()
+    }
+    return props.config.queryConditionWidth
+  }
+  return 227
+}
+
 const selectStyle = computed(() => {
-  return props.isConfig ? {} : { width: queryConditionWidth() + 'px' }
+  return props.isConfig ? {} : { width: getCustomWidth() + 'px' }
 })
 
 const mult = ref()
diff --git a/core/core-frontend/src/custom-component/v-query/TextSearch.vue b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
index b305a3a549..9a98fbf4df 100644
--- a/core/core-frontend/src/custom-component/v-query/TextSearch.vue
+++ b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
@@ -7,6 +7,7 @@ interface SelectConfig {
   id: string
   conditionValueOperatorF: string
   conditionValueF: string
+  queryConditionWidth: string
   hideConditionSwitching: boolean
   conditionValueOperatorS: string
   conditionValueS: string
@@ -46,6 +47,7 @@ const props = defineProps({
       return {
         id: '',
         conditionType: 0,
+        queryConditionWidth: 0,
         conditionValueOperatorF: 'eq',
         conditionValueF: '',
         conditionValueOperatorS: 'like',
@@ -82,8 +84,18 @@ onBeforeMount(() => {
 const queryConditionWidth = inject('com-width', Function, true)
 const customStyle = inject<{ background: string }>('$custom-style-filter')
 const isConfirmSearch = inject('is-confirm-search', Function, true)
+
+const getCustomWidth = () => {
+  if (placeholder?.value?.placeholderShow) {
+    if (props.config.queryConditionWidth === undefined) {
+      return queryConditionWidth()
+    }
+    return props.config.queryConditionWidth
+  }
+  return 227
+}
 const selectStyle = computed(() => {
-  return { width: queryConditionWidth() + 'px' }
+  return { width: getCustomWidth() + 'px' }
 })
 const handleValueChange = () => {
   if (!props.isConfig) {
@@ -94,7 +106,7 @@ const handleValueChange = () => {
   }
 }
 const lineWidth = computed(() => {
-  return { width: queryConditionWidth() - 15 + 'px' }
+  return { width: getCustomWidth() - 15 + 'px' }
 })
 
 const handleInnerMouseDown = e => {
diff --git a/core/core-frontend/src/custom-component/v-query/Time.vue b/core/core-frontend/src/custom-component/v-query/Time.vue
index 3d826e11ab..5db223c6e0 100644
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@@ -22,6 +22,7 @@ interface SelectConfig {
   defaultValue: any
   defaultValueCheck: boolean
   id: string
+  queryConditionWidth: number
   displayType: string
   timeGranularity: DatePickType
   timeGranularityMultiple: DatePickType
@@ -38,6 +39,7 @@ const props = defineProps({
       return {
         selectValue: '',
         defaultValue: '',
+        queryConditionWidth: 0,
         defaultValueCheck: false,
         displayType: '1',
         timeGranularity: 'date',
@@ -167,13 +169,21 @@ const init = () => {
 }
 
 const queryConditionWidth = inject('com-width', Function, true)
+const getCustomWidth = () => {
+  if (placeholder?.value?.placeholderShow) {
+    if (props.config.queryConditionWidth === undefined) {
+      return queryConditionWidth()
+    }
+    return props.config.queryConditionWidth
+  }
+  return 227
+}
 const isConfirmSearch = inject('is-confirm-search', Function, true)
 const selectStyle = computed(() => {
   return props.isConfig
     ? {}
     : {
-        width:
-          (multiple.value ? queryConditionWidth() * 2 : queryConditionWidth()) + 'px !important'
+        width: (multiple.value ? getCustomWidth() * 2 : getCustomWidth()) + 'px !important'
       }
 })
 
diff --git a/core/core-frontend/src/custom-component/v-query/Tree.vue b/core/core-frontend/src/custom-component/v-query/Tree.vue
index 7e1268cf29..1cca661431 100644
--- a/core/core-frontend/src/custom-component/v-query/Tree.vue
+++ b/core/core-frontend/src/custom-component/v-query/Tree.vue
@@ -17,6 +17,7 @@ interface SelectConfig {
   selectValue: any
   defaultMapValue: any
   defaultValue: any
+  queryConditionWidth: number
   resultMode: number
   checkedFieldsMap: object
   displayType: string
@@ -41,6 +42,7 @@ const props = defineProps({
       return {
         selectValue: '',
         defaultValue: '',
+        queryConditionWidth: 0,
         displayType: '',
         resultMode: 0,
         defaultValueCheck: false,
@@ -227,8 +229,17 @@ watch(
 )
 const fakeValue = ''
 const treeValue = ref()
+const getCustomWidth = () => {
+  if (placeholder?.value?.placeholderShow) {
+    if (props.config.queryConditionWidth === undefined) {
+      return queryConditionWidth()
+    }
+    return props.config.queryConditionWidth
+  }
+  return 227
+}
 const selectStyle = computed(() => {
-  return props.isConfig ? {} : { width: queryConditionWidth() + 'px' }
+  return props.isConfig ? {} : { width: getCustomWidth() + 'px' }
 })
 </script>
 
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 1154c1bf64..c23aeb2849 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -2643,7 +2643,9 @@ export default {
     time_selection: '时间选择',
     select_a_field: '层级字段不能为空,请选择字段!',
     add_level: '添加层级',
-    tree_query_field: '下拉树查询字段'
+    tree_query_field: '下拉树查询字段',
+    query_condition_width: '查询条件宽度',
+    custom_condition_style: '自定义条件样式'
   },
   panel: {
     column_name: '字段名称'
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index 0943c09357..485e5ff155 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -113,7 +113,8 @@ watch(
 
 const currentPlaceholder = ref()
 const currentSearch = ref({
-  placeholder: ''
+  placeholder: '',
+  queryConditionWidth: 227
 })
 
 const handleCurrentPlaceholder = val => {
@@ -125,6 +126,10 @@ const handleCurrentPlaceholder = val => {
   if (obj.placeholder === undefined) {
     obj.placeholder = ''
   }
+
+  if (obj.queryConditionWidth === undefined) {
+    obj.queryConditionWidth = 227
+  }
   currentSearch.value = obj
   snapshotStore.recordSnapshotCacheToMobile('propValue')
 }
@@ -463,7 +468,7 @@ initParams()
                 @change="handleCurrentPlaceholderCustomChange"
                 v-model="chart.customStyle.component.placeholderShow"
               >
-                提示词
+                {{ t('v_query.custom_condition_style') }}
               </el-checkbox>
             </el-form-item>
             <el-form-item
@@ -521,6 +526,20 @@ initParams()
                 v-model.lazy="currentSearch.placeholder"
               />
             </el-form-item>
+            <el-form-item
+              :label="t('v_query.query_condition_width')"
+              class="form-item"
+              style="padding-left: 20px"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                :effect="themes"
+                controls-position="right"
+                @change="handleCurrentPlaceholderChange"
+                :disabled="!chart.customStyle.component.placeholderShow || !currentPlaceholder"
+                v-model.lazy="currentSearch.queryConditionWidth"
+              />
+            </el-form-item>
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
                 :effect="themes"
@@ -544,19 +563,6 @@ initParams()
                 :predefine="predefineColors"
               />
             </el-form-item>
-            <el-form-item
-              :effect="themes"
-              class="form-item"
-              label="查询条件宽度"
-              :class="'form-item-' + themes"
-            >
-              <el-input-number
-                v-model="chart.customStyle.component.queryConditionWidth"
-                :min="0"
-                :effect="themes"
-                controls-position="right"
-              />
-            </el-form-item>
             <el-form-item
               :effect="themes"
               class="form-item"

From 3d8efba3353634a1dcce79f5ccaf08853b6f744c Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 13 Nov 2024 11:47:08 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E9=9B=86):=20?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=9B=86=E9=A2=84=E8=A7=88=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/views/visualized/data/dataset/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index 1c8178f604..c5fd6871ee 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -1039,7 +1039,7 @@ const getMenuList = (val: boolean) => {
                     v-for="(column, index) in columns"
                     :prop="column.dataKey"
                     :label="column.title"
-                    :width="columns.length - 1 === index ? 150 : 'auto'"
+                    :min-width="150"
                     :fixed="columns.length - 1 === index ? 'right' : false"
                   >
                     <template #header>

From 0d068b1b799b597c809a6e0e90d1b969d256b32a Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 13 Nov 2024 14:00:15 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E8=B5=84=E6=BA=90=E6=A0=91=E6=8B=96=E5=8A=A8=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E8=B5=84=E6=BA=90=E5=90=8E=EF=BC=8C=E4=B8=8D=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=96=B0=E9=80=89=E6=8B=A9=E5=85=B6?=
 =?UTF-8?q?=E4=BB=96=E6=8E=92=E5=BA=8F=E6=96=B9=E5=BC=8F=EF=BC=8C=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E7=9A=84=E7=A7=BB=E5=8A=A8=E6=98=BE=E7=A4=BA=E4=B8=8D?=
 =?UTF-8?q?=E6=AD=A3=E7=A1=AE=EF=BC=8C=E5=88=B7=E6=96=B0=E6=98=AF=E6=AD=A3?=
 =?UTF-8?q?=E5=B8=B8=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/utils/treeDraggble.ts  | 20 +++++++++++--------
 .../src/utils/treeDraggbleChart.ts            | 18 ++++++++++-------
 .../views/visualized/data/dataset/index.vue   | 11 +++++-----
 .../visualized/data/datasource/index.vue      | 11 +++++-----
 4 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/core/core-frontend/src/utils/treeDraggble.ts b/core/core-frontend/src/utils/treeDraggble.ts
index 04fc79d13b..244bd08574 100644
--- a/core/core-frontend/src/utils/treeDraggble.ts
+++ b/core/core-frontend/src/utils/treeDraggble.ts
@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash-es'
 
-const treeDraggble = (state, key, req, type) => {
+const treeDraggble = (state, key, req, type, originResourceTree) => {
   let dragNodeParentId = ''
   let dragNodeId = ''
   let dragNodeIndex = 0
@@ -106,14 +106,18 @@ const treeDraggble = (state, key, req, type) => {
       dfsTreeNodeBack(state[key], '0', params)
     }
 
-    req(params).catch(() => {
-      if (dragNodeParentId === '0') {
-        state[key].splice(dragNodeIndex, 0, draggingNode.data)
-        return
-      }
+    req(params)
+      .then(() => {
+        originResourceTree.value = cloneDeep(state[key])
+      })
+      .catch(() => {
+        if (dragNodeParentId === '0') {
+          state[key].splice(dragNodeIndex, 0, draggingNode.data)
+          return
+        }
 
-      dfsTreeNodeReset(state[key], draggingNode.data)
-    })
+        dfsTreeNodeReset(state[key], draggingNode.data)
+      })
   }
 
   return {
diff --git a/core/core-frontend/src/utils/treeDraggbleChart.ts b/core/core-frontend/src/utils/treeDraggbleChart.ts
index e54692c3f1..2f113ac280 100644
--- a/core/core-frontend/src/utils/treeDraggbleChart.ts
+++ b/core/core-frontend/src/utils/treeDraggbleChart.ts
@@ -114,14 +114,18 @@ const treeDraggbleChart = (state, key, type) => {
       dfsTreeNodeBack(state[key], '0', params)
     }
 
-    moveResource(params).catch(() => {
-      if (dragNodeParentId === '0') {
-        state[key].splice(dragNodeIndex, 0, draggingNode.data)
-        return
-      }
+    moveResource(params)
+      .then(() => {
+        state.originResourceTree = cloneDeep(state[key])
+      })
+      .catch(() => {
+        if (dragNodeParentId === '0') {
+          state[key].splice(dragNodeIndex, 0, draggingNode.data)
+          return
+        }
 
-      dfsTreeNodeReset(state[key], draggingNode.data)
-    })
+        dfsTreeNodeReset(state[key], draggingNode.data)
+      })
   }
 
   return {
diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index c5fd6871ee..41f4575566 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -152,10 +152,10 @@ const resourceOptFinish = param => {
   }
 }
 
-let originResourceTree = []
+const originResourceTree = shallowRef([])
 
 const sortTypeChange = sortType => {
-  state.datasetTree = treeSort(originResourceTree, sortType)
+  state.datasetTree = treeSort(originResourceTree.value, sortType)
   state.curSortType = sortType
   wsCache.set('TreeSort-dataset', state.curSortType)
 }
@@ -253,7 +253,8 @@ const { handleDrop, allowDrop, handleDragStart } = treeDraggble(
   state,
   'datasetTree',
   moveDatasetTree,
-  'dataset'
+  'dataset',
+  originResourceTree
 )
 
 const generateColumns = (arr: Field[]) =>
@@ -293,12 +294,12 @@ const getData = () => {
       if (nodeData.length && nodeData[0]['id'] === '0' && nodeData[0]['name'] === 'root') {
         rootManage.value = nodeData[0]['weight'] >= 7
         state.datasetTree = nodeData[0]['children'] || []
-        originResourceTree = cloneDeep(unref(state.datasetTree))
+        originResourceTree.value = cloneDeep(unref(state.datasetTree))
         sortTypeChange(curSortType)
         return
       }
       state.datasetTree = nodeData
-      originResourceTree = cloneDeep(unref(state.datasetTree))
+      originResourceTree.value = cloneDeep(unref(state.datasetTree))
       sortTypeChange(curSortType)
     })
     .finally(() => {
diff --git a/core/core-frontend/src/views/visualized/data/datasource/index.vue b/core/core-frontend/src/views/visualized/data/datasource/index.vue
index 958bb3f08b..6eda7fa541 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@@ -210,10 +210,10 @@ const selectDataset = row => {
     })
 }
 
-let originResourceTree = []
+const originResourceTree = shallowRef([])
 
 const sortTypeChange = sortType => {
-  state.datasourceTree = treeSort(originResourceTree, sortType)
+  state.datasourceTree = treeSort(originResourceTree.value, sortType)
   state.curSortType = sortType
   wsCache.set('TreeSort-datasource', state.curSortType)
 }
@@ -481,11 +481,11 @@ const listDs = () => {
       if (nodeData.length && nodeData[0]['id'] === '0' && nodeData[0]['name'] === 'root') {
         rootManage.value = nodeData[0]['weight'] >= 7
         state.datasourceTree = nodeData[0]['children'] || []
-        originResourceTree = cloneDeep(unref(state.datasourceTree))
+        originResourceTree.value = cloneDeep(unref(state.datasourceTree))
         sortTypeChange(curSortType)
         return
       }
-      originResourceTree = cloneDeep(unref(state.datasourceTree))
+      originResourceTree.value = cloneDeep(unref(state.datasourceTree))
       state.datasourceTree = nodeData
       sortTypeChange(curSortType)
     })
@@ -754,7 +754,8 @@ const { handleDrop, allowDrop, handleDragStart } = treeDraggble(
   state,
   'datasourceTree',
   move,
-  'datasource'
+  'datasource',
+  originResourceTree
 )
 
 const handleCopy = async data => {