From a1cafc11d8f7cd00bdc47450cb54667f10951b58 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Tue, 1 Sep 2026 00:24:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=95=B0=E6=8D=AE=E5=BA=93?=
 =?UTF-8?q?=E7=AB=AF=E5=8F=A3=E9=85=8D=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/views/Setup/Setup.css | 11 +++++++++++
 fe/src/views/Setup/Setup.vue | 19 +++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/fe/src/views/Setup/Setup.css b/fe/src/views/Setup/Setup.css
index 8bfb06c..65acab9 100644
--- a/fe/src/views/Setup/Setup.css
+++ b/fe/src/views/Setup/Setup.css
@@ -1444,11 +1444,16 @@
   }
 
   #main.setup-page.database-page .mysql-fields {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(140px, 0.42fr);
     column-gap: 28px;
     row-gap: 8px;
     padding: 18px 22px 8px;
   }
 
+  #main.setup-page.database-page .database-password-field {
+    grid-column: 2 / 4;
+  }
+
   #main.setup-page.database-page .database-hint {
     margin-bottom: 16px;
     line-height: 1.65;
@@ -1465,3 +1470,9 @@
     line-height: 1.6;
   }
 }
+
+@media (max-width: 760px) {
+  .database-page .database-password-field {
+    grid-column: auto;
+  }
+}
diff --git a/fe/src/views/Setup/Setup.vue b/fe/src/views/Setup/Setup.vue
index fcb1585..88ee4c1 100644
--- a/fe/src/views/Setup/Setup.vue
+++ b/fe/src/views/Setup/Setup.vue
@@ -52,26 +52,37 @@
             </div>
 
 
-            <el-form-item :label="lang.db_user">
+            <el-form-item class="database-user-field" :label="lang.db_user">
               <el-input v-model="dbSettings.user" @input="clearDatabaseError"
                         :disabled="databaseLoading"
                         :placeholder="dbSettings.type === 'mysql' ? lang.db_user_ph : lang.pg_user_ph"
                         autocomplete="username"></el-input>
             </el-form-item>
 
-            <el-form-item :label="lang.db_host">
+            <el-form-item class="database-host-field" :label="lang.db_host">
               <el-input v-model="dbSettings.host" @input="clearDatabaseError"
                         :disabled="databaseLoading"
                         :placeholder="lang.db_host_ph"></el-input>
             </el-form-item>
 
-            <el-form-item :label="lang.db_name">
+            <el-form-item class="database-port-field" :label="lang.db_port">
+              <el-input v-model="dbSettings.port" @input="clearDatabaseError"
+                        :disabled="databaseLoading"
+                        type="number"
+                        min="1"
+                        max="65535"
+                        step="1"
+                        inputmode="numeric"
+                        :placeholder="lang.db_port_ph"></el-input>
+            </el-form-item>
+
+            <el-form-item class="database-name-field" :label="lang.db_name">
               <el-input v-model="dbSettings.name" @input="clearDatabaseError"
                         :disabled="databaseLoading"
                         :placeholder="lang.db_name_ph"></el-input>
             </el-form-item>
 
-            <el-form-item :label="lang.db_password">
+            <el-form-item class="database-password-field" :label="lang.db_password">
               <el-input v-model="dbSettings.password" @input="clearDatabaseError"
                         :disabled="databaseLoading"
                         type="password"