feat: 快速安装页面

src/views/tool/neQuickSetup/index.vue

@@ -1,13 +1,75 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
 import { message } from 'ant-design-vue/lib';
-import StepCheck from './components/StepCheck.vue';
-import StepNeInfo from './components/StepNeInfo.vue';
-import StepInstall from './components/StepInstall.vue';
-import StepConfig from './components/StepConfig.vue';
-import StepActivate from './components/StepActivate.vue';
-import StepFinish from './components/StepFinish.vue';
+import { defineAsyncComponent, watch, shallowRef } from 'vue';
 import { stepState, fnStepPrev, fnStepNext } from './hooks/useStep';
+
+// 异步加载组件
+const StepCheck = defineAsyncComponent(
+  () => import('./components/StepCheck.vue')
+);
+
+// 当前组件
+const currentComponent = shallowRef(StepCheck);
+
+watch(
+  () => stepState.current,
+  v => {
+    if (v === 0) {
+      currentComponent.value = StepCheck;
+      return;
+    }
+    if (v === 1) {
+      const StepNeInfo = defineAsyncComponent(
+        () => import('./components/StepNeInfo.vue')
+      );
+      currentComponent.value = StepNeInfo;
+      return;
+    }
+    if (v === 2) {
+      const StepInstall = defineAsyncComponent(
+        () => import('./components/StepInstall.vue')
+      );
+      currentComponent.value = StepInstall;
+      return;
+    }
+    if (v === 3) {
+      // 读取第二步的网元信息
+      const stepNeInfo = stepState.states[1].from;
+      if (stepNeInfo.neType === 'SMF') {
+        const StepConfigSMF = defineAsyncComponent(
+          () => import('./components/StepConfigSMF.vue')
+        );
+        currentComponent.value = StepConfigSMF;
+      } else if (stepNeInfo.neType === 'AMF') {
+        const StepConfigText = defineAsyncComponent(
+          () => import('./components/StepConfigText.vue')
+        );
+        currentComponent.value = StepConfigText;
+      } else {
+        const StepConfig = defineAsyncComponent(
+          () => import('./components/StepConfig.vue')
+        );
+        currentComponent.value = StepConfig;
+      }
+      return;
+    }
+    if (v === 4) {
+      const StepActivate = defineAsyncComponent(
+        () => import('./components/StepActivate.vue')
+      );
+      currentComponent.value = StepActivate;
+      return;
+    }
+    if (v === 5) {
+      const StepFinish = defineAsyncComponent(
+        () => import('./components/StepFinish.vue')
+      );
+      currentComponent.value = StepFinish;
+      return;
+    }
+  }
+);
 </script>
 
 <template>
@@ -66,12 +128,7 @@ import { stepState, fnStepPrev, fnStepNext } from './hooks/useStep';
       </template>
 
       <!-- 步骤页面 -->
-      <StepCheck v-if="stepState.current === 0"></StepCheck>
-      <StepNeInfo v-if="stepState.current === 1"></StepNeInfo>
-      <StepInstall v-if="stepState.current === 2"></StepInstall>
-      <StepConfig v-if="stepState.current === 3"></StepConfig>
-      <StepActivate v-if="stepState.current === 4"></StepActivate>
-      <StepFinish v-if="stepState.current === 5"></StepFinish>
+      <component :is="currentComponent" />
     </a-card>
   </PageContainer>
 </template>