增加自助建站的代码

增加自助建站的代码

src/api/template.js

@@ -0,0 +1,121 @@
+import request from '@/utils/request'
+
+//1.自助建站 start ------------------------------------->
+
+//1.1 搜索网站
+export function getWebsiteintel(data) {
+  return request({
+    url: '/website/getWebsiteintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
+export function addWebsiteTemplateintel(data) {
+  return request({
+    url: '/website/addWebsiteTemplateintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.3 获取网站基本信息
+export function getWebsiteTemplateintel(data) {
+  return request({
+    url: '/website/getWebsiteTemplateintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.4 修改网站基本信息
+export function upWebsiteTemplateintel(data) {
+  return request({
+    url: '/website/upWebsiteTemplateintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.5 获取所有风格
+export function getAllTemplateClass(data) {
+  return request({
+    url: '/website/getAllTemplateClass',
+    method: 'post',
+    data
+  })
+}
+
+//1.6 搜索并获取所有网站模板
+export function getWebsiteTemplateList(data) {
+  return request({
+    url: '/website/getWebsiteTemplateList',
+    method: 'post',
+    data
+  })
+}
+
+//1.7 保存用户选择的模板
+export function addWebsiteTemplateclassintel(data) {
+  return request({
+    url: '/website/addWebsiteTemplateclassintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.8 获取用户选择的模板
+export function getWebsiteTemplateclassintel(data) {
+  return request({
+    url: '/website/getWebsiteTemplateclassintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.9 保存模板配置
+export function addWebsiteTemplate(data) {
+  return request({
+    url: '/website/addWebsiteTemplate',
+    method: 'post',
+    data
+  })
+}
+
+//1.10 获取模板配置信息
+export function getWebsiteTemplateInfo(params) {
+  return request({
+    url: '/website/getWebsiteTemplateInfo',
+    method: 'get',
+    params
+  })
+}
+
+//1.11 预览数据
+export function getWebsiteTemplateData(params) {
+  return request({
+    url: '/website/getWebsiteTemplateData',
+    method: 'get',
+    params
+  })
+}
+
+//1.12 板块列表
+export function templateSectorList(params) {
+  return request({
+    url: '/website/templateSectorList',
+    method: 'get',
+    params
+  })
+}
+
+//1.13 组件列表
+export function sectorComponentList(params) {
+  return request({
+    url: '/website/sectorComponentList',
+    method: 'get',
+    params
+  })
+}
+//自助建站 end ------------------------------------->

src/layout/components/template/componentMenu.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="componentMenuBox" id="componentMenuBox">
+    <div class="componentMenuTitle">
+      <div v-if="this.$store.state.template.pageStatus == 1">首页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 2">分类页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 3">列表页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 4">详情页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 5">搜索页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页可选板块：</div>
+    </div>
+    <div>
+      <el-scrollbar wrap-class="scrollbar-wrapper">
+        <!--首页板块-->
+        <div v-if="this.$store.state.template.pageStatus == 1">
+          <indexSector/>
+        </div>
+        <!--列表板块-->
+        <div v-if="this.$store.state.template.pageStatus == 3">
+          <listSector/>
+        </div>
+        <!--详情板块-->
+        <div v-if="this.$store.state.template.pageStatus == 4">
+          <articleSector/>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+//首页板块
+import indexSector from './pages/index/sector.vue';
+import listSector from './pages/list/sector.vue';
+import articleSector from './pages/article/sector.vue';
+
+export default {
+  name: 'componentMenu',
+  components:{
+    indexSector,
+    listSector,
+    articleSector
+  },
+  props: {
+    
+  },
+  data() {
+    return {
+      data: null
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .componentMenuBox {
+    transition: width 0.28s;
+    width: 290px !important;
+    background: #2F2F2F;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+    .sectorBox {
+      height: 100%;
+    }
+    .el-scrollbar {
+      height: calc(100vh - 100px);
+    }
+    .componentMenuTitle {
+      padding: 37px 0 30px 0;
+      color: #fff;
+      font-size: 18px;
+      div {
+        border-left: 3px solid #5570F1;
+        padding-left: 25px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,392 @@
+<template>
+  <div class="sectorBox">
+    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/imgTitleSector.png"/>
+      </div>
+      <div class="sectorItemTitle">通栏广告</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('mainArticle',122,mainArticle)" @drag="drag('mainArticle',33,mainArticle)" @dragend="dragend('mainArticle',33,mainArticle)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/articleSector.png"/>
+      </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="sectorItem">
+        <img src="@/assets/template/sector/newsSector.png"/>
+      </div>
+      <div class="sectorItemTitle">次级文章列表</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/linkSector.png"/>
+      </div>
+      <div class="sectorItemTitle">友情链接</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    type: {
+     
+    },
+  },
+  data() {
+    return {
+      //添加通栏广告模块 start---------------------------------------->
+      imgTitleSector:{
+        sectorName:"imgTitleSector",//板块名称
+        componentList:[
+          {
+            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{
+              ad_id:"",//广告位id
+              text:"通栏广告", //广告位名称
+              width:1200, //广告位宽度
+              height:60, //广告位高度
+            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+          }
+        ]
+      },
+      //添加通栏广告模块 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",//板块名称
+        componentList:[
+          {
+            component_type:7,//纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+        ]
+      },
+      //文章列表板块 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",//友情链接无需提交数据
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:4,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{}
+          }
+        ]
+      },
+      //友情链接板块 end---------------------------------------->
+
+      //文章详情板块 start---------------------------------------->
+      mainArticle:{
+        sectorName:"mainArticle",//主文章列表
+        componentList:[
+          {
+            component_type:9, //页面必备组件
+            component_style:1, //文章详情
+            component_name:"mainArticle",
+            sort:1,
+            componentData:{
+              category_id:[], //文章详情
+              page:1,
+              pageSize:1,
+              listType:[
+                "details"//文章详情
+              ]
+            }
+          },
+        ]
+      }
+      //文章详情板块 end---------------------------------------->
+
+    }
+  },
+  methods: {
+    //添加模块
+    addModule(type,h,jsonData){
+      let data = {
+        source:"click",//添加方式为点击
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      console.log(data);
+      this.$store.commit('template/addModule',data);
+    },
+    //拖拽开始
+    drag(type,h,jsonData){
+      let data = {
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      this.$store.commit('template/drag',data);
+    },
+    //拖拽结束
+    dragend(type,h,jsonData){
+      let data = {
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      this.$store.commit('template/dragend',data);
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .sectorBox {
+    height: 100%;
+    .sectorItemBox {
+      box-sizing: border-box;
+      padding: 0 20px 40px 20px;
+      cursor: pointer;
+      .sectorItem {
+        border: 1px solid #333644;
+        padding: 10px;
+        border-radius: 8px;
+        &:hover {
+          background: #333644;
+          transform: scale(1.1);
+          transition: all 0.2s ease-in-out;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+      .sectorItemTitle {
+        color: #fff;
+        font-size: 14px;
+        padding: 10px 0 0 0;
+        text-align: center;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,407 @@
+<template>
+  <div class="sectorBox">
+    <!-- <div class="sectorItemBox" @click="addModule('headSector',19)">
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/headSector.png" />
+      </div>
+      <div class="sectorItemTitle">页头</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('menuSector',2)">
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/menuSector.png" />
+      </div>
+      <div class="sectorItemTitle">网站导航</div>
+    </div> -->
+    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/imgTitleSector.png"/>
+      </div>
+      <div class="sectorItemTitle">通栏广告</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('bannerSector',33,bannerSector)" @drag="drag('bannerSector',33,bannerSector)" @dragend="dragend('bannerSector',33,bannerSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/bannerSector.png"/>
+      </div>
+      <div class="sectorItemTitle">焦点图</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)" @drag="drag('manyPictureSector',49,manyPictureSector)" @dragend="dragend('manyPictureSector',49,manyPictureSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/moreServicesSector.png"/>
+      </div>
+      <div class="sectorItemTitle">多图菜单</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('commentSector',44,commentSector)" @drag="drag('commentSector',44,commentSector)" @dragend="dragend('commentSector',44,commentSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/commentSector.png"/>
+      </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="sectorItem">
+        <img src="@/assets/template/sector/newsSector.png"/>
+      </div>
+      <div class="sectorItemTitle">文章列表</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('onlyImgSector',32,onlyImgSector)" @drag="drag('onlyImgSector',32,onlyImgSector)" @dragend="dragend('onlyImgSector',32,onlyImgSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/imgSector.png"/> 
+      </div>
+      <div class="sectorItemTitle">纯图片组合</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/linkSector.png"/>
+      </div>
+      <div class="sectorItemTitle">友情链接</div>
+    </div>
+    <!-- <div class="sectorItemBox">
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/footerSector.png" @click="addModule('footerSector',38)"/>
+      </div>
+      <div class="sectorItemTitle">页尾板块</div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    type: {
+     
+    },
+  },
+  data() {
+    return {
+      //添加通栏广告模块 start---------------------------------------->
+      imgTitleSector:{
+        sectorName:"imgTitleSector",//板块名称
+        componentList:[
+          {
+            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{
+              ad_id:"",//广告位id
+              text:"通栏广告", //广告位名称
+              width:1200, //广告位宽度
+              height:60, //广告位高度
+            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+          }
+        ]
+      },
+      //添加通栏广告模块 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",//板块名称
+        componentList:[
+          {
+            component_type:7,//纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+        ]
+      },
+      //文章列表板块 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",//友情链接无需提交数据
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:4,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{}
+          }
+        ]
+      }
+      //友情链接板块 end---------------------------------------->
+
+    }
+  },
+  methods: {
+    //添加模块
+    addModule(type,h,jsonData){
+      let data = {
+        source:"click",//添加方式为点击
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      console.log(data);
+      this.$store.commit('template/addModule',data);
+    },
+    //拖拽开始
+    drag(type,h,jsonData){
+      let data = {
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      this.$store.commit('template/drag',data);
+    },
+    //拖拽结束
+    dragend(type,h,jsonData){
+      let data = {
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      this.$store.commit('template/dragend',data);
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .sectorBox {
+    height: 100%;
+    .sectorItemBox {
+      box-sizing: border-box;
+      padding: 0 20px 40px 20px;
+      height: 130px;
+      cursor: pointer;
+      .sectorItem {
+        border: 1px solid #333644;
+        padding: 10px;
+        border-radius: 8px;
+        &:hover {
+          background: #333644;
+          transform: scale(1.1);
+          transition: all 0.2s ease-in-out;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+      .sectorItemTitle {
+        color: #fff;
+        font-size: 14px;
+        padding: 10px 0 0 0;
+        text-align: center;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,222 @@
+<template>
+  <div class="sectorBox">
+    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/imgTitleSector.png"/>
+      </div>
+      <div class="sectorItemTitle">通栏广告</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('mainListSector',92,mainListSector)" @drag="drag('mainListSector',33,mainListSector)" @dragend="dragend('mainListSector',33,mainListSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/listSector.png"/>
+      </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="sectorItem">
+        <img src="@/assets/template/sector/newsSector.png"/>
+      </div>
+      <div class="sectorItemTitle">次级文章列表</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/linkSector.png"/>
+      </div>
+      <div class="sectorItemTitle">友情链接</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    type: {
+     
+    },
+  },
+  data() {
+    return {
+      //添加通栏广告模块 start---------------------------------------->
+      imgTitleSector:{
+        sectorName:"imgTitleSector",//板块名称
+        componentList:[
+          {
+            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{
+              ad_id:"",//广告位id
+              text:"通栏广告", //广告位名称
+              width:1200, //广告位宽度
+              height:60, //广告位高度
+            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+          }
+        ]
+      },
+      //添加通栏广告模块 start---------------------------------------->
+
+      //文章列表板块 start---------------------------------------->
+      listSector:{
+        sectorName:"listSector",//板块名称
+        componentList:[
+          {
+            component_type:7,//纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+        ]
+      },
+      //文章列表板块 end---------------------------------------->
+
+      //友情链接板块 start---------------------------------------->
+      friendShipLinkSector:{
+        sectorName:"friendShipLinkSector",//友情链接无需提交数据
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:4,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{}
+          }
+        ]
+      },
+      //友情链接板块 end---------------------------------------->
+
+      //主文章列表 start---------------------------------------->
+      mainListSector:{
+        sectorName:"mainListSector",//主文章列表
+        componentList:[
+          {
+            component_type:9, //页面必备组件类型
+            component_style:1,
+            component_name:"listMain",
+            sort:1,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:1,
+              listType:[
+                "title",
+                "created_time",//创建时间
+                //"author",//作者
+                //"imgUrl",//缩略图片
+                //"introduce",//描述
+              ]
+            }
+          },
+        ]
+      }
+      //主文章列表 end---------------------------------------->
+
+    }
+  },
+  methods: {
+    //添加模块
+    addModule(type,h,jsonData){
+      let data = {
+        source:"click",//添加方式为点击
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      console.log(data);
+      this.$store.commit('template/addModule',data);
+    },
+    //拖拽开始
+    drag(type,h,jsonData){
+      let data = {
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      this.$store.commit('template/drag',data);
+    },
+    //拖拽结束
+    dragend(type,h,jsonData){
+      let data = {
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      this.$store.commit('template/dragend',data);
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .sectorBox {
+    height: 100%;
+    .sectorItemBox {
+      box-sizing: border-box;
+      padding: 0 20px 40px 20px;
+      cursor: pointer;
+      .sectorItem {
+        border: 1px solid #333644;
+        padding: 10px;
+        border-radius: 8px;
+        &:hover {
+          background: #333644;
+          transform: scale(1.1);
+          transition: all 0.2s ease-in-out;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+      .sectorItemTitle {
+        color: #fff;
+        font-size: 14px;
+        padding: 10px 0 0 0;
+        text-align: center;
+      }
+    }
+  }
+</style>

src/layout/creatWebsite.vue

@@ -0,0 +1,104 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <componentMenu />
+    <div :class="{hasTagsView:needTagsView}" class="main-container">
+      <div :class="{'fixed-header':fixedHeader}">
+        <navbar />
+        <breadcrumb id="breadcrumb-container"/>
+      </div>
+      <app-main />
+    </div>
+  </div>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import componentMenu from './components/template/componentMenu.vue'
+
+export default {
+  name: 'Layout',
+  components: {
+    AppMain,
+    Navbar,
+    RightPanel,
+    Settings,
+    Sidebar,
+    TagsView,
+    Breadcrumb,
+    componentMenu
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/variables.scss";
+  
+
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    &.mobile.openSidebar {
+      position: fixed;
+      top: 0;
+    }
+  }
+
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 9;
+    width: calc(100% - #{$sideBarWidth});
+    transition: width 0.28s;
+  }
+
+  .hideSidebar .fixed-header {
+    width: calc(100% - 54px)
+  }
+
+  .mobile .fixed-header {
+    width: 100%;
+  }
+</style>

src/router/index.js

@@ -11,6 +11,7 @@ import componentsRouter from './modules/components'
 import chartsRouter from './modules/charts'
 import tableRouter from './modules/table'
 import nestedRouter from './modules/nested'
+import dangyunlong from './modules/dangyunlong'
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -39,6 +40,7 @@ import nestedRouter from './modules/nested'
  * all roles can be accessed
  */
 export const constantRoutes = [
+  ...dangyunlong,
   {
     path: '/redirect',
     component: Layout,

src/router/modules/dangyunlong.js

@@ -3,317 +3,6 @@ import Layout from '@/layout'
 import creatWebsite from '@/layout/creatWebsite'
 
 const dangyunlongRouter= [
-  {
-    path: '/website',
-    component: Layout,
-    children: [
-      {
-        name: '', //直接就是根目录所以为空
-        path: '',
-        component: () => import('@/views/website/WebsiteList'),
-        meta: {
-          title: '网站管理', // 设置菜单和面包屑显示的标题
-          hidden: true, // 不在侧边菜单显示
-          breadcrumb: true // 强制在面包屑中显示
-        }
-      }
-    ]
-  },
-  {
-    path: '/categoryList',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/website/categoryList'),
-        meta: {
-          title: '导航池',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/websiteColumn',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/website/websiteColumn'),
-        meta: {
-          title: '网站导航',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/editNavigation',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/website/editNavigation'),
-        meta: {
-          title: '栏目详情',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/articleList',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/news/NewList'),
-        meta: {
-          title: '资讯列表',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/creatNews',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/news/creatNews'),
-        meta: {
-          title: '添加资讯',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-
-
-  {
-    path: '/addGood',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/news/addGood'),
-        meta: {
-          title: '添加商品',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/menuList',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/menu/menulist'),
-        meta: {
-          title: '菜单列表',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/complaintList',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/complaint/complaintList'),
-        meta: {
-          title: '投诉举报',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/roleList',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/role/roleList'),
-        meta: {
-          title: '角色管理',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/userList',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/role/userList'),
-        meta: {
-          title: '用户管理',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/creatUser',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/role/creatUser'),
-        meta: {
-          title: '添加用户',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/department',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/menu/department'),
-        meta: {
-          title: '行政职能',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/hall',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/chat/hall'),
-        meta: {
-          title: '聊天',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/contacts',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/chat/contacts'),
-        meta: {
-          title: '通讯录',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/topic',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/chat/topic'),
-        meta: {
-          title: '课题',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/creatTopic',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/chat/creatTopic'),
-        meta: {
-          title: '编辑课题',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-
-  {
-    path: '/chatGroup',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/chat/chatGroup'),
-        meta: {
-          title: '编辑课题',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-
-   // ----fr-课题分类
-   {
-    path: '/topicType',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/chat/topicType'),
-        meta: {
-          title: '课题分类',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-// -----------fr---------
-
   {
     path: '/templateCreat',
     component: creatWebsite,
@@ -346,24 +35,6 @@ const dangyunlongRouter= [
       }
     ]
   },
-  {
-    path: '/profile',
-    component: Layout,
-    redirect: '/profile/index',
-    hidden: true,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/profile/index'),
-        name: 'Profile',
-        meta: {
-          title: '个人中心',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
   {
     path: '/templateStyle',
     component: Layout,
@@ -396,38 +67,5 @@ const dangyunlongRouter= [
       }
     ]
   },
-  {
-    path: '/jobHuntingList',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/news/jobHuntingList'),
-        meta: {
-          title: '求职信息',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/addJobHunting',
-    component: Layout,
-    children: [
-      {
-        name: '',
-        path: '',
-        component: () => import('@/views/news/addJobHunting'),
-        meta: {
-          title: '添加求职',
-          hidden: true,
-          breadcrumb: true
-        }
-      }
-    ]
-
-  },
 ]
 export default dangyunlongRouter

src/store/modules/template.js

@@ -0,0 +1,1700 @@
+//cms中的接口 获取网站基本信息，网站导航，网站底部导航，网站行政区划，行政职能
+import {getSiteInfo,getSiteCategory,getFooterCategoryList,selectWebsiteArea,selectWebsiteDepartment } from '@/api/cms'
+//自助建站的接口 用于添加基本信息
+import {getWebsiteintel,addWebsiteTemplateintel,getWebsiteTemplateintel,upWebsiteTemplateintel,getAllTemplateClass,getWebsiteTemplateList,addWebsiteTemplateclassintel,
+  getWebsiteTemplateclassintel,addWebsiteTemplate,getWebsiteTemplateInfo,getWebsiteTemplateData} from '@/api/template'
+
+import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
+
+import Vue from 'vue';  //导入Vue 因为我们要进行深层次的json修改，深拷贝的数据无法令视图更新
+//所以我们需要使用Vue的$set方法来强制视图更新，在vuex中没有this，这里我们需要通过引入vue来使用vue.$set
+
+//引入随机模板json
+//首页 风格1
+import randomIndex1 from '@/utils/templateJson/index/style1/1.js';
+//首页 风格2
+import randomIndex2 from '@/utils/templateJson/index/style1/2.js';
+
+const state = {
+  //0.全局配置 start------------------------------------------------------------> 
+  editWebsiteId: "",//当前编辑网站的id
+  editWebsiteClass:"",//当前编辑网站的风格
+  stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
+  //0.全局配置 end------------------------------------------------------------>
+  
+  //1.画布数据 start------------------------------------------------------------>
+  pageStatus:1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
+  menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
+  previewStatus:false,//是否预览
+  gridKey:0,//使用gridKey来强制更新视图
+  loading:false,//是否显示加载中
+  ad_id:"",//生成储存的广告id
+  showPage:{ //哪些页面可以被展示
+    index:true,
+    class:false,
+    list:true,
+    article:true,
+    search:false,
+    aloneList:false,
+    aloneArticle:false
+  },
+  pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
+    index:[
+      
+    ],//首页
+    class:[],//分类页
+    list:[],//列表页
+    article:[],//详情页
+    search:[],//搜索页
+    aloneList:[],//自定义列表页
+    aloneArticle:[],//自定义详情页
+  },
+  // layout: [
+  //   // i = id 
+  //   // w = 最大宽度是12
+  //   // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
+  //   // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
+  // ],
+  //1.画布数据 end------------------------------------------------------------>
+
+  //2.站点数据 start------------------------------------------------------------>
+  webSiteInfo:"",//网站信息
+  webSiteMenu:"",//网站包含的导航池
+  area:{//地区
+    economize:[],//省区
+    market:[],//市区
+    county:[]//县区
+  },
+  departmentList:[],//职能部门
+  //2.站点数据 end------------------------------------------------------------>
+
+  //3.画布构造 start------------------------------------------------------------>
+  editSectorY:0,//当前组件在画布中的位置
+  mouseXY:{//鼠标位置
+    "x": 12, 
+    "y": 33
+  },
+  DragPos:{//创建的占位符大小
+    "x": null, 
+    "y": null, 
+    "w": 12, 
+    "h": 2, 
+    "i": null
+  },
+  //获得gridlayout对象
+  gridlayoutObj:null,
+  //3.画布构造 end------------------------------------------------------------>
+
+  //4.构造的网站数据 start------------------------------------------------------------>
+  editWindowStatus:false,//编辑组件弹出框是否显示
+  editComponentWindowStatus:false,//选择组件样式弹出框是否显示
+  editWebsiteTemplateJsonWindow:false,//当前准备提交的数据 后期删除
+  editWindowTitle:"",//编辑弹出框标题
+  editSectorId:0,//当前正在编辑的板块id
+  editDataSort:0,//当前正在编辑的数据位置
+  editComponentSort:0,//当前正在编辑的组件id
+  editComponentType:0,//当前正在编辑的组件类型
+  editComponentSize:0,//当前组件展示的条数
+  editComponentStyle:0,//当前编辑的组件样式
+  editWebsiteCategory:[],//当前网站全部关联导航
+  webSiteData:{
+    //1.base网站基本信息
+    base:{
+      websiteId:"",//网站id
+    },
+    //2.style信息
+    style:{
+      styleId:"",//风格id
+    },
+    //3.板块信息 header,menu,footer 是页面自带的无需构建
+    template:{  
+      //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页
+      index:[],
+      class:[],//分类页
+      list:[],//列表页
+      article:[],//详情页
+      search:[],//搜索页
+      aloneList:[],//自定义列表页
+      aloneArticle:[],//自定义详情页
+    }
+  },
+  canSubmit:false,//当前数据是否可以被提交
+  //4.构造的网站数据 end------------------------------------------------------------>
+
+  //5.组件回显数据 start------------------------------------------------------------>
+  componentViewData:{
+    pid_arr:[],//导航池
+    pageSize:"",//展示条数
+    adName:"",//广告名称
+    titleName:"",//标题名称
+  }
+  //5.组件回显数据 start------------------------------------------------------------>
+}
+
+const mutations = {
+  //0.全局配置 start------------------------------------------------------------>
+  //设置网站的id
+  setEditWebsiteId(state,id){
+    state.editWebsiteId = id;
+  },
+  //设置网站的风格
+  setClassNumber(state,id){
+    state.editWebsiteClass = id;
+  },
+  //展示步骤
+  showStepStatus(state){
+    state.stepStatus = true;
+  },
+  //隐藏步骤
+  hiddenStepStatus(state){
+    state.stepStatus = false;
+  },
+  //设置步骤
+  setPageStatus(state,num){
+    state.pageStatus = num;
+  },
+  //设置预览状态
+  setPreviewStatus(state){
+    state.previewStatus = !state.previewStatus;
+  },
+  //打开编辑组件弹出框
+  setEditWindowStatus(state,data){
+    state.editWindowStatus = true;
+    state.editSectorId = data.id;
+    state.editSectorY = data.y;
+    state.editDataSort = data.dataSort;
+    state.editComponentSort = data.sort;
+    state.editComponentType = data.type;
+    state.editComponentSize = data.size;
+  },
+  //关闭编辑组件弹出框
+  closeEditWindowStatus(state){
+    state.editWindowStatus = false;
+  },
+  //打开选择组件样式弹出框
+  setComponentStyleStatus(state,data){
+    state.editComponentWindowStatus = true;
+    state.editSectorId = data.id;
+    state.editDataSort = data.dataSort;
+    state.editComponentSort = data.sort;
+    state.editComponentType = data.type;
+    state.editComponentStyle = data.style;
+  },
+  //关闭选择组件样式弹出框
+  closeComponentStyleStatus(state){
+    state.editComponentWindowStatus = false;
+  },
+  //关闭提交数据弹出框
+  closeEditWebsiteTemplateJsonWindow(state){
+    state.editWebsiteTemplateJsonWindow = false;
+  },
+  //选择组件样式
+  selectComponentStyleNumber(state,data){
+    state.editComponentStyle = data;
+  },
+  //设置组件回显数据
+  setComponentViewData(state,data){
+    //首页
+    if(state.pageStatus == 1){
+      //找到要修改的板块
+      const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
+      //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      if(state.editComponentType == 1){
+        state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //3=广告名称
+      if(state.editComponentType == 3){
+        state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+      //7=标题
+      if(state.editComponentType == 7){
+        state.componentViewData.titleName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+    }
+    //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=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      if(state.editComponentType == 1){
+        state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //3=广告名称
+      if(state.editComponentType == 3){
+        state.componentViewData.adName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+      //7=标题
+      if(state.editComponentType == 7){
+        state.componentViewData.titleName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+    }
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){
+      
+      const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
+      //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      if(state.editComponentType == 1){
+        state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //3=广告名称
+      if(state.editComponentType == 3){
+        state.componentViewData.adName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+      //7=标题
+      if(state.editComponentType == 7){
+        state.componentViewData.titleName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+    }
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
+  },
+  //生成一个随机的广告id
+  getRandomAdid(state){
+    //网站id
+    const websiteId = state.editWebsiteId;
+    // 生成 3 个随机字母 (a-z)
+    const randomLettersOne = Math.random().toString(36).substring(2, 5);  // 生成随机字母并去除前面的 "0."
+    // 获取当前时间戳（毫秒级）
+    const timestamp = Date.now();
+    // 生成 5 个随机字母 (a-z)
+    const randomLettersTwo = Math.random().toString(36).substring(2, 7);  // 生成随机字母并去除前面的 "0."
+    // 拼接时间戳和随机字母生成唯一 ID
+    const ad_id = `${websiteId}${randomLettersOne}${timestamp}${randomLettersTwo}`;
+    state.ad_id = ad_id;
+  },
+  //0.全局配置 start------------------------------------------------------------>
+  //1.配置模块 start------------------------------------------------------------>
+  //获得gridlayout对象
+  setGridlayoutObj(state,data){
+    state.gridlayoutObj = data;
+  },
+  //添加板块
+  addModule(state,data){
+    //pageStatus==1 首页 index
+    if(state.pageStatus == 1){
+      //开始复制 start------------------------------------------------------------>
+      //判断当前一共有多少个模块最多能添加10个
+      if(state.pageData.index.length >= 10){
+        Message.error('最多只能添加10个模块！');
+        return;
+      }else{
+        console.log(data.jsonData)
+        //判断是拖拽的还是点击添加进来的 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.index.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.index.length;
+          //判断添加的是否为广告模块 如果是 添加一个ad_id
+          if(data.jsonData.componentList[0].component_type==3){
+            this.commit("template/getRandomAdid")
+            //添加板块id  
+            state.pageData.index.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,
+              adid: state.ad_id,
+              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+              content:data.jsonData,
+              dataSort:dataSort,
+            });
+          }else{
+            state.pageData.index.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.index);
+        }
+
+        //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.index.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.index.length;
+          //判断添加的是否为广告模块 如果是 添加一个ad_id
+          if(data.jsonData.componentList[0].component_type==3){
+            this.commit("template/getRandomAdid")
+            //添加板块id  
+            state.pageData.index.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,
+              adid: state.ad_id,
+              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+              content:data.jsonData,
+              dataSort:dataSort,
+            });
+          }else{
+            state.pageData.index.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.index);
+          //需要调查一下这里最后的1，1
+          state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1,1);
+          try {
+            state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display="block";
+          } catch {}
+        }
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
+    //pageStatus==2 分类页 class
+    if(state.pageStatus == 2){}
+    //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;
+          //判断添加的是否为广告模块 如果是 添加一个ad_id
+          if(data.jsonData.componentList[0].component_type==3){
+            this.commit("template/getRandomAdid")
+            //添加板块id  
+            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,
+              adid: state.ad_id,
+              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+              content:data.jsonData,
+              dataSort:dataSort,
+            });
+          }else{
+            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;
+          //判断添加的是否为广告模块 如果是 添加一个ad_id
+          if(data.jsonData.componentList[0].component_type==3){
+            this.commit("template/getRandomAdid")
+            //添加板块id  
+            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,
+              adid: state.ad_id,
+              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+              content:data.jsonData,
+              dataSort:dataSort,
+            });
+          }else{
+            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 {}
+        }
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
+    //pageStatus==4 详情页 article
+    if(state.pageStatus == 4){
+      //开始复制 start------------------------------------------------------------>
+      //判断当前一共有多少个模块最多能添加10个
+      if(state.pageData.article.length >= 10){
+        Message.error('最多只能添加10个模块！');
+        return;
+      }else{
+        //判断添加的是否为广告模块 如果是 添加一个ad_id
+        if(data.jsonData.componentList[0].component_type==3){
+          //生成一个随机的ad_id给广告模块
+          this.commit("template/getRandomAdid");
+          console.log("添加广告模块！id为：" + state.ad_id)
+          data.jsonData.componentList[0].componentData.ad_id = state.ad_id;
+        }
+        
+        //判断是拖拽的还是点击添加进来的 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;
+          //判断添加的是否为广告模块 如果是 添加一个ad_id
+          if(data.jsonData.componentList[0].component_type==3){
+            this.commit("template/getRandomAdid")
+            //添加板块id  
+            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,
+              adid: state.ad_id,
+              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+              content:data.jsonData,
+              dataSort:dataSort,
+            });
+          }else{
+            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;
+          //判断添加的是否为广告模块 如果是 添加一个ad_id
+          if(data.jsonData.componentList[0].component_type==3){
+            this.commit("template/getRandomAdid")
+            //添加板块id  
+            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,
+              adid: state.ad_id,
+              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+              content:data.jsonData,
+              dataSort:dataSort,
+            });
+          }else{
+            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 {}
+        }
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
+    //pageStatus==5 搜索页 search
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页 aloneList
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页 aloneArticle
+    if(state.pageStatus == 7){}
+  },
+  //删除板块
+  deleteModule(state,data){
+    //data.i = id
+    //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);
+    }
+    //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('未找到要删除的模块！');
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
+    //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------------------------------------------------------------>
+    }
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
+  },
+  //设置组件样式
+  setComponentStyleNumber(state,data){
+    let id = state.editSectorId;
+    let dataSort = state.editDataSort;
+    let sort = state.editComponentSort;
+    let num = state.editComponentStyle;
+    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;
+      //确保修改属性时 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.index, dataSort, module);
+      console.log("当前的板块数据为：");
+      console.log(state.pageData.index);
+      //开始复制 end------------------------------------------------------------>
+    }
+    //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------------------------------------------------------------>
+    }
+    //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------------------------------------------------------------>
+    }
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
+  },
+  //保存组件设置的数据
+  saveComponentData(state,data){
+    //传入的板块id
+    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) //找到要修改的板块
+      console.log(targetModuleIndex) //找到要修改的板块
+      //console.log(targetModuleIndex) //找到要修改的板块
+      //state.pageData.index[targetModuleIndex].content.componentList[data.sort] //当前编辑的组件 
+      //data.data.pid_arr //导航池
+      //state.editComponentSize //展示条数
+
+      //判断数据的类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      //1=普通新闻
+      //注意，vue有一个bug就是，当你修改复杂对象的时候，如果对象的内部是数组
+      //vue可能无法检测到变化，而当你修改无法被检测变化的数据时，就会把所有数据都修改成相同的值
+      //解决办法是通过vue的set方法将整个对象，即你的数组外层那个对象进行深拷贝，然后修改完再替换回去
+      if(state.editComponentType == 1){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.index[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.index, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.index[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.index, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
+      }
+      //3=广告
+      if(state.editComponentType == 3){;
+        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.adName;
+        Vue.set(state.pageData.index, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
+      }
+      //4=友情链接
+      //if(state.editComponentType == 4){}
+      //6=静态组件
+      //if(state.editComponentType == 6){}
+      //7=文本
+      if(state.editComponentType == 7){
+        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.titleName;
+        Vue.set(state.pageData.index, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
+      }
+      //8=评论
+      //if(state.editComponentType == 8){}
+      //开始复制 end------------------------------------------------------------>
+    }
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //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){
+      //开始复制 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.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        // 获取当前模块数据并进行深拷贝
+        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.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //3=广告
+      if(state.editComponentType == 3){;
+        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.adName;
+        Vue.set(state.pageData.article, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //7=文本
+      if(state.editComponentType == 7){
+        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.titleName;
+        Vue.set(state.pageData.article, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //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 首页
+    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
+          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 {
+
+        }
+        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');
+        }
+      }
+      //开始复制 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------------------------------------------------------------>
+    }
+    // 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------------------------------------------------------------>
+    }
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
+  },
+  //拖拽结束 定位落点
+  dragend(state, data) {
+    // pageStatus == 1 首页
+    if (state.pageStatus == 1) {
+      //开始复制 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.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+
+        // UNCOMMENT below if you want to add a grid-item
+        /*
+        this.layout.push({
+            x: DragPos.x,
+            y: DragPos.y,
+            w: 1,
+            h: 1,
+            i: DragPos.i,
+        });
+        this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
+        try {
+            this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
+        } catch {
+        }
+        */
+        let sendData = {
+          source:"drag",//添加时判断此模块来自外部拖拽，而不是点击
+          type:data.type,
+          h:data.h,
+          jsonData:data.jsonData,
+          x: state.DragPos.x,
+          y: state.DragPos.y,
+          w: 12,
+        }
+        //开发到这里了，注意我可能还需要上面那个 this.$refs.gridLayout.dragEvent方法
+        this.commit('template/addModule',sendData);
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
+    // 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]);
+    }
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {
+      console.log(data);
+      state.pageData.article[data.i].h = data.h;
+      console.log(state.pageData.article[data.i]);
+    }
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
+  },
+  //格式化模板信息
+  formatTemplateInfo(state, data) {
+    // 深拷贝数据，避免直接修改原数据
+    let clonedData = JSON.parse(JSON.stringify(data));
+    // 把ad_id传进去
+    for(let item of clonedData.data){
+      if(item.adid){
+        item.content.componentList[0].componentData.ad_id = item.adid;
+      }
+    }
+    // 按照 clonedData.data.y 的大小排序
+    clonedData.data.sort((a, b) => a.y - b.y);
+    //console.log(clonedData, clonedData);
+    let websiteData = [];
+    // 获取板块的 sort
+    for (let index = 0; index < clonedData.data.length; index++) {
+      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);
+      // }
+      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;
+    }
+    if (data.type == "article") {
+      state.webSiteData.template.article = websiteData;
+    }
+  },
+  //保存模板
+  saveTemplate(state) {
+    //临时展示保存的数据 后期移除
+    state.editWebsiteTemplateJsonWindow = true;
+    //调用mutations中的方法无需使用$store
+    //格式化index的信息
+    this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
+    //格式化list的信息
+    this.commit('template/formatTemplateInfo',{data:state.pageData.list,type:"list"});
+    //格式化article的信息
+    this.commit('template/formatTemplateInfo',{data:state.pageData.article,type:"article"});
+    // console.log(state.webSiteData);
+    // console.log(state.editWebsiteId)
+    //给与网站id和模板风格id
+    state.webSiteData.base.websiteId = state.editWebsiteId;
+    state.webSiteData.style.styleId = state.editWebsiteClass;
+  },
+  //随机生成模板
+  randomTemplate(state){
+    state.loading = true;
+    const randomIndex = Math.floor(Math.random() * 2); // Generates a random number between 1 and 2
+    console.log(`随机生成的数字是: ${randomIndex}`);
+    //console.log(randomIndex1)
+    //console.log(randomIndex2)
+    //Message.warning("该功能研发中");
+
+    // pageStatus == 1 首页
+    if (state.pageStatus == 1) {
+      // 先清空里面的内容
+      Vue.set(state.pageData, 'index', []);
+      // 深拷贝 randomIndex1 和 randomIndex2
+      const newData1 = JSON.parse(JSON.stringify(randomIndex1));
+      const newData2 = JSON.parse(JSON.stringify(randomIndex2));
+      if (randomIndex == 0) {
+        Vue.set(state.pageData, 'index', newData1);
+      }
+      if (randomIndex == 1) {
+        Vue.set(state.pageData, 'index', newData2);
+      }
+      state.loading = false;
+    }
+    // pageStatus == 2 分类页
+    if (state.pageStatus == 2) {}
+    // pageStatus == 3 列表页
+    if (state.pageStatus == 3) {
+      Message.warning("暂无模板可用！");
+      state.loading = false;
+    }
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {
+      Message.warning("暂无模板可用！");
+      state.loading = false;
+    }
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
+  },
+  //提交数据之前执行完整度检查
+  IntegrityCheck(state){
+    //先设置为true看能否通过判断
+    state.canSubmit = true;
+    //先判断当前有哪几个板块可用
+    //state.canSubmit == false 不可以提交
+    //state.canSubmit == true 可以提交
+    //首页
+    if(state.showPage.index == true){
+      if(state.template.index == []){
+        state.canSubmit = false;
+      }
+    }
+    //分类页
+    if(state.showPage.class == true){
+      if(state.template.class == []){
+        state.canSubmit = false;
+      }
+    }
+    //列表页
+    if(state.showPage.list == true){
+      if(state.template.list == []){
+        state.canSubmit = false;
+      }
+    }
+    //详情页
+    if(state.showPage.article == true){
+      if(state.template.article == []){
+        state.canSubmit = false;
+      }
+    }
+    //搜索页
+    if(state.showPage.search == true){
+      if(state.template.search == []){
+        state.canSubmit = false;
+      }
+    }
+    //自定义列表页
+    if(state.showPage.aloneList == true){
+      if(state.template.aloneList == []){
+        state.canSubmit = false;
+      }
+    }
+    //自定义详情页
+    if(state.showPage.aloneArticle == true){
+      if(state.template.aloneArticle == []){
+        state.canSubmit = false;
+      }
+    }
+
+    //最后判断一下是否可以提交
+    if(state.canSubmit == ture){
+
+    }else{
+      Message.error('您还有未构建的页面，请检查！');
+    }
+  },
+  //1.配置模块 end------------------------------------------------------------>
+
+  //2.获取站点信息 start------------------------------------------------------------>
+  //获取站点详情
+  setWebsiteInfo(state,data){
+    state.webSiteInfo = data;
+  },
+  //获取站点导航池
+  setGetSiteCategory(state,data) {
+    state.webSiteMenu = data;
+  },
+  //设置地区
+  setArea(state,data){
+    //都没有的时候返回的是省
+    if(data.province==undefined){
+      state.area.economize = data;
+    }
+    //没有region的时候返回的是市
+    if(data.province!=undefined&&data.city!=undefined&&data.region==undefined){
+      state.area.market = data.city;
+    }
+    //有region的时候返回的是县
+    if(data.province!=undefined&&data.city!=undefined&&data.region!=undefined){
+      state.area.county = data.region;
+    }
+  },
+  //设置职能
+  setDepartment(state,data){
+    for(let item of data){
+      let options = {
+        value: item.id,
+        label: item.name
+      }
+      state.departmentList.push(options)
+    }
+    console.log(state.departmentList)
+  },
+  //获取全部导航
+  setWebsiteCategory(state,data){
+    let arrayData = []
+    for(let item of data){
+      let options = {
+        key:item.id,
+        label:item.name,
+        value:item.id
+      }
+      arrayData.push(options);
+    }
+    state.editWebsiteCategory = arrayData;
+  },
+  //2.获取站点信息 end------------------------------------------------------------>
+}
+
+const actions = {
+  //1.显示画板组件数据 start------------------------------------------------------------>
+  //1.1 获取网站基本信息
+  getSiteInfo({commit},data){
+    return new Promise((resolve, reject) => {
+      getSiteInfo(data).then(response => {
+        commit('setWebsiteInfo', response.data);
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //1.2 获取网站导航池
+  getSiteCategory({commit},data){
+    return new Promise((resolve, reject) => {
+      getSiteCategory(data).then(response => {
+        commit('setGetSiteCategory', response.data);
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //1.3 获取网站底部导航
+  getFooterCategoryList({commit},data){
+    return new Promise((resolve, reject) => {
+      getFooterCategoryList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //1.4 获取行政区划
+  selectWebsiteArea({commit},data){
+    return new Promise((resolve, reject) => {
+      selectWebsiteArea(data).then(response => {
+        commit('setArea', response.data);
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //1.5 获取所有职能部门
+  selectWebsiteDepartment({commit},data){
+    return new Promise((resolve, reject) => {
+      selectWebsiteDepartment(data).then(response => {
+        commit('setDepartment', response.data);
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //1.显示画板组件数据 end------------------------------------------------------------>
+  
+  //2.构建网站json start------------------------------------------------------------>
+  //2.1 搜索网站
+  getWebsiteintel({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
+  addWebsiteTemplateintel({commit},data){
+    return new Promise((resolve, reject) => {
+      addWebsiteTemplateintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.3 获取网站基本信息
+  getWebsiteTemplateintel({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.4 修改网站基本信息
+  upWebsiteTemplateintel({commit},data){
+    return new Promise((resolve, reject) => {
+      upWebsiteTemplateintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.5 获取所有风格
+  getAllTemplateClass({commit},data){
+    return new Promise((resolve, reject) => {
+      getAllTemplateClass(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.6 搜索并获取所有网站风格
+  getWebsiteTemplateList({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.7 保存用户选择的风格
+  addWebsiteTemplateclassintel({commit},data){
+    return new Promise((resolve, reject) => {
+      addWebsiteTemplateclassintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.8 获取用户选择的风格
+  getWebsiteTemplateclassintel({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateclassintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.9 保存模板
+  addWebsiteTemplate({commit},data){
+    return new Promise((resolve, reject) => {
+      addWebsiteTemplate(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.10 获取模板配置
+  getWebsiteTemplateInfo({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateInfo(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.11 预览模板信息
+  getWebsiteTemplateData({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateData(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.构建网站json end------------------------------------------------------------>
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/utils/templateJson/index/style1/1.js

@@ -0,0 +1,287 @@
+const json = [
+    {
+        "i": 1738997535959,
+        "x": 0,
+        "y": 0,
+        "w": 12,
+        "h": 33,
+        "type": "bannerSector",
+        "content": {
+            "sectorName": "bannerSector",
+            "componentList": [
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "mainTitle",
+                    "sort": 1,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 1,
+                        "listType": [
+                            "title"
+                        ]
+                    }
+                },
+                {
+                    "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 0,
+        "moved": false
+    },
+    {
+        "i": 1738997538031,
+        "x": 0,
+        "y": 33,
+        "w": 12,
+        "h": 49,
+        "type": "manyPictureSector",
+        "content": {
+            "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 1,
+        "moved": false
+    },
+    {
+        "i": 1738997540254,
+        "x": 0,
+        "y": 82,
+        "w": 12,
+        "h": 44,
+        "type": "commentSector",
+        "content": {
+            "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": {}
+                }
+            ]
+        },
+        "dataSort": 2,
+        "moved": false
+    },
+    {
+        "i": 1738997543774,
+        "x": 0,
+        "y": 126,
+        "w": 12,
+        "h": 33,
+        "type": "listSector",
+        "content": {
+            "sectorName": "listSector",
+            "componentList": [
+                {
+                    "component_type": 7,
+                    "component_style": 1,
+                    "component_name": "styleTitle",
+                    "sort": 1,
+                    "componentData": {
+                        "text": "板块标题"
+                    }
+                },
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "listNews",
+                    "sort": 2,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 5,
+                        "listType": [
+                            "title",
+                            "created_time"
+                        ]
+                    }
+                },
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "listNews",
+                    "sort": 3,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 5,
+                        "listType": [
+                            "title",
+                            "created_time"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 3,
+        "moved": false
+    },
+    {
+        "i": 1738997544958,
+        "x": 0,
+        "y": 159,
+        "w": 12,
+        "h": 32,
+        "type": "onlyImgSector",
+        "content": {
+            "sectorName": "onlyImgSector",
+            "componentList": [
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "",
+                    "sort": 1,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 7,
+                        "listType": [
+                            "title",
+                            "imgUrl"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 4,
+        "moved": false
+    },
+    {
+        "i": 1738997545726,
+        "x": 0,
+        "y": 191,
+        "w": 12,
+        "h": 20,
+        "type": "friendShipLinkSector",
+        "content": {
+            "sectorName": "friendShipLinkSector",
+            "componentList": [
+                {
+                    "component_type": 7,
+                    "component_style": 1,
+                    "component_name": "styleTitle",
+                    "sort": 1,
+                    "componentData": {
+                        "text": "板块标题"
+                    }
+                },
+                {
+                    "component_type": 4,
+                    "component_style": 1,
+                    "component_name": "",
+                    "sort": 1,
+                    "componentData": {}
+                }
+            ]
+        },
+        "dataSort": 5,
+        "moved": false
+    }
+]
+
+export default json;

src/utils/templateJson/index/style1/2.js

@@ -0,0 +1,227 @@
+const json = [
+    {
+        "i": 1738997623000,
+        "x": 0,
+        "y": 0,
+        "w": 12,
+        "h": 49,
+        "type": "manyPictureSector",
+        "content": {
+            "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 0,
+        "moved": false
+    },
+    {
+        "i": 1738997626974,
+        "x": 0,
+        "y": 49,
+        "w": 12,
+        "h": 33,
+        "type": "listSector",
+        "content": {
+            "sectorName": "listSector",
+            "componentList": [
+                {
+                    "component_type": 7,
+                    "component_style": 1,
+                    "component_name": "styleTitle",
+                    "sort": 1,
+                    "componentData": {
+                        "text": "板块标题"
+                    }
+                },
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "listNews",
+                    "sort": 2,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 5,
+                        "listType": [
+                            "title",
+                            "created_time"
+                        ]
+                    }
+                },
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "listNews",
+                    "sort": 3,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 5,
+                        "listType": [
+                            "title",
+                            "created_time"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 1,
+        "moved": false
+    },
+    {
+        "i": 1738997629824,
+        "x": 0,
+        "y": 82,
+        "w": 12,
+        "h": 44,
+        "type": "commentSector",
+        "content": {
+            "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": {}
+                }
+            ]
+        },
+        "dataSort": 2,
+        "moved": false
+    },
+    {
+        "i": 1738997631878,
+        "x": 0,
+        "y": 126,
+        "w": 12,
+        "h": 32,
+        "type": "onlyImgSector",
+        "content": {
+            "sectorName": "onlyImgSector",
+            "componentList": [
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "",
+                    "sort": 1,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 7,
+                        "listType": [
+                            "title",
+                            "imgUrl"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 3,
+        "moved": false
+    },
+    {
+        "i": 1738997637782,
+        "x": 0,
+        "y": 158,
+        "w": 12,
+        "h": 20,
+        "type": "friendShipLinkSector",
+        "content": {
+            "sectorName": "friendShipLinkSector",
+            "componentList": [
+                {
+                    "component_type": 7,
+                    "component_style": 1,
+                    "component_name": "styleTitle",
+                    "sort": 1,
+                    "componentData": {
+                        "text": "板块标题"
+                    }
+                },
+                {
+                    "component_type": 4,
+                    "component_style": 1,
+                    "component_name": "",
+                    "sort": 1,
+                    "componentData": {}
+                }
+            ]
+        },
+        "dataSort": 4,
+        "moved": false
+    }
+]
+
+export default json;

src/views/template/page/pageArticle.vue

@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 无内容占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.article.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>请点击一个左侧板块，开始您的网站创建</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <div id="content">
+      <grid-layout 
+        ref="gridlayout"
+        :layout="this.$store.state.template.pageData.article" 
+        :layout.sync="this.$store.state.template.pageData.article"
+        :col-num="12" 
+        :row-height="rowHeight" 
+        :margin="[0,0]" 
+        :is-draggable="true" 
+        :is-resizable="true" 
+        :key="this.$store.state.template.gridKey
+        ">
+        <grid-item 
+          v-for="(item, index) in this.$store.state.template.pageData.article" 
+          :key="item.i" 
+          :i="item.i" 
+          :x="item.x" 
+          :y="item.y" 
+          :w="item.w" 
+          :h="item.h" 
+          :is-resizable="false">
+          <div class="grid-item-content">
+            <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
+              <!-- 移动板块-->
+              <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
+              <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
+              <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
+            </div>
+            <!-- 4.广告模块 -->
+            <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 == 'mainArticle'" class="moduleBox">
+              <mainArticle :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+          </div>
+        </grid-item>
+      </grid-layout>
+    </div>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+import {GridLayout, GridItem} from "vue-grid-layout";
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+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 mainArticle from '../style/1/sector/12.vue';//文章详情
+//自助建站组件 end------------------------------------------------------------>
+
+
+export default {
+  components: {
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector,
+    mainArticle
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 end------------------------------------------------------------>
+    }
+  },
+  mounted() {
+    //必备操作
+    //1.获得vuex中的鼠标对象
+    let mouseObj = this.$store.state.template.mouseXY;
+    //2.获得gridlayout对象
+    this.$store.commit('template/setGridlayoutObj',this.$refs.gridlayout);
+    //3.监听鼠标按住以后的移动事件
+    document.addEventListener("dragover", function (e,store) {
+      mouseObj.x = e.clientX;
+      mouseObj.y = e.clientY;
+      // mouseXY.x = e.clientX;
+      // mouseXY.y = e.clientY;
+    },false);
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //0.1上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.2下一步
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.模块操作 start ------------------------------------------------------------>
+    //1.1 移动模块
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
+    },
+    //1.2 删除模块
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
+    },
+    //1.3 打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+    //1.4 关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+    //1.模块操作 end ------------------------------------------------------------>
+  }
+}
+</script>
+
+<style scoped lang="less">
+//拖拽demo
+.droppable-element {
+  width: 150px;
+  text-align: center;
+  background: #fdd;
+  border: 1px solid black;
+  margin: 10px 0;
+  padding: 10px;
+}
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+  border: 2px dashed #eee;
+}
+.moduleBox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  justify-content: space-between;
+  box-sizing: border-box;
+  //border: 2px dashed #eee;
+}
+.moduleBoxBorder {
+  border: 2px dashed #eee;
+}
+//固定的模块
+.FixedModuleBox {
+  width: 100%;
+  margin-bottom: 20px;
+  //border: 2px dashed #eee;
+}
+.FixedModuleBoxBottom {
+  width: 100%;
+}
+.FixedMainModuleBox {
+  width: 100%;
+  font-size: 18px;
+  color: #999;
+  text-align: center;
+  img {
+    margin-bottom: 20px;
+  }
+  padding: 100px;
+  //background: #F5F7FB;
+  margin-bottom: 20px;
+}
+.FixedMainModuleBoxBorder {
+  border: 2px dashed #eee;
+}
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+.grid-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  
+  .grid-tools-menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      width: 38px;
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      font-size: 30px;
+      cursor: pointer;
+      color: #999;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      // cursor: pointer;
+      // margin: 5px;
+      // color: #000;
+      // background: #fff;
+      // border: 1px solid #000;
+      // border-radius: 5px;
+      // width: 24px;
+      // height: 24px;
+      // line-height: 24px;
+      // text-align: center;
+      // font-size: 14px;
+      // transition: all 0.3s;
+      // &:hover {
+      //   color: #fff;
+      //   background: #000;
+      // }
+      transition: all 0.3s;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+}
+.grid-layout {
+  grid-gap: 0;
+  row-gap: 0;
+}
+//栅格布局 end------------------------------------------------------------> 
+//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用户拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
+::v-deep .shadowBox .el-button--mini.is-circle {
+  border-radius: 50% !important;
+}
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/page/pageIndex.vue

@@ -0,0 +1,316 @@
+<template>
+  <div>
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 无内容占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>请点击一个左侧板块，开始您的网站创建</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <div id="content">
+      <grid-layout 
+        ref="gridlayout"
+        :layout="this.$store.state.template.pageData.index" 
+        :layout.sync="this.$store.state.template.pageData.index"
+        :col-num="12" 
+        :row-height="rowHeight" 
+        :margin="[0,0]" 
+        :is-draggable="true" 
+        :is-resizable="true" 
+        :key="this.$store.state.template.gridKey
+        ">
+        <grid-item 
+          v-for="(item, index) in this.$store.state.template.pageData.index" 
+          :key="item.i" 
+          :i="item.i" 
+          :x="item.x" 
+          :y="item.y" 
+          :w="item.w" 
+          :h="item.h" 
+          :is-resizable="false">
+          <div class="grid-item-content">
+            <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
+              <!-- 移动板块-->
+              <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
+              <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
+              <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
+            </div>
+            <!-- 4.广告模块 -->
+            <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>
+          </div>
+        </grid-item>
+      </grid-layout>
+    </div>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+import {GridLayout, GridItem} from "vue-grid-layout";
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+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';//底部
+//自助建站组件 end------------------------------------------------------------>
+
+
+export default {
+  components: {
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 end------------------------------------------------------------>
+    }
+  },
+  mounted() {
+    //必备操作
+    //1.获得vuex中的鼠标对象
+    let mouseObj = this.$store.state.template.mouseXY;
+    //2.获得gridlayout对象
+    this.$store.commit('template/setGridlayoutObj',this.$refs.gridlayout);
+    //3.监听鼠标按住以后的移动事件
+    document.addEventListener("dragover", function (e,store) {
+      mouseObj.x = e.clientX;
+      mouseObj.y = e.clientY;
+      // mouseXY.x = e.clientX;
+      // mouseXY.y = e.clientY;
+    },false);
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //0.1上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.2下一步
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.模块操作 start ------------------------------------------------------------>
+    //1.1 移动模块
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
+    },
+    //1.2 删除模块
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
+    },
+    //1.3 打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+    //1.4 关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+    //1.模块操作 end ------------------------------------------------------------>
+  }
+}
+</script>
+
+<style scoped lang="less">
+//拖拽demo
+.droppable-element {
+  width: 150px;
+  text-align: center;
+  background: #fdd;
+  border: 1px solid black;
+  margin: 10px 0;
+  padding: 10px;
+}
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+  border: 2px dashed #eee;
+}
+.moduleBox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  justify-content: space-between;
+  box-sizing: border-box;
+  //border: 2px dashed #eee;
+}
+.moduleBoxBorder {
+  border: 2px dashed #eee;
+}
+//固定的模块
+.FixedModuleBox {
+  width: 100%;
+  margin-bottom: 20px;
+  //border: 2px dashed #eee;
+}
+.FixedModuleBoxBottom {
+  width: 100%;
+}
+.FixedMainModuleBox {
+  width: 100%;
+  font-size: 18px;
+  color: #999;
+  text-align: center;
+  img {
+    margin-bottom: 20px;
+  }
+  padding: 100px;
+  //background: #F5F7FB;
+  margin-bottom: 20px;
+}
+.FixedMainModuleBoxBorder {
+  border: 2px dashed #eee;
+}
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+.grid-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  
+  .grid-tools-menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      width: 38px;
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      font-size: 30px;
+      cursor: pointer;
+      color: #999;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      // cursor: pointer;
+      // margin: 5px;
+      // color: #000;
+      // background: #fff;
+      // border: 1px solid #000;
+      // border-radius: 5px;
+      // width: 24px;
+      // height: 24px;
+      // line-height: 24px;
+      // text-align: center;
+      // font-size: 14px;
+      // transition: all 0.3s;
+      // &:hover {
+      //   color: #fff;
+      //   background: #000;
+      // }
+      transition: all 0.3s;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+}
+.grid-layout {
+  grid-gap: 0;
+  row-gap: 0;
+}
+//栅格布局 end------------------------------------------------------------> 
+//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用户拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
+::v-deep .shadowBox .el-button--mini.is-circle {
+  border-radius: 50% !important;
+}
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/page/pageList.vue

@@ -0,0 +1,306 @@
+<template>
+  <div>
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 无内容占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.list.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>请点击一个左侧板块，开始您的网站创建</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <div id="content">
+      <grid-layout 
+        ref="gridlayout"
+        :layout="this.$store.state.template.pageData.list" 
+        :layout.sync="this.$store.state.template.pageData.list"
+        :col-num="12" 
+        :row-height="rowHeight" 
+        :margin="[0,0]" 
+        :is-draggable="true" 
+        :is-resizable="true" 
+        :key="this.$store.state.template.gridKey
+        ">
+        <grid-item 
+          v-for="(item, index) in this.$store.state.template.pageData.list" 
+          :key="item.i" 
+          :i="item.i" 
+          :x="item.x" 
+          :y="item.y" 
+          :w="item.w" 
+          :h="item.h" 
+          :is-resizable="false">
+          <div class="grid-item-content">
+            <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
+              <!-- 移动板块-->
+              <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
+              <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
+              <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
+            </div>
+            <!-- 4.广告模块 -->
+            <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
+              <imgTitleSector :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>
+            <!-- 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>
+    </div>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+import {GridLayout, GridItem} from "vue-grid-layout";
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+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------------------------------------------------------------>
+
+
+export default {
+  components: {
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    mainListSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 end------------------------------------------------------------>
+    }
+  },
+  mounted() {
+    //必备操作
+    //1.获得vuex中的鼠标对象
+    let mouseObj = this.$store.state.template.mouseXY;
+    //2.获得gridlayout对象
+    this.$store.commit('template/setGridlayoutObj',this.$refs.gridlayout);
+    //3.监听鼠标按住以后的移动事件
+    document.addEventListener("dragover", function (e,store) {
+      mouseObj.x = e.clientX;
+      mouseObj.y = e.clientY;
+      // mouseXY.x = e.clientX;
+      // mouseXY.y = e.clientY;
+    },false);
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //0.1上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.2下一步
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.模块操作 start ------------------------------------------------------------>
+    //1.1 移动模块
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
+    },
+    //1.2 删除模块
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
+    },
+    //1.3 打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+    //1.4 关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+    //1.模块操作 end ------------------------------------------------------------>
+  }
+}
+</script>
+
+<style scoped lang="less">
+//拖拽demo
+.droppable-element {
+  width: 150px;
+  text-align: center;
+  background: #fdd;
+  border: 1px solid black;
+  margin: 10px 0;
+  padding: 10px;
+}
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+  border: 2px dashed #eee;
+}
+.moduleBox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  justify-content: space-between;
+  box-sizing: border-box;
+  //border: 2px dashed #eee;
+}
+.moduleBoxBorder {
+  border: 2px dashed #eee;
+}
+//固定的模块
+.FixedModuleBox {
+  width: 100%;
+  margin-bottom: 20px;
+  //border: 2px dashed #eee;
+}
+.FixedModuleBoxBottom {
+  width: 100%;
+}
+.FixedMainModuleBox {
+  width: 100%;
+  font-size: 18px;
+  color: #999;
+  text-align: center;
+  img {
+    margin-bottom: 20px;
+  }
+  padding: 100px;
+  //background: #F5F7FB;
+  margin-bottom: 20px;
+}
+.FixedMainModuleBoxBorder {
+  border: 2px dashed #eee;
+}
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+.grid-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  
+  .grid-tools-menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      width: 38px;
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      font-size: 30px;
+      cursor: pointer;
+      color: #999;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      // cursor: pointer;
+      // margin: 5px;
+      // color: #000;
+      // background: #fff;
+      // border: 1px solid #000;
+      // border-radius: 5px;
+      // width: 24px;
+      // height: 24px;
+      // line-height: 24px;
+      // text-align: center;
+      // font-size: 14px;
+      // transition: all 0.3s;
+      // &:hover {
+      //   color: #fff;
+      //   background: #000;
+      // }
+      transition: all 0.3s;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+}
+.grid-layout {
+  grid-gap: 0;
+  row-gap: 0;
+}
+//栅格布局 end------------------------------------------------------------> 
+//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用户拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
+::v-deep .shadowBox .el-button--mini.is-circle {
+  border-radius: 50% !important;
+}
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/public/CityCascader.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-cascader
+    :key="cascaderKey"
+    v-model="internalValue"
+    placeholder="选择您要绑定的城市"
+    :props="SearchCityData"
+    filterable
+    clearable
+    @change="handleChange">
+  </el-cascader>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { // 接收外部传递的 v-model 值
+      type: [Array, String], // 允许传入数组或字符串类型的数据
+      default: () => [],
+    },
+  },
+  data() {
+    let self = this;
+    return {
+      internalValue: [], // 用于与级联选择器进行双向绑定的内部数据
+      cascaderKey: 0, // 用于强制刷新 cascader
+      SearchCityData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad(node, resolve) {
+          const { level, data } = node;
+          let parentId = level == 0 ? 0 : data.value;
+          let parames = {
+            pid: parentId,
+          };
+          self.$store
+            .dispatch("pool/getcityList", parames)
+            .then((res) => {
+              if (res.data) {
+                const nodes = res.data.map((item) => ({
+                  value: item.id,
+                  label: item.name,
+                  leaf: level >= 3,
+                  children: [],
+                }));
+                resolve(nodes);
+              }
+            })
+            .catch(() => {
+              this.$message({
+                type: "info",
+                message: "网络错误，请重试！",
+              });
+            });
+        },
+      },
+    };
+  },
+  watch: {
+    value: {
+      immediate: true, // 组件挂载时立即执行
+      handler(newVal) {
+        try {
+          const parsedValue = Array.isArray(newVal) ? newVal : JSON.parse(newVal);
+          this.internalValue = parsedValue; // 设置内部值
+          if (parsedValue.length) {
+            this.loadCascaderPath(parsedValue); // 动态加载回显的路径
+          }
+        } catch (error) {
+          console.error("无法解析传入的值:", error);
+          this.internalValue = []; // 如果解析失败，重置为默认空数组
+        }
+      },
+    },
+  },
+  methods: {
+    handleChange(value) {
+      // 当选择变化时，向父组件发送更新的值
+      this.$emit("input", value); // v-model 双向绑定
+      this.$emit("update-city-id", value); // 额外事件，方便父组件监听
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+        await this.$store.dispatch('pool/getcityList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
+            }));
+            // 级联选择器加载数据
+            if (level === path.length - 1) {
+              this.internalValue = path; // 确保最后一级路径正确设置
+              this.cascaderKey += 1; // 强制刷新 cascader
+            }
+          });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 可根据需要自定义样式 */
+</style>

src/views/template/public/componentWindow.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="componentWindowBox">
+    <!--开发助手-->
+   <div class="testAssistant">
+      <div class="testAssistantTitle">
+        代码助手：
+      </div>
+      <div class="testAssistantContent">
+        <div class="testAssistantContentItem">
+          <div>当前板块id:</div>
+          <div>{{this.$store.state.template.editSectorId}}</div>
+        </div>
+        <div class="testAssistantContentItem">
+          <div>当前板块所在的页面:</div>
+          <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
+          <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
+          <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
+          <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
+          <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
+          <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页</div>
+          <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页</div>
+        </div>
+        <div class="testAssistantContentItem">
+          <div>当前组件在此板块中的位置:</div>
+          <div>{{this.$store.state.template.editComponentSort}}</div>
+        </div>
+        <div class="testAssistantContentItem">
+          <div>当前板块在Json数据中的位置:</div>
+          <div>{{this.$store.state.template.editDataSort}}</div>
+        </div>
+        <!--base0.0.1 如果展示原组件样式 会导致删除的时候 找不到content的数据非常奇怪 但是什么都不影响-->
+        <!-- <div class="testAssistantContentItem"><span>原组件样式:</span>{{this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.componentList[this.$store.state.template.editComponentSort].component_style}}</div> -->
+        <div class="testAssistantContentItem">
+          <div>当前组件样式:</div>
+          <div>{{this.$store.state.template.editComponentStyle}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="componentStyleBox">
+      <div class="componentStyleBoxContent">
+        <!--1.网站核心大标题组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 1" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/mainStyle1.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/mainStyle2.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--1.网站核心大标题组件 end---------------------------------------->
+        <!--2.板块文字标题 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 2" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/title1.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--2.板块文字标题 end---------------------------------------->
+        <!--3.广告组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/style1imgTitle.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/style2imgTitle.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                  <img src="@/assets/template/component/style3imgTitle.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                  <img src="@/assets/template/component/style4imgTitle.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--4.banner组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 4" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/banner_pic1.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/banner_pic2.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--4.banner组件 end---------------------------------------->
+        <!--5.tabs start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 5" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/tabsList1.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/tabsList2.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--5.tabs end---------------------------------------->
+        <!--6.list列表组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 6" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/list1.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/list2.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                  <img src="@/assets/template/component/list3.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--6.list列表组件 end---------------------------------------->
+        <!--7.staticHtml静态组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 7" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/fivePicture.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--7.staticHtml静态组件 end---------------------------------------->
+        <!--8.表单组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 8" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/form1.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--8.表单组件 end---------------------------------------->
+        <!--9.友情链接组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 9" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/linkStyle1.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--9.友情链接组件 end---------------------------------------->
+        <!--10.列表页-主文章列表 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 10" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/list/list3style.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--10.列表页-主文章列表 end---------------------------------------->
+        <!--11.详情页-主文章详情 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 11" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/article/article1style.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--11.详情页-主文章详情 end---------------------------------------->
+      </div>
+    </div>
+    <div class="componentWindowBoxFooter">
+      <el-button type="info" @click="closeEditWindow">取消</el-button>
+      <el-button type="primary" @click="submitData">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      //选择的组件样式
+      useStyleNumber:0,
+    }
+  },
+  methods: {
+    //选择组件样式
+    selectUseStyleNumber(number){
+      this.$store.commit('template/selectComponentStyleNumber',number);
+    },
+    //关闭选择组件样式弹出框
+    closeEditWindow(){
+      this.$store.commit('template/closeComponentStyleStatus');
+    },
+    //提交编辑的数据
+    submitData(){
+      //提交修改
+      this.$store.commit('template/setComponentStyleNumber');
+      //关闭窗口
+      this.$store.commit('template/closeComponentStyleStatus');
+      //当前保存完了的数据
+      //console.log(this.$store.state.template.pageData);
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .componentWindowBox {
+    .componentStyleBox {
+      height: 220px;
+      margin-bottom: 20px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      clear: both;
+      .componentScrollBox {
+        height: 200px;
+        display: flex; /* 使用 flex */
+        flex-wrap: wrap; /* 换行 */
+        .componentScrollBoxItem {
+          width: 200px;
+          height: 200px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-right: 10px;
+          background: #F5F7FB;
+          border:1px solid #F5F7FB;
+          overflow: hidden;
+          img {
+            width: 200px;
+            display: block;
+          }
+          &:hover {
+            border:1px solid #19499F;
+            background: #e5e5ff;
+            cursor: pointer;
+          }
+          transition: all 0.3s;
+        }
+        .active {
+          border:1px solid #19499F;
+          background: #e5e5ff;
+        }
+      }
+    }
+    .componentWindowBoxFooter {
+      text-align: right;
+    }
+  }
+</style>

src/views/template/public/convertBtn.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="templateEditBtnBox" @click="openComponentListWindow" v-if="this.$store.state.template.previewStatus==false">
+    <i class="el-icon-scissors"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type:Number,
+      default:0
+    },
+    dataSort: {
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    },
+    type:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    openComponentListWindow(){
+      //判断编辑的是哪个页面的组件style
+      let style = 0;
+      if(this.$store.state.template.pageStatus==1){
+        style = this.$store.state.template.pageData.index[this.dataSort].content.componentList[this.sort].component_style;
+      }
+      if(this.$store.state.template.pageStatus==2){}
+      if(this.$store.state.template.pageStatus==3){
+        style = this.$store.state.template.pageData.list[this.dataSort].content.componentList[this.sort].component_style;
+      }
+      if(this.$store.state.template.pageStatus==4){
+        style = this.$store.state.template.pageData.article[this.dataSort].content.componentList[this.sort].component_style;
+      }
+      if(this.$store.state.template.pageStatus==5){}
+      if(this.$store.state.template.pageStatus==6){}
+      if(this.$store.state.template.pageStatus==7){}
+
+      let data = {
+        id:this.id,
+        dataSort:this.dataSort,
+        sort:this.sort,
+        type:this.type,
+        style:style
+      }
+      console.log(data);
+      this.$store.commit('template/setComponentStyleStatus',data);
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .templateEditBtnBox {
+    position: absolute;
+    top: 0;
+    left: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin: 5px;
+    color: #666;
+    background: rgba(255,255,255,0.5);
+    border-radius: 5px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    font-size: 30px;
+    transition: all 0.3s;
+    z-index: 999;
+    &:hover {
+      color: #333;
+    }
+  }
+</style>

src/views/template/public/editBtn.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="templateEditBtnBox" @click="openEditWindow" v-if="this.$store.state.template.previewStatus==false">
+    <i class="el-icon-setting"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type:Number,
+      default:0
+    },
+    dataSort: {
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    },
+    type:{//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+      type:Number,
+      default:0
+    },
+    size:{
+      type:Number,
+      default:0
+    },
+    y: {
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    openEditWindow(){
+      let data = {
+        id:this.id,
+        dataSort:this.dataSort,
+        sort:this.sort,
+        type:this.type,
+        size:this.size,
+        y:this.y
+      }
+      console.log(data);
+      //小助手
+      this.$store.commit('template/setEditWindowStatus',data);
+      //设置组件回显数据
+      this.$store.commit('template/setComponentViewData',data);
+      //获取全部导航
+      this.$store.dispatch('template/getWebsiteCategory',{pageSize:1000});
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .templateEditBtnBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin: 5px;
+    color: #666;
+    //border: 1px solid #000;
+    border-radius: 5px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    font-size: 30px;
+    transition: all 0.3s;
+    z-index: 999;
+    background: rgba(255,255,255,0.5);
+    &:hover {
+      color: #333;
+    }
+  }
+</style>

src/views/template/public/editBtnCanNot.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="templateEditBtnBox" @click="openEditWindow">
+    <i class="el-icon-setting"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    },
+    type:{//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+      type:Number,
+      default:0
+    },
+    size:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    openEditWindow(){
+      let data = {
+        id:this.id,
+        sort:this.sort,
+        type:this.type,
+        size:this.size
+      }
+      console.log(data);
+      this.$store.commit('template/setEditWindowStatus',data);
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .templateEditBtnBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin: 5px;
+    color: #000;
+    background: #fff;
+    border: 1px solid #000;
+    border-radius: 5px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    font-size: 14px;
+    transition: all 0.3s;
+    z-index: 999;
+    &:hover {
+      color: #fff;
+      background: #000;
+    }
+  }
+</style>

src/views/template/public/editWindow.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="editWindowBox">
+    <div class="editWindowBoxContent">
+      <!--组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论-->
+      <!--开发助手-->
+      <div class="testAssistant">
+        <div class="testAssistantTitle">
+          代码助手：
+        </div>
+        <div class="testAssistantContent">
+          <div class="testAssistantContentItem">
+            <div>当前板块id:</div>
+            <div>{{this.$store.state.template.editSectorId}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前板块所在的页面:</div>
+            <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
+            <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
+            <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
+            <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
+            <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
+            <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页</div>
+            <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前组件在此板块中的位置:</div>
+            <div>{{this.$store.state.template.editComponentSort}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前组件在此画布中的位置:</div>
+            <div>{{this.$store.state.template.editSectorY}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前板块在Json数据中的位置:</div>
+            <div>{{this.$store.state.template.editDataSort}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前组件的数据类型:</div>
+            <div v-if="this.$store.state.template.editComponentType == 1">新闻列表</div>
+            <div v-if="this.$store.state.template.editComponentType == 2">新闻选项卡</div>
+            <div v-if="this.$store.state.template.editComponentType == 3">广告</div>
+            <div v-if="this.$store.state.template.editComponentType == 4">友情链接</div>
+            <div v-if="this.$store.state.template.editComponentType == 6">静态html组件</div>
+            <div v-if="this.$store.state.template.editComponentType == 7">文本</div>
+            <div v-if="this.$store.state.template.editComponentType == 8">评论组件</div>
+            <div v-if="this.$store.state.template.editComponentType == 9">页面必备组件</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>展示条数:</div>
+            <div>{{this.$store.state.template.editComponentSize}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>回显导航池:</div>
+            <div v-if="this.$store.state.template.editComponentType == 1||this.$store.state.template.editComponentType == 2">
+              <span v-if="this.$store.state.template.componentViewData.pid_arr.length == 0">暂未选择导航</span>
+              <span v-else>{{this.$store.state.template.componentViewData.pid_arr}}</span>
+            </div>
+            <div v-else>无需回显</div>
+          </div>
+        </div>
+      </div>
+      <!--1.普通新闻类型-->
+      <div v-if="this.$store.state.template.editComponentType == 1">
+        <el-form :model="form.type1data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="新闻列表" disabled/>
+          </el-form-item>
+          <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
+            <el-cascader :key="oneParentKey" v-model="form.type1data.pid_arr" placeholder="请选择网站导航" :props="oneParentData" filterable clearable></el-cascader>
+          </el-form-item>
+          <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--2.tabs类型-->
+      <div v-if="this.$store.state.template.editComponentType == 2">
+        <el-form :model="form.type2data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="新闻选项卡" disabled/>
+          </el-form-item>
+          <!-- {{ this.$store.state.template.editWebsiteCategory }} -->
+          <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
+            <el-select v-model="form.type2data.pid_arr" multiple placeholder="请选择">
+              <el-option
+                v-for="item in this.$store.state.template.editWebsiteCategory"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <!-- <el-cascader :key="moreParentKey" @change="handleCascaderChange" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader> -->
+          </el-form-item>
+          <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--3.广告-->
+      <div v-if="this.$store.state.template.editComponentType == 3">
+        <el-form :model="form.type3data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="广告" disabled/>
+          </el-form-item>
+          <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
+            <el-input v-model="form.type3data.adName" placeholder="请输入广告位名称"/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--4.友情链接-->
+      <div v-if="this.$store.state.template.editComponentType == 4">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="友情链接暂不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--6.静态-->
+      <div v-if="this.$store.state.template.editComponentType == 6">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="静态组件暂不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--7.文字-->
+      <div v-if="this.$store.state.template.editComponentType == 7">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="文本" disabled/>
+          </el-form-item>
+          <el-form-item label="标题名称：" :label-width="formLabelWidth" prop="titleName" class="custom-align-right">
+            <el-input v-model="form.type7data.titleName" placeholder="请输入标题名称"/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--8.评论组件-->
+      <div v-if="this.$store.state.template.editComponentType == 8">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="评论组件暂不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--9.页面必备组件-->
+      <div v-if="this.$store.state.template.editComponentType == 9">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="页面必备组件不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="editWindowBoxFooter">
+      <el-button type="info" @click="closeEditWindow">取消</el-button>
+      <el-button type="primary" @click="submitData">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';  // 导入 Vue
+//监听vuex中的值
+export default {
+  props: {
+
+  },
+  data() {
+    let self = this;
+    const validatePid = (rule,value,callback) => {
+      console.log(value.length)
+      if (value.length === 0) {
+        callback(new Error('必须选择一个导航！'))
+      } else {
+        callback()
+      }
+    }
+    const validateEmpty = (rule,value,callback) => {
+      if (!value || value.trim() === "") {
+        callback(new Error('该项不能为空！'));
+      } else {
+        callback();
+      }
+    }
+    return {
+      formLabelWidth:"120px",
+      form:{
+        //单导航新闻
+        type1data:{
+          pid_arr:[],
+          pageSize:""
+        },
+        //tabs多导航新闻
+        type2data:{
+          pid_arr:[],
+          pageSize:""
+        },
+        //广告
+        type3data:{
+          adName:""
+        },
+        //文字
+        type7data:{
+          titleName:""
+        }
+      },
+      formRules:{
+        pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
+        adName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}],
+        titleName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}]
+      },
+      //获取单个导航id start---------------------------------------->
+      oneParentKey:0,
+      oneParentData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad (node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level)
+          let parentId = level == 0 ? 0 : data.value
+          let parames = {
+            'pid':parentId
+          }
+          self.$store.dispatch('pool/categoryList',parames).then(res=> {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+      //获取单个导航id end---------------------------------------->
+      //获取多个导航id start---------------------------------------->
+      moreParen:[],
+      // base 0.0.1 无法回显多选导航池
+      // 这里不能使用级联选择器，因为这里只能选择同级导航，你选了不同级的导航后端就乱套了
+      // moreParentData: {
+      //   checkStrictly: true,
+      //   multiple: true,
+      //   lazy: true,
+      //   async lazyLoad (node, resolve) {
+      //     const { level, data } = node;
+      //     if (data && data.children && data.children.length !== 0) {
+      //       return resolve(node)
+      //     }
+      //     console.log(level)
+      //     let parentId = level == 0 ? 0 : data.value
+      //     let parames = {
+      //       'pid':parentId
+      //     }
+      //     self.$store.dispatch('pool/categoryList',parames).then(res=> {
+      //       if (res.data) {
+      //         const nodes = res.data.map(item => ({
+      //           value: item.id,
+      //           label: item.name,
+      //           leaf: level >= 3,
+      //           children: []
+      //         }))
+      //         resolve(nodes)
+      //       }
+      //     })
+      //   }
+      // },
+      //获取导航id end---------------------------------------->
+    };
+  },
+  computed: {
+    // 映射 Vuex 的 state 到计算属性
+    // 监听导航池变化用于回显
+    getPid() {
+      return this.$store.state.template.componentViewData.pid_arr;
+    },
+    getadName(){
+      return this.$store.state.template.componentViewData.adName;
+    },
+    gettitleName(){
+      return this.$store.state.template.componentViewData.titleName;
+    }
+  },
+  watch: {
+    getPid(newVal, oldVal) {
+      console.log("导航池改变了！")
+      console.log(newVal, oldVal)
+      // 回显导航池 判断一下是单导航还是多导航
+      if(this.$store.state.template.editComponentType==1){
+        //base0.0.1 必须先赋值再创建nodes 否则可能无法回显
+        this.form.type1data.pid_arr = newVal;
+        this.loadCascaderPath(newVal);
+      }
+      if(this.$store.state.template.editComponentType==2){ 
+        this.form.type2data.pid_arr = newVal;
+      }
+    },
+    getadName(newVal, oldVal) {
+      console.log("广告文字改变了！")
+      console.log(newVal, oldVal)
+      this.form.type3data.adName = newVal;
+    },
+    gettitleName(newVal, oldVal) {
+      console.log("标题文字改变了！")
+      console.log(newVal, oldVal)
+      this.form.type7data.titleName = newVal;
+    } 
+  },
+  methods: {
+    closeEditWindow(){
+      this.$store.commit('template/closeEditWindowStatus');
+    },
+    submitData(){
+      //验证表单
+      this.$refs.form.validate(valid => {
+        //构建提交的数据
+        let data = {
+          id:this.$store.state.template.editSectorId,//组件id
+          sort:this.$store.state.template.editComponentSort,//组件位置
+          dataSort:this.$store.state.template.editDataSort,//数据位置
+          type:this.$store.state.template.editComponentType,//组件类型
+          data:""//提交的数据
+        }
+        if (valid) {
+          //判断当前提交的数据类型
+          //1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+          if(this.$store.state.template.editComponentType == 1){
+            data.data = this.form.type1data;
+          }
+          //2=tabs新闻选项卡
+          if(this.$store.state.template.editComponentType == 2){
+            data.data = this.form.type2data;
+          }
+          //3=广告
+          if(this.$store.state.template.editComponentType == 3){
+            data.data = this.form.type3data;
+          }
+          //7=文本
+          if(this.$store.state.template.editComponentType == 7){
+            data.data = this.form.type7data;
+          }
+          //第二步：提交数据
+          this.$store.commit('template/saveComponentData',data);
+          //第三步：关闭编辑窗口
+          this.$store.commit('template/closeEditWindowStatus');
+        }
+      })
+    },
+    //回显级联选择器
+    async loadCascaderPath(path, type) {
+      this.oneParentKey+=1;
+      // 如果是单选类型，path 是普通数组
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+        await this.$store.dispatch('pool/categoryList',{pid:parentId}).then((res)=>{
+          const nodes = res.data.map(item => ({
+            value: item.id,
+            label: item.name,
+            leaf: level >= 4,
+            checked: true
+          }));
+          // 将数据传递到 resolve，通知 cascader 这一层的数据加载完毕
+          if (level === path.length - 1) {
+            this.$nextTick(() => {
+              this.form.type1data.pid_arr = path;
+            });
+          }
+        });
+      }
+    },
+  },
+  mounted() { 
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .editWindowBox {
+    .editWindowBoxContent {
+      width: 100%;
+      padding: 20px;
+    }
+    .editWindowBoxFooter {
+      text-align: right;
+    }
+  }
+  //表单微调 start------------------------------------------------------------>
+  ::v-deep .editWindowBoxContent .el-cascader{
+    width: 100% !important;
+  }
+  ::v-deep .editWindowBoxContent .el-select--medium {
+    width: 100% !important;
+  }
+  //表单微调 end------------------------------------------------------------>
+</style>

src/views/template/public/indexComponents.vue

@@ -0,0 +1,143 @@
+<template>
+  <div :class="['layerBox', { 'fixed': isFixed }]">
+    <tableTitle :name="headerTitle"/>
+    <div class="menuTopBox">
+      <div class="menuItem itemMenuBg1" @click="addModule(1)">
+        登录菜单(12x1)
+      </div>
+      <div class="menuItem itemMenuBg2" @click="addModule(2)">
+        Logo栏(12x2)
+      </div>
+      <div class="menuItem itemMenuBg3" @click="addModule(3)">
+        导航菜单(12x2)
+      </div>
+      <div class="menuItem itemMenuBg4" @click="addModule(4)">
+        轮播图(8x5)
+      </div>
+      <!-- <div class="menuItem itemMenuBg5" @click="addModule(5)">
+        多分类列表
+      </div> -->
+      <div class="menuItem itemMenuBg6" @click="addModule(6)">
+        多图列表(12x0)
+      </div>
+      <div class="menuItem itemMenuBg7" @click="addModule(7)">
+        纯文本列表(4x5)
+      </div>
+      <div class="menuItem itemMenuBg8" @click="addModule(8)">
+        图文列表(8x10)
+      </div>
+      <!-- <div class="menuItem itemMenuBg9" @click="addModule(9)">
+        排行榜列表
+      </div> -->
+      <div class="menuItem itemMenuBg10" @click="addModule(10)">
+        友情链接(12x3)
+      </div>
+      <div class="menuItem itemMenuBg11" @click="addModule(11)">
+        纯文本(12x1)
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import tableTitle from './tableTitle.vue';
+
+export default {
+  props: {
+    
+  },
+  components: {
+    tableTitle
+  },
+  data() {
+    return {
+      headerTitle: '可选模块',
+      isFixed: false // 控制菜单是否悬浮
+    };
+  },
+  methods: {
+    addModule(id) {
+      this.$emit('add-module', id); // 触发事件，将模块 ID 传递给父组件
+    },
+    handleScroll() {
+      const scrollY = window.scrollY;
+      // 设置一个阈值，避免频繁切换
+      if (scrollY > 100 && !this.isFixed) {
+        this.isFixed = true; // 只有在超过 100 像素时才设置为悬浮状态
+      } else if (scrollY <= 0 && this.isFixed) {
+        this.isFixed = false; // 只有在回到 100 像素以下时才取消悬浮状态
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll); // 监听滚动事件
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll); // 清理事件监听
+  }
+};
+</script>
+
+<style scoped lang="less">
+.menuTopBox {
+  display: flex;
+  flex-wrap: wrap;
+  transition: top 0.3s; /* 添加过渡效果 */
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  padding: 10px 10px 10px 40px;
+}
+
+.fixed {
+  position: fixed; /* 固定在顶部 */
+  top: 0; /* 吸附到顶部 */
+  //width: 100%; /* 确保宽度为 100% */
+  background-color: white; /* 设置背景颜色以覆盖下面的内容 */
+  z-index: 1000; /* 确保在其他内容之上 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影以增强视觉效果 */
+}
+
+/* 背景图样式 */
+.itemMenuBg1 {
+  background: url('../../../assets/creatWebsite/menu/default/top_menu.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg2 {
+  background: url('../../../assets/creatWebsite/menu/default/logo.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg3 {
+  background: url('../../../assets/creatWebsite/menu/default/nav_menu.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg4 {
+  background: url('../../../assets/creatWebsite/menu/default/banner.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg5 {
+  background: url('../../../assets/creatWebsite/menu/default/class_list.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg6 {
+  background: url('../../../assets/creatWebsite/menu/default/img_list.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg7 {
+  background: url('../../../assets/creatWebsite/menu/default/text_list.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg8 {
+  background: url('../../../assets/creatWebsite/menu/default/img_text_list.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg9 {
+  background: url('../../../assets/creatWebsite/menu/default/level.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg10 {
+  background: url('../../../assets/creatWebsite/menu/default/link.png') no-repeat 10px #f0f2f5;
+}
+.itemMenuBg11 {
+  background: url('../../../assets/creatWebsite/menu/default/text.png') no-repeat 10px #f0f2f5;
+}
+</style>

src/views/template/public/step.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="stepBox">
+    <div class="stepBoxText" @click="hiddenStepStatus"><i class="el-icon-close"></i></div>
+    <el-steps :active="activeNumber" align-center>
+      <el-step title="填写模板基本信息" description="类型和网站底部信息" />
+      <el-step title="选择模板风格" description="网站整体风格和样式" />
+      <el-step title="构建模板模块" description="展示哪些模块到模板上" />
+      <el-step title="应用网站模板" description="应用该模板到您的站点" />
+    </el-steps>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    activeNumber: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+  methods: {
+    //隐藏步骤
+    hiddenStepStatus() {
+      console.log(123)
+      console.log(this.$store.state.template.stepStatus)
+      this.$store.commit('template/hiddenStepStatus');
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .stepBox {
+    margin: 30px 30px 20px 30px;
+    position: relative;
+    .stepBoxText {
+      position: absolute;
+      right: -30px;
+      top: -70px;
+      color: #1C1D22;
+      background: #FFF2E2;
+      border-radius: 8px;
+      width: 28px;
+      height: 28px;
+      line-height: 28px;
+      text-align: center;
+      font-size: 18px;
+      cursor: pointer;
+    }
+  }
+</style>

src/views/template/public/tableTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:1px;
+    }
+  }
+</style>