feat: updated git detail page

src/components/button/Button.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue';
 
 export interface ButtonProps {
   tooltip?: string;
-  type?: string;
+  type?: BasicType;
   size?: BasicSize;
   round?: boolean;
   circle?: boolean;

src/components/dialog/Dialog.vue

@@ -12,10 +12,12 @@ withDefaults(
     zIndex?: number;
     confirmDisabled?: boolean;
     confirmLoading?: boolean;
+    confirmType?: BasicType;
     className?: string;
   }>(),
   {
     top: '15vh',
+    confirmType: 'primary',
   }
 );
 
@@ -66,7 +68,7 @@ const onConfirm = () => {
         class-name="confirm-btn"
         :disabled="confirmDisabled"
         :loading="confirmLoading"
-        type="primary"
+        :type="confirmType"
         @click="onConfirm"
       >
         {{ t('common.actions.confirm') }}

src/components/ds/CreateEditDataSourceDialog.vue

@@ -2,7 +2,6 @@
   <cl-create-edit-dialog
     :action-functions="actionFunctions"
     :batch-form-data="formList"
-    :batch-form-fields="batchFormFields"
     :confirm-disabled="confirmDisabled"
     :confirm-loading="confirmLoading"
     :tab-name="createEditDialogTabName"

src/components/ds/useDataSource.ts

@@ -33,24 +33,6 @@ export const useDataSource: any = (store: Store<RootStoreState>) => {
   const ns = 'ds' as ListStoreNamespace;
   const { ds: state } = store.state as RootStoreState;
 
-  // batch form fields
-  const batchFormFields: FormTableField[] = [
-    {
-      prop: 'name',
-      label: 'Name',
-      width: '150',
-      fieldType: FORM_FIELD_TYPE_INPUT,
-      required: true,
-      placeholder: 'Name',
-    },
-    {
-      prop: 'description',
-      label: 'Description',
-      width: '200',
-      fieldType: FORM_FIELD_TYPE_INPUT_TEXTAREA,
-    },
-  ];
-
   // form rules
   const formRules = readonly<FormRules>({});
 
@@ -134,7 +116,6 @@ export const useDataSource: any = (store: Store<RootStoreState>) => {
 
   return {
     ...useForm(ns, store, useDataSourceService(store), formComponentData),
-    batchFormFields,
     formRules,
     typeOptions,
     getTypeOptionsWithDefault,

src/components/environment/CreateEditEnvironmentDialog.vue

@@ -2,7 +2,6 @@
   <cl-create-edit-dialog
     :action-functions="actionFunctions"
     :batch-form-data="formList"
-    :batch-form-fields="batchFormFields"
     :confirm-disabled="confirmDisabled"
     :confirm-loading="confirmLoading"
     :tab-name="createEditDialogTabName"

src/components/form/useForm.ts

@@ -51,11 +51,6 @@ export const useForm = (
   // readonly form fields
   const readonlyFormFields = computed<string[]>(() => state.readonlyFormFields);
 
-  // is batch form getters
-  const isBatchForm = computed<boolean>(
-    () => store.getters[`${ns}/isBatchForm`]
-  );
-
   const validateForm = async () => {
     return await formRef.value?.validate();
   };
@@ -111,11 +106,8 @@ export const useForm = (
     () => store.getters[`${ns}/allDict`]
   );
 
-  // all tags
-  const allTags = computed<string[]>(() => store.getters[`${ns}/allTags`]);
-
   // services
-  const { getList, create, updateById, createList, updateList } = services;
+  const { getList, create, updateById } = services;
 
   // dialog create edit
   const createEditDialogVisible = computed<boolean>(() => {
@@ -175,7 +167,6 @@ export const useForm = (
           res = await updateById(form.value._id as string, form.value);
           sendEvent('click_form_edit_confirm', {
             ns,
-            batch: isBatchForm.value,
           });
           break;
         default:
@@ -239,7 +230,6 @@ export const useForm = (
     isSelectiveForm,
     selectedFormFields,
     formList,
-    isBatchForm,
     validateForm,
     resetForm,
     isFormItemDisabled,
@@ -249,7 +239,6 @@ export const useForm = (
     allListSelectOptions,
     allListSelectOptionsWithEmpty,
     allDict,
-    allTags,
     confirmDisabled,
     confirmLoading,
     setConfirmLoading,

src/components/git/CreateEditGitDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCreateEditGitDialog' });
 import { useStore } from 'vuex';
-import useGit from '@/components/git/git';
+import useGit from '@/components/git/useGit';
 
 // store
 const store = useStore();

src/components/git/CreateGitSpiderDialog.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClCreateGitSpiderDialog' });
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import useGit from '@/components/git/useGit';
+
+defineProps<{
+  visible?: boolean;
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'confirm', spider: Spider): void;
+}>();
+
+// store
+const store = useStore<RootStoreState>();
+const { spider: spiderState } = store.state as RootStoreState;
+
+const { form } = useGit(store);
+
+const formRef = ref();
+
+const onConfirm = async () => {
+  await formRef.value?.validate();
+  emit('confirm', spiderState.form);
+};
+</script>
+
+<template>
+  <cl-dialog
+    type="create"
+    :visible="visible"
+    :confirm-loading="loading"
+    @close="emit('close')"
+    @confirm="onConfirm"
+  >
+    <template #default>
+      <cl-spider-form ref="formRef" />
+    </template>
+  </cl-dialog>
+</template>
+
+<style scoped lang="scss"></style>

src/components/git/GitForm.vue

@@ -3,7 +3,7 @@ defineOptions({ name: 'ClGitForm' });
 import { computed, watch } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@/utils';
-import useGit from '@/components/git/git';
+import useGit from '@/components/git/useGit';
 
 // i18n
 const t = translate;

src/components/git/git.ts → src/components/git/useGit.ts

@@ -3,11 +3,6 @@ import useForm from '@/components/form/useForm';
 import useGitService from '@/services/git/gitService';
 import { getDefaultFormComponentData } from '@/utils/form';
 
-// get new git
-export const getNewGit = (): Git => {
-  return {};
-};
-
 // form component data
 const formComponentData = getDefaultFormComponentData<Git>();
 

src/components/index.ts

@@ -52,6 +52,7 @@ 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 CreateGitSpiderDialog from './git/CreateGitSpiderDialog.vue';
 import GitBranchSelect from './git/GitBranchSelect.vue';
 import GitFileStatus from './git/GitFileStatus.vue';
 import GitForm from './git/GitForm.vue';
@@ -64,6 +65,7 @@ import InputList from './input/InputList.vue';
 import InputWithButton from './input/InputWithButton.vue';
 import TagInput from './input/TagInput.vue';
 import TagInputItem from './input/TagInputItem.vue';
+import DetailTabList from './list/DetailTabList.vue';
 import MetricDashboard from './metric/MetricDashboard.vue';
 import MetricList from './metric/MetricList.vue';
 import MetricProgress from './metric/MetricProgress.vue';
@@ -202,6 +204,7 @@ export {
   FormTableField as ClFormTableField,
   CreateEditGitDialog as ClCreateEditGitDialog,
   CreateGitBranchDialog as ClCreateGitBranchDialog,
+  CreateGitSpiderDialog as ClCreateGitSpiderDialog,
   GitBranchSelect as ClGitBranchSelect,
   GitFileStatus as ClGitFileStatus,
   GitForm as ClGitForm,
@@ -214,6 +217,7 @@ export {
   InputWithButton as ClInputWithButton,
   TagInput as ClTagInput,
   TagInputItem as ClTagInputItem,
+  DetailTabList as ClDetailTabList,
   MetricDashboard as ClMetricDashboard,
   MetricList as ClMetricList,
   MetricProgress as ClMetricProgress,

src/components/list/DetailTabList.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClDetailTabList' });
+import { computed, onBeforeMount, onBeforeUnmount, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import { FILTER_OP_EQUAL } from '@/constants/filter';
+
+const props = defineProps<{
+  filterKey: string;
+  ns: ListStoreNamespace;
+}>();
+
+// route
+const route = useRoute();
+
+// store
+const store = useStore();
+
+// id
+const id = computed<string>(() => route.params.id as string);
+
+// set filter
+const setTableListFilter = () => {
+  const { ns, filterKey } = props;
+  store.commit(`${ns}/setTableListFilter`, [
+    {
+      key: filterKey,
+      op: FILTER_OP_EQUAL,
+      value: id.value,
+    },
+  ] as FilterConditionData[]);
+};
+
+// get data
+const getData = async () => {
+  const { ns } = props;
+  setTableListFilter();
+  await store.dispatch(`${ns}/getList`);
+};
+
+onBeforeMount(getData);
+watch(() => id.value, getData);
+
+onBeforeUnmount(() => {
+  const { ns } = props;
+  store.commit(`${ns}/resetTableListFilter`);
+  store.commit(`${ns}/resetTableData`);
+});
+</script>
+
+<template>
+  <div class="detail-tab-list">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.detail-tab-list:deep(.el-table) {
+  border: none;
+}
+</style>

src/components/nav/NavLink.vue

@@ -1,64 +1,47 @@
-<template>
-  <div class="nav-link" @click="onClick">
-    <cl-icon :icon="icon" class="icon" />
-    <span class="title">{{ label }}</span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script setup lang="ts">
+defineOptions({ name: 'ClNavLink' });
 import { useRouter } from 'vue-router';
 import { sendEvent } from '@/admin/umeng';
 
-export default defineComponent({
-  name: 'NavLink',
-  props: {
-    path: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: [String, Number, Boolean],
-      default: '',
-    },
-    icon: {
-      type: [String, Array] as PropType<Icon>,
-      default: '',
-    },
-    external: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['click'],
-  setup(props: NavLinkProps, { emit }) {
-    const router = useRouter();
+const props = defineProps<{
+  path?: string;
+  label?: string | number | boolean;
+  icon?: Icon;
+  external?: boolean;
+}>();
 
-    const onClick = () => {
-      const { path, external } = props;
-      if (external) {
-        window.open(path);
-        return;
-      }
-      if (path) {
-        router.push(path);
-      }
-      emit('click');
+const emit = defineEmits<{
+  (e: 'click'): void;
+}>();
 
-      sendEvent('click_nav_link', {
-        path,
-        external,
-        currentPath: router.currentRoute.value.path,
-      });
-    };
+const router = useRouter();
 
-    return {
-      onClick,
-    };
-  },
-});
+const onClick = () => {
+  const { path, external } = props;
+  if (external) {
+    window.open(path);
+    return;
+  }
+  if (path) {
+    router.push(path);
+  }
+  emit('click');
+
+  sendEvent('click_nav_link', {
+    path,
+    external,
+    currentPath: router.currentRoute.value.path,
+  });
+};
 </script>
 
+<template>
+  <div class="nav-link" @click="onClick">
+    <cl-icon :icon="icon" class="icon" />
+    <span class="title">{{ label }}</span>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .nav-link {
   cursor: pointer;