45 lines
2.2 KiB
Markdown
45 lines
2.2 KiB
Markdown
# 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 使用。
|