feat: added git checkout

src/components/git/CreateGitBranchDialog.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useStore } from 'vuex';
+import useGitDetail from '@/views/git/detail/useGitDetail';
+import { translate } from '@/utils';
+
+const t = translate;
+
+// store
+const ns = 'git';
+const store = useStore();
+const { git: state } = store.state as RootStoreState;
+const {
+  activeId,
+  gitCurrentBranch,
+  gitRemoteBranches,
+  gitLocalBranchesDict,
+  gitRemoteBranchesDict,
+} = useGitDetail();
+
+const visible = computed<boolean>(
+  () => state.activeDialogKey === 'createBranch'
+);
+
+const filteredRemoteBranches = computed(() =>
+  gitRemoteBranches.value?.filter(branch => {
+    if (!branch.hash) return;
+    const localBranch = gitLocalBranchesDict.value[branch.hash];
+    return !localBranch || localBranch.name !== gitCurrentBranch.value;
+  })
+);
+
+const internalRemoteBranch = ref<string>();
+watch(filteredRemoteBranches, () => {
+  internalRemoteBranch.value = filteredRemoteBranches.value?.[0]?.name;
+});
+
+const onConfirm = async () => {
+  store.dispatch(`${ns}/gitCheckoutBranch`, { id: activeId.value });
+};
+
+const onClose = () => {
+  store.commit(`${ns}/hideDialog`);
+};
+</script>
+
+<template>
+  <cl-dialog
+    :visible="visible"
+    :title="t('components.git.branches.new')"
+    @confirm="onConfirm"
+    @close="onClose"
+  >
+    <cl-form>
+      <cl-form-item :span="4" :label="t('components.git.branches.remote')">
+        <el-select v-model="internalRemoteBranch">
+          <el-option
+            v-for="branch in filteredRemoteBranches"
+            :key="branch.hash"
+            :label="branch.name"
+            :value="branch.name"
+          />
+        </el-select>
+      </cl-form-item>
+    </cl-form>
+  </cl-dialog>
+</template>
+
+<style lang="scss" scoped></style>

src/components/index.ts

@@ -41,7 +41,6 @@ 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';
@@ -51,10 +50,11 @@ 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 GitFileStatus from './git/GitFileStatus.vue';
 import GitForm from './git/GitForm.vue';
 import GitStatus from './git/GitStatus.vue';
+import UploadGitFilesDialog from './git/UploadGitFilesDialog.vue';
 import AtomMaterialIcon from './icon/AtomMaterialIcon.vue';
 import Icon from './icon/Icon.vue';
 import MenuItemIcon from './icon/MenuItemIcon.vue';
@@ -189,7 +189,6 @@ export {
   FileTab as ClFileTab,
   FileUpload as ClFileUpload,
   UploadFilesDialog as ClUploadFilesDialog,
-  UploadGitFilesDialog as ClUploadGitFilesDialog,
   FilterCondition as ClFilterCondition,
   FilterConditionList as ClFilterConditionList,
   FilterInput as ClFilterInput,
@@ -199,10 +198,11 @@ export {
   FormReadonlyValue as ClFormReadonlyValue,
   FormTable as ClFormTable,
   FormTableField as ClFormTableField,
-  CreateEditGitDialog as ClCreateEditGitDialog,
+  CreateGitBranchDialog as ClCreateGitBranchDialog,
   GitFileStatus as ClGitFileStatus,
   GitForm as ClGitForm,
   GitStatus as ClGitStatus,
+  UploadGitFilesDialog as ClUploadGitFilesDialog,
   AtomMaterialIcon as ClAtomMaterialIcon,
   Icon as ClIcon,
   MenuItemIcon as ClMenuItemIcon,

src/components/nav/NavSidebar.vue

@@ -1,3 +1,92 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { ElMenu } from 'element-plus';
+import { emptyArrayFunc } from '@/utils/func';
+import { translate } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    type: NavSidebarType;
+    collapsed: boolean;
+    showActions: boolean;
+    items: NavItem[];
+    activeKey: string;
+    showCheckbox: boolean;
+    defaultCheckedKeys: string[];
+    defaultExpandedKeys: string[];
+    defaultExpandAll: boolean;
+    noSearch: boolean;
+  }>(),
+  {
+    type: 'list',
+    collapsed: false,
+    showActions: false,
+    items: emptyArrayFunc,
+    activeKey: '',
+    showCheckbox: false,
+    defaultCheckedKeys: emptyArrayFunc,
+    defaultExpandedKeys: emptyArrayFunc,
+    defaultExpandAll: false,
+    noSearch: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'select', item: NavItem): void;
+  (e: 'check', item: NavItem, checked: boolean, items: NavItem[]): void;
+}>();
+
+// i18n
+const t = translate;
+
+const searchString = ref('');
+const navMenu = ref<typeof ElMenu | null>(null);
+
+const filteredItems = computed<NavItem[]>(() => {
+  const items = props.items as NavItem[];
+  if (!searchString.value) return items;
+  return items.filter(d =>
+    d.title
+      ?.toLocaleLowerCase()
+      .includes(searchString.value.toLocaleLowerCase())
+  );
+});
+
+const classes = computed(() => {
+  const { collapsed } = props;
+  const cls = [];
+  if (collapsed) cls.push('collapsed');
+  return cls;
+});
+
+const onSelectList = (index: number) => {
+  emit('select', filteredItems.value[index]);
+};
+
+const onSelectTree = (item: NavItem) => {
+  emit('select', item);
+};
+
+const onCheckTree = (item: NavItem, checked: boolean, items: NavItem[]) => {
+  emit('check', item, checked, items);
+};
+
+const scroll = (id: string) => {
+  const idx = filteredItems.value.findIndex(d => d.id === id);
+  if (idx === -1) return;
+  const navSidebarItemHeightNumber = 48; // var(--cl-nav-sidebar-item-height)
+  if (!navMenu.value) return;
+  const $el = navMenu.value.$el as HTMLDivElement;
+  $el.scrollTo({
+    top: navSidebarItemHeightNumber * idx,
+  });
+};
+
+defineExpose({
+  scroll,
+});
+</script>
+
 <template>
   <div class="nav-sidebar" :class="classes">
     <div v-if="!noSearch" class="search">
@@ -36,123 +125,7 @@
     <cl-empty v-else />
   </div>
 </template>
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue';
-import { ElMenu } from 'element-plus';
-import { useI18n } from 'vue-i18n';
-import { emptyArrayFunc } from '@/utils/func';
-
-export const navSidebarContentProps = {
-  items: {
-    type: Array as PropType<NavItem[]>,
-    default: emptyArrayFunc,
-  },
-  activeKey: {
-    type: String,
-  },
-  showCheckbox: {
-    type: Boolean,
-    default: false,
-  },
-};
 
-export default defineComponent({
-  name: 'NavSidebar',
-  props: {
-    type: {
-      type: String as PropType<NavSidebarType>,
-      default: 'list',
-    },
-    collapsed: {
-      type: Boolean,
-    },
-    showActions: {
-      type: Boolean,
-    },
-    ...navSidebarContentProps,
-    defaultCheckedKeys: {
-      type: Array as PropType<string[]>,
-      default: emptyArrayFunc,
-    },
-    defaultExpandedKeys: {
-      type: Array as PropType<string[]>,
-      default: emptyArrayFunc,
-    },
-    defaultExpandAll: {
-      type: Boolean,
-      default: false,
-    },
-    noSearch: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['select', 'check'],
-  setup(props: NavSidebarProps, { emit }) {
-    // i18n
-    const { t } = useI18n();
-
-    const toggling = ref(false);
-    const searchString = ref('');
-    const navMenu = ref<typeof ElMenu | null>(null);
-    const toggleTooltipValue = ref(false);
-
-    const filteredItems = computed<NavItem[]>(() => {
-      const items = props.items as NavItem[];
-      if (!searchString.value) return items;
-      return items.filter(d =>
-        d.title
-          ?.toLocaleLowerCase()
-          .includes(searchString.value.toLocaleLowerCase())
-      );
-    });
-
-    const classes = computed(() => {
-      const { collapsed } = props;
-      const cls = [];
-      if (collapsed) cls.push('collapsed');
-      return cls;
-    });
-
-    const onSelectList = (index: number) => {
-      emit('select', filteredItems.value[index]);
-    };
-
-    const onSelectTree = (item: NavItem) => {
-      emit('select', item);
-    };
-
-    const onCheckTree = (item: NavItem, checked: boolean, items: NavItem[]) => {
-      emit('check', item, checked, items);
-    };
-
-    const scroll = (id: string) => {
-      const idx = filteredItems.value.findIndex(d => d.id === id);
-      if (idx === -1) return;
-      const navSidebarItemHeightNumber = 48; // var(--cl-nav-sidebar-item-height)
-      if (!navMenu.value) return;
-      const $el = navMenu.value.$el as HTMLDivElement;
-      $el.scrollTo({
-        top: navSidebarItemHeightNumber * idx,
-      });
-    };
-
-    return {
-      toggling,
-      searchString,
-      navMenu,
-      toggleTooltipValue,
-      filteredItems,
-      classes,
-      onSelectList,
-      onSelectTree,
-      onCheckTree,
-      scroll,
-      t,
-    };
-  },
-});
-</script>
 <style scoped lang="scss">
 .nav-sidebar {
   height: 100%;

src/i18n/lang/en/common.ts

@@ -47,6 +47,7 @@ const common: LCommon = {
       start: 'Are you sure to start?',
       deleteSelected: 'Are you sure to delete selected items?',
       proceed: 'Are you sure to proceed?',
+      create: 'Are you sure to create?',
     },
   },
   message: {

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

@@ -44,8 +44,8 @@ const git: LComponentsGit = {
   },
   branches: {
     new: 'New Branch',
-    local: 'Local',
-    remote: 'Remote',
+    local: 'Local Branch',
+    remote: 'Remote Branch',
   },
   actions: {
     title: 'Git Actions',

src/i18n/lang/zh/common.ts

@@ -47,6 +47,7 @@ const common: LCommon = {
       start: '您是否确定启动?',
       deleteSelected: '您是否确定删除已选项?',
       proceed: '您是否确定继续?',
+      create: '您是否确定创建?',
     },
   },
   message: {