VibeCoding作业-CoderPro

第1轮（初版）
我给AI的提示词
用 Electron + Vue3 + Vite + Tailwind 做一个开发者桌面效率工具。窗口要无边框、透明背景、始终置顶、不在任务栏显示；收起时是桌面上一个小悬浮球，点一下展开成二级面板。面板里放三个模块：网址记录（一键用系统浏览器打开）、文本片段（代码片段/AI 提示词，一键复制）、今日任务（待办 + 完成状态）。数据全部存本地 JSON，不要联网、不要数据库。视觉风格走苹果毛玻璃 + 赛博科技感，主色用赛博青和荧光绿，代码内容用等宽字体。
AI生成的初版要点
产出可运行骨架：main.js（主进程，frame:false + transparent:true + alwaysOnTop + skipTaskbar）、preload.js（contextBridge 暴露 electronAPI）、MainWidget.vue + UrlManager.vue / TextManager.vue / TaskManager.vue。
视觉：Tailwind 里定义 cyber.cyan = #00F0FF、cyber.green = #39FF14，抽了 .glass-panel（backdrop-blur-[40px] + 半透明边框）/ .glass-input / .glass-btn-primary 三个通用类。
数据：ipcMain.handle('get-data' / 'save-data') 读写 userData/coderpro_data.json，数据结构 { urls: [], texts: [], tasks: [] }。
是否符合期望
外观和"能跑起来"达标，毛玻璃质感和配色一次到位，三个 CRUD 闭环也通了。但这一版只是"壳"：交互细节（拖拽/点击/退出）和多窗口下的数据一致性完全没被考虑，属于我提需求时自己也没想到的部分。

第2轮（第一次迭代修改）
发现的问题
1.拖拽和点击打架：悬浮球想挪个位置，一按一松就被判成"点击"，面板自己弹开；而且无边框窗口没有系统标题栏，拖动时窗口根本不动。
2.列表没有边界处理：三个模块都是"一长条流式列表"，记录一多面板装不下，滚动很难看，也没有分页。
3.多窗口数据互相覆盖（最严重）：保存是"整包覆盖"——每个窗口各自持有一份完整 data，谁后保存谁把对方的写入冲掉。实测：主面板勾选任务完成的同时从表单窗口新增一条网址，任务状态会回滚。
我给AI的修改要求
三个问题一起改：①悬浮球要能"点一下展开 / 按住拖走"，两者不能互相干扰，拖拽请走 IPC 让主进程改窗口位置，别用 -webkit-app-region；②三个列表都做分页，每页 3 条，带上一页/下一页和页码，删掉最后一页最后一条数据时要自动退回上一页；③保存不要再整包写，改成按分类（urls / texts / tasks）只提交自己那一类，保存成功后广播给所有窗口，保证任何窗口看到的数据都是最新的。
AI修改了什么
MainWidget.vue 里加了 DRAG_THRESHOLD = 5px + TIME_THRESHOLD = 250ms 的双阈值判定，配合主进程 move-window 做增量 setPosition，拖拽和点击彻底分开。
三个 Manager 统一加 currentPage / itemsPerPage = 3 + watch(data.length) 越界回退，并抽了同一套分页导航 UI。
save-data 接口签名改为 { category, data }，主进程只覆盖对应分类，然后 BrowserWindow.getAllWindows() 广播 data-updated，前端各自刷新。

第3轮（第二次迭代修改）
发现的问题
4.JSON 写入不安全：数据文件偶尔变成半截内容（进程被强退时），下次启动读 JSON.parse 直接抛异常；旧版本数据缺字段时，组件里到处 undefined。
5.三个模块挤在一个 600×650 的面板里，想边看代码片段边看任务清单就只能来回切 tab，希望模块能"甩"成独立窗口，关掉再合回来。
6.新增记录的表单挤在列表上方，切个 tab 输入就丢了。
7.没法退出应用：无边框 + 无任务栏图标，用户根本找不到关闭入口。
我给AI的修改要求
继续改四点：①数据写入改成"先写临时文件再 rename"的原子替换，读取时做一次字段兜底（缺 urls/texts/tasks 就补空数组），保证文件坏了也不崩；②标签支持长按 1 秒把该模块分离成独立透明窗口，长按时标签上要走一条 1 秒进度条动画，分离后主面板该 tab 显示"已在独立窗口打开"的占位，独立窗口关闭后进度条不留残留状态；③新增表单改成独立小窗（AddFormWidget.vue），URL 不写协议时自动补 https://；④加一个退出方式：悬浮球上 300ms 内右键双击退出应用。
AI修改了什么
main.js 的 writeData 改为 coderpro_data.json.tmp + fs.renameSync 原子替换，新增 normalizeData() 对读取结果做结构兜底。
新增 createDetachedWindow(type)：长按动画由前端 pressingTab / isPressing 控制，触发后 IPC detach-tab 建独立窗口，并通过 detached-tabs-updated 广播分离状态；关闭独立窗口时 clearPressState() 清掉进度条状态，避免回滚动画卡住。
新增 AddFormWidget.vue 与 createFormWindow(type)，表单独立成窗；App.vue 按 hash（#/detached-tab?type=、#/form-window?type=）分发渲染不同窗口视图。
右键双击（DOUBLE_CLICK_DELAY = 300ms）调用 closeApp() 退出；所有窗口统一 setAlwaysOnTop(true, 'screen-saver', 1) + paintWhenInitiallyHidden + setVisibleOnAllWorkspaces，并在 style.css 用 transform: translateZ(0) 修透明窗口的重绘残影。

我的检查与验证说明
验证方式 具体做了什么 结果
运行样例 npm install → npm run electron:dev，真机把三个模块的增/删/改/查各走一遍 通过；CRUD 与浏览器打开、一键复制均正常
数据落盘审查 直接打开 macOS 路径 ~/Library/Application Support/coderpro/coderpro_data.json 看结构 三分类均为数组，字段与 normalizeData 预期一致
边界①非法文件 手动把 JSON 改成非法内容 / 删掉 tasks 字段 应用仍能启动，读取回退为空数组，不崩
边界②分页 造 7 条数据，删到最后一页最后一条 页码自动回退到上一页，不出现空白页
边界③输入 新增网址只写 github.com 自动补成 https://github.com
多窗口交叉验证 主面板勾任务完成，同时从表单窗口加网址，观察两个窗口 data-updated 广播生效，两边最终一致，不再回滚
生产模式验证 npm run build 后检查 dist 产物与 base: './' 相对路径 打包路径正确，避免 Electron loadFile 白屏
代码走查发现的差异 全局搜索 task-widget TaskWidget.vue 和 App.vue 的分支都在，但 main.js 没有创建任务悬浮窗的代码；README 写的"启动后出现任务悬浮窗"当前实际不会出现

上面最后一条是这次验证里唯一"文档说了但代码没做"的地方。我没有把它当成已实现功能写进说明，先记录为待办，避免描述和代码不一致。

心得
本次协作最大惊喜：多窗口数据一致性被"顺手"解决了。 我最初的提示词里完全没提"多个窗口同时写数据"这件事，是第 2 轮我自己复现出"任务状态回滚"才意识到问题的。我把现象描述清楚后，AI 不只是补了个补丁，而是把保存接口从"整包覆盖"重构成"按分类写入 + 全窗口广播"，从根上消掉了这类冲突——之后第 3 轮再加独立窗口、表单窗口时，新窗口天然就复用了这套同步机制，几乎零返工。这让我意识到：给 AI 讲清楚"现象 + 复现路径"，比讲清楚"我要怎么改"更有效。