AI 一天写完，我花一天返工

一开始是先让 AI 把整个项目写出来。第一次提交里就包含了后端骨架、前端骨架、Markdown 编辑器、分类树和标签、搜索排序置顶回收站——看提交记录像一次交付。

之后又来回改了六次，大致分这几块：

• 加功能：用户登录/切换和 JWT 认证（多用户数据隔离）；注册安全三层防护（注册开关、邀请码、IP 和全局限流）
• UI 翻新：二十多个 SVG 图标替换 emoji，引入设计令牌（颜色、间距、字体、阴影、圆角），补无障碍样式
• 移动端适配：第一版是三栏布局，手机上挤在一起没法用，改成"列表 → 编辑器"两层结构
• 移动端细节：可点元素高度不到 44px、div 当按钮用、没有 focus 状态、标签删除按钮只在 hover 时出现（手机上永远点不到）、没适配刘海屏安全区、搜索框 14px 会被 iOS 放大、没有按压反馈、有 300ms 点击延迟
• 默认模式：点进已有笔记默认双栏编辑，手机上看着像进了编辑状态；首次加载 previewOnly 没生效，改成有内容的笔记默认预览、空笔记默认编辑

手机上打不开

第一版是三栏布局：侧边栏、笔记列表、编辑器并排。桌面浏览器里正常，手机上三栏挤在一起没法用。需求里没提手机端，第一版就没做手机端。

后来把侧边栏合并进笔记列表顶部，改成"列表 → 编辑器"两层结构。

UI 翻新

第一版图标全是 emoji，颜色和间距没有统一。后来换了二十多个 SVG 图标，引入设计令牌，加了无障碍样式。这次照的是 ui-ux-pro-max-skill 里的规则。

移动端细节

手机实际用的时候才碰到这些问题：

• 可点元素高度不到 44px，手指点不准
• div 当按钮用，键盘操作不了
• 没有 focus 状态，键盘用户看不见焦点
• 标签删除按钮只在 hover 时出现，手机上永远点不到
• 没适配刘海屏安全区
• 搜索框 14px，iOS 会放大页面
• 没有按压反馈，点击有 300ms 延迟

默认模式

最后一轮改的是：点进已有笔记默认双栏编辑，手机上看着像进了编辑状态；首次加载时 previewOnly 没生效。改成有内容的笔记默认预览、空笔记默认编辑，手机隐藏双栏按钮，editMode 的 watch 加 onMounted 初始触发。

现在的状态

这套东西现在跑在服务器上，勉强能用，但体验上还有不少问题，后面还得继续改。第一次提交的时候我以为一次就搞定了，结果后面又改了六次，全是手机端适配和交互细节。