Feat: create install page

frontend/src/App.vue

@@ -50,14 +50,15 @@ import { closeAppLoading } from "./tools/dom";
 });
 
 onMounted(async () => {
+  closeAppLoading();
   if (state.userInfo?.token && !isAdmin.value) {
     router.push({
       path: "/customer"
     });
   }
-  closeAppLoading();
+
   if (!state.userInfo?.token) {
-    router.push({
+    return router.push({
       path: "/login"
     });
   }

frontend/src/config/router.ts

@@ -1,7 +1,8 @@
 import { createRouter, createWebHashHistory, type Router, type RouteRecordRaw } from "vue-router";
 import LayoutContainer from "@/views/LayoutContainer.vue";
 import { $t as t } from "@/lang/i18n";
-import LoginVue from "@/views/Login.vue";
+import LoginPage from "@/views/Login.vue";
+import InstallPage from "@/views/Install.vue";
 import { useAppStateStore } from "@/stores/useAppStateStore";
 
 export interface RouterMetaInfo {
@@ -31,6 +32,24 @@ export enum ROLE {
 }
 
 let originRouterConfig: RouterConfig[] = [
+  {
+    path: "/login",
+    name: "login",
+    component: LoginPage,
+    meta: {
+      permission: ROLE.GUEST,
+      mainMenu: false
+    }
+  },
+  {
+    path: "/init",
+    name: "init",
+    component: InstallPage,
+    meta: {
+      permission: ROLE.GUEST,
+      mainMenu: false
+    }
+  },
   {
     path: "/",
     name: t("TXT_CODE_16d71239"),
@@ -132,15 +151,7 @@ let originRouterConfig: RouterConfig[] = [
       mainMenu: false
     }
   },
-  {
-    path: "/login",
-    name: "login",
-    component: LoginVue,
-    meta: {
-      permission: ROLE.GUEST,
-      mainMenu: false
-    }
-  },
+
   {
     path: "/quickstart",
     name: t("TXT_CODE_2799a1dd"),

frontend/src/main.ts

@@ -12,16 +12,27 @@ import { router } from "./config/router";
 import { i18n } from "@/lang/i18n";
 import App from "./App.vue";
 
-import { userInfoApi } from "./services/apis";
+import { panelStatus, userInfoApi } from "./services/apis";
 import { useAppStateStore } from "./stores/useAppStateStore";
 
 window.addEventListener("unhandledrejection", function (event) {
   console.error("Unhandled promise rejection:", event.reason);
 });
 
-(async function () {
+const { updateUserInfo, state } = useAppStateStore();
+
+async function checkPanelStatus() {
+  const status = await panelStatus().execute();
+  state.isInstall = status.value?.isInstall ?? true;
+  if (!state.isInstall) {
+    return router.push({
+      path: "/init"
+    });
+  }
+}
+
+async function index() {
   try {
-    const { updateUserInfo } = useAppStateStore();
     const { execute: reqUserInfo } = userInfoApi();
     const info = await reqUserInfo();
     updateUserInfo(info.value);
@@ -34,4 +45,8 @@ window.addEventListener("unhandledrejection", function (event) {
     app.use(i18n);
     app.mount("#app");
   }
-})();
+
+  await checkPanelStatus();
+}
+
+index();

frontend/src/services/apis/index.ts

@@ -5,6 +5,18 @@ import type { IPanelOverviewResponse } from "../../../../common/global";
 
 // 此处 API 接口可以用中文写注释，后期再统一翻译成英语。
 
+// 面板状态
+export const panelStatus = useDefineApi<
+  any,
+  {
+    isInstall: boolean;
+    language: string;
+  }
+>({
+  url: "/api/auth/status",
+  method: "GET"
+});
+
 // 用户登录
 export const loginUser = useDefineApi<
   | {

frontend/src/stores/useAppStateStore.ts

@@ -6,13 +6,15 @@ import type { BaseUserInfo } from "@/types/user";
 
 interface AppStateInfo {
   userInfo: BaseUserInfo | null;
+  isInstall: boolean;
 }
 
 export const useAppStateStore = createGlobalState(() => {
   const { execute: reqUserInfo } = userInfoApi();
 
   const state: AppStateInfo = reactive<AppStateInfo>({
-    userInfo: null
+    userInfo: null,
+    isInstall: true
   });
 
   const cloneState = (): AppStateInfo => {

frontend/src/views/Install.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts"></script>
+
+<template>
+  <a-row :gutter="[24, 24]">
+    <a-col :span="6">
+      <CardPanel>
+        <template #body>
+          <a-skeleton :paragraph="{ rows: 4 }" />
+        </template>
+      </CardPanel>
+    </a-col>
+    <a-col :span="6">
+      <CardPanel>
+        <template #body>
+          <a-skeleton :paragraph="{ rows: 4 }" />
+        </template>
+      </CardPanel>
+    </a-col>
+    <a-col :span="6">
+      <CardPanel>
+        <template #body>
+          <a-skeleton :paragraph="{ rows: 4 }" />
+        </template>
+      </CardPanel>
+    </a-col>
+    <a-col :span="6">
+      <CardPanel>
+        <template #body>
+          <a-skeleton :paragraph="{ rows: 4 }" />
+        </template>
+      </CardPanel>
+    </a-col>
+    <a-col :span="24">
+      <CardPanel>
+        <template #body>
+          <a-skeleton :paragraph="{ rows: 9 }" />
+        </template>
+      </CardPanel>
+    </a-col>
+    <a-col :span="8">
+      <CardPanel>
+        <template #body>
+          <a-skeleton :paragraph="{ rows: 6 }" />
+        </template>
+      </CardPanel>
+    </a-col>
+    <a-col :span="16">
+      <CardPanel>
+        <template #body>
+          <a-skeleton :paragraph="{ rows: 6 }" />
+        </template>
+      </CardPanel>
+    </a-col>
+    <a-col :span="8">
+      <CardPanel>
+        <template #body>
+          <a-skeleton :paragraph="{ rows: 6 }" />
+        </template>
+      </CardPanel>
+    </a-col>
+    <a-col :span="16">
+      <CardPanel>
+        <template #body>
+          <a-skeleton :paragraph="{ rows: 6 }" />
+        </template>
+      </CardPanel>
+    </a-col>
+  </a-row>
+  <div class="install-page-container">
+    <CardPanel class="install-panel">
+      <template #body> 安装页面 </template>
+    </CardPanel>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.install-page-container {
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  top: 0px;
+  background-color: #29292957;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: saturate(120%) blur(10px);
+  z-index: 200;
+  transition: all 0.8s;
+
+  .install-panel {
+    transition: all 0.6s;
+    max-width: 420px;
+    max-height: 400px;
+    width: 100%;
+    background-color: var(--login-panel-bg);
+    backdrop-filter: saturate(120%) blur(12px);
+  }
+}
+
+@keyframes scaleAnimation {
+  0% {
+    transform: scale(1);
+  }
+  20% {
+    transform: scale(0.9);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+</style>