feat: Update Smart Mind Map plugin to version 0.8.0 with enhanced features and improved styling
- Added author information and funding URL to the plugin metadata. - Improved description for better clarity on functionality. - Refactored CSS for better responsiveness and visual appeal, including dark theme support. - Enhanced JavaScript for improved user interaction, including new controls for zooming and theme toggling. - Updated download functionality to support PNG format with improved scaling and styling. - Added user context extraction for better user information handling. - Updated error handling and logging for better debugging and user feedback. - Translated plugin title and description to Chinese for localization.
This commit is contained in:
fujie
@@ -1,6 +1,6 @@
|
||||
# 思维导图 - 思维导图生成插件
|
||||
|
||||
**作者:** [Fu-Jie](https://github.com/Fu-Jie) | **版本:** 0.7.2 | **许可证:** MIT
|
||||
**作者:** [Fu-Jie](https://github.com/Fu-Jie) | **版本:** 0.8.0 | **许可证:** MIT
|
||||
|
||||
> **重要提示**：为了确保所有插件的可维护性和易用性，每个插件都应附带清晰、完整的文档，以确保其功能、配置和使用方法得到充分说明。
|
||||
|
||||
@@ -10,22 +10,28 @@
|
||||
|
||||
## 核心特性
|
||||
|
||||
- ✅ **智能文本分析**: 自动识别文本的核心主题、关键概念和层次结构
|
||||
- ✅ **交互式可视化**: 基于 Markmap.js 生成美观的交互式思维导图
|
||||
- ✅ **多语言支持**: 根据用户语言自动调整输出
|
||||
- ✅ **实时渲染**: 在聊天界面中直接渲染思维导图，无需跳转
|
||||
- ✅ **导出功能**: 支持复制 SVG 代码和 Markdown 源码
|
||||
- ✅ **自定义配置**: 可配置 LLM 模型、最小文本长度等参数
|
||||
- ✅ **智能文本分析**：自动识别文本的核心主题、关键概念和层次结构
|
||||
- ✅ **交互式可视化**：基于 Markmap.js 生成美观的交互式思维导图
|
||||
- ✅ **高分辨率 PNG 导出**：导出高质量的 PNG 图片（9 倍分辨率，约 1-2MB 文件大小）
|
||||
- ✅ **完整控制面板**：缩放控制（+/-/重置）、展开层级选择（全部/2级/3级）、全屏模式
|
||||
- ✅ **主题切换**：手动主题切换按钮（亮色/暗色）与自动主题检测
|
||||
- ✅ **深色模式支持**：完整的深色模式支持，自动检测与手动覆盖
|
||||
- ✅ **多语言支持**：根据用户语言自动调整输出
|
||||
- ✅ **实时渲染**：在聊天界面中直接渲染思维导图，无需跳转
|
||||
- ✅ **导出功能**：支持 PNG、SVG 代码和 Markdown 源码导出
|
||||
- ✅ **自定义配置**：可配置 LLM 模型、最小文本长度等参数
|
||||
|
||||
---
|
||||
|
||||
## 工作原理
|
||||
|
||||
1. **文本提取**: 从用户消息中提取文本内容（自动过滤 HTML 代码块）
|
||||
2. **智能分析**: 使用配置的 LLM 模型分析文本结构
|
||||
3. **Markdown 生成**: 将分析结果转换为 Markmap 兼容的 Markdown 格式
|
||||
4. **可视化渲染**: 在 HTML 模板中使用 Markmap.js 渲染思维导图
|
||||
5. **交互展示**: 在聊天界面中以可交互的形式展示给用户
|
||||
1. **文本提取**：从用户消息中提取文本内容（自动过滤 HTML 代码块）
|
||||
2. **智能分析**：使用配置的 LLM 模型分析文本结构
|
||||
3. **Markdown 生成**：将分析结果转换为 Markmap 兼容的 Markdown 格式
|
||||
4. **可视化渲染**：在 HTML 模板中使用 Markmap.js 渲染思维导图，并优化字体层级（H1：22px 粗体，H2：18px 粗体）
|
||||
5. **交互展示**：以可交互的形式展示给用户，并提供完整的控制面板
|
||||
6. **主题检测**：自动检测并应用当前 OpenWebUI 的主题（亮色/暗色模式）
|
||||
7. **导出选项**：提供 PNG（高分辨率）、SVG 和 Markdown 导出功能
|
||||
|
||||
---
|
||||
|
||||
@@ -72,6 +78,8 @@
|
||||
| `show_status` | `true` | 是否在聊天界面显示操作状态更新（如"正在分析..."）。 |
|
||||
| `LLM_MODEL_ID` | `gemini-2.5-flash` | 用于文本分析的 LLM 模型 ID。推荐使用快速且经济的模型。 |
|
||||
| `MIN_TEXT_LENGTH` | `100` | 进行思维导图分析所需的最小文本长度（字符数）。文本过短将无法生成有效的导图。 |
|
||||
| `CLEAR_PREVIOUS_HTML` | `false` | 在生成新的思维导图时，是否清除之前由插件生成的 HTML 内容。 |
|
||||
| `MESSAGE_COUNT` | `1` | 用于生成思维导图的最近消息数量（1-5）。 |
|
||||
|
||||
---
|
||||
|
||||
@@ -102,10 +110,20 @@
|
||||
|
||||
### 导出功能
|
||||
|
||||
生成的思维导图支持两种导出方式：
|
||||
生成的思维导图支持三种导出方式：
|
||||
|
||||
1. **复制 SVG 代码**: 点击"复制 SVG 代码"按钮，可将思维导图的 SVG 格式复制到剪贴板
|
||||
2. **复制 Markdown**: 点击"复制 Markdown"按钮，可将原始 Markdown 格式复制到剪贴板
|
||||
1. **下载 PNG**：点击“📥 下载 PNG”按钮，可将思维导图导出为高分辨率 PNG 图片（9 倍分辨率，约 1-2MB 文件大小）
|
||||
2. **复制 SVG 代码**：点击“复制 SVG 代码”按钮，可将思维导图的 SVG 格式复制到剪贴板
|
||||
3. **复制 Markdown**：点击“复制 Markdown”按钮，可将原始 Markdown 格式复制到剪贴板
|
||||
|
||||
### 控制面板
|
||||
|
||||
交互式思维导图包含完整的控制面板：
|
||||
|
||||
- **缩放控制**：`+`（放大）、`-`（缩小）、`↻`（重置视图）
|
||||
- **展开层级**：在“全部”、“2 级”、“3 级”之间切换，控制节点展开深度
|
||||
- **全屏模式**：进入全屏模式，获得更好的查看体验
|
||||
- **主题切换**：手动在亮色和暗色主题之间切换
|
||||
|
||||
---
|
||||
|
||||
@@ -113,20 +131,38 @@
|
||||
|
||||
### 前端渲染
|
||||
|
||||
- **Markmap.js**: 开源的思维导图渲染引擎
|
||||
- **D3.js**: 数据可视化基础库
|
||||
- **响应式设计**: 适配不同屏幕尺寸
|
||||
- **Markmap.js**：开源的思维导图渲染引擎
|
||||
- **D3.js**：数据可视化基础库
|
||||
- **响应式设计**：适配不同屏幕尺寸
|
||||
- **字体层级**：优化的字体排版，H1（22px 粗体）和 H2（18px 粗体），提供更好的可读性
|
||||
|
||||
### PNG 导出技术
|
||||
|
||||
- **SVG 转 Canvas**：将思维导图 SVG 转换为 Canvas 以导出 PNG
|
||||
- **ForeignObject 处理**：正确处理 SVG 元素中的 HTML 内容
|
||||
- **高分辨率**：9 倍缩放因子，输出打印级质量（约 1-2MB 文件大小）
|
||||
- **主题保持**：在导出的 PNG 中保持当前主题（亮色/暗色）
|
||||
|
||||
### 主题检测机制
|
||||
|
||||
自动检测并应用主题，具有 4 级优先级：
|
||||
|
||||
1. **显式切换**：用户手动点击主题切换按钮（最高优先级）
|
||||
2. **Meta 标签**：从父文档读取 `<meta name="theme-color">`
|
||||
3. **Class/Data-Theme**：检查父文档 HTML/body 的 `class` 或 `data-theme` 属性
|
||||
4. **系统偏好**：回退到 `prefers-color-scheme` 媒体查询
|
||||
|
||||
### 后端处理
|
||||
|
||||
- **LLM 集成**: 通过 `generate_chat_completion` 调用配置的模型
|
||||
- **文本预处理**: 自动过滤 HTML 代码块，提取纯文本内容
|
||||
- **格式转换**: 将 LLM 输出转换为 Markmap 兼容的 Markdown 格式
|
||||
- **LLM 集成**：通过 `generate_chat_completion` 调用配置的模型
|
||||
- **文本预处理**：自动过滤 HTML 代码块，提取纯文本内容
|
||||
- **格式转换**：将 LLM 输出转换为 Markmap 兼容的 Markdown 格式
|
||||
|
||||
### 安全性
|
||||
### 安全性增强
|
||||
|
||||
- **XSS 防护**: 自动转义 `</script>` 标签，防止脚本注入
|
||||
- **输入验证**: 检查文本长度，避免无效请求
|
||||
- **XSS 防护**：自动转义 `</script>` 标签，防止脚本注入
|
||||
- **输入验证**：检查文本长度，避免无效请求
|
||||
- **非冒泡事件**：按钮点击使用 `stopPropagation()` 防止导航拦截
|
||||
|
||||
---
|
||||
|
||||
@@ -170,6 +206,30 @@
|
||||
- 验证生成的 Markdown 格式是否符合 Markmap 规范
|
||||
- 尝试刷新页面重新渲染
|
||||
|
||||
### 问题：PNG 导出不工作
|
||||
|
||||
**现象：**PNG 下载按钮不工作或生成空白/损坏的图片
|
||||
|
||||
**解决方案：**
|
||||
|
||||
- 确保浏览器支持 HTML5 Canvas API（所有现代浏览器都支持）
|
||||
- 检查浏览器控制台是否有与 `toDataURL()` 或 Canvas 渲染相关的错误
|
||||
- 确保思维导图在点击导出前已完全渲染
|
||||
- 尝试刷新页面并重新生成思维导图
|
||||
- 使用 Chrome 或 Firefox，获得最佳 PNG 导出兼容性
|
||||
|
||||
### 问题：主题未自动检测
|
||||
|
||||
**现象：**思维导图不匹配 OpenWebUI 主题颜色
|
||||
|
||||
**解决方案：**
|
||||
|
||||
- 在 OpenWebUI 设置 → 界面 → 产物中，启用“iframe 沙盒允许同源访问”
|
||||
- 验证 iframe 的 sandbox 属性包含 `allow-same-origin` 和 `allow-scripts`
|
||||
- 确保父文档有 `<meta name="theme-color">` 标签或主题 class/属性
|
||||
- 使用手动主题切换按钮覆盖自动检测
|
||||
- 检查浏览器控制台是否有跨域错误
|
||||
|
||||
### 问题：导出功能不工作
|
||||
|
||||
**解决方案：**
|
||||
@@ -197,11 +257,52 @@
|
||||
- 对于特别长的文本，考虑先进行摘要再生成思维导图
|
||||
- 在生产环境中关闭 `show_status` 以减少界面更新
|
||||
|
||||
4. **导出质量**
|
||||
- **PNG 导出**：最适合演示、文档和分享（9 倍分辨率适合打印）
|
||||
- **SVG 导出**：最适合在矢量图形工具中进一步编辑（无限缩放）
|
||||
- **Markdown 导出**：最适合版本控制、协作和重新生成
|
||||
|
||||
5. **主题一致性**
|
||||
- 启用同源访问以实现自动主题检测
|
||||
- 如果自动检测失败，使用手动主题切换
|
||||
- 在切换到所需主题后导出 PNG，以保持视觉一致性
|
||||
|
||||
---
|
||||
|
||||
## 依赖要求
|
||||
|
||||
本插件仅使用 OpenWebUI 的内置依赖，**无需安装额外的软件包。**
|
||||
|
||||
---
|
||||
|
||||
## 更新日志
|
||||
|
||||
### v0.7.2 (当前版本)
|
||||
### v0.8.0（当前版本）
|
||||
|
||||
**主要功能：**
|
||||
|
||||
- 添加高分辨率 PNG 导出（9 倍分辨率，约 1-2MB 文件大小）
|
||||
- 实现完整的控制面板，包含缩放控制（+/-/重置）
|
||||
- 添加展开层级选择（全部/2级/3级）
|
||||
- 集成全屏模式，自动适应
|
||||
- 添加手动主题切换按钮（亮色/暗色）
|
||||
- 实现 4 级优先级的自动主题检测
|
||||
|
||||
**改进项：**
|
||||
|
||||
- 优化字体层级（H1：22px 粗体，H2：18px 粗体）
|
||||
- 增强深色模式，完整的主题支持
|
||||
- 改进 PNG 导出技术（SVG 转 Canvas，处理 foreignObject）
|
||||
- 在导出的 PNG 图片中保持主题
|
||||
- 增强安全性，按钮事件使用非冒泡机制
|
||||
|
||||
**Bug 修复：**
|
||||
|
||||
- 修复跨域 iframe 中的主题检测问题
|
||||
- 解决 SVG 中 HTML 内容的 PNG 导出问题
|
||||
- 改进与 OpenWebUI 主题系统的兼容性
|
||||
|
||||
### v0.7.2
|
||||
|
||||
- 优化文本提取逻辑，自动过滤 HTML 代码块
|
||||
- 改进错误处理和用户反馈
|
||||
|
||||
Reference in New Issue
Block a user