feat: 代码可读性优化

src/components/NewUserGuide/index.vue

@@ -16,22 +16,15 @@
         ></span>
       </div>
 
-      <!-- 步骤内容区域 -->
+      <!-- 动态渲染当前步骤组件 -->
       <div class="guide-content-wrapper" @click.self="handleMaskClick">
         <transition name="guide-step" mode="out-in">
-          <Step1
-            v-if="currentStep === 1"
-            key="step1"
+          <component
+            :is="currentComponent"
+            :key="currentStep"
             :isLast="isLastStep"
             @next="goNext"
           />
-          <Step2
-            v-if="currentStep === 2"
-            key="step2"
-            :isLast="isLastStep"
-            @next="goNext"
-          />
-          <!-- 动态注册更多步骤：Step3 ~ StepN 在此追加 -->
         </transition>
       </div>
     </div>
@@ -39,20 +32,28 @@
 </template>
 
 <script>
-import Step1 from './steps/Step1.vue'
-import Step2 from './steps/Step2.vue'
+import WelcomeGuide from './steps/WelcomeGuide.vue'
+import SignInGuide from './steps/SignInGuide.vue'
 
-// 步骤组件注册表 —— 新增步骤只需在此数组末尾追加即可
-const stepComponents = [Step1, Step2]
+/**
+ * 步骤组件注册表
+ * 新增步骤只需：1. 创建组件文件  2. 在此数组末尾追加  3. 组件需接收 isLast prop 并 emit('next')
+ */
+const stepComponents = [WelcomeGuide, SignInGuide]
 
 export default {
   name: 'NewUserGuide',
-  components: { Step1, Step2 },
+  // 动态注册所有步骤组件
+  components: stepComponents.reduce((acc, comp) => {
+    acc[comp.name] = comp
+    return acc
+  }, {}),
   data() {
     return {
       visible: false,
       currentStep: 1,
-      totalSteps: stepComponents.length, // 动态自适应
+      totalSteps: stepComponents.length,
+      steps: stepComponents,
     }
   },
   computed: {
@@ -60,13 +61,17 @@ export default {
     isLastStep() {
       return this.currentStep === this.totalSteps
     },
+    /** 当前步骤组件 */
+    currentComponent() {
+      return this.steps[this.currentStep - 1]
+    },
   },
   methods: {
     /** 显示引导（可由外部调用） */
     show() {
       this.visible = true
       this.currentStep = 1
-      this.totalSteps = stepComponents.length // 刷新步骤数
+      this.totalSteps = this.steps.length
     },
 
     /** 下一步 */
@@ -80,7 +85,6 @@ export default {
 
     /** 点击步骤圆点跳转 */
     handleDotClick(step) {
-      // 只允许跳转到已完成的步骤或当前步骤的下一步
       if (step < this.currentStep || step === this.currentStep + 1) {
         this.currentStep = step
       }
@@ -94,7 +98,6 @@ export default {
 
     /** 跳过引导 */
     handleSkip() {
-      // 临时降低遮罩层 z-index，让 Element UI MessageBox 显示在上方
       const mask = this.$el
       if (mask) mask.style.zIndex = '1000'
       this.$confirm(
@@ -113,7 +116,6 @@ export default {
         })
         .catch(() => {
           if (mask) mask.style.zIndex = ''
-          // 用户选择继续引导
         })
     },
 

src/components/NewUserGuide/steps/Step2.vue

@@ -63,7 +63,7 @@
 
 <script>
 export default {
-  name: 'Step2',
+  name: 'SignInGuide',
   props: {
     isLast: {
       type: Boolean,

src/components/NewUserGuide/steps/Step1.vue

@@ -50,7 +50,7 @@
 
 <script>
 export default {
-  name: 'Step1',
+  name: 'WelcomeGuide',
   props: {
     isLast: {
       type: Boolean,