# 页面组合规则

## 全页面进入

首次进入页面时，以纯色背景叠加 `loading type="illustration"` 过渡；数据就绪后再展示页面内容，完成但无数据时切换为 `empty`。局部请求不使用页面级插画加载。

## 表单页

以 `form` 作为校验与提交边界，用 `field` 承载输入或只读选择入口。需要文本录入时，统一使用【输入框】换行文本域样式：`type="textarea"` + `label-position="top"`，设置 `maxlength="200"`、`show-word-limit`，并按内容使用 `rows`、`autosize`。图片、视频、文件上传使用 `uploader` 的【文件上传】表单示例样式，置于白色表单卡片内并设置 `max-count="9"`；选择型字段连接已有选择组件。提交中通过按钮的 loading/disabled 状态防止重复提交。底部主操作优先使用 `bottom-action-bar` 或 `submit-bar`。

## 列表页

搜索功能统一使用 `search variant="pure"` 的【搜索】纯净样式，并沿用 `v-model`、`search`、`cancel` 连接既有筛选逻辑。组合 `pull-refresh`、`list`、`loading`、`empty` 表达首屏、刷新、分页、无数据和失败状态。筛选条件复杂时优先使用 `work-order-filter` 并核查其面板承载；需要动态表单时使用 `form-panel`，专用面板不适用的混合任务使用 `action-sheet` 已有变体或「自定义面板」示例。所有触发面板均按 `dynamic-panel-policy.md` 执行，禁止轻量 `popup` 例外，不将筛选逻辑分散在列表项内。

## 详情页

白色卡片外层的一级标题使用 `blue-mark-header`，卡片内的二级标题使用默认样式的 `title-bar`。字段名称与回显值优先使用 `label`，左侧标签文本尽量自带冒号；多字段成组或字段类型较多时使用 `info-card` + `label`。其余信息可用 `cell-group`、`card`、`tag` 组织，页面级动作放在 `bottom-action-bar` 或 `action-bar`。白色卡片内最后一个实际可见控件的末尾分割线必须隐藏：`cell`/`field` 使用 `border="false"`，`material-display-bar` 使用 `divider="false"`。危险或不可逆操作必须经 `dialog` 确认，并在完成后用 `toast` 或 `notify` 反馈。

## 物料流程与阅读确认

选择物料、工具或备件使用 `material-add`；单项数量操作使用 `material-action-bar`，详情使用 `material-detail`，提交前或详情页回显使用 `material-display-bar`。执行前阅读与确认使用 `content-panel`，面板内以 `title-bar` 或 `blue-mark-header` 分组；除非需求另有规定，确认动作由 `confirm` 事件承接。

动态面板入口优先使用 `cell` 的【单元格】右图标样式（`right-icon="arrow"` + `click`），并用 `value` 或 `note` 回显当前结果。

## 样式扩展

先查目标组件的 `var.less` 与 `src/style/`，优先原样使用已有样式变体与变量组合；未有产品经理明确提出并确认的具体调整，不得修改组件视觉。动态面板严格执行 `dynamic-panel-policy.md`，公开变量不构成擅改样式的授权；禁止依赖内部 DOM 层级、覆盖私有 class 或复制组件源码样式。