FRONTEND · 2026-08-28

第一阶段前端页面体系

本阶段以最新 Figma 视觉稿为方向，先完成可走通的页面体系与导航。仅登录使用真实 Authing 接口；行程、群聊、探索和 POI 均使用本地演示数据。

产品边界：任何业务页面在未登录时都会跳转到登录页。登录后默认进入 AI 创建行程；用户首句输入后静默创建草稿行程，AI 先补齐基础信息。用户可编辑基础信息、可调整 POI 顺序，但不能直接增删或替换 POI。

核心链路

任意业务路由（未登录） → /login?next=目标路径
登录成功 → 原目标路径；无目标路径 → /trip/new
/trip/new → 首句输入 → 本地 Draft Trip → /trip/[id]
行程详情 ↔ 群聊 / 基础信息编辑 / POI 详情 / POI 排序

页面与路由

路由	职责	第一阶段数据
`/`	根入口，转到 AI 创建行程	无
`/login`	手机号验证码登录、登录后回跳	真实 Authing API
`/trip/new`	默认首页；自然语言输入与静默草稿创建	本地 `createTripDraft`
`/trip/[id]`	行程概览、按天 POI、进入编辑/群聊/排序	本地草稿
`/trip/[id]/chat`	成员消息、AI 回复、推荐卡与返回行程	本地消息
`/trip/[id]/edit`	编辑行程名称、目的地、日期、天数	本地表单
`/trip/[id]/sort`	POI 排序模式；拖拽交互留待下一阶段	本地 POI 列表
`/trip/[id]/poi/[poiId]`	POI 只读详情	本地 POI
`/explore`、`/profile`	探索示例行程、我的行程与退出登录	本地行程；退出调用真实接口

代码边界

src/components/auth-gate.tsx：根级登录门禁；除 /login 外统一校验现有 AuthProvider 的真实会话。
src/lib/trip-demo.ts：本阶段唯一的行程演示数据边界，定义 TripDraft、TripDay、Poi 和首句创建草稿的函数。
src/components/trip-ui.tsx：黑白底色与荧光绿强调的共享外壳、底部导航、行程卡、POI 卡，避免页面各自复制视觉规则。
src/app/trip/*：按用户流程拆分页面，不让 AI、行程、群聊逻辑混在同一个路由内。

真实接口与本地数据

本阶段不使用 Supabase，也不新增旅行相关后端接口。登录、会话恢复与退出登录沿用现有 Authing API；其余业务状态不请求生产服务。这样设计可先稳定 Figma 页面、导航与状态边界，待行程数据模型和 AI 协议定稿后，仅替换本地数据层即可接入新后端。

本地开发与验证

nvm use 20.19.0
corepack pnpm install --frozen-lockfile
pnpm dev:mobile:web

# 质量检查
pnpm --filter @vibemate/mobile lint
pnpm --filter @vibemate/mobile typecheck
pnpm build:mobile:web

草稿创建的最小行为测试位于 src/lib/trip-demo.test.mjs。Ego 本地验证至少覆盖：未登录访问 / 和 /trip/new 均跳转至 /login，并带回跳参数。

下一阶段接入约束

先确认旅行实体、版本、成员权限、POI 状态和 AI 操作 JSON，再替换 trip-demo.ts。
基础信息编辑接真实保存接口；POI 不开放直接增删替换，排序能力按最终交互方案实现。
群聊与 AI 改用异步任务和版本校验，避免旧结果覆盖新行程。
地图、真实邀请、分享落地页、投票及完整拖拽体验不属于本阶段。