startup-plan/技术设计/ios-projects/已完成/[已完成]-页面规划.md

# 知习 ZhiXi — 页面清单与功能说明

> 更新时间：2026-05-10

## 项目概述

**知习 (ZhiXi)** 是一个 AI-first 系统化学习 iOS App，使用 SwiftUI 构建，深色主题。当前已完成 22 个页面的 UI 层实现，覆盖从引导流程到主界面 5 个 Tab 的完整交互链路。

---

## 一、引导流程（5 页）

所有引导页面定义在 `AIStudyAppApp.swift` 的 `OnboardingFlowView` 中，通过 `@AppStorage("hasCompletedOnboarding")` 控制显示。

### 1. SplashPage — 启动页

- **路由**：`OnboardingFlowView` step 0
- **功能**：展示品牌 Logo、App 名称"知习"、副标题"AI-first 系统化学习"，底部显示加载进度条，2 秒后自动跳转 Welcome
- **视觉**：深色渐变背景 + 紫色/橙色光晕 + 品牌渐变图标

### 2. WelcomePage — 欢迎页

- **路由**：`OnboardingFlowView` step 1
- **功能**：展示产品三大核心功能（主动回忆、费曼解释、AI 分析）；提供"开始使用"和"已有账号？立即登录"两个入口
- **UI 组件**：`FeatureRow`（emoji + 标题 + 描述卡片）

### 3. LoginPage — 登录页

- **路由**：`OnboardingFlowView` step 2
- **功能**：支持手机号（+86）和邮箱两种登录方式切换；密码输入可切换明文/密文；底部提供微信登录和 Apple 登录入口；包含"忘记密码"链接
- **UI 组件**：`ZXInputField`、`SocialLoginBtn`

### 4. OnboardingPage — 功能引导页

- **路由**：`OnboardingFlowView` step 3
- **功能**：4 步滑动引导（输入知识 → 主动输出 → AI 分析 → 掌握知识），底部进度指示器，支持跳过
- **UI 组件**：步进圆点指示器

### 5. GoalSetupPage — 学习目标设置页

- **路由**：`OnboardingFlowView` step 4
- **功能**：设置学习目标（备考考试/职业技能/通识学习/自定义）、选择学习方法（间隔回忆/费曼技巧/AI 分析）、选择每日学习时间（15 分钟 ~ 不限制）
- **UI 组件**：目标选项卡片（emoji + 标题 + 描述 + 单选圆点）、方法标签组、时间选择组

---

## 二、主界面 — 5 Tab 结构

`ContentView.swift` 实现底部 5 个 Tab 的导航：AI、知识库、学习、分析、我的。

### Tab 栏组件

- **ZXTabBar**：自定义底部 TabBar，包含选中态光晕动画、品牌紫色高亮
- **ZXAIInputBar**：复用的 AI 输入栏（sparkles 图标 + 输入框 + 麦克风 + 发送按钮）
- **ZXIconBtn**：通用图标按钮（支持 branded 紫色渐变样式）
- **ZXScoreBox**：评分展示组件（分数 + 背景色 + 前景色，根据分数区间变色）

---

### Tab 1：AI 助手 — AIHomeView

- **文件**：`Features/AI/AIHomeView.swift`
- **功能**：
  - 今日思考题卡片（展示 AI 生成的思考题，点击进入回答）
  - 快捷操作区（生成回忆测试、分析薄弱点、费曼解释练习、今日复习计划）
  - 最近 AI 互动列表（费曼复习、薄弱点分析、回忆测试记录，含评分）
  - AI 提问建议区（预设问题模板，点击可发送）
  - 底部 AI 输入栏
- **子页面**：
  - `DailyThinkingPage` — 今日思考详情（见下方）
  - `RecallTestPage` — 回忆测试
  - `WeakPointsPage` — 薄弱点分析
  - `AIChatPage` — AI 对话
- **UI 组件**：`ZXQuickAction`（emoji + 标签）、`ZXAIInteractionRow`（标签 + 标题 + 时间 + 评分）

#### AI 子页面（定义在 `Features/AI/DailyThinkingPage.swift`）

| 页面 | 功能 |
|------|------|
| **DailyThinkingPage** | 展示思考题 + 文本输入框，用户写下回答后提交给 AI 评估 |
| **AIChatPage** | AI 对话页面，围绕当前知识库进行学习问答 |
| **RecallTestPage** | 回忆测试：展示题目，用户回忆并写下理解，提交验证 |
| **WeakPointsPage** | 薄弱知识点列表，每个知识点显示掌握分数、所属知识库、优先级 |
| **AIFeedbackPage** | AI 反馈页，展示 AI 对用户回答的评分、优缺点分析、改进建议 |

**共享 UI 组件**：`ZXBackHeader` — 带返回按钮、标题、副标题、右侧操作区的通用导航头

---

### Tab 2：知识库 — LibraryHomeView

- **文件**：`Features/Library/LibraryHomeView.swift`
- **功能**：
  - 知识库列表（机器学习、高等数学、英语词汇、产品设计等），每个卡片展示 emoji、名称、描述、知识点数量、掌握度百分比、标签、最近学习时间
  - 顶部搜索栏
  - 右上角搜索和创建按钮
  - 创建新知识库入口（虚线边框卡片）
- **UI 组件**：`ZLibraryCard`（emoji + 名称 + 描述 + 进度条 + 标签 + 统计）

#### 知识库子页面（定义在 `Features/Library/LibrarySubpages.swift`）

| 页面 | 功能 |
|------|------|
| **CreateLibraryPage** | 创建新知识库：填写名称、描述 |
| **LibraryDetailPage** | 知识库详情：展示该知识库下所有知识点列表，每个知识点显示标题、描述、掌握状态（已掌握/学习中/待复习） |
| **AddKnowledgePage** | 添加知识点：填写标题、内容 |
| **KnowledgeDetailPage** | 知识点详情：展示完整内容、标签、复习/费曼解释按钮 |
| **ImportPage** | 导入资料 |
| **EditKnowledgePage** | 编辑知识点 |

**知识库卡片组件**：`ZXCardRow` — emoji + 标题 + 描述 + 状态标签

---

### Tab 3：学习工作台 — StudyHomeView

- **文件**：`Features/Study/StudyHomeView.swift`
- **功能**：
  - 日期和问候语（"周四，1月16日"）
  - 连续学习天数徽章（🔥）
  - 今日进度卡片：完成任务数/总任务数、进度百分比环形图、进度条、已学时间/剩余时间/掌握积分
  - 今日任务列表（机器学习回忆测试、高数间隔复习、英语词汇复习等），每个任务可勾选完成，显示任务类型标签和预计时长
  - 本周学习活跃柱状图（周一~周日，高亮当天）
  - 总计学习时长和日均统计
- **数据模型**：`ZXSTask`（标题、类型、颜色、时长、完成状态）
- **UI 组件**：`ZXSTaskRow`（勾选框 + 任务信息 + 类型标签 + 时长 + 播放按钮）

---

### Tab 4：学习分析 — AnalysisHomeView

- **文件**：`Features/Analysis/AnalysisHomeView.swift`
- **功能**：
  - 顶部统计卡片行：综合掌握度（65%，+8%）、本周积分（1,240）、待巩固知识点数（23）、连续学习天数（14）
  - 掌握度趋势折线图（近 7 天数据）
  - 薄弱知识点列表（可导航至 WeakPointsPage）
  - AI 学习建议卡片
  - 知识库掌握分布（各知识库掌握度进度条）
- **UI 组件**：`ZXStatBadge`（图标 + 标签 + 数值 + 变化趋势）、`ZXChartView`、`ZXWeakRow`

---

### Tab 5：我的 — ProfileView

- **文件**：`Features/Profile/ProfileView.swift`
- **功能**：
  - 顶部导航栏（标题"我的" + 通知铃铛 + 设置齿轮）
  - 个人信息卡片：头像（emoji）、昵称"学习者"、邮箱、连续天数/知识点数/积分统计
  - 设置菜单：学习目标设置、复习提醒、学习报告、学习方法偏好、数据同步与备份
  - 成就展示区（连续 14 天、费曼达人、知识收藏家、速学者）
- **UI 组件**：`ZXProfileStat`、`ZXProfileMenuRow`（emoji + 标题 + 描述 + 箭头）、`ZXAchievementBadge`

---

## 三、设计系统

文件：`Core/DesignSystem/DesignTokens.swift`

### 颜色系统
| 类别 | Token | 值 |
|------|-------|-----|
| 主背景 | `Color.zxBg0` | `#0F0F1A` |
| 品牌紫 | `Color.zxPurple` | `#7C6EFA` |
| 品牌橙 | `Color.zxOrange` | `#F97316` |
| 文字主色 | `Color.zxF0` | `#F0F0FF` |

### 渐变系统 (`ZXGradient`)
- `page` — 页面背景渐变
- `brand` — 品牌紫橙渐变
- `brandPurple` — 紫色渐变
- `thinkingCard` — 思考卡片渐变
- `progressCard` — 进度卡片渐变
- `feedbackScore` — 反馈评分渐变
- `profileCard` — 个人信息卡片渐变
- `ctaButton` / `ctaPurple` — CTA 按钮渐变

### 间距系统 (`ZXSpacing`)
- `pageHPadding`: 20
- `statusBarH`: 44
- `tabBarH`: 83

### 尺寸系统 (`ZXSize`)
- 图标按钮: 36, 头像: 36/64/80
- 按钮高度: 42/52/56, 快捷操作: 72

### 排版系统 (`ZXFont`)
- `titleLarge`: 22pt heavy, -0.5 tracking
- `titleMedium`: 20pt heavy, -0.4 tracking
- `sectionTitle`: 15pt bold
- `body`: 13pt semibold
- `bodySmall`: 12pt medium
- `caption`: 10pt bold

---

## 四、页面状态总览

| # | 页面 | Tab | 文件 | 导航方式 | 状态 |
|---|------|-----|------|----------|------|
| 1 | Splash 启动页 | — | AIStudyAppApp.swift | 自动跳转 | ✅ |
| 2 | Welcome 欢迎页 | — | AIStudyAppApp.swift | 按钮跳转 | ✅ |
| 3 | Login 登录页 | — | AIStudyAppApp.swift | 按钮跳转 | ✅ |
| 4 | Onboarding 引导 | — | AIStudyAppApp.swift | 步进/跳过 | ✅ |
| 5 | GoalSetup 目标 | — | AIStudyAppApp.swift | 完成进入主界面 | ✅ |
| 6 | AIHome AI 首页 | AI | AIHomeView.swift | Tab 1 | ✅ |
| 7 | LibraryHome 知识库 | 知识库 | LibraryHomeView.swift | Tab 2 | ✅ |
| 8 | StudyHome 学习 | 学习 | StudyHomeView.swift | Tab 3 | ✅ |
| 9 | AnalysisHome 分析 | 分析 | AnalysisHomeView.swift | Tab 4 | ✅ |
| 10 | Profile 我的 | 我的 | ProfileView.swift | Tab 5 | ✅ |
| 11 | AIChat AI 对话 | AI | DailyThinkingPage.swift | NavigationLink | ✅ |
| 12 | DailyThinking 今日思考 | AI | DailyThinkingPage.swift | NavigationLink | ✅ |
| 13 | RecallTest 回忆测试 | AI | DailyThinkingPage.swift | NavigationLink | ✅ |
| 14 | WeakPoints 薄弱点 | AI | DailyThinkingPage.swift | NavigationLink | ✅ |
| 15 | AIFeedback AI 反馈 | AI | DailyThinkingPage.swift | NavigationLink | ✅ |
| 16 | CreateLibrary 创建知识库 | 知识库 | LibrarySubpages.swift | NavigationLink | ✅ |
| 17 | LibraryDetail 知识库详情 | 知识库 | LibrarySubpages.swift | NavigationLink | ✅ |
| 18 | AddKnowledge 添加知识点 | 知识库 | LibrarySubpages.swift | NavigationLink | ✅ |
| 19 | Import 导入资料 | 知识库 | LibrarySubpages.swift | NavigationLink | ✅ |
| 20 | KnowledgeDetail 知识点详情 | 知识库 | LibrarySubpages.swift | NavigationLink | ✅ |
| 21 | EditKnowledge 编辑知识点 | 知识库 | LibrarySubpages.swift | NavigationLink | ✅ |

---

## 五、当前未实现的功能

以下为产品计划中但当前 iOS 项目尚未实现的能力：

- Sign in with Apple（UI 已做，实际认证逻辑未接入）
- 后端 API 对接（当前为纯本地 UI）
- 真实 AI 分析（当前为静态展示）
- 数据持久化（无本地存储/云端同步）
- 多语言本地化架构
- Apple IAP 支付
- 推送通知
- 崩溃监控/数据埋点