1.9 KiB
1.9 KiB
移动端创作页新建作品紧凑布局设计
目标
移动端创作页顶部的新建作品模块只承担快速进入创作模板的作用,不承担规则解释和长说明承载。模块在首屏中最多占用约 1/3 高度,把更多空间留给作品列表和筛选操作。
落地范围
- 入口组件:
src/components/custom-world-home/CustomWorldCreationStartCard.tsx - 外层页面:
src/components/custom-world-home/CustomWorldCreationHub.tsx - 模板元数据继续复用
PLATFORM_CREATION_TYPES,不新增前端业务逻辑。
移动端布局规则
- 顶部标题行压缩成单行:左侧标题,右侧仅保留简短状态,不再显示说明段落。
- 模板入口在手机端使用横向滚动胶囊卡片,每个卡片保持单行动作感,不堆叠成长列表。
- 卡片高度控制在约 4rem 内,标题与状态信息并排组织,避免大留白。
- 模块本体使用
max-height: 33svh作为硬约束,内容超出时优先在模板入口行内横向滚动,不撑高页面。 - 桌面端保持网格入口,但同步收紧内边距和卡片留白,避免移动端与桌面端表现割裂。
- 横向滚动模板行必须隐藏原生滚动条,保留滑动能力,避免底部出现过粗的视觉条。
文案约束
- UI 不新增规则说明类文案。
- 原有“直接选择游戏创作模板,立刻进入对应的共创工作台。”说明在移动端隐藏,桌面端保留为辅助说明。
- 可创建的模板卡不展示“可创建”状态标签,只保留标题、短副标题和进入箭头。
- 锁定的模板卡统一以“敬请期待”作为状态标注,不再显示“锁定”。
- RPG 入口展示为“角色扮演 / 剧情演绎,冒险成长”,拼图入口展示为“拼图 / 创意礼物,生活分享”。
- 忙碌状态仅保留在模块标题行的轻量状态中,避免占用每张可用卡片的首要视觉层级。