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