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