2.2 KiB
2.2 KiB
PC 视觉一致性审视
方法
- 使用
frontend-design的方向重新审视 PC 页面：目的、语气、约束、差异化。 - 结合项目事实源
docs/产品设计规则.md和前端规范。 - 对公网
https://oa.hyinda.com做只读抽样，页面包括/login、/portal、/reimbursements、/projects、移动首页和移动报销。 - 只记录结构性指标，不记录账号、密码、完整邮箱、完整手机号或原始业务 payload。
抽样结论
/portal：- 标题层级偏多，抽样可见 9 个标题。
- 链接入口偏多，抽样可见 42 个链接。
card-std9 个、section-panel8 个，主次区块不像同一张工作台。rounded-2xl、阴影和渐变使用偏多，形成“模块拼接”观感。
/reimbursements：- 抽样可见按钮约 19 个，主按钮、导出、状态、范围、批量、删除等同屏竞争。
- 当前业务功能可用，但首屏操作权重没有收敛。
- 状态切换应保持高可用，但视觉上应降为筛选控件。
- 代码样板：
PageHeader与WorkspaceHeader基本重复。SectionPanel与WorkspaceSection都承担“卡片分区”角色。WorkbenchHero、MetricCard、card-std当前仍保留较多装饰性背景、阴影或渐变。
推荐方向
设计语气：克制、精密、低噪音的 Hyinda 工作台。
- 保留品牌蓝用于主 CTA、选中态和状态强调。
- 降低全局背景、卡片、侧边栏和顶栏装饰强度。
- 首屏只保留一个明确工作流：需要处理什么、常用动作是什么、最新变化是什么。
- 低频功能保留入口，但下沉到次级区块或工具菜单。
第一批范围
- 统一 PC 基础视觉 token 和共享组件，不新增 UI 库。
- 首页
/portal作为工作台样板。 - 报销列表
/reimbursements作为列表/筛选/表格样板。
风险
- 首页角色差异多，改动要保留管理员、经理、员工、财务视角的可用入口。
- 报销列表涉及导出、批量、代提交、模板创建、差旅关联，不能只做视觉隐藏导致操作不可达。
- 不应把移动端专项样式带回 PC，也不应让 PC 端变成营销页。