Commit 75f471e3 authored by Data Governance Dev's avatar Data Governance Dev

fix(web3): TaskModal UI 整理(基础信息两列对齐 + 连接字段3列紧凑布局 + 删冗余提示)

基础信息 tab:
- 删除「用户在查询下拉框看到的名称,建议格式:校验类型_表名」提示文字
- form-grid 加 .basic-info-grid class + CSS 让前两个 form-row(任务名称 / 任务分组)
  各占 grid 一列水平对齐;任务说明仍 .full 占整行

数据连接 tab 「连接方式」section:
- form-grid 加 .conn-form-grid class + CSS 改 3 列布局 + 固定列宽 240px
- .form-control { max-width: 150px } 缩 input 容器 —— 只在 conn-form-grid 作用域下生效,
  不污染全局 .text-input width:100%(避免影响其他弹框 FieldConfigDrawer / RuleModal 等)
- 6 个 input 紧凑靠左排列,不再撑满 modal

数据连接 tab 「数据表」section:
- 删除「选择数据表后自动加载该表全部字段」提示文字
- loading 提示「正在加载表列表...」保留
parent 33b60dc0
...@@ -19,12 +19,11 @@ ...@@ -19,12 +19,11 @@
<!-- Tab1 基础信息 --> <!-- Tab1 基础信息 -->
<div class="tab-panel" :class="{ active: activeTab === 'basic' }"> <div class="tab-panel" :class="{ active: activeTab === 'basic' }">
<div class="form-grid"> <div class="form-grid basic-info-grid">
<div class="form-row"> <div class="form-row">
<span class="form-label"><span class="required">*</span>任务名称</span> <span class="form-label"><span class="required">*</span>任务名称</span>
<div class="form-control"> <div class="form-control">
<input type="text" class="text-input" v-model="form.name" placeholder="如:身份证_用户信息表" /> <input type="text" class="text-input" v-model="form.name" placeholder="如:身份证_用户信息表" />
<div class="form-hint">用户在查询下拉框看到的名称,建议格式:校验类型_表名</div>
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">
...@@ -83,7 +82,7 @@ ...@@ -83,7 +82,7 @@
@click="form.dbType = c" @click="form.dbType = c"
>{{ c }}</div> >{{ c }}</div>
</div> </div>
<div class="form-grid"> <div class="form-grid conn-form-grid">
<div class="form-row"> <div class="form-row">
<span class="form-label"><span class="required">*</span>连接名称</span> <span class="form-label"><span class="required">*</span>连接名称</span>
<div class="form-control"><input type="text" class="text-input" v-model="form.connName" /></div> <div class="form-control"><input type="text" class="text-input" v-model="form.connName" /></div>
...@@ -161,7 +160,6 @@ ...@@ -161,7 +160,6 @@
/> />
</el-select> </el-select>
<div v-if="loadingTable" class="form-hint">正在加载表列表...</div> <div v-if="loadingTable" class="form-hint">正在加载表列表...</div>
<div v-else class="form-hint">选择数据表后自动加载该表全部字段</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -403,6 +403,19 @@ table.dq-table tbody tr:last-child td { border-bottom: none; } ...@@ -403,6 +403,19 @@ table.dq-table tbody tr:last-child td { border-bottom: none; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; } .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; }
.form-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .form-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.form-row.full { grid-column: 1 / -1; min-width: 0; } .form-row.full { grid-column: 1 / -1; min-width: 0; }
/* 基础信息 tab:前两个 form-row(任务名称 / 任务分组)水平并排两列对齐,
「任务说明」仍是 .full 占整行。grid 默认每个 form-row 独占一整行 → 这里强制分列。 */
.basic-info-grid > .form-row:nth-child(1) { grid-column: 1; }
.basic-info-grid > .form-row:nth-child(2) { grid-column: 2; }
/* 数据连接 tab 「连接方式」section:6 个 input 拆成 3 列布局(每行 3 个),
每列用固定宽度,整组不撑满 modal。
只缩 .form-control(input 容器),不动全局 .text-input width:100% —— 否则会污染其他弹框。
「测试连接」按钮行仍是 .full 占整行。 */
.conn-form-grid {
grid-template-columns: repeat(3, 240px);
justify-content: start;
}
.conn-form-grid .form-control { max-width: 150px; }
.form-label { .form-label {
font-size: 13px; font-size: 13px;
color: #606266; color: #606266;
......
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