refactor(web): 连接数据库卡片重排版（拆双 form + 两行布局 + 端口 input + 紧凑化）

把原本 3 行布局的「连接数据库」卡片重排为 2 行独立 form，结构更清晰
且整体更紧凑。

主要改动：

1. 拆成两个独立的 <el-form>
   - 第一个 form 只包「数据库类型」（3 个 radio-button）
   - 第二个 form 包「主机 IP / 端口 / 用户名 / 密码 / 数据库名 / 字符集」+
     测试连接按钮 + 结果 alert
   - 共享同一个 reactive form 对象，校验 / 重置不受影响
   - 两个 form 之间用 margin-top: 12px 留白（不用 hr 不用 divider）

2. 切到 inline form 模式
   - :inline="true" + label-width="auto" + label-position="right"
   - label 和控件同一行（不再是 label 上方 + 控件下方占两行）

3. span 重新分配（合计 24）
   - 主机 IP: 5（缩到刚好显示 192.168.20.196）
   - 端口: 3（数字 input）
   - 用户名: 2（用户名通常短）
   - 密码: 3（含眼睛图标）
   - 数据库名: 4（schema 名长度可变）
   - 字符集: 7（select + 下拉箭头占空间）

4. 端口字段改造
   - 从 el-input-number 改 el-input（用户偏好）
   - v-model.number 保证后端拿到 int（Pydantic cfg.port: int 兼容）
   - @input 过滤非数字字符（避免 Pydantic "not a valid integer"）

5. 解决 inline form 下 select/input 撑不满 col 的问题
   - 给每个 el-form-item 加 display: inline-flex; align-items: center; width: 100%
   - 让 form-item 强制撑满 el-col 内部，input/select width:100% 才能真正展开
   - 之前只加 width:100% 不够，因为 inline form 下 form-item 默认 inline-block
     宽度 = max(label, content)，select 会按内容自适应而不是 col 宽

6. gutter 从 20 → 12（列间距减半）

调整过程踩坑（避免再走）：
- inline form 下 el-form-item 默认 inline-block → 不会撑满 el-col
- 单纯给 input 加 width:100% 不够 → form-item 本身也要撑满
- 终极方案是 form-item 用 inline-flex + width:100% 让内部 flex 自动展开

web/static/index.html

@@ -288,9 +288,9 @@
                     </template>
                     <transition name="collapse">
                         <div v-show="!connectionCollapsed">
-                            <el-form :model="form" label-width="100px" :inline="false">
-                        <el-row :gutter="20">
-                            <el-col :span="6">
+                            <el-form :model="form" :inline="true" label-width="auto" label-position="right">
+                        <el-row :gutter="12">
+                            <el-col :span="24">
                                 <el-form-item label="数据库类型">
                                     <el-radio-group v-model="form.db_type" @change="onDbTypeChange">
                                         <el-radio-button label="mysql">MySQL</el-radio-button>
@@ -299,37 +299,40 @@
                                     </el-radio-group>
                                 </el-form-item>
                             </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="主机 IP">
-                                    <el-input v-model="form.host" placeholder="192.168.20.10" />
+                        </el-row>
+                    </el-form>
+                    <el-form :model="form" :inline="true" label-width="auto" label-position="right" style="margin-top: 12px">
+                        <el-row :gutter="12">
+                            <el-col :span="4">
+                                <!-- inline-flex 让 form-item 在 inline form 下也撑满 col，input 100% 才能真正展开 -->
+                                <el-form-item label="主机 IP" style="display: inline-flex; align-items: center; width: 100%">
+                                    <el-input v-model="form.host" placeholder="192.168.20.10" style="width: 100%" />
                                 </el-form-item>
                             </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="端口">
-                                    <el-input-number v-model="form.port" :min="1" :max="65535" style="width: 100%" />
+                            <el-col :span="4">
+                                <el-form-item label="端口" style="display: inline-flex; align-items: center; width: 100%">
+                                    <!-- @input 过滤非数字字符（避免用户输入字母），v-model.number 保证后端拿到 int -->
+                                    <el-input v-model.number="form.port" placeholder="3306" style="width: 100%"
+                                              @input="form.port = String(form.port).replace(/\D/g, '')" />
                                 </el-form-item>
                             </el-col>
-                        </el-row>
-                        <el-row :gutter="20">
-                            <el-col :span="12">
-                                <el-form-item label="用户名">
-                                    <el-input v-model="form.user" placeholder="root" />
+                            <el-col :span="4">
+                                <el-form-item label="用户名" style="display: inline-flex; align-items: center; width: 100%">
+                                    <el-input v-model="form.user" placeholder="root" style="width: 100%" />
                                 </el-form-item>
                             </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="密码">
-                                    <el-input v-model="form.password" type="password" show-password placeholder="（不回显）" />
+                            <el-col :span="4">
+                                <el-form-item label="密码" style="display: inline-flex; align-items: center; width: 100%">
+                                    <el-input v-model="form.password" type="password" show-password placeholder="（不回显）" style="width: 100%" />
                                 </el-form-item>
                             </el-col>
-                        </el-row>
-                        <el-row :gutter="20">
-                            <el-col :span="12">
-                                <el-form-item label="数据库名">
-                                    <el-input v-model="form.database" placeholder="smart-build" />
+                            <el-col :span="4">
+                                <el-form-item label="数据库名" style="display: inline-flex; align-items: center; width: 100%">
+                                    <el-input v-model="form.database" placeholder="smart-build" style="width: 100%" />
                                 </el-form-item>
                             </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="字符集">
+                            <el-col :span="4">
+                                <el-form-item label="字符集" style="display: inline-flex; align-items: center; width: 100%">
                                     <el-select v-model="form.charset" style="width: 100%">
                                         <el-option label="utf8mb4" value="utf8mb4" />
                                         <el-option label="utf8" value="utf8" />