210 lines
7.2 KiB
Markdown
210 lines
7.2 KiB
Markdown
---
|
||
name: AI智能解题功能开发
|
||
overview: 开发一个支持多轮对话的AI智能解题页面，用户可通过文本或图片上传试题，AI以卡片式步骤引导用户思考并解答题目。
|
||
design:
|
||
architecture:
|
||
framework: vue
|
||
styleKeywords:
|
||
- Glassmorphism
|
||
- Dark Theme
|
||
- Card-based Layout
|
||
- Streaming Animation
|
||
fontSystem:
|
||
fontFamily: Inter
|
||
heading:
|
||
size: 1.2rem
|
||
weight: 600
|
||
subheading:
|
||
size: 1rem
|
||
weight: 500
|
||
body:
|
||
size: 0.95rem
|
||
weight: 400
|
||
colorSystem:
|
||
primary:
|
||
- "#6366f1"
|
||
- "#8b5cf6"
|
||
background:
|
||
- "#0d0f17"
|
||
- rgba(255,255,255,0.03)
|
||
text:
|
||
- "#ffffff"
|
||
- "#94a3b8"
|
||
functional:
|
||
- "#6366f1"
|
||
- "#14b8a6"
|
||
- "#ef4444"
|
||
todos:
|
||
- id: create-problem-solving-page
|
||
content: 创建 ProblemSolving.vue 页面，实现输入面板和对话展示区布局
|
||
status: completed
|
||
- id: implement-input-panel
|
||
content: 实现文本输入和图片上传Tab切换功能
|
||
status: completed
|
||
dependencies:
|
||
- create-problem-solving-page
|
||
- id: implement-dialog-engine
|
||
content: 实现多轮对话核心引擎和消息历史管理
|
||
status: completed
|
||
dependencies:
|
||
- create-problem-solving-page
|
||
- id: implement-card-rendering
|
||
content: 实现卡片式步骤解析和流式渲染逻辑
|
||
status: completed
|
||
dependencies:
|
||
- implement-dialog-engine
|
||
- id: update-config
|
||
content: 更新配置文件添加解题API参数
|
||
status: completed
|
||
- id: update-router
|
||
content: 更新路由配置添加解题页面路由
|
||
status: completed
|
||
dependencies:
|
||
- create-problem-solving-page
|
||
- id: update-homepage
|
||
content: 更新首页添加AI智能解题功能卡片
|
||
status: completed
|
||
dependencies:
|
||
- update-router
|
||
---
|
||
|
||
## 产品概述
|
||
|
||
开发一个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 的多轮对话逻辑。
|
||
|
||
### 对话流程设计
|
||
|
||
1. 用户提交试题后，AI首先分析题目并输出初步理解
|
||
2. AI逐步给出解题步骤（每步一个卡片）
|
||
3. 用户可在任意步骤提问或请求详细解释
|
||
4. 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. 多轮对话历史管理
|
||
|
||
```javascript
|
||
// 对话消息结构
|
||
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时轻微上移+阴影增强 |