AtomCode 实战使用 AI 编程助手从零开发习惯打卡工具本文以实际项目代码为依据介绍如何借助 AtomCode 生成并完善一个习惯打卡应用。项目使用 Vue 3 和 Vite习惯数据保存在浏览器localStorage中不包含后端服务或账号同步。https://atomgit.com/gcw_haCxsCKx/habit-tracker.git一、项目效果与功能习惯打卡工具把日常目标整理成可管理的列表。用户可以创建、编辑和删除习惯记录当天是否完成并查看今日进度、连续打卡天数和累计打卡次数。列表支持按完成状态筛选也可以搜索习惯名称和备注。项目的主要交互包括新增/编辑表单、打卡按钮、列表筛选和删除确认。删除时会展示确认对话框没有习惯数据时提供创建入口搜索或筛选没有匹配项时显示单独的无结果提示。二、使用 AtomCode 创建项目在 AtomCode 中打开一个空项目目录提交本项目对应的需求提示。提示应先说明技术栈和运行方式再描述首页、习惯字段、增删改、每日打卡、搜索筛选、表单校验、本地持久化和窄屏布局。让工具先分析并规划结构再生成代码最后安装依赖并执行构建。代码生成后不应只根据提示词判断功能是否完成。还需要检查实际文件和交互需求中写了什么不代表项目一定实现了什么。本文后面的实现说明以仓库源代码和本次构建命令为准。三、技术栈与项目结构项目依赖 Vue 3、Vite 和vitejs/plugin-vue页面样式使用原生 CSS没有引入额外 UI 框架。应用从src/main.js挂载src/App.vue根组件组合统计、筛选、列表、表单、空状态和确认对话框。src/ ├── App.vue ├── main.js ├── style.css ├── components/ │ ├── ConfirmDialog.vue │ ├── EmptyState.vue │ ├── HabitFilter.vue │ ├── HabitForm.vue │ ├── HabitItem.vue │ ├── HabitList.vue │ └── HabitStats.vue ├── store/useHabits.js └── utils/date.jssrc/store/useHabits.js管理习惯响应式数据、派生统计、筛选搜索与数据操作src/utils/date.js统一生成和处理本地日期键src/style.css定义整体布局、表单、弹窗和移动断点样式。拆分组件后App.vue负责连接子组件事件与数据操作具体展示和表单逻辑留在各自组件中。四、习惯新增、编辑与删除HabitForm.vue根据传入的习惯对象区分新增和编辑模式。表单字段为名称、分类、目标频率和备注保存时把数据提交给App.vue再由useHabits()中的saveHabit()创建新记录或更新已有记录。名称会去除首尾空格必填且最多 50 个字符分类和备注分别限制为 20 和 200 个字符。删除按钮不会立即移除记录。App.vue先保存待删除习惯并打开ConfirmDialog.vue确认后才调用deleteHabit()。取消或点击遮罩层则关闭确认框不执行删除。五、每日打卡与统计每条习惯记录包含checkedDates其中保存已完成打卡的日期字符串。点击习惯项的打卡按钮会调用toggleCheck()把今天的日期加入或移出该数组因此可以打卡也可以撤销当天打卡。todayProgress统计全部习惯中的今日完成数和完成百分比overallTotal汇总所有习惯的累计打卡次数。每条习惯的连续天数由calcStreak()计算如果今天已经完成则从今天往前连续检查如果今天尚未完成则从昨天开始直到遇到未打卡日期为止。日期键按浏览器本地时区生成为YYYY-MM-DD。六、搜索、筛选与空状态HabitFilter.vue提供关键词输入和“全部 / 已完成 / 未完成”筛选。useHabits()使用计算属性生成可见列表名称和备注会进行不区分大小写的包含匹配筛选与搜索组合生效不会删除或改写原始习惯。EmptyState.vue根据状态展示两种提示尚无习惯时提供新增入口已有习惯但搜索或筛选没有匹配项时提示调整关键词或筛选状态。七、本地数据保存习惯数据存储在浏览器localStorage的habit-tracker:data键中。应用启动时由loadInitial()尝试读取并解析数组新增、编辑、删除和打卡操作完成后persist()会把当前数组序列化保存。关闭或刷新页面后数据仍保留在当前浏览器的本地存储中。这是一种纯前端持久化方式数据不会自动同步到其他浏览器或设备也没有用户账户或服务端备份。清除浏览器站点数据会删除这些本地记录。八、本地运行与构建验证在包含package.json的项目目录打开终端执行npmcinpmrun dev开发服务器启动后使用终端打印的本地地址打开浏览器。若默认端口被占用Vite 会选择其他可用端口。生产构建命令为npmrun build本次在项目目录安装锁文件依赖后生产构建使用 Vite 5.4.21 成功完成共转换 19 个模块。构建产物dist/index.html为 0.57 kBCSS 为 9.44 kBgzip 2.54 kBJavaScript 为 81.06 kBgzip 32.18 kB构建输出未显示警告。九、限制与待验证事项本次构建证明项目能够打包但没有对所有交互执行自动化或手工浏览器测试因此上文涉及的交互截图均需按标注实际操作后采集。CSS 中存在窄屏媒体查询说明布局考虑了移动尺寸但实际设备显示仍应手工检查。代码中分类超长时validate()会阻止表单提交并设置errors.category但模板没有渲染这个错误字段用户因此看不到分类长度错误提示。项目也没有后端同步、账号体系或跨设备数据备份。依赖审计发现 2 项漏洞1 项 moderate、1 项 high涉及 Vite/esbuild 依赖链建议的强制修复会升级到 Vite 8 并可能造成不兼容本次没有执行npm audit fix --force。