add 添加自定义游戏配置

src/App.vue

@@ -24,7 +24,7 @@
 #app {
   padding: 16px 16px 50px;
   background: url("assets/bg.jpeg");
-  height: 100vh;
+  min-height: 100vh;
   background-size: 100% 100%;
 }
 

src/configs/routes.ts

@@ -1,6 +1,7 @@
 import { RouteRecordRaw } from "vue-router";
 import IndexPage from "../pages/IndexPage.vue";
 import GamePage from "../pages/GamePage.vue";
+import ConfigPage from "../pages/ConfigPage.vue";
 
 export default [
   {
@@ -11,4 +12,8 @@ export default [
     path: "/game",
     component: GamePage,
   },
+  {
+    path: "/config",
+    component: ConfigPage,
+  },
 ] as RouteRecordRaw[];

src/pages/ConfigPage.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="customConfigPage">
+    <h2>
+      自定义难度
+      <a-button style="float: right" @click="doBack">返回</a-button>
+    </h2>
+    <a-form
+      ref="formRef"
+      label-align="left"
+      :label-col="{ style: { width: '120px' } }"
+      :model="config"
+      @finish="handleFinish"
+    >
+      <a-form-item label="槽容量" name="slotNum">
+        <a-input-number v-model:value="config.slotNum" />
+      </a-form-item>
+      <a-form-item label="合成数" name="composeNum">
+        <a-input-number v-model:value="config.composeNum" />
+      </a-form-item>
+      <a-form-item label="动物数" name="typeNum">
+        <a-input-number v-model:value="config.typeNum" />
+      </a-form-item>
+      <a-form-item label="总层数" name="levelNum">
+        <a-input-number v-model:value="config.levelNum" />
+      </a-form-item>
+      <a-form-item label="每层块数" name="levelBlockNum">
+        <a-input-number v-model:value="config.levelBlockNum" />
+      </a-form-item>
+      <a-form-item label="边界收缩" name="borderStep">
+        <a-input-number v-model:value="config.borderStep" />
+      </a-form-item>
+      <a-form-item>
+        <a-button
+          type="primary"
+          html-type="submit"
+          style="margin-bottom: 12px"
+          block
+        >
+          开始
+        </a-button>
+        <a-button block @click="resetForm">重置</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { FormInstance } from "ant-design-vue";
+import { useRouter } from "vue-router";
+import { useGlobalStore } from "../core/globalStore";
+import { defaultGameConfig } from "../core/gameConfig";
+
+const formRef = ref<FormInstance>();
+const router = useRouter();
+const { setGameConfig, setCustomConfig } = useGlobalStore();
+const config = reactive<GameConfig>({ ...defaultGameConfig });
+
+const handleFinish = (values: GameConfig) => {
+  setGameConfig(config);
+  setCustomConfig(config);
+  router.push("/game");
+};
+
+const resetForm = () => {
+  formRef?.value?.resetFields();
+};
+
+/**
+ * 回上一页
+ */
+const doBack = () => {
+  router.back();
+};
+</script>
+<style></style>

src/pages/GamePage.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="gamePage">
-    <a-button @click="doBack"> ⬅️ 返回</a-button>
+    <a-button style="margin-bottom: 8px" @click="doBack"> 返回</a-button>
     <a-row align="center">
       <!-- 分层选块 -->
       <div class="level-board">

src/pages/IndexPage.vue

@@ -30,8 +30,8 @@
     >
       地域模式
     </a-button>
-    <a-button block style="margin-bottom: 16px" disabled @click="toGamePage">
-      自定义（暂未开放）
+    <a-button block style="margin-bottom: 16px" @click="toGamePage(null)">
+      自定义
     </a-button>
   </div>
 </template>
@@ -53,8 +53,10 @@ const { setGameConfig } = useGlobalStore();
 const toGamePage = (config?: GameConfig) => {
   if (config) {
     setGameConfig(config);
-  }
     router.push("/game");
+  } else {
+    router.push("/config");
+  }
 };
 </script>