---
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时轻微上移+阴影增强