From 4857d22cd7da985e0437f604f9c2a954ba11bce3 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq>
Date: Mon, 19 May 2025 18:07:01 +0800
Subject: [PATCH] feat: add activeNavItem prop and enhance page element
 filtering in AutoProbe components

---
 .../autoprobe/AutoProbeResultsContainer.vue   |  2 ++
 .../autoprobe/AutoProbeResultsPreview.vue     | 35 ++++++++++++++++++-
 .../src/interfaces/models/autoprobe.d.ts      |  1 +
 frontend/crawlab-ui/src/utils/autoprobe.ts    |  2 +-
 .../tabs/AutoProbeDetailTabPatterns.vue       |  1 +
 5 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue b/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue
index 0525c614..1ddf7912 100644
--- a/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue
+++ b/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue
@@ -12,6 +12,7 @@ const props = defineProps<{
   data?: PageData | PageData[];
   fields?: AutoProbeNavItem[];
   activeFieldName?: string;
+  activeNavItem?: AutoProbeNavItem;
   url?: string;
   viewport?: PageViewPort;
   activeId?: string;
@@ -162,6 +163,7 @@ defineOptions({ name: 'ClAutoProbeResultsContainer' });
         v-if="activeId"
         ref="previewRef"
         :active-id="activeId"
+        :active-nav-item="activeNavItem"
         :viewport="viewport"
       />
     </template>
diff --git a/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsPreview.vue b/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsPreview.vue
index 740f0e7f..846313dd 100644
--- a/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsPreview.vue
+++ b/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsPreview.vue
@@ -3,6 +3,7 @@ import {
   type CSSProperties,
   onMounted,
   ref,
+  computed,
   watch,
   onBeforeUnmount,
 } from 'vue';
@@ -12,6 +13,7 @@ import { debounce } from 'lodash';
 
 const props = defineProps<{
   activeId: string;
+  activeNavItem?: AutoProbeNavItem;
   viewport?: PageViewPort;
 }>();
 
@@ -108,6 +110,37 @@ const getElementMaskStyle = (el: PageElement): CSSProperties => {
   };
 };
 
+const pageElements = computed<PageElement[]>(() => {
+  const { activeNavItem } = props;
+  if (!activeNavItem) {
+    return previewResult.value?.page_elements ?? [];
+  }
+  if (!previewResult.value?.page_elements) {
+    return [];
+  }
+  if (activeNavItem.type === 'page_pattern') {
+    return previewResult.value.page_elements;
+  } else if (activeNavItem.type === 'list') {
+    const listElement = previewResult.value.page_elements.find(
+      el => el.name === activeNavItem.name
+    );
+    if (!listElement) {
+      return [];
+    }
+    const itemElements = listElement.children ?? [];
+    const fieldElements = itemElements.flatMap(el => el.children ?? []);
+    return [...itemElements, ...fieldElements];
+  } else if (activeNavItem.type === 'field') {
+    return (
+      previewResult.value.page_elements.filter(
+        el => el.name === activeNavItem.name
+      ) ?? []
+    );
+  } else {
+    return [];
+  }
+});
+
 defineExpose({
   updateOverlayScale,
 });
@@ -121,7 +154,7 @@ defineOptions({ name: 'ClAutoProbeResultsPreview' });
       <div v-if="previewResult" ref="overlayRef" class="preview-overlay">
         <img class="screenshot" :src="previewResult.screenshot_base64" />
         <div
-          v-for="(el, index) in previewResult.page_elements"
+          v-for="(el, index) in pageElements"
           :key="index"
           class="element-mask"
           :style="getElementMaskStyle(el)"
diff --git a/frontend/crawlab-ui/src/interfaces/models/autoprobe.d.ts b/frontend/crawlab-ui/src/interfaces/models/autoprobe.d.ts
index b1508538..d913e957 100644
--- a/frontend/crawlab-ui/src/interfaces/models/autoprobe.d.ts
+++ b/frontend/crawlab-ui/src/interfaces/models/autoprobe.d.ts
@@ -117,6 +117,7 @@ export declare global {
     name: string;
     type: PageElementType;
     coordinates: ElementCoordinates;
+    children?: PageElement[];
   }
 
   interface PagePreviewResult {
diff --git a/frontend/crawlab-ui/src/utils/autoprobe.ts b/frontend/crawlab-ui/src/utils/autoprobe.ts
index 52ad9fd3..17179afe 100644
--- a/frontend/crawlab-ui/src/utils/autoprobe.ts
+++ b/frontend/crawlab-ui/src/utils/autoprobe.ts
@@ -48,7 +48,7 @@ export const getIconByPageElementType = (itemType?: PageElementType): Icon => {
     case 'list':
       return ['fa', 'list'];
     case 'list-item':
-      return ['fa', 'list-alt'];
+      return ['fa', 'bars'];
     case 'pagination':
       return ['fa', 'ellipsis-h'];
     default:
diff --git a/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue b/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
index 3c48193d..88bff7e9 100644
--- a/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
+++ b/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
@@ -263,6 +263,7 @@ defineOptions({ name: 'ClAutoProbeDetailTabPatterns' });
         :data="resultsData"
         :fields="resultsFields"
         :active-field-name="resultsActiveField?.name"
+        :active-nav-item="activeNavItem"
         :url="form.url"
         :viewport="form.viewport"
         :active-id="activeId"