项目实训第三周
本周对错题模块进行修改
实现功能:错题本首页包含以下入口 / 模块:「每日推题」入口「添加错题本 / 错题」入口「搜索框」入口「新建错题本」入口
新建错题本流程错题本名称输入填写信息错题本描述点击创建错题本,跳转回错题本首页
-
每日推题页面筛选记录每日推题数据调节题目展示区翻页控制上一题、下一题上一页、下一页更新内容更新资料详情提示每日推题:帮助用户了解错题数据,统计错题类型,分析薄弱环节,按知识点筛选错题,错题练习
-
错题本列表页返回按钮错题本列表错题列表
-
查看错题页面题干展示查看答案按钮答案展示做对了、做错了、选择错了提交结果提交答题情况跳转至同类题页面
-
同类题页面点击进入某题题干显示区点击查看答案显示答案答案展示区点击保存保存错题按钮跳转至保存错题页面同类题页面:展示同类题目,查看同考点题目,对比解题思路,强化薄弱知识点,错题练习
-
AI 分析报告页面上传图片 / 试题区AI 分析中分析结果展示区查看同类题按钮保存错题按钮跳转至保存错题页面AI 分析报告:对上传错题进行分析,错题原因分析,知识点分析,知识图谱分析,同类型题推荐,自动生成练习,查看错题分析报告错题推荐与反馈:展示错题不足,定位薄弱环节,生成个性化练习,帮助针对性提升
-
保存错题页面OCR 识别错题图片上传区AI 识别题干AI 自动填充题干题干编辑区添加标签自定义标签输入点击保存保存确认按钮保存错题页面:支持 OCR 识别错题,手动编辑题干,自定义标签分类,确认保存错题
跳转关系
错题本首页 → 新建错题本 → 错题本首页错题本首页 → 每日推题页面错题本首页 → 错题本列表页 → 查看错题页面 → 同类题页面 → 保存错题页面查看错题页面 → AI 分析报告页面同类题页面 → AI 分析报告页面AI 分析报告页面 → 保存错题页面
新建的文件(3个)
1. 每日推题页面
plaintext
d:\xiangmushixun\based-ai-learning-com-develop-client\src\pages\notebooks\daily-push.vue
2. AI分析报告页面
plaintext
d:\xiangmushixun\based-ai-learning-com-develop-client\src\pages\notebooks\ai-analysis.vue
3. 同类题练习页面
plaintext
d:\xiangmushixun\based-ai-learning-com-develop-client\src\pages\notebooks\similar-questions.vue
✏️ 需要修改的文件(4个)
1. 错题本首页(大幅修改)
plaintext
d:\xiangmushixun\based-ai-learning-com-develop-client\src\pages\notebooks\notebooks.vue
修改内容:
- 添加搜索框区域
- 添加快捷入口卡片(每日推题、添加错题)
- 添加"我的错题本"标题和新建按钮
- 优化空状态提示
- 新增
goToDailyPush()方法 - 新增
goToAddQuestion()方法 - 调整样式布局
2. 查看错题详情页(大幅修改)
plaintext
d:\xiangmushixun\based-ai-learning-com-develop-client\src\pages\notebooks\topic-detail.vue
修改内容:
- 添加图标到各个section头部
- 添加答题反馈区域(做对了/做错了按钮)
- 添加底部操作栏(同类题、AI分析、保存)
- 新增
submitAnswer()方法 - 新增
goToSimilarQuestions()方法 - 新增
goToAIAnalysis()方法 - 新增
goToSaveQuestion()方法 - 添加已答题状态显示
3. 页面路由配置
plaintext
d:\xiangmushixun\based-ai-learning-com-develop-client\src\pages.json
修改内容:
- 添加
daily-push页面路由配置 - 添加
ai-analysis页面路由配置 - 添加
similar-questions页面路由配置 - 设置这三个页面为自定义导航栏样式
4. 图标组件
plaintext
d:\xiangmushixun\based-ai-learning-com-develop-client\src\components\common\AppIcon.vue
修改内容:
- 在 icons 对象中添加新图标映射:
calendar-check: '📅'tag: '🏷️'star: '⭐'left: '◀'right: '▶'arrow-left: '⬅'arrow-right: '➡'book: '📖'file-text: '📄'eye: '👁️'check-circle: '✅'refresh-cw: '🔄'thumbs-up: '👍'thumbs-down: '👎'alert-circle: '⚠️'similar: '🔀'graph: '🕸️'target: '🎯'lightbulb: '💡'
- 现有接口(已实现)
- POST
/notebook/list- 错题本列表 - POST
/notebook/add- 新建错题本 - POST
/notebook/update- 更新错题本 - POST
/notebook/delete- 删除错题本 - POST
/notebook/detail- 错题本详情 - POST
/topic/list- 错题列表 - POST
/topic/add- 添加错题 - POST
/topic/update- 更新错题 - POST
/topic/delete- 删除错题 - POST
/topic/detail- 错题详情
- POST
效果UI

每日推题:

添加错题本:

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)