CI Preview：为前端 PR 生成可访问的 Vercel 预览

[huyanxius]

背景

当前 Frontend CI 只执行格式检查、Lint、类型检查、测试和构建。评审者仍需拉取代码并在本地启动前端，无法直接从 PR 检查界面体验改动。

MS2 加分项要求 PR 提供可直接访问界面的 CI Preview。参考 XBuilder，使用 Vercel Git Integration 为每次 PR 提交生成独立预览地址。

目标

为当前前端骨架 PR 及后续 Vibe Coding 用户故事 PR 提供自动更新、可直接访问的界面预览。

Preview 是演示环境，不代表正式生产环境或正式后端契约。

实现范围

• 保留现有 GitHub Actions Frontend CI 作为代码质量检查。
• 使用 Vercel Git Integration 部署 frontend Vite 应用。
• 增加 Vite SPA 路由重写，避免子路由刷新时返回托管平台 404。
• 增加明确隔离的 Preview 应用组合，使用稳定演示数据。
• Preview 环境通过 VITE_APP_ENV=preview 启用。
• Production 继续保持正式 API 未接入时明确不可用，不回退 Mock。
• 为 Preview 与 Production 的实现选择增加自动化测试。

不包含

• 正式生产站点交付。
• 部署 Windup 后端或数据库。
• 修改正式 Project、Workflow 或 WorkflowRun API 契约。
• 在仓库中保存 Vercel Token、API Key 或其他密钥。
• 把 Preview 演示数据作为正式业务数据。

验收标准

• PR 创建或推送新提交后，Vercel 自动触发 Preview Deployment。
• GitHub PR 中显示 Vercel Check 和可访问的 Preview 链接。
• Preview 链接无需评审者在本地安装或启动项目。
• /、/projects、/quick-start 可直接打开和刷新，不出现托管平台 404。
• Preview 环境可以使用演示数据查看和创建项目。
• Production 环境仍不使用演示 Repository。
• 仓库内不包含部署密钥。
• Frontend CI 与相关测试通过。

外部依赖与风险

• Vercel 项目需要连接 1024XEngineer/Windup，Root Directory 设置为 frontend。
• 来自 Fork 的 PR 可能需要 Vercel 团队成员授权后才能部署。
• Preview 必须保持公开可访问，否则无法作为评审链接。

关联

Refs #58 #59

参考：

• [Demo only DO NOT MERGE] feat(tutorial): silent-by-default copilot, capability-gated guidance, and the Code: Lita series goplus/builder#3355
• https://github.com/goplus/builder/blob/dev/spx-gui/vercel.json