From bff29037fe1c09677333373768c4dca4a330a7b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 27 Dec 2024 10:16:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-custom/components/index.vue         | 48 ++++++++-----------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 53ebb09c..07cb48a5 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -308,52 +308,45 @@ const del = (index: null | number) => {
         });
     }
 };
+
 //前置一层 - 1
 const previous_layer = (index: number) => {
-    if (diy_data.value.length > 0) {
-        const old_data = get_diy_index_data(index);
-        // 删除当前位置信息
-        diy_data.value.splice(index, 1);
-        // 将数据插入下一层数据中
-        diy_data.value.splice(index - 1, 0, old_data);
-        set_show_tabs(index - 1);
+    if (diy_data.value.length > 0 && index > 0) {
+        moveItem(index, index - 1);
     }
 }
-
 //后置一层 + 1
 const underlying_layer = (index: number) => {
-    if (diy_data.value.length > 0) {
-        const old_data = get_diy_index_data(index);
-        // 删除当前位置信息
-        diy_data.value.splice(index, 1);
-        // 将数据插入上一层数据中
-        diy_data.value.splice(index + 1, 0, old_data);
-        // 设置对应的位置为显示
-        set_show_tabs(index + 1);
+    if (diy_data.value.length > 0 && index < diy_data.value.length - 1) {
+        moveItem(index, index + 1);
     }
 }
 //组件置顶
 const top_up = (index: number) => {
     if (!isEmpty(diy_data.value[index])) {
-        const old_data = get_diy_index_data(index);
-        // 删除当前位置信息
-        diy_data.value.splice(index, 1);
-        // 将数据插入下一层数据中
-        diy_data.value.splice(0, 0, old_data);
-        set_show_tabs(0);
+        moveItem(index, 0);
     }
 }
-
 //组件置底
 const bottom_up = (index: number) => {
     if (!isEmpty(diy_data.value[index])) {
-        const old_data = get_diy_index_data(index);
         const old_length = diy_data.value.length - 1;
+        moveItem(index, old_length);
+    }
+}
+const moveItem = (index: number, newIndex: number) => {
+    if (index < 0 || index >= diy_data.value.length || newIndex < 0 || newIndex >= diy_data.value.length) {
+        return;
+    }
+    try {
+        const old_data = get_diy_index_data(index);
         // 删除当前位置信息
         diy_data.value.splice(index, 1);
-        // 将数据插入下一层数据中
-        diy_data.value.splice(old_length, 0, old_data);
-        set_show_tabs(old_length);
+        // 将数据插入新位置
+        diy_data.value.splice(newIndex, 0, old_data);
+        set_show_tabs(newIndex);
+    } catch (error) {
+        console.error('Error moving item:', error);
     }
 }
 
@@ -420,6 +413,7 @@ const drag_area_width = computed(() => center_width.value + 'px');
 
 const draggable_container = ref(true);
 let data = reactive<diy_content[]>([]);
+// 拖拽组件高度变化时数据需要重新赋值，避免拖拽不到新高度的区域
 watch(() => center_height.value, () => {
     data = diy_data.value;
     // 从 DOM 中删除组件