Skip to content

D
db-tools
Commit ce27e205 authored by Data Governance Dev's avatar Data Governance Dev
Browse files
Options

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 自动展开
parent b427992c
Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 25 deletions
web/static/index.html
View file @ ce27e205
...@@ -288,9 +288,9 @@ ...@@ -288,9 +288,9 @@
</template> </template>
<transition name="collapse"> <transition name="collapse">
<div v-show="!connectionCollapsed"> <div v-show="!connectionCollapsed">
<el-form :model="form" label-width="100px" :inline="false"> <el-form :model="form" :inline="true" label-width="auto" label-position="right">
<el-row :gutter="20"> <el-row :gutter="12">
<el-col :span="6"> <el-col :span="24">
<el-form-item label="数据库类型"> <el-form-item label="数据库类型">
<el-radio-group v-model="form.db_type" @change="onDbTypeChange"> <el-radio-group v-model="form.db_type" @change="onDbTypeChange">
<el-radio-button label="mysql">MySQL</el-radio-button> <el-radio-button label="mysql">MySQL</el-radio-button>
...@@ -299,37 +299,40 @@ ...@@ -299,37 +299,40 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> </el-row>
<el-form-item label="主机 IP"> </el-form>
<el-input v-model="form.host" placeholder="192.168.20.10" /> <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-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="4">
<el-form-item label="端口"> <el-form-item label="端口" style="display: inline-flex; align-items: center; width: 100%">
<el-input-number v-model="form.port" :min="1" :max="65535" style="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-form-item>
</el-col> </el-col>
</el-row> <el-col :span="4">
<el-row :gutter="20"> <el-form-item label="用户名" style="display: inline-flex; align-items: center; width: 100%">
<el-col :span="12"> <el-input v-model="form.user" placeholder="root" style="width: 100%" />
<el-form-item label="用户名">
<el-input v-model="form.user" placeholder="root" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="4">
<el-form-item label="密码"> <el-form-item label="密码" style="display: inline-flex; align-items: center; width: 100%">
<el-input v-model="form.password" type="password" show-password placeholder="（不回显）" /> <el-input v-model="form.password" type="password" show-password placeholder="（不回显）" style="width: 100%" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="4">
<el-row :gutter="20"> <el-form-item label="数据库名" style="display: inline-flex; align-items: center; width: 100%">
<el-col :span="12"> <el-input v-model="form.database" placeholder="smart-build" style="width: 100%" />
<el-form-item label="数据库名">
<el-input v-model="form.database" placeholder="smart-build" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="4">
<el-form-item label="字符集"> <el-form-item label="字符集" style="display: inline-flex; align-items: center; width: 100%">
<el-select v-model="form.charset" style="width: 100%"> <el-select v-model="form.charset" style="width: 100%">
<el-option label="utf8mb4" value="utf8mb4" /> <el-option label="utf8mb4" value="utf8mb4" />
<el-option label="utf8" value="utf8" /> <el-option label="utf8" value="utf8" />
...@@ -2372,4 +2375,4 @@ ...@@ -2372,4 +2375,4 @@
app.mount('#app'); app.mount('#app');
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment