解决编辑器直接粘贴图片转换为base64的bug

解决编辑器直接粘贴图片转换为base64的bug

src/components/edit/myEditor.vue

@@ -1,107 +1,149 @@
 <template>
-  <tiny-editor v-model="content" :init="init" :key="componentKey" id="textarea"></tiny-editor>
-</template>
-
-<script>
-import editor from '@tinymce/tinymce-vue';
-import url from '@/utils/baseUrl';
-
-export default {
-  name: 'myEditor',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      componentKey: 0, // 用于强制重新渲染
-      content: '',
-      init: {
-        selector: '#textarea',
-        height: 550,
-        language_url: 'js/tinymce/langs/zh_CN.js',
-        language: 'zh_CN',
-        plugins: 'image axupimgs code lists advlist table anchor autosave charmap fullscreen hr insertdatetime link preview print searchreplace wordcount indent2em',
-        toolbar: [
-          "undo redo |  styleselect | fontselect | fontsizeselect | bold italic underline strikethrough subscript superscript charmap | indent2em | alignleft aligncenter alignright alignjustify | lineheight | outdent indent",
-          "forecolor backcolor | link | removeformat | image axupimgs | table | searchreplace cut copy paste | hr blockquote anchor | bullist numlist | insertdatetime |  restoredraft | code | fullscreen preview print wordcount"
-        ],
-        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;宋体=simsun,serif',
-        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 42px 48px',
-        branding: false,
-        images_upload_handler: function (blobInfo, success, failure) {
-          var xhr, formData;
-          xhr = new XMLHttpRequest();
-          xhr.withCredentials = false;
-          //创建连接
-          xhr.open('POST', url.baseUrl + '/public/uploadFile');
-          xhr.onload = function () {
-            var json;
-            if (xhr.status < 200 || xhr.status >= 300) {
-              failure('HTTP Error: ' + xhr.status);
-              return;
-            }
-            json = JSON.parse(xhr.responseText);
-            console.log(json)
-            if (json.code != 200) {
-              failure('图片上传失败！ ' + json.message);
-              return;
+    <tiny-editor v-model="content" :init="init" :key="componentKey" id="textarea"></tiny-editor>
+  </template>
+  
+  <script>
+  import editor from '@tinymce/tinymce-vue';
+  import url from '@/utils/baseUrl';
+  
+  export default {
+    name: 'myEditor',
+    props: {
+      value: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        componentKey: 0,
+        content: '',
+        init: {
+          selector: '#textarea',
+          height: 550,
+          language_url: 'js/tinymce/langs/zh_CN.js',
+          language: 'zh_CN',
+          plugins: 'paste image axupimgs code lists advlist table anchor autosave charmap fullscreen hr insertdatetime link preview print searchreplace wordcount indent2em',
+          toolbar: [
+            "undo redo |  styleselect | fontselect | fontsizeselect | bold italic underline strikethrough subscript superscript charmap | indent2em | alignleft aligncenter alignright alignjustify | lineheight | outdent indent",
+            "forecolor backcolor | link | removeformat | image axupimgs | table | searchreplace cut copy paste | hr blockquote anchor | bullist numlist | insertdatetime |  restoredraft | code | fullscreen preview print wordcount"
+          ],
+          font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;宋体=simsun,serif',
+          fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 42px 48px',
+          branding: false,
+          paste_data_images: true,
+          paste_postprocess: (editor, args) => {
+            const images = args.node.querySelectorAll('img[src^="data:image/"]');
+            if (images.length > 0) {
+              Array.from(images).forEach((img) => {
+                const blob = this.dataURLtoBlob(img.src);
+                this.uploadImageFromBlob(blob, 
+                  (imageUrl) => {
+                    editor.dom.setAttrib(img, 'src', imageUrl);
+                    editor.dom.setAttrib(img, 'alt', '粘贴的图片');
+                  },
+                  (error) => {
+                    console.error('图片上传失败:', error);
+                    editor.dom.remove(img);
+                  }
+                );
+              });
             }
-            success(json.data.imgUrl);
-            // Listen for the NodeChange event to set the alt attribute
-            const editor = tinymce.activeEditor;
-            editor.on('NodeChange', function (e) {
-              const imgElm = e.element;
-              if (imgElm.nodeName === 'IMG' && imgElm.src === json.data.imgUrl) {
-                console.log("Setting alt attribute to:", json.data.oldName || '全国政务信息一体化应用平台'); // Debugging: Check the alt value
-                editor.dom.setAttrib(imgElm, 'alt', json.data.oldName || '全国政务信息一体化应用平台'); // Use oldName or a default value
-                editor.off('NodeChange'); // Remove the event listener after setting the alt
+          },
+          images_upload_handler: (blobInfo, success, failure) => {
+            const xhr = new XMLHttpRequest();
+            xhr.withCredentials = false;
+            xhr.open('POST', url.baseUrl + '/public/uploadFile');
+            xhr.onload = () => {
+              if (xhr.status < 200 || xhr.status >= 300) {
+                failure('HTTP Error: ' + xhr.status);
+                return;
+              }
+              const json = JSON.parse(xhr.responseText);
+              if (json.code != 200) {
+                failure('图片上传失败！ ' + json.message);
+                return;
               }
+              success(json.data.imgUrl);
+              
+              const editor = tinymce.activeEditor;
+              const nodeChangeHandler = (e) => {
+                const imgElm = e.element;
+                if (imgElm.nodeName === 'IMG' && imgElm.src === json.data.imgUrl) {
+                  editor.dom.setAttrib(imgElm, 'alt', json.data.oldName || '全国政务信息一体化应用平台');
+                  editor.off('NodeChange', nodeChangeHandler);
+                }
+              };
+              editor.on('NodeChange', nodeChangeHandler);
+            };
+            const formData = new FormData();
+            formData.append('file', blobInfo.blob());
+            xhr.send(formData);
+          },
+          setup: (editor) => {
+            this.editorInstance = editor;
+            editor.setContent(this.value);
+            editor.on('change', () => {
+              this.$emit('input', editor.getContent());
             });
-          };
-
-          formData = new FormData();
-          formData.append('file', blobInfo.blob());
-          xhr.send(formData);
-        },
-        setup: (editor) => {  // 这里改用箭头函数
-          // 存储编辑器引用
-          this.editorInstance = editor;
-          // 初始设置内容
-          editor.setContent(this.value);
-          editor.on('change', () => {
-            this.$emit('input', editor.getContent());  // 发送内容变化事件
-          });
+          }
         }
+      };
+    },
+    methods: {
+      dataURLtoBlob(dataURL) {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while(n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], {type: mime});
+      },
+      
+      uploadImageFromBlob(blob, success, failure) {
+        const xhr = new XMLHttpRequest();
+        xhr.withCredentials = false;
+        xhr.open('POST', url.baseUrl + '/public/uploadFile');
+        
+        xhr.onload = () => {
+          if (xhr.status < 200 || xhr.status >= 300) {
+            failure('HTTP Error: ' + xhr.status);
+            return;
+          }
+          
+          const json = JSON.parse(xhr.responseText);
+          if (json.code != 200) {
+            failure('图片上传失败！ ' + json.message);
+            return;
+          }
+          
+          success(json.data.imgUrl);
+        };
+        
+        const formData = new FormData();
+        formData.append('file', blob);
+        xhr.send(formData);
+      },
+      
+      reinitEditor() {
+        this.componentKey += 1;
       }
-    };
-  },
-  watch: {
-    value(newVal) {
-      // 当父组件传入新内容时更新编辑器
-      if (this.editorInstance && newVal !== this.editorInstance.getContent()) {
-        this.content = newVal;
-        //以防万一可以使用下面这个方法 强制更新视图
-        //this.reinitEditor();
+    },
+    watch: {
+      value(newVal) {
+        if (this.editorInstance && newVal !== this.editorInstance.getContent()) {
+          this.content = newVal;
+        }
       }
-    }
-  },
-  components: {
-    'tiny-editor': editor,
-  },
-  created() {
-
-  },
-  mounted() {
-    this.reinitEditor();
-  },
-  methods: {
-    // 强制重新初始化编辑器（必要时使用）
-    reinitEditor() {
-      this.componentKey += 1;
-    }
-  },
-}
-</script>
+    },
+    components: {
+      'tiny-editor': editor,
+    },
+    mounted() {
+      this.reinitEditor();
+    },
+  }
+  </script>

src/layout/components/template/componentMenu.vue

@@ -1,57 +1,66 @@
 <template>
-  <div class="componentMenuBox" id="componentMenuBox">
-    <div class="componentMenuTitle">
-      <div v-if="this.$store.state.template.pageStatus == 1">首页可选板块：</div>
-      <div v-if="this.$store.state.template.pageStatus == 2">频道页可选板块：</div>
-      <div v-if="this.$store.state.template.pageStatus == 3">列表页可选板块：</div>
-      <div v-if="this.$store.state.template.pageStatus == 4">详情页可选板块：</div>
-      <div v-if="this.$store.state.template.pageStatus == 5">搜索页可选板块：</div>
-      <div v-if="this.$store.state.template.pageStatus == 6">底部列表页可选板块：</div>
-      <div v-if="this.$store.state.template.pageStatus == 7">底部详情页可选板块：</div>
-    </div>
-    <div>
-      <el-scrollbar wrap-class="scrollbar-wrapper">
-        <!--首页板块-->
-        <div v-if="this.$store.state.template.pageStatus == 1">
-          <indexSector/>
-        </div>
-        <!--列表板块-->
-        <div v-if="this.$store.state.template.pageStatus == 3">
-          <listSector/>
+    <div class="componentMenuBox" id="componentMenuBox">
+        <div class="componentMenuTitle">
+            <div v-if="this.$store.state.template.pageStatus == 1">首页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 2">频道页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 3">列表页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 4">详情页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 5">搜索页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 6">底部列表页可选板块：</div>
+            <div v-if="this.$store.state.template.pageStatus == 7">底部详情页可选板块：</div>
         </div>
-        <!--详情板块-->
-        <div v-if="this.$store.state.template.pageStatus == 4">
-          <articleSector/>
+        <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>
+            </el-scrollbar>
         </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';
 
 export default {
-  name: 'componentMenu',
-  components:{
-    indexSector,
-    listSector,
-    articleSector
-  },
-  props: {
-    
-  },
-  data() {
-    return {
-      data: null
+    name: 'componentMenu',
+    components:{
+        indexSector,
+        classSector,
+        listSector,
+        articleSector
+    },
+    props: {
+        
+    },
+    data() {
+        return {
+            data: null
+        }
+    },
+    methods: {
+        
     }
-  },
-  methods: {
-    
-  }
 }
 </script>
 

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

@@ -0,0 +1,588 @@
+<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" />
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('headLineSector', 17, headLineSector)" 
+            @drag="drag('headLineSector', 17, headLineSector)"
+            @dragend="dragend('headLineSector', 17, headLineSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png" />
+            </div>
+            <div class="sectorItemTitle">网站头条</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('bannerSector', 44, bannerSector)"
+            @drag="drag('bannerSector', 44, bannerSector)" 
+            @dragend="dragend('bannerSector', 44, bannerSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/174899892158949.png" />
+            </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" />
+            </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" />
+            </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" />
+            </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" />
+            </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---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

src/store/modules/template.js

@@ -29,6 +29,12 @@ const state = {
             cid:0,//缺少的导航池id 为0表示没有缺少
             ad:0,//缺少的广告名称，为0表示没有缺少
             adPrice:0//缺少的广告价格，为0表示没有缺少
+        },
+        class:{
+            sector:0,
+            cid:0,
+            ad:0,
+            adPrice:0
         }
     },
     //0.全局配置 end------------------------------------------------------------>
@@ -342,7 +348,15 @@ const mutations = {
             }
         }
         //pageStatus==2 分类页 class
-        if (state.pageStatus == 2) { }
+        if (state.pageStatus == 2) { 
+            if (state.pageData.class.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                console.log(data.jsonData)
+                this.commit('template/pushModule', data);
+            }
+        }
         //pageStatus==3 列表页 list
         if (state.pageStatus == 3) { }
         //pageStatus==4 详情页 article
@@ -427,7 +441,52 @@ const mutations = {
             }
         }
         //pageStatus==2 分类页 class
-        if (state.pageStatus == 2) { }
+        if (state.pageStatus == 2) { 
+
+            if (data.source == "click") {
+                const currentTimestamp = Date.now();
+                let id = currentTimestamp;
+                const maxY = Math.max(...state.pageData.class.map(item => item.y), 0);
+                console.log(data);
+                let dataSort = state.pageData.class.length;
+                state.pageData.class.push({
+                    i: id,
+                    x: 0,
+                    y: maxY + 1,
+                    w: 12,
+                    h: data.h,
+                    type: data.type,
+                    content: data.jsonData,
+                    dataSort: dataSort,
+                });
+            }
+
+            if (data.source == "drag") {
+                console.log("通过拖拽添加一个板块");
+                const currentTimestamp = Date.now();
+                let id = currentTimestamp;
+                const maxY = Math.max(...state.pageData.class.map(item => item.y), 0);
+                console.log(data);
+                let dataSort = state.pageData.class.length;
+                state.pageData.class.push({
+                    i: id,
+                    x: 0,
+                    y: data.y,
+                    w: 12,
+                    h: data.h,
+                    type: data.type,
+                    content: data.jsonData,
+                    dataSort: dataSort,
+                });
+                state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
+                try {
+                    state.gridlayoutObj.$children[state.pageData.class.length].$refs.item.style.display = "block";
+                }catch{ 
+
+                }
+            }
+
+        }
         //pageStatus==3 列表页 list
         if (state.pageStatus == 3) {
             //判断是拖拽的还是点击添加进来的 click=点击
@@ -1331,6 +1390,9 @@ const mutations = {
         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;
         }
@@ -1350,6 +1412,8 @@ const mutations = {
         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" });
         //3.4 格式化article的信息

src/views/template/page/pageClass.vue

@@ -8,20 +8,13 @@
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
             <menuSector />
         </div>
-        <!-- 无内容占位符 -->
-        <!-- <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus == false }]"
-            v-if="this.$store.state.template.pageData.index.length == 0">
-            <img src="@/assets/template/creat.png">
-            <div>请点击一个左侧板块，开始您的网站创建</div>
-        </div> -->
-        <!--使用gridKey来强制更新视图-->
         <div 
             id="content" 
             class="canvasBox"
         >
             <grid-layout 
                 :auto-size="true"
-                :class="this.$store.state.template.pageData.index.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
+                :class="this.$store.state.template.pageData.class.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
                 ref="gridlayout" 
                 :layout="this.$store.state.template.pageData.index"
                 :layout.sync="this.$store.state.template.pageData.index" 
@@ -33,7 +26,7 @@
                 :key="this.$store.state.template.gridKey"
             >
                 <grid-item 
-                    v-for="(item, index) in this.$store.state.template.pageData.index" 
+                    v-for="(item, index) in this.$store.state.template.pageData.class" 
                     :key="item.i" 
                     :i="item.i"
                     :x="item.x" 
@@ -302,25 +295,6 @@ export default {
             border: 2px dashed #999;
             border-radius: 8px;
             background-color: #fff1cc;
-            // display: flex;
-            // align-items: center;
-            // justify-content: center;
-            // cursor: pointer;
-            // margin: 5px;
-            // color: #000;
-            // background: #fff;
-            // border: 1px solid #000;
-            // border-radius: 5px;
-            // width: 24px;
-            // height: 24px;
-            // line-height: 24px;
-            // text-align: center;
-            // font-size: 14px;
-            // transition: all 0.3s;
-            // &:hover {
-            //   color: #fff;
-            //   background: #000;
-            // }
             transition: all 0.3s;
 
             &:hover {

src/views/template/templateList.vue

@@ -22,7 +22,7 @@
           </el-col>
           <el-col :span="8">
             <div class="searchBtnBox">
-              <el-button>重置</el-button>
+              <el-button @click="resetList">重置</el-button>
               <el-button type="primary" @click="getData('search')">搜索</el-button>
             </div>
           </el-col>
@@ -191,10 +191,17 @@ export default {
       this.getApiData.page = val;
       this.getData();
     },
+    //1.4 重置列表
+    resetList(){
+        this.getApiData.website_name = "";
+        this.getApiData.status = "";
+        this.getApiData.page = 1;
+        this.getData();
+    },
     //列表和分页相关 end ------------------------------------------------------------>
 
     //2.跳转操作 start ------------------------------------------------------------>
-    //构建网站
+    //验证构建
     creatWebsite(website_id){
       this.$store.dispatch('template/checkWebsiteBuild',{website_id:website_id}).then(res=> {
         if(res.code!=200){
@@ -213,42 +220,42 @@ export default {
     //编辑网站
     getDataMain(website_id,step){
       //根据步骤跳转到相应的页面
-      if(step==1){
-        this.$router.push({
-          path: '/templateBase',
-          query: {
-            website_id: website_id,
-            step:step
-          }
-        });
-      }
-      if(step==1){
-        this.$router.push({
-          path: '/templateBase',
-          query: {
-            website_id: website_id,
-            step:step
-          }
-        });
-      }
-      if(step==2){
-        this.$router.push({
-          path: '/templateStyle',
-          query: {
-            website_id: website_id,
-            step:step
-          }
-        });
-      }
-      if(step>2){
-        this.$router.push({
-          path: '/templateCreat',
-          query: {
-            website_id: website_id,
-            step:step
-          }
-        });
-      }
+    //   if(step==1){
+    //     this.$router.push({
+    //       path: '/templateBase',
+    //       query: {
+    //         website_id: website_id,
+    //         step:step
+    //       }
+    //     });
+    //   }
+    //   if(step==1){
+    //     this.$router.push({
+    //       path: '/templateBase',
+    //       query: {
+    //         website_id: website_id,
+    //         step:step
+    //       }
+    //     });
+    //   }
+    //   if(step==2){
+    //     this.$router.push({
+    //       path: '/templateStyle',
+    //       query: {
+    //         website_id: website_id,
+    //         step:step
+    //       }
+    //     });
+    //   }
+    //   if(step>2){
+    //     this.$router.push({
+    //       path: '/templateCreat',
+    //       query: {
+    //         website_id: website_id,
+    //         step:step
+    //       }
+    //     });
+    //   }
     }
     //2.跳转操作 end ------------------------------------------------------------>
   },