feat: updated git detail page

package.json

@@ -103,7 +103,7 @@
     "vue": "^3.3",
     "vue-clipboard3": "^2.0.0",
     "vue-debounce": "^4.0.0",
-    "vue-i18n": "9.1.9",
+    "vue-i18n": "9.13.1",
     "vue-router": "4.0.11",
     "vuex": "^4.0.0-0"
   },

src/components/button/LabelButton.vue

@@ -29,7 +29,7 @@ withDefaults(defineProps<LabelButtonProps>(), {
       :loading="loading"
       @click="() => $emit('click')"
     >
-      <font-awesome-icon v-if="icon" :icon="icon" class="icon" />
+      <font-awesome-icon v-if="icon && !loading" :icon="icon" class="icon" />
       {{ label }}
     </cl-button>
   </div>
@@ -41,4 +41,8 @@ withDefaults(defineProps<LabelButtonProps>(), {
   width: 20px;
   margin-right: 3px;
 }
+
+.label-button:deep(.el-icon.is-loading) {
+  width: 17px;
+}
 </style>

src/components/git/GitBranchSelect.vue

@@ -77,6 +77,7 @@ const onSelect = (value: string) => {
 const onPull = () => {
   selectRef.value?.blur();
   emit('pull');
+  console.debug('onPull');
 };
 
 const onCommit = () => {

src/components/table/Table.vue

@@ -34,6 +34,7 @@ const props = withDefaults(
     embedded?: boolean;
     border?: boolean;
     fit?: boolean;
+    emptyText?: string;
   }>(),
   {
     data: emptyArrayFunc,
@@ -140,6 +141,7 @@ defineExpose({
       :height="height"
       :max-height="maxHeight"
       :border="border"
+      :empty-text="emptyText"
       @selection-change="onSelectionChange"
     >
       <el-table-column

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

@@ -16,9 +16,10 @@ const git: LComponentsGit = {
     currentBranch: 'Current Branch',
     message: {
       success: {
-        checkout: 'Checkout successfully',
+        checkout: 'Switched to {branch}',
         pull: 'Pulled successfully',
-        commit: 'Committed successfully',
+        commit: '1 file committed | {fileCount} files committed',
+        push: 'Pushed successfully',
       },
     },
     messageBox: {
@@ -156,6 +157,7 @@ const git: LComponentsGit = {
         add: 'Add',
         rollback: 'Rollback',
       },
+      empty: 'Nothing to commit, work tree clean',
     },
   },
   ignore: {

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

@@ -16,9 +16,10 @@ const git: LComponentsGit = {
     currentBranch: '当前分支',
     message: {
       success: {
-        checkout: '成功签出',
+        checkout: '切换至 {branch}',
         pull: '成功拉取代码',
-        commit: '成功提交代码',
+        commit: '成果提交 {fileCount} 个文件',
+        push: '成功推送代码',
       },
     },
     messageBox: {
@@ -156,6 +157,7 @@ const git: LComponentsGit = {
         add: '添加',
         rollback: '回滚',
       },
+      empty: '没有需要提交的内容, 工作区是干净的',
     },
   },
   ignore: {

src/interfaces/global.d.ts

@@ -12,7 +12,7 @@ declare global {
     aplus_queue: { action: string; arguments: any[] }[];
     _app?: App;
     _t?: (path: string, args?: any) => string;
-    _tc?: (c: number, path: string) => string;
+    _tc?: (path: string, c: number, args?: any) => string;
     _tp?: (pluginName: string, path: string) => string;
     SimpleMDE: any;
   }

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

@@ -19,6 +19,7 @@ interface LComponentsGit {
         checkout: string;
         pull: string;
         commit: string;
+        push: string;
       };
     };
     messageBox: {
@@ -156,6 +157,7 @@ interface LComponentsGit {
         add: string;
         rollback: string;
       };
+      empty: string;
     };
   };
   ignore: {

src/interfaces/i18n/index.d.ts

@@ -11,7 +11,7 @@ export declare global {
     views: LViews;
   }
 
-  type LI18n = I18n<{ en: L; zh: L }, unknown, unknown, false>;
+  type LI18n = I18n<{ en: L; zh: L }, {}, {}, string, false>;
 }
 
 export * from './components';

src/utils/i18n.ts

@@ -2,21 +2,25 @@ import { getI18n } from '@/i18n';
 import { updateTitle } from '@/utils/dom';
 import { LOCAL_STORAGE_KEY_LANG } from '@/constants/localStorage';
 
-export const translate = (path: string, args?: any): string => {
+export const translate = (
+  path: string,
+  number?: any,
+  args?: Record<string, any>
+): string => {
   const i18n = getI18n();
   const global = i18n.global;
   const { t } = global;
-  const res = args !== undefined ? t(path, args) : t(path);
+  const res = t(path, number, { named: args });
   if (typeof res === 'string') return res;
   return path;
 };
 window._t = translate;
 
-export const translateC = (c: number, path: string): string => {
+export const translateC = (path: string, c: number, args?: any): string => {
   const i18n = getI18n();
   const global = i18n.global;
   const { n } = global;
-  const res = n(c, path);
+  const res = n(c, path, args);
   if (typeof res === 'string') return res;
   return path;
 };

src/views/git/detail/actions/GitDetailActionsChanges.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailActionsChanges' });
-import { ref } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@/utils';
 import useGitDetail from '@/views/git/detail/useGitDetail';
@@ -11,16 +10,16 @@ const ns = 'git';
 const store = useStore<RootStoreState>();
 const { git: state } = store.state;
 const {
-  activeId,
   isDisabled,
   commitLoading,
   onCommit,
   rollbackLoading,
   onRollback,
+  pullLoading,
+  onPull,
+  pushLoading,
+  onPush,
 } = useGitDetail();
-
-const pushLoading = ref(false);
-const onClickPush = async () => {};
 </script>
 
 <template>
@@ -47,6 +46,17 @@ const onClickPush = async () => {};
         @click="onRollback"
       />
     </cl-nav-action-item>
+    <cl-nav-action-item>
+      <cl-label-button
+        :loading="pullLoading"
+        :icon="['fa', 'cloud-download-alt']"
+        :tooltip="t('components.git.actions.tooltip.pull')"
+        :label="t('components.git.actions.label.pull')"
+        type="primary"
+        :disabled="isDisabled"
+        @click="onPull"
+      />
+    </cl-nav-action-item>
     <cl-nav-action-item>
       <cl-label-button
         :loading="pushLoading"
@@ -55,7 +65,7 @@ const onClickPush = async () => {};
         :label="t('components.git.actions.label.push')"
         type="primary"
         :disabled="isDisabled"
-        @click="onClickPush"
+        @click="onPush"
       />
     </cl-nav-action-item>
   </cl-nav-action-group>