diff --git a/src/components/dialog/CreateEditDialog.vue b/src/components/dialog/CreateEditDialog.vue
index 58eadebf340b7..3c8c0a1308699 100644
--- a/src/components/dialog/CreateEditDialog.vue
+++ b/src/components/dialog/CreateEditDialog.vue
@@ -1,30 +1,31 @@
 <script setup lang="ts">
-import { computed, provide, ref } from 'vue';
-import { TabsPaneContext } from 'element-plus';
-import { useI18n } from 'vue-i18n';
+import { computed, provide } from 'vue';
 import { sendEvent } from '@/admin/umeng';
-import { emptyArrayFunc } from '@/utils';
+import { emptyArrayFunc, translate } from '@/utils';
 
-const props = withDefaults(defineProps<{
-  visible: boolean,
-  type: CreateEditDialogType,
-  width: string,
-  confirmDisabled: boolean,
-  confirmLoading: boolean,
-  actionFunctions?: CreateEditDialogActionFunctions,
-  title?: string,
-  formRules: FormRuleItem[],
-}>(), {
-  visible: false,
-  type: 'create',
-  width: '80vw',
-  confirmDisabled: false,
-  confirmLoading: false,
-  formRules: emptyArrayFunc,
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    type: CreateEditDialogType;
+    width: string;
+    confirmDisabled: boolean;
+    confirmLoading: boolean;
+    actionFunctions?: CreateEditDialogActionFunctions;
+    title?: string;
+    formRules: FormRuleItem[];
+  }>(),
+  {
+    visible: false,
+    type: 'create',
+    width: '80vw',
+    confirmDisabled: false,
+    confirmLoading: false,
+    formRules: emptyArrayFunc,
+  }
+);
 
 // i18n
-const { t } = useI18n();
+const t = translate;
 
 const computedTitle = computed<string>(() => {
   const { visible, type, title } = props;
@@ -52,18 +53,9 @@ const onConfirm = () => {
   actionFunctions?.onConfirm?.();
 };
 
-const internalTabName = ref<CreateEditTabName>('single');
-const onTabChange = (tab: TabsPaneContext) => {
-  const tabName = tab.paneName as CreateEditTabName;
-  const { actionFunctions } = props;
-  actionFunctions?.onTabChange?.(tabName);
-
-  sendEvent('click_create_edit_dialog_tab_change', { tabName });
-};
-
 provide<CreateEditDialogActionFunctions | undefined>(
   'action-functions',
-  props.actionFunctions,
+  props.actionFunctions
 );
 provide<FormRuleItem[] | undefined>('form-rules', props.formRules);
 </script>
diff --git a/src/components/file/UploadFilesDialog.vue b/src/components/file/UploadFilesDialog.vue
index b0cbb806df7b3..d4062ccadfb23 100644
--- a/src/components/file/UploadFilesDialog.vue
+++ b/src/components/file/UploadFilesDialog.vue
@@ -124,7 +124,6 @@ const onUploadConfirm = async () => {
 };
 
 const onFilesChange = (fileList: FileWithPath[]) => {
-  console.debug(fileList);
   if (!fileList.length) return;
   files.value = fileList;
 
diff --git a/src/components/git/GitForm.vue b/src/components/git/GitForm.vue
index 49a808547c9f7..85d6f01a53c0e 100644
--- a/src/components/git/GitForm.vue
+++ b/src/components/git/GitForm.vue
@@ -21,6 +21,7 @@
             form.auth_type === 'http' ? ['fa', 'fa-link'] : ['fa', 'fa-key']
           "
           :label="form.auth_type?.toUpperCase()"
+          size="large"
         />
       </div>
     </cl-form-item>
diff --git a/src/components/git/GitStatus.vue b/src/components/git/GitStatus.vue
index af5757c27df2d..9433b88b174d1 100644
--- a/src/components/git/GitStatus.vue
+++ b/src/components/git/GitStatus.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useStore } from 'vuex';
 import {
   GIT_STATUS_PENDING,
   GIT_STATUS_READY,
@@ -9,7 +10,8 @@ import {
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
-  status: GitStatus;
+  id?: string;
+  status?: GitStatus;
   size?: BasicSize;
   error?: string;
 }>();
@@ -20,6 +22,9 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+const ns = 'git';
+const store = useStore();
+
 const data = computed<TagData>(() => {
   const { status, error } = props;
   switch (status) {
@@ -62,23 +67,49 @@ const data = computed<TagData>(() => {
       };
   }
 });
+
+const onRetry = async () => {
+  const { id } = props;
+  await store.dispatch(`${ns}/cloneGit`, { id });
+  await store.dispatch(`${ns}/getById`, id);
+};
 </script>
 
 <template>
-  <cl-tag
-    :key="data"
-    :icon="data.icon"
-    :label="data.label"
-    :size="size"
-    :spinning="data.spinning"
-    :tooltip="data.tooltip"
-    :type="data.type"
-    @click="emit('click')"
-  >
-    <template #tooltip>
-      <div v-html="data.tooltip" />
-    </template>
-  </cl-tag>
+  <div class="git-status">
+    <cl-tag
+      :key="data"
+      :icon="data.icon"
+      :label="data.label"
+      :size="size"
+      :spinning="data.spinning"
+      :tooltip="data.tooltip"
+      :type="data.type"
+      @click="emit('click')"
+    >
+      <template #tooltip>
+        <div v-html="data.tooltip" />
+      </template>
+    </cl-tag>
+    <cl-tag
+      v-if="status === GIT_STATUS_ERROR"
+      type="warning"
+      :icon="['fa', 'redo']"
+      :size="size"
+      :tooltip="t('components.git.actions.tooltip.retry')"
+      clickable
+      @click="onRetry"
+    />
+  </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.git-status {
+  margin-right: 10px;
+}
+</style>
+<style scoped>
+.git-status:deep(.el-tag:not(:last-child)) {
+  margin-right: 5px;
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 9e171ecf3b0e4..2b7370846e871 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -41,6 +41,7 @@ import FileEditorSettingsDialog from './file/FileEditorSettingsDialog.vue';
 import FileTab from './file/FileTab.vue';
 import FileUpload from './file/FileUpload.vue';
 import UploadFilesDialog from './file/UploadFilesDialog.vue';
+import UploadGitFilesDialog from './file/UploadGitFilesDialog.vue';
 import FilterCondition from './filter/FilterCondition.vue';
 import FilterConditionList from './filter/FilterConditionList.vue';
 import FilterInput from './filter/FilterInput.vue';
@@ -53,6 +54,7 @@ import FormTableField from './form/FormTableField.vue';
 import CreateEditGitDialog from './git/CreateEditGitDialog.vue';
 import GitFileStatus from './git/GitFileStatus.vue';
 import GitForm from './git/GitForm.vue';
+import GitStatus from './git/GitStatus.vue';
 import AtomMaterialIcon from './icon/AtomMaterialIcon.vue';
 import Icon from './icon/Icon.vue';
 import MenuItemIcon from './icon/MenuItemIcon.vue';
@@ -126,11 +128,8 @@ import TableHeaderDialogFilter from './table/TableHeaderDialogFilter.vue';
 import TableHeaderDialogSort from './table/TableHeaderDialogSort.vue';
 import CheckTag from './tag/CheckTag.vue';
 import CheckTagGroup from './tag/CheckTagGroup.vue';
-import CreateEditTagDialog from './tag/CreateEditTagDialog.vue';
 import LinkTag from './tag/LinkTag.vue';
 import Tag from './tag/Tag.vue';
-import TagForm from './tag/TagForm.vue';
-import TagList from './tag/TagList.vue';
 import CreateTaskDialog from './task/CreateTaskDialog.vue';
 import TaskCommand from './task/TaskCommand.vue';
 import TaskForm from './task/TaskForm.vue';
@@ -190,6 +189,7 @@ export {
   FileTab as ClFileTab,
   FileUpload as ClFileUpload,
   UploadFilesDialog as ClUploadFilesDialog,
+  UploadGitFilesDialog as ClUploadGitFilesDialog,
   FilterCondition as ClFilterCondition,
   FilterConditionList as ClFilterConditionList,
   FilterInput as ClFilterInput,
@@ -202,6 +202,7 @@ export {
   CreateEditGitDialog as ClCreateEditGitDialog,
   GitFileStatus as ClGitFileStatus,
   GitForm as ClGitForm,
+  GitStatus as ClGitStatus,
   AtomMaterialIcon as ClAtomMaterialIcon,
   Icon as ClIcon,
   MenuItemIcon as ClMenuItemIcon,
@@ -275,11 +276,8 @@ export {
   TableHeaderDialogSort as ClTableHeaderDialogSort,
   CheckTag as ClCheckTag,
   CheckTagGroup as ClCheckTagGroup,
-  CreateEditTagDialog as ClCreateEditTagDialog,
   LinkTag as ClLinkTag,
   Tag as ClTag,
-  TagForm as ClTagForm,
-  TagList as ClTagList,
   CreateTaskDialog as ClCreateTaskDialog,
   TaskCommand as ClTaskCommand,
   TaskForm as ClTaskForm,
diff --git a/src/components/nav/NavActionGroup.vue b/src/components/nav/NavActionGroup.vue
index dc0d3bb685dd5..de20eed02a329 100644
--- a/src/components/nav/NavActionGroup.vue
+++ b/src/components/nav/NavActionGroup.vue
@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="nav-action-group">
     <div class="border" />
@@ -5,17 +7,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'NavActionGroup',
-  setup() {
-    return {};
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .nav-action-group {
   height: fit-content;
diff --git a/src/components/nav/NavActionGroupDetailCommon.vue b/src/components/nav/NavActionGroupDetailCommon.vue
index 78ae8371e81d5..91283f05a663e 100644
--- a/src/components/nav/NavActionGroupDetailCommon.vue
+++ b/src/components/nav/NavActionGroupDetailCommon.vue
@@ -1,3 +1,28 @@
+<script setup lang="ts">
+import { ACTION_BACK, ACTION_SAVE } from '@/constants';
+import { translate } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    disabled: boolean;
+    showBackButton: boolean;
+    showSaveButton: boolean;
+  }>(),
+  {
+    disabled: false,
+    showBackButton: true,
+    showSaveButton: true,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'back'): void;
+  (e: 'save'): void;
+}>();
+
+const t = translate;
+</script>
+
 <template>
   <cl-nav-action-group>
     <cl-nav-action-item v-if="showBackButton">
@@ -10,7 +35,7 @@
         type="primary"
         id="back-btn"
         class-name="back-btn"
-        @click="() => $emit('back')"
+        @click="() => emit('back')"
       />
     </cl-nav-action-item>
     <cl-nav-action-item v-if="showSaveButton">
@@ -23,44 +48,10 @@
         type="success"
         id="save-btn"
         class-name="save-btn"
-        @click="() => $emit('save')"
+        @click="() => emit('save')"
       />
     </cl-nav-action-item>
   </cl-nav-action-group>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { ACTION_BACK, ACTION_SAVE } from '@/constants';
-
-export default defineComponent({
-  name: 'NavActionGroupDetailCommon',
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    showBackButton: {
-      type: Boolean,
-      default: true,
-    },
-    showSaveButton: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: ['back'],
-  setup() {
-    const { t } = useI18n();
-
-    return {
-      t,
-      ACTION_BACK,
-      ACTION_SAVE,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/components/nav/NavSidebar.vue b/src/components/nav/NavSidebar.vue
index 107cf63ad6356..6566f9c66565d 100644
--- a/src/components/nav/NavSidebar.vue
+++ b/src/components/nav/NavSidebar.vue
@@ -103,7 +103,7 @@ export default defineComponent({
       return items.filter(d =>
         d.title
           ?.toLocaleLowerCase()
-          .includes(searchString.value.toLocaleLowerCase()),
+          .includes(searchString.value.toLocaleLowerCase())
       );
     });
 
@@ -228,12 +228,13 @@ export default defineComponent({
 }
 </style>
 <style scoped>
-.nav-sidebar > .search:deep(.el-input__inner) {
+.nav-sidebar > .search:deep(.el-input__wrapper) {
   border: none;
+  box-shadow: none;
   height: 100%;
 }
 
-.nav-sidebar.collapsed > .search:deep(.el-input__inner) {
+.nav-sidebar.collapsed > .search:deep(.el-input__wrapper) {
   padding: 0;
   width: 0;
 }
diff --git a/src/components/nav/NavSidebarList.vue b/src/components/nav/NavSidebarList.vue
index f27cec168c855..b327f31d57ff3 100644
--- a/src/components/nav/NavSidebarList.vue
+++ b/src/components/nav/NavSidebarList.vue
@@ -11,7 +11,7 @@ const emit = defineEmits<{
 const onSelect = (id: string) => {
   emit(
     'select',
-    props.items?.findIndex(item => item.id === id),
+    props.items?.findIndex(item => item.id === id)
   );
 };
 </script>
diff --git a/src/components/nav/NavTabs.vue b/src/components/nav/NavTabs.vue
index 322633caad82e..6e5cf5990d9c9 100644
--- a/src/components/nav/NavTabs.vue
+++ b/src/components/nav/NavTabs.vue
@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import { translate } from '@/utils';
+
+const t = translate;
+
+const props = defineProps<{
+  items: NavItem[];
+  activeKey: string;
+  collapsed: boolean;
+  toggle: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'select', index: string): void;
+  (e: 'toggle'): void;
+}>();
+
+const onSelect = (index: string) => {
+  emit('select', index);
+};
+
+const onToggle = () => {
+  emit('toggle');
+};
+
+const getClassName = (item: NavItem): string => {
+  const cls = [];
+  if (item.emphasis) cls.push('emphasis');
+  if (item.id) cls.push(item.id);
+  return cls.join(' ');
+};
+</script>
+
 <template>
   <div class="nav-tabs">
     <el-tooltip
@@ -28,69 +61,17 @@
             <font-awesome-icon :icon="item.icon" />
           </template>
           <template v-else>
-            {{ t(item.title) }}
+            {{ item.title ? t(item.title) : '' }}
           </template>
         </el-tooltip>
       </el-menu-item>
     </el-menu>
     <div class="extra">
-      <slot name="extra"> </slot>
+      <slot name="extra"></slot>
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { emptyArrayFunc } from '@/utils/func';
-
-export default defineComponent({
-  name: 'NavTabs',
-  props: {
-    items: {
-      type: Array as PropType<NavItem[]>,
-      default: emptyArrayFunc,
-    },
-    activeKey: {
-      type: String,
-      default: '',
-    },
-    collapsed: {
-      type: Boolean,
-      default: false,
-    },
-    toggle: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['select', 'toggle'],
-  setup(props: NavTabsProps, { emit }) {
-    const { t } = useI18n();
-
-    const onSelect = (index: string) => {
-      emit('select', index);
-    };
-
-    const onToggle = () => {
-      emit('toggle');
-    };
-
-    const getClassName = (item: NavItem): string => {
-      const cls = [];
-      if (item.emphasis) cls.push('emphasis');
-      if (item.id) cls.push(item.id);
-      return cls.join(' ');
-    };
-
-    return {
-      onSelect,
-      onToggle,
-      getClassName,
-      t,
-    };
-  },
-});
-</script>
+
 <style lang="scss" scoped>
 .nav-tabs {
   display: flex;
diff --git a/src/components/node/NodeStatus.vue b/src/components/node/NodeStatus.vue
index 1281f8c533449..0073dd3ab5802 100644
--- a/src/components/node/NodeStatus.vue
+++ b/src/components/node/NodeStatus.vue
@@ -14,7 +14,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'click', _: void): void;
+  (e: 'click'): void;
 }>();
 
 const { t } = useI18n();
diff --git a/src/components/tag/CheckTag.vue b/src/components/tag/CheckTag.vue
index 7131869cf8967..f0cd3badc844d 100644
--- a/src/components/tag/CheckTag.vue
+++ b/src/components/tag/CheckTag.vue
@@ -1,3 +1,70 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+interface CheckTagProps extends TagProps {
+  modelValue: boolean;
+}
+
+const props = defineProps<CheckTagProps>();
+
+const emit = defineEmits<{
+  (e: 'update:model-value', value: boolean): void;
+  (e: 'change', value: boolean): void;
+}>();
+
+const isHover = ref<boolean>(false);
+
+const computedType = computed<BasicType | undefined>(() => {
+  const { modelValue, type, disabled } = props;
+  if (modelValue) {
+    return 'primary';
+  }
+  return disabled ? 'info' : type;
+});
+
+const computedIcon = computed<Icon>(() => {
+  const { modelValue } = props;
+  return modelValue ? ['far', 'check-square'] : ['far', 'square'];
+});
+
+const computedClickable = computed<boolean>(() => {
+  const { clickable, disabled } = props;
+  if (disabled) {
+    return false;
+  }
+  if (clickable === undefined) {
+    return true;
+  }
+  return clickable;
+});
+
+const computedEffect = computed<BasicEffect>(() => {
+  const { modelValue } = props;
+  if (modelValue) {
+    return 'dark';
+  }
+  if (!computedClickable.value) {
+    return 'plain';
+  }
+  return isHover.value ? 'light' : 'plain';
+});
+
+const onClick = () => {
+  const { modelValue } = props;
+  const newValue = !modelValue;
+  emit('update:model-value', newValue);
+  emit('change', newValue);
+};
+
+const onMouseEnter = () => {
+  isHover.value = true;
+};
+
+const onMouseLeave = () => {
+  isHover.value = false;
+};
+</script>
+
 <template>
   <cl-tag
     :clickable="computedClickable"
@@ -15,87 +82,4 @@
   />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
-import { tagProps } from '@/components/tag/Tag.vue';
-
-const checkTagProps = {
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  ...tagProps,
-};
-
-export default defineComponent({
-  name: 'CheckTag',
-  props: checkTagProps,
-  emits: ['update:model-value', 'change'],
-  setup(props: CheckTagProps, { emit }) {
-    const isHover = ref<boolean>(false);
-
-    const computedType = computed<BasicType | undefined>(() => {
-      const { modelValue, type, disabled } = props;
-      if (modelValue) {
-        return 'primary';
-      }
-      return disabled ? 'info' : type;
-    });
-
-    const computedIcon = computed<Icon>(() => {
-      const { modelValue } = props;
-      return modelValue ? ['far', 'check-square'] : ['far', 'square'];
-    });
-
-    const computedClickable = computed<boolean>(() => {
-      const { clickable, disabled } = props;
-      if (disabled) {
-        return false;
-      }
-      if (clickable === undefined) {
-        return true;
-      }
-      return clickable;
-    });
-
-    const computedEffect = computed<BasicEffect>(() => {
-      const { modelValue } = props;
-      if (modelValue) {
-        return 'dark';
-      }
-      if (!computedClickable.value) {
-        return 'plain';
-      }
-      return isHover.value ? 'light' : 'plain';
-    });
-
-    const onClick = () => {
-      const { modelValue } = props;
-      const newValue = !modelValue;
-      emit('update:model-value', newValue);
-      emit('change', newValue);
-    };
-
-    const onMouseEnter = () => {
-      isHover.value = true;
-    };
-
-    const onMouseLeave = () => {
-      isHover.value = false;
-    };
-
-    return {
-      isHover,
-      computedType,
-      computedIcon,
-      computedEffect,
-      computedClickable,
-      onClick,
-      onMouseEnter,
-      onMouseLeave,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/components/tag/CheckTagGroup.vue b/src/components/tag/CheckTagGroup.vue
index 3d23fc6ae16e3..7121ebc26e215 100644
--- a/src/components/tag/CheckTagGroup.vue
+++ b/src/components/tag/CheckTagGroup.vue
@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, reactive, watch } from 'vue';
+
+const props = defineProps<{
+  modelValue: string[];
+  options: SelectOption[];
+  disabled: boolean;
+  className?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:model-value', value: string[]): void;
+  (e: 'change', value: string[]): void;
+}>();
+
+const checkedMap = reactive<{ [key: string]: boolean }>({});
+
+const checkedKeys = computed<string[]>(() => {
+  return Object.keys(checkedMap).filter(k => checkedMap[k]);
+});
+
+const onChange = () => {
+  emit('update:model-value', checkedKeys.value);
+  emit('change', checkedKeys.value);
+};
+
+const updateCheckedMap = () => {
+  if (props.modelValue) {
+    props.modelValue.forEach(key => {
+      checkedMap[key] = true;
+    });
+  }
+};
+
+onBeforeMount(updateCheckedMap);
+watch(() => props.modelValue, updateCheckedMap);
+</script>
+
 <template>
   <div class="check-tag-group">
     <cl-check-tag
@@ -14,64 +52,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onBeforeMount, PropType, reactive, watch } from 'vue';
-
-export default defineComponent({
-  name: 'CheckTagGroup',
-  props: {
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => {
-        return [];
-      },
-    },
-    options: {
-      type: Array as PropType<SelectOption[]>,
-      default: () => {
-        return [];
-      },
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    className: {
-      type: String,
-    },
-  },
-  emits: ['update:model-value', 'change'],
-  setup(props: CheckTagGroupProps, { emit }) {
-    const checkedMap = reactive<{ [key: string]: boolean }>({});
-
-    const checkedKeys = computed<string[]>(() => {
-      return Object.keys(checkedMap).filter(k => checkedMap[k]);
-    });
-
-    const onChange = () => {
-      emit('update:model-value', checkedKeys.value);
-      emit('change', checkedKeys.value);
-    };
-
-    const updateCheckedMap = () => {
-      if (props.modelValue) {
-        props.modelValue.forEach(key => {
-          checkedMap[key] = true;
-        });
-      }
-    };
-
-    onBeforeMount(updateCheckedMap);
-    watch(() => props.modelValue, updateCheckedMap);
-
-    return {
-      checkedMap,
-      onChange,
-    };
-  },
-});
-</script>
-
 <style scoped>
 .check-tag-group:deep(.el-tag:not(:last-child)) {
   margin-right: 10px;
diff --git a/src/components/tag/CreateEditTagDialog.vue b/src/components/tag/CreateEditTagDialog.vue
deleted file mode 100644
index 088478ddca1e7..0000000000000
--- a/src/components/tag/CreateEditTagDialog.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <cl-create-edit-dialog
-    :action-functions="actionFunctions"
-    :batch-form-data="formList"
-    :batch-form-fields="batchFormFields"
-    :confirm-disabled="confirmDisabled"
-    :confirm-loading="confirmLoading"
-    :tab-name="createEditDialogTabName"
-    :type="activeDialogKey"
-    :visible="createEditDialogVisible"
-  >
-    <template #default>
-      <cl-tag-form />
-    </template>
-  </cl-create-edit-dialog>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from 'vuex';
-import useTag from '@/components/tag/tag';
-
-export default defineComponent({
-  name: 'CreateEditTagDialog',
-  setup() {
-    // store
-    const store = useStore();
-
-    return {
-      ...useTag(store),
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/tag/LinkTag.vue b/src/components/tag/LinkTag.vue
index ef07755f65878..7100e48028f4d 100644
--- a/src/components/tag/LinkTag.vue
+++ b/src/components/tag/LinkTag.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+export interface LinkTagProps extends TagProps {
+  path?: string;
+}
+
+const props = defineProps<LinkTagProps>();
+
+const router = useRouter();
+
+const onClick = () => {
+  const { path } = props;
+  if (path) {
+    router.push(path);
+  }
+};
+</script>
+
 <template>
   <cl-tag
     :clickable="clickable"
@@ -14,37 +33,4 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { tagProps } from '@/components/tag/Tag.vue';
-import { useRouter } from 'vue-router';
-
-const linkTagProps = {
-  ...tagProps,
-  path: {
-    type: String,
-    default: '',
-  },
-};
-
-export default defineComponent({
-  name: 'LinkTag',
-  props: linkTagProps,
-  setup(props: LinkTagProps, { emit }) {
-    const router = useRouter();
-
-    const onClick = () => {
-      const { path } = props;
-      if (path) {
-        router.push(path);
-      }
-    };
-
-    return {
-      onClick,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/components/tag/Tag.vue b/src/components/tag/Tag.vue
index 14232bb70d7c4..daa26949eb22e 100644
--- a/src/components/tag/Tag.vue
+++ b/src/components/tag/Tag.vue
@@ -1,3 +1,101 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { ElTag } from 'element-plus';
+
+interface TagProps {
+  label?: string;
+  tooltip?: string;
+  type?: BasicType;
+  color?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  icon?: string | string[];
+  size?: BasicSize;
+  spinning?: boolean;
+  width?: string;
+  effect?: BasicEffect;
+  clickable?: boolean;
+  closable?: boolean;
+  disabled?: boolean;
+  tag?: Tag;
+  className?: string;
+}
+
+const props = defineProps<TagProps>();
+
+const emit = defineEmits<{
+  (e: 'click'): void;
+  (e: 'close'): void;
+  (e: 'mouseenter'): void;
+  (e: 'mouseleave'): void;
+}>();
+
+const tagRef = ref<typeof ElTag>();
+
+const onClick = (ev?: Event) => {
+  ev?.stopPropagation();
+  const { clickable } = props;
+  if (clickable) {
+    emit('click');
+  }
+};
+
+const onClose = (ev?: Event) => {
+  ev?.stopPropagation();
+  const { closable } = props;
+  if (closable) {
+    emit('close');
+  }
+};
+
+const cls = computed<string[]>(() => {
+  const { clickable, disabled, label, tag, className } = props;
+  const cls = [] as string[];
+  if (clickable) cls.push('clickable');
+  if (disabled) cls.push('disabled');
+  if (!label && !tag?.name) cls.push('no-label');
+  if (className) cls.push(className);
+  return cls;
+});
+
+const setStyle = () => {
+  const { color, borderColor, width, tag } = props;
+
+  // normalize colors
+  const color_ = color ?? tag?.color;
+  const borderColor_ = borderColor ?? color_;
+
+  // set style of tag
+  const elTag = tagRef.value?.$el;
+  if (!elTag) return;
+  const styleTagList = [];
+  if (color_) styleTagList.push(`color: ${color_}`);
+  if (borderColor_) styleTagList.push(`border-color: ${borderColor_}`);
+  if (width) styleTagList.push(`width: ${width}`);
+  const styleTag = styleTagList.join(';');
+  elTag.setAttribute('style', styleTag);
+
+  // set style of tag close
+  const elTagClose = elTag.querySelector('.el-tag__close');
+  if (!elTagClose) return;
+  const styleTagCloseList = [];
+  if (color_) {
+    styleTagCloseList.push(`color: ${color_}`);
+    styleTagCloseList.push(`background-color: transparent`);
+  }
+  const styleTagClose = styleTagCloseList.join(';');
+  elTagClose.setAttribute('style', styleTagClose);
+};
+
+watch(() => props.color, setStyle);
+watch(() => props.backgroundColor, setStyle);
+watch(() => props.borderColor, setStyle);
+
+onMounted(() => {
+  setStyle();
+});
+</script>
+
 <template>
   <el-tooltip :content="tooltip" :disabled="!tooltip && !$slots.tooltip">
     <el-tag
@@ -23,153 +121,6 @@
   </el-tooltip>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  PropType,
-  ref,
-  watch,
-} from 'vue';
-import { ElTag } from 'element-plus';
-
-export const tagProps = {
-  label: {
-    type: String,
-  },
-  tooltip: {
-    type: String,
-  },
-  type: {
-    type: String as PropType<BasicType>,
-  },
-  color: {
-    type: String as PropType<string>,
-  },
-  backgroundColor: {
-    type: String as PropType<string>,
-  },
-  borderColor: {
-    type: String as PropType<string>,
-  },
-  icon: {
-    type: [String, Array] as PropType<string | string[]>,
-  },
-  size: {
-    type: String as PropType<BasicSize>,
-    default: 'default',
-  },
-  spinning: {
-    type: Boolean,
-    default: false,
-  },
-  width: {
-    type: String,
-  },
-  effect: {
-    type: String as PropType<BasicEffect>,
-  },
-  clickable: {
-    type: Boolean,
-    default: false,
-  },
-  closable: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  tag: {
-    type: Object as PropType<Tag>,
-  },
-  className: {
-    type: String,
-  },
-};
-
-export default defineComponent({
-  name: 'Tag',
-  props: tagProps,
-  emits: ['click', 'close', 'mouseenter', 'mouseleave'],
-  setup(props: TagProps, { emit }) {
-    const tagRef = ref<typeof ElTag>();
-
-    const onClick = (ev?: Event) => {
-      ev?.stopPropagation();
-      const { clickable } = props;
-      if (clickable) {
-        emit('click');
-      }
-    };
-
-    const onClose = (ev?: Event) => {
-      ev?.stopPropagation();
-      const { closable } = props;
-      if (closable) {
-        emit('close');
-      }
-    };
-
-    const cls = computed<string[]>(() => {
-      const { clickable, disabled, label, tag, className } = props;
-      const cls = [] as string[];
-      if (clickable) cls.push('clickable');
-      if (disabled) cls.push('disabled');
-      if (!label && !tag?.name) cls.push('no-label');
-      if (className) cls.push(className);
-      return cls;
-    });
-
-    const setStyle = () => {
-      const { color, borderColor, width, tag } = props;
-
-      // normalize colors
-      const color_ = color ?? tag?.color;
-      const borderColor_ = borderColor ?? color_;
-
-      // set style of tag
-      const elTag = tagRef.value?.$el;
-      if (!elTag) return;
-      const styleTagList = [];
-      if (color_) styleTagList.push(`color: ${color_}`);
-      if (borderColor_) styleTagList.push(`border-color: ${borderColor_}`);
-      if (width) styleTagList.push(`width: ${width}`);
-      const styleTag = styleTagList.join(';');
-      elTag.setAttribute('style', styleTag);
-
-      // set style of tag close
-      const elTagClose = elTag.querySelector('.el-tag__close');
-      if (!elTagClose) return;
-      const styleTagCloseList = [];
-      if (color_) {
-        styleTagCloseList.push(`color: ${color_}`);
-        styleTagCloseList.push(`background-color: transparent`);
-      }
-      const styleTagClose = styleTagCloseList.join(';');
-      elTagClose.setAttribute('style', styleTagClose);
-    };
-
-    watch(() => props.color, setStyle);
-    watch(() => props.backgroundColor, setStyle);
-    watch(() => props.borderColor, setStyle);
-
-    onMounted(() => {
-      setStyle();
-    });
-
-    return {
-      tagRef,
-      onClick,
-      onClose,
-      cls,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .tag {
   cursor: default;
diff --git a/src/components/tag/TagForm.vue b/src/components/tag/TagForm.vue
deleted file mode 100644
index 79a1c914e5d45..0000000000000
--- a/src/components/tag/TagForm.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <cl-form
-    v-if="form"
-    ref="formRef"
-    :model="form"
-    :rules="formRules"
-    :selective="isSelectiveForm"
-  >
-    <cl-form-item
-      :span="2"
-      :label="t('components.tag.form.name')"
-      not-editable
-      prop="name"
-      required
-    >
-      <el-input
-        v-model="form.name"
-        :disabled="isFormItemDisabled('name')"
-        :placeholder="t('components.tag.form.name')"
-      />
-    </cl-form-item>
-    <cl-form-item
-      :span="2"
-      :label="t('components.tag.form.color')"
-      prop="color"
-      required
-    >
-      <cl-color-picker
-        v-model="form.color"
-        :predefine="predefinedColors"
-        class="color-picker"
-        show-alpha
-      />
-    </cl-form-item>
-    <cl-form-item
-      :span="4"
-      :label="t('components.tag.form.description')"
-      prop="description"
-    >
-      <el-input
-        v-model="form.description"
-        :disabled="isFormItemDisabled('description')"
-        :placeholder="t('components.tag.form.description')"
-        type="textarea"
-      />
-    </cl-form-item>
-  </cl-form>
-</template>
-
-<script lang="ts">
-import { defineComponent, readonly } from 'vue';
-import { useStore } from 'vuex';
-import useTag from '@/components/tag/tag';
-import { getPredefinedColors } from '@/utils/color';
-import { useI18n } from 'vue-i18n';
-
-export default defineComponent({
-  name: 'TagForm',
-  setup() {
-    // i18n
-    const { t } = useI18n();
-
-    // store
-    const store = useStore();
-
-    // predefined colors
-    const predefinedColors = readonly<string[]>(getPredefinedColors());
-
-    return {
-      ...useTag(store),
-      predefinedColors,
-      t,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/tag/TagList.vue b/src/components/tag/TagList.vue
deleted file mode 100644
index 65a9159600ba8..0000000000000
--- a/src/components/tag/TagList.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <cl-tag
-    v-for="tag in tags"
-    :key="tag._id"
-    :clickable="clickable"
-    :tag="tag"
-    @click="onClick"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { emptyArrayFunc } from '@/utils/func';
-
-export default defineComponent({
-  name: 'TagList',
-  props: {
-    tags: {
-      type: Array as PropType<Tag[]>,
-      default: emptyArrayFunc,
-    },
-    clickable: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: ['click'],
-  setup(props: TagListProps, { emit }) {
-    const onClick = (tag: Tag) => {
-      emit('click', tag);
-    };
-
-    return {
-      onClick,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/task/TaskStatus.vue b/src/components/task/TaskStatus.vue
index e2ea6b342997b..8ddbe0429b3db 100644
--- a/src/components/task/TaskStatus.vue
+++ b/src/components/task/TaskStatus.vue
@@ -17,7 +17,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'click', _: void): void;
+  (e: 'click'): void;
 }>();
 
 // i18n
diff --git a/src/i18n/lang/en/components/git.ts b/src/i18n/lang/en/components/git.ts
index 040e1665f212d..0228dfbb6f265 100644
--- a/src/i18n/lang/en/components/git.ts
+++ b/src/i18n/lang/en/components/git.ts
@@ -45,11 +45,13 @@ const git: LComponentsGit = {
   actions: {
     title: 'Git Actions',
     label: {
+      retry: 'Retry',
       pull: 'Pull',
       commit: 'Commit',
       checkout: 'Checkout',
     },
     tooltip: {
+      retry: 'Retry',
       pull: 'Pull',
       commit: 'Commit and Push',
       checkout: 'Checkout',
diff --git a/src/i18n/lang/zh/components/git.ts b/src/i18n/lang/zh/components/git.ts
index 6425320e98b4c..a2470ced62210 100644
--- a/src/i18n/lang/zh/components/git.ts
+++ b/src/i18n/lang/zh/components/git.ts
@@ -45,11 +45,13 @@ const git: LComponentsGit = {
   actions: {
     title: 'Git 操作',
     label: {
+      retry: '重试',
       pull: '拉取',
       commit: '提交',
       checkout: '签出',
     },
     tooltip: {
+      retry: '重试',
       pull: '拉取',
       commit: '拉取并推送',
       checkout: '签出',
diff --git a/src/interfaces/components/tag/CheckTag.d.ts b/src/interfaces/components/tag/CheckTag.d.ts
deleted file mode 100644
index dd242be05dd75..0000000000000
--- a/src/interfaces/components/tag/CheckTag.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-interface CheckTagProps extends TagProps {
-  modelValue?: boolean;
-}
diff --git a/src/interfaces/components/tag/CheckTagGroup.d.ts b/src/interfaces/components/tag/CheckTagGroup.d.ts
deleted file mode 100644
index fa0f3415afeea..0000000000000
--- a/src/interfaces/components/tag/CheckTagGroup.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-interface CheckTagGroupProps {
-  modelValue: string[];
-  options: SelectOption[];
-  disabled: boolean;
-  className?: string;
-}
diff --git a/src/interfaces/components/tag/LinkTag.d.ts b/src/interfaces/components/tag/LinkTag.d.ts
deleted file mode 100644
index d4745e5e79cff..0000000000000
--- a/src/interfaces/components/tag/LinkTag.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-interface LinkTagProps extends TagProps {
-  path?: string;
-}
diff --git a/src/interfaces/components/tag/Tag.d.ts b/src/interfaces/components/tag/Tag.d.ts
index ff293c8d35601..3546cd3345496 100644
--- a/src/interfaces/components/tag/Tag.d.ts
+++ b/src/interfaces/components/tag/Tag.d.ts
@@ -1,21 +1,20 @@
-export declare global {
-  interface TagProps {
-    label?: string;
-    tooltip?: string;
-    type?: BasicType;
-    color?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-    icon?: Icon;
-    spinning?: boolean;
-    width?: string;
-    effect?: BasicEffect;
-    clickable?: boolean;
-    closable?: boolean;
-    disabled?: boolean;
-    tag?: Tag;
-    className?: string;
-  }
-
-  type TagData = TagProps;
+interface TagProps {
+  label?: string;
+  tooltip?: string;
+  type?: BasicType;
+  color?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  icon?: string | string[];
+  size?: BasicSize;
+  spinning?: boolean;
+  width?: string;
+  effect?: BasicEffect;
+  clickable?: boolean;
+  closable?: boolean;
+  disabled?: boolean;
+  tag?: Tag;
+  className?: string;
 }
+
+type TagData = TagProps;
diff --git a/src/interfaces/components/tag/TagList.d.ts b/src/interfaces/components/tag/TagList.d.ts
deleted file mode 100644
index 95f6316259c22..0000000000000
--- a/src/interfaces/components/tag/TagList.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-interface TagListProps {
-  tags: Tag[];
-  clickable: boolean;
-}
diff --git a/src/interfaces/element/index.d.ts b/src/interfaces/element/index.d.ts
index 03d020e6f3e6c..df5450f40cb6f 100644
--- a/src/interfaces/element/index.d.ts
+++ b/src/interfaces/element/index.d.ts
@@ -1,14 +1,7 @@
 export declare global {
-  type BasicType =
-    | ''
-    | 'primary'
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'info'
-    | 'plain';
+  type BasicType = 'primary' | 'success' | 'warning' | 'danger' | 'info';
   type BasicEffect = 'dark' | 'light' | 'plain';
-  type BasicSize = 'mini' | 'small' | 'medium' | 'large';
+  type BasicSize = 'small' | 'default' | 'large';
 
   type ElFormValidator = (rule: any, value: any, callback: any) => void;
 
diff --git a/src/interfaces/i18n/components/git.d.ts b/src/interfaces/i18n/components/git.d.ts
index 3b30327ca498e..b546e239099d5 100644
--- a/src/interfaces/i18n/components/git.d.ts
+++ b/src/interfaces/i18n/components/git.d.ts
@@ -45,11 +45,13 @@ interface LComponentsGit {
   actions: {
     title: string;
     label: {
+      retry: string;
       pull: string;
       commit: string;
       checkout: string;
     };
     tooltip: {
+      retry: string;
       pull: string;
       commit: string;
       checkout: string;
diff --git a/src/interfaces/store/index.d.ts b/src/interfaces/store/index.d.ts
index dba29e6a53a61..de47ab1c4bf02 100644
--- a/src/interfaces/store/index.d.ts
+++ b/src/interfaces/store/index.d.ts
@@ -81,6 +81,7 @@ export declare global {
     sidebarCollapsed: boolean;
     actionsCollapsed: boolean;
     tabs: NavItem[];
+    disabledTabKeys: string[];
     afterSave: (() => Promise)[];
   }
 
@@ -140,6 +141,8 @@ export declare global {
     expandActions: StoreMutation<BaseStoreState<T>>;
     collapseActions: StoreMutation<BaseStoreState<T>>;
     setTabs: StoreMutation<BaseStoreState, NavItem[]>;
+    setDisabledTabKeys: StoreMutation<BaseStoreState, string[]>;
+    resetDisabledTabKeys: StoreMutation<BaseStoreState, string[]>;
     setAfterSave: StoreMutation<BaseStoreState<T>, (() => Promise)[]>;
   }
 
diff --git a/src/interfaces/store/modules/git.d.ts b/src/interfaces/store/modules/git.d.ts
index 88e36a9e15b21..444a776ca1555 100644
--- a/src/interfaces/store/modules/git.d.ts
+++ b/src/interfaces/store/modules/git.d.ts
@@ -42,6 +42,7 @@ interface GitStoreActions
   extends BaseStoreActions<Git>,
     BaseFileStoreActions<GitStoreState> {
   getGit: StoreAction<GitStoreState, { id: string }>;
+  cloneGit: StoreAction<GitStoreState, { id: string }>;
   getGitRemoteRefs: StoreAction<GitStoreState, { id: string }>;
   getGitBranches: StoreAction<GitStoreState, { id: string }>;
   getGitTags: StoreAction<GitStoreState, { id: string }>;
diff --git a/src/layouts/content/detail/DetailLayout.vue b/src/layouts/content/detail/DetailLayout.vue
index 5dbb201ec8211..c8f45dfb066bf 100644
--- a/src/layouts/content/detail/DetailLayout.vue
+++ b/src/layouts/content/detail/DetailLayout.vue
@@ -1,3 +1,85 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, onBeforeUnmount, onMounted } from 'vue';
+import useDetail from '@/layouts/content/detail/useDetail';
+import { useStore } from 'vuex';
+import { translate } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    storeNamespace: ListStoreNamespace;
+    noSidebar: boolean;
+    navItemNameKey: string;
+    showBackButton: boolean;
+    showSaveButton: boolean;
+  }>(),
+  {
+    noSidebar: false,
+    navItemNameKey: 'name',
+    showSaveButton: true,
+    showBackButton: true,
+  }
+);
+
+const t = translate;
+
+const IGNORE_GET_ALL_NS = ['task'];
+
+const ns = computed(() => props.storeNamespace);
+const store = useStore();
+const state = store.state[ns.value] as BaseStoreState;
+
+const computedNavItems = computed<NavItem[]>(() =>
+  state.allList.map((d: BaseModel) => {
+    const { navItemNameKey } = props;
+    return {
+      id: d._id,
+      title: d[navItemNameKey],
+    } as NavItem;
+  })
+);
+
+const {
+  activeId,
+  activeTabName,
+  navSidebar,
+  getForm,
+  sidebarCollapsed,
+  actionsCollapsed,
+  showActionsToggleTooltip,
+  tabs,
+  contentContainerStyle,
+  onNavSidebarSelect,
+  onNavSidebarToggle,
+  onNavTabsSelect,
+  onNavTabsToggle,
+  onActionsToggle,
+  onBack,
+  onSave,
+} = useDetail(ns.value);
+
+// get form before mount
+onBeforeMount(getForm);
+
+// get all list before mount
+onBeforeMount(async () => {
+  if (IGNORE_GET_ALL_NS.includes(ns.value)) return;
+  await store.dispatch(`${ns.value}/getAllList`);
+});
+
+// scroll nav sidebar after mounted
+onMounted(() => {
+  if (!navSidebar.value) return;
+  navSidebar.value.scroll(activeId.value);
+});
+
+// reset form before unmount
+onBeforeUnmount(() => {
+  if (!activeTabName.value) {
+    store.commit(`${ns.value}/resetForm`);
+  }
+});
+</script>
+
 <template>
   <div
     :class="noSidebar || sidebarCollapsed ? 'collapsed' : ''"
@@ -63,96 +145,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onBeforeMount,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-} from 'vue';
-import useDetail from '@/layouts/content/detail/useDetail';
-import { useStore } from 'vuex';
-import { useI18n } from 'vue-i18n';
-
-const IGNORE_GET_ALL_NS = ['task'];
-
-export default defineComponent({
-  name: 'DetailLayout',
-  props: {
-    storeNamespace: {
-      type: String as PropType<ListStoreNamespace>,
-      required: true,
-    },
-    noSidebar: {
-      type: Boolean,
-      default: false,
-    },
-    navItemNameKey: {
-      type: String,
-      default: 'name',
-    },
-    showBackButton: {
-      type: Boolean,
-      default: true,
-    },
-    showSaveButton: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup(props: DetailLayoutProps, { emit }) {
-    const { t } = useI18n();
-    const ns = computed(() => props.storeNamespace);
-    const store = useStore();
-    const state = store.state[ns.value] as BaseStoreState;
-
-    const computedNavItems = computed<NavItem[]>(() =>
-      state.allList.map((d: BaseModel) => {
-        const { navItemNameKey } = props;
-        return {
-          id: d._id,
-          title: d[navItemNameKey],
-        } as NavItem;
-      })
-    );
-
-    const { activeId, activeTabName, navSidebar, getForm } = useDetail(
-      ns.value
-    );
-
-    // get form before mount
-    onBeforeMount(getForm);
-
-    // get all list before mount
-    onBeforeMount(async () => {
-      if (IGNORE_GET_ALL_NS.includes(ns.value)) return;
-      await store.dispatch(`${ns.value}/getAllList`);
-    });
-
-    // scroll nav sidebar after mounted
-    onMounted(() => {
-      if (!navSidebar.value) return;
-      navSidebar.value.scroll(activeId.value);
-    });
-
-    // reset form before unmount
-    onBeforeUnmount(() => {
-      if (!activeTabName.value) {
-        store.commit(`${ns.value}/resetForm`);
-      }
-    });
-
-    return {
-      ...useDetail(ns.value),
-      computedNavItems,
-      t,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .detail-layout {
   display: flex;
diff --git a/src/layouts/content/detail/useDetail.ts b/src/layouts/content/detail/useDetail.ts
index 7bcb66e7b5784..783417ba17898 100644
--- a/src/layouts/content/detail/useDetail.ts
+++ b/src/layouts/content/detail/useDetail.ts
@@ -46,7 +46,12 @@ const useDetail = <T = BaseModel>(ns: ListStoreNamespace) => {
   const actionsCollapsed = computed<boolean>(() => state.actionsCollapsed);
 
   const tabs = computed(() => {
-    return plainClone(store.getters[`${ns}/tabs`]) as NavItem[];
+    return (plainClone(store.getters[`${ns}/tabs`]) as NavItem[]).map(
+      (tab: NavItem) => {
+        tab.disabled = store.state[ns].disabledTabKeys.includes(tab.id);
+        return tab;
+      }
+    );
   });
 
   const contentContainerStyle = computed(() => {
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
index 0bec4f55766a3..9eedbd2933c3d 100644
--- a/src/layouts/index.ts
+++ b/src/layouts/index.ts
@@ -1,5 +1,4 @@
 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';
@@ -8,10 +7,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,
@@ -20,4 +19,5 @@ export {
   ListLayout as ClListLayout,
   SidebarLayout as ClSidebarLayout,
   SimpleLayout as ClSimpleLayout,
+  NormalLayout as ClNormalLayout,
 };
diff --git a/src/router/index.ts b/src/router/index.ts
index 65d95800b5ec4..b00f5cec605cf 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,7 +12,6 @@ import spider from '@/router/spider';
 import task from '@/router/task';
 import schedule from '@/router/schedule';
 import user from '@/router/user';
-import tag from '@/router/tag';
 import token from '@/router/token';
 import deps from '@/router/deps';
 import notification from '@/router/notification';
@@ -41,7 +40,6 @@ export function getDefaultRoutes(): Array<RouteRecordRaw> {
         ...task,
         ...schedule,
         ...user,
-        ...tag,
         ...token,
         ...deps,
         ...notification,
diff --git a/src/router/tag.ts b/src/router/tag.ts
deleted file mode 100644
index 0fd0e786c58c5..0000000000000
--- a/src/router/tag.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { RouteRecordRaw } from 'vue-router';
-import { TAB_NAME_OVERVIEW } from '@/constants/tab';
-
-const endpoint = 'tags';
-
-export default [
-  {
-    name: 'TagList',
-    path: endpoint,
-    component: () => import('@/views/tag/list/TagViewList.vue'),
-  },
-  {
-    name: 'TagDetail',
-    path: `${endpoint}/:id`,
-    redirect: to => {
-      return { path: to.path + '/overview' };
-    },
-    component: () => import('@/views/tag/detail/TagDetail.vue'),
-    children: [
-      {
-        path: TAB_NAME_OVERVIEW,
-        component: () =>
-          import('@/views/tag/detail/tabs/TagDetailTabOverview.vue'),
-      },
-    ],
-  },
-] as Array<RouteRecordRaw>;
diff --git a/src/store/modules/git.ts b/src/store/modules/git.ts
index 64e60d9c47ff1..0242a3bff8f66 100644
--- a/src/store/modules/git.ts
+++ b/src/store/modules/git.ts
@@ -132,6 +132,12 @@ const actions = {
       commit('setGitCurrentBranchLoading', false);
     }
   },
+  cloneGit: async (
+    _: StoreActionContext<GitStoreState>,
+    { id }: { id: string }
+  ) => {
+    return await post(`${endpoint}/${id}/clone`);
+  },
   getGitRemoteRefs: async (
     { commit }: StoreActionContext<GitStoreState>,
     { id }: { id: string }
diff --git a/src/utils/store.ts b/src/utils/store.ts
index 0e4e3a35b2432..1968ce38135dd 100644
--- a/src/utils/store.ts
+++ b/src/utils/store.ts
@@ -34,6 +34,7 @@ export const getDefaultStoreState = <T = any>(
     sidebarCollapsed: false,
     actionsCollapsed: false,
     tabs: [{ id: 'overview', title: t('common.tabs.overview') }],
+    disabledTabKeys: [],
     afterSave: [],
   };
 };
@@ -232,6 +233,12 @@ export const getDefaultStoreMutations = <T = any>(): BaseStoreMutations<T> => {
     setTabs: (state: BaseStoreState<T>, tabs) => {
       state.tabs = tabs;
     },
+    setDisabledTabKeys: (state: BaseStoreState<T>, keys) => {
+      state.disabledTabKeys = keys;
+    },
+    resetDisabledTabKeys: (state: BaseStoreState<T>) => {
+      state.disabledTabKeys = [];
+    },
     setAfterSave: (state: BaseStoreState<T>, fnList) => {
       state.afterSave = fnList;
     },
diff --git a/src/views/git/detail/actions/GitDetailActionsCommon.vue b/src/views/git/detail/actions/GitDetailActionsCommon.vue
index 5a5fea613bcb0..46d83a3c6d24a 100644
--- a/src/views/git/detail/actions/GitDetailActionsCommon.vue
+++ b/src/views/git/detail/actions/GitDetailActionsCommon.vue
@@ -4,6 +4,7 @@ import { useStore } from 'vuex';
 import { translate } from '@/utils';
 import useGitDetail from '@/views/git/detail/useGitDetail';
 import { ElMessage } from 'element-plus';
+import { GIT_STATUS_READY } from '@/constants';
 
 const t = translate;
 
@@ -13,6 +14,13 @@ const { git: state } = store.state as RootStoreState;
 // git form
 const gitForm = computed<Git>(() => state.form);
 
+const isDisabled = computed<boolean>(
+  () =>
+    gitForm.value.status !== GIT_STATUS_READY ||
+    !gitForm.value.url ||
+    !gitForm.value.auth_type
+);
+
 const {
   gitCurrentBranch,
   gitCurrentBranchLoading,
@@ -39,7 +47,7 @@ const onAutoPullChange = async () => {
     id: gitForm.value._id,
     form: gitForm.value,
   });
-  await ElMessage.success(t('common.message.success.save'));
+  ElMessage.success(t('common.message.success.save'));
 };
 </script>
 
@@ -50,18 +58,24 @@ const onAutoPullChange = async () => {
       :tooltip="t('components.git.actions.title')"
     />
     <cl-nav-action-item>
+      <cl-git-status
+        size="large"
+        :id="gitForm._id"
+        :status="gitForm.status"
+        :error="gitForm.error"
+      />
       <cl-fa-icon-button
         :icon="['fa', 'download']"
         :tooltip="t('components.git.actions.tooltip.pull')"
         type="primary"
-        :disabled="!gitForm.url || !gitForm.auth_type"
+        :disabled="isDisabled"
         @click="onClickPull"
       />
       <cl-fa-icon-button
         :icon="['fa', 'upload']"
         :tooltip="t('components.git.actions.tooltip.commit')"
         type="success"
-        :disabled="!gitForm.url || !gitForm.auth_type"
+        :disabled="isDisabled"
         @click="onClickCommit"
       />
       <div v-if="gitCurrentBranch || gitCurrentBranchLoading" class="branch">
diff --git a/src/views/git/detail/useGitDetail.ts b/src/views/git/detail/useGitDetail.ts
index e2921afe7028a..d7ef336cb1e21 100644
--- a/src/views/git/detail/useGitDetail.ts
+++ b/src/views/git/detail/useGitDetail.ts
@@ -1,4 +1,4 @@
-import { computed, ref, onBeforeMount, onBeforeUnmount } from 'vue';
+import { computed, ref, onBeforeMount, onBeforeUnmount, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
 import useGitService from '@/services/git/gitService';
@@ -7,8 +7,16 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import { sendEvent } from '@/admin/umeng';
 import { translate } from '@/utils/i18n';
 import Form from '@/components/form/Form.vue';
-import { GIT_REF_TYPE_BRANCH } from '@/constants/git';
+import {
+  GIT_REF_TYPE_BRANCH,
+  GIT_STATUS_CLONING,
+  GIT_STATUS_ERROR,
+  GIT_STATUS_PENDING,
+  GIT_STATUS_READY,
+} from '@/constants/git';
 import useDetail from '@/layouts/content/detail/useDetail';
+import useGit from '@/components/git/git';
+import { TAB_NAME_OVERVIEW } from '@/constants';
 
 // i18n
 const t = translate;
@@ -74,9 +82,7 @@ const useGitDetail = () => {
       try {
         const res = await store.dispatch(`${ns}/gitPull`, { id: id.value });
         if (res) {
-          await ElMessage.success(
-            t('components.git.common.message.success.pull')
-          );
+          ElMessage.success(t('components.git.common.message.success.pull'));
         }
         await store.dispatch(`${ns}/getGit`, { id: id.value });
       } finally {
@@ -106,9 +112,7 @@ const useGitDetail = () => {
         });
         store.commit(`${ns}/resetGitChangeSelection`);
         if (res) {
-          await ElMessage.success(
-            t('components.git.common.message.success.commit')
-          );
+          ElMessage.success(t('components.git.common.message.success.commit'));
         }
         await store.dispatch(`${ns}/getGit`, { id: id.value });
       } finally {
@@ -126,9 +130,7 @@ const useGitDetail = () => {
           id: id.value,
           branch: gitCheckoutForm.value.name,
         });
-        await ElMessage.success(
-          t('components.git.common.message.success.checkout')
-        );
+        ElMessage.success(t('components.git.common.message.success.checkout'));
         await store.dispatch(`${ns}/getGit`, { id: id.value });
       } finally {
         gitLoading.value.checkout = false;
@@ -149,6 +151,29 @@ const useGitDetail = () => {
   onBeforeMount(() => store.dispatch(`node/getAllList`));
   onBeforeUnmount(() => store.commit(`${ns}/resetAll`));
 
+  const { form } = useGit(store);
+  let handle = 0;
+  watch(form, () => {
+    const { status } = form.value as Git;
+    if (status === GIT_STATUS_READY) {
+      store.commit(`${ns}/resetDisabledTabKeys`);
+      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);
+      } else {
+        handle = setInterval(
+          () => store.dispatch(`${ns}/getById`, id.value),
+          5000
+        );
+      }
+    }
+  });
+
   return {
     ...useDetail('git'),
     gitCheckoutFormRef,
diff --git a/src/views/git/list/useGitList.ts b/src/views/git/list/useGitList.ts
index 856c5812d40aa..8b42fc38ca0b1 100644
--- a/src/views/git/list/useGitList.ts
+++ b/src/views/git/list/useGitList.ts
@@ -8,14 +8,19 @@ import {
   ACTION_FILTER_SEARCH,
   ACTION_VIEW,
   FILTER_OP_CONTAINS,
-  TAB_NAME_SPIDERS,
+  GIT_STATUS_ERROR,
   TABLE_COLUMN_NAME_ACTIONS,
 } from '@/constants';
 import { sendEvent } from '@/admin/umeng';
 import { useList } from '@/layouts/content';
-import { onListFilterChangeByKey, translate } from '@/utils';
+import {
+  onListFilterChangeByKey,
+  setupListComponent,
+  translate,
+} 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
@@ -98,11 +103,10 @@ const useGitList = () => {
       label: t('views.gits.table.columns.status'),
       icon: ['fa', 'heartbeat'],
       width: '150',
-      value: (row: Git) =>
-        h(GitStatus, {
-          status: row.status,
-          error: row.error,
-        }),
+      value: (row: Git) => {
+        const { _id, status, error } = row;
+        return h(GitStatus, { id: _id, status, error });
+      },
       hasSort: true,
       hasFilter: true,
       allowFilterSearch: true,
@@ -145,6 +149,9 @@ const useGitList = () => {
     tableColumns,
   } as UseListOptions<Git>;
 
+  // init
+  setupListComponent(ns, store, []);
+
   return {
     ...useList<Git>(ns, store, opts),
   };
diff --git a/src/views/index.ts b/src/views/index.ts
index 07cb657d28e1b..b7278e891ccc2 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,20 +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 TagDetail from './tag/detail/TagDetail.vue';
-import TagDetailTabOverview from './tag/detail/tabs/TagDetailTabOverview.vue';
-import TagViewList from './tag/list/TagViewList.vue';
-import TaskDetail from './task/detail/TaskDetail.vue';
 import TaskDetailActionsCommon from './task/detail/actions/TaskDetailActionsCommon.vue';
 import TaskDetailActionsData from './task/detail/actions/TaskDetailActionsData.vue';
 import TaskDetailActionsLogs from './task/detail/actions/TaskDetailActionsLogs.vue';
 import TaskDetailTabData from './task/detail/tabs/TaskDetailTabData.vue';
 import TaskDetailTabLogs from './task/detail/tabs/TaskDetailTabLogs.vue';
 import TaskDetailTabOverview from './task/detail/tabs/TaskDetailTabOverview.vue';
+import TaskDetail from './task/detail/TaskDetail.vue';
 import TaskList from './task/list/TaskList.vue';
 import TokenList from './token/list/TokenList.vue';
-import UserDetail from './user/detail/UserDetail.vue';
 import UserDetailTabOverview from './user/detail/tabs/UserDetailTabOverview.vue';
+import UserDetail from './user/detail/UserDetail.vue';
 import UserList from './user/list/UserList.vue';
 
 export {
@@ -97,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,
@@ -133,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,
@@ -147,19 +144,16 @@ export {
   SpiderDetailTabTasks as ClSpiderDetailTabTasks,
   SpiderList as ClSpiderList,
   SystemDetail as ClSystemDetail,
-  TagDetail as ClTagDetail,
-  TagDetailTabOverview as ClTagDetailTabOverview,
-  TagViewList as ClTagViewList,
-  TaskDetail as ClTaskDetail,
   TaskDetailActionsCommon as ClTaskDetailActionsCommon,
   TaskDetailActionsData as ClTaskDetailActionsData,
   TaskDetailActionsLogs as ClTaskDetailActionsLogs,
   TaskDetailTabData as ClTaskDetailTabData,
   TaskDetailTabLogs as ClTaskDetailTabLogs,
   TaskDetailTabOverview as ClTaskDetailTabOverview,
+  TaskDetail as ClTaskDetail,
   TaskList as ClTaskList,
   TokenList as ClTokenList,
-  UserDetail as ClUserDetail,
   UserDetailTabOverview as ClUserDetailTabOverview,
+  UserDetail as ClUserDetail,
   UserList as ClUserList,
 };
diff --git a/src/views/spider/list/useSpiderList.ts b/src/views/spider/list/useSpiderList.ts
index 5e735ac405c9b..1b95d84b61333 100644
--- a/src/views/spider/list/useSpiderList.ts
+++ b/src/views/spider/list/useSpiderList.ts
@@ -182,7 +182,7 @@ const useSpiderList = () => {
       value: (row: Spider) => {
         const { error, status } = row.stat?.last_task || {};
         if (!status) return;
-        return h(TaskStatus, { status, error } as TaskStatusProps);
+        return h(TaskStatus, { status, error });
       },
     },
     {
diff --git a/src/views/tag/detail/TagDetail.vue b/src/views/tag/detail/TagDetail.vue
deleted file mode 100644
index 267b55d799268..0000000000000
--- a/src/views/tag/detail/TagDetail.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <cl-list-layout store-namespace="tag"> </cl-list-layout>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import DetailLayout from '@/layouts/content/detail/DetailLayout.vue';
-
-export default defineComponent({
-  name: 'TagDetail',
-  setup(props, { emit }) {
-    return {};
-  },
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/views/tag/detail/tabs/TagDetailTabOverview.vue b/src/views/tag/detail/tabs/TagDetailTabOverview.vue
deleted file mode 100644
index fdab146c4f5ba..0000000000000
--- a/src/views/tag/detail/tabs/TagDetailTabOverview.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div class="tag-detail-tab-overview">
-    <cl-tag-form />
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TagDetailTabOverview',
-  setup() {
-    return {};
-  },
-});
-</script>
-<style lang="scss" scoped>
-.tag-detail-tab-overview {
-  margin: 20px;
-}
-</style>
diff --git a/src/views/tag/list/TagViewList.vue b/src/views/tag/list/TagViewList.vue
deleted file mode 100644
index d62a8ce7912ba..0000000000000
--- a/src/views/tag/list/TagViewList.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <cl-list-layout
-    class="tag-list"
-    :action-functions="actionFunctions"
-    :nav-actions="navActions"
-    :table-pagination="tablePagination"
-    :table-columns="tableColumns"
-    :table-data="tableData"
-    :table-total="tableTotal"
-  >
-    <template #extra>
-      <!-- Dialogs (handled by store) -->
-      <cl-create-edit-tag-dialog />
-      <!-- ./Dialogs -->
-    </template>
-  </cl-list-layout>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import useTagList from '@/views/tag/list/useTagList';
-
-export default defineComponent({
-  name: 'TagViewList',
-  setup() {
-    const {
-      navActions,
-      tableColumns,
-      tableData,
-      tableTotal,
-      tablePagination,
-      actionFunctions,
-    } = useTagList();
-
-    return {
-      navActions,
-      tableColumns,
-      tableData,
-      tableTotal,
-      tablePagination,
-      actionFunctions,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.tag-list {
-  .nav-actions {
-    border-bottom: none;
-  }
-
-  .content {
-    background-color: var(--container-white-bg);
-  }
-}
-</style>
diff --git a/src/views/tag/list/useTagList.ts b/src/views/tag/list/useTagList.ts
deleted file mode 100644
index 30033324041b4..0000000000000
--- a/src/views/tag/list/useTagList.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useStore } from 'vuex';
-import { computed, h } from 'vue';
-import useList from '@/layouts/content/list/list';
-import NavLink from '@/components/nav/NavLink.vue';
-import ColorPicker from '@/components/color/ColorPicker.vue';
-import { getActionColumn } from '@/utils/table';
-import { ACTION_ADD, ACTION_DELETE, ACTION_VIEW } from '@/constants/action';
-import Tag from '@/components/tag/Tag.vue';
-import { translate } from '@/utils/i18n';
-import { sendEvent } from '@/admin/umeng';
-
-// i18n
-const t = translate;
-
-const useTagList = () => {
-  // store
-  const ns = 'tag';
-  const store = useStore<RootStoreState>();
-  const { commit } = store;
-
-  // nav actions
-  const navActions = computed<ListActionGroup[]>(() => [
-    {
-      name: 'common',
-      children: [
-        {
-          action: ACTION_ADD,
-          id: 'add-btn',
-          className: 'add-btn',
-          buttonType: 'label',
-          label: t('views.tags.navActions.new.label'),
-          tooltip: t('views.tags.navActions.new.tooltip'),
-          icon: ['fa', 'plus'],
-          type: 'success',
-          onClick: () => {
-            commit(`${ns}/showDialog`, 'create');
-
-            sendEvent('click_tag_list_new');
-          },
-        },
-      ],
-    },
-  ]);
-
-  // table columns
-  const tableColumns = computed<TableColumns<Tag>>(() => [
-    {
-      key: 'name',
-      label: t('views.tags.table.columns.name'),
-      icon: ['fa', 'font'],
-      width: '160',
-      align: 'left',
-      value: (row: Tag) =>
-        h(NavLink, {
-          path: `/tags/${row._id}`,
-          label: row.name,
-        }),
-    },
-    {
-      key: 'color',
-      label: t('views.tags.table.columns.color'),
-      icon: ['fa', 'palette'],
-      width: '120',
-      value: ({ color }: Tag) => {
-        return h(ColorPicker, {
-          modelValue: color,
-          disabled: true,
-        });
-      },
-    },
-    {
-      key: 'col',
-      label: t('views.tags.table.columns.model'),
-      icon: ['fa', 'table'],
-      width: '120',
-      // value: ({color}: Tag) => {
-      //   return h(Tag, {
-      //     modelValue: color,
-      //     disabled: true,
-      //   });
-      // }
-    },
-    {
-      key: 'description',
-      label: t('views.tags.table.columns.description'),
-      icon: ['fa', 'comment-alt'],
-      width: 'auto',
-    },
-    getActionColumn('/tags', ns, [ACTION_VIEW, ACTION_DELETE]),
-  ]);
-
-  // options
-  const opts = {
-    navActions,
-    tableColumns,
-  } as UseListOptions<Tag>;
-
-  return {
-    ...useList<Tag>(ns, store, opts),
-  };
-};
-
-export default useTagList;