产品体验修复:P0 阻塞 + P1/P2 改善(产品审查 14 项中修复 10 项)
P0 阻塞: - Pro 加载不再阻塞整个看板:只显示精简顶栏 + 加载状态,不再遮盖整个页面 - Scan 失败加重试按钮:所有用户(含免费)均可手动重试 - Detail Panel 同步超时后显示提示:"同步时间较长,当前展示的数据可能不完整" P1 体验: - 登录页增加"忘记密码"链接:调用 Supabase 密码重置流程 - 登录失败/邮箱未验证增加明确提示:"如刚注册,请先点击验证链接" - 公告横幅增加 ✕ 关闭按钮:点击后永久隐藏 P2 改善: - entitlement-required 页面重设计:品牌化、增加返回首页和登录按钮 - 订阅帮助页中英双语:所有 FAQ 和 UI 文案支持中英文切换 - 新增产品审查文档 docs/product-review-jun-2026.md Tested: npx tsc --noEmit
This commit is contained in:
@@ -0,0 +1,130 @@
|
||||
# PolyWeather 前端产品审查报告
|
||||
|
||||
> 审查日期:2026-06 | 视角:产品经理 | 范围:`frontend/` 全部页面、组件、用户流程
|
||||
|
||||
## 一、产品概览
|
||||
|
||||
PolyWeather 是一个面向天气衍生品交易者的气象情报平台。核心价值主张:**结合多模型气象预报 + AI 机场报文解读 + Polymarket 市场价格,为交易决策提供一站式证据链。**
|
||||
|
||||
### 产品分层
|
||||
|
||||
| 层级 | 功能 | 门槛 |
|
||||
|------|------|------|
|
||||
| 免费 | 交互式全球天气地图 + 城市简报 | 无需登录 |
|
||||
| Pro 试用 | 3 天全功能 | 注册后自动获得 |
|
||||
| Pro 订阅 | 城市决策卡(AI 机场报文 + 模型证据 + 市场层)、日内分析、历史对账、未来预报 | 5 USDC/月(积分抵扣最多 3 USDC) |
|
||||
|
||||
### 页面结构(9 个路由)
|
||||
|
||||
| 路由 | 功能 | 是否必需登录 |
|
||||
|------|------|-------------|
|
||||
| `/` | 主看板 — AI 天气决策台 | 否 |
|
||||
| `/account` | 账户中心 — 身份/订阅/钱包/积分/Bot 绑定 | 是 |
|
||||
| `/auth/login` | 登录页(Google OAuth + 邮箱密码) | 否 |
|
||||
| `/docs/[...slug]` | 产品文档中心(8 篇双语文档) | 否 |
|
||||
| `/subscription-help` | 订阅 FAQ(静态) | 否 |
|
||||
| `/entitlement-required` | 访问被拒页面 | 否 |
|
||||
| `/ops` | 运营管理后台 | 是(管理员) |
|
||||
| `/ops/truth-history` | 真值历史查看器 | 是(管理员) |
|
||||
|
||||
---
|
||||
|
||||
## 二、用户流程分析
|
||||
|
||||
### 主看板的两个视图
|
||||
|
||||
```
|
||||
┌─ 分布视图(地图) ──────────────────────────────┐
|
||||
│ Leaflet 交互式地图,城市彩色气泡 │
|
||||
│ 点击城市 → 自动添加到决策卡工作区 + 切换到卡片视图 │
|
||||
│ 免费用户和 Pro 用户均可使用 │
|
||||
├─ 决策卡(分析) ──────────────────────────────┤
|
||||
│ 钉选的城市卡片:AI 机场解读 + 模型集群 + 市场层 + 图表 │
|
||||
│ 需要 Pro 订阅 │
|
||||
└──────────────────────────────────────────────┘
|
||||
└── 右侧栏:城市简报面板(始终可见,免费可用)
|
||||
```
|
||||
|
||||
### 关键用户路径
|
||||
|
||||
1. **新用户落地** → 看到地图 + 城市列表 → 点击城市 → 看到城市简报 → 想深入分析 → 遇到 Pro 付费墙
|
||||
2. **Pro 用户打开** → Pro 加载中…… → 等待 → 看到决策卡工作区
|
||||
3. **Pro 用户工作流** → 地图选城市 → 自动钉选到决策卡 → 展开卡片 → 阅读 AI 报文解读 → 查看市场层 → 判断交易方向
|
||||
|
||||
---
|
||||
|
||||
## 三、发现的问题(按严重程度排序)
|
||||
|
||||
### 🔴 P0 — 阻塞性问题
|
||||
|
||||
| # | 问题 | 影响 |
|
||||
|---|------|------|
|
||||
| 1 | **Pro 加载阻塞整个看板** — 检查 Pro 状态时(`proAccess.loading`),整个页面显示加载动画,免费用户的地图也被遮住 | 所有用户在加载期间无法使用任何功能 |
|
||||
| 2 | **Scan 失败无重试** — 免费用户如果 scan terminal 数据拉取失败,只能看到 "Scan failed" 文字,没有重试按钮(重试按钮仅 Pro 用户可见) | 免费用户永久卡在失败状态 |
|
||||
| 3 | **Detail Panel 同步超时无反馈** — 12 秒后停止显示 "Syncing..." 但不显示错误状态,用户看到空白内容 | 用户以为功能正常但数据缺失 |
|
||||
|
||||
### 🟡 P1 — 体验断裂
|
||||
|
||||
| # | 问题 | 影响 |
|
||||
|---|------|------|
|
||||
| 4 | **无新用户引导** — 没有任何欢迎弹窗、引导提示、或步骤教程。唯一的指引是顶栏内的一行副标题文字 | 新用户不知道从哪开始,可能直接流失 |
|
||||
| 5 | **付费墙没有预览** — 历史对账和日内分析被硬阻断,非 Pro 用户完全看不到任何预览或示例 | 用户不知道付费后能得到什么,降低付费转化 |
|
||||
| 6 | **密码重置缺失** — 邮箱注册的用户如果忘记密码,没有任何重置流程 | 用户被永久锁在账户外 |
|
||||
| 7 | **邮箱验证状态不明** — 注册后提示"请检查邮箱验证",但未验证的用户反复登录失败,没有明确的下一步提示 | 用户反复尝试登录但不知道为什么失败 |
|
||||
|
||||
### 🟢 P2 — 改善体验
|
||||
|
||||
| # | 问题 | 影响 |
|
||||
|---|------|------|
|
||||
| 8 | **公告横幅不可手动关闭** — v1.5.6 升级公告只能通过 localStorage 倒计时 3 天后自动消失,没有 ✕ 关闭按钮 | 占用屏幕空间,用户无法跳过 |
|
||||
| 9 | **无应用内反馈渠道** — 没有"反馈"/"帮助"/"报 Bug"按钮,用户只能主动去 Telegram 群或发邮件 | 用户反馈成本高,问题发现延迟 |
|
||||
| 10 | **entitlement-required 页面过于简陋** — 没有品牌标识、没有导航、没有返回首页的链接 | 用户仿佛掉进了一个黑洞页面 |
|
||||
| 11 | **账户中心缺少个人设置** — 用户无法编辑显示名称/头像、管理活跃会话、删除账户、调整通知偏好 | 产品感觉"半成品" |
|
||||
| 12 | **Docs 无搜索** — 8 篇文档没有搜索功能,用户必须逐篇浏览找到需要的内容 | 查找效率低 |
|
||||
| 13 | **订阅帮助仅中文** — `/subscription-help` 页面没有英文版 | 英文用户无法自助解决计费问题 |
|
||||
| 14 | **Ops 面板无审计日志** — 管理员补发积分等操作没有审计记录 | 运营风险 |
|
||||
|
||||
---
|
||||
|
||||
## 四、做得好的地方
|
||||
|
||||
1. **地图 → 决策卡的自动流转设计** — 点击地图城市自动钉选到分析工作区并切换视图,这是很聪明的"零步骤发现"设计
|
||||
2. **双语覆盖完整** — 所有 UI 文案、文档、AI 解读都有中英文对照,覆盖率接近 100%
|
||||
3. **数据新鲜度可视化** — DataFreshnessBar 让用户一眼看到 METAR/模型/市场数据的新鲜度(fresh/stale/loading/unavailable),降低误判风险
|
||||
4. **AI 解读的产品化程度高** — 不只是显示原始 AI 输出,而是分层展示:快速判断 → 完整解读 → 证据链 → 风险提示,每层都可独立查看
|
||||
5. **免费层有实际价值** — 地图 + 城市简报不是"空壳",用户可以看到真实的气象数据,建立信任后再转化 Pro
|
||||
6. **支付链路完整** — 从钱包绑定到链上签约到支付恢复,整个流程处理了多种异常情况
|
||||
7. **空状态有引导文字** — "Click a city on the map" 这样的空状态文案能告诉用户下一步做什么
|
||||
8. **浅色/深色主题都有** — 两个主题都经过完整设计,不是简单的颜色反转
|
||||
9. **Ops 面板功能齐全** — 运营人员可以在一个页面看到系统健康、转化漏斗、缓存状态、支付异常、用户管理
|
||||
|
||||
---
|
||||
|
||||
## 五、建议的优先级路线图
|
||||
|
||||
### Phase 1 — 修复阻塞(本周)
|
||||
|
||||
1. **Pro 加载不阻塞免费层** — `proAccess.loading` 时先显示地图,决策卡区单独显示加载状态
|
||||
2. **Scan 失败加重试** — 免费用户也能看到重试按钮
|
||||
3. **Detail Panel 同步超时后显示错误提示** — "数据加载超时,请刷新"
|
||||
|
||||
### Phase 2 — 体验堵漏(本月)
|
||||
|
||||
4. **新用户引导** — 简单的 3 步 overlay:①点地图选城市 → ②看右侧城市简报 → ③Pro 解锁决策卡分析
|
||||
5. **付费墙加预览** — 历史对账/日内分析展示一个模糊的示例截图 + "升级 Pro 查看完整分析"
|
||||
6. **密码重置** — 集成 Supabase 的密码重置 API
|
||||
7. **公告横幅加关闭按钮** — "知道了"按钮,点击后永久隐藏
|
||||
|
||||
### Phase 3 — 产品完善(下月)
|
||||
|
||||
8. **应用内反馈入口** — 底部固定"反馈"按钮 → 简单的表单/Telegram 跳转
|
||||
9. **账户设置补充** — 显示名称编辑、会话管理
|
||||
10. **Docs 搜索** — 简单的客户端全文搜索
|
||||
11. **entitlement-required 页面美化** — 加品牌、导航、返回首页链接
|
||||
|
||||
### Phase 4 — 增长优化
|
||||
|
||||
12. 注册后邮件验证引导流程
|
||||
13. 订阅帮助页中英双语
|
||||
14. Ops 操作审计日志
|
||||
15. 通知偏好设置(Email/Telegram 推送开关)
|
||||
Reference in New Issue
Block a user