调整自助建站目录

调整自助建站目录

src/api/cms.js

@@ -5,7 +5,7 @@ import request from '@/utils/request'
 //1.1 获取网站基本信息
 export function getSiteInfo(data) {
   return request({
-    url: 'web/getSiteInfo',
+    url: '/web/getSiteInfo',
     method: 'post',
     data
   })

src/api/template.js

@@ -21,11 +21,11 @@ export function addWebsiteTemplateintel(data) {
 }
 
 //1.3 获取网站基本信息
-export function getWebsiteTemplateintel(data) {
+export function getAdminSiteInfo(params) {
   return request({
-    url: '/website/getWebsiteTemplateintel',
-    method: 'post',
-    data
+    url: '/web/getAdminSiteInfo',
+    method: 'get',
+    params
   })
 }
 
@@ -118,4 +118,14 @@ export function sectorComponentList(params) {
     params
   })
 }
+
+//1.14 获得底部信息
+export function getAdminWebsiteFootAll(params) {
+    return request({
+        url: '/web/getAdminWebsiteFootAll',
+        method: 'get',
+        params
+    })
+}
+
 //自助建站 end ------------------------------------->

src/layout/components/Navbar.vue

@@ -426,9 +426,9 @@ export default {
     //2.1 获取通知消息列表
     getMsg() {
       this.$store.dispatch('news/getMSG').then(response => {
-        console.log(response);
+        //console.log(response);
         this.msg = response.data;
-        console.log(this.msg);
+        //console.log(this.msg);
       }).catch(error => {
         console.log(error);
       });

src/layout/components/template/componentMenu.vue

@@ -2,12 +2,12 @@
   <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 == 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 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">

src/permission.js

@@ -98,7 +98,7 @@ router.beforeEach(async (to, from, next) => {
                 }else{
                     setUseType(userInfo.data.type_id, 86400)
                     setWebSiteId(userInfo.data.website_id, 86400)
-                    console.log("用户有访问权限，访问继续！")
+                    //console.log("用户有访问权限，访问继续！")
                     next()
                 }
             }
@@ -106,10 +106,10 @@ router.beforeEach(async (to, from, next) => {
         } else {
             //3.4.2 如果有token，但是没在登录页面
             const hasRoles = store.getters.roles && store.getters.roles.length > 0
-            console.log(223344)
-            console.log(store.getters.roles)
-            console.log(store.getters.roles.length)
-            console.log("roles:" + hasRoles)
+            // console.log(223344)
+            // console.log(store.getters.roles)
+            // console.log(store.getters.roles.length)
+            //console.log("roles:" + hasRoles)
             if (hasRoles) {
                 const userInfo = await getInfo();
                 //如果用户没有权限登录该网站，返回登录页面
@@ -128,7 +128,7 @@ router.beforeEach(async (to, from, next) => {
                 }else{
                     setUseType(userInfo.data.type_id, 86400)
                     setWebSiteId(userInfo.data.website_id, 86400)
-                    console.log("用户有访问权限，访问继续！")
+                    //console.log("用户有访问权限，访问继续！")
                     next()
                 }
             } else {
@@ -137,7 +137,7 @@ router.beforeEach(async (to, from, next) => {
                     const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
                     router.addRoutes(accessRoutes)
                     next({ ...to, replace: true })
-                    console.log("添加路由成功！")
+                    //console.log("添加路由成功！")
                 } catch (error) {
                     await store.dispatch('user/resetToken')
                     Message.error(error || 'Has Error')

src/store/modules/template.js

@@ -1,8 +1,10 @@
 //cms中的接口 获取网站基本信息，网站导航，网站底部导航，网站行政区划，行政职能
-import {getSiteInfo,getSiteCategory,getFooterCategoryList,selectWebsiteArea,selectWebsiteDepartment } from '@/api/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 {
+    getWebsiteintel, addWebsiteTemplateintel, getAdminSiteInfo, upWebsiteTemplateintel, getAllTemplateClass, getWebsiteTemplateList, addWebsiteTemplateclassintel,
+    getWebsiteTemplateclassintel, addWebsiteTemplate, getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll
+} from '@/api/template'
 
 import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
 
@@ -16,1696 +18,1722 @@ import randomIndex1 from '@/utils/templateJson/index/style1/1.js';
 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------------------------------------------------------------>
+    //0.全局配置 start------------------------------------------------------------> 
+    editWebsiteId: "",//当前编辑网站的id
+    editWebsiteClass: "",//当前编辑网站的风格
+    stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
+    //0.全局配置 end------------------------------------------------------------>
 
-  //2.站点数据 start------------------------------------------------------------>
-  webSiteInfo:"",//网站信息
-  webSiteMenu:"",//网站包含的导航池
-  area:{//地区
-    economize:[],//省区
-    market:[],//市区
-    county:[]//县区
-  },
-  departmentList:[],//职能部门
-  //2.站点数据 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: true,
+        list: true,
+        article: true,
+        search: true,
+        aloneList: true,
+        aloneArticle: true
+    },
+    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------------------------------------------------------------>
 
-  //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------------------------------------------------------------>
+    //2.站点数据 start------------------------------------------------------------>
+    webSiteInfo: "",//网站信息
+    webSiteMenu: "",//网站包含的导航池
+    webSiteFooterInfo: "",//网站底部信息
+    area: {//地区
+        economize: [],//省区
+        market: [],//市区
+        county: []//县区
+    },
+    departmentList: [],//职能部门
+    //2.站点数据 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
+    //3.画布构造 start------------------------------------------------------------>
+    editSectorY: 0,//当前组件在画布中的位置
+    mouseXY: {//鼠标位置
+        "x": 12,
+        "y": 33
     },
-    //2.style信息
-    style:{
-      styleId:"",//风格id
+    DragPos: {//创建的占位符大小
+        "x": null,
+        "y": null,
+        "w": 12,
+        "h": 2,
+        "i": null
     },
-    //3.板块信息 header,menu,footer 是页面自带的无需构建
-    template:{  
-      //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页
-      index:[],
-      class:[],//分类页
-      list:[],//列表页
-      article:[],//详情页
-      search:[],//搜索页
-      aloneList:[],//自定义列表页
-      aloneArticle:[],//自定义详情页
-    }
-  },
-  canSubmit:false,//当前数据是否可以被提交
-  //4.构造的网站数据 end------------------------------------------------------------>
+    //获得gridlayout对象
+    gridlayoutObj: null,
+    //3.画布构造 end------------------------------------------------------------>
 
-  //5.组件回显数据 start------------------------------------------------------------>
-  componentViewData:{
-    pid_arr:[],//导航池
-    pageSize:"",//展示条数
-    adName:"",//广告名称
-    titleName:"",//标题名称
-  }
-  //5.组件回显数据 start------------------------------------------------------------>
+    //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);
+    //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) {
 
-        //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,
+            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
             });
-          }
-          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 {}
+            // 拷贝后直接替换原来的板块
+            //state.pageData.index[id] = module;
+            // 使用Vue.set来强制视图更新
+            Vue.set(state.pageData.index, dataSort, module);
+            console.log("当前的板块数据为：");
+            console.log(state.pageData.index);
+            //开始复制 end------------------------------------------------------------>
         }
-      }
-      //开始复制 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,
+        //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
             });
-          }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,
+            // 拷贝后直接替换原来的板块
+            //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 //展示条数
 
-        //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 {}
+            //判断数据的类型 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------------------------------------------------------------>
         }
-      }
-      //开始复制 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;
+        //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------------------------------------------------------------>
         }
-        
-        //判断是拖拽的还是点击添加进来的 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,
-            });
-          }
+        //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;
 
-        //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 {}
+        //   // 深拷贝 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------------------------------------------------------------>
         }
-      }
-      //开始复制 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 //展示条数
+        // 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 {
 
-      //判断数据的类型 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.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------------------------------------------------------------>
         }
-        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);
+        // 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.index[index].x;
-          state.DragPos.y = state.pageData.index[index].y;
+                if (mouseInGrid === true) {
+                    state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
+                    state.DragPos.i = String(index);
+                    state.DragPos.x = state.pageData.article[index].x;
+                    state.DragPos.y = state.pageData.article[index].y;
+                }
+                if (mouseInGrid === false) {
+                    state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
+                    state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
+                }
+            }
+            //开始复制 end------------------------------------------------------------>
         }
-        if (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');
+        // 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------------------------------------------------------------>
         }
-      }
-      //开始复制 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 {
+        // 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------------------------------------------------------------>
         }
-        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);
+        // 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');
 
-        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;
+                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------------------------------------------------------------>
         }
-        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');
+        // 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]);
         }
-      }
-      //开始复制 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 {
-
+        // 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]);
         }
-        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;
+        // pageStatus == 4 详情页
+        if (state.pageStatus == 4) {
+            console.log(data);
+            state.pageData.article[data.i].h = data.h;
+            console.log(state.pageData.article[data.i]);
         }
-        if (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');
+        // 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;
+            }
         }
-      }
-      //开始复制 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 {
+        // 按照 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);
         }
-        */
-        let sendData = {
-          source:"drag",//添加时判断此模块来自外部拖拽，而不是点击
-          type:data.type,
-          h:data.h,
-          jsonData:data.jsonData,
-          x: state.DragPos.x,
-          y: state.DragPos.y,
-          w: 12,
+        // 保存到对应的页面 json 中
+        if (data.type == "index") {
+            state.webSiteData.template.index = websiteData;
         }
-        //开发到这里了，注意我可能还需要上面那个 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,
+        if (data.type == "list") {
+            state.webSiteData.template.list = websiteData;
         }
-        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');
+        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("该功能研发中");
 
-        let sendData = {
-          source:"drag",//添加时判断此模块来自外部拖拽，而不是点击
-          type:data.type,
-          h:data.h,
-          jsonData:data.jsonData,
-          x: state.DragPos.x,
-          y: state.DragPos.y,
-          w: 12,
+        // 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;
+            }
         }
-        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) {
 
-    //最后判断一下是否可以提交
-    if(state.canSubmit == ture){
+        } else {
+            Message.error('您还有未构建的页面，请检查！');
+        }
+    },
+    //1.配置模块 end------------------------------------------------------------>
 
-    }else{
-      Message.error('您还有未构建的页面，请检查！');
-    }
-  },
-  //1.配置模块 end------------------------------------------------------------>
+    //2.获取站点信息 start------------------------------------------------------------>
+    //获取站点顶部详情
+    setWebsiteInfo(state, data) {
+        state.webSiteInfo = data;
+    },
+    setWebsiteFooterInfo(state, data) {
+        state.webSiteFooterInfo = data;
+    },
+    //获取站点导航池
+    setGetSiteCategory(state, data) {
+        let allData = []
+        for (let index in data) {
+            //导航最多只显示24个，超出部分不显示
+            if (index < 24) {
+                allData.push(data[index])
+            }
+        }
+        state.webSiteMenu = allData;
+    },
+    //设置地区
+    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------------------------------------------------------------>
 
-  //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);
+    //3.提示信息 start------------------------------------------------------------>
+    alertMessage(state, data) {
+        Message({
+            message: "配置阶段仅展示，无法真实调用该功能！",
+            type: 'warning',
+            duration: 0,
+            showClose: true
+        });
     }
-    state.editWebsiteCategory = arrayData;
-  },
-  //2.获取站点信息 end------------------------------------------------------------>
-  
-  //3.提示信息 start------------------------------------------------------------>
-  alertMessage(state,data){
-    Message({
-      message: "配置阶段仅展示，无法真实调用该功能！",
-      type: 'warning',
-      duration: 0,
-      showClose: true
-    });
-  }
-  //3.提示信息 end------------------------------------------------------------>
+    //3.提示信息 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------------------------------------------------------------>
+    //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 获取网站基本信息
+    getAdminSiteInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getAdminSiteInfo(data).then(response => {
+                commit('setWebsiteInfo', response.data);
+                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.12 获得网站底部信息
+    getAdminWebsiteFootAll({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getAdminWebsiteFootAll(data).then(response => {
+                commit('setWebsiteFooterInfo', response.data);
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.构建网站json end------------------------------------------------------------>
 }
 
 export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
+    namespaced: true,
+    state,
+    mutations,
+    actions
 }

src/store/modules/user.js

@@ -166,10 +166,10 @@ const actions = {
         commit('SET_ROLES', roles)
         commit('SET_USERID', data.id)
         commit('SET_NAME', nickname)
-        console.log("开始设置身份详情")
-        console.log(nickname)
+        //console.log("开始设置身份详情")
+        //console.log(nickname)
         commit('SET_AVATAR', avatar)
-        console.log(avatar)
+        //console.log(avatar)
         commit('SET_INTRODUCTION', introduction)
         commit('SET_ROLE_ID', role_id)
         //设置用户等级

src/views/template/page/pageIndex.vue

@@ -242,7 +242,7 @@ export default {
   }
   padding: 100px;
   //background: #F5F7FB;
-  margin-bottom: 20px;
+  //margin-bottom: 20px;
 }
 .FixedMainModuleBoxBorder {
   border: 2px dashed #eee;

src/views/template/style/components/footer/info/1.vue

@@ -1,98 +0,0 @@
-<template>
-  <div :class="['footerInfoBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
-    <div class="footerInfoBoxContent">
-      <div class="footerInfoBoxContentLeft">
-        <img src="@/assets/template/component/sign1.png">
-      </div>
-      <div class="footerInfoBoxContentMain">
-        <div>本站部分信息由相应民事主体自行提供，该信息内容的真实性、准确性和合法性应由该民事主体负责。三农市场信息网 对此不承担任何保证责任。</div>
-        <div>本网部分转载文章、图片等无法联系到权利人。请相关权利人与本网站联系。</div>
-        <div>北京中农兴业网络技术有限公司主办 | 政讯通·全国政务信息一体化办公室 主管</div>
-        <div>联系电话：010-56019387、010-80440269、010-69945235，监督电话：18516948318，违法和不良信息举报电话：010-57028685</div>
-        <div>第一办公区：北京市西城区敬胜胡同甲3号东侧；第二办公区：北京市东城区建国门内大街26号新闻大厦5层</div>
-        <div>邮箱: qgsndy@163.com 客服QQ : 2909421493 通联QQ : 213552413</div>
-      </div>
-      <div class="footerInfoBoxContentRight">
-        <img src="@/assets/template/component/sign2.png">
-      </div>
-    </div>
-    <div class="footerInfoBoxBottom">
-      <img src="@/assets/template/component/bottom1.png">
-      <img src="@/assets/template/component/bottom2.png">
-      <img src="@/assets/template/component/bottom3.png">
-      <img src="@/assets/template/component/bottom4.png">
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .componentBorder {
-    border: 2px dashed #999;
-  }
-  .footerInfoBox {
-    width: 80%;
-    .footerInfoBoxContent {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .footerInfoBoxContentLeft {
-        width: 10%;
-        box-sizing: border-box;
-        padding-right: 10px;
-        img {
-          width: 100%;
-          display: block;
-        }
-      }
-      .footerInfoBoxContentMain {
-        padding-top: 40px;
-        font-size: 14px;
-        div {
-          text-align: center;
-          padding-bottom: 10px;
-          color: #fff;
-        }
-      }
-      .footerInfoBoxContentRight {
-        width: 10%;
-        box-sizing: border-box;
-        padding-left: 10px;
-        img {
-          width: 100%;
-          display: block;
-        }
-      }
-    }
-    .footerInfoBoxBottom {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding-top: 40px;
-      img {
-        width: 10%;
-        display: block;
-        margin-right: 10px;
-      }
-    }
-  }
-</style>
-

src/views/template/style/components/footer/menu/1.vue

@@ -1,84 +0,0 @@
-<template>
-  <div :class="['footerMenuBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
-    <ul class="footerMenuUl">
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .componentBorder {
-    border: 2px dashed #999;
-  }
-  .footerMenuBox {
-    width: 80%;
-    border-bottom: none;
-    .footerMenuUl {
-      padding: 0;
-      margin: 0;
-      overflow: hidden;
-      clear: both;
-      border-bottom: 1px solid #3B70D0;
-      li {
-        float: left;
-        width: 12.5%;
-        text-align: center;
-        list-style: none;
-        height: 60px;
-        line-height: 60px;
-        a {
-          display: block;
-          width: 100%;
-          white-space: nowrap; 
-          overflow: hidden; 
-          text-overflow: ellipsis;
-          font-size: 14px;
-          color: #fff;
-        }
-      }
-    }
-  }
-</style>
-

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

@@ -1,90 +0,0 @@
-<template>
-    <!--<div :class="['headTopBox', { componentBorder: this.$store.state.template.previewStatus==false }]">-->
-    <div class="headTopBox">
-        <div class="headTopBoxBg">
-            <div class="headTopInfoLeft">您好，欢迎来到{{this.$store.state.template.webSiteInfo.website_name}}网！</div>
-            <div class="headTopInfoRight">
-                <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748328204272390.png" alt="搜索">搜索</div>
-                <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748329860825368.png" alt="广告服务">广告服务</div>
-                <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748329883541848.png" alt="登录">登录</div>
-                <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/174832996345491.png" alt="注册">注册</div>
-            </div>
-        </div>
-        <div class="headLogoBox">
-            <img :src="this.$store.state.template.webSiteInfo.logo" class="logo">
-            <div class="headAdTopBox">
-                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748332370111555.png">
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {},
-    data() {
-        return {};
-    },
-    methods: {
-        banUse(){
-            this.$store.commit('template/alertMessage');
-        }
-    },
-    mounted(){},
-};
-</script>
-
-<style scoped lang="less">
-.componentBorder {
-    border: 2px dashed #999;
-}
-.headTopBox {
-    width: 100%;
-    height: 200px;
-    background: url('http://img.bjzxtw.org.cn/pre/image/png/20250527/174830610715978.png') top repeat-x;
-    .headTopBoxBg {
-        width: 1200px;
-        height: 30px;
-        line-height: 30px;
-        font-size: 12px;
-        margin: 0 auto;
-        color: #666666;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .headTopInfoLeft {
-            font-size: 12px;
-            color:#666666;
-        }
-        .headTopInfoRight {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .headInfoItem {
-                display: flex;
-                align-items: center;
-                margin-right: 10px;
-                cursor: pointer;
-                img {
-                    margin-right: 5px;
-                }
-            }
-            .headInfoItem:last-child {
-                margin-right: 0;
-            }
-        }
-    }
-    .headLogoBox {
-        width: 1200px;
-        margin: 0 auto;
-        display: flex;
-        height: 170px;
-        align-items: center;
-        justify-content: space-between;
-        .logo {
-            width: 348px;
-            height: 75px;
-        }
-    }
-}
-</style>

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

@@ -1,37 +1,364 @@
 <template>
-  <div class="footerSectorBox">
-    <footerMenu />
-    <footerInfo />
-  </div>
+    <div>
+        <!--风格1-->
+        <div class="footerStyle1" v-if="this.$store.state.template.editWebsiteClass==1">
+            <div :class="['imgLinkBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
+                <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_img" :key="item.id">
+            </div>
+            <div class="textLinkBox">
+                <div class="textLinkBoxLeft">
+                    <span>友情链接：</span>
+                </div>
+                <div class="textLinkBoxRight">
+                    <span v-for="item in this.$store.state.template.webSiteFooterInfo.link_text" :key="item.id">{{item.title}}</span>
+                </div>
+            </div>
+            <div class="footerMenuBox">
+                <div class="footerMenu">
+                    <div v-for="item in this.$store.state.template.webSiteFooterInfo.foot_cate" :key="item.id">{{item.name}}</div>
+                </div>
+            </div>
+            <div :class="['footerInfoBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
+                <div class="footerInfoBoxContent" v-if="this.$store.state.template.webSiteFooterInfo">
+                    <div class="footerInfoBoxContentLeft">
+                        <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.company_logo">
+                    </div>
+                    <div class="footerInfoBoxContentMain">
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.statement" class="foot_text_html_css"></p>
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.organizer" class="foot_text_html_css"></p>
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.copyright_information" class="foot_text_html_css"></p>
+                        <p>
+                            <span v-html="this.$store.state.template.webSiteFooterInfo.foot_info.icp_number" class="foot_text_html_css"></span>
+                            <span v-html="this.$store.state.template.webSiteFooterInfo.foot_info.record_number" class="foot_text_html_css"></span>
+                        </p>
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.email" class="foot_text_html_css"></p>
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.company_address" class="foot_text_html_css"></p>
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.contact_number" class="foot_text_html_css"></p>
+                    </div>
+                    <div class="footerInfoBoxContentRight">
+                        <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.project_logo">
+                    </div>
+                </div>
+                <div class="footerInfoBoxBottom">
+                    <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_foot" :key="item.id">
+                </div>
+            </div>
+        </div>
+
+        <!--风格2-->
+        <div class="footerStyle2" v-if="this.$store.state.template.editWebsiteClass==2">
+            <div :class="['imgLinkBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
+                <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_img" :key="item.id">
+            </div>
+            <div class="textLinkBox">
+                <div class="textLinkBoxLeft">
+                    <span>友情链接2：</span>
+                </div>
+                <div class="textLinkBoxRight">
+                    <span v-for="item in this.$store.state.template.webSiteFooterInfo.link_text" :key="item.id">{{item.title}}</span>
+                </div>
+            </div>
+            <div class="footerMenuBox">
+                <div class="footerMenu">
+                    <div v-for="item in this.$store.state.template.webSiteFooterInfo.foot_cate" :key="item.id">{{item.name}}</div>
+                </div>
+            </div>
+            <div :class="['footerInfoBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
+                <div class="footerInfoBoxContent" v-if="this.$store.state.template.webSiteFooterInfo">
+                    <div class="footerInfoBoxContentLeft">
+                        <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.company_logo">
+                    </div>
+                    <div class="footerInfoBoxContentMain">
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.statement" class="foot_text_html_css"></p>
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.organizer" class="foot_text_html_css"></p>
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.copyright_information" class="foot_text_html_css"></p>
+                        <p>
+                            <span v-html="this.$store.state.template.webSiteFooterInfo.foot_info.icp_number" class="foot_text_html_css"></span>
+                            <span v-html="this.$store.state.template.webSiteFooterInfo.foot_info.record_number" class="foot_text_html_css"></span>
+                        </p>
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.email" class="foot_text_html_css"></p>
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.company_address" class="foot_text_html_css"></p>
+                        <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.contact_number" class="foot_text_html_css"></p>
+                    </div>
+                    <div class="footerInfoBoxContentRight">
+                        <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.project_logo">
+                    </div>
+                </div>
+                <div class="footerInfoBoxBottom">
+                    <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_foot" :key="item.id">
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-import footerMenu from '../../components/footer/menu/1.vue';
-import footerInfo from '../../components/footer/info/1.vue';
-
 export default {
-  props: {
-    
-  },
-  components: {
-    footerMenu,
-    footerInfo
-  },
-  data() {
-    return {
-      
-    };
-  },
+    props: {},
+    components: {},
+    data() {
+        return {};
+    },
+    methods: {},
+    mounted(){
+       //this.$store.state.template.webSiteFooterInfo
+    }
 };
 </script>
 
 <style scoped lang="less">
-  .footerSectorBox {
+.componentBorder {
+    border: 2px dashed #999;
+}
+//风格1 start ---------------------------------------->
+.footerStyle1 {
+    width: 100%;
+    margin:0 auto;
+    .imgLinkBox {
+        width:1200px;
+        height:140px;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        overflow: hidden;
+        margin:0 auto;
+        margin-bottom: 20px;
+        img {
+            width:170px;
+            height:60px;
+            margin-right: 35px;
+            display: block;
+            margin-bottom: 20px;
+            &:nth-child(6n) {
+                margin-right: 0;
+            }
+        }
+    }
+    .textLinkBox {
+        width: 1200px;
+        margin:0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        .textLinkBoxLeft {
+            color: #333;
+            font-weight: bold;
+            span {
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+        .textLinkBoxRight {
+            width: 1083px;
+            color:#333;
+            display: flex;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            span {
+                margin-right: 50px;
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .footerMenuBox {
+        border-bottom: none;
+        background-color: #004564;
+        .footerMenu {
+            width: 1200px;
+            margin:0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 50px;
+            div{
+                color:#fff;
+                font-size: 14px;
+                font-weight: bold;
+                padding-left: 100px;
+                padding-right: 100px;
+                border-right: 1px solid #035276;
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    .footerInfoBox {
+        width:1200px;
+        padding-bottom: 30px;
+        margin:0 auto;
+        .footerInfoBoxContent {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .footerInfoBoxContentLeft {
+                width: 10%;
+                box-sizing: border-box;
+                padding-right: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+            .footerInfoBoxContentMain {
+                padding-top: 40px;
+                font-size: 14px;
+                text-align: center;
+                div {
+                    text-align: center;
+                    padding-bottom: 10px;
+                    color: #333;
+                }
+            }
+            .footerInfoBoxContentRight {
+                width: 10%;
+                box-sizing: border-box;
+                padding-left: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+        }
+        .footerInfoBoxBottom {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: 40px;
+            img {
+                width: 10%;
+                display: block;
+                margin-right: 10px;
+            }
+        }
+    }
+}
+//风格1 end ---------------------------------------->
+
+//风格2 start ---------------------------------------->
+.footerStyle2 {
     width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    background: #19499F;
-  }
+    margin:0 auto;
+    .imgLinkBox {
+        width:1200px;
+        height:140px;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        overflow: hidden;
+        margin:0 auto;
+        margin-bottom: 20px;
+        img {
+            width:170px;
+            height:60px;
+            margin-right: 35px;
+            display: block;
+            margin-bottom: 20px;
+            &:nth-child(6n) {
+                margin-right: 0;
+            }
+        }
+    }
+    .textLinkBox {
+        width: 1200px;
+        margin:0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        .textLinkBoxLeft {
+            color: #333;
+            font-weight: bold;
+            span {
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+        .textLinkBoxRight {
+            width: 1083px;
+            color:#333;
+            display: flex;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            span {
+                margin-right: 50px;
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .footerMenuBox {
+        border-bottom: none;
+        background-color: #2F7ADD;
+        .footerMenu {
+            width: 1200px;
+            margin:0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 50px;
+            div{
+                color:#fff;
+                font-size: 14px;
+                font-weight: bold;
+                padding-left: 100px;
+                padding-right: 100px;
+                border-right: 1px solid #1962C3;
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    .footerInfoBox {
+        width:1200px;
+        padding-bottom: 30px;
+        margin:0 auto;
+        .footerInfoBoxContent {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .footerInfoBoxContentLeft {
+                width: 10%;
+                box-sizing: border-box;
+                padding-right: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+            .footerInfoBoxContentMain {
+                padding-top: 40px;
+                font-size: 14px;
+                text-align: center;
+                div {
+                    text-align: center;
+                    padding-bottom: 10px;
+                    color: #333;
+                }
+            }
+            .footerInfoBoxContentRight {
+                width: 10%;
+                box-sizing: border-box;
+                padding-left: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+        }
+        .footerInfoBoxBottom {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: 40px;
+            img {
+                width: 10%;
+                display: block;
+                margin-right: 10px;
+            }
+        }
+    }
+}
+//风格2 end ---------------------------------------->
 </style>

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

@@ -1,29 +1,101 @@
 <template>
-    <div class="headSectorBox">
-        <header1Style />
+    <div class="headStyle1">
+        <div class="headTopBox">
+            <div class="headTopBoxBg">
+                <div class="headTopInfoLeft">您好，欢迎来到{{this.$store.state.template.webSiteInfo.website_name}}网！</div>
+                <div class="headTopInfoRight">
+                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748328204272390.png" alt="搜索">搜索</div>
+                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748329860825368.png" alt="广告服务">广告服务</div>
+                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748329883541848.png" alt="登录">登录</div>
+                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/174832996345491.png" alt="注册">注册</div>
+                </div>
+            </div>
+            <div class="headLogoBox">
+                <img :src="this.$store.state.template.webSiteInfo.logo" class="logo">
+                <div :class="['headAdTopBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748332370111555.png">
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
-import header1Style from '../../components/head/1.vue';
-
 export default {
     props: {},
-    components: {
-        header1Style,
-    },
     data() {
         return {};
     },
+    methods: {
+        banUse(){
+            this.$store.commit('template/alertMessage');
+        }
+    },
+    mounted(){},
 };
 </script>
 
 <style scoped lang="less">
-.headSectorBox {
+//编辑边框
+.componentBorder {
+    border: 2px dashed #999;
+}
+//风格1
+.headStyle1 {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
+    .headTopBox {
+        width: 100%;
+        height: 200px;
+        background: url('http://img.bjzxtw.org.cn/pre/image/png/20250527/174830610715978.png') top repeat-x;
+        .headTopBoxBg {
+            width: 1200px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 12px;
+            margin: 0 auto;
+            color: #666666;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .headTopInfoLeft {
+                font-size: 12px;
+                color:#666666;
+            }
+            .headTopInfoRight {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .headInfoItem {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 10px;
+                    cursor: pointer;
+                    img {
+                        margin-right: 5px;
+                    }
+                }
+                .headInfoItem:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+        .headLogoBox {
+            width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            height: 170px;
+            align-items: center;
+            justify-content: space-between;
+            .headAdTopBox {
+                img{
+                    display: block;
+                }
+            }
+        }
+    }
 }
 </style>

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

@@ -1,150 +1,209 @@
 <template>
-  <div class="menuSectorBox">
-    <div class="menuBoxBg">
-      <div :class="['menuBox',{componentBorder: this.$store.state.template.previewStatus==false}]" ref="menuBox">
-        <div>首页</div>
-        <div v-for="item in this.$store.state.template.webSiteMenu">{{item.name}}</div>
-      </div>
+    <div>
+        <!-- 风格1 -->
+        <div class="menuStyle1" v-if="this.$store.state.template.editWebsiteClass==1">
+            <div :class="['menuBoxBg', { componentBorder: this.$store.state.template.previewStatus == false }]">
+                <div class="menuBox" ref="menuBox">
+                    <div v-for="item in this.$store.state.template.webSiteMenu" @click="banUse">
+                        {{item.name}}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 风格2 -->
+        <div class="menuStyle2" v-if="this.$store.state.template.editWebsiteClass==2">
+            <div :class="['menuBoxBg', { componentBorder: this.$store.state.template.previewStatus == false }]">
+                <div class="menuBox" ref="menuBox">
+                    <div v-for="item in this.$store.state.template.webSiteMenu" @click="banUse">
+                        {{item.name}}
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    <div :class="['menuSectorInputBox',{componentMenuBorder: this.$store.state.template.previewStatus==false}]">
-      <div class="menuSectorInputBoxItem">
-        行政职能查询：
-        <el-select v-model="departments" filterable placeholder="请选择职能部门">
-          <el-option
-            v-for="item in this.$store.state.template.departmentList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </div>
-      <div class="menuSectorInputBoxItem">
-        行政区划查询：
-        <el-select v-model="area.economize" placeholder="请选择省.." @change="changeMarket">
-          <el-option
-            v-for="item in this.$store.state.template.area.economize"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-        <el-select v-model="area.market" placeholder="请选择市.." @change="changeCounty">
-          <el-option
-            v-for="item in this.$store.state.template.area.market"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-        <el-select v-model="area.county" placeholder="请选择县..">
-          <el-option
-            v-for="item in this.$store.state.template.area.county"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-      </div>
-    </div>
-  </div>
-  
 </template>
 
 <script>
 export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      area:{//地区
-        economize:"",//省区
-        market:"",//市区
-        county:""//县区
-      },
-      departments:""
-    };
-  },
-  methods: {
-    //选择市
-    changeMarket(){
-      this.area.market = "";
-      this.area.county = "";
-      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize});
+    props: {},
+    data() {
+        return {
+            menu:[]
+        };
     },
-    //选择县
-    changeCounty(data){
-      this.area.county = "";
-      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize,city:this.area.market});
-    }
-  },
-  mounted(){},
+    methods: {
+        banUse(){
+            this.$store.commit('template/alertMessage');
+        }
+    },
+    mounted(){},
 };
 </script>
 
 <style scoped lang="less">
-  .menuSectorBox {
+//风格1 start ---------------------------------------->
+.menuStyle1 {
     width: 100%;
-    background: #F5F7FB;
-    .menuBoxBg {
-      width: 100%;
-      background: #19499F;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .componentBorder{
+    height: 130px;
+    background: #1C5468;
+    .componentBorder {
         border-left: 2px dashed #999;
         border-right: 2px dashed #999;
-      }
-      .menuBox {
-        width: 80%;
-        box-sizing: border-box;
+    }
+    .menuBoxBg {
+        width: 1200px;
+        height: 130px;
+        background: #1C5468;
+        margin: 0 auto;
         display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        div {
-          width: 12.5%;
-          font-size: 14px;
-          height: 30px;
-          line-height: 30px;
-          text-align: center;
-          overflow: hidden; 
-          white-space: nowrap; 
-          text-overflow: ellipsis; 
-          text-align: center;
-          color: #fff;
+        align-items: center;
+        justify-content: center;
+        .menuBox {
+            box-sizing: border-box;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            div {
+                width: 12.5%;
+                cursor: pointer;
+                box-sizing: border-box;
+                font-size: 14px;
+                height: 22px;
+                line-height: 22px;
+                text-align: center;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                text-align: center;
+                color: #fff;
+                background: #1C5468;
+                border-right: #002D41 1px solid;
+                border-left: #29799D 1px solid;
+                margin-bottom: 15px;
+                /* 当是第17个及以后的div时去掉margin-bottom */
+                &:nth-child(n+17) {
+                    margin-bottom: 0;
+                }
+                /* 每行的第一个（第1、9、17...个）去掉左边框 */
+                &:nth-child(8n+1) {
+                    border-left: none;
+                }
+                /* 每行的最后一个（第8、16、24...个）去掉右边框 */
+                &:nth-child(8n) {
+                    border-right: none;
+                }
+                /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
+                &:last-child {
+                    border-right: none;
+                }
+            }
         }
-      }
     }
     .menuSectorInputBox {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 14px;
-      width: 80%;
-      margin: 0 auto;
-      border-top: none;
-      height: 50px;
-      .menuSectorInputBoxItem {
-        padding: 0 10px;
-        input{
-          margin-right: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        width: 80%;
+        margin: 0 auto;
+        border-top: none;
+        height: 50px;
+        .menuSectorInputBoxItem {
+            padding: 0 10px;
+            input {
+                margin-right: 10px;
+            }
+            .el-select {
+                margin-right: 10px;
+            }
+        }
+    }
+    .componentMenuBorder {
+        border: 2px dashed #999;
+    }
+}
+//风格1 end ---------------------------------------->
+
+//风格2 start ---------------------------------------->
+.menuStyle2 {
+    width: 100%;
+    height: 130px;
+    background: #2F7ADD;
+    .componentBorder {
+        border-left: 2px dashed #999;
+        border-right: 2px dashed #999;
+    }
+    .menuBoxBg {
+        width: 1200px;
+        height: 130px;
+        background: #2F7ADD;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .menuBox {
+            box-sizing: border-box;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            div {
+                width: 12.5%;
+                cursor: pointer;
+                box-sizing: border-box;
+                font-size: 14px;
+                height: 22px;
+                line-height: 22px;
+                text-align: center;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                text-align: center;
+                color: #fff;
+                background: #2F7ADD;
+                border-right: #1A63C4 1px solid;
+                border-left: #4C92EF 1px solid;
+                margin-bottom: 15px;
+                /* 当是第17个及以后的div时去掉margin-bottom */
+                &:nth-child(n+17) {
+                    margin-bottom: 0;
+                }
+                /* 每行的第一个（第1、9、17...个）去掉左边框 */
+                &:nth-child(8n+1) {
+                    border-left: none;
+                }
+                /* 每行的最后一个（第8、16、24...个）去掉右边框 */
+                &:nth-child(8n) {
+                    border-right: none;
+                }
+                /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
+                &:last-child {
+                    border-right: none;
+                }
+            }
         }
-        .el-select {
-          margin-right: 10px;
+    }
+    .menuSectorInputBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        width: 80%;
+        margin: 0 auto;
+        border-top: none;
+        height: 50px;
+        .menuSectorInputBoxItem {
+            padding: 0 10px;
+            input {
+                margin-right: 10px;
+            }
+            .el-select {
+                margin-right: 10px;
+            }
         }
-      }
     }
     .componentMenuBorder {
-      border: 2px dashed #999;
+        border: 2px dashed #999;
     }
-  }
-  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-  ::v-deep .menuSectorInputBox .menuSectorInputBoxItem .el-input {
-    width: 130px !important;
-  }
-  ::v-deep .el-input--medium .el-input__inner {
-    border-radius: 20px;
-  }
-  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+}
+//风格2 end ---------------------------------------->
+</style>

src/views/template/templateBase.vue

@@ -13,7 +13,7 @@
                         <div class="formLabelFloatBox">
                             <el-checkbox-group v-model="form.page_type">
                                 <el-checkbox label="1" disabled>首页</el-checkbox>
-                                <el-checkbox label="2" disabled>分类页</el-checkbox>
+                                <el-checkbox label="2" disabled>频道页</el-checkbox>
                                 <el-checkbox label="3" disabled>列表页</el-checkbox>
                                 <el-checkbox label="4" disabled>详情页</el-checkbox>
                                 <el-checkbox label="5">搜索页</el-checkbox>

src/views/template/templateCreat.vue

@@ -4,9 +4,13 @@
     <div class="topMenuBox">
       <div>
         <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate">
-          <span v-if="this.$store.state.template.pageStatus == 1">随机生成首页</span>
-          <span v-if="this.$store.state.template.pageStatus == 3">随机生成列表页</span>
-          <span v-if="this.$store.state.template.pageStatus == 4">随机生成详情页</span>
+          <span v-if="this.$store.state.template.pageStatus == 1">随机生成首页模板</span>
+          <span v-if="this.$store.state.template.pageStatus == 2">随机生成频道页模板</span>
+          <span v-if="this.$store.state.template.pageStatus == 3">随机生成列表页模板</span>
+          <span v-if="this.$store.state.template.pageStatus == 4">随机生成详情页模板</span>
+          <span v-if="this.$store.state.template.pageStatus == 5">随机生成搜索页模板</span>
+          <span v-if="this.$store.state.template.pageStatus == 6">随机生成底部列表页模板</span>
+          <span v-if="this.$store.state.template.pageStatus == 7">随机生成底部详情页模板</span>
         </el-button>
       </div>
       <div class="topMenuRightBox">
@@ -21,7 +25,7 @@
     <div class="websiteBox">
       <div class="pageTabsBox">
         <div v-if="this.$store.state.template.showPage.index==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 1 ? 'active' : '']" @click="openPage(1)">首页</div>
-        <div v-if="this.$store.state.template.showPage.class==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 2 ? 'active' : '']" @click="openPage(2)">分类页</div>
+        <div v-if="this.$store.state.template.showPage.class==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 2 ? 'active' : '']" @click="openPage(2)">频道页</div>
         <div v-if="this.$store.state.template.showPage.list==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 3 ? 'active' : '']" @click="openPage(3)">列表页</div>
         <div v-if="this.$store.state.template.showPage.article==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 4 ? 'active' : '']" @click="openPage(4)">详情页</div>
         <div v-if="this.$store.state.template.showPage.search==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 5 ? 'active' : '']" @click="openPage(5)">搜索页</div>
@@ -83,6 +87,8 @@ export default {
       //0.全局配置 start------------------------------------------------------------>
       windowStatus: false,
       editPageStatus:1,//当前正在配置的页面 0 首页 1 分类页 2 列表页 3 详情页
+      websiteId:0,//网站id
+      style:0,//网站风格
       rowHeight:10,
       pageStatus:[],
       //0.全局配置 end------------------------------------------------------------>
@@ -163,37 +169,24 @@ export default {
       this.$store.commit('template/randomTemplate');
     },
     //0.全局操作 end ------------------------------------------------------------>
-
-    //1.查询网站基本信息 start ------------------------------------------------------------>
-    getWebsiteBase(){
-      this.$store.dispatch('template/getWebsiteTemplateclassintel',{website_id:this.$route.query.website_id}).then(res=>{
-        if(res.code==200){
-          //console.log(res.data.tid)
-          //console.log(res.data.website_id)
-          this.$store.commit('template/setEditWebsiteId',res.data.website_id);
-          this.$store.commit('template/setClassNumber',res.data.tid);
-        }else{
-          this.$message.error(res.message);
-        }
-      })
-    }
-    //1.查询网站基本信息 end ------------------------------------------------------------>
   },
   mounted(){
-    //设置网站id
-    this.websiteId = this.$route.query.id;
+    //1.设置网站id并且保存到vuex
+    this.websiteId = this.$route.query.website_id;
     this.$store.commit('template/setEditWebsiteId',this.websiteId);
-    //获取网站导航池
+    //2.设置网站风格并且保存到vuex
+    this.style = this.$route.query.style;
+    this.$store.commit('template/setClassNumber',this.style);
+    //3.获取网站导航池
     this.$store.dispatch('template/getSiteCategory',{website_id:this.websiteId});
-    //获取网站详情
-    this.$store.dispatch('template/getSiteInfo',{id:this.websiteId});
+    //4.获取网站详情
+    this.$store.dispatch('template/getAdminSiteInfo',{website_id:this.websiteId});
+    //5.获取网站底部信息
+    this.$store.dispatch('template/getAdminWebsiteFootAll',{website_id:this.websiteId});
     //获取行政区划
-    this.$store.dispatch('template/selectWebsiteArea',{});
+    //this.$store.dispatch('template/selectWebsiteArea',{});
     //获取行政职能
-    this.$store.dispatch('template/selectWebsiteDepartment',{});
-
-
-    
+    //this.$store.dispatch('template/selectWebsiteDepartment',{});
   }
 }
 </script>

src/views/template/templateList.vue

@@ -72,8 +72,8 @@
             <el-table-column fixed="right" label="操作" header-align="center" width="180">
               <template slot-scope="scope">
                 <div class="listBtnBox">
-                  <div class="listEditBtn" @click="getDataMain(scope.row.website_id,scope.row.action_id)" v-if="scope.row.action_id!=null"><i class="el-icon-edit-outline"></i>编辑</div>
-                  <div class="listSaveBtn" @click="creatWebsite(scope.row.website_id)" v-else><i class="el-icon-brush"></i>构建</div>
+                  <div class="listEditBtn" @click="getDataMain(scope.row.website_id,scope.row.action_id)" v-if="scope.row.template_status!=0"><i class="el-icon-edit-outline"></i>编辑</div>
+                  <div class="listUpBtn" @click="creatWebsite(scope.row.website_id)" v-else><i class="el-icon-brush"></i>构建</div>
                   <div class="listMainBtn"><i class="el-icon-link"></i>应用</div>
                 </div>
               </template>

src/views/template/templateStyle.vue

@@ -144,15 +144,6 @@ export default {
         });
       }
     },
-    //下一步
-    goCreat(){
-      this.$router.push({
-        path: '/templateCreat',
-        query: {
-          website_id: this.$route.query.website_id
-        }
-      });
-    },
     //放大缩略图
     showImg(img){
       this.windowStatus = true;
@@ -248,7 +239,8 @@ export default {
               path: '/templateCreat',
               query: {
                 website_id: this.$route.query.website_id,
-                step:2
+                step:2,
+                style:1
               }
             });
           }
@@ -293,6 +285,7 @@ export default {
             query: {
               website_id: this.$route.query.website_id,
               step:this.$route.query.step,
+              style:1
             }
           });
         }