hyb-oa/.trellis/tasks/05-29-page-design-rules-audit/prd.md

全页面设计规则梳理

Goal

梳理 hyb-oa 当前 PC、移动和企业微信入口下所有页面的职责、默认布局、操作层级和后续优化建议，形成一份可用于后续前端开发、改进和重构的页面规则地图。目标不是本轮直接重构页面，而是先把“每类页面应该长什么样、先展示什么、哪些能力应隐藏到高级入口、哪些页面不应该继续做”的判断固定下来，降低单人开发时的返工和误改概率。

What I Already Know

• 产品面向国内、小于 10 人的科技初创公司，用户一人多岗，默认需要低决策成本、少入口、任务优先。
• 开发和维护主要由一个人完成，后续页面规则必须减少分叉、减少页面局部特例，优先复用已有共享布局和验证路径。
• 前端视觉、布局和交互裁决以 frontend-design skill 为准；docs/产品设计规则.md 只保留产品体验事实、业务边界和验收边界。
• OA 主办报销、采购、费用、合同、项目、付款、AP、票据、资产、审计和高敏附件。
• 企业微信主办 HR/考勤日常动作，包括打卡、请假、补卡、外出、加班；OA 只做镜像、历史、审计、异常和应急接管。
• 当前路由覆盖认证、工作台、审批、报销、财务、票据、采购、项目、合同、资产、HR/考勤镜像、协同、通知、管理配置和移动端页面。
• 最近已完成的前端方向包括：侧边栏任务优先、工作台去快速上手常驻化、待我处理任务优先、报销列表任务卡和台账工具降噪、HR/考勤 OA 快批入口移除。

Scope

• 梳理所有当前已注册路由和页面文件的页面规则。
• 覆盖 PC、移动、企业微信 WebView 入口下的列表页、详情页、工作台、审批页、管理配置页、通知页、异常页和打印页。
• 输出页面分级、页面布局模板、模块级建议、操作显隐规则、文案规则、空态/错误/加载/权限状态规则和验证建议。
• 明确哪些页面应优先整改，哪些页面只保留管理/历史/低频入口，哪些页面未来需要单独 Trellis task。

Out Of Scope

• 本轮不直接修改业务页面代码。
• 本轮不做公网部署、公网检查、真实数据写入、企业微信写入或生产配置变更。
• 本轮不重做视觉主题、颜色系统、组件库或路由权限模型。
• 本轮不新增业务能力，不恢复已冻结模块，不把企业微信主办的 HR/考勤日常审批搬回 OA。

Requirements

• 页面规则必须以小团队中文 OA 工作台为中心，不做营销页式布局。
• A 类核心流程必须先回答“我现在要处理什么 / 下一步点哪里 / 当前状态是什么”。
• B 类业务运营页面必须默认显示常用台账和处理动作，导出、批量、统计、模板、复杂筛选进入高级入口或权限入口。
• C 类管理配置页面允许信息密度更高，但必须统一承接在“管理”下，默认不进入普通员工路径。
• 移动端不得出现桌面宽表或 PC 管理配置台，必须使用卡片/列表/底部主操作/安全区规则。
• 详情页必须统一“状态与下一步、业务摘要、证据材料、审批/处理历史、动作面板”的信息顺序。
• 全系统必须统一操作区位置：PC 全局主动作在页头右侧，列表筛选/工具在页头下方命令栏，行级动作在列表最右侧或卡片尾部，详情高风险动作在右侧命令栏，移动主动作在底部吸附区。
• 资产管理、盘点、合同、采购、项目等 B 类业务页必须单独列规则，不能只用“业务运营页面”笼统覆盖。
• 所有普通用户页面不展示 UUID、taskId、entityId、内部状态码、Secret、完整本地路径、原始 payload 或调试字段。
• HR/考勤页面必须明确企微主办边界：OA 页面默认是镜像/历史/异常/应急，不是日常请假/打卡入口。
• 行业惯例相关事项必须提前形成决策清单，逐项确认后写入 design.md 或长期规范，不能在后续页面改造时临时各做各的。

Confirmed Decisions

• 2026-05-30：一级导航采用“任务优先 + 权限显示 + 更多兜底”，但不把已启用且常用的业务台账强行藏到 更多。合同、采购、资产、项目 这类真实业务入口，只要用户有权限且模块启用，应直接作为一级入口显示；更多 只承载低频、冻结、阶段性或偶尔查看的入口。
• 2026-05-30：工作台 和 待我处理 不重复。工作台 是所有人的今日总览和分流；待我处理 是审批/处理角色的正式处理队列，只对有处理职责的人显示。
• 2026-05-30：全系统审批动作集中在 待我处理 / 审批详情执行。报销、采购、合同、项目、资产等业务台账列表和普通业务详情只显示 查看处理、查看进度、补材料 或进入审批任务的入口，不直接放 通过、驳回、退回、转审；审批前必须进入统一审批详情核对摘要、证据、后果和确认。
• 2026-05-30：全系统固定使用六类页面模板：工作台总览、任务处理列表、业务台账列表、主从工作台、详情工作区、管理配置页。后续页面先判定模板，再填业务内容，不允许每个页面临时自创新布局。
• 2026-05-30：全系统统一操作区坐标。PC 页头右侧放页面主动作，页头下方命令栏放筛选和台账工具，列表最右列或卡片尾部放行级动作，详情右侧命令区或动作栈放高风险动作，移动端底部吸附主动作；危险/不可逆动作必须和普通动作拉开并二次确认。
• 2026-05-30：全系统采用“状态先于按钮”的动作生命周期规则。每个业务对象必须先定义状态矩阵，再决定按钮显隐、主次关系、禁用原因和确认方式；不允许页面局部临时判断草稿、审批中、已通过、待支付、已支付、已取消、异常等状态下的动作。
• 2026-05-30：全系统统一删除、撤回、取消、作废和归档语义。草稿或未生效临时对象才可删除；审批中由发起人按规则撤回；业务不再执行用取消；已编号、已签署、已付款或已生效对象失效用作废；完成后锁定留存用归档。已提交后的业务对象原则上不物理删除，必须保留原因、操作者、时间和审计记录。
• 2026-05-30：全系统采用“服务端权限为准，前端按当前任务角色收敛展示”的角色和数据范围规则。普通员工默认看“我的/与我相关”，审批人看“待我处理”，财务和负责人看授权范围内的台账与处理入口，管理员看配置和审计；即使同一用户一人多岗，也不因为有权限就默认展开所有高级工具、全量数据和内部字段。
• 2026-05-30：全系统采用业务编号和自然中文作为普通用户主语义。普通用户页面不展示 UUID、taskId、entityId、权限 code、内部状态码、原始 payload、完整本地路径或调试字段；只有审计、排障、打印留痕等授权场景才展示必要内部编号，并且不能替代业务编号成为主标识。
• 2026-05-30：全系统权限不足、空状态和异常状态统一用自然中文说明原因和下一步。普通用户路径不暴露 403、接口名、权限 code、内部状态码、路由栈、完整路径、原始 payload 或大段技术错误；管理员、审计和排障页只展示最小必要技术信息。
• 2026-05-30：全系统列表和台账默认收敛。列表首屏只保留 3 到 5 个高频筛选，搜索、状态、范围、时间优先；导出、批量、统计、模板、全范围、高级筛选进入 台账工具 或 更多；批量动作只在选中记录后出现；移动端不承接复杂台账工具，只保留搜索、状态筛选和卡片列表。
• 2026-05-30：全系统长表单支持草稿和清晰提交。保存草稿与提交是两个明确动作；提交前必须做业务校验和摘要确认；离开未保存页面要提示；错误提示必须定位到字段、明细行、发票、附件或材料区；移动端表单只保留必要字段和底部主动作，不承接复杂配置表单。
• 2026-05-30：全系统详情页采用统一证据结构。详情页先展示状态与下一步，再展示业务摘要，证据材料居中，审批/处理历史靠后，动作面板固定在 PC 右侧或移动端底部；报销、审批、采购、合同、资产等详情页都按这个顺序组织，不把所有信息平铺到首屏，也不把高风险动作放在用户看完证据之前。
• 2026-05-30：全系统证据材料统一在详情页集中处理。列表页和台账页只显示发票、附件、合同文件、回单、资产材料等证据的完整性摘要、缺失提示和进入详情入口，不直接承接预览、下载、删除、批量打包或敏感材料处理；这些动作进入详情页、详情命令区、台账工具或授权审计路径。
• 2026-05-30：全系统上传材料采用“材料类型先行”。上传前必须明确是 PDF 发票、普通附件、合同文件、付款回单、验收材料、资产材料还是电子资料索引，不使用一个万能 上传附件 入口混收所有材料；不同类型分别进入对应校验、权限、审计和展示位置。
• 2026-05-30：全系统付款相关动作集中在 付款 / 财务处理详情执行。报销、采购、合同、项目等列表和普通详情只显示付款状态、回单状态、查看付款、补回单 或进入付款记录入口，不直接放 标记已付款、取消付款、批量付款、执行付款；付款动作前必须核对金额、对象、线下付款说明、证据和回单。
• 2026-05-30：全系统跨模块关联采用“摘要 + 跳转”边界。项目、采购、合同、报销、资产、付款等页面可以展示关联对象的业务编号、名称、状态、金额/数量、负责人、证据完整性和下一步摘要，但不能复制对方模块的完整流程、审批动作、付款动作、发票/OCR处理、合同正文下载或高敏附件操作；需要处理时跳转到归属模块详情、审批任务或财务处理页。
• 2026-05-30：移动端只承接轻动作，不复制 PC 管理台。移动端主要用于提交、补材料、查状态、处理待办、扫码、上传和从企业微信消息直达；不承接复杂台账、全范围管理、批量导出、批量审批、批量付款、流程配置、管理配置、功能开关、复杂筛选和大表格；移动页面统一使用顶部状态/焦点卡、卡片列表或分区详情、底部安全区主动作。
• 2026-05-30：全系统区分待办和通知。待我处理 是行动列表，只放需要当前用户处理的事项；通知中心 是事件收件箱，只放状态变化、提醒、失败、同步结果等消息；通知点击直达业务详情、审批任务或失败解释页，不在通知中心复制一套待办处理列表，也不把普通通知算入工作台 今日待处理。
• 2026-05-30：全系统敏感数据默认最小展示。合同正文、发票、回单、付款信息、资产敏感字段、附件和导出文件只展示必要摘要；预览、下载、导出、批量下载必须按服务端权限控制并写审计；普通列表和移动端不展示完整账号、完整路径、原始附件名里的敏感信息或高敏合同/财务细节。
• 2026-05-30：全系统危险动作必须二次确认且展示对象和后果。删除、付款、发布、停用、作废、驳回、退回、切换配置、批量处理等不可逆或高风险动作，确认面板必须包含对象摘要、后果、影响范围、必要理由输入或确认输入，并写入审计；不允许只弹一句 确定吗？。
• 2026-05-30：全系统明确集成和外部系统边界。OA 主办报销、采购、合同、项目、付款、AP、票据、资产和高敏附件；企业微信主办 HR/考勤日常动作；ERP、银行、代账、OCR、企业微信消息等外部系统只展示真实同步状态、失败原因和下一步，不在界面上承诺系统无法确认的 已同步、已付款 或 已审批。
• 2026-05-30：全系统统一试运行和验收证据口径。本地构建、Playwright 和截图通过只代表本地验证通过；只有完成部署、公网访问检查、关键路径冒烟和必要截图证据后，才能告知用户 可以线上测试；未部署时只能说明 本地验证通过，尚未线上可测。
• 2026-05-30：固定资产在 OA 中按统一资产台账的 FA 类型管理，口径是实物责任、盘点和离职交接，不是完整财务固定资产账。电脑、显示器、硬盘、设备、安全介质等需要归还或盘点的实物应登记；普通耗材不登记；折旧、残值、会计科目和月度折旧凭证暂由财务/代账系统主办，OA 只记录采购来源、责任链、流转状态和交接证据。
• 2026-05-30：采购/报销与固定资产采用“资产候选 + 管理员建卡”的轻量衔接。采购明细或报销材料只标记可能形成资产的线索，不自动生成资产卡片；到货、验收或报销完成后，由管理员核对实物、数量、归属、是否耗材、是否退货/赠品后手动创建 FA 资产卡片并关联来源单据。
• 2026-05-30：固定资产必须有 FA 资产编号；电脑、显示器、硬盘、设备、安全介质等实物资产能贴标签就贴二维码标签。确实不适合贴标签的资产不强制贴，但必须记录序列号、保管人和位置；盘点支持扫码优先和手工输入兜底，不强制复杂拍照盘点。
• 2026-05-30：固定资产盘点采用轻量频率。小团队 V1 默认每季度做一次固定资产轻盘点；离职、调拨、维修、报废等事件发生时做事件盘点；备份硬盘、安全介质和关键设备每月确认一次责任人和位置。
• 2026-05-30：固定资产处置采用“流转留痕、处置确认”的轻量规则。领用、归还、调拨由管理员直接记录并留痕；报废、丢失、出售、赠送等处置必须负责人确认并填写原因；涉及赔偿、金额或责任争议时另走审批或线下确认，不在资产页一键完成。
• 2026-05-30：电子资产只做责任和验证索引。代码仓库、系统、备份介质/集合在 OA 中只登记元数据、负责人、权限回收要求、备份/恢复验证日期和归档位置摘要；不保存源码包、密钥、token、完整配置、真实完整路径或备份内容。
• 2026-05-30：电子资料资产 EA-DOC 只登记资料名称、类型、hash/校验摘要、敏感级别、负责人、关联项目/合同/付款和归档位置摘要。合同正文、银行流水、证照原件、客户资料等高敏原文不进普通资产页，必须走对应业务附件权限或线下受控归档。
• 2026-05-30：资产管理规则组已收口。后续资产页面整改按本任务和 docs/需求-资产管理规约.md 执行，不再在本轮继续扩展资产业务细节；下一组转入合同、采购、项目和财务台账的统一页面规则。
• 2026-05-30：合同、采购、项目和财务台账统一采用“列表查找、详情处理”的页面边界。列表页只负责查找、筛选、看状态和进入详情；合同下载、归档、付款、导出、批量处理、作废、敏感附件查看等高风险动作放到详情页、详情命令区或台账工具中，并二次确认。
• 2026-05-30：合同、采购、项目和财务台账默认按当前角色收敛视角。普通员工看 我发起/我相关，负责人看 我负责/项目相关，财务看 待复核/待付款/异常，管理员才默认进入或可切换 全范围；全范围、导出、批量默认收进台账工具。
• 2026-05-30：合同台账 V1 只做登记、归档、到期/续签提醒，以及关联项目、采购和付款，不做完整合同生命周期管理。电子签、复杂法务审查、条款库、版本协同和完整 CLM 不进入当前合同台账；如需合同审批，走 OA 统一审批中心或另建后续 Trellis task。
• 2026-05-30：采购台账 V1 只做申请、审批、附件、轻量验收/归档，以及关联合同、项目和付款/AP，不做完整采购 ERP。采购订单全生命周期、库存、三单匹配、供应商生命周期管理、招采评标和 ERP 入账不进入当前采购页；审批通过也不代表已付款、已入库或已形成固定资产。
• 2026-05-30：项目模块 V1 只做轻项目台账：项目状态、负责人/成员、里程碑/任务、风险、交付记录，以及关联报销、采购、合同和付款，不做完整项目管理软件。甘特图、复杂任务依赖、工时、资源排期、OKR、项目组合管理和大型协同平台不进入当前项目页。
• 2026-05-30：财务台账 V1 只做付款准备、付款批次、回单留痕、AP 状态、票据/OCR 状态和代账交接摘要，不做完整财务软件。银行直连真实支付、银行流水自动导入、ERP/总账、凭证生成、自动对账和税务申报不进入当前财务页面；真实付款继续在线下银行或既有财务/代账流程完成，OA 只记录状态、证据和交接摘要。
• 2026-05-30：个人设置和管理配置彻底分离。个人设置 只放个人资料、密码/安全、通知偏好和企业微信绑定；组织、角色、审批规则、功能开关、主数据、审计日志、人员维护和系统配置统一进入 管理，不出现在普通员工路径或个人资料页里。
• 2026-05-30：多角色用户不做全局身份切换器。用户一人多岗时，页面按当前任务自动显示最相关视角；需要跨范围查看时，只在具体台账内提供 我相关 / 我负责 / 财务处理 / 全范围 等授权范围切换，不要求用户先选择“员工/财务/管理员”身份再使用系统。

Acceptance Criteria

• design.md 覆盖当前路由清单中的所有页面或页面族，并给出布局/操作/降噪建议。
• 规则能直接指导工作台、报销列表、报销详情、审批列表、审批详情、通知、管理配置、移动端等后续页面整改。
• 明确 A/B/C 页面分级和优先级，能用于拆分后续 Trellis 实施任务。
• 明确 OA/企业微信边界，避免请假、补卡、外出、加班等日常 HR/考勤流程在 OA 中重复处理。
• 明确哪些规则应回写到长期事实源，哪些仅保留为本任务审查建议。
• 验证计划覆盖文档治理校验，不把“规则梳理”误报为页面已整改或已部署。

Test Plan

• python3 ./.trellis/scripts/task.py validate 05-29-page-design-rules-audit
• node scripts/qa/check-trellis-governance.mjs
• git diff --check

如果后续按规则改页面，再按具体页面追加 cd client && npm run typecheck && npm run build，以及对应 Playwright/视觉截图验证。

Technical Notes

• 已读取 .trellis/workflow.md、.trellis/spec/hyb-oa/index.md、.trellis/spec/hyb-oa/frontend-react-vite-design.md、.trellis/spec/hyb-oa/project-governance.md、.trellis/spec/hyb-oa/docs-and-evidence.md、.trellis/spec/hyb-oa/wecom-boundary.md、.trellis/spec/hyb-oa/approval-workflow.md、.trellis/spec/hyb-oa/reimbursement-invoice-ocr.md。
• 已读取 docs/产品设计规则.md、docs/报销发票附件规则.md、docs/需求-统一审批中心规约.md、docs/文档索引.md、docs/文档事实源状态矩阵.md。
• 已检查路由和导航：client/src/router/index.tsx、client/src/features/navigation/schema.ts。
• 已抽样检查核心页面、B 类业务页和共享组件：PortalHomePage.tsx、WorkflowTasksPage.tsx、WorkflowTaskDetailPage.tsx、ReimbursementsPage.tsx、ReimbursementDetailPage.tsx、PurchaseRequestsPage.tsx、AssetRegistryPage.tsx、InventoryChecksPage.tsx、ContractsRegistryPage.tsx、ProjectsPage.tsx、ProjectDetailPage.tsx、ListWorkspace.tsx、PageScaffold.tsx。
• 行业参考采用官方设计体系作辅助判断：Ant Design Layout 将企业应用常见页面抽象为首页、仪表盘、列表、表格、详情、表单等模板；Ant Design Button 强调一个按钮区最多一个主按钮、按钮文案应清楚表达结果、危险动作要提示风险；Ant Design Detail Page 强调详情页按信息复杂度分组、审批类详情需要承载审批动作。项目最终规则仍以 hyb-oa 小团队业务边界和 frontend-design 裁决为准。

Open Questions

• Grill-me 决策从“信息架构和一级入口”开始，之后逐项确认页面模板、操作区、状态流、权限、列表、表单、详情、移动、通知、敏感数据、审计和异常处理。