mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 10:27:44 +08:00
Merge branch 'feature' of https://github.com/wanglin2/mind-map into feature
This commit is contained in:
wanglin2
commit
2218e7bf12
22
README.md
22
README.md
@ -109,9 +109,13 @@ const mindMap = new MindMap({
|
||||
|
||||
[](https://star-history.com/#wanglin2/mind-map&Date)
|
||||
|
||||
# 关于定制
|
||||
|
||||
如果你有个性化的商用定制需求，可以联系我们，我们提供付费开发服务。
|
||||
|
||||
# 请作者喝杯咖啡
|
||||
|
||||
开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡~
|
||||
开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡，你的支持是开发者持续维护的最大动力~
|
||||
|
||||
> 推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。
|
||||
|
||||
@ -365,4 +369,20 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/宏涛.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>宏涛</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/最多5个字.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>最多5个字</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/雨馨.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>雨馨</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/ZX.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>ZX</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/峰.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>峰</span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@ -49,7 +49,8 @@ export const defaultOpt = {
|
||||
color: '#999',
|
||||
opacity: 0.5,
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
belowNode: false
|
||||
},
|
||||
// 达到该宽度文本自动换行
|
||||
textAutoWrapWidth: 500,
|
||||
@ -326,5 +327,5 @@ export const defaultOpt = {
|
||||
// 添加附加的节点前置内容，前置内容指和文本同一行的区域中的前置内容，不包括节点图片部分
|
||||
createNodePrefixContent: null,
|
||||
// 添加附加的节点后置内容，后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分
|
||||
createNodePostfixContent: null
|
||||
createNodePostfixContent: null,
|
||||
}
|
||||
|
||||
@ -448,6 +448,7 @@ class Render {
|
||||
this.mindMap.emit('node_tree_render_end')
|
||||
return
|
||||
}
|
||||
this.mindMap.emit('node_tree_render_start')
|
||||
// 计算布局
|
||||
this.layout.doLayout(root => {
|
||||
// 删除本次渲染时不再需要的节点
|
||||
|
||||
@ -521,7 +521,7 @@ class Node {
|
||||
}
|
||||
}
|
||||
// 多选和取消多选
|
||||
if ((e.ctrlKey || e.metaKey) && enableCtrlKeyNodeSelection) {
|
||||
if (!readonly && (e.ctrlKey || e.metaKey) && enableCtrlKeyNodeSelection) {
|
||||
this.isMultipleChoice = true
|
||||
let isActive = this.getData('isActive')
|
||||
if (!isActive)
|
||||
|
||||
@ -15,7 +15,7 @@ import {
|
||||
} from '../utils/xmind'
|
||||
|
||||
// 解析.xmind文件
|
||||
const parseXmindFile = file => {
|
||||
const parseXmindFile = (file, handleMultiCanvas) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
JSZip.loadAsync(file).then(
|
||||
async zip => {
|
||||
@ -25,7 +25,7 @@ const parseXmindFile = file => {
|
||||
let xmlFile = zip.files['content.xml'] || zip.files['/content.xml']
|
||||
if (jsonFile) {
|
||||
let json = await jsonFile.async('string')
|
||||
content = await transformXmind(json, zip.files)
|
||||
content = await transformXmind(json, zip.files, handleMultiCanvas)
|
||||
} else if (xmlFile) {
|
||||
let xml = await xmlFile.async('string')
|
||||
let json = xmlConvert.xml2json(xml)
|
||||
@ -48,8 +48,15 @@ const parseXmindFile = file => {
|
||||
}
|
||||
|
||||
// 转换xmind数据
|
||||
const transformXmind = async (content, files) => {
|
||||
const data = JSON.parse(content)[0]
|
||||
const transformXmind = async (content, files, handleMultiCanvas) => {
|
||||
content = JSON.parse(content)
|
||||
let data = null
|
||||
if (content.length > 1 && typeof handleMultiCanvas === 'function') {
|
||||
data = await handleMultiCanvas(content)
|
||||
}
|
||||
if (!data) {
|
||||
data = content[0]
|
||||
}
|
||||
const nodeTree = data.rootTopic
|
||||
const newTree = {}
|
||||
const waitLoadImageList = []
|
||||
|
||||
@ -16,10 +16,12 @@ class TouchEvent {
|
||||
this.onTouchmove = this.onTouchmove.bind(this)
|
||||
this.onTouchcancel = this.onTouchcancel.bind(this)
|
||||
this.onTouchend = this.onTouchend.bind(this)
|
||||
window.addEventListener('touchstart', this.onTouchstart)
|
||||
window.addEventListener('touchmove', this.onTouchmove)
|
||||
window.addEventListener('touchcancel', this.onTouchcancel)
|
||||
window.addEventListener('touchend', this.onTouchend)
|
||||
window.addEventListener('touchstart', this.onTouchstart, { passive: false })
|
||||
window.addEventListener('touchmove', this.onTouchmove, { passive: false })
|
||||
window.addEventListener('touchcancel', this.onTouchcancel, {
|
||||
passive: false
|
||||
})
|
||||
window.addEventListener('touchend', this.onTouchend, { passive: false })
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
@ -32,6 +34,7 @@ class TouchEvent {
|
||||
|
||||
// 手指按下事件
|
||||
onTouchstart(e) {
|
||||
e.preventDefault()
|
||||
this.touchesNum = e.touches.length
|
||||
this.touchStartScaleView = null
|
||||
if (this.touchesNum === 1) {
|
||||
@ -43,6 +46,7 @@ class TouchEvent {
|
||||
|
||||
// 手指移动事件
|
||||
onTouchmove(e) {
|
||||
e.preventDefault()
|
||||
let len = e.touches.length
|
||||
if (len === 1) {
|
||||
let touch = e.touches[0]
|
||||
@ -103,6 +107,7 @@ class TouchEvent {
|
||||
|
||||
// 手指松开事件
|
||||
onTouchend(e) {
|
||||
e.preventDefault()
|
||||
this.dispatchMouseEvent('mouseup', e.target)
|
||||
if (this.touchesNum === 1) {
|
||||
// 模拟双击事件
|
||||
|
||||
@ -41,10 +41,21 @@ class Watermark {
|
||||
// 创建水印容器
|
||||
createContainer() {
|
||||
if (this.watermarkDraw) return
|
||||
this.watermarkDraw = this.mindMap.svg
|
||||
.group()
|
||||
this.watermarkDraw = new G()
|
||||
.css({ 'pointer-events': 'none', 'user-select': 'none' })
|
||||
.addClass('smm-water-mark-container')
|
||||
this.updateLayer()
|
||||
}
|
||||
|
||||
// 更新水印容器层级
|
||||
updateLayer() {
|
||||
if (!this.watermarkDraw) return
|
||||
const { belowNode } = this.mindMap.opt.watermarkConfig
|
||||
if (belowNode) {
|
||||
this.watermarkDraw.insertBefore(this.mindMap.draw)
|
||||
} else {
|
||||
this.mindMap.svg.add(this.watermarkDraw)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除水印容器
|
||||
@ -160,6 +171,7 @@ class Watermark {
|
||||
this.mindMap.opt.watermarkConfig,
|
||||
config
|
||||
)
|
||||
this.updateLayer()
|
||||
this.handleConfig(config)
|
||||
this.draw()
|
||||
}
|
||||
@ -167,11 +179,13 @@ class Watermark {
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
this.removeContainer()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
this.removeContainer()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
LA.init({
|
||||
id: 'KRO0WxK8GT66tYCQ',
|
||||
ck: 'KRO0WxK8GT66tYCQ',
|
||||
autoTrack: true
|
||||
autoTrack: false
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
BIN
web/src/assets/avatar/ZX.jpg
Normal file
BIN
web/src/assets/avatar/ZX.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
web/src/assets/avatar/峰.jpg
Normal file
BIN
web/src/assets/avatar/峰.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
web/src/assets/avatar/最多5个字.jpg
Normal file
BIN
web/src/assets/avatar/最多5个字.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
web/src/assets/avatar/雨馨.jpg
Normal file
BIN
web/src/assets/avatar/雨馨.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@ -38,6 +38,7 @@ export default {
|
||||
watermarkAngle: 'Angle',
|
||||
watermarkTextOpacity: 'Text opacity',
|
||||
watermarkTextFontSize: 'Font size',
|
||||
belowNode: 'Display below nodes',
|
||||
isEnableNodeRichText: 'Enable node rich text editing',
|
||||
mousewheelAction: 'Mouse wheel behavior',
|
||||
zoomView: 'Zoom view',
|
||||
@ -151,7 +152,8 @@ export default {
|
||||
notSelectTip: 'Please select the file to import',
|
||||
fileContentError: 'The file content is incorrect',
|
||||
importSuccess: 'Import success',
|
||||
fileParsingFailed: 'File parsing failed'
|
||||
fileParsingFailed: 'File parsing failed',
|
||||
xmindCanvasSelectDialogTitle: 'Select the canvas to import'
|
||||
},
|
||||
navigatorToolbar: {
|
||||
openMiniMap: 'Open mini map',
|
||||
|
||||
@ -38,6 +38,7 @@ export default {
|
||||
watermarkAngle: '旋转角度',
|
||||
watermarkTextOpacity: '文字透明度',
|
||||
watermarkTextFontSize: '文字字号',
|
||||
belowNode: '显示在节点下方',
|
||||
isEnableNodeRichText: '是否开启节点富文本编辑',
|
||||
mousewheelAction: '鼠标滚轮行为',
|
||||
zoomView: '缩放视图',
|
||||
@ -149,7 +150,8 @@ export default {
|
||||
notSelectTip: '请选择要导入的文件',
|
||||
fileContentError: '文件内容有误',
|
||||
importSuccess: '导入成功',
|
||||
fileParsingFailed: '文件解析失败'
|
||||
fileParsingFailed: '文件解析失败',
|
||||
xmindCanvasSelectDialogTitle: '选择要导入的画布'
|
||||
},
|
||||
navigatorToolbar: {
|
||||
openMiniMap: '开启小地图',
|
||||
|
||||
@ -11,7 +11,7 @@ let langList = [
|
||||
}
|
||||
]
|
||||
let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
|
||||
let CourseList = new Array(28).fill(0).map((_, index) => {
|
||||
let CourseList = new Array(29).fill(0).map((_, index) => {
|
||||
return 'course' + (index + 1)
|
||||
})
|
||||
let APIList = [
|
||||
|
||||
@ -120,8 +120,8 @@ const mindMap = new MindMap({
|
||||
| addContentToFooter（v0.9.9+） | Function、null | null | The basic definition is the same as addContentToHeader, adding custom content at the end | |
|
||||
| demonstrateConfig（v0.9.11+） | Object、null | null | Demonstration plugin configuration. If not transmitted, the default configuration will be used. An object can be transmitted. If only a certain property is configured, only that property can be set. Other properties that have not been set will also use the default configuration. For complete configuration, please refer to the 【Demonstration Plugin Configuration】 section below | |
|
||||
| resetScaleOnMoveNodeToCenter（v0.9.12+） | Boolean | false | Whether to reset the scaling level to 100% when moving nodes to the canvas center, returning to the root node, and other operations（The underlying impact is on the moveNodeToCenter method of the render class） | |
|
||||
| createNodePrefixContent（v0.9.12+） | Function、null | null | Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, returns a DOM node, or returns null | |
|
||||
| createNodePostfixContent（v0.9.12+） | Function、null | null | Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, returns a DOM node, or returns null | |
|
||||
| createNodePrefixContent（v0.9.12+） | Function、null | null | Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, Can return objects in {el, width, height} format, el is a DOM node object, width and height represent the width, height, and numerical type of the content. If custom content is not required, null can also be returned | |
|
||||
| createNodePostfixContent（v0.9.12+） | Function、null | null | Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section. The usage is the same as createNodePrefixContent | |
|
||||
|
||||
### Data structure
|
||||
|
||||
|
||||
@ -704,14 +704,14 @@
|
||||
<td>createNodePrefixContent（v0.9.12+）</td>
|
||||
<td>Function、null</td>
|
||||
<td>null</td>
|
||||
<td>Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, returns a DOM node, or returns null</td>
|
||||
<td>Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, Can return objects in {el, width, height} format, el is a DOM node object, width and height represent the width, height, and numerical type of the content. If custom content is not required, null can also be returned</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>createNodePostfixContent（v0.9.12+）</td>
|
||||
<td>Function、null</td>
|
||||
<td>null</td>
|
||||
<td>Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, returns a DOM node, or returns null</td>
|
||||
<td>Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section. The usage is the same as createNodePrefixContent</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -394,4 +394,20 @@ Open source is not easy. If this project is helpful to you, you can invite the a
|
||||
<img src="../../../../assets/avatar/宏涛.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>宏涛</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/最多5个字.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>最多5个字</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/雨馨.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>雨馨</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/ZX.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>ZX</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/峰.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>峰</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -8,18 +8,18 @@
|
||||
</blockquote>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox252" checked="true" /><label for="checkbox252">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox253" checked="true" /><label for="checkbox253">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
|
||||
<li><input type="checkbox" id="checkbox254" checked="true" /><label for="checkbox254">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox255" checked="true" /><label for="checkbox255">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
|
||||
<li><input type="checkbox" id="checkbox256" checked="true" /><label for="checkbox256">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, Support for expanding node content, and fully customize node content using DDM</label></li>
|
||||
<li><input type="checkbox" id="checkbox257" checked="true" /><label for="checkbox257">Support canvas dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox258" checked="true" /><label for="checkbox258">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
|
||||
<li><input type="checkbox" id="checkbox259" checked="true" /><label for="checkbox259">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
|
||||
<li><input type="checkbox" id="checkbox260" checked="true" /><label for="checkbox260">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, scrollbar, Hand drawn style, and rainbow lines</label></li>
|
||||
<li><input type="checkbox" id="checkbox261" checked="true" /><label for="checkbox261">Provide rich configurations to meet various scenarios and usage habits</label></li>
|
||||
<li><input type="checkbox" id="checkbox262" checked="true" /><label for="checkbox262">Support collaborative editing</label></li>
|
||||
<li><input type="checkbox" id="checkbox263" checked="true" /><label for="checkbox263">Support demonstration mode</label></li>
|
||||
<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
|
||||
<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
|
||||
<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, Support for expanding node content, and fully customize node content using DDM</label></li>
|
||||
<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">Support canvas dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
|
||||
<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
|
||||
<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, scrollbar, Hand drawn style, and rainbow lines</label></li>
|
||||
<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">Provide rich configurations to meet various scenarios and usage habits</label></li>
|
||||
<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">Support collaborative editing</label></li>
|
||||
<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">Support demonstration mode</label></li>
|
||||
</ul>
|
||||
<p>The official provides the following plugins, which can be introduced as needed (a certain function may not be effective because you did not introduce the corresponding plugin). Please refer to the documentation for specific usage methods:</p>
|
||||
<blockquote>
|
||||
@ -39,16 +39,16 @@ frameworks such as Vue and React, or without a framework.</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="checkbox264" checked="true" /><label for="checkbox264">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
images, icons, hyperlinks, notes, tags, and summaries</li>
|
||||
<li><input type="checkbox" id="checkbox265" checked="true" /><label for="checkbox265">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
outline, theme selection, and structure selection</li>
|
||||
<li><input type="checkbox" id="checkbox266" checked="true" /><label for="checkbox266">Import and export functionality; data is saved in the browser's local</label>
|
||||
<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">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="checkbox267" checked="true" /><label for="checkbox267">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
and organizing layout</li>
|
||||
<li><input type="checkbox" id="checkbox268" checked="true" /><label for="checkbox268">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">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>
|
||||
@ -348,6 +348,22 @@ full screen, support mini map</li>
|
||||
<img src="../../../../assets/avatar/宏涛.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>宏涛</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/最多5个字.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>最多5个字</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/雨馨.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>雨馨</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/ZX.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>ZX</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/峰.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>峰</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -35,6 +35,7 @@ export default [
|
||||
{ path: 'course26', title: '如何实现AI生成节点内容' },
|
||||
{ path: 'course27', title: '快捷键操作如何传递自定义参数' },
|
||||
{ path: 'course28', title: '如何动态修改自定义元素的大小' },
|
||||
{ path: 'course29', title: '局域网docker部署解决HTTPS问题的一种方法' },
|
||||
{ path: 'doExport', title: 'Export 插件' },
|
||||
{ path: 'drag', title: 'Drag插件' },
|
||||
{ path: 'introduction', title: '简介' },
|
||||
|
||||
@ -119,8 +119,8 @@ const mindMap = new MindMap({
|
||||
| addContentToFooter（v0.9.9+） | Function、null | null | 基本释义同addContentToHeader，在尾部添加自定义内容 |
|
||||
| demonstrateConfig（v0.9.11+） | Object、null | null | 演示插件Demonstrate的配置。不传则使用默认配置，可传递一个对象，如果只配置某个属性，可以只设置该属性，其他没有设置的同样会使用默认配置，完整配置请参考下方【演示插件配置】小节 |
|
||||
| resetScaleOnMoveNodeToCenter（v0.9.12+） | Boolean | false | 移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%（底层影响的是render类的moveNodeToCenter方法） |
|
||||
| createNodePrefixContent（v0.9.12+） | Function、null | null | 添加附加的节点前置内容。前置内容指和文本同一行的区域中的前置内容，不包括节点图片部分。可以传递一个函数，这个函数接收一个节点实例的参数，可以返回一个DOM节点，也可以返回null |
|
||||
| createNodePostfixContent（v0.9.12+） | Function、null | null | 添加附加的节点后置内容。后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分。可以传递一个函数，这个函数接收一个节点实例的参数，可以返回一个DOM节点，也可以返回null |
|
||||
| createNodePrefixContent（v0.9.12+） | Function、null | null | 添加附加的节点前置内容。前置内容指和文本同一行的区域中的前置内容，不包括节点图片部分。可以传递一个函数，这个函数接收一个节点实例的参数，可以返回{el, width, height}格式的对象，el为DOM节点对象，width和height代表内容的宽高，数字类型，如果不需要自定义内容，也可以返回null |
|
||||
| createNodePostfixContent（v0.9.12+） | Function、null | null | 添加附加的节点后置内容。后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分。用法同createNodePrefixContent |
|
||||
|
||||
### 数据结构
|
||||
|
||||
|
||||
@ -601,13 +601,13 @@
|
||||
<td>createNodePrefixContent（v0.9.12+）</td>
|
||||
<td>Function、null</td>
|
||||
<td>null</td>
|
||||
<td>添加附加的节点前置内容。前置内容指和文本同一行的区域中的前置内容，不包括节点图片部分。可以传递一个函数，这个函数接收一个节点实例的参数，可以返回一个DOM节点，也可以返回null</td>
|
||||
<td>添加附加的节点前置内容。前置内容指和文本同一行的区域中的前置内容，不包括节点图片部分。可以传递一个函数，这个函数接收一个节点实例的参数，可以返回{el, width, height}格式的对象，el为DOM节点对象，width和height代表内容的宽高，数字类型，如果不需要自定义内容，也可以返回null</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>createNodePostfixContent（v0.9.12+）</td>
|
||||
<td>Function、null</td>
|
||||
<td>null</td>
|
||||
<td>添加附加的节点后置内容。后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分。可以传递一个函数，这个函数接收一个节点实例的参数，可以返回一个DOM节点，也可以返回null</td>
|
||||
<td>添加附加的节点后置内容。后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分。用法同createNodePrefixContent</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
82
web/src/pages/Doc/zh/course29/index.md
Normal file
82
web/src/pages/Doc/zh/course29/index.md
Normal file
@ -0,0 +1,82 @@
|
||||
# 局域网docker部署解决HTTPS问题的一种方法
|
||||
|
||||
> 本文来自：[Brzjomo](https://github.com/Brzjomo)的[issue](https://github.com/wanglin2/mind-map/issues/658)。
|
||||
|
||||
受Api的限制，MindMap以HTTP访问时，目录、新建和打开功能不能正常工作。因此在局域网架设时，需要给它进行配置证书等操作，使其正常工作。
|
||||
|
||||
假设先前已经基于Github源码，架设了MindMap的docker服务。没有的先看这个[Issue](https://github.com/wanglin2/mind-map/issues/309)
|
||||
|
||||
事前准备：
|
||||
需要准备一个域名。
|
||||
|
||||
需要安装Linux 服务器运维管理面板[1panel](https://github.com/1Panel-dev/1Panel)
|
||||
|
||||
设置域名解析：
|
||||
以阿里云为例，登录后进入[域名解析页面](https://dns.console.aliyun.com/#/dns/domainList)
|
||||
|
||||
点击对应域名的解析设置。
|
||||
|
||||
添加或编辑对应的@和www记录，将IP记录值修改为局域网IP，比如192.168.2.36。
|
||||
|
||||
保存后退出。
|
||||
|
||||
获取AccessKey：
|
||||
进入账号下面的AccessKey管理。
|
||||
|
||||
创建或者使用已经记录的AccessKey。
|
||||
|
||||
1panel设置：
|
||||
进入应用商店，安装OpenResty（稍后用于申请证书和设置反代）。
|
||||
|
||||
进入网站-网站，点击创建网站。
|
||||
|
||||
点击反向代理。
|
||||
|
||||
设置主域名为自己的域名。
|
||||
|
||||
代理地址为http和127.0.0.1:MindMap容器端口。
|
||||
|
||||
点击确认。
|
||||
|
||||
创建证书申请账户：
|
||||
进入1panel的网站-证书，点击Acme 账户。
|
||||
|
||||
点击创建账户。
|
||||
|
||||
输入邮箱后确认。
|
||||
|
||||
回到刚才的证书页面，点击DNS 账户。
|
||||
|
||||
点击创建账户。
|
||||
|
||||
填写名称后，选择类型为阿里云DNS。
|
||||
|
||||
再填入刚才准备好的Access Key和Secret Key。
|
||||
|
||||
点击确认。
|
||||
|
||||
申请证书：
|
||||
回到刚才的证书页面，点击申请证书。
|
||||
|
||||
填写主域名，其他按实际情况填写。一般会自动设置。
|
||||
|
||||
点击确认，等待其成功。
|
||||
|
||||
启用HTTPS访问：
|
||||
回到1panel的网站管理页面。
|
||||
|
||||
找到刚才建立的反向代理，点击配置。
|
||||
|
||||
点击HTTPS。
|
||||
|
||||
点击启用HTTPS。
|
||||
|
||||
SSL 选项设置为选择已有证书。
|
||||
|
||||
选择好刚才创建的Acme账户和证书。
|
||||
|
||||
点击保存。
|
||||
|
||||
此时，在局域网内访问该域名，应当能正确以Https访问MindMap了。
|
||||
|
||||
如果不能，输入host 域名，查看返回的DNS解析是否为局域网IP。
|
||||
62
web/src/pages/Doc/zh/course29/index.vue
Normal file
62
web/src/pages/Doc/zh/course29/index.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>局域网docker部署解决HTTPS问题的一种方法</h1>
|
||||
<blockquote>
|
||||
<p>本文来自：<a href="https://github.com/Brzjomo">Brzjomo</a>的<a href="https://github.com/wanglin2/mind-map/issues/658">issue</a>。</p>
|
||||
</blockquote>
|
||||
<p>受Api的限制，MindMap以HTTP访问时，目录、新建和打开功能不能正常工作。因此在局域网架设时，需要给它进行配置证书等操作，使其正常工作。</p>
|
||||
<p>假设先前已经基于Github源码，架设了MindMap的docker服务。没有的先看这个<a href="https://github.com/wanglin2/mind-map/issues/309">Issue</a></p>
|
||||
<p>事前准备：
|
||||
需要准备一个域名。</p>
|
||||
<p>需要安装Linux 服务器运维管理面板<a href="https://github.com/1Panel-dev/1Panel">1panel</a></p>
|
||||
<p>设置域名解析：
|
||||
以阿里云为例，登录后进入<a href="https://dns.console.aliyun.com/#/dns/domainList">域名解析页面</a></p>
|
||||
<p>点击对应域名的解析设置。</p>
|
||||
<p>添加或编辑对应的@和www记录，将IP记录值修改为局域网IP，比如192.168.2.36。</p>
|
||||
<p>保存后退出。</p>
|
||||
<p>获取AccessKey：
|
||||
进入账号下面的AccessKey管理。</p>
|
||||
<p>创建或者使用已经记录的AccessKey。</p>
|
||||
<p>1panel设置：
|
||||
进入应用商店，安装OpenResty（稍后用于申请证书和设置反代）。</p>
|
||||
<p>进入网站-网站，点击创建网站。</p>
|
||||
<p>点击反向代理。</p>
|
||||
<p>设置主域名为自己的域名。</p>
|
||||
<p>代理地址为http和127.0.0.1:MindMap容器端口。</p>
|
||||
<p>点击确认。</p>
|
||||
<p>创建证书申请账户：
|
||||
进入1panel的网站-证书，点击Acme 账户。</p>
|
||||
<p>点击创建账户。</p>
|
||||
<p>输入邮箱后确认。</p>
|
||||
<p>回到刚才的证书页面，点击DNS 账户。</p>
|
||||
<p>点击创建账户。</p>
|
||||
<p>填写名称后，选择类型为阿里云DNS。</p>
|
||||
<p>再填入刚才准备好的Access Key和Secret Key。</p>
|
||||
<p>点击确认。</p>
|
||||
<p>申请证书：
|
||||
回到刚才的证书页面，点击申请证书。</p>
|
||||
<p>填写主域名，其他按实际情况填写。一般会自动设置。</p>
|
||||
<p>点击确认，等待其成功。</p>
|
||||
<p>启用HTTPS访问：
|
||||
回到1panel的网站管理页面。</p>
|
||||
<p>找到刚才建立的反向代理，点击配置。</p>
|
||||
<p>点击HTTPS。</p>
|
||||
<p>点击启用HTTPS。</p>
|
||||
<p>SSL 选项设置为选择已有证书。</p>
|
||||
<p>选择好刚才创建的Acme账户和证书。</p>
|
||||
<p>点击保存。</p>
|
||||
<p>此时，在局域网内访问该域名，应当能正确以Https访问MindMap了。</p>
|
||||
<p>如果不能，输入host 域名，查看返回的DNS解析是否为局域网IP。</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -390,4 +390,20 @@
|
||||
<img src="../../../../assets/avatar/宏涛.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>宏涛</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/最多5个字.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>最多5个字</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/雨馨.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>雨馨</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/ZX.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>ZX</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/峰.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>峰</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -8,18 +8,18 @@
|
||||
</blockquote>
|
||||
<h2>特性</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox235" checked="true" /><label for="checkbox235">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
|
||||
<li><input type="checkbox" id="checkbox236" checked="true" /><label for="checkbox236">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
|
||||
<li><input type="checkbox" id="checkbox237" checked="true" /><label for="checkbox237">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
|
||||
<li><input type="checkbox" id="checkbox238" checked="true" /><label for="checkbox238">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
|
||||
<li><input type="checkbox" id="checkbox239" checked="true" /><label for="checkbox239">节点支持拖拽（拖拽移动、自由调整）、多种节点形状；支持扩展节点内容、支持使用 DDM 完全自定义节点内容</label></li>
|
||||
<li><input type="checkbox" id="checkbox240" checked="true" /><label for="checkbox240">支持画布拖动、缩放</label></li>
|
||||
<li><input type="checkbox" id="checkbox241" checked="true" /><label for="checkbox241">支持鼠标按键拖动选择和 Ctrl+左键两种多选节点方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox242" checked="true" /><label for="checkbox242">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
|
||||
<li><input type="checkbox" id="checkbox243" checked="true" /><label for="checkbox243">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条、手绘风格、彩虹线条</label></li>
|
||||
<li><input type="checkbox" id="checkbox244" checked="true" /><label for="checkbox244">提供丰富的配置，满足各种场景各种使用习惯</label></li>
|
||||
<li><input type="checkbox" id="checkbox245" checked="true" /><label for="checkbox245">支持协同编辑</label></li>
|
||||
<li><input type="checkbox" id="checkbox246" checked="true" /><label for="checkbox246">支持演示模式</label></li>
|
||||
<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
|
||||
<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
|
||||
<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
|
||||
<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
|
||||
<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">节点支持拖拽（拖拽移动、自由调整）、多种节点形状；支持扩展节点内容、支持使用 DDM 完全自定义节点内容</label></li>
|
||||
<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">支持画布拖动、缩放</label></li>
|
||||
<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">支持鼠标按键拖动选择和 Ctrl+左键两种多选节点方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
|
||||
<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条、手绘风格、彩虹线条</label></li>
|
||||
<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">提供丰富的配置，满足各种场景各种使用习惯</label></li>
|
||||
<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">支持协同编辑</label></li>
|
||||
<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">支持演示模式</label></li>
|
||||
</ul>
|
||||
<p>官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档：</p>
|
||||
<blockquote>
|
||||
@ -37,11 +37,11 @@
|
||||
<p>2.<code>web</code></p>
|
||||
<p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox247" checked="true" /><label for="checkbox247">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox248" checked="true" /><label for="checkbox248">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
|
||||
<li><input type="checkbox" id="checkbox249" checked="true" /><label for="checkbox249">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
|
||||
<li><input type="checkbox" id="checkbox250" checked="true" /><label for="checkbox250">右键菜单，支持展开、收起、整理布局等操作</label></li>
|
||||
<li><input type="checkbox" id="checkbox251" checked="true" /><label for="checkbox251">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
|
||||
<li><input type="checkbox" id="checkbox46" checked="true" /><label for="checkbox46">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
|
||||
<li><input type="checkbox" id="checkbox48" checked="true" /><label for="checkbox48">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
|
||||
<li><input type="checkbox" id="checkbox49" checked="true" /><label for="checkbox49">右键菜单，支持展开、收起、整理布局等操作</label></li>
|
||||
<li><input type="checkbox" id="checkbox50" checked="true" /><label for="checkbox50">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
|
||||
</ul>
|
||||
<p>提供文档页面服务。</p>
|
||||
<p>3.<code>dist</code></p>
|
||||
@ -341,6 +341,22 @@
|
||||
<img src="../../../../assets/avatar/宏涛.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>宏涛</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/最多5个字.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>最多5个字</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/雨馨.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>雨馨</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/ZX.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>ZX</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/峰.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>峰</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -696,6 +696,16 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 是否在节点下方 -->
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<el-checkbox
|
||||
v-model="watermarkConfig.belowNode"
|
||||
@change="updateWatermarkConfig"
|
||||
>{{ $t('baseStyle.belowNode') }}</el-checkbox
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 水印文字 -->
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
|
||||
@ -1,36 +1,56 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="nodeImportDialog"
|
||||
:title="$t('import.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="300px"
|
||||
>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
action="x"
|
||||
accept=".smm,.json,.xmind,.xlsx,.md"
|
||||
:file-list="fileList"
|
||||
:auto-upload="false"
|
||||
:multiple="false"
|
||||
:on-change="onChange"
|
||||
:on-remove="onRemove"
|
||||
:limit="1"
|
||||
:on-exceed="onExceed"
|
||||
<div>
|
||||
<el-dialog
|
||||
class="nodeImportDialog"
|
||||
:title="$t('import.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="300px"
|
||||
>
|
||||
<el-button slot="trigger" size="small" type="primary">{{
|
||||
$t('import.selectFile')
|
||||
}}</el-button>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
{{ $t('import.supportFile') }}
|
||||
</div>
|
||||
</el-upload>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{
|
||||
$t('dialog.confirm')
|
||||
}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
action="x"
|
||||
accept=".smm,.json,.xmind,.xlsx,.md"
|
||||
:file-list="fileList"
|
||||
:auto-upload="false"
|
||||
:multiple="false"
|
||||
:on-change="onChange"
|
||||
:on-remove="onRemove"
|
||||
:limit="1"
|
||||
:on-exceed="onExceed"
|
||||
>
|
||||
<el-button slot="trigger" size="small" type="primary">{{
|
||||
$t('import.selectFile')
|
||||
}}</el-button>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
{{ $t('import.supportFile') }}
|
||||
</div>
|
||||
</el-upload>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{
|
||||
$t('dialog.confirm')
|
||||
}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
class="xmindCanvasSelectDialog"
|
||||
:title="$t('import.xmindCanvasSelectDialogTitle')"
|
||||
:visible.sync="xmindCanvasSelectDialogVisible"
|
||||
width="300px"
|
||||
:show-close="false"
|
||||
>
|
||||
<el-radio-group v-model="selectCanvas" class="canvasList">
|
||||
<el-radio v-for="(item, index) in canvasList" :label="index">{{
|
||||
item.title
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="confirmSelect">{{
|
||||
$t('dialog.confirm')
|
||||
}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -50,7 +70,11 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
fileList: []
|
||||
fileList: [],
|
||||
selectPromiseResolve: null,
|
||||
xmindCanvasSelectDialogVisible: false,
|
||||
selectCanvas: '',
|
||||
canvasList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -106,11 +130,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-08-03 22:48:42
|
||||
* @Desc: 文件选择
|
||||
*/
|
||||
// 文件选择
|
||||
onChange(file) {
|
||||
let reg = /\.(smm|xmind|json|xlsx|md)$/
|
||||
if (!reg.test(file.name)) {
|
||||
@ -126,29 +146,17 @@ export default {
|
||||
this.fileList = fileList
|
||||
},
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-08-03 22:48:47
|
||||
* @Desc: 数量超出限制
|
||||
*/
|
||||
// 数量超出限制
|
||||
onExceed() {
|
||||
this.$message.error(this.$t('import.maxFileNum'))
|
||||
},
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-06-22 22:08:11
|
||||
* @Desc: 取消
|
||||
*/
|
||||
// 取消
|
||||
cancel() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-06-06 22:28:20
|
||||
* @Desc: 确定
|
||||
*/
|
||||
// 确定
|
||||
confirm() {
|
||||
if (this.fileList.length <= 0) {
|
||||
return this.$message.error(this.$t('import.notSelectTip'))
|
||||
@ -168,11 +176,7 @@ export default {
|
||||
this.setActiveSidebar(null)
|
||||
},
|
||||
|
||||
/**
|
||||
* @Author: 王林25
|
||||
* @Date: 2022-10-24 14:19:33
|
||||
* @Desc: 处理.smm文件
|
||||
*/
|
||||
// 处理.smm文件
|
||||
handleSmm(file) {
|
||||
let fileReader = new FileReader()
|
||||
fileReader.readAsText(file.raw)
|
||||
@ -191,14 +195,15 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @Author: 王林25
|
||||
* @Date: 2022-10-24 14:19:41
|
||||
* @Desc: 处理.xmind文件
|
||||
*/
|
||||
// 处理.xmind文件
|
||||
async handleXmind(file) {
|
||||
try {
|
||||
let data = await xmind.parseXmindFile(file.raw)
|
||||
let data = await xmind.parseXmindFile(file.raw, content => {
|
||||
this.showSelectXmindCanvasDialog(content)
|
||||
return new Promise(resolve => {
|
||||
this.selectPromiseResolve = resolve
|
||||
})
|
||||
})
|
||||
this.$bus.$emit('setData', data)
|
||||
this.$message.success(this.$t('import.importSuccess'))
|
||||
} catch (error) {
|
||||
@ -207,11 +212,22 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @Author: 王林25
|
||||
* @Date: 2022-10-24 14:19:51
|
||||
* @Desc: 处理.xlsx文件
|
||||
*/
|
||||
// 显示xmind文件的多个画布选择弹窗
|
||||
showSelectXmindCanvasDialog(content) {
|
||||
this.canvasList = content
|
||||
this.selectCanvas = 0
|
||||
this.xmindCanvasSelectDialogVisible = true
|
||||
},
|
||||
|
||||
// 确认导入指定的画布
|
||||
confirmSelect() {
|
||||
this.selectPromiseResolve(this.canvasList[this.selectCanvas])
|
||||
this.xmindCanvasSelectDialogVisible = false
|
||||
this.canvasList = []
|
||||
this.selectCanvas = 0
|
||||
},
|
||||
|
||||
// 处理.xlsx文件
|
||||
async handleExcel(file) {
|
||||
try {
|
||||
const wb = read(await fileToBuffer(file.raw))
|
||||
@ -306,4 +322,17 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
.nodeImportDialog {
|
||||
}
|
||||
|
||||
.canvasList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/deep/ .el-radio {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user