一、 团队介绍
我既是一名高校授课老师，也是一名初中生的母亲。双重身份，让我亲眼见证了手机对青少年学习的双重消耗，也是这份真实的焦虑，催生了 FocusFlow 这款专注学习管理 APP。于是我萌生了做 FocusFlow 的想法——打造一款兼顾AI 智能学习规划与手机强制管控的工具，让每一个青少年都能拥有清晰的学习节奏，告别漫无目的的拖延，放下无效内耗，让每一分钟都有明确方向。
进入复赛后，和我的两个学生进行组队，基于我的初赛demo，她们两个使用trae work快速实现了APP开发，效果良好，在今后的教学中，使用trae 我们也能快速实现项目，创新项目，拿到结果。
二、怎么用 TRAE 把 Demo 做出来的：
带学生做项目时，最费的是UI设计以及界面搭建。使用TRAE后，不用写代码，不用懂开发，脑子里的想法分段讲给 AI 就行，整体功能、页面、交互细节直白描述，Auto 自动匹配最优模型干活。最惊艳的一步：一段需求直接生成整套项目，实时预览即用，不用折腾环境依赖，原来做 Demo 这么简单！之前最头疼报错、接口联调这些技术坎，现在复制报错发给 TRAE，自动修复代码，零基础也能独立完成可运行演示项目，创意落地再也不用求人！
三、产品简介（复赛版）
1.是什么？
FocusFlow 是一款以 AI 驱动学习规划为核心、以手机禁用为保障的智能学习时间管理 APP。帮助用户告别拖延，找回专注力，让学习真正高效。
2.面向谁？
核心用户： 学生群体（初中、高中、大学）及终身学习者。
3.典型使用场景：
学生课后写作业时，需要规划各科时间但又控制不住刷手机
考前冲刺阶段，需要科学分配各科复习时间并保持专注
暑假/寒假等长假期间，需要自律完成学习计划而非被手机吞噬
完整功能清单与用户使用路径
4. 用户使用路径：
打开APP → 首页查看今日计划 → AI规划页输入任务和时间 → 生成学习计划 → 进入专注模式（手机禁用）→ 完成后查看数据洞察 → 可选加入自习室共同专注 → 知识问答巩固学习
5.页面核心内容、交互特点
- 产品截图：
四、相比初赛 Demo 的升级
功能完善： 初赛 Demo 仅跑通核心链路，复赛版本补齐了全部功能，完善了每个页面
体验打磨： 优化了AI交互，修复了界面显示数据问题
五、产品演示视频
六、产品创作历程
1.灵感来源
为了规划学习时间，高效率学习；控制不住手机的使用时间。进入AI时代，我看到了用AI帮助学生自动规划学习时间的可能性。
2.从想法到初赛 Demo
作为一名教育工作者和母亲，我亲眼见证了手机对学生专注力的侵蚀。市面上的工具要么只管锁手机不管规划，要么只管规划不管锁手机，两者割裂。于是我萌生了将 AI 智能规划与手机强制管控结合的想法。
3.初赛阶段，我使用 TRAE 快速搭建了 FocusFlow 的核心 Demo，跑通了"AI规划 → 专注模式 → 数据反馈"这条核心链路，验证了创意的可行性。初赛 Demo 让我看到了这个方向的价值，也收到了一些社区反馈。
4.从初赛 Demo 到复赛完整作品
一、遇到的关键问题与解决思路：
（一）、大模型输出不可控——计划解析报错
问题：大模型经常把 JSON 套进 ``json 代码块、偶尔在末尾加解释文字、或者某个字段漏写 minutes，直接JSON.parse` 一定崩。
解决思路：三层容错：
-
先正则提取
json ...里的内容； -
兜底截取第一个
{到最后一个}之间的区间，避免解释文字污染； -
解析失败再发一次请求，带强提示"只输出纯 JSON"；
-
二次失败自动 fallback 本地正则规则引擎（学科字典模板），保证 App 完全离线也能生成计划。
（二）、手机禁用无系统权限
问题：纯 uni-app 前端只能在当前页倒计时，用户一键 Home 就能切到抖音，形同虚设。
解决思路（分级方案）：
-
Android（强管控）：写 Android 原生插件（
.aar），基于AccessibilityService监听TYPE_WINDOW_STATE_CHANGED，命中黑名单包名立即startActivity拉回 FocusFlow，弹原生 Toast 警告。引导用户开"无障碍+自启动"双权限。 -
iOS（降级）：无公开 API，做「连按 3 次电源键开引导式访问」的引导流程，让系统本身锁定 App。
-
H5（最弱）：
visibilitychange事件检测切走次数，打标「分心」并在数据洞察里扣分、弹警告。
（三）、数据同步冲突+离线可用性矛盾
问题：如果先等服务端再渲染，弱网/断网时 App 卡死；如果纯本地，换手机数据全丢。
解决思路（Local-First + 增量脏标记）：
-
任何写操作先写本地
uni.setStorageSync→notify()推 UI → 立即响应用户（100ms 内）； -
同时把变更写入
dirty_flags（哪个实体？时间戳？）和upload_queue[]（待上传队列）； -
每 30s 心跳 +
onShow+ 网络恢复时 POST/api/sync，把队列整包发给 Node.js； -
服务端
INSERT ... ON DUPLICATE KEY UPDATE+updated_at比较实现 Last-Write-Wins 幂等合并； -
返回比客户端
last_sync_ts更新的数据覆盖前端。 -
专注记录用只追加写，天然不冲突。
（四）、专注计时精度+页面且后台失活
问题：setInterval 在页面切后台、手机锁屏后会被系统暂停/降频，导致计时不准。
解决思路：
1.不用累加计数，改用"绝对时间戳"：startAt = Date.now()，每秒算 (now - startAt) / 1000 得已过秒数。即使中间 5 秒没触发，下次触发时一次性跳回真实值。
2.页面 onShow 强制刷新一次，对齐真实时长。
3.App 端用原生插件 BackgroundTimer（备选）做后台保活。
二、重要的设计与技术决策：
-
uni-app 跨端：一套代码出 H5/App/小程序，匹配三件套约束，原生插件可集成手机禁用。
-
System Prompt 锁 JSON：大模型做填空题，字段错填率降 80%，前端直接 parse。
-
Local-First 架构：先写本地立即响应，再异步增量同步，断网不卡。
-
手机禁用分级适配：Android 原生强拦截，iOS/H5 降级，不做虚假承诺。
-
AI 三层容错 + 本地兜底：正则提代码块 →
{..}截取 → fallback 本地规则，离线也能用。 -
绝对时间戳计时：用
Date.now() - startAt避免切后台失准。 -
Node + MySQL：匹配技术栈，不用 BaaS。
三、功能迭代过程：
阶段一：MVP最小闭环
目标：核心页面 + 可跑通 AI 规划 → 专注 → 记录 → 洞察。
| 里程碑 | 完成内容 |
|---|---|
| M1 页面骨架 | 5 个 Tab 页 + TabBar 导航 + 整体配色主题 |
| M2 首页仪表盘 | 今日任务列表、连续打卡、快速入口 |
| M3 专注计时 | SVG 进度环、倒计时、提前结束/放弃三态、记录入库 |
| M4 本地 AI 规划 | 正则匹配学科字典、模板拼装计划 |
| M5 数据洞察 | 学科柱状图、7 天趋势折线、弱 AI 文字建议 |
| M6 问答页 | 精选题库、薄弱点快速练习 |
| M7 真实 AI 接入 | 硬编码智谱 Key、H5 跨域、JSON 容错、对话左右气泡 |
阶段二：核心能力强化
目标：从"能用"升级到"真的能管住手机"。
-
F1 手机禁用原生插件：Android
.aarAccessibilityService 拦截黑名单包名、权限引导流程、黑白名单自定义。 -
F2 数据同步（Node 后端）：Express + MySQL 四张核心表落地、
/api/sync增量协议、JWT 登录、冲突处理。 -
F3 规划可拖拽：
movable-area拖拽交换顺序、即时重排 startAt、修改单模块时长联动。 -
F4 流式输出：
stream: trueSSE 让 AI 计划一块一块出现，减少 5-10s 空白等待焦虑。
阶段三：社区化+家庭化（长线）
-
自习室房间：多人在线状态、房间内专注 PK、好友加入。
-
家长端：绑定孩子账号，远程看每日学习时长、专注日志、弱科提醒。
-
题库生态：用户上传题库、共享、订阅。
-
AI 多模态：拍错题上传 → AI 识别题目 → 生成错题练习计划。
四、用户反馈与优化方向：
七、TRAE 实践过程
- 开发流程说明：使用 TRAE 开发 FocusFlow 的过程如下：
需求拆解与描述： 将产品整体功能、页面布局、交互细节分段讲给 AI，让 TRAE 自动理解并生 成；
页面生成与调试： 一段需求直接生成整套项目，实时预览即用，遇到问题复制报错发给 TRAE 自动修复；
功能迭代与优化： 逐步完善各页面功能，通过对话式开发不断打磨细节。
2.开发关键步骤截图
3.关键任务对话 Session ID
Session ID 是 TRAE 每段对话任务的唯一标识，用来证明作品确实由 TRAE 开发完成。双击 TRAE 的对话复制出来即可。
1475983611538048:b73656b621cf5b7db9a9d81f1c3e5aeb_6a33598062f5dbeee248d9e9.6a33598062f5dbeee248d9e9ec.6a33598062f5dbeee248d9ea:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/18 10:35:44)
1294584949513572:54b7f64f3ac4f5b1c570d3511b1ce7c0_6a6ef9c7ba91065867ea7a25.6a6efe6aba91065867ea7b0d.6a6efe6aba91065867ea7b0b:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/2 16:23:06)
1699205231942743:18dc9d452b4228b4e95ac52455654263_6a69d4dce1707e06e539d017.6a69f146d38d52a135f3bbef.6a69f1459cf7c0b9411e8a9d:Trae CN.T(2026/7/29 20:25:42)
八、技术方案分享
技术栈： 前端：uniAPP+后端Java框架+数据库Mysql
关键实现思路：
一、AI规划引擎的实现方式
AI 规划的核心思路是 “大模型生成结构化计划 + 后端规则校验 + 前端时间线渲染”，分三层处理：
第一层：用户输入预处理
用户在前端输入自然语言，比如"明天考高数，复习第三章"。后端收到请求后，先做一轮本地预处理：用关键词匹配识别学科（高数、英语、物理等）和紧急度（明天/下周/本周），将识别结果作为上下文参数一起传给大模型，提高生成准确率。
第二层：大模型结构化生成
后端组装 system prompt，要求大模型严格输出 JSON 格式的学习计划，包含字段：学科、紧急度、模块列表（每个模块含标题、预计时长、所属学科）。通过设置 temperature 为 0.6 控制生成的稳定性。后端拿到 JSON 后做校验：模块数量限制在 3-6 个、单模块时长限制在 15-40 分钟、不合法的字段用默认值兜底。
第三层：时间线组装与下发
后端校验通过后，从当天 08:00 开始，按每个模块的时长逐个累加，计算每个模块的开始时间，并在模块之间自动插入 5-20 分钟的休息时段。最终组装成完整的时间线数据，存入 MySQL 并同步返回前端。前端拿到后直接渲染为可点击的任务卡片列表，用户点击"采纳"即可写入今日计划。
容错机制：如果大模型调用超时或返回格式异常，后端自动降级为本地规则引擎——根据学科关键词从预设模板库中匹配对应的拆解方案，保证核心功能不中断。
二、手机禁用机制的技术方案
专注模式下的"手机禁用"分 App 内限制 和 系统级限制 两个层级：
1、App 内限制
通过前端状态控制实现：进入专注模式后，拦截返回按钮和页面跳转，用户必须通过 SOS 确认弹窗才能退出。三种专注模式对应不同限制等级——基础模式仅做 UI 拦截，深度模式增加提示引导，极客模式强制必须完成或输入 SOS 才能退出。计时器在后台通过 setInterval 运行，onUnload 时清理定时器防止内存泄漏。
2、系统级限制
利用 Android 的 Device Policy Manager（设备策略管理器） 和 Accessibility Service（无障碍服务） 实现更深层的限制：
-
通知屏蔽：通过
NotificationListenerService拦截并静音社交、游戏类应用的通知，白名单放行来电和紧急短信 -
应用锁定：利用无障碍服务监听前台应用切换，当检测到用户打开了黑名单中的娱乐应用时，自动将其切回专注页面
-
专注锁屏：深度模式下可注册一个透明 Activity 覆盖在桌面上，配合
SYSTEM_ALERT_WINDOW权限，实现"退出 App 也无法操作其他应用"的效果
iOS 端因系统限制无法做到应用级锁定，采用 Screen Time API（屏幕使用时间 API） 配合 Family Controls 框架，引导用户设置专注期间的 App 限额，配合 App 内引导实现软性限制。
三、数据存储与同步方案
采用 “本地缓存 + 后端持久化 + 增量同步” 的三层方案：
1、本地缓存层
前端使用 uni.setStorageSync 缓存高频读写数据（任务列表、时间币、今日学习时长），App 启动时优先读本地缓存做首屏渲染，保证离线状态下也能正常使用。每次写操作同时更新本地缓存，标记数据为"未同步"状态。
2、后端持久化层
后端使用 Spring Boot + MySQL，核心表结构包括：
-
user 表：用户账号信息（手机号、昵称、注册时间）
-
study_task 表：学习任务记录（任务ID、用户ID、标题、学科、时长、状态、计划开始时间）
-
focus_record 表：专注记录（用户ID、任务ID、实际专注时长、获得时间币、完成时间）
-
coin_account 表：时间币账户（用户ID、余额、累计获取、累计消耗）
-
weak_point 表：薄弱知识点（用户ID、知识点名称、学科、掌握度、复习次数）
-
daily_stat 表：每日学习统计（用户ID、日期、专注分钟数、任务完成数）
3、增量同步机制
采用时间戳版本号方案：每次数据变更时，本地记录最后同步时间戳。App 网络恢复后，前端将本地"未同步"的数据批量上传，后端根据 updated_at 字段做增量合并。同步接口设计为幂等——同一数据重复提交不会产生副作用。冲突场景（多设备同时编辑）以后端时间为准，返回最新数据覆盖本地。
关键同步时机：App 启动时全量拉取一次、每次专注完成后立即推送、用户手动下拉刷新时拉取增量。登录态通过 JWT Token 维持，Token 过期后自动刷新，保证长时间使用的体验。
九、社会价值分析
FocusFlow 不仅仅是一款计时器或锁机工具，它承载着更深远的社会价值：
教育公平： AI 智能规划让每个学生都能获得个性化的学习方案，不因家庭经济条件差异而影响学习规划质量
青少年心理健康： 通过科学的时间管理减少亲子因手机产生的冲突，改善家庭关系
数字健康： 帮助青少年建立健康的数字设备使用习惯，从被动管控走向主动自律
可复制推广： 方案可推广至学校、培训机构等教育场景，覆盖更广泛的学生群体
十、产品迭代规划
1.短期规划（1-3个月）
产品上线与打磨： 完成APP在Android应用市场的上架发布，同步推出微信小程序版本，降低用户使用门槛
AI规划引擎升级： 引入学科模板（数学、英语、物理等），AI可根据学科特点自动拆分学习时段，支持"刷题-背诵-预习-复习"等多种学习模式的智能排布
用户账号体系： 建立完整的注册登录、数据云端同步机制，确保学习记录跨设备不丢失
家长/教师监控端： 开发家长端轻量界面，家长可查看孩子的学习完成情况与专注时长趋势，从"管控"转向"了解与引导"
体验稳定性： 全面修复已知bug，优化专注模式下手机禁用的稳定性，确保核心流程零中断
2.中期规划（3-6个月）
多平台覆盖： 推出iOS版本和Web端，实现全平台覆盖；开发浏览器插件，在PC端也能进行专注管理
社交化学习生态： 升级自习室功能，支持创建班级学习群、发起学习挑战赛、排行榜激励，让学生在同伴氛围中保持动力
教师课堂管理端： 开发教师后台，教师可一键为全班生成学习计划，实时查看课堂专注度热力图，精准定位需要关注的学生
学情数据分析： 基于AI对长期学习数据进行深度分析，自动识别薄弱学科和知识盲区，生成个性化提升建议与调整方案
智能提醒系统： 结合课程表和作业截止日期，AI主动推送学习提醒与计划调整建议，从"用户找计划"变为"计划找用户"
3.长期愿景（6-12个月+）
教育生态闭环： 打通学生、家长、教师、学校四方数据链路，构建从"课堂学习→课后规划→专注执行→数据反馈→教学优化"的完整闭环，让AI真正赋能教育全流程
AI学习陪伴升级： 引入多模态AI能力，支持语音对话式学习陪伴、拍照识题与解题引导、知识点图谱动态生成，从时间管理工具进化为AI学习助手
场景拓展： 将产品能力延伸至职场自律、考研/考公备考、终身学习等更广泛场景，打造覆盖全年龄段的专注力管理平台
教育公益计划： 面向教育资源欠发达地区学校免费提供产品，用AI弥合学习规划资源的不平等差距，让每个学生都能拥有科学的学习节奏
商业化探索： 基础功能免费，AI高级规划、深度学情分析、教师课堂管理端等增值功能采用订阅制；与教育机构合作提供定制化解决方案