# 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 使用。