把原本 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 自动展开