feat: 快速开始建站页面

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) => {

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;

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>

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>

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>

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>

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>

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>

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>

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;
+}

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>