记单词功能深度优化项目 - 业务需求开发文档（BRD+技术拆分版）

文档版本：V1.0

文档作者：doubao

交付对象：前端开发组、后端开发组、测试组、运维组

文档目的：明确记单词功能优化项目的业务目标、技术需求、各团队开发要求、交付标准及项目管控要点，作为各团队开发、测试、验收的核心依据，确保项目按规划落地，实现"科学记忆、杜绝作弊、沉浸体验、长期留存、科学透明、模块化扩展"的核心目标。

关联文档：《记单词功能深度优化方案（个人词汇认知实验室版·最终落地版）》

一、项目概述

1.1 项目背景

现有记单词功能存在被动翻转作弊、自评偏差、SRS算法简化黑盒化、学习模式单一、交互体验不合理、云端同步成本高、计划系统缺乏用户参与感等核心痛点，违背记忆科学，导致用户学习效果不佳、留存率偏低，无法满足"个人词汇认知实验室"的产品定位。本次项目基于现有代码，借鉴爆款APP核心优势，进行全流程优化，解决核心痛点，提升产品竞争力与用户体验。

1.2 业务目标（可量化）

功能层面：完成核心交互、记忆可视化、三维能力模型、透明化SRS算法等全模块优化，杜绝作弊行为，实现算法透明化与多模式递进训练。
体验层面：用户主动回忆率提升80%以上，交互流畅度提升70%，用户对记忆可视化功能的满意度不低于85%。
技术层面：实现前端模块化架构、后端轻量化部署、云端同步低成本可扩展，支持多模块（考研、四六级等）平滑扩展，系统稳定性达99.9%。
落地层面：按阶段完成开发、测试与上线，确保各模块衔接顺畅，符合产品视觉规范与开发标准。

1.3 项目范围

本次项目覆盖记单词功能全流程优化，核心范围包括：核心交互重构、记忆可视化系统开发、三维记忆模型迭代、SRS算法升级、云端同步与计划系统优化、模块化架构搭建，不涉及产品其他模块（如首页、个人中心）的改动，仅适配相关接口联动。

1.4 核心约束

技术约束：前端基于现有Vue3架构开发，后端优先采用轻量开源技术栈，云端同步采用Supabase+IndexedDB双存储模式，确保低成本可扩展。
视觉约束：所有新增组件、动画、色彩需严格遵循项目紫色系视觉规范，与LandingPage.vue色彩体系、交互风格保持高度统一。
兼容性约束：前端需适配主流浏览器（Chrome、Edge、Safari最新版本）及移动端主流机型，后端需支持多环境部署（开发、测试、生产）。
时间约束：按阶段交付，核心功能（交互重构、防作弊、基础SRS）优先落地，可视化与计划系统后续迭代，整体项目周期控制在45个工作日内。

二、总体技术架构设计

2.1 架构总览

本次项目采用"前后端分离"架构，前端负责交互呈现、可视化展示与本地数据处理，后端负责数据存储、算法逻辑、云端同步与接口提供，测试组负责全流程质量管控，运维组负责部署与监控，各团队协同推进，确保架构轻量化、可扩展、易维护。

2.2 核心技术栈选型（全局统一）

|----------|-------------------------------------------|-----------------------------------------------------------------|
| 技术领域 | 核心技术选型 | 选型依据 |
| 前端框架 | Vue3 + Vite + Pinia | 基于现有项目架构，Vue3组件化特性适配模块化开发，Vite提升构建效率，Pinia实现状态管理，贴合项目轻量化需求。 |
| 前端可视化 | ECharts + Canvas | ECharts适配能力星云图、雷达图等可视化需求，Canvas实现遗忘曲线、记忆轨迹绘制，性能优异且易定制，贴合项目视觉规范。 |
| 后端框架 | Node.js + Express | 轻量高效，适配前端接口需求，开发成本低，易与Supabase联动，支持快速迭代与扩展。 |
| 云端存储 | Supabase + 本地IndexedDB | Supabase开源免费、可平滑升级，适配少量用户初期需求，IndexedDB实现离线可用，双存储确保数据安全与同步流畅。 |
| 算法实现 | JavaScript（前端）+ Node.js（后端） | SM-2算法前端实现实时计算，后端实现数据持久化与同步，确保算法精准度与交互流畅度。 |
| 测试工具 | Jest（单元测试）+ Cypress（端到端测试）+ Postman（接口测试） | 覆盖前端单元测试、端到端交互测试、后端接口测试，确保各模块功能稳定、接口通畅。 |
| 部署环境 | Docker + Nginx | 容器化部署，确保多环境一致性，Nginx实现反向代理，提升系统稳定性与访问速度。 |

三、各团队开发要求（核心重点）

3.1 前端开发组

3.1.1 团队职责

负责前端所有组件开发、交互实现、可视化呈现、本地数据存储、主题切换、快捷键适配，以及与后端接口联动，确保前端功能与优化方案一致，贴合视觉规范，保障交互流畅度与兼容性。

3.1.2 核心开发任务与技术要求

核心交互重构（优先级：最高）
1. 修改Study.vue组件：移除卡片任意点击翻转逻辑，新增【显示答案】【下一个单词】【自主选择模式】按钮，样式贴合项目紫色系规范，添加缩放、颜色过渡等交互动画。
2. 实现心流四阶段交互逻辑：聚焦（5秒）、沉淀（3秒）、映照（动态时长）、校准（用户控制），严格按方案实现倒计时、卡片翻转、打字机效果、呼吸动画，确保交互流畅，无卡顿。
3. 新增科学提示组件：支持开关控制，按心流阶段显示对应认知原理解释，组件挂载于顶部，样式为半透明背景+模糊效果，与项目按钮、提示框风格统一。
4. 添加防作弊逻辑：实现feedbackLock状态控制（卡片翻转后延迟1.5秒解锁反馈按钮）、反馈按钮随机排序、快捷键适配（回车/空格/方向键↓触发下一词）。
5. 新增认知负荷检测逻辑：实时计算用户反应速度，负荷升高时弹出休息提示，提示框采用项目紫色渐变，添加滑入动画。
6. 实现主题切换功能：支持深夜模式、晨光模式、纸质模式，色彩严格贴合项目规范，切换时添加平滑过渡动画。
WordCard.vue组件优化（优先级：最高）
1. 禁用卡片点击事件，仅通过父组件（Study.vue）传递指令触发翻转，优化卡片圆角、阴影效果，添加0.3秒翻转动画。
2. 新增词根提示区域、记忆轨迹时间轴，时间轴样式贴合项目浅灰卡片背景，支持展开/收起，添加平滑下拉动画。
3. 实现resetFlip方法，用户点击下一词后，卡片自动重置为正面，添加0.2秒翻转+淡入动画。
4. 预留训练组件挂载入口，确保后续可动态加载选择、听写、辨析等训练组件，接口规范统一。
记忆可视化系统开发（优先级：中高）
1. 单词级记忆透视：使用Canvas绘制遗忘曲线，实现动态动画效果，展示历史交互记录、遗忘概率、复习间隔依据，色彩贴合项目紫色系。
2. 认知仪表盘组件（CognitionDashboard）：开发顶部迷你仪表盘，实时显示session核心数据（记忆提取次数、认知负荷、疲劳期预测），支持折叠/展开，样式与项目半透明设计统一。
3. 认知实验报告（Statistics.vue）：开发报告页面，集成ECharts绘制能力星云图，实现报告自动生成、截图分享功能，星云图光点颜色、动画贴合项目规范。
4. 三维能力图谱（MemoryGraph.vue）：使用Canvas绘制星云图，实现单词光点、亮区/暗区展示，支持缩放、筛选功能，筛选按钮交互贴合项目规范。
多模式递进训练组件开发（优先级：中高）
1. 开发ChoiceMode.vue（看词选释义、听音辨释义）：实现选项渲染、发音播放、答案校验，选项交互（hover、选中）贴合项目按钮风格。
2. 开发SpellMode.vue（看释义写单词）：实现输入框校验、拼写容错（Levenshtein距离）、发音播放，输入框focus样式贴合项目规范。
3. 开发DiscriminationMode.vue（近义词辨析+真题语境）：集成真题数据库，实现选项渲染、命题人解析展示，解析样式与项目提示规范统一。
4. 实现递进训练逻辑：按"见义→书义→辨义"递进，支持自主选择模式，训练难度与三维能力评分联动，流程衔接顺畅。
SRS算法前端实现（优先级：中）
1. 修改srs.js文件，集成完整SM-2算法，关联masteryStore.js（三维能力数据）与studyStore.js（学习日志），实现复习间隔动态调整。
2. 实现算法透明化展示：在记忆轨迹、认知报告中，标注复习间隔计算依据，支持用户查看算法决策日志。
3. 实现容错机制：当用户连续遗忘时，自动降低训练难度、缩短复习间隔，给出对应提示。
云端同步与本地存储（优先级：中）
1. 集成Supabase SDK，实现前端与云端数据同步，适配用户记忆画像、学习日志、三维能力数据等核心数据的同步与离线可用。
2. 优化本地IndexedDB存储逻辑，确保离线状态下用户可正常学习，联网后自动同步数据，避免数据丢失。
模块化架构搭建（优先级：中）
1. 采用Vue3组件化开发，拆分公共组件（卡片、按钮、提示框等）与业务组件（训练组件、可视化组件等），定义统一的组件接口规范。
2. 预留四六级、雅思等模块扩展接口，确保后续扩展时无需修改核心代码，实现"考研→通用英语"平滑扩展。
计划系统前端实现（优先级：中低）
1. 开发认知风格诊断组件，实现用户认知画像生成，界面设计贴合项目视觉规范。
2. 开发动态计划页面，支持多计划并行、每日学习量调整，计划与SRS算法、能力图谱联动，实时更新复习计划。

3.1.3 交付标准

代码规范：遵循ESLint规范，注释完整（组件用途、核心逻辑、接口说明），代码可复用、可维护，无冗余代码。
功能达标：所有交互、可视化、训练模块均按优化方案实现，无功能缺失，防作弊逻辑生效，快捷键适配正常。
视觉统一：所有组件、动画、色彩均贴合项目紫色系规范，与LandingPage.vue视觉一致，无视觉割裂感。
兼容性：适配主流浏览器（Chrome、Edge、Safari最新版本）及移动端主流机型（iPhone 12及以上、Android 10及以上），无适配问题。
性能要求：页面加载时间≤1.5秒，卡片翻转、动画播放无卡顿，可视化图表渲染流畅，无明显延迟。
交付物：前端源代码、组件文档、接口调用文档、兼容性测试报告。

3.2 后端开发组

3.2.1 团队职责

负责后端接口开发、SRS算法后端实现、云端数据存储与同步、用户数据管理、权限控制，确保后端服务稳定、接口高效，与前端顺畅联动，支撑前端所有功能落地，保障数据安全与可扩展性。

3.2.2 核心开发任务与技术要求

接口开发（优先级：最高）
1. 用户相关接口：用户注册、登录、个人信息查询/修改接口，支持JWT身份认证，确保用户数据安全。
2. 单词数据接口：单词列表、单词详情（释义、例句、词根）、单词分类（考研、四六级等）接口，支持分页查询，适配前端模块化需求。
3. 学习数据接口：学习日志、记忆轨迹、三维能力评分、认知实验报告数据的查询/新增/修改/删除接口，支持按用户、时间筛选。
4. SRS算法接口：复习间隔计算、记忆强度更新、算法日志查询接口，与前端算法逻辑联动，确保数据一致性。
5. 云端同步接口：数据同步（本地→云端、云端→本地）、数据冲突处理接口，确保离线数据同步无丢失、无冲突。
6. 计划系统接口：认知画像生成、动态计划查询/调整接口，支持多计划并行管理。
7. 接口规范：统一接口格式（RESTful风格），返回格式标准化（code、message、data），添加接口请求频率限制，防止恶意请求。
SRS算法后端实现（优先级：高）
1. 基于Node.js实现完整SM-2算法，与前端算法逻辑保持一致，负责后端层面的复习间隔计算、记忆强度更新。
2. 实现算法日志持久化：记录每一次SRS调整的决策过程（用户ID、单词ID、调整依据、调整后间隔），支持前端查询。
3. 优化算法性能：针对大量用户数据，优化算法计算效率，确保接口响应时间≤300ms。
云端存储与数据管理（优先级：高）
1. 基于Supabase搭建云端数据库，设计合理的数据表结构（用户表、单词表、学习日志表、记忆轨迹表、能力评分表等），建立数据表关联，确保数据完整性。
2. 实现数据备份策略：每日自动备份数据库，支持数据恢复，确保用户数据安全，无数据丢失风险。
3. 处理数据冲突：针对多设备同步场景，设计数据冲突处理逻辑（按时间戳优先、用户操作优先），确保同步数据一致性。
4. 数据加密：对用户敏感数据（密码、个人信息）进行加密存储，遵循数据安全规范。
后端服务部署与优化（优先级：中）
1. 基于Node.js + Express搭建后端服务，使用Docker容器化部署，支持开发、测试、生产多环境配置。
2. 配置Nginx反向代理，实现负载均衡，提升服务稳定性与访问速度，支持高并发场景（同时在线用户≤500人）。
3. 添加服务监控：监控接口响应时间、服务运行状态，出现异常时及时报警，确保服务稳定性达99.9%。
模块化扩展支撑（优先级：中低）
1. 设计模块化数据接口规范，支持后续四六级、雅思等模块的扩展，新增模块时无需修改核心接口逻辑。
2. 预留第三方接口集成入口（如单词发音接口、真题数据库接口），为后续功能扩展提供支撑。

3.2.3 交付标准

接口规范：所有接口遵循RESTful风格，返回格式标准化，接口文档完整（接口地址、请求方式、参数说明、返回示例、异常处理）。
功能达标：所有接口正常可用，无接口报错，响应时间≤300ms，高并发场景下无服务崩溃、数据丢失问题。
数据安全：用户数据加密存储，数据备份策略生效，数据同步无冲突、无丢失，符合数据安全规范。
稳定性：后端服务稳定运行，无内存泄漏、死锁等问题，稳定性达99.9%，异常情况有报警机制。
可扩展性：接口规范支持模块化扩展，预留第三方接口集成入口，后续扩展无需大幅修改核心代码。
交付物：后端源代码、接口文档、数据库设计文档、部署文档、服务监控方案。

3.3 测试组

3.3.1 团队职责

负责项目全流程测试，包括单元测试、接口测试、端到端测试、兼容性测试、性能测试、用户体验测试，发现并跟踪bug，确保项目功能达标、性能稳定、体验良好，出具完整测试报告，支撑项目上线。

3.3.2 核心测试任务与技术要求

测试计划制定（优先级：最高）
1. 根据优化方案与各团队开发任务，制定详细的测试计划，明确测试范围、测试用例、测试优先级、测试时间节点，确保测试工作有序推进。
2. 划分测试阶段：单元测试（前端组件、后端接口）、集成测试（前后端联动）、系统测试（全功能）、验收测试（贴合业务目标），各阶段测试重点明确。
单元测试（优先级：高）
1. 前端单元测试：使用Jest测试前端组件（Study.vue、WordCard.vue、可视化组件等），覆盖组件渲染、交互逻辑、函数方法，测试覆盖率≥80%。
2. 后端单元测试：测试后端接口、算法逻辑、数据处理方法，确保核心函数、接口逻辑正确，无逻辑漏洞。
接口测试（优先级：高）
1. 使用Postman测试所有后端接口，覆盖正常请求、异常请求（参数缺失、参数错误、请求频率过高），确保接口响应正确、异常处理合理。
2. 测试接口联动：前端调用后端接口，测试数据传递是否顺畅、数据一致性是否达标，无接口调用失败、数据错乱问题。
3. 测试云端同步接口：测试离线数据同步、多设备同步、数据冲突处理，确保同步功能正常，数据无丢失、无冲突。
端到端测试（优先级：高）
1. 使用Cypress进行端到端测试，模拟用户真实操作场景（单词学习、训练、查看报告、调整计划等），覆盖全流程功能，确保交互流畅、功能正常。
2. 测试防作弊逻辑：模拟用户偷翻卡片、快速点击反馈按钮等作弊行为，测试防作弊逻辑是否生效，数据是否真实。
3. 测试可视化功能：测试遗忘曲线、能力星云图、认知仪表盘等可视化组件，确保图表渲染正确、动画流畅、数据准确。
兼容性测试（优先级：中）
1. 浏览器兼容性：测试主流浏览器（Chrome、Edge、Safari最新版本），确保前端功能、视觉效果一致，无适配问题。
2. 移动端兼容性：测试主流移动端机型（iPhone 12及以上、Android 10及以上），确保移动端界面适配、交互正常，无布局错乱、功能失效问题。
性能测试（优先级：中）
1. 前端性能：测试页面加载时间、动画渲染速度、可视化图表渲染效率，确保页面加载≤1.5秒，无明显卡顿。
2. 后端性能：测试接口响应时间、高并发场景下的服务稳定性，确保接口响应≤300ms，同时在线500人无服务崩溃。
3. 数据同步性能：测试大量数据同步时的速度与稳定性，确保同步无延迟、无数据丢失。
用户体验测试（优先级：中）
1. 测试交互流畅度：卡片翻转、按钮点击、动画播放等交互是否流畅，无卡顿、无延迟，快捷键适配合理。
2. 测试视觉体验：所有组件、色彩、动画是否贴合项目规范，视觉是否统一，无视觉割裂感，用户体验良好。
3. 测试提示合理性：科学提示、休息提示、错误提示等是否清晰、及时，符合用户认知习惯。
bug跟踪与回归测试（优先级：持续）
1. 建立bug跟踪系统，记录bug详情（重现步骤、严重程度、影响范围），跟踪bug修复进度，确保所有bug及时修复。
2. bug修复后进行回归测试，确保bug修复彻底，无新bug引入，不影响其他功能正常使用。

3.3.3 交付标准

测试计划：测试计划完整、详细，明确测试范围、用例、优先级、时间节点，可落地执行。
测试用例：测试用例覆盖全功能、全场景，包括正常场景、异常场景、边界场景，用例清晰、可重现。
测试报告：出具完整的测试报告，包括测试概况、测试结果、bug统计、性能测试结果、兼容性测试结果，明确项目是否达到上线标准。
bug管控：所有bug均已跟踪、修复，回归测试通过，无未解决的严重bug（阻断性、严重级），轻微bug不影响核心功能使用。
交付物：测试计划、测试用例、测试报告、bug跟踪报告、回归测试报告。

3.4 运维组（辅助支持）

3.4.1 团队职责

负责项目部署、环境配置、服务监控、数据备份与恢复，支撑开发、测试、生产环境的稳定运行，确保项目顺利上线与后期维护。

3.4.2 核心任务

环境配置：搭建开发、测试、生产多环境，配置Docker、Nginx、数据库等，确保环境一致性。
项目部署：负责前后端项目的部署、更新，确保部署流程顺畅，版本切换无异常。
服务监控：监控服务器运行状态、后端服务状态、数据库状态，出现异常及时报警并处理。
数据备份与恢复：执行数据库每日备份，定期测试数据恢复功能，确保数据安全。
运维文档：编写部署文档、运维手册，明确部署流程、监控方案、故障处理流程。

四、项目管控与协作要求

4.1 项目进度管控

阶段划分（总周期45个工作日）
1. 需求确认与准备阶段（5个工作日）：各团队熟悉需求文档、技术选型，明确开发/测试任务，完成环境搭建。
2. 核心功能开发阶段（20个工作日）：前端完成交互重构、防作弊逻辑、基础SRS算法；后端完成核心接口、数据存储；测试组同步进行单元测试、接口测试。
3. 扩展功能开发阶段（10个工作日）：前端完成可视化系统、计划系统；后端完成扩展接口、算法优化；测试组进行集成测试、系统测试。
4. 测试与优化阶段（7个工作日）：测试组完成全流程测试，各团队修复bug，进行性能优化、体验优化。
5. 验收与上线阶段（3个工作日）：项目验收，确认符合交付标准，完成生产环境部署，上线项目。
进度同步：每日召开15分钟站会，各团队同步当日进度、遇到的问题，协调解决；每周提交进度报告，确保项目按计划推进。

4.2 协作规范

沟通协作：使用企业微信、飞书进行日常沟通，重大问题召开专项会议；接口变更、需求调整需提交变更申请，经项目负责人确认后执行。
代码管理：使用Git进行代码版本控制，前端、后端分别建立代码仓库，分支管理规范（master主分支、develop开发分支、feature功能分支），提交代码需备注清晰，进行代码评审。
文档管理：所有文档（需求文档、接口文档、测试文档、部署文档）统一归档，及时更新，确保各团队使用的文档为最新版本。

4.3 风险管控

技术风险：前端可视化组件渲染性能、后端高并发处理、数据同步冲突，提前进行技术验证，制定应急预案。
进度风险：某团队进度滞后，及时调整资源，协调其他团队协助，确保整体进度不受影响。
质量风险：bug修复不彻底、功能不符合需求，加强代码评审、测试力度，确保每一个功能都经过严格测试。

五、验收标准

技术验收：前端代码规范、兼容性达标、性能达标；后端接口正常、服务稳定、数据安全；测试报告完整，无严重bug，轻微bug已确认不影响核心功能。
视觉验收：所有组件、动画、色彩均贴合项目紫色系规范，与LandingPage.vue视觉统一，无视觉割裂感，用户体验良好。
文档验收：各团队交付物（源代码、接口文档、测试文档、部署文档等）完整、规范，可用于后续维护与扩展。

六、附则

本文档自发布之日起生效，各团队需严格按照文档要求执行开发、测试、运维工作。
本文档未尽事宜，由项目总负责人协调各团队协商解决，重大调整需提交变更申请，经各方确认后更新文档。
项目上线后，各团队需配合进行后期维护，及时处理线上问题，确保项目稳定运行。