feat(playtest): 重构预览台资产入口与选择体验

[huyanxius]

Parent: #274
Depends on: #276
Related: #281, #224

Why

顶栏 /playtest 是跨项目进入预览台的全局入口，/playtest/:characterId/:outfitId 才是实际操作角色的检验工作台。两者应当组成一段连续体验：选择造型、确认可用动作、进入舞台。

当前入口虽然已使用共享配色，但页面结构仍像一张独立制作的概念页：

• 点阵场景占据首屏主要空间，可操作资产退居次要位置。
• 项目按大分区展开，资产卡尺寸和留白远大于项目资产工作区。
• 卡片只显示动作与帧数量，没有说明进入后可绑定哪些动作。
• 空态、加载态和错误态没有沿用项目中心的页面节奏与组件语言。
• Character field test、Playtest、预览台 同时出现，产品名称不统一。

同时，/workspace 已经提供项目、角色、造型的逐层选择，/projects/:projectId/assets 负责项目内资产管理。/playtest 不应再复制一套项目管理界面，而应成为跨项目快速寻找可预览造型的启动页。

页面职责

页面	职责
/workspace	选择工作方向，并完成上下文式逐层选择
/projects/:projectId/assets	管理项目内的角色与资产
/playtest	跨项目浏览、筛选并启动一个可预览造型
/playtest/:characterId/:outfitId	绑定动作并实际操控角色

Goal

把 /playtest 重构为紧凑、清晰的预览台启动页。用户无需重新理解项目资产结构，就能看见哪些造型可以检验、能播放哪些动作，并直接进入实际舞台。

Visual Direction

• 以登录后的 /workspace、/projects、/quick-start 和项目资产工作区为主要视觉基线。
• 继承共享暖灰画布、深灰绿文字与强调色，不建立页面私有色板。
• 衬线字体承担页面和造型标题，无衬线字体承担操作与说明，等宽字体只用于项目、动作和状态元数据。
• 依靠细边界、留白和表面层级组织内容，减少大面积虚线卡片、胶囊和装饰性阴影。
• 角色与造型预览是页面主要视觉内容，界面外壳保持克制。
• 点阵场景若保留，只作为低层级的“检验场”提示，不再压过真实资产和主要操作。
• 实际舞台允许保留透明棋盘、动作面板和操控胶囊等专属场景视觉；舞台外围继续服从共享设计系统。
• 不采用暗色霓虹、游戏启动器或宣传页式 Hero。

Scope

页面标题区

• 主名称与顶栏统一使用“预览台”。
• 用简短文案说明核心任务：选择一套造型，进入舞台检查动作与移动反馈。
• 总数、可预览数等状态信息保持紧凑，不与页面标题争夺层级。
• 首屏优先展示真实资产或明确空态，不让独立装饰场景成为进入内容前的门槛。

跨项目资产浏览

• 将当前连续的大型项目分区收敛为紧凑的全局造型画廊。
• 提供基于已加载项目数据的轻量项目筛选或切换，不再复制项目→角色→造型的三步选择流程。
• 每个造型卡明确显示：
  • 所属项目
  • 角色名称
  • 造型名称与真实预览
  • 可播放动作摘要
  • 动作数与真实帧数
  • 可预览或待补帧状态
• 可预览造型继续直接进入 /playtest/:characterId/:outfitId。
• 无真实帧的造型继续可见，但不可进入，并明确显示“尚无可播放帧”。
• 保留完整分页读取，不回退为只显示前 100 条数据。

状态设计

• 加载态使用与最终画廊结构一致的占位，减少内容跳变。
• 空态说明需要先完成角色与动作制作，并保留“开始创作”“查看项目资产”两个真实去向。
• 错误态使用共享反馈样式，并提供明确的重试或返回路径。
• 各状态不重新建立页面私有卡片、颜色和按钮规则。

Responsive and Accessibility

• 桌面端保持紧凑的多列浏览，移动端降级为单列资产流。
• 窄屏下项目上下文、状态和操作不重叠，不依赖悬停才能理解或进入。
• 可进入卡片具有完整键盘焦点与可访问名称。
• 禁用造型不伪装成可点击链接。
• 页面动画支持 prefers-reduced-motion；若保留点阵场景，不破坏现有静态重绘行为。

Architecture Boundary

• 继续读取真实 Project、Character、Outfit、Action 和 Frame 数据。
• 不新增页面内置角色、Mock 资产或新的后端接口。
• 不改变 /playtest 与具体工作台路由。
• 页面只组合共享令牌和通用组件，不复制项目资产工作区的实现。
• 项目筛选只改变当前页面的浏览范围，不产生新的业务状态或持久化数据。

Out of Scope

• 不重构 /playtest/:characterId/:outfitId 的舞台布局和运行时。
• 不修改移动、动作切换、帧播放和键盘输入逻辑。
• 不实现四向或八向能力；相关工作继续由 feat(playtest): 支持四向移动与方向动画（Refs #222） #224 约束。
• 不修改 /workspace 的预览台选择器。
• 不修改 feat(projects): 统一项目资产工作区的界面与动效 #281 覆盖的项目资产页面。
• 不修改 Character 数据结构或后端接口。
• 不新增搜索、排序、批量操作和资产上传。
• 不涉及公开宣传页 /。

Acceptance Criteria

• /playtest 明确呈现为跨项目预览台启动页，而不是项目资产管理页。
• 页面标题与顶栏统一使用“预览台”。
• 桌面和 390px 窄屏首屏均优先出现真实资产或明确空态，不需要先经过独立装饰性 Hero。
• 用户可以按项目缩小浏览范围，但不需要重复完成三步层级选择。
• 每张造型卡能看清项目、角色、造型、可播放动作摘要、动作数、帧数和当前状态。
• 可预览造型继续进入原有参数化工作台路由。
• 无帧造型继续可见且不可进入，不被隐藏或误标为可用。
• 完整分页读取、加载、空态、错误和减少动态效果行为不回归。
• 页面外围只消费共享设计令牌与通用组件。
• 与 /workspace、/projects、/quick-start 及实际预览台完成真实浏览器视觉对照。
• 相关页面测试、类型检查或构建通过。