feat: add activeNavItem prop and enhance page element filtering in AutoProbe components

Author: Marvin Zhang

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>

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)"

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 {

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:

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"