diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..b35c902
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,3 @@
+FROM lipanski/docker-static-website:latest
+
+COPY . .
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1415ddc
--- /dev/null
+++ b/README.md
@@ -0,0 +1,196 @@
+# 产品分析工具
+
+一个基于AI对话的产品战略分析工具，帮助用户快速生成产品画布、SWOT、分析图表等，支持产品规划和决策。
+
+
+
+
+## 🌟 功能特点
+
+### 🔄 多模式切换系统
+- **产品画布模式**：生成和展示产品画布图表
+- **SWOT分析模式**：生成和展示SWOT分析图表
+- **ECharts图表模式**：生成数据可视化图表
+- **Mermaid图表模式**：生成流程图和关系图
+
+### 💬 AI对话交互系统
+- **智能对话**：基于自然语言的产品分析请求
+- **消息发送**：用户输入文本请求，支持Enter键快捷发送
+- **对话历史**：保存并展示用户与AI的完整对话记录
+- **消息操作**：支持退回、重新生成、删除消息
+
+### 📊 图表生成与展示系统
+- **SVG图表生成**：根据用户请求生成相应的SVG图表
+- **图表占位符**：对话中显示可点击的图表预览块
+- **图表渲染**：点击占位符在右侧面板完整展示SVG图表
+- **图表存储**：本地存储生成的SVG内容，支持历史查看
+- **缩放控制**：支持图表的放大、缩小和重置
+
+### 🛠️ 图表导出功能
+- **SVG下载**：将当前图表导出为SVG文件
+- **图片导出**：将当前图表导出为PNG图片格式
+- **剪贴板复制**：复制图表图片到剪贴板
+- **代码查看**：查看当前图表的SVG源代码
+
+## **所有数据均由浏览器本地缓存，清空后就清空了💨**
+
+## 🚀 快速开始
+
+### 环境要求
+- 现代浏览器（支持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图表模块
+│ ├── 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提示词
+├── 设计/ # 设计文件
+│ └── 原型.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等多种导出格式
+
+## 🔧 开发指南
+
+### 技术栈
+
+- **前端框架**：原生JavaScript (ES6+)
+- **样式框架**：Tailwind CSS
+- **图标库**：Iconify
+- **图表库**：ECharts, Mermaid
+- **Markdown解析**：Marked.js
+- **字体**：Inter Font
+
+## 📝 更新日志
+
+### v1.0.0 (2025年10月27日)
+- ✨ 初始版本发布
+
+---
+
+⭐ 如果这个项目对您有帮助，请给我们一个星标！
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..5390db0
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,9 @@
+version: '3.8'
+
+services:
+ product-canvas:
+ image: 935732994/pmtools
+ ports:
+ - "3000:3000"
+ container_name: product-canvas-app
+ restart: unless-stopped
\ No newline at end of file
diff --git a/js/core/app-shell.js b/js/core/app-shell.js
index bca508d..5c57719 100644
--- a/js/core/app-shell.js
+++ b/js/core/app-shell.js
@@ -2066,7 +2066,7 @@
}
this.apiClient.saveConfig(config);
this.setConfigStatus('success', '配置已保存');
- setTimeout(() => this.closeConfigModal(), 600);
+ //setTimeout(() => this.closeConfigModal(), 600);
}
setConfigStatus(type, message) {
diff --git a/prompts/canvas-prompt.txt b/prompts/canvas-prompt.txt
index 0e3ff02..5b919b5 100644
--- a/prompts/canvas-prompt.txt
+++ b/prompts/canvas-prompt.txt
@@ -23,48 +23,45 @@
-
+
- 产品精益画布 - 绿邻回收智能终端系统
+ 业务中台画布
-
-
+
-
+
- 问题
+ 关键业务需求
- 居民痛点:
- • 卖废品麻烦，需囤积等人
- • 老人操作困难，现有方案不友好
- • 价格不透明，缺乏信任
- 商家痛点:
- • 人工成本高，需专人管理
- • 技术门槛高，缺乏智能方案
- 现有替代方案局限:
- • 流动回收车时间不固定
- • 人工回收点成本高
+ 核心需求:
+ • 统一数据标准化
+ • 业务流程自动化
+ • 多系统无缝集成
+ 痛点:
+ • 数据孤岛，信息不通
+ • 重复开发，效率低
+ • 维护成本高，扩展难
1
-
+
- 解决方案
+ 解决方案
- 智能终端系统:
- • 平板显示二维码供扫描
- • 蓝牙电子秤自动称重
- • 大字体显示金额重量
- 多角色管理:
- • 普通用户/管理员/清运员
- • 统一平台，智能分权
+ 业务中台架构:
+ • 标准化服务接口
+ • 统一数据模型
+ • 模块化业务组件
+ 技术实现:
+ • 微服务架构
+ • API网关管理
4
@@ -73,14 +70,15 @@
- 独特卖点
+ 独特卖点
- 对用户价值:
- • 扫码即用，操作超简单
- • 价格透明，立即到账
- 对商家价值:
- • 零人工成本，智能管理
- • 稳定增收，吸引客流
+ 价值体现:
+ • 提高业务响应速度
+ • 降低重复开发成本
+ • 促进跨部门协作
+ 竞争优势:
+ • 灵活可扩展的架构
+ • 易于快速集成新业务
3
@@ -91,32 +89,32 @@
门槛优势
- 产品壁垒:
- • 老人友好设计(市场空白)
- • 低成本智能化方案
+ 技术壁垒:
+ • 统一中台数据标准
+ • 复杂业务模型抽象能力
运营壁垒:
- • 点位网络效应
- • 先发优势抢占资源
+ • 多业务系统整合经验
+ • 持续迭代优化机制
9
-
+
- 客户群体分类
+ 目标客户
- 核心用户 (C端):
- • 社区中老年人 (扫码即用)
- • 环保意识强的年轻家庭
- • 图方便的上班族
- 合作伙伴 (B端):
- • 社区超市、便利店
- • 快递驿站、物业服务点
- 需求特征:
- • 操作简单、零成本增收
- • 智能化管理、吸引客流
+ 内部客户:
+ • 业务部门需求方
+ • IT开发团队
+ • 数据分析团队
+ 外部客户:
+ • 合作伙伴系统
+ • 第三方服务平台
+ 需求特点:
+ • 灵活定制服务
+ • 高可用稳定性
2
@@ -128,12 +126,12 @@
关键指标
- 运营指标:
- • 单终端日均交易量
- • 终端网络覆盖社区数
- 用户指标:
- • 操作成功率、用户满意度
- • 用户复购率、推荐率
+ 性能指标:
+ • 接口响应时间
+ • 系统可用率
+ 业务指标:
+ • 业务组件复用率
+ • 需求响应周期
8
@@ -144,12 +142,12 @@
渠道
- 线下布点:
- • 社区超市、快递站合作
- • 与物业/居委会合作
- 用户触达:
- • 微信生态扫一扫直达
- • 业主群推广分享
+ 内部推广:
+ • 跨部门沟通会议
+ • 内部培训与宣讲
+ 技术支持:
+ • 开发者门户
+ • 技术文档和示例
5
@@ -161,12 +159,13 @@
成本分析
- 单点成本:
- • 硬件成本: 1000元/终端 • 部署成本: 2000元/点
- 运营成本:
- • 技术维护、云服务 • 清运物流、客服支持
- 分成成本:
- • 与场地方交易额分账
+ 建设成本:
+ • 中台架构设计与开发
+ • 统一数据平台建设
+ 运营成本:
+ • 服务器及云资源
+ • 技术支持团队
+ • 持续维护与升级
7
@@ -177,12 +176,13 @@
收入分析
- 主要收入流:
- • 废品回收差价 (终端回收价 vs 批发销售价的差额) - 核心收入
- • 与合作场地按交易量分成 - 激励合作
- 增值收入流:
- • 规模化后的数据服务收入 • 绿色积分商城佣金
- • 单点投入3000元，预期4-10个月回本
+ 成本节约:
+ • 复用业务组件减少开发
+ • 降低维护及切换成本
+ 业务增长:
+ • 快速支持新业务上线
+ • 提升客户满意度与留存
+ • 促进多业务协同增效
6
diff --git a/prompts/swot-prompt.txt b/prompts/swot-prompt.txt
index 1f170f7..e80bb84 100644
--- a/prompts/swot-prompt.txt
+++ b/prompts/swot-prompt.txt
@@ -49,11 +49,11 @@ SWOT分析应包含以下四个维度：
- SWOT战略分析模板
+ 业务中台SWOT分析
- Strengths 优势 | Weaknesses 劣势 | Opportunities 机会 | Threats 威胁
+ Strengths 优势 | Weaknesses 劣势 | Opportunities 机会 | Threats 威胁
-
+
@@ -61,15 +61,15 @@ SWOT分析应包含以下四个维度：
S - 内部优势 (Strengths)
- 核心能力:
- • 技术优势、专利技术、专业团队
- • 品牌声誉、客户忠诚度
- 资源优势:
- • 资金实力、供应链优势
- • 渠道资源、合作伙伴关系
- 运营优势:
- • 成本控制、效率优势
- • 组织文化、创新能力
+ 核心竞争力:
+ • 统一数据与业务模型，提升复用效率
+ • 强大的技术架构支持，高可扩展性
+ 技术优势:
+ • 微服务架构与API治理
+ • 自动化运维与持续集成能力
+ 团队能力:
+ • 具备多领域业务经验的复合型团队
+ • 高效的跨部门协作机制
S
@@ -79,15 +79,15 @@ SWOT分析应包含以下四个维度：
W - 内部劣势 (Weaknesses)
- 资源局限:
- • 资金短缺、人才缺失
- • 技术短板、设备落后
- 运营问题:
- • 管理混乱、流程不完善
- • 成本过高、效率低下
- 市场劣势:
- • 品牌知名度低、客户基础薄弱
- • 产品竞争力不足、市场份额小
+ 资源限制:
+ • 初期投入高，资金压力大
+ • 部分遗留系统难以整合
+ 技术短板:
+ • 技术复杂度高，学习曲线陡峭
+ • 数据治理和质量控制不足
+ 运营问题:
+ • 业务需求快速变化导致中台迭代压力大
+ • 部分部门对中台依赖和理解不足
W
@@ -97,15 +97,15 @@ SWOT分析应包含以下四个维度：
O - 外部机会 (Opportunities)
- 市场机会:
- • 新兴市场增长、政策扶持
- • 消费趋势变化、需求增长
- 技术机会:
- • 新技术应用、数字化转型
- • 产业链升级、技术合作
- 合作机会:
- • 战略联盟、并购机会
- • 国际化扩张、跨界合作
+ 市场趋势:
+ • 数字化转型加速，企业对中台需求增加
+ • 多行业中台解决方案兴起，市场空间广阔
+ 政策支持:
+ • 政府支持信息化建设和智能制造
+ • 数据安全与合规政策促进规范化建设
+ 技术发展:
+ • 云计算、大数据、AI等技术助力中台升级
+ • 跨界合作和生态圈共建带来新机遇
O
@@ -115,15 +115,15 @@ SWOT分析应包含以下四个维度：
T - 外部威胁 (Threats)
- 竞争威胁:
- • 新进入者、替代产品
- • 价格战、市场份额争夺
- 环境威胁:
- • 经济下行、政策变化
- • 供应链风险、原材料涨价
- 其他威胁:
- • 技术变革冲击、消费者偏好变化
- • 法律法规风险、地缘政治影响
+ 竞争压力:
+ • 同行业中台方案竞争激烈
+ • 新兴技术和替代方案快速涌现
+ 市场风险:
+ • 业务需求多变，忽视中台价值可能受限
+ • 投资回报周期较长，影响持续投入
+ 技术颠覆:
+ • 新技术架构可能替代现有中台架构
+ • 数据安全及隐私风险带来的法律挑战
T