feat: 编辑弹窗生成样例逻辑添加

frontend/src/components/spider/EditSpider.vue

@@ -147,8 +147,11 @@
                         <span>列表页JS代码</span>
                     </span>
                 </template>
-                <el-divider>手写列表页提取JS代码 <el-button type="primary"
-                        @click='editorHandle.ImportListCode'>导入模板</el-button></el-divider>
+                <el-divider>
+                    <el-button type="primary" style="margin-right: 12px;" @click='editorHandle.createImportListCode'>生成样例</el-button>
+                    手写列表页提取JS代码
+                    <el-button type="primary" @click='editorHandle.ImportListCode'>导入模板</el-button>
+                </el-divider>
                 <el-row>
                     <el-input v-model="formData.listJs" class="codeEditor" :rows="6" type="textarea"
                         placeholder="Please input" />
@@ -163,8 +166,10 @@
                         <span>列表页翻页JS代码</span>
                     </span>
                 </template>
-                <el-divider>手写列表页翻页JS代码 <el-button type="primary"
-                        @click='editorHandle.ImportListTrunPageCode'>导入模板</el-button></el-divider>
+                <el-divider>
+                    <el-button type="primary" style="margin-right: 12px;" @click='editorHandle.createImportListTrunPageCode'>生成样例</el-button>
+                    手写列表页翻页JS代码
+                    <el-button type="primary" @click='editorHandle.ImportListTrunPageCode'>导入模板</el-button></el-divider>
                 <el-row>
                     <el-input v-model="formData.listTurnPageJs" class="codeEditor" :rows="6" type="textarea"
                         placeholder="Please input" />
@@ -180,8 +185,10 @@
                         <span>详情页JS代码</span>
                     </span>
                 </template>
-                <el-divider>手写附件下载/上传JS代码 <el-button type="primary"
-                        @click='editorHandle.ImportContentCode'>导入模板</el-button></el-divider>
+                <el-divider>
+                    <el-button type="primary" style="margin-right: 12px;" @click='editorHandle.createImportContentCode'>生成样例</el-button>
+                    手写附件下载/上传JS代码
+                    <el-button type="primary" @click='editorHandle.ImportContentCode'>导入模板</el-button></el-divider>
                 <el-row><el-input v-model="formData.contentJs" class="codeEditor" :rows="6" type="textarea"
                         placeholder="Please input" />
                 </el-row>
@@ -264,15 +271,15 @@ const fastKeyDownMap = {
 }
 // 背景色map
 const cssInputBg = {
-    listItemCss: { color: "#fff9c4", label: "列表条目" },
-    listLinkCss: { color: "#bbdefb", label: "列表标题" },
-    listPublishTimeCss: { color: "#c8e6c9", label: "列表发布时间" },
-    listNextPageCss: { color: "#dcedc8", label: "列表下一页" },
-    titleCss: { color: "#e7f3fe", label: "文章标题" },
-    publishTimeCss: { color: "#ffe0b2", label: "文章发布时间" },
-    publishUnitCss: { color: "#ffe1e1", label: "文章发布单位" },
-    contentCss: { color: "#e0f7fa", label: "文章正文" },
-    attachCss: { color: "#fff1e5", label: "文章附件" },
+    listItemCss: { color: "#fff9c4", label: "列表条目", formLabel: '条目区域块' },
+    listLinkCss: { color: "#bbdefb", label: "列表标题", formLabel: '条目链接' },
+    listPublishTimeCss: { color: "#c8e6c9", label: "列表发布时间", formLabel: '条目发布时间' },
+    listNextPageCss: { color: "#dcedc8", label: "列表下一页", formLabel: '翻页下一页' },
+    titleCss: { color: "#e7f3fe", label: "文章标题", formLabel: '详情页标题' },
+    publishTimeCss: { color: "#ffe0b2", label: "文章发布时间", formLabel: '详情页发布时间' },
+    publishUnitCss: { color: "#ffe1e1", label: "文章发布单位", formLabel: '详情页发布单位' },
+    contentCss: { color: "#e0f7fa", label: "文章正文", formLabel: '详情页正文' },
+    attachCss: { color: "#fff1e5", label: "文章附件", formLabel: '详情页附件' },
 }
 
 const activeName = ref("first")
@@ -291,6 +298,69 @@ const editorHandle = {
     },
     ImportListTrunPageCode:()=>{
         formData.value.listTurnPageJs=TemplateJsCode.ListTurnPageJsCode
+    },
+    createImportListCode() {
+        // 数据替换
+        const originString = TemplateJsCode.ListJsCode
+        let replaceString = originString
+        if (formData.value.listItemCss) {
+            replaceString = replaceString.replaceAll('{{.ListItemCss}}', formData.value.listItemCss)
+        } else {
+            replaceString = replaceString.replaceAll('{{.ListItemCss}}', cssInputBg.listItemCss.formLabel)
+        }
+        if (formData.value.listLinkCss) {
+            replaceString = replaceString.replaceAll('{{.ListLinkCss}}', formData.value.listLinkCss)
+        } else {
+            replaceString = replaceString.replaceAll('{{.ListLinkCss}}', cssInputBg.listLinkCss.formLabel)
+        }
+        if (formData.value.listPublishTimeCss) {
+            replaceString = replaceString.replaceAll('{{.ListPubtimeCss}}', formData.value.listPublishTimeCss)
+        } else {
+            replaceString = replaceString.replaceAll('{{.ListPubtimeCss}}', cssInputBg.listPublishTimeCss.formLabel)
+        }
+        formData.value.listJs = replaceString
+        return replaceString
+    },
+    createImportContentCode() {
+        const originString = TemplateJsCode.ContentJsCode
+        let replaceString = originString
+        if (formData.value.titleCss) {
+            replaceString = replaceString.replaceAll('{{.TitleCss}}', formData.value.titleCss)
+        } else {
+            replaceString = replaceString.replaceAll('{{.TitleCss}}', cssInputBg.titleCss.formLabel)
+        }
+        if (formData.value.publishUnitCss) {
+            replaceString = replaceString.replaceAll('{{.PublishUnitCss}}', formData.value.publishUnitCss)
+        } else {
+            replaceString = replaceString.replaceAll('{{.PublishUnitCss}}', cssInputBg.publishUnitCss.formLabel)
+        }
+        if (formData.value.publishTimeCss) {
+            replaceString = replaceString.replaceAll('{{.PublishTimeCss}}', formData.value.publishTimeCss)
+        } else {
+            replaceString = replaceString.replaceAll('{{.PublishTimeCss}}', cssInputBg.publishTimeCss.formLabel)
+        }
+        if (formData.value.contentCss) {
+            replaceString = replaceString.replaceAll('{{.ContentCss}}', formData.value.contentCss)
+        } else {
+            replaceString = replaceString.replaceAll('{{.ContentCss}}', cssInputBg.contentCss.formLabel)
+        }
+        if (formData.value.attachCss) {
+            replaceString = replaceString.replaceAll('{{.AttachCss}}', formData.value.attachCss)
+        } else {
+            replaceString = replaceString.replaceAll('{{.AttachCss}}', cssInputBg.attachCss.formLabel)
+        }
+        formData.value.contentJs = replaceString
+    },
+    createImportListTrunPageCode() {
+        const originString = TemplateJsCode.ListTurnPageJsCode
+        let replaceString = originString
+        if (formData.value.listNextPageCss) {
+            replaceString = replaceString.replaceAll('{{.ListNextPageCss}}', formData.value.listNextPageCss)
+        } else {
+            replaceString = replaceString.replaceAll('{{.ListNextPageCss}}', cssInputBg.listNextPageCss.formLabel)
+        }
+        formData.value.listTurnPageJs = replaceString
+        return replaceString
     }
 }
 

frontend/src/components/spider/jscodetpl.js

@@ -25,8 +25,8 @@ document.querySelectorAll("{{.ListItemCss}}").forEach((v, i) => {
 })
 ret
     `,
+    //执行JS代码
     ContentJsCode:`
-//执行JS代码
 var ret = {}
 var tmp = null
 
@@ -65,8 +65,9 @@ ret
 //附件下载以及提交
     
 `,
+    //列表页翻页代码
     ListTurnPageJsCode: `
-//列表页翻页代码
+var link=document.querySelector("{{.ListNextPageCss}}");if(link)link.click();
 `
 
 }