01 / Scaffolding Standard
1. 纯数据列表页 (ListPage)
场景定义与骨架规范
适用于普通的单表或多表纯数据列表检索展示管理，通常不包含复杂嵌套浮层。核心思想是高密度展示、简洁容器承载。
| 属性维度 | 规格与设计红线 |
|---|---|
| 工具条布局 | 统一为 .operetion-section 结构。左侧放主/次动作按钮，右侧放 #dataOperationsContainer (自动挂载刷新/导入/导出/删除)。 |
| 滚动与高度限制 | 表格 acmeAgGrid 容器高度固定为 calc(100vh - 170px)。底部分页器稳定在视口最下方，严禁随滚动条滑出视口。 |
| 筛选与表头 | 优先使用 ag-Grid 表头列过滤。禁止在页面顶部默认摆放一整块 4-6 字段大面积查询筛选框。 |
[ acmeAgGrid 表格容器: calc(100vh - 170px) ]
<!-- ListPage 标准 Razor DOM 骨架 -->
<div class="container-fluid" style="padding: 10px;" data-ui-archetype="ListPage" data-ui-sample="Position">
<!-- 1. 工具操作区 -->
<div class="operetion-section d-flex justify-content-between align-items-center mb-2">
<div class="d-flex" style="gap: 8px;">
<button type="button" class="btn btn-success" id="btnAdd" data-permission="position_add">
<i class="fal fa-plus mr-1"></i>新建职位
</button>
</div>
<!-- 右侧由 AcmeGridOperations 自动注入挂载 -->
<div id="dataOperationsContainer"></div>
</div>
<!-- 2. 数据表格区 -->
<div class="data-section">
<div id="positionGrid" class="ag-theme-custom" style="height: calc(100vh - 170px); min-height: 480px;"></div>
</div>
</div>正确设计准则 (Do)
- 根容器直接使用 10px 紧凑内边距，使空间最大化用于表格。
- 左侧业务推进按钮保持在 2 个以内，保持界面克制。
- 表格使用 `acmeAgGrid.enableResizeListener` 强绑定自适应高度。
错误设计准则 (Don't)
- 禁止在普通列表页顶部堆积大面积无用的页面功能文字介绍。
- 禁止给表格容器外围套一层带厚边框的二次 card 背景卡片。
- 禁止手写无分页的自由高度，防止页面因表格行过多拉长造成底部分页器移出视口。
02 / Workflow Popup
2. 弹窗列表编辑页 (ListModalPage)
场景定义与滚动防突围
常用于列表项的新增、快速修改表单。关键工程准则：确保弹窗底部操作按钮永远固底可见，表单超长时仅 `modal-body` 独立垂直滚动。
<!-- ListModalPage 标准 Modal Razor 骨架 -->
<div class="modal fade recruitment-admin-modal" id="demandModal" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content" style="max-height: calc(100vh - 3.5rem); display: flex; flex-direction: column;">
<div class="modal-header">
<h5 class="modal-title">招聘需求</h5>
<button type="button" class="close" data-dismiss="modal"><i class="fal fa-times"></i></button>
</div>
<!-- modal-body 限制高度自适应产生滚动条 -->
<div class="modal-body custom-scroll" style="overflow-y: auto; flex: 1 1 auto;">
<form id="demandForm">
<div class="acme-form-section">
<div class="acme-form-section-title">基本信息</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>招聘职位</label>
<input type="text" class="form-control" id="operatingPost" placeholder="请输入职位" />
</div>
</div>
</div>
</form>
正确设计准则 (Do)
- 必须使用 `modal-content` 垂直 flex 列布局限制总高度最大为 `100vh - 3.5rem`。
- 表单分组必须强绑定统一的 `.acme-form-section` 和 `.acme-form-section-title` 类。
错误设计准则 (Don't)
- 禁止由于不做最大高度围堵导致模态框在低分辨率屏幕下溢出，造成页面双重滚动条。
- 禁止在弹窗内表单各组外层套用带边框、圆角的 card 盒子，杜绝视觉二次过度包裹。