4.3 KiB
4.3 KiB
平台首页移动端信息流与作品卡设计
更新时间：2026-04-28
1. 本次目标
- 桌面端首页布局保持现有顶部栏、侧边导航、Hero、趋势区与下方网格结构，不调整桌面端区块顺序。
- 移动端首页改为参考图式信息流：顶部搜索框、横向频道 Tab、纵向作品列表、底部主导航。
- 双端公开作品卡统一结构：上方
16:9封面图，下方作品名称、作品描述、标签、点赞数。 - 点赞数必须来自作品读模型字段，前端只负责展示，不把游玩数或评分临时改名成点赞。
2. 数据契约
2.1 统一字段
公开作品卡和创作中心复用的作品摘要都增加：
likeCount: number
当前阶段只做只读展示，不新增点赞按钮和点击 reducer。后端对尚未接入真实点赞表的作品返回 0，保证接口 shape 稳定，后续可无 UI 结构迁移地接入真实互动计数。
2.2 各玩法映射
- RPG 公开广场：
CustomWorldLibraryEntry与CustomWorldGalleryCard返回likeCount，当前由 Rust facade 返回0。 - 拼图公开广场：
PuzzleWorkSummary返回likeCount，当前由 Rust facade 返回0，playCount继续仅表示游玩次数。 - 大鱼公开广场：
BigFishWorkSummary返回likeCount，当前由 Rust facade 返回0，playCount继续仅表示游玩次数。 - 前端聚合类型
PlatformPublicGalleryCard透传likeCount，WorldCard不再依赖badge/metaLabel决定主要信息结构。
2.3 首页读链路核对
首页公开作品流的读取链路固定为：
RpgEntryHomeView
→ platformPublicGalleryClient / puzzleGalleryClient / bigFishGalleryClient
→ Rust api-server
→ spacetime-client 生成绑定
→ spacetime-module procedure
→ SpacetimeDB 表
- 公开读取必须匿名可用，前端
GET列表与详情统一传skipAuth: true、skipRefresh: true，避免未登录首页被刷新 token 链路阻断。 - 拼图公开广场走
list_puzzle_gallery/get_puzzle_gallery_detail，返回coverImageSrc、summary、themeTags、playCount、remixCount、likeCount。 - 大鱼公开广场走
list_big_fish_works(published_only=true)；由于部分已部署模块会在公开列表分支前仍校验owner_user_id非空，客户端与模块内部公共列表输入都使用public-big-fish-gallery占位 owner。该字段在published_only分支不参与筛选，只用于兼容旧校验。 - 自定义世界公开广场走
list_custom_world_gallery_entries，当前主云数据为空时应返回成功空列表，而不是错误态。
3. 移动端布局
- 移动端首页只在
RpgEntryHomeView的 mobile content 内重排。 - 第一屏顺序：
- 搜索框
- 频道横滑 Tab：推荐、今日游戏、游戏分类、PC游戏、即点即玩
- 作品信息流
- 作品信息流使用单列纵向列表，卡片宽度填满容器，卡片之间保留短间距。
- 不新增功能说明类长文案；空态仍沿用现有短状态文案。
- 移动端卡片视觉允许接近参考图的深色信息流，但仍走平台主题 token，避免写死不可维护的大面积色块。
4. 作品卡结构
每张公开作品卡固定为：
- 封面区域：
aspect-ratio: 16 / 9，图片object-cover；无封面时使用轻量主题底。 - 信息区域：
- 第一行：作品名称，右侧点赞数。
- 第二行：作品描述，两行截断。
- 第三行：最多三个标签。
- 点赞数展示在参考图评分位置，使用心形图标 + 紧凑数字，例如
128、1.2万。 - 不展示作品号；作品号仍只在详情页或分享路径中使用。
5. 验收
- 390px 移动端首页不横向溢出，能看到搜索、频道和纵向作品列表。
- 桌面端首页布局区块顺序不变，只替换公开作品卡内部结构。
- RPG、拼图、大鱼三类公开作品卡都有
likeCount字段，前端聚合后能统一展示。 - 运行编码检查、前端定向测试和必要的 Rust 检查。
- HTTP 验收需覆盖：
GET /api/runtime/custom-world-gallery成功返回entries。GET /api/runtime/puzzle/gallery成功返回items且包含likeCount。GET /api/runtime/big-fish/gallery成功返回items，旧部署模块不再因big_fish.owner_user_id 不能为空阻断首页。