feat: 编辑弹窗新增标注按钮

frontend/src/components/spider/EditSpider.vue

@@ -1,6 +1,18 @@
 <!-- 新增爬虫 -->
 <template>
-    <el-dialog title="仅编辑 CSS选择器部分" v-model="dialogVisible" :close-on-click-modal="false" width="80%">
+    <el-dialog :title="dialogTitle" v-model="dialogVisible" :close-on-click-modal="false" width="80%">
+        <template #header="{ titleId, titleClass }">
+            <div class="edit-css-header">
+                <div class="header-left">
+                    <span :id="titleId" :class="titleClass">{{ dialogTitle }}</span>
+                </div>
+                <div class="mark-container">
+                    <el-button-group class="ml-4">
+                        <el-button type="primary" :icon="Link" @click="handleDataTag">标注</el-button>
+                    </el-button-group>
+                </div>
+            </div>
+        </template>
         <div class="flex gap-2">
             <el-space class="edit-tag-list">
                 <el-tag class="edit-tag" type="primary">{{ formData.site }} </el-tag>
@@ -173,9 +185,12 @@
 <script setup>
 import { ref, defineEmits } from 'vue';
 import { TemplateJsCode } from './jscodetpl.js'
-const emit = defineEmits(['custom-event']);
+import { Link } from '@element-plus/icons-vue'
+const emit = defineEmits(['custom-event', 'data-tag']);
 let originData = {}
 
+const dialogTitle = ref('仅编辑 CSS选择器部分')
+
 const defaultFormValue = {
     delayTime: 500,
     maxPages: 1,
@@ -288,6 +303,10 @@ const handleSave = () => {
     // formData.value = {}
 }
 
+const handleDataTag = () => {
+    emit('data-tag', originData)
+}
+
 //这里是重点: 向外部组建暴露可供调用的方法
 defineExpose({
     dialogVisible,
@@ -312,4 +331,10 @@ defineExpose({
 .edit-tag {
     margin-bottom: 4px;
 }
+.edit-css-header {
+    display: flex;
+}
+.mark-container {
+    margin-left: 20px;
+}
 </style>

frontend/src/views/CodeList.vue

@@ -66,7 +66,7 @@
                 <el-table-column label="操作" width="160">
                     <template #default="scope">
                         <el-tooltip content="标注" placement="top">
-                            <el-button size="small" :class="{ active: scope.row._action_clicked_mark }" @click="tableEvents.handleDataTag(scope.$index, scope.row)">
+                            <el-button size="small" :class="{ active: scope.row._action_clicked_mark }" @click="tableEvents.handleDataTag(scope.row)">
                                 <el-icon><Link /></el-icon>
                             </el-button>
                         </el-tooltip>
@@ -113,7 +113,7 @@
             </div>
         </el-main>
     </el-card>
-    <EditSpider ref="editSpiderDialog" @custom-event="dialogEvents.editSpiderConfigSaveEvent" />
+    <EditSpider ref="editSpiderDialog" @custom-event="dialogEvents.editSpiderConfigSaveEvent" @data-tag="editDialogMarkClick($event)" />
     <RunSpiderDialog ref="runSpiderDialog" />
     <VerifySpider ref="verifySpiderDialog" />
 </template>
@@ -508,17 +508,22 @@ const getMarkWithRow = row => {
     }
 }
 
+const editDialogMarkClick = (row) => {
+    // 自定义关闭时间
+    ElMessage({
+        message: `${row.site} ${row.channel} ${row.href}`,
+        showClose: true,
+        duration: 3000,
+    });
+    BrowserOpenURL(row.href)
+}
+
 // table的按钮事件集合
 const tableEvents = {
-    handleDataTag(index, row) {
+    handleDataTag(row) {
         onlyClickHighlight(row, '_action_clicked_mark')
         // 自定义关闭时间
-        ElMessage({
-            message: `${row.site} ${row.channel} ${row.href}`,
-            showClose: true,
-            duration: 3000,
-        });
-        BrowserOpenURL(row.href)
+        editDialogMarkClick(row)
     },
     handleEdit: (index, row) => {
         currentEditRow.value = row