增加列表页和详情页

增加列表页和详情页

src/layout/components/template/pages/list/sector.vue

@@ -6,7 +6,7 @@
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
+    <div class="sectorItemBox" @click="addModule('mainListSector',33,mainListSector)" @drag="drag('mainListSector',33,mainListSector)" @dragend="dragend('mainListSector',33,mainListSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/listSector.png"/>
       </div>
@@ -56,157 +56,6 @@ export default {
       },
       //添加通栏广告模块 start---------------------------------------->
 
-      //添加banner模块 start---------------------------------------->
-      bannerSector:{
-        sectorName:"bannerSector",//板块名称
-        componentList:[
-          {
-            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"mainTitle",//组件名称
-            sort:1,//组件排序
-            componentData:{//该组件请求的数据
-              category_id:[],//请求的导航id 如果上面的component_type是1，这里只会有1个[[1]],如果是2，这里就会有多个[[1,3],[1,4,8]]
-              page:1,//请求第几页
-              pageSize:1,//请求的条数
-              listType:[//请求的数据应该包含哪些字段
-                "title",//标题
-                //"created_time",//创建时间
-                //"author",//作者
-                //"imgUrl",//缩略图片
-                //"introduce",//描述
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,
-            component_name:"banner",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "imgUrl"//缩略图片
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,
-            component_name:"tabsNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:5,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-                "introduce",//描述
-              ]
-            }
-          },
-        ]
-      },
-      //添加banner模块 end---------------------------------------->
-
-      //添加多图板块 start---------------------------------------->
-      manyPictureSector:{
-        sectorName:"manyPictureSector",//板块名称
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:6, //静态组件无需传递数据
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"fivePicture",
-            sort:2,
-            componentData:{}
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"tabsNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"tabsNews",
-            sort:4,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-              ]
-            }
-          },
-        ]
-      },
-      //添加多图板块 end---------------------------------------->
-
-      //文章列表带评论板块 end---------------------------------------->
-      commentSector:{
-        sectorName:"commentSector",//板块名称
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:1,
-            component_style:2,//该组件使用哪个展示样式
-            component_name:"tabsCalendarNews",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:6,
-              listType:[
-                "title",
-                "created_time",
-                "introduce"
-              ]
-            }
-          },
-          {
-            component_type:8,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"calendar", //评论组件无需提交数据
-            sort:3,
-            componentData:{}
-          },
-        ]
-      },
-      //文章列表带评论板块 end---------------------------------------->
-
       //文章列表板块 start---------------------------------------->
       listSector:{
         sectorName:"listSector",//板块名称
@@ -254,29 +103,6 @@ export default {
       },
       //文章列表板块 end---------------------------------------->
 
-      //纯图片组合 start---------------------------------------->
-      onlyImgSector:{
-        sectorName:"onlyImgSector",//板块名称
-        componentList:[
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:7,
-              listType:[
-                "title",
-                "imgUrl"
-              ]
-            }
-          }
-        ]
-      },
-      //纯图片组合 end---------------------------------------->
-
       //友情链接板块 start---------------------------------------->
       friendShipLinkSector:{
         sectorName:"friendShipLinkSector",//友情链接无需提交数据
@@ -298,6 +124,32 @@ export default {
             componentData:{}
           }
         ]
+      },
+      //友情链接板块 end---------------------------------------->
+
+      //主文章列表 start---------------------------------------->
+      mainListSector:{
+        sectorName:"mainListSector",//主文章列表
+        componentList:[
+          {
+            component_type:1, //1=新闻(单个)
+            component_style:1,
+            component_name:"listMain",
+            sort:1,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:1,
+              listType:[
+                "title",
+                "created_time",//创建时间
+                //"author",//作者
+                //"imgUrl",//缩略图片
+                //"introduce",//描述
+              ]
+            }
+          },
+        ]
       }
       //友情链接板块 end---------------------------------------->
 

src/store/modules/template.js

@@ -193,7 +193,6 @@ const mutations = {
       if(state.editComponentType == 7){
         state.componentViewData.titleName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
       }
-
     }
     //pageStatus==2 分类页
     if(state.pageStatus == 2){}
@@ -216,8 +215,9 @@ const mutations = {
   },
   //添加板块
   addModule(state,data){
-    //pageStatus==1 首页
+    //pageStatus==1 首页 index
     if(state.pageStatus == 1){
+      //开始复制 start------------------------------------------------------------>
       //判断当前一共有多少个模块最多能添加10个
       if(state.pageData.index.length >= 10){
         Message.error('最多只能添加10个模块！');
@@ -288,20 +288,91 @@ const mutations = {
             state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display="block";
           } catch {}
         }
-
       }
+      //开始复制 end------------------------------------------------------------>
     }
-    //pageStatus==2 分类页
+    //pageStatus==2 分类页 class
     if(state.pageStatus == 2){}
-    //pageStatus==3 列表页
-    if(state.pageStatus == 3){}
-    //pageStatus==4 详情页
+    //pageStatus==3 列表页 list
+    if(state.pageStatus == 3){
+      //开始复制 start------------------------------------------------------------>
+      //判断当前一共有多少个模块最多能添加10个
+      if(state.pageData.list.length >= 10){
+        Message.error('最多只能添加10个模块！');
+        return;
+      }else{
+        //判断是拖拽的还是点击添加进来的 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;
+
+          //添加板块id  
+          state.pageData.list.push({
+            i: id,
+            x: 0, 
+            y: maxY + 1, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            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;
+          //添加板块id  
+          state.pageData.list.push({
+            //i: state.pageData.list.length, //base 0.0.1 此方法会导致重复的id出现
+            i: id,
+            x: data.x, 
+            y: data.y, 
+            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 {}
+        }
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
+    //pageStatus==4 详情页 article
     if(state.pageStatus == 4){}
-    //pageStatus==5 搜索页
+    //pageStatus==5 搜索页 search
     if(state.pageStatus == 5){}
-    //pageStatus==6 自定义列表页
+    //pageStatus==6 自定义列表页 aloneList
     if(state.pageStatus == 6){}
-    //pageStatus==7 自定义详情页
+    //pageStatus==7 自定义详情页 aloneArticle
     if(state.pageStatus == 7){}
   },
   //删除板块
@@ -310,6 +381,7 @@ 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) {
@@ -319,6 +391,7 @@ const mutations = {
       } else {
         Message.warning('未找到要删除的模块！');
       }
+      //开始复制 end------------------------------------------------------------>
       // base 0.0.2 如果使用splice方法删除sort，当你就剩下最后一个的时候，会出现找不到那个元素的问题
       // state.pageData.index.splice(data.dataSort,1);
       // Message.success('模块已删除！');
@@ -327,7 +400,19 @@ const mutations = {
     //pageStatus==2 分类页
     if(state.pageStatus == 2){}
     //pageStatus==3 列表页
-    if(state.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('未找到要删除的模块！');
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==4 详情页
     if(state.pageStatus == 4){}
     //pageStatus==5 搜索页
@@ -346,6 +431,7 @@ const mutations = {
     console.log(id,dataSort,sort,num);
     //pageStatus==1 首页
     if(state.pageStatus == 1){
+      //开始复制 start------------------------------------------------------------>
       // 获取当前模块数据并进行深拷贝
       let module = JSON.parse(JSON.stringify(state.pageData.index[dataSort]));
       //module.content.componentList[sort].component_style = num;
@@ -360,11 +446,29 @@ const mutations = {
       Vue.set(state.pageData.index, dataSort, module);
       console.log("当前的板块数据为：");
       console.log(state.pageData.index);
+      //开始复制 end------------------------------------------------------------>
     }
     //pageStatus==2 分类页
     if(state.pageStatus == 2){}
     //pageStatus==3 列表页
-    if(state.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------------------------------------------------------------>
+    }
     //pageStatus==4 详情页
     if(state.pageStatus == 4){}
     //pageStatus==5 搜索页
@@ -380,6 +484,7 @@ const mutations = {
     console.log("当前编辑板块：" + data.id)
     //pageStatus==1 首页
     if(state.pageStatus == 1){
+      //开始复制 start------------------------------------------------------------>
       const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
       console.log("要修改的模块id为：") //找到要修改的板块
       console.log(data.sort) //找到要修改的板块
@@ -439,11 +544,58 @@ const mutations = {
       }
       //8=评论
       //if(state.editComponentType == 8){}
+      //开始复制 end------------------------------------------------------------>
     }
     //pageStatus==2 分类页
     if(state.pageStatus == 2){}
     //pageStatus==3 列表页
-    if(state.pageStatus == 3){}
+    if(state.pageStatus == 3){
+      //开始复制 start------------------------------------------------------------>
+      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_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.list);
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.list);
+      }
+      //3=广告
+      if(state.editComponentType == 3){;
+        let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.adName;
+        Vue.set(state.pageData.list, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.list);
+      }
+      //7=文本
+      if(state.editComponentType == 7){
+        let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.titleName;
+        Vue.set(state.pageData.list, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.list);
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==4 详情页
     if(state.pageStatus == 4){}
     //pageStatus==5 搜索页
@@ -538,6 +690,7 @@ const mutations = {
   drag(state, data) {
     // pageStatus == 1 首页
     if (state.pageStatus == 1) {
+      //开始复制 start------------------------------------------------------------>
       let parentRect = document.getElementById('content').getBoundingClientRect();
       //console.log(parentRect); 获取画布
       let mouseInGrid = false;
@@ -578,11 +731,54 @@ const mutations = {
           state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
         }
       }
+      //开始复制 end------------------------------------------------------------>
     }
     // pageStatus == 2 分类页
     if (state.pageStatus == 2) {}
     // pageStatus == 3 列表页
-    if (state.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------------------------------------------------------------>
+    }
     // pageStatus == 4 详情页
     if (state.pageStatus == 4) {}
     // pageStatus == 5 搜索页
@@ -594,9 +790,9 @@ const mutations = {
   },
   //拖拽结束 定位落点
   dragend(state, data) {
-
     // pageStatus == 1 首页
     if (state.pageStatus == 1) {
+      //开始复制 start------------------------------------------------------------>
       //获取画布尺寸
       let parentRect = document.getElementById('content').getBoundingClientRect();
       //判断是否在画布内
@@ -636,13 +832,40 @@ const mutations = {
         }
         //开发到这里了，注意我可能还需要上面那个 this.$refs.gridLayout.dragEvent方法
         this.commit('template/addModule',sendData);
-
       }
+      //开始复制 end------------------------------------------------------------>
     }
     // pageStatus == 2 分类页
     if (state.pageStatus == 2) {}
     // pageStatus == 3 列表页
-    if (state.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) {}
     // pageStatus == 5 搜索页
@@ -663,7 +886,11 @@ const mutations = {
     // pageStatus == 2 分类页
     if (state.pageStatus == 2) {}
     // pageStatus == 3 列表页
-    if (state.pageStatus == 3) {}
+    if (state.pageStatus == 3) {
+      console.log(data);
+      state.pageData.list[data.i].h = data.h;
+      console.log(state.pageData.list[data.i]);
+    }
     // pageStatus == 4 详情页
     if (state.pageStatus == 4) {}
     // pageStatus == 5 搜索页
@@ -686,15 +913,19 @@ const mutations = {
       console.log(clonedData.data[index].content);
       // 使用 Vue.set 来确保属性变更能被 Vue 追踪
       Vue.set(clonedData.data[index].content, 'sort', Number(index) + 1);
-      if (data.type == "index") {
-        // 不要把数据直接保存到 state.webSiteData.template 中，否则无法删除
-        websiteData.push(clonedData.data[index].content);
-      }
+      // if (data.type == "index") {
+      //   // 不要把数据直接保存到 state.webSiteData.template 中，否则无法删除
+      //   websiteData.push(clonedData.data[index].content);
+      // }
+      websiteData.push(clonedData.data[index].content);
     }
     // 保存到对应的页面 json 中
     if (data.type == "index") {
       state.webSiteData.template.index = websiteData;
     }
+    if (data.type == "list") {
+      state.webSiteData.template.list = websiteData;
+    }
   },
   //保存模板
   saveTemplate(state) {
@@ -703,6 +934,8 @@ const mutations = {
     //调用mutations中的方法无需使用$store
     //格式化index的信息
     this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
+    //格式化list的信息
+    this.commit('template/formatTemplateInfo',{data:state.pageData.list,type:"list"});
     console.log(state.webSiteData);
   },
   //随机生成模板

src/views/template/page/pageList.vue

@@ -46,30 +46,18 @@
             <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
               <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
             </div>
-            <!-- 5.焦点图模块 -->
-            <div v-if="item.type == 'bannerSector'" class="moduleBox">
-              <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-            </div>
-            <!-- 6.多图模块 -->
-            <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-              <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-            </div>
-            <!-- 7.评论模块 -->
-            <div v-if="item.type == 'commentSector'" class="moduleBox">
-              <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-            </div>
             <!-- 8.双联文章列表模块 -->
             <div v-if="item.type == 'listSector'" class="moduleBox">
               <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
             </div>
-            <!-- 9.纯图片组合模块 --> 
-            <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-              <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-            </div>
             <!-- 10.友情链接模块 --> 
             <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
               <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
             </div>
+            <!-- 11.主文章列表模块 --> 
+            <div v-if="item.type == 'mainListSector'" class="moduleBox">
+              <mainListSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
           </div>
         </grid-item>
       </grid-layout>
@@ -100,6 +88,7 @@ import listSector from '../style/1/sector/8.vue';//文章列表
 import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
 import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
 import footerSector from '../style/1/sector/3.vue';//底部
+import mainListSector from '../style/1/sector/11.vue';//主文章列表
 //自助建站组件 end------------------------------------------------------------>
 
 
@@ -115,6 +104,7 @@ export default {
     manyPictureSector,
     commentSector,
     listSector,
+    mainListSector,
     onlyImgSector,
     friendShipLinkSector,
     footerSector

src/views/template/style/1/components/mainList/1.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    1
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  
+</style>

src/views/template/style/1/sector/11.vue

@@ -0,0 +1,59 @@
+<template>
+  <div :class="['listSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+    <div class="listSectorMainBox">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="20" :y="y"/>
+      <convertBtn :id="id" :sort="0" :type="3"/>
+      <list1Style />
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../../public/editBtn.vue'
+import convertBtn from '../../../public/convertBtn.vue'
+import list1Style from '../components/mainList/1.vue'
+
+export default {
+  components: {
+    editBtn,
+    convertBtn,
+    list1Style
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    y:{
+      type:Number,
+      default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .listSectorBox {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .listSectorMainBox {
+      width: 80%;
+      height: 200px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+</style>

src/views/template/style/1/sector/4.vue

@@ -3,18 +3,37 @@
     <div class="imgSectorBox">
       <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="3" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="3"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-        <useStyle1 />
+      <!--index页面-->
+      <div v-if="this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+          <useStyle1 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+          <useStyle2 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
+          <useStyle3 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
+          <useStyle4 />
+        </div>
       </div>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
-        <useStyle2 />
-      </div>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
-        <useStyle3 />
-      </div>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
-        <useStyle4 />
+      <!--list页面-->
+      <div v-if="this.$store.state.template.pageStatus == 3">
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 1">
+          <useStyle1 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 2">
+          <useStyle2 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 3">
+          <useStyle3 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 4">
+          <useStyle4 />
+        </div>
       </div>
+      
     </div>
   </div>
 </template>