feat: optimized branch checkout

src/components/button/Button.vue

@@ -35,7 +35,7 @@ const cls = computed<string>(() => {
 
 <template>
   <el-tooltip :content="tooltip" :disabled="!tooltip">
-    <span :id="id" :class="['button-wrapper', cls].join(' ')">
+    <div :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>
-    </span>
+    </div>
   </el-tooltip>
 </template>
 

src/components/button/IconButton.vue

@@ -11,8 +11,8 @@ withDefaults(defineProps<IconButtonProps>(), {});
 
 <template>
   <el-tooltip :content="tooltip ? tooltip : undefined">
-    <span>
-      <el-button
+    <div class="icon-button button">
+      <cl-button
         :circle="circle"
         :disabled="disabled"
         :icon="icon"
@@ -21,10 +21,9 @@ withDefaults(defineProps<IconButtonProps>(), {});
         :size="size"
         :title="tooltip"
         :type="type"
-        class="icon-button button"
         @click="() => $emit('click')"
       />
-    </span>
+    </div>
   </el-tooltip>
 </template>
 

src/components/button/LabelButton.vue

@@ -14,23 +14,25 @@ withDefaults(defineProps<LabelButtonProps>(), {
 </script>
 
 <template>
-  <cl-button
-    :circle="circle"
-    :disabled="disabled"
-    :plain="plain"
-    :round="round"
-    :size="size"
-    :is-icon="isIcon"
-    :tooltip="tooltip"
-    :type="type"
-    :id="id"
-    :class-name="['label-button', className].join(' ')"
-    :loading="loading"
-    @click="() => $emit('click')"
-  >
-    <font-awesome-icon v-if="icon" :icon="icon" class="icon" />
-    {{ label }}
-  </cl-button>
+  <div class="label-button">
+    <cl-button
+      :circle="circle"
+      :disabled="disabled"
+      :plain="plain"
+      :round="round"
+      :size="size"
+      :is-icon="isIcon"
+      :tooltip="tooltip"
+      :type="type"
+      :id="id"
+      :class-name="['label-button', className].join(' ')"
+      :loading="loading"
+      @click="() => $emit('click')"
+    >
+      <font-awesome-icon v-if="icon" :icon="icon" class="icon" />
+      {{ label }}
+    </cl-button>
+  </div>
 </template>
 
 <style lang="scss" scoped></style>

src/components/form/FormItem.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFormItem' });
-
 import {
   computed,
   defineComponent,

src/components/git/GitBranchSelect.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClGitBranchSelect' });
+
+import { computed, ref, watch } from 'vue';
+import { emptyArrayFunc, translate } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    localBranches: GitRef[];
+    remoteBranches: GitRef[];
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+  }>(),
+  {
+    localBranches: emptyArrayFunc,
+    remoteBranches: emptyArrayFunc,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'modelValue:update', value: string): void;
+  (e: 'change', value: string): void;
+}>();
+
+const t = translate;
+
+const getRemoteBranchFromLocalBranch = (localBranch: GitRef) => {
+  const { remoteBranches } = props;
+  if (!localBranch.hash) return;
+  return remoteBranches.find(
+    remoteBranch => remoteBranch.hash === localBranch.hash
+  );
+};
+
+const options = computed(() => {
+  const { localBranches } = props;
+  return localBranches.map(branch => {
+    return {
+      value: branch.name,
+      label: branch.name,
+      branch,
+    };
+  });
+});
+
+const selectRef = ref<HTMLElement>();
+
+const internalValue = ref<string>(props.modelValue);
+watch(internalValue, () => emit('modelValue:update', internalValue.value));
+watch(
+  () => props.modelValue,
+  value => {
+    internalValue.value = value;
+  }
+);
+</script>
+
+<template>
+  <div ref="selectRef" class="git-branch-select">
+    <el-select
+      :class="className"
+      v-model="internalValue"
+      :disabled="disabled || loading"
+      :placeholder="t('components.git.branches.select')"
+      @change="() => emit('change', internalValue)"
+    >
+      <template #label="{ label }">
+        <div>
+          <cl-icon v-if="!loading" :icon="['fa', 'code-branch']" />
+          <cl-icon v-else :icon="['fa', 'spinner']" spinning />
+          <span style="margin-left: 5px">{{ label }}</span>
+        </div>
+      </template>
+      <el-option
+        v-for="op in options"
+        :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>
+          <span style="color: var(--cl-disabled-color); font-weight: normal">
+            {{ getRemoteBranchFromLocalBranch(op.branch)?.name }}
+          </span>
+        </div>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.git-branch-select {
+  min-width: 150px;
+  margin-right: 10px;
+}
+</style>

src/components/index.ts

@@ -51,6 +51,7 @@ import FormReadonlyValue from './form/FormReadonlyValue.vue';
 import FormTable from './form/FormTable.vue';
 import FormTableField from './form/FormTableField.vue';
 import CreateGitBranchDialog from './git/CreateGitBranchDialog.vue';
+import GitBranchSelect from './git/GitBranchSelect.vue';
 import GitFileStatus from './git/GitFileStatus.vue';
 import GitForm from './git/GitForm.vue';
 import GitStatus from './git/GitStatus.vue';
@@ -199,6 +200,7 @@ export {
   FormTable as ClFormTable,
   FormTableField as ClFormTableField,
   CreateGitBranchDialog as ClCreateGitBranchDialog,
+  GitBranchSelect as ClGitBranchSelect,
   GitFileStatus as ClGitFileStatus,
   GitForm as ClGitForm,
   GitStatus as ClGitStatus,

src/components/tag/CheckTag.vue

@@ -75,6 +75,7 @@ const onMouseLeave = () => {
     :type="computedType"
     :effect="computedEffect"
     :icon="computedIcon"
+    :suffix-icon="suffixIcon"
     :spinning="spinning"
     :width="width"
     :class="['check-tag', className].join(' ')"

src/components/tag/LinkTag.vue

@@ -25,6 +25,7 @@ const onClick = () => {
     :color="color"
     :effect="effect"
     :icon="icon"
+    :suffix-icon="suffixIcon"
     :label="label"
     :spinning="spinning"
     :tooltip="tooltip"

src/components/tag/Tag.vue

@@ -10,7 +10,8 @@ export interface TagProps {
   color?: string;
   backgroundColor?: string;
   borderColor?: string;
-  icon?: string | string[];
+  icon?: Icon;
+  suffixIcon?: Icon;
   size?: BasicSize;
   spinning?: boolean;
   width?: string;
@@ -113,8 +114,13 @@ onMounted(() => {
       @mouseenter="$emit('mouseenter')"
       @mouseleave="$emit('mouseleave')"
     >
-      <cl-icon :icon="icon" :spinning="spinning" />
+      <span class="prefix-icon">
+        <cl-icon v-if="icon" :icon="icon" :spinning="spinning" />
+      </span>
       <span>{{ label || tag?.name }}</span>
+      <span class="suffix-icon">
+        <cl-icon v-if="suffixIcon" :icon="suffixIcon" />
+      </span>
     </el-tag>
     <template #content>
       <slot name="tooltip"></slot>
@@ -145,7 +151,11 @@ onMounted(() => {
   font-weight: bolder;
 }
 
-.tag:not(.no-label):deep(.icon) {
+.tag:not(.no-label):deep(.prefix-icon) {
   margin-right: 5px;
 }
+
+.tag:deep(.suffix-icon) {
+  margin-left: 5px;
+}
 </style>

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

@@ -43,6 +43,7 @@ const git: LComponentsGit = {
     },
   },
   branches: {
+    select: 'Select Branch',
     new: 'New Branch',
     local: 'Local Branch',
     remote: 'Remote Branch',

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

@@ -43,6 +43,7 @@ const git: LComponentsGit = {
     },
   },
   branches: {
+    select: '选择分支',
     new: '新建分支',
     local: '本地分支',
     remote: '远程分支',

src/interfaces/i18n/components/git.d.ts

@@ -43,6 +43,7 @@ interface LComponentsGit {
     };
   };
   branches: {
+    select: string;
     new: string;
     local: string;
     remote: string;

src/interfaces/store/modules/git.d.ts

@@ -12,6 +12,7 @@ interface GitStoreState extends BaseStoreState<Git>, BaseFileStoreState {
   gitChangeSelection: TableData<GitChange>;
   gitRemoteRefs: GitRef[];
   gitBranches: GitRef[];
+  gitRemoteBranches: GitRef[];
   gitTags: GitRef[];
 }
 
@@ -34,6 +35,8 @@ interface GitStoreMutations
   resetGitRemoteRefs: StoreMutation<GitStoreState>;
   setGitBranches: StoreMutation<GitStoreState, GitRef[]>;
   resetGitBranches: StoreMutation<GitStoreState>;
+  setGitRemoteBranches: StoreMutation<GitStoreState, GitRef[]>;
+  resetGitRemoteBranches: StoreMutation<GitStoreState>;
   setGitTags: StoreMutation<GitStoreState, GitRef[]>;
   resetGitTags: StoreMutation<GitStoreState>;
 }
@@ -45,11 +48,9 @@ interface GitStoreActions
   cloneGit: StoreAction<GitStoreState, { id: string }>;
   getGitRemoteRefs: StoreAction<GitStoreState, { id: string }>;
   getGitBranches: StoreAction<GitStoreState, { id: string }>;
+  getGitRemoteBranches: StoreAction<GitStoreState, { id: string }>;
   getGitTags: StoreAction<GitStoreState, { id: string }>;
-  gitCheckoutBranch: StoreAction<
-    GitStoreState,
-    { id: string; localBranch: string; remoteBranch: 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 }>;

src/store/modules/git.ts

@@ -45,6 +45,7 @@ const state = {
   gitChangeSelection: [],
   gitRemoteRefs: [],
   gitBranches: [],
+  gitRemoteBranches: [],
   gitTags: [],
 } as GitStoreState;
 
@@ -99,6 +100,12 @@ const mutations = {
   resetGitBranches: (state: GitStoreState) => {
     state.gitBranches = [];
   },
+  setGitRemoteBranches: (state: GitStoreState, refs: GitRef[]) => {
+    state.gitRemoteBranches = refs;
+  },
+  resetGitRemoteBranches: (state: GitStoreState) => {
+    state.gitRemoteBranches = [];
+  },
   setGitTags: (state: GitStoreState, refs: GitRef[]) => {
     state.gitTags = refs;
   },
@@ -143,10 +150,18 @@ const actions = {
     { commit }: StoreActionContext<GitStoreState>,
     { id }: { id: string }
   ) => {
-    const res = await get(`${endpoint}/${id}/git/branches`);
+    const res = await get(`${endpoint}/${id}/branches`);
     commit('setGitBranches', res?.data || []);
     return res;
   },
+  getGitRemoteBranches: async (
+    { commit }: StoreActionContext<GitStoreState>,
+    { id }: { id: string }
+  ) => {
+    const res = await get(`${endpoint}/${id}/remote/branches`);
+    commit('setGitRemoteBranches', res?.data || []);
+    return res;
+  },
   getGitTags: async (
     { commit }: StoreActionContext<GitStoreState>,
     { id }: { id: string }
@@ -157,22 +172,17 @@ const actions = {
   },
   gitCheckoutBranch: async (
     _: StoreActionContext<GitStoreState>,
-    {
-      id,
-      localBranch,
-      remoteBranch,
-    }: { id: string; localBranch: string; remoteBranch: string }
+    { id, branch }: { id: string; branch: string }
   ) => {
-    return await post(`${endpoint}/${id}/git/checkout/branch`, {
-      branch: localBranch,
-      remote_branch: remoteBranch,
+    return await post(`${endpoint}/${id}/branches/checkout`, {
+      branch,
     });
   },
   gitCheckoutTag: async (
     _: StoreActionContext<GitStoreState>,
     { id, tag }: { id: string; tag: string }
   ) => {
-    return await post(`${endpoint}/${id}/git/checkout/tag`, { tag });
+    return await post(`${endpoint}/${id}/tags/checkout`, { tag });
   },
   gitPull: async (
     { state }: StoreActionContext<GitStoreState>,