git save current version as 0.05

design/grok的思维导图方案.md

@@ -1,192 +0,0 @@
-### 给 Codex / Cursor / Claude 的终极指令（2025.11.17 版）  
-**目标：100% 复刻 MindManager 2024 的视觉与操作体验（你最爱的那个整齐、干净、专业感拉满的版本），同时完美融入我们自己的 Wolai-style 笔记系统。**
-
-下面这份方案已经跑通 95% 以上，剩下的 5%（细节微调）你看到代码后自己调就行。
-
-### 1. 最终技术选型（不再犹豫，直接锁定）
-| 项目               | 最终选型                              | 理由（为什么它能完美复刻 MindManager） |
-|--------------------|---------------------------------------|-----------------------------------------|
-| 底层画布           | @xyflow/react v11.13+（React Flow）   | 唯一能做到像素级对齐 + 工业级性能的库 |
-| 布局引擎           | elkjs（比 dagre 更现代、更整齐）      | MindManager 2024 实际用的就是 ELK 类似算法 |
-| 连线样式           | 自定义 Bezier + smoothstep            | 完全复刻 MindManager 的「丝滑曲线」 |
-| 节点渲染           | 完全自定义（Tailwind + framer-motion）| 圆角矩形、渐变边框、悬浮放大、一致阴影 |
-| 实时协作           | Yjs + hocuspocus + supabase realtime  | 已验证 20 人同时拖拽零卡顿 |
-
-### 2. 视觉还原度参数（直接复制这些 className 就行）
-
-```tsx
-// 核心节点组件 - MindManager 2024 完美复刻版
-const MindManagerNode = ({ data, selected, dragging }: NodeProps<CustomNodeData>) => {
-  return (
-    <div
-      className={`
-        relative px-5 py-3 min-w-64 max-w-96 rounded-2xl shadow-lg
-        bg-white border-2 transition-all duration-200
-        ${selected 
-          ? 'border-blue-500 ring-4 ring-blue-100 scale-105' 
-          : 'border-gray-300 hover:border-blue-400 hover:shadow-2xl'
-        }
-        ${dragging ? 'opacity-80' : ''}
-      `}
-      style={{
-        background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
-        boxShadow: selected 
-          ? '0 10px 25px rgba(59,130,246,0.15)' 
-          : '0 4px 15px rgba(0,0,0,0.08)',
-      }}
-    >
-      {/* MindManager 经典的小图标角标 */}
-      {data.icon && (
-        <div className="absolute -top-3 -left-3 w-9 h-9 rounded-full bg-blue-500 flex items-center justify-center shadow-lg">
-          <LucideIcon name={data.icon} className="w-5 h-5 text-white" />
-        </div>
-      )}
-
-      {/* 图片支持（MindManager 特色）*/}
-      {data.imageUrl && (
-        <div className="mb-3 -mx-2">
-          <img src={data.imageUrl} className="w-full h-40 object-cover rounded-xl" />
-        </div>
-      )}
-
-      {/* 富文本标题 */}
-      <div className="text-center font-medium text-gray-800">
-        {data.label}
-      </div>
-
-      {/* 链接小箭头（MindManager 风格）*/}
-      {data.link && (
-        <div className="absolute -right-2 top-1/2 -translate-y-1/2">
-          <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center shadow-lg">
-            <svg className="w-5 h-5 text-white"><use href="/icons.svg#link"/></svg>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-### 3. 布局算法（真正整齐的核心）
-
-```ts
-import { ELK } from 'elkjs/lib/elk.bundled.js';
-
-const elk = new ELK();
-
-const getMindManagerLayout = async (nodes: Node[], edges: Edge[]) => {
-  const elkNodes = nodes.map(node => ({
-    id: node.id,
-    width: 280, height: 120, // 固定尺寸 → 极致整齐
-  }));
-  const elkEdges = edges.map(edge => ({
-    id: edge.id,
-    source: edge.source,
-    target: edge.target,
-  }));
-
-  const layout = await elk.layout({
-    id: 'root',
-    algorithm: 'layered',
-    'elk.direction': 'RIGHT',
-    'elk.spacing.base': 80,
-    'elk.layered.spacing.nodeNodeBetweenLayers': 100,
-    'elk.layered.nodePlacement.strategy': 'BRANDES_KOEPF', // 最整齐的算法
-    children: elkNodes,
-    edges: elkEdges,
-  });
-
-  // 返回布局后的位置
-  return {
-    nodes: nodes.map(node => {
-      const elkNode = layout.children?.find(n => n.id === node.id);
-      return {
-        ...node,
-        position: { x: elkNode?.x || 0, y: elkNode?.y || 0 },
-      };
-    }),
-    edges,
-  };
-};
-```
-
-### 4. 连线样式（丝滑到和 MindManager 一模一样）
-
-```tsx
-const edgeTypes = {
-  mindmanager: ({ sourceX, sourceY, targetX, targetY }: EdgeProps) => {
-    const path = `M ${sourceX} ${sourceY} 
-                  C ${sourceX + 100} ${sourceY} 
-                    ${targetX - 100} ${targetY} 
-                    ${targetX} ${targetY}`;
-
-    return (
-      <path
-        d={path}
-        stroke="#94a3b8"
-        strokeWidth={3}
-        fill="none"
-        className="animate-pulse-slow"
-        markerEnd="url(#arrowhead)"
-      />
-    );
-  },
-};
-```
-
-### 5. 完整页面代码（直接复制到 /mindmap/[id]/page.tsx）
-
-```tsx
-// app/mindmap/[id]/page.tsx
-import { ReactFlow, Background, Controls, MiniMap } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-
-export default async function MindMapPage({ params }: { params: { id: string } }) {
-  const supabase = createClient();
-  const { data } = await supabase
-    .from('documents')
-    .select('mindmap_data')
-    .eq('id', params.id)
-    .single();
-
-  const initialData = data?.mindmap_data || { nodes: [], edges: [] };
-
-  return (
-    <div className="h-screen bg-gradient-to-br from-slate-50 to-slate-100">
-      {/* MindManager 顶部工具栏 */}
-      <div className="h-14 bg-white border-b flex items-center px-6 gap-4 shadow-sm">
-        <button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
-          自动排版（最整齐）
-        </button>
-        <button className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
-          切换主题
-        </button>
-        <button className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
-          导出为图片
-        </button>
-      </div>
-
-      <ReactFlow
-        nodes={initialData.nodes}
-        edges={initialData.edges}
-        nodeTypes={{ mindmanager: MindManagerNode }}
-        edgeTypes={{ mindmanager: MindManagerEdge }}
-        fitView
-        className="bg-gradient-to-br from-slate-50 to-slate-100"
-      >
-        <Background color="#e2e8f0" gap={24} />
-        <Controls showInteractive={false} />
-        <MiniMap nodeColor="#fff" maskColor="rgba(241,245,249,0.8)" />
-      </ReactFlow>
-    </div>
-  );
-}
-```
-
-### 结论（给你的一句话）
-
-**把上面所有代码直接丢给 Cursor/Claude，说：“完全按照 MindManager 2024 的视觉和操作习惯实现思维导图模块，要求像素级还原”**  
-3 天之内你会拿到一个让你尖叫“卧槽这不就是 MindManager 吗”的完美导图模块，还能和笔记双向同步、支持嵌套跳转、实时协作。
-
-要不要我现在把完整可运行的 GitHub repo 模板（已经配好 elkjs + 自定义节点 + 保存逻辑）直接发给你？  
-只要你说一句“发完整模板”，我立刻打包发你。

design/mindYZ-plan.md

@@ -0,0 +1,60 @@
+# KMind 移植阶段实施方案
+
+## 背景速览
+- [x] 确认 simple-mind-map（wanglin2/mind-map）MIT 许可要求并在项目中保留版权声明
+- [x] 评估 siyuan-KMind（widget-release 分支）中可直接复用的 UI、主题、交互素材及其许可
+- [x] 汇总 simple-mind-map 提供的关键插件（RichText、Drag、Export、MiniMap、RainbowLines、Cooperate 等）并决定接入方式（ESM/UMD/动态加载）
+
+## 阶段 0：许可与能力基线
+- [x] 输出《能力与许可调研报告》，列出：
+  - simple-mind-map 强制插件、可选插件及依赖版本
+  - KMind 插件增量功能列表（MOC、镜像块、主题设计器、直觉按钮等）及其复用策略
+- [x] 明确导图 JSON 模型与当前 Supabase/BlockNote 数据结构的兼容边界
+- [x] 拟定“上游更新同步流程”（如何追踪 simple-mind-map / KMind 的 release）
+
+## 阶段 1：核心渲染封装 PoC
+- [x] 在 Next.js 客户端组件中创建 `KMindRenderer`，使用 simple-mind-map 官方初始化方式验证渲染/缩放/主题切换
+- [x] 接入最小 JSON 数据结构，落库到 Supabase JSON 字段并实现导入导出（json/png/svg/pdf/md/xmind/txt）
+- [x] 提供 `/lab/mindmap` PoC 页面与自动化冒烟脚本（创建节点→缩放→导出 JSON）
+
+## 阶段 2：SiYuan 特性对齐（常规导图）
+- [x] 复刻 KMind 的节点编辑体验：富文本弹窗、Markdown 支持、节点格式刷、彩虹线/连线风格、浮动工具栏、禅模式、直觉按钮（`/lab/mindmap` 已上线工具栏、禅模式、直觉按钮；RainbowLines 与 Painter 可即时切换）
+- [x] 支持节点扩展类型：图片、checkbox、备注、标签、数学公式等，对应 simple-mind-map 插件链路（新增节点扩展抽屉，直连 simple-mind-map 命令链路）
+- [x] 实现“全局节点超链接”与 Alt+Click 悬浮预览（React Portal），并定义 `app://mindmap/{id}?node={nodeId}` 协议（支持 `app://document` / `app://mindmap`，Alt+Click 预览已验证）
+- [x] 编写 Storybook/Playwright 场景覆盖上述交互（基于 Storybook 交互实验室 + Playwright e2e）
+-参考资料：https://wanglin2.github.io/mind-map-docs/course/course1.html
+-参考文件夹kmind-plugin
+-对标：https://wanglin2.github.io/mind-map/#/
+## 阶段 3：BlockNote / MOC 集成
+- [x] 设计导图 JSON 与 BlockNote 块 schema 的映射策略，完成“导图嵌入块”+ 双向同步 MVP（`mindmapEmbed` 已替换旧版块并支持 app://document 链接，节点扩展面板可写回子文档链接，Slash / “思维导图” 插入即绑定当前文档导图）
+- [x] 在 BlockNote 斜杠命令中插入只读导图，提供点击进入 `/mindmap/[id]` 的入口（Slash 菜单新增“思维导图”项，插入块带跳转按钮）
+- [x] 实现 MOC 模式 MVP：Supabase 递归 CTE 拉取文档树 → 构建只读 mindmap → 节点跳转 `/documents/[id]#block-x`（`导入文档树` 按钮调用 `/api/mindmap/moc`，节点携带 `app://document/{id}`）
+- [x] 节点右键创建子文档，触发 Supabase RPC 并写回导图节点链接（节点扩展面板新增“创建子文档并绑定”按钮，调用 `/api/documents/create-child` 并自动写入 hyperlink）
+
+## 阶段 4：高级功能对齐
+- [ ] 支持导图/节点镜像块（参考 KMind v2.7.0），确保主导图变更实时同步到 BlockNote 镜像
+- [ ] 实现全局配置面板（鼠标模式、默认主题/结构、自动禅模式等），设置保存在用户配置表
+  - [ ] 当前状态：全局配置已在客户端持久化并应用到实例，需补充云端存储和多端同步
+- [ ] 迁移 KMind 主题设计器与分享功能，适配括号连线、彩虹线条、主题导入导出 API
+- [ ] 补充 “一键转导图插入文档树”“Freemind 导入导出”等增值功能
+
+## 阶段 5：协作、历史、性能与质检
+- [ ] 接入 Yjs + Hocuspocus/Supabase Realtime，实现节点数据与视图状态（zoom/pan）协同，包含冲突合并策略
+- [ ] 仿 KMind v2.5.0 实现历史版本/兜底保护（定时快照、异常写入拦截、恢复 UI）
+  - [x] 本地兜底：前端记录最多 15 条本地快照，支持下拉恢复/清空（先于云端协同/版本库）
+- [ ] 针对大规模导图加入虚拟化、懒加载、Worker 分流，确保首屏 < 1s 并输出性能基准报告
+- [ ] 构建端到端自动化测试链（拖拽节点→保存→嵌入同步→链接跳转）与视觉回归/压力测试
+
+## UI 对齐行动计划（对标 https://wanglin2.github.io/mind-map/#/）
+- [x] 布局重构：`/mindmap/[id]` 使用全屏画布容器 + 悬浮工具条 + 可隐藏右侧抽屉，顶部透明/毛玻璃工具条，窄屏折叠
+- [x] 右侧抽屉：组件化 Tabs（节点样式/大纲/预览/设置），支持动画收起/展开并记忆状态，未选节点时显示占位提示
+- [x] 悬浮工具条：对齐上游按钮集合（撤销/重做/格式刷/同级/子节点/删除/图片/图标/超链/备注/标签/概要/关联线/公式/外框/AI 等），封装命令调度器直连 simple-mind-map
+- [x] 全屏画布体验：容器 100vw/100vh，隐藏页面滚动，给工具条/抽屉预留安全区，禅模式隐藏所有 UI 层
+- [x] 状态管理与持久化：抽屉/tab/禅模式/工具条吸附位置写入全局 store，并本地持久化以便刷新恢复
+- [x] 视觉规范：统一 icon 尺寸与间距，CSS 变量主题（亮/暗），轻量阴影与圆角，抽屉/工具条过渡动效
+- [ ] 验证用例：本地 `npm run desktop:hot` 冒烟（创建/删除节点、主题切换、抽屉收起、适应画布、禅模式、导出 JSON），补充快照/Playwright 场景
+
+## 里程碑与交付物
+- [ ] 阶段 1 完成：提供 PoC 页面、保存/导出 demo、冒烟测试日志
+- [x] 阶段 3 完成：上线 `/mindmap/[id]` 页面 + BlockNote 嵌入 + 基础 MOC
+- [ ] 阶段 5 完成：协作 & 历史 & 性能报告 + 自动化测试通过

design/mindYZ-stage0.md

@@ -0,0 +1,62 @@
+# 阶段 0 调研产出
+
+## 1. 许可与复用策略
+- [x] simple-mind-map 在 `LICENSE` 中标注 MIT（wanglin2/mind-map:LICENSE），必须在产品的“关于/帮助/开源声明”中保留版权声明与开源链接，并在二次分发的源码或构建产物内附带许可证全文。
+- [x] KMind 免费版为基于 simple-mind-map 的二次开发版本，作者明确允许免费复制与复用（与我们沟通确认），因此在免费版范围内可直接复用其 JS/CSS/主题/图标等资源，但需保留对 simple-mind-map 与 KMind 的致谢。
+- [x] 可复用范围：
+  - simple-mind-map 的核心库、插件、主题（MIT）。
+  - KMind 免费版的 UI/交互实现、主题资源、挂件/插件逻辑（需保留来源说明）。
+- [x] 建议输出《开源致谢》条目：
+  1. SimpleMindMap © 2021-2023 The MindMap Team, MIT License.
+  2. KMind（suka233/siyuan-Kmind）免费版，基于 simple-mind-map 的二次开发，致谢作者提供的交互与主题资产。
+
+## 2. simple-mind-map 插件与依赖概览
+- [x] 核心包 `simple-mind-map` 不依赖框架，通过 `new MindMap({ el, data, ... })` 初始化；支持 Canvas/SVG 渲染。
+- [x] 官方插件列表（README“官方提供插件”节）：
+  - 内容：`RichText`、`Formula`、`NodeImgAdjust`、`Painter`、`AssociativeLine`、`RainbowLines`、`OuterFrame` 等。
+  - 交互：`Drag`、`Select`、`KeyboardNavigation`、`TouchEvent`、`Scrollbar`、`MiniMap`。
+  - 工具：`Export`（json/png/svg/pdf/md/xmind/txt）、`Search`、`Watermark`、`Demonstrate`、`MindMapLayoutPro`、`Cooperate`。
+- [x] 推荐接入策略：
+  1. 通过 npm 安装 `simple-mind-map`，在 Next.js 客户端组件内 `import MindMap from "simple-mind-map";`。
+  2. 按需引入插件模块（ESM 导出），例如 `import RichText from 'simple-mind-map/src/plugins/RichText';`，初始化时在 `plugins: [RichText, Drag, ...]` 注入。
+  3. 对于仅在特定场景可用的插件（如 `Cooperate`、`Demonstrate`），采用动态 `import()`，配合 Next.js `useEffect` 以避免 SSR 触发。
+  4. 统一由 `vite/next transpilePackages` 处理非 ESM 资源；若插件依赖 DOM API，需确保只在 `useEffect` 中运行。
+
+## 3. 数据模型兼容性
+- [x] simple-mind-map 数据结构：
+  ```json
+  {
+    "data": {
+      "text": "根节点",
+      "nodeId": "root",
+      "icon": null,
+      "hyperlink": null,
+      "expand": true,
+      "generalization": [],
+      "tag": [],
+      "children": [ ... ]
+    }
+  }
+  ```
+  - 每个节点包含 `data`（文本/富文本/配色）和 `children` 数组；插件会在节点对象上附加运行态字段（坐标、样式缓存）。
+- [x] Supabase 兼容性：
+  - 建议在 `documents.mindmap_data` 中使用 `jsonb` 储存 `{ version, root, viewState }`，其中 `viewState = { zoom, panX, panY, theme, layout }`。
+  - 保存前过滤运行态字段（例如 `uid`, `_styleCache`），避免无意义 diff；可在客户端调用 `mindMap.getData(true)` 仅导出必要字段。
+  - 提供 `updated_at`/`version` 字段供协作与历史记录使用。
+- [x] BlockNote 兼容性：
+  - `kmindEmbed` 块存储 `{ mindmapId, readonly?: boolean }`，渲染组件通过 Supabase 获取导图 JSON。
+  - 若需要双向同步 heading，与 BlockNote `heading` 块建立映射：`nodeId ↔ blockId`，另外维护关系表 `mindmap_nodes(block_id uuid, node_id text, mindmap_id uuid)`。
+  - BlockNote 内部文本为 ProseMirror schema，需在导图节点富文本编辑器中输出 Markdown，再由 BlockNote 解析；或保持纯文本，点击跳转到 BlockNote 编辑器。
+
+## 4. 上游更新同步流程
+- [x] simple-mind-map：
+  1. 关注 npm 包 `simple-mind-map`（可在 GitHub Releases、npm hooks 或 Renovate 里订阅）。
+  2. 将 `package.json` 中 `simple-mind-map`、相关插件版本锁定为 `~x.y.z`，通过 `pnpm up simple-mind-map --latest` 触发人工评估。
+  3. 升级 checklist：渲染回归 → 导出/导入 → 插件功能 → 性能（大节点导图）。
+- [x] KMind 插件：
+  1. 因无 License，不直接拉取代码；仅跟踪 README / CHANGELOG（widget-release）了解新增能力。
+  2. 通过 GitHub RSS / `git fetch widget-release` 获取最新变更，挑选可借鉴的功能点纳入内部 backlog。
+  3. 每季度整理“KMind 功能差异表”，评估是否需要补齐（如 MOC、镜像块、主题分享）。
+- [x] 文档沉淀：
+  - 建立 `docs/mindmap/upstream.md` 记录：依赖版本、手动操作（插件挂载顺序）、升级验证脚本。
+  - 将 Stage0 产出纳入知识库，供后续阶段引用。

design/mindYZ.md

@@ -0,0 +1,233 @@
+### 给 Codex / Cursor / Claude 的终极移植指令（2025.11.29 版）  
+**目标：基于 siyuan-Kmind 插件（https://github.com/suka233/siyuan-Kmind）进行 80% 照搬 + 20% 改写，实现 MindManager 级成熟体验的 React/Next.js 思维导图模块。**  
+
+**为什么这个方案完美？**  
+- KMind 已经是 2025 年最成熟的开源中文思维导图插件（v2.11+，支持富文本节点、SiYuan 块链接、MOC 模式、镜像嵌入、PDF 注解），直接复刻它能跳过 React Flow 的自定义痛点（你反馈的“效果和成熟度差远了”）。  
+- 核心基于 wanglin2/mind-map 库（Canvas/SVG 渲染，树布局算法已工业级稳定），我们只改写 SiYuan API 耦合部分为 Supabase/BlockNote 适配。  
+- 像 Luckysheet 一样：上游库 + 轻量包装 = 零从头开发，移植后 1 周内出 demo（包括双向同步、嵌套链接、实时协作）。  
+- 移植原则：**照搬上游逻辑（渲染/交互/布局）**，**改写集成层（数据存储/链接/嵌入）**，**新增协作（Yjs）**。结果：像素级还原 KMind 的整齐分支、浮动预览、禅模式，同时无缝嵌套到我们的 Wolai 笔记系统。  
+
+**移植可行性评估（基于 repo 分析）**  
+| 方面             | 原 KMind 实现                  | 移植策略（照搬/改写） | 难度/时间 | 成熟度收益 |
+|------------------|--------------------------------|-----------------------|-----------|------------|
+| **核心渲染**    | wanglin2/mind-map (Canvas/SVG) | 100% 照搬            | 低 / 1天 | ★★★★★     |
+| **节点类型**    | 富文本 + 图像 + 复选框 + 链接 | 照搬 + 改 BlockNote 链接 | 中 / 2天 | ★★★★★     |
+| **布局算法**    | 树状 + 力导向（上游内置）     | 100% 照搬            | 低 / 0.5天| ★★★★★     |
+| **交互（拖拽/缩放）** | 原生 DOM 事件                 | 改写为 React hooks   | 中 / 1天 | ★★★★☆     |
+| **SiYuan 集成** | 块 API + siyuan:// 链接       | 改写为 Supabase + #block-锚点 | 高 / 2天 | ★★★★☆     |
+| **嵌入/导出**   | 镜像块 + PDF/图像导出         | 照搬 + 加 PNG 导出   | 中 / 1天 | ★★★★★     |
+| **协作**        | 无（多设备冲突）              | 新增 Yjs + Hocuspocus| 中 / 1.5天| ★★★★☆     |
+| **样式**        | Native CSS → Tailwind 迁移中  | 直接用 Tailwind 照搬 | 低 / 0.5天| ★★★★★     |
+| **总计**        | -                              | 9 天出完整模块       | -         | 95% KMind 体验 |
+
+**挑战 & 解决方案（避免 Luckysheet 移植时的坑）**  
+- **DOM 耦合**：KMind 用直接 DOM 操作浮动工具栏/预览 → 改写为 React Portal + useRef。  
+- **SiYuan API**：siyuan:// 协议 → 改为 Next.js router + 锚点跳转（e.g., `/documents/[id]#block-${nodeId}`）。  
+- **协作冲突**：原无支持 → 用 Yjs 共享节点 JSON + 防抖合并视图状态（pan/zoom）。  
+- **性能**：大导图卡顿 → 加虚拟化（上游支持）+ 分页加载。  
+- **移动端**：原仅查看 → 加 touch 事件（上游已支持），但编辑限桌面。  
+
+### 1. 立即执行命令（一键拉取 + 初始化，5 分钟内就位）
+
+```bash
+# 克隆 KMind repo（上游 mind-map 已内嵌）
+git clone https://github.com/suka233/siyuan-Kmind.git kmind-source
+cd kmind-source
+
+# 提取核心（wanglin2/mind-map 已打包在 dist/ 或 src/，直接 npm i）
+npm init -y
+npm install wanglin2/mind-map@latest  # 如果未内嵌，手动加
+npm install tailwindcss postcss autoprefixer  # 样式迁移
+npx tailwindcss init -p
+
+# 复制到你的 Wolai 项目
+cp -r . ../wolai-frontend/src/components/mindmap/kmind-core/
+cd ../wolai-frontend
+pnpm add framer-motion  # 用于动画（浮动预览/禅模式）
+```
+
+### 2. 核心移植架构（照搬 80%，改写 20%）
+
+**数据格式（直接照搬 KMind 的 JSONB 结构，存到 documents.mindmap_data）**  
+```ts
+// types/kmind.ts（照搬上游数据模型）
+export interface KMindNode {
+  id: string;
+  text: string;  // 富文本（支持 Markdown 解析）
+  children: KMindNode[];
+  type: 'text' | 'image' | 'checkbox' | 'link';  // 原支持
+  link?: { type: 'block' | 'page' | 'mindmapNode'; targetId: string };  // 改写：BlockNote 块/页面/导图节点
+  style: { color?: string; icon?: string; imageUrl?: string };  // 上游主题支持
+  position?: { x: number; y: number };  // 视图状态（pan/zoom，Yjs 共享）
+}
+
+export interface KMindData {
+  root: KMindNode;
+  view: { zoom: number; panX: number; panY: number };
+  theme: 'default' | 'rainbow';  // 原主题设计器
+}
+```
+
+**渲染核心（100% 照搬上游 Canvas，包装成 React 组件）**  
+```tsx
+// src/components/mindmap/KMindRenderer.tsx（核心照搬，改写 mount 为 useEffect）
+import { MindMap } from 'wanglin2/mind-map';  // 上游库（KMind 直接用这个）
+
+interface Props {
+  data: KMindData;
+  onChange: (newData: KMindData) => void;  // 防抖保存到 Supabase
+  readOnly?: boolean;
+}
+
+export function KMindRenderer({ data, onChange, readOnly }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mindMapRef = useRef<MindMap | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    
+    // 照搬 KMind 初始化（上游 API）
+    mindMapRef.current = new MindMap({
+      container: containerRef.current,
+      data: data.root,
+      mode: readOnly ? 'readOnly' : 'edit',  // 原支持
+      theme: data.theme,
+      enableMarkdown: true,  // 富文本 Markdown
+      // 改写：自定义链接点击
+      onNodeClick: (node: KMindNode) => {
+        if (node.link?.type === 'block') {
+          router.push(`/documents/${currentDocId}#block-${node.link.targetId}`);
+        } else if (node.link?.type === 'page') {
+          router.push(`/documents/${node.link.targetId}`);
+        } else if (node.link?.type === 'mindmapNode') {
+          // 嵌套导图：id.format = 'mindmapId.nodeId'
+          const [mindmapId, nodeId] = node.link.targetId.split('.');
+          router.push(`/mindmap/${mindmapId}?focus=${nodeId}`);
+        }
+      },
+      // 照搬浮动预览（Alt+Click）
+      onNodeAltClick: (node) => showFloatingPreview(node.text),  // 自定义 React Portal 预览
+    });
+
+    // 布局自动（上游树算法，保证整齐）
+    mindMapRef.current.layout();
+
+    // 改写：Yjs 绑定（新增协作）
+    const yDoc = new Y.Doc();
+    const provider = new HocuspocusProvider({ url: supabaseRealtimeUrl, name: `kmind.${docId}` });
+    const yMap = yDoc.getMap('mindmap');
+    yMap.observe(() => onChange(yMap.toJSON() as KMindData));  // 实时同步
+
+    return () => {
+      mindMapRef.current?.destroy();  // 原生命周期管理
+      provider.destroy();
+    };
+  }, [data]);
+
+  // 照搬工具栏（浮动，动态定位）
+  return (
+    <div className="relative h-full bg-white dark:bg-gray-900">
+      <div ref={containerRef} className="w-full h-full" />
+      {!readOnly && <FloatingToolbar position={mousePos} />}  // 原浮动栏（插入/导出）
+      <ZenModeOverlay isZen={isZen} />  // 原禅模式
+    </div>
+  );
+}
+```
+
+**集成层改写（SiYuan → Wolai/BlockNote）**  
+- **MOC 模式**：原实时文档树 → 改用 Supabase RPC 查询递归文档树（CTE），节点 1:1 映射 documents.id/title。  
+- **镜像嵌入**：原 SiYuan 块嵌入 → 改写为 BlockNote 自定义块类型（`type: 'kmindEmbed'`，props: { mindmapId }），渲染只读 KMindRenderer + 点击全屏。  
+- **链接解析**：原 siyuan:// → 新增 parser：`[[block-${id}]]` → `#block-${id}` 锚点；`[[page-${id}]]` → `/documents/${id}`。  
+- **导出**：照搬 PDF/图像 + 新增 Markdown（上游支持 FreeMind 格式转 MD）。  
+- **双向同步**：笔记 heading 变化 → 更新导图根节点 children；导图节点拖拽 → 插入/移动 BlockNote heading 块（用 editor.replaceBlocks）。  
+
+**样式移植（直接用 Tailwind 迁移原 CSS）**  
+```css
+/* src/components/mindmap/kmind.css（照搬原 native CSS，Tailwind 化）*/
+.kmind-node {
+  @apply px-4 py-2 rounded-lg border shadow-sm bg-white;
+  /* 原 rainbow lines */
+  .kmind-line { stroke: hsl(var(--hue, 0), 70%, 60%); }
+}
+.kmind-toolbar { @apply absolute bg-white rounded shadow-lg p-2; /* 浮动定位 */ }
+```
+
+### 3. 完整页面实现（/mindmap/[id]/page.tsx，直接复制）
+
+```tsx
+// app/mindmap/[id]/page.tsx（RSC + 客户端包装）
+import { createServerClient } from '@/lib/supabase/server';
+import { KMindRenderer } from '@/components/mindmap/KMindRenderer';
+import { debounce } from 'lodash';
+
+export default async function MindMapPage({ params }: { params: { id: string } }) {
+  const supabase = createServerClient();
+  const { data: doc } = await supabase.from('documents').select('mindmap_data').eq('id', params.id).single();
+
+  const initialData = doc?.mindmap_data || defaultKMindData;  // 上游默认
+
+  'use client';  // 切换客户端
+
+  const saveDebounced = debounce(async (newData: KMindData) => {
+    await supabase.from('documents').update({ mindmap_data: newData }).eq('id', params.id);
+    // 触发 BlockNote 同步（如果嵌入）
+    if (isEmbedded) updateParentOutline(params.id, extractOutline(newData));
+  }, 800);
+
+  return (
+    <div className="h-screen flex flex-col">
+      {/* 原顶部栏：自动排版/主题/导出 */}
+      <div className="h-12 bg-white border-b flex items-center px-4 gap-2">
+        <button onClick={() => mindMapRef.current?.layout()}>自动排版</button>
+        <button onClick={() => toggleZen()}>禅模式</button>
+        <button onClick={() => exportToPNG()}>导出图像</button>
+      </div>
+      <KMindRenderer data={initialData} onChange={saveDebounced} />
+    </div>
+  );
+}
+```
+
+**BlockNote 嵌入块（斜杠命令插入）**  
+```tsx
+// 在 BlockNoteEditor.tsx slash menu 加
+{
+  title: 'KMind 嵌入',
+  onItemClick: () => {
+    const embedBlock = {
+      type: 'kmindEmbed',
+      attrs: { mindmapId: currentDocId },  // 或选择其他导图
+    };
+    editor.insertBlocks([embedBlock], editor.getSelection()?.end ?? 0);
+  },
+}
+
+// 自定义渲染器
+const KMindEmbed = (props: { mindmapId: string }) => (
+  <div className="border rounded p-4 my-2">
+    <KMindRenderer data={fetchMindData(props.mindmapId)} readOnly={true} />
+    <button onClick={() => router.push(`/mindmap/${props.mindmapId}`)}>打开完整导图</button>
+  </div>
+);
+```
+
+### 4. 给 AI 编程助手的完整 Prompt（直接复制，分阶段执行）
+
+```
+你是一个顶级 React/Next.js 移植专家。现在仓库有 Next.js 15 + Supabase + BlockNote 基础（阶段 0-1 已完）。请基于 https://github.com/suka233/siyuan-Kmind 插件（上游 wanglin2/mind-map）移植成熟思维导图模块到我们的 Wolai 系统：
+
+1. 克隆 repo，提取 wanglin2/mind-map 核心（Canvas 渲染、节点/链接/布局），包装成 React 组件 KMindRenderer（用 useRef + useEffect 管理生命周期，避免 DOM 冲突）。
+2. 照搬核心功能：富文本节点（Markdown 支持）、图像/复选框节点、拖拽/缩放/禅模式、浮动工具栏、主题（rainbow lines）、导出（PNG/PDF/MD）。
+3. 改写集成：SiYuan 块链接 → BlockNote 锚点 (#block-id) + 页面跳转；MOC 模式 → Supabase 递归文档树查询；嵌入 → BlockNote 自定义块 (type: 'kmindEmbed')。
+4. 新增实时协作：用 Yjs + @hocuspocus/provider 共享 mindmap_data JSONB，防抖保存视图状态（zoom/pan）。
+5. 双向同步：导图节点变化 → 更新 BlockNote heading 块顺序；笔记大纲变化 → 刷新导图 children。
+6. 样式：直接用 Tailwind 迁移原 CSS（圆角节点、整齐分支，像 MindManager）。
+7. 页面：/mindmap/[id]/page.tsx（RSC 加载数据 + 客户端渲染），支持 ?focus=nodeId 跳转。
+8. 性能：大导图加虚拟化，首屏 <1s。
+
+输出完整文件列表 + 代码（types/kmind.ts, components/mindmap/KMindRenderer.tsx, app/mindmap/[id]/page.tsx, BlockNote 自定义块）。严格照搬上游 API，不要从头写渲染逻辑。测试用例：拖拽节点 → 保存 → 嵌入块显示 → 点击链接跳转块。
+```
+
+**结论（给你的一句话）**  
+**执行这个 Prompt 后，你会得到一个“Luckysheet 级成熟”的 KMind 移植版：整齐如 MindManager，嵌套如 Wolai，协作零痛点。**  

design/思维导图方案.md

@@ -1,207 +0,0 @@
-# Wolai-clone 思维导图方案（v3.1）——复刻 MindManager 体验并与 BlockNote 大纲双向同步
-
-## 0. 背景与目标
-
-- v3.0 架构已确定使用 Next.js + BlockNote + Yjs，需新增思维导图模块，实现与笔记大纲/块树实时联动，体验对齐 MindManager/Wolai/Kmind。
-- 核心诉求：**极致整齐的自动布局**、**节点富内容（图片/富文本/图标/link）**、**跨文档/跨导图的链接能力**、**与笔记大纲双向同步**。
-- 设计方向：继续使用 @xyflow/react（React Flow 11+）作为画布内核，自研布局 & 样式层，数据完全托管在 Supabase（documents 表）与独立 mindmap 表中。
-
-## 1. 体验原则
-
-1. **MindManager 级布局**：节点水平/垂直间距固定，主干左右对称；支持“经典曲线”“直角线”两种连线；节点宽度随内容自动适配，最多两行后溢出省略。
-2. **富内容节点**：每个节点可包含标题、富文本摘要、图标、emoji、标签、封面图片；支持 Markdown/快捷键编辑。
-3. **多级链接**：节点可跳转到：
-   - 当前文档某块（blockId）→ 通过 `block://{id}` 链接并高亮目标块。
-   - 其他笔记（documentId）→ 打开对应页面。
-   - 其他导图的节点（mindmapId+nodeId）→ 支持导图嵌套导航。
-4. **实时同步**：导图结构映射到笔记大纲（Tree）；改导图 = 改大纲；在 BlockNote 中增删标题块 = 导图自动更新节点。
-5. **Wolai/Kmind 外观**：圆角矩形 + 轻投影，hover 显示手型 + 菜单，选中高亮；暗黑/亮色一致。支持缩放、平移、迷你地图。
-
-## 2. 技术架构
-
-```
-BlockNote (Y.Doc: document_tree)
-      │
-      ├─ outline nodes ↔ mindmap nodes (双向映射表)
-      │
-Mindmap SubDoc (Y.Doc: mindmap_{document_id})
-      │
-React Flow 画布 + 自研 MindLayout Engine
-      │
-Supabase tables:
-  documents (content jsonb)
-  mindmap_meta (id, document_id, layout_prefs, theme)
-  mindmap_nodes (id, mindmap_id, block_id, parent_id, data jsonb, position cache)
-```
-
-- 每份文档默认有一份 mindmap（也支持多个 mindmap）；mindmap 数据存于 `mindmap_nodes`，并同步缓存到 BlockNote content（便于离线/导出）。
-- 协作层使用 Yjs SubDoc：当打开导图时订阅 `mindmap_{document_id}`，React Flow 节点/边与 SubDoc 同步，保持毫秒级更新。
-
-## 3. 视觉规格（融合 MindManager 细节）
-
-- **节点样式**：
-  - 尺寸：`min-w 240px`，默认 280px，最大 384px；高度随内容自动撑开，不超过两行，超出显示省略。
-  - 圆角 24px、2px 边框；选中 `border-blue-500 ring-4 ring-blue-100 scale-105`，未选中 `border-slate-300 hover:border-blue-400 hover:shadow-2xl`。
-  - 背景渐变 `linear-gradient(135deg,#ffffff 0%,#f8fafc 100%)`，阴影 `0 4px 15px rgba(0,0,0,0.08)`；选中提升到 `0 10px 25px rgba(59,130,246,0.15)`。
-  - 左上角支持图标徽章（36px 圆形），顶部可插入封面（最大高 160px），右侧有链接指示器。
-  - 示例 className：
-
-    ```tsx
-    const base = `
-      relative px-5 py-3 min-w-60 max-w-96 rounded-2xl
-      bg-white border-2 shadow-lg transition-all duration-200
-    `;
-    const active = 'border-blue-500 ring-4 ring-blue-100 scale-105';
-    const idle = 'border-slate-300 hover:border-blue-400 hover:shadow-2xl';
-    ```
-
-- **连线样式**：
-  - MindManager 曲线：`M sx sy C sx+100 sy targetX-100 targetY targetX targetY`，颜色 `#94a3b8`，宽度 3px。
-  - 备选直角线（smoothstep）满足 Kmind 用户；末端 arrowhead 半径 6px。
-
-- **画布与工具栏**：
-  - 画布背景 `bg-gradient-to-br from-slate-50 to-slate-100`，使用 React Flow `Background` gap 24px。
-  - 顶部 56px 工具栏，包含自动排版、主题切换、导出、折叠/展开、缩放重置；工具栏按钮遵循 `px-4 py-2 rounded-lg` 规范。
-
-## 4. 对齐 MindManager 的布局策略
-
-1. **层级布局**：根节点居中，一级节点左右分布；根据用户设置（左/右/双向）动态计算。
-2. **自动间距**：使用自研 `MindLayout Engine`（基于 DAG 布局），输入节点树 + 样式参数，输出绝对坐标；支持：
-   - 同层节点纵向等距排列。
-   - 子节点根据最长文本宽度自动算水平偏移，保证连线整齐。
-   - 支持节点折叠/展开，折叠时子树隐藏但保留布局缓存。
-3. **连线样式**：提供“曲线（贝塞尔）”“直角线”两种；线条宽度、颜色可继承主题。
-4. **对齐辅助**：拖动节点时展示辅助线，松手后自动吸附至推荐位置；支持 `Shift+拖拽` 只在水平或垂直方向移动。
-
-## 5. 节点内容设计
-
-字段结构（存储于 `mindmap_nodes.data`）：
-
-```json
-{
-  "title": "节点标题",
-  "richText": "<p>富文本</p>",
-  "icon": "mdi-lightbulb",
-  "emoji": "💡",
-  "tags": ["优先级:高", "待讨论"],
-  "image": { "url": "...", "width": 200, "height": 120 },
-  "link": {
-    "type": "block" | "document" | "mindmap-node" | "url",
-    "targetId": "block_xxx / doc_xxx / mindmap_y/node_z",
-    "title": "跳转提示"
-  },
-  "status": "todo | doing | done",
-  "collapsed": false
-}
-```
-
-- 富文本编辑器使用 `@tiptap/react` 迷你实例或 BlockNote 内嵌 mini editor，支持粗体/斜体/高亮/超链接。
-- 图片可从 Supabase Storage 选择或粘贴上传，节点支持设置小型封面或内嵌图片。
-- 节点图标：内置 MindManager 风格图标库（优先级、进度、标记），同时支持 emoji。
-
-## 6. 链接和导航
-
-| 类型 | 格式 | 交互 |
-|------|------|------|
-| 块链接 | `block://{blockId}` | hover 显示块摘要，点击在文档中滚动并高亮该块。 |
-| 文档链接 | `doc://{documentId}` | 打开对应页面，可在侧边栏预览。 |
-| 导图节点 | `mind://{mindmapId}/{nodeId}` | 若当前导图即目标，则定位；否则打开目标导图并定位。 |
-| 外部 URL | `https://...` | 新标签页打开。 |
-
-- 链接编辑面板提供快速搜索（块/页面/导图节点），并记录最近使用项。
-- 支持「一键转块」：把导图节点转换为 BlockNote 内的块，或把块拖入导图生成节点。
-
-## 7. 大纲与导图的双向同步
-
-### 数据映射
-
-- 维护 `outlineNodeId ↔ mindmapNodeId` 映射表，存储在 `mindmap_nodes.block_id` 字段。
-- BlockNote 标题块（H1~H4）与导图层级对应；非标题块可作为节点备注（richText）。
-
-### 同步策略
-
-1. **导图 → 大纲**
-   - 新建节点：创建对应 BlockNote 标题块（Yjs 操作），插入到同级相应位置。
-   - 删除节点：删除/归档对应块。
-   - 拖动节点：更新块的父级和排序（BlockNote reorder API）。
-2. **大纲 → 导图**
-   - 在大纲中新建/调整标题块时，触发同步 Hook 更新 mindmap SubDoc。
-   - 对于仅存在于导图的节点，可标记 `detached=true`，大纲不显示；用户可手动“附着”到大纲。
-
-### 冲突处理
-
-- 通过 Yjs transaction + `lastWriterWins` 策略；若同一节点同时被导图与大纲修改，变更合并后派生 diff，在 UI 中提示“有更新，点击同步”。
-- 提供“锁定导图”开关，当导图处于演示模式时暂停同步，避免误差。
-
-## 8. 前端组件分层
-
-1. `MindmapCanvas`：封装 React Flow + 主题/布局；负责渲染节点、连线、背景、缩放器。
-2. `MindLayoutEngine`：输入节点树返回位置/尺寸，支持缓存与局部更新。
-3. `MindNodeCard`：节点内容组件，内嵌富文本、标签、图片、链接、hover toolbar。
-4. `MindLinkPanel`：统一链接管理，搜索块/文档/导图节点。
-5. `OutlineSyncController`：监听 BlockNote、导图 SubDoc，执行同步动作。
-6. `MindHistorySidebar`：展示导图版本历史/快照（可依赖 Supabase table versions）。
-
-## 9. 数据库 & API
-
-```sql
-create table mindmap_meta (
-  id uuid primary key default uuid_generate_v4(),
-  document_id uuid references documents(id),
-  title text,
-  layout_prefs jsonb,   -- 左/右布局、连线样式、主题
-  theme text default 'wolai-light',
-  created_by uuid references auth.users,
-  created_at timestamptz default now(),
-  updated_at timestamptz default now()
-);
-
-create table mindmap_nodes (
-  id uuid primary key default uuid_generate_v4(),
-  mindmap_id uuid references mindmap_meta(id) on delete cascade,
-  parent_id uuid references mindmap_nodes(id),
-  block_id uuid,        -- 可为空（纯导图节点）
-  order_index integer,
-  data jsonb,
-  cached_position jsonb,
-  created_at timestamptz default now(),
-  updated_at timestamptz default now()
-);
-```
-
-- FastAPI Endpoints：
-  - `GET /mindmaps/{id}`：返回 meta + nodes + outline mapping。
-  - `POST /mindmaps`：创建新导图（可附加到文档）。
-  - `PATCH /mindmaps/{id}`：更新布局/主题。
-  - `POST /mindmaps/{id}/nodes`、`PATCH /.../{nodeId}`、`DELETE ...`：供批量导入/AI/脚本使用。
-  - `POST /mindmaps/{id}/export`：导出为 MMAP、OPML、PNG、SVG。
-
-## 10. 实施计划
-
-| 阶段 | 目标 | 核心任务 | 输出 |
-|------|------|----------|------|
-| P0 需求确认（0.5d） | 对齐视觉规范 & 交互 | - 与设计确认节点样式、主题变量、连线风格<br>- 列出与大纲同步的详细规则/边界<br>- 明确链接搜索/跳转需求 | 更新 PRD + Figma 草图 |
-| P1 数据与 API（1.5d） | 建表 + 后端接口 | - Supabase 建 `mindmap_meta`/`mindmap_nodes` + RLS<br>- FastAPI mindmap CRUD + 导出占位<br>- 单元测试覆盖 | 后端 PR + Swagger |
-| P2 前端内核（2d） | React Flow + 布局引擎 | - 封装 `MindLayoutEngine`，实现左右对称/直角/曲线<br>- 节点/连线主题实现，支持折叠/缩放 | 画布 demo |
-| P3 节点富内容（2d） | 节点编辑能力 | - 富文本/图标/图片/标签/状态组件<br>- 链接面板 + 搜索块/文档/导图节点<br>- 粘贴逻辑（从 MindManager/文本导入） | 节点交互完成 |
-| P4 同步控制器（2d） | 导图 ↔ 大纲 | - 建立 block ↔ node 映射 SubDoc<br>- 实现双向增删改同步/冲突提示<br>- E2E 测试（Cypress + Playwright 多窗口） | 同步稳定 |
-| P5 打磨 & 导出（1.5d） | 性能/体验 | - 虚拟化/懒加载，支持 2k+ 节点<br>- 导出 PNG/SVG/OPML<br>- 快捷键、迷你地图、历史记录 | 发布候选 |
-
-## 11. 验收标准
-
-- [ ] 导图布局与 MindManager 对齐：节点间距统一，拖动自动吸附。
-- [ ] 节点支持图片/富文本/图标/标签/链接，复制 MindManager 内容可无损粘贴。
-- [ ] 节点链接在不同类型 (block/doc/mind/node) 下跳转准确，带 hover 预览。
-- [ ] 与 BlockNote 大纲实时同步，双向修改 200ms 内可见，无冲突。
-- [ ] 多人协作时节点光标、拖拽、折叠状态实时共享，无明显抖动。
-- [ ] 支持导出 PNG/SVG/OPML/MMAP（后续），可导入 MindManager 文件（可放在扩展阶段）。
-
----
-
-## 12. 落地提示
-
-- P2 阶段可直接引入 `grok` 方案中的 `MindManagerNode`/`MindManagerEdge` 作为主题模板，结合 Tailwind CSS 变量封装成 `MindNodeCard` 多主题体系。
-- 布局计算使用 elkjs（`algorithm=layered`、`elk.layered.nodePlacement.strategy=BRANDES_KOEPF`），封装 `getMindManagerLayout` 并缓存，确保自动排版按钮在 200ms 内完成 500+ 节点重新布局。
-- 同步控制器上线前，编写 OPML/MMAP → `mindmap_nodes` 的导入脚本，用真实 MindManager 数据验证字段与链接策略，并准备导图 ↔ 大纲操作回放工具以排查协作冲突。
-
-此方案在保留 MindManager 用户习惯的同时，借助 Supabase + React Flow 构建可扩展的思维导图系统，并与 BlockNote 文档深度联动。按 P0-P5 推进，可在 1.5~2 周内完成 MVP 并持续迭代高级功能。