feat: 开站目录变更quick-start

src/views/system/quick-start/index.vue

@@ -0,0 +1,86 @@
+<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%;
+
+  // 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%;
+  min-width: 360px;
+  margin: 0 auto;
+  border-radius: 6px;
+  top: 4vh;
+}
+</style>