新增文档说明

spec_kit/Onboarding_UI_Opt/plan.md

@@ -0,0 +1,44 @@
+# 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 使用。