wangdl/ios-projects
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ios-projects/AIStudyApp/docs/pages.md
WangDL 7066200b7b feat: MVVM 架构、全套 UI 页面、浅深色主题、本地持久化、等待名单、AI 动效 
- 架构层：ViewModel/ObservableObject、Service/Repository、网络层 APIClient/APIEndpoint/APIError
- 设计系统：Color(light:dark:) 自适应 28 色 Token、ColorSchemeManager 深浅色切换
- 全页面：AI 对话/反馈/回忆/薄弱点、知识库 CRUD、学习工作台、复习计划、学习分析、个人中心/设置
- 登录与引导：Sign in with Apple、AppSession 状态管理、引导流程、演示模式
- 本地持久化：FileCache + PersistenceController（学习任务/复习任务/学习记录）
- 本地化：zh-Hans Localizable.strings ~120 条、ZXStrings 程序化引用、LanguageManager
- 组件库：ZXTabBar/ZXBackHeader/ZXSTaskRow/ZXChartView/ZXTypingIndicator 等 22 个共享组件
- 等待名单：WaitlistView 邮箱收集表单
- 动效：ZXTypingIndicator AI 打字动画、ZXShimmerModifier 骨架屏
- 测试：StudyHomeViewModel/AIChatViewModel/ReviewPlanViewModel/FileCache 共 28 条
- Dynamic Type 支持 + 范围限制

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-10 22:22:50 +08:00

10 KiB
Raw Blame History

知习 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 支付
  • 推送通知
  • 崩溃监控/数据埋点