增加自助建站功能

增加自助建站功能

src/api/genre.js

@@ -0,0 +1,96 @@
+// 最新-自助建站
+
+import request from '@/utils/request'
+// 风格管理  start------------------------------------------------------------
+
+//获取风格列表
+export function getTemplateClassList(params) {
+    return request({
+        url: '/public/getTemplateClassList',
+        method: 'get',
+        params
+    })
+}
+//新增风格
+export function addTemplateClass(data) {
+    return request({
+        url: '/public/addTemplateClass',
+        method: 'post',
+        data
+    })
+}
+//更新风格
+export function upTemplateClass(data) {
+    return request({
+        url: '/public/upTemplateClass',
+        method: 'post',
+        data
+    })
+}
+//删除风格
+export function delTemplateClass(data) {
+    return request({
+        url: '/public/delTemplateClass',
+        method: 'post',
+        data
+    })
+}
+// 风格管理  end------------------------------------------------------------
+
+
+// 皮肤管理  start------------------------------------------------------------
+
+//获取风格名称
+export const getTemplateClass=(data)=>{
+    return request({
+        url:'/public/getTemplateClass',
+        method:'post',
+        data
+    })
+}
+
+//获取皮肤列表
+export const getTemplateList = (data) => {
+    return request({
+        url: '/public/getTemplateList',
+        method: 'post',
+        data
+    })
+}
+
+//新增皮肤
+export const addTemplate = (data) => {
+    return request({
+        url: '/public/addTemplate',
+        method: 'post',
+        data
+    })
+}
+
+//删除皮肤
+export const delTemplate=(data)=>{
+    return request({
+        url:'/public/delTemplate',
+        method:'post',
+        data
+    })
+}
+
+//更新皮肤
+export const updateTemplate = (data) => {
+    return request({
+        url: '/public/updateTemplate',
+        method: 'post',
+        data
+    })
+}
+
+//获取皮肤详情
+export const getTemplateInfo=(data)=>{
+    return request({
+        url:'/public/getTemplateInfo',
+        method:'post',
+        data
+    })
+}
+// 皮肤管理  end------------------------------------------------------------

src/api/module.js

@@ -0,0 +1,99 @@
+// 组件
+import request from '@/utils/request'
+
+// 获取所有通栏
+export const getAllSector = (data) => {
+    return request({
+        url: '/public/getAllSector',
+        method: 'post',
+        data
+    })
+}
+// 获取所有组件类型
+export const getComponentType = (data) => {
+    return request({
+        url: '/public/getComponentType',
+        method: 'post',
+        data
+    })
+}
+
+//获取组件列表
+export const getComponentList = (data) => {
+    return request({
+        url: '/public/getComponentList',
+        method: 'post',
+        data
+    })
+}
+
+//新增组件
+export const addComponent = (data) => {
+    return request({
+        url: '/public/addComponent',
+        method: 'post',
+        data
+    })
+}
+
+//删除组件
+export const delComponent = (data) => {
+    return request({
+        url: '/public/delComponent',
+        method: 'post',
+        data
+    })
+}
+
+//编辑组件
+export const updateComponent = (data) => {
+    return request({
+        url: '/public/updateComponent',
+        method: 'post',
+        data
+    })
+}
+
+//获取组件详情
+export const getComponentInfo = (data) => {
+    return request({
+        url: '/public/getComponentInfo',
+        method: 'post',
+        data
+    })
+}
+
+// -------------自助建站-*-静态资源管理-----fr------start
+//获取静态资源列表
+export const getStaticResourceList = (params) => {
+    return request({
+        url: '/website/getStaticResourceList',
+        method: 'get',
+        params
+    })
+}
+//添加静态资源
+export const addStaticResource = (data) => {
+    return request({
+        url: '/website/addStaticResource',
+        method: 'post',
+        data
+    })
+}
+//删除静态资源
+export const delStaticResource = (data) => {
+    return request({
+        url: '/website/delStaticResource',
+        method: 'post',
+        data
+    })
+}
+//修改静态资源
+export const upStaticResource = (data) => {
+    return request({
+        url: '/website/upStaticResource',
+        method: 'post',
+        data
+    })
+}
+// -------------自助建站-*-静态资源管理-----fr------end

src/api/plate.js

@@ -0,0 +1,81 @@
+// 版块
+import request from '@/utils/request'
+
+// 获取所有皮肤
+export const getAllTemplate = (data) => {
+    return request({
+        url: '/public/getAllTemplate',
+        method: 'post',
+        data
+    })
+}
+// 获取所有尺寸
+export const getAllSize = (data) => {
+    return request({
+        url: '/public/getAllSize',
+        method: 'post',
+        data
+    })
+}
+// 获取通栏尺寸模版
+export const getAllSectorPlace = (data) => {
+    return request({
+        url: '/public/getAllSectorPlace',
+        method: 'post',
+        data
+    })
+}
+
+//获取版块列表
+export const getSectorList = (data) => {
+    return request({
+        url: '/public/getSectorList',
+        method: 'post',
+        data
+    })
+}
+
+//新增版块
+export const addSector = (data) => {
+    return request({
+        url: '/public/addSector',
+        method: 'post',
+        data
+    })
+}
+
+//删除版块
+export const delSector = (data) => {
+    return request({
+        url: '/public/delSector',
+        method: 'post',
+        data
+    })
+}
+
+//编辑版块
+export const updateSector = (data) => {
+    return request({
+        url: '/public/updateSector',
+        method: 'post',
+        data
+    })
+}
+
+//获取版块详情
+export const getSectorInfo = (data) => {
+    return request({
+        url: '/public/getSectorInfo',
+        method: 'post',
+        data
+    })
+}
+
+// 获取所有组件
+export const getAllComponent = (data) => {
+    return request({
+        url: '/public/getAllComponent',
+        method: 'post',
+        data
+    })
+}

src/api/style.js

@@ -0,0 +1,56 @@
+// 皮肤
+import request from '@/utils/request'
+
+//获取风格名称
+export const getTemplateClass=(data)=>{
+    return request({
+        url:'/public/getTemplateClass',
+        method:'post',
+        data
+    })
+}
+
+//获取皮肤列表
+export const getTemplateList = (data) => {
+    return request({
+        url: '/public/getTemplateList',
+        method: 'post',
+        data
+    })
+}
+
+//新增皮肤
+export const addTemplate = (data) => {
+    return request({
+        url: '/public/addTemplate',
+        method: 'post',
+        data
+    })
+}
+
+//删除皮肤
+export const delTemplate=(data)=>{
+    return request({
+        url:'/public/delTemplate',
+        method:'post',
+        data
+    })
+}
+
+//更新皮肤
+export const updateTemplate = (data) => {
+    return request({
+        url: '/public/updateTemplate',
+        method: 'post',
+        data
+    })
+}
+
+//获取皮肤详情
+export const getTemplateInfo=(data)=>{
+    return request({
+        url:'/public/getTemplateInfo',
+        method:'post',
+        data
+    })
+}

src/api/template.js

@@ -12,20 +12,20 @@ export function getWebsiteintel(data) {
 }
 
 //1.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
-export function addWebsiteTemplateintel(data) {
+export function checkWebsiteBuild(data) {
   return request({
-    url: '/website/addWebsiteTemplateintel',
+    url: '/website/checkWebsiteBuild',
     method: 'post',
     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
   })
 }
 
@@ -50,16 +50,16 @@ export function getAllTemplateClass(data) {
 //1.6 搜索并获取所有网站模板
 export function getWebsiteTemplateList(data) {
   return request({
-    url: '/website/getWebsiteTemplateList',
+    url: '/public/getWebsiteTemplateList',
     method: 'post',
     data
   })
 }
 
 //1.7 保存用户选择的模板
-export function addWebsiteTemplateclassintel(data) {
+export function chooseWebsiteTemplate(data) {
   return request({
-    url: '/website/addWebsiteTemplateclassintel',
+    url: '/public/chooseWebsiteTemplate',
     method: 'post',
     data
   })
@@ -75,9 +75,9 @@ export function getWebsiteTemplateclassintel(data) {
 }
 
 //1.9 保存模板配置
-export function addWebsiteTemplate(data) {
+export function saveWebsiteTemplate(data) {
   return request({
-    url: '/website/addWebsiteTemplate',
+    url: '/public/saveWebsiteTemplate',
     method: 'post',
     data
   })
@@ -118,4 +118,67 @@ export function sectorComponentList(params) {
     params
   })
 }
+
+//1.14 获得底部信息
+export function getAdminWebsiteFootAll(params) {
+    return request({
+        url: '/web/getAdminWebsiteFootAll',
+        method: 'get',
+        params
+    })
+}
+
+//1.15 批量添加导航
+export function addTwinAdPlace(data) {
+    return request({
+        url: '/ad/addTwinAdPlace',
+        method: 'post',
+        data
+    })
+}
+
+//1.16 获得模板基本信息
+export function getWebPageType(params) {
+    return request({
+        url: '/public/getWebPageType',
+        method: 'get',
+        params
+    })
+}
+
+//1.17 选择页面类型 - 是否添加搜索页
+export function addWebPageType(data) {
+    return request({
+        url: '/public/addWebPageType',
+        method: 'post',
+        data
+    })
+}
+
+//1.18 验证该网站是否有未结束的订单
+export function checkWebsiteEdit(data) {
+    return request({
+        url: '/website/checkWebsiteEdit',
+        method: 'post',
+        data
+    })
+}
+
+//1.19 回显模板
+export function getWebsiteTemplate(data) {
+    return request({
+        url: '/public/getWebsiteTemplate',
+        method: 'post',
+        data
+    })
+}
+
+//1.20 应用模板
+export function applyTemplate(data) {
+    return request({
+        url: '/website/upWebsiteStatus',
+        method: 'post',
+        data
+    })
+}
 //自助建站 end ------------------------------------->

src/layout/components/template/componentMenu.vue

@@ -0,0 +1,141 @@
+<template>
+    <div :class="['componentMenuBox', this.$store.state.template.componentMenuStatus == 0 ? 'componentMenuBoxHide' : '']" id="componentMenuBox">
+        <div class="floatArrow">
+            <span class="el-icon-arrow-left" @click="setComponentMenuStatus(0)" v-if="this.$store.state.template.componentMenuStatus == 1"></span>
+            <span class="el-icon-arrow-right" @click="setComponentMenuStatus(1)" v-if="this.$store.state.template.componentMenuStatus == 0"></span>
+        </div>
+        <div class="componentMenuTitle">
+            <div v-if="this.$store.state.template.pageStatus == 1">首页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 2">频道页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 3">列表页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 4">详情页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 5">搜索页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 6">底部列表页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 7">底部详情页可选板块：</div>
+        </div>
+        <div>
+            <el-scrollbar wrap-class="scrollbar-wrapper">
+                <!--首页通栏-->
+                <div v-if="this.$store.state.template.pageStatus == 1">
+                    <indexSector/>
+                </div>
+                <!--频道通栏-->
+                <div v-if="this.$store.state.template.pageStatus == 2">
+                    <classSector/>
+                </div>
+                <!--列表通栏-->
+                <div v-if="this.$store.state.template.pageStatus == 3">
+                    <listSector/>
+                </div>
+                <!--详情通栏-->
+                <div v-if="this.$store.state.template.pageStatus == 4">
+                    <articleSector/>
+                </div>
+                <!--搜索通栏-->
+                <div v-if="this.$store.state.template.pageStatus == 5">
+                    <searchSector/>
+                </div>
+                <!--底部列表通栏-->
+                <div v-if="this.$store.state.template.pageStatus == 6">
+                    <sectorList/>
+                </div>
+                <!--底部详情通栏-->
+                <div v-if="this.$store.state.template.pageStatus == 7">
+                    <sectorArticle/>
+                </div>
+            </el-scrollbar>
+        </div>
+    </div>
+</template>
+
+<script>
+import indexSector from './pages/index/sector.vue';
+import classSector from './pages/class/sector.vue';
+import listSector from './pages/list/sector.vue';
+import articleSector from './pages/article/sector.vue';
+import searchSector from './pages/search/sector.vue';
+import sectorList from './pages/about/sectorList.vue';
+import sectorArticle from './pages/about/sectorArticle.vue';
+
+export default {
+    name: 'componentMenu',
+    components:{
+        indexSector,
+        classSector,
+        listSector,
+        articleSector,
+        searchSector,
+        sectorList,
+        sectorArticle
+    },
+    props: {
+        
+    },
+    data() {
+        return {
+            data: null
+        }
+    },
+    methods: {
+        setComponentMenuStatus(data) {
+            this.$store.commit('template/setComponentMenuStatus', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.componentMenuBox {
+    .floatArrow {
+        position: absolute;
+        top: 50%;
+        right: -16px;
+        width: 40px;
+        height: 40px;
+        background: #2F2F2F;
+        border-radius: 50%;
+        font-size: 18px;
+        color:#fff;
+        line-height:40px;
+        cursor: pointer;
+        color: #c7c7c7;
+        box-sizing: border-box;
+        padding-left: 16px;
+    }
+    transition: width 0.28s;
+    width: 220px !important;
+    background: #2F2F2F;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    .sectorBox {
+        height: 100%;
+    }
+    .el-scrollbar {
+        height: calc(100vh - 60px);
+    }
+    .componentMenuTitle {
+        padding: 37px 0 30px 0;
+        color: #fff;
+        font-size: 18px;
+        font-weight: bold;
+        div {
+            border-left: 3px solid #5570F1;
+            padding-left: 25px;
+        }
+    }
+}
+.componentMenuBoxHide {
+    width: 10px !important;
+    .componentMenuTitle {
+        display: none;
+    }
+    .el-scrollbar {
+        display: none;
+    }
+}
+</style>

src/layout/components/template/pages/about/sectorArticle.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="sectorBox">
+        <div class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)" 
+            @drag="drag('adSector', 12, adSector)"
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750817753245775.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div class="sectorItemBox" 
+            @click="addModule('aboutArticleSector', 115, aboutArticleSector)" 
+            @drag="drag('aboutArticleSector', 115, aboutArticleSector)"
+            @dragend="dragend('aboutArticleSector', 115, aboutArticleSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750746198879072.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750831385586584.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">通用型单页详情</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        type: {
+
+        },
+    },
+    data() {
+        return {
+            //添加通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //添加通栏广告模块 end---------------------------------------->
+
+            //通用单页详情模块 start---------------------------------------->
+            aboutArticleSector: {
+                "sectorName": "aboutArticleSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "fcat_id": 1, 
+                            "listType": [
+                                "id",
+                                "list_title",
+                                "con_title",
+                                "content",
+                                "fcat_id",
+                                "created_at",
+                                "updated_at",
+                                "type_id"    
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 3,
+                        "component_style": 1,
+                        "sort": 1,
+                    }
+                ],
+            },
+            //通用单页详情模块 end---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                min-height: 20px;
+            }
+        }
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

src/layout/components/template/pages/about/sectorList.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="sectorBox">
+        <div class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)" 
+            @drag="drag('adSector', 12, adSector)"
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750817753245775.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div class="sectorItemBox" 
+            @click="addModule('aboutListSector', 132, aboutListSector)" 
+            @drag="drag('aboutListSector', 132, aboutListSector)"
+            @dragend="dragend('aboutListSector', 132, aboutListSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750746179192707.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750831329194215.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">通用型单页列表</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        type: {
+
+        },
+    },
+    data() {
+        return {
+            //通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //通栏广告模块 end---------------------------------------->
+
+            //通栏广告模块 start---------------------------------------->
+            aboutListSector: {
+                "sectorName": "aboutListSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "fcat_id": 7,
+                            "listType": [
+                                "id",
+                                "list_title",
+                                "con_title",
+                                "content",
+                                "fcat_id",
+                                "created_at",
+                                "updated_at",
+                                "type_id"
+                            ]
+                        }
+                    },
+                    {
+                        "component_type": 3,
+                        "component_style": 1,
+                        "sort": 1,
+                    }
+                ],
+            },
+            //通栏广告模块 end---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                min-height: 20px;
+            }
+        }
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,253 @@
+<template>
+    <div class="sectorBox">
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)"
+            @drag="drag('adSector', 12, adSector)" 
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750817753245775.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>/>
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('articleSector', 161, articleSector)"
+            @drag="drag('articleSector', 161, articleSector)" 
+            @dragend="dragend('articleSector', 161, articleSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750667986738371.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750829165556967.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">通用型文章详情</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        type: {
+
+        },
+    },
+    data() {
+        return {
+            //模块1通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //模块1栏广告模块 end---------------------------------------->
+
+            //模块2通用型文章详情模块 start---------------------------------------->
+            articleSector: {
+                "sectorName": "articleSector",
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "article_id":"",
+                            "listType": [
+                                "id",
+                                "catid",
+                                "title",
+                                "introduce",
+                                "tag",
+                                "keyword",
+                                "author",
+                                "copyfrom",
+                                "fromurl",
+                                "hits",
+                                "ip",
+                                "status",
+                                "islink",
+                                "linkurl",
+                                "imgurl",
+                                "admin_user_id",
+                                "cat_arr_id",
+                                "created_at",
+                                "updated_at",
+                                "is_original",
+                                "survey_id",
+                                "survey_name",
+                                "is_survey",
+                                "survey_type",
+                                "web_site_id",
+                                "ignore_ids",
+                                "reason",
+                                "department_arr_id",
+                                "department_id",
+                                "city_arr_id",
+                                "city_id",
+                                "level",
+                                "commend_id",
+                                "level_text",
+                                "article_id",
+                                "content",
+                                "category_id",
+                                "cat_name",
+                                "website_name",
+                                "suffix",
+                                "commendArticle"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"最新资讯",
+                            "level":4,
+                            "imgSize": 2,
+                            "textSize": 4,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 3,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"热点精选",
+                            "level":5,
+                            "imgSize": 0,
+                            "textSize": 8,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //模块2通用型文章详情模块 end---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+            img {
+                display: block;
+                width: 100%;
+                min-height: 20px;
+            }
+        }
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,485 @@
+<template>
+    <div class="sectorBox">
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('channelMenu', 13, channelMenu)"
+            @drag="drag('channelMenu', 13, channelMenu)" 
+            @dragend="dragend('channelMenu', 13, channelMenu)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750311785239902.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750839704883892.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">子导航菜单</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)"
+            @drag="drag('adSector', 12, adSector)" 
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750817753245775.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>/>
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('scrollTextSector', 44, scrollTextSector)" 
+            @drag="drag('scrollTextSector', 44, scrollTextSector)"
+            @dragend="dragend('scrollTextSector', 44, scrollTextSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750312139660006.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820773336300.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">滚动图文组合</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('manyPictureSector', 47, manyPictureSector)"
+            @drag="drag('manyPictureSector', 47, manyPictureSector)"
+            @dragend="dragend('manyPictureSector', 47, manyPictureSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749085058737998.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820905439306.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">新闻图文组合1</div>
+        </div>
+        <div 
+            class="sectorItemBox"
+            @click="addModule('commentSector', 47, commentSector)"
+            @drag="drag('commentSector', 47, commentSector)" 
+            @dragend="dragend('commentSector', 47, commentSector)">
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749170683104422.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820973808775.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">新闻图文组合2</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('listSector', 98, listSector)"
+            @drag="drag('listSector', 98, listSector)" 
+            @dragend="dragend('listSector', 98, listSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749200397579402.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750822186600939.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">新闻图文组合3</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        type: {
+
+        },
+    },
+    data() {
+        return {
+            //模块1频道菜单 start---------------------------------------->
+            channelMenu: {
+                "sectorName": "channelMenu",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 3,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 3=静态组件
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+            },
+            //模块1频道菜单 end---------------------------------------->
+
+
+            //模块2通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //模块2栏广告模块 end---------------------------------------->
+
+            //模块3滚动图文组合 start---------------------------------------->
+            scrollTextSector: {
+                "sectorName": "scrollTextSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,//组件类型 1=新闻 2=广告
+                        "component_style": 1,//该组件使用哪个展示样式
+                        "sort": 1,//排序位置
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"自动生成",
+                            "level": "",
+                            "imgSize": 5,
+                            "textSize": 9,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                ]
+            },
+            //模块3滚动图文组合 end---------------------------------------->
+
+            //模块4两列新闻组合模块1 start---------------------------------------->
+            manyPictureSector: {
+                sectorName: "manyPictureSector",//板块名称
+                componentList: [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"自动生成",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 9,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"自动生成",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 6,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //模块4两列新闻组合模块1 end---------------------------------------->
+
+            //模块5两列新闻组合模块2 end---------------------------------------->
+            commentSector: {
+                sectorName: "commentSector",//板块名称
+                componentList: [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"自动生成",
+                            "level":"",
+                            "imgSize": 2,
+                            "textSize": 12,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"自动生成",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //模块5两列新闻组合模块2 end---------------------------------------->
+
+            //模块5两列新闻组合模块3 start---------------------------------------->
+            listSector: {
+                sectorName: "listSector",//板块名称
+                componentList: [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"自动生成",
+                            "level":"",
+                            "imgSize": 2,
+                            "textSize": 12,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"自动生成",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 3,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"自动生成",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //模块5两列新闻组合模块3 end---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                min-height: 20px;
+            }
+        }
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,636 @@
+<template>
+    <div class="sectorBox">
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)"
+            @drag="drag('adSector', 12, adSector)" 
+            @dragend="dragend('adSector', 12, adSector)"
+            @mouseenter="componentPreviewStatus(true,'http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png')"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750817753245775.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('headLineSector', 17, headLineSector)" 
+            @drag="drag('headLineSector', 17, headLineSector)"
+            @dragend="dragend('headLineSector', 17, headLineSector)"
+            @mouseenter="componentPreviewStatus(true,'http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png')"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750819803899738.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">网站头条</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('bannerSector', 44, bannerSector)"
+            @drag="drag('bannerSector', 44, bannerSector)" 
+            @dragend="dragend('bannerSector', 44, bannerSector)"
+            @mouseenter="componentPreviewStatus(true,'http://img.bjzxtw.org.cn/pre/image/png/20250604/174899892158949.png')"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/174899892158949.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750819938475436.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">焦点图</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('linkSector', 26, linkSector)"
+            @drag="drag('linkSector', 26, linkSector)" 
+            @dragend="dragend('linkSector', 26, linkSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250709/1752025989873169.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750921543723236.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">外链面板</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('manyPictureSector', 47, manyPictureSector)"
+            @drag="drag('manyPictureSector', 47, manyPictureSector)"
+            @dragend="dragend('manyPictureSector', 47, manyPictureSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749085058737998.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/175082020060857.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">新闻图文组合1</div>
+        </div>
+        <div 
+            class="sectorItemBox"
+            @click="addModule('commentSector', 47, commentSector)"
+            @drag="drag('commentSector', 47, commentSector)" 
+            @dragend="dragend('commentSector', 47, commentSector)">
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749170683104422.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820111536544.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">新闻图文组合2</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('listSector', 98, listSector)"
+            @drag="drag('listSector', 98, listSector)" 
+            @dragend="dragend('listSector', 98, listSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749200397579402.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820339495190.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">新闻图文组合3</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('onlyImgSector', 51, onlyImgSector)"
+            @drag="drag('onlyImgSector', 51, onlyImgSector)" 
+            @dragend="dragend('onlyImgSector', 51, onlyImgSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749451127220319.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820413450978.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">带广告新闻组合</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        type: {
+
+        },
+    },
+    data() {
+        return {
+            //模块1通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //添加通栏广告模块 start---------------------------------------->
+
+            //添加头条广告模块 start---------------------------------------->
+            headLineSector: {
+                "sectorName": "headLineSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,//组件类型 1=新闻 2=广告
+                        "component_style": 1,//该组件使用哪个展示样式
+                        "sort": 1,//排序位置
+                        "componentData": {
+                            "level": 1,
+                            "imgSize": 0,
+                            "textSize": 4,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //添加头条广告模块 start---------------------------------------->
+
+            //添加banner模块 start---------------------------------------->
+            bannerSector: {
+                "sectorName": "bannerSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,//组件类型 1=新闻 2=广告
+                        "component_style": 1,//该组件使用哪个展示样式
+                        "sort": 1,//排序位置
+                        "componentData": {
+                            "level": 2,
+                            "imgSize": 5,
+                            "textSize": 0,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,//组件类型 1=新闻 2=广告
+                        "component_style": 1,//该组件使用哪个展示样式
+                        "sort": 2,//排序位置
+                        "componentData": {
+                            "level": 6,
+                            "imgSize": 0,
+                            "textSize": 10,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //添加banner模块 end---------------------------------------->
+
+            //两列新闻组合模块1 start---------------------------------------->
+            manyPictureSector: {
+                "sectorName": "manyPictureSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 9,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 6,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //两列新闻组合模块1 end---------------------------------------->
+
+            //两列新闻组合模块2 end---------------------------------------->
+            commentSector: {
+                "sectorName": "commentSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 2,
+                            "textSize": 12,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //两列新闻组合模块2 end---------------------------------------->
+
+            //两列新闻组合模块3 start---------------------------------------->
+            listSector: {
+                "sectorName": "listSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 2,
+                            "textSize": 12,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 3,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //两列新闻组合模块3 end---------------------------------------->
+
+            //带广告新闻组合 start---------------------------------------->
+            onlyImgSector: {
+                "sectorName": "onlyImgSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 4,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                ],
+                "ad": {
+                    "width": 450, //宽度
+                    "height": 290, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "http://img.bjzxtw.org.cn/pre/image/png/20250609/174945725555092.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //带广告新闻组合 end---------------------------------------->
+
+            //外链面板 start---------------------------------------->
+            linkSector: {
+                "sectorName": "linkSector",
+                "componentList": [
+                    {
+                        "component_type": 3,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ]
+            },
+            //添加通栏广告模块 start---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        },
+        //设置组件预览状态
+        componentPreviewStatus(status,src) {
+            let setData = {
+                status: status,
+                img: src
+            }
+            this.$store.commit('template/setComponentPreviewStatus', setData);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                min-height: 20px;
+            }
+        }
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,253 @@
+<template>
+    <div class="sectorBox">
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('channelMenu', 13, channelMenu)"
+            @drag="drag('channelMenu', 13, channelMenu)" 
+            @dragend="dragend('channelMenu', 13, channelMenu)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750311785239902.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750839704883892.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">子导航菜单</div>
+        </div>
+        <div class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)" 
+            @drag="drag('adSector', 12, adSector)"
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750817753245775.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div class="sectorItemBox" 
+            @click="addModule('fixedListSector', 125, fixedListSector)" 
+            @drag="drag('fixedListSector', 125, fixedListSector)"
+            @dragend="dragend('fixedListSector', 125, fixedListSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750646777377058.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750829474588252.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">通用型文章列表</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        type: {
+
+        },
+    },
+    data() {
+        return {
+            //模块1频道菜单 start---------------------------------------->
+            channelMenu: {
+                "sectorName": "channelMenu",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 3,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 3=静态组件
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+            },
+            //模块1频道菜单 end---------------------------------------->
+            //添加通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            fixedListSector: {
+                "sectorName": "fixedListSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "pageType": {
+                                "page": 1,
+                                "pageSize": 20
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"最新资讯",
+                            "level":4,
+                            "imgSize": 2,
+                            "textSize": 4,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 3,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"热点精选",
+                            "level":5,
+                            "imgSize": 0,
+                            "textSize": 8,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ],
+            },
+            //添加通栏广告模块 start---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                min-height: 20px;
+            }
+        }
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,151 @@
+<template>
+    <div class="sectorBox">
+        <div class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)" 
+            @drag="drag('adSector', 12, adSector)"
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750817753245775.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div class="sectorItemBox" 
+            @click="addModule('searchListSector', 133, searchListSector)" 
+            @drag="drag('searchListSector', 133, searchListSector)"
+            @dragend="dragend('searchListSector', 133, searchListSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750727451366122.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750829776880227.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
+            </div>
+            <div class="sectorItemTitle">通用型搜索列表</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        type: {
+
+        },
+    },
+    data() {
+        return {
+            //添加通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //添加通栏广告模块 end---------------------------------------->
+
+            //通用型搜索列表模块 start---------------------------------------->
+            searchListSector: {
+                "sectorName": "searchListSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 3,//组件类型 1=新闻 2=广告 3=静态组件
+                        "component_style": 1,
+                        "sort": 1,
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                    }
+                ],
+            },
+            //通用型搜索列表模块 end---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                min-height: 20px;
+            }
+        }
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

src/layout/creatWebsite.vue

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

src/router/index.js

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

src/router/modules/dangyunlong.js

@@ -0,0 +1,119 @@
+/** 引入模板 **/
+import Layout from '@/layout'
+import creatWebsite from '@/layout/creatWebsite'
+
+const dangyunlongRouter= [
+  {
+    path: '/templateCreat',
+    component: creatWebsite,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/template/templateCreat'),
+        meta: {
+          title: '构建网站模板',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/templateBase',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/template/templateBase'),
+        meta: {
+          title: '填写模板基本信息',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/templateStyle',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/template/templateStyle'),
+        meta: {
+          title: '选择模板风格',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/templateList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/template/templateList'),
+        meta: {
+          title: '网站模板',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/style',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/style.vue'),
+        meta: {
+          title: '风格',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/skin',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/skin'),
+        meta: {
+          title: '皮肤',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/imgList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/imgList.vue'),
+        meta: {
+          title: '静态资源管理',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+]
+export default dangyunlongRouter

src/store/modules/genre.js

@@ -0,0 +1,128 @@
+import { getTemplateClassList,addTemplateClass,upTemplateClass,delTemplateClass,
+    getTemplateClass,getTemplateList,addTemplate,delTemplate,updateTemplate,getTemplateInfo
+ } from '@/api/genre'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+    // 风格管理  start------------------------------------------------------------
+    getTemplateClassList({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateClassList(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    addTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    upTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            upTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    delTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 风格管理  end------------------------------------------------------------
+
+
+    // 皮肤管理  start------------------------------------------------------------
+    //获取风格名称
+    getTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //获取皮肤列表
+    getTemplateList({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateList(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //新增皮肤
+    addTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //删除皮肤
+    delTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //更新皮肤
+    updateTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            updateTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //获取皮肤详情
+    getTemplateInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateInfo(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+}
+
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/store/modules/module.js

@@ -0,0 +1,136 @@
+import { getStaticResourceList,addStaticResource,delStaticResource,
+    upStaticResource,getAllSector,getComponentType,getComponentList,
+    addComponent,delComponent,updateComponent,getComponentInfo} from '@/api/module'
+
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+    // getStaticResourceList({ commit }, data) {
+    //     return new Promise((resolve, reject) => {
+    //         getStaticResourceList(data).then(response => {
+    //             resolve(response)
+    //         }).catch(error => {
+    //             reject(error)
+    //         })
+    //     })
+    // },
+    getStaticResourceList({commit},data) {
+        return new Promise((resolve, reject) => {
+            getStaticResourceList(data).then(response => {
+            resolve(response)
+          }).catch(error => {
+            reject(error)
+          })
+        })
+      },
+    addStaticResource({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addStaticResource(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    delStaticResource({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delStaticResource(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    upStaticResource({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            upStaticResource(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 获取所有通栏
+    getAllSector({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getAllSector(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 获取所有组件类型
+    getComponentType({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getComponentType(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 获取组件列表
+    getComponentList({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getComponentList(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 添加组件
+    addComponent({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addComponent(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 删除组件
+    delComponent({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delComponent(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 更新组件
+    updateComponent({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            updateComponent(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 获取组件详情
+    getComponentInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getComponentInfo(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+}
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/store/modules/template.js

@@ -0,0 +1,1261 @@
+//0.自助建站的接口 start---------------------------------------->
+import { getSiteInfo, getSiteCategory, getFooterCategoryList} from '@/api/cms'
+import {
+    getWebsiteintel, checkWebsiteBuild, getAdminSiteInfo, upWebsiteTemplateintel, getAllTemplateClass, 
+    getWebsiteTemplateList, chooseWebsiteTemplate, getWebsiteTemplateclassintel, saveWebsiteTemplate, 
+    getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll, addTwinAdPlace, 
+    getWebPageType, addWebPageType, checkWebsiteEdit, getWebsiteTemplate, applyTemplate
+} from '@/api/template'
+//0.自助建站的接口 end---------------------------------------->
+
+//1.引入必备方法 start---------------------------------------->
+//导入Vue因为我们要进行深层次的json修改,必须调用Vue.Set，否则深拷贝的数据无法令视图更新
+import { Message } from 'element-ui'; 
+import Vue from 'vue';  
+//1.引入必备方法 end---------------------------------------->
+
+//2.引入随机模板json后期删除 start---------------------------------------->
+//首页 风格1
+import randomIndex1 from '@/utils/templateJson/index/style1/1.js';
+//首页 风格2
+import randomIndex2 from '@/utils/templateJson/index/style1/2.js';
+//2.引入随机模板json后期删除 end---------------------------------------->
+
+const state = {
+    //0.全局配置 start------------------------------------------------------------> 
+    editWebsiteId: "",//网站id
+    adKey: "",//网站缩写
+    editWebsiteClass: "",//网站风格
+    stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
+    componentMenuStatus: 1,//组件菜单是否显示 1=显示 0=隐藏
+    componentPreviewStatus: false,//组件预览是否显示
+    componentPreviewImg:"",//组件预览数据
+    //0.全局配置 end------------------------------------------------------------>
+
+    //1.画布数据 start------------------------------------------------------------>
+    pageStatus: 1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=底部列表页 7=底部详情页 
+    menuType: 1, //当前菜单显示板块还是组件 1=板块 2=组件 
+    previewStatus: false,//是否预览
+    gridKey: 0,//使用gridKey来强制更新视图
+    loading: false,//是否显示加载中
+    showPage: { //哪些页面可以被展示
+        index: true,
+        class: true,
+        list: true,
+        article: true,
+        search: true,
+        aloneList: true,
+        aloneArticle: true
+    },
+    pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
+        index: [],//首页
+        class: [],//分类页
+        list: [],//列表页
+        article: [],//详情页
+        search: [],//搜索页
+        aloneList: [],//自定义列表页
+        aloneArticle: [],//自定义详情页
+    },
+    editSectorY: 0,//当前组件在画布中的位置
+    mouseXY: {//鼠标位置
+        "x": 12,
+        "y": 33
+    },
+    DragPos: {//创建的占位符大小
+        "x": null,
+        "y": null,
+        "w": 12,
+        "h": 2,
+        "i": null
+    },
+    gridlayoutObj: null,//画布gridlayout对象
+    //1.画布数据 end------------------------------------------------------------>
+
+    //2.全局模板数据 start------------------------------------------------------------>
+    webSiteInfo: "",//网站信息
+    webSiteMenu: "",//网站包含的导航池
+    webSiteFooterInfo: "",//网站底部信息
+    area: {//地区
+        economize: [],//省区
+        market: [],//市区
+        county: []//县区
+    },
+    departmentList: [],//职能部门
+    //2.全局模板数据 end------------------------------------------------------------>
+
+    //3.构造的模板json数据 start------------------------------------------------------------>
+    pageDataStatus:{//页面数据完整度
+        index:{
+            sector:0,//当前板块数量，为0表示一个都没有
+            cid:0,//缺少的导航池id 为0表示没有缺少
+            ad:0,//缺少的广告名称，为0表示没有缺少
+            adPrice:0//缺少的广告价格，为0表示没有缺少
+        },
+        class:{
+            sector:0,
+            cid:0,
+            ad:0,
+            adPrice:0
+        },
+        list:{
+            sector:0,
+            cid:0,
+            ad:0,
+            adPrice:0
+        },
+        article:{
+            sector:0,
+            cid:0,
+            ad:0,
+            adPrice:0
+        },
+        search:{
+            sector:0,
+            cid:0,
+            ad:0,
+            adPrice:0
+        },
+        aloneList:{
+            sector:0,
+            cid:0,
+            ad:0,
+            adPrice:0
+        },
+        aloneArticle:{
+            sector:0,
+            cid:0,
+            ad:0,
+            adPrice:0
+        }
+    },
+    ad_id: "",//生成储存的广告标识
+    pageName:{ //页面名称
+        1:"index",
+        2:"class",
+        3:"list",
+        4:"article",
+        5:"search",
+        6:"aloneList",
+        7:"aloneArticle"
+    },
+    pageRoute:{ //数据路径
+        1:"state.pageData.index",
+        2:"state.pageData.class",
+        3:"state.pageData.list",
+        4:"state.pageData.article",
+        5:"state.pageData.search",
+        6:"state.pageData.aloneList",
+        7:"state.pageData.aloneArticle"
+    },
+    editWindowStatus: false,//编辑组件弹出框是否显示
+    editComponentWindowStatus: false,//选择组件样式弹出框是否显示
+    editWebsiteTemplateJsonWindow: false,//当前准备提交的数据 后期删除
+    editWindowTitle: "",//编辑弹出框标题
+    editSectorId: 0,//当前正在编辑的板块id
+    editDataSort: 0,//当前正在编辑的数据位置
+    editComponentSort: 0,//当前正在编辑的组件id
+    editComponentType: 0,//当前正在编辑的组件类型
+    editComponentSize: 0,//当前组件文字新闻数量
+    editComponentSizeImg: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: []//自定义详情页
+        },
+        //4.广告位
+        ad: {
+            top:{
+                "width": 830,//宽度
+                "height": 110,//高度
+                "name": "",//广告名称
+                "price": 0,//价格
+                "introduce":"",//介绍
+                "website_id": "",//网站id
+                "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                "typeid": 2,//广告类型 - 2 图片
+                "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+            },
+            index: [],
+            class: [],
+            list: [],
+            article: [],
+            search: [],
+            aloneList: [],
+            aloneArticle: []
+        },
+        //5.是否使用搜索页
+        isSearch: true//true=使用 false=不使用
+    },
+    canSubmit: false,//当前数据是否可以被提交
+    //3.构造的模板json数据 end------------------------------------------------------------>
+
+    //4.组件回显数据 start------------------------------------------------------------>
+    componentViewData: {
+        pid_arr: [],//导航池
+        pageSize: "",//展示文字新闻条数
+        pageSizeImg: "",//展示图片新闻条数
+        adName: "",//广告名称
+        titleName: "",//标题名称
+        windowKey:0,//级联选择器的key
+        price:0//广告价格
+    }
+    //4.组件回显数据 start------------------------------------------------------------>
+}
+
+const mutations = {
+    //0.全局配置 start------------------------------------------------------------>
+    //设置网站的id
+    setEditWebsiteId(state, id) {
+        state.editWebsiteId = id;
+    },
+    //设置网站缩写
+    setAdKey(state, key) {
+        state.adKey = key;
+    },
+    //设置网站的风格
+    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;
+    },
+    //设置组件预览状态
+    setComponentPreviewStatus(state, data) {
+        state.componentPreviewStatus = data.status;
+        state.componentPreviewImg = data.img;
+    },
+    //开启关闭搜索页配置
+    setSearchPageStatus(state, data) {
+        state.showPage.search = data;
+        state.webSiteData.isSearch = data;
+    },
+    //打开编辑组件弹出框
+    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;
+        state.editComponentSizeImg = data.sizeImg;
+    },
+    //更新编辑窗口中的数据
+    updateWindowData(state) {
+        state.componentViewData.windowKey++;
+    },
+    //关闭编辑组件弹出框
+    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) {
+        //获取当前页面名称
+        const currentPageName = state.pageName[state.pageStatus];
+        //如果页面名称不存在，直接返回
+        if (!currentPageName) {return;}
+        //获取当前页面的数据
+        const currentPageData = state.pageData[currentPageName];
+        //找到要修改的板块
+        const targetModuleIndex = currentPageData.findIndex(module => module.i === data.id);
+        //如果找不到目标模块，直接返回
+        if (targetModuleIndex === -1) {return;}
+        //获取目标模块
+        const targetModule = currentPageData[targetModuleIndex];
+        //获取目标模块的组件类型
+        //判断组件类型 1=新闻 2=广告
+        if (state.editComponentType === 1) {
+            // 新闻组件：设置导航id
+            if (targetModule.content.componentList && targetModule.content.componentList[data.sort]) {
+                const componentData = targetModule.content.componentList[data.sort].componentData;
+                state.componentViewData.pid_arr = componentData.category_arr;
+                state.componentViewData.pageSize = state.editComponentSize;
+                state.componentViewData.pageSizeImg = state.editComponentSizeImg;
+            }
+        } else if (state.editComponentType === 2) {
+            // 广告组件：设置广告名称和价格
+            if (targetModule.content.ad) {
+                state.componentViewData.adName = targetModule.content.ad.name;
+                state.componentViewData.price = targetModule.content.ad.price;
+            }
+        }
+    },
+    //清空广告位
+    clearAd(state) {
+        state.webSiteData.ad.index = [];
+        state.webSiteData.ad.class = [];
+        state.webSiteData.ad.list = [];
+        state.webSiteData.ad.article = [];
+        state.webSiteData.ad.search = [];
+        state.webSiteData.ad.aloneList = [];
+        state.webSiteData.ad.aloneArticle = [];
+    },
+    //设置组件菜单是否显示
+    setComponentMenuStatus(state, data) {
+        state.componentMenuStatus = data;
+    },
+    //清理搜索页的数据
+    clearSearchPageData(state) {
+        state.pageData.search = [];
+        state.webSiteData.ad.search = [];
+        state.webSiteData.template.search = [];
+        state.webSiteData.isSearch = false;
+    },
+    //0.全局配置 start------------------------------------------------------------>
+    //1.配置模块 start------------------------------------------------------------>
+    //获得gridlayout对象
+    setGridlayoutObj(state, data) {
+        state.gridlayoutObj = data;
+    },
+    //添加板块 - 此代码无需优化，每个页面的规则都不一样
+    addModule(state, data) {
+        //pageStatus==1 首页 index
+        if (state.pageStatus == 1) {
+            if (state.pageData.index.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+        }
+        //pageStatus==2 分类页 class
+        if (state.pageStatus == 2) { 
+            if (state.pageData.class.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+        }
+        //pageStatus==3 列表页 list
+        if (state.pageStatus == 3) { 
+            if (state.pageData.list.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+        }
+        //pageStatus==4 详情页 article
+        if (state.pageStatus == 4) {
+            if (state.pageData.article.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+        }
+        //pageStatus==5 搜索页 search
+        if (state.pageStatus == 5) {
+            if (state.pageData.search.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+         }
+        //pageStatus==6 自定义列表页 aloneList
+        if (state.pageStatus == 6) {
+            if (state.pageData.aloneList.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+         }
+        //pageStatus==7 自定义详情页 aloneArticle
+        if (state.pageStatus == 7) { 
+            if (state.pageData.aloneArticle.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+        }
+    },
+    //该数据可以添加到画布
+    pushModule(state, data) {
+        //获取当前页面名称
+        const currentPageName = state.pageName[state.pageStatus];
+        if (!currentPageName) {
+            console.error('无效的页面状态:', state.pageStatus);
+            return;
+        }
+        //获取当前页面数据
+        const currentPageData = state.pageData[currentPageName];
+        if (!currentPageData) {
+            console.error('未找到页面数据:', currentPageName);
+            return;
+        }
+        console.log(data.jsonData);
+        console.log(`通过${data.source === 'click' ? '点击' : '拖拽'}添加一个板块`);
+        //通过时间戳生成唯一id
+        const currentTimestamp = Date.now();
+        const moduleId = currentTimestamp;
+        //计算当前布局的最大 y 值
+        const maxY = Math.max(...currentPageData.map(item => item.y), 0);
+        //设置数据在构建json中的位置
+        const dataSort = currentPageData.length;
+        //根据source类型设置y坐标
+        const yPosition = data.source === 'click' ? maxY + 1 : data.y;
+        // 创建新模块
+        const newModule = {
+            i: moduleId,
+            x: 0,
+            y: yPosition,
+            w: 12,
+            h: data.h,
+            type: data.type,
+            content: data.jsonData,
+            dataSort: dataSort,
+        };
+        //添加模块到当前页面数据
+        currentPageData.push(newModule);
+        console.log(`当前添加模块的dataSort为：${dataSort}`);
+        console.log('当前的页面构建数据:', currentPageData);
+        //拖拽特殊处理
+        if (data.source === 'drag') {
+            // 调用gridlayout的拖拽结束事件
+            state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
+            // 尝试显示占位符
+            try {
+                const targetIndex = currentPageData.length;
+                if (state.gridlayoutObj.$children && 
+                    state.gridlayoutObj.$children[targetIndex] &&
+                    state.gridlayoutObj.$children[targetIndex].$refs &&
+                    state.gridlayoutObj.$children[targetIndex].$refs.item) {
+                    state.gridlayoutObj.$children[targetIndex].$refs.item.style.display = "block";
+                }
+            } catch (error) {
+                console.log("没有找到占位符:", error);
+            }
+        }
+    },
+    //删除板块
+    deleteModule(state, data) {
+        //data.i = id
+        //data.dataSort = dataSort
+        try {
+            // 获取当前页面名称
+            const currentPageName = state.pageName[state.pageStatus];
+            if (!currentPageName) {
+                Message.warning('无效的页面状态！');
+                return;
+            }
+            // 获取当前页面的数据数组
+            const currentPageData = state.pageData[currentPageName];
+            if (!currentPageData) {
+                Message.warning('未找到页面数据！');
+                return;
+            }
+            //找到要删除的模块
+            const indexToRemove = currentPageData.findIndex(item => item.i === data.i);
+            if (indexToRemove === -1) {
+                Message.warning('未找到要删除的模块！');
+                return;
+            }
+            //创建新的数组，不包含要删除的模块
+            const newModules = currentPageData.filter(item => item.i !== data.i);
+            //重新计算所有模块的 dataSort
+            newModules.forEach((module, index) => {
+                module.dataSort = index;
+            });
+            //使用 Vue.set 更新整个数组
+            Vue.set(state.pageData, currentPageName, newModules);
+            //清理 $children 数组
+            if (state.gridlayoutObj && state.gridlayoutObj.$children) {
+                //清空$children 数组
+                state.gridlayoutObj.$children.length = 0;
+                //强制重新渲染
+                state.gridKey += 1;
+                //等待 DOM 更新后重新设置gridlayout对象
+                Vue.nextTick(() => {
+                    //通知父组件重新设置gridlayout对象
+                    //这里可以通过事件总线或其他方式通知
+                    if (state.gridlayoutObj && state.gridlayoutObj.$parent) {
+                        //尝试重新获取gridlayout对象
+                        const newGridLayout = state.gridlayoutObj.$parent.$refs.gridlayout;
+                        if (newGridLayout) {
+                            state.gridlayoutObj = newGridLayout;
+                        }
+                    }
+                });
+            }
+            Message.success('模块已删除！');
+            console.log(`模块已删除，当前${currentPageName}页面的构建数据为：`, newModules);
+            console.log(state.pageData.list);
+        } catch (error) {
+            console.error('删除模块时发生错误:', error);
+            Message.error('删除模块时发生错误，请重试！');
+        }
+    },
+    //设置组件样式
+    setComponentStyleNumber(state, data) {
+        const id = state.editSectorId;
+        const dataSort = state.editDataSort;
+        const sort = state.editComponentSort;
+        const num = state.editComponentStyle;
+        console.log(id, dataSort, sort, num);
+        //获取当前页面名称
+        const currentPageName = state.pageName[state.pageStatus];
+        if (!currentPageName) {
+            console.error('无效的页面状态:', state.pageStatus);
+            return;
+        }
+        //获取当前页面的数据数组
+        const currentPageData = state.pageData[currentPageName];
+        if (!currentPageData || !currentPageData[dataSort]) {
+            console.error('未找到页面数据:', currentPageName, dataSort);
+            return;
+        }
+        //获取当前模块数据并进行深拷贝
+        const module = JSON.parse(JSON.stringify(currentPageData[dataSort]));
+        //确保修改属性时 Vue 能监控到变化
+        Vue.set(module.content.componentList, sort, {
+            ...module.content.componentList[sort],
+            component_style: num
+        });
+        //使用Vue.set来强制视图更新
+        Vue.set(currentPageData, dataSort, module);
+        console.log(`当前${currentPageName}页面的板块数据为：`);
+        console.log(currentPageData);
+    },
+    //保存全局广告的数据
+    saveAdData(state, data) {
+        state.webSiteData.ad.top.name = data.data.name;
+        state.webSiteData.ad.top.introduce = data.data.introduce;
+        state.webSiteData.ad.top.price = data.data.price;
+    },
+    //保存组件设置的数据
+    saveComponentData(state, data) {
+        //传入的板块id
+        console.log("当前编辑板块：" + data.id);
+        //获取当前页面名称
+        const currentPageName = state.pageName[state.pageStatus];
+        if (!currentPageName) {
+            console.error('无效的页面状态:', state.pageStatus);
+            return;
+        }
+        //获取当前页面的数据数组
+        const currentPageData = state.pageData[currentPageName];
+        if (!currentPageData) {
+            console.error('未找到页面数据:', currentPageName);
+            return;
+        }
+        //找到要修改的板块
+        const targetModuleIndex = currentPageData.findIndex(module => module.i === data.id);
+        if (targetModuleIndex === -1) {
+            console.error('未找到要修改的模块:', data.id);
+            return;
+        }
+        console.log("要修改的模块索引：", targetModuleIndex);
+        console.log("组件排序：", data.sort);
+        //组件类型 1=新闻 2=广告
+        //注意：Vue有一个特性，当修改复杂对象内部数组时，可能无法检测到变化
+        //解决办法是通过Vue.set方法将整个对象进行深拷贝，然后修改完再替换回去
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(currentPageData[targetModuleIndex]));
+        if (state.editComponentType === 1) {
+            //1=新闻组件
+            const componentData = module.content.componentList[data.sort].componentData;
+            componentData.category_id = data.data.pid_id; // 设置 category_id
+            componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
+            componentData.name = data.data.name; // 设置导航池名字
+            componentData.textSize = state.editComponentSize; // 设置文字新闻数量
+            componentData.imgSize = state.editComponentSizeImg; // 设置图片新闻数量
+        } else if (state.editComponentType === 2) {
+            //2=广告组件
+            module.content.ad.name = data.data.adName;
+            module.content.ad.introduce = data.data.adName;
+            module.content.ad.price = data.data.price;
+            //设置用于回显的广告名，否则会导致回显的广告名和实际的广告名不一致
+            //因为广告名没有默认值，这会导致watch监听不到，所以这里需要手动设置
+            state.componentViewData.adName = data.data.adName;
+        }
+        // 使用Vue.set来强制视图更新
+        Vue.set(currentPageData, targetModuleIndex, module);
+        console.log(`当前${currentPageName}页面的板块数据为：`);
+        console.log(currentPageData);
+    },
+    //从外部拖拽板块
+    drag(state, data) {
+        //获取当前页面名称
+        const currentPageName = state.pageName[state.pageStatus];
+        if (!currentPageName) {
+            console.error('无效的页面状态:', state.pageStatus);
+            return;
+        }
+        //获取当前页面的数据
+        const currentPageData = state.pageData[currentPageName];
+        if (!currentPageData) {
+            console.error('未找到页面数据:', currentPageName);
+            return;
+        }
+        //获取画布尺寸并判断鼠标是否在画布内
+        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 && (currentPageData.findIndex(item => item.i === 'drop')) === -1) {
+            currentPageData.push({
+                x: (currentPageData.length * 2) % (this.colNum || 12),
+                y: currentPageData.length + (this.colNum || 12),
+                w: 12,
+                h: 2,
+                i: 'drop',
+            });
+        }
+        //如果已经存在占位符
+        let index = currentPageData.findIndex(item => item.i === 'drop');
+        if (index !== -1) {
+            try {
+                console.log(`当前 ${currentPageName} 页面数据长度:`, currentPageData.length);
+                console.log('当前 gridlayoutObj.$children.length:', state.gridlayoutObj.$children.length);
+                //计算目标索引
+                const targetIndex = currentPageData.length;
+                console.log('尝试隐藏的索引:', targetIndex);
+                //安全访问并隐藏占位符
+                if (state.gridlayoutObj.$children && 
+                    targetIndex >= 0 && 
+                    targetIndex < state.gridlayoutObj.$children.length &&
+                    state.gridlayoutObj.$children[targetIndex] &&
+                    state.gridlayoutObj.$children[targetIndex].$refs &&
+                    state.gridlayoutObj.$children[targetIndex].$refs.item) {
+                    //调试信息：确认要隐藏的是drop元素
+                    const targetChild = state.gridlayoutObj.$children[targetIndex];
+                    console.log('要隐藏的元素ID:', targetChild.i || (targetChild.$props && targetChild.$props.i));
+                    state.gridlayoutObj.$children[targetIndex].$refs.item.style.display = "none";
+                    console.log('成功隐藏占位符，索引:', targetIndex);
+                } else {
+                    console.log('无法安全访问占位符，索引:', targetIndex);
+                }
+            } catch (error) {
+                console.log('处理占位符时出错:', error);
+            }
+            //拖拽逻辑处理
+            if (state.gridlayoutObj.$children[index]) {
+                let el = state.gridlayoutObj.$children[index];
+                el.dragging = { 
+                    "top": state.mouseXY.y - parentRect.top, 
+                    "left": state.mouseXY.x - parentRect.left 
+                };
+                let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
+                if (mouseInGrid === true) {
+                    state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
+                    state.DragPos.i = String(index);
+                    state.DragPos.x = currentPageData[index].x;
+                    state.DragPos.y = currentPageData[index].y;
+                }
+                if (mouseInGrid === false) {
+                    state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
+                    // 使用 Vue.set 确保响应式更新
+                    Vue.set(state.pageData, currentPageName, currentPageData.filter(obj => obj.i !== 'drop'));
+                }
+            } else {
+                console.log('无法找到拖拽元素，索引:', index);
+            }
+        }
+    },
+    //拖拽结束 定位落点
+    dragend(state, data) {
+        //获取当前页面名称
+        const currentPageName = state.pageName[state.pageStatus];
+        if (!currentPageName) {
+            console.error('无效的页面状态:', state.pageStatus);
+            return;
+        }
+        //获取画布尺寸
+        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);
+            //动态过滤当前页面的 drop 元素
+            state.pageData[currentPageName] = state.pageData[currentPageName].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,
+            }
+            //调用 addModule 来添加模块
+            this.commit('template/addModule', sendData);
+        }
+    },
+    //格式化模板信息
+    formatTemplateInfo(state, data) {
+        //1.处理广告位
+        //先把广告位的数据清空，再重新获取
+        //this.commit('template/clearAd');
+        // 深拷贝数据，避免直接修改原数据
+        let clonedData = JSON.parse(JSON.stringify(data));
+        // 按照 clonedData.data.y 的大小排序
+        clonedData.data.sort((a, b) => a.y - b.y);
+        //获取当前页面名称
+        let getPageName = () =>{
+            if(state.pageStatus==1){return "index";}
+            if(state.pageStatus==2){return "category";}
+            if(state.pageStatus==3){return "list";}
+            if(state.pageStatus==4){return "detail";}
+            if(state.pageStatus==5){return "search";}
+            if(state.pageStatus==6){return "page";}
+            if(state.pageStatus==7){return "page";}
+        }
+        // 取出每个通栏中的广告，并保存到state.webSiteData.ad中
+        for (let index in clonedData.data) {
+            if(clonedData.data[index].content.ad){
+                let ad_index = Number(index)+1;
+                let ad_tag = `${state.adKey}_${data.type}_${ad_index}`;
+                clonedData.data[index].content.ad.website_id = state.editWebsiteId;
+                clonedData.data[index].content.ad.ad_tag = ad_tag;
+                state.webSiteData.ad[data.type].push(clonedData.data[index].content.ad);
+            }
+        }
+        //设置全局的广告位名称
+        state.webSiteData.ad.top.website_id = state.editWebsiteId;
+        state.webSiteData.ad.top.ad_tag = `${state.adKey}_top`
+
+        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);
+            websiteData.push(clonedData.data[index].content);
+        }
+        // 保存到对应的页面 json 中
+        if (data.type == "index") {state.webSiteData.template.index = websiteData;}
+        if (data.type == "class") {state.webSiteData.template.class = websiteData;}
+        if (data.type == "list") {state.webSiteData.template.list = websiteData;}
+        if (data.type == "article") {state.webSiteData.template.article = websiteData;}
+        if (data.type == "search") {state.webSiteData.template.search = websiteData;}
+        if (data.type == "aloneList") {state.webSiteData.template.aloneList = websiteData;}
+        if (data.type == "aloneArticle") {state.webSiteData.template.aloneArticle = websiteData;}
+    },
+    //保存模板
+    saveTemplate(state) {
+        //1.保存网站id和模板风格id
+        state.webSiteData.base.websiteId = state.editWebsiteId;
+        state.webSiteData.style.styleId = state.editWebsiteClass;
+        //2.格式化数据
+        //2.1 清理广告位数据
+        this.commit('template/clearAd');
+        //2.2 格式化index页面数据
+        this.commit('template/formatTemplateInfo', { data: state.pageData.index, type: "index" });
+        //2.2 格式化class页面数据
+        this.commit('template/formatTemplateInfo', { data: state.pageData.class, type: "class" });
+        //2.3 格式化list的信息
+        this.commit('template/formatTemplateInfo', { data: state.pageData.list, type: "list" });
+        //2.4 格式化article的信息
+        this.commit('template/formatTemplateInfo', { data: state.pageData.article, type: "article" });
+        //2.5 格式化search的信息
+        this.commit('template/formatTemplateInfo', { data: state.pageData.search, type: "search" });
+        //2.6 格式化aloneList的信息
+        this.commit('template/formatTemplateInfo', { data: state.pageData.aloneList, type: "aloneList" });
+        //2.7 格式化aloneArticle的信息
+        this.commit('template/formatTemplateInfo', { data: state.pageData.aloneArticle, type: "aloneArticle" });
+        //3.展示构造json 后期移除
+        state.editWebsiteTemplateJsonWindow = true;
+        //4.检测模板数据完整度，如果不完整阻止用户保存
+        this.commit('template/pageCheck', {data: state.pageData});
+    },
+    //检测模板完整度
+    pageCheck(state, data) {
+        // 遍历所有页面进行检测
+        Object.values(state.pageName).forEach(pageName => {
+            // 获得当前页面板块数量
+            state.pageDataStatus[pageName].sector = data.data[pageName].length;
+            
+            // 获得当前页面没有设置导航池的板块数量 - 只检查首页
+            let noCid = 0;
+            if (pageName === 'index') {
+                for(let index in data.data[pageName]){
+                    for(let i in data.data[pageName][index].content.componentList){
+                        if(data.data[pageName][index].content.componentList[i].componentData.category_id != undefined){
+                            if(data.data[pageName][index].content.componentList[i].componentData.category_id == ""){
+                                noCid++;
+                            }
+                        }
+                    }
+                }
+            }
+            state.pageDataStatus[pageName].cid = noCid;
+            
+            // 获得当前页面没有设置广告名称的组件数量
+            let noAd = 0;
+            for(let index in data.data[pageName]){
+                if(data.data[pageName][index].content.ad != undefined){
+                    if(data.data[pageName][index].content.ad.name == ""){
+                        noAd++;
+                    }
+                }
+            }
+            state.pageDataStatus[pageName].ad = noAd;
+
+            // 获得当前页面没有设置广告价格的组件数量
+            let noAdPrice = 0;
+            for(let index in data.data[pageName]){
+                if(data.data[pageName][index].content.ad != undefined){
+                    if(data.data[pageName][index].content.ad.price == 0){
+                        noAdPrice++;
+                    }
+                }
+            }
+            state.pageDataStatus[pageName].adPrice = noAdPrice;
+        });
+        
+        // 全局广告特殊处理（只处理一次） 全局广告是算到首页里面的
+        if(state.webSiteData.ad.top.name == ""){
+            state.pageDataStatus.index.ad++;
+        }
+        if(state.webSiteData.ad.top.price == 0){
+            state.pageDataStatus.index.adPrice++;
+        }
+    },
+    //清理画布内容
+    clearWebsiteTemplate(state,data){
+        //每次进入的时候先清理再回显
+        //清理state.webSiteData
+        Vue.set(state.webSiteData, 'template', {
+            index: [],
+            class: [],
+            list: [],
+            article: [],
+            search: [],
+            aloneList: [],
+            aloneArticle: []
+        });
+        Vue.set(state, 'pageData', {
+            index: [],
+            class: [],
+            list: [],
+            article: [],
+            search: [],
+            aloneList: [],
+            aloneArticle: []
+        });
+        Vue.set(state.webSiteData.ad, 'top', {
+            "width": 830,//宽度
+            "height": 110,//高度
+            "name": "",//广告名称
+            "price": 0,//价格
+            "introduce":"",//介绍
+            "website_id": "",//网站id
+            "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+            "typeid": 2,//广告类型 - 2 图片
+            "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+        });
+        Vue.set(state, 'pageStatus', 1);
+    },
+    //回显模板内容
+    setWebsiteTemplate(state, data) {
+        if(data==null){
+            this.commit('template/clearWebsiteTemplate');
+            console.log("第一次添加模板，无需回显！")
+        }else{
+            this.commit('template/clearWebsiteTemplate');
+            console.log("编辑模板，开始回显模板内容！")
+            console.log(data)
+            state.webSiteData.ad.top = data.topAd;
+            state.pageData = data.template;
+        }
+    },
+    //随机生成模板
+    randomTemplate(state) {
+        state.loading = true;
+        const randomIndex = Math.floor(Math.random() * 2); 
+        console.log(`随机生成的数字是: ${randomIndex}`);
+        // 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) { }
+        // pageStatus == 4 详情页
+        if (state.pageStatus == 4) { }
+        // pageStatus == 5 搜索页
+        if (state.pageStatus == 5) { }
+        // pageStatus == 6 自定义列表页
+        if (state.pageStatus == 6) { }
+        // pageStatus == 7 自定义详情页
+        if (state.pageStatus == 7) { }
+    },
+    //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 < 23) {
+                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------------------------------------------------------------>
+
+    //3.提示信息 start------------------------------------------------------------>
+    alertMessage(state, data) {
+        Message({
+            message: "配置阶段仅展示，无法真实调用该功能！",
+            type: 'warning',
+            duration: 1000,
+            showClose: true
+        });
+    }
+    //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 获得页面类型
+    getWebPageType({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getWebPageType(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //1.5 选择页面类型 - 是否添加搜索页
+    addWebPageType({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addWebPageType(data).then(response => {
+                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，则验证是否已经关联导航池
+    checkWebsiteBuild({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            checkWebsiteBuild(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);
+                commit('setAdKey', response.data.ad_key);
+                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 保存用户选择的风格
+    chooseWebsiteTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            chooseWebsiteTemplate(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 保存模板
+    saveWebsiteTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            saveWebsiteTemplate(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.13 批量创建广告位
+    addTwinAdPlace({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addTwinAdPlace(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.14 验证该网站是否有未结束的订单
+    checkWebsiteEdit({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            checkWebsiteEdit(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.15 回显模板
+    getWebsiteTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getWebsiteTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.16 应用模板
+    applyTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            applyTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    }
+    //2.构建网站json end------------------------------------------------------------>
+}
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/styles/theme/body/index/banner/list/style1.less

@@ -0,0 +1,108 @@
+.bannerItemBox {
+    position: relative;
+    .roll_num_box {
+        position: absolute;
+        z-index: 2;
+        left: 60px;
+        bottom: 16px;
+        height: 30px;
+        line-height: 30px;
+        color: #fff;
+        font-size: 16px;
+        .roll_num_box_new {
+            font-size: 20px;
+        }
+    }
+    .dot1 {
+        display: block;
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .swiper_dot1 {
+        display: block;
+        width: 100%;
+        line-height: 60px;
+        height: 60px;
+        color: #fff;
+        font-size: 18px;
+        text-indent: 20px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 100;
+        box-sizing: border-box;
+        padding: 0 144px;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+    }
+    .el-carousel {
+        /deep/.el-carousel__arrow i {
+            font-size: 33px !important;
+        }
+        .roll_1_box {
+            position: relative;
+        }
+        /deep/.el-carousel__arrow--left {
+            position: absolute;
+            width: 35px;
+            height: 57px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0);
+            left: 9px;
+            border: none;
+            border-radius: 0;
+            top: 100%;
+            margin-top: -32px;
+        }
+        /deep/.el-carousel__arrow--right {
+            width: 35px;
+            height: 57px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0);
+            position: absolute;
+            right: 9;
+            border: none;
+            border-radius: 0;
+            top: 100%;
+            margin-top: -32px;
+        }
+        /deep/ .el-carousel__indicators {
+            // 指示器
+            left: unset;
+            transform: unset;
+            right: 10px;
+            bottom: 11px;
+        }
+        /deep/ .el-carousel__button {
+            // 指示器按钮
+            width: 10px;
+            height: 10px;
+            border: none;
+            border-radius: 5px;
+            background: #fff;
+            opacity: 1;
+        }
+        /deep/ .is-active .el-carousel__button {
+            // 指示器激活按钮
+            background: #255590;
+            width: 25px;
+            opacity: 1;
+
+        }
+        /deep/ .el-carousel__container {
+            height: 100%;
+        }
+    }
+    .custom-indicator button {
+        background-color: #fff;
+        opacity: 1;
+        width: 8px;
+        height: 8px;
+    }
+    .custom-indicator button.is-active {
+        background-color: #DD7D18;
+        width: 58px;
+        opacity: 1;
+    }
+}

src/styles/theme/body/index/headLine/style1.less

@@ -0,0 +1,114 @@
+.headLineStyle1 {
+    width: 1200px;
+    height: 140px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 30px 100px 30px 100px;
+    .headLineTitle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 30px;
+        font-weight: bold;
+        color: #004564;
+        margin-bottom: 10px;
+        img {
+            margin-right: 20px;
+        }
+    }
+    .headLineContent{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color:#333333;
+        div {
+            margin-right: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+
+.headLineStyle1_skin2 {
+    border:1px solid #E4E4E4;
+    width: 1200px;
+    height: 140px;
+    box-sizing: border-box;
+    padding:32px 15px 32px 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    .headLineContentBox {
+        width: 1000px;
+        height: 70px;
+        overflow: hidden;
+        position: relative;
+        
+        .headLineSlider {
+            display: flex;
+            flex-direction: column; // 改为垂直方向
+            width: 100%;
+            height: 210px; // 3个titleBox，每个70px高
+        }
+    }
+    
+    .headLineTitleBox {
+        text-align: center;
+        height: 70px; // 明确设置高度
+        width: 100%;
+        margin-bottom: 30px;
+        flex-shrink: 0; // 防止收缩
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .headLineTop {
+            font-size: 30px;
+            color:#A91B33;
+            margin-bottom: 15px;
+            font-weight: bold;
+        }
+        .headLineBottom {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            div {
+                width: 32%;
+                margin-right: 30px;
+                font-size: 18px;
+                color:#333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+    .headLineIcon {
+        div {
+            width: 10px;
+            height: 10px;
+            background: #EDEDED;
+            margin-bottom: 10px;
+            cursor: pointer;
+            transition: background 0.3s ease;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            &.active {
+                background: #A91B33;
+            }
+            &:hover {
+                background: #A91B33;
+            }
+        }
+    }
+}

src/styles/theme/body/index/headLine/style2.less

@@ -0,0 +1,82 @@
+.headLineStyle2 {
+    width: 1200px;
+    height: 140px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 30px 100px 30px 100px;
+    .headLineTitle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 30px;
+        font-weight: bold;
+        color: #004564;
+        margin-bottom: 10px;
+        img {
+            margin-right: 20px;
+        }
+    }
+    .headLineContent{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color:#333333;
+        div {
+            margin-right: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+.headLineStyle2_skin2 {
+    border:1px solid #E4E4E4;
+    width: 1200px;
+    height: 140px;
+    box-sizing: border-box;
+    padding:32px 15px 32px 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .headLineTitleBox {
+        text-align: center;
+        .headLineTop {
+            font-size: 30px;
+            color:#A91B33;
+            margin-bottom: 15px;
+            font-weight: bold;
+        }
+        .headLineBottom {
+            display: flex;
+            align-items: center;
+            div {
+                margin-right: 30px;
+                font-size: 18px;
+                color:#333333;
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+    .headLineIcon {
+        div {
+            width: 10px;
+            height: 10px;
+            background: #EDEDED;
+            margin-bottom: 10px;
+            cursor: pointer;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            &.active {
+                background: #A91B33;
+            }
+        }
+    }
+}