mirror of
https://github.com/142vip/408CSFamily.git
synced 2026-11-03 05:44:05 +08:00
chore: 移除思维导图组件与生成脚本
删除 XMind 组件、mind-map 静态页及 mark-map 构建脚本，为站点精简做准备。
This commit is contained in:
chufan
@@ -1,206 +0,0 @@
|
||||
<!--
|
||||
参考链接：
|
||||
- https://www.npmjs.com/package/xmind-embed-viewer
|
||||
- https://xmindltd.github.io/xmind-embed-viewer/
|
||||
注意：
|
||||
- 使用ClientOnly内置组件，只在客户端加载，避免依赖构建出错
|
||||
-->
|
||||
<script>
|
||||
import { XMindEmbedViewer } from 'xmind-embed-viewer'
|
||||
import mapData from '../public/mind-map/index.json'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
viewer: {},
|
||||
xmindIndex: 0,
|
||||
xmindFileList: [],
|
||||
xmindFile: mapData.length > 0 ? mapData[0].xMindPath : '../mark-map/操作系统发展历程.xmind',
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听下来列表变更
|
||||
*/
|
||||
watch: {
|
||||
async xmindIndex(newIndex, _oldVal) {
|
||||
const { xMindPath } = mapData[newIndex]
|
||||
|
||||
// 打开指定
|
||||
const xmindResponse = await fetch(xMindPath)
|
||||
const data = await xmindResponse.arrayBuffer()
|
||||
this.viewer.setZoomScale(100)
|
||||
this.viewer.load(data)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.xmindFileList = mapData.map(({ name }) => name)
|
||||
},
|
||||
mounted() {
|
||||
(async () => {
|
||||
const res = await fetch(this.xmindFile)
|
||||
|
||||
this.viewer = new XMindEmbedViewer({
|
||||
el: '#x-mind-manager-container',
|
||||
file: await res.arrayBuffer(),
|
||||
// 国内：cn 全球：global
|
||||
region: 'cn',
|
||||
styles: {
|
||||
width: '100%',
|
||||
minHeight: '600px',
|
||||
height: 'auto',
|
||||
maxHeight: '1200px',
|
||||
},
|
||||
})
|
||||
})()
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 打开本地思维导图文件
|
||||
*/
|
||||
async handleOpenLocalBtnClick() {
|
||||
const fileSelector = document.createElement('input')
|
||||
fileSelector.style.display = 'none'
|
||||
document.body.appendChild(fileSelector)
|
||||
await new Promise((resolve) => {
|
||||
fileSelector.setAttribute('type', 'file')
|
||||
fileSelector.setAttribute('accept', '.xmind')
|
||||
fileSelector.addEventListener('change', () => {
|
||||
resolve()
|
||||
})
|
||||
fileSelector.click()
|
||||
}).finally(() => {
|
||||
document.body.removeChild(fileSelector)
|
||||
})
|
||||
if (!fileSelector.files || !fileSelector.files.length) {
|
||||
return
|
||||
}
|
||||
const file = fileSelector.files[0]
|
||||
if (!file)
|
||||
return
|
||||
|
||||
const data = await file.arrayBuffer()
|
||||
this.viewer.load(data)
|
||||
},
|
||||
/**
|
||||
* 恢复缩放比例
|
||||
*/
|
||||
async handleZoomScaleRevertBtnClick() {
|
||||
this.viewer.setFitMap()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="x-mind-container">
|
||||
<!-- xmind思维导图管理器 -->
|
||||
<div id="x-mind-manager-container" />
|
||||
<div class="btn-container">
|
||||
<button id="openLocalBtn" @click="handleOpenLocalBtnClick">
|
||||
打开本地
|
||||
</button>
|
||||
<button id="zoomScaleBtn" @click="handleZoomScaleRevertBtnClick">
|
||||
还原缩放
|
||||
</button>
|
||||
|
||||
<div class="select">
|
||||
<select v-model="xmindIndex">
|
||||
<option v-for="(xmind, index) in xmindFileList" :key="index" :value="index">
|
||||
{{ xmind }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.btn-container {
|
||||
margin: 50px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.select {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
color: #555;
|
||||
border: 1px solid #aaa;
|
||||
text-shadow: none;
|
||||
border-radius: 4px;
|
||||
transition: box-shadow 0.25s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.select:hover {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.select:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid transparent;
|
||||
border-top-color: #ccc;
|
||||
top: 14px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.select select {
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
.select select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#x-mind-manager-container {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #eb94d0;
|
||||
/* 创建渐变 */
|
||||
background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);
|
||||
background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
|
||||
background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
|
||||
background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
|
||||
background-image: linear-gradient(to bottom, #eb94d0, #2079b0);
|
||||
/* 给按钮添加圆角 */
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
border-radius: 10px;
|
||||
-moz-box-shadow: 6px 5px 24px #666666;
|
||||
font-family: Arial, serif;
|
||||
margin: 5px;
|
||||
color: #fafafa;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 悬停样式 */
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
background: #2079b0;
|
||||
background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
|
||||
background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Markmap</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#mindmap {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.10/dist/style.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.11.1/styles/default.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg id="mindmap"></svg>
|
||||
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.18.10/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.10/dist/index.js"></script><script>((r) => {
|
||||
setTimeout(r);
|
||||
})(() => {
|
||||
const { markmap, mm } = window;
|
||||
const toolbar = new markmap.Toolbar();
|
||||
toolbar.attach(mm);
|
||||
const el = toolbar.render();
|
||||
el.setAttribute("style", "position:absolute;bottom:20px;right:20px");
|
||||
document.body.append(el);
|
||||
})</script><script>((getMarkmap, getOptions, root2, jsonOptions) => {
|
||||
const markmap = getMarkmap();
|
||||
window.mm = markmap.Markmap.create(
|
||||
"svg#mindmap",
|
||||
(getOptions || markmap.deriveOptions)(jsonOptions),
|
||||
root2
|
||||
);
|
||||
})(() => window.markmap,null,{"content":"计算机组成原理","children":[{"content":"引论","children":[],"payload":{"tag":"h2","lines":"23,24"}},{"content":"数据的表示和运算","children":[],"payload":{"tag":"h2","lines":"25,26"}},{"content":"存储系统","children":[],"payload":{"tag":"h2","lines":"27,28"}},{"content":"指令系统","children":[],"payload":{"tag":"h2","lines":"29,30"}},{"content":"中央处理器","children":[],"payload":{"tag":"h2","lines":"31,32"}},{"content":"总线","children":[],"payload":{"tag":"h2","lines":"33,34"}},{"content":"输入输出系统","children":[],"payload":{"tag":"h2","lines":"35,36"}},{"content":"一些总结","children":[],"payload":{"tag":"h2","lines":"37,38"}}],"payload":{"tag":"h1","lines":"6,7"}},null)</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Markmap</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#mindmap {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/markmap-toolbar@0.18.10/dist/style.css"><link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/default.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg id="mindmap"></svg>
|
||||
<script src="https://unpkg.com/d3@7.9.0/dist/d3.min.js"></script><script src="https://unpkg.com/markmap-view@0.18.10/dist/browser/index.js"></script><script src="https://unpkg.com/markmap-toolbar@0.18.10/dist/index.js"></script><script>((r) => {
|
||||
setTimeout(r);
|
||||
})(() => {
|
||||
const { markmap, mm } = window;
|
||||
const toolbar = new markmap.Toolbar();
|
||||
toolbar.attach(mm);
|
||||
const el = toolbar.render();
|
||||
el.setAttribute("style", "position:absolute;bottom:20px;right:20px");
|
||||
document.body.append(el);
|
||||
})</script><script>((getMarkmap, getOptions, root2, jsonOptions) => {
|
||||
const markmap = getMarkmap();
|
||||
window.mm = markmap.Markmap.create(
|
||||
"svg#mindmap",
|
||||
(getOptions || markmap.deriveOptions)(jsonOptions),
|
||||
root2
|
||||
);
|
||||
})(() => window.markmap,null,{"content":"计算机网络","children":[{"content":"<pre data-lines=\"8,32\"><code class=\"language-mindmap\">root(计算机网络)\n (体系机构)\n (物理层)\n (数据链路层)\n (网络层)\n (传输层)\n (应用层)\n\n<a href="../../mind-map/cn-map.html" target="_blank">在线预览</a>\n\n## 体系结构\n\n## 物理层\n\n## 数据链路层\n\n## 网络层\n\n## 传输层\n\n## 应用层\n\n## 一些总结\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"8,32"}}],"payload":{"tag":"h1","lines":"6,7"}},null)</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Markmap</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#mindmap {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.10/dist/style.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.11.1/styles/default.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg id="mindmap"></svg>
|
||||
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.18.10/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.10/dist/index.js"></script><script>((r) => {
|
||||
setTimeout(r);
|
||||
})(() => {
|
||||
const { markmap, mm } = window;
|
||||
const toolbar = new markmap.Toolbar();
|
||||
toolbar.attach(mm);
|
||||
const el = toolbar.render();
|
||||
el.setAttribute("style", "position:absolute;bottom:20px;right:20px");
|
||||
document.body.append(el);
|
||||
})</script><script>((getMarkmap, getOptions, root2, jsonOptions) => {
|
||||
const markmap = getMarkmap();
|
||||
window.mm = markmap.Markmap.create(
|
||||
"svg#mindmap",
|
||||
(getOptions || markmap.deriveOptions)(jsonOptions),
|
||||
root2
|
||||
);
|
||||
})(() => window.markmap,null,{"content":"操作系统","children":[{"content":"引论","children":[],"payload":{"tag":"h2","lines":"19,20"}},{"content":"进程管理","children":[],"payload":{"tag":"h2","lines":"21,22"}},{"content":"内存管理","children":[],"payload":{"tag":"h2","lines":"23,24"}},{"content":"一些总结","children":[],"payload":{"tag":"h2","lines":"25,26"}},{"content":"I/O管理","children":[],"payload":{"tag":"h2","lines":"27,28"}},{"content":"文件管理","children":[],"payload":{"tag":"h2","lines":"29,30"}}],"payload":{"tag":"h1","lines":"6,7"}},null)</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,30 +0,0 @@
|
||||
[
|
||||
{
|
||||
"name": "数据结构",
|
||||
"originXmindFileName": "数据结构.xmind",
|
||||
"targetXmindFileName": "ds.xmind",
|
||||
"xMindPath": "../mark-map/ds.xmind",
|
||||
"mdPath": "../mark-map/ds-map.md"
|
||||
},
|
||||
{
|
||||
"name": "操作系统",
|
||||
"originXmindFileName": "操作系统.xmind",
|
||||
"targetXmindFileName": "os.xmind",
|
||||
"xMindPath": "../mark-map/os.xmind",
|
||||
"mdPath": "../mark-map/os-map.md"
|
||||
},
|
||||
{
|
||||
"name": "计算机组成原理",
|
||||
"originXmindFileName": "计算机组成原理.xmind",
|
||||
"targetXmindFileName": "cpp.xmind",
|
||||
"xMindPath": "../mark-map/cpp.xmind",
|
||||
"mdPath": "../mark-map/ccp-map.md"
|
||||
},
|
||||
{
|
||||
"name": "计算机网络",
|
||||
"originXmindFileName": "计算机网络.xmind",
|
||||
"targetXmindFileName": "cn.xmind",
|
||||
"xMindPath": "../mark-map/cn.xmind",
|
||||
"mdPath": "../mark-map/cn-map.md"
|
||||
}
|
||||
]
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* 思维导图
|
||||
*/
|
||||
export const MarkMapSidebar = [
|
||||
{ text: '📙 数据结构', link: 'ds-map.md' },
|
||||
{ text: '📕 操作系统', link: 'os-map.md' },
|
||||
{ text: '📘 计算机组成原理', link: 'ccp-map.md' },
|
||||
{ text: '📗 计算机网络', link: 'cn-map.md' },
|
||||
]
|
||||
@@ -1,72 +0,0 @@
|
||||
import { VipExecutor, VipNodeJS } from '@142vip/utils'
|
||||
|
||||
const __dirname = VipNodeJS.getProcessCwd()
|
||||
|
||||
const markMapSourcePath = VipNodeJS.pathJoin(__dirname, 'docs/mark-map')
|
||||
const markMapTargetPath = VipNodeJS.pathJoin(__dirname, 'docs/.vuepress/public/mind-map')
|
||||
|
||||
/**
|
||||
* 扫描目录
|
||||
*/
|
||||
function scanDirectory(directory: string, fileType: string): (string | null)[] {
|
||||
const fileList = VipNodeJS.readdirSync(directory)
|
||||
|
||||
return fileList
|
||||
.map((file) => {
|
||||
const filePath = VipNodeJS.pathJoin(directory, file)
|
||||
const fileExtension = VipNodeJS.pathExtname(file).toLowerCase()
|
||||
|
||||
if (fileExtension === `.${fileType.toLowerCase()}`) {
|
||||
return filePath
|
||||
}
|
||||
return null
|
||||
})
|
||||
// 过滤空
|
||||
.filter(c => c != null)
|
||||
}
|
||||
|
||||
/**
|
||||
* 将思维导图的md格式转化为html，提供在线预览
|
||||
* 链接：https://www.npmjs.com/package/markmap-cli
|
||||
*/
|
||||
|
||||
async function markMapMain(): Promise<void> {
|
||||
/**
|
||||
* 第一步： 清空站点思维导图文件存放目录
|
||||
*/
|
||||
const delHtmlDir = `rm -rf ${VipNodeJS.pathJoin(markMapTargetPath, '*')}`
|
||||
|
||||
/**
|
||||
* 第二步： 将md文档转化为思维导图网页
|
||||
*/
|
||||
const mdList = scanDirectory(markMapSourcePath, 'md')
|
||||
const mdToHtmlCmdStr = mdList.map(md => `npx markmap --no-open ${md}`).join(' && ')
|
||||
|
||||
/**
|
||||
* 第三步： 根据文件类型将思维导图网页文件移动到站点指定目录
|
||||
*/
|
||||
const mdHtmlByFileType = VipNodeJS.pathJoin(markMapSourcePath, '*.html')
|
||||
const moveHtmlCmdStr = `mv -f ${mdHtmlByFileType} ${markMapTargetPath}`
|
||||
|
||||
await VipExecutor.commandStandardExecutor([
|
||||
delHtmlDir,
|
||||
mdToHtmlCmdStr,
|
||||
moveHtmlCmdStr,
|
||||
])
|
||||
|
||||
// /**
|
||||
// * 第四步： 对mind-map中的xmind文件重命名
|
||||
// */
|
||||
// console.log(markMapSourcePath, import.meta.url)
|
||||
// const markMapData = createRequire(import.meta.url)('../../docs/mark-map/index.json')
|
||||
// console.log(111, markMapData)
|
||||
// for (const { originXmindFileName, targetXmindFileName } of markMapData) {
|
||||
// const originPath = path.join(markMapTargetPath, originXmindFileName)
|
||||
// const targetPath = path.join(markMapTargetPath, targetXmindFileName)
|
||||
//
|
||||
// // html文件
|
||||
// await fs.renameSync(originPath, targetPath)
|
||||
// }
|
||||
}
|
||||
|
||||
void markMapMain()
|
||||
@@ -1,3 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
npx node --loader ts-node/esm --no-warnings scripts/core/mark-map.ts
|
||||
Reference in New Issue
Block a user