# 页面交互模式与体验评审

按实际角色和任务选择下面的标准起点，并在 AppSpec 页面设计中记录适用范围、差异和验收。模式是设计建议，不是额外运行库；控件、导航、权限和数据继续消费[平台前端](./frontend.md)、[字段组件](./field-components.md)和[数据权限](./data-authz.md)。

## 标准管理页面 {#admin}

设备范围由实际用户任务确定；需要移动办理时设计对应任务。自定义报表和工具复用后台 Shell 的导航事实，通过声明增加菜单；图表选型见[成熟组件与开源库](./frontend.md#component-selection)。只有实际用户端需求才采用下文的独立 PC 或移动模式。

适用于管理员维护独立业务对象。显式选择 CRUD 视图，复用 Field Kit 与 Ant Design 的行为，外观和布局依据[设计工作流](./design-workflow.md)完善。页面优先呈现标题、主要新建入口、常用筛选、列表与行操作；复杂筛选按需展开。列按办理任务选择，记录默认排序、分页上限、空值/长文显示与操作条件。辅助模型无需独立导航。

列表进入详情再返回时明确关键词、筛选、页码、选择范围与位置是否保留；批量操作说明当前页/已选记录范围，确认内容包含实际对象及影响。新建和编辑复用字段规则，失败定位到字段并保留其他输入。删除只在业务明确需要时提供，由服务端权限和业务约束最终裁定。

标准 CRUD 自带的状态可引用共用设计；页面仍需说明角色、数据范围、可见字段、业务校验及差异。AC 至少按实际维护任务验证列表到详情返回、成功写入、禁止写入和适用校验。

## PC 用户任务页面 {#pc-task}

适用于申请、办理和跨模型任务。先给当前任务与下一步，按使用频率和决策顺序安排信息，不把所有底表铺成菜单。列表、详情和办理页按任务分开；同页编辑/提交/成功等状态在同一 PageSpec 中记录。

为每个入口写清直接链接、前置条件、返回位置与成功出口。可编辑区域和只读依据区分，主操作有具体业务动词；确认步骤仅用于需要复核的信息和后果。页面动作对应一个明确的业务契约，提交结果未知时查询原结果，不以新随机幂等键重提。

## 移动用户页面 {#mobile-task}

使用有作用域的 `openxiangda/mobile` 与平台字段组件。根据现场任务独立组织首页、列表、详情和填写顺序；不把宽表格缩小后当作移动设计。确定常用入口、任务卡片上的必要信息、主动作、导航返回与输入退出规则。

逐页检查触摸目标、键盘遮挡、焦点、滚动、安全区和长标题；筛选抽屉的应用/取消含义明确。网络慢时保留输入并阻止误操作，失败后给恢复入口。图片先缩略图、原图按需，附件展示大小限制、进度和失败原因。设计写明目标尺寸和渠道，真实验收在目标端走完主要任务。

## 匿名表单与本人记录 {#public-form}

外部无平台账号的人使用[匿名公开访问](./public-access.md)，不建 guest 角色或开放普通 Data API。设计说明公开入口、收集目的、必填/可选信息、附件规则、提交后结果和本人记录的能力范围。

明确同浏览器续填/本人访问的边界与凭证丢失后的实际行为，不承诺跨设备找回能力。所有权由平台填写；前端不接受用户指定其他人的身份。公开页面状态、校验、结果未知与安全提示按所消费契约设计，不虚构额外隐私同意或注册步骤。

## 审批与办理详情 {#workflow}

复用[标准流程、待办和通知](./workflow-events.md)。详情优先显示当前状态、业务摘要、当前任务及历史；只提供当前用户被授权的操作。区分申请人、办理人和旁观者看到的字段、意见与动作，写清退回可编辑范围、撤回条件、转交等已启用能力。

快速重复点击、任务已被他人处理和响应中断要有具体结果与恢复方式。通知详情跳转回标准目标，不复制流程状态或另做审批授权。AC 用真实角色覆盖主流程、退回/拒绝及越权反例。

## 每页交互规格检查 {#page-review}

把下表应用到每个实际页面。共用行为引用一个权威设计，页面写差异；不适用时说明业务理由，不为凑表增加功能。

| 维度 | 编码前的具体决定 |
| --- | --- |
| 任务与入口 | 稳定页面 ID，REQ/旅程、角色和目标；入口、直链、返回及成功出口 |
| 信息与字段 | 区域优先级、默认排序/筛选；标签、帮助、默认值、必填、联动、可编辑条件、校验时机和提示位置 |
| 操作与反馈 | 主次操作、触发条件、文案、隐藏/禁用依据、复核内容、成功反馈和后续动作 |
| 页面状态 | 初次加载/刷新、正常、首次空数据、筛选无结果、无权限、请求错误和重试 |
| 写入与恢复 | 未保存、提交中、成功、明确失败、结果未知、他人修改冲突；输入保留与草稿边界 |
| 数据边界 | 空值、长文本、最大条目、分页、批量选择范围；附件类型/大小/失败及重试 |
| 权限与多端 | 页面/动作/行/字段、多角色并集；PC 批量与移动任务差异、键盘焦点、触摸和返回 |
| 原型与验收 | 所选标准模式或原型位置、适用状态；对应 AC、角色、输入条件、操作和可观察结果 |

## 评审与验证尺度 {#evaluation}

先用用户能理解的方式走一遍“从哪里进来、看到什么、怎样完成、出错怎么恢复”，再核对规则、数据与权限的一致性。原型允许样例数据，必须标注；只有效果图不能证明任务可完成。选定标准模式也需完成本应用的逐页差异设计。

实现后用实际界面验证任务成功率和明显阻碍，至少覆盖已纳入范围的角色、入口、重要状态和目标端。记录结果未知、重复操作和并发冲突的服务端读回，不只看 toast；性能记录数据量和请求链路。构建通过、HTTP 200、截图数量或检查表填满均不代替真实业务验收。