企业官网建设流程全解析

• 桌面应用
• 前端

本篇技术指南以 doc/Help.md 为骨架，系统讲解桌面版脑图（DesktopNaotu）使用中的高频实战技巧：如何用浏览器控制台批量备份百度脑图服务器上的全部文件、如何下载单个脑图文件、如何从 ProcessOn 导出思维导图、如何在打印前去掉节点的“展开/关闭”小圆圈、如何重选自动保存目录，以及在 Linux 下如何正确启动程序。读完本文，你既能照抄可运行的脚本完成数据备份，也能理解这些脚本背后的接口调用与本地.km文件格式，并掌握自动保存目录在源码中的完整配置链路。

一、为什么需要这些技巧

桌面版脑图是基于百度脑图（naotu.baidu.com）本地化改造的跨平台思维导图工具，其本地文件格式为.km（JSON 结构），支持 Windows / Linux / Mac OS（对应版本说明见 README.md）。百度脑图的数据默认存放在百度服务器上，这意味着：

• 在线文件存在丢失、账号异常或服务调整的风险，定期备份到本地是推荐做法；
• 本地版本与在线版使用同一套.km数据格式，因此在线备份下来的文件可以直接用桌面版打开、编辑与再保存（相关读写实现见 app/src/lib/file.ts 中的openKm/saveKm）。

Help.md 提供的全部技巧，本质上都是围绕“把在线数据搬运到本地、把本地数据打理得更顺手”展开的。

二、批量下载所有百度脑图文件

场景与价值

百度脑图的文件存放在百度服务器上，如果想在本地计算机上保留一份完整副本，可以借助控制台脚本进行批量下载。该脚本会保留在线版的目录结构，方便日后按原样恢复。建议把它纳入你的定期备份流程（例如每月执行一次）。

操作步骤

1. 在 Chrome 浏览器中打开在线脑图列表页：http://naotu.baidu.com/home（注意：前提是先登录账号）。
2. 按下F12进入开发者调试模式，切换到Console标签页。
3. 粘贴下方代码，回车执行。
4. 等待数秒后，浏览器会自动下载打包好的压缩文件（脚本会依次加载百度云 CDN 上的 JSZip 与 FileSaver 依赖，因此需要保持网络可用）。

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('7 T=0;6 w(){x(++T==3){1J{6 r(d,e,f){$.1b({C:d,S:"1M",27:Y,20:Y,v:e,w:6(a,b,c){f(a)}})}6 l(a,b){x(b){D.Z(a)}19{D.Z(\'%c\'+a+\' \',\'1l: C("v:1k/1j+1m;1i,1d+1g+1f+1A+1z+1B+1x==") 1u 1v-1w;\')}}7 g={1t:$("#1q-1r").1s()};6 I(d){18(7 t=y.10();y.10()-t<=d;){}}6 17(a){7 b=F;r("B/1C",$.X(p,{1D:a},g),6(d){b=d.v});I(U.V()*W);12 b}6 13(a){7 b=F;r("B/1E",$.X(p,{1y:a},g),6(d){b=d.v});I(U.V()*W);12 b}6 z(a,b){7 c=17(a);18(7 i=0;i<c.1e;i++){7 d=c[i];x(d.16=="1o"){7 e=b.1p(d.15);z(d.G,e)}19 x(d.16=="14"){7 f=13(d.G);b.14(f.15+f.1Z,f.21)}}}D.1X();l(\'1Y！\',p);7 h=P 22();7 j=F;r("B/28",g,6(d){j=d.v});l(\'24，Q\');z(j.G,h);l(\'1Q！\',p);l(\'1L，Q\');h.1G({S:"1I"}).1N(6(a){l(\'1S！\',p);7 d=P y();7 t=d.1R()+\'R\'+(d.1O()+1)+\'R\'+d.1P();1U(a,j.1T+"1H"+t+".1K");l(\'1V，25！\',p)})}23(E){26(E)}}}6 u(a){$.1b({C:a.1W(),1F:"1n",w:w,E:6(r,s){u(a)}})}u([\'//H.J.L/o.8/A-11-29/o.k.8\',\'//q.K.m/o.8/A-11-29/o.k.8\',\'//1c.N.m/q/O-1-M/??o.8/A-1h-29/o.k.8\']);u([\'//H.J.L/9-n/0.0.2/9-n.k.8\',\'//q.K.m/9-n/0.0.2/9-n.k.8\',\'//1a.N.m/q/O-1-M/9-n/0.0.2/9-n.k.8\']);u([\'//H.J.L/9/3.1.4/9.k.8\',\'//q.K.m/9/3.1.4/9.k.8\',\'//1a.N.m/q/O-1-M/??9/3.1.5/9.k.8\']);',62,134,'||||||function|var|js|jszip|||||||||||min|printf|com|utils|FileSaver|true|cdn||||loadJs|data|success|if|Date|dirSearch|2014|bos|url|console|error|null|file_guid|libs|sleep|cdnjs|bootcss|net||pstatp|expire|new|请稍候|_|type|count|Math|random|1000|extend|false|log|now||return|getFile|file|file_name|file_type|getDir|for|else|s0|ajax|s3|PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCAyNCAzMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTAgNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgIDxyZWN0IHg9IjAiIHk9IjYuNzE3MzYiIHdpZHRoPSI0IiBoZWlnaHQ9IjE3LjU2NTMiIGZpbGw9IiMzMzMi|length|CiAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIxMzsgNTsgMTMiIGJlZ2luPSIwcyIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI|CiAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjU7MjE7NSIgYmVnaW49IjBzIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU|08|base64|svg|image|background|xml|script|directory|folder|km|csrf|val|csrf_token|right|no|repeat|PC9hbmltYXRlPgogICAgPC9yZWN0PgogIDwvc3ZnPg|fileGuid|PC9hbmltYXRlPgogICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHZhbHVlcz0iMTM7IDU7IDEzIiBiZWdpbj0iMC4xNXMiIGR1cj0iMC42cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9IjIwIiB5PSIxMS4yODI2IiB3aWR0aD0iNCIgaGVpZ2h0PSI4LjQzNDcyIiBmaWxsPSIjMzMzIj4KICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHZhbHVlcz0iNTsyMTs1IiBiZWdpbj0iMC4zcyIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI|PC9hbmltYXRlPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0iMTAiIHk9IjcuMjgyNjQiIHdpZHRoPSI0IiBoZWlnaHQ9IjE2LjQzNDciIGZpbGw9IiMzMzMiPgogICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSI1OzIxOzUiIGJlZ2luPSIwLjE1cyIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI|PC9hbmltYXRlPgogICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHZhbHVlcz0iMTM7IDU7IDEzIiBiZWdpbj0iMC4zcyIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI|ls|dirGuid|open|dataType|generateAsync|_0|blob|try|zip|正在打包文件|POST|then|getMonth|getDate|已完成文件加载|getFullYear|已完成文件打包|creater_name|saveAs|恭喜|shift|clear|脑图打包程序启动成功|ext_name|async|content|JSZip|catch|正在加载文件|脑图文件打包下载成功|alert|cache|get_root_dir|'.split('|'),0,{}))

脚本原理解读（结合源码与接口行为）

这段代码是经过 packer 压缩混淆的脚本，解包后其核心逻辑如下，便于你理解它做了什么：

1. 动态加载依赖：依次从百度云（bos）、cdnjs、bootcss等 CDN 加载jszip、utils、FileSaver三个库，任一失败则自动切换备用源；
2. 携带会话凭据：从页面中读取csrf_token（页面上的#km-csrf-token等元素），后续所有 Ajax 请求都带上它，保证请求通过服务端校验；
3. 递归遍历目录：先请求根目录（get_root_dir），对返回列表中的每一项进行判断——如果是文件夹（directory/folder类型）则递归进入该目录继续遍历；如果是文件则按fileGuid逐个下载文件内容，从而完整保留在线目录层级结构；
4. 按原始结构打包：下载过程中将文件按“目录路径/文件名”写入 JSZip 实例，全部完成后调用generateAsync生成 Blob，再通过 FileSaver 的saveAs触发浏览器下载，文件名形如脑图备份-YYYY-M-D.zip（YYYY/M/D由getFullYear/getMonth/getDate拼出）；
5. 请求间防抖：每两次请求之间插入随机延时（Math.random() * 1000毫秒级 sleep），降低对服务器的瞬时压力。

下载得到的.zip内即为与原在线目录一致的.km文件。这些.km文件可以直接用桌面版脑图打开——app/src/lib/file.ts 中openKm通过readJson读取 JSON 内容并交给editor.minder.importJson渲染，saveKm则通过writeJson写回，两边的数据格式完全互通。

提示：由于脚本依赖百度脑图页面内部接口（B/cache、B/get_file_list等）与页面上已有的 jQuery/CSRF 环境，请务必在naotu.baidu.com已登录的页面中执行，且不要刷新页面直到下载完成。

三、如何下载单个百度脑图文件到本地

如果只想备份某一个脑图文件，有两种更轻量的方法。

方法 1：控制台即时下载

• 用 Chrome 或 Firefox 打开百度脑图页面；
• 按下F12打开控制台；
• 粘贴下面的代码，回车即可直接下载当前编辑的脑图文件。

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('h{l 4(a,b){3 c=6.i(\'r://t.y.z/B/F\',\'a\');f(c){c.g=\'2:5/j,\'+b;c.k=a;3 d=6.m(\'n\');d.o(\'p\',q,1,s,0,0,0,0,0,1,1,1,1,0,u);c.v(d)}}3 2=w.x(7.8.A());3 9=7.8.C().2.5+\'.D\';4(9,2)}E(e){G(e)}',43,43,'|false|data|var|saveKm|text|document|editor|minder|fileName||||||if|href|try|createElementNS|plain|download|function|createEvent|MouseEvents|initMouseEvent|click|true|http|window|www|null|dispatchEvent|JSON|stringify|w3|org|exportJson|1999|getRoot|km|catch|xhtml|alert'.split('|'),0,{}))

方法 2：做成书签长期使用

在浏览器书签栏的空白处，右键选择“添加网页”，名称输入“脑图下载”，在“网址”文本框中粘贴下面的代码并保存。之后每次打开百度脑图页面，点击该书签即可下载当前文件：

javascript: try{function saveKm(fileName,content){var el=document.createElementNS('http://www.w3.org/1999/xhtml','a');if(el){el.href='data:text/plain,'+content;el.download=fileName;var event=document.createEvent('MouseEvents');event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);el.dispatchEvent(event)}}var data=JSON.stringify(editor.minder.exportJson());var fileName=editor.minder.getRoot().data.text+'.km';saveKm(fileName,data)}catch(e){alert(e)}; void (0);

原理：与桌面版同源的km数据模型

方法 2 的代码是最直白的，它做了三件事：

1. editor.minder.exportJson()—— 导出当前脑图的完整 JSON 数据（节点树、主题、备注等全部信息）；
2. editor.minder.getRoot().data.text + '.km'—— 以中心主题文字作为文件名，拼上.km扩展名；
3. 构造一个data:text/plain链接并模拟点击，触发浏览器下载。

这个文件名命名规则与桌面版完全一致：在 app/src/lib/minder.ts 的getDefaultPath中，桌面版同样使用editor.minder.getRoot().data.text作为默认文件名（${rootText}.km）。两者共用同一套 kityminder 数据协议，因此在线导出的文件拿到本地打开，节点结构与样式数据不会丢失。

四、如何下载 ProcessOn 上的思维导图

ProcessOn 是另一家思维导图 / 流程图在线服务。它的导出操作与百度脑图类似：在浏览器中按 F12 并在控制台粘贴代码即可下载。

以《未来简史》思维导图为例，只需三步：

1. 打开该导图的查看页面（如https://www.processon.com/view/598c3af7e4b020989e5b84d2）；
2. 按下F12打开控制台；
3. 粘贴下面的代码并回车。

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('W{2 o(e){2 6(b){1 d={4:{7:b.7,9:b.s.v(/<w>/g,\'\\n\')}};f(b.h!=u){d.4.h=b.h}f(b.5==i||b.5.z==0){8 d}1 c=[];b.5.12(2(a){c.t(6(a))});d.5=c;8 d}8{j:6(e)}}2 k(a,b){1 c=l.x(\'y://r.A.B/C/D\',\'a\');f(c){c.E=\'4:9/F,\'+b;c.G=a;1 d=l.H(\'I\');d.J(\'K\',L,3,M,0,0,0,0,0,3,3,3,3,0,i);c.N(d)}}$.O({P:"/Q/R?p="+p,S:\'T\',4:{7:U},V:2(c){1 a=q.X(c.Y);1 b=o(a);1 d=b.j.4.9+\'.Z\';k(d,q.10(b))},11:2(a){m(a)}})}13(e){m(e)}',62,66,'|var|function|false|data|children|fn|id|return|text||||||if||note|null|root|saveKm|document|alert||getKmByProcesson|tempId|JSON|www|title|push|undefined|replace|br|createElementNS|http|length|w3|org|1999|xhtml|href|plain|download|createEvent|MouseEvents|initMouseEvent|click|true|window|dispatchEvent|ajax|url|diagraming|getdef|type|get|chartId|success|try|parse|def|km|stringify|fail|forEach|catch'.split('|'),0,{}))

转换逻辑说明

解包后可以看到该脚本的核心差异在于格式转换：

• 它通过$.ajax请求 ProcessOn 的接口（/diagraming/getdef?p=<chartId>，携带tempId等参数）获取该导图的原始def数据；
• 关键函数fn会把 ProcessOn 的节点结构递归转换为 km 兼容结构：text字段中把 HTML 换行标签<br>替换为\n，保留note备注字段，children递归处理子节点；
• 最终用与百度脑图单文件下载相同的saveKm手法（data:text/plain+ 模拟点击）下载为.km文件。

也就是说，无论数据来自百度脑图还是 ProcessOn，最终都归一为桌面版脑图可读的.kmJSON 格式，可以无缝导入本地编辑。

五、打印时去掉节点前面的“展开/关闭”小圆圈

脑图导出打印时，带有子节点的节点前会渲染一个“展开/关闭”小圆圈（node_expander），影响打印版面的整洁。处理办法如下：

1. 在桌面版脑图中把当前脑图导出为 SVG 格式（文件→导出，快捷键Ctrl+E，导出实现见 app/src/lib/dialog.ts 的exportDialog）；
2. 用 Chrome 浏览器打开该 SVG 文件；
3. 按下F12打开控制台，切换到Console选项卡；
4. 粘贴下面的代码并回车：

document.querySelectorAll('g[id^="node_expander"]').forEach(n => n.remove());

该语句利用属性选择器g[id^="node_expander"]选中所有id以node_expander开头的<g>分组元素（即展开/关闭小圆圈的 SVG 容器），逐个从 DOM 中移除。执行后原路打印（或在浏览器中另存为 PDF），输出结果中就不会再出现这些圆圈。由于它是对 DOM 的即时操作，不会改动原始.km文件，可放心使用。

提示：打印优化只影响本次导出的 SVG 渲染结果；如需长期使用，可把这一行代码保存为书签或浏览器扩展的注入脚本。

六、怎么重选默认保存路径

桌面版脑图默认把自动保存的文件存放在系统的用户数据目录下的备份目录（backup）中。如果你希望自动保存到自己的目录（例如同步盘、U 盘或专门的数据目录），可以随时重选。

操作方式

在菜单栏中，点击文件→重选自动保存的目录菜单项，或直接按Ctrl+R（Mac 为Cmd+R）快捷键，在弹出的目录选择对话框中选定目标文件夹即可。

源码级的完整链路

这一功能在源码中有清晰的三层实现，方便你理解它的行为：

1. 菜单注册：在 app/src/lib/menu.ts 中，文件菜单下注册了“重选自动保存的目录”菜单项，accelerator: "CmdOrCtrl+R"即快捷键定义，点击事件绑定到setSavePath；
2. 目录写入配置：app/src/lib/dialog.ts 的setSavePath()调用remote.dialog.showOpenDialog({ properties: ["openDirectory"], defaultPath: conf.defSavePath })弹出目录选择框（不是文件保存框），选中后把新路径写入配置项conf.defSavePath并调用naotuConf.save(conf)持久化；
3. 默认路径生成：app/src/lib/minder.ts 的getDefaultPath()在保存时按以下规则生成路径：
   • 目录优先取配置文件中的defSavePath；若为空则回退到备份目录getBackupDirectoryPath()（见 app/src/core/path.ts）；
   • 文件名取中心主题文字（rootText）；
   • 若同名文件已存在，自动追加序号0、1、2…（${rootText}${counter++ || ""}.km），避免覆盖已有文件。

配置文件字段说明

桌面版的配置以 JSON 形式保存在 Electron 的userData目录下（路径由 app/src/core/path.ts 的getConfigFilePath计算），配置模板定义在 app/src/core/conf.ts。与本节相关的完整字段如下：

关于自动保存还有一个细节值得注意：在 app/src/index.ts 中，编辑内容发生变化时会检查naotuConf.getModel().isAutoSave，为true则直接调用saveDialog()；而saveDialog()（见 app/src/lib/dialog.ts）在“当前文件无明确路径”时会调用saveKm(getDefaultPath())——即自动保存正是落在上面所述的默认目录里。所以“重选自动保存的目录”实际同时决定了自动保存与“新建文件后直接保存”的落盘位置。切换自动保存状态的实现见 app/src/lib/recently.ts 的autoSave()。

七、Linux 中如何运行

在 Linux 上直接双击或命令行执行DesktopNaotu可执行文件前，通常需要先添加运行权限：

sudo chmod a+x DesktopNaotu && ./DesktopNaotu

命令拆解：

• sudo chmod a+x DesktopNaotu：为所有用户（a）添加执行权限（+x），这是 Linux 下运行未标记为可执行文件的常规步骤；
• ./DesktopNaotu：从当前目录启动程序。

说明：不同发行版对 Electron 应用还可能有依赖库要求（如libnss3、libgtk-3等），若启动报缺库错误，请按发行版包管理器安装对应依赖。Linux 版对应文件名为DesktopNaotu-linux-x64，支持全部功能（版本矩阵见 README.md）。

总结

围绕 doc/Help.md 的六个高频问题，本文完整保留并深化了以下能力：

• 备份能力：用控制台脚本可一次性把百度脑图服务器上的全部文件按原目录结构打包下载，也可针对单文件即时下载，或做成书签长期复用；ProcessOn 上的导图同样可一键转为.km；
• 数据格式互通：无论来自百度脑图还是 ProcessOn，最终都是 kityminder 协议的.kmJSON，与桌面版的openKm/saveKm读写实现（app/src/lib/file.ts）完全兼容；
• 打印优化：一条querySelectorAll语句即可在导出 SVG 中移除node_expander圆圈；
• 路径管理：通过文件 → 重选自动保存的目录或Ctrl+R修改defSavePath配置，理解getDefaultPath的命名与去重逻辑；
• Linux 运行：chmod a+x后即可启动。

配合桌面版脑图的自动保存、拖拽打开.km文件等本地化特性（README.md），这套“在线备份 → 本地管理”的工作流可以长期、稳定地守护你的思维导图数据。

• 桌面应用
• 前端