perf(components): 优化 UseGuidance 组件的界面和操作逻辑

src/layout/UseGuidance.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { computed, ref } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { t } from '@/i18n';
 import { addUnit } from '@/utils';
 
-import type { Component, CSSProperties } from 'vue';
+import type { CSSProperties } from 'vue';
 import type { FormInstance } from 'ant-design-vue';
-import type { FormRules, UseGuideStepItem } from '@/types';
+import type { FormRules, UseGuideStepItem, UseGuideStepItemInstance } from '@/types';
 
 interface Props {
   title: string;
@@ -21,21 +21,32 @@ const props = defineProps<Props>();
 
 const router = useRouter();
 const current = ref(0);
-const formRef = ref<FormInstance>();
 
 const isFirstStep = computed(() => {
   return current.value === 0;
 });
 
 const isLastStep = computed(() => {
-  return current.value === props.steps.length - 1;
+  return props.steps[current.value].isLastStep;
+});
+
+const exportButtonShow = computed(() => {
+  return props.steps[current.value].exportButtonShow;
 });
 
 const nextStepButtonText = computed(() => {
-  return isLastStep.value ? t('common.finishSetup') : t('common.nextStep');
+  return props.steps[current.value].nextStepButtonText || t('common.nextStep');
+});
+
+const nextStepButtonDisabled = computed(() => {
+  return props.steps[current.value].nextStepButtonDisabled;
+});
+
+const formLayout = computed(() => {
+  return props.steps[current.value].formLayout;
 });
 
-const currentComponent = computed<Component>(() => {
+const currentComponent = computed(() => {
   return props.steps[current.value].component;
 });
 
@@ -60,15 +71,24 @@ const goPrevStep = () => {
   current.value--;
 };
 
-const finishCurrentStep = () => {
-  if (isLastStep.value) {
-    return;
-  }
+const formRef = ref<FormInstance>();
+const stepRef = useTemplateRef<UseGuideStepItemInstance>('stepItem');
+
+const exportStepContent = async () => {
+  await stepRef.value?.exportData?.();
+};
 
+const finishCurrentStep = () => {
   formRef.value
     ?.validate()
-    .then(() => {
-      goNextStep();
+    .then(async () => {
+      await stepRef.value?.finish?.();
+
+      if (isLastStep.value) {
+        router.replace('/first-usage');
+      } else {
+        goNextStep();
+      }
     })
     .catch((err) => {
       console.error(err);
@@ -90,14 +110,21 @@ const finishCurrentStep = () => {
     </ALayoutSider>
     <ALayout>
       <ALayoutContent class="use-guide-main" :style="contentStyle">
-        <AForm ref="formRef" :model="form" :rules="rules">
-          <Component :is="currentComponent" :form="form" />
+        <AForm ref="formRef" :model="form" :rules="rules" :layout="formLayout">
+          <component ref="stepItem" :is="currentComponent" :steps="steps" :step-index="current" :form="form" />
         </AForm>
       </ALayoutContent>
       <ALayoutFooter class="use-guide-footer">
-        <AButton type="text" :disabled="isLastStep" @click="goNextStep">{{ $t('common.skip') }}</AButton>
-        <AButton type="text" @click="goPrevStep">{{ $t('common.return') }}</AButton>
-        <AButton type="primary" @click="finishCurrentStep">{{ nextStepButtonText }}</AButton>
+        <div>
+          <AButton type="text" :disabled="isLastStep" @click="goNextStep">{{ $t('common.skip') }}</AButton>
+          <AButton type="text" @click="goPrevStep">{{ $t('common.return') }}</AButton>
+        </div>
+        <div>
+          <AButton v-if="exportButtonShow" @click="exportStepContent">{{ $t('common.exportToLocal') }}</AButton>
+          <AButton type="primary" :disabled="nextStepButtonDisabled" @click="finishCurrentStep">
+            {{ nextStepButtonText }}
+          </AButton>
+        </div>
       </ALayoutFooter>
     </ALayout>
   </ALayout>
@@ -186,12 +213,14 @@ const finishCurrentStep = () => {
 }
 
 .use-guide-footer {
+  display: flex;
+  justify-content: space-between;
   padding-right: 211px;
   padding-left: 187px;
   background: var(--antd-color-bg-base);
 
-  button:last-of-type {
-    float: right;
+  button + button {
+    margin-left: 16px;
   }
 }
 </style>