diff --git a/src/components/file/FileActions.vue b/src/components/file/FileActions.vue
index 324edae50c662..3fce3ecec49fc 100644
--- a/src/components/file/FileActions.vue
+++ b/src/components/file/FileActions.vue
@@ -6,8 +6,8 @@ import { sendEvent } from '@/admin/umeng';
 import { downloadData } from '@/utils';
 
 const props = defineProps<{
-  ns: ListStoreNamespace,
-  activeId: string,
+  ns: ListStoreNamespace;
+  activeId: string;
 }>();
 
 // i18n
@@ -60,19 +60,6 @@ const onClickExport = async () => {
       :tooltip="t('components.file.actions.tooltip.fileEditorActions')"
     />
     <cl-nav-action-item>
-      <cl-fa-icon-button
-        :icon="['fa', 'robot']"
-        :tooltip="
-          systemInfo.edition !== 'global.edition.community'
-            ? t('components.file.actions.tooltip.createWithAi')
-            : t('components.file.actions.tooltip.createWithAiDisabled')
-        "
-        type="primary"
-        id="create-with-ai-btn"
-        class-name="create-with-ai-btn"
-        :disabled="systemInfo.edition === 'global.edition.community'"
-        @click="onOpenCreateWithAi"
-      />
       <cl-fa-icon-button
         :icon="['fa', 'upload']"
         :tooltip="t('components.file.actions.tooltip.uploadFiles')"
@@ -93,9 +80,7 @@ const onClickExport = async () => {
       />
       <cl-fa-icon-button
         :icon="['fa', 'cog']"
-        :tooltip="
-          t('components.file.actions.tooltip.fileEditorSettings')
-        "
+        :tooltip="t('components.file.actions.tooltip.fileEditorSettings')"
         type="info"
         id="open-settings-btn"
         class-name="open-settings-btn"
diff --git a/src/components/file/UploadFilesDialog.vue b/src/components/file/UploadFilesDialog.vue
new file mode 100644
index 0000000000000..274ea15229db7
--- /dev/null
+++ b/src/components/file/UploadFilesDialog.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { ElMessage } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+import { sendEvent } from '@/admin/umeng';
+import { getOSPathSeparator } from '@/utils';
+import { useRoute } from 'vue-router';
+import { FILE_UPLOAD_MODE_DIR } from '@/constants';
+import FileUpload from '@/components/file/FileUpload.vue';
+
+const props = defineProps<{
+  ns: ListStoreNamespace;
+  activeDialogKey?: DialogKey;
+  activeId: string;
+  form: BaseModel;
+  services: FileServices<BaseModel>;
+}>();
+
+// i18n
+const { t } = useI18n();
+
+// route
+const route = useRoute();
+
+// store
+const store = useStore();
+
+const fileUploadRef = ref<typeof FileUpload>();
+
+const mode = ref<FileUploadMode>(FILE_UPLOAD_MODE_DIR);
+const files = ref<FileWithPath[]>([]);
+const fileUploadVisible = computed(
+  () => props.activeDialogKey === 'uploadFiles'
+);
+const name = computed(() => props.form?.name);
+
+const confirmLoading = ref<boolean>(false);
+const confirmDisabled = computed<boolean>(() => !files.value.length);
+
+const isDetail = computed<boolean>(() => !!props.activeId);
+
+const { listRootDir, saveFilesBinary } = props.services;
+
+const id = computed<string>(() => {
+  const { activeId, form } = props;
+  if (isDetail.value) {
+    return activeId;
+  } else {
+    return form?._id as string;
+  }
+});
+
+const hasMultiDir = computed<boolean>(() => {
+  if (!files.value) return false;
+  const set = new Set<string>();
+  for (const f of files.value) {
+    const lv1 = f?.path?.split(getOSPathSeparator())[0] as string;
+    if (!set.has(lv1)) {
+      set.add(lv1);
+    }
+    if (set.size > 1) {
+      return true;
+    }
+  }
+  return false;
+});
+
+const uploadInfo = computed(() => {
+  const info = {
+    fileCount: files.value.length,
+    filePaths: files.value.map(f => f.path || f.name),
+  } as FileUploadInfo;
+  if (mode.value === FILE_UPLOAD_MODE_DIR) {
+    const f = files.value[0];
+    info.dirName = f?.path?.split(getOSPathSeparator())[0];
+  }
+  return info;
+});
+
+const getFilePath = (f: FileWithPath): string => {
+  const path = f.path;
+  if (!path) return f.name;
+  if (hasMultiDir.value) {
+    return path;
+  } else {
+    return path
+      .split(getOSPathSeparator())
+      .filter((_: any, i: number) => i > 0)
+      .join(getOSPathSeparator());
+  }
+};
+
+const uploadFiles = async () => {
+  if (!files.value) return;
+  await saveFilesBinary(
+    id.value,
+    files.value.map((f: FileWithPath) => {
+      return { path: getFilePath(f) as string, file: f as File };
+    })
+  );
+  await listRootDir(id.value);
+};
+
+const onUploadClose = () => {
+  const { ns } = props;
+  store.commit(`${ns}/hideDialog`);
+};
+
+const onUploadConfirm = async () => {
+  const { ns } = props;
+  confirmLoading.value = true;
+  try {
+    sendEvent('click_spider_detail_actions_upload_confirm', {
+      mode: mode.value,
+    });
+
+    await uploadFiles();
+    await ElMessage.success(t('common.message.success.upload'));
+  } catch (e: any) {
+    await ElMessage.error(e);
+  } finally {
+    confirmLoading.value = false;
+    store.commit(`${ns}/hideDialog`);
+  }
+};
+
+const onModeChange = (value: FileUploadMode) => {
+  mode.value = value;
+};
+
+const onFilesChange = (fileList: FileWithPath[]) => {
+  if (!fileList.length) return;
+  files.value = fileList;
+
+  sendEvent('click_spider_detail_actions_files_change');
+};
+
+const title = computed(() => {
+  return (
+    t('components.file.upload.title') + (name.value ? ` - ${name.value}` : '')
+  );
+});
+
+watch(fileUploadVisible, () => {
+  if (!fileUploadVisible.value) {
+    files.value = [];
+  }
+});
+watch(mode, () => {
+  files.value = [];
+});
+
+onBeforeUnmount(() => {
+  const { ns } = props;
+  store.commit(`${ns}/hideDialog`);
+});
+</script>
+
+<template>
+  <cl-dialog
+    :visible="fileUploadVisible"
+    :title="title"
+    :confirm-loading="confirmLoading"
+    :confirm-disabled="confirmDisabled"
+    @close="onUploadClose"
+    @confirm="onUploadConfirm"
+  >
+    <cl-file-upload
+      ref="fileUploadRef"
+      :mode="mode"
+      :upload-info="uploadInfo"
+      @mode-change="onModeChange"
+      @files-change="onFilesChange"
+    />
+  </cl-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/file/UploadGitFilesDialog.vue b/src/components/file/UploadGitFilesDialog.vue
new file mode 100644
index 0000000000000..8240f4508d024
--- /dev/null
+++ b/src/components/file/UploadGitFilesDialog.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useStore } from 'vuex';
+import useGitService from '@/services/git/gitService';
+import useGitDetail from '@/views/git/detail/useGitDetail';
+
+// store
+const ns = 'git';
+const store = useStore();
+const { git: state } = store.state as RootStoreState;
+const { activeId } = useGitDetail();
+</script>
+
+<template>
+  <cl-upload-files-dialog
+    :ns="ns"
+    :active-dialog-key="state.activeDialogKey"
+    :active-id="activeId"
+    :form="state.form"
+    :services="useGitService(store)"
+  />
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 6e2791e4c4613..9e171ecf3b0e4 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -40,6 +40,7 @@ import FileEditorNavTabsShowMoreContextMenu from './file/FileEditorNavTabsShowMo
 import FileEditorSettingsDialog from './file/FileEditorSettingsDialog.vue';
 import FileTab from './file/FileTab.vue';
 import FileUpload from './file/FileUpload.vue';
+import UploadFilesDialog from './file/UploadFilesDialog.vue';
 import FilterCondition from './filter/FilterCondition.vue';
 import FilterConditionList from './filter/FilterConditionList.vue';
 import FilterInput from './filter/FilterInput.vue';
@@ -188,6 +189,7 @@ export {
   FileEditorSettingsDialog as ClFileEditorSettingsDialog,
   FileTab as ClFileTab,
   FileUpload as ClFileUpload,
+  UploadFilesDialog as ClUploadFilesDialog,
   FilterCondition as ClFilterCondition,
   FilterConditionList as ClFilterConditionList,
   FilterInput as ClFilterInput,
diff --git a/src/components/spider/UploadSpiderFilesDialog.vue b/src/components/spider/UploadSpiderFilesDialog.vue
index 5f037db48f69f..ad713e410cde7 100644
--- a/src/components/spider/UploadSpiderFilesDialog.vue
+++ b/src/components/spider/UploadSpiderFilesDialog.vue
@@ -1,173 +1,23 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
-import { ElMessage } from 'element-plus';
-import { useI18n } from 'vue-i18n';
-import { sendEvent } from '@/admin/umeng';
 import useSpiderService from '@/services/spider/spiderService';
-import { getOSPathSeparator } from '@/utils';
-import { useRoute } from 'vue-router';
-import { FILE_UPLOAD_MODE_DIR } from '@/constants';
 import useSpiderDetail from '@/views/spider/detail/useSpiderDetail';
-import FileUpload from '@/components/file/FileUpload.vue';
-
-// i18n
-const { t } = useI18n();
-
-// route
-const route = useRoute();
 
 // store
 const ns = 'spider';
 const store = useStore();
 const { spider: state } = store.state as RootStoreState;
-
-const fileUploadRef = ref<typeof FileUpload>();
-
-const mode = ref<FileUploadMode>(FILE_UPLOAD_MODE_DIR);
-const files = ref<FileWithPath[]>([]);
-const fileUploadVisible = computed(
-  () => state.activeDialogKey === 'uploadFiles'
-);
-const name = computed(() => state.form?.name);
-
-const confirmLoading = ref<boolean>(false);
-const confirmDisabled = computed<boolean>(() => !files.value.length);
-
 const { activeId } = useSpiderDetail();
-
-const isDetail = computed<boolean>(() => !!activeId.value);
-
-const { listRootDir, saveFilesBinary } = useSpiderService(store);
-
-const id = computed<string>(() => {
-  if (isDetail.value) {
-    return route.params.id as string;
-  } else {
-    return state.form?._id as string;
-  }
-});
-
-const hasMultiDir = computed<boolean>(() => {
-  if (!files.value) return false;
-  const set = new Set<string>();
-  for (const f of files.value) {
-    const lv1 = f?.path?.split(getOSPathSeparator())[0] as string;
-    if (!set.has(lv1)) {
-      set.add(lv1);
-    }
-    if (set.size > 1) {
-      return true;
-    }
-  }
-  return false;
-});
-
-const uploadInfo = computed(() => {
-  const info = {
-    fileCount: files.value.length,
-    filePaths: files.value.map(f => f.path || f.name),
-  } as FileUploadInfo;
-  if (mode.value === FILE_UPLOAD_MODE_DIR) {
-    const f = files.value[0];
-    info.dirName = f?.path?.split(getOSPathSeparator())[0];
-  }
-  return info;
-});
-
-const getFilePath = (f: FileWithPath): string => {
-  const path = f.path;
-  if (!path) return f.name;
-  if (hasMultiDir.value) {
-    return path;
-  } else {
-    return path
-      .split(getOSPathSeparator())
-      .filter((_: any, i: number) => i > 0)
-      .join(getOSPathSeparator());
-  }
-};
-
-const uploadFiles = async () => {
-  if (!files.value) return;
-  await saveFilesBinary(
-    id.value,
-    files.value.map((f: FileWithPath) => {
-      return { path: getFilePath(f) as string, file: f as File };
-    })
-  );
-  await listRootDir(id.value);
-};
-
-const onUploadClose = () => {
-  store.commit(`${ns}/hideDialog`);
-};
-
-const onUploadConfirm = async () => {
-  confirmLoading.value = true;
-  try {
-    sendEvent('click_spider_detail_actions_upload_confirm', {
-      mode: mode.value,
-    });
-
-    await uploadFiles();
-    await ElMessage.success(t('common.message.success.upload'));
-  } catch (e: any) {
-    await ElMessage.error(e);
-  } finally {
-    confirmLoading.value = false;
-    store.commit(`${ns}/hideDialog`);
-  }
-};
-
-const onModeChange = (value: FileUploadMode) => {
-  mode.value = value;
-};
-
-const onFilesChange = (fileList: FileWithPath[]) => {
-  if (!fileList.length) return;
-  files.value = fileList;
-
-  sendEvent('click_spider_detail_actions_files_change');
-};
-
-const title = computed(() => {
-  return (
-    t('components.file.upload.title') + (name.value ? ` - ${name.value}` : '')
-  );
-});
-
-watch(fileUploadVisible, () => {
-  if (!fileUploadVisible.value) {
-    files.value = [];
-  }
-});
-watch(mode, () => {
-  files.value = [];
-});
-
-onBeforeUnmount(() => {
-  store.commit(`${ns}/hideDialog`);
-});
 </script>
 
 <template>
-  <cl-dialog
-    :visible="fileUploadVisible"
-    :title="title"
-    :confirm-loading="confirmLoading"
-    :confirm-disabled="confirmDisabled"
-    @close="onUploadClose"
-    @confirm="onUploadConfirm"
-  >
-    <cl-file-upload
-      ref="fileUploadRef"
-      :mode="mode"
-      :upload-info="uploadInfo"
-      @mode-change="onModeChange"
-      @files-change="onFilesChange"
-    />
-  </cl-dialog>
+  <cl-upload-files-dialog
+    :ns="ns"
+    :active-dialog-key="state.activeDialogKey"
+    :active-id="activeId"
+    :form="state.form"
+    :services="useSpiderService(store)"
+  />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/index.ts b/src/index.ts
index 73afaf3b8716d..57775fb055616 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,9 +10,9 @@ export * from './utils';
 export * from './constants';
 export * from './layouts/content';
 export * from './components/form';
-export { default as useSpider } from './components/spider/spider';
+export {default as useSpider} from './components/spider/spider';
 export {
   ClSpiderDetail,
 } from './views';
-export { installer as default } from './package';
-export { default as useRequest } from './services/request';
+export {installer as default} from './package';
+export {default as useRequest} from './services/request';
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
index 9eedbd2933c3d..0bec4f55766a3 100644
--- a/src/layouts/index.ts
+++ b/src/layouts/index.ts
@@ -1,4 +1,5 @@
 import BlankLayout from './BlankLayout.vue';
+import NormalLayout from './NormalLayout.vue';
 import Header from './components/Header.vue';
 import Sidebar from './components/Sidebar.vue';
 import SidebarItem from './components/SidebarItem.vue';
@@ -7,10 +8,10 @@ import DetailLayout from './content/detail/DetailLayout.vue';
 import ListLayout from './content/list/ListLayout.vue';
 import SidebarLayout from './content/sidebar/SidebarLayout.vue';
 import SimpleLayout from './content/simple/SimpleLayout.vue';
-import NormalLayout from './NormalLayout.vue';
 
 export {
   BlankLayout as ClBlankLayout,
+  NormalLayout as ClNormalLayout,
   Header as ClHeader,
   Sidebar as ClSidebar,
   SidebarItem as ClSidebarItem,
@@ -19,5 +20,4 @@ export {
   ListLayout as ClListLayout,
   SidebarLayout as ClSidebarLayout,
   SimpleLayout as ClSimpleLayout,
-  NormalLayout as ClNormalLayout,
 };
diff --git a/src/views/git/detail/GitDetail.vue b/src/views/git/detail/GitDetail.vue
index cc57fd59ffa8f..b2fabc51d3022 100644
--- a/src/views/git/detail/GitDetail.vue
+++ b/src/views/git/detail/GitDetail.vue
@@ -1,166 +1,20 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import { useStore } from 'vuex';
 import useGitDetail from '@/views/git/detail/useGitDetail';
-import { translate } from '@/utils';
-import { ElMessage } from 'element-plus';
 
-const t = translate;
-
-const store = useStore();
-const { git: state } = store.state as RootStoreState;
-
-// git form
-const gitForm = computed<Git>(() => state.form);
-
-const {
-  gitCurrentBranch,
-  gitCurrentBranchLoading,
-  onClickPull,
-  onClickCommit,
-} = useGitDetail();
-
-const isBranchClicked = ref<boolean>(false);
-
-const onBranchClick = () => {
-  isBranchClicked.value = true;
-};
-
-const onBranchCancel = () => {
-  isBranchClicked.value = false;
-};
-
-const onBranchCheckout = () => {
-  isBranchClicked.value = false;
-};
-
-const onAutoPullChange = async () => {
-  await store.dispatch(`git/updateById`, {
-    id: gitForm.value._id,
-    form: gitForm.value,
-  });
-  await ElMessage.success(t('common.message.success.save'));
-};
+const { activeTabName } = useGitDetail();
 </script>
 
 <template>
   <cl-detail-layout store-namespace="git">
     <template #actions>
-      <cl-nav-action-group>
-        <cl-nav-action-fa-icon
-          :icon="['fa', 'code-branch']"
-          :tooltip="t('components.git.actions.title')"
-        />
-        <cl-nav-action-item>
-          <cl-fa-icon-button
-            :icon="['fa', 'download']"
-            :tooltip="t('components.git.actions.tooltip.pull')"
-            type="primary"
-            :disabled="!gitForm.url || !gitForm.auth_type"
-            @click="onClickPull"
-          />
-          <cl-fa-icon-button
-            :icon="['fa', 'upload']"
-            :tooltip="t('components.git.actions.tooltip.commit')"
-            type="success"
-            :disabled="!gitForm.url || !gitForm.auth_type"
-            @click="onClickCommit"
-          />
-          <div
-            v-if="gitCurrentBranch || gitCurrentBranchLoading"
-            class="branch"
-          >
-            <cl-tag
-              v-if="gitCurrentBranchLoading"
-              class-name="current-branch-loading"
-              type="warning"
-              :label="t('components.git.common.status.loading.label')"
-              :tooltip="t('components.git.common.status.loading.tooltip')"
-              :icon="['fa', 'spinner']"
-              spinning
-              size="large"
-            />
-            <cl-tag
-              v-else
-              class-name="current-branch"
-              type="primary"
-              :icon="['fa', 'code-branch']"
-              size="large"
-              :label="gitCurrentBranch"
-              @click="onBranchClick"
-            >
-              <template #tooltip>
-                <span>{{ t('components.git.common.currentBranch') }}:</span>
-                <span
-                  style="color: #409eff; margin-left: 5px; font-weight: bolder"
-                >
-                  {{ gitCurrentBranch }}
-                </span>
-              </template>
-            </cl-tag>
-          </div>
-          <cl-switch
-            v-model="gitForm.auto_pull"
-            :active-text="t('components.git.form.autoPull')"
-            :disabled="gitForm.url === '' || gitForm.auth_type === ''"
-            @change="onAutoPullChange"
-          />
-        </cl-nav-action-item>
-      </cl-nav-action-group>
-      <!--      <cl-nav-action-group>-->
-      <!--        <el-radio-group-->
-      <!--          v-if="activeTabKey === 'references'"-->
-      <!--          v-model="internalGitRefType"-->
-      <!--          class="ref-type-select"-->
-      <!--          @change="onRefTypeChange"-->
-      <!--        >-->
-      <!--          <el-radio-button :label="GIT_REF_TYPE_BRANCH">-->
-      <!--            <el-tooltip :content="t('components.git.references.type.branch')">-->
-      <!--              <font-awesome-icon :icon="['fa', 'code-branch']"/>-->
-      <!--            </el-tooltip>-->
-      <!--          </el-radio-button>-->
-      <!--          <el-radio-button :label="GIT_REF_TYPE_TAG">-->
-      <!--            <el-tooltip :content="t('components.git.references.type.tag')">-->
-      <!--              <font-awesome-icon :icon="['fa', 'tag']"/>-->
-      <!--            </el-tooltip>-->
-      <!--          </el-radio-button>-->
-      <!--        </el-radio-group>-->
-      <!--        <cl-label-button-->
-      <!--          id="checkout-btn"-->
-      <!--          class-name="checkout-btn"-->
-      <!--          :type="!loading.checkout ? 'primary' : 'warning'"-->
-      <!--          :icon="!loading.checkout ? ['fa', 'code-branch'] : null"-->
-      <!--          :label="t('components.git.actions.label.checkout')"-->
-      <!--          :tooltip="t('components.git.actions.tooltip.checkout')"-->
-      <!--          :disabled="!gitForm.url || !gitForm.auth_type"-->
-      <!--          :loading="loading.checkout"-->
-      <!--          @click="onClickCheckout"-->
-      <!--        />-->
-      <!--        <cl-label-button-->
-      <!--          id="pull-btn"-->
-      <!--          class-name="pull-btn"-->
-      <!--          :type="!loading.pull ? 'primary' : 'warning'"-->
-      <!--          :icon="!loading.pull ? ['fa', 'download'] : null"-->
-      <!--          :label="t('components.git.actions.label.pull')"-->
-      <!--          :tooltip="t('components.git.actions.tooltip.pull')"-->
-      <!--          :disabled="!gitForm.url || !gitForm.auth_type"-->
-      <!--          :loading="loading.pull"-->
-      <!--          @click="onClickPull"-->
-      <!--        />-->
-      <!--        <cl-label-button-->
-      <!--          id="commit-btn"-->
-      <!--          class-name="commit-btn"-->
-      <!--          :type="!loading.commit ? 'success' : 'warning'"-->
-      <!--          :icon="!loading.commit ? ['fa', 'paper-plane'] : null"-->
-      <!--          :label="t('components.git.actions.label.commit')"-->
-      <!--          :tooltip="t('components.git.actions.tooltip.commit')"-->
-      <!--          :disabled="!gitChangeSelection?.length"-->
-      <!--          :loading="loading.commit"-->
-      <!--          @click="onClickCommit"-->
-      <!--        />-->
-      <!--      </cl-nav-action-group>-->
+      <cl-git-detail-actions-common />
+      <cl-git-detail-actions-files v-if="activeTabName === 'files'" />
     </template>
   </cl-detail-layout>
+
+  <!-- Dialogs (handled by store) -->
+  <cl-upload-spider-files-dialog />
+  <!-- ./Dialogs -->
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/views/git/detail/actions/GitDetailActionsCommon.vue b/src/views/git/detail/actions/GitDetailActionsCommon.vue
new file mode 100644
index 0000000000000..5a5fea613bcb0
--- /dev/null
+++ b/src/views/git/detail/actions/GitDetailActionsCommon.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useStore } from 'vuex';
+import { translate } from '@/utils';
+import useGitDetail from '@/views/git/detail/useGitDetail';
+import { ElMessage } from 'element-plus';
+
+const t = translate;
+
+const store = useStore();
+const { git: state } = store.state as RootStoreState;
+
+// git form
+const gitForm = computed<Git>(() => state.form);
+
+const {
+  gitCurrentBranch,
+  gitCurrentBranchLoading,
+  onClickPull,
+  onClickCommit,
+} = useGitDetail();
+
+const isBranchClicked = ref<boolean>(false);
+
+const onBranchClick = () => {
+  isBranchClicked.value = true;
+};
+
+const onBranchCancel = () => {
+  isBranchClicked.value = false;
+};
+
+const onBranchCheckout = () => {
+  isBranchClicked.value = false;
+};
+
+const onAutoPullChange = async () => {
+  await store.dispatch(`git/updateById`, {
+    id: gitForm.value._id,
+    form: gitForm.value,
+  });
+  await ElMessage.success(t('common.message.success.save'));
+};
+</script>
+
+<template>
+  <cl-nav-action-group>
+    <cl-nav-action-fa-icon
+      :icon="['fa', 'code-branch']"
+      :tooltip="t('components.git.actions.title')"
+    />
+    <cl-nav-action-item>
+      <cl-fa-icon-button
+        :icon="['fa', 'download']"
+        :tooltip="t('components.git.actions.tooltip.pull')"
+        type="primary"
+        :disabled="!gitForm.url || !gitForm.auth_type"
+        @click="onClickPull"
+      />
+      <cl-fa-icon-button
+        :icon="['fa', 'upload']"
+        :tooltip="t('components.git.actions.tooltip.commit')"
+        type="success"
+        :disabled="!gitForm.url || !gitForm.auth_type"
+        @click="onClickCommit"
+      />
+      <div v-if="gitCurrentBranch || gitCurrentBranchLoading" class="branch">
+        <cl-tag
+          v-if="gitCurrentBranchLoading"
+          class-name="current-branch-loading"
+          type="warning"
+          :label="t('components.git.common.status.loading.label')"
+          :tooltip="t('components.git.common.status.loading.tooltip')"
+          :icon="['fa', 'spinner']"
+          spinning
+          size="large"
+        />
+        <cl-tag
+          v-else
+          class-name="current-branch"
+          type="primary"
+          :icon="['fa', 'code-branch']"
+          size="large"
+          :label="gitCurrentBranch"
+          @click="onBranchClick"
+        >
+          <template #tooltip>
+            <span>{{ t('components.git.common.currentBranch') }}:</span>
+            <span style="color: #409eff; margin-left: 5px; font-weight: bolder">
+              {{ gitCurrentBranch }}
+            </span>
+          </template>
+        </cl-tag>
+      </div>
+      <!--      <cl-switch-->
+      <!--        v-model="gitForm.auto_pull"-->
+      <!--        :active-text="t('components.git.form.autoPull')"-->
+      <!--        :disabled="gitForm.url === '' || gitForm.auth_type === ''"-->
+      <!--        @change="onAutoPullChange"-->
+      <!--      />-->
+    </cl-nav-action-item>
+  </cl-nav-action-group>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/git/detail/actions/GitDetailActionsFiles.vue b/src/views/git/detail/actions/GitDetailActionsFiles.vue
new file mode 100644
index 0000000000000..4350bfa95c115
--- /dev/null
+++ b/src/views/git/detail/actions/GitDetailActionsFiles.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import useGitDetail from '@/views/git/detail/useGitDetail';
+
+const ns = 'spider';
+const { activeId } = useGitDetail();
+</script>
+
+<template>
+  <cl-file-actions :ns="ns" :active-id="activeId" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/git/detail/tabs/GitDetailTabChanges.vue b/src/views/git/detail/tabs/GitDetailTabChanges.vue
index 28645898da0c4..1ac31f58bde66 100644
--- a/src/views/git/detail/tabs/GitDetailTabChanges.vue
+++ b/src/views/git/detail/tabs/GitDetailTabChanges.vue
@@ -11,7 +11,7 @@ import Table from '@/components/table/Table.vue';
 const { t } = useI18n();
 
 // store
-const ns = 'spider';
+const ns = 'git';
 const store = useStore();
 const { git: state } = store.state as RootStoreState;
 
diff --git a/src/views/index.ts b/src/views/index.ts
index f63eee3098731..07cb657d28e1b 100644
--- a/src/views/index.ts
+++ b/src/views/index.ts
@@ -15,6 +15,8 @@ import DataSourceDetailTabOverview from './ds/detail/tabs/DataSourceDetailTabOve
 import DataSourceList from './ds/list/DataSourceList.vue';
 import EnvironmentList from './environment/list/EnvironmentList.vue';
 import GitDetail from './git/detail/GitDetail.vue';
+import GitDetailActionsCommon from './git/detail/actions/GitDetailActionsCommon.vue';
+import GitDetailActionsFiles from './git/detail/actions/GitDetailActionsFiles.vue';
 import GitDetailTabBranches from './git/detail/tabs/GitDetailTabBranches.vue';
 import GitDetailTabChanges from './git/detail/tabs/GitDetailTabChanges.vue';
 import GitDetailTabFiles from './git/detail/tabs/GitDetailTabFiles.vue';
@@ -48,12 +50,12 @@ import ScheduleDetail from './schedule/detail/ScheduleDetail.vue';
 import ScheduleDetailTabOverview from './schedule/detail/tabs/ScheduleDetailTabOverview.vue';
 import ScheduleDetailTabTasks from './schedule/detail/tabs/ScheduleDetailTabTasks.vue';
 import ScheduleList from './schedule/list/ScheduleList.vue';
+import SpiderDetail from './spider/detail/SpiderDetail.vue';
 import SpiderDetailActionsCommon from './spider/detail/actions/SpiderDetailActionsCommon.vue';
 import SpiderDetailActionsData from './spider/detail/actions/SpiderDetailActionsData.vue';
 import SpiderDetailActionsDataSource from './spider/detail/actions/SpiderDetailActionsDataSource.vue';
 import SpiderDetailActionsFiles from './spider/detail/actions/SpiderDetailActionsFiles.vue';
 import SpiderDetailActionsGit from './spider/detail/actions/SpiderDetailActionsGit.vue';
-import SpiderDetail from './spider/detail/SpiderDetail.vue';
 import SpiderDetailTabData from './spider/detail/tabs/SpiderDetailTabData.vue';
 import SpiderDetailTabFiles from './spider/detail/tabs/SpiderDetailTabFiles.vue';
 import SpiderDetailTabOverview from './spider/detail/tabs/SpiderDetailTabOverview.vue';
@@ -62,20 +64,20 @@ import SpiderDetailTabSettings from './spider/detail/tabs/SpiderDetailTabSetting
 import SpiderDetailTabTasks from './spider/detail/tabs/SpiderDetailTabTasks.vue';
 import SpiderList from './spider/list/SpiderList.vue';
 import SystemDetail from './system/detail/SystemDetail.vue';
-import TagDetailTabOverview from './tag/detail/tabs/TagDetailTabOverview.vue';
 import TagDetail from './tag/detail/TagDetail.vue';
+import TagDetailTabOverview from './tag/detail/tabs/TagDetailTabOverview.vue';
 import TagViewList from './tag/list/TagViewList.vue';
+import TaskDetail from './task/detail/TaskDetail.vue';
 import TaskDetailActionsCommon from './task/detail/actions/TaskDetailActionsCommon.vue';
 import TaskDetailActionsData from './task/detail/actions/TaskDetailActionsData.vue';
 import TaskDetailActionsLogs from './task/detail/actions/TaskDetailActionsLogs.vue';
 import TaskDetailTabData from './task/detail/tabs/TaskDetailTabData.vue';
 import TaskDetailTabLogs from './task/detail/tabs/TaskDetailTabLogs.vue';
 import TaskDetailTabOverview from './task/detail/tabs/TaskDetailTabOverview.vue';
-import TaskDetail from './task/detail/TaskDetail.vue';
 import TaskList from './task/list/TaskList.vue';
 import TokenList from './token/list/TokenList.vue';
-import UserDetailTabOverview from './user/detail/tabs/UserDetailTabOverview.vue';
 import UserDetail from './user/detail/UserDetail.vue';
+import UserDetailTabOverview from './user/detail/tabs/UserDetailTabOverview.vue';
 import UserList from './user/list/UserList.vue';
 
 export {
@@ -96,6 +98,8 @@ export {
   DataSourceList as ClDataSourceList,
   EnvironmentList as ClEnvironmentList,
   GitDetail as ClGitDetail,
+  GitDetailActionsCommon as ClGitDetailActionsCommon,
+  GitDetailActionsFiles as ClGitDetailActionsFiles,
   GitDetailTabBranches as ClGitDetailTabBranches,
   GitDetailTabChanges as ClGitDetailTabChanges,
   GitDetailTabFiles as ClGitDetailTabFiles,
@@ -129,12 +133,12 @@ export {
   ScheduleDetailTabOverview as ClScheduleDetailTabOverview,
   ScheduleDetailTabTasks as ClScheduleDetailTabTasks,
   ScheduleList as ClScheduleList,
+  SpiderDetail as ClSpiderDetail,
   SpiderDetailActionsCommon as ClSpiderDetailActionsCommon,
   SpiderDetailActionsData as ClSpiderDetailActionsData,
   SpiderDetailActionsDataSource as ClSpiderDetailActionsDataSource,
   SpiderDetailActionsFiles as ClSpiderDetailActionsFiles,
   SpiderDetailActionsGit as ClSpiderDetailActionsGit,
-  SpiderDetail as ClSpiderDetail,
   SpiderDetailTabData as ClSpiderDetailTabData,
   SpiderDetailTabFiles as ClSpiderDetailTabFiles,
   SpiderDetailTabOverview as ClSpiderDetailTabOverview,
@@ -143,19 +147,19 @@ export {
   SpiderDetailTabTasks as ClSpiderDetailTabTasks,
   SpiderList as ClSpiderList,
   SystemDetail as ClSystemDetail,
-  TagDetailTabOverview as ClTagDetailTabOverview,
   TagDetail as ClTagDetail,
+  TagDetailTabOverview as ClTagDetailTabOverview,
   TagViewList as ClTagViewList,
+  TaskDetail as ClTaskDetail,
   TaskDetailActionsCommon as ClTaskDetailActionsCommon,
   TaskDetailActionsData as ClTaskDetailActionsData,
   TaskDetailActionsLogs as ClTaskDetailActionsLogs,
   TaskDetailTabData as ClTaskDetailTabData,
   TaskDetailTabLogs as ClTaskDetailTabLogs,
   TaskDetailTabOverview as ClTaskDetailTabOverview,
-  TaskDetail as ClTaskDetail,
   TaskList as ClTaskList,
   TokenList as ClTokenList,
-  UserDetailTabOverview as ClUserDetailTabOverview,
   UserDetail as ClUserDetail,
+  UserDetailTabOverview as ClUserDetailTabOverview,
   UserList as ClUserList,
 };
diff --git a/src/views/spider/detail/SpiderDetail.vue b/src/views/spider/detail/SpiderDetail.vue
index 5db2d663ed531..82fd3518c2650 100644
--- a/src/views/spider/detail/SpiderDetail.vue
+++ b/src/views/spider/detail/SpiderDetail.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { defineComponent, onBeforeMount, onBeforeUnmount } from 'vue';
+import { useStore } from 'vuex';
+import useSpiderDetail from '@/views/spider/detail/useSpiderDetail';
+
+const ns = 'spider';
+const store = useStore();
+
+const { activeTabName, saveFile } = useSpiderDetail();
+
+onBeforeMount(async () => {
+  await Promise.all([store.dispatch(`project/getAllList`)]);
+
+  store.commit(`${ns}/setAfterSave`, [saveFile]);
+});
+</script>
+
 <template>
   <cl-detail-layout store-namespace="spider">
     <template #actions>
@@ -14,34 +31,5 @@
   <cl-result-dedup-fields-dialog />
   <!-- ./Dialogs -->
 </template>
-<script lang="ts">
-import { defineComponent, onBeforeMount, onBeforeUnmount } from 'vue';
-import { useStore } from 'vuex';
-import useSpiderDetail from '@/views/spider/detail/useSpiderDetail';
-
-export default defineComponent({
-  name: 'SpiderDetail',
-  setup() {
-    const ns = 'spider';
-    const nsGit = 'git';
-    const store = useStore();
-
-    const { saveFile } = useSpiderDetail();
 
-    onBeforeMount(async () => {
-      await Promise.all([store.dispatch(`project/getAllList`)]);
-
-      store.commit(`${ns}/setAfterSave`, [saveFile]);
-    });
-
-    onBeforeUnmount(() => {
-      store.commit(`${nsGit}/resetForm`);
-    });
-
-    return {
-      ...useSpiderDetail(),
-    };
-  },
-});
-</script>
 <style scoped lang="scss"></style>
diff --git a/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue b/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue
index 24ccc0522c785..82220fe28374f 100644
--- a/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue
+++ b/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue
@@ -6,10 +6,7 @@ const { activeId } = useSpiderDetail();
 </script>
 
 <template>
-  <cl-file-actions
-    :ns="ns"
-    :active-id="activeId"
-  />
+  <cl-file-actions :ns="ns" :active-id="activeId" />
 </template>
 
 <style lang="scss" scoped></style>