# S3: 看板页面 — Dashboard HTML Frontend

## 目标
创建 `/dashboard` 页面，fetch `/api/dashboard` 后用卡片式布局展示所有指标数据。

## 涉及文件
- `templates/dashboard.html` (新建)
- `app.py` (新增路由 GET /dashboard)
- `test_dashboard_page.py` (新建集成测试)

## 数据流
浏览器 → GET /dashboard (Flask) → render dashboard.html → JS fetch /api/dashboard → 渲染卡片

## 页面布局
1. 顶部：标题「📊 数据看板」+ 刷新按钮 + 最后更新时间
2. 卡片网格 (CSS Grid, auto-fill, minmax 280px)
   - 聊天数据 (蓝色) — groups/messages/speakers/shares
   - 文章数据 (绿色) — total/summarized/unsummarized/learned/unlearned
   - 学习审核 (紫色) — pending/approved/applied/rejected
   - 日报数据 (橙色) — daily/summaries/learn_records/last_generated
   - 任务监控 (灰色) — total/running/completed/failed/success_rate
   - 自动回复 (青色) — whitelist/pending/sent
   - AI 聊天 (粉色) — conversations/messages
3. 自动刷新 60 秒
4. 移动端单列

## 验证命令
```bash
curl -s http://127.0.0.1:5000/dashboard | grep "数据看板"
curl -s http://127.0.0.1:5000/dashboard | python3 -c "
import sys; html=sys.stdin.read()
assert 'style=\\\\\\\\\\\\'' not in html, 'STYLE BACKSLASH BUG'
assert 'fetch' in html, 'NO FETCH'
assert 'api/dashboard' in html, 'NO API CALL'
print('PASS')
"
pytest test_dashboard_page.py -v
python3 test_smoke.py
```