feat: 爬虫插件回调数据过滤

frontend/src/components/spider/EditSpider.vue

@@ -61,13 +61,13 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="条目区域块">
-                                <el-input v-model="formData.listBodyCss" @input="onCssFormChange" placeholder="div"></el-input>
+                                <el-input v-model="formData.listBodyCss" placeholder="div"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.listBodyCss }}</div>
                             </el-form-item>
                         </el-col>
                         <el-col :span="12">
                             <el-form-item label="条目">
-                                <el-input v-model="formData.listItemCss" @input="onCssFormChange" placeholder="ul.list li" :style="{ background: cssInputBg.listItemCss.color }"></el-input>
+                                <el-input v-model="formData.listItemCss" placeholder="ul.list li" :style="{ background: cssInputBg.listItemCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.listItemCss }}</div>
                             </el-form-item>
                         </el-col>
@@ -75,14 +75,14 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="条目链接">
-                                <el-input v-model="formData.listLinkCss" @input="onCssFormChange" placeholder="a" :style="{ background: cssInputBg.listLinkCss.color }"></el-input>
+                                <el-input v-model="formData.listLinkCss" placeholder="a" :style="{ background: cssInputBg.listLinkCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.listLinkCss }}</div>
                             </el-form-item>
                         </el-col>
 
                         <el-col :span="12">
                             <el-form-item label="条目发布时间">
-                                <el-input v-model="formData.listPublishTimeCss" @input="onCssFormChange" placeholder="span" :style="{ background: cssInputBg.listPublishTimeCss.color }"></el-input>
+                                <el-input v-model="formData.listPublishTimeCss" placeholder="span" :style="{ background: cssInputBg.listPublishTimeCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.listPublishTimeCss }}</div>
                             </el-form-item>
                         </el-col>
@@ -90,7 +90,7 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="翻页下一页">
-                                <el-input v-model="formData.listNextPageCss" @input="onCssFormChange" placeholder="li.nextpage a" :style="{ background: cssInputBg.listNextPageCss.color }"></el-input>
+                                <el-input v-model="formData.listNextPageCss" placeholder="li.nextpage a" :style="{ background: cssInputBg.listNextPageCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.listNextPageCss }}</div>
                             </el-form-item>
                         </el-col>
@@ -103,13 +103,13 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="详情页标题">
-                                <el-input v-model="formData.titleCss" @input="onCssFormChange" placeholder="ul.list li" :style="{ background: cssInputBg.titleCss.color }"></el-input>
+                                <el-input v-model="formData.titleCss" placeholder="ul.list li" :style="{ background: cssInputBg.titleCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.titleCss }}</div>
                             </el-form-item>
                         </el-col>
                         <el-col :span="12">
                             <el-form-item label="详情页发布时间">
-                                <el-input v-model="formData.publishTimeCss" @input="onCssFormChange" placeholder="a" :style="{ background: cssInputBg.publishTimeCss.color }"></el-input>
+                                <el-input v-model="formData.publishTimeCss" placeholder="a" :style="{ background: cssInputBg.publishTimeCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.publishTimeCss }}</div>
                             </el-form-item>
                         </el-col>
@@ -117,13 +117,13 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="详情页发布单位">
-                                <el-input v-model="formData.publishUnitCss" @input="onCssFormChange" placeholder="span" :style="{ background: cssInputBg.publishUnitCss.color }"></el-input>
+                                <el-input v-model="formData.publishUnitCss" placeholder="span" :style="{ background: cssInputBg.publishUnitCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.publishUnitCss }}</div>
                             </el-form-item>
                         </el-col>
                         <el-col :span="12">
                             <el-form-item label="详情页正文">
-                                <el-input v-model="formData.contentCss" @input="onCssFormChange" placeholder="li.nextpage a" :style="{ background: cssInputBg.contentCss.color }"></el-input>
+                                <el-input v-model="formData.contentCss" placeholder="li.nextpage a" :style="{ background: cssInputBg.contentCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.contentCss }}</div>
                             </el-form-item>
                         </el-col>
@@ -131,7 +131,7 @@
                     <el-row>
                         <el-col :span="24">
                             <el-form-item label="详情页附件">
-                                <el-input v-model="formData.attachCss" @input="onCssFormChange" placeholder="span" :style="{ background: cssInputBg.attachCss.color }"></el-input>
+                                <el-input v-model="formData.attachCss" placeholder="span" :style="{ background: cssInputBg.attachCss.color }"></el-input>
                                 <div class="form-item-sub-line">{{ fastKeyDownMap.attachCss }}</div>
                             </el-form-item>
                         </el-col>
@@ -203,7 +203,7 @@
     </el-dialog>
 </template>
 <script setup>
-import { ref, defineEmits, computed } from 'vue';
+import { ref, defineEmits, computed, watchEffect } from 'vue';
 import { TemplateJsCode } from './jscodetpl.js'
 import { Link } from '@element-plus/icons-vue'
 import { useStore } from 'vuex'
@@ -387,9 +387,34 @@ const setPageData = (row) => {
     // 保存一份原始数据
     originData = JSON.parse(JSON.stringify(row))
 }
+
+const refreshPageDataFn = (key, value) => formData.value[key] = value
 const refreshPageData = (key, value) => {
     if (!key) return
-    formData.value[key] = value
+    // 判断key是否为[listItemCss,listLinkCss,listLinkCss]
+    const listItemCss = formData.value.listItemCss
+    if (listItemCss) {
+        // 判断[listLinkCss,listLinkCss]头部是否包含listItemCss
+        const targetKeyList = ['listLinkCss', 'listLinkCss']
+        if (targetKeyList.includes(key) && value) {
+            if (listItemCss.startsWith(value)) {
+                // 替换并去空
+                let newValue = value.replace(listItemCss, '')
+                newValue = newValue.trim()
+                if (newValue && value !== newValue) {
+                    refreshPageDataFn(key, newValue)
+                } else {
+                    refreshPageDataFn(key, value)
+                }
+            } else {
+                refreshPageDataFn(key, value)
+            }
+        } else {
+            refreshPageDataFn(key, value)
+        }
+    } else {
+        refreshPageDataFn(key, value)
+    }
 }
 
 const getPageData = () => {
@@ -463,6 +488,23 @@ const onCssFormChange = () => {
     onEditFormChange(payload)
 }
 
+watchEffect(() => {
+    // 监控以下变量变化，执行onCssFormChange回调
+    formData.value.listBodyCss;
+    formData.value.listItemCss;
+    formData.value.listLinkCss;
+    formData.value.listPublishTimeCss;
+    formData.value.listNextPageCss;
+    formData.value.titleCss;
+    formData.value.publishTimeCss;
+    formData.value.publishUnitCss;
+    formData.value.contentCss;
+    formData.value.attachCss;
+    if (dialogVisible.value) {
+        onCssFormChange()
+    }
+})
+
 //这里是重点: 向外部组建暴露可供调用的方法
 defineExpose({
     dialogVisible,

frontend/src/views/CodeList.vue

@@ -755,11 +755,11 @@ EventsOn("spiderConfigChange", data => {
     console.log(data)
     const { key, css, url } = data
     refreshAndAsyncEditDialog(key, css)
-    // 当触发修改时候，同步给客户端一份
-    if (currentEditRow.value && Object.keys(currentEditRow.value).length <= 0) {
-        const mark = getMarkWithRow(currentEditRow.value)
-        ServerActionCurrentOpenTab(mark)
-    }
+    // 当触发修改时候，同步给客户端一份(此处不需要同步，因为在编辑弹窗中，检查到数据发生变化会自动同步)
+    // if (currentEditRow.value && Object.keys(currentEditRow.value).length <= 0) {
+    //     const mark = getMarkWithRow(currentEditRow.value)
+    //     ServerActionCurrentOpenTab(mark)
+    // }
     // 判断标注url和编辑url是否相同
     // const editUrl = currentEditRow.href
     // if (url === editUrl) {