🔄 交互流程地图

读书笔记App - 页面跳转与业务流程可视化

📖 核心阅读流程 (Core Reading Loop) 流程图
💡 流程说明
这是用户使用App进行阅读的核心循环流程，从书籍列表开始，到计时阅读，最后记录到统计页面，形成完整的阅读闭环。
graph TD Start([用户进入App]) --> Home[📚 书籍首页] Home -->|点击书籍卡片| BookDetail[📖 书籍详情/操作] Home -->|点击计时按钮| Timer[⏱️ 计时阅读页面] BookDetail -->|开始阅读| Timer Timer -->|暂停| Timer Timer -->|继续阅读| Timer Timer -->|结束阅读| SaveLog[💾 保存记录弹窗] SaveLog -->|校验失败| SaveLog SaveLog -->|保存成功| Statistics[📊 统计页面/日历] Statistics -->|查看详情| DayDetail[📅 单日阅读详情] Statistics -->|查看趋势| Trend[📈 阅读趋势图] Statistics -->|返回| Home DayDetail -->|返回| Statistics Trend -->|返回| Statistics style Home fill:#e3f2fd style Timer fill:#fff3e0 style SaveLog fill:#f3e5f5 style Statistics fill:#e8f5e9
📌 流程总结
关键节点：
• 书籍首页 - 用户浏览和选择书籍
• 计时阅读 - 核心功能，记录阅读时长和进度
• 保存记录 - 数据校验和持久化
• 统计展示 - 数据可视化，激励用户持续阅读
📚 书籍添加与管理流程 时序图
💡 流程说明
用户可以通过扫码或搜索两种方式添加书籍，系统会自动获取书籍信息并预填到编辑页面，用户确认后保存到书架。
sequenceDiagram actor User as 👤 用户 participant Home as 📚 首页 participant AddPage as ➕ 添加页面 participant Scanner as 📷 扫码/搜索 participant EditPage as ✏️ 编辑页面 participant API as 🔌 后端API User->>Home: 点击"+"按钮 Home->>AddPage: 打开添加选项 alt 扫码添加 User->>AddPage: 选择"扫码" AddPage->>Scanner: 启动相机 Scanner->>API: 发送ISBN查询 API-->>Scanner: 返回书籍信息 Scanner-->>EditPage: 识别成功，预填信息 else 手动搜索 User->>AddPage: 输入书名搜索 AddPage->>Scanner: 显示搜索界面 Scanner->>API: 搜索书籍 API-->>Scanner: 返回搜索结果 User->>Scanner: 选择书籍 Scanner-->>EditPage: 预填信息 end User->>EditPage: 确认/修改信息
(分类, 状态, 书架) User->>EditPage: 点击保存 EditPage->>API: 提交书籍数据 API-->>EditPage: 保存成功 EditPage-->>Home: 返回并刷新列表 Home-->>User: 显示新添加的书籍
📌 流程总结
添加方式：
• 扫码添加 - 快速通过ISBN识别书籍
• 搜索添加 - 手动搜索并选择书籍
关键功能：
• 自动获取书籍元数据（书名、作者、封面等）
• 用户可自定义分类、状态、书架等信息
📝 笔记创建与回顾流程 流程图
💡 流程说明
用户可以创建笔记和书摘，支持OCR文字识别功能。通过桌面小组件定期回顾笔记，巩固阅读记忆。
graph LR NoteTab[📝 笔记列表页] -->|点击新建| AddNote[➕ 添加书摘页] AddNote -->|选择书籍| BookSelect[📚 书籍选择器] AddNote -->|OCR识别| OCR[📷 相机/相册] OCR -->|提取文本| AddNote AddNote -->|保存| NoteTab Profile[👤 个人中心] -->|进入设置| ReviewConfig[⚙️ 书摘回顾设置] ReviewConfig -->|配置频率| Widget[📱 桌面小组件] Widget -->|点击笔记| NoteDetail[📄 书摘详情页] NoteDetail -->|编辑| AddNote NoteDetail -->|返回| NoteTab style AddNote fill:#fff3e0 style OCR fill:#e8f5e9 style Widget fill:#f3e5f5 style NoteDetail fill:#e3f2fd
📌 流程总结
笔记功能：
• 手动创建笔记和书摘
• OCR识别 - 拍照自动提取文字
• 关联书籍 - 笔记与书籍绑定
回顾功能：
• 桌面小组件 - 每日推送笔记回顾
• 设置回顾频率和时间
💎 会员与积分系统流程 时序图
💡 流程说明
用户通过阅读、打卡、邀请等行为获得积分，可用于商城兑换商品；购买会员解锁高级功能和权益。
sequenceDiagram actor User as 👤 用户 participant App as 📱 App端 participant API as 🔌 后端API participant Points as 💰 积分系统 participant Mall as 🛒 积分商城 participant VIP as 💎 会员系统 rect rgb(232, 245, 233) Note over User,Points: 积分获取流程 User->>App: 完成阅读任务 App->>API: 提交任务完成记录 API->>Points: 触发积分规则 Points->>API: 计算积分奖励 API-->>App: 返回积分变化 App-->>User: 显示积分获得提示 end rect rgb(227, 242, 253) Note over User,Mall: 积分兑换流程 User->>Mall: 浏览商品 User->>Mall: 选择商品兑换 Mall->>API: 创建兑换订单 API->>Points: 扣除积分 Points-->>API: 扣除成功 API-->>Mall: 订单创建成功 Mall-->>User: 显示兑换成功 end rect rgb(243, 229, 245) Note over User,VIP: 会员购买流程 User->>VIP: 选择会员套餐 User->>VIP: 发起支付 VIP->>API: 创建会员订单 API->>VIP: 调用支付接口 VIP-->>User: 跳转支付页面 User->>VIP: 完成支付 VIP->>API: 支付回调通知 API->>VIP: 开通会员权益 VIP-->>User: 会员开通成功 end
📌 流程总结
积分系统：
• 获取途径：阅读打卡、完成任务、邀请好友等
• 使用途径：商城兑换实物/虚拟商品
会员系统：
• 套餐类型：月度会员、季度会员、年度会员
• 会员权益：高级统计、无限笔记、数据导出等
👥 读书小组社交流程 流程图
💡 流程说明
用户可以创建或加入读书小组，在小组内分享读书心得、参与讨论，与志同道合的书友交流。
graph TD Start([用户进入社交]) --> GroupList[👥 小组列表] GroupList -->|创建小组| CreateGroup[➕ 创建小组页面] GroupList -->|加入小组| JoinGroup[🔍 搜索/浏览小组] GroupList -->|我的小组| MyGroups[📋 我的小组列表] CreateGroup -->|填写信息| GroupDetail[📖 小组详情页] JoinGroup -->|选择小组| GroupDetail MyGroups -->|点击小组| GroupDetail GroupDetail -->|查看成员| MemberList[👤 成员列表] GroupDetail -->|发帖讨论| PostCreate[✏️ 发帖页面] GroupDetail -->|分享笔记| ShareNote[📝 分享笔记] PostCreate -->|发布成功| GroupDetail ShareNote -->|分享成功| GroupDetail style CreateGroup fill:#e8f5e9 style GroupDetail fill:#e3f2fd style PostCreate fill:#fff3e0 style ShareNote fill:#fce4ec
📌 流程总结
小组功能：
• 创建小组 - 设置主题、封面、简介
• 加入小组 - 搜索或浏览感兴趣的小组
• 小组互动 - 发帖讨论、分享笔记、点赞评论
管理功能：
• 角色权限：组长、管理员、成员
• 内容管理：审核帖子、管理成员
← 返回文档总览