From 57348da3f2418bd1bbb9b1637e0476f5afef0408 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq>
Date: Wed, 28 May 2025 18:05:23 +0800
Subject: [PATCH] feat: implement auto naming for URL input and enhance data
 fetching with debounce in AutoProbe components

---
 .../core/autoprobe/AutoProbeForm.vue          | 22 +++++++++++++++++++
 .../tabs/AutoProbeDetailTabPatterns.vue       | 14 ++++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeForm.vue b/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeForm.vue
index f50bd21a..aab6e96b 100644
--- a/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeForm.vue
+++ b/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeForm.vue
@@ -12,6 +12,9 @@ const store = useStore();
 const { form, formRef, formRules, isSelectiveForm, isFormItemDisabled } =
   useAutoProbe(store);
 
+const isCreate = computed(() => !!form.value?._id);
+const isNameModified = ref(false);
+
 const viewportOptions = computed<ViewPortSelectOption[]>(() => {
   return getViewPortOptions();
 });
@@ -38,6 +41,24 @@ const updateViewPortValue = () => {
 watch(() => JSON.stringify(form.value?.viewport), updateViewPortValue);
 onBeforeMount(updateViewPortValue);
 
+// Auto naming handling
+const onNameChange = (_: string) => {
+  isNameModified.value = true;
+};
+const getNameByURL = (url: string) => {
+  if (!url) return '';
+  const urlObj = new URL(url);
+  const pathname = urlObj.pathname.replace(/\/$/, '');
+  const segments = pathname.split('/');
+  return segments[segments.length - 1] || 'New AutoProbe';
+};
+const onURLChange = (url: string) => {
+  if (!form.value) return;
+  if (!isNameModified.value) {
+    form.value.name = getNameByURL(url);
+  }
+};
+
 defineOptions({ name: 'ClAutoProbeForm' });
 </script>
 
@@ -73,6 +94,7 @@ defineOptions({ name: 'ClAutoProbeForm' });
         v-model="form.url"
         :disabled="isFormItemDisabled('url')"
         :placeholder="t('components.autoprobe.form.url')"
+        @input="onURLChange"
       >
         <template #prefix>
           <cl-icon :icon="['fa', 'at']" />
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 88bff7e9..75feda7e 100644
--- a/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
+++ b/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, debounce } from 'lodash';
 import { getIconByExtractType, getIconByItemType, translate } from '@/utils';
 import { useAutoProbeDetail } from '@/views';
 
@@ -9,6 +9,7 @@ import { useAutoProbeDetail } from '@/views';
 const t = translate;
 
 // store
+const ns: ListStoreNamespace = 'autoprobe';
 const store = useStore();
 const { autoprobe: state } = store.state as RootStoreState;
 
@@ -232,6 +233,15 @@ const onSizeChange = (size: number) => {
   detailContainerRef.value.style.height = `calc(100% - ${size}px)`;
 };
 
+const getData = debounce(async () => {
+  await Promise.all([
+    store.dispatch(`${ns}/getPagePattern`),
+    store.dispatch(`${ns}/getPagePatternData`),
+  ]);
+});
+watch(activeId, getData);
+onBeforeMount(getData);
+
 defineOptions({ name: 'ClAutoProbeDetailTabPatterns' });
 </script>