📝 docs: save feature planning documents

Author: ccinoo

.claude/plan/002-auto-detect-drawing-requirement.md

@@ -0,0 +1,272 @@
+# 项目任务分解规划
+
+## 已明确的决策
+
+- 项目使用 Astro + SolidJS + TypeScript 技术栈
+- 使用 @fuyun/generative-ai 包集成 Gemini API
+- 当前支持通过 GEMINI_MODEL_NAME 环境变量配置模型（默认 gemini-2.5-flash）
+- 已实现基础的聊天对话功能和流式响应处理
+- 代码结构清晰，具有完善的类型定义和错误处理机制
+
+## 整体规划概述
+
+### 项目目标
+
+为 GeminiProChat 项目实现智能绘图需求检测功能，当用户输入包含绘图相关请求时，自动切换到 Gemini 3 Pro Image Preview 模型进行图像生成，提供无缝的多模态对话体验。
+
+### 技术栈
+
+- **前端框架**: Astro + SolidJS
+- **样式**: UnoCSS + 自定义 CSS
+- **AI 集成**: Google Gemini Pro API (@fuyun/generative-ai)
+- **模型支持**:
+  - 默认模型: gemini-2.5-flash (文本对话)
+  - 图像模型: models/gemini-3-pro-image-preview (图像生成)
+- **部署**: Vercel/Netlify/Docker
+- **包管理**: pnpm
+
+### 主要阶段
+
+1. **需求分析与设计阶段** - 定义绘图需求识别规则和用户体验流程
+2. **核心功能开发阶段** - 实现自动检测和模型切换逻辑
+3. **用户界面优化阶段** - 添加模型状态指示和图像展示功能
+4. **测试与验证阶段** - 全面测试功能并优化用户体验
+
+### 详细任务分解
+
+#### 阶段 1：需求分析与设计阶段
+
+- **任务 1.1**：定义绘图需求关键词和模式规则
+  - 目标：建立一套完整的绘图需求识别规则库
+  - 输入：用户消息文本
+  - 输出：绘图需求判断结果和置信度
+  - 涉及文件：src/utils/imageDetection.ts（新建）
+  - 预估工作量：1 天
+
+- **任务 1.2**：设计用户体验流程
+  - 目标：设计从检测到展示的完整用户交互流程
+  - 输入：功能需求文档
+  - 输出：用户体验流程图和交互规范
+  - 涉及文件：design-specs/image-generation-flow.md（新建）
+  - 预估工作量：0.5 天
+
+- **任务 1.3**：更新类型定义
+  - 目标：扩展类型系统以支持图像生成功能
+  - 输入：现有类型定义
+  - 输出：更新后的类型定义文件
+  - 涉及文件：src/types.ts
+  - 预估工作量：0.5 天
+
+#### 阶段 2：核心功能开发阶段
+
+- **任务 2.1**：实现绘图需求检测工具
+  - 目标：创建智能检测工具，准确识别用户的绘图意图
+  - 输入：用户消息文本
+  - 输出：检测结果（是否包含绘图需求）
+  - 涉及文件：src/utils/imageDetection.ts（新建）
+  - 预估工作量：1.5 天
+
+- **任务 2.2**：改造 API 路由支持多模型
+  - 目标：修改 generate.ts 以支持动态模型选择
+  - 输入：请求消息和模型类型参数
+  - 输出：使用相应模型的响应
+  - 涉及文件：src/pages/api/generate.ts
+  - 预估工作量：1 天
+
+- **任务 2.3**：更新 OpenAI 工具类
+  - 目标：扩展工具类以支持不同模型的调用
+  - 输入：模型类型和消息历史
+  - 输出：相应模型的响应流
+  - 涉及文件：src/utils/openAI.ts
+  - 预估工作量：1 天
+
+- **任务 2.4**：实现前端模型切换逻辑
+  - 目标：在 Generator 组件中集成检测和切换逻辑
+  - 输入：用户输入消息
+  - 输出：自动选择合适的模型并发送请求
+  - 涉及文件：src/components/Generator.tsx
+  - 预估工作量：1.5 天
+
+#### 阶段 3：用户界面优化阶段
+
+- **任务 3.1**：创建图像展示组件
+  - 目标：开发专门的图像展示组件
+  - 输入：图像 URL 和元数据
+  - 输出：美观的图像展示界面
+  - 涉及文件：src/components/ImageDisplay.tsx（新建）
+  - 预估工作量：1 天
+
+- **任务 3.2**：更新模型显示组件
+  - 目标：实时显示当前使用的模型
+  - 输入：当前模型名称
+  - 输出：模型状态指示器
+  - 涉及文件：src/components/ModelDisplay.tsx
+  - 预估工作量：0.5 天
+
+- **任务 3.3**：优化消息组件支持图像
+  - 目标：扩展 MessageItem 组件以显示图像内容
+  - 输入：包含图像的消息
+  - 输出：图文混合的消息展示
+  - 涉及文件：src/components/MessageItem.tsx
+  - 预估工作量：1 天
+
+- **任务 3.4**：添加加载状态和过渡动画
+  - 目标：提供流畅的用户反馈体验
+  - 输入：加载状态触发
+  - 输出：平滑的过渡动画效果
+  - 涉及文件：src/components/Generator.tsx, src/message.css
+  - 预估工作量：0.5 天
+
+#### 阶段 4：测试与验证阶段
+
+- **任务 4.1**：编写单元测试
+  - 目标：确保核心功能的正确性
+  - 输入：测试用例
+  - 输出：测试覆盖率报告
+  - 涉及文件：tests/imageDetection.test.ts（新建）
+  - 预估工作量：1 天
+
+- **任务 4.2**：集成测试
+  - 目标：验证整个功能的端到端流程
+  - 输入：测试场景
+  - 输出：集成测试报告
+  - 涉及文件：tests/integration/image-generation.test.ts（新建）
+  - 预估工作量：1 天
+
+- **任务 4.3**：性能优化
+  - 目标：优化响应时间和资源使用
+  - 输入：性能测试结果
+  - 输出：优化后的代码
+  - 涉及文件：多个核心文件
+  - 预估工作量：0.5 天
+
+- **任务 4.4**：文档更新
+  - 目标：更新项目文档和用户指南
+  - 输入：新功能说明
+  - 输出：更新后的 README 和配置说明
+  - 涉及文件：README.md, README_cn.md 等
+  - 预估工作量：0.5 天
+
+## 需要进一步明确的问题
+
+### 问题 1：如何实现准确的绘图需求检测？
+
+**推荐方案**：
+
+- **方案 A：关键词匹配 + 模式识别**
+  - 优点：实现简单，响应快速，可控性强
+  - 缺点：可能漏掉复杂或隐式的绘图需求
+  - 实现难度：低
+
+- **方案 B：使用 Gemini 模型进行意图识别**
+  - 优点：识别准确率高，能理解复杂上下文
+  - 缺点：需要额外的 API 调用，增加延迟
+  - 实现难度：中等
+
+- **方案 C：混合方案（关键词 + 模型验证）**
+  - 优点：平衡了速度和准确性
+  - 缺点：实现复杂度较高
+  - 实现难度：中等
+
+**等待用户选择**：
+
+```
+请选择您偏好的方案，或提供其他建议：
+[ ] 方案 A：关键词匹配 + 模式识别
+[ ] 方案 B：使用 Gemini 模型进行意图识别
+[ ] 方案 C：混合方案（关键词 + 模型验证）
+[ ] 其他方案：_________________________
+```
+
+### 问题 2：如何处理图像生成后的存储和展示？
+
+**推荐方案**：
+
+- **方案 A：使用 Google Cloud Storage**
+  - 优点：与 Google 生态集成好，可靠性高
+  - 缺点：可能产生额外费用
+  - 实现难度：中等
+
+- **方案 B：使用 Vercel Blob（如果部署在 Vercel）**
+  - 优点：简单集成，自动优化
+  - 缺点：供应商锁定
+  - 实现难度：低
+
+- **方案 C：使用 Data URL 直接返回**
+  - 优点：无需外部存储，简单直接
+  - 缺点：响应体较大，不适合大图像
+  - 实现难度：低
+
+**等待用户选择**：
+
+```
+请选择您偏好的方案，或提供其他建议：
+[ ] 方案 A：使用 Google Cloud Storage
+[ ] 方案 B：使用 Vercel Blob
+[ ] 方案 C：使用 Data URL 直接返回
+[ ] 其他方案：_________________________
+```
+
+### 问题 3：是否需要添加用户手动切换模型的选项？
+
+**推荐方案**：
+
+- **方案 A：完全自动检测，不提供手动选项**
+  - 优点：用户体验简洁，减少困惑
+  - 缺点：用户无法控制使用哪个模型
+  - 实现难度：低
+
+- **方案 B：自动检测 + 手动覆盖选项**
+  - 优点：给予用户更多控制权
+  - 缺点：界面可能变得复杂
+  - 实现难度：中等
+
+- **方案 C：添加模型选择器，支持预设偏好**
+  - 优点：完全的用户控制
+  - 缺点：增加界面复杂度
+  - 实现难度：中等
+
+**等待用户选择**：
+
+```
+请选择您偏好的方案，或提供其他建议：
+[ ] 方案 A：完全自动检测，不提供手动选项
+[ ] 方案 B：自动检测 + 手动覆盖选项
+[ ] 方案 C：添加模型选择器，支持预设偏好
+[ ] 其他方案：_________________________
+```
+
+## 用户反馈区域
+
+请在此区域补充您对整体规划的意见和建议：
+
+```
+用户补充内容：
+
+---
+
+---
+
+---
+```
+
+## 实施注意事项
+
+1. **向后兼容**：确保新功能不影响现有的文本对话功能
+2. **错误处理**：完善图像生成失败时的降级和提示机制
+3. **性能考虑**：优化模型切换的响应时间
+4. **成本控制**：考虑不同模型的 API 调用成本差异
+5. **用户隐私**：如果使用外部存储，确保图像数据的安全性
+
+## 预估总工作量
+
+- **最小可行版本**：5-7 天
+- **完整功能版本**：10-14 天
+- **优化和测试**：额外 3-5 天
+
+## 成功标准
+
+1. 能准确识别 80% 以上的绘图需求
+2. 模型切换响应时间 < 500ms
+3. 图像生成成功率 > 95%
+4. 用户满意度评分 > 4.0/5.0