refactor(meeting-new): 恢复 2 列布局, 保留 el-form 项目标准

之前把 grid 改成单列 el-form-item 序列, 偏离原型 2 列布局。
现在用 .form-grid (CSS Grid 2 列 + grid-auto-flow: column 让左 6 右 5 对齐)
包住 11 个 el-form-item, 同时保留:
- el-form + :rules (项目标准)
- el-button type=primary (项目标准, 不覆盖 CSS)
- label-width 110px (跟原型一致, 不是 skill 的 120px — 因为原型是设计真源)
- :deep(.el-form-item) { margin-bottom: 0 } 让 grid 控制间距

按钮用 el-form-item 包裹 (skill 标准), 通过 CSS 隐藏 label 列避免空白。

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
郭庆泰
2026-08-18 22:45:45 +08:00
co-authored by Claude
parent 8f62f65c0b
commit 518da057e4
+38 -5
View File
@@ -6,8 +6,10 @@
<!-- 红字提示 (业务规则) -->
<p class="hint-text">*会议名称默认为项目名称,不可修改</p>
<!-- 整张 el-form (skill form 页标准: el-form 包裹所有 el-form-item, 不另起 form-actions) -->
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<!-- el-form 包裹 + label-width 110px (跟原型一致) -->
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
<!-- 2 列布局 (跟原型 .form-grid 一致: grid-auto-flow: column 让左 6 5 对齐) -->
<div class="form-grid">
<!-- 左列 6 项只读快照 (来自 biz_project 派生) -->
<el-form-item label="项目编号">
<span class="form-value code">{{ snap.projectNo }}</span>
@@ -44,9 +46,10 @@
<el-form-item label="备注">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</div>
<!-- 底部按钮 (skill: 直接 el-form-item 包裹, 不另起 div.form-actions) -->
<el-form-item>
<!-- 底部按钮 (skill: el-form-item 包裹, 不另起 div.form-actions) -->
<el-form-item class="form-actions">
<el-button type="primary" @click="onSave">保存</el-button>
<el-button @click="goBack">取消</el-button>
</el-form-item>
@@ -161,7 +164,21 @@ onMounted(async () => {
line-height: 1.8;
}
/* 只读值样式 (跟 el-form-item 的 input 同高, 让布局对齐) */
/* === 2 列布局 (跟原型 .form-grid 一致, grid-auto-flow: column 让左 6 右 5 对齐) === */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
grid-template-rows: repeat(6, auto);
gap: 20px 32px;
max-width: 900px;
}
/* grid 内的 el-form-item 不再加默认 margin-bottom (由 grid 控制间距) */
.form-grid :deep(.el-form-item) {
margin-bottom: 0;
}
/* 只读值样式 */
.form-value {
font-size: 14px;
color: #333;
@@ -171,4 +188,20 @@ onMounted(async () => {
font-family: ui-monospace, "Courier New", monospace;
color: var(--brand-primary);
}
/* 底部按钮 (skill: 用 el-form-item 包裹, 不用 div.form-actions) */
.form-actions {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #f0f0f0;
}
/* 按钮所在 form-item 不显示 label 列 (skill form-actions 包裹的标准做法) */
.form-actions :deep(.el-form-item__label) {
display: none;
}
.form-actions :deep(.el-form-item__content) {
margin-left: 0 !important;
display: flex;
gap: 12px;
}
</style>