首页 UI 改进计划¶
创建日期：2026-02-14 前置文档：Phase Roadmap · 产品闭环分析 目标：重新设计 Dashboard 首页布局，让老板登录后 10 秒内 掌握当日关键信息并知道下一步该做什么
1. 当前首页问题分析¶
1.1 现状截图（文字描述）¶
当前 Dashboard (DashboardAnalytics.vue) 登录后看到的是：
┌─────────────────────────────────────────────────────────────────┐
│ Dashboard [日期选择] [刷新] │
│ ───────────────────────────────────────────────────────────── │
│ [Analytics (Daily)] [Trends] [Staff Performance] ← 三个 Tab │
│ │
│ Performance Overview │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Intro │ │Membership│ │Cancel- │ ← 5 个 MetricCard │
│ │ Booking │ │ Sales │ │lations │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Member │ │ Total │ │
│ │ Adjust │ │ Calls │ │
│ └──────────┘ └──────────┘ │
│ │
│ [Donut Chart: 分类] [Follow-Up Reasons] [Sankey: 收入流] │
│ │
│ Follow-Up Calls List (按优先级分组) │
│ ├─ High Priority: ... │
│ ├─ Medium Priority: ... │
│ └─ Low Priority: ... │
└─────────────────────────────────────────────────────────────────┘
1.2 核心问题¶
| # | 问题 | 影响 |
|---|---|---|
| 1 | 没有"今日概要" — 5 个 MetricCard 需要逐个阅读，缺乏一句话总结 | 老板需要 30s+ 才能判断"今天怎么样" |
| 2 | 缺少行动导向 — Dashboard 只展示数据，不告诉老板"该做什么" | 被动看数据 vs 主动执行任务 |
| 3 | Lead 状态缺失 — Lead Tracker 在另一个页面，Dashboard 看不到 Lead 温度 | 需要频繁切换页面 |
| 4 | Staff 绩效需要切 Tab — 员工表现隐藏在第三个 Tab 里 | 老板习惯看第一眼的 Analytics Tab |
| 5 | 图表信息密度过高 — Donut + Sankey + Follow-Up 同屏展示，信息过载 | 不知道先看哪里 |
| 6 | 无对比基准 — 只有绝对数字，没有"比昨天/上周好还是差" | 数字缺乏上下文 |
| 7 | Follow-Up 列表没有 SLA 计时 — 知道有待跟进，但不知道紧急程度 | 无法按紧迫度排优先级 |
1.3 老板的一天（用户旅程）¶
08:30 老板打开 Dashboard
❌ 当前: 看到 5 个数字 → "所以...今天怎么样？"
✅ 改进: 一眼看到 "今日 12 通电话, 3 个 Booking, 2 个待跟进超 24h"
09:00 老板想知道谁该被跟进
❌ 当前: Follow-Up 列表没有时间概念，不知道等了多久
✅ 改进: SLA 倒计时 🔴🟡🟢 一目了然
10:00 老板想看员工表现
❌ 当前: 切到 Staff Performance Tab → 看一堆表格
✅ 改进: 首页底部直接有员工对比卡片
14:00 老板想知道哪些 Lead 最有希望
❌ 当前: 切到 Lead Tracker → 全部 Lead 长一样
✅ 改进: 首页有 Hot Lead 快速入口
2. 改进方案：新首页布局¶
2.1 设计原则¶
- 10 秒法则 — 登录后 10 秒内能回答："今天怎么样？""该做什么？"
- 信息分层 — 从上到下：概要 → 行动 → 详情 → 深度分析
- 复用现有组件 — 优先用已有的 MetricCard、ChartCard 等组件
- 渐进披露 — 默认简洁，点击展开详情
2.2 新首页线框图¶
┌─────────────────────────────────────────────────────────────────────┐
│ Dashboard [日期选择] [刷新] │
│━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━│
│ │
│ ┌─── 区域 A: 今日概要条 ─────────────────────────────────────────┐ │
│ │ 📊 Today's Summary — Feb 14 │ │
│ │ │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ 12 │ │ 3 │ │ 5 │ │ 34min │ │ │
│ │ │ Calls │ │Bookings │ │Pending │ │Avg Resp │ │ │
│ │ │ ↑ 20% │ │ ↑ 50% │ │ ↓ 2 │ │ ↓ 15% │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
│ │ │ │
│ │ 💡 Top: Sarah 33% booking rate · ⚠️ 2 leads > 24h │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─── 区域 B: 待办行动 ──────────────────────────────────────────┐ │
│ │ ✅ Action Queue 5 pending │ │
│ │ │ │
│ │ 🔴 Jane S. · CC not captured · 26h ago [Call] [Done] │ │
│ │ 🟡 Lisa M. · Manager needed · 4h ago [Call] [Done] │ │
│ │ 🟡 Tom W. · Complaint · 2h ago [Call] [Done] │ │
│ │ 🟢 Amy R. · CC not captured · 30min [Call] [Done] │ │
│ │ 🟢 Bob K. · Manager needed · 15min [Call] [Done] │ │
│ │ │ │
│ │ [查看全部 Follow-ups →] │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─── 区域 C: 双栏 ─────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌─ C1: Hot Leads ──────┐ ┌─ C2: 员工速览 ──────────────┐ │ │
│ │ │ 🔥 3 Hot 🟡 8 Warm │ │ Staff Quick View (Today) │ │ │
│ │ │ │ │ │ │ │
│ │ │ 🔥 Jane S. 2 calls │ │ Sarah 12 calls 33% ↑ │ │ │
│ │ │ +1732.. · 6d │ │ Will 8 calls 13% ↓ │ │ │
│ │ │ 🔥 Amy R. 1 call │ │ Nadia 6 calls 33% → │ │ │
│ │ │ +1917.. · 2d │ │ │ │ │
│ │ │ 🔥 Bob K. 3 calls │ │ [查看详细绩效 →] │ │ │
│ │ │ +1646.. · 4d │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ [查看全部 Leads →] │ │ │ │ │
│ │ └───────────────────────┘ └──────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─── 区域 D: 详细分析（折叠面板，默认收起）─────────────────────┐ │
│ │ [▸ Performance Breakdown] [▸ Call Categories] [▸ Trends] │ │
│ │ │ │
│ │ 展开后显示现有的: │ │
│ │ · MetricCard 行 (5 个指标) │ │
│ │ · Donut Chart + Sankey + Follow-Up Reasons │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
2.3 各区域详细说明¶
区域 A：今日概要条 (Today's Summary Bar)¶
目的：登录第一眼，10 秒回答"今天怎么样"
| 卡片 | 指标名 | 数据来源 | 对比基准 |
|---|---|---|---|
| Card 1 | Total Calls | call-analysis 表，callStartTime 在今天 |
vs 昨天同一时段 |
| Card 2 | Bookings | subcategory=intro_booking + outcome=success |
vs 昨天 |
| Card 3 | Pending Follow-up | follow_up_needed=yes 且无后续通话 |
vs 昨天（越少越好） |
| Card 4 | Avg Response Time | firstCallTime - lead.receivedAt 平均值 |
vs 上周平均 |
底部提示行：
- 展示当天 Top Performer（booking rate 最高的员工）
- 展示紧急告警（超过 24h 未跟进的 Lead 数量）
复用组件：基于现有 MetricCard.vue 简化，去掉 breakdown section，加上趋势箭头
新增组件：TodaySummaryBar.vue
位置: studio-web/src/components/dashboard/TodaySummaryBar.vue
结构:
├── 4x MiniMetricCard (简化版 MetricCard)
│ ├── 主数字 (text-3xl font-bold)
│ ├── 标签 (text-sm text-muted-foreground)
│ └── 趋势箭头 + 百分比 (text-xs, green/red)
└── InsightLine (底部提示)
├── Top Performer chip
└── Alert chip (if any)
区域 B：待办行动队列 (Action Queue)¶
目的：回答"我现在该做什么"
核心改进：
- SLA 倒计时 — 显示距离上次通话过去了多久
- 颜色编码 — 🔴 > 24h、🟡 4-24h、🟢 < 4h
- 快速操作 — [Call Now] 直接发起通话、[Mark Done] 标记完成
- 限制显示 — 默认只展示 Top 5，"查看全部"链接到完整列表
数据来源：AI 分析的 follow_up.needed = "yes" + follow_up.reason
复用组件：基于现有 FollowUpCallsList.vue 改造
新增组件：ActionQueue.vue
位置: studio-web/src/components/dashboard/ActionQueue.vue
结构:
├── Header (标题 + pending 计数 Badge)
├── ActionItem[] (最多 5 条)
│ ├── SLA 指示灯 (🔴🟡🟢)
│ ├── Lead 名称 + 原因
│ ├── 时间 (相对时间: "26h ago")
│ └── 操作按钮 ([Call Now] [Mark Done])
└── Footer (查看全部链接)
SLA 计算规则：
function getSlaStatus(callStartTime: string): 'critical' | 'warning' | 'ok' {
const hoursAgo = differenceInHours(new Date(), new Date(callStartTime))
if (hoursAgo >= 24) return 'critical' // 🔴
if (hoursAgo >= 4) return 'warning' // 🟡
return 'ok' // 🟢
}
区域 C1：Hot Leads 快览¶
目的：回答"哪些 Lead 最有希望"
温度计算规则（在 studio-api 侧计算，返回前端）：
| 温度 | 条件 | 颜色 |
|---|---|---|
| 🔥 Hot | Lead ≤ 3 天 或 24h 内有通话 或 follow_up_needed=yes |
text-red-500 bg-red-50 |
| 🟡 Warm | Lead 4-7 天 且 有通话 且 outcome 未设置 | text-amber-500 bg-amber-50 |
| ❄️ Cold | Lead > 7 天无通话 或 多次 attempted 无 success | text-blue-500 bg-blue-50 |
复用组件：基于现有 Lead Tracker 的 DataTable 简化
新增组件：HotLeadsPanel.vue
位置: studio-web/src/components/dashboard/HotLeadsPanel.vue
结构:
├── Header (温度统计: 🔥 3 🟡 8 ❄️ 5)
├── LeadRow[] (只展示 Hot leads, 最多 5 条)
│ ├── 温度 emoji
│ ├── 姓名 + 电话 (mask 中间位)
│ ├── 通话次数 + Lead 天数
│ └── 最后联系时间
└── Footer (查看全部 Leads 链接)
区域 C2：员工速览¶
目的：回答"今天谁表现好/差"
复用组件：基于现有 StaffPerformance.vue 简化为紧凑卡片
新增组件：StaffQuickView.vue
位置: studio-web/src/components/dashboard/StaffQuickView.vue
结构:
├── Header ("Staff Quick View · Today")
├── StaffRow[] (按 booking rate 排序)
│ ├── 员工名
│ ├── 通话数
│ ├── Booking Rate (百分比 + 趋势箭头)
│ └── 简化 Progress Bar
└── Footer (查看详细绩效链接 → Staff Performance Tab)
区域 D：详细分析（折叠面板）¶
目的：保留现有深度分析能力，但默认不占首屏空间
实现方式：使用 shadcn-vue Collapsible 组件
- Performance Breakdown → 现有 5 个 MetricCard
- Call Categories → 现有 Donut Chart + Follow-Up Reasons
- Revenue Flow → 现有 Sankey Chart
默认收起，点击展开。展开状态保存到 localStorage。
3. 响应式适配¶
3.1 桌面端 (≥ 1024px)¶
如上线框图所示： - 区域 A：全宽 4 列 - 区域 B：全宽 - 区域 C：双栏 (1:1) - 区域 D：全宽折叠面板
3.2 平板端 (768px - 1023px)¶
3.3 移动端 (< 768px)¶
区域 A: 2x2 网格 (紧凑模式，数字缩小)
区域 B: 全宽，每条 Action Item 高度增加 (touch-friendly)
区域 C: 上下堆叠，C1 限制 3 条, C2 限制 3 名员工
区域 D: 隐藏 (移到页面底部的链接)
4. 数据流设计¶
4.1 新增 API¶
| API | Method | Path | 说明 |
|---|---|---|---|
| 今日概要 | GET | /v2/dashboard/summary |
返回 4 个 KPI + 对比数据 |
| Follow-up 队列 | GET | /v2/leads/follow-ups |
返回待跟进列表 + SLA |
| Lead 温度 | GET | /v2/leads (增强) |
现有接口增加 temperature 字段 |
| 员工速览 | GET | /v2/staff/quick-stats |
简化版员工统计 |
4.2 Today Summary API 响应结构¶
interface TodaySummaryResponse {
date: string // "2026-02-14"
metrics: {
totalCalls: number
totalCallsDelta: number // vs 昨天同时段, e.g. +20 表示多 20%
bookings: number
bookingsDelta: number
pendingFollowUps: number
pendingFollowUpsDelta: number
avgResponseTimeMinutes: number
avgResponseTimeDelta: number // vs 上周, 负数=更快=更好
}
insights: {
topPerformer: {
name: string
bookingRate: number // 0-100
} | null
urgentLeads: number // > 24h 未跟进的 Lead 数
}
}
4.3 Follow-up Queue API 响应结构¶
interface FollowUpItem {
leadId: string
leadName: string
phone: string
reason: string // AI 分析的 follow_up.reason
callStartTime: string // 上次通话时间
hoursAgo: number // 距今小时数
slaStatus: 'critical' | 'warning' | 'ok'
staffName: string // 上次处理的员工
}
interface FollowUpQueueResponse {
total: number
items: FollowUpItem[] // 按 hoursAgo 降序（最紧急在前）
}
4.4 前端数据获取¶
// 新增 composable: useHomeDashboard.ts
export function useHomeDashboard() {
const todaySummary = useQuery({
queryKey: ['dashboard', 'summary', today],
queryFn: () => api.get('/v2/dashboard/summary'),
refetchInterval: 5 * 60 * 1000, // 每 5 分钟自动刷新
})
const followUpQueue = useQuery({
queryKey: ['leads', 'follow-ups'],
queryFn: () => api.get('/v2/leads/follow-ups'),
refetchInterval: 2 * 60 * 1000, // 每 2 分钟自动刷新
})
return { todaySummary, followUpQueue }
}
5. 视觉设计规范¶
5.1 配色方案¶
沿用现有设计系统，新增语义色：
| 用途 | 颜色 | Tailwind Class |
|---|---|---|
| SLA 危急 | 红色 | text-red-600 bg-red-50 border-red-200 |
| SLA 警告 | 琥珀色 | text-amber-600 bg-amber-50 border-amber-200 |
| SLA 正常 | 绿色 | text-green-600 bg-green-50 border-green-200 |
| 趋势向好 | 绿色 | text-green-600 |
| 趋势变差 | 红色 | text-red-600 |
| 趋势持平 | 灰色 | text-muted-foreground |
| Hot Lead | 红/橙 | text-red-500 bg-red-50 |
| Warm Lead | 琥珀 | text-amber-500 bg-amber-50 |
| Cold Lead | 蓝色 | text-blue-500 bg-blue-50 |
5.2 字体大小层次¶
| 层级 | 用途 | Class |
|---|---|---|
| Hero 数字 | Summary 卡片主数字 | text-3xl font-bold tabular-nums |
| 标签 | 卡片标签 | text-sm text-muted-foreground |
| 趋势 | 涨跌幅 | text-xs font-medium |
| 行项目 | Action Queue 行 | text-sm |
| 提示 | 底部 Insight 行 | text-xs text-muted-foreground |
5.3 间距与布局¶
/* 区域间距 */
.dashboard-sections { gap: 1.5rem; } /* 24px between sections */
/* Summary Bar */
.summary-bar { padding: 1.5rem; }
.summary-cards { gap: 1rem; } /* 16px between cards */
/* Action Queue */
.action-item { padding: 0.75rem 1rem; } /* 12px 16px */
.action-items { gap: 0.25rem; } /* 4px between items */
6. 交互设计¶
6.1 点击行为¶
| 元素 | 点击效果 |
|---|---|
| Summary 卡片 "Calls" | 跳转到 /calls 并设置当天日期范围 |
| Summary 卡片 "Bookings" | 跳转到 /calls?filters=subcategory:intro_booking,outcome:success |
| Summary 卡片 "Pending" | 滚动到 Action Queue 区域 |
| Summary 卡片 "Avg Resp" | 跳转到 /lead-tracker |
| Action Item [Call Now] | 打开 RingCentral 拨号 (如支持) 或复制号码 |
| Action Item [Mark Done] | 标记完成，从队列移除，乐观更新 |
| Action Item 行 | 展开 Lead 详情侧面板 |
| Hot Lead 行 | 跳转到 /lead-tracker?id={leadId} |
| Staff 行 | 跳转到 /dashboard?tab=staff&staff={name} |
| 折叠面板标题 | 展开/收起，状态保存到 localStorage |
6.2 加载状态¶
- Summary Bar: 4 个
Skeleton卡片 (现有 Skeleton 组件) - Action Queue: 3 行
Skeleton占位 - Hot Leads / Staff: 各 3 行
Skeleton - 折叠面板: 标题可见，内容区 Skeleton
6.3 空状态¶
| 区域 | 空状态文案 |
|---|---|
| Summary (无通话) | "No calls yet today. Check back later or review yesterday's data." |
| Action Queue (无待办) | "All caught up! No pending follow-ups." + ✅ 图标 |
| Hot Leads (无 Lead) | "No active leads in this period." |
| Staff (无数据) | "No staff activity recorded today." |
7. 实施优先级¶
7.1 分批交付¶
| 批次 | 内容 | 预计复杂度 | 依赖 |
|---|---|---|---|
| P0 | 区域 A: Today's Summary Bar | 中 | 新增 /v2/dashboard/summary API |
| P0 | 区域 B: Action Queue (SLA 版) | 中 | 新增 /v2/leads/follow-ups API |
| P1 | 区域 C1: Hot Leads Panel | 低 | 现有 Lead API + temperature 字段 |
| P1 | 区域 C2: Staff Quick View | 低 | 现有 Staff API 简化 |
| P2 | 区域 D: 折叠面板改造 | 低 | 纯前端，移动现有组件 |
| P2 | 响应式适配 + 空状态 | 低 | 纯前端 |
7.2 不改动的部分¶
- Trends Tab — 保持不变，仍在第二个 Tab
- Staff Performance Tab — 保持完整版，Quick View 是简化入口
- 现有 MetricCard / ChartCard — 不修改，仅在折叠面板中复用
- 日期选择器 / 刷新按钮 — 保持现有交互
8. 成功指标¶
| 指标 | 当前基准 | 目标 |
|---|---|---|
| 首屏加载到可操作 | ~3s (5 cards + 3 charts) | < 2s (Summary + Queue 优先加载) |
| 老板找到"今天有几个 booking" | ~15s (翻到对应 card) | < 3s (Summary Bar 直接展示) |
| 老板找到"谁需要跟进" | ~30s (滚动 Follow-Up 列表) | < 5s (Action Queue 在首屏) |
| 页面切换次数（看完全貌） | 3 次 (Dashboard + Leads + Staff Tab) | 0 次 (首页包含所有快览) |