feat: updated git detail

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>

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;
 

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>

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>

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,

src/components/nav/NavActionGroup.vue

@@ -1,21 +1,12 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="nav-action-group">
     <div class="border" />
     <slot></slot>
   </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;

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>

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;
 }

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>