修改移除组件后再拖拽导致定位错误的bug

修改移除组件后再拖拽导致定位错误的bug

src/store/modules/template.js

@@ -266,36 +266,9 @@ const mutations = {
         //pageStatus==2 分类页
         if (state.pageStatus == 2) {}
         //pageStatus==3 列表页
-        if (state.pageStatus == 3) {
-            const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
-            //判断组件类型 1=新闻 2=广告
-            //1=新闻 需要设置导航id
-            if (state.editComponentType == 1) {
-                state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
-                state.componentViewData.pageSize = state.editComponentSize;
-                state.componentViewData.pageSizeImg = state.editComponentSizeImg;
-            }
-            //2=设置广告名称
-            if (state.editComponentType == 2) {
-                state.componentViewData.adName = state.pageData.list[targetModuleIndex].content.ad.name;
-                state.componentViewData.price = state.pageData.list[targetModuleIndex].content.ad.price; 
-            }
-        }
+        if (state.pageStatus == 3) {}
         //pageStatus==4 详情页
-        if (state.pageStatus == 4) {
-            const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
-            //判断组件类型 1=新闻 2=广告
-            //1=新闻 需要设置导航id
-            if (state.editComponentType == 1) {
-                state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
-                state.componentViewData.pageSize = state.editComponentSize;
-            }
-            //2=设置广告名称
-            if (state.editComponentType == 2) {
-                state.componentViewData.adName = state.pageData.article[targetModuleIndex].content.ad.name;
-                state.componentViewData.price = state.pageData.article[targetModuleIndex].content.ad.price; 
-            }
-        }
+        if (state.pageStatus == 4) {}
         //pageStatus==5 搜索页
         if (state.pageStatus == 5) {}
         //pageStatus==6 底部列表页
@@ -331,33 +304,11 @@ const mutations = {
                 Message.error('最多只能添加10个通栏！');
                 return;
             } else {
-                console.log(data.jsonData)
-                //判断当前板块是否含有广告位
-                // if(data.jsonData.ad){
-                //     MessageBox.confirm('您正在添加含有广告位的通栏，此通栏添加后不可删除，但是可以通过：“广告管理 -> 广告位管理” 进行编辑，确定吗？', '注意', {
-                //         confirmButtonText: '确定',
-                //         cancelButtonText: '取消',
-                //     }).then(() => {
-                //         this.commit('template/pushModule', data);
-                //     }).catch(() => {
-                //         Message.success('已取消添加通栏！');
-                //     });
-                // }else{
-                //     this.commit('template/pushModule', data);
-                // }
                 this.commit('template/pushModule', data);
             }
         }
         //pageStatus==2 分类页 class
-        if (state.pageStatus == 2) { 
-            if (state.pageData.class.length >= 10) {
-                Message.error('最多只能添加10个通栏！');
-                return;
-            } else {
-                console.log(data.jsonData)
-                this.commit('template/pushModule', data);
-            }
-        }
+        if (state.pageStatus == 2) { }
         //pageStatus==3 列表页 list
         if (state.pageStatus == 3) { }
         //pageStatus==4 详情页 article
@@ -437,183 +388,16 @@ const mutations = {
                 try {
                     state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "block";
                 } catch { 
-
+                    console.log("没有找到占位符");
                 }
             }
         }
         //pageStatus==2 分类页 class
-        if (state.pageStatus == 2) { 
-
-            if (data.source == "click") {
-                const currentTimestamp = Date.now();
-                let id = currentTimestamp;
-                const maxY = Math.max(...state.pageData.class.map(item => item.y), 0);
-                console.log(data);
-                let dataSort = state.pageData.class.length;
-                state.pageData.class.push({
-                    i: id,
-                    x: 0,
-                    y: maxY + 1,
-                    w: 12,
-                    h: data.h,
-                    type: data.type,
-                    content: data.jsonData,
-                    dataSort: dataSort,
-                });
-            }
-
-            if (data.source == "drag") {
-                console.log("通过拖拽添加一个板块");
-                const currentTimestamp = Date.now();
-                let id = currentTimestamp;
-                const maxY = Math.max(...state.pageData.class.map(item => item.y), 0);
-                console.log(data);
-                let dataSort = state.pageData.class.length;
-                state.pageData.class.push({
-                    i: id,
-                    x: 0,
-                    y: data.y,
-                    w: 12,
-                    h: data.h,
-                    type: data.type,
-                    content: data.jsonData,
-                    dataSort: dataSort,
-                });
-                state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
-                try {
-                    state.gridlayoutObj.$children[state.pageData.class.length].$refs.item.style.display = "block";
-                }catch{ 
-
-                }
-            }
-
-        }
+        if (state.pageStatus == 2) { }
         //pageStatus==3 列表页 list
-        if (state.pageStatus == 3) {
-            //判断是拖拽的还是点击添加进来的 click=点击
-            if (data.source == "click") {
-                console.log("通过点击添加一个板块");
-                //通过时间戳生成id
-                const currentTimestamp = Date.now();
-                let id = currentTimestamp;
-                //data.type 组件名称 data.h 模块高度 
-                //计算当前布局的最大 y 值
-                const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
-                console.log(data);
-                //设置数据在构建json中的位置
-                let dataSort = state.pageData.list.length;
-                state.pageData.list.push({
-                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                    i: id,
-                    x: 0,
-                    y: maxY + 1,
-                    w: 12,
-                    h: data.h,
-                    type: data.type,
-                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                    content: data.jsonData,
-                    dataSort: dataSort,
-                });
-            }
-
-            //drag=拖拽
-            if (data.source == "drag") {
-                //拖拽添加
-                console.log("通过拖拽添加一个板块");
-                //通过时间戳生成id
-                const currentTimestamp = Date.now();
-                let id = currentTimestamp;
-                //data.type 组件名称 data.h 模块高度 
-                //计算当前布局的最大 y 值
-                const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
-                console.log(data);
-                //设置数据在构建json中的位置
-                let dataSort = state.pageData.list.length;
-                state.pageData.list.push({
-                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                    i: id,
-                    x: 0,
-                    y: maxY + 1,
-                    w: 12,
-                    h: data.h,
-                    type: data.type,
-                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                    content: data.jsonData,
-                    dataSort: dataSort,
-                });
-                console.log("当前添加模块的dataSort为：" + dataSort);
-                //当前的页面构建数据
-                console.log(state.pageData.list);
-                //需要调查一下这里最后的1，1
-                state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
-                try {
-                    state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display = "block";
-                } catch { }
-            }
-        }
+        if (state.pageStatus == 3) { }
         //pageStatus==4 详情页 article
-        if (state.pageStatus == 4) {
-            //判断是拖拽的还是点击添加进来的 click=点击
-                if (data.source == "click") {
-                    console.log("通过点击添加一个板块");
-                    //通过时间戳生成id
-                    const currentTimestamp = Date.now();
-                    let id = currentTimestamp;
-                    //data.type 组件名称 data.h 模块高度 
-                    //计算当前布局的最大 y 值
-                    const maxY = Math.max(...state.pageData.article.map(item => item.y), 0);
-                    console.log(data);
-                    //设置数据在构建json中的位置
-                    let dataSort = state.pageData.article.length;
-                    state.pageData.article.push({
-                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                        i: id,
-                        x: 0,
-                        y: maxY + 1,
-                        w: 12,
-                        h: data.h,
-                        type: data.type,
-                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                        content: data.jsonData,
-                        dataSort: dataSort,
-                    });
-                }
-
-                //drag=拖拽
-                if (data.source == "drag") {
-                    //拖拽添加
-                    console.log("通过拖拽添加一个板块");
-                    //通过时间戳生成id
-                    const currentTimestamp = Date.now();
-                    let id = currentTimestamp;
-                    //data.type 组件名称 data.h 模块高度 
-                    //计算当前布局的最大 y 值
-                    const maxY = Math.max(...state.pageData.article.map(item => item.y), 0);
-                    console.log(data);
-                    //设置数据在构建json中的位置
-                    let dataSort = state.pageData.article.length;
-                    state.pageData.article.push({
-                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                        i: id,
-                        x: 0,
-                        y: maxY + 1,
-                        w: 12,
-                        h: data.h,
-                        type: data.type,
-                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                        content: data.jsonData,
-                        dataSort: dataSort,
-                    });
-                    console.log("当前添加模块的dataSort为：" + dataSort);
-                    //当前的页面构建数据
-                    console.log(state.pageData.article);
-                    //需要调查一下这里最后的1，1
-                    state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
-                    try {
-                        state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display = "block";
-                    } catch { }
-                }
-        }
+        if (state.pageStatus == 4) { }
         //pageStatus==5 搜索页 search
         if (state.pageStatus == 5) { }
         //pageStatus==6 自定义列表页 aloneList
@@ -627,22 +411,6 @@ const mutations = {
         //data.dataSort = dataSort
         //pageStatus==1 首页
         if (state.pageStatus == 1) {
-            //开始复制 start------------------------------------------------------------>
-            //必须通过重新查找id的方式来删除
-            // const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
-            // if (indexToRemove !== -1) {
-            //     state.pageData.index.splice(indexToRemove, 1);
-            //     Message.success('模块已删除！');
-            //     console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
-            // } else {
-            //     Message.warning('未找到要删除的模块！');
-            // }
-            //开始复制 end------------------------------------------------------------>
-            // base 0.0.2 如果使用splice方法删除sort，当你就剩下最后一个的时候，会出现找不到那个元素的问题
-            // state.pageData.index.splice(data.dataSort,1);
-            // Message.success('模块已删除！');
-            // console.log(state.pageData.index);
-            // 深拷贝整个数组
             try {
                 // 1. 先找到要删除的模块
                 const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
@@ -650,16 +418,40 @@ const mutations = {
                     Message.warning('未找到要删除的模块！');
                     return;
                 }
+                
                 // 2. 创建新的数组，不包含要删除的模块
                 const newModules = state.pageData.index.filter(item => item.i !== data.i);
+                
                 // 3. 重新计算所有模块的 dataSort
                 newModules.forEach((module, index) => {
                     module.dataSort = index;
                 });
+                
                 // 4. 使用 Vue.set 更新整个数组
                 Vue.set(state.pageData, 'index', newModules);
-                // 5. 强制更新 gridKey 以触发视图重新渲染
-                state.gridKey += 1;
+                
+                // 5. 【关键修复】直接清理 $children 数组
+                if (state.gridlayoutObj && state.gridlayoutObj.$children) {
+                    // 清空 $children 数组
+                    state.gridlayoutObj.$children.length = 0;
+                    
+                    // 强制重新渲染
+                    state.gridKey += 1;
+                    
+                    // 等待 DOM 更新后重新设置 gridlayout 对象
+                    Vue.nextTick(() => {
+                        // 通知父组件重新设置 gridlayout 对象
+                        // 这里可以通过事件总线或其他方式通知
+                        if (state.gridlayoutObj && state.gridlayoutObj.$parent) {
+                            // 尝试重新获取 gridlayout 对象
+                            const newGridLayout = state.gridlayoutObj.$parent.$refs.gridlayout;
+                            if (newGridLayout) {
+                                state.gridlayoutObj = newGridLayout;
+                            }
+                        }
+                    });
+                }
+                
                 Message.success('模块已删除！');
                 console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
             } catch (error) {
@@ -670,79 +462,9 @@ const mutations = {
         //pageStatus==2 分类页
         if (state.pageStatus == 2) { }
         //pageStatus==3 列表页
-        if (state.pageStatus == 3) {
-            //开始复制 start------------------------------------------------------------>
-            //必须通过重新查找id的方式来删除
-            // const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i);
-            // if (indexToRemove !== -1) {
-            //     state.pageData.list.splice(indexToRemove, 1);
-            //     Message.success('模块已删除！');
-            //     console.log('模块已删除，当前的页面构建数据为：', state.pageData.list);
-            // } else {
-            //     Message.warning('未找到要删除的模块！');
-            // }
-            try {
-                // 1. 先找到要删除的模块
-                const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i);
-                if (indexToRemove === -1) {
-                    Message.warning('未找到要删除的模块！');
-                    return;
-                }
-                // 2. 创建新的数组，不包含要删除的模块
-                const newModules = state.pageData.list.filter(item => item.i !== data.i);
-                // 3. 重新计算所有模块的 dataSort
-                newModules.forEach((module, index) => {
-                    module.dataSort = index;
-                });
-                // 4. 使用 Vue.set 更新整个数组
-                Vue.set(state.pageData, 'list', newModules);
-                // 5. 强制更新 gridKey 以触发视图重新渲染
-                state.gridKey += 1;
-                Message.success('模块已删除！');
-                console.log('模块已删除，当前的页面构建数据为：', state.pageData.list);
-            } catch (error) {
-                console.error('删除模块时发生错误:', error);
-                Message.error('删除模块时发生错误，请重试！');
-            }
-            //开始复制 end------------------------------------------------------------>
-        }
+        if (state.pageStatus == 3) { }
         //pageStatus==4 详情页
-        if (state.pageStatus == 4) {
-            //开始复制 start------------------------------------------------------------>
-            //必须通过重新查找id的方式来删除
-            // const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
-            // if (indexToRemove !== -1) {
-            //     state.pageData.article.splice(indexToRemove, 1);
-            //     Message.success('模块已删除！');
-            //     console.log('模块已删除，当前的页面构建数据为：', state.pageData.article);
-            // } else {
-            //     Message.warning('未找到要删除的模块！');
-            // }
-            //开始复制 end------------------------------------------------------------>
-            try {
-                // 1. 先找到要删除的模块
-                const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
-                if (indexToRemove === -1) {
-                    Message.warning('未找到要删除的模块！');
-                    return;
-                }
-                // 2. 创建新的数组，不包含要删除的模块
-                const newModules = state.pageData.article.filter(item => item.i !== data.i);
-                // 3. 重新计算所有模块的 dataSort
-                newModules.forEach((module, index) => {
-                    module.dataSort = index;
-                });
-                // 4. 使用 Vue.set 更新整个数组
-                Vue.set(state.pageData, 'list', newModules);
-                // 5. 强制更新 gridKey 以触发视图重新渲染
-                state.gridKey += 1;
-                Message.success('模块已删除！');
-                console.log('模块已删除，当前的页面构建数据为：', state.pageData.article);
-            } catch (error) {
-                console.error('删除模块时发生错误:', error);
-                Message.error('删除模块时发生错误，请重试！');
-            }
-        }
+        if (state.pageStatus == 4) { }
         //pageStatus==5 搜索页
         if (state.pageStatus == 5) { }
         //pageStatus==6 自定义列表页
@@ -779,43 +501,9 @@ const mutations = {
         //pageStatus==2 分类页
         if (state.pageStatus == 2) { }
         //pageStatus==3 列表页
-        if (state.pageStatus == 3) {
-            //开始复制 start------------------------------------------------------------>
-            // 获取当前模块数据并进行深拷贝
-            let module = JSON.parse(JSON.stringify(state.pageData.list[dataSort]));
-            //module.content.componentList[sort].component_style = num;
-            //确保修改属性时 Vue 能监控到变化
-            Vue.set(module.content.componentList, sort, {
-                ...module.content.componentList[sort],
-                component_style: num
-            });
-            // 拷贝后直接替换原来的板块
-            //state.pageData.index[id] = module;
-            // 使用Vue.set来强制视图更新
-            Vue.set(state.pageData.list, dataSort, module);
-            console.log("当前的板块数据为：");
-            console.log(state.pageData.list);
-            //开始复制 end------------------------------------------------------------>
-        }
+        if (state.pageStatus == 3) { }
         //pageStatus==4 详情页
-        if (state.pageStatus == 4) {
-            //开始复制 start------------------------------------------------------------>
-            // 获取当前模块数据并进行深拷贝
-            let module = JSON.parse(JSON.stringify(state.pageData.article[dataSort]));
-            //module.content.componentList[sort].component_style = num;
-            //确保修改属性时 Vue 能监控到变化
-            Vue.set(module.content.componentList, sort, {
-                ...module.content.componentList[sort],
-                component_style: num
-            });
-            // 拷贝后直接替换原来的板块
-            //state.pageData.index[id] = module;
-            // 使用Vue.set来强制视图更新
-            Vue.set(state.pageData.article, dataSort, module);
-            console.log("当前的板块数据为：");
-            console.log(state.pageData.article);
-            //开始复制 end------------------------------------------------------------>
-        }
+        if (state.pageStatus == 4) { }
         //pageStatus==5 搜索页
         if (state.pageStatus == 5) { }
         //pageStatus==6 自定义列表页
@@ -882,82 +570,10 @@ const mutations = {
 
         //pageStatus==2 频道页
         if (state.pageStatus == 2) {}
-
         //pageStatus==3 列表页
-        if (state.pageStatus == 3) {
-            //开始复制 start------------------------------------------------------------>
-            //1=新闻
-            const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
-            console.log("要修改的模块id为：") //找到要修改的板块
-            console.log(data.sort) //找到要修改的板块
-            console.log(targetModuleIndex) //找到要修改的板块
-            if (state.editComponentType == 1) {
-                // 获取当前模块数据并进行深拷贝
-                let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
-                // 更新 category_id 和 pageSize
-                module.content.componentList[data.sort].componentData.category_id = data.data.pid_id; // 设置 category_id
-                module.content.componentList[data.sort].componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
-                module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
-                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
-                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
-
-                // 使用Vue.set来强制视图更新
-                Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
-                console.log("当前的板块数据为：");
-                console.log(state.pageData.list);
-            }
-            //2=广告
-            if (state.editComponentType == 2) {
-                let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
-                //module.content.componentList[data.sort].componentData.text = data.data.adName;
-                module.content.ad.name = data.data.adName;
-                module.content.ad.introduce = data.data.adName;
-                module.content.ad.price = data.data.price;
-                Vue.set(state.pageData.list, targetModuleIndex, module);
-                console.log("当前的板块数据为：");
-                console.log(state.pageData.list);
-                state.componentViewData.adName = data.data.adName;
-            }
-            //开始复制 end------------------------------------------------------------>
-        }
-
-
+        if (state.pageStatus == 3) {}
         //pageStatus==4 详情页
-        if (state.pageStatus == 4) {
-            //开始复制 start------------------------------------------------------------>
-            const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
-            console.log("要修改的模块id为：") //找到要修改的板块
-            console.log(data.sort) //找到要修改的板块
-            console.log(targetModuleIndex) //找到要修改的板块
-            if (state.editComponentType == 1) {
-                // 获取当前模块数据并进行深拷贝
-                let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
-                // 更新 category_id 和 pageSize
-                module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
-                module.content.componentList[data.sort].componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
-                module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
-                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
-                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
-
-                // 使用Vue.set来强制视图更新
-                Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
-                console.log("当前的板块数据为：");
-                console.log(state.pageData.article);
-            }
-            //2=广告
-            if (state.editComponentType == 2) {
-                let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
-                //module.content.componentList[data.sort].componentData.text = data.data.adName;
-                module.content.ad.name = data.data.adName;
-                module.content.ad.introduce = data.data.adName;
-                module.content.ad.price = data.data.price;
-                Vue.set(state.pageData.article, targetModuleIndex, module);
-                console.log("当前的板块数据为：");
-                console.log(state.pageData.article);
-                state.componentViewData.adName = data.data.adName;
-            }
-            //开始复制 end------------------------------------------------------------>
-        }
+        if (state.pageStatus == 4) {}
         //pageStatus==5 搜索页
         if (state.pageStatus == 5) {}
         //pageStatus==6 底部列表页
@@ -965,224 +581,87 @@ const mutations = {
         //pageStatus==7 底部详情页
         if (state.pageStatus == 7) {}
     },
-    //通过按钮移动板块 (暂时停用)
-    moveModule(state, data) {
-        Message.error("该功能暂时禁用")
-        // pageStatus == 1 首页
-        // if (state.pageStatus == 1) {
-        //   const moveType = data.moveType;
-        //   const moduleId = data.i;
-        //   const modules = state.pageData.index;
-
-        //   // 深拷贝 modules，避免直接操作原数据
-        //   const newModules = JSON.parse(JSON.stringify(modules));
-
-        //   // 查找模块在数组中的实际索引
-        //   const thisIndex = newModules.findIndex(module => module.i === moduleId);
-        //   if (thisIndex === -1) {
-        //     Message.error('模块未找到！');
-        //     return;
-        //   }
-        //   const thisY = newModules[thisIndex].y;
-        //   let thatY;
-
-        //   if (moveType === 'up') {
-        //     thatY = Math.max(
-        //       ...newModules.filter(item => item.y < thisY).map(item => item.y)
-        //     );
-        //     if (thatY === -Infinity) {
-        //       Message.error('已经是顶部了！');
-        //       return;
-        //     }
-        //     const thatIndex = newModules.findIndex(item => item.y === thatY);
-        //     if (thatIndex === -1) {
-        //       Message.error('上方模块未找到！');
-        //       return;
-        //     }
-        //     // 交换y值
-        //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
-
-        //   } else if (moveType === 'down') {
-        //     thatY = Math.min(
-        //       ...newModules.filter(item => item.y > thisY).map(item => item.y)
-        //     );
-        //     if (thatY === Infinity) {
-        //       Message.error('已经是底部了！');
-        //       return;
-        //     }
-        //     const thatIndex = newModules.findIndex(item => item.y === thatY);
-        //     if (thatIndex === -1) {
-        //       Message.error('下方模块未找到！');
-        //       return;
-        //     }
-        //     // 交换y值
-        //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
-        //   } else {
-        //     Message.error('未知的移动类型！');
-        //     return;
-        //   }
-
-        //   // 交换后对模块进行排序以确保顺序一致
-        //   newModules.sort((a, b) => a.y - b.y);
-
-        //   // 使用 Vue.set 强制更新数组，确保视图更新
-        //   //Vue.set(state.pageData, 'index', newModules); // 这里更新整个数组
-        //   state.pageData.index = newModules;
-        //   //state.gridKey+=1;
-
-        //   console.log(state.pageData.index); // 打印查看是否已修改
-        // }
-
-        // // pageStatus == 2 分类页
-        // if (state.pageStatus == 2) {}
-        // // pageStatus == 3 列表页
-        // if (state.pageStatus == 3) {}
-        // // pageStatus == 4 详情页
-        // if (state.pageStatus == 4) {}
-        // // pageStatus == 5 搜索页
-        // if (state.pageStatus == 5) {}
-        // // pageStatus == 6 自定义列表页
-        // if (state.pageStatus == 6) {}
-        // // pageStatus == 7 自定义详情页
-        // if (state.pageStatus == 7) {}
-    },
     //从外部拖拽板块
     drag(state, data) {
+        // pageStatus == 1 首页
         // pageStatus == 1 首页
         if (state.pageStatus == 1) {
-            //开始复制 start------------------------------------------------------------>
             let parentRect = document.getElementById('content').getBoundingClientRect();
-            //console.log(parentRect); 获取画布
             let mouseInGrid = false;
             if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
                 mouseInGrid = true;
             }
-            //state.gridlayoutObj
+            
             //如果没有占位符就创建一个
             if (mouseInGrid === true && (state.pageData.index.findIndex(item => item.i === 'drop')) === -1) {
                 state.pageData.index.push({
                     x: (state.pageData.index.length * 2) % (this.colNum || 12),
-                    y: state.pageData.index.length + (this.colNum || 12), // puts it at the bottom
+                    y: state.pageData.index.length + (this.colNum || 12),
                     w: 12,
                     h: 2,
                     i: 'drop',
                 });
             }
+            
             //如果已经存在占位符
             let index = state.pageData.index.findIndex(item => item.i === 'drop');
             if (index !== -1) {
                 try {
-                    state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "none";
-                } catch {
-
+                    console.log('当前 pageData.index.length:', state.pageData.index.length);
+                    console.log('当前 gridlayoutObj.$children.length:', state.gridlayoutObj.$children.length);
+                    
+                    // 【修复】回到原始的索引逻辑！
+                    const targetIndex = state.pageData.index.length; // 恢复原始逻辑：用length，不是length-1
+                    
+                    console.log('尝试隐藏的索引:', targetIndex);
+                    
+                    if (state.gridlayoutObj.$children && 
+                        targetIndex >= 0 && 
+                        targetIndex < state.gridlayoutObj.$children.length &&
+                        state.gridlayoutObj.$children[targetIndex] &&
+                        state.gridlayoutObj.$children[targetIndex].$refs &&
+                        state.gridlayoutObj.$children[targetIndex].$refs.item) {
+                        
+                        // 【调试】确认要隐藏的是drop元素
+                        const targetChild = state.gridlayoutObj.$children[targetIndex];
+                        console.log('要隐藏的元素ID:', targetChild.i || (targetChild.$props && targetChild.$props.i));
+                        
+                        state.gridlayoutObj.$children[targetIndex].$refs.item.style.display = "none";
+                        console.log('成功隐藏占位符，索引:', targetIndex);
+                    } else {
+                        console.log('无法安全访问占位符，索引:', targetIndex);
+                    }
+                } catch (error) {
+                    console.log('处理占位符时出错:', error);
                 }
-                let el = state.gridlayoutObj.$children[index];
-                el.dragging = { "top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left };
-                let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
+                
+                // 拖拽逻辑保持不变
+                if (state.gridlayoutObj.$children[index]) {
+                    let el = state.gridlayoutObj.$children[index];
+                    el.dragging = { "top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left };
+                    let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
 
-                if (mouseInGrid === true) {
-                    state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
-                    state.DragPos.i = String(index);
-                    state.DragPos.x = state.pageData.index[index].x;
-                    state.DragPos.y = state.pageData.index[index].y;
-                }
-                if (mouseInGrid === false) {
-                    state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
-                    state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+                    if (mouseInGrid === true) {
+                        state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
+                        state.DragPos.i = String(index);
+                        state.DragPos.x = state.pageData.index[index].x;
+                        state.DragPos.y = state.pageData.index[index].y;
+                    }
+                    if (mouseInGrid === false) {
+                        state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
+                        state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+                    }
+                } else {
+                    console.log('无法找到拖拽元素，索引:', index);
                 }
             }
-            //开始复制 end------------------------------------------------------------>
         }
         // pageStatus == 2 分类页
         if (state.pageStatus == 2) { }
         // pageStatus == 3 列表页
-        if (state.pageStatus == 3) {
-            //开始复制 start------------------------------------------------------------>
-            let parentRect = document.getElementById('content').getBoundingClientRect();
-            //console.log(parentRect); 获取画布
-            let mouseInGrid = false;
-            if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
-                mouseInGrid = true;
-            }
-            //如果没有占位符就创建一个
-            if (mouseInGrid === true && (state.pageData.list.findIndex(item => item.i === 'drop')) === -1) {
-                state.pageData.list.push({
-                    x: (state.pageData.list.length * 2) % (this.colNum || 12),
-                    y: state.pageData.list.length + (this.colNum || 12), // puts it at the bottom
-                    w: 12,
-                    h: 2,
-                    i: 'drop',
-                });
-            }
-            //如果已经存在占位符
-            let index = state.pageData.list.findIndex(item => item.i === 'drop');
-            if (index !== -1) {
-                try {
-                    state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display = "none";
-                } catch {
-
-                }
-                let el = state.gridlayoutObj.$children[index];
-                el.dragging = { "top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left };
-                let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
-
-                if (mouseInGrid === true) {
-                    state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
-                    state.DragPos.i = String(index);
-                    state.DragPos.x = state.pageData.list[index].x;
-                    state.DragPos.y = state.pageData.list[index].y;
-                }
-                if (mouseInGrid === false) {
-                    state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
-                    state.pageData.list = state.pageData.list.filter(obj => obj.i !== 'drop');
-                }
-            }
-            //开始复制 end------------------------------------------------------------>
-        }
+        if (state.pageStatus == 3) { }
         // pageStatus == 4 详情页
-        if (state.pageStatus == 4) {
-            //开始复制 start------------------------------------------------------------>
-            let parentRect = document.getElementById('content').getBoundingClientRect();
-            //console.log(parentRect); 获取画布
-            let mouseInGrid = false;
-            if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
-                mouseInGrid = true;
-            }
-            //如果没有占位符就创建一个
-            if (mouseInGrid === true && (state.pageData.article.findIndex(item => item.i === 'drop')) === -1) {
-                state.pageData.article.push({
-                    x: (state.pageData.article.length * 2) % (this.colNum || 12),
-                    y: state.pageData.article.length + (this.colNum || 12), // puts it at the bottom
-                    w: 12,
-                    h: 2,
-                    i: 'drop',
-                });
-            }
-            //如果已经存在占位符
-            let index = state.pageData.article.findIndex(item => item.i === 'drop');
-            if (index !== -1) {
-                try {
-                    state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display = "none";
-                } catch {
-
-                }
-                let el = state.gridlayoutObj.$children[index];
-                el.dragging = { "top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left };
-                let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
-
-                if (mouseInGrid === true) {
-                    state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
-                    state.DragPos.i = String(index);
-                    state.DragPos.x = state.pageData.article[index].x;
-                    state.DragPos.y = state.pageData.article[index].y;
-                }
-                if (mouseInGrid === false) {
-                    state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
-                    state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
-                }
-            }
-            //开始复制 end------------------------------------------------------------>
-        }
+        if (state.pageStatus == 4) { }
         // pageStatus == 5 搜索页
         if (state.pageStatus == 5) { }
         // pageStatus == 6 自定义列表页
@@ -1204,7 +683,7 @@ const mutations = {
             }
             //如果在画布内，开始创建元素
             if (mouseInGrid === true) {
-                //alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
+                alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
                 state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
                 state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
 
@@ -1240,92 +719,9 @@ const mutations = {
         // pageStatus == 2 分类页
         if (state.pageStatus == 2) { }
         // pageStatus == 3 列表页
-        if (state.pageStatus == 3) {
-            //开始复制 start------------------------------------------------------------>
-            //获取画布尺寸
-            let parentRect = document.getElementById('content').getBoundingClientRect();
-            //判断是否在画布内
-            let mouseInGrid = false;
-            if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
-                mouseInGrid = true;
-            }
-            //如果在画布内，开始创建元素
-            if (mouseInGrid === true) {
-                //alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
-                state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
-                state.pageData.list = state.pageData.list.filter(obj => obj.i !== 'drop');
-
-                let sendData = {
-                    source: "drag",//添加时判断此模块来自外部拖拽，而不是点击
-                    type: data.type,
-                    h: data.h,
-                    jsonData: data.jsonData,
-                    x: state.DragPos.x,
-                    y: state.DragPos.y,
-                    w: 12,
-                }
-                this.commit('template/addModule', sendData);
-            }
-            //开始复制 end------------------------------------------------------------>
-        }
-        // pageStatus == 4 详情页
-        if (state.pageStatus == 4) {
-            //开始复制 start------------------------------------------------------------>
-            //获取画布尺寸
-            let parentRect = document.getElementById('content').getBoundingClientRect();
-            //判断是否在画布内
-            let mouseInGrid = false;
-            if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
-                mouseInGrid = true;
-            }
-            //如果在画布内，开始创建元素
-            if (mouseInGrid === true) {
-                //alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
-                state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
-                state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
-
-                let sendData = {
-                    source: "drag",//添加时判断此模块来自外部拖拽，而不是点击
-                    type: data.type,
-                    h: data.h,
-                    jsonData: data.jsonData,
-                    x: state.DragPos.x,
-                    y: state.DragPos.y,
-                    w: 12,
-                }
-                this.commit('template/addModule', sendData);
-            }
-            //开始复制 end------------------------------------------------------------>
-        }
-        // pageStatus == 5 搜索页
-        if (state.pageStatus == 5) { }
-        // pageStatus == 6 自定义列表页
-        if (state.pageStatus == 6) { }
-        // pageStatus == 7 自定义详情页
-        if (state.pageStatus == 7) { }
-    },
-    //修改首页板块高度
-    setModuleHeight(state, data) {
-        // pageStatus == 1 首页
-        if (state.pageStatus == 1) {
-            console.log(data);
-            state.pageData.index[data.i].h = data.h;
-            console.log(state.pageData.index[data.i]);
-        }
-        // pageStatus == 2 分类页
-        if (state.pageStatus == 2) { }
-        // pageStatus == 3 列表页
-        if (state.pageStatus == 3) {
-            console.log(data);
-            state.pageData.list[data.i].h = data.h;
-            console.log(state.pageData.list[data.i]);
-        }
+        if (state.pageStatus == 3) { }
         // pageStatus == 4 详情页
-        if (state.pageStatus == 4) {
-            console.log(data);
-            state.pageData.article[data.i].h = data.h;
-            console.log(state.pageData.article[data.i]);
-        }
+        if (state.pageStatus == 4) { }
         // pageStatus == 5 搜索页
         if (state.pageStatus == 5) { }
         // pageStatus == 6 自定义列表页
@@ -1362,15 +758,7 @@ const mutations = {
                 clonedData.data[index].content.ad.ad_tag = ad_tag;
                 state.webSiteData.ad[data.type].push(clonedData.data[index].content.ad);
             }
-            // for(let item of clonedData.data[index].content.componentList){
-            //     if(item.componentData.category_id!=undefined){
-            //         console.log("--------------------------------")
-            //         console.log(item);
-            //     }
-            // }
         }
-
-
         //设置全局的广告位名称
         state.webSiteData.ad.top.website_id = state.editWebsiteId;
         state.webSiteData.ad.top.ad_tag = `${state.adKey}_top`
@@ -1421,11 +809,9 @@ const mutations = {
         //this.commit('template/formatTemplateInfo', { data: state.pageData.article, type: "article" });
         //展示构造json 后期移除
         state.editWebsiteTemplateJsonWindow = true;
-
         //第三步：
         //检测模板数据完整度，如果不完整阻止用户保存
         this.commit('template/pageCheck', {data: state.pageData});
-
     },
     //检测模板完整度
     pageCheck(state, data) {