新增文档说明

spec_kit/Onboarding_UI_Opt/overflow.md

@@ -0,0 +1,28 @@
+# Onboarding UI Optimization (补充说明)
+
+## Colors
+```typescript
+export const OnboardingColors = {
+  background: '#FFF4EA',
+  textPrimary: '#4A3B32',
+  textSecondary: '#8C8C8C', // 占位符颜色
+  buttonStart: '#F69F7B',
+  buttonEnd: '#F99CC0',
+  cardBackground: '#FFFFFF',
+  cursor: '#F99CC0', // 假设光标颜色与按钮结束色一致
+};
+```
+
+## SVG Assets (Next Arrow)
+```xml
+<!-- 简单的右箭头 SVG 路径参考 -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14M12 5l7 7-7 7"/>
+</svg>
+```
+
+## Intent Icons (Emojis as placeholders)
+- 爱情: ❤️
+- 生活: ⛅
+- 旅游: 🌴
+- 职场: 💼

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

spec_kit/Onboarding_UI_Opt/spec.md

@@ -0,0 +1,68 @@
+# Onboarding UI Optimization (高层规范)
+
+## 1. 背景与目标
+
+本需求旨在根据最新的设计稿（Visual References），对现有的 Onboarding 流程界面进行视觉升级与体验优化。目标是打造一个温暖、极简且高质感的用户引导流程。
+
+### 核心目标
+- **视觉升级**：实现设计稿中的配色、排版与组件样式（暖色调、衬线字体风格）。
+- **组件复用**：提取通用的布局容器、按钮与输入组件。
+- **交互流畅**：确保输入、选择与页面切换的流畅体验。
+
+## 2. 视觉设计规范 (Visual Specifications)
+
+基于提供的设计稿与确认信息，定义以下视觉基调：
+
+### 2.1 整体风格
+- **背景色**：`#FFF4EA` (Warm Beige)。
+- **字体**：
+  - 使用系统默认衬线字体 (System Serif) 作为主要字体。
+  - 预留字体配置接口，方便后续替换自定义字体文件。
+  - 颜色主要为深棕色 (例如 `#4A3B32`)。
+- **按钮**：
+  - **下一步按钮**：
+    - 底部居中，圆形。
+    - **背景渐变**：`#F69F7B` (起) → `#F99CC0` (止)。
+    - **图标**：白色箭头 SVG (需生成)。
+  - **Skip 按钮**：右上角，纯文字 "Skip ->"，衬线体。
+
+### 2.2 页面布局
+- **Header**：包含状态栏占位与 "Skip" 按钮。
+- **Body**：垂直居中分布主要内容（问题 + 交互区域）。
+- **Footer**：底部居中放置圆形下一步按钮。
+
+## 3. 页面详细需求
+
+### 3.1 称呼页 (Name Input)
+- **标题**：“我可以怎么称呼你？” (Serif)
+- **交互区域**：
+  - 白色圆角矩形容器。
+  - 输入框居中，占位符或默认值显示 "Hao"。
+  - 光标样式需定制（粉色竖线）。
+- **逻辑**：
+  - 输入非空时，键盘回车或点击底部按钮进入下一页。
+  - 支持跳过。
+
+### 3.2 意图选择页 (Intent Selection)
+- **标题**：“你希望得到什么帮助？” (Serif)
+- **交互区域**：
+  - 2x2 网格布局。
+  - **选项卡片**：
+    - 白色圆角矩形背景。
+    - 内容：左侧 Icon (占位) + 右侧/居中 文字。
+    - 示例选项：❤️ 爱情, ⛅ 生活, 🌴 旅游, 💼 职场
+  - **选中状态**：需补充选中态设计（如边框高亮或背景微变）。
+- **逻辑**：
+  - **多选**。
+  - 选择后点击底部按钮进入下一页。
+
+## 4. 技术实现建议
+
+- **布局容器**：创建一个通用的 `OnboardingLayout` 组件，处理背景、SafeArea、Skip 按钮与底部按钮。
+- **字体**：封装 `SerifText` 组件，目前映射到系统 Serif，后续可一键替换。
+- **图标**：使用 `expo-vector-icons` 或简单 View 占位，箭头图标使用内联 SVG。
+- **渐变**：使用 `expo-linear-gradient` 实现按钮背景。
+
+## 5. 待确认事项 (Open Questions)
+
+- 已确认：字体使用默认，图标暂用占位，意图页为多选，背景色与渐变色已定。

spec_kit/Onboarding_UI_Opt/tasks.md

@@ -0,0 +1,17 @@
+# Onboarding UI Optimization (任务清单)
+
+## Setup & Styles
+- [ ] 安装 `react-native-svg` (如果尚未安装，需确认) <!-- id: 0 -->
+- [ ] 创建 `client/constants/OnboardingTheme.ts` 定义色值 <!-- id: 1 -->
+- [ ] 创建 `client/components/onboarding/SerifText.tsx` <!-- id: 2 -->
+- [ ] 创建 `client/components/onboarding/OnboardingLayout.tsx` (含 Skip 按钮) <!-- id: 3 -->
+
+## Components
+- [ ] 创建 `client/components/onboarding/NextButton.tsx` (渐变 + 箭头) <!-- id: 4 -->
+- [ ] 创建 `client/components/onboarding/NameInputStep.tsx` <!-- id: 5 -->
+- [ ] 创建 `client/components/onboarding/IntentSelectionStep.tsx` (含 Grid & Card) <!-- id: 6 -->
+
+## Integration
+- [ ] 修改 `client/app/(onboarding)/onboarding.tsx` 实现多步逻辑 <!-- id: 7 -->
+- [ ] 调试并验证 iOS 模拟器显示效果 <!-- id: 8 -->
+- [ ] 验证持久化存储逻辑 <!-- id: 9 -->