feat: add spider template selection and internationalization support

- Introduced a new computed property for spider template options in SpiderForm.vue, allowing users to select from predefined spider templates.
- Implemented a template change handler to update form fields based on the selected template.
- Enhanced internationalization files to include new labels for the template feature in both English and Chinese.
- Updated type definitions to support the new template and template parameters in the spider model.

These changes improve the user experience by providing a more flexible and user-friendly interface for managing spider configurations.

src/components/core/spider/SpiderForm.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useSpider, useProject, useNode } from '@/components';
 import { TASK_MODE_SELECTED_NODES } from '@/constants/task';
 import pinyin, { STYLE_NORMAL } from 'pinyin';
 import { isZeroObjectId } from '@/utils/mongo';
 import { useSpiderDetail } from '@/views';
 import { priorityOptions, translate } from '@/utils';
+import { getSpiderTemplates } from '@/utils/spider';
 
 // i18n
 const t = translate;
@@ -65,6 +66,21 @@ const validate = async () => {
   await formRef.value?.validate();
 };
 
+const spiderTemplateOptions = computed<SelectOption[]>(() => {
+  return getSpiderTemplates().map(({ name, label }) => ({
+    label,
+    value: name,
+  }));
+});
+const onTemplateChange = (value: string) => {
+  const template = getSpiderTemplates().find(d => d.name === value);
+  if (!template) return;
+  if (!form.value.name) {
+    form.value.name = `${template.name}_spider`;
+  }
+  form.value.cmd = template.cmd;
+};
+
 defineExpose({
   validate,
 });
@@ -75,6 +91,22 @@ defineOptions({ name: 'ClSpiderForm' });
   <cl-form v-if="form" ref="formRef" :model="form">
     <slot name="header" />
 
+    <cl-form-item
+      :span="2"
+      :offset="2"
+      :label="t('components.spider.form.template')"
+      prop="template"
+    >
+      <el-select v-model="form.template" @change="onTemplateChange">
+        <el-option
+          v-for="op in spiderTemplateOptions"
+          :key="op.name"
+          :label="op.label"
+          :value="op.value"
+        />
+      </el-select>
+    </cl-form-item>
+
     <!-- Row -->
     <cl-form-item
       :span="2"

src/i18n/lang/en/components/spider.ts

@@ -15,6 +15,12 @@ const spider: LComponentsSpider = {
     autoInstallDisabled: 'Auto Install (available in Crawlab Pro)',
     git: 'Git Repo',
     gitRootPath: 'Git Path',
+    template: 'Template',
+    templateParams: {
+      spiderName: 'Spider Name',
+      startUrls: 'Start URLs',
+      domains: 'Domains',
+    },
   },
   actions: {
     files: {

src/i18n/lang/zh/components/spider.ts

@@ -15,6 +15,12 @@ const spider: LComponentsSpider = {
     autoInstallDisabled: '自动安装依赖 (仅限 Crawlab Pro)',
     git: 'Git 仓库',
     gitRootPath: 'Git 仓库路径',
+    template: '模板',
+    templateParams: {
+      spiderName: '爬虫名称',
+      startUrls: '起始 URL',
+      domains: '域名',
+    },
   },
   actions: {
     files: {

src/interfaces/i18n/components/spider.d.ts

@@ -15,6 +15,12 @@ interface LComponentsSpider {
     autoInstallDisabled: string;
     git: string;
     gitRootPath: string;
+    template: string;
+    templateParams: {
+      spiderName: string;
+      startUrls: string;
+      domains: string;
+    };
   };
   actions: {
     files: {

src/interfaces/models/spider.d.ts

@@ -25,6 +25,8 @@ export declare global {
     git_id?: string;
     git_root_path?: string;
     git?: Git;
+    template?: SpiderTemplateName;
+    template_params?: SpiderTemplateParams;
   }
 
   interface SpiderStat {
@@ -49,4 +51,29 @@ export declare global {
     schedule_id?: string;
     priority?: number;
   }
+
+  type SpiderTemplateName =
+    | 'scrapy'
+    | 'bs4'
+    | 'selenium'
+    | 'puppeteer'
+    | 'playwright'
+    | 'colly'
+    | 'python'
+    | 'node'
+    | 'go'
+    | 'java';
+
+  interface SpiderTemplateParams {
+    spider_name?: string;
+    start_urls?: string;
+    domains?: string;
+  }
+
+  interface SpiderTemplate {
+    name: SpiderTemplateName;
+    label: string;
+    cmd: string;
+    params?: SpiderTemplateParams;
+  }
 }

src/utils/spider.ts

@@ -0,0 +1,59 @@
+export const getSpiderTemplates = (): SpiderTemplate[] => {
+  return [
+    {
+      name: 'scrapy',
+      label: 'Scrapy',
+      cmd: 'scrapy crawl scrapy_spider',
+      params: {
+        spider_name: 'scrapy_spider',
+        start_urls: 'http://example.com',
+        domains: 'example.com',
+      },
+    },
+    {
+      name: 'bs4',
+      label: 'BeautifulSoup',
+      cmd: 'python main.py',
+    },
+    {
+      name: 'selenium',
+      label: 'Selenium',
+      cmd: 'python main.py',
+    },
+    {
+      name: 'puppeteer',
+      label: 'Puppeteer',
+      cmd: 'node main.js',
+    },
+    {
+      name: 'playwright',
+      label: 'Playwright',
+      cmd: 'node main.js',
+    },
+    {
+      name: 'colly',
+      label: 'Colly',
+      cmd: 'go run main.go',
+    },
+    {
+      name: 'python',
+      label: 'Basic Python',
+      cmd: 'python main.py',
+    },
+    {
+      name: 'node',
+      label: 'Basic Node.js',
+      cmd: 'node main.js',
+    },
+    {
+      name: 'go',
+      label: 'Basic Go',
+      cmd: 'go run main.go',
+    },
+    {
+      name: 'java',
+      label: 'Basic Java',
+      cmd: 'mvn clean compile exec:java',
+    },
+  ];
+};