7.2 KiB
7.2 KiB
| name | overview | design | todos | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| AI智能解题功能开发 | 开发一个支持多轮对话的AI智能解题页面，用户可通过文本或图片上传试题，AI以卡片式步骤引导用户思考并解答题目。 |
|
|
产品概述
开发一个AI智能解题页面，支持用户通过文本输入或图片上传提交试题，通过多轮对话交互方式，逐步引导用户思考并完成解题。
核心功能
- 双重输入方式：支持文本输入和图片上传两种试题提交方式
- AI图片分析：上传图片后由AI直接识别并分析图片中的试题内容
- 多轮对话交互：AI逐步引导用户思考，支持用户追问和互动
- 卡片式步骤展示：每个解题步骤以独立卡片形式展示，清晰易懂
- 通用学科支持：支持数学、物理、化学等多学科题目
- 流式输出：实时显示AI解题过程，提升用户体验
技术栈选择
- 前端框架：Vue 3 + Composition API (script setup)
- 路由：Vue Router
- HTTP客户端：Axios（流式输出）
- AI模型：GRS AI API (gemini-3.1-pro) - 支持图文混合输入
- 样式：Scoped CSS + CSS Variables
实现方案
页面架构
采用左右分栏布局：左侧为输入区（文本/图片上传），右侧为多轮对话展示区。参考 ExamAnalysis.vue 的布局结构和 Speaking.vue 的多轮对话逻辑。
对话流程设计
- 用户提交试题后，AI首先分析题目并输出初步理解
- AI逐步给出解题步骤（每步一个卡片）
- 用户可在任意步骤提问或请求详细解释
- AI根据用户反馈调整后续引导策略
System Prompt 设计
设计引导式解题Prompt，要求AI：
- 先理解题目类型和关键信息
- 分步骤给出解题思路
- 每步引导用户思考而非直接给答案
- 鼓励用户参与互动
图片处理方案
复用 ExamAnalysis.vue 的图片上传和Base64编码逻辑，构建 OpenAI 兼容格式的多模态请求（text + image_url）。
架构设计
┌─────────────────────────────────────────────────────┐
│ ProblemSolving.vue │
├──────────────────┬──────────────────────────────────┤
│ 输入面板(左) │ 对话面板(右) │
│ ┌────────────┐ │ ┌────────────────────────────┐ │
│ │ Tab切换 │ │ │ 对话消息列表 │ │
│ │ - 文本输入 │ │ │ - 用户消息气泡 │ │
│ │ - 图片上传 │ │ │ - AI消息卡片(步骤展示) │ │
│ └────────────┘ │ │ - 步骤标题 │ │
│ ┌────────────┐ │ │ - 步骤内容 │ │
│ │ 提交按钮 │ │ │ - 流式输出动画 │ │
│ └────────────┘ │ └────────────────────────────┘ │
└──────────────────┴──────────────────────────────────┘
目录结构
c:/code/work/AI_Demo/
├── src/
│ ├── views/
│ │ └── ProblemSolving.vue # [NEW] AI智能解题页面。实现多轮对话交互、图文输入、卡片式步骤展示。核心功能包括：试题提交(文本/图片)、对话历史管理、AI流式响应解析、卡片式步骤渲染。
│ ├── router/
│ │ └── index.js # [MODIFY] 添加 /problem-solving 路由
│ ├── config/
│ │ └── index.js # [MODIFY] 添加解题API配置(PROBLEM_API_URL, PROBLEM_MODEL, PROBLEM_SYSTEM_PROMPT)
│ └── views/
│ └── HomePage.vue # [MODIFY] 添加"AI智能解题"功能卡片(第7个)
关键实现细节
1. 多轮对话历史管理
// 对话消息结构
const messages = ref([])
// 消息格式: { id, role: 'user'|'assistant', content, type: 'text'|'step', stepData?: {...} }
2. 流式输出处理
复用 ExamAnalysis.vue 的 SSE 解析逻辑，增加对话历史追加机制。
3. 卡片式步骤解析
AI输出使用特定格式标记步骤：
## 步骤1：理解题意
...
## 步骤2：分析条件
...
解析后渲染为独立卡片。
4. 图片上传处理
- 支持格式：JPG、PNG、WebP
- 大小限制：10MB
- 编码方式：Base64
- 请求格式：OpenAI多模态格式
设计风格
延续项目现有的深色主题与玻璃态设计风格，打造沉浸式解题体验。
页面布局
- 顶部导航栏：返回按钮 + 页面标题
- 主体区域：左右分栏布局
- 左侧（40%）：输入面板，包含Tab切换（文本/图片）、输入区域、提交按钮
- 右侧（60%）：对话展示区，垂直滚动显示对话历史
- 移动端：上下堆叠布局
视觉设计
- 背景使用深色渐变（#0d0f17）配合紫色调光晕效果
- 卡片使用半透明背景（rgba(255,255,255,0.03)）+ 模糊效果
- 步骤卡片左侧带有主题色边框标识
- AI消息卡片带有微妙的发光动画
交互设计
- 输入框聚焦时边框高亮
- 卡片淡入上浮动画（fadeInUp）
- 流式输出时显示打字光标闪烁效果
- 按钮hover时轻微上移+阴影增强