proposal: 拆分公开宣传页与登录工作台的产品入口

[huyanxius]

背景

Windup 当前把公开介绍与登录后的产品入口放在同一个根页面中：

• / 同时承担“让访客理解产品”和“让用户进入制作流程”两种职责。
• 公开页面与产品页面共用同一套全局 Header 与 Shell。
• 访客会直接看到项目资产、创作等受保护入口，却缺少完整的产品介绍。
• 登录用户进入首页后，看到的仍是兼具宣传与入口性质的页面，无法围绕“继续哪项工作”组织信息。

#37 已确定 Windup 是面向国产小游戏开发者的 2D 角色动态素材生成与资产工作台，核心承诺是“交付的是资产，而不是图片”；#157 已确定首页匿名可见、其余业务页面需要登录。本提案继续收紧这一边界：公开宣传页与登录工作台不再共用同一个页面语义。

一句话决策

/ 永远是公开宣传页，/workspace 永远是受保护的工作台首页。

两者拥有独立的页面、Header 与 Layout；只共享 Logo、点阵小鸟等品牌基础能力，不共享导航结构与页面职责。

用户场景

未登录访问者

访问者需要先理解 Windup 面向谁、解决什么问题、如何把角色设定变成可持续管理的动作资产，再决定是否登录或开始创作。

已登录用户

用户需要一个稳定的工作台入口，选择快速开始、工作流画布、资产库或 Playtest，并在需要项目、WorkflowRun、角色或造型上下文时完成选择。

深链接访问者

用户通过 /quick-start、/projects、/workflow-editor/:runId 或 /playtest/:characterId/:outfitId 进入时，现有登录守卫和登录后回跳必须继续生效。

路由与登录态

地址或动作	未登录	已登录
/	展示宣传页	仍展示宣传页
/workspace	打开登录面板，登录后回到 /workspace	展示工作台
/quick-start	登录后回到原地址	直接进入
/projects 及项目深链接	登录后回到原地址	直接进入
Workflow Editor 深链接	登录后回到原地址	按现有 runId 进入
Playtest 深链接	登录后回到原地址	按现有角色与造型进入
显式退出登录	回到 /	不适用

登录面板继续使用查询参数驱动，不新增独立登录页：

• 顶栏“登录”：/?account=login&returnTo=/workspace
• 宣传页“开始创作”：访客登录后进入 /quick-start
• 会话过期：保留原始受保护地址，重新登录后继续
• 工作台 Header 的 Logo 与“首页”入口统一指向 /workspace
• 宣传页 Logo 始终指向 /

公开宣传页

导航

参考横向产品导航的排版关系，但不复用参考站点的主题、图标或内容。

左侧：Windup Logo、Windup、2D 角色资产工作台。

右侧：产品能力、制作流程、资产工作台、登录、开始创作。

前三项为当前页面的章节锚点。已登录时，“登录”和顶栏“开始创作”收敛为“进入工作台”。

Hero

沿用已确认文案：

• 面向 COCOS CREATOR 与微信小游戏创作者
• 让你的角色，真正登场。
• 团队可以很小，角色不必因此停在设定里。Windup 把你认定的角色，延展成跨动作保持一致、可以检查与修正、能进入游戏项目的 2D 动作资产。

按钮改为：

• 主按钮：开始创作
• 次按钮：了解制作流程

主按钮承担注册、登录和进入 Quick Start 的转化目标；次按钮滚动到制作流程，不把未登录访客直接带入私有资产库。

Hero 使用浅色灰绿主题。现有点阵小鸟放大后位于左侧文案后方，保留克制波动并尊重 reduced-motion。右侧保持留白，不放角色、造型或动作资产。

页面结构

宣传页依次包含：

1. Hero
2. “交付的是资产，而不是图片”的核心主张
3. 角色输入 → 母版 → 动作生成 → 审核 → Playtest / 导出的制作流程
4. Quick Start 与 Workflow Editor 两种创作入口
5. Project → Character → Outfit → Action 的资产管理关系
6. 收尾 CTA 与简洁 Footer

页面只陈述 #37、README 与现有产品能够支持的能力。产品视觉区域使用真实运行截图，不制作虚假的产品界面、客户评价、价格、采用数据或合作品牌。

登录工作台

页面结构

/workspace 使用浅色双栏布局：

• 左侧：2×2 四个主要入口
• 右侧：用于选择真实上下文的“继续创作”面板

移动端按“入口在前、上下文在后”折叠为单列。

左侧四个入口

快速开始

直接进入 /quick-start，用自然语言建立标准生产流程。

工作流画布

不直接构造缺少 runId 的地址。选择该入口后，右侧切换为：

1. 选择项目
2. 查看该项目已有 WorkflowRun
3. 进入 /workflow-editor/:runId

项目没有 WorkflowRun 时，引导用户通过快速开始建立流程，或返回项目资产继续生产，不创建没有业务节点的空 WorkflowRun。

后端已经提供项目内 WorkflowRun 分页列表；本轮只补齐前端公开适配，不修改后端契约。

资产库

直接进入 /projects。项目仍是角色资产与生成规格的隔离边界，不新增脱离项目的全局资产库。

Playtest

不直接构造缺少角色和造型 ID 的地址。选择该入口后，右侧依次选择：

1. 项目
2. 角色
3. 含有效动作帧的造型
4. 进入 /playtest/:characterId/:outfitId

没有可试玩造型时，明确引导进入对应项目资产库，不加载演示角色、不伪造动作帧。

右侧“继续创作”

默认状态显示当前账号的项目入口：

• 展示项目名称与真实更新时间
• 只取现有项目列表中的有限条目
• 提供“查看全部项目”和“新建项目”
• 不宣称存在后端尚未提供的跨项目最近活动流

选择“工作流画布”或 “Playtest”后，同一区域切换为对应的上下文选择器。所有状态必须覆盖：加载中、无项目、无 WorkflowRun、无角色或造型、无可播放动作、读取失败、正常选择。

页面与模块边界

• 宣传页不使用产品 Header。
• 工作台与受保护业务页面不使用宣传页 Header。
• 点阵小鸟可以抽成共享品牌视觉能力，但宣传页和工作台分别决定尺寸、位置与透明度。
• 登录态只决定按钮目标和受保护路由是否可进入，不决定 / 渲染哪一种首页。
• 工作台只负责导航与上下文选择，不持有 WorkflowRun、Character 或 Playtest 的业务状态。
• 业务数据继续由对应实体公开接口读取。

兼容性

• 已登录用户访问 / 时将看到宣传页，不再自动进入工作台。
• 原工作台首页迁移到 /workspace。
• 现有 /projects、/quick-start、Workflow Editor、Playtest 和账号中心地址保持不变。
• 现有登录回跳、会话恢复、会话过期与显式退出规则继续生效。
• 不把全部产品地址迁移到 /workspace/*，避免无必要地破坏深链接。

明确排除

• 不修改后端 API、数据结构、权限或认证协议
• 不重新设计 Quick Start、Workflow Editor、资产库或 Playtest 内部页面
• 不在 Hero 右侧添加角色资产
• 不增加价格、客户案例、合作品牌、虚构指标或演示数据
• 不增加桌面客户端、国际化切换或深色主题
• 不建立跨项目的全局最近活动流
• 不允许无 runId 打开 Workflow Editor
• 不允许无角色与造型上下文打开 Playtest

备选方案与取舍

/ 按登录态切换宣传页与工作台

否决。虽然组件可以拆开，但同一个地址仍承担两种产品语义，导航、回跳和用户预期继续耦合。

宣传页与工作台共用 Header

否决。宣传导航服务于理解与转化，产品导航服务于任务和资产，两者的目标不同。

四个入口全部作为直接链接

否决。Workflow Editor 和 Playtest 都需要真实业务 ID，构造无上下文地址只会制造错误页或假数据。

工作台右侧继续展示产品介绍

否决。登录用户更需要选择项目、WorkflowRun、角色与造型；重复宣传内容无法支持日常使用。

实现拆分

Proposal 通过后拆成两条实现 Issue，避免一个 PR 同时承担整站视觉与工作台数据选择器：

1. 公开宣传页与路由 / Shell 拆分
2. 工作台四入口与上下文面板

第二条依赖第一条。当前宣传页工作树只处理第一条，不提前夹带工作台选择器实现。

验收标准

• / 对访客与登录用户始终呈现同一宣传页。
• /workspace 只对完成会话恢复的登录用户呈现。
• 宣传页具备已确认的导航、Hero、点阵小鸟、下方五段内容和双 CTA。
• Hero 右侧为空，不出现角色资产。
• 访客点击“开始创作”后登录，最终进入 /quick-start。
• 已登录用户可以从宣传页进入 /workspace。
• 产品 Header 的首页入口指向 /workspace。
• 工作台左侧显示快速开始、工作流画布、资产库与 Playtest。
• Workflow Editor 永远以真实 runId 打开。
• Playtest 永远以真实 characterId + outfitId 打开。
• 工作台右侧具备完整的加载、空、失败与正常状态。
• 不引入后端改动或演示数据。
• 桌面与移动端均完成真实浏览器验收，并提供对应截图。
• 前端格式、Lint、类型检查、测试与构建全部通过。

关联

• Windup 产品策划案：面向国产小游戏的 2D 角色素材生成资产工作台 #37 Windup 产品策划案
• feat: 统一前端路由、导航与真实依赖装配（Refs #70） #103 前端路由与真实依赖装配
• feat: 实现项目中心与项目资产工作区 #118 项目中心与项目资产工作区
• feat: 实现单角色 Workflow Editor 卡片画布 #120 单角色 Workflow Editor
• feat: 实现 Playtest 核验台页面 #130 Playtest 核验台
• proposal: Windup 前端用户模块的产品口径 #157 前端用户模块产品口径
• feat: 实现登录态守卫与未登录引导（Refs #157） #160 登录态守卫与未登录引导
• feat: 为全局 Header 增加账号区域与认证入口（Refs #157） #164 全局 Header 账号区域与认证入口

[huyanxius]

工作台 UI 排版参考：