feat: implement auto naming for URL input and enhance data fetching with debounce in AutoProbe components

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']" />

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>