4.1 KiB
4.1 KiB
统一页面设计规范确认稿
参照系
- 产品心智：飞书审批 / 飞书工作台。
- 页面与组件模式：Ant Design / Ant Design Pro。
- 使用方式：借鉴成熟中文企业系统的信息架构、按钮命名、动作位置、列表和详情模式；不复制品牌、Logo、配色或视觉资产。
全局规则
- 操作型页面默认不做交互创新。页面、按钮、筛选、列表、详情、确认弹窗、更多菜单和移动端动作区优先参考飞书/Ant Design 等成熟系统模式；hyb-oa 的差异只体现在小团队裁剪、权限收敛和业务边界，不自创陌生操作。
- 页面标题只写页面名。副标题默认取消，只在异常、空状态、权限不足、企微/OA 边界、外部系统边界或不可逆动作说明时出现。
- 正常流程不解释。禁止用副标题、卡片描述、提示条解释用户已经能从标题和按钮理解的动作。
- 页头主按钮只用于创建类或真实页面级主动作，例如
新建报销、新建采购、新增合同、新增资产。 - 按钮使用成熟系统常规文案：
处理、去处理、查看详情、查看全部、查看进度、继续编辑、新建、新增、提交、保存、更多。禁止处理最急的一件这类口号型按钮。 - 列表页右侧固定操作列；低频或高风险动作进入
更多、台账工具或详情页。 - PC 详情页采用顶部摘要、中部事实/明细/证据、右侧状态与动作栏、底部历史；移动端采用单列分区和底部安全区主动作。
- 审批详情不使用竖向动作卡片。PC 使用一个动作条：
通过主按钮，退回、驳回次按钮，转审默认进更多；需要理由的动作点击后再展开输入和确认。 - 移动端底部只保留一个主动作，次动作进入
更多或确认面板。 - 通知中心只做事件收件箱，不复制待办，不做快速上手或流程解释。
- 请假、补卡、外出、加班和打卡由企业微信主办；OA 只做记录、镜像、异常、审计和应急入口。
页面归类
| 页面 | 模板 | 规则 |
|---|---|---|
| 工作台 | 工作台总览 | 待办摘要、常用业务入口、必要提醒；不强行放页头主按钮。 |
| 待我处理 | 任务处理列表 | 待处理 / 已处理 两个 Tab；行操作为 处理。 |
| 审批详情 | 详情工作区 | 摘要、证据、右侧动作栏、历史；禁止竖向动作卡片。 |
| 报销、采购、合同、项目、资产、付款、应付账款、票据 | 业务台账列表 | 标题、创建按钮、常用筛选、表格/卡片列表、右侧操作列；低频工具进 台账工具。 |
| 业务详情 | 详情工作区 | 摘要、事实、证据、关联、右侧状态/动作、底部历史。 |
| 管理 | 管理配置页 | 管理首页分 人员组织、审批流程、基础资料、系统设置、审计排障；子页表格配置。 |
| 个人设置 | 账号设置页 | 个人资料、账号安全、通知偏好、企业微信绑定；组织角色只读折叠，维护入口进管理。 |
| 通知中心 | 事件列表 | 状态变化、提醒、失败、同步结果；点击直达业务详情、审批任务或失败说明。 |
| 请假记录、考勤 | 记录/镜像页 | 企业微信主办，OA 记录和异常；普通用户不显示 OA 日常新建请假或审批动作。 |
| 移动页面 | 同模板移动表达 | 顶部状态、卡片/单列详情、底部一个主动作。 |
实施批次
- 第一批：工作台、待我处理、审批详情、个人设置、通知中心。
- 第二批：报销、采购、合同、项目、资产、付款、应付账款、票据的列表和详情。
- 第三批：管理页、请假记录、考勤、企微归档页和移动端对应页面。
验收
- 规范确认阶段：
git diff --check、Trellis task validate、governance check。 - 页面实现阶段：
cd client && npm run typecheck、cd client && npm run build、重点页面 Playwright/截图复核。 - 面向用户可测前：必须部署并完成公网检查。