用 AI 给 Leanote 做了些优化

写在前面

从 2021 年开始，我就一直用 Leanote 做个人知识管理。

不过这些年 Leanote 的开源社区已经停了，随着笔记越积越多，迁移成本也越来越高，一些功能也慢慢开始跟不上我的使用习惯。

之前我对前端、后端和数据库都不懂，想自己维护这个项目基本不现实，所以很多不顺手的地方，只能先忍着，或者想办法找些折中的方案。

直到最近开始尝试用 AI 辅助开发，我才动手给 Leanote 做了一些优化，尽量把它调整到更适合我自己长期使用的状态。

0. 前言

这一轮 Leanote 开发做了不少事情，包括本地构建、Docker 部署、主页简化、代码高亮优化、HTML 导出支持、Android 壳应用等等。

这些内容看上去比较散，其实都围绕着同一个目标：把 Leanote 这套老项目整理顺，便于后面继续长期使用与继续维护。

这部分代码基本都是我用 AI 辅助开发出来的，很多地方都带着我自己的使用习惯，未必适合其他人；另外因为主要是自己用，不少地方也做了 hardcode，所以这部分就不打算开源了。这里主要介绍目的、思路和最终效果。

1. 先把文档整理一下

工欲善其事，必先利其器。

项目维护这一步，我一般还是先搭环境。环境如果不稳，后面一旦开始做功能，就很容易分不清到底是代码有问题、构建产物没同步，还是 Docker 里跑的根本不是同一套东西。

这个老项目中，使用的很多工具链也都过时了，比如 Node 9、Go 1.20。

而面向 AI 编程，除了环境，文档也很重要。很多步骤如果只存在脑子里，隔一阵子再回头看，基本就接不上了。

所以最开始先做的是这部分：

• 创建本地调试与部署文档。
• 创建 Docker 构建文档。
• 完整构建一次，确保文档可用。
• 对齐 Docker 和本地调试时的前端产物。
• 创建 AI 使用的构建、部署脚本。
• 做一个持续更新的 todolist。
• 顺手整理各文档规范的 skill。

这些都是维护一个项目的基础。实际在做这些的时候，已经碰到了不少坑，比如本地调试部署基于 Revel，和 Docker 构建、gulp 打包用到的很多 JS 文件根本不是一套。

2. 首页简化

Leanote 原来的入口逻辑很完整，有注册，登录，忘记密码，找回密码，重置密码，邮箱验证等等，还支持多语言。

但现在这个项目更偏向自建私有知识库，不是对外开放的平台，所以有些入口继续保留完整流程，实际收益不大，在弱网环境下加载也会变得冗长。

这里后面做的就是：

• 移除首页，只保留登录页。
• 已登录用户直接进入笔记页。
• 未登录用户直接打开登录入口。
• 去掉了多语言支持，只保留简体中文。
• 减少重复跳转和循环重定向。

这一块做完以后，入口就是一个登陆界面，更贴合我个人使用习惯。

3. 增强编辑和阅读体验

Leanote 的核心还是写笔记、看笔记、搜笔记，所以编辑体验这块花的时间是最多的。

3.1 优化代码高亮

原版 Markdown 编辑器的代码高亮基于 prettify，所有的代码块都靠猜测，很多语言不支持，或者高亮不准确。无论是显示 C 还是 Python 都非常难看。

原版富文本编辑器的代码高亮基于 ace，很多常用语言都没有映射，有几种语言还存在映射上的 bug。

我这里做的主要是：

• Markdown 预览高亮切到 highlight.js。
• Markdown 预览支持猜测语言和配置语言。
• Markdown 预览支持行号显示、语言显示、折叠以及复制代码。
• 富文本编辑器的代码高亮语言映射修复与补齐。

3.2 增加图片放大显示

原版的 Markdown 编辑器和富文本编辑器里，图片的显示和交互都比较弱。

Markdown 的图片只会在宽度不够时缩小，如果图片本身很高（比如流程图）则会显示超过一个屏幕，非常不便于浏览。而字体过小的图片则会在宽度不够时显示不清楚也无法放大，只能下载到本地再看。

富文本编辑器的图片交互也不够完善，图片只能在编辑器中通过边角的锚点拖拽放大缩小。

这里补了几项常用交互：

• 大图显示约束，超过一定高度的图片会被缩小显示。
• 点击 Overlay 放大预览，滚轮缩放，拖动平移，点击空白或 ESC 退出 Overlay。
• 双击切换适配和原始大小。
• Overlay 界面下方显示控件。

效果比较直接，也符合常用操作逻辑。

3.3 处理 Markdown 编辑器和预览区的滚动联动问题

由于前面增加了代码折叠、图片缩放等功能，原来的滚动联动逻辑就出错了。

• 最后一行滚不到顶部（原版的问题）。
• 编辑区和预览区联动会漂移。
• 预览切回编辑时位置跑掉。
• 代码折叠展开后滚动联动乱掉。
• 随便编辑后，预览区滚动位置不对。
• TOC 跳转位置跑偏或错乱。

这个虽然有 AI 辅助，但还是花了不少时间去理解原来的逻辑和数据结构，最后才把滚动联动修复。

原版联动的逻辑：

• 主要是按 section 下标做一一映射，默认编辑区和预览区结构一致。
• 预览区定位依赖分隔符和当前滚动位置，每次滚动计算一次到尾部的偏移，逻辑简单但对动态内容不够稳。
• TOC 点击时直接跳锚点再同步一次编辑区，缺少重算和补偿。

这套逻辑在纯文本下还可以，但遇到代码折叠、图片缩放等动态高度内容后，就容易出现漂移和抖动。

改动后的联动逻辑：

• 把“同下标映射”改成“比例映射”，两侧 section 数量不一致时，先匹配对应 section 再进行比例映射。
• section 位置改为按渲染结果实时计算，减少 DOM 变化带来的偏移。
• 在布局变化和 TOC 跳转前按需重建映射，避免使用过期数据。
• 增加编辑区和预览区的底部留白和尾部补偿，修复末尾滚动不到位的问题。
• 调整滚动同步节奏，减少双向联动互相触发造成的抖动。

修改后，编辑区和预览区的滚动联动在大部分情况下都能稳定工作，尤其是长文档、代码折叠、图片缩放等动态内容下。

4. 增强搜索能力

原来的搜索基本不能用，搜索输入后，输出是一大堆标题，点进去也不跳转到命中位置。

所以后面把搜索结果改成了 Overlay，同时补了下面这些：

• 显示命中上下文，而不是只有标题。
• 同一篇笔记支持多命中展示。
• 点击结果后尽量稳定打开并定位到对应内容。
• 补移动端、跨笔记本、多次跳转这些边界。

这样后面搜索更像一个真正的知识定位工具。

5. Android WebView 壳应用

除了 iOS 设备以外，我还有个 Android 的 Pad，平时用来远程电脑用。而 WebView 在安卓下，需要调用浏览器，而原生的浏览器比较奇怪`Chrome 打开的时候又各种奇怪的跳转。没办法，就做了一个壳应用，直接把 Leanote 的网页嵌在 WebView 里。

所以这里主要做的是壳层能力：

• 首启和基础打包链路。
• 登录态和认证链路兼容。
• Cookie 持久化。
• 资源缓存和弱网优化。

没想到，曾经完全不懂的 Android 开发，在 AI 的加持下，代码、文档、构建、打包、签名、发布，居然都能轻松搞定了。因为自己用，所以不需要发布，证书都是自签的，签名也不需要上架，所以整个流程比想象中简单很多。

6. 增加 HTML 导出

Leanote 的导出只支持单篇 PDF 导出。

这里主要补了两部分：

• 单篇 HTML 导出。
• 整个笔记本的 HTML/PDF 导出。

这里需要处理的重点主要是：

• 图片不要丢。
• 离线打开还能读。
• 代码块不要乱。
• 目录结构尽量清楚。

做完以后，Leanote 作为知识归档工具会完整一些。

7. 小结

这一轮 Leanote 本体优化看起来事情很多，但方向其实比较一致：

• 编辑、预览、搜索、图片阅读更顺。
• 跨端体验更统一。
• 导出能力更完整。

有些细节后面肯定还会继续调，但这轮先把大的使用问题和基础能力补上，已经顺很多了。

对我自己来说，这次最大的体感不是“加了多少功能”，而是把以前那些零散、拧巴、总要绕路的问题一点点清掉了。以前写笔记时经常会被工具本身打断，现在更多时候可以把注意力放回内容本身。再加上 AI 协助把一些原本不会的东西（比如跨端适配、打包链路、细节排障）拉平了不少，也让我更有信心继续把 Leanote 当成长期可维护的个人知识库，而不只是“能用就先用着”的工具。