73 lines
4.9 KiB
Vue
73 lines
4.9 KiB
Vue
<template>
|
|
<div>
|
|
<h1>Introduction</h1>
|
|
<p><code>simple-mind-map</code> is a simple and powerful web mind map library, not dependent on any specific framework.</p>
|
|
<h2>Features</h2>
|
|
<ul>
|
|
<li><input type="checkbox" id="checkbox17" checked="true"><label for="checkbox17">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
|
|
<li><input type="checkbox" id="checkbox18" checked="true"><label for="checkbox18">Supports four types of structures: logical structure diagrams, mind maps,</label>
|
|
organizational structure diagrams, and directory organization diagrams</li>
|
|
<li><input type="checkbox" id="checkbox19" checked="true"><label for="checkbox19">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
|
|
<li><input type="checkbox" id="checkbox20" checked="true"><label for="checkbox20">Supports shortcuts</label></li>
|
|
<li><input type="checkbox" id="checkbox21" checked="true"><label for="checkbox21">Node content supports images, icons, hyperlinks, notes, tags, and</label>
|
|
summaries</li>
|
|
<li><input type="checkbox" id="checkbox22" checked="true"><label for="checkbox22">Supports forward and backward navigation</label></li>
|
|
<li><input type="checkbox" id="checkbox23" checked="true"><label for="checkbox23">Supports dragging and scaling</label></li>
|
|
<li><input type="checkbox" id="checkbox24" checked="true"><label for="checkbox24">Supports right-click and Ctrl + left-click to select multiple items</label></li>
|
|
<li><input type="checkbox" id="checkbox25" checked="true"><label for="checkbox25">Supports free dragging and dragging to adjust nodes</label></li>
|
|
<li><input type="checkbox" id="checkbox26" checked="true"><label for="checkbox26">Supports various node shapes</label></li>
|
|
<li><input type="checkbox" id="checkbox27" checked="true"><label for="checkbox27">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
|
|
<li><input type="checkbox" id="checkbox28" checked="true"><label for="checkbox28">Supports mini map、support watermark</label></li>
|
|
</ul>
|
|
<h2>Table of Contents</h2>
|
|
<p>1.<code>simple-mind-map</code></p>
|
|
<p>This is a mind map tool library that is framework-agnostic and can be used with
|
|
frameworks such as Vue and React, or without a framework.</p>
|
|
<p>2.<code>web</code></p>
|
|
<p>This is an online mind map built using the <code>simple-mind-map</code> library and based
|
|
on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
|
|
<ul>
|
|
<li><input type="checkbox" id="checkbox29" checked="true"><label for="checkbox29">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
|
images, icons, hyperlinks, notes, tags, and summaries</li>
|
|
<li><input type="checkbox" id="checkbox30" checked="true"><label for="checkbox30">Sidebar, with panels for basic style settings, node style settings,</label>
|
|
outline, theme selection, and structure selection</li>
|
|
<li><input type="checkbox" id="checkbox31" checked="true"><label for="checkbox31">Import and export functionality; data is saved in the browser's local</label>
|
|
storage by default, but it also supports creating, opening, and editing
|
|
local files on the computer directly</li>
|
|
<li><input type="checkbox" id="checkbox32" checked="true"><label for="checkbox32">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
|
and organizing layout</li>
|
|
<li><input type="checkbox" id="checkbox33" checked="true"><label for="checkbox33">Bottom bar, which supports node and word count statistics, switching</label>
|
|
between edit and read-only modes, zooming in and out, and switching to
|
|
full screen, support mini map</li>
|
|
</ul>
|
|
<p>Provide document page service.</p>
|
|
<p>3.<code>dist</code></p>
|
|
<p>The folder containing the packaged resources for the <code>web</code> folder.</p>
|
|
<p>4.<code>docs</code></p>
|
|
<p>Documentation, etc.</p>
|
|
<h2>Related Articles</h2>
|
|
<p><a href="https://juejin.cn/post/6987711560521089061">Technical Analysis of Web Mind Map Implementation (chi)</a></p>
|
|
<p><a href="https://juejin.cn/post/7157681502506090510">Only a hundred lines of code are needed to add local file operation capability to your Web page. Are you sure not to try?</a></p>
|
|
<h2>Special Note</h2>
|
|
<p>This project is rough and has not been thoroughly tested, its features are not
|
|
yet fully developed, and there are some performance issues, especially when the number of nodes is large. It is only for
|
|
learning and reference purposes and please use it carefully for actual projects.</p>
|
|
<p>The built-in themes and icons in the project come from:</p>
|
|
<p><a href="https://naotu.baidu.com/">Baidu Mind Map</a></p>
|
|
<p><a href="https://www.zhixi.com/">Zhixi Mind Map</a></p>
|
|
<p>Respect the copyright, and do not use the theme and icons directly for commercial projects.</p>
|
|
<h2>License</h2>
|
|
<p><a href="https://opensource.org/licenses/MIT">MIT</a></p>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |