mindfulness/spec_kit/Onboarding_UI_Opt/plan.md

Onboarding UI Optimization (技术计划)

1. 基础设施与样式定义 (Foundation)

• 定义 Design Tokens
  • 在 constants/Colors.ts 或新文件 constants/OnboardingTheme.ts 中定义新色值：
    • background: #FFF4EA
    • textPrimary: #4A3B32 (深棕)
    • buttonGradientStart: #F69F7B
    • buttonGradientEnd: #F99CC0
    • inputBackground: #FFFFFF
• 创建基础组件
  • SerifText: 封装 Text 组件，默认应用 fontFamily: Platform.select({ ios: 'Georgia', android: 'serif', default: 'serif' }) 及主题色。
  • OnboardingLayout: 通用容器，包含 SafeAreaView、背景色设置、Header (Skip 按钮) 与 Footer 占位。

2. UI 组件开发 (UI Components)

• 下一步按钮 (NextButton)
  • 使用 expo-linear-gradient 实现渐变背景。
  • 绘制 SVG 箭头 (使用 react-native-svg 或直接嵌入 SVG xml string 如果不引入新库，首选 react-native-svg 如果项目已有，否则用简单 View/Image 替代或引入库)。
  • 注：检查 package.json 发现未安装 react-native-svg，将使用 Image 或 Text Icon 替代，或者建议安装。鉴于需求“你自己生成 SVG”，推荐安装 react-native-svg。
• 称呼页 (NameInputStep)
  • 居中白色圆角容器。
  • TextInput 样式定制：隐藏默认下划线，自定义光标颜色 (selectionColor)，字体样式。
• 意图选择页 (IntentSelectionStep)
  • 2x2 Grid 布局。
  • SelectionCard 组件：支持选中/未选中状态切换 (边框/背景变化)。
  • 实现多选逻辑。

3. 页面整合与逻辑 (Integration)

• 重构 app/(onboarding)/onboarding.tsx
  • 引入状态管理：currentStep (0: Name, 1: Intent)。
  • 状态收集：name (string), selectedIntents (string[])。
  • 步骤切换逻辑：
    • Step 1 -> Next -> Step 2。
    • Step 2 -> Next -> Finish (持久化 & 跳转)。
• 持久化逻辑更新
  • 确保 appStorage.ts 支持存储新的字段（如果需要）。
  • 完成时写入 isOnboardingCompleted。

4. 依赖检查

• 需确认是否允许安装 react-native-svg 用于渲染高质量图标。若不允许，将导出为 PNG 使用。