coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 18:37:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Doc: update

Browse Source
This commit is contained in:
wanglin2 2023-07-19 09:01:47 +08:00
parent 08a37d8971
commit 10cb36829f
11 changed files with 230 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

File diff suppressed because one or more lines are too long

14
web/src/pages/Doc/catalogList.js
View File

@ -36,6 +36,9 @@ let APIList = [
'markdown',
'utils'
]
let helpList = new Array(1).fill(0).map((_, index) => {
return 'help' + (index + 1)
})
const createList = (lang, list) => {
let langRouter = routerList.find(item => {
@ -62,28 +65,39 @@ export default {
zh: [
{
groupName: '开始',
type: 'doc',
list: createList('zh', StartList)
},
{
groupName: '教程',
type: 'doc',
list: createList('zh', CourseList)
},
{
groupName: 'API',
type: 'doc',
list: createList('zh', APIList)
},
{
groupName: '使用帮助',
type: 'help',
list: createList('zh', helpList)
}
],
en: [
{
groupName: 'Start',
type: 'doc',
list: createList('en', StartList)
},
{
groupName: 'Course',
type: 'doc',
list: createList('zh', CourseList)
},
{
groupName: 'API',
type: 'doc',
list: createList('en', APIList)
}
]

26
web/src/pages/Doc/components/CatalogBar.vue
View File

@ -66,18 +66,18 @@ export default {
methods: {
// 获取当前语言
initLang() {
let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
if (lang && lang[1]) {
this.lang = lang[1]
let lang = /^\/(doc|help)\/([^\/]+)\//.exec(this.$route.path)
if (lang && lang[2]) {
this.lang = lang[2]
}
},
// 初始化二级标题目录
initCatalogList(newPath, oldPath) {
let newPathRes = /^\/doc\/[^\/]+\/([^\/]+)/.exec(newPath)
let oldPathRes = /^\/doc\/[^\/]+\/([^\/]+)/.exec(oldPath)
let newPathRes = /^\/(doc|help)\/[^\/]+\/([^\/]+)/.exec(newPath)
let oldPathRes = /^\/(doc|help)\/[^\/]+\/([^\/]+)/.exec(oldPath)
// 语言变了、章节变了，需要重新获取二级标题目录
if ((!newPath && !oldPath) || newPathRes[1] !== oldPathRes[1]) {
if ((!newPath && !oldPath) || newPathRes[2] !== oldPathRes[2]) {
this.$emit('scroll', 0)
this.resetActive()
let container = document.getElementById('doc')
@ -93,9 +93,9 @@ export default {
// 如果url中存在二级标题，那么滚动到该标题所在位置
scrollToCatalog() {
let url = /^\/doc\/[^\/]+\/[^\/]+\/([^\/]+)($|\/)/.exec(this.$route.path)
if (url && url[1]) {
let h = decodeURIComponent(url[1])
let url = /^\/(doc|help)\/[^\/]+\/[^\/]+\/([^\/]+)($|\/)/.exec(this.$route.path)
if (url && url[2]) {
let h = decodeURIComponent(url[2])
let item = this.list.find(item => {
return item.title === h
})
@ -126,15 +126,15 @@ export default {
let path = this.$route.path
let url = ''
if (!title) {
url = path.replace(/^(\/doc\/[^\/]+\/[^\/]+)($|\/|.*)$/, '$1')
} else if (/^\/doc\/[^\/]+\/[^\/]+($|\/)$/.test(path)) {
url = path.replace(/^(\/(doc|help)\/[^\/]+\/[^\/]+)($|\/|.*)$/, '$1')
} else if (/^\/(doc|help)\/[^\/]+\/[^\/]+($|\/)$/.test(path)) {
url = path.replace(
/^(\/doc\/[^\/]+\/[^\/]+)($|\/)$/,
/^(\/(doc|help)\/[^\/]+\/[^\/]+)($|\/)$/,
'$1/' + encodeURIComponent(title)
)
} else {
url = path.replace(
/^(\/doc\/[^\/]+\/[^\/]+\/)([^\/]+)($|\/)/,
/^(\/(doc|help)\/[^\/]+\/[^\/]+\/)([^\/]+)($|\/)/,
(...args) => {
return args[1] + encodeURIComponent(title)
}

23
web/src/pages/Doc/components/Sidebar.vue
View File

@ -31,7 +31,8 @@ export default {
return {
groupList: [],
lang: '',
currentPath: ''
currentPath: '',
type: ''// doc、help
}
},
created() {
@ -47,20 +48,24 @@ export default {
if (item.path === this.currentPath) {
return
}
this.$router.push(`/doc/${this.lang}/${item.path}`)
this.$router.push(`/${this.type}/${this.lang}/${item.path}`)
},
initCatalog() {
// 目录列表
let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
if (lang && lang[1]) {
this.lang = lang[1]
this.groupList = catalogList[this.lang]
let lang = /^\/(doc|help)\/([^\/]+)\//.exec(this.$route.path)
if (lang && lang[2]) {
this.type = lang[1]// 判断是开发文档还是帮助文档
this.lang = lang[2]
// 过滤出对应文档的章节
this.groupList = catalogList[this.lang].filter((item) => {
return item.type === this.type
})
}
// 当前所在路径
let path = /^\/doc\/[^\/]+\/([^\/]+)(\/|$)/.exec(this.$route.path)
if (path && path[1]) {
this.currentPath = path[1]
let path = /^\/(doc|help)\/[^\/]+\/([^\/]+)(\/|$)/.exec(this.$route.path)
if (path && path[2]) {
this.currentPath = path[2]
}
}
}

67
web/src/pages/Doc/en/deploy/index.md
View File

@ -1 +1,66 @@
# Deploy
# Deploy
The 'web' directory of this project provides a complete project developed based on the 'simple mind map' library, 'Vue2. x', and 'ElementUI'. The data is stored locally on the computer by default, and can also be manipulated locally on the computer. Originally intended as an online 'demo', it can also be directly used as an online version of the mind map application, online address: [https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/).
If your network environment is slow to access the 'GitHub' service, you can also deploy it to your server.
## Deploying to a static file server
The project itself does not rely on the backend, so it can be deployed to a static file server. The following commands can be executed in sequence:
```bash
git clone https://github.com/wanglin2/mind-map.git
cd mind-map
cd simple-mind-map
npm i
npm link
cd ..
cd web
npm i
npm link simple-mind-map
```
Then you can choose to start the local service:
```bash
npm run serve
```
You can also directly package and generate construction products:
```bash
npm run build
```
The packaged entry page 'index.html' can be found in the project root directory, and the corresponding static resources are located in the 'dist' directory under the root directory. The 'html' file will access the resources in the 'dist' directory through relative paths, such as 'dist/xxx'. You can directly upload these two files or directories to your static file server. In fact, this project is deployed to 'GitHub Pages' in this way.
If you do not have any code modification requirements, it is also possible to directly copy these files from this repository.
If you want to package 'index.html' into the 'dist' directory as well, you can modify the 'scripts.build' command in the 'web/package.json' file to delete '&& node ../copy.js' from 'vue-cli-service build && node ../copy.js'.
If you want to modify the directory for packaging output, you can modify the 'outputDir' configuration of the 'web/vue.config.js' file to the path you want to output.
If you want to modify the path of the 'index. html' file referencing static resources, you can modify the 'publicPath' configuration of the 'web/vue.config.js' file.
In addition, the default route used is 'hash ', which means that there will be '#'in the path. If you want to use the 'history' route, you can modify the 'web/src/router.js' file to:
```js
const router = new VueRouter({
routes
})
```
Change to:
```js
const router = new VueRouter({
mode: 'history',
routes
})
```
However, this requires backend support, as our application is a single page client application. If the backend is not properly configured, users will return 404 when accessing sub routes directly in the browser. Therefore, you need to add a candidate resource on the server that covers all situations: if the 'URL' cannot match any static resources, the same 'index. html' page should be returned.
## Docker
In writing...

55
web/src/pages/Doc/en/deploy/index.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div>
<h1>Deploy</h1>
<p>The 'web' directory of this project provides a complete project developed based on the 'simple mind map' library, 'Vue2. x', and 'ElementUI'. The data is stored locally on the computer by default, and can also be manipulated locally on the computer. Originally intended as an online 'demo', it can also be directly used as an online version of the mind map application, online address: <a href="https://wanglin2.github.io/mind-map/">https://wanglin2.github.io/mind-map/</a>.</p>
<p>If your network environment is slow to access the 'GitHub' service, you can also deploy it to your server.</p>
<h2>Deploying to a static file server</h2>
<p>The project itself does not rely on the backend, so it can be deployed to a static file server. The following commands can be executed in sequence:</p>
<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
<span class="hljs-built_in">cd</span> mind-map
<span class="hljs-built_in">cd</span> simple-mind-map
npm i
npm link
<span class="hljs-built_in">cd</span> ..
<span class="hljs-built_in">cd</span> web
npm i
npm link simple-mind-map
</code></pre>
<p>Then you can choose to start the local service:</p>
<pre class="hljs"><code>npm run serve
</code></pre>
<p>You can also directly package and generate construction products:</p>
<pre class="hljs"><code>npm run build
</code></pre>
<p>The packaged entry page 'index.html' can be found in the project root directory, and the corresponding static resources are located in the 'dist' directory under the root directory. The 'html' file will access the resources in the 'dist' directory through relative paths, such as 'dist/xxx'. You can directly upload these two files or directories to your static file server. In fact, this project is deployed to 'GitHub Pages' in this way.</p>
<p>If you do not have any code modification requirements, it is also possible to directly copy these files from this repository.</p>
<p>If you want to package 'index.html' into the 'dist' directory as well, you can modify the 'scripts.build' command in the 'web/package.json' file to delete '&amp;&amp; node ../copy.js' from 'vue-cli-service build &amp;&amp; node ../copy.js'.</p>
<p>If you want to modify the directory for packaging output, you can modify the 'outputDir' configuration of the 'web/vue.config.js' file to the path you want to output.</p>
<p>If you want to modify the path of the 'index. html' file referencing static resources, you can modify the 'publicPath' configuration of the 'web/vue.config.js' file.</p>
<p>In addition, the default route used is 'hash ', which means that there will be '#'in the path. If you want to use the 'history' route, you can modify the 'web/src/router.js' file to:</p>
<pre class="hljs"><code><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({
routes
})
</code></pre>
<p>Change to:</p>
<pre class="hljs"><code><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({
<span class="hljs-attr">mode</span>: <span class="hljs-string">&#x27;history&#x27;</span>,
routes
})
</code></pre>
<p>However, this requires backend support, as our application is a single page client application. If the backend is not properly configured, users will return 404 when accessing sub routes directly in the browser. Therefore, you need to add a candidate resource on the server that covers all situations: if the 'URL' cannot match any static resources, the same 'index. html' page should be returned.</p>
<h2>Docker</h2>
<p>In writing...</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

3
web/src/pages/Doc/routerList.js
View File

@ -47,7 +47,8 @@ export default [
{ path: 'deploy', title: '部署' },
{ path: 'client', title: '客户端' },
{ path: 'touchEvent', title: 'TouchEvent插件' },
{ path: 'nodeImgAdjust', title: 'NodeImgAdjust插件' }
{ path: 'nodeImgAdjust', title: 'NodeImgAdjust插件' },
{ path: 'help1', title: '概要/关联线' }
]
},
{

11
web/src/pages/Doc/zh/help1/index.md Normal file
View File

@ -0,0 +1,11 @@
# 概要/关联线
## 概要
可以选中一个节点添加概要，如果想给多个节点添加一个概要，只能通过给它们的父节点添加来实现。
概要节点后面无法再添加节点，后续该特性也不会支持。
## 关联线
关联线添加完后要删除，需要先点击选中关联线，然后按删除键即可。

21
web/src/pages/Doc/zh/help1/index.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div>
<h1>概要/关联线</h1>
<h2>概要</h2>
<p>可以选中一个节点添加概要，如果想给多个节点添加一个概要，只能通过给它们的父节点添加来实现。</p>
<p>概要节点后面无法再添加节点，后续该特性也不会支持。</p>
<h2>关联线</h2>
<p>关联线添加完后要删除，需要先点击选中关联线，然后按删除键即可。</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

5
web/src/pages/Index/components/Header.vue
View File

@ -25,6 +25,7 @@
>
客户端
</div>
<div class="navItem" @click="jumpHelp">使用文档</div>
<div class="navItem" @click="jumpDoc">开发文档</div>
<div class="navItem">
<a href="https://github.com/wanglin2/mind-map" target="_blank"
@ -72,6 +73,10 @@ export default {
this.$router.push('/')
},
jumpHelp() {
this.$router.push('/help/zh/')
},
jumpDoc() {
this.$router.push('/doc/zh/')
},

46
web/src/router.js
View File

@ -24,6 +24,30 @@ const handleRouterList = () => {
}
handleRouterList()
// 创建路由列表
const createTypeRouterList = (type, redirectPath) => {
return [
...routerList.map((item) => {
return {
path: `/${type}/${item.lang}/`,
redirect: `/${type}/${item.lang}/${redirectPath}/`
}
}),
...routerList.map((item) => {
return {
path: `/${type}/${item.lang}/`,
component: DocPage,
children: item.children.map((child) => {
return {
path: `${child.path}/:h?`,
component: () => import(`./pages/Doc/${child.lang || item.lang}/${child.path}/index.vue`)
}
})
}
})
]
}
Vue.use(VueRouter)
const routes = [
@ -37,24 +61,10 @@ const routes = [
name: 'Edit',
component: EditPage
},
...routerList.map((item) => {
return {
path: `/doc/${item.lang}/`,
redirect: `/doc/${item.lang}/introduction/`
}
}),
...routerList.map((item) => {
return {
path: `/doc/${item.lang}/`,
component: DocPage,
children: item.children.map((child) => {
return {
path: `${child.path}/:h?`,
component: () => import(`./pages/Doc/${child.lang || item.lang}/${child.path}/index.vue`)
}
})
}
})
// 开发文档
...createTypeRouterList('doc', 'introduction'),
// 帮助文档
...createTypeRouterList('help', 'help1')
]
const router = new VueRouter({