落地 synastry/star/ask API 与 H5 页面,补齐 cece-frontend-re complete-design 证据文档,并加入 Android 模拟器截图抓取脚本。 Co-authored-by: Cursor <cursoragent@cursor.com>
6.2 KiB
6.2 KiB
10 · 首页完整设计
Route:
/home· Tab: 首页 · Design Complete
1. 页面目标
- 分发工具(宫格)
- 推动建档(了解 TA)
- 消费信息流 / 转化测评与会员
- 承接 UGC 玩法广场
2. UI 完整清单(分区)
2.1 顶区 HomeHeader(✅ E8)
| 元素 ID | 类型 | 文案/内容 | 行为 |
|---|---|---|---|
| H-HDR-CHECKIN | IconBtn | 签到 | → 签到/每日福利 |
| H-HDR-SEARCH | Search | 运营占位轮播(例「锐评十二星座」) | → 全局搜索 |
| H-HDR-PLUS | IconBtn | + |
→ 发布/快捷创建(待子页核对) |
| H-BANNER-TA | 条 | 「输入生日,更加了解TA」 | → 建档 other |
2.2 自己卡片 HomeSelfCard(✅ E8 · 原「档案条」升格)
| 元素 | 行为 |
|---|---|
| 标题「自己」+「更多」 | 更多 → 档案/运势详情 |
| 今日心情分数 + 短解读 | 点卡片进入心情/运势 |
| 五维条:爱情 / 财富 / 事业 / 学习 / 人际 | 展示型;点击进详情(待核) |
2.3 宫格 HomeToolGrid(✅ E8 真机 10.50.0 定稿)
横向两行可滑宫格(非 3×3):
| 行 | 序 | key | 标题 | 备注 |
|---|---|---|---|---|
| 1 | 1 | mbti | I人E人 | |
| 1 | 2 | star_sign | 星座 | |
| 1 | 3 | natal | 星盘 | |
| 1 | 4 | bazi | 生辰 | |
| 1 | 5 | synastry | 缘分合盘 | |
| 1 | 6 | ziwei | 紫微 | 滑出可见 |
| 2 | 7 | companion_star | 陪伴小星 | |
| 2 | 8 | confide | 倾诉 | |
| 2 | 9 | wisdom_card | 智慧卡 | |
| 2 | 10 | natal_report | 星盘报告 | 角标 New |
| 2 | 11 | bazi_cal | 生辰历 | |
| 2 | 12 | soulmate | 灵魂伴侣 | 滑出可见 |
宫格下方运营双卡(非第十格):
| key | 标题 | 说明 |
|---|---|---|
| plaza | AI玩法广场 | 大卡 + 运营副文案 |
| shop_promo | 商城运营卡 | 例:水晶手串 |
| ai_disclaimer | 脚注 | 「部分标题由AI生成,仅供参考」 |
「更多」入口:在「自己」卡片标题旁 / 工具二级页(见 free2/tools/更多.png);沙盘等未进首屏宫格的工具收入更多页。
2.3.1 「更多」页条目(✅ E8 free2/tools/更多.labels.txt)
分组实机可见(不完全等于 UI 分区文案):
| 类 | 条目 |
|---|---|
| 内容/玩法 | 推荐 · 测试 · 心情小镇 · 幸运地图 · 爱情树 · 聊天分析 · 关系网 · 解读 · 沙盘 · 星骰 · 智慧卡 · 日历 |
| 命理工具 | 星盘 · 星盘报告 · 缘分合盘 · 星座 · 生辰 · 生辰历 · 紫微 · 紫微历 · 星宿 · 政余 · 政余历 · 灵数 · 生肖 · 玛雅图腾 · 人类图 |
| 社交/商业 | 倾诉 · 灵魂伴侣 · 商城 |
2.4 运营位 HomePromo
- 最多 1 个大 Banner(可关闭,24h 不再展示,本地记录)
- 配置来自后台
banners
2.5 信息流 HomeFeed
| 卡片类型 | 字段 | 点击 |
|---|---|---|
| fortune_today | 标题、摘要、分数 | 运势详情 |
| hot_test | 封面、标题、人数 | 测评 |
| expert | 达人卡 | 达人详情 |
| article | 封面、标题 | 文章 |
| video | 封面 | 播放 |
| plaza_hot | 应用名、热度 | 广场应用 |
| ai_entry | 文案 | → 问 |
交互:下拉刷新 · 上拉分页(cursor)· 负反馈「不感兴趣」(可选)。
2.6 「更多」二级页 ToolsMorePage
固定收录(可后台排序):爱情树、幸运地图、pick卡、塔罗、八字、紫微、生命数字、姓名分析…
每项:Icon · 标题 · 副标题 · 角标(热/新)。
2.7 AI 玩法广场 PlazaPage
| 元素 | 说明 |
|---|---|
| 标题区 | Slogan:「全民手搓创意——精选应用」 |
| 排序 | 热度 / 最新 |
| AppCard | 名、热度、创作者、封面 |
| 点击 | → PlazaAppRuntime |
| 空态 | 「暂无应用」 |
| 审核中 | 创作者端可见,C 端不可见 |
3. 交互细则
| 手势 | 对象 | 结果 |
|---|---|---|
| Tap | 宫格 | 路由跳转,埋点 home_grid_click |
| Tap | 了解 TA | 打开建档;未登录先 Auth |
| LongPress | 宫格 | (D)无菜单,防误触 |
| Pull | Feed | 刷新 |
| Tap | Feed 负反馈 | 减少同类(需登录) |
倾诉点击:弹出 ActionSheet「和 AI 聊」/「找达人」→ ask / online。
4. 状态机
| 状态 | UI |
|---|---|
| Loading | Header 骨架 + 宫格骨架 + Feed 骨架 |
| Ready | 全量 |
| FeedEmpty | 宫格在,Feed EmptyState |
| Offline | NetworkBanner,缓存宫格可点 |
| Error | 全页 Retry |
| AuthRequired | AuthModal |
stateDiagram-v2
[*] --> Loading
Loading --> Ready
Loading --> Error
Ready --> AuthRequired
Ready --> Offline
Offline --> Ready
Error --> Loading
5. 接口契约(本页)
| 调用时机 | API |
|---|---|
| 进入 | GET /v1/home/bootstrap → grid_config · banners · profile_summary |
| Feed | GET /v1/home/feed?cursor= |
| 负反馈 | POST /v1/home/feed/{id}/dismiss |
| 广场 | GET /v1/plaza/apps?sort=heat |
home/bootstrap Response(定稿):
{
"profile_summary": {"id":"","name":"","sun_sign":"","has_birth_time":false},
"grid": [{"key":"mbti","title":"I人E人","badge":null,"enabled":true}],
"banners": [{"id":"","image_url":"","link":"","closable":true}],
"ta_guide_visible": true
}
6. 异常
| 场景 | 处理 |
|---|---|
| bootstrap 失败 | 使用本地默认宫格(写死上表 10 项)+ Error toast |
| feed 失败 | 保留宫格,Feed 区 Retry |
| 配置缺宫格 | 合并默认,不丢星盘/合盘/问相关入口 |
7. 埋点
home_expose · home_grid_click{key} · home_ta_guide_click · home_feed_click{type} · home_feed_refresh · plaza_open · plaza_app_click
8. 模拟器校验 ID
| ID | 项 | 状态 |
|---|---|---|
| V-H01 | 宫格文案与顺序 | ✅ E8 已按上表改稿 |
| V-H02 | 了解TA 文案 | ✅ 「输入生日,更加了解TA」 |
| V-H03 | 广场形态 | ✅ 首页双大卡而非 slogan 条 |
| V-H04 | Feed / 达人卡 | 🟡 采集中 free/home/* |
| V-H05 | 更多页条目 | 🟡 采集中 free/tools/更多* |
| V-H06 | 自己卡片五维 | ✅ 爱情财富事业学习人际 |
| V-H07 | 门禁弹层 | ✅ 未成年 / 每日领取 |
差分总表:evidence-20260803.md