diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index 2d087e276a9c9..5ef52ccf4309b 100644
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -35,7 +35,7 @@ const cls = computed<string>(() => {
 
 <template>
   <el-tooltip :content="tooltip" :disabled="!tooltip">
-    <div :id="id" :class="['button-wrapper', cls].join(' ')">
+    <span :id="id" :class="['button-wrapper', cls].join(' ')">
       <el-button
         :circle="circle"
         :disabled="disabled"
@@ -49,7 +49,7 @@ const cls = computed<string>(() => {
       >
         <slot></slot>
       </el-button>
-    </div>
+    </span>
   </el-tooltip>
 </template>
 
diff --git a/src/components/empty/Empty.vue b/src/components/empty/Empty.vue
index 27367b593e60a..dcbc172ae7f37 100644
--- a/src/components/empty/Empty.vue
+++ b/src/components/empty/Empty.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClEmpty' });
+import { translate } from '@/utils';
+
+const t = translate;
+
+withDefaults(
+  defineProps<{
+    description?: string;
+  }>(),
+  {
+    description: 'components.empty.noDataAvailable',
+  }
+);
+</script>
+
 <template>
   <div class="empty">
     <cl-img-empty />
@@ -7,30 +23,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import ImgEmpty from '@/components/empty/ImgEmpty.vue';
-import { useI18n } from 'vue-i18n';
-
-export default defineComponent({
-  name: 'Empty',
-  props: {
-    description: {
-      type: String,
-      required: false,
-      default: 'components.empty.noDataAvailable',
-    },
-  },
-  setup() {
-    const { t } = useI18n();
-
-    return {
-      t,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .empty {
   max-height: 240px;
diff --git a/src/components/empty/ImgEmpty.vue b/src/components/empty/ImgEmpty.vue
index 28e2559e30b22..3a5b14c4409f3 100644
--- a/src/components/empty/ImgEmpty.vue
+++ b/src/components/empty/ImgEmpty.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClImgEmpty' });
+</script>
+
 <template>
   <svg
     class="img-empty"
@@ -119,17 +123,6 @@
   </svg>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ImgEmpty',
-  setup() {
-    return {};
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .img-empty {
   max-width: 100%;
diff --git a/src/components/filter/FilterInput.vue b/src/components/filter/FilterInput.vue
index 0cbe1b91a03da..865896b9eb8e3 100644
--- a/src/components/filter/FilterInput.vue
+++ b/src/components/filter/FilterInput.vue
@@ -1,3 +1,29 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClFilterInput' });
+import { defineComponent, ref } from 'vue';
+import { debounce } from 'vue-debounce';
+
+defineProps<{
+  label?: string;
+  placeholder?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'change', value: any): void;
+}>();
+
+const internalModelValue = ref();
+
+const onChange = debounce((value: any) => {
+  emit('change', value);
+}, 500);
+
+const onClear = () => {
+  internalModelValue.value = undefined;
+  emit('change', internalModelValue.value);
+};
+</script>
+
 <template>
   <div class="filter-input">
     <label v-if="label" class="label">
@@ -13,40 +39,4 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-import { debounce } from 'vue-debounce';
-
-export default defineComponent({
-  name: 'FilterInput',
-  props: {
-    label: {
-      type: String,
-    },
-    placeholder: {
-      type: String,
-    },
-  },
-  emits: ['change'],
-  setup(props: FilterInputProps, { emit }) {
-    const internalModelValue = ref();
-
-    const onChange = debounce((value: any) => {
-      emit('change', value);
-    }, 500);
-
-    const onClear = () => {
-      internalModelValue.value = undefined;
-      emit('change', internalModelValue.value);
-    };
-
-    return {
-      internalModelValue,
-      onChange,
-      onClear,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/components/filter/FilterSelect.vue b/src/components/filter/FilterSelect.vue
index cb09c2d2bff64..50d10c8201066 100644
--- a/src/components/filter/FilterSelect.vue
+++ b/src/components/filter/FilterSelect.vue
@@ -1,3 +1,54 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClFilterSelect' });
+import { computed, defineComponent, onBeforeMount, PropType, ref } from 'vue';
+import useRequest from '@/services/request';
+import { cloneArray, prependAllToSelectOptions } from '@/utils';
+
+const props = defineProps<{
+  label?: string;
+  placeholder?: string;
+  filterable?: boolean;
+  options?: SelectOption[];
+  optionsRemote?: FilterSelectOptionsRemote;
+}>();
+
+const emit = defineEmits<{
+  (e: 'change', value: any): void;
+}>();
+
+const { get } = useRequest();
+
+const internalModelValue = ref();
+const internalOptions = ref<SelectOption[]>([]);
+
+const computedOptions = computed<SelectOption[]>(() => {
+  const options = cloneArray(props.options || internalOptions.value || []);
+  return prependAllToSelectOptions(options);
+});
+
+const onChange = (value: any) => {
+  if (value === '') return;
+  emit('change', value);
+};
+
+const onClear = () => {
+  internalModelValue.value = undefined;
+  emit('change', undefined);
+};
+
+const getOptions = async () => {
+  if (!props.optionsRemote) return;
+  const { colName, value, label } = props.optionsRemote;
+  let url = `/filters/${colName}`;
+  if (value) url += `/${value}`;
+  if (label) url += `/${label}`;
+  const res = await get(url);
+  internalOptions.value = res.data;
+};
+
+onBeforeMount(getOptions);
+</script>
+
 <template>
   <div class="filter-select">
     <label v-if="label" class="label">
@@ -22,77 +73,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onBeforeMount, PropType, ref } from 'vue';
-import useRequest from '@/services/request';
-import { cloneArray, prependAllToSelectOptions } from '@/utils';
-
-const { get } = useRequest();
-
-export default defineComponent({
-  name: 'FilterSelect',
-  props: {
-    label: {
-      type: String,
-    },
-    placeholder: {
-      type: String,
-    },
-    filterable: {
-      type: Boolean,
-      default: true,
-    },
-    options: {
-      type: Array as PropType<SelectOption[]>,
-    },
-    optionsRemote: {
-      type: Object as PropType<FilterSelectOptionsRemote>,
-    },
-  },
-  emits: ['change'],
-  setup(props: FilterSelectProps, { emit }) {
-    const internalModelValue = ref();
-    const internalOptions = ref<SelectOption[]>([]);
-
-    const computedOptions = computed<SelectOption[]>(() => {
-      const options = cloneArray(props.options || internalOptions.value || []);
-      return prependAllToSelectOptions(options);
-    });
-
-    const onChange = (value: any) => {
-      if (value === '') return;
-      emit('change', value);
-    };
-
-    const onClear = () => {
-      internalModelValue.value = undefined;
-      emit('change', undefined);
-    };
-
-    const getOptions = async () => {
-      if (!props.optionsRemote) return;
-      const { colName, value, label } = props.optionsRemote;
-      let url = `/filters/${colName}`;
-      if (value) url += `/${value}`;
-      if (label) url += `/${label}`;
-      const res = await get(url);
-      internalOptions.value = res.data;
-    };
-
-    onBeforeMount(async () => {
-      await getOptions();
-    });
-
-    return {
-      internalModelValue,
-      computedOptions,
-      onChange,
-      onClear,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .filter-select {
   display: flex;
diff --git a/src/components/form/useForm.ts b/src/components/form/useForm.ts
index 32a90f0e43137..8e41646aa3a78 100644
--- a/src/components/form/useForm.ts
+++ b/src/components/form/useForm.ts
@@ -39,7 +39,7 @@ export const useForm = (
 
   // active dialog key
   const activeDialogKey = computed<DialogKey | undefined>(
-    () => state.activeDialogKey
+    () => state.activeDialogKey as DialogKey
   );
 
   // is selective form
@@ -56,25 +56,8 @@ export const useForm = (
     () => store.getters[`${ns}/isBatchForm`]
   );
 
-  // form list ids getters
-  const formListIds = computed<string[]>(
-    () => store.getters[`${ns}/formListIds`]
-  );
-
   const validateForm = async () => {
-    if (isBatchForm.value && activeDialogKey.value === 'create') {
-      let valid = true;
-      for (const formRef of formTableFieldRefsMap.value.values()) {
-        try {
-          await formRef.value?.validate?.();
-        } catch (e) {
-          valid = false;
-        }
-      }
-      return valid;
-    } else {
-      return await formRef.value?.validate();
-    }
+    return await formRef.value?.validate();
   };
 
   const resetForm = () => {
@@ -157,6 +140,7 @@ export const useForm = (
     // validate
     try {
       const valid = await validateForm();
+      console.debug('onConfirm', activeDialogKey.value, form.value, valid);
       if (!valid) return;
     } catch (ex) {
       console.error(ex);
@@ -181,27 +165,14 @@ export const useForm = (
       let res: HttpResponse;
       switch (activeDialogKey.value) {
         case 'create':
-          if (isBatchForm.value) {
-            const changedFormList = formList.value.filter(d => !isEmptyForm(d));
-            res = await createList(changedFormList);
-          } else {
-            res = await create(form.value);
-          }
+          console.debug('create', form.value);
+          res = await create(form.value);
           sendEvent('click_form_create_confirm', {
             ns,
-            batch: isBatchForm.value,
           });
           break;
         case 'edit':
-          if (isBatchForm.value) {
-            res = await updateList(
-              formListIds.value,
-              form.value,
-              selectedFormFields.value
-            );
-          } else {
-            res = await updateById(form.value._id as string, form.value);
-          }
+          res = await updateById(form.value._id as string, form.value);
           sendEvent('click_form_edit_confirm', {
             ns,
             batch: isBatchForm.value,
diff --git a/src/components/git/CreateEditGitDialog.vue b/src/components/git/CreateEditGitDialog.vue
new file mode 100644
index 0000000000000..89085dfe3836e
--- /dev/null
+++ b/src/components/git/CreateEditGitDialog.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClCreateEditGitDialog' });
+import { useStore } from 'vuex';
+import useGit from '@/components/git/git';
+
+// store
+const store = useStore();
+
+const {
+  activeDialogKey,
+  createEditDialogTabName,
+  createEditDialogVisible,
+  actionFunctions,
+  formList,
+  confirmDisabled,
+  confirmLoading,
+} = useGit(store);
+</script>
+
+<template>
+  <cl-create-edit-dialog
+    :type="activeDialogKey"
+    :tab-name="createEditDialogTabName"
+    :visible="createEditDialogVisible"
+    :action-functions="actionFunctions"
+    :batch-form-data="formList"
+    :confirm-disabled="confirmDisabled"
+    :confirm-loading="confirmLoading"
+  >
+    <template #default>
+      <cl-git-form />
+    </template>
+  </cl-create-edit-dialog>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/git/CreateGitBranchDialog.vue b/src/components/git/CreateGitBranchDialog.vue
index 968b2a79c5ab8..dd2f84b3251e2 100644
--- a/src/components/git/CreateGitBranchDialog.vue
+++ b/src/components/git/CreateGitBranchDialog.vue
@@ -14,7 +14,7 @@ const store = useStore();
 const { git: state } = store.state as RootStoreState;
 const {
   activeId,
-  gitCurrentBranch,
+  currentBranch,
   gitRemoteBranches,
   gitLocalBranchesDict,
   gitRemoteBranchesDict,
@@ -28,7 +28,7 @@ const filteredRemoteBranches = computed(() =>
   gitRemoteBranches.value?.filter(branch => {
     if (!branch.hash) return;
     const localBranch = gitLocalBranchesDict.value[branch.hash];
-    return !localBranch || localBranch.name !== gitCurrentBranch.value;
+    return !localBranch || localBranch.name !== currentBranch.value;
   })
 );
 
@@ -56,7 +56,7 @@ const onConfirm = async () => {
   confirmLoading.value = true;
   try {
     const { localBranch, remoteBranch } = form.value;
-    await store.dispatch(`${ns}/gitCheckoutBranch`, {
+    await store.dispatch(`${ns}/checkoutBranch`, {
       id: activeId.value,
       localBranch,
       remoteBranch,
diff --git a/src/components/git/GitBranchSelect.vue b/src/components/git/GitBranchSelect.vue
index 97bd8275b8f95..e27b70c97392a 100644
--- a/src/components/git/GitBranchSelect.vue
+++ b/src/components/git/GitBranchSelect.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitBranchSelect' });
-
 import { computed, ref, watch } from 'vue';
 import { emptyArrayFunc, translate } from '@/utils';
 
@@ -21,7 +20,8 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (e: 'modelValue:update', value: string): void;
-  (e: 'change', value: string): void;
+  (e: 'select-local', value: string): void;
+  (e: 'select-remote', value: string): void;
 }>();
 
 const t = translate;
@@ -34,7 +34,15 @@ const getRemoteBranchFromLocalBranch = (localBranch: GitRef) => {
   );
 };
 
-const options = computed(() => {
+const getLocalBranchFromRemoteBranch = (remoteBranch: GitRef) => {
+  const { localBranches } = props;
+  if (!remoteBranch.hash) return;
+  return localBranches.find(
+    localBranch => localBranch.hash === remoteBranch.hash
+  );
+};
+
+const localBranchOptions = computed(() => {
   const { localBranches } = props;
   return localBranches.map(branch => {
     return {
@@ -45,6 +53,19 @@ const options = computed(() => {
   });
 });
 
+const remoteBranchOptions = computed(() => {
+  const { remoteBranches } = props;
+  return remoteBranches
+    .filter(branch => !getLocalBranchFromRemoteBranch(branch))
+    .map(branch => {
+      return {
+        value: branch.name,
+        label: branch.name,
+        branch,
+      };
+    });
+});
+
 const selectRef = ref<HTMLElement>();
 
 const internalValue = ref<string>(props.modelValue);
@@ -55,6 +76,17 @@ watch(
     internalValue.value = value;
   }
 );
+
+const onSelect = (value: string) => {
+  const localBranch = localBranchOptions.value.find(
+    branch => branch.value === value
+  );
+  if (localBranch) {
+    emit('select-local', localBranch.value || '');
+  } else {
+    emit('select-remote', value);
+  }
+};
 </script>
 
 <template>
@@ -64,7 +96,7 @@ watch(
       v-model="internalValue"
       :disabled="disabled || loading"
       :placeholder="t('components.git.branches.select')"
-      @change="() => emit('change', internalValue)"
+      @change="onSelect"
     >
       <template #label="{ label }">
         <div>
@@ -74,7 +106,7 @@ watch(
         </div>
       </template>
       <el-option
-        v-for="op in options"
+        v-for="op in localBranchOptions"
         :key="op.value"
         :label="op.label"
         :value="op.value"
@@ -96,6 +128,28 @@ watch(
           </span>
         </div>
       </el-option>
+      <el-option-group :label="t('components.git.branches.remote')">
+        <el-option
+          v-for="op in remoteBranchOptions"
+          :key="op.value"
+          :label="op.label"
+          :value="op.value"
+        >
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              gap: 24px;
+            "
+          >
+            <div>
+              <cl-icon :icon="['fa', 'code-branch']" />
+              <span style="margin-left: 5px">{{ op.label }}</span>
+            </div>
+          </div>
+        </el-option>
+      </el-option-group>
     </el-select>
   </div>
 </template>
diff --git a/src/components/git/GitForm.vue b/src/components/git/GitForm.vue
index 85d6f01a53c0e..d022898184bd0 100644
--- a/src/components/git/GitForm.vue
+++ b/src/components/git/GitForm.vue
@@ -1,3 +1,82 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClGitForm' });
+import { computed, watch } from 'vue';
+import { useStore } from 'vuex';
+import { translate } from '@/utils';
+import useGit from '@/components/git/git';
+
+// i18n
+const t = translate;
+
+// store
+const ns = 'git';
+const store = useStore();
+const { git: state } = store.state as RootStoreState;
+
+const { form, formRef, isSelectiveForm } = useGit(store);
+
+const onUrlChange = (url: string) => {
+  let authType;
+  let username;
+  let name;
+  if (url.match(/^https?:\/\//)) {
+    authType = 'http';
+    name = url.match(/^https?:\/\/[^\/]+\/(.*?)(\.git)?$/)?.[1] || '';
+  } else if (url.match(/^git@/)) {
+    authType = 'ssh';
+    name = url.match(/^git@[^:]+:(.*?)(\.git)?$/)?.[1] || '';
+    username = url.match(/(\w+)@/)?.[1];
+  } else {
+    authType = '';
+    name = '';
+  }
+  const payload = {
+    ...state.form,
+    auth_type: authType,
+    name,
+  };
+  if (username) payload.username = username;
+  store.commit(`${ns}/setForm`, payload);
+};
+
+const onCurrentBranchChange = (currentBranch: string) => {
+  store.commit(`${ns}/setForm`, {
+    ...state.form,
+    current_branch: currentBranch,
+  });
+};
+
+const onUsernameChange = (username: string) => {
+  store.commit(`${ns}/setForm`, {
+    ...state.form,
+    username,
+  });
+};
+
+const onPasswordChange = (password: string) => {
+  store.commit(`${ns}/setForm`, {
+    ...state.form,
+    password,
+  });
+};
+
+const gitBranchSelectOptions = computed<SelectOption[]>(
+  () => store.getters['spider/gitBranchSelectOptions']
+);
+
+watch(
+  () => JSON.stringify(gitBranchSelectOptions.value),
+  () => {
+    if (
+      !state.form.current_branch &&
+      gitBranchSelectOptions.value?.length > 0
+    ) {
+      onCurrentBranchChange(gitBranchSelectOptions.value[0].value);
+    }
+  }
+);
+</script>
+
 <template>
   <cl-form v-if="form" ref="formRef" :model="form" :selective="isSelectiveForm">
     <!--Row-->
@@ -5,6 +84,11 @@
       :span="4"
       :label="t('components.git.form.repoUrl')"
       prop="url"
+      required
+      :rules="{
+        message: t('components.git.form.urlInvalid'),
+        pattern: /^https?:\/\/|^git@/,
+      }"
     >
       <div style="display: flex; align-items: center; gap: 5px">
         <el-input
@@ -33,6 +117,7 @@
       :offset="2"
       :label="t('components.git.form.name')"
       prop="name"
+      required
     >
       <el-input
         v-model="form.name"
@@ -97,112 +182,4 @@
   </cl-form>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, watch } from 'vue';
-import { useStore } from 'vuex';
-import useGit from '@/components/git/git';
-import { useI18n } from 'vue-i18n';
-import { emptyArrayFunc } from '@/utils';
-
-export default defineComponent({
-  name: 'GitForm',
-  props: {
-    branchSelectOptions: {
-      type: Array as PropType<SelectOption[]>,
-      default: emptyArrayFunc,
-    },
-  },
-  emits: ['change'],
-  setup(props: GitFormProps, { emit }) {
-    // i18n
-    const { t } = useI18n();
-
-    // store
-    const ns = 'git';
-    const store = useStore();
-    const { git: state } = store.state as RootStoreState;
-
-    const onUrlChange = (url: string) => {
-      let authType;
-      let username;
-      let name;
-      if (url.match(/^https?:\/\//)) {
-        authType = 'http';
-        name = url.match(/^https?:\/\/[^\/]+\/(.*?)(\.git)?$/)?.[1] || '';
-      } else if (url.match(/^git@/)) {
-        authType = 'ssh';
-        name = url.match(/^git@[^:]+:(.*?)(\.git)?$/)?.[1] || '';
-        username = url.match(/(\w+)@/)?.[1];
-      } else {
-        authType = '';
-        name = '';
-      }
-      const payload = {
-        ...state.form,
-        auth_type: authType,
-        name,
-      };
-      if (username) payload.username = username;
-      store.commit(`${ns}/setForm`, payload);
-      emit('change', state.form);
-    };
-
-    const onCurrentBranchChange = (currentBranch: string) => {
-      store.commit(`${ns}/setForm`, {
-        ...state.form,
-        current_branch: currentBranch,
-      });
-      emit('change', state.form);
-    };
-
-    const onUsernameChange = (username: string) => {
-      store.commit(`${ns}/setForm`, {
-        ...state.form,
-        username,
-      });
-      emit('change', state.form);
-    };
-
-    const onPasswordChange = (password: string) => {
-      store.commit(`${ns}/setForm`, {
-        ...state.form,
-        password,
-      });
-      emit('change', state.form);
-    };
-
-    const gitBranchSelectOptions = computed<SelectOption[]>(
-      () => store.getters['spider/gitBranchSelectOptions']
-    );
-
-    const isCurrentBranchDisabled = computed<boolean>(
-      () => !gitBranchSelectOptions.value?.length
-    );
-
-    watch(
-      () => JSON.stringify(gitBranchSelectOptions.value),
-      () => {
-        if (
-          !state.form.current_branch &&
-          gitBranchSelectOptions.value?.length > 0
-        ) {
-          onCurrentBranchChange(gitBranchSelectOptions.value[0].value);
-        }
-      }
-    );
-
-    return {
-      ...useGit(store),
-      onUrlChange,
-      onCurrentBranchChange,
-      gitBranchSelectOptions,
-      isCurrentBranchDisabled,
-      onUsernameChange,
-      onPasswordChange,
-      t,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/components/git/GitStatus.vue b/src/components/git/GitStatus.vue
index 576b7340fb948..1cc65af41a4ef 100644
--- a/src/components/git/GitStatus.vue
+++ b/src/components/git/GitStatus.vue
@@ -18,7 +18,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'click', _: void): void;
+  (e: 'click'): void;
+  (e: 'retry'): void;
 }>();
 
 const { t } = useI18n();
@@ -26,7 +27,7 @@ const { t } = useI18n();
 const ns = 'git';
 const store = useStore();
 
-const data = computed<TagData>(() => {
+const data = computed(() => {
   const { status, error } = props;
   switch (status) {
     case GIT_STATUS_PENDING:
@@ -72,7 +73,7 @@ const data = computed<TagData>(() => {
 const onRetry = async () => {
   const { id } = props;
   await store.dispatch(`${ns}/cloneGit`, { id });
-  await store.dispatch(`${ns}/getById`, id);
+  emit('retry');
 };
 </script>
 
diff --git a/src/components/index.ts b/src/components/index.ts
index aafdef280626b..f593402bdefba 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -50,6 +50,7 @@ import FormItem from './form/FormItem.vue';
 import FormReadonlyValue from './form/FormReadonlyValue.vue';
 import FormTable from './form/FormTable.vue';
 import FormTableField from './form/FormTableField.vue';
+import CreateEditGitDialog from './git/CreateEditGitDialog.vue';
 import CreateGitBranchDialog from './git/CreateGitBranchDialog.vue';
 import GitBranchSelect from './git/GitBranchSelect.vue';
 import GitFileStatus from './git/GitFileStatus.vue';
@@ -199,6 +200,7 @@ export {
   FormReadonlyValue as ClFormReadonlyValue,
   FormTable as ClFormTable,
   FormTableField as ClFormTableField,
+  CreateEditGitDialog as ClCreateEditGitDialog,
   CreateGitBranchDialog as ClCreateGitBranchDialog,
   GitBranchSelect as ClGitBranchSelect,
   GitFileStatus as ClGitFileStatus,
diff --git a/src/components/table/Table.vue b/src/components/table/Table.vue
index 213f363aef97e..e7b08a688aa95 100644
--- a/src/components/table/Table.vue
+++ b/src/components/table/Table.vue
@@ -1,3 +1,95 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClTable' });
+import { inject, ref, computed } from 'vue';
+import useColumn from '@/components/table/column';
+import useHeader from '@/components/table/header';
+import useAction from '@/components/table/action';
+import usePagination from '@/components/table/pagination';
+import {
+  TABLE_PAGINATION_POSITION_ALL,
+  TABLE_PAGINATION_POSITION_BOTTOM,
+  TABLE_PAGINATION_POSITION_TOP,
+} from '@/constants/table';
+import { emptyArrayFunc } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    data: TableData;
+    columns: TableColumn[];
+    selectedColumnKeys: string[];
+    total: number;
+    page: number;
+    pageSize: number;
+    rowKey: string;
+    selectable?: boolean;
+    visibleButtons: BuiltInTableActionButtonName[];
+    hideFooter?: boolean;
+    selectableFunction?: TableSelectableFunction;
+    paginationLayout: string;
+    loading?: boolean;
+    paginationPosition: TablePaginationPosition;
+    height?: string | number;
+    maxHeight?: string | number;
+    embedded?: boolean;
+  }>(),
+  {
+    data: emptyArrayFunc,
+    columns: emptyArrayFunc,
+    selectedColumnKeys: emptyArrayFunc,
+    total: 0,
+    page: 1,
+    pageSize: 10,
+    rowKey: '_id',
+    visibleButtons: emptyArrayFunc,
+    paginationLayout: 'total, sizes, prev, pager, next',
+    paginationPosition: TABLE_PAGINATION_POSITION_BOTTOM,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'edit', data: TableData): void;
+  (e: 'delete', data: TableData): void;
+  (e: 'export', data: TableData): void;
+  (
+    e: 'header-change',
+    data: TableColumn,
+    sort: SortData,
+    filter: FilterConditionData[]
+  ): void;
+  (e: 'pagination-change', data: TablePagination): void;
+  (e: 'selection-change', data: TableData): void;
+}>();
+
+const tableWrapperRef = ref();
+const tableRef = ref();
+
+const tableData = computed(() => props.data);
+
+const {
+  internalSelectedColumnKeys,
+  columnsTransferVisible,
+  selectedColumns,
+  onShowColumnsTransfer,
+  onHideColumnsTransfer,
+  onColumnsChange,
+} = useColumn(props, tableRef, tableWrapperRef);
+
+const { onHeaderChange } = useHeader(emit);
+
+// inject action functions
+const actionFunctions = inject<ListLayoutActionFunctions>('action-functions');
+
+const {
+  selection: internalSelection,
+  onSelectionChange,
+  onEdit,
+  onDelete,
+  onExport,
+} = useAction(emit, tableRef, actionFunctions as ListLayoutActionFunctions);
+
+const { onCurrentChange, onSizeChange } = usePagination(props, emit);
+</script>
+
 <template>
   <div
     v-loading="loading"
@@ -43,7 +135,6 @@
         type="selection"
         width="40"
         fixed="left"
-        :selectable="selectableFunction"
       />
       <el-table-column
         v-for="c in selectedColumns"
@@ -56,7 +147,6 @@
         :min-width="c.minWidth || c.width"
         :sortable="c.sortable"
         :index="c.index"
-        :resizable="c.resizable === undefined ? true : c.resizable"
         :class-name="c.className || c.key"
       >
         <template #header="scope">
@@ -124,175 +214,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, PropType, ref, SetupContext } from 'vue';
-import useColumn from '@/components/table/column';
-import useHeader from '@/components/table/header';
-import useData from '@/components/table/data';
-import useAction from '@/components/table/action';
-import usePagination from '@/components/table/pagination';
-import {
-  TABLE_PAGINATION_POSITION_ALL,
-  TABLE_PAGINATION_POSITION_BOTTOM,
-  TABLE_PAGINATION_POSITION_TOP,
-} from '@/constants/table';
-
-export default defineComponent({
-  name: 'Table',
-  props: {
-    data: {
-      type: Array as PropType<TableData>,
-      required: true,
-      default: () => {
-        return [];
-      },
-    },
-    columns: {
-      type: Array as PropType<TableColumn[]>,
-      required: true,
-      default: () => {
-        return [];
-      },
-    },
-    selectedColumnKeys: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: () => {
-        return [];
-      },
-    },
-    total: {
-      type: Number,
-      default: 0,
-    },
-    page: {
-      type: Number,
-      default: 1,
-    },
-    pageSize: {
-      type: Number,
-      default: 10,
-    },
-    rowKey: {
-      type: String,
-      default: '_id',
-    },
-    selectable: {
-      type: Boolean,
-      default: false,
-    },
-    visibleButtons: {
-      type: Array as PropType<BuiltInTableActionButtonName[]>,
-      required: false,
-      default: () => {
-        return [];
-      },
-    },
-    hideFooter: {
-      type: Boolean,
-      default: false,
-    },
-    selectableFunction: {
-      type: Function as PropType<TableSelectableFunction>,
-      default: () => true,
-    },
-    paginationLayout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next',
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    paginationPosition: {
-      type: String as PropType<TablePaginationPosition>,
-      default: TABLE_PAGINATION_POSITION_BOTTOM,
-    },
-    height: {
-      type: [String, Number],
-    },
-    maxHeight: {
-      type: [String, Number],
-    },
-    embedded: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: [
-    'edit',
-    'delete',
-    'export',
-    'header-change',
-    'pagination-change',
-    'selection-change',
-  ],
-  setup(props: TableProps, ctx: SetupContext) {
-    const tableWrapperRef = ref();
-    const tableRef = ref();
-
-    const { tableData } = useData(props, ctx);
-
-    const {
-      internalSelectedColumnKeys,
-      columnsTransferVisible,
-      selectedColumns,
-      onShowColumnsTransfer,
-      onHideColumnsTransfer,
-      onColumnsChange,
-    } = useColumn(props, ctx, tableRef, tableWrapperRef);
-
-    const { onHeaderChange } = useHeader(props, ctx);
-
-    // inject action functions
-    const actionFunctions =
-      inject<ListLayoutActionFunctions>('action-functions');
-
-    const {
-      selection: internalSelection,
-      onSelectionChange,
-      onAdd,
-      onEdit,
-      onDelete,
-      onExport,
-      clearSelection,
-    } = useAction(
-      props,
-      ctx,
-      tableRef,
-      actionFunctions as ListLayoutActionFunctions,
-    );
-
-    const { onCurrentChange, onSizeChange } = usePagination(props, ctx);
-
-    return {
-      tableWrapperRef,
-      tableRef,
-      tableData,
-      internalSelectedColumnKeys,
-      columnsTransferVisible,
-      selectedColumns,
-      onHeaderChange,
-      onShowColumnsTransfer,
-      onHideColumnsTransfer,
-      onColumnsChange,
-      onExport,
-      internalSelection,
-      onSelectionChange,
-      onAdd,
-      onEdit,
-      onDelete,
-      clearSelection,
-      onCurrentChange,
-      onSizeChange,
-      TABLE_PAGINATION_POSITION_ALL,
-      TABLE_PAGINATION_POSITION_BOTTOM,
-      TABLE_PAGINATION_POSITION_TOP,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .table {
   background-color: var(--cl-container-white-bg);
@@ -332,9 +253,15 @@ export default defineComponent({
   width: 0;
 }
 
-.table.embedded:deep(.el-table--border .el-table__inner-wrapper  tr:first-child  td:first-child),
-.table.embedded:deep(.el-table.is-scrolling-left.el-table--border  tr:first-child  td:first-child),
-.table.embedded:deep(.el-table--border .el-table__inner-wrapper  tr:first-child  th:first-child) {
+.table.embedded:deep(
+    .el-table--border .el-table__inner-wrapper tr:first-child td:first-child
+  ),
+.table.embedded:deep(
+    .el-table.is-scrolling-left.el-table--border tr:first-child td:first-child
+  ),
+.table.embedded:deep(
+    .el-table--border .el-table__inner-wrapper tr:first-child th:first-child
+  ) {
   border-left: none;
 }
 </style>
diff --git a/src/components/table/TableActions.vue b/src/components/table/TableActions.vue
index 768690b953a97..84dd0f87ab2af 100644
--- a/src/components/table/TableActions.vue
+++ b/src/components/table/TableActions.vue
@@ -1,15 +1,98 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClTableActions' });
+
+import { defineComponent, inject, PropType } from 'vue';
+import { ACTION_ADD, ACTION_DELETE, ACTION_EDIT } from '@/constants/action';
+import {
+  TABLE_ACTION_CUSTOMIZE_COLUMNS,
+  TABLE_ACTION_EXPORT,
+} from '@/constants/table';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
+import { emptyArrayFunc, getPrimaryPath, translate } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    selection: TableData;
+    visibleButtons: BuiltInTableActionButtonName[];
+  }>(),
+  {
+    selection: emptyArrayFunc,
+    visibleButtons: emptyArrayFunc,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'edit'): void;
+  (e: 'delete'): void;
+  (e: 'export'): void;
+  (e: 'customize-columns'): void;
+}>();
+
+// i18n
+const t = translate;
+
+// store
+const store = useStore();
+
+// route
+const route = useRoute();
+
+// const onAdd = () => {
+//   emit('click-add');
+// };
+
+const onEdit = () => {
+  emit('edit');
+};
+
+const onDelete = async () => {
+  emit('delete');
+};
+
+const onExport = () => {
+  emit('export');
+};
+
+const onCustomizeColumns = () => {
+  emit('customize-columns');
+};
+
+const showButton = (name: string): boolean => {
+  const { visibleButtons } = props;
+  if (
+    visibleButtons &&
+    visibleButtons.length > 0 &&
+    !visibleButtons.includes(name)
+  ) {
+    return false;
+  }
+  const currentRoutePath = route.path;
+  const { actionVisibleFn } = (store.state as RootStoreState).layout;
+  if (!actionVisibleFn) return true;
+  return actionVisibleFn(currentRoutePath, name);
+};
+
+// export target
+const target = () => {
+  const primaryPath = getPrimaryPath(route.path);
+  return primaryPath.replace(/^\//, '');
+};
+
+// store context
+const storeContext = inject<ListStoreContext<BaseModel>>('store-context');
+
+// export conditions
+const conditions = () => {
+  const state = storeContext?.state;
+  return state?.tableListFilter || [];
+};
+</script>
+
 <template>
   <div class="table-actions">
     <slot name="prefix"></slot>
-    <!--    <cl-fa-icon-button-->
-    <!--        v-if="showButton(ACTION_ADD)"-->
-    <!--        :icon="['fa', 'plus']"-->
-    <!--        class="action-btn"-->
-    <!--        tooltip="Add"-->
-    <!--        type="success"-->
-    <!--        :disabled="selection.length === 0"-->
-    <!--        @click="onAdd"-->
-    <!--    />-->
     <cl-fa-icon-button
       v-if="showButton(ACTION_EDIT)"
       :disabled="selection.length === 0"
@@ -63,117 +146,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, PropType } from 'vue';
-import { ACTION_ADD, ACTION_DELETE, ACTION_EDIT } from '@/constants/action';
-import {
-  TABLE_ACTION_CUSTOMIZE_COLUMNS,
-  TABLE_ACTION_EXPORT,
-} from '@/constants/table';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
-import { useRoute } from 'vue-router';
-import { getPrimaryPath } from '@/utils';
-
-export default defineComponent({
-  name: 'TableActions',
-  emits: ['edit', 'delete', 'export', 'customize-columns'],
-  props: {
-    selection: {
-      type: Array as PropType<TableData>,
-      required: false,
-      default: () => {
-        return [];
-      },
-    },
-    visibleButtons: {
-      type: Array as PropType<BuiltInTableActionButtonName[]>,
-      required: false,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  setup(props: TableActionsProps, { emit }) {
-    // i18n
-    const { t } = useI18n();
-
-    // store
-    const store = useStore();
-
-    // route
-    const route = useRoute();
-
-    // const onAdd = () => {
-    //   emit('click-add');
-    // };
-
-    const onEdit = () => {
-      emit('edit');
-    };
-
-    const onDelete = async () => {
-      emit('delete');
-    };
-
-    const onExport = () => {
-      emit('export');
-    };
-
-    const onCustomizeColumns = () => {
-      emit('customize-columns');
-    };
-
-    const showButton = (name: string): boolean => {
-      const { visibleButtons } = props;
-      if (
-        visibleButtons &&
-        visibleButtons.length > 0 &&
-        !visibleButtons.includes(name)
-      ) {
-        return false;
-      }
-      const currentRoutePath = route.path;
-      const { actionVisibleFn } = (store.state as RootStoreState).layout;
-      if (!actionVisibleFn) return true;
-      return actionVisibleFn(currentRoutePath, name);
-    };
-
-    // export target
-    const target = () => {
-      const primaryPath = getPrimaryPath(route.path);
-      return primaryPath.replace(/^\//, '');
-    };
-
-    // store context
-    const storeContext = inject<ListStoreContext<BaseModel>>('store-context');
-
-    // export conditions
-    const conditions = () => {
-      const state = storeContext?.state;
-      return state?.tableListFilter || [];
-    };
-
-    return {
-      ACTION_ADD,
-      ACTION_EDIT,
-      ACTION_DELETE,
-      TABLE_ACTION_EXPORT,
-      TABLE_ACTION_CUSTOMIZE_COLUMNS,
-      // onAdd,
-      onEdit,
-      onDelete,
-      onExport,
-      onCustomizeColumns,
-      showButton,
-      target,
-      conditions,
-      t,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .table-actions {
   display: inline-flex;
diff --git a/src/components/table/TableCell.vue b/src/components/table/TableCell.vue
index 58c86ab2a8ea7..59ffcc49741b6 100644
--- a/src/components/table/TableCell.vue
+++ b/src/components/table/TableCell.vue
@@ -1,108 +1,96 @@
-<script lang="ts">
-import { defineComponent, h, PropType } from 'vue';
+<script setup lang="ts">
+defineOptions({ name: 'ClTableCell' });
+import { h } from 'vue';
 import FaIconButton from '@/components/button/FaIconButton.vue';
 import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 
-export default defineComponent({
-  name: 'TableCell',
-  props: {
-    column: {
-      type: Object as PropType<TableColumn>,
-      required: true,
-    },
-    row: {
-      type: Object,
-      required: true,
-    },
-    rowIndex: {
-      type: Number,
-      required: true,
-    },
-  },
-  emits: ['click'],
-  setup: function (props: TableCellProps) {
-    // route
-    const route = useRoute();
+const props = withDefaults(
+  defineProps<{
+    column: TableColumn;
+    row: TableData;
+    rowIndex: number;
+  }>(),
+  {
+    rowIndex: 0,
+  }
+);
 
-    // store
-    const store = useStore();
+// route
+const route = useRoute();
 
-    const getChildren = () => {
-      const { row, column, rowIndex } = props;
-      const { value, buttons } = column;
+// store
+const store = useStore();
 
-      // buttons
-      if (buttons) {
-        // normalize
-        let _buttons: TableColumnButton[] = [];
-        if (typeof buttons === 'function') {
-          _buttons = buttons(row);
-        } else if (Array.isArray(buttons) && buttons.length > 0) {
-          _buttons = buttons;
-        }
+const getChildren = () => {
+  const { row, column, rowIndex } = props;
+  const { value, buttons } = column;
 
-        // current route path
-        const currentRoutePath = route.path;
+  // buttons
+  if (buttons) {
+    // normalize
+    let _buttons: TableColumnButton[] = [];
+    if (typeof buttons === 'function') {
+      _buttons = buttons(row);
+    } else if (Array.isArray(buttons) && buttons.length > 0) {
+      _buttons = buttons;
+    }
 
-        // action visible function
-        const actionVisibleFn = (store.state as RootStoreState).layout
-          .actionVisibleFn;
+    // current route path
+    const currentRoutePath = route.path;
 
-        return _buttons
-          .filter(btn => {
-            if (!actionVisibleFn) return true;
-            if (!currentRoutePath) return true;
+    // action visible function
+    const actionVisibleFn = (store.state as RootStoreState).layout
+      .actionVisibleFn;
 
-            // skip if action is not allowed
-            return actionVisibleFn(currentRoutePath, btn.action);
-          })
-          .map(btn => {
-            const {
-              tooltip,
-              type,
-              size,
-              icon,
-              disabled,
-              onClick,
-              id,
-              className,
-            } = btn;
-            const props = {
-              key: JSON.stringify({ tooltip, type, size, icon }),
-              tooltip: typeof tooltip === 'function' ? tooltip(row) : tooltip,
-              type,
-              size: size || 'small',
-              icon,
-              disabled: disabled?.(row),
-              onClick: () => {
-                onClick?.(row, rowIndex, column);
-              },
-              id,
-              className,
-            };
-            // FIXME: use "as any" to fix type errors temporarily
-            return h(FaIconButton, props as any);
-          });
-      }
+    return _buttons
+      .filter(btn => {
+        if (!actionVisibleFn) return true;
+        if (!currentRoutePath) return true;
 
-      // normalized value
-      let normalizedValue = value || row[column.key];
-      switch (typeof normalizedValue) {
-        case 'undefined':
-          return '';
-        case 'function':
-          return [normalizedValue(row, rowIndex, column)];
-        case 'object':
-          return JSON.stringify(normalizedValue);
-        default:
-          return normalizedValue;
-      }
-    };
+        // skip if action is not allowed
+        return actionVisibleFn(currentRoutePath, btn.action);
+      })
+      .map(btn => {
+        const { tooltip, type, size, icon, disabled, onClick, id, className } =
+          btn;
+        const props = {
+          key: JSON.stringify({ tooltip, type, size, icon }),
+          tooltip: typeof tooltip === 'function' ? tooltip(row) : tooltip,
+          type,
+          size: size || 'small',
+          icon,
+          disabled: disabled?.(row),
+          onClick: () => {
+            onClick?.(row, rowIndex, column);
+          },
+          id,
+          className,
+        };
+        // FIXME: use "as any" to fix type errors temporarily
+        return h(FaIconButton, props as any);
+      });
+  }
 
-    return () => h('div', getChildren());
-  },
-});
+  // normalized value
+  let normalizedValue = value || row[column.key as any];
+  switch (typeof normalizedValue) {
+    case 'undefined':
+      return '';
+    case 'function':
+      return [normalizedValue(row, rowIndex, column)];
+    case 'object':
+      return JSON.stringify(normalizedValue);
+    default:
+      return normalizedValue;
+  }
+};
+
+const root = h('div', getChildren());
 </script>
 
+<template>
+  <root />
+</template>
+
 <style lang="scss" scoped></style>
diff --git a/src/components/table/TableHeader.vue b/src/components/table/TableHeader.vue
index 130213604d17c..40f3941f10b33 100644
--- a/src/components/table/TableHeader.vue
+++ b/src/components/table/TableHeader.vue
@@ -1,3 +1,207 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClTableHeader' });
+import { computed, reactive, ref } from 'vue';
+import { conditionTypesMap } from '@/components/filter/FilterCondition.vue';
+import { ASCENDING, DESCENDING } from '@/constants/sort';
+import { FILTER_OP_NOT_SET } from '@/constants/filter';
+import { translate } from '@/utils';
+import { sendEvent } from '@/admin/umeng';
+
+const props = defineProps<{
+  column: TableColumn;
+  index?: number;
+}>();
+
+const emit = defineEmits<{
+  (
+    e: 'change',
+    column: TableColumn,
+    sort?: SortData,
+    filter?: TableHeaderDialogFilterData
+  ): void;
+}>();
+
+// i18n
+const t = translate;
+
+const dialogVisible = ref<boolean>(false);
+
+const actionStatusMap = reactive<TableHeaderActionStatusMap>({
+  filter: { active: false, focused: false },
+  sort: { active: false, focused: false },
+});
+
+const sortData = ref<SortData>();
+const filterData = ref<TableHeaderDialogFilterData>();
+
+const filterItemsMap = computed<Map<any, string | undefined>>(() => {
+  const map = new Map<any, string | undefined>();
+  const { column } = props;
+  const { filterItems } = column;
+  if (!filterItems) return map;
+  filterItems.forEach(d => {
+    const { label, value } = d;
+    map.set(value, label);
+  });
+  return map;
+});
+
+const actions = computed<TableColumnButton[]>(() => {
+  const { column } = props;
+
+  // sort icon and tooltip
+  let sortIcon = ['fa', 'sort-amount-down-alt'];
+  let sortTooltip = t('components.table.header.sort.tooltip.sort');
+  if (sortData.value?.d === ASCENDING) {
+    sortIcon = ['fa', 'sort-amount-up'];
+    sortTooltip = t('components.table.header.sort.tooltip.sortAscending');
+  } else if (sortData.value?.d === DESCENDING) {
+    sortIcon = ['fa', 'sort-amount-down-alt'];
+    sortTooltip = t('components.table.header.sort.tooltip.sortDescending');
+  }
+
+  // filter tooltip
+  let filterTooltip = t('components.table.header.filter.tooltip.filter');
+  let filterIsHtml = false;
+  if (filterData.value) {
+    const { searchString, conditions, items } = filterData.value;
+
+    // search string
+    if (searchString) {
+      filterTooltip += `<br><span style="color: var(--cl-primary-color)">${t('components.table.header.filter.tooltip.search')}:</span> <span style="color: var(--el-color-warning);">"${searchString}"</span>`;
+      filterIsHtml = true;
+    }
+
+    // filter conditions
+    if (conditions && conditions.length > 0) {
+      filterTooltip +=
+        '<br>' +
+        conditions
+          .filter(d => d.op !== FILTER_OP_NOT_SET)
+          .map(
+            d =>
+              `<span style="color: var(--cl-primary-color);margin-right: 5px">${conditionTypesMap[d.op || '']}:</span> <span style="color: var(--el-color-warning);">"${d.value}"</span>`
+          )
+          .join('<br>');
+      filterIsHtml = true;
+    }
+
+    // filter items
+    if (items && items.length > 0) {
+      const itemsStr = items
+        .map(value => filterItemsMap.value.get(value))
+        .join(', ');
+      filterTooltip +=
+        `<br><span style="color: var(--cl-primary-color);margin-right: 5px">${t('components.table.header.filter.tooltip.include')}:</span><span style="color: var(--el-color-warning)">` +
+        itemsStr +
+        '</span>';
+      filterIsHtml = true;
+    }
+  }
+
+  // tooltip items
+  const items: TableColumnButton[] = [];
+  if (column.hasSort) {
+    items.push({
+      key: 'sort',
+      tooltip: sortTooltip,
+      icon: sortIcon,
+      onClick: () => {
+        dialogVisible.value = true;
+        actionStatusMap.sort.focused = true;
+
+        sendEvent('click_table_header_sort_show');
+      },
+    });
+  }
+  if (column.hasFilter) {
+    items.push({
+      key: 'filter',
+      tooltip: filterTooltip,
+      isHtml: filterIsHtml,
+      icon: ['fa', 'filter'],
+      onClick: () => {
+        dialogVisible.value = true;
+        actionStatusMap.filter.focused = true;
+
+        sendEvent('click_table_header_filter_show');
+      },
+    });
+  }
+
+  return items;
+});
+
+const hideDialog = () => {
+  dialogVisible.value = false;
+  actionStatusMap.filter.focused = false;
+  actionStatusMap.sort.focused = false;
+
+  sendEvent('click_table_header_dialog_hide');
+};
+
+const clearDialog = () => {
+  const { column } = props as TableHeaderProps;
+
+  // set status
+  actionStatusMap.filter.active = false;
+  actionStatusMap.sort.active = false;
+
+  // set data
+  sortData.value = undefined;
+  filterData.value = undefined;
+
+  // hide
+  hideDialog();
+
+  // emit
+  emit('change', column, undefined, undefined);
+
+  sendEvent('click_table_header_dialog_clear');
+};
+
+const onDialogCancel = () => {
+  hideDialog();
+};
+
+const onDialogClear = () => {
+  clearDialog();
+};
+
+const onDialogApply = (value: TableHeaderDialogValue) => {
+  const { column } = props as TableHeaderProps;
+  const { sort, filter } = value;
+
+  // set status
+  if (sort) actionStatusMap.sort.active = true;
+  if (filter) actionStatusMap.filter.active = true;
+
+  // set data
+  sortData.value = sort;
+  filterData.value = filter;
+
+  // if no data set, clear
+  if (!sortData.value && !filterData.value) {
+    clearDialog();
+    return;
+  }
+
+  // hide
+  hideDialog();
+
+  // emit
+  emit('change', column, sortData.value, filterData.value);
+
+  sendEvent('click_table_header_dialog_apply');
+};
+
+const hasDialog = computed<boolean>(() => {
+  const { hasSort, hasFilter } = props.column;
+
+  return !!hasSort || !!hasFilter;
+});
+</script>
+
 <template>
   <div class="table-header">
     <span :class="[column.required ? 'required' : '']" class="label">
@@ -35,223 +239,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue';
-import { conditionTypesMap } from '@/components/filter/FilterCondition.vue';
-import { ASCENDING, DESCENDING } from '@/constants/sort';
-import { FILTER_OP_NOT_SET } from '@/constants/filter';
-import { useI18n } from 'vue-i18n';
-import { sendEvent } from '@/admin/umeng';
-
-export default defineComponent({
-  name: 'TableHeader',
-  props: {
-    column: {
-      type: Object as PropType<TableColumn>,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: false,
-    },
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    // i18n
-    const { t } = useI18n();
-
-    const dialogVisible = ref<boolean>(false);
-
-    const actionStatusMap = reactive<TableHeaderActionStatusMap>({
-      filter: { active: false, focused: false },
-      sort: { active: false, focused: false },
-    });
-
-    const sortData = ref<SortData>();
-    const filterData = ref<TableHeaderDialogFilterData>();
-
-    const filterItemsMap = computed<Map<any, string | undefined>>(() => {
-      const map = new Map<any, string | undefined>();
-      const { column } = props;
-      const { filterItems } = column;
-      if (!filterItems) return map;
-      filterItems.forEach(d => {
-        const { label, value } = d;
-        map.set(value, label);
-      });
-      return map;
-    });
-
-    const actions = computed<TableColumnButton[]>(() => {
-      const { column } = props;
-
-      // sort icon and tooltip
-      let sortIcon = ['fa', 'sort-amount-down-alt'];
-      let sortTooltip = t('components.table.header.sort.tooltip.sort');
-      if (sortData.value?.d === ASCENDING) {
-        sortIcon = ['fa', 'sort-amount-up'];
-        sortTooltip = t('components.table.header.sort.tooltip.sortAscending');
-      } else if (sortData.value?.d === DESCENDING) {
-        sortIcon = ['fa', 'sort-amount-down-alt'];
-        sortTooltip = t('components.table.header.sort.tooltip.sortDescending');
-      }
-
-      // filter tooltip
-      let filterTooltip = t('components.table.header.filter.tooltip.filter');
-      let filterIsHtml = false;
-      if (filterData.value) {
-        const { searchString, conditions, items } = filterData.value;
-
-        // search string
-        if (searchString) {
-          filterTooltip += `<br><span style="color: var(--cl-primary-color)">${t('components.table.header.filter.tooltip.search')}:</span> <span style="color: ${variables.warningColor};">"${searchString}"</span>`;
-          filterIsHtml = true;
-        }
-
-        // filter conditions
-        if (conditions && conditions.length > 0) {
-          filterTooltip +=
-            '<br>' +
-            conditions
-              .filter(d => d.op !== FILTER_OP_NOT_SET)
-              .map(
-                d =>
-                  `<span style="color: var(--cl-primary-color);margin-right: 5px">${conditionTypesMap[d.op || '']}:</span> <span style="color: ${variables.warningColor};">"${d.value}"</span>`
-              )
-              .join('<br>');
-          filterIsHtml = true;
-        }
-
-        // filter items
-        if (items && items.length > 0) {
-          const itemsStr = items
-            .map(value => filterItemsMap.value.get(value))
-            .join(', ');
-          filterTooltip +=
-            `<br><span style="color: var(--cl-primary-color);margin-right: 5px">${t('components.table.header.filter.tooltip.include')}:</span><span style="color: ${variables.warningColor}">` +
-            itemsStr +
-            '</span>';
-          filterIsHtml = true;
-        }
-      }
-
-      // tooltip items
-      const items = [];
-      if (column.hasSort) {
-        items.push({
-          key: 'sort',
-          tooltip: sortTooltip,
-          icon: sortIcon,
-          onClick: () => {
-            dialogVisible.value = true;
-            actionStatusMap.sort.focused = true;
-
-            sendEvent('click_table_header_sort_show');
-          },
-        });
-      }
-      if (column.hasFilter) {
-        items.push({
-          key: 'filter',
-          tooltip: filterTooltip,
-          isHtml: filterIsHtml,
-          icon: ['fa', 'filter'],
-          onClick: () => {
-            dialogVisible.value = true;
-            actionStatusMap.filter.focused = true;
-
-            sendEvent('click_table_header_filter_show');
-          },
-        });
-      }
-
-      return items;
-    });
-
-    const hideDialog = () => {
-      dialogVisible.value = false;
-      actionStatusMap.filter.focused = false;
-      actionStatusMap.sort.focused = false;
-
-      sendEvent('click_table_header_dialog_hide');
-    };
-
-    const clearDialog = () => {
-      const { column } = props as TableHeaderProps;
-
-      // set status
-      actionStatusMap.filter.active = false;
-      actionStatusMap.sort.active = false;
-
-      // set data
-      sortData.value = undefined;
-      filterData.value = undefined;
-
-      // hide
-      hideDialog();
-
-      // emit
-      emit('change', column, undefined, undefined);
-
-      sendEvent('click_table_header_dialog_clear');
-    };
-
-    const onDialogCancel = () => {
-      hideDialog();
-    };
-
-    const onDialogClear = () => {
-      clearDialog();
-    };
-
-    const onDialogApply = (value: TableHeaderDialogValue) => {
-      const { column } = props as TableHeaderProps;
-      const { sort, filter } = value;
-
-      // set status
-      if (sort) actionStatusMap.sort.active = true;
-      if (filter) actionStatusMap.filter.active = true;
-
-      // set data
-      sortData.value = sort;
-      filterData.value = filter;
-
-      // if no data set, clear
-      if (!sortData.value && !filterData.value) {
-        clearDialog();
-        return;
-      }
-
-      // hide
-      hideDialog();
-
-      // emit
-      emit('change', column, sortData.value, filterData.value);
-
-      sendEvent('click_table_header_dialog_apply');
-    };
-
-    const hasDialog = computed<boolean>(() => {
-      const { hasSort, hasFilter } = props.column;
-
-      return !!hasSort || !!hasFilter;
-    });
-
-    return {
-      dialogVisible,
-      actionStatusMap,
-      actions,
-      sortData,
-      filterData,
-      onDialogCancel,
-      onDialogClear,
-      onDialogApply,
-      hasDialog,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .table-header {
   display: flex;
diff --git a/src/components/table/TableHeaderAction.vue b/src/components/table/TableHeaderAction.vue
index 1be4d43feb0bd..56e9dca9316c1 100644
--- a/src/components/table/TableHeaderAction.vue
+++ b/src/components/table/TableHeaderAction.vue
@@ -1,65 +1,49 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClTableHeaderAction' });
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    tooltip?: string | Record<string, string>;
+    isHtml?: boolean;
+    icon: string | string[];
+    status?: TableHeaderActionStatus;
+  }>(),
+  {
+    status: () => ({ active: false, focused: false }),
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'click'): void;
+}>();
+
+const classes = computed<string[]>(() => {
+  const { status } = props as TableHeaderActionProps;
+  if (!status) return [];
+  const { active, focused } = status;
+  const cls = [];
+  if (active) cls.push('active');
+  if (focused) cls.push('focused');
+  return cls;
+});
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
 <template>
   <span :class="classes" class="action" @click="onClick">
     <el-tooltip :content="tooltip">
       <template v-if="isHtml" #content>
         <div v-html="tooltip" />
       </template>
-      <font-awesome-icon :icon="icon" />
+      <cl-icon :icon="icon" />
     </el-tooltip>
   </span>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TableHeaderAction',
-  props: {
-    tooltip: {
-      type: [String, Object],
-      required: false,
-    },
-    isHtml: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    icon: {
-      type: [Array, String],
-      required: true,
-    },
-    status: {
-      type: Object,
-      required: false,
-      default: () => {
-        return { active: false, focused: false };
-      },
-    },
-  },
-  emits: ['click'],
-  setup(props, { emit }) {
-    const classes = computed<string[]>(() => {
-      const { status } = props as TableHeaderActionProps;
-      if (!status) return [];
-      const { active, focused } = status;
-      const cls = [];
-      if (active) cls.push('active');
-      if (focused) cls.push('focused');
-      return cls;
-    });
-
-    const onClick = () => {
-      emit('click');
-    };
-
-    return {
-      classes,
-      onClick,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .action {
   margin-left: 3px;
diff --git a/src/components/table/TableHeaderDialog.vue b/src/components/table/TableHeaderDialog.vue
index 4b0eef6a4c142..424ac096aaad9 100644
--- a/src/components/table/TableHeaderDialog.vue
+++ b/src/components/table/TableHeaderDialog.vue
@@ -1,10 +1,142 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClTableHeaderDialog' });
+import { computed, defineComponent, PropType, ref, watch } from 'vue';
+import { plainClone } from '@/utils/object';
+import { FILTER_OP_NOT_SET } from '@/constants/filter';
+import { ClickOutside } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{
+  visible?: boolean;
+  column: TableColumn;
+  actionStatusMap: TableHeaderActionStatusMap;
+  sort?: SortData;
+  filter?: TableHeaderDialogFilterData;
+}>();
+
+const emit = defineEmits<{
+  (e: 'click', value: TableHeaderDialogValue): void;
+  (e: 'cancel'): void;
+  (e: 'clear'): void;
+  (e: 'apply', value: TableHeaderDialogValue): void;
+}>();
+
+// i18n
+const { t } = useI18n();
+
+const defaultInternalSort = { key: props.column.key } as SortData;
+const internalSort = ref<SortData>();
+const internalFilter = ref<TableHeaderDialogFilterData>();
+
+const searchString = computed<string | undefined>(
+  () => internalFilter.value?.searchString
+);
+
+const conditions = computed<FilterConditionData[]>(
+  () => internalFilter.value?.conditions || []
+);
+
+const items = computed<string[]>(() => internalFilter.value?.items || []);
+
+const trueConditions = computed<FilterConditionData[]>(() => {
+  return conditions.value?.filter(d => d.op !== FILTER_OP_NOT_SET);
+});
+
+const isEmptyFilter = computed<boolean>(() => {
+  return (
+    !searchString.value &&
+    trueConditions.value.length == 0 &&
+    items.value.length === 0
+  );
+});
+
+const isApplyDisabled = computed<boolean>(() => {
+  for (const cond of trueConditions.value) {
+    if (!cond.value) {
+      return true;
+    }
+  }
+  return false;
+});
+
+const cancel = () => {
+  emit('cancel');
+};
+
+const clear = () => {
+  if (!internalSort.value) internalSort.value = plainClone(defaultInternalSort);
+  internalSort.value.d = undefined;
+  internalFilter.value = undefined;
+  emit('clear');
+};
+
+const apply = () => {
+  if (!internalSort.value && isEmptyFilter.value) {
+    clear();
+    return;
+  }
+  const value: TableHeaderDialogValue = {
+    sort: internalSort.value,
+    filter: internalFilter.value,
+  };
+  emit('apply', value);
+};
+
+const onClickOutside = () => {
+  const { visible } = props;
+  if (!visible) return;
+  cancel();
+};
+
+const onCancel = () => {
+  cancel();
+};
+
+const onClear = () => {
+  clear();
+};
+
+const onApply = () => {
+  apply();
+};
+
+const onSortChange = (value: string) => {
+  if (!internalSort.value) internalSort.value = plainClone(defaultInternalSort);
+  internalSort.value.d = value;
+};
+
+const onFilterChange = (value: TableHeaderDialogFilterData) => {
+  internalFilter.value = value;
+};
+
+const onFilterEnter = () => {
+  apply();
+};
+
+watch(
+  () => {
+    const { visible } = props;
+    return visible;
+  },
+  () => {
+    const { sort, filter, visible } = props;
+    if (visible) {
+      internalSort.value = (
+        sort ? plainClone(sort) : plainClone(defaultInternalSort)
+      ) as SortData;
+      internalFilter.value = plainClone(filter) as TableHeaderDialogFilterData;
+    }
+  }
+);
+</script>
+
 <template>
   <el-popover
     :show-arrow="false"
     :visible="visible"
     class="table-header-dialog"
     popper-class="table-header-popper"
-    trigger="manual"
+    trigger="click"
   >
     <template #reference>
       <div>
@@ -67,173 +199,6 @@
   </el-popover>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue';
-import { plainClone } from '@/utils/object';
-import { FILTER_OP_NOT_SET } from '@/constants/filter';
-import { ClickOutside } from 'element-plus';
-import { useI18n } from 'vue-i18n';
-
-export default defineComponent({
-  name: 'TableHeaderFilter',
-  directives: {
-    ClickOutside,
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    column: {
-      type: Object as PropType<TableColumn>,
-      required: true,
-    },
-    actionStatusMap: {
-      type: Object as PropType<TableHeaderActionStatusMap>,
-      required: true,
-    },
-    sort: {
-      type: Object as PropType<SortData>,
-      required: false,
-    },
-    filter: {
-      type: Object as PropType<TableHeaderDialogFilterData>,
-      required: false,
-    },
-  },
-  emits: ['click', 'cancel', 'clear', 'apply'],
-  setup(props: TableHeaderDialogProps, { emit }) {
-    // i18n
-    const { t } = useI18n();
-
-    const defaultInternalSort = { key: props.column.key } as SortData;
-    const internalSort = ref<SortData>();
-    const internalFilter = ref<TableHeaderDialogFilterData>();
-
-    const searchString = computed<string | undefined>(
-      () => internalFilter.value?.searchString
-    );
-
-    const conditions = computed<FilterConditionData[]>(
-      () => internalFilter.value?.conditions || []
-    );
-
-    const items = computed<string[]>(() => internalFilter.value?.items || []);
-
-    const trueConditions = computed<FilterConditionData[]>(() => {
-      return conditions.value?.filter(d => d.op !== FILTER_OP_NOT_SET);
-    });
-
-    const isEmptyFilter = computed<boolean>(() => {
-      return (
-        !searchString.value &&
-        trueConditions.value.length == 0 &&
-        items.value.length === 0
-      );
-    });
-
-    const isApplyDisabled = computed<boolean>(() => {
-      for (const cond of trueConditions.value) {
-        if (!cond.value) {
-          return true;
-        }
-      }
-      return false;
-    });
-
-    const cancel = () => {
-      emit('cancel');
-    };
-
-    const clear = () => {
-      if (!internalSort.value)
-        internalSort.value = plainClone(defaultInternalSort);
-      internalSort.value.d = undefined;
-      internalFilter.value = undefined;
-      emit('clear');
-    };
-
-    const apply = () => {
-      if (!internalSort.value && isEmptyFilter.value) {
-        clear();
-        return;
-      }
-      const value: TableHeaderDialogValue = {
-        sort: internalSort.value,
-        filter: internalFilter.value,
-      };
-      emit('apply', value);
-    };
-
-    const onClickOutside = () => {
-      const { visible } = props;
-      if (!visible) return;
-      cancel();
-    };
-
-    const onCancel = () => {
-      cancel();
-    };
-
-    const onClear = () => {
-      clear();
-    };
-
-    const onApply = () => {
-      apply();
-    };
-
-    const onSortChange = (value: string) => {
-      if (!internalSort.value)
-        internalSort.value = plainClone(defaultInternalSort);
-      internalSort.value.d = value;
-    };
-
-    const onFilterChange = (value: TableHeaderDialogFilterData) => {
-      internalFilter.value = value;
-    };
-
-    const onFilterEnter = () => {
-      apply();
-    };
-
-    watch(
-      () => {
-        const { visible } = props;
-        return visible;
-      },
-      () => {
-        const { sort, filter, visible } = props;
-        if (visible) {
-          internalSort.value = (
-            sort ? plainClone(sort) : plainClone(defaultInternalSort)
-          ) as SortData;
-          internalFilter.value = plainClone(
-            filter
-          ) as TableHeaderDialogFilterData;
-        }
-      }
-    );
-
-    return {
-      internalSort,
-      searchString,
-      conditions,
-      isApplyDisabled,
-      onClickOutside,
-      onCancel,
-      onClear,
-      onApply,
-      onSortChange,
-      onFilterChange,
-      onFilterEnter,
-      t,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .content {
   position: relative;
diff --git a/src/components/table/TableHeaderDialogFilter.vue b/src/components/table/TableHeaderDialogFilter.vue
index f2185deffa049..2b6ed4cc22ec1 100644
--- a/src/components/table/TableHeaderDialogFilter.vue
+++ b/src/components/table/TableHeaderDialogFilter.vue
@@ -1,9 +1,128 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClTableHeaderDialogFilter' });
+import { computed, defineComponent, PropType, ref, watch } from 'vue';
+import { getDefaultFilterCondition } from '@/components/filter/FilterCondition.vue';
+import { debounce } from '@/utils/debounce';
+import { useI18n } from 'vue-i18n';
+import { Search } from '@element-plus/icons-vue';
+import { emptyArrayFunc, translate } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    column?: TableColumn;
+    searchString?: string;
+    conditions: FilterConditionData[];
+  }>(),
+  {
+    conditions: emptyArrayFunc,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'change', value: TableHeaderDialogFilterData): void;
+  (e: 'clear'): void;
+  (e: 'enter'): void;
+}>();
+
+// i18n
+const t = translate;
+
+const internalConditions = ref<FilterConditionData[]>([
+  getDefaultFilterCondition(),
+]);
+const internalSearchString = ref<string>();
+const internalItems = ref<string[]>([]);
+
+const filterData = computed<TableHeaderDialogFilterData>(() => {
+  return {
+    searchString: internalSearchString.value,
+    conditions: internalConditions.value,
+    items: internalItems.value,
+  };
+});
+
+const filteredItems = computed<SelectOption[]>(() => {
+  const { column } = props as TableHeaderDialogFilterProps;
+
+  const items = column?.filterItems;
+
+  // undefined items
+  if (!items) {
+    return [];
+  }
+
+  // invalid type of items or empty items
+  if (!Array.isArray(items) || items.length === 0) {
+    return [];
+  }
+
+  // items as an array of SelectOption
+  return items.filter(d =>
+    filterData.value.searchString
+      ? d.label?.toLowerCase()?.includes(filterData.value.searchString)
+      : true
+  );
+});
+
+const onItemsChange = (newItems: string[]) => {
+  internalItems.value = newItems;
+  emit('change', filterData.value);
+};
+
+const search = debounce(() => {
+  if (internalSearchString.value) {
+    internalItems.value = filteredItems.value.map(d => d.value);
+  } else {
+    internalItems.value = [];
+  }
+  emit('change', filterData.value);
+}, 100);
+
+const onSearch = (value?: string) => {
+  internalSearchString.value = value;
+  search();
+};
+
+const onClear = () => {
+  emit('clear');
+};
+
+const onEnter = () => {
+  emit('enter');
+};
+
+watch(
+  () => {
+    const { searchString } = props as TableHeaderDialogFilterProps;
+    return searchString;
+  },
+  value => {
+    internalSearchString.value = value;
+  }
+);
+
+watch(
+  () => {
+    const { conditions } = props as TableHeaderDialogFilterProps;
+    return conditions;
+  },
+  value => {
+    if (value) {
+      internalConditions.value = value;
+      if (internalConditions.value.length === 0) {
+        internalConditions.value.push(getDefaultFilterCondition());
+      }
+    }
+  }
+);
+</script>
+
 <template>
   <div class="table-header-dialog-filter">
     <div class="title">
       <span>{{ t('components.table.header.dialog.filter.title') }}</span>
       <el-input
-        v-if="column.allowFilterSearch"
+        v-if="column?.allowFilterSearch"
         :model-value="internalSearchString"
         class="search"
         :placeholder="t('components.table.header.dialog.filter.search')"
@@ -12,16 +131,8 @@
         @clear="onClear"
         @keyup.enter="onEnter"
       />
-      <!--      <el-tooltip content="Add Condition">-->
-      <!--        <span class="icon" @click="onAddCondition">-->
-      <!--          <el-icon name="circle-plus-outline"/>-->
-      <!--        </span>-->
-      <!--      </el-tooltip>-->
     </div>
-    <!--    <el-form>-->
-    <!--      <FilterConditionList :conditions="internalConditions" @change="onConditionsChange"/>-->
-    <!--    </el-form>-->
-    <div v-if="column.allowFilterItems" class="items">
+    <div v-if="column?.allowFilterItems" class="items">
       <template v-if="filteredItems.length > 0">
         <el-checkbox-group
           v-model="internalItems"
@@ -45,159 +156,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue';
-import { getDefaultFilterCondition } from '@/components/filter/FilterCondition.vue';
-import { debounce } from '@/utils/debounce';
-import { useI18n } from 'vue-i18n';
-import { Search } from '@element-plus/icons-vue';
-
-export default defineComponent({
-  name: 'TableHeaderDialogFilter',
-  props: {
-    column: {
-      type: Object as PropType<TableColumn>,
-      required: false,
-    },
-    searchString: {
-      type: String,
-      required: false,
-    },
-    conditions: {
-      type: Array as PropType<FilterConditionData[]>,
-      required: false,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  emits: ['change', 'clear', 'enter'],
-  setup(props, { emit }) {
-    // i18n
-    const { t } = useI18n();
-
-    const internalConditions = ref<FilterConditionData[]>([
-      getDefaultFilterCondition(),
-    ]);
-    const internalSearchString = ref<string>();
-    const internalItems = ref<string[]>([]);
-
-    const filterData = computed<TableHeaderDialogFilterData>(() => {
-      return {
-        searchString: internalSearchString.value,
-        conditions: internalConditions.value,
-        items: internalItems.value,
-      };
-    });
-
-    const filteredItems = computed<SelectOption[]>(() => {
-      const { column } = props as TableHeaderDialogFilterProps;
-
-      const items = column?.filterItems;
-
-      // undefined items
-      if (!items) {
-        // console.log('undefined items');
-        return [];
-      }
-
-      // invalid type of items or empty items
-      if (!Array.isArray(items) || items.length === 0) {
-        // console.log('invalid type of items or empty items');
-        return [];
-      }
-
-      // items as an array of SelectOption
-      // console.log('items as an array of SelectOption');
-      return items.filter(d =>
-        filterData.value.searchString
-          ? d.label?.toLowerCase()?.includes(filterData.value.searchString)
-          : true
-      );
-    });
-
-    const onAddCondition = () => {
-      internalConditions.value.push(getDefaultFilterCondition());
-    };
-
-    const onConditionsChange = (newConditions: FilterConditionData[]) => {
-      internalConditions.value = newConditions;
-      emit('change', filterData.value);
-    };
-
-    const onItemsChange = (newItems: string[]) => {
-      internalItems.value = newItems;
-      emit('change', filterData.value);
-    };
-
-    const search = debounce(
-      () => {
-        if (internalSearchString.value) {
-          internalItems.value = filteredItems.value.map(d => d.value);
-        } else {
-          internalItems.value = [];
-        }
-        emit('change', filterData.value);
-      },
-      { delay: 100 }
-    );
-
-    const onSearch = (value?: string) => {
-      internalSearchString.value = value;
-      search();
-    };
-
-    const onClear = () => {
-      emit('clear');
-    };
-
-    const onEnter = () => {
-      emit('enter');
-    };
-
-    watch(
-      () => {
-        const { searchString } = props as TableHeaderDialogFilterProps;
-        return searchString;
-      },
-      value => {
-        internalSearchString.value = value;
-      }
-    );
-
-    watch(
-      () => {
-        const { conditions } = props as TableHeaderDialogFilterProps;
-        return conditions;
-      },
-      value => {
-        if (value) {
-          internalConditions.value = value;
-          if (internalConditions.value.length === 0) {
-            internalConditions.value.push(getDefaultFilterCondition());
-          }
-        }
-      }
-    );
-
-    return {
-      internalSearchString,
-      internalConditions,
-      internalItems,
-      filteredItems,
-      onAddCondition,
-      onConditionsChange,
-      onItemsChange,
-      onSearch,
-      onClear,
-      onEnter,
-      Search,
-      t,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .table-header-dialog-filter {
   flex: 1;
diff --git a/src/components/table/TableHeaderDialogSort.vue b/src/components/table/TableHeaderDialogSort.vue
index 45206a11c7a6c..ba655fb665396 100644
--- a/src/components/table/TableHeaderDialogSort.vue
+++ b/src/components/table/TableHeaderDialogSort.vue
@@ -1,3 +1,32 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClTableHeaderDialogSort' });
+import { ASCENDING, DESCENDING, UNSORTED } from '@/constants/sort';
+import { translate } from '@/utils';
+
+defineProps<{
+  value?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'change', value?: string): void;
+}>();
+
+// i18n
+const t = translate;
+
+const onChange = (value: SortDirection) => {
+  if (value === UNSORTED) {
+    emit('change', undefined);
+    return;
+  }
+  emit('change', value);
+};
+
+const onClear = () => {
+  emit('change');
+};
+</script>
+
 <template>
   <div class="table-header-dialog-sort">
     <div class="title">
@@ -13,59 +42,17 @@
     </div>
     <el-radio-group :model-value="value" type="primary" @change="onChange">
       <el-radio-button :label="ASCENDING" class="sort-btn">
-        <font-awesome-icon :icon="['fa', 'sort-amount-up']" />
+        <cl-icon :icon="['fa', 'sort-amount-up']" />
         {{ t('components.table.header.dialog.sort.ascending') }}
       </el-radio-button>
       <el-radio-button :label="DESCENDING" class="sort-btn">
-        <font-awesome-icon :icon="['fa', 'sort-amount-down-alt']" />
+        <cl-icon :icon="['fa', 'sort-amount-down-alt']" />
         {{ t('components.table.header.dialog.sort.descending') }}
       </el-radio-button>
     </el-radio-group>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { ASCENDING, DESCENDING, UNSORTED } from '@/constants/sort';
-import { useI18n } from 'vue-i18n';
-
-export default defineComponent({
-  name: 'TableHeaderDialogSort',
-  props: {
-    value: {
-      type: String,
-      required: false,
-    },
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    // i18n
-    const { t } = useI18n();
-
-    const onChange = (value: SortDirection) => {
-      if (value === UNSORTED) {
-        emit('change', undefined);
-        return;
-      }
-      emit('change', value);
-    };
-
-    const onClear = () => {
-      emit('change');
-    };
-
-    return {
-      onChange,
-      onClear,
-      UNSORTED,
-      ASCENDING,
-      DESCENDING,
-      t,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .table-header-dialog-sort {
   .title {
@@ -99,7 +86,9 @@ export default defineComponent({
 }
 </style>
 <style scoped>
-.table-header-dialog-sort:deep(.el-radio-group .el-radio-button .el-radio-button__inner) {
+.table-header-dialog-sort:deep(
+    .el-radio-group .el-radio-button .el-radio-button__inner
+  ) {
   width: 100%;
 }
 </style>
diff --git a/src/components/table/action.ts b/src/components/table/action.ts
index 8d4cd563b61a4..3760557441bd3 100644
--- a/src/components/table/action.ts
+++ b/src/components/table/action.ts
@@ -7,13 +7,10 @@ import { sendEvent } from '@/admin/umeng';
 const t = translate;
 
 const useAction = (
-  props: TableProps,
-  ctx: SetupContext,
+  emit: Function,
   table: Ref,
   actionFunctions?: ListLayoutActionFunctions
 ) => {
-  const { emit } = ctx;
-
   // store context
   const storeContext = inject<ListStoreContext<BaseModel>>('store-context');
   const ns = storeContext?.namespace;
diff --git a/src/components/table/column.ts b/src/components/table/column.ts
index 071fd66f37f80..7839d5073b3e6 100644
--- a/src/components/table/column.ts
+++ b/src/components/table/column.ts
@@ -14,13 +14,12 @@ import { sendEvent } from '@/admin/umeng';
 
 const useColumns = (
   props: TableProps,
-  ctx: SetupContext,
   table: Ref<Table<any> | undefined>,
   wrapper: Ref<Element>
 ) => {
   const { columns } = props;
 
-  const { store } = useStore(props, ctx, table);
+  const { store } = useStore(table);
 
   const columnsTransferVisible = ref<boolean>(false);
 
@@ -123,11 +122,6 @@ const useColumns = (
       store.value?.updateColumns();
     }
     internalSelectedColumnKeys.value = columnKeys;
-
-    // set table width to 100%
-    // wrapper.value.querySelectorAll('.el-table__body').forEach((el: HTMLTableElement) => {
-    //   el.setAttribute('style', 'width: 100%');
-    // });
   };
 
   const onColumnsChange = (value: string[]) => {
diff --git a/src/components/table/data.ts b/src/components/table/data.ts
index a966144dd91f5..c90d3b1131384 100644
--- a/src/components/table/data.ts
+++ b/src/components/table/data.ts
@@ -1,8 +1,7 @@
-import { computed, SetupContext } from 'vue';
+import { computed } from 'vue';
 
-const useData = (props: TableProps, ctx: SetupContext) => {
+const useData = (data: TableData) => {
   const tableData = computed(() => {
-    const { data } = props;
     return data;
   });
 
diff --git a/src/components/table/header.ts b/src/components/table/header.ts
index 857a6e42cdfed..6049e571ca51c 100644
--- a/src/components/table/header.ts
+++ b/src/components/table/header.ts
@@ -1,12 +1,8 @@
-import { SetupContext } from 'vue';
-
-const useHeader = (props: TableProps, ctx: SetupContext) => {
-  const { emit } = ctx;
-
+const useHeader = (emit: Function) => {
   const onHeaderChange = (
     column: TableColumn,
     sort: SortData,
-    filter: FilterConditionData[]
+    filter?: FilterConditionData[]
   ) => {
     emit('header-change', column, sort, filter);
   };
diff --git a/src/components/table/pagination.ts b/src/components/table/pagination.ts
index fc7bd0c3ec111..04922fb7f842e 100644
--- a/src/components/table/pagination.ts
+++ b/src/components/table/pagination.ts
@@ -1,9 +1,6 @@
-import { SetupContext } from 'vue';
 import { sendEvent } from '@/admin/umeng';
 
-const usePagination = (props: TableProps, ctx: SetupContext) => {
-  const { emit } = ctx;
-
+const usePagination = (props: TableProps, emit: Function) => {
   const onCurrentChange = (page: number) => {
     const { pageSize } = props;
     emit('pagination-change', {
diff --git a/src/components/table/store.ts b/src/components/table/store.ts
index da6e761c623e2..6928fc573bc67 100644
--- a/src/components/table/store.ts
+++ b/src/components/table/store.ts
@@ -1,11 +1,7 @@
 import { computed, Ref, SetupContext } from 'vue';
 import { Table } from 'element-plus/lib/components/table/src/table/defaults';
 
-const useStore = (
-  props: TableProps,
-  ctx: SetupContext,
-  table: Ref<Table<any> | undefined>
-) => {
+const useStore = (table: Ref<Table<any> | undefined>) => {
   const setColumns = (states: TableStoreStates, columns: TableColumnCtx[]) => {
     states._columns.value = columns;
   };
diff --git a/src/i18n/lang/en/components/git.ts b/src/i18n/lang/en/components/git.ts
index 291bc54e2be20..0a16d34d57626 100644
--- a/src/i18n/lang/en/components/git.ts
+++ b/src/i18n/lang/en/components/git.ts
@@ -10,6 +10,7 @@ const git: LComponentsGit = {
     status: 'Status',
     error: 'Error',
     autoPull: 'Auto Pull',
+    urlInvalid: 'Invalid URL',
   },
   common: {
     currentBranch: 'Current Branch',
diff --git a/src/i18n/lang/zh/components/git.ts b/src/i18n/lang/zh/components/git.ts
index 6d90172a883bb..e6b5ccaa640a5 100644
--- a/src/i18n/lang/zh/components/git.ts
+++ b/src/i18n/lang/zh/components/git.ts
@@ -10,6 +10,7 @@ const git: LComponentsGit = {
     status: '状态',
     error: '错误',
     autoPull: '自动拉取',
+    urlInvalid: '无效 URL',
   },
   common: {
     currentBranch: '当前分支',
diff --git a/src/interfaces/components/table/Table.d.ts b/src/interfaces/components/table/Table.d.ts
index 8532353264be1..ec9fff209d313 100644
--- a/src/interfaces/components/table/Table.d.ts
+++ b/src/interfaces/components/table/Table.d.ts
@@ -29,7 +29,7 @@ export declare global {
     selectable: boolean;
     visibleButtons: BuiltInTableActionButtonName[];
     hideFooter: boolean;
-    selectableFunction: TableSelectableFunction;
+    selectableFunction?: TableSelectableFunction;
     paginationLayout: string;
     loading: boolean;
     paginationPosition: TablePaginationPosition;
@@ -136,6 +136,7 @@ export declare global {
   }
 
   interface TableColumnButton {
+    key: 'filter' | 'sort';
     type?: string;
     size?: string;
     icon?: Icon | TableValueFunction;
diff --git a/src/interfaces/i18n/components/git.d.ts b/src/interfaces/i18n/components/git.d.ts
index 03ade10daabec..18411a707ef59 100644
--- a/src/interfaces/i18n/components/git.d.ts
+++ b/src/interfaces/i18n/components/git.d.ts
@@ -10,6 +10,7 @@ interface LComponentsGit {
     status: string;
     error: string;
     autoPull: string;
+    urlInvalid: string;
   };
   common: {
     currentBranch: string;
diff --git a/src/interfaces/store/modules/git.d.ts b/src/interfaces/store/modules/git.d.ts
index 7192af70fdb71..0b300783c8d21 100644
--- a/src/interfaces/store/modules/git.d.ts
+++ b/src/interfaces/store/modules/git.d.ts
@@ -11,8 +11,10 @@ interface GitStoreState extends BaseStoreState<Git>, BaseFileStoreState {
   gitDataLoading: boolean;
   gitChangeSelection: TableData<GitChange>;
   gitRemoteRefs: GitRef[];
+  currentBranch?: GitRef;
   gitBranches: GitRef[];
   gitRemoteBranches: GitRef[];
+  gitLogs: GitLog[];
   gitTags: GitRef[];
 }
 
@@ -33,10 +35,14 @@ interface GitStoreMutations
   resetGitChangeSelection: StoreMutation<GitStoreState>;
   setGitRemoteRefs: StoreMutation<GitStoreState, GitRef[]>;
   resetGitRemoteRefs: StoreMutation<GitStoreState>;
+  setCurrentBranch: StoreMutation<GitStoreState, GitRef>;
+  resetCurrentBranch: StoreMutation<GitStoreState>;
   setGitBranches: StoreMutation<GitStoreState, GitRef[]>;
   resetGitBranches: StoreMutation<GitStoreState>;
   setGitRemoteBranches: StoreMutation<GitStoreState, GitRef[]>;
   resetGitRemoteBranches: StoreMutation<GitStoreState>;
+  setGitLogs: StoreMutation<GitStoreState, GitLog[]>;
+  resetGitLogs: StoreMutation<GitStoreState>;
   setGitTags: StoreMutation<GitStoreState, GitRef[]>;
   resetGitTags: StoreMutation<GitStoreState>;
 }
@@ -47,10 +53,16 @@ interface GitStoreActions
   getGit: StoreAction<GitStoreState, { id: string }>;
   cloneGit: StoreAction<GitStoreState, { id: string }>;
   getGitRemoteRefs: StoreAction<GitStoreState, { id: string }>;
-  getGitBranches: StoreAction<GitStoreState, { id: string }>;
-  getGitRemoteBranches: StoreAction<GitStoreState, { id: string }>;
+  getCurrentBranch: StoreAction<GitStoreState, { id: string }>;
+  getBranches: StoreAction<GitStoreState, { id: string }>;
+  getRemoteBranches: StoreAction<GitStoreState, { id: string }>;
+  checkoutBranch: StoreAction<GitStoreState, { id: string; branch: string }>;
+  checkoutRemoteBranch: StoreAction<
+    GitStoreState,
+    { id: string; branch: string }
+  >;
+  getLogs: StoreAction<GitStoreState, { id: string }>;
   getGitTags: StoreAction<GitStoreState, { id: string }>;
-  gitCheckoutBranch: StoreAction<GitStoreState, { id: string; branch: 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/list/ListLayout.vue b/src/layouts/content/list/ListLayout.vue
index 548cdf2ca1dd9..33f78299c6a2a 100644
--- a/src/layouts/content/list/ListLayout.vue
+++ b/src/layouts/content/list/ListLayout.vue
@@ -1,3 +1,110 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClListLayout' });
+import { computed, onMounted, provide, ref, watch } from 'vue';
+import { emptyArrayFunc, emptyObjectFunc } from '@/utils/func';
+import { getMd5 } from '@/utils/hash';
+import {
+  ACTION_ADD,
+  ACTION_FILTER_SEARCH,
+  ACTION_FILTER_SELECT,
+} from '@/constants/action';
+
+const props = withDefaults(
+  defineProps<{
+    navActions: ListActionGroup[];
+    tableColumns: TableColumns;
+    tableData: TableData;
+    tableTotal: number;
+    tablePagination: TablePagination;
+    tableListFilter: FilterConditionData[];
+    tableListSort: SortData[];
+    tableActionsPrefix: ListActionButton[];
+    tableActionsSuffix: ListActionButton[];
+    tableFilter: any;
+    actionFunctions?: ListLayoutActionFunctions;
+    noActions: boolean;
+    selectableFunction: TableSelectableFunction;
+    visibleButtons: BuiltInTableActionButtonName[];
+    tablePaginationLayout?: string;
+    tableLoading?: boolean;
+    tablePaginationPosition?: TablePaginationPosition;
+    embedded?: boolean;
+  }>(),
+  {
+    navActions: emptyArrayFunc,
+    tableColumns: emptyArrayFunc,
+    tableData: emptyArrayFunc,
+    tableTotal: 0,
+    tablePagination: () => ({
+      page: 1,
+      size: 10,
+    }),
+    tableListFilter: emptyArrayFunc,
+    tableListSort: emptyArrayFunc,
+    tableActionsPrefix: emptyArrayFunc,
+    tableActionsSuffix: emptyArrayFunc,
+    tableFilter: emptyObjectFunc,
+    noActions: false,
+    selectableFunction: () => true,
+    visibleButtons: emptyArrayFunc,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'select', value: TableData): void;
+  (e: 'edit', value: TableData): void;
+  (e: 'delete', value: TableData): void;
+}>();
+
+const tableRef = ref();
+
+const computedTableRef = computed(() => tableRef.value);
+
+const onSelect = (value: TableData) => {
+  emit('select', value);
+};
+
+const onEdit = (value: TableData) => {
+  emit('edit', value);
+};
+
+const onDelete = (value: TableData) => {
+  emit('delete', value);
+};
+
+const onPaginationChange = (value: TablePagination) => {
+  props.actionFunctions?.setPagination(value);
+};
+
+if (props.actionFunctions) {
+  // get list when table pagination changes
+  watch(() => props.tablePagination, props.actionFunctions?.getList);
+
+  // provide as context
+  provide<ListLayoutActionFunctions>('action-functions', props.actionFunctions);
+
+  // get list before mount
+  onMounted(() => {
+    props.actionFunctions?.getList();
+  });
+}
+
+const getNavActionButtonDisabled = (btn: ListActionButton) => {
+  if (typeof btn.disabled === 'boolean') {
+    return btn.disabled;
+  } else if (typeof btn.disabled === 'function') {
+    return btn.disabled(computedTableRef.value);
+  } else {
+    return false;
+  }
+};
+
+const tableColumnsHash = computed<string>(() => {
+  const { tableColumns } = props;
+  return getMd5(JSON.stringify(tableColumns));
+});
+</script>
+
 <template>
   <div class="list-layout">
     <div class="content">
@@ -13,32 +120,36 @@
           >
             <template v-if="item.action === ACTION_FILTER_SEARCH">
               <cl-filter-input
-                :placeholder="item.placeholder"
-                @change="value => item?.onChange(value)"
+                :placeholder="(item as ListActionFilter).placeholder"
+                @change="
+                  (value: any) => (item as ListActionFilter).onChange?.(value)
+                "
               />
             </template>
             <template v-else-if="item.action === ACTION_FILTER_SELECT">
               <cl-filter-select
-                :label="item.label"
-                :placeholder="item.placeholder"
-                :options="item.options"
-                :options-remote="item.optionsRemote"
-                @change="value => item?.onChange(value)"
+                :label="(item as ListActionFilter).label"
+                :placeholder="(item as ListActionFilter).placeholder"
+                :options="(item as ListActionFilter).options"
+                :options-remote="(item as ListActionFilter).optionsRemote"
+                @change="
+                  (value: any) => (item as ListActionFilter).onChange?.(value)
+                "
               />
             </template>
             <template v-else>
               <cl-nav-action-button
                 v-auth="ACTION_ADD"
-                :id="item.id"
-                :class-name="item.className"
-                :button-type="item.buttonType"
-                :disabled="item.disabled"
-                :icon="item.icon"
-                :label="item.label"
-                :size="item.size"
-                :tooltip="item.tooltip"
-                :type="item.type"
-                @click="item.onClick"
+                :id="(item as ListActionButton).id"
+                :class-name="(item as ListActionButton).className"
+                :button-type="(item as ListActionButton).buttonType"
+                :disabled="(item as ListActionButton).disabled"
+                :icon="(item as ListActionButton).icon"
+                :label="(item as ListActionButton).label"
+                :size="(item as ListActionButton).size"
+                :tooltip="(item as ListActionButton).tooltip"
+                :type="(item as ListActionButton).type"
+                @click="(item as ListActionButton).onClick"
               />
             </template>
           </cl-nav-action-item>
@@ -66,7 +177,7 @@
         @delete="onDelete"
         @edit="onEdit"
         @pagination-change="onPaginationChange"
-        @header-change="onHeaderChange"
+        @header-change="actionFunctions?.onHeaderChange"
       >
         <template #actions-prefix>
           <cl-nav-action-button
@@ -104,183 +215,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  PropType,
-  provide,
-  ref,
-  SetupContext,
-  watch,
-} from 'vue';
-import { emptyArrayFunc, emptyObjectFunc } from '@/utils/func';
-import { getMd5 } from '@/utils/hash';
-import {
-  ACTION_ADD,
-  ACTION_FILTER_SEARCH,
-  ACTION_FILTER_SELECT,
-} from '@/constants/action';
-
-export default defineComponent({
-  name: 'ListLayout',
-  props: {
-    navActions: {
-      type: Array as PropType<ListActionGroup[]>,
-      default: () => {
-        return [];
-      },
-    },
-    tableColumns: {
-      type: Array as PropType<TableColumns>,
-      default: () => {
-        return [];
-      },
-    },
-    tableData: {
-      type: Array as PropType<TableData>,
-      default: () => {
-        return [];
-      },
-    },
-    tableTotal: {
-      type: Number,
-      default: 0,
-    },
-    tablePagination: {
-      type: Object as PropType<TablePagination>,
-      default: () => {
-        return {
-          page: 1,
-          size: 10,
-        };
-      },
-    },
-    tableListFilter: {
-      type: Array as PropType<FilterConditionData[]>,
-      default: emptyArrayFunc,
-    },
-    tableListSort: {
-      type: Array as PropType<SortData[]>,
-      default: emptyArrayFunc,
-    },
-    tableActionsPrefix: {
-      type: Array as PropType<ListActionButton[]>,
-      default: () => {
-        return [];
-      },
-    },
-    tableActionsSuffix: {
-      type: Array as PropType<ListActionButton[]>,
-      default: () => {
-        return [];
-      },
-    },
-    tableFilter: {},
-    actionFunctions: {
-      type: Object as PropType<ListLayoutActionFunctions>,
-      default: emptyObjectFunc,
-    },
-    noActions: {
-      type: Boolean,
-      default: false,
-    },
-    selectableFunction: {
-      type: Function as PropType<TableSelectableFunction>,
-      default: () => true,
-    },
-    visibleButtons: {
-      type: Array as PropType<BuiltInTableActionButtonName[]>,
-      required: false,
-      default: () => {
-        return [];
-      },
-    },
-    tablePaginationLayout: {
-      type: String,
-      required: false,
-    },
-    tableLoading: {
-      type: Boolean,
-      required: false,
-    },
-    tablePaginationPosition: {
-      type: String as PropType<TablePaginationPosition>,
-      required: false,
-    },
-    embedded: {
-      type: Boolean,
-      required: false,
-    },
-  },
-  emits: ['select', 'edit', 'delete'],
-  setup(props: ListLayoutProps, { emit }: SetupContext) {
-    const tableRef = ref();
-
-    const computedTableRef = computed(() => tableRef.value);
-
-    const onSelect = (value: TableData) => {
-      emit('select', value);
-    };
-
-    const onEdit = (value: TableData) => {
-      emit('edit', value);
-    };
-
-    const onDelete = (value: TableData) => {
-      emit('delete', value);
-    };
-
-    const onPaginationChange = (value: TablePagination) => {
-      props.actionFunctions?.setPagination(value);
-    };
-
-    // get list when table pagination changes
-    watch(() => props.tablePagination, props.actionFunctions?.getList);
-
-    // get list before mount
-    onMounted(() => {
-      props.actionFunctions?.getList();
-    });
-
-    provide<ListLayoutActionFunctions>(
-      'action-functions',
-      props.actionFunctions
-    );
-
-    const getNavActionButtonDisabled = (btn: ListActionButton) => {
-      if (typeof btn.disabled === 'boolean') {
-        return btn.disabled;
-      } else if (typeof btn.disabled === 'function') {
-        return btn.disabled(computedTableRef.value);
-      } else {
-        return false;
-      }
-    };
-
-    const tableColumnsHash = computed<string>(() => {
-      const { tableColumns } = props;
-      return getMd5(JSON.stringify(tableColumns));
-    });
-
-    return {
-      tableRef,
-      tableColumnsHash,
-      onSelect,
-      onPaginationChange,
-      onHeaderChange: props.actionFunctions?.onHeaderChange,
-      onEdit,
-      onDelete,
-      getNavActionButtonDisabled,
-      ACTION_ADD,
-      ACTION_FILTER_SEARCH,
-      ACTION_FILTER_SELECT,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .list-layout {
   .nav-actions {
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/store/modules/git.ts b/src/store/modules/git.ts
index 775420891718a..f3570a2778798 100644
--- a/src/store/modules/git.ts
+++ b/src/store/modules/git.ts
@@ -44,8 +44,10 @@ const state = {
   gitDataLoading: false,
   gitChangeSelection: [],
   gitRemoteRefs: [],
+  currentBranch: undefined,
   gitBranches: [],
   gitRemoteBranches: [],
+  gitLogs: [],
   gitTags: [],
 } as GitStoreState;
 
@@ -94,6 +96,12 @@ const mutations = {
   resetGitRemoteRefs: (state: GitStoreState) => {
     state.gitRemoteRefs = [];
   },
+  setCurrentBranch: (state: GitStoreState, branch: GitRef) => {
+    state.currentBranch = branch;
+  },
+  resetCurrentBranch: (state: GitStoreState) => {
+    state.currentBranch = undefined;
+  },
   setGitBranches: (state: GitStoreState, refs: GitRef[]) => {
     state.gitBranches = refs;
   },
@@ -106,6 +114,12 @@ const mutations = {
   resetGitRemoteBranches: (state: GitStoreState) => {
     state.gitRemoteBranches = [];
   },
+  setGitLogs: (state: GitStoreState, logs: GitLog[]) => {
+    state.gitLogs = logs;
+  },
+  resetGitLogs: (state: GitStoreState) => {
+    state.gitLogs = [];
+  },
   setGitTags: (state: GitStoreState, refs: GitRef[]) => {
     state.gitTags = refs;
   },
@@ -146,31 +160,31 @@ const actions = {
     commit('setGitRemoteRefs', res?.data || []);
     return res;
   },
-  getGitBranches: async (
+  getCurrentBranch: async (
     { commit }: StoreActionContext<GitStoreState>,
     { id }: { id: string }
   ) => {
-    const res = await get(`${endpoint}/${id}/branches`);
-    commit('setGitBranches', res?.data || []);
+    const res = await get(`${endpoint}/${id}/branches/current`);
+    commit('setCurrentBranch', res?.data);
     return res;
   },
-  getGitRemoteBranches: async (
+  getBranches: async (
     { commit }: StoreActionContext<GitStoreState>,
     { id }: { id: string }
   ) => {
-    const res = await get(`${endpoint}/${id}/remote/branches`);
-    commit('setGitRemoteBranches', res?.data || []);
+    const res = await get(`${endpoint}/${id}/branches`);
+    commit('setGitBranches', res?.data || []);
     return res;
   },
-  getGitTags: async (
+  getRemoteBranches: async (
     { commit }: StoreActionContext<GitStoreState>,
     { id }: { id: string }
   ) => {
-    const res = await get(`${endpoint}/${id}/git/tags`);
-    commit('setGitTags', res?.data || []);
+    const res = await get(`${endpoint}/${id}/branches/remote`);
+    commit('setGitRemoteBranches', res?.data || []);
     return res;
   },
-  gitCheckoutBranch: async (
+  checkoutBranch: async (
     _: StoreActionContext<GitStoreState>,
     { id, branch }: { id: string; branch: string }
   ) => {
@@ -178,6 +192,30 @@ const actions = {
       branch,
     });
   },
+  checkoutRemoteBranch: async (
+    _: StoreActionContext<GitStoreState>,
+    { id, branch }: { id: string; branch: string }
+  ) => {
+    return await post(`${endpoint}/${id}/branches/remote/checkout`, {
+      branch,
+    });
+  },
+  getLogs: async (
+    { commit }: StoreActionContext<GitStoreState>,
+    { id }: { id: string }
+  ) => {
+    const res = await get(`${endpoint}/${id}/logs`);
+    commit('setGitLogs', res?.data || []);
+    return res;
+  },
+  getGitTags: async (
+    { commit }: StoreActionContext<GitStoreState>,
+    { id }: { id: string }
+  ) => {
+    const res = await get(`${endpoint}/${id}/git/tags`);
+    commit('setGitTags', res?.data || []);
+    return res;
+  },
   gitCheckoutTag: async (
     _: StoreActionContext<GitStoreState>,
     { id, tag }: { id: string; tag: string }
diff --git a/src/views/git/detail/GitDetail.vue b/src/views/git/detail/GitDetail.vue
index 370dc3037f794..5bf896e627d32 100644
--- a/src/views/git/detail/GitDetail.vue
+++ b/src/views/git/detail/GitDetail.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetail' });
-import { watch, onBeforeUnmount } from 'vue';
+import { watch, onBeforeUnmount, onBeforeMount } from 'vue';
 import { useStore } from 'vuex';
 import useGitDetail from '@/views/git/detail/useGitDetail';
 import useGit from '@/components/git/git';
 import {
   GIT_STATUS_ERROR,
   GIT_STATUS_READY,
+  TAB_NAME_LOGS,
   TAB_NAME_OVERVIEW,
 } from '@/constants';
+import { debounce } from '@/utils';
 
 const { activeId, activeTabName } = useGitDetail();
 
@@ -19,30 +21,52 @@ const { git: state } = store.state;
 // update tab disabled keys
 const { form } = useGit(store);
 let handle = 0;
-watch(form, () => {
-  const { status } = form.value as Git;
-  if (status === GIT_STATUS_READY) {
-    store.commit(`${ns}/resetDisabledTabKeys`);
+watch(
+  form,
+  debounce(() => {
     clearInterval(handle);
-  } else {
-    store.commit(
-      `${ns}/setDisabledTabKeys`,
-      state.tabs.map(tab => tab.id).filter(id => id !== TAB_NAME_OVERVIEW)
-    );
-    if (status === GIT_STATUS_ERROR) {
-      clearInterval(handle);
+    const { status } = form.value as Git;
+    if (status === GIT_STATUS_READY) {
+      store.commit(`${ns}/resetDisabledTabKeys`);
     } else {
+      store.commit(
+        `${ns}/setDisabledTabKeys`,
+        state.tabs.map(tab => tab.id).filter(id => id !== TAB_NAME_OVERVIEW)
+      );
+      if (status === GIT_STATUS_ERROR) {
+        return;
+      }
       handle = setInterval(
         () => store.dispatch(`${ns}/getById`, activeId.value),
         5000
       );
     }
+  })
+);
+
+// get local and remote branches
+const getBranches = debounce(() => {
+  reset();
+  if (form.value?.status !== GIT_STATUS_READY) return;
+  store.dispatch(`${ns}/getCurrentBranch`, { id: activeId.value });
+  store.dispatch(`${ns}/getBranches`, { id: activeId.value });
+  store.dispatch(`${ns}/getRemoteBranches`, { id: activeId.value });
+  if (activeTabName.value === TAB_NAME_LOGS) {
+    store.dispatch(`${ns}/getFiles`, { id: activeId.value });
   }
 });
+watch(form, getBranches);
+onBeforeMount(getBranches);
 
-onBeforeUnmount(() => store.commit(`${ns}/resetGitData`));
-onBeforeUnmount(() => store.commit(`${ns}/resetGitBranches`));
-onBeforeUnmount(() => clearInterval(handle));
+// reset
+const reset = () => {
+  store.commit(`${ns}/resetCurrentBranch`);
+  store.commit(`${ns}/resetGitBranches`);
+  store.commit(`${ns}/resetGitRemoteBranches`);
+  clearInterval(handle);
+};
+onBeforeUnmount(reset);
+watch(activeId, reset);
 </script>
 
 <template>
diff --git a/src/views/git/detail/actions/GitDetailActionsCommon.vue b/src/views/git/detail/actions/GitDetailActionsCommon.vue
index cd23cba7d9f62..a616f6aabd323 100644
--- a/src/views/git/detail/actions/GitDetailActionsCommon.vue
+++ b/src/views/git/detail/actions/GitDetailActionsCommon.vue
@@ -24,11 +24,9 @@ const isDisabled = computed<boolean>(
     !gitForm.value.auth_type
 );
 
-const gitCurrentBranchRef = ref<typeof ElSelect>();
-
 const {
   activeId,
-  gitCurrentBranch,
+  currentBranch,
   gitDataLoading,
   gitLocalBranches,
   gitLocalBranchesDict,
@@ -38,13 +36,11 @@ const {
   onClickCommit,
 } = useGitDetail();
 
-const isBranchClicked = ref<boolean>(false);
-
 const branchSelectLoading = ref(false);
-const onBranchChange = async (branch: string) => {
+const onLocalBranchChange = async (branch: string) => {
   branchSelectLoading.value = true;
   try {
-    await store.dispatch(`${ns}/gitCheckoutBranch`, {
+    await store.dispatch(`${ns}/checkoutBranch`, {
       id: activeId.value,
       branch,
     });
@@ -53,42 +49,23 @@ const onBranchChange = async (branch: string) => {
     branchSelectLoading.value = false;
   }
 };
-
-const currentBranch = ref<string>();
-watch(gitCurrentBranch, () => {
-  if (!gitCurrentBranch.value) return;
-  currentBranch.value = gitCurrentBranch.value || '';
-});
-
-const getRemoteBranchFromLocalBranch = (localBranch: GitRef) => {
-  if (!localBranch.hash) return;
-  return gitRemoteBranchesDict.value[localBranch.hash]?.name;
-};
-
-const onClickNewBranch = () => {
-  gitCurrentBranchRef.value?.blur();
-  store.commit(`${ns}/showDialog`, 'createBranch');
-};
-
-const onBranchClick = () => {
-  isBranchClicked.value = true;
-};
-
-const onBranchCancel = () => {
-  isBranchClicked.value = false;
-};
-
-const onBranchCheckout = () => {
-  isBranchClicked.value = false;
+const onRemoteBranchChange = async (branch: string) => {
+  branchSelectLoading.value = true;
+  try {
+    await store.dispatch(`${ns}/gitCheckoutRemoteBranch`, {
+      id: activeId.value,
+      branch,
+    });
+    await store.dispatch(`${ns}/getGit`, { id: activeId.value });
+  } finally {
+    branchSelectLoading.value = false;
+  }
 };
 
-const onAutoPullChange = async () => {
-  await store.dispatch(`${ns}/updateById`, {
-    id: gitForm.value._id,
-    form: gitForm.value,
-  });
-  ElMessage.success(t('common.message.success.save'));
-};
+const internalCurrentBranch = ref<string>();
+watch(currentBranch, () => {
+  internalCurrentBranch.value = currentBranch.value?.name;
+});
 </script>
 
 <template>
@@ -103,15 +80,17 @@ const onAutoPullChange = async () => {
         :id="gitForm._id"
         :status="gitForm.status"
         :error="gitForm.error"
+        @retry="() => store.dispatch(`${ns}/getById`, activeId)"
       />
       <div class="branch">
         <cl-git-branch-select
-          v-model="currentBranch"
+          v-model="internalCurrentBranch"
           :local-branches="gitLocalBranches"
           :remote-branches="gitRemoteBranches"
           :disabled="isDisabled"
           :loading="branchSelectLoading || gitDataLoading"
-          @change="onBranchChange"
+          @select-local="onLocalBranchChange"
+          @select-remote="onRemoteBranchChange"
         />
       </div>
       <cl-fa-icon-button
@@ -128,12 +107,6 @@ const onAutoPullChange = async () => {
         :disabled="isDisabled"
         @click="onClickCommit"
       />
-      <!--      <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>
diff --git a/src/views/git/detail/tabs/GitDetailTabBranches.vue b/src/views/git/detail/tabs/GitDetailTabBranches.vue
index 6586356642fe9..c453fcf06f6ea 100644
--- a/src/views/git/detail/tabs/GitDetailTabBranches.vue
+++ b/src/views/git/detail/tabs/GitDetailTabBranches.vue
@@ -81,14 +81,6 @@ const tableColumns = computed<TableColumns<GitLog>>(() => {
     },
   ] as TableColumns<GitLog>;
 });
-
-watch(
-  () => activeId.value,
-  () => store.dispatch(`${ns}/getGitBranches`, { id: activeId.value })
-);
-onBeforeMount(() =>
-  store.dispatch(`${ns}/getGitBranches`, { id: activeId.value })
-);
 </script>
 
 <template>
diff --git a/src/views/git/detail/tabs/GitDetailTabChanges.vue b/src/views/git/detail/tabs/GitDetailTabChanges.vue
index e823d9cde365a..2ddd30556a987 100644
--- a/src/views/git/detail/tabs/GitDetailTabChanges.vue
+++ b/src/views/git/detail/tabs/GitDetailTabChanges.vue
@@ -115,7 +115,6 @@ watch(
       :data="tableData"
       :columns="tableColumns"
       height="100%"
-      selectable
       hide-footer
       @selection-change="onSelectionChange"
     />
diff --git a/src/views/git/detail/tabs/GitDetailTabLogs.vue b/src/views/git/detail/tabs/GitDetailTabLogs.vue
index 6ad33537d667a..16344901a1c83 100644
--- a/src/views/git/detail/tabs/GitDetailTabLogs.vue
+++ b/src/views/git/detail/tabs/GitDetailTabLogs.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { debounce } from '@/utils';
+
 defineOptions({ name: 'ClGitDetailTabLogs' });
 import { computed, h, onBeforeMount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
@@ -8,6 +10,7 @@ import { GIT_REF_TYPE_BRANCH } from '@/constants/git';
 import { TABLE_ACTION_CUSTOMIZE_COLUMNS } from '@/constants/table';
 import { useI18n } from 'vue-i18n';
 import useGitDetail from '@/views/git/detail/useGitDetail';
+import useGit from '@/components/git/git';
 // i18n
 const { t } = useI18n();
 
@@ -16,6 +19,10 @@ const ns = 'git';
 const store = useStore();
 const { git: state } = store.state as RootStoreState;
 
+const { activeId } = useGitDetail();
+
+const { form } = useGit(store);
+
 // table pagination
 const tablePagination = ref<TablePagination>({
   page: 1,
@@ -27,9 +34,7 @@ const onPaginationChange = (pagination: TablePagination) => {
 };
 
 // all table data
-const allTableData = computed<TableData<GitRef>>(
-  () => state.gitData?.logs || []
-);
+const allTableData = computed<TableData<GitRef>>(() => state.gitLogs || []);
 
 // table data
 const tableData = computed<TableData<GitLog>>(() => {
@@ -58,7 +63,7 @@ const tableColumns = computed<TableColumns<GitLog>>(() => {
             effect: r.type === GIT_REF_TYPE_BRANCH ? 'dark' : 'light',
             type: r.type === GIT_REF_TYPE_BRANCH ? 'primary' : 'success',
             tooltip: `${r.type}: ${r.name}`,
-          } as TagProps)
+          })
         );
       },
     },
@@ -93,6 +98,12 @@ const tableColumns = computed<TableColumns<GitLog>>(() => {
     },
   ] as TableColumns<GitLog>;
 });
+
+const getLogs = debounce(() => {
+  store.dispatch(`${ns}/getLogs`, { id: activeId.value });
+});
+watch(form, getLogs);
+onBeforeMount(getLogs);
 </script>
 
 <template>
diff --git a/src/views/git/detail/useGitDetail.ts b/src/views/git/detail/useGitDetail.ts
index 0e889b3213326..db19ff8e163bc 100644
--- a/src/views/git/detail/useGitDetail.ts
+++ b/src/views/git/detail/useGitDetail.ts
@@ -140,9 +140,7 @@ const useGitDetail = () => {
     },
   };
 
-  const gitCurrentBranch = computed<string | undefined>(
-    () => state.gitData?.current_branch
-  );
+  const currentBranch = computed<GitRef | undefined>(() => state.currentBranch);
 
   const gitDataLoading = computed(() => state.gitDataLoading);
 
@@ -166,16 +164,6 @@ const useGitDetail = () => {
     return dict;
   });
 
-  onBeforeMount(() => store.dispatch(`node/getAllList`));
-
-  // get git data
-  watch(id, () => store.dispatch(`${ns}/getGit`, { id: id.value }));
-  onBeforeMount(() => store.dispatch(`${ns}/getGit`, { id: id.value }));
-  onBeforeMount(() => store.dispatch(`${ns}/getGitBranches`, { id: id.value }));
-  onBeforeMount(() =>
-    store.dispatch(`${ns}/getGitRemoteBranches`, { id: id.value })
-  );
-
   return {
     ...useDetail('git'),
     gitCheckoutFormRef,
@@ -183,7 +171,7 @@ const useGitDetail = () => {
     gitDialogVisible,
     gitLoading,
     ...gitActions,
-    gitCurrentBranch,
+    currentBranch,
     gitDataLoading,
     gitLocalBranches,
     gitLocalBranchesDict,
diff --git a/src/views/git/list/GitList.vue b/src/views/git/list/GitList.vue
index 25b751ef8e65d..b5c84d9de0538 100644
--- a/src/views/git/list/GitList.vue
+++ b/src/views/git/list/GitList.vue
@@ -14,7 +14,7 @@ const {
 
 <template>
   <cl-list-layout
-    class="node-list"
+    class="git-list"
     :action-functions="actionFunctions"
     :nav-actions="navActions"
     :table-pagination="tablePagination"
diff --git a/src/views/git/list/useGitList.ts b/src/views/git/list/useGitList.ts
index 8b42fc38ca0b1..c3a1d60a6e51d 100644
--- a/src/views/git/list/useGitList.ts
+++ b/src/views/git/list/useGitList.ts
@@ -8,7 +8,6 @@ import {
   ACTION_FILTER_SEARCH,
   ACTION_VIEW,
   FILTER_OP_CONTAINS,
-  GIT_STATUS_ERROR,
   TABLE_COLUMN_NAME_ACTIONS,
 } from '@/constants';
 import { sendEvent } from '@/admin/umeng';
@@ -20,7 +19,6 @@ import {
 } from '@/utils';
 import NavLink from '@/components/nav/NavLink.vue';
 import GitStatus from '@/components/git/GitStatus.vue';
-import Tag from '@/components/tag/Tag.vue';
 
 const useGitList = () => {
   // router
@@ -81,67 +79,75 @@ const useGitList = () => {
   ]);
 
   // table columns
-  const tableColumns = computed<TableColumns<Git>>(() => [
-    {
-      className: 'name',
-      key: 'name',
-      label: t('views.gits.table.columns.name'),
-      icon: ['fa', 'font'],
-      width: '240',
-      value: (row: Git) =>
-        h(NavLink, {
-          path: `/gits/${row._id}`,
-          label: row.name,
-        }),
-      hasSort: true,
-      hasFilter: true,
-      allowFilterSearch: true,
-    },
-    {
-      className: 'status',
-      key: 'status',
-      label: t('views.gits.table.columns.status'),
-      icon: ['fa', 'heartbeat'],
-      width: '150',
-      value: (row: Git) => {
-        const { _id, status, error } = row;
-        return h(GitStatus, { id: _id, status, error });
-      },
-      hasSort: true,
-      hasFilter: true,
-      allowFilterSearch: true,
-    },
-    {
-      key: TABLE_COLUMN_NAME_ACTIONS,
-      label: t('components.table.columns.actions'),
-      fixed: 'right',
-      width: '200',
-      buttons: [
+  const tableColumns = computed<TableColumns<Git>>(
+    () =>
+      [
         {
-          className: 'view-btn',
-          type: 'primary',
-          icon: ['fa', 'search'],
-          tooltip: t('common.actions.view'),
-          onClick: (row: Git) => {
-            router.push(`/gits/${row._id}`);
-
-            sendEvent('click_git_list_actions_view');
+          className: 'name',
+          key: 'name',
+          label: t('views.gits.table.columns.name'),
+          icon: ['fa', 'font'],
+          width: '240',
+          value: (row: Git) =>
+            h(NavLink, {
+              path: `/gits/${row._id}`,
+              label: row.name,
+            }),
+          hasSort: true,
+          hasFilter: true,
+          allowFilterSearch: true,
+        },
+        {
+          className: 'status',
+          key: 'status',
+          label: t('views.gits.table.columns.status'),
+          icon: ['fa', 'heartbeat'],
+          width: '150',
+          value: (row: Git) => {
+            const { _id, status, error } = row;
+            return h(GitStatus, {
+              id: _id,
+              status,
+              error,
+              onRetry: () => store.dispatch(`${ns}/getList`),
+            });
           },
-          action: ACTION_VIEW,
+          hasSort: true,
+          hasFilter: true,
+          allowFilterSearch: true,
         },
         {
-          className: 'delete-btn',
-          type: 'danger',
-          size: 'small',
-          icon: ['fa', 'trash-alt'],
-          tooltip: t('common.actions.delete'),
-          onClick: deleteByIdConfirm,
-          action: ACTION_DELETE,
+          key: TABLE_COLUMN_NAME_ACTIONS,
+          label: t('components.table.columns.actions'),
+          fixed: 'right',
+          width: '200',
+          buttons: [
+            {
+              className: 'view-btn',
+              type: 'primary',
+              icon: ['fa', 'search'],
+              tooltip: t('common.actions.view'),
+              onClick: (row: Git) => {
+                router.push(`/gits/${row._id}`);
+
+                sendEvent('click_git_list_actions_view');
+              },
+              action: ACTION_VIEW,
+            },
+            {
+              className: 'delete-btn',
+              type: 'danger',
+              size: 'small',
+              icon: ['fa', 'trash-alt'],
+              tooltip: t('common.actions.delete'),
+              onClick: deleteByIdConfirm,
+              action: ACTION_DELETE,
+            },
+          ],
+          disableTransfer: true,
         },
-      ],
-      disableTransfer: true,
-    },
-  ]);
+      ] as TableColumns<Git>
+  );
 
   // options
   const opts = {
diff --git a/src/views/index.ts b/src/views/index.ts
index b7278e891ccc2..014420f904d6c 100644
--- a/src/views/index.ts
+++ b/src/views/index.ts
@@ -14,9 +14,9 @@ import DataSourceDetail from './ds/detail/DataSourceDetail.vue';
 import DataSourceDetailTabOverview from './ds/detail/tabs/DataSourceDetailTabOverview.vue';
 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 GitDetail from './git/detail/GitDetail.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';
@@ -50,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';
@@ -64,17 +64,17 @@ 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 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 {
@@ -94,9 +94,9 @@ export {
   DataSourceDetailTabOverview as ClDataSourceDetailTabOverview,
   DataSourceList as ClDataSourceList,
   EnvironmentList as ClEnvironmentList,
+  GitDetail as ClGitDetail,
   GitDetailActionsCommon as ClGitDetailActionsCommon,
   GitDetailActionsFiles as ClGitDetailActionsFiles,
-  GitDetail as ClGitDetail,
   GitDetailTabBranches as ClGitDetailTabBranches,
   GitDetailTabChanges as ClGitDetailTabChanges,
   GitDetailTabFiles as ClGitDetailTabFiles,
@@ -130,12 +130,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,
@@ -144,16 +144,16 @@ export {
   SpiderDetailTabTasks as ClSpiderDetailTabTasks,
   SpiderList as ClSpiderList,
   SystemDetail as ClSystemDetail,
+  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,
 };