养虾记 | 我用 OpenClaw 手搓了一个台账管理系统——第1天

先看看成果，希望能有一个最终我希望的一个成果！

今天我给小龙虾发了一条消息：

以下都是小龙虾的自述：

说实话，这段时间用 OpenClaw 做了不少自动化的小工具，但正经从头搭一个带桌面客户端、带数据库、带完整前端的项目，还是第一次。技术栈我自己定的：Electron + Vue 3 + Spring Boot 3 + SQLite，韩总那边要求装 Windows 客户端，所以我选了 Electron。

从下午折腾到现在，踩了七个坑，终于把登录页到台账设计页的骨架跑通了。来，跟你说说今天都经历了什么——

第一个坑：登录页报了一个莫名其妙的错

很快龙虾写完了登录接口，我满怀信心地输入 admin / admin123，准备迎接胜利的曙光。

然后弹出了一个让我愣了三秒的错误：

这类问题其实很好避免：**在 Vue 组件里，给函数参数起名字的时候，稍微扫一眼顶部有没有同名的变量**，就能省掉很多莫名其妙的时间。

第二个坑：数据库里的中文全是乱码

登录成功了，页面右上角显示用户名的地方，按理说应该是”系统管理员”。

但我看到的是：绯荤粺绠$惹鍛?

第一反应是文件编码不对。schema.sql 我是 VSCode 创建的，默认 UTF-8，没问题。Java 代码读文件也没问题。Spring Boot 启动日志也显示加载 SQL 文件正常。

用 PowerShell 确认了一下文件编码：

文件本身是 UTF-8 没错。那问题在 JDBC 连接——**Spring Boot 启动 SQLite 的时候，没指定字符集编码，导致读出来是 Latin-1**。

最后在 application.yml 里加了一行配置：

重启，`?encoding=UTF-8` 没生效。绕了一圈，最后在 JDBC URL 里直接加参数搞定的。

第三个坑：侧边栏图标最小化再恢复就没了

登录成功后进到主页面，左侧有个侧边栏，每个菜单项前面有个 Emoji 图标。

刚打开没问题，但**窗口最小化后再恢复，图标全没了，只剩空白框**。

排查了一下，发现是 Vue 模板里这样写的：

Vue 的插值表达式 {{ }} 会对 HTML 实体编码一次，但 Emoji 不是 HTML 实体，所以被转成了乱码显示不出来。

改用 v-html 就好了：

但事情还没完。侧边栏折叠的时候，图标会被 Flex 布局挤走，整个图标区域塌成一条细线。纠结了一番，最后**把侧边栏完全重写了**，不用 ul/li，改用纯 div + router-link 实现，终于顺眼了。

第四个坑：侧边栏折叠尺寸算不明白

侧边栏要能折叠，展开宽度 220px，折叠后 64px。

但当我把窗口缩小的时候，侧边栏会被挤压变窄，布局全乱了。

最后加了一行 CSS 搞定：

flex-shrink: 0 的意思是”不要压缩我”，完美保护侧边栏的固定宽度。这个属性日常很少用，但遇到弹性布局里需要保留固定尺寸的场景特别管用。

第五个坑：台账设计页面布局重构

侧边栏搞定后，开始做核心的”台账设计”页面。这个页面要支持：

• 左侧：台账模板列表，支持新建、编辑、锁定、复制、删除

• 右侧：字段设计器，定义字段名称、类型、是否必填、默认值、编号规则、字段说明

• 底部：说明区域，原来用的是文本框，后来改成页签切换

字段类型我设计了这些：

页面布局从最初的三行（模板列表 / 字段设计 / 说明文本框）改成了两行并排，把说明区域用页签切换来承载，总算清爽了一些。实际做下来，**页面布局这东西真的是改多少遍都不嫌多**。

第六个坑：编号规则到底怎么写

台账里有个”编号”字段，需要支持自动生成序号。韩总说要灵活，格式要可配置。

我设计了一套规则语法：

规则说明页签里还加了使用流程指引：新建台账 → 添加字段 → 设置编号规则 → 开启使用，希望韩总看得懂。

第七个坑：打包之后窗口标题还是旧的

终于把功能调通了，准备打个安装包出来。用 electron-builder 打包完之后，窗口标题栏还是写着 “My App”。

翻了半天配置，改了三处：

三处都要改，漏一个都不行。这个真的是踩过才知道——electron-builder 打包会从多处读取配置，哪处没对齐就会留下旧名字的痕迹。

今天的小结

从下午到深夜，一共踩了七个坑，把登录、主页、侧边栏、台账设计页的骨架全部跑通了。说实话，效率比预期低了不少，但每个坑踩完都感觉对这套技术栈又理解深了一点。

特别想说的是，用 OpenClaw 来驱动开发流程真的很爽——我可以一边让 AI 帮我写后端接口，一边让它帮我梳理前端组件结构，沟通成本很低，**感觉像是有个懂行的搭档坐在旁边**。

明继续开发。希望别再出什么妖蛾子了 🙏。