74 lines
5.2 KiB
Vue
74 lines
5.2 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="checkbox36" checked="true"><label for="checkbox36">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="checkbox37" checked="true"><label for="checkbox37">Supports four types of structures: logical structure diagrams, mind maps,</label>
|
|
organizational structure diagrams, and directory organization diagrams</li>
|
|
<li><input type="checkbox" id="checkbox38" checked="true"><label for="checkbox38">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
|
|
<li><input type="checkbox" id="checkbox39" checked="true"><label for="checkbox39">Supports shortcuts</label></li>
|
|
<li><input type="checkbox" id="checkbox40" checked="true"><label for="checkbox40">Node content supports images, icons, hyperlinks, notes, tags, and</label>
|
|
summaries</li>
|
|
<li><input type="checkbox" id="checkbox41" checked="true"><label for="checkbox41">Supports forward and backward navigation</label></li>
|
|
<li><input type="checkbox" id="checkbox42" checked="true"><label for="checkbox42">Supports dragging and scaling</label></li>
|
|
<li><input type="checkbox" id="checkbox43" checked="true"><label for="checkbox43">Supports right-click and Ctrl + left-click to select multiple items</label></li>
|
|
<li><input type="checkbox" id="checkbox44" checked="true"><label for="checkbox44">Supports free dragging and dragging to adjust nodes</label></li>
|
|
<li><input type="checkbox" id="checkbox45" checked="true"><label for="checkbox45">Supports various node shapes</label></li>
|
|
<li><input type="checkbox" id="checkbox46" checked="true"><label for="checkbox46">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
|
|
<li><input type="checkbox" id="checkbox47" checked="true"><label for="checkbox47">Supports mini map、support watermark</label></li>
|
|
<li><input type="checkbox" id="checkbox48" checked="true"><label for="checkbox48">Supports associative lines</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="checkbox49" checked="true"><label for="checkbox49">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
|
images, icons, hyperlinks, notes, tags, and summaries</li>
|
|
<li><input type="checkbox" id="checkbox50" checked="true"><label for="checkbox50">Sidebar, with panels for basic style settings, node style settings,</label>
|
|
outline, theme selection, and structure selection</li>
|
|
<li><input type="checkbox" id="checkbox51" checked="true"><label for="checkbox51">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="checkbox52" checked="true"><label for="checkbox52">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
|
and organizing layout</li>
|
|
<li><input type="checkbox" id="checkbox53" checked="true"><label for="checkbox53">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>
|
|
<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>
|
|
<p><a href="https://juejin.cn/post/7199666255883927612">When you press the direction key, how does the TV find the next focus</a></p>
|
|
<p><a href="https://juejin.cn/post/7204854015463538744">How to simulate the background image style of css in canvas</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> |