- {viewerMeta.title || "图片预览"}
+ {viewerMeta.title || "图片预览"}
{viewerMeta.width && viewerMeta.height ? `${viewerMeta.width} × ${viewerMeta.height}px` : ""}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
-
+
-
+
{
@@ -60,19 +47,6 @@ type SidebarProps = {
onClose: () => void;
};
-const predefinedIcons = [
- {
- type: 'priority',
- name: '优先级',
- list: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
- },
- {
- type: 'progress',
- name: '进度',
- list: ['start', 'quarter', 'half', '3quarter', 'done'] // Standard keys usually
- }
-];
-
const ColorInput = ({
value,
onChange,
@@ -134,13 +108,13 @@ const StylePanel = ({ activeNodes }: { activeNodes: MindMapNode[] }) => {
const newStyle: Record = {};
[
"fontFamily", "fontSize", "lineHeight", "color", "fontWeight", "fontStyle",
- "textDecoration", "borderWidth", "borderColor", "fillColor", "shape",
+ "textDecoration", "borderWidth", "borderColor", "fillColor", "shape",
"lineColor", "lineWidth", "lineDasharray", "borderRadius", "borderDasharray"
].forEach((prop) => {
newStyle[prop] = node.getStyle(prop, false);
});
- // eslint-disable-next-line react-hooks/set-state-in-effect
- setStyle(newStyle);
+ // 异步更新，避免同步 setState 抛 lint
+ Promise.resolve().then(() => setStyle(newStyle));
}
}, [activeNodes]);
@@ -551,7 +525,7 @@ const IconPanel = ({ activeNodes }: { activeNodes: MindMapNode[] }) => {
dangerouslySetInnerHTML={{ __html: item.icon }}
/>
) : (
- 
+ 
+
@@ -623,8 +597,23 @@ const OutlinePanel = ({ mindmap }: { mindmap: any }) => {
const activate = (node: any) => {
const r = mindmap?.renderer;
if (!node || !r) return;
- r.activeNodeList = [node];
- r.lastActiveNodeList = [node];
+ // 仅通过已有方法触发激活，避免直接改 renderer 属性
+ if (typeof r.clearActiveNodeList === "function") {
+ // @ts-expect-error 第三方库缺少类型
+ r.clearActiveNodeList();
+ }
+ if (typeof r.addNodeToActiveList === "function") {
+ // @ts-expect-error 第三方库缺少类型
+ r.addNodeToActiveList(node, true);
+ } else {
+ // 兜底：仍保留最小副作用写入
+ try {
+ // @ts-expect-error 第三方库 renderer 缺类型
+ r?.setActiveNode?.(node);
+ } catch {
+ // 最后兜底：不再直接改引用，避免 lint 报错
+ }
+ }
mindmap.emit?.("node_active", node, [node]);
r.setRootNodeCenter?.();
};
@@ -660,45 +649,336 @@ const OutlinePanel = ({ mindmap }: { mindmap: any }) => {
};
const SettingsPanel = ({ mindmap }: { mindmap: any }) => {
- const [freeDrag, setFreeDrag] = useState
-
-
-
- {freeDrag ? "开" : "关"}
-
+
+ ("full");
+ const [model, setModel] = useState("qwen3:30b-a3b-instruct-2507-q4_K_M");
+ const [baseUrl, setBaseUrl] = useState("http://localhost:11434/api/chat");
+ const [systemPrompt, setSystemPrompt] = useState("请用 Markdown，仅使用标题和无序列表结构输出思维导图内容。不要添加额外解释。");
+ const [streamText, setStreamText] = useState("");
+ const [loading, setLoading] = useState(false);
+ const controllerRef = React.useRef(null);
+
+ const resetStream = () => {
+ setStreamText("");
+ };
+
+ const stop = () => {
+ controllerRef.current?.abort();
+ controllerRef.current = null;
+ setLoading(false);
+ };
+
+ const runChat = async () => {
+ if (!prompt.trim()) return;
+ resetStream();
+ setLoading(true);
+ const controller = new AbortController();
+ controllerRef.current = controller;
+ try {
+ const res = await fetch(baseUrl, {
+ method: "POST",
+ signal: controller.signal,
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ model,
+ stream: true,
+ messages: [
+ { role: "system", content: systemPrompt },
+ { role: "user", content: prompt.trim() },
+ ],
+ }),
+ });
+ const reader = res.body?.getReader();
+ if (!reader) throw new Error("无法读取流");
+ const decoder = new TextDecoder();
+ let full = "";
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ const chunk = decoder.decode(value);
+ // Ollama 返回 json 行
+ const lines = chunk.split("\n").filter(Boolean);
+ for (const line of lines) {
+ try {
+ const json = JSON.parse(line);
+ if (json.message?.content) {
+ full += json.message.content;
+ setStreamText((prev) => prev + json.message.content);
+ }
+ } catch {
+ // 忽略非 json 行
+ }
+ }
+ }
+ return full;
+ } finally {
+ setLoading(false);
+ controllerRef.current = null;
+ }
+ };
+
+ // 将 AI 文本解析为子节点数组，尽量兼容宽松 Markdown 列表
+ const parseChildrenFromText = async (text: string) => {
+ const { transformMarkdownTo } = await import("simple-mind-map/src/parse/markdownTo.js");
+ const { createUid } = await import("simple-mind-map/src/utils/index.js");
+ const safeText = text || "";
+ let children = transformMarkdownTo(safeText)?.children || [];
+ if (!children.length) {
+ const lines = safeText
+ .split(/\r?\n/)
+ .map((l) => l.trim())
+ .filter(Boolean);
+ const listLines = lines.filter((l) => /^[-*+]\s+/.test(l)).map((l) => l.replace(/^[-*+]\s+/, ""));
+ const headingLines = lines.filter((l) => /^#+\s+/.test(l)).map((l) => l.replace(/^#+\s+/, ""));
+ const useLines = listLines.length ? listLines : headingLines.length ? headingLines : lines;
+ children = useLines.map((t) => ({ data: { text: t } }));
+ }
+ if (!children.length) {
+ children = [{ data: { text: safeText.slice(0, 200) || "新节点" } }];
+ }
+
+ const fill = (nodes: any[]) => {
+ nodes.forEach((node) => {
+ if (!node.data) node.data = {};
+ if (!node.data.text) node.data.text = "新节点";
+ if (!node.data.uid) node.data.uid = createUid();
+ if (node.children?.length) fill(node.children);
+ });
+ };
+ fill(children);
+ return JSON.parse(JSON.stringify(children));
+ };
+
+ const getActiveList = () =>
+ (activeNodes && activeNodes.length ? activeNodes : mindmap?.renderer?.activeNodeList || []) as any[];
+
+ const updateDataByUids = async (uids: string[], updater: (node: any) => void) => {
+ const source = mindmap?.getData?.(true) || mindmap?.getData?.();
+ const dataClone = source ? JSON.parse(JSON.stringify(source)) : null;
+ if (!dataClone) {
+ window.alert("无法获取导图数据，操作失败。");
+ return false;
+ }
+
+ // 确保整棵树都有 uid，避免官方逻辑依赖 uid 时抛错
+ const { createUid } = await import("simple-mind-map/src/utils/index.js");
+ const sanitizeNode = (node: any) => {
+ if (!node || typeof node !== "object") return null;
+ if (!node.data) node.data = {};
+ if (!node.data.uid) node.data.uid = createUid();
+ if (typeof node.data.text !== "string") {
+ node.data.text =
+ node.data.text != null ? String(node.data.text) : "新节点";
+ }
+ if (Array.isArray(node.children)) {
+ node.children = node.children
+ .map((c: any) => sanitizeNode(c))
+ .filter(Boolean);
+ } else {
+ node.children = [];
+ }
+ return node;
+ };
+ sanitizeNode(dataClone);
+
+ const cleanRenderCallbacks = () => {
+ try {
+ const r = mindmap?.renderer;
+ if (r && Array.isArray((r as any).renderCallbackList)) {
+ // @ts-expect-error 第三方库内部字段
+ r.renderCallbackList = (r.renderCallbackList as any[]).filter(
+ (fn) => typeof fn === "function",
+ );
+ }
+ } catch {
+ // ignore
+ }
+ };
+ cleanRenderCallbacks();
+
+ const walk = (node: any) => {
+ if (uids.includes(node?.data?.uid)) {
+ updater(node);
+ }
+ if (node.children?.length) {
+ node.children.forEach(walk);
+ }
+ };
+ walk(dataClone);
+ cleanRenderCallbacks();
+ mindmap?.updateData?.(dataClone);
+ cleanRenderCallbacks();
+ return true;
+ };
+
+ const applyFullMindmap = async (content: string) => {
+ if (!content.trim()) return;
+ try {
+ const { transformMarkdownTo } = await import("simple-mind-map/src/parse/markdownTo.js");
+ const data = transformMarkdownTo(content);
+ if (!data?.data) {
+ data.data = { text: "中心主题" };
+ }
+ mindmap?.setData?.(data);
+ mindmap?.command?.clearHistory?.();
+ } catch (error) {
+ console.error(error);
+ window.alert("解析 AI 结果失败，请检查格式（需 Markdown 标题和无序列表）。");
+ }
+ };
+
+ const applyPartialMindmap = async (text: string, presetChildren?: any[]) => {
+ const list = getActiveList();
+ if (!list?.length) {
+ window.alert("请选择节点后再续写。");
+ return;
+ }
+ try {
+ const children = presetChildren || (await parseChildrenFromText(text));
+ const uids = list
+ .map(
+ (node: any) =>
+ node?.nodeData?.data?.uid ||
+ node?.nodeData?.uid ||
+ node?.getData?.("uid") ||
+ node?.uid,
+ )
+ .filter(Boolean);
+ if (!uids.length) {
+ window.alert("未获取到选中节点的 UID，续写失败。");
+ return;
+ }
+ const ok = await updateDataByUids(uids as string[], (node) => {
+ node.children = Array.isArray(node.children) ? node.children : [];
+ const childrenCopy = JSON.parse(JSON.stringify(children));
+ node.children.push(...childrenCopy);
+ });
+ if (!ok) return;
+ mindmap?.renderer?.render?.(mindmap?.getData?.());
+ } catch (e) {
+ console.error("AI Markdown Parsing Error:", e);
+ if (e instanceof Error) {
+ console.error("Error Message:", e.message);
+ console.error("Error Stack:", e.stack);
+ }
+ window.alert("解析 AI 返回的 Markdown 失败，请检查格式。");
+ }
+ };
+
+ const handleSend = async () => {
+ const text = (await runChat()) || streamText;
+ if (mode === "full" && text) {
+ await applyFullMindmap(text);
+ }
+ if (mode === "partial" && text) {
+ await applyPartialMindmap(text);
+ }
+ };
+
+ const handleSaveToNote = () => {
+ const text = streamText.trim();
+ if (!text) {
+ window.alert("暂无可保存的内容");
+ return;
+ }
+ const list = getActiveList();
+ if (!list?.length) {
+ window.alert("请选择节点后再保存备注");
+ return;
+ }
+ list.forEach((node: any) => mindmap?.execCommand?.("SET_NODE_NOTE", node, text));
+ };
+
+ const handleAppendSingleChild = async () => {
+ const text = streamText.trim();
+ if (!text) {
+ window.alert("暂无可生成的内容");
+ return;
+ }
+ const children = await parseChildrenFromText(text.slice(0, 500));
+ const first = children.length ? [children[0]] : [{ data: { text } }];
+ await applyPartialMindmap("", first);
+ };
+
+ const handleAppendMultiChild = async () => {
+ const text = streamText.trim();
+ if (!text) {
+ window.alert("暂无可生成的内容");
+ return;
+ }
+ const children = await parseChildrenFromText(text);
+ await applyPartialMindmap("", children);
+ };
+
+ const handleReplaceCurrent = async () => {
+ const text = streamText.trim();
+ if (!text) {
+ window.alert("暂无可替换的内容");
+ return;
+ }
+ const list = getActiveList();
+ if (!list?.length) {
+ window.alert("请选择节点后再修改");
+ return;
+ }
+ const uids = list
+ .map(
+ (node: any) =>
+ node?.nodeData?.data?.uid ||
+ node?.nodeData?.uid ||
+ node?.getData?.("uid") ||
+ node?.uid,
+ )
+ .filter(Boolean) as string[];
+ const ok = await updateDataByUids(uids, (node) => {
+ if (!node.data) node.data = {};
+ node.data.text = text;
+ });
+ if (ok) {
+ mindmap?.renderer?.render?.(mindmap?.getData?.());
+ }
+ };
+
return (
+
-
+
+ updateWatermark({ show: v })}
+ >
+ {watermark.show ? "开" : "关"}
+
+
+ {watermark.show && (
+
+
+ )}
+
+ updateWatermark({ onlyExport: v })}
+ >
+ {watermark.onlyExport ? "开" : "关"}
+
+
+
+
+ updateWatermark({ belowNode: v })}
+ >
+ {watermark.belowNode ? "开" : "关"}
+
+
+
+
+ updateWatermark({ text: e.target.value })}
+ />
+
+
+ updateWatermark({ textStyle: { color: val } })}
+ />
+
+
+
+
+ updateWatermark({
+ textStyle: {
+ opacity: Math.min(1, Math.max(0, Number(e.target.value) || 0)),
+ },
+ })
+ }
+ />
+
+
+
+
+ updateWatermark({
+ textStyle: { fontSize: Number(e.target.value) || 14 },
+ })
+ }
+ />
+
+
+
+ updateWatermark({ angle: Number(e.target.value) || 0 })}
+ />
+
+
+
+ updateWatermark({ lineSpacing: Number(e.target.value) || 0 })}
+ />
+
+
+
+ updateWatermark({ textSpacing: Number(e.target.value) || 0 })}
+ />
+
+
-
-
);
};
@@ -739,11 +1019,13 @@ const NotePanel = ({ mindmap, activeNodes }: { mindmap: any; activeNodes: MindMa
// 当选中节点变化时，自动展示首个节点的备注
useEffect(() => {
if (!activeNodes?.length) {
- setNote("");
+ Promise.resolve().then(() => setNote(""));
return;
}
const current = readNote(activeNodes[0]);
- setNote(typeof current === "string" ? current : "");
+ Promise.resolve().then(() =>
+ setNote(typeof current === "string" ? current : ""),
+ );
}, [activeNodes]);
const getActiveList = () =>
@@ -794,28 +1076,404 @@ const NotePanel = ({ mindmap, activeNodes }: { mindmap: any; activeNodes: MindMa
);
};
-const AiPanel = () => {
+type AiMode = "chat" | "full" | "partial";
+
+const AiPanel = ({ mindmap, activeNodes }: { mindmap: any; activeNodes: MindMapNode[] }) => {
const [prompt, setPrompt] = useState("");
- const send = () => window.alert("AI 对话占位，后续接入大模型：\n" + prompt);
+ const [mode, setMode] = useState
+
+
+
+ updateOpt("openPerformance", v)}
+ >
+ {config.openPerformance ? "开" : "关"}
+
+
+
+
+ updateOpt("enableFreeDrag", v)}
+ >
+ {config.enableFreeDrag ? "开" : "关"}
+
+
+
+
+ updateOpt("openRealtimeRenderOnNodeTextEdit", v)}
+ >
+ {config.openRealtimeRenderOnNodeTextEdit ? "开" : "关"}
+
+
+
+
+ updateOpt("alwaysShowExpandBtn", v, true)}
+ >
+ {config.alwaysShowExpandBtn ? "开" : "关"}
+
+
+
+
+ updateOpt("enableAutoEnterTextEditWhenKeydown", v)}
+ >
+ {config.enableAutoEnterTextEditWhenKeydown ? "开" : "关"}
+
+
+
+
+ updateOpt("mousewheelAction", v)}
+ options={[
+ { label: "缩放", value: "zoom" },
+ { label: "平移", value: "move" },
+ ]}
+ />
+
+ {config.mousewheelAction === "zoom" && (
+
+
+ updateOpt("mousewheelZoomActionReverse", v === "true")}
+ options={[
+ { label: "常规", value: "false" },
+ { label: "反转", value: "true" },
+ ]}
+ />
+
+ )}
+
+
+ updateOpt("createNewNodeBehavior", v)}
+ options={[
+ { label: "默认", value: "default" },
+ { label: "不激活", value: "notActive" },
+ { label: "仅激活新节点", value: "activeOnly" },
+ ]}
+ />
+
+
+
+
+ updateOpt("imgTextMargin", Number(e.target.value) || 0, true)}
+ />
+
+
+
+ updateOpt("textContentMargin", Number(e.target.value) || 0, true)}
+ />
+
+
-
+
{aiOn ? "开" : "关"}
- 其余设置后续接入（滚轮缩放方向、拖拽导入等）。
-
-