From dd930805e094bde75eb58730f6796a0f4f56edbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B2=E6=82=A6?= Date: Mon, 27 Oct 2025 17:59:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E6=8F=90=E7=A4=BA?= =?UTF-8?q?=E8=AF=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Dockerfile | 3 + README.md | 196 ++++++++++++++++++++++++++++++++++++++ docker-compose.yml | 9 ++ js/core/app-shell.js | 2 +- prompts/canvas-prompt.txt | 146 ++++++++++++++-------------- prompts/swot-prompt.txt | 78 +++++++-------- 6 files changed, 321 insertions(+), 113 deletions(-) create mode 100644 Dockerfile create mode 100644 README.md create mode 100644 docker-compose.yml 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、分析图表等，支持产品规划和决策。 + +![纯前端JS](https://img.shields.io/badge/纯前端-JS-informational) +![AI驱动](https://img.shields.io/badge/AI驱动--important) + +## 🌟 功能特点 + +### 🔄 多模式切换系统 +- **产品画布模式**：生成和展示产品画布图表 +- **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