4.3 KiB
4.3 KiB
Splash Consent(任务清单)
说明:本清单根据
plan.md拆解,要求“可执行、可验收、可标记”。
标记规则:执行完成后将对应项从- [ ]改为- [x],并把“状态”改为 已完成;进行中改为 进行中;阻塞写明原因与解除条件。
0. UI 参考(本次实现对齐)
- 参考截图:你提供的开屏页样式(花束插画 + 文案 + 圆角渐变按钮 + 协议入口)
- 图片资源:
client/assets/images/index/index_flowers.png - 按钮渐变色:
#F69F7B→#F99CC0 - 交互约束:
- 仅首次(未同意)显示“同意按钮 + 协议入口”
- 同意后写入本地
consent.accepted=true,并进入既有启动分发app/index.tsx
1. 依赖与基础设施
- 安装并接入渐变组件(Expo 官方)
- 状态:未开始
- 命令:
cd client
pnpm add expo-linear-gradient
-
验收:项目可正常启动,页面可渲染渐变按钮
-
确认外部链接打开方式(expo-web-browser)可用
- 状态:未开始
- 说明:已存在依赖则跳过安装;否则安装
expo-web-browser(当前项目初始化模板通常已包含) - 验收:能通过代码打开
https://example.com/*外链
2. 本地存储:协议同意状态
- 在
src/storage/appStorage.ts增加 consent 读写方法- 状态:未开始
- Key:
consent.accepted - 新增 API(建议):
getConsentAccepted(): Promise<boolean>setConsentAccepted(accepted: boolean): Promise<void>
- 验收:不在 UI 代码里硬编码 key;重启后状态仍然保留
3. 路由与启动分发接入
-
新增开屏路由:
app/(splash)/splash.tsx- 状态:未开始
- 要求:
- 展示主视觉图片(
index_flowers.png) - 底部区域包含:渐变按钮 + 协议入口(仅未同意时显示)
- 展示主视觉图片(
- 验收:路由可访问并正常渲染 UI
-
修改
app/index.tsx:增加 consent gate- 状态:未开始
- 规则:
- 若
consent.accepted !== true:跳转到/(splash)/splash - 否则沿用原逻辑(Onboarding / Home)
- 若
- 验收:首次启动先到开屏;同意后进入既有分发
4. 开屏页 UI 落地(对齐参考图)
-
布局与样式实现(适配安全区)
- 状态:未开始
- 布局建议(可微调):
- 顶部:插画居中,
resizeMode="contain" - 中部:主文案(支持 i18n)
- 底部:渐变按钮(圆角/阴影轻微)+ 协议入口(文本按钮)
- 注意底部 Home Indicator 安全区
- 顶部:插画居中,
- 验收:不同屏幕尺寸下不遮挡、不溢出,整体视觉接近参考图
-
渐变按钮(仅首次出现)
- 状态:未开始
- 颜色:
#F69F7B→#F99CC0 - 点击行为:
setConsentAccepted(true)router.replace('/')(回到启动分发)
- 验收:点击后按钮不再出现(重启仍不出现),并进入后续流程
-
协议入口(外部链接,占位 URL)
- 状态:未开始
- 链接:
- 隐私协议:
https://example.com/privacy - 用户使用协议:
https://example.com/terms
- 隐私协议:
- 打开方式:优先
expo-web-browser,兜底Linking.openURL - 验收:点击可打开外链;失败时不崩溃(可 toast/alert 提示)
5. i18n 文案补齐
- 新增开屏相关 i18n key(至少 zh-CN/en,尽量补齐 5 语)
- 状态:未开始
- 建议 key:
consent.title(可选)consent.subtitle(可选)consent.agreeconsent.privacyconsent.terms
- 验收:开屏页不出现硬编码长句;切换语言可生效
6. 自测与验收
-
首次启动流程自测
- 状态:未开始
- 路径:Splash(显示按钮/协议入口)→ 同意 → 进入
app/index.tsx分发(Onboarding/Home) - 验收:与
spec.md/plan.md验收一致
-
非首次启动流程自测
- 状态:未开始
- 路径:直接进入
app/index.tsx分发(不再出现同意按钮与协议入口) - 验收:同意状态持久化生效