From bd39cd0ba8a5a6ac06e77c5e4e1126c5d895fe8b Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Fri, 20 Oct 2023 15:02:31 +0800
Subject: [PATCH 1/6] Fix: misspell

---
 frontend/src/widgets/imageManager/NewImage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/widgets/imageManager/NewImage.vue b/frontend/src/widgets/imageManager/NewImage.vue
index 85be89e0..902c0378 100644
--- a/frontend/src/widgets/imageManager/NewImage.vue
+++ b/frontend/src/widgets/imageManager/NewImage.vue
@@ -90,7 +90,7 @@ const selectType = (type: number) => {
     case 5:
       dockerFile.value = defaultDockerFile;
       name.value = "mcsm-custom";
-      version.value = "lasted";
+      version.value = "latest";
       break;
     default:
       return message.error(t("未知的环境类型"));

From 5caa590d6c3111744f1b4843e89661b60d4119d8 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sat, 21 Oct 2023 17:31:06 +0800
Subject: [PATCH 2/6] Feat: panel install

---
 frontend/components.d.ts            |   1 +
 frontend/src/services/apis/index.ts |  26 ++++
 frontend/src/views/Install.vue      | 233 +++++++++++++++++++++++++++-
 3 files changed, 255 insertions(+), 5 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index c4127e6b..d336e655 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -22,6 +22,7 @@ declare module 'vue' {
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
diff --git a/frontend/src/services/apis/index.ts b/frontend/src/services/apis/index.ts
index 23511aac..3f4b5012 100644
--- a/frontend/src/services/apis/index.ts
+++ b/frontend/src/services/apis/index.ts
@@ -4,6 +4,32 @@ import type { BaseUserInfo } from "@/types/user";
 import type { IPanelOverviewResponse } from "../../../../common/global";
 
 // 此处 API 接口可以用中文写注释，后期再统一翻译成英语。
+// 面板安装
+export const panelInstall = useDefineApi<
+  {
+    data: {
+      username: string;
+      password: string;
+    };
+  },
+  any
+>({
+  url: "/api/auth/install",
+  method: "POST"
+});
+
+// 安装前更新相关配置
+export const updateSettings = useDefineApi<
+  {
+    data: {
+      language: string;
+    };
+  },
+  any
+>({
+  url: "/api/overview/install",
+  method: "PUT"
+});
 
 // 面板状态
 export const panelStatus = useDefineApi<
diff --git a/frontend/src/views/Install.vue b/frontend/src/views/Install.vue
index 0965e851..a6848b00 100644
--- a/frontend/src/views/Install.vue
+++ b/frontend/src/views/Install.vue
@@ -1,4 +1,92 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref, reactive } from "vue";
+import CardPanel from "@/components/CardPanel.vue";
+import { t, i18n } from "@/lang/i18n";
+import { panelInstall, updateSettings, loginUser } from "@/services/apis";
+import { message } from "ant-design-vue";
+import type { FormInstance } from "ant-design-vue";
+import { useAppRouters } from "@/hooks/useAppRouters";
+import { useAppStateStore } from "@/stores/useAppStateStore";
+import { sleep } from "@/tools/commom";
+
+const { updateUserInfo, state: appState } = useAppStateStore();
+const step = ref(1);
+const { toPage } = useAppRouters();
+const formRef = ref<FormInstance>();
+const formData = reactive({
+  username: "",
+  password: ""
+});
+
+const { execute: createAdminUser } = panelInstall();
+const { execute: login } = loginUser();
+const installLoading = ref(false);
+const createUser = async () => {
+  try {
+    installLoading.value = true;
+    await formRef.value?.validate();
+    await createAdminUser({
+      data: formData
+    });
+    await sleep(100);
+    await login({
+      data: {
+        ...formData
+      }
+    });
+    await sleep(200);
+    await updateUserInfo();
+    step.value++;
+  } catch (err: any) {
+    console.error(err);
+    message.error(err.message);
+  } finally {
+    installLoading.value = false;
+  }
+};
+
+const { execute: execUpdateSettings, isLoading: nextStepLoading } = updateSettings();
+const selectLanguage = async (lang: "en_US" | "zh_CN") => {
+  try {
+    await execUpdateSettings({
+      data: {
+        language: lang
+      }
+    });
+    i18n.global.locale = lang;
+  } catch (err: any) {
+    console.error(err);
+    message.error(err.message);
+  }
+};
+
+const toQuickStart = () => {
+  toPage({
+    path: "/quickstart",
+    query: {
+      from_install: 1
+    }
+  });
+};
+
+const toOverview = () => {
+  toPage({
+    path: "/",
+    query: {
+      from_install: 1
+    }
+  });
+};
+
+onMounted(async () => {
+  const language = window.navigator.language;
+  if (language.includes("zh")) {
+    await selectLanguage("zh_CN");
+  } else {
+    await selectLanguage("en_US");
+  }
+});
+</script>
 
 <template>
   <a-row :gutter="[24, 24]">
@@ -66,9 +154,127 @@
       </CardPanel>
     </a-col>
   </a-row>
-  <div class="install-page-container">
+  <div v-if="step === 1" class="install-page-container" style="text-align: center">
     <CardPanel class="install-panel">
-      <template #body> 安装页面 </template>
+      <template #body>
+        <a-typography>
+          <a-typography-title :level="3">
+            {{ t("欢迎使用 MCSManager 管理面板") }}
+          </a-typography-title>
+          <a-typography-paragraph>
+            <a-typography-text>
+              {{ t("开源，分布式，开箱即用，支持 Minecraft 游戏服务端和所有控制台程序的管理面板") }}
+            </a-typography-text>
+          </a-typography-paragraph>
+        </a-typography>
+        <a-button
+          v-if="appState.isInstall"
+          disabled
+          class="mt-50 mb-50"
+          type="primary"
+          size="large"
+          @click="step = 2"
+        >
+          {{ t("面板已安装，不可重复安装") }}
+        </a-button>
+        <a-button
+          v-else
+          :loading="nextStepLoading"
+          class="mt-45 mb-45"
+          type="primary"
+          size="large"
+          @click="step = 2"
+        >
+          {{ t("开始使用") }}
+        </a-button>
+        <a-typography>
+          <a-typography-paragraph>
+            <a-typography-text>
+              <a href="https://mcsmanager.com/" target="_blank" rel="noopener noreferrer">
+                Reference: https://mcsmanager.com/
+              </a>
+            </a-typography-text>
+            <br />
+            <a-typography-text> Released under the Apache-2.0 License. </a-typography-text>
+          </a-typography-paragraph>
+        </a-typography>
+      </template>
+    </CardPanel>
+  </div>
+  <div v-if="step === 2" class="install-page-container">
+    <CardPanel class="install-panel">
+      <template #body>
+        <a-typography>
+          <a-typography-title :level="3">
+            {{ t("创建一个访问面板的管理员账号") }}
+          </a-typography-title>
+          <a-typography-paragraph>
+            <a-typography-text>
+              {{ t("用户名支持任何语言，请务必保证您的密码安全。") }}
+            </a-typography-text>
+          </a-typography-paragraph>
+        </a-typography>
+        <a-form ref="formRef" :model="formData" :label-col="{ span: 4 }" autocomplete="off">
+          <a-form-item
+            :label="t('用户名')"
+            name="username"
+            :rules="[{ required: true, message: t('请输入用户名') }]"
+          >
+            <a-input v-model:value="formData.username" />
+          </a-form-item>
+
+          <a-form-item
+            :label="t('密码')"
+            name="password"
+            :rules="[
+              {
+                required: true,
+                message: t('请输入密码，9 到 36 个字符，必须包含大小写字母和数字')
+              }
+            ]"
+          >
+            <a-input-password v-model:value="formData.password" />
+          </a-form-item>
+
+          <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
+            <a-button :loading="installLoading" type="primary" @click="createUser">
+              {{ t("创建账号") }}
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </template>
+    </CardPanel>
+  </div>
+  <div v-if="step === 3" class="install-page-container">
+    <CardPanel class="install-panel">
+      <template #body>
+        <a-typography>
+          <a-typography-title :level="3">
+            {{ t("大功告成！") }}
+          </a-typography-title>
+          <a-typography-paragraph>
+            <a-typography-text>
+              {{ t("最后，您是第一次使用此软件吗？") }}
+            </a-typography-text>
+          </a-typography-paragraph>
+        </a-typography>
+        <div class="final-btn mb-15" @click="toQuickStart">
+          <a-typography-title :level="5">
+            {{ t("首次使用") }}
+          </a-typography-title>
+          <a-typography-text>
+            {{ t("我们将引导你使用并部署你的应用程序。") }}
+          </a-typography-text>
+        </div>
+        <div class="final-btn" @click="toOverview">
+          <a-typography-title :level="5">
+            {{ t("老用户") }}
+          </a-typography-title>
+          <a-typography-text>
+            {{ t("以更专业化的界面供你使用。") }}
+          </a-typography-text>
+        </div>
+      </template>
     </CardPanel>
   </div>
 </template>
@@ -90,11 +296,28 @@
 
   .install-panel {
     transition: all 0.6s;
-    max-width: 420px;
-    max-height: 400px;
+    max-width: 460px;
+    max-height: 360px;
     width: 100%;
     background-color: var(--login-panel-bg);
     backdrop-filter: saturate(120%) blur(12px);
+    padding: 40px;
+  }
+}
+
+.final-btn {
+  padding: 10px 12px;
+  border: 1px solid var(--color-gray-2);
+  background-color: var(--color-gray-2);
+
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.4s;
+  border-radius: 6px;
+
+  &:hover {
+    border: 1px solid var(--color-gray-8);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
   }
 }
 

From 7f940743b1a46e803d07598745736c118e7aa7d0 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sat, 21 Oct 2023 20:05:47 +0800
Subject: [PATCH 3/6] Fix: auto login

---
 frontend/src/views/Install.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/frontend/src/views/Install.vue b/frontend/src/views/Install.vue
index a6848b00..65a4254c 100644
--- a/frontend/src/views/Install.vue
+++ b/frontend/src/views/Install.vue
@@ -2,7 +2,7 @@
 import { onMounted, ref, reactive } from "vue";
 import CardPanel from "@/components/CardPanel.vue";
 import { t, i18n } from "@/lang/i18n";
-import { panelInstall, updateSettings, loginUser } from "@/services/apis";
+import { panelInstall, updateSettings } from "@/services/apis";
 import { message } from "ant-design-vue";
 import type { FormInstance } from "ant-design-vue";
 import { useAppRouters } from "@/hooks/useAppRouters";
@@ -19,7 +19,6 @@ const formData = reactive({
 });
 
 const { execute: createAdminUser } = panelInstall();
-const { execute: login } = loginUser();
 const installLoading = ref(false);
 const createUser = async () => {
   try {
@@ -29,12 +28,6 @@ const createUser = async () => {
       data: formData
     });
     await sleep(100);
-    await login({
-      data: {
-        ...formData
-      }
-    });
-    await sleep(200);
     await updateUserInfo();
     step.value++;
   } catch (err: any) {

From f26cf94c526ae19d372741827720e29759739c73 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sat, 21 Oct 2023 20:09:12 +0800
Subject: [PATCH 4/6] Optimize:  pwd format verification

---
 frontend/src/views/Install.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/Install.vue b/frontend/src/views/Install.vue
index 65a4254c..3544b989 100644
--- a/frontend/src/views/Install.vue
+++ b/frontend/src/views/Install.vue
@@ -222,7 +222,8 @@ onMounted(async () => {
             :rules="[
               {
                 required: true,
-                message: t('请输入密码，9 到 36 个字符，必须包含大小写字母和数字')
+                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{9,36}$/,
+                message: t('密码必须是 9 到 36 个字符，并且包含大小写字母和数字')
               }
             ]"
           >

From 7030ab18c61233a2c18886c6adb44e132f78802c Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sat, 21 Oct 2023 20:15:29 +0800
Subject: [PATCH 5/6] Fix: button margin

---
 frontend/src/views/Install.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Install.vue b/frontend/src/views/Install.vue
index 3544b989..303fb940 100644
--- a/frontend/src/views/Install.vue
+++ b/frontend/src/views/Install.vue
@@ -163,7 +163,7 @@ onMounted(async () => {
         <a-button
           v-if="appState.isInstall"
           disabled
-          class="mt-50 mb-50"
+          class="mt-45 mb-45"
           type="primary"
           size="large"
           @click="step = 2"

From c0faa5e6812fa30fc0fef11d8411a821e295e458 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Tue, 24 Oct 2023 09:22:31 +0800
Subject: [PATCH 6/6] Optimize: background skeleton

---
 frontend/src/views/Install.vue | 74 +++++++---------------------------
 1 file changed, 14 insertions(+), 60 deletions(-)

diff --git a/frontend/src/views/Install.vue b/frontend/src/views/Install.vue
index 303fb940..d60186fe 100644
--- a/frontend/src/views/Install.vue
+++ b/frontend/src/views/Install.vue
@@ -7,7 +7,18 @@ import { message } from "ant-design-vue";
 import type { FormInstance } from "ant-design-vue";
 import { useAppRouters } from "@/hooks/useAppRouters";
 import { useAppStateStore } from "@/stores/useAppStateStore";
-import { sleep } from "@/tools/commom";
+
+const skeletons = [
+  { span: 6, rows: 4 },
+  { span: 6, rows: 4 },
+  { span: 6, rows: 4 },
+  { span: 6, rows: 4 },
+  { span: 24, rows: 9 },
+  { span: 8, rows: 6 },
+  { span: 16, rows: 6 },
+  { span: 8, rows: 6 },
+  { span: 16, rows: 6 }
+];
 
 const { updateUserInfo, state: appState } = useAppStateStore();
 const step = ref(1);
@@ -27,7 +38,6 @@ const createUser = async () => {
     await createAdminUser({
       data: formData
     });
-    await sleep(100);
     await updateUserInfo();
     step.value++;
   } catch (err: any) {
@@ -83,66 +93,10 @@ onMounted(async () => {
 
 <template>
   <a-row :gutter="[24, 24]">
-    <a-col :span="6">
+    <a-col v-for="i in skeletons" :key="i" :span="i.span">
       <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 }" />
+          <a-skeleton :paragraph="{ rows: i.rows }" />
         </template>
       </CardPanel>
     </a-col>