From 2caaf20f69a9f8fa89d510ac1cba30ff4dc88bf2 Mon Sep 17 00:00:00 2001
From: Starrah <starrah@foxmail.com>
Date: Fri, 9 Oct 2026 15:19:12 +0800
Subject: [PATCH] =?UTF-8?q?fix=20#74=20:=20=E4=BD=BF=E5=BE=97OOBE=E5=B1=8F?=
 =?UTF-8?q?=E5=B9=95=E5=8F=AF=E4=BB=A5=E6=9C=80=E5=A4=A7=E5=8C=96=E3=80=81?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E7=BC=A9=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Front/src/views/Oobe/GameDirPage.tsx      |  64 ++++++-----
 .../Front/src/views/Oobe/ModeSelectPage.tsx   | 107 +++++++++---------
 .../src/views/Oobe/ServerRunningPage.tsx      |  24 ++--
 .../Front/src/views/Oobe/WelcomePage.tsx      |  24 ++--
 MaiChartManager/OobeBrowser.cs                |   5 +-
 5 files changed, 117 insertions(+), 107 deletions(-)

diff --git a/MaiChartManager/Front/src/views/Oobe/GameDirPage.tsx b/MaiChartManager/Front/src/views/Oobe/GameDirPage.tsx
index ba91ef13..c25a99d4 100644
--- a/MaiChartManager/Front/src/views/Oobe/GameDirPage.tsx
+++ b/MaiChartManager/Front/src/views/Oobe/GameDirPage.tsx
@@ -30,39 +30,41 @@ export default defineComponent({
     };
 
     return () => (
-      <div class="flex flex-col items-center justify-center h-full gap-6 px-12 relative">
-        <div class="i-mdi-folder-open text-5xl op-40" />
-        <div class="text-5 font-bold op-90">{t('oobe.selectGameDir')}</div>
-        <div class="text-sm op-60 text-center">{t('oobe.selectGameDirDesc')}</div>
-        <button
-          onClick={browseFolder}
-        >
-          {t('oobe.browse')}
-        </button>
-        <div>
-          <TransitionVertical>
-            {props.gamePath && (
-              <div class="flex flex-col items-center gap-2">
-                <div class={['text-sm px-4 py-2 rounded-lg', props.pathValid ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800']}>
-                  {props.pathValid ? t('oobe.selectedPath') : pathError.value}: {props.gamePath}
+      <div class="absolute inset-0 overflow-y-auto">
+        <div class="relative flex flex-col items-center justify-center min-h-full gap-6 px-6 py-6 pb-24 box-border">
+          <div class="i-mdi-folder-open text-5xl op-40" />
+          <div class="text-5 font-bold op-90">{t('oobe.selectGameDir')}</div>
+          <div class="text-sm op-60 text-center">{t('oobe.selectGameDirDesc')}</div>
+          <button
+            onClick={browseFolder}
+          >
+            {t('oobe.browse')}
+          </button>
+          <div>
+            <TransitionVertical>
+              {props.gamePath && (
+                <div class="flex flex-col items-center gap-2">
+                  <div class={['text-sm px-4 py-2 rounded-lg', props.pathValid ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800']}>
+                    {props.pathValid ? t('oobe.selectedPath') : pathError.value}: {props.gamePath}
+                  </div>
                 </div>
-              </div>
-            )}
-          </TransitionVertical>
+              )}
+            </TransitionVertical>
+          </div>
+          <Transition
+            duration={500}
+            leaveActiveClass="transition-opacity duration-500 transition-ease-in-out"
+            enterActiveClass="transition-opacity duration-500 transition-ease-in-out"
+            enterFromClass="opacity-0"
+            enterToClass="opacity-100"
+            leaveFromClass="opacity-100"
+            leaveToClass="opacity-0"
+          >
+            {props.initializing && <div class="absolute-full flex items-center justify-center bg-[oklch(0.97_0.01_var(--hue)/0.9)] backdrop-blur-sm">
+              <div class="flex items-center justify-center h-full text-sm op-60 animate-pulse">{t('oobe.initializingData')}</div>
+            </div>}
+          </Transition>
         </div>
-        <Transition
-          duration={500}
-          leaveActiveClass="transition-opacity duration-500 transition-ease-in-out"
-          enterActiveClass="transition-opacity duration-500 transition-ease-in-out"
-          enterFromClass="opacity-0"
-          enterToClass="opacity-100"
-          leaveFromClass="opacity-100"
-          leaveToClass="opacity-0"
-        >
-          {props.initializing && <div class="absolute-full flex items-center justify-center bg-[oklch(0.97_0.01_var(--hue)/0.9)] backdrop-blur-sm">
-            <div class="flex items-center justify-center h-full text-sm op-60 animate-pulse">{t('oobe.initializingData')}</div>
-          </div>}
-        </Transition>
       </div>
     );
   },
diff --git a/MaiChartManager/Front/src/views/Oobe/ModeSelectPage.tsx b/MaiChartManager/Front/src/views/Oobe/ModeSelectPage.tsx
index f8922d93..325d32b3 100644
--- a/MaiChartManager/Front/src/views/Oobe/ModeSelectPage.tsx
+++ b/MaiChartManager/Front/src/views/Oobe/ModeSelectPage.tsx
@@ -28,61 +28,64 @@ export default defineComponent({
     };
 
     return () => (
-      <div class="flex flex-col items-center justify-center h-full px-12">
-        <div class="text-5 font-bold op-90">{t('oobe.selectMode')}</div>
-        <div class="flex gap-4 w-full max-w-md mt-6 mb-3">
-          <div
-            class={['flex-1 p-5 rounded-xl cursor-pointer transition-all border-2 flex flex-col items-center gap-3',
-              !isRemote.value ? 'border-[oklch(0.7_0.1_var(--hue))] bg-[oklch(0.95_0.03_var(--hue))]' : 'border-transparent bg-[oklch(0.96_0.01_var(--hue))] hover:bg-[oklch(0.94_0.02_var(--hue))]']}
-            onClick={() => isRemote.value = false}
-          >
-            <div class="i-mdi-monitor text-3xl op-60" />
-            <div class="font-bold">{t('oobe.localMode')}</div>
-            <div class="text-xs op-60 text-center">{t('oobe.localModeDesc')}</div>
+      // Issue #74: OOBE屏幕的内容允许滚动，这样用户可以自己想办法滚动，避免点不到确认按钮之类
+      <div class="absolute inset-0 overflow-y-auto">
+        <div class="flex flex-col items-center justify-center min-h-full px-6 py-6 pb-24 box-border">
+          <div class="text-5 font-bold op-90">{t('oobe.selectMode')}</div>
+          <div class="flex gap-4 w-full max-w-md mt-6 mb-3">
+            <div
+              class={['flex-1 p-5 rounded-xl cursor-pointer transition-all border-2 flex flex-col items-center gap-3',
+                !isRemote.value ? 'border-[oklch(0.7_0.1_var(--hue))] bg-[oklch(0.95_0.03_var(--hue))]' : 'border-transparent bg-[oklch(0.96_0.01_var(--hue))] hover:bg-[oklch(0.94_0.02_var(--hue))]']}
+              onClick={() => isRemote.value = false}
+            >
+              <div class="i-mdi-monitor text-3xl op-60" />
+              <div class="font-bold">{t('oobe.localMode')}</div>
+              <div class="text-xs op-60 text-center">{t('oobe.localModeDesc')}</div>
+            </div>
+            <div
+              class={['flex-1 p-5 rounded-xl cursor-pointer transition-all border-2 flex flex-col items-center gap-3',
+                isRemote.value ? 'border-[oklch(0.7_0.1_var(--hue))] bg-[oklch(0.95_0.03_var(--hue))]' : 'border-transparent bg-[oklch(0.96_0.01_var(--hue))] hover:bg-[oklch(0.94_0.02_var(--hue))]']}
+              onClick={() => isRemote.value = true}
+            >
+              <div class="i-mdi-lan text-3xl op-60" />
+              <div class="font-bold">{t('oobe.remoteMode')}</div>
+              <div class="text-xs op-60 text-center">{t('oobe.remoteModeDesc')}</div>
+            </div>
           </div>
-          <div
-            class={['flex-1 p-5 rounded-xl cursor-pointer transition-all border-2 flex flex-col items-center gap-3',
-              isRemote.value ? 'border-[oklch(0.7_0.1_var(--hue))] bg-[oklch(0.95_0.03_var(--hue))]' : 'border-transparent bg-[oklch(0.96_0.01_var(--hue))] hover:bg-[oklch(0.94_0.02_var(--hue))]']}
-            onClick={() => isRemote.value = true}
+          <TransitionVertical>
+            {isRemote.value && (
+              <div class="flex flex-col gap-3 w-full max-w-sm my-3">
+                <CheckBox v-model:value={useAuth.value}>
+                  {t('oobe.enableAuth')}
+                </CheckBox>
+                <TransitionVertical>
+                  {useAuth.value && (
+                    <div class="flex flex-col gap-2">
+                      <TextInput
+                        placeholder={t('oobe.username')}
+                        v-model:value={authUsername.value}
+                      />
+                      <TextInput
+                        type="password"
+                        placeholder={t('oobe.password')}
+                        v-model:value={authPassword.value}
+                      />
+                    </div>
+                  )}
+                </TransitionVertical>
+                <CheckBox v-model:value={startupEnabled.value}>
+                  {t('oobe.startupOnBoot')}
+                </CheckBox>
+              </div>
+            )}
+          </TransitionVertical>
+          <Button
+            onClick={handleComplete}
+            ing={props.completing}
           >
-            <div class="i-mdi-lan text-3xl op-60" />
-            <div class="font-bold">{t('oobe.remoteMode')}</div>
-            <div class="text-xs op-60 text-center">{t('oobe.remoteModeDesc')}</div>
-          </div>
+            {t('oobe.complete')}
+          </Button>
         </div>
-        <TransitionVertical>
-          {isRemote.value && (
-            <div class="flex flex-col gap-3 w-full max-w-sm my-3">
-              <CheckBox v-model:value={useAuth.value}>
-                {t('oobe.enableAuth')}
-              </CheckBox>
-              <TransitionVertical>
-                {useAuth.value && (
-                  <div class="flex flex-col gap-2">
-                    <TextInput
-                      placeholder={t('oobe.username')}
-                      v-model:value={authUsername.value}
-                    />
-                    <TextInput
-                      type="password"
-                      placeholder={t('oobe.password')}
-                      v-model:value={authPassword.value}
-                    />
-                  </div>
-                )}
-              </TransitionVertical>
-              <CheckBox v-model:value={startupEnabled.value}>
-                {t('oobe.startupOnBoot')}
-              </CheckBox>
-            </div>
-          )}
-        </TransitionVertical>
-        <Button
-          onClick={handleComplete}
-          ing={props.completing}
-        >
-          {t('oobe.complete')}
-        </Button>
       </div>
     );
   },
diff --git a/MaiChartManager/Front/src/views/Oobe/ServerRunningPage.tsx b/MaiChartManager/Front/src/views/Oobe/ServerRunningPage.tsx
index 13e1795e..0a549d32 100644
--- a/MaiChartManager/Front/src/views/Oobe/ServerRunningPage.tsx
+++ b/MaiChartManager/Front/src/views/Oobe/ServerRunningPage.tsx
@@ -10,18 +10,20 @@ export default defineComponent({
     const { t } = useI18n();
 
     return () => (
-      <div class="flex flex-col items-center justify-center h-full gap-6 px-12">
-        <div class="i-material-symbols:check-circle-rounded text-5xl text-green-600" />
-        <div class="text-xl font-bold op-90">{t('oobe.remoteReady')}</div>
-        <div class="text-sm op-60">{t('oobe.lanAddresses')}</div>
-        <div class="flex flex-col gap-2 items-center">
-          {props.lanAddresses.map(addr => (
-            <div class="px-4 py-2 rounded-lg bg-[oklch(0.92_0.02_var(--hue))] text-sm font-mono">https://{addr}:5001</div>
-          ))}
+      <div class="absolute inset-0 overflow-y-auto">
+        <div class="flex flex-col items-center justify-center min-h-full gap-6 px-6 py-6 pb-24 box-border">
+          <div class="i-material-symbols:check-circle-rounded text-5xl text-green-600" />
+          <div class="text-xl font-bold op-90">{t('oobe.remoteReady')}</div>
+          <div class="text-sm op-60">{t('oobe.lanAddresses')}</div>
+          <div class="flex flex-col gap-2 items-center">
+            {props.lanAddresses.map(addr => (
+              <div class="px-4 py-2 rounded-lg bg-[oklch(0.92_0.02_var(--hue))] text-sm font-mono">https://{addr}:5001</div>
+            ))}
+          </div>
+          <button onClick={() => api.OpenMainUI()}>
+            {t('oobe.openMainUI')}
+          </button>
         </div>
-        <button onClick={() => api.OpenMainUI()}>
-          {t('oobe.openMainUI')}
-        </button>
       </div>
     );
   },
diff --git a/MaiChartManager/Front/src/views/Oobe/WelcomePage.tsx b/MaiChartManager/Front/src/views/Oobe/WelcomePage.tsx
index 0da304a3..a1e22d61 100644
--- a/MaiChartManager/Front/src/views/Oobe/WelcomePage.tsx
+++ b/MaiChartManager/Front/src/views/Oobe/WelcomePage.tsx
@@ -20,17 +20,19 @@ export default defineComponent({
     }));
 
     return () => (
-      <div class="flex flex-col items-center justify-center h-full gap-6">
-        <img src={rei} alt="MaiChartManager" class="h-48" />
-        <div class="text-2xl font-bold op-90">MaiChartManager</div>
-        <div class="text-lg op-70">{t('oobe.welcomeMessage')}</div>
-        <div class="flex items-center gap-4">
-          <div class="i-mdi-translate text-xl op-60" />
-          <Select
-            value={locale.value}
-            options={localeOptions}
-            onChange={(v: any) => setLocale(v as Locale)}
-          />
+      <div class="absolute inset-0 overflow-y-auto">
+        <div class="flex flex-col items-center justify-center min-h-full gap-6 px-6 py-6 pb-24 box-border">
+          <img src={rei} alt="MaiChartManager" class="h-48" />
+          <div class="text-2xl font-bold op-90">MaiChartManager</div>
+          <div class="text-lg op-70">{t('oobe.welcomeMessage')}</div>
+          <div class="flex items-center gap-4">
+            <div class="i-mdi-translate text-xl op-60" />
+            <Select
+              value={locale.value}
+              options={localeOptions}
+              onChange={(v: any) => setLocale(v as Locale)}
+            />
+          </div>
         </div>
       </div>
     );
diff --git a/MaiChartManager/OobeBrowser.cs b/MaiChartManager/OobeBrowser.cs
index fb9d5366..7a23494d 100644
--- a/MaiChartManager/OobeBrowser.cs
+++ b/MaiChartManager/OobeBrowser.cs
@@ -17,8 +17,9 @@ public OobeBrowser(string? loopbackUrl = null, string hash = "/oobe")
 
         Text = "MaiChartManager";
         ClientSize = new Size(1200, 1000);
-        FormBorderStyle = FormBorderStyle.FixedSingle;
-        MaximizeBox = false;
+        FormBorderStyle = FormBorderStyle.Sizable;
+        MaximizeBox = true;
+        MinimumSize = new Size(480, 480);
 
         var rm = new ComponentResourceManager(typeof(Launcher));
         Icon = (Icon?)rm.GetObject("notifyIcon1.Icon");