From 06a066436e36e0af3e8c9022f1ef251d8838f425 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@163.com>
Date: Thu, 20 Jun 2024 18:27:35 +0800
Subject: [PATCH] refactor: added component names

---
 scripts/gen-index.js                          |   4 +-
 src/components/button/Button.vue              |   1 -
 src/components/button/FaIconButton.vue        |   1 -
 src/components/button/IconButton.vue          |   1 -
 src/components/button/LabelButton.vue         |   1 -
 src/components/dialog/CreateEditDialog.vue    |   1 -
 src/components/dialog/Dialog.vue              | 104 +++----
 src/components/file/FileActions.vue           |   1 -
 src/components/file/FileEditor.vue            |   1 -
 src/components/file/FileEditorNavMenu.vue     |   1 -
 src/components/file/FileTab.vue               |   1 -
 src/components/file/FileUpload.vue            |   1 -
 src/components/file/UploadFilesDialog.vue     |   1 -
 src/components/form/Form.vue                  | 125 ++++----
 src/components/form/FormItem.vue              | 288 ++++++++----------
 src/components/git/CreateGitBranchDialog.vue  |  57 +++-
 src/components/git/GitStatus.vue              |   1 -
 src/components/git/UploadGitFilesDialog.vue   |   1 -
 src/components/icon/Icon.vue                  |   1 -
 src/components/nav/NavActionBack.vue          |   1 -
 src/components/nav/NavActionButton.vue        |   1 -
 src/components/nav/NavActionFaIcon.vue        |   1 -
 .../nav/NavActionGroupDetailCommon.vue        |   1 -
 src/components/nav/NavActionItem.vue          |  28 +-
 src/components/nav/NavActions.vue             |   1 -
 src/components/nav/NavSidebar.vue             |   1 -
 src/components/nav/NavSidebarList.vue         |   1 -
 src/components/nav/NavSidebarTree.vue         |   1 -
 src/components/nav/NavTabs.vue                |   1 -
 src/components/node/NodeStatus.vue            |   1 -
 .../result/ResultDedupFieldsDialog.vue        |   1 -
 .../spider/UploadSpiderFilesDialog.vue        |   1 -
 src/components/tag/CheckTag.vue               |   1 -
 src/components/tag/CheckTagGroup.vue          |   1 -
 src/components/tag/LinkTag.vue                |   1 -
 src/components/tag/Tag.vue                    |   1 -
 src/components/task/TaskStatus.vue            |   1 -
 src/interfaces/components/dialog/Dialog.d.ts  |  11 -
 src/interfaces/components/form/Form.d.ts      |   8 -
 src/interfaces/store/modules/git.d.ts         |   5 +-
 src/layouts/content/detail/DetailLayout.vue   |   1 -
 src/store/modules/git.ts                      |  11 +-
 src/views/git/detail/GitDetail.vue            |   1 -
 .../detail/actions/GitDetailActionsCommon.vue |   1 -
 .../detail/actions/GitDetailActionsFiles.vue  |   1 -
 .../git/detail/tabs/GitDetailTabBranches.vue  |   1 -
 .../git/detail/tabs/GitDetailTabChanges.vue   |   1 -
 .../git/detail/tabs/GitDetailTabFiles.vue     |   1 -
 .../git/detail/tabs/GitDetailTabIgnore.vue    |   1 -
 .../git/detail/tabs/GitDetailTabLogs.vue      |   1 -
 .../git/detail/tabs/GitDetailTabRemote.vue    |   1 -
 .../git/detail/tabs/GitDetailTabTags.vue      |   1 -
 src/views/git/list/GitList.vue                |   1 -
 src/views/spider/detail/SpiderDetail.vue      |   1 -
 .../actions/SpiderDetailActionsFiles.vue      |   1 -
 .../detail/tabs/SpiderDetailTabFiles.vue      |   1 -
 56 files changed, 291 insertions(+), 396 deletions(-)

diff --git a/scripts/gen-index.js b/scripts/gen-index.js
index 1f4b6ab917915..cd45097b85d70 100644
--- a/scripts/gen-index.js
+++ b/scripts/gen-index.js
@@ -89,8 +89,8 @@ function genIndex(moduleName) {
 
 function addComponentName(content, componentName) {
   const setupScriptTagRegex = /(<script\s+setup[^>]*lang=["']ts["'][^>]*>)/;
-  const defineOptionsRegex = /defineOptions\(\{[^}]*}\);?(\n+)?/;
-  const newDefineOptions = `defineOptions({ name: '${COMPONENT_PREFIX}${componentName}' });\n\n`;
+  const defineOptionsRegex = /defineOptions\(\{[^}]*}\);?\n+/;
+  const newDefineOptions = `defineOptions({ name: '${COMPONENT_PREFIX}${componentName}' });\n`;
 
   // Check if the script setup tag exists
   if (setupScriptTagRegex.test(content)) {
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index a6792ca6285a0..5ef52ccf4309b 100644
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClButton' });
-
 import { computed } from 'vue';
 
 export interface ButtonProps {
diff --git a/src/components/button/FaIconButton.vue b/src/components/button/FaIconButton.vue
index d269076ee6490..98ce61bf2766f 100644
--- a/src/components/button/FaIconButton.vue
+++ b/src/components/button/FaIconButton.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFaIconButton' });
-
 import { computed } from 'vue';
 import { ButtonProps } from '@/components/button/Button.vue';
 
diff --git a/src/components/button/IconButton.vue b/src/components/button/IconButton.vue
index c2431dacc13c7..ef43a1b3c47f9 100644
--- a/src/components/button/IconButton.vue
+++ b/src/components/button/IconButton.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClIconButton' });
-
 import { ButtonProps } from '@/components/button/Button.vue';
 
 export interface IconButtonProps extends ButtonProps {
diff --git a/src/components/button/LabelButton.vue b/src/components/button/LabelButton.vue
index 165a9c7025e9d..a5645ea2969f8 100644
--- a/src/components/button/LabelButton.vue
+++ b/src/components/button/LabelButton.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClLabelButton' });
-
 import { ButtonProps } from '@/components/button/Button.vue';
 
 export interface LabelButtonProps extends ButtonProps {
diff --git a/src/components/dialog/CreateEditDialog.vue b/src/components/dialog/CreateEditDialog.vue
index 5d8c320136730..fd7ed370a809e 100644
--- a/src/components/dialog/CreateEditDialog.vue
+++ b/src/components/dialog/CreateEditDialog.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCreateEditDialog' });
-
 import { computed, provide } from 'vue';
 import { sendEvent } from '@/admin/umeng';
 import { emptyArrayFunc, translate } from '@/utils';
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 7bd84d18d49d5..565b1523d5b33 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -1,3 +1,41 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClDialog' });
+import { translate } from '@/utils';
+
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    modalClass?: string;
+    title?: string;
+    top?: string;
+    width?: string;
+    zIndex?: number;
+    confirmDisabled?: boolean;
+    confirmLoading?: boolean;
+    className?: string;
+  }>(),
+  {
+    top: '15vh',
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'confirm'): void;
+}>();
+
+// i18n
+const t = translate;
+
+const onClose = () => {
+  emit('close');
+};
+
+const onConfirm = () => {
+  emit('confirm');
+};
+</script>
+
 <template>
   <el-dialog
     :custom-class="[className, visible ? 'visible' : 'hidden'].join(' ')"
@@ -38,70 +76,4 @@
   </el-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-export default defineComponent({
-  name: 'Dialog',
-  props: {
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    modalClass: {
-      type: String,
-    },
-    title: {
-      type: String,
-      required: false,
-    },
-    top: {
-      type: String,
-      required: false,
-      default: '15vh',
-    },
-    width: {
-      type: String,
-      required: false,
-    },
-    zIndex: {
-      type: Number,
-      required: false,
-    },
-    confirmDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    confirmLoading: {
-      type: Boolean,
-      default: false,
-    },
-    className: {
-      type: String,
-    },
-  },
-  emits: ['close', 'confirm'],
-  setup(props: DialogProps, { emit }) {
-    // i18n
-    const { t } = useI18n();
-
-    const onClose = () => {
-      emit('close');
-    };
-
-    const onConfirm = () => {
-      emit('confirm');
-    };
-
-    return {
-      onClose,
-      onConfirm,
-      t,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/components/file/FileActions.vue b/src/components/file/FileActions.vue
index 06ce97ec592c4..877a70b765076 100644
--- a/src/components/file/FileActions.vue
+++ b/src/components/file/FileActions.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileActions' });
-
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
diff --git a/src/components/file/FileEditor.vue b/src/components/file/FileEditor.vue
index b027c518cab31..58f0866692f0e 100644
--- a/src/components/file/FileEditor.vue
+++ b/src/components/file/FileEditor.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileEditor' });
-
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import * as monaco from 'monaco-editor';
diff --git a/src/components/file/FileEditorNavMenu.vue b/src/components/file/FileEditorNavMenu.vue
index 7e5ccbdaf7fb3..9789495d78514 100644
--- a/src/components/file/FileEditorNavMenu.vue
+++ b/src/components/file/FileEditorNavMenu.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileEditorNavMenu' });
-
 import {
   computed,
   onBeforeUnmount,
diff --git a/src/components/file/FileTab.vue b/src/components/file/FileTab.vue
index 5413daebe8938..dea5376dc617c 100644
--- a/src/components/file/FileTab.vue
+++ b/src/components/file/FileTab.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileTab' });
-
 import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
diff --git a/src/components/file/FileUpload.vue b/src/components/file/FileUpload.vue
index e3a4cc3b10b79..ff6b8d8721d9b 100644
--- a/src/components/file/FileUpload.vue
+++ b/src/components/file/FileUpload.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileUpload' });
-
 import { computed, onBeforeMount, ref, watch } from 'vue';
 import { FILE_UPLOAD_MODE_DIR, FILE_UPLOAD_MODE_FILES } from '@/constants/file';
 import { ElUpload, UploadFile } from 'element-plus';
diff --git a/src/components/file/UploadFilesDialog.vue b/src/components/file/UploadFilesDialog.vue
index c003ad32dc618..8f4bf6ab543f5 100644
--- a/src/components/file/UploadFilesDialog.vue
+++ b/src/components/file/UploadFilesDialog.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClUploadFilesDialog' });
-
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
diff --git a/src/components/form/Form.vue b/src/components/form/Form.vue
index eb9479fa3870c..6c32466d23b5e 100644
--- a/src/components/form/Form.vue
+++ b/src/components/form/Form.vue
@@ -1,3 +1,56 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClForm' });
+import { computed, provide, reactive, ref } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    model?: FormModel;
+    inline?: boolean;
+    labelWidth?: string;
+    size?: string;
+    grid?: number;
+    rules?: FormRules;
+  }>(),
+  {
+    inline: true,
+    labelWidth: '150px',
+    size: 'default',
+    grid: 4,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'validate'): void;
+}>();
+
+const form = computed<FormContext>(() => {
+  const { labelWidth, size, grid } = props;
+  return { labelWidth, size, grid };
+});
+
+provide('form-context', reactive<FormContext>(form.value));
+
+const formRef = ref();
+
+const validate = async () => {
+  return await formRef.value?.validate();
+};
+
+const resetFields = () => {
+  return formRef.value?.resetFields();
+};
+
+const clearValidate = () => {
+  return formRef.value?.clearValidate();
+};
+
+defineExpose({
+  validate,
+  resetFields,
+  clearValidate,
+});
+</script>
+
 <template>
   <el-form
     ref="formRef"
@@ -14,78 +67,6 @@
   </el-form>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  provide,
-  reactive,
-  ref,
-  SetupContext,
-} from 'vue';
-import { emptyObjectFunc } from '@/utils/func';
-
-export default defineComponent({
-  name: 'Form',
-  props: {
-    model: {
-      type: Object as PropType<FormModel>,
-      default: emptyObjectFunc,
-    },
-    inline: {
-      type: Boolean,
-      default: true,
-    },
-    labelWidth: {
-      type: String,
-      default: '150px',
-    },
-    size: {
-      type: String,
-      default: 'default',
-    },
-    grid: {
-      type: Number,
-      default: 4,
-    },
-    rules: {
-      type: Object as PropType<FormRules>,
-    },
-  },
-  emits: ['validate'],
-  setup(props: FormProps, { emit }: SetupContext) {
-    const form = computed<FormContext>(() => {
-      const { labelWidth, size, grid } = props;
-      return { labelWidth, size, grid };
-    });
-
-    provide('form-context', reactive<FormContext>(form.value));
-
-    const formRef = ref();
-
-    const validate = async () => {
-      return await formRef.value?.validate();
-    };
-
-    const resetFields = () => {
-      return formRef.value?.resetFields();
-    };
-
-    const clearValidate = () => {
-      return formRef.value?.clearValidate();
-    };
-
-    return {
-      formRef,
-      validate,
-      resetFields,
-      clearValidate,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .form {
   display: flex;
diff --git a/src/components/form/FormItem.vue b/src/components/form/FormItem.vue
index 351c683939eb1..e0563c07a0de6 100644
--- a/src/components/form/FormItem.vue
+++ b/src/components/form/FormItem.vue
@@ -1,3 +1,131 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClFormItem' });
+
+import {
+  computed,
+  defineComponent,
+  inject,
+  onMounted,
+  PropType,
+  ref,
+  StyleValue,
+  watch,
+} from 'vue';
+import { RuleItem } from 'async-validator';
+import { cloneArray } from '@/utils/object';
+
+const props = withDefaults(
+  defineProps<{
+    prop?: string;
+    label?: string;
+    labelTooltip?: string;
+    labelWidth?: string;
+    size?: string;
+    required?: boolean;
+    span?: number;
+    offset?: number;
+    rules?: RuleItem | RuleItem[];
+    notEditable?: boolean;
+  }>(),
+  {
+    span: 1,
+    offset: 0,
+  }
+);
+
+const formItem = ref<HTMLDivElement>();
+
+// form context
+const formContext = inject<FormContext>('form-context', {} as FormContext);
+
+// store context
+const storeContext = inject<ListStoreContext<BaseModel>>('store-context');
+const ns = storeContext?.namespace;
+const store = storeContext?.store;
+const state = storeContext?.state;
+const isSelectiveForm = computed<boolean | undefined>(
+  () => state?.isSelectiveForm
+);
+const selectedFormFields = computed<string[] | undefined>(
+  () => state?.selectedFormFields
+);
+const isBatchForm = computed<boolean>(
+  () => store?.getters[`${ns}/isBatchForm`]
+);
+const activeDialogKey = computed<DialogKey | undefined>(
+  () => state?.activeDialogKey as DialogKey
+);
+const style = computed<StyleValue>(() => {
+  const { span, offset } = props;
+  return {
+    flexBasis: `calc(100% / ${formContext.grid} * ${span})`,
+    marginRight: `calc(100% / ${formContext.grid} * ${offset})`,
+  };
+});
+
+const internalEditable = ref<boolean>(false);
+watch(
+  () => state?.activeDialogKey,
+  () => (internalEditable.value = false)
+);
+,
+const editableTooltip = computed<string>(() => {
+  const { notEditable } = props;
+  if (notEditable) return 'Unable to edit';
+  return internalEditable.value
+    ? 'Uncheck to disable editing'
+    : 'Check to enable editing';
+});
+
+const onEditableChange = (value: boolean) => {
+  const { prop } = props;
+  if (!selectedFormFields.value || !prop) return;
+  const fields = cloneArray<string>(selectedFormFields.value);
+  if (value) {
+    if (!fields.includes(prop)) {
+      fields.push(prop);
+    }
+  } else {
+    if (fields.includes(prop)) {
+      const idx = fields.findIndex(field => field === prop);
+      fields.splice(idx, 1);
+    }
+  }
+  store?.commit(`${ns}/setSelectedFormFields`, fields);
+};
+
+const isRequired = computed<boolean>(() => {
+  switch (activeDialogKey.value) {
+    case 'edit':
+      if (isBatchForm.value) {
+        if (!internalEditable.value) return false;
+      }
+      break;
+  }
+
+  const { required } = props;
+  return required;
+});
+
+const showRequiredAsterisk = computed<boolean>(() => {
+  if (isSelectiveForm.value) return false;
+  const { required } = props;
+  return required;
+});
+
+onMounted(() => {
+  if (formItem.value) {
+    const { labelWidth } = formContext;
+    const el = formItem.value?.querySelector(
+      '.el-form-item__content',
+    ) as HTMLDivElement;
+    if (labelWidth && el?.style) {
+      el.style.width = `calc(100% - ${labelWidth})`;
+    }
+  }
+});
+</script>
+
 <template>
   <div ref="formItem" :style="style" class="form-item">
     <el-form-item
@@ -34,166 +162,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, onMounted, PropType, ref, watch } from 'vue';
-import { RuleItem } from 'async-validator';
-import { cloneArray } from '@/utils/object';
-
-export default defineComponent({
-  name: 'ClFormItem',
-  props: {
-    prop: {
-      type: String,
-      required: false,
-    },
-    label: {
-      type: String,
-      required: false,
-    },
-    labelTooltip: {
-      type: String,
-      required: false,
-    },
-    labelWidth: {
-      type: String,
-      required: false,
-    },
-    size: {
-      type: String,
-      required: false,
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    span: {
-      type: Number,
-      required: false,
-      default: 1,
-    },
-    offset: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    rules: {
-      type: [Object, Array] as PropType<RuleItem | RuleItem[]>,
-    },
-    notEditable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props: FormItemProps, { emit }) {
-    const formItem = ref<HTMLDivElement>();
-
-    // form context
-    const formContext = inject<FormContext>('form-context', {} as FormContext);
-
-    // store context
-    const storeContext = inject<ListStoreContext<BaseModel>>('store-context');
-    const ns = storeContext?.namespace;
-    const store = storeContext?.store;
-    const state = storeContext?.state;
-    const isSelectiveForm = computed<boolean | undefined>(
-      () => state?.isSelectiveForm
-    );
-    const selectedFormFields = computed<string[] | undefined>(
-      () => state?.selectedFormFields
-    );
-    const isBatchForm = computed<boolean>(
-      () => store?.getters[`${ns}/isBatchForm`]
-    );
-    const activeDialogKey = computed<DialogKey | undefined>(
-      () => state?.activeDialogKey
-    );
-
-    const style = computed<Partial<CSSStyleDeclaration>>(() => {
-      const { span, offset } = props;
-      return {
-        flexBasis: `calc(100% / ${formContext.grid} * ${span})`,
-        marginRight: `calc(100% / ${formContext.grid} * ${offset})`,
-      };
-    });
-
-    const internalEditable = ref<boolean>(false);
-    watch(
-      () => state?.activeDialogKey,
-      () => (internalEditable.value = false)
-    );
-
-    const editableTooltip = computed<string>(() => {
-      const { notEditable } = props;
-      if (notEditable) return 'Unable to edit';
-      return internalEditable.value
-        ? 'Uncheck to disable editing'
-        : 'Check to enable editing';
-    });
-
-    const onEditableChange = (value: boolean) => {
-      const { prop } = props;
-      if (!selectedFormFields.value || !prop) return;
-      const fields = cloneArray<string>(selectedFormFields.value);
-      if (value) {
-        if (!fields.includes(prop)) {
-          fields.push(prop);
-        }
-      } else {
-        if (fields.includes(prop)) {
-          const idx = fields.findIndex(field => field === prop);
-          fields.splice(idx, 1);
-        }
-      }
-      store?.commit(`${ns}/setSelectedFormFields`, fields);
-    };
-
-    const isRequired = computed<boolean>(() => {
-      switch (activeDialogKey.value) {
-        case 'edit':
-          if (isBatchForm.value) {
-            if (!internalEditable.value) return false;
-          }
-          break;
-      }
-
-      const { required } = props;
-      return required;
-    });
-
-    const showRequiredAsterisk = computed<boolean>(() => {
-      if (isSelectiveForm.value) return false;
-      const { required } = props;
-      return required;
-    });
-
-    onMounted(() => {
-      if (formItem.value) {
-        const { labelWidth } = formContext;
-        const el = formItem.value?.querySelector(
-          '.el-form-item__content'
-        ) as HTMLDivElement;
-        if (labelWidth && el?.style) {
-          el.style.width = `calc(100% - ${labelWidth})`;
-        }
-      }
-    });
-
-    return {
-      formItem,
-      formContext,
-      style,
-      isSelectiveForm,
-      internalEditable,
-      editableTooltip,
-      onEditableChange,
-      isRequired,
-      showRequiredAsterisk,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .form-item {
   .el-form-item {
diff --git a/src/components/git/CreateGitBranchDialog.vue b/src/components/git/CreateGitBranchDialog.vue
index cd7e3eee20b3a..968b2a79c5ab8 100644
--- a/src/components/git/CreateGitBranchDialog.vue
+++ b/src/components/git/CreateGitBranchDialog.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCreateGitBranchDialog' });
-
 import { ref, computed, watch } from 'vue';
 import { useStore } from 'vuex';
-import useGitDetail from '@/views/git/detail/useGitDetail';
 import { translate } from '@/utils';
+import useGitDetail from '@/views/git/detail/useGitDetail';
+import Form from '@/components/form/Form.vue';
 
 const t = translate;
 
@@ -32,13 +32,40 @@ const filteredRemoteBranches = computed(() =>
   })
 );
 
-const internalRemoteBranch = ref<string>();
+const formRef = ref<typeof Form>();
+const form = ref<{
+  remoteBranch: string;
+  localBranch: string;
+}>({
+  remoteBranch: '',
+  localBranch: '',
+});
 watch(filteredRemoteBranches, () => {
-  internalRemoteBranch.value = filteredRemoteBranches.value?.[0]?.name;
+  form.value.remoteBranch = filteredRemoteBranches.value?.[0]?.name || '';
 });
+watch(
+  () => form.value.remoteBranch,
+  () => {
+    form.value.localBranch = form.value.remoteBranch?.split('/')?.pop() || '';
+  }
+);
 
+const confirmLoading = ref(false);
 const onConfirm = async () => {
-  store.dispatch(`${ns}/gitCheckoutBranch`, { id: activeId.value });
+  await formRef.value?.validate();
+  confirmLoading.value = true;
+  try {
+    const { localBranch, remoteBranch } = form.value;
+    await store.dispatch(`${ns}/gitCheckoutBranch`, {
+      id: activeId.value,
+      localBranch,
+      remoteBranch,
+    });
+  } finally {
+    confirmLoading.value = false;
+    store.commit(`${ns}/hideDialog`);
+    await store.dispatch(`${ns}/getGit`, { id: activeId.value });
+  }
 };
 
 const onClose = () => {
@@ -50,12 +77,18 @@ const onClose = () => {
   <cl-dialog
     :visible="visible"
     :title="t('components.git.branches.new')"
+    :confirm-loading="confirmLoading"
     @confirm="onConfirm"
     @close="onClose"
   >
-    <cl-form>
-      <cl-form-item :span="4" :label="t('components.git.branches.remote')">
-        <el-select v-model="internalRemoteBranch">
+    <cl-form ref="formRef" :model="form">
+      <cl-form-item
+        prop="remoteBranch"
+        :span="4"
+        :label="t('components.git.branches.remote')"
+        required
+      >
+        <el-select v-model="form.remoteBranch">
           <el-option
             v-for="branch in filteredRemoteBranches"
             :key="branch.hash"
@@ -64,6 +97,14 @@ const onClose = () => {
           />
         </el-select>
       </cl-form-item>
+      <cl-form-item
+        prop="localBranch"
+        :span="4"
+        :label="t('components.git.branches.local')"
+        required
+      >
+        <el-input v-model="form.localBranch" />
+      </cl-form-item>
     </cl-form>
   </cl-dialog>
 </template>
diff --git a/src/components/git/GitStatus.vue b/src/components/git/GitStatus.vue
index 5efaac5e63d3f..576b7340fb948 100644
--- a/src/components/git/GitStatus.vue
+++ b/src/components/git/GitStatus.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitStatus' });
-
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import {
diff --git a/src/components/git/UploadGitFilesDialog.vue b/src/components/git/UploadGitFilesDialog.vue
index 7bf198266454a..2e57ccd7f64ce 100644
--- a/src/components/git/UploadGitFilesDialog.vue
+++ b/src/components/git/UploadGitFilesDialog.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClUploadGitFilesDialog' });
-
 import { useStore } from 'vuex';
 import useGitService from '@/services/git/gitService';
 import useGitDetail from '@/views/git/detail/useGitDetail';
diff --git a/src/components/icon/Icon.vue b/src/components/icon/Icon.vue
index 4e0c4296fc861..0b19805f2b70a 100644
--- a/src/components/icon/Icon.vue
+++ b/src/components/icon/Icon.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClIcon' });
-
 import { computed } from 'vue';
 import useIcon from '@/components/icon/icon';
 
diff --git a/src/components/nav/NavActionBack.vue b/src/components/nav/NavActionBack.vue
index c6da49842b7ac..c2f40f080ff83 100644
--- a/src/components/nav/NavActionBack.vue
+++ b/src/components/nav/NavActionBack.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNavActionBack' });
-
 import { useI18n } from 'vue-i18n';
 
 export interface NavActionBackProps {
diff --git a/src/components/nav/NavActionButton.vue b/src/components/nav/NavActionButton.vue
index 2abdf5c56d4cf..f98d1d58c5ddd 100644
--- a/src/components/nav/NavActionButton.vue
+++ b/src/components/nav/NavActionButton.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNavActionButton' });
-
 import { ButtonProps } from '@/components/button/Button.vue';
 
 export interface NavActionButtonProps extends ButtonProps {
diff --git a/src/components/nav/NavActionFaIcon.vue b/src/components/nav/NavActionFaIcon.vue
index 605056d7bafa9..8c30db0692596 100644
--- a/src/components/nav/NavActionFaIcon.vue
+++ b/src/components/nav/NavActionFaIcon.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNavActionFaIcon' });
-
 defineProps<{
   tooltip?: string;
   icon: Icon;
diff --git a/src/components/nav/NavActionGroupDetailCommon.vue b/src/components/nav/NavActionGroupDetailCommon.vue
index afd3af4c772e0..e9d07fd31fc8c 100644
--- a/src/components/nav/NavActionGroupDetailCommon.vue
+++ b/src/components/nav/NavActionGroupDetailCommon.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNavActionGroupDetailCommon' });
-
 import { ACTION_BACK, ACTION_SAVE } from '@/constants';
 import { translate } from '@/utils';
 
diff --git a/src/components/nav/NavActionItem.vue b/src/components/nav/NavActionItem.vue
index 7f23e452dfd85..176f98dc8bff2 100644
--- a/src/components/nav/NavActionItem.vue
+++ b/src/components/nav/NavActionItem.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClNavActionItem' });
+defineProps<{
+  isLabel?: boolean;
+  label?: string;
+}>();
+</script>
+
 <template>
   <div :class="[isLabel ? 'is-label' : '']" class="nav-action-item">
     <span v-if="label" class="nav-action-item-label">
@@ -7,26 +15,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'NavActionItem',
-  props: {
-    isLabel: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-    },
-  },
-  setup() {
-    return {};
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .nav-action-item {
   margin: 10px 0;
diff --git a/src/components/nav/NavActions.vue b/src/components/nav/NavActions.vue
index 33cb2b0d85c20..0c5382323fc7e 100644
--- a/src/components/nav/NavActions.vue
+++ b/src/components/nav/NavActions.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNavActions' });
-
 import { computed, onMounted, ref, watch } from 'vue';
 
 const props = defineProps<{
diff --git a/src/components/nav/NavSidebar.vue b/src/components/nav/NavSidebar.vue
index b407bf986a020..e190436a3f84d 100644
--- a/src/components/nav/NavSidebar.vue
+++ b/src/components/nav/NavSidebar.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNavSidebar' });
-
 import { computed, ref } from 'vue';
 import { ElMenu } from 'element-plus';
 import { emptyArrayFunc } from '@/utils/func';
diff --git a/src/components/nav/NavSidebarList.vue b/src/components/nav/NavSidebarList.vue
index 7c3a4a0f9feb5..f61dcc02178d7 100644
--- a/src/components/nav/NavSidebarList.vue
+++ b/src/components/nav/NavSidebarList.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNavSidebarList' });
-
 const props = defineProps<{
   activeKey: string;
   items: NavItem[];
diff --git a/src/components/nav/NavSidebarTree.vue b/src/components/nav/NavSidebarTree.vue
index 135537b19a344..b8ac000caf396 100644
--- a/src/components/nav/NavSidebarTree.vue
+++ b/src/components/nav/NavSidebarTree.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNavSidebarTree' });
-
 import { defineComponent, PropType, ref } from 'vue';
 import { emptyArrayFunc } from '@/utils/func';
 
diff --git a/src/components/nav/NavTabs.vue b/src/components/nav/NavTabs.vue
index 4690112c918e0..ab1d4572677fb 100644
--- a/src/components/nav/NavTabs.vue
+++ b/src/components/nav/NavTabs.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNavTabs' });
-
 import { translate } from '@/utils';
 
 const t = translate;
diff --git a/src/components/node/NodeStatus.vue b/src/components/node/NodeStatus.vue
index f474cc92f314c..226b79aeac516 100644
--- a/src/components/node/NodeStatus.vue
+++ b/src/components/node/NodeStatus.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNodeStatus' });
-
 import { computed } from 'vue';
 import {
   NODE_STATUS_OFFLINE,
diff --git a/src/components/result/ResultDedupFieldsDialog.vue b/src/components/result/ResultDedupFieldsDialog.vue
index 919fec289862f..1a83ffbf5e05c 100644
--- a/src/components/result/ResultDedupFieldsDialog.vue
+++ b/src/components/result/ResultDedupFieldsDialog.vue
@@ -14,7 +14,6 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'ClResultDedupFieldsDialog' });
-
 import { computed, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@/utils';
diff --git a/src/components/spider/UploadSpiderFilesDialog.vue b/src/components/spider/UploadSpiderFilesDialog.vue
index 985ea47afed89..f450ddbe10e29 100644
--- a/src/components/spider/UploadSpiderFilesDialog.vue
+++ b/src/components/spider/UploadSpiderFilesDialog.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClUploadSpiderFilesDialog' });
-
 import { useStore } from 'vuex';
 import useSpiderService from '@/services/spider/spiderService';
 import useSpiderDetail from '@/views/spider/detail/useSpiderDetail';
diff --git a/src/components/tag/CheckTag.vue b/src/components/tag/CheckTag.vue
index 6dac44ff11547..4be59b13a7157 100644
--- a/src/components/tag/CheckTag.vue
+++ b/src/components/tag/CheckTag.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCheckTag' });
-
 import { TagProps } from '@/components/tag/Tag.vue';
 import { computed, ref } from 'vue';
 
diff --git a/src/components/tag/CheckTagGroup.vue b/src/components/tag/CheckTagGroup.vue
index fc92cc72cc26c..242e8dfaf31f6 100644
--- a/src/components/tag/CheckTagGroup.vue
+++ b/src/components/tag/CheckTagGroup.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCheckTagGroup' });
-
 import { computed, onBeforeMount, reactive, watch } from 'vue';
 
 export interface CheckTagGroupProps {
diff --git a/src/components/tag/LinkTag.vue b/src/components/tag/LinkTag.vue
index 5a7c082ebedbe..ae007f8c3351e 100644
--- a/src/components/tag/LinkTag.vue
+++ b/src/components/tag/LinkTag.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClLinkTag' });
-
 import { useRouter } from 'vue-router';
 import { TagProps } from './Tag.vue';
 
diff --git a/src/components/tag/Tag.vue b/src/components/tag/Tag.vue
index 9d0d476a74d75..bbc43db7bee72 100644
--- a/src/components/tag/Tag.vue
+++ b/src/components/tag/Tag.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClTag' });
-
 import { computed, onMounted, ref, watch } from 'vue';
 import { ElTag } from 'element-plus';
 
diff --git a/src/components/task/TaskStatus.vue b/src/components/task/TaskStatus.vue
index 3d3799f44daa7..9b461d00faf45 100644
--- a/src/components/task/TaskStatus.vue
+++ b/src/components/task/TaskStatus.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClTaskStatus' });
-
 import { computed } from 'vue';
 import {
   TASK_STATUS_ABNORMAL,
diff --git a/src/interfaces/components/dialog/Dialog.d.ts b/src/interfaces/components/dialog/Dialog.d.ts
index 972f2bcf425c5..338bc94d990b3 100644
--- a/src/interfaces/components/dialog/Dialog.d.ts
+++ b/src/interfaces/components/dialog/Dialog.d.ts
@@ -1,14 +1,3 @@
-interface DialogProps {
-  visible: boolean;
-  modalClass?: string;
-  title?: string;
-  width?: string;
-  zIndex?: number;
-  confirmDisabled?: boolean;
-  confirmLoading?: boolean;
-  className?: string;
-}
-
 type DialogKey = 'create' | 'edit' | 'run' | 'uploadFiles';
 
 interface DialogVisible {
diff --git a/src/interfaces/components/form/Form.d.ts b/src/interfaces/components/form/Form.d.ts
index 6fc9972cfb38f..7ed4e4fc7dac9 100644
--- a/src/interfaces/components/form/Form.d.ts
+++ b/src/interfaces/components/form/Form.d.ts
@@ -10,14 +10,6 @@ import {
 } from '@/constants/form';
 
 declare global {
-  interface FormProps {
-    inline: boolean;
-    labelWidth?: string;
-    size?: string;
-    grid: number;
-    rules?: FormRuleItem | FormRuleItem[];
-  }
-
   interface FormContext {
     labelWidth?: string;
     size?: string;
diff --git a/src/interfaces/store/modules/git.d.ts b/src/interfaces/store/modules/git.d.ts
index 659de4ec61f5f..c75c05169b3f5 100644
--- a/src/interfaces/store/modules/git.d.ts
+++ b/src/interfaces/store/modules/git.d.ts
@@ -46,7 +46,10 @@ interface GitStoreActions
   getGitRemoteRefs: StoreAction<GitStoreState, { id: string }>;
   getGitBranches: StoreAction<GitStoreState, { id: string }>;
   getGitTags: StoreAction<GitStoreState, { id: string }>;
-  gitCheckoutBranch: StoreAction<GitStoreState, { id: string; branch: string }>;
+  gitCheckoutBranch: StoreAction<
+    GitStoreState,
+    { id: string; localBranch: string; remoteBranch: string }
+  >;
   gitCheckoutTag: StoreAction<GitStoreState, { id: string; tag: string }>;
   gitPull: StoreAction<GitStoreState, { id: string }>;
   gitCommit: StoreAction<GitStoreState, { id: string; commit_message: string }>;
diff --git a/src/layouts/content/detail/DetailLayout.vue b/src/layouts/content/detail/DetailLayout.vue
index 2211a40f30648..303ced48fc3e4 100644
--- a/src/layouts/content/detail/DetailLayout.vue
+++ b/src/layouts/content/detail/DetailLayout.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClDetailLayout' });
-
 import { computed, onBeforeMount, onBeforeUnmount, onMounted } from 'vue';
 import useDetail from '@/layouts/content/detail/useDetail';
 import { useStore } from 'vuex';
diff --git a/src/store/modules/git.ts b/src/store/modules/git.ts
index e34f7a1ed5b6c..01485d8df2cab 100644
--- a/src/store/modules/git.ts
+++ b/src/store/modules/git.ts
@@ -157,9 +157,16 @@ const actions = {
   },
   gitCheckoutBranch: async (
     _: StoreActionContext<GitStoreState>,
-    { id, branch }: { id: string; branch: string }
+    {
+      id,
+      localBranch,
+      remoteBranch,
+    }: { id: string; localBranch: string; remoteBranch: string }
   ) => {
-    return await post(`${endpoint}/${id}/git/checkout/branch`, { branch });
+    return await post(`${endpoint}/${id}/git/checkout/branch`, {
+      branch: localBranch,
+      remote_branch: remoteBranch,
+    });
   },
   gitCheckoutTag: async (
     _: StoreActionContext<GitStoreState>,
diff --git a/src/views/git/detail/GitDetail.vue b/src/views/git/detail/GitDetail.vue
index f93b866294872..370dc3037f794 100644
--- a/src/views/git/detail/GitDetail.vue
+++ b/src/views/git/detail/GitDetail.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetail' });
-
 import { watch, onBeforeUnmount } from 'vue';
 import { useStore } from 'vuex';
 import useGitDetail from '@/views/git/detail/useGitDetail';
diff --git a/src/views/git/detail/actions/GitDetailActionsCommon.vue b/src/views/git/detail/actions/GitDetailActionsCommon.vue
index c9373dab78693..044728daea018 100644
--- a/src/views/git/detail/actions/GitDetailActionsCommon.vue
+++ b/src/views/git/detail/actions/GitDetailActionsCommon.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailActionsCommon' });
-
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@/utils';
diff --git a/src/views/git/detail/actions/GitDetailActionsFiles.vue b/src/views/git/detail/actions/GitDetailActionsFiles.vue
index 0a8f7b70439e3..82b902f0658ab 100644
--- a/src/views/git/detail/actions/GitDetailActionsFiles.vue
+++ b/src/views/git/detail/actions/GitDetailActionsFiles.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailActionsFiles' });
-
 import useGitDetail from '@/views/git/detail/useGitDetail';
 
 const ns = 'git';
diff --git a/src/views/git/detail/tabs/GitDetailTabBranches.vue b/src/views/git/detail/tabs/GitDetailTabBranches.vue
index d3d5235ab7097..6586356642fe9 100644
--- a/src/views/git/detail/tabs/GitDetailTabBranches.vue
+++ b/src/views/git/detail/tabs/GitDetailTabBranches.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailTabBranches' });
-
 import { computed, h, onBeforeMount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import Time from '@/components/time/Time.vue';
diff --git a/src/views/git/detail/tabs/GitDetailTabChanges.vue b/src/views/git/detail/tabs/GitDetailTabChanges.vue
index 43a5844ef5ecf..e823d9cde365a 100644
--- a/src/views/git/detail/tabs/GitDetailTabChanges.vue
+++ b/src/views/git/detail/tabs/GitDetailTabChanges.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailTabChanges' });
-
 import { computed, h, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import GitFileStatus from '@/components/git/GitFileStatus.vue';
diff --git a/src/views/git/detail/tabs/GitDetailTabFiles.vue b/src/views/git/detail/tabs/GitDetailTabFiles.vue
index b3fb2f0c3ebe4..286390dc88217 100644
--- a/src/views/git/detail/tabs/GitDetailTabFiles.vue
+++ b/src/views/git/detail/tabs/GitDetailTabFiles.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailTabFiles' });
-
 import { useStore } from 'vuex';
 import useGitService from '@/services/git/gitService';
 import useGitDetail from '@/views/git/detail/useGitDetail';
diff --git a/src/views/git/detail/tabs/GitDetailTabIgnore.vue b/src/views/git/detail/tabs/GitDetailTabIgnore.vue
index 2a476090fa276..ace79bc7f7250 100644
--- a/src/views/git/detail/tabs/GitDetailTabIgnore.vue
+++ b/src/views/git/detail/tabs/GitDetailTabIgnore.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailTabIgnore' });
-
 import { computed, onBeforeMount, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
diff --git a/src/views/git/detail/tabs/GitDetailTabLogs.vue b/src/views/git/detail/tabs/GitDetailTabLogs.vue
index 48726bbfe1883..6ad33537d667a 100644
--- a/src/views/git/detail/tabs/GitDetailTabLogs.vue
+++ b/src/views/git/detail/tabs/GitDetailTabLogs.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailTabLogs' });
-
 import { computed, h, onBeforeMount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import Time from '@/components/time/Time.vue';
diff --git a/src/views/git/detail/tabs/GitDetailTabRemote.vue b/src/views/git/detail/tabs/GitDetailTabRemote.vue
index c7871a5dbc1c8..ed0d85f2df7b8 100644
--- a/src/views/git/detail/tabs/GitDetailTabRemote.vue
+++ b/src/views/git/detail/tabs/GitDetailTabRemote.vue
@@ -6,7 +6,6 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailTabRemote' });
-
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 
diff --git a/src/views/git/detail/tabs/GitDetailTabTags.vue b/src/views/git/detail/tabs/GitDetailTabTags.vue
index a3abb18f3a3c7..6853c0fd76f49 100644
--- a/src/views/git/detail/tabs/GitDetailTabTags.vue
+++ b/src/views/git/detail/tabs/GitDetailTabTags.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailTabTags' });
-
 import { computed, h, onBeforeMount, onBeforeUnmount, ref } from 'vue';
 import { useStore } from 'vuex';
 import Time from '@/components/time/Time.vue';
diff --git a/src/views/git/list/GitList.vue b/src/views/git/list/GitList.vue
index d2b743249b362..25b751ef8e65d 100644
--- a/src/views/git/list/GitList.vue
+++ b/src/views/git/list/GitList.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitList' });
-
 import useGitList from '@/views/git/list/useGitList';
 
 const {
diff --git a/src/views/spider/detail/SpiderDetail.vue b/src/views/spider/detail/SpiderDetail.vue
index 6b2488f056052..bcf476523728d 100644
--- a/src/views/spider/detail/SpiderDetail.vue
+++ b/src/views/spider/detail/SpiderDetail.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClSpiderDetail' });
-
 import { defineComponent, onBeforeMount, onBeforeUnmount } from 'vue';
 import { useStore } from 'vuex';
 import useSpiderDetail from '@/views/spider/detail/useSpiderDetail';
diff --git a/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue b/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue
index 7ce35375df77a..4cc919ca0aa4c 100644
--- a/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue
+++ b/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClSpiderDetailActionsFiles' });
-
 import useSpiderDetail from '@/views/spider/detail/useSpiderDetail';
 
 const ns = 'spider';
diff --git a/src/views/spider/detail/tabs/SpiderDetailTabFiles.vue b/src/views/spider/detail/tabs/SpiderDetailTabFiles.vue
index ae96230c5c319..3a3ae925ba9d0 100644
--- a/src/views/spider/detail/tabs/SpiderDetailTabFiles.vue
+++ b/src/views/spider/detail/tabs/SpiderDetailTabFiles.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClSpiderDetailTabFiles' });
-
 import { useStore } from 'vuex';
 import useSpiderService from '@/services/spider/spiderService';
 import useSpiderDetail from '@/views/spider/detail/useSpiderDetail';