feat: 编辑组件完善

frontend/src/components/EditSpider.vue

@@ -2,12 +2,12 @@
 <template>
     <el-dialog title="仅编辑 CSS选择器部分" v-model="dialogVisible" :close-on-click-modal="false" width="80%">
         <div class="flex gap-2">
-            <el-space>
-                <el-tag type="primary">{{ formData.site }} </el-tag>
-                <el-tag type="success">{{ formData.channel }} </el-tag>
-                <el-tag type="info">{{ formData.code }} </el-tag>
-                <el-tag type="warning">{{ formData.href }} </el-tag>
-                <el-tag type="danger">{{ formData.modifyuser }} </el-tag>
+            <el-space class="edit-tag-list">
+                <el-tag class="edit-tag" type="primary">{{ formData.site }} </el-tag>
+                <el-tag class="edit-tag" type="success">{{ formData.channel }} </el-tag>
+                <el-tag class="edit-tag" type="info">{{ formData.code }} </el-tag>
+                <el-tag class="edit-tag" type="warning">{{ formData.href }} </el-tag>
+                <el-tag class="edit-tag" type="danger">{{ formData.modifyuser }} </el-tag>
             </el-space>
         </div>
         <div class="space" />
@@ -16,35 +16,48 @@
                 <el-form ref="form1" :model="formData" label-width="160px">
                     <el-row>
                         <el-col :span="12">
-                            <el-form-item label="列表条目">
-                                <el-input v-model="formData.listItemCss" placeholder="ul.list li"></el-input>
+                            <el-form-item label="条目区域块">
+                                <el-input v-model="formData.listBodyCss" placeholder="div"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="12">
-                            <el-form-item label="列表条目链接">
-                                <el-input v-model="formData.listLinkCss" placeholder="a"></el-input>
+                            <el-form-item label="条目">
+                                <el-input v-model="formData.listItemCss" placeholder="ul.list li"></el-input>
                             </el-form-item>
                         </el-col>
                     </el-row>
                     <el-row>
                         <el-col :span="12">
-                            <el-form-item label="列表条目发布时间">
+                            <el-form-item label="条目链接">
+                                <el-input v-model="formData.listLinkCss" placeholder="a"></el-input>
+                            </el-form-item>
+                        </el-col>
+
+                        <el-col :span="12">
+                            <el-form-item label="条目发布时间">
                                 <el-input v-model="formData.listPublishTimeCss" placeholder="span"></el-input>
                             </el-form-item>
                         </el-col>
+                    </el-row>
+                    <el-row>
                         <el-col :span="12">
-                            <el-form-item label="列表翻页下一页">
+                            <el-form-item label="翻页下一页">
                                 <el-input v-model="formData.listNextPageCss" placeholder="li.nextpage a"></el-input>
                             </el-form-item>
                         </el-col>
                     </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="延迟时间">
+                                <el-input v-model="formData.listDelayTime" placeholder="500"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
                 </el-form>
-                <el-divider>手写列表页筛选JS代码<el-button type="primary"  @click='editorHandle.ImportListCode'>导入样例</el-button></el-divider>
-                <el-input v-model="formData.listJs" style="width: 100%" :rows="6" type="textarea"
-                    placeholder="Please input" />
-                    <div class="space"/>
+                <div class="space" />
             </el-tab-pane>
-            <el-tab-pane label="详情页CSS选择器" name="second">
+
+            <el-tab-pane label="详情页CSS选择器" name="content">
                 <el-form ref="form2" :model="formData" label-width="160px">
                     <el-row>
                         <el-col :span="12">
@@ -78,30 +91,75 @@
                         </el-col>
 
                     </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="延迟时间">
+                                <el-input v-model="formData.detailDelayTime" placeholder="500"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
                 </el-form>
-                <el-divider>手写详情页筛选JS代码<el-button type="primary"  @click='editorHandle.ImportContentCode'>导入样例</el-button></el-divider>
-                <el-input v-model="formData.contentJs" style="width: 100%" :rows="6" type="textarea"
-                    placeholder="Please input" />
-                    <div class="space"/>
+
+                <div class="space" />
             </el-tab-pane>
-            <el-tab-pane label="详情页附件下载" name="third">
-                <el-divider>手写附件下载/上传JS代码 <el-button type="primary" @click='editorHandle.ImportAttachCode'>导入样例</el-button></el-divider>
-                <el-input v-model="formData.attachJs" class="codeEditor"   :rows="6" type="textarea"
-                    placeholder="Please input" />
+            <el-tab-pane label="列表页JS代码" name="list_item_js">
+                <template #label><span class="custom-tabs-label">
+                        <el-icon>
+                            <ElementPlus />
+                        </el-icon>
+                        <span>列表页JS代码</span>
+                    </span>
+                </template>
+                <el-divider>手写列表页提取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" />
+                </el-row>
             </el-tab-pane>
-            <div class="space"/>
-        </el-tabs>
+            <el-tab-pane label="列表页翻页JS代码" name="list_trunpage_js">
 
+                <template #label><span class="custom-tabs-label">
+                        <el-icon>
+                            <ElementPlus />
+                        </el-icon>
+                        <span>列表页翻页JS代码</span>
+                    </span>
+                </template>
+                <el-divider>手写列表页翻页JS代码 <el-button type="primary"
+                        @click='editorHandle.ImportListTrunPageCode'>导入样例</el-button></el-divider>
+                <el-row>
+                    <el-input v-model="formData.listTrunPageJs" class="codeEditor" :rows="6" type="textarea"
+                        placeholder="Please input" />
+                </el-row>
+            </el-tab-pane>
+
+            <el-tab-pane label="详情页JS代码" name="content_js">
 
-        <span slot="footer" class="dialog-footer">
+                <template #label><span class="custom-tabs-label">
+                        <el-icon>
+                            <ElementPlus />
+                        </el-icon>
+                        <span>详情页JS代码</span>
+                    </span>
+                </template>
+                <el-divider>手写附件下载/上传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>
+            </el-tab-pane>
+            <div class="space" />
+        </el-tabs>
+        <div slot="footer" class="dialog-footer" style="text-align:right">
             <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="handleSave">保 存</el-button>
-        </span>
+        </div>
     </el-dialog>
 </template>
 <script setup>
 import { ref, defineEmits } from 'vue';
-import {TemplateJsCode} from './jscodetpl.js'
+import { TemplateJsCode } from './jscodetpl.js'
 const emit = defineEmits(['custom-event']);
 //表单数据
 const formData = ref({
@@ -116,16 +174,19 @@ const activeName = ref("first")
 const dialogVisible = ref(false)
 
 //编辑器事件管理
-const editorHandle={
-    ImportListCode:()=>{
-        formData.value.listJs=TemplateJsCode.ListJsCode
+const editorHandle = {
+    ImportListCode: () => {
+        formData.value.listJs = TemplateJsCode.ListJsCode
     },
-    ImportContentCode:()=>{
-        formData.value.contentJs=TemplateJsCode.ContentJsCode
+    ImportContentCode: () => {
+        formData.value.contentJs = TemplateJsCode.ContentJsCode
     },
-    ImportAttachCode:()=>{
-        formData.value.attachJs=TemplateJsCode.AttachJsCode
+    ImportAttachCode: () => {
+        formData.value.attachJs = TemplateJsCode.AttachJsCode
     },
+    ImportListTrunPageCode:()=>{
+        formData.value.listTrunPageJs=TemplateJsCode.ListTurnPageJsCode
+    }
 }
 
 const handleSave = () => {
@@ -135,19 +196,25 @@ const handleSave = () => {
 }
 
 
-//这里是重点
+//这里是重点: 向外部组建暴露可供调用的方法
 defineExpose({
     dialogVisible,
     formData,
     emit
 })
 </script>
-<style>
-.codeEditor{
-    width:100%;
-    font-size:12pt;
+<style scoped>
+.codeEditor {
+    width: 100%;
+    font-size: 12pt;
     font-weight: bold;
     line-height: 1.5em;
     padding: 10px;
 }
+.edit-tag-list {
+    flex-wrap: wrap;
+}
+.edit-tag {
+    margin-bottom: 4px;
+}
 </style>