# 产品画布/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. 界面响应时间在可接受范围内