《喵读·全唐诗》“半Vibe”开发手记

大概两周多以前我用Claude Sonnet完全Vibe了一个《全唐诗》阅读应用

https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.catpoemtang

接下来的大半个月里，除了调试一个新玩具，我大部分时间都在重构这个应用。我完全重写了前后端，并将100% Vibe变成了50% Vibe，本文会着重记录一下开发的过程。

# 为什么要做这个？

阅读类的应用按说是品类很多的，但诗集有所不同，尤其是像《全唐诗》这样体量的诗集（五万多首诗），如果用传统的阅读方式，我想没几个人能认真读完。

我小时候甚至买过一本纸质的《全唐诗》，5-6厘米厚，16K大开本精装，里面是蝇头小字，密密麻麻的豆腐块，结果当然是翻不了几次就束之高阁了，偶尔翻一次也只是随便看看，看完就忘记了。

诗词表达了一个人在某段时间的某段感悟和思想，同时又凝结了这个人一生的文化造诣和人生哲学，再经过诗人反复推敲和凝炼，有时候短短的一句诗十几个字，能胜过千言万语的表达。

如此高浓缩的艺术形式，不应该受到如此怠慢的阅读对待。

所以我对这个应用的想法是，尽可能碎片化，一首诗就是一个作品，不管是长歌还是短句，不管是帝王文豪还是无名氏，完全统一对待。

# 第一版

第一版的画布是这样的：

![懒猫诗词阅读应用架构.png](https://dl.playground.lazycat.cloud/guidelines/319/3c2ee8c6-b12f-4e71-8809-8789519a45a1.png "懒猫诗词阅读应用架构.png")

这里用了Refly画布，但是没有像以前那样做整理，就是一直的问下去，大约四十多个问题完成的。

结果是够用了，但是还不尽人意，于是我当时就已经计划开始第二版了。

# 第二版

第二版的画布比较复杂。

![全唐诗阅读管理规范.png](https://dl.playground.lazycat.cloud/guidelines/319/7a60299c-4c92-4f57-8cd7-7352ec009449.png "全唐诗阅读管理规范.png")

但在第二版中，我采用了分几个模块的方式求请AI开发。

## 第一步准备

第一步是只处理数据。在第一版中，这个功能是在后端的一个单独的方法，我让AI写在了一起，只是在打包前自己运行一次。但这样其实效率不太好，而且也不太合理。

这一次我直接在本地开发机由python处理，指定了具体的格式后让AI为我处理，分别生成了作者索引和作品名索引两个JSON。以便在开始运行的时候，只要初始化miniDB，然后将这两个JSON索引直接导入到miniDB中就行了。

## 第二步准备

由于我比较爱用懒猫内置的miniDB，速度快而且轻巧（[《Vibe打金计划(5)：懒猫minidb插件》](https://lazycat.cloud/playground/guideline/822)），所以我直接让AI在前端封装了一下minidb，然后在后端封装了JSON和图片上传及管理功能，把这两个功能加上基本的打包配置，形成了一个可以复制的初始项目包，暂且叫它《开发基础包》

## 第三步准备
这次的前端，我打算完全从头开始手写，而且由于数据其实不多，而且动态的也不是经常变化，所以我要把所有的界面写在同一个HTML页面中，用容器去切换界面，这样可以保持更好的用户体验。

所以这个页面的结构其实看上去是下图中的“应用地图”中显示这样的：

![屏幕截图 2025-08-16 130603.png](https://dl.playground.lazycat.cloud/guidelines/319/c4b6fb78-ad3a-46cf-a8c3-f075a6de6b7a.png "屏幕截图 2025-08-16 130603.png")

所以我先是描述了一下这个思路，然后让AI给我生成一个基础的事件处理和容器切换功能的基础架构，在上一步的开发基础包上，增加了以上架构，就形成了一个新的《UI基础包》


# 正式开发

以上几步处理完成之后，我才开始正式的开发：

## 索引

因为全唐诗总共有57000余首诗，3000多位作者，原始文件是做了58个JSON，每个JSON内含1000首诗，直接放进应用的话，查询的效率就会太低了，而要一个个导入miniDB或MySQL似乎又太麻烦了，也用不太着。

所以我需要生成两个索引，一个是以作者为维度，包含每个作者的简介及他的作品列表，另一个是以作品标题为维度，记录所有57000多首诗的标题、作者和所在的JSON供查询。

在应用开始的时候，应用会从后端的JSON文件夹中读取这两个索引，然后批量导入miniDB，由于miniDB批量输入的效率还挺高，总共60000多条记录只要十几秒就导入了。而且这个过程只需要在初次安装应用时初始化就可以了。

同时还有一个每次运行的数据完整性检查，以防初始化的时候被打断，如果找不到倒数第十条（容错）记录，就会删除现有数据并重新初始化一次。

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/a22a2a66-be35-4816-8450-b6a22f41a10f.png "image.png")

## 前端
由于我想自己完全控制CSS样式，所以这次的前端是我完全手码的。我不想用React或vue之类的模板结构（其实是不太会），所以基本上是在这个HTML中写了完整的UI结构，这一步花了不少时间。

然后我给UI的要求，不再像以前那样一次提一个项目的需求，而是每次只提一个功能模块的需求，比如初始化、内容加载、设置、作者、收藏夹……

每个功能单独用一个聊天线程，这样的好处是可以有效避免AI逻辑错乱和健忘的问题，也有利于我的版本控制和回滚。

由于每个元素的ID和class都是我自己定义的，我在控制和指导AI的时候更容易记住需要做的事情和明确需求。

事实证明这种方法很好，即使某一个模块AI搞乱了，只要重新再请求一次就可以了。

## 后端 
这个应用由于使用了miniDB代替后端数据库，用localhost记录一些状态，所以后端就极为轻量，基本上就只是一个JSON的读取。

因为原始数据的58个诗词文件和一个作者信息文件我并不想打乱，所以在读取诗歌的时候是让JS到后端去打开相应的JSON文件的，每首诗都是在miniDB中记录一个JSON文件名及位置的指针，这样虽然稍有一点慢，但可以减少对miniDB空间的占用，也减少了初始化的时间。

# 用户体验

正如开头所说，我做这个应用的主要目的是把《全唐诗》这个大部头的书碎片化。

我希望把它变成一个，你随手打开就能随便选一首诗，说不定就会被其中的金句打动呢？

或随便选一个作者，挖掘一下这个作者的生平，浏览他的作品。

如果你不想点击导航菜单，只要在屏幕空白处滑动手指（或拖动鼠标），如果相应的角度上有其他功能界面，页面会显示一个3D的轻微偏转效果，松开手指就会动画滑动到相应的界面：

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/c64ac9d7-1016-4b0a-a897-eb5bee85ea94.png "image.png")

应用同时配有一个详细的设置页面，你可以自由改变你喜欢的配色、字体和排版方案：

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/ff07777d-f511-4444-be8a-a085e2171cb3.png "image.png")

有横排和竖排两种方式，默认是我喜欢且更适合手机的竖排方式，从右向左的竖排方式更显传统风格，也更像是在读古书的感觉。

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/3542ab17-9317-4a01-8f3a-72764363f385.png "image.png")

默认有两种配色和排版的预设。
![image.png](https://dl.playground.lazycat.cloud/guidelines/319/329080eb-8e72-4dcd-ac35-21190bcaedc3.png "image.png")

## 收藏/历史

应用会记录你读过的每一首诗的历史，你也可以具体收藏某一首诗或者其中的某一个句子，当你点击喜欢的句子，它就会被划线标记，同时记入收藏夹。


![屏幕截图 2025-08-16 120952.png](https://dl.playground.lazycat.cloud/guidelines/319/5ab0bf92-e517-466b-81fd-4ec895cf4d45.png "屏幕截图 2025-08-16 120952.png")

本应用的开发中使用了Refly做为AI调用工具。



https://appstore.lazycat.cloud/#/shop/detail/iamxiaoe.lzcapp.refly



欢迎体验这款倾心打造的应用，有任何问题或建议欢迎评论留言。