3.7 KiB
3.7 KiB
Splash Consent（技术计划）
1. 计划目标
实现客户端开屏页（Splash/Welcome）与首次协议同意逻辑：
- 使用
client/assets/images/index/的图片作为主视觉（例如index_flowers.png） - 底部渐变按钮颜色：
#F69F7B → #F99CC0 - 按钮下方提供「隐私协议」「用户使用协议」外部链接入口（先用占位链接）
- 仅首次出现按钮：当
consent.accepted=true后不再展示同意按钮与协议入口 - 同意后进入现有启动分发：
app/index.tsx（继续走 Onboarding/App Shell）
2. 默认技术决策
- 路由：沿用
expo-router - 持久化：沿用
AsyncStorage - 协议打开方式：外部链接（
expo-web-browser或Linking.openURL） - 渐变实现：使用
expo-linear-gradient（Expo 官方）
3. 路由与流程设计
3.1 新增路由
app/(splash)/splash.tsx：开屏页（图片 + 首次同意按钮/协议入口）app/(splash)/_layout.tsx：可选（一般无需 header）
3.2 启动分发逻辑（与现有流程集成）
当前已存在启动分发 app/index.tsx（根据 onboarding.completed 跳转）。
本需求将启动分发扩展为两段判断：
- 若
consent.accepted !== true：跳转到/(splash)/splash - 若
consent.accepted === true：沿用原逻辑（进入 Onboarding 或/(app)/home）
注意：你确认的是“隐藏按钮而不是隐藏页面”。因此当
consent.accepted=true时，开屏页不需要停留；可直接跳过该页进入原启动分发。
4. 数据与持久化
4.1 Key
consent.accepted: boolean
4.2 存储封装
在现有 src/storage/appStorage.ts 中补充：
getConsentAccepted(): Promise<boolean>setConsentAccepted(accepted: boolean): Promise<void>
并确保所有 UI 不直接硬编码 key。
5. UI 细节与交互
5.1 开屏布局（建议）
- 主视觉图片：
- 使用
index_flowers.png - 适配：
resizeMode="contain"或按实际视觉调整（不裁切关键内容）
- 使用
- 底部区域（贴近安全区）：
- 渐变按钮（圆角、阴影/投影轻微）
- 协议入口（两段文字按钮，左右排列或一行内间隔）
5.2 渐变按钮（仅首次出现）
- 展示条件：
consent.accepted !== true - 点击行为：
- 写入
consent.accepted=true - 跳转到
/（触发app/index.tsx继续分发）
- 写入
5.3 协议入口（外部链接，先占位）
- 「隐私协议」：
https://example.com/privacy - 「用户使用协议」：
https://example.com/terms
打开方式：
- 优先：
expo-web-browser打开外部链接 - 兜底：
Linking.openURL
6. i18n 文案
新增 key（至少 zh-CN/en，其余语言可逐步补齐）：
consent.title（可选）consent.agree（按钮文案：同意并继续）consent.privacy（隐私协议）consent.terms（用户使用协议）
7. 实施步骤
- 新增
consent.accepted的存储读写方法 - 新增
/(splash)/splash页面（图片 + 渐变按钮 + 协议入口） - 修改
app/index.tsx：在 onboarding 分发前插入 consent gate - 接入
expo-linear-gradient并完成按钮 UI - 接入外部链接打开（先占位 URL）
- 补齐 i18n key（至少 zh-CN/en）
- 自测：
- 首次启动：显示按钮与入口；同意后进入 Onboarding/App
- 再次启动：不再出现同意按钮，直接进入后续流程
8. 验收标准
- 首次启动：
- 展示开屏图片
- 渐变按钮颜色正确（
#F69F7B → #F99CC0） - 协议入口可点击并打开外部链接
- 点击同意后进入后续流程
- 非首次启动：
- 不再出现同意按钮与协议入口
- 直接进入后续流程（Onboarding/App Shell）