2026-08-12 16:54:48 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Markmap - Markdown 思维导图编辑器</title>
|
|
|
|
|
<meta name="description" content="将 Markdown 文本实时转换为思维导图的在线工具">
|
|
|
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<header>
|
|
|
|
|
<div class="header-left">
|
|
|
|
|
<button id="sidebar-toggle" class="icon-btn" title="展开/收起文档列表">
|
|
|
|
|
<svg viewBox="0 0 24 24" width="20" height="20"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<h1>Markmap 编辑器</h1>
|
|
|
|
|
</div>
|
2026-08-13 15:56:33 +08:00
|
|
|
<div class="header-right">
|
|
|
|
|
<button id="mode-toggle" title="切换日间/夜间模式">日间</button>
|
|
|
|
|
<div class="toolbar">
|
|
|
|
|
<button id="new-map" title="新建思维导图 (清空当前内容)">新建</button>
|
|
|
|
|
<button id="load-map" title="从文件加载 Markdown">加载</button>
|
|
|
|
|
<button id="save-map" title="保存为 Markdown 文件 (Ctrl+S)">保存</button>
|
|
|
|
|
<button id="insert-image" title="选择本地图片插入到光标位置">图片</button>
|
|
|
|
|
<button id="share-url" title="生成可分享的链接">分享</button>
|
|
|
|
|
<div class="theme-selector">
|
|
|
|
|
<button id="theme-btn" title="选择思维导图配色">主题</button>
|
|
|
|
|
<div class="theme-dropdown" id="theme-dropdown">
|
|
|
|
|
<button data-theme="">默认</button>
|
|
|
|
|
<button data-theme="soft">柔和</button>
|
|
|
|
|
<button data-theme="dark">深色</button>
|
|
|
|
|
<button data-theme="forest">森林</button>
|
|
|
|
|
<button data-theme="monochrome">单色</button>
|
|
|
|
|
<button data-theme="minimal">极简</button>
|
|
|
|
|
<button data-theme="colorful">彩色</button>
|
|
|
|
|
</div>
|
2026-08-12 16:54:48 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-08-13 15:56:33 +08:00
|
|
|
<button id="mobile-menu-btn" class="icon-btn" title="更多操作">
|
|
|
|
|
<svg viewBox="0 0 24 24" width="20" height="20"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="currentColor"/></svg>
|
|
|
|
|
</button>
|
2026-08-12 16:54:48 +08:00
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
<main>
|
|
|
|
|
<aside id="sidebar" class="collapsed">
|
|
|
|
|
<div class="sidebar-header">
|
|
|
|
|
<span>历史文档</span>
|
|
|
|
|
<button id="sidebar-new" title="新建文档">+</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sidebar-docs" id="sidebar-docs"></div>
|
|
|
|
|
</aside>
|
|
|
|
|
<div id="editor-container">
|
|
|
|
|
<textarea id="editor" placeholder="在这里输入 Markdown... # 标题 - 列表项 1 - 子项 - 列表项 2" spellcheck="false"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="splitter"></div>
|
|
|
|
|
<div id="markmap-container">
|
|
|
|
|
<svg id="markmap"></svg>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
<footer>
|
2026-08-13 15:56:33 +08:00
|
|
|
<span><a href="https://gitea.dreamlife.top/DreamLife" target="_blank" style="color: rgba(0, 0, 0, 0.4); text-decoration: none;">© 2026 DreamLife 版权所有</a> | Markmap - Markdown 转思维导图 </span>
|
2026-08-12 16:54:48 +08:00
|
|
|
</footer>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 核心依赖库 (预构建,无需编译) -->
|
|
|
|
|
<script src="libs/d3/dist/d3.min.js"></script>
|
|
|
|
|
<script src="libs/markmap_view/dist/browser/index.js"></script>
|
|
|
|
|
<script src="libs/markmap_lib/dist/browser/index.iife.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- 导出工具库 -->
|
|
|
|
|
<script src="libs/jspdf.js"></script>
|
|
|
|
|
<script src="libs/html2canvas.js"></script>
|
|
|
|
|
<script src="libs/pako.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- 应用脚本 -->
|
|
|
|
|
<script src="javascript/export_utils.js"></script>
|
|
|
|
|
<script src="javascript/markmap_editor.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
