From e42a620aed43fa78157a2754c161ccb4bcf021d2 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Wed, 17 Apr 2024 15:07:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BF=AB=E9=80=9F=E5=BC=80=E5=A7=8B?=
 =?UTF-8?q?=E5=BB=BA=E7=AB=99=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                           |  8 +-
 src/views/login.vue                           |  4 +-
 .../quick-build/components/ConfigNeInfo.vue   | 21 +++++
 .../components/ConfigNeInfoPara5G.vue         | 15 ++++
 .../quick-build/components/ConfigSystem.vue   | 21 +++++
 .../system/quick-build/components/End.vue     | 19 +++++
 .../components/SoftwareInstall.vue            | 21 +++++
 .../components/SoftwareLicense.vue            | 19 +++++
 .../system/quick-build/components/Start.vue   | 18 ++++
 src/views/system/quick-build/hooks/useStep.ts | 74 ++++++++++++++++
 src/views/system/quick-build/index.vue        | 85 +++++++++++++++++++
 11 files changed, 302 insertions(+), 3 deletions(-)
 create mode 100644 src/views/system/quick-build/components/ConfigNeInfo.vue
 create mode 100644 src/views/system/quick-build/components/ConfigNeInfoPara5G.vue
 create mode 100644 src/views/system/quick-build/components/ConfigSystem.vue
 create mode 100644 src/views/system/quick-build/components/End.vue
 create mode 100644 src/views/system/quick-build/components/SoftwareInstall.vue
 create mode 100644 src/views/system/quick-build/components/SoftwareLicense.vue
 create mode 100644 src/views/system/quick-build/components/Start.vue
 create mode 100644 src/views/system/quick-build/hooks/useStep.ts
 create mode 100644 src/views/system/quick-build/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index e273ffb7..ea60adc5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -87,6 +87,12 @@ const constantRoutes: RouteRecordRaw[] = [
     meta: { title: 'router.helpDoc' },
     component: () => import('@/views/tool/help/index.vue'),
   },
+  {
+    path: '/quick-build',
+    name: 'QuickBuild',
+    meta: { title: 'router.quickBuild' },
+    component: () => import('@/views/system/quick-build/index.vue'),
+  },
   {
     path: '/redirect',
     name: 'Redirect',
@@ -136,7 +142,7 @@ router.afterEach((to, from, failure) => {
 });
 
 /**无Token可访问页面地址白名单 */
-const WHITE_LIST: string[] = ['/login', '/auth-redirect', '/help', '/register'];
+const WHITE_LIST: string[] = ['/login', '/auth-redirect', '/help', '/register', '/quick-build'];
 
 /**全局路由-前置守卫 */
 router.beforeEach((to, from, next) => {
diff --git a/src/views/login.vue b/src/views/login.vue
index 4a016406..61eb7328 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -344,7 +344,7 @@ function fnClickHelpDoc(language?: string) {
 
   // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
 
-  background-image: url(./../assets/background.jpg);
+  background-image: url(@/assets/background.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
@@ -436,7 +436,7 @@ function fnClickHelpDoc(language?: string) {
   min-width: 260px;
   margin: 0 auto;
   margin-left: 60%;
-  border-radius: 4px;
+  border-radius: 6px;
 
   & .desc {
     text-align: center;
diff --git a/src/views/system/quick-build/components/ConfigNeInfo.vue b/src/views/system/quick-build/components/ConfigNeInfo.vue
new file mode 100644
index 00000000..cf3867d3
--- /dev/null
+++ b/src/views/system/quick-build/components/ConfigNeInfo.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { stepState, fnToStepName } from '../hooks/useStep';
+</script>
+
+<template>
+  <div>
+    <div>配置网元信息</div>
+    <a-button
+      v-if="stepState.current > 0"
+      style="margin-left: 8px"
+      @click="fnToStepName('ConfigSystem')"
+    >
+      上一步
+    </a-button>
+    <a-button type="primary" @click="fnToStepName('ConfigNeInfoPara5G')">
+      下一步
+    </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue b/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue
new file mode 100644
index 00000000..fa4fd8f6
--- /dev/null
+++ b/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { fnToStepName } from '../hooks/useStep';
+</script>
+
+<template>
+  <div>
+    <div>网元公共参数设置</div>
+
+    <a-button type="primary" @click="fnToStepName('SoftwareInstall')">
+      下一步
+    </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/quick-build/components/ConfigSystem.vue b/src/views/system/quick-build/components/ConfigSystem.vue
new file mode 100644
index 00000000..13ad10cc
--- /dev/null
+++ b/src/views/system/quick-build/components/ConfigSystem.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { fnToStepName } from '../hooks/useStep';
+</script>
+
+<template>
+  <div>
+    <div>系统配置</div>
+    <div>系统LOGO：png/jpg</div>
+    <div>系统名称：xxxx</div>
+    <div>隐藏语言切换：false</div>
+    <a-button style="margin-left: 8px" @click="fnToStepName('Start')">
+      上一步
+    </a-button>
+    <a-button type="primary" @click="fnToStepName('ConfigNeInfo')">
+      安装网元
+    </a-button>
+    <a-button type="primary" @click="fnToStepName('End')"> 下一步 </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/quick-build/components/End.vue b/src/views/system/quick-build/components/End.vue
new file mode 100644
index 00000000..8177c133
--- /dev/null
+++ b/src/views/system/quick-build/components/End.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { stepState, fnStepNext, fnStepPrev } from '../hooks/useStep';
+import { message, Form, Modal } from 'ant-design-vue/lib';
+</script>
+
+<template>
+  <div>
+    <div>结束</div>
+    <p>安装网元会有：网元信息-授权有效期</p>
+    =======提示
+    <p>未配置相关网元，请进入系统后，根据情况单独安装网元</p>
+
+    <a-button type="primary" @click="message.success('ok')">
+      开始使用
+    </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/quick-build/components/SoftwareInstall.vue b/src/views/system/quick-build/components/SoftwareInstall.vue
new file mode 100644
index 00000000..35f594df
--- /dev/null
+++ b/src/views/system/quick-build/components/SoftwareInstall.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { stepState, fnToStepName } from '../hooks/useStep';
+</script>
+
+<template>
+  <div>
+    <div>软件安装</div>
+    <a-button
+      v-if="stepState.current > 0"
+      style="margin-left: 8px"
+      @click="fnToStepName('ConfigNeInfoPara5G')"
+    >
+      上一步
+    </a-button>
+    <a-button type="primary" @click="fnToStepName('SoftwareLicense')">
+      下一步
+    </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/quick-build/components/SoftwareLicense.vue b/src/views/system/quick-build/components/SoftwareLicense.vue
new file mode 100644
index 00000000..8b7cf8e0
--- /dev/null
+++ b/src/views/system/quick-build/components/SoftwareLicense.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { stepState, fnToStepName, fnStepPrev } from '../hooks/useStep';
+</script>
+
+<template>
+  <div>
+    <div>软件授权激活</div>
+    <a-button
+      v-if="stepState.current > 0"
+      style="margin-left: 8px"
+      @click="fnToStepName('SoftwareInstall')"
+    >
+      上一步
+    </a-button>
+    <a-button type="primary" @click="fnToStepName('End')"> 跳过 </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/quick-build/components/Start.vue b/src/views/system/quick-build/components/Start.vue
new file mode 100644
index 00000000..e025196d
--- /dev/null
+++ b/src/views/system/quick-build/components/Start.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { fnToStepName } from '../hooks/useStep';
+</script>
+
+<template>
+  <div>
+    <div>欢迎使用</div>
+    <div>语言切换：中文</div>
+    <div>软件声明:无第三方信息采集</div>
+    <div>1. 网管配置，网元安装可选</div>
+    <div>2. 可选项，网元安装</div>
+    <a-button type="primary" @click="fnToStepName('ConfigSystem')">
+      开始
+    </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/quick-build/hooks/useStep.ts b/src/views/system/quick-build/hooks/useStep.ts
new file mode 100644
index 00000000..5e872c0b
--- /dev/null
+++ b/src/views/system/quick-build/hooks/useStep.ts
@@ -0,0 +1,74 @@
+import { reactive } from 'vue';
+
+/**步骤信息状态类型 */
+type StepStateType = {
+  /**步骤名称 */
+  stepName: string;
+
+  /**当前选中 */
+  current: number;
+  /**步骤项 */
+  steps: {
+    title: string;
+    description: string;
+  }[];
+  /**步骤下一步 */
+  stepNext: boolean;
+  /**步骤信息状态 */
+  states: any[];
+};
+
+/**步骤信息状态 */
+export const stepState: StepStateType = reactive({
+  stepName: 'Start',
+  current: 0,
+  steps: [
+    {
+      title: '版权声明',
+      description: '确认是否安装',
+    },
+    {
+      title: '网元信息',
+      description: '记录下所安装网元基础信息',
+    },
+    {
+      title: '网元安装',
+      description: '安装包上传执行安装启动服务等待10秒停止服务',
+    },
+    {
+      title: '网元配置',
+      description: '修改网元的配置文件',
+    },
+    {
+      title: '网元激活',
+      description: '获取激活码和上传授权文件，启动验证激活码',
+    },
+    {
+      title: '完成安装',
+      description: '获取网元服务状态',
+    },
+  ],
+  stepNext: false,
+  states: [],
+});
+
+/**步骤信息状态复位 */
+export function fnRestStepState() {
+  stepState.current = 0;
+  stepState.stepNext = false;
+  stepState.states = [];
+}
+
+export function fnToStepName(stepName: string) {
+  stepState.stepName = stepName;
+}
+
+export function fnStepNext() {
+  stepState.current++;
+  stepState.stepNext = false;
+}
+
+export function fnStepPrev() {
+  stepState.current--;
+  stepState.stepNext = true;
+}
diff --git a/src/views/system/quick-build/index.vue b/src/views/system/quick-build/index.vue
new file mode 100644
index 00000000..d7291034
--- /dev/null
+++ b/src/views/system/quick-build/index.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue/lib';
+import {
+  reactive,
+  onMounted,
+  computed,
+  defineAsyncComponent,
+  shallowRef,
+  watch,
+} from 'vue';
+import useUserStore from '@/store/modules/user';
+import useAppStore from '@/store/modules/app';
+import { getCaptchaImage } from '@/api/login';
+import { useRouter, useRoute } from 'vue-router';
+import useI18n from '@/hooks/useI18n';
+import { toRaw } from 'vue';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { parseUrlPath } from '@/plugins/file-static-url';
+import { fnRestStepState, stepState } from './hooks/useStep';
+const { t, changeLocale, optionsLocale, currentLocale } = useI18n();
+const appStore = useAppStore();
+
+// 判断是否有背景地址
+const calcBG = computed(() => {
+  const bgURL = parseUrlPath(appStore.loginBackground);
+  if (bgURL && bgURL !== '#') {
+    return {
+      backgroundImage: `url(${bgURL})`,
+      backgroundPosition: 'center',
+      backgroundSize: 'cover',
+    };
+  }
+  return undefined;
+});
+
+// 异步加载组件
+const currentComponent = shallowRef(
+  defineAsyncComponent(() => import('./components/Start.vue'))
+);
+
+watch(
+  () => stepState.stepName,
+  v => {
+    const loadComponent = defineAsyncComponent(
+      () => import(`./components/${v}.vue`)
+    );
+    currentComponent.value = loadComponent;
+  }
+);
+
+onMounted(() => {
+  fnRestStepState();
+});
+</script>
+
+<template>
+  <div class="container" :style="calcBG">
+    <a-card :bordered="false" class="build-card">
+      <!-- 步骤页面 -->
+      <component :is="currentComponent" />
+    </a-card>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  padding-top: 164px;
+
+  // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
+
+  background-image: url(@/assets/background.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+}
+
+.build-card {
+  width: 60%;
+  margin: 0 auto;
+  border-radius: 6px;
+}
+</style>