+
+
+
+
+
+
+ ${timeStr}
+
+ `;
+ item.querySelector('.doc-item-title').textContent = doc.title;
+
+ item.addEventListener('click', (e) => {
+ if (e.target.classList.contains('doc-item-delete')) return;
+ loadDocFromHistory(doc.id);
+ });
+
+ item.querySelector('.doc-item-delete').addEventListener('click', (e) => {
+ e.stopPropagation();
+ deleteDocFromHistory(doc.id);
+ });
+
+ container.appendChild(item);
+ });
+}
+
+function formatTime(date) {
+ const now = new Date();
+ const diff = now - date;
+ const minutes = Math.floor(diff / 60000);
+ const hours = Math.floor(diff / 3600000);
+ const days = Math.floor(diff / 86400000);
+
+ if (minutes < 1) return '刚刚';
+ if (minutes < 60) return `${minutes} 分钟前`;
+ if (hours < 24) return `${hours} 小时前`;
+ if (days < 7) return `${days} 天前`;
+
+ return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
+}
+
+async function loadDocFromHistory(docId) {
+ autoSaveToHistory();
+
+ const docs = getDocHistory();
+ const doc = docs.find(d => d.id === docId);
+ if (!doc) return;
+
+ currentDocId = doc.id;
+ // 异步从 IndexedDB 加载图片，回退到 localStorage
+ let images = await loadDocImagesAsync(doc.id);
+ if (!images && doc.images) {
+ // 旧版数据迁移：将内联图片转存到独立存储
+ images = doc.images;
+ saveDocImages(doc.id, images);
+ delete doc.images;
+ saveDocHistory(docs);
+ }
+ restoreImages(images);
+ editor.value = doc.content;
+ updateMarkmap();
+ renderSidebarDocs();
+}
+
+async function deleteDocFromHistory(docId) {
+ const docs = getDocHistory();
+ const doc = docs.find(d => d.id === docId);
+ const title = doc ? doc.title : '该文档';
+ if (!confirm(`确定要删除「${title}」吗？`)) return;
+
+ let updated = docs.filter(d => d.id !== docId);
+ saveDocHistory(updated);
+ // 删除该文档关联的图片（IndexedDB + localStorage）
+ deleteDocImages(docId);
+
+ if (docId === currentDocId) {
+ if (updated.length > 0) {
+ // 直接加载下一篇，不调用 loadDocFromHistory（其内部的 autoSaveToHistory 会重新保存已删除文档）
+ const nextDoc = updated[0];
+ currentDocId = nextDoc.id;
+ // 异步加载下一篇图片
+ let nextImages = await loadDocImagesAsync(nextDoc.id);
+ if (!nextImages && nextDoc.images) {
+ nextImages = nextDoc.images;
+ }
+ restoreImages(nextImages);
+ editor.value = nextDoc.content;
+ updateMarkmap();
+ } else {
+ currentDocId = null;
+ restoreImages(null);
+ editor.value = '';
+ updateMarkmap();
+ }
+ }
+
+ renderSidebarDocs();
+}
+
+function initSidebar() {
+ const sidebarToggle = document.getElementById('sidebar-toggle');
+ const sidebar = document.getElementById('sidebar');
+ const sidebarNew = document.getElementById('sidebar-new');
+
+ // 禁用过渡动画，避免刷新时出现收缩动效
+ sidebar.classList.add('no-anim');
+
+ // 恢复侧边栏状态（默认收缩，仅当用户之前手动展开时才展开）
+ if (localStorage.getItem('markmap-sidebar-collapsed') === 'false') {
+ sidebar.classList.remove('collapsed');
+ }
+
+ // 下一帧恢复过渡动画，确保后续交互有动效
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ sidebar.classList.remove('no-anim');
+ });
+ });
+
+ if (sidebarToggle && sidebar) {
+ sidebarToggle.addEventListener('click', () => {
+ sidebar.classList.toggle('collapsed');
+ localStorage.setItem('markmap-sidebar-collapsed', sidebar.classList.contains('collapsed'));
+ setTimeout(() => { if (mm) mm.fit(); }, 300);
+ });
+ }
+
+ if (sidebarNew) {
+ sidebarNew.addEventListener('click', () => newMap());
+ }
+
+ renderSidebarDocs();
+}
+
+// ── 主题功能 ──
+
+function applyTheme(theme, opts) {
+ const themeConfig = THEMES[theme];
+
+ // 库原生主题：deriveOptions 已处理颜色/节点样式/线宽等，无需覆盖
+ // 仅处理需要修正的项
+ if (themeConfig?.native) {
+ // dark 主题自带 canvasColor，移除以保持背景由日/夜间模式控制
+ if (themeConfig.stripCanvas && opts.theme) {
+ opts.theme = { ...opts.theme, canvasColor: undefined };
+ }
+ } else if (themeConfig?.colors) {
+ // 自定义主题（如彩色）：使用 scaleOrdinal 按分支路径分配颜色
+ const scale = d3.scaleOrdinal(themeConfig.colors);
+ opts.color = (node) => scale(`${node.state.path}`);
+ }
+
+ updateThemeUI();
+}
+
+function setTheme(theme) {
+ const content = editor.value;
+ const themeValue = theme || '';
+
+ // 匹配 frontmatter 块
+ const fmRegex = /^---\r?\n([\s\S]*?)\r?\n---/;
+ const fmMatch = content.match(fmRegex);
+
+ if (fmMatch) {
+ let fm = fmMatch[1];
+
+ // 检查是否已存在 theme 行
+ const themeLineRegex = /^(\s+)theme:\s*.+$/m;
+ const themeLineMatch = fm.match(themeLineRegex);
+
+ if (themeLineMatch) {
+ if (themeValue) {
+ // 替换已有 theme 值
+ fm = fm.replace(themeLineRegex, `$1theme: ${themeValue}`);
+ } else {
+ // 移除 theme 行
+ fm = fm.replace(/^\s+theme:.*\r?\n?/m, '');
+ }
+ } else if (themeValue) {
+ // 尚无 theme 行，需添加
+ const markmapRegex = /^markmap:\s*\r?\n/m;
+ if (markmapRegex.test(fm)) {
+ // 在 markmap 段落首行添加 theme
+ fm = fm.replace(markmapRegex, `markmap:\n theme: ${themeValue}\n`);
+ } else {
+ // 添加 markmap 段落
+ fm = fm + `\nmarkmap:\n theme: ${themeValue}`;
+ }
+ }
+
+ editor.value = content.replace(fmRegex, `---\n${fm}\n---`);
+ } else if (themeValue) {
+ // 无 frontmatter，创建一个
+ editor.value = `---\nmarkmap:\n theme: ${themeValue}\n---\n\n${content}`;
+ }
+
+ updateMarkmap();
+}
+
+function updateThemeUI() {
+ const themeDropdown = document.getElementById('theme-dropdown');
+ if (!themeDropdown) return;
+
+ themeDropdown.querySelectorAll('button').forEach(btn => {
+ const btnTheme = btn.dataset.theme || '';
+ btn.classList.toggle('active', btnTheme === currentTheme);
+ });
+}
+
+function initThemeSelector() {
+ const themeBtn = document.getElementById('theme-btn');
+ const themeDropdown = document.getElementById('theme-dropdown');
+ if (!themeBtn || !themeDropdown) return;
+
+ // 切换下拉菜单
+ themeBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ themeDropdown.classList.toggle('show');
+ });
+
+ // 点击外部关闭下拉菜单
+ document.addEventListener('click', (e) => {
+ if (!e.target.closest('.theme-selector')) {
+ themeDropdown.classList.remove('show');
+ }
+ });
+
+ // 主题选择
+ themeDropdown.querySelectorAll('button').forEach(btn => {
+ btn.addEventListener('click', () => {
+ setTheme(btn.dataset.theme);
+ themeDropdown.classList.remove('show');
+ });
+ });
+}
+
+// ── 日间/夜间模式 ──
+
+function toggleMode() {
+ currentMode = currentMode === 'day' ? 'night' : 'day';
+ localStorage.setItem('markmap-mode', currentMode);
+ applyMode();
+ if (mm) mm.fit();
+}
+
+function applyMode() {
+ document.body.classList.toggle('night-mode', currentMode === 'night');
+ const modeBtn = document.getElementById('mode-toggle');
+ if (modeBtn) {
+ modeBtn.textContent = currentMode === 'day' ? '日间' : '夜间';
+ }
+}
+
+function initModeToggle() {
+ const modeBtn = document.getElementById('mode-toggle');
+ if (!modeBtn) return;
+ modeBtn.addEventListener('click', toggleMode);
+ applyMode();
+}
+
+// ── 可拖动分割线 ──
+
+function initSplitter() {
+ const splitter = document.getElementById('splitter');
+ const editorContainer = document.getElementById('editor-container');
+ const main = document.querySelector('main');
+ if (!splitter || !editorContainer || !main) return;
+
+ let isDragging = false;
+
+ splitter.addEventListener('mousedown', (e) => {
+ isDragging = true;
+ splitter.classList.add('dragging');
+ document.body.style.cursor = 'col-resize';
+ document.body.style.userSelect = 'none';
+ e.preventDefault();
+ });
+
+ document.addEventListener('mousemove', (e) => {
+ if (!isDragging) return;
+
+ const rect = main.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const percentage = (x / rect.width) * 100;
+
+ // 限制在 10% ~ 90% 之间
+ const clamped = Math.max(10, Math.min(90, percentage));
+ editorContainer.style.width = `${clamped}%`;
+ });
+
+ document.addEventListener('mouseup', () => {
+ if (isDragging) {
+ isDragging = false;
+ splitter.classList.remove('dragging');
+ document.body.style.cursor = '';
+ document.body.style.userSelect = '';
+ // 重新适配思维导图到新容器尺寸
+ if (mm) mm.fit();
+ }
+ });
+}
+
+// ── 插入图片（本地文件转 Base64）──
+
+function insertImage() {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = 'image/png,image/jpeg,image/gif,image/svg+xml,image/webp';
+
+ input.onchange = e => {
+ const file = e.target.files[0];
+ if (!file) return;
+
+ // 限制图片大小（5MB），避免 Base64 过长撑爆 localStorage
+ const maxSize = 5 * 1024 * 1024;
+ if (file.size > maxSize) {
+ alert('图片过大（超过 5MB），请选择较小的图片或压缩后再插入。');
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.onload = async function(ev) {
+ const rawBase64 = ev.target.result;
+ // 压缩图片以减小 localStorage 占用（大图缩放至 1200px 宽，转 JPEG 75% 质量）
+ const base64 = await compressImage(rawBase64);
+ const fileName = file.name.replace(/\.[^.]+$/, ''); // 去扩展名作为描述
+
+ // 将 Base64 存入 imageMap，编辑器中只插入短占位符
+ const imgId = `img_${++imageCounter}`;
+ imageDataMap.set(imgId, base64);
+
+ // 在光标位置插入 Markdown 图片语法（使用占位符）
+ const start = editor.selectionStart;
+ const end = editor.selectionEnd;
+ const text = editor.value;
+ const insertText = ``;
+
+ editor.value = text.slice(0, start) + insertText + text.slice(end);
+ editor.selectionStart = editor.selectionEnd = start + insertText.length;
+ editor.focus();
+ updateMarkmap();
+
+ // 立即保存图片到 IndexedDB（不等防抖，防止刷新丢失）
+ autoSaveToHistory();
+ };
+ reader.onerror = function() {
+ alert('图片读取失败，请重试。');
+ };
+ reader.readAsDataURL(file);
+ };
+
+ input.click();
+}
+
+function loadDefaultContent() {
+ fetch('content.md')
+ .then(response => {
+ if (!response.ok) throw new Error(`HTTP ${response.status}`);
+ return response.text();
+ })
+ .then(content => {
+ editor.value = content;
+ updateMarkmap();
+ autoSaveToHistory();
+ })
+ .catch(() => {
+ // 直接打开 file:// 时 fetch 会失败，使用内置默认内容
+ editor.value = DEFAULT_CONTENT;
+ updateMarkmap();
+ autoSaveToHistory();
+ });
+}
+
+async function init() {
+ // 初始化侧边栏
+ initSidebar();
+
+ // 先执行一次性迁移：将 localStorage 中的旧图片数据迁移到 IndexedDB
+ await migrateImagesToIDB();
+
+ if (!loadFromHash()) {
+ // 尝试从历史记录加载最近的文档
+ const docs = getDocHistory();
+ if (docs.length > 0) {
+ currentDocId = docs[0].id;
+ // 异步从 IndexedDB 加载图片，回退到 localStorage
+ let images = await loadDocImagesAsync(docs[0].id);
+ if (!images && docs[0].images) {
+ // 旧版数据迁移：将内联图片转存到独立存储
+ images = docs[0].images;
+ saveDocImages(docs[0].id, images);
+ delete docs[0].images;
+ saveDocHistory(docs);
+ }
+ restoreImages(images);
+ editor.value = docs[0].content;
+ updateMarkmap();
+ renderSidebarDocs();
+ } else {
+ loadDefaultContent();
+ }
+ } else {
+ // 从分享链接加载（loadFromHash 已提取图片到 imageMap）
+ currentDocId = null;
+ autoSaveToHistory();
+ }
+
+ // 防抖更新与自动保存（使用共享的 debouncedAutoSave）
+ editor.addEventListener('input', () => {
+ debouncedUpdate();
+ debouncedAutoSave();
+ });
+
+ // 编辑器失焦时立即保存
+ editor.addEventListener('blur', () => autoSaveToHistory());
+
+ // 页面关闭前立即保存
+ window.addEventListener('beforeunload', () => autoSaveToHistory());
+
+ // 页面切换到后台时立即保存（移动端切换 App、PC 切换标签页）
+ document.addEventListener('visibilitychange', () => {
+ if (document.visibilityState === 'hidden') autoSaveToHistory();
+ });
+
+ // 初始化主题选择器、模式切换和分割线
+ initThemeSelector();
+ initModeToggle();
+ initSplitter();
+
+ // 插入图片按钮
+ document.getElementById('insert-image')?.addEventListener('click', insertImage);
+
+ // 窗口大小变化时重新适配
+ window.addEventListener('resize', debounce(() => {
+ if (mm) mm.fit();
+ }, 200));
+
+ // 键盘快捷键
+ document.addEventListener('keydown', (e) => {
+ // Ctrl/Cmd + S: 保存
+ if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+ e.preventDefault();
+ saveMap();
+ }
+ });
+}
+
+// ── 压缩/解压（用于分享链接）──
+
+function compressContent(content) {
+ const uint8Array = new TextEncoder().encode(content);
+ const compressed = pako.gzip(uint8Array);
+ // 分块转换，避免 fromCharCode.apply 栈溢出
+ let binaryString = '';
+ const chunkSize = 8192;
+ for (let i = 0; i < compressed.length; i += chunkSize) {
+ binaryString += String.fromCharCode.apply(null, compressed.subarray(i, i + chunkSize));
+ }
+ return btoa(binaryString)
+ .replace(/\+/g, '-')
+ .replace(/\//g, '_')
+ .replace(/=+$/, '');
+}
+
+function decompressContent(compressed) {
+ try {
+ const binaryString = atob(compressed.replace(/-/g, '+').replace(/_/g, '/'));
+ const uint8Array = new Uint8Array(binaryString.length);
+ for (let i = 0; i < binaryString.length; i++) {
+ uint8Array[i] = binaryString.charCodeAt(i);
+ }
+ const decompressed = pako.ungzip(uint8Array);
+ return new TextDecoder().decode(decompressed);
+ } catch (error) {
+ console.error('解压内容失败:', error);
+ return null;
+ }
+}
+
+function generateShareableURL() {
+ const content = expandImages(editor.value);
+ const compressedContent = compressContent(content);
+ return `${window.location.origin}${window.location.pathname}#${compressedContent}`;
+}
+
+async function shareURL() {
+ const url = generateShareableURL();
+
+ if (navigator.clipboard && navigator.clipboard.writeText) {
+ try {
+ await navigator.clipboard.writeText(url);
+ alert('分享链接已复制到剪贴板！');
+ } catch (err) {
+ console.error('复制链接失败:', err);
+ fallbackCopyTextToClipboard(url);
+ }
+ } else {
+ fallbackCopyTextToClipboard(url);
+ }
+}
+
+function fallbackCopyTextToClipboard(text) {
+ const textArea = document.createElement("textarea");
+ textArea.value = text;
+ textArea.style.top = '0';
+ textArea.style.left = '0';
+ textArea.style.position = 'fixed';
+
+ document.body.appendChild(textArea);
+ textArea.focus();
+ textArea.select();
+
+ try {
+ const successful = document.execCommand('copy');
+ alert(successful ? '分享链接已复制到剪贴板！' : '无法复制链接，请手动复制');
+ } catch (err) {
+ console.error('回退复制失败:', err);
+ prompt('请手动复制此链接进行分享:', text);
+ }
+
+ document.body.removeChild(textArea);
+}
+
+// 确保 DOM 加载完成后执行
+document.addEventListener('DOMContentLoaded', init);
diff --git a/libs/d3/dist/d3.min.js b/libs/d3/dist/d3.min.js
new file mode 100644
index 0000000..33bb880
--- /dev/null
+++ b/libs/d3/dist/d3.min.js
@@ -0,0 +1,2 @@
+// https://d3js.org v7.9.0 Copyright 2010-2023 Mike Bostock
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";function n(t,n){return null==t||null==n?NaN:t