113 lines
3.7 KiB
Markdown
113 lines
3.7 KiB
Markdown
# 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` 跳转）。
|
||
|
||
本需求将启动分发扩展为两段判断：
|
||
|
||
1. 若 `consent.accepted !== true`：跳转到 `/(splash)/splash`
|
||
2. 若 `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. 实施步骤
|
||
|
||
1. 新增 `consent.accepted` 的存储读写方法
|
||
2. 新增 `/(splash)/splash` 页面（图片 + 渐变按钮 + 协议入口）
|
||
3. 修改 `app/index.tsx`：在 onboarding 分发前插入 consent gate
|
||
4. 接入 `expo-linear-gradient` 并完成按钮 UI
|
||
5. 接入外部链接打开（先占位 URL）
|
||
6. 补齐 i18n key（至少 zh-CN/en）
|
||
7. 自测：
|
||
- 首次启动：显示按钮与入口；同意后进入 Onboarding/App
|
||
- 再次启动：不再出现同意按钮，直接进入后续流程
|
||
|
||
## 8. 验收标准
|
||
|
||
- 首次启动：
|
||
- 展示开屏图片
|
||
- 渐变按钮颜色正确（`#F69F7B → #F99CC0`）
|
||
- 协议入口可点击并打开外部链接
|
||
- 点击同意后进入后续流程
|
||
- 非首次启动：
|
||
- 不再出现同意按钮与协议入口
|
||
- 直接进入后续流程（Onboarding/App Shell）
|
||
|