7dcc89151a
feat: 实现单服务商多 API 配置功能
...
- 在 functions.php 中添加多 API 管理函数：
* argon_get_provider_apis() - 获取提供商的所有 API 配置
* argon_add_provider_api() - 添加 API 配置
* argon_update_provider_api() - 更新 API 配置
* argon_delete_provider_api() - 删除 API 配置
* argon_set_active_api() - 设置当前使用的 API
- 修改 argon_get_ai_provider_config() 函数支持多 API
- 添加 AJAX 接口用于管理 API 配置
- 在 settings.php 中重构 AI 配置界面：
* 显示已配置的 API 列表
* 支持添加/编辑/删除 API 配置
* 单选框选择当前使用的 API
* 添加 JavaScript 交互逻辑
- 修改设置保存逻辑，保存多 API 配置数组
- 向后兼容：自动迁移旧的单 API 配置
- 每个提供商可配置多个 API，方便负载均衡和备用切换
2026-01-26 11:14:35 +08:00
2e2ddc59da
feat: 实现多 API 管理系统
...
- 为每个 AI 提供商添加独立的配置（API 密钥、端点、模型）
- 新增 argon_get_ai_provider_config() 辅助函数获取提供商配置
- 更新设置页，为 10 个提供商分别显示配置表单
- 添加密码显示/隐藏切换按钮
- 每个提供商独立的模型刷新按钮
- 切换服务商时自动显示对应配置
- 更新所有 API 调用函数使用新配置结构
- 更新设置保存逻辑，保存所有提供商配置
- 支持同时配置多个 AI 服务，灵活切换使用
2026-01-26 11:10:07 +08:00
e9bae85802
feat: 添加小米 Mimo AI 模型支持
...
- 在设置页 AI 服务商列表中添加小米 Mimo 选项
- 实现 argon_call_xiaomi_api() 函数，使用 OpenAI 兼容格式
- 实现 argon_get_xiaomi_models() 模型列表获取函数
- 在 AI 摘要生成中添加 xiaomi 分支支持
- 在垃圾评论检测中添加小米 Mimo 端点配置
- 在关键词提取中添加小米 Mimo 端点配置
- 在批量垃圾评论检测中添加小米 Mimo 端点配置
- 默认模型：MiMo-V2-Flash
- API 端点：https://api.mimo.xiaomi.com/v1/chat/completions
2026-01-26 11:01:51 +08:00
4aaa3b7772
fix: 增强 Mermaid 代码提取的鲁棒性
...
- 使用 innerText 替代 textContent，更好地保留换行符
- 添加详细的调试日志，记录原始和最终提取的代码
- 添加代码完整性验证，检测过短的代码
- 修复代码被截断的问题
2026-01-25 13:39:29 +08:00
07cd43e2bd
docs: 完成任务 2.3 - 添加语法错误处理和友好提示
...
- 验证错误捕获机制完整（同步和异步）
- 验证友好错误提示已实现
- 验证原始代码查看功能
- 验证错误类型识别和行号提取
- 验证完整的 CSS 样式（日间/夜间模式）
- 创建测试文档和总结文档
- 更新任务状态为已完成
- 满足需求 2.5, 7.1-7.4
2026-01-25 13:18:12 +08:00
577c5c2a3c
feat: 优化 Mermaid 初始化配置，支持多种图表类型
...
- 添加 ER 图配置（需求 2.3）
- 添加状态图配置（需求 2.4）
- 添加类图、饼图、Git 图、用户旅程图配置
- 优化注释，明确标注需求对应关系
- 保持主题自动切换和安全级别配置（需求 2.1）
- 完成任务 2.2
2026-01-25 13:13:00 +08:00
2fa1948501
feat: 实现 Mermaid 库加载等待机制
...
- 添加 waitForMermaid() 函数，使用 Promise 实现异步等待
- 设置超时机制（默认 5000ms），防止无限等待
- 使用轮询检查库加载状态（每 100ms 检查一次）
- 记录加载时间和状态日志，便于调试
- 将 renderAllCharts() 改为 async 函数，渲染前等待库加载
- 将 init() 函数改为 async 函数，使用 waitForMermaid() 替代原来的 setInterval
- 添加完整的 JSDoc 注释，说明参数和返回值
- 遵循项目代码规范（Tab 缩进、单引号、严格相等）
- 完成任务 2.1
2026-01-25 13:09:42 +08:00
9e4888f28c
feat: 添加 Mermaid 渲染状态标记
...
- 在渲染成功后添加 data-mermaid-rendered 属性
- 在 isRendered() 函数中检查该属性（已实现）
- 覆盖三种渲染路径：标准 API、旧版 API、init 降级方案
- 确保已渲染的代码块不会被重复渲染
- 遵循项目代码规范（Tab 缩进、单引号、JSDoc 注释）
- 完成任务 1.3
2026-01-25 13:02:16 +08:00
8f7165cede
feat: 实现 Mermaid 代码块检测函数 - 实现 detectMermaidBlocks 和 isRendered 函数，识别两种格式的 Mermaid 代码块并过滤已渲染的块
2026-01-25 12:54:45 +08:00
96287d87cd
docs: 添加文件清理总结文档
2026-01-25 12:40:47 +08:00
f5b1ac44d1
chore: 清理非必要的测试文件和文档
2026-01-25 12:39:32 +08:00
bfaeaa2ca2
docs: 完成 PJAX 和 Lazyload 代码审查和文档
...
- 创建代码审查总结文档（code-review-summary.md）
- 评估代码质量，列出优点和需要改进的地方
- 为所有关键函数提供 JSDoc 文档说明
- 包含性能优化、安全性和兼容性检查
- 提供测试建议和改进建议
- 创建 JSDoc 注释模板（jsdoc-templates.md）
- 为 80+ 个关键函数提供完整的 JSDoc 模板
- 包含参数类型、返回值和使用示例
- 涵盖 Cookie、搜索、懒加载、PJAX、评论等所有模块
- 可直接复制使用，提高开发效率
- 创建代码风格检查清单（code-style-checklist.md）
- 14 项代码风格检查，总体评分 8.2/10
- 详细的改进建议和优先级划分
- 提供 ESLint 和 Prettier 配置建议
- 包含代码提交前和审查时的检查清单
- 更新任务状态
- 标记任务 18（文档和代码审查）为已完成
总体评价：
- 代码质量良好，功能完善，性能优化到位
- 主要优点：模块化清晰、错误处理完善、性能优化充分
- 需要改进：JSDoc 注释不完整、代码风格不统一、全局变量较多
2026-01-25 09:47:13 +08:00
9f31bbe372
feat: 实现 Mermaid 导出功能
...
- 添加导出按钮到工具栏，支持 PNG 和 SVG 格式导出
- 实现导出菜单，点击导出按钮显示格式选项
- PNG 导出：将 SVG 转换为 PNG 图片并下载
- SVG 导出：保存 SVG 代码为文件并下载
- 导出时保持图表当前的缩放级别和样式
- 添加导出错误处理，显示友好的错误提示
- 导出菜单支持点击外部关闭
- 添加导出菜单样式，支持夜间模式
- 移动端导出菜单适配，调整按钮大小和位置
- 错误提示自动消失（3秒后）
需求：15.1, 15.2, 15.3, 15.4, 15.5
2026-01-25 01:59:27 +08:00
1c15e46ad6
feat: 实现 Mermaid 全屏模式
...
- 在工具栏添加全屏按钮（⛶ 图标）
- 实现全屏模式进入和退出功能
- 全屏模式下保持缩放和拖拽功能可用
- 支持 ESC 键退出全屏
- 退出全屏时恢复图表原始状态（缩放级别和滚动位置）
- 全屏模式下禁用页面滚动
- 添加全屏按钮激活状态样式
- 在清理函数中添加全屏事件监听器清理
- 全屏模式下工具栏始终可见，背景更明显
- 全屏容器占满整个视口，居中显示图表
需求：14.1, 14.2, 14.3, 14.4, 14.5
2026-01-25 01:53:31 +08:00
1ec2ebc279
feat: 优化 Mermaid 响应式设计
...
- 移动端工具栏适配：按钮放大至 40px，便于触摸操作
- 双指缩放手势：支持双指捏合缩放，以触摸中心为缩放点
- 单指拖拽移动：支持单指拖拽平移图表
- 触摸事件优化：使用 requestAnimationFrame 提升响应速度
- 横屏模式优化：限制图表高度，工具栏更紧凑，隐藏提示文本
- 添加触摸距离和中心点计算辅助函数
- 完善触摸状态管理（touchstart/touchmove/touchend/touchcancel）
需求：16.1, 16.2, 16.3, 16.4, 16.5
2026-01-25 01:45:39 +08:00
6309a2236b
feat: 优化 Mermaid 错误提示显示效果
...
- 增强错误容器视觉设计（渐变背景、阴影效果、悬停动画）
- 添加错误图标脉冲动画，提升视觉吸引力
- 优化错误信息显示（错误类型标签、消息框样式）
- 新增错误行号提取功能，支持多种行号格式
- 改进代码查看区域样式（summary 悬停效果、代码块阴影）
- 完善夜间模式适配（深色渐变背景、优化颜色对比度）
- 删除重复的 CSS 样式定义（第 17050 行）
- 统一使用 .mermaid-error-* 类名规范
需求：19.1, 19.2, 19.3, 19.4, 19.5
2026-01-25 01:38:36 +08:00
66df8348be
feat: 优化 Mermaid 拖拽功能
...
- 7.1 改进拖拽响应：使用 requestAnimationFrame 优化性能，避免频繁的 DOM 操作
- 7.2 优化拖拽视觉反馈：增强光标样式，添加跨浏览器的文本选择禁用
- 7.3 智能启用拖拽：检测图表是否需要拖拽，未缩放且完全可见时自动禁用
需求：13.1, 13.2, 13.3, 13.4, 13.5
2026-01-25 01:30:21 +08:00
39d340fb49
feat: 增强 Mermaid 缩放功能
...
- 6.1 实现以鼠标为中心的缩放：滚轮缩放时自动调整滚动位置，保持鼠标指向的内容不变
- 6.2 优化缩放动画：按钮点击使用平滑过渡，滚轮缩放禁用过渡以获得更流畅的体验
- 6.3 实现智能缩放：双击图表时，默认大小放大到 2 倍，其他情况重置到 1 倍
- 6.4 优化缩放按钮状态：达到最大/最小缩放级别时自动禁用对应按钮
需求：12.1, 12.2, 12.3, 12.4, 12.5, 20.3
2026-01-25 01:25:13 +08:00
927e9c29d1
feat: 优化 Mermaid 渲染性能
...
- 12.1 实现批量渲染：使用 requestAnimationFrame 分批渲染，避免阻塞主线程
- 12.2 添加加载动画：显示加载状态和旋转动画，提供视觉反馈
- 12.3 实现延迟渲染：优先渲染视口内图表，延迟渲染视口外图表
- 12.4 优化错误处理：单个图表渲染失败不影响其他图表
需求：18.1, 18.2, 18.3, 18.4, 18.5
2026-01-25 01:13:16 +08:00
8ba6a15a8a
feat: 实现 Mermaid 主题自动同步功能
...
- 在 setDarkmode() 中触发 argon:theme-switched 事件
- 优化 reRenderCharts() 函数，保持图表缩放级别和滚动位置
- 添加淡入淡出过渡动画，提升视觉体验
- 只替换 SVG 内容，保留容器结构和控制按钮
- 主题切换失败时保持原样，不影响用户体验
需求：17.1, 17.2, 17.3, 17.4, 17.5
2026-01-25 01:03:38 +08:00
621341500f
feat: 优化 Mermaid 工具栏显示效果
...
- 实现工具栏自动隐藏：鼠标移出时自动隐藏，移入时显示
- 优化工具栏样式：使用半透明背景和毛玻璃效果
- 添加平滑的显示/隐藏动画过渡
- 为按钮添加自定义 tooltip 提示
- 支持夜间模式下的样式适配
需求：11.1, 11.2, 11.3-11.5, 20.2
2026-01-25 00:57:11 +08:00
0616150dae
feat: 实现 PJAX 内联脚本执行器
...
- 添加 executeScript() 函数：
- 创建新的 script 元素并复制内容
- 复制所有属性（包括 async、defer）
- 添加错误捕获和日志记录
- 满足需求 4.4, 4.5
- 添加 executeInlineScripts() 函数：
- 提取新页面中的所有 script 标签
- 区分内联脚本和外部脚本
- 按 DOM 顺序执行脚本
- 错误隔离机制（单个脚本失败不影响其他脚本）
- 返回执行结果统计
- 满足需求 4.1-4.4
- 在 pjax:complete 事件中调用：
- 在其他模块初始化之前执行
- 添加错误处理
- 满足需求 4.1-4.5
满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
6a45d0ab06
feat: 重构 PJAX 事件处理器，添加 Mermaid 渲染支持
...
- 优化 pjax:beforeReplace 事件：
- 添加详细的需求映射注释（需求 1.1-1.4）
- 明确说明清理内容包含 Mermaid 实例
- 优化 pjax:complete 事件：
- 添加 Mermaid 图表渲染调用（需求 3.6）
- 添加 MathJax 和 KaTeX 渲染注释
- 添加用户自定义回调注释
- 满足需求 1.5, 1.6（模块初始化和错误隔离）
- 优化 pjax:end 事件：
- 添加需求映射注释（需求 1.7）
- 保持现有功能不变
- 更新顶部注释说明：
- 明确包含 Mermaid 渲染
- 添加完整的需求映射说明
满足需求：1.1-1.7, 3.6
2026-01-25 00:41:35 +08:00
1781e3bd79
feat: 优化 Lazyload 生命周期管理
...
- 添加全局 lazyloadScrollHandler 变量，用于降级方案的清理
- 优化 lazyloadInit() 函数：
- 增强 Observer 存在性检查，添加 try-catch 错误处理
- 清理旧的滚动监听器（降级方案）
- 添加详细的调试日志
- IntersectionObserver 初始化失败时自动降级
- 优化 loadImageOptimized() 函数：
- 使用 requestAnimationFrame 优化 DOM 操作
- 图片加载失败时取消 Observer 监听
- 没有 data-src 时取消 Observer 监听
- 优化 lazyloadFallback() 降级方案：
- 保存 handler 引用到全局变量
- 所有图片加载完成后自动清理监听器
- 优化 cleanupLazyloadObserver() 函数：
- 同时清理 Observer 和滚动监听器
- 添加完善的错误处理
- 移除 cleanupEventListeners() 中的重复清理代码
满足需求：2.1, 2.2, 2.4, 2.5, 3.1-3.3, 8.2
2026-01-25 00:31:33 +08:00
8180a87b89
feat: 实现统一的资源清理管理器
...
- 封装 cleanupPjaxResources() 函数，统一管理所有资源清理
- 添加 cleanupLazyloadObserver() - 清理 Lazyload Observer
- 添加 cleanupZoomifyInstances() - 清理 Zoomify 实例
- 添加 cleanupTippyInstances() - 清理 Tippy 实例
- 添加 cleanupMermaidInstances() - 清理 Mermaid 实例和事件监听器
- 添加 cleanupDynamicStyles() - 清理动态 style 标签
- 添加 cleanupDynamicScripts() - 清理动态 script 标签
- 添加 cleanupEventListeners() - 清理事件监听器
- 每个清理函数都包含错误处理和调试日志
- 满足需求 1.1-1.4, 2.3, 6.1
2026-01-25 00:20:33 +08:00
dde868021e
feat: 添加 Mermaid 图表拖拽和提示功能
...
- 添加鼠标左键拖拽移动图表
- 拖拽时显示 grabbing 光标，平时显示 grab 光标
- 添加底部提示文本：按住 Ctrl+滚轮缩放 | 拖拽移动
- 提示文本鼠标悬停时显示，支持夜间模式
- 防止拖拽时选中文本
2026-01-24 23:41:02 +08:00
a163e7a2a0
feat: 添加 Mermaid 图表缩放功能
...
- 图表容器宽度占满，只留文章边距（margin: 20px -20px）
- 添加缩放控制按钮：放大、缩小、重置
- 支持 Ctrl+滚轮缩放
- 缩放范围：50%-300%，步进 25%
- 响应式适配：移动端自动调整边距和按钮大小
- 夜间模式适配缩放控制按钮样式
2026-01-24 23:36:12 +08:00
d59c5ba07d
fix: Mermaid 图表改为宽度固定、高度自适应
...
- SVG 宽度固定为 100%，适应容器宽度
- SVG 高度自动计算，根据内容自由伸展
- 移除所有高度限制，让图表完整显示
2026-01-24 23:33:24 +08:00
ce48c7827e
feat: 添加 Mermaid v11 本地缓存文件
...
- 下载 Mermaid v11 库到本地
- 文件大小: 2.75 MB
- 解决本地文件不存在导致回退到 CDN 的问题
- 确保本地缓存优先级生效
2026-01-24 23:18:08 +08:00
b0557d9a2a
fix: 修复 AI 垃圾评论检测架构文档中的 Mermaid 语法错误
...
- 移除 subgraph 标签中的引号，避免解析错误
- 将体育场形状节点 ([]) 改为普通方形节点 []
- 确保所有 Mermaid 图表语法兼容 v11 版本
2026-01-24 23:08:31 +08:00
d0ae1dbed7
feat: 优化 Mermaid 图表尺寸显示
...
- 添加 SVG 最大高度限制（桌面端 600px）
- 使用 Flexbox 实现图表在容器中居中显示
- 添加响应式适配（平板 500px，手机 400px）
- 设置容器最小高度 100px，避免空白过小
- 使用 width: auto !important 保持图表原始宽高比
- 创建尺寸优化测试文件和文档
解决问题：
- 低内容图表（2-3 节点）不再显示过大
- 图表尺寸更加合理，视觉协调
- 复杂图表高度限制，出现滚动条
- 移动端体验优化
2026-01-24 22:58:28 +08:00
28f0a1265e
feat: 更新 Mermaid 到 v11 并优化错误处理
...
- 更新 Mermaid 库版本从 v10 升级到 v11.12.2
- 优化错误处理逻辑，避免重复嵌套错误容器
- 修复查看源代码时可能出现的嵌套报错问题
- 改进渲染前检查，跳过已处理的错误容器和已渲染的图表
- 优化重新渲染逻辑，只处理成功渲染的图表，排除错误容器
- 增强代码提取逻辑，优先使用传入的代码参数
- 添加主题切换时的智能判断，避免不必要的重新渲染
- 更新 functions.php 中的 CDN 地址到 v11
- 更新 settings.php 中的预览功能 CDN 地址到 v11
- 改进错误容器的 DOM 结构，使用独立元素而非 innerHTML
2026-01-24 22:46:00 +08:00
679015dece
feat: AI 垃圾评论检测系统优化
...
- 实现多级 Prompt 系统（极简/标准/增强/自定义模式）
- 添加智能置信度评分系统（0-1 范围）
- 实现智能处理建议（auto/review/approve）
- 添加上下文增强功能（文章信息、用户历史、隐私脱敏）
- 实现学习机制（记录管理员审核决策，分析误判率）
- 添加 API 错误处理和自动禁用机制
- 优化设置界面（推荐配置、统计信息、错误日志）
- 创建反馈数据库表用于学习优化
- 实现批量扫描功能（使用新的检测引擎）
- 添加隐私保护级别配置（标准/严格模式）
核心类：
- Argon_Spam_Prompt_Engine: Prompt 管理和生成
- Argon_Spam_Context_Builder: 上下文信息构建
- Argon_Spam_Threshold_Manager: 阈值管理
- Argon_Spam_AI_Detector: 主控制器
- Argon_Spam_Learning_Module: 学习和统计
- Argon_Spam_API_Error_Handler: 错误处理
2026-01-24 22:37:41 +08:00
4200ea118c
debug: 添加详细的代码提取调试日志
...
- 在 convertMermaidCodeblocks 中添加代码长度和内容日志
- 在 extractMermaidCode 中添加详细的提取信息
- 输出元素 HTML 以便排查问题
2026-01-24 21:57:23 +08:00
4fc62692be
docs: 添加 Mermaid 故障排查指南
...
- 常见错误及解决方案
- 调试工具和方法
- FAQ 常见问题
- 详细的排查步骤
2026-01-24 21:51:05 +08:00
094a55b80a
fix: 修复 Mermaid 代码块缩进和 API 兼容性问题
...
- 添加智能缩进清理：移除统一缩进但保持相对缩进
- 添加 Mermaid API 版本检测和兼容性处理
- 支持 Mermaid 10.x (render Promise API)
- 支持 Mermaid 8.x (mermaidAPI.render 回调 API)
- 添加降级方案 (mermaid.init 方法)
- 增强错误处理和调试日志
- 修复代码提取时的空格问题
2026-01-24 21:49:50 +08:00
a7af3877b8
fix: 修复测试页面的 Mermaid 渲染错误处理
2026-01-24 21:43:42 +08:00
e138848eac
docs: 添加 Mermaid 代码块魔改实施总结
2026-01-24 21:36:58 +08:00
29bfd284e0
feat: 实现 Mermaid 代码块魔改支持
...
- 添加 convertMermaidCodeblocks() 函数，在代码高亮前拦截 mermaid 代码块
- 支持标准 Markdown 代码块 (\\\mermaid) 渲染
- 更新 detectMermaidBlocks() 添加 mermaid-from-codeblock 选择器
- 更新 extractMermaidCode() 支持新容器类型
- 创建测试文件 test-codeblock-magic.html
- 更新用户文档、开发者文档和 FAQ
- 完全绕过代码高亮和 WordPress 格式化
- 支持 PJAX 页面切换
- 特殊字符和换行符正确保留
2026-01-24 21:35:12 +08:00
e5e8a245be
docs: 添加 Mermaid 支持方案对比文档
2026-01-24 21:04:04 +08:00
32c2a72d2b
feat: 添加 Mermaid Shortcode 支持（推荐方式）
...
- 新增 [mermaid]...[/mermaid] shortcode
- 支持 theme、width、height、align 参数
- 不依赖 WP-Markdown 的处理方式
- 不会被 WordPress 自动格式化破坏
- 在原生编辑器中清晰可见
- 添加完整的使用指南和示例
2026-01-24 21:02:47 +08:00
bf8f973e91
fix: 修复 Mermaid 容器语法的换行符和特殊字符问题
...
## 问题描述
用户报告 Mermaid 图表仍然渲染失败：
1. `flowchart TDStart` - `TD` 和 `Start` 之间没有换行符（有两个空格）
2. 箭头符号变成全角 `–>` 而不是 `-->`
## 根本原因分析
### 问题 1: 换行符丢失
WP-Markdown 可能将整个容器语法内容放在**一个** `<p>` 元素中：
```html
<p>::: mermaid<br>flowchart TD<br>Start --> End<br>:::</p>
```
而不是多个独立的 `<p>` 元素。之前的代码只处理了多元素的情况。
### 问题 2: 特殊字符转换
WordPress 的自动格式化功能会将某些字符转换为排版字符：
- `--` → `–` (U+2013 EN DASH)
- `---` → `—` (U+2014 EM DASH)
- `->` → `→` (U+2192 RIGHTWARDS ARROW)
这些字符在 Mermaid 语法中有特殊含义，必须保持原样。
## 修复方案
### 1. 支持单元素容器语法
在 `extractContainerContent()` 函数中添加检测逻辑：
```javascript
// 检查是否整个内容都在一个元素中
if (startText.includes(':::') && startText.lastIndexOf(':::') > 10) {
// 整个容器语法在一个元素中
let fullText = this.htmlToText(startHTML);
// 移除开始和结束标记
fullText = fullText.replace(/^:::\s*mermaid\s*/i, '').trim();
fullText = fullText.replace(/:::\s*$/, '').trim();
// 创建容器并返回
}
```
### 2. 增强 htmlToText() 函数
添加更多字符转换规则：
```javascript
// HTML 实体
.replace(/–/g, '-') // EN DASH
.replace(/—/g, '--') // EM DASH
.replace(/→/g, '->') // RIGHTWARDS ARROW
.replace(/–/g, '-') // EN DASH (named entity)
.replace(/—/g, '--') // EM DASH (named entity)
.replace(/→/g, '->'); // RIGHTWARDS ARROW (named entity)
// Unicode 字符
.replace(/–/g, '-') // U+2013 EN DASH
.replace(/—/g, '--') // U+2014 EM DASH
.replace(/→/g, '->'); // U+2192 RIGHTWARDS ARROW
```
### 3. 添加详细调试日志
```javascript
this.logDebug('检查元素，textContent: ' + startText.substring(0, 50));
this.logDebug('innerHTML: ' + startHTML.substring(0, 100));
this.logDebug('检测到单元素容器语法');
this.logDebug('转换后的完整文本: ' + fullText.substring(0, 200));
this.logDebug('移除标记后的代码: ' + fullText.substring(0, 200));
```
## 处理流程
### 单元素容器语法
```
1. 检测到 ::: mermaid 开始标记
2. 检查 textContent 中是否包含结束标记 :::
3. 如果包含，说明整个内容在一个元素中
4. 提取 innerHTML
原始: "::: mermaid<br>flowchart TD<br>Start –> End<br>:::"
5. 使用 htmlToText() 转换
- <br> → \n
- – → -
- → → ->
结果: "::: mermaid\nflowchart TD\nStart --> End\n:::"
6. 移除开始和结束标记
结果: "flowchart TD\nStart --> End"
7. 创建容器元素存储代码
```
### 多元素容器语法（保持原有逻辑）
```
1. 检测到 ::: mermaid 开始标记
2. 遍历后续兄弟元素
3. 收集所有内容直到 ::: 结束标记
4. 使用 \n 连接所有行
5. 创建容器元素存储代码
```
## 测试验证
### 测试用例 1: 单元素容器语法
```html
<p>::: mermaid<br>
flowchart TD<br>
A[开始] –> B[处理]<br>
B –> C[结束]<br>
:::</p>
```
预期结果：
```
flowchart TD
A[开始] --> B[处理]
B --> C[结束]
```
### 测试用例 2: 多元素容器语法
```html
<p>::: mermaid</p>
<p>flowchart TD</p>
<p>A --> B</p>
<p>:::</p>
```
预期结果：
```
flowchart TD
A --> B
```
### 测试用例 3: 复杂流程图（AI 评论审核）
- 100+ 个节点
- 多行文本（`<br/>` 标签）
- 箭头符号（`-->`, `-->`）
- 样式定义（`style` 语句）
## 影响范围
- 仅影响 Markdown 容器语法（`::: mermaid ... :::`）
- 不影响其他格式（`<div class="mermaid">`, `<pre><code>` 等）
- 向后兼容，支持单元素和多元素两种情况
## 相关文件
- `argontheme.js` - 修改 `extractContainerContent()` 和 `htmlToText()`
- `tests/test-ai-comment-flow.md` - 测试文档
## 技术细节
### WordPress 自动格式化
WordPress 的 `wptexturize()` 函数会自动转换以下字符：
- `--` → `–` (EN DASH)
- `---` → `—` (EM DASH)
- `->` → `→` (RIGHTWARDS ARROW)
- `(c)` → `©` (COPYRIGHT SIGN)
- `(r)` → `®` (REGISTERED SIGN)
- `(tm)` → `™` (TRADE MARK SIGN)
这些转换对于普通文本是有益的，但对于代码块（如 Mermaid）是有害的。
### 解决方案
1. **禁用自动格式化**（不推荐）
- 会影响整个网站的排版
- 需要修改 WordPress 核心代码
2. **在提取时反转换**（推荐）✅
- 只影响 Mermaid 代码块
- 不影响其他内容
- 易于维护
### 字符映射表
| 原始字符 | HTML 实体 | Unicode | 显示 |
|---------|----------|---------|------|
| `-` | `-` | U+002D | - |
| `--` | `–` / `–` | U+2013 | – |
| `---` | `—` / `—` | U+2014 | — |
| `->` | `→` / `→` | U+2192 | → |
## 注意事项
1. **性能影响**：增加了字符串替换操作，但性能影响可忽略
2. **安全性**：只处理 Mermaid 代码块，不执行任何脚本
3. **兼容性**：支持所有现代浏览器
4. **调试**：添加详细日志，便于排查问题
## 后续优化
1. 考虑使用 DOMParser 解析 HTML，更可靠
2. 添加更多特殊字符的转换规则
3. 支持自定义字符映射表
4. 添加单元测试
## 参考资料
- [WordPress wptexturize() 函数](https://developer.wordpress.org/reference/functions/wptexturize/ )
- [Unicode 字符表](https://unicode-table.com/ )
- [Mermaid 语法文档](https://mermaid.js.org/intro/syntax-reference.html )
2026-01-24 20:56:43 +08:00
20f2483257
docs: 添加 Mermaid 修复总结文档
2026-01-24 20:52:20 +08:00
759804dee7
docs: 更新 Mermaid 使用指南和添加换行符测试页面
2026-01-24 20:51:17 +08:00
b4ba37a6c5
fix: 修复 Mermaid 容器语法换行符丢失问题
...
## 问题描述
用户提供的 AI 评论审核流程 Mermaid 图表渲染失败，错误信息显示：
- `flowchart TDStart` - `TD` 和 `Start` 之间缺少换行符
- 箭头符号被转换成全角 `–>` 而不是 `-->`
## 根本原因
WP-Markdown 插件将容器语法 `::: mermaid ... :::` 转换为 HTML 时：
1. 每一行代码都被包裹在 `<p>` 标签中
2. 行内的换行使用 `<br>` 标签表示
3. 使用 `textContent` 或 `innerText` 提取时，`<br>` 标签被忽略或转换为空格
4. 导致多行代码被合并成一行，Mermaid 语法解析失败
## 修复方案
### 1. 新增 `htmlToText()` 辅助函数
```javascript
htmlToText(html) {
// 将 <br> 和 <br/> 转换为换行符
let text = html.replace(/<br\s*\/?>/gi, '\n');
// 移除其他 HTML 标签
text = text.replace(/<[^>]+>/g, '');
// 解码 HTML 实体
text = text
.replace(/ /g, ' ')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, "'");
return text;
}
```
### 2. 改进 `extractContainerContent()` 函数
- 使用 `innerHTML` 而不是 `textContent` 或 `innerText`
- 调用 `htmlToText()` 将 `<br>` 标签转换为换行符
- 保留所有换行符和空行
- 添加详细的调试日志
### 3. 处理流程
```
1. 检测到 ::: mermaid 开始标记
2. 提取 innerHTML（包含 <br> 标签）
3. 使用 htmlToText() 转换：
- <br> → \n
- 移除其他 HTML 标签
- 解码 HTML 实体
4. 收集所有行内容
5. 使用 \n 连接所有行
6. 创建容器元素存储完整代码
```
## 测试验证
### 测试用例 1：简单流程图
```markdown
::: mermaid
flowchart TD
A[开始] --> B[处理]
B --> C[结束]
:::
```
### 测试用例 2：复杂流程图（AI 评论审核）
- 包含 100+ 个节点
- 包含多行文本（`<br/>` 标签）
- 包含箭头符号（`-->`, `-->`）
- 包含样式定义（`style` 语句）
### 预期结果
- ✅ 所有换行符正确保留
- ✅ 箭头符号不被转换
- ✅ 多行文本正确显示
- ✅ 样式定义正确应用
## 影响范围
- 仅影响 Markdown 容器语法（`::: mermaid ... :::`）
- 不影响其他格式（`<div class="mermaid">`, `<pre><code>` 等）
- 向后兼容，不影响现有功能
## 相关文件
- `argontheme.js` - 修改 `extractContainerContent()` 和新增 `htmlToText()`
- `tests/test-ai-comment-flow.md` - 测试文档
- `docs/mermaid-usage-guide.md` - 使用指南
## 技术细节
### HTML 结构示例
WP-Markdown 生成的 HTML：
```html
<p>::: mermaid<br>
flowchart TD<br>
Start([用户提交评论]) --> PreProcess[预处理]<br>
:::</p>
```
### 提取过程
1. **原始 HTML**: `::: mermaid<br>flowchart TD<br>Start --> End<br>:::`
2. **htmlToText()**: `::: mermaid\nflowchart TD\nStart --> End\n:::`
3. **移除标记**: `flowchart TD\nStart --> End`
4. **最终代码**:
```
flowchart TD
Start --> End
```
## 注意事项
1. **性能影响**：使用 `innerHTML` 和正则替换，性能影响可忽略
2. **安全性**：只处理 Mermaid 代码块，不执行任何脚本
3. **兼容性**：支持所有现代浏览器
4. **调试**：添加详细日志，便于排查问题
## 后续优化
1. 考虑支持更多 Markdown 容器语法（如 `::: warning`, `::: tip` 等）
2. 优化正则表达式性能
3. 添加单元测试
2026-01-24 20:49:32 +08:00
b6d9f8c47e
fix: 修复容器语法和 WP-Markdown 的两个关键问题
...
- 修复 WP-Markdown document.write 重复输出问题
- 改进容器语法检测，支持跨多个元素收集内容
- 解决空行导致内容被分割成多个元素的问题
2026-01-24 20:41:08 +08:00
0ac57949ae
fix: 修复代码高亮和容器语法的两个关键问题
...
- 代码高亮排除 mermaid 代码块，避免干扰渲染
- 容器语法正确处理空行，不再截断内容
- 添加测试页面验证修复效果
2026-01-24 20:14:48 +08:00
4c0569afaf
feat: add WP-Markdown special format support
...
- Detect script tags with document.write() in extractMermaidCode
- Extract Mermaid code from document.write() content
- Support escape character decoding (backslash-n, quotes, etc)
- Add comprehensive test file for WP-Markdown format validation
- Requirements: 10.5
2026-01-23 23:49:24 +08:00
f36a96d3b6
feat: 实现 Mermaid 插件兼容层
...
- 添加插件检测函数（WP Githuber MD、Markdown Block、Code Syntax Block）
- 实现 Mermaid 库加载状态检测
- 添加重复加载防护逻辑，避免与插件冲突
- 在设置页显示插件兼容性状态
- 修改库加载逻辑，当检测到插件时跳过加载
- 在 JavaScript 端添加库加载状态标记
- Requirements: 9.1, 9.2, 9.3, 9.4, 9.5
2026-01-23 23:36:12 +08:00
4a59640998
feat: add Mermaid chart styles
2026-01-23 23:27:06 +08:00
