212 lines
7.1 KiB
Markdown
212 lines
7.1 KiB
Markdown
# 产品分析工具
|
||
|
||
一个基于AI对话的产品战略分析工具，帮助用户快速生成产品画布、SWOT、分析图表等，支持产品规划和决策。
|
||
|
||
|
||
|
||
|
||
## 🌟 功能特点
|
||
|
||
### 🔄 多模式切换系统
|
||
- **产品画布模式**：生成和展示产品画布图表
|
||
- **SWOT分析模式**：生成和展示SWOT分析图表
|
||
- **ECharts图表模式**：生成数据可视化图表
|
||
- **Mermaid图表模式**：生成流程图和关系图
|
||
- **落地页生成模式**：基于提示词流式生成完整 HTML 落地页并实时预览
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
### 💬 AI对话交互系统
|
||
- **智能对话**：基于自然语言的产品分析请求
|
||
- **消息发送**：用户输入文本请求，支持Enter键快捷发送
|
||
- **对话历史**：保存并展示用户与AI的完整对话记录
|
||
- **消息操作**：支持退回、重新生成、删除消息
|
||
|
||
### 📊 图表生成与展示系统
|
||
- **SVG图表生成**：根据用户请求生成相应的SVG图表
|
||
- **图表占位符**：对话中显示可点击的图表预览块
|
||
- **图表渲染**：点击占位符在右侧面板完整展示SVG图表
|
||
- **图表存储**：本地存储生成的SVG内容，支持历史查看
|
||
- **缩放控制**：支持图表的放大、缩小和重置
|
||
|
||
### 🛠️ 图表导出功能
|
||
- **SVG下载**：将当前图表导出为SVG文件
|
||
- **图片导出**：将当前图表导出为PNG图片格式
|
||
- **剪贴板复制**：复制图表图片到剪贴板
|
||
- **代码查看**：查看当前图表的SVG源代码
|
||
- **页面预览**：对落地页生成结果进行 98% 视窗尺寸的模态预览或一键新窗口打开
|
||
|
||
## **所有数据均由浏览器本地缓存，清空后就清空了💨**
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
- 现代浏览器（支持ES6+）
|
||
|
||
#### 方法1：本地运行
|
||
|
||
下载下来用GoLive启动下；或者直接打开`index.html`
|
||
|
||
#### 方法2：使用Docker
|
||
```bash
|
||
# 构建并运行容器
|
||
docker-compose up -d
|
||
|
||
# 在浏览器中访问
|
||
open http://localhost:3000
|
||
```
|
||
|
||
docker-compose.yml
|
||
|
||
``` docker-compose.yml
|
||
version: '3.8'
|
||
|
||
services:
|
||
product-canvas:
|
||
image: 935732994/pmtools
|
||
ports:
|
||
- "3000:3000"
|
||
restart: unless-stopped
|
||
```
|
||
|
||
|
||
### 配置API
|
||
|
||
1. 点击右上角的"API配置"按钮
|
||
2. 填写以下信息：
|
||
- **API URL**：您的AI服务API地址
|
||
- **API Key**：您的API密钥
|
||
- **模型**：选择使用的AI模型（如gpt-4）
|
||
3. 点击"保存配置"完成设置
|
||
4. 点击"测试连接"验证配置，先保存再测试
|
||
> 有些API会出现 失败情况 `连接测试失败: NetworkError when attempting to fetch resource.` 这时需要找不失败的💨
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
产品画布/
|
||
├── index.html # 主页面
|
||
├── css/
|
||
│ └── style.css # 自定义样式
|
||
├── js/
|
||
│ ├── app.js # 应用入口
|
||
│ ├── apiclient.js # API客户端
|
||
│ ├── utils.js # 工具函数
|
||
│ ├── core/ # 核心模块
|
||
│ │ ├── app-shell.js # 应用外壳
|
||
│ │ ├── module-registry.js # 模块注册表
|
||
│ │ └── module-runtime.js # 模块运行时
|
||
│ ├── modules/ # 功能模块
|
||
│ │ ├── product-canvas.js # 产品画布模块
|
||
│ │ ├── swot.js # SWOT分析模块
|
||
│ │ ├── echarts.js # ECharts图表模块
|
||
│ │ ├── mermaid.js # Mermaid图表模块
|
||
│ │ └── onepage.js # 落地页生成模块
|
||
│ ├── services/ # 服务层
|
||
│ │ ├── conversation-service.js # 对话服务
|
||
│ │ └── storage-service.js # 存储服务
|
||
│ └── renderers/ # 渲染器
|
||
├── libs/ # 第三方库
|
||
│ ├── css/ # 样式库
|
||
│ ├── fonts/ # 字体文件
|
||
│ └── js/ # JavaScript库
|
||
├── prompts/ # AI提示词
|
||
│ ├── canvas-prompt.txt # 产品画布提示词
|
||
│ ├── swot-prompt.txt # SWOT分析提示词
|
||
│ ├── echarts-prompt.txt # ECharts提示词
|
||
│ ├── mermaid-prompt.txt # Mermaid提示词
|
||
│ └── onepage-prompt.txt # 落地页提示词
|
||
├── 设计/ # 设计文件
|
||
│ └── 原型.html # 设计原型
|
||
├── 功能概述.md # 功能说明文档
|
||
├── docker-compose.yml # Docker编排文件
|
||
├── Dockerfile # Docker镜像构建文件
|
||
└── README.md # 项目说明文档
|
||
```
|
||
|
||
## 🎯 使用指南
|
||
|
||
### 基本使用流程
|
||
|
||
1. **选择模式**：点击顶部的模式按钮选择所需的分析类型
|
||
2. **输入需求**：在左侧对话框中描述您的产品或分析需求
|
||
3. **生成图表**：AI将根据您的需求生成相应的分析图表
|
||
4. **查看图表 / 页面**：点击对话中的占位符在右侧查看完整内容
|
||
5. **导出结果**：使用底部工具栏导出、复制或全屏预览
|
||
|
||
### 产品画布模式
|
||
|
||
产品画布模式帮助您快速构建产品战略框架：
|
||
|
||
```
|
||
示例输入：
|
||
"请为我的社区废品回收智能终端系统生成一个产品画布"
|
||
```
|
||
|
||
生成的画布包含：
|
||
- 问题分析
|
||
- 客户群体
|
||
- 独特卖点
|
||
- 解决方案
|
||
- 渠道策略
|
||
- 收入分析
|
||
- 成本分析
|
||
- 关键指标
|
||
- 门槛优势
|
||
|
||
### SWOT分析模式
|
||
|
||
SWOT分析模式帮助您评估项目的优势、劣势、机会和威胁：
|
||
|
||
```
|
||
示例输入：
|
||
"请对我的在线教育平台进行SWOT分析"
|
||
```
|
||
|
||
生成的分析包含：
|
||
- **优势(Strengths)**：内部有利因素
|
||
- **劣势(Weaknesses)**：内部不利因素
|
||
- **机会(Opportunities)**：外部有利因素
|
||
- **威胁(Threats)**：外部不利因素
|
||
|
||
### 高级功能
|
||
|
||
#### 消息操作
|
||
- **退回**：回退到指定消息，删除该消息之后的所有对话
|
||
- **重新生成**：针对最后一条AI消息重新请求生成内容
|
||
- **删除**：删除特定消息及其关联的图表
|
||
|
||
#### 图表操作
|
||
- **缩放控制**：使用工具栏按钮调整图表大小
|
||
- **全屏查看**：在右侧面板获得更好的查看体验
|
||
- **多格式导出**：支持SVG、PNG等多种导出格式
|
||
- **落地页预览**：使用“预览落地页”按钮打开 98% 视窗大小的模态窗口，可再一键在新标签页打开完整 HTML
|
||
|
||
## 🔧 开发指南
|
||
|
||
### 技术栈
|
||
|
||
- **前端框架**：原生JavaScript (ES6+)
|
||
- **样式框架**：Tailwind CSS
|
||
- **图标库**：Iconify
|
||
- **图表库**：ECharts, Mermaid
|
||
- **Markdown解析**：Marked.js
|
||
- **字体**：Inter Font
|
||
|
||
## 📝 更新日志
|
||
|
||
### 2025年11月6日
|
||
- 🚀 增加了落地页模块
|
||
|
||
### v1.0.0 (2025年10月27日)
|
||
- ✨ 初始版本发布
|
||
|
||
---
|
||
|
||
⭐ 如果这个项目对您有帮助，请给我们一个星标！
|