thinksvg

2026-01-27 17:19:43 +08:00
parent 19afa19462
commit 69a177b85a
4 changed files with 180 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -258,6 +258,7 @@
    <script src="js/core/module-registry.js"></script>
    <script src="js/modules/product-canvas.js"></script>
    <script src="js/modules/swot.js"></script>
+    <script src="js/modules/thinksvg.js"></script>
    <script src="js/modules/echarts.js"></script>
    <script src="js/modules/mermaid.js"></script>
    <script src="js/modules/onepage.js"></script>
--- a/js/apiclient.js
+++ b/js/apiclient.js
@@ -13,6 +13,7 @@ class APIClient {
    this.promptFiles = {
      canvas: 'prompts/canvas-prompt.txt',
      swot: 'prompts/swot-prompt.txt',
+      thinksvg: 'prompts/thinksvg-prompt.txt',
      echarts: 'prompts/echarts-prompt.txt',
      mermaid: 'prompts/mermaid-prompt.txt',
      onepage: 'prompts/onepage-prompt.txt'
@@ -20,6 +21,7 @@ class APIClient {
    this.promptFallbacks = {
      canvas: '你是一个专业的产品战略分析师，擅长创建产品画布。',
      swot: '你是一个专业的商业战略分析师，擅长进行SWOT分析。',
+      thinksvg: '你是一名思维导图专家，擅长使用 SVG 生成清晰的思维导图。',
      echarts:
        '你是一个资深的数据可视化专家，精通将自然语言需求转化为 ECharts 配置对象，请输出结构化 JSON option。',
      mermaid:
--- a/js/modules/thinksvg.js
+++ b/js/modules/thinksvg.js
@@ -0,0 +1,98 @@
+/**
+ * 思维导图模块
+ *
+ * 功能：基于用户输入生成 SVG 格式的思维导图
+ * 特性：
+ * - 支持多层级树形结构展示
+ * - 通过提示词引导 AI 生成布局和样式
+ * - 支持 SVG/PNG 导出
+ * - 历史记录持久化
+ */
+
+(function registerThinkSvgModule(global) {
+  'use strict';
+
+  // 确保 ModuleRegistry 已初始化
+  if (!global.ModuleRegistry) {
+    throw new Error('ModuleRegistry 未初始化');
+  }
+
+  /**
+   * 解析 AI 响应，提取 SVG 内容
+   * @param {string} content - AI 返回的原始内容
+   * @returns {Object} 解析结果对象，包含 svgContent、beforeText、afterText 等字段
+   */
+  const parseResponse = (content) => Utils.parseSVGResponse(content);
+
+  // 注册思维导图模块
+  global.ModuleRegistry.register({
+    // 模块标识
+    id: 'thinksvg',
+
+    // 显示名称
+    label: '思维导图',
+
+    // 图标（使用 Phosphor Icons 的树形结构图标）
+    icon: 'ph:tree-structure-duotone',
+
+    // 渲染器类型
+    renderer: 'svg',
+
+    // 提示词键名（对应 prompts/thinksvg-prompt.txt）
+    promptKey: 'thinksvg',
+
+    // 本地存储命名空间
+    storageNamespace: 'module:thinksvg',
+
+    // 聊天配置
+    chat: {
+      // 输入框占位符
+      placeholder: '输入要梳理的主题或问题，我来生成思维导图…',
+
+      // 流式响应开始标记
+      streamStartToken: '```svg',
+
+      // 上下文窗口大小（保留最近 10 条消息）
+      contextWindow: 10
+    },
+
+    // 产物配置
+    artifact: {
+      // 产物类型
+      type: 'svg',
+
+      // 代码围栏标识
+      fence: 'svg',
+
+      // SVG 开始模式匹配
+      startPattern: /```(?:svg)?\s*<svg/i,
+
+      // 内容解析器
+      parser: parseResponse
+    },
+
+    // 生命周期钩子（预留扩展）
+    hooks: {},
+
+    // 导出功能配置
+    exports: {
+      // 允许导出为 SVG 文件
+      allowSvg: true,
+
+      // 允许导出为 PNG 图片
+      allowPng: true,
+
+      // 允许复制到剪贴板
+      allowClipboard: true,
+
+      // 允许查看源代码
+      allowCode: true
+    },
+
+    // UI 配置
+    ui: {
+      // 预览区占位文本
+      placeholderText: '生成的思维导图将在此处显示'
+    }
+  });
+})(window);
--- a/prompts/thinksvg-prompt.txt
+++ b/prompts/thinksvg-prompt.txt
@@ -0,0 +1,79 @@
+请根据用户的需求生成一个详细的思维导图分析，并以SVG格式返回，注意使用markdown格式回复。
+
+
+下面是SVG模板，注意模板中定义了三级，你可以参考布局和样式，你可以根据情况自定义层级
+```
+<svg width="720" height="280" xmlns="http://www.w3.org/2000/svg">
+  <!-- 背景 -->
+  <rect width="100%" height="100%" fill="#ffffff" />
+  <style>
+    .node-text { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 13px; fill: #555; }
+    .node-title { font-weight: bold; font-size: 14px; fill: #333; }
+    .l2-text { font-weight: bold; font-size: 13px; }
+    .number-circle { font-size: 10px; font-weight: bold; fill: #fff; }
+    .branch-path { fill: none; stroke-width: 1.5; opacity: 0.4; }
+  </style>
+  <g transform="translate(20, 25)">
+    <!-- 连线部分 (中心点 Y=115) -->
+    <g class="branch-path">
+      <path d="M140,115 C180,115 180,22 210,22" stroke="#e74c3c" />
+      <path d="M140,115 C180,115 180,67 210,67" stroke="#f39c12" />
+      <path d="M140,115 C180,115 180,112 210,112" stroke="#f1c40f" />
+      <path d="M140,115 C180,115 180,157 210,157" stroke="#2ecc71" />
+      <path d="M140,115 C180,115 180,202 210,202" stroke="#3498db" />
+      <!-- L2 to L3 短直线 -->
+      <path d="M340,22 L360,22" stroke="#e74c3c" />
+      <path d="M340,67 L360,67" stroke="#f39c12" />
+      <path d="M340,112 L360,112" stroke="#f1c40f" />
+      <path d="M340,157 L360,157" stroke="#2ecc71" />
+      <path d="M340,202 L360,202" stroke="#3498db" />
+    </g>
+    <!-- 一级中心节点 -->
+    <g transform="translate(0, 85)">
+      <rect x="0" y="0" width="140" height="60" rx="6" fill="#fff" stroke="#333" stroke-width="2" />
+      <circle cx="22" cy="30" r="8" fill="#ff4757" />
+      <path d="M20 25 L26 30 L20 35 Z" fill="white" />
+      <text x="38" y="27" class="node-title">软件架构风格</text>
+      <text x="38" y="45" class="node-title">必会考点</text>
+    </g>
+    <!-- 二级节点 (线框) 与 三级节点 (纯文字) -->
+    <!-- 1. 间距从75压缩至45 -->
+    <g transform="translate(210, 5)">
+      <rect x="0" y="0" width="130" height="34" rx="17" fill="none" stroke="#e74c3c" stroke-width="1.5" />
+      <circle cx="17" cy="17" r="9" fill="#e74c3c" />
+      <text x="17" y="21" class="number-circle" text-anchor="middle">1</text>
+      <text x="32" y="22" class="l2-text" fill="#e74c3c">数据流风格</text>
+      <text x="160" y="22" class="node-text">包括 <tspan font-weight="bold">批处理序列</tspan> 和 <tspan font-weight="bold">管道/过滤器</tspan></text>
+    </g>
+    <g transform="translate(210, 50)">
+      <rect x="0" y="0" width="130" height="34" rx="17" fill="none" stroke="#f39c12" stroke-width="1.5" />
+      <circle cx="17" cy="17" r="9" fill="#f39c12" />
+      <text x="17" y="21" class="number-circle" text-anchor="middle">2</text>
+      <text x="32" y="22" class="l2-text" fill="#f39c12">调用/返回风格</text>
+      <text x="160" y="22" class="node-text">包括 <tspan font-weight="bold">主程序/子程序</tspan>、<tspan font-weight="bold">面向对象</tspan> 及 <tspan font-weight="bold">层次结构</tspan></text>
+    </g>
+    <g transform="translate(210, 95)">
+      <rect x="0" y="0" width="130" height="34" rx="17" fill="none" stroke="#f1c40f" stroke-width="1.5" />
+      <circle cx="17" cy="17" r="9" fill="#f1c40f" />
+      <text x="17" y="21" class="number-circle" text-anchor="middle">3</text>
+      <text x="32" y="22" class="l2-text" fill="#f1c40f">独立构件风格</text>
+      <text x="160" y="22" class="node-text">包括 <tspan font-weight="bold">进程通信</tspan> 和 <tspan font-weight="bold">事件驱动</tspan> 系统</text>
+    </g>
+    <g transform="translate(210, 140)">
+      <rect x="0" y="0" width="130" height="34" rx="17" fill="none" stroke="#2ecc71" stroke-width="1.5" />
+      <circle cx="17" cy="17" r="9" fill="#2ecc71" />
+      <text x="17" y="21" class="number-circle" text-anchor="middle">4</text>
+      <text x="32" y="22" class="l2-text" fill="#2ecc71">虚拟机风格</text>
+      <text x="160" y="22" class="node-text">包括 <tspan font-weight="bold">解释器</tspan> 和 <tspan font-weight="bold">基于规则的系统</tspan></text>
+    </g>
+    <g transform="translate(210, 185)">
+      <rect x="0" y="0" width="130" height="34" rx="17" fill="none" stroke="#3498db" stroke-width="1.5" />
+      <circle cx="17" cy="17" r="9" fill="#3498db" />
+      <text x="17" y="21" class="number-circle" text-anchor="middle">5</text>
+      <text x="32" y="22" class="l2-text" fill="#3498db">仓库风格</text>
+      <text x="160" y="22" class="node-text">包括 <tspan font-weight="bold">数据库</tspan>、<tspan font-weight="bold">黑板</tspan> 和 <tspan font-weight="bold">超文本</tspan></text>
+    </g>
+  </g>
+</svg>
+
+```