perf(views): 优化 UseGuidance 组件的逻辑

src/layout/UseGuidance.vue

@@ -32,34 +32,6 @@ const isFirstStep = computed(() => {
   return current.value === 0;
 });
 
-const isLastStep = computed(() => {
-  return props.steps[current.value].isLastStep;
-});
-
-const exportButtonShow = computed(() => {
-  return props.steps[current.value].exportButtonShow;
-});
-
-const nextStepButtonShow = computed(() => {
-  return !props.steps[current.value].nextStepButtonHide;
-});
-
-const nextStepButtonText = computed(() => {
-  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(() => {
-  return props.steps[current.value].component;
-});
-
 const contentStyle = computed<CSSProperties>(() => {
   // const contentOffset = props.steps[current.value].contentOffset ?? props.contentOffset;
 
@@ -107,7 +79,7 @@ const finishCurrentStep = async () => {
     await formRef.value?.validate();
     await stepRef.value?.finish?.();
 
-    if (isLastStep.value) {
+    if (currentStep.value.isLastStep) {
       router.replace('/first-usage');
     } else {
       goNextStep();
@@ -136,10 +108,10 @@ const finishCurrentStep = async () => {
           <div class="step-title">{{ currentStep.stepTitle || currentStep.title }}</div>
           <div class="step-description">{{ currentStep.stepDescription }}</div>
         </div>
-        <AForm ref="formRef" :model="form" :rules="rules" :layout="formLayout">
+        <AForm ref="formRef" :model="form" :rules="rules" :layout="currentStep.formLayout">
           <component
             ref="stepItem"
-            :is="currentComponent"
+            :is="currentStep.component"
             :form="form"
             :steps="steps"
             :step-index="current"
@@ -150,22 +122,24 @@ const finishCurrentStep = async () => {
       <ALayoutFooter class="use-guide-footer">
         <div class="use-guide-step-button-container">
           <div>
-            <AButton type="text" :disabled="isLastStep" @click="goNextStep">{{ $t('common.skip') }}</AButton>
+            <AButton type="text" :disabled="currentStep.isLastStep" @click="goNextStep">
+              {{ $t('common.skip') }}
+            </AButton>
             <AButton type="text" @click="goPrevStep">{{ $t('common.return') }}</AButton>
           </div>
           <div>
-            <AButton v-if="exportButtonShow" class="icon-button export-button" @click="exportStepContent">
+            <AButton v-if="currentStep.exportButtonShow" class="icon-button export-button" @click="exportStepContent">
               <SvgIcon name="download" />
               {{ $t('common.exportToLocal') }}
             </AButton>
             <AButton
-              v-show="nextStepButtonShow"
+              v-show="!currentStep.nextStepButtonHide"
               class="next-step-button"
               type="primary"
-              :disabled="nextStepButtonDisabled"
+              :disabled="currentStep.nextStepButtonDisabled"
               @click="finishCurrentStep"
             >
-              {{ nextStepButtonText }}
+              {{ currentStep.nextStepButtonText || t('common.nextStep') }}
             </AButton>
           </div>
         </div>