diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
index 35f63c43f5..2a3dfd4715 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@@ -187,7 +187,7 @@ const popComponentData = computed(() =>
 )
 
 const baseComponentData = computed(() =>
-  componentData.value.filter(ele => ele.category !== 'hidden' && ele.component !== 'GroupArea')
+  componentData.value.filter(ele => ele?.category !== 'hidden' && ele.component !== 'GroupArea')
 )
 
 const dragOnEnd = ({ oldIndex, newIndex }) => {
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
index 0f2679534c..88c567a8ef 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
@@ -9,7 +9,7 @@ import { storeToRefs } from 'pinia'
 import { computed, toRefs } from 'vue'
 import { ElDivider } from 'element-plus-secondary'
 import eventBus from '@/utils/eventBus'
-import { getCurInfo } from '@/store/modules/data-visualization/common'
+import { componentArraySort, getCurInfo } from '@/store/modules/data-visualization/common'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { XpackComponent } from '@/components/plugin'
 const dvMainStore = dvMainStoreWithOut()
@@ -122,6 +122,7 @@ const upComponent = () => {
   if (curComponent.value && !isGroupArea.value) {
     layerStore.upComponent(curComponent.value.id)
   } else if (areaData.value.components.length) {
+    componentArraySort(areaData.value.components)
     areaData.value.components.forEach(component => {
       layerStore.upComponent(component.id)
     })
@@ -131,7 +132,14 @@ const upComponent = () => {
 }
 
 const downComponent = () => {
-  layerStore.downComponent()
+  if (curComponent.value && !isGroupArea.value) {
+    layerStore.downComponent(curComponent.value.id)
+  } else if (areaData.value.components.length) {
+    componentArraySort(areaData.value.components, 'top')
+    areaData.value.components.forEach(component => {
+      layerStore.downComponent(component.id)
+    })
+  }
   snapshotStore.recordSnapshotCache('downComponent')
   menuOpt('downComponent')
 }
@@ -140,6 +148,7 @@ const topComponent = () => {
   if (curComponent.value && !isGroupArea.value) {
     layerStore.topComponent(curComponent.value.id)
   } else if (areaData.value.components.length) {
+    componentArraySort(areaData.value.components, 'top')
     areaData.value.components.forEach(component => {
       layerStore.topComponent(component.id)
     })
@@ -152,6 +161,7 @@ const bottomComponent = () => {
   if (curComponent.value && !isGroupArea.value) {
     layerStore.bottomComponent(curComponent.value.id)
   } else if (areaData.value.components.length) {
+    componentArraySort(areaData.value.components)
     areaData.value.components.forEach(component => {
       layerStore.bottomComponent(component.id)
     })
@@ -260,7 +270,6 @@ const editQueryCriteria = () => {
         <template v-if="!curComponent['isLock'] && curComponent.category !== 'hidden'">
           <li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">编辑</li>
           <li @click="upComponent">上移一层</li>
-          <li @click="upComponent">上移一层</li>
           <li @click="downComponent">下移一层</li>
           <li @click="topComponent">置于顶层</li>
           <li @click="bottomComponent">置于底层</li>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index 6c69f1e2b3..fceff88857 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -121,7 +121,7 @@ const popComponentData = computed(() =>
 )
 
 const baseComponentData = computed(() =>
-  componentData.value.filter(ele => ele.category !== 'hidden' && ele.component !== 'GroupArea')
+  componentData.value.filter(ele => ele?.category !== 'hidden' && ele.component !== 'GroupArea')
 )
 const canvasStyle = computed(() => {
   let style = {}
diff --git a/core/core-frontend/src/store/modules/data-visualization/common.ts b/core/core-frontend/src/store/modules/data-visualization/common.ts
index b70a2a88ef..e5f5fac811 100644
--- a/core/core-frontend/src/store/modules/data-visualization/common.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/common.ts
@@ -59,3 +59,13 @@ export const getCurInfoById = curComponentId => {
     }
   }
 }
+
+export const componentArraySort = (sortArray, direction = 'down') => {
+  sortArray.sort((a, b) => {
+    // 在 componentData 中找到 a 和 b 的索引位置
+    const indexA = componentData.value.findIndex(item => item.id === a.id)
+    const indexB = componentData.value.findIndex(item => item.id === b.id)
+    // 按照索引位置进行排序
+    return direction === 'down' ? indexB - indexA : indexA - indexB
+  })
+}
diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index 60115bd1a1..215d19f7ca 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -1347,7 +1347,7 @@ export const dvMainStore = defineStore('dataVisualization', {
     },
     removeGroupArea(curComponentData = this.componentData) {
       // 清理临时组件
-      const groupAreaHis = curComponentData.filter(ele => ele.component === 'GroupArea')
+      const groupAreaHis = curComponentData?.filter(ele => ele?.component === 'GroupArea')
       if (groupAreaHis && groupAreaHis.length > 0) {
         groupAreaHis.forEach(ele => {
           this.deleteComponentById(ele.id, curComponentData)