我把用了4年的”林羽凡笔记“改版了，新版开发已接近尾声

最近花了点时间，把林羽凡笔记（原林羽凡待办）更新换代了。

原系统是2022年到2023年之间在vue2的基础上开发的，马上快4年了。直接升级到vue3的话问题比较多，索性就直接从零开发了一版Ts版本的。

解决了很多原生问题。使用Ts真的是香，虽然前期定义类型比较麻烦，但只要定义好了，在系统内所有文件中使用，只要类型有问题，立马提醒，非常好用。

一、Markdown编辑器

这是最笔记系统中最重要的一个组件（模块），旧系统中缝合了很多第3方组件，但都没有做好包管理，导致警告和错误比较多，虽然打包的时候都屏蔽掉了，但心里总感觉缺了点灵魂。

于是重新基于marked开发了全新的LinyufanMarkdown编辑器Ts版本。增加了暗色模式，取消了一些没用的鸡肋功能。

不过保留了原编辑器大部分的自定义语法和渲染逻辑。毕竟原系统还有不少朋友在使用，不然后期迁移过来就比较麻烦了。

使用起来也是非常Nice的，LinyufanMarkdownTs编辑器有自适应，在”林羽凡笔记“项目中直接使用完全没有问题。

系统内所有组件都统一了主题色，可以自定义任何颜色的主题色。

二、增加了各类思维导图

目前支持了3类节点编辑器：节点导图、普通思维导图、圆形节点图。

 

以上3类节点编辑器均支持导出图片和Svg，支持全屏、支持缩放画布等，定制化程度非常高，可以做出自己想的节点展示效果。

其中最新版的”节点导图“演示中增加了显示箭头和动画效果的功能，也是非常Nice。

三、支持“标注工具”功能

标注功能就是在编辑器（以上4个编辑器）上增加一个透明Canvas，可以画任意图形或者字符，起到标注的作用。

上图为旧版的标注工具

 

这个标注工具在旧版本上增加了，但没有更新到生产环境中，问题太多了，就不一一表述了，总之就是不符合我的心理预期。

新版标注工具可以自由拖拽

 

新版本的标注工具可以在页面上任意拖拽，在开启标注后，当前编辑器（无论哪个类型的）都会返回一个是否最大化、位置坐标和高宽信息的数据，标注工具中的Canvas根据这个数据就能精准覆盖到编辑器上，从而实现绘制功能。

随便画，想画啥画啥，可以清除，也可以撤销操作。

目前编辑模式、只读模式、分享的笔记都可以使用标注工具。

四、导入和导出

这个功能其实很早前也想开发了，但旧版本的数据表结构设计不合理，一直也就没增加这个功能。（旧版只能导出pdf的打印文件）

新版本的笔记系统增加了可以导出当前笔记，或者导出任意.md笔记。

新技巧：可以在创建任意笔记后，导出该笔记，会得到一个含有笔记的节点结构信息的.md文件。

将这个包含节点结构信息的文本投给任何一个Ai工具，就可以生成你想要的数据的节点信息，再导入到笔记中。

ps：新系统未来可能会上线第3方Ai接口包，一键自动生成想要的数据内容。

五、基于Websocket的聊天对话

这是在一个失眠的夜晚，无聊的时候开发一个功能，最初只是想开发一个聊天工具，随手给ai丢了一个需求。没想到生成的页面结构啥的还不错，后来优化了一下，就加到林羽凡笔记系统中了。

目前只实现了文字聊天，后期也不准备增加功能了。

支持：撤回、引用、下线、在线。

七、笔记模式配置

目前已经做好了笔记配置的功能，还不支持本地笔记。

未来会陆陆续续增加本地笔记功能，基于浏览器Indexed数据库的本地笔记功能。

八、扫码登录

微信扫码和鸿蒙扫码的前端界面已经写好了，未来在后端支持了就可以了。

在登录界面增加了一个基于Threejs的3D旋转文字效果。

九、支持Webauth的认证登录

相关的认证及接口都完成了，目前支持Web端，未来接入鸿蒙App的话应该也比较方便（我设想的，因为鸿蒙需要Fido2的认证）。

具体操作演示如下：

1、在登录的账号中先绑定

没有登录的，或者没有绑定账号，即便知道账号id，也无法登录，因为这个id绑定的设备不是你的。

取消输入会绑定失败，需要重新输入发起挑战

在个人中心点击绑定账号，弹出绑定窗口。在弹窗中输入PIN密码就可以了，不支持蓝牙、USB设备啥的认证。

目前只支持PIN认证和人脸识别认证（pad上可以）。Win11以上的笔记本电脑上也可以。

 

认证成功后，就能看到绑定信息了。

 

再次使用“一键登录”就能直接登录了。

话说，这个功能Wordpress也有插件支持，需要的朋友可以找找，我测试没成功，好几年前的版本了。

十、关于笔记和目录分享

老版本中因为早期没有考虑到分享笔记的事，最开始开发的功能是，点击分享后生成一个jwt的字符串，用户访问这个字符串后通过后端解析JWT，得到是否有分享截止日期，是否有加密等。好处是不占数据库，坏处是不够灵活。

后来改版的时候，增加了URL控制解析，为分享目录做了适配，也就是可以分享整个目录给其他人访问。

目前新系统中，可以非常灵活地定制各种分享状态，当然前提是被分享的笔记或目录是公开状态，如果是非公开状态，即使分享了，其他人也访问不到具体的数据，都会在后端拦截。

十一、总结及规划

讲真，开发这样一套系统还是挺耗费精力的，虽然看着就那几个功能。

1、关于Ai编程

这个系统每个功能单拿出来都是一个比较耗时的大模块。虽然有Ai工具的帮助，但对于这种比较复杂（我个人看法）的前后端协同的项目，Ai的帮助还是有限的，大的架构需要自己思考，小的细节也需要自己把握。

目前的Ai编程确实很厉害，但仅限于你没有特定的要求时的厉害。比如你简单提个需求：开发一个XX的博客，有XX的功能，有XX的颜色，有XX的亮点。

这些功能给到Ai后，生成的页面非常好看，乍一看好像确实很棒。就像下面的页面：

但如果有比较细的需求，或者你有特定的需求，Ai大部分情况下是抓瞎。

不管你怎么描述，它就是不理解，甚至你把图给它，把错误信息给它，它都理解不了你大脑中说的那个：把A调得比B高一些，把A往B的上面一些，把A放在B的外面。

这里的“上面”，相对位置的”高“，可能包含z-index，Ai是极难把握的。

就拿我让Ai开发”标注工具“来讲，我一直强调标注工具的Canvas要在所有编辑器的上面（我想的是z-index层的），但它一会理解对，一会理解错。我的意思是覆盖在上面的意思，属于Z轴的位置表述。Ai一直理解不了，要么覆盖在编辑器上了，但定位有问题，要么层级（z-index）有问题，导致画不了，或者画了不显示，或者超出边界了，调了很久都没搞定。

最后索性在所有编辑器中增加了一个回调函数，让编辑器监听自己的位置，无论是全屏还是父级宽度的变化，都会返回一个包含x,y的位置信息和包含width，hieght的宽高信息给调用组件。

这样一来标注工具的canvas定位问题就解决了。

具体开发过程详见《一个基于Canvas的标注工具的开发历史》

2、未来规划

目前开发的进度已经满足我的日常使用了，后期会陆陆续续增加功能。

等功能完善得差不多了再开放使用。（这个时候还需要同步修改微信小程序、字节小程序、QQ小程序、百度小程序、Windowns客户端、Mac客户端、Linux客户端），想想都头大得很。

最近看上NotebookLM了，真香呀。