zzh
8a865c0a53
拆分客户/员工工作台，落地登录关怀、待办统计、公告双栏布局；同步接口映射 AI、H5 订单与相关页面优化。 Co-authored-by: Cursor <cursoragent@cursor.com>
373 lines
15 KiB
Markdown
373 lines
15 KiB
Markdown
# 管理端人文关怀设计方案
|
||
|
||
> **文档状态**：P0 / P1 / P2（本机配置页）已落地；租户服务端配置待接
|
||
> **编写日期**：2026-08-09
|
||
> **最近更新**：2026-08-09（双工作台：员工 AdminWorkplace / 客户 CustomerWorkplace）
|
||
> **范围**：管理端（`OmsLoginType.User`）登录关怀与工作台「今日关照」；不含 H5 客户侧对客安抚
|
||
> **关联代码**：`src/utils/admin-login-care.ts`、`LoginCareBanner.vue`、`AdminLoginCareToast.vue`、`src/views/home/workplace/*`
|
||
> **关联规范**：`docs/前端页面设计规范.md`
|
||
> **目标读者**：产品、前端、后端（轻量）、运营
|
||
|
||
---
|
||
|
||
## 0 阅读指引
|
||
|
||
| 角色 | 优先阅读 |
|
||
| --- | --- |
|
||
| 产品 / 运营 | §1～§4、§8 |
|
||
| 前端 | §3～§7、§9 |
|
||
| 后端 | §6、§7 |
|
||
| 测试 | §8、§9 |
|
||
|
||
**分期对照（务必先对齐）**
|
||
|
||
| 阶段 | 名称 | 是否独立菜单页 | 交付物 |
|
||
| --- | --- | --- | --- |
|
||
| **已完成** | 登录瞬间关怀 | 否 | 登录横幅 + 登录成功液态卡片 |
|
||
| **P0** | 工作台「今日关照」 | 否（工作台模块） | 右侧卡片：减压文案 + 待办摘要 + 快捷入口 |
|
||
| **P1** | 关照增强 | 否 | 交接提示、旺季条、收工仪式、周一/五语气 |
|
||
| **P2** | 运营配置 | **是（设置子页）** | 开关、旺季区间、生日墙隐私、文案覆盖 |
|
||
| **不做** | 「关怀中心」一级菜单 | — | 易空、与 OMS 主路径脱节 |
|
||
|
||
---
|
||
|
||
## 1 背景与目标
|
||
|
||
### 1.1 为什么要做
|
||
|
||
物流中后台一线长期面对：预警、超时、客诉、非工作时间值守。产品若只堆 KPI，容易「系统很忙、人很累」。人文关怀的目标不是鸡汤，而是：
|
||
|
||
1. **被看见**：非工作时间、节假日、入职周年、好久不见等，用轻提示确认「系统知道你还在」。
|
||
2. **减压力**：把「今天最该先做的」说清楚，避免一上来面对整屏数字。
|
||
3. **可关闭、可配置**：不骚扰；敏感信息（同事生日）默认克制。
|
||
|
||
### 1.2 建设目标
|
||
|
||
1. **分层触达**：登录瞬间（低频、仪式感）≠ 工作台日常（高频、可行动）。
|
||
2. **跟业务挂钩**：P0 起接入真实待办/预警数量，文案服务于「先做什么」。
|
||
3. **视觉统一**：沿用登录关怀液态暖色卡片质感，工作台卡片与现有 workplace 风格协调。
|
||
4. **先模块后配置页**：员工侧不新增一级菜单；管理员配置进 P2 设置子页。
|
||
|
||
### 1.3 设计原则
|
||
|
||
1. **一事一触达**：同一天同类关怀不重复轰炸（登录卡与工作台可互补，不复制全文）。
|
||
2. **减压优先于激励**：待办很高时，文案侧重「按优先级、不必一次清完」，禁止催促口吻。
|
||
3. **无数据不硬猜**：没有员工档案 / 待办接口时，降级为通用欢迎，不编造。
|
||
4. **隐私默认关**：同事生日墙、部门曝光需显式开启。
|
||
5. **不做成考勤**：禁止「你又迟到登录」类话术；深夜提醒只关心身体，不考核。
|
||
|
||
---
|
||
|
||
## 2 现状（已完成）
|
||
|
||
### 2.1 登录页横幅 `LoginCareBanner`
|
||
|
||
- 挂载：管理端登录页（`shellReady` 后）。
|
||
- 优先级：节假日 → 非工作时间 → 时段问候。
|
||
- 视觉：右上液态暖色卡片（模糊色斑 + 轻微形变）。
|
||
|
||
### 2.2 登录成功卡片 `AdminLoginCareToast`
|
||
|
||
- 挂载：`App.vue` 全局 Teleport，进系统后再弹出（避免登录页卸载冲掉）。
|
||
- 能力：生日 / 即将生日、入职周年、节假日 Toast、好久不见（≥7 天）、司龄里程碑、连续深夜（近 7 天 ≥3 个深夜日）、非工作时间致谢。
|
||
- 本地存储（按 userId）：
|
||
- `oms-admin-care-last-login:{userId}`
|
||
- `oms-admin-care-late-night:{userId}`
|
||
|
||
### 2.3 主题色液态预设
|
||
|
||
- 页面配置抽屉中「暖色液态质感」小卡片（蜜桃/暖杏/…/雾蓝/焰红等），与关怀视觉同源，**不改变关怀业务逻辑**。
|
||
|
||
### 2.4 明确不在「已完成」内
|
||
|
||
| 项 | 说明 |
|
||
| --- | --- |
|
||
| 工作台日常关照 | 未做 |
|
||
| 待办减压文案 | 未做 |
|
||
| 交接班 / 旺季 / 收工 | 未做 |
|
||
| 运营配置页 | 未做 |
|
||
| 客户侧安抚话术 | 另案，不在本文 |
|
||
|
||
---
|
||
|
||
## 3 信息架构与落点决策
|
||
|
||
### 3.1 三层落点
|
||
|
||
```
|
||
登录瞬间（低频仪式）
|
||
├─ LoginCareBanner（未登录）
|
||
└─ AdminLoginCareToast（刚进系统）
|
||
|
||
日常工作（高频可行动） ← P0 / P1 主战场
|
||
└─ 工作台右侧「今日关照」模块
|
||
|
||
运营治理（低频配置） ← P2
|
||
└─ 系统设置 / 页面配置旁「人文关怀」子页
|
||
（或「系统管理 → 人文关怀」；禁止一级业务菜单）
|
||
```
|
||
|
||
### 3.2 为什么不要独立「关怀中心」页
|
||
|
||
| 问题 | 说明 |
|
||
| --- | --- |
|
||
| 路径空 | 关怀不是每天要「打开办理」的业务单 |
|
||
| 与主任务脱节 | 员工主路径是订单 / 预警 / 轨迹，不是关怀列表 |
|
||
| 内容易鸡汤化 | 没有待办挂钩时，页面只剩文案 |
|
||
| 维护成本 | 多一套路由、权限、空态 |
|
||
|
||
**结论**：员工侧 = 工作台模块；配置侧 = 设置子页（P2）。
|
||
|
||
### 3.3 能力 × 落点矩阵
|
||
|
||
| 能力 | 登录横幅 | 登录成功卡 | 工作台「今日关照」 | 设置页 |
|
||
| --- | --- | --- | --- | --- |
|
||
| 时段 / 非工作时间 | ✓ | ✓ | 可摘要一行 | 开关 |
|
||
| 节假日 | ✓ | ✓ | 当日条 | 日历/文案 |
|
||
| 生日 / 入职周年 | | ✓ | 当日高亮一行 | |
|
||
| 好久不见 / 连续深夜 | | ✓ | 可选弱提示 | 阈值 |
|
||
| 待办减压 + 数量 | | | **✓ 主** | |
|
||
| 交接班标红摘要 | | | ✓ P1 | |
|
||
| 旺季提示 | | | ✓ P1 | ✓ 区间 |
|
||
| 今日收工 | | | ✓ P1 按钮 | |
|
||
| 同事生日墙 | | | ✓ P2（可关） | ✓ 隐私 |
|
||
| 首次成就 | | 一次弹 | | |
|
||
|
||
---
|
||
|
||
## 4 P0 工作台「今日关照」（开工首选）
|
||
|
||
### 4.1 位置与布局
|
||
|
||
- **页面**：`src/views/home/workplace/index.vue`
|
||
- **位置**：右侧栏，`MarketingShortcuts` 与 `QuickOperation` 之间。
|
||
- **组件**：`CareTodayPanel.vue`
|
||
- **交互原则（P0 已落实）**：
|
||
- 可收起，记住本机偏好，默认不强迫；
|
||
- **只给一条**角色相关待办 + 一条「看一眼轨迹预警」软入口；
|
||
- 高压时文案减压（「不必一次清完」），禁止催促；
|
||
- 无待办时平静空态，不堆数字；
|
||
- 客户门户不展示。
|
||
- **视觉**：液态暖色轻卡片，贴合工作台 panel，不抢主任务区。
|
||
|
||
建议信息结构（上 → 下）：
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 今日关照 · 日期 [收起] │
|
||
│ 一句主文案（减压 / 节假日） │
|
||
│ 一句附注 │
|
||
│ [看一眼轨迹预警] │
|
||
│ [待发货 12 · 可点进去] │ ← 按角色最多一条
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### 4.2 文案优先级（工作台主句）
|
||
|
||
同一时刻只展示 **一条主文案**（可另附数据行）：
|
||
|
||
1. 生日当天（若有档案）
|
||
2. 入职周年当天
|
||
3. 节假日
|
||
4. 待办高压（如超时预警 ≥ 阈值，默认 5）→ 减压句
|
||
5. 非工作时间
|
||
6. 周一 / 周五语气（P1，可先留 hook）
|
||
7. 默认：「稳稳推进就好」+ 时段
|
||
|
||
登录成功卡已说过的「好久不见 / 深夜」：**工作台当天不再重复全文**，最多以极短弱提示或干脆省略。
|
||
|
||
### 4.3 待办数据（P0 最小集）
|
||
|
||
优先复用已有工作台/订单统计，避免新造大接口。
|
||
|
||
| 字段 | 含义 | 来源建议 |
|
||
| --- | --- | --- |
|
||
| `pendingCount` | 待处理（定义需产品拍板：待审 / 待打单 / 待预报等） | 扩展 `GET /order/workplace-stats` 或现有字段映射 |
|
||
| `overdueWarningCount` | 超时/标红预警数 | 轨迹预警或现有 warning API |
|
||
| `jumpPending` | 待办列表路由 | 前端常量 |
|
||
| `jumpWarning` | 预警列表路由 | 前端常量 |
|
||
|
||
**拍板项（实施前确认）**
|
||
|
||
1. `pendingCount` 具体统计口径（按租户角色是否不同）。
|
||
2. 无权限或接口失败时：隐藏数字行，只保留文案（不报错打断工作台）。
|
||
|
||
### 4.4 前端状态
|
||
|
||
- 模块可本地折叠（`localStorage`：`oms-admin-care-panel-collapsed`）。
|
||
- 不依赖登录卡是否已弹；工作台独立拉数。
|
||
- 管理端用户可见；客户登录进工作台时 **不展示**（与现有 Marketing 等客户模块区分）。
|
||
|
||
### 4.5 P0 明确不做
|
||
|
||
- 收工写库、交接班详情、旺季配置后台、生日墙、独立路由页。
|
||
|
||
---
|
||
|
||
## 5 P1 关照增强（工作台内演进）
|
||
|
||
| 项 | 状态 | 说明 |
|
||
| --- | --- | --- |
|
||
| 周一 / 周五语气 | **已做** | 无更高优先级时微调主文案 |
|
||
| 旺季条 | **已做** | 前端常量：11–12 月；春节前后窗口（复用节假日表） |
|
||
| 开班引导 | **已做** | 上午 + 问题件 > 0：轻提示（不伪称精确「上一班」统计） |
|
||
| 今日收工 | **已做** | 本机仪式 + 可撤销；不写服务端、非考勤 |
|
||
| 角色口吻 | **已做** | 财务 / 客服 / 操作 / 轨迹 / 销售附注分支 |
|
||
|
||
---
|
||
|
||
## 6 P2 运营配置页（此时才「有页面」）
|
||
|
||
### 6.1 何时需要独立页
|
||
|
||
当出现以下任一需求时开工 P2，否则继续只用代码常量 + 本地存储：
|
||
|
||
- 运营要配旺季起止、而不发版；
|
||
- 要开关「同事生日墙」「深夜提醒」；
|
||
- 要覆盖默认文案（多语言仍走 i18n，覆盖存租户配置）。
|
||
|
||
### 6.2 页面定位
|
||
|
||
- **名称**：人文关怀
|
||
- **路由**：`/system/humanCare`（`SystemHumanCare`）
|
||
- **入口**：系统管理菜单（若开启「菜单来自后端」，需在 RBAC 菜单中补一条指向该路由）
|
||
- **受众**：租户管理员 / 运营，**不是**一线每人打开的页。
|
||
- **存储（首版）**：`localStorage` 键 `oms-admin-care-settings`；页面已提示多设备不同步。后续换 `GET/PUT /system/care-settings`。
|
||
|
||
### 6.3 配置项草案
|
||
|
||
| 键 | 类型 | 默认 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| `careEnabled` | bool | true | 总开关 |
|
||
| `loginBannerEnabled` | bool | true | 登录横幅 |
|
||
| `loginToastEnabled` | bool | true | 登录成功卡 |
|
||
| `workplacePanelEnabled` | bool | true | 今日关照 |
|
||
| `longAbsenceDays` | int | 7 | 好久不见阈值 |
|
||
| `lateNightThreshold` | int | 3 | 近 7 日深夜天数阈值 |
|
||
| `overdueCareThreshold` | int | 5 | 触发减压文案的超时数 |
|
||
| `peakSeason` | `{start,end}?` | null | 旺季窗口 |
|
||
| `birthdayWallEnabled` | bool | false | 同事生日墙 |
|
||
| `clockOutEnabled` | bool | true | 收工按钮 |
|
||
|
||
存储：租户级配置表或现有系统参数；前端缓存到内存，变更后刷新。
|
||
|
||
---
|
||
|
||
## 7 接口与数据（分期）
|
||
|
||
### 7.1 P0
|
||
|
||
| 接口 | 用途 |
|
||
| --- | --- |
|
||
| 现有 `getEmployeeByUser` | 生日、入职、姓名（工作台主文案可选） |
|
||
| 现有 / 扩展 `workplace-stats` | pending / overdue 数量 |
|
||
|
||
建议响应扩展（示意）：
|
||
|
||
```json
|
||
{
|
||
"pendingCount": 12,
|
||
"overdueWarningCount": 3
|
||
}
|
||
```
|
||
|
||
若短期不能改后端：前端用已有 stats 字段做最佳映射，并在模块注释标明「口径待对齐」。
|
||
|
||
### 7.2 P1～P2
|
||
|
||
| 接口 | 用途 |
|
||
| --- | --- |
|
||
| `GET /system/care-settings` | 读配置 |
|
||
| `PUT /system/care-settings` | 写配置（权限） |
|
||
| `GET /system/care/team-birthdays?days=7` | 生日墙（P2，需隐私） |
|
||
|
||
---
|
||
|
||
## 8 交互与文案规范
|
||
|
||
1. **语气**：平视、具体、可执行；避免「加油冲」「打工人」网络烂梗。
|
||
2. **长度**：主文案 ≤ 28 字；附注 ≤ 40 字。
|
||
3. **频率**：登录成功卡每登录一次；工作台主文案随数据刷新，不额外弹窗。
|
||
4. **关闭**：卡片右上可折叠；P2 提供总开关。
|
||
5. **i18n**：`workplace.care.*` / 既有 `login.care.*`；配置覆盖仅中文首版可接受，英文回落默认。
|
||
|
||
---
|
||
|
||
## 9 验收标准
|
||
|
||
### 9.1 P0
|
||
|
||
- [ ] 管理端工作台右侧出现「今日关照」，客户账号不出现。
|
||
- [ ] 有待办/预警数据时展示数字且可跳转；失败时优雅降级。
|
||
- [ ] 节假日 / 生日 / 周年当日主文案正确（可与登录卡并存但不重复堆砌）。
|
||
- [ ] 高压待办时出现减压文案，无催促措辞。
|
||
- [ ] 视觉不破坏现有 workplace 布局；符合前端规范主色变量。
|
||
|
||
### 9.2 P1
|
||
|
||
- [ ] 收工仅仪式或本地防抖，不误写考勤。
|
||
- [ ] 旺季条可关。
|
||
- [ ] 交接提示有数据才显示。
|
||
|
||
### 9.3 P2
|
||
|
||
- [ ] 无权限不可进配置页。
|
||
- [ ] 总开关关闭后登录卡与工作台模块均不展示。
|
||
- [ ] 生日墙默认关闭。
|
||
|
||
---
|
||
|
||
## 10 实施顺序（评审通过后）
|
||
|
||
1. **文档评审**（本文）——确认 pending 口径、模块摆放、是否跳过 P1 直接并行。
|
||
2. **P0 前端**：`CareTodayPanel` + i18n + workplace 接入；stats 映射。
|
||
3. **P0 后端**（若需）：`workplace-stats` 补字段。
|
||
4. **P1**：收工 / 旺季 / 交接 / 周一口吻。
|
||
5. **P2**：配置页 + 权限 + 生日墙。
|
||
|
||
---
|
||
|
||
## 11 开放问题（已拍板）
|
||
|
||
| # | 问题 | 结论 |
|
||
| --- | --- | --- |
|
||
| 1 | `pendingCount` 统计口径与角色差异？ | **有角色差异**：数据沿用 `workplace-stats` 的数据权限范围；展示时按角色偏好只引导 **一条** 待办（财务→待支付、客服→问题件优先、操作→待发货等），避免堆指标。 |
|
||
| 2 | 超时预警跳转？ | **`/track/warningOrder`** |
|
||
| 3 | P2 入口？ | **系统管理菜单**（人文关怀配置页，P2 再做） |
|
||
| 4 | 管理端子角色是否全开？ | **先全部开放**（仅隐藏客户门户） |
|
||
|
||
---
|
||
|
||
## 13 双工作台（客户 / 员工）
|
||
|
||
| | 客户门户 `isCustomerPortal()` | 管理端员工 |
|
||
| --- | --- | --- |
|
||
| 组件 | `CustomerWorkplace.vue` | `AdminWorkplace.vue` |
|
||
| 入口判断 | `home/workplace/index.vue` | 同上 |
|
||
| 问候 Banner | ✓（含余额） | ✓（无余额） |
|
||
| 统计 / 订单分析 / 费用分析 | ✓ | **不展示** |
|
||
| 开始业务卡片 / 营销入口 | ✓ | **不展示** |
|
||
| 公告列表 | ✓ | **不展示** |
|
||
| 今日关照 | 不展示 | **左下左列**（节奏标签并入；仅一个主行动） |
|
||
| 常用入口 | 下单流程 | **左下右列**，按角色 3～4 个 |
|
||
| 世界时间 | 统计卡底部可折叠 | **融进今日待办底部**，默认展开，小卡片网格 |
|
||
| 公告 | 右侧栏 | **右侧栏公告卡**（与客户工作台同组件） |
|
||
|
||
布局：**左右双栏**（对齐客户工作台比例）。
|
||
左：问候 + 今日待办（stat-card）+ 世界时间小卡 → 关照 | 快捷入口。
|
||
右：公告（撑满高度）。
|
||
待办有量按紧急度排序；收工仅本页仪式，不影响考勤。
|
||
|
||
---
|
||
|
||
## 12 附录：与登录关怀的边界
|
||
|
||
| | 登录瞬间 | 今日关照 |
|
||
| --- | --- | --- |
|
||
| 时机 | 进系统前后 10 秒内 | 整天可看 |
|
||
| 目的 | 仪式、被看见 | 减压、行动 |
|
||
| 数据 | 员工档案 + 本地访问记录 | 业务待办 + 档案 |
|
||
| 失败策略 | 有通用欢迎即可 | 隐藏数字、保留一句 |
|
||
|
||
两者共用 `admin-login-care.ts` 的节假日 / 周年 / 时段工具函数，**避免两套日期逻辑**。
|