Files
Genarrative/docs/technical/CREATION_PAGE_MOBILE_UI_FIX_2026-04-21.md
2026-04-21 09:44:17 +08:00

2.3 KiB

创作页移动端 UI 修复记录

日期:2026-04-21

问题定位

本轮修复只处理创作页表现层,不新增创作流程。

当前移动端问题主要来自三处:

  1. 平台页在 platformTab === 'create' 时直接渲染 CustomWorldCreationHub,绕过了 PlatformHomeView 的移动端外壳,导致底部 Tab 栏没有挂载。
  2. 创作中心内部仍混用 pixel-* 九宫格样式、bg-black/*text-whiteborder-white/* 等暗色 Tailwind 类,亮色主题下会出现深色块和低对比文字。
  3. 创作中心根节点自带 h-full overflow-y-auto,放回平台页后容易与平台页主滚动区抢滚动权,手机上会显得布局混乱。

落地约束

  1. 创作页仍复用现有平台首页,不新增页面和新系统。
  2. 移动端底部 Tab 必须始终由 PlatformHomeView 统一渲染,创作页只作为 create Tab 的内容。
  3. 创作中心内部不再使用深色硬编码作为默认底色,普通卡片、筛选 Tab、空状态和按钮统一使用 platform-* token。
  4. 创作中心不再自建整页滚动,只把内容交给平台页主滚动区,避免嵌套滚动。
  5. UI 中不增加规则说明类文案,只保留必要入口、状态和作品信息。

编码方案

  1. PlatformHomeView 增加可选的 createTabContent,让当前 Agent 创作中心接回平台页统一外壳。
  2. PreGameSelectionFlow 不再在 platformTab === 'create' 时绕过 PlatformHomeView,而是把 CustomWorldCreationHub 作为创作 Tab 内容传入。
  3. CustomWorldCreationHub 改为无内部整页滚动的内容容器,标题、返回、计数、错误、加载骨架都使用平台 token。
  4. CustomWorldCreationStartCardCustomWorldWorkCard 从像素暗色面板切换为平台卡片样式,保留游戏化主视觉但跟随亮暗主题。
  5. CustomWorldWorkTabs 改用 platform-tab,并保持横向滚动与清晰选中态。

验收要点

  1. 手机宽度下进入“创作”后,底部“首页 / 创作 / 存档 / 我的”Tab 始终可见。
  2. 亮色主题下创作页默认卡片不出现大面积黑色底板。
  3. 创作页只有平台页主内容区滚动,底部 Tab 不随作品列表滚走。
  4. 桌面端仍可通过左侧平台导航进入创作页。