feat: 表单修改实时更新缓存数据

frontend/src/components/spider/EditSpider.vue

@@ -44,7 +44,7 @@
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="采集最大页数">
-                        <el-input v-model="formData.maxPages" :placeholder="defaultFormValue.maxPages"></el-input>
+                        <el-input v-model="formData.maxPages" :placeholder="defaultFormValue.maxPages + ''"></el-input>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -56,42 +56,41 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="条目区域块">
-                                <el-input v-model="formData.listBodyCss" placeholder="div"></el-input>
-                                <div class="form-item-sub-line">ctrl+2</div>
+                                <el-input v-model="formData.listBodyCss" @input="onCssFormChange" 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" placeholder="ul.list li"></el-input>
-                                <div class="form-item-sub-line">ctrl+3</div>
+                                <el-input v-model="formData.listItemCss" @input="onCssFormChange" placeholder="ul.list li"></el-input>
+                                <div class="form-item-sub-line">{{ fastKeyDownMap.listItemCss }}</div>
                             </el-form-item>
                         </el-col>
                     </el-row>
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="条目链接">
-                                <el-input v-model="formData.listLinkCss" placeholder="a"></el-input>
-                                <div class="form-item-sub-line">ctrl+4</div>
+                                <el-input v-model="formData.listLinkCss" @input="onCssFormChange" placeholder="a"></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" placeholder="span"></el-input>
-                                <div class="form-item-sub-line">ctrl+5</div>
+                                <el-input v-model="formData.listPublishTimeCss" @input="onCssFormChange" placeholder="span"></el-input>
+                                <div class="form-item-sub-line">{{ fastKeyDownMap.listPublishTimeCss }}</div>
                             </el-form-item>
                         </el-col>
                     </el-row>
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="翻页下一页">
-                                <el-input v-model="formData.listNextPageCss" placeholder="li.nextpage a"></el-input>
-                                <div class="form-item-sub-line">ctrl+6</div>
+                                <el-input v-model="formData.listNextPageCss" @input="onCssFormChange" placeholder="li.nextpage a"></el-input>
+                                <div class="form-item-sub-line">{{ fastKeyDownMap.listNextPageCss }}</div>
                             </el-form-item>
                         </el-col>
                     </el-row>
                 </el-form>
-                <div class="space" />
             </el-tab-pane>
 
             <el-tab-pane label="详情页CSS选择器" name="content">
@@ -99,43 +98,41 @@
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="详情页标题">
-                                <el-input v-model="formData.titleCss" placeholder="ul.list li"></el-input>
-                                <div class="form-item-sub-line">ctrl+alt+3</div>
+                                <el-input v-model="formData.titleCss" @input="onCssFormChange" placeholder="ul.list li"></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" placeholder="a"></el-input>
-                                <div class="form-item-sub-line">ctrl+alt+4</div>
+                                <el-input v-model="formData.publishTimeCss" @input="onCssFormChange" placeholder="a"></el-input>
+                                <div class="form-item-sub-line">{{ fastKeyDownMap.publishTimeCss }}</div>
                             </el-form-item>
                         </el-col>
                     </el-row>
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="详情页发布单位">
-                                <el-input v-model="formData.publishUnitCss" placeholder="span"></el-input>
-                                <div class="form-item-sub-line">ctrl+alt+5</div>
+                                <el-input v-model="formData.publishUnitCss" @input="onCssFormChange" placeholder="span"></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" placeholder="li.nextpage a"></el-input>
-                                <div class="form-item-sub-line">ctrl+alt+6</div>
+                                <el-input v-model="formData.contentCss" @input="onCssFormChange" placeholder="li.nextpage a"></el-input>
+                                <div class="form-item-sub-line">{{ fastKeyDownMap.contentCss }}</div>
                             </el-form-item>
                         </el-col>
                     </el-row>
                     <el-row>
                         <el-col :span="24">
                             <el-form-item label="详情页附件">
-                                <el-input v-model="formData.attachCss" placeholder="span"></el-input>
-                                <div class="form-item-sub-line">ctrl+alt+7</div>
+                                <el-input v-model="formData.attachCss" @input="onCssFormChange" placeholder="span"></el-input>
+                                <div class="form-item-sub-line">{{ fastKeyDownMap.attachCss }}</div>
                             </el-form-item>
                         </el-col>
 
                     </el-row>
                 </el-form>
-
-                <div class="space" />
             </el-tab-pane>
             <el-tab-pane label="列表页JS代码" name="list_item_js">
                 <template #label><span class="custom-tabs-label">
@@ -195,7 +192,7 @@
 import { ref, defineEmits } from 'vue';
 import { TemplateJsCode } from './jscodetpl.js'
 import { Link } from '@element-plus/icons-vue'
-const emit = defineEmits(['custom-event', 'data-tag']);
+const emit = defineEmits(['custom-event', 'data-tag', 'form-change']);
 let originData = {}
 
 const dialogTitle = ref('仅编辑 CSS选择器部分')
@@ -241,6 +238,21 @@ const formData = ref({
     maxPages: '',
 });
 
+const fastKeyDownMap = {
+    // list
+    listBodyCss: 'ctrl+2',
+    listItemCss: 'ctrl+3',
+    listLinkCss: 'ctrl+4',
+    listPublishTimeCss: 'ctrl+5',
+    listNextPageCss: 'ctrl+6',
+    // content
+    titleCss: 'ctrl+alt+3',
+    publishTimeCss: 'ctrl+alt+4',
+    publishUnitCss: 'ctrl+alt+5',
+    contentCss: 'ctrl+alt+6',
+    attachCss: 'ctrl+alt+7',
+}
+
 const activeName = ref("first")
 const dialogVisible = ref(false)
 
@@ -316,6 +328,11 @@ const handleDataTag = () => {
     emit('data-tag', originData)
 }
 
+const onCssFormChange = () => {
+    const payload = getPageData()
+    emit('form-change', payload)
+}
+
 //这里是重点: 向外部组建暴露可供调用的方法
 defineExpose({
     dialogVisible,

frontend/src/views/CodeList.vue

@@ -113,7 +113,11 @@
             </div>
         </el-main>
     </el-card>
-    <EditSpider ref="editSpiderDialog" @custom-event="dialogEvents.editSpiderConfigSaveEvent" @data-tag="editDialogMarkClick($event)" />
+    <EditSpider ref="editSpiderDialog"
+        @custom-event="dialogEvents.editSpiderConfigSaveEvent"
+        @data-tag="editDialogMarkClick($event)"
+        @form-change="onEditFormChange"
+    />
     <RunSpiderDialog ref="runSpiderDialog" />
     <VerifySpider ref="verifySpiderDialog" />
 </template>
@@ -529,6 +533,22 @@ const getMarkWithRow = row => {
     }
 }
 
+// 根据编辑弹窗的内容，获取cssMark
+const getMarkWithEditDialogInfo = info => {
+    const { value, _originData } = info
+    const baseInfo = {
+        code: _originData.code,
+        site: _originData.site,
+        channel: _originData.channel,
+        href: _originData.href,
+        modifyuser: _originData.modifyuser,
+    }
+    return {
+        ...value,
+        ...baseInfo,
+    }
+}
+
 const getLuaParams = row => {
     const baseInfo = {
         code: row.code,
@@ -686,6 +706,12 @@ const tableActionDisabled = {
     }
 }
 
+
+const onEditFormChange = (info) => {
+    const mark = getMarkWithEditDialogInfo(info)
+    ServerActionCurrentOpenTab(mark)
+}
+
 //Wails事件绑定
 EventsOn("spiderConfigChange", data => {
     console.log(data)