feat: updated git detail page

crawlab-team · Jun 19, 2024 · 8b7ff92 · 8b7ff92
1 parent bfa60bc
commit 8b7ff92
Show file tree

Hide file tree

Showing 15 changed files with 179 additions and 104 deletions.
diff --git a/src/components/file/FileTab.vue b/src/components/file/FileTab.vue
@@ -5,13 +5,13 @@ import { ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
-  ns: ListStoreNamespace,
-  activeId: string,
-  content: string,
-  navItems: FileNavItem[],
-  activeNavItem?: FileNavItem,
-  services: FileServices<BaseModel>,
-  defaultFilePaths: string[],
+  ns: ListStoreNamespace;
+  activeId: string;
+  content: string;
+  navItems: FileNavItem[];
+  activeNavItem?: FileNavItem;
+  services: FileServices<BaseModel>;
+  defaultFilePaths: string[];
 }>();
 
 // i18n
@@ -87,7 +87,7 @@ const onNavItemDbClick = async (item: FileNavItem) => {
 
 const onNavItemDrop = async (
   draggingItem: FileNavItem,
-  dropItem: FileNavItem,
+  dropItem: FileNavItem
 ) => {
   const { activeId } = props;
   const dirPath = dropItem.path !== '~' ? dropItem.path : '';
@@ -152,15 +152,15 @@ const onDropFiles = async (files: InputFile[]) => {
   await Promise.all(
     files.map(f => {
       return saveFileBinary(activeId, f.path as string, f as File);
-    }),
+    })
   );
   await listRootDir(activeId);
 };
 
 const onCreateWithAi = async (
   name: string,
   sourceCode: string,
-  item?: FileNavItem,
+  item?: FileNavItem
 ) => {
   const { activeId } = props;
   let path = `${pathSep}${name}`;
@@ -198,6 +198,7 @@ onBeforeUnmount(() => {
   const { ns } = props;
   store.commit(`${ns}/resetFileContent`);
   store.commit(`${ns}/resetDefaultFilePaths`);
+  store.commit(`${ns}/resetFileNavItems`);
 });
 </script>
 

diff --git a/src/i18n/lang/en/components/git.ts b/src/i18n/lang/en/components/git.ts
@@ -42,6 +42,11 @@ const git: LComponentsGit = {
       },
     },
   },
+  branches: {
+    new: 'New Branch',
+    local: 'Local',
+    remote: 'Remote',
+  },
   actions: {
     title: 'Git Actions',
     label: {

diff --git a/src/i18n/lang/zh/components/git.ts b/src/i18n/lang/zh/components/git.ts
@@ -42,6 +42,11 @@ const git: LComponentsGit = {
       },
     },
   },
+  branches: {
+    new: '新建分支',
+    local: '本地',
+    remote: '远程',
+  },
   actions: {
     title: 'Git 操作',
     label: {

diff --git a/src/interfaces/i18n/components/git.d.ts b/src/interfaces/i18n/components/git.d.ts
@@ -42,6 +42,11 @@ interface LComponentsGit {
       };
     };
   };
+  branches: {
+    new: string;
+    local: string;
+    remote: string;
+  };
   actions: {
     title: string;
     label: {

diff --git a/src/interfaces/store/modules/git.d.ts b/src/interfaces/store/modules/git.d.ts
@@ -7,7 +7,7 @@ type GitStoreModule = BaseModule<
 
 interface GitStoreState extends BaseStoreState<Git>, BaseFileStoreState {
   gitData?: GitData;
-  gitCurrentBranchLoading: boolean;
+  gitDataLoading: boolean;
   gitChangeSelection: TableData<GitChange>;
   gitRemoteRefs: GitRef[];
   gitBranches: GitRef[];
@@ -24,9 +24,9 @@ interface GitStoreGetters extends BaseStoreGetters<Git> {
 interface GitStoreMutations
   extends BaseStoreMutations<Git>,
     BaseFileStoreMutations<GitStoreState> {
-  resetAll: StoreMutation<GitStoreState>;
   setGitData: StoreMutation<GitStoreState, GitData>;
   resetGitData: StoreMutation<GitStoreState>;
+  setGitDataLoading: StoreMutation<GitStoreState, boolean>;
   setGitChangeSelection: StoreMutation<GitStoreState, GitChange[]>;
   resetGitChangeSelection: StoreMutation<GitStoreState>;
   setGitRemoteRefs: StoreMutation<GitStoreState, GitRef[]>;
@@ -35,7 +35,6 @@ interface GitStoreMutations
   resetGitBranches: StoreMutation<GitStoreState>;
   setGitTags: StoreMutation<GitStoreState, GitRef[]>;
   resetGitTags: StoreMutation<GitStoreState>;
-  setGitCurrentBranchLoading: StoreMutation<GitStoreState, boolean>;
 }
 
 interface GitStoreActions

diff --git a/src/interfaces/store/utils/file.d.ts b/src/interfaces/store/utils/file.d.ts
@@ -7,6 +7,7 @@ interface BaseFileStoreState {
 
 interface BaseFileStoreMutations<S> {
   setFileNavItems: StoreMutation<S, FileNavItem[]>;
+  resetFileNavItems: StoreMutation<S>;
   setActiveFileNavItem: StoreMutation<S, FileNavItem>;
   resetActiveFileNavItem: StoreMutation<S>;
   setFileContent: StoreMutation<S, string>;

diff --git a/src/store/modules/git.ts b/src/store/modules/git.ts
@@ -41,11 +41,11 @@ const state = {
     { id: TAB_NAME_IGNORE, title: t('common.tabs.ignore') },
   ],
   gitData: undefined,
+  gitDataLoading: false,
   gitChangeSelection: [],
   gitRemoteRefs: [],
   gitBranches: [],
   gitTags: [],
-  gitCurrentBranchLoading: false,
 } as GitStoreState;
 
 const getters = {
@@ -72,22 +72,16 @@ const getters = {
 const mutations = {
   ...getDefaultStoreMutations<Git>(),
   ...getBaseFileStoreMutations<GitStoreState>(),
-  resetAll: (state: GitStoreState) => {
-    state.gitData = {};
-    state.gitChangeSelection = [];
-    state.gitRemoteRefs = [];
-    state.gitBranches = [];
-    state.gitTags = [];
-    state.gitCurrentBranchLoading = false;
-  },
   setGitData(state: GitStoreState, gitData: GitData) {
     state.gitData = gitData;
   },
   resetGitData: (state: GitStoreState) => {
     state.gitData = {};
   },
+  setGitDataLoading: (state: GitStoreState, loading: boolean) => {
+    state.gitDataLoading = loading;
+  },
   setGitChangeSelection: (state: GitStoreState, selection: GitChange[]) => {
-    debugger;
     state.gitChangeSelection = selection;
   },
   resetGitChangeSelection: (state: GitStoreState) => {
@@ -111,9 +105,6 @@ const mutations = {
   resetGitTags: (state: GitStoreState) => {
     state.gitTags = [];
   },
-  setGitCurrentBranchLoading: (state: GitStoreState, loading: boolean) => {
-    state.gitCurrentBranchLoading = loading;
-  },
 } as GitStoreMutations;
 
 const actions = {
@@ -123,13 +114,13 @@ const actions = {
     { commit }: StoreActionContext<GitStoreState>,
     { id }: { id: string }
   ) => {
+    commit('setGitDataLoading', true);
     try {
-      commit('setGitCurrentBranchLoading', true);
       const res = await get(`${endpoint}/${id}/git`);
       commit('setGitData', res?.data || {});
       return res;
     } finally {
-      commit('setGitCurrentBranchLoading', false);
+      commit('setGitDataLoading', false);
     }
   },
   cloneGit: async (

diff --git a/src/store/utils/file.ts b/src/store/utils/file.ts
@@ -19,6 +19,9 @@ export const getBaseFileStoreMutations = <
     setFileNavItems: (state: S, navItems: FileNavItem[]) => {
       state.fileNavItems = navItems;
     },
+    resetFileNavItems: (state: S) => {
+      state.fileNavItems = [];
+    },
     setActiveFileNavItem: (state: S, navItem: FileNavItem) => {
       state.activeNavItem = navItem;
     },

diff --git a/src/views/git/detail/GitDetail.vue b/src/views/git/detail/GitDetail.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
+import { onBeforeUnmount } from 'vue';
+import { useStore } from 'vuex';
 import useGitDetail from '@/views/git/detail/useGitDetail';
 
 const { activeTabName } = useGitDetail();
+
+const ns = 'git';
+const store = useStore();
+
+onBeforeUnmount(() => store.commit(`${ns}/resetGitData`));
+onBeforeUnmount(() => store.commit(`${ns}/resetGitBranches`));
 </script>
 
 <template>

diff --git a/src/views/git/detail/actions/GitDetailActionsCommon.vue b/src/views/git/detail/actions/GitDetailActionsCommon.vue
@@ -5,6 +5,7 @@ import { translate } from '@/utils';
 import useGitDetail from '@/views/git/detail/useGitDetail';
 import { ElMessage } from 'element-plus';
 import { GIT_STATUS_READY } from '@/constants';
+import ClFormItem from '@/components/form/FormItem.vue';
 
 const t = translate;
 
@@ -23,13 +24,22 @@ const isDisabled = computed<boolean>(
 
 const {
   gitCurrentBranch,
-  gitCurrentBranchLoading,
+  gitDataLoading,
+  gitLocalBranches,
+  gitLocalBranchesDict,
+  gitRemoteBranches,
+  gitRemoteBranchesDict,
   onClickPull,
   onClickCommit,
 } = useGitDetail();
 
 const isBranchClicked = ref<boolean>(false);
 
+const getRemoteBranchFromLocalBranch = (localBranch: GitRef) => {
+  if (!localBranch.hash) return;
+  return gitRemoteBranchesDict.value[localBranch.hash]?.name;
+};
+
 const onBranchClick = () => {
   isBranchClicked.value = true;
 };
@@ -64,6 +74,71 @@ const onAutoPullChange = async () => {
         :status="gitForm.status"
         :error="gitForm.error"
       />
+      <div class="branch">
+        <!--        <cl-tag-->
+        <!--          class-name="current-branch"-->
+        <!--          type="primary"-->
+        <!--          :icon="['fa', 'code-branch']"-->
+        <!--          size="large"-->
+        <!--          :label="gitCurrentBranch"-->
+        <!--          @click="onBranchClick"-->
+        <!--        >-->
+        <!--          <template #tooltip>-->
+        <!--            <span>{{ t('components.git.common.currentBranch') }}:</span>-->
+        <!--            <span style="color: #409eff; margin-left: 5px; font-weight: bolder">-->
+        <!--              {{ gitCurrentBranch }}-->
+        <!--            </span>-->
+        <!--          </template>-->
+        <!--        </cl-tag>-->
+        <el-select
+          class="current-branch"
+          :model-value="gitCurrentBranch"
+          :disabled="isDisabled || gitDataLoading"
+          :placeholder="t('common.status.loading')"
+        >
+          <template #label="{ label, value }">
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              "
+            >
+              <span style="flex: 0; margin-right: 10px">
+                <cl-icon :icon="['fa', 'code-branch']" />
+              </span>
+              <span style="flex: 1">{{ label }}</span>
+            </div>
+          </template>
+          <el-option
+            v-for="branch in gitLocalBranches"
+            :key="branch.hash"
+            :label="branch.name"
+            :value="branch.name"
+          >
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: 24px;
+              "
+            >
+              <span>{{ branch.name }}</span>
+              <span
+                style="color: var(--cl-disabled-color); font-weight: normal"
+              >
+                {{ getRemoteBranchFromLocalBranch(branch) }}
+              </span>
+            </div>
+          </el-option>
+          <template #footer>
+            <cl-button type="default">
+              {{ t('components.git.branches.new') }}
+            </cl-button>
+          </template>
+        </el-select>
+      </div>
       <cl-fa-icon-button
         :icon="['fa', 'download']"
         :tooltip="t('components.git.actions.tooltip.pull')"
@@ -78,34 +153,6 @@ const onAutoPullChange = async () => {
         :disabled="isDisabled"
         @click="onClickCommit"
       />
-      <div v-if="gitCurrentBranch || gitCurrentBranchLoading" class="branch">
-        <cl-tag
-          v-if="gitCurrentBranchLoading"
-          class-name="current-branch-loading"
-          type="warning"
-          :label="t('components.git.common.status.loading.label')"
-          :tooltip="t('components.git.common.status.loading.tooltip')"
-          :icon="['fa', 'spinner']"
-          spinning
-          size="large"
-        />
-        <cl-tag
-          v-else
-          class-name="current-branch"
-          type="primary"
-          :icon="['fa', 'code-branch']"
-          size="large"
-          :label="gitCurrentBranch"
-          @click="onBranchClick"
-        >
-          <template #tooltip>
-            <span>{{ t('components.git.common.currentBranch') }}:</span>
-            <span style="color: #409eff; margin-left: 5px; font-weight: bolder">
-              {{ gitCurrentBranch }}
-            </span>
-          </template>
-        </cl-tag>
-      </div>
       <!--      <cl-switch-->
       <!--        v-model="gitForm.auto_pull"-->
       <!--        :active-text="t('components.git.form.autoPull')"-->
@@ -116,4 +163,9 @@ const onAutoPullChange = async () => {
   </cl-nav-action-group>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.current-branch {
+  width: 120px;
+  margin-right: 10px;
+}
+</style>