first commit

功能概述.md

@@ -0,0 +1,99 @@
+# 产品画布/SWOT分析工具 - 功能概述
+
+## 产品定位
+一个基于AI对话的产品战略分析工具，帮助用户快速生成产品画布和SWOT分析图表，支持产品规划和决策。
+
+## 核心功能模块
+
+### 1. 双模式切换系统
+- **产品画布模式**：生成和展示产品画布图表
+- **SWOT分析模式**：生成和展示SWOT分析图表
+- 模式切换时界面标题和提示文本同步更新
+- 当前模式状态视觉反馈（激活/非激活状态）
+
+### 2. AI对话交互系统
+- **消息发送**：用户输入文本请求，支持Enter键快捷发送
+- **对话历史**：保存并展示用户与AI的完整对话记录
+- **消息类型**：
+  - 用户消息
+  - AI消息
+- **自动滚动**：新消息自动滚动到底部
+
+### 3. 图表生成与展示系统
+- **SVG图表生成**：根据用户请求生成相应的SVG图表
+- **图表占位符**：对话中显示可点击的图表预览块
+- **图表渲染**：点击占位符在右侧面板完整展示SVG图表
+- **图表存储**：本地存储生成的SVG内容，支持历史查看
+
+### 4. 消息操作功能
+- **退回功能**：回退到指定消息，删除该消息之后的所有对话
+- **重新生成**：针对最后一条AI消息重新请求生成内容，上下文是该消息之前的所有对话，包括SVG
+- **悬浮显示**：鼠标悬停时显示操作按钮
+
+### 5. 图表导出功能
+- **SVG下载**：将当前图表导出为SVG文件
+- **图片导出**：将当前图表导出为PNG图片格式
+- **代码查看**：查看当前图表的SVG源代码
+
+## MVP功能范围
+
+### 核心必备功能
+1. 基础对话交互（发送消息、显示回复）
+2. 产品画布和SWOT分析两种模式切换
+3. SVG图表生成与基础展示
+4. 图表占位符点击查看功能
+5. 简单的图表导出功能（至少一种格式）
+
+### 次要功能（可后续迭代）
+1. 消息退回和重新生成功能
+2. 多格式图表导出
+3. 对话历史持久化存储
+4. 图表编辑和自定义功能
+5. 分享和协作功能
+
+## 用户流程
+
+### 主要使用路径
+1. 用户访问应用，默认进入产品画布模式
+2. 用户在左侧输入框输入需求（如"生成一个电商产品画布"）
+3. AI回复并生成图表占位符
+4. 用户点击占位符，右侧显示完整图表
+5. 用户可切换到SWOT模式进行不同类型分析
+6. 用户可导出生成的图表
+
+### 交互细节
+- 所有按钮和可点击元素都有悬浮效果
+- 图表占位符有明显的视觉提示和点击反馈
+- 模式切换有即时视觉反馈
+- 对话消息有操作按钮的渐显效果
+
+## 技术要点
+
+### 前端技术栈
+- HTML5 + CSS3 + JavaScript
+- Tailwind CSS框架
+- Iconify图标库
+- SVG图形渲染
+
+### 数据处理
+- SVG内容本地存储
+- 对话历史内容本地存储
+- 模式状态管理
+
+### API集成
+- AI对话接口（模拟实现）
+- 图表生成服务（模拟实现）
+
+## 用户体验设计原则
+1. **简洁直观**：界面布局清晰，功能一目了然
+2. **即时反馈**：所有操作都有视觉反馈
+3. **容错设计**：异常情况有友好提示
+4. **响应式布局**：适配不同屏幕尺寸
+5. **流畅交互**：动画过渡自然，操作流畅
+
+## 成功指标
+1. 用户能够成功生成至少一种类型的图表
+2. 模式切换功能正常工作
+3. 图表能够正确导出
+4. 对话交互流畅无卡顿
+5. 界面响应时间在可接受范围内