在日常工作中,我们经常面临任务管理分散、日志记录不规范、时间统计困难等问题。市场上虽然存在众多项目管理工具,但往往功能过于复杂或者不够灵活。为了满足个人和小团队的高效工作记录需求,我开发了这款工作任务日志工具 (Work Log Tool)。
这个项目的一个独特之处在于:它完全基于 Claude Code(Anthropic 的 AI 编程助手)开发完成。从需求分析到架构设计,再到代码实现,整个开发过程都有 Claude Code 的深度参与。
项目地址:gitee.com/liu_de_huai…

- 任务状态流转:支持 TODO(待处理)、DOING(进行中)、DONE(已完成)三种状态
- 任务详情:标题、地址、标签、预计时长、内容描述、开始/结束时间
- 任务事项:支持为每个任务添加多个子事项

- 多维度日志记录:按任务、标签、时间(日/周/月/年)多维度查看
- 时间统计:自动计算耗时,支持分钟/小时/天单位
- 日志合并:支持多选日志合并导出

- 自定义标签创建与管理
- 任务与标签的多对多关联

- 支持 Markdown 格式导出
- 灵活的筛选条件:按状态、标签、时间范围

- 支持文件存储、SQLite、MySQL 三种存储方式
- 存储层热切换,无需重启服务
这是项目的核心亮点。通过工厂模式实现了存储层的可插拔架构:
GPT plus 代充 只需 145
这种设计的优势:
- 开闭原则:新增存储类型只需添加新的存储类,无需修改现有代码
- 热切换:通过 API 可动态切换存储方式
- 配置驱动:通过 或环境变量灵活配置
前端采用 Vue 3 的 Composition API,所有业务逻辑集中在 中。这种"大一统"的设计适合中小型项目,代码内聚性好,状态管理清晰。
组件采用平铺式结构,核心组件包括:
- - 任务卡片
- - 任务编辑
- - 日志编辑
- - 导出功能
- - 标签管理
后端提供清晰的 RESTful 接口:
使用 Claude Code 开发这个项目带来了独特的体验:
- 快速原型:通过自然语言描述需求,Claude Code 能快速生成基础代码框架
- 架构建议:在设计存储层时,Claude Code 建议使用工厂模式,提高了代码的可维护性
- 代码解释:对于不熟悉的领域(如 Express),Claude Code 提供了详细的实现方案
- 迭代优化:通过多轮对话不断完善功能,从简单的任务管理逐步扩展到支持多种存储方式
- 开发模式访问:http://localhost:5173
- 后端服务访问:http://localhost:3000
这个项目展示了如何利用 AI 编程助手快速构建一个完整的全栈应用。从 Vue 3 前端到 Express 后端,从文件存储到数据库存储,每一步都有 Claude Code 的参与。
这种开发模式特别适合:
- 个人开发者快速验证想法
- 小团队快速迭代产品
- 学习新技术时获得即时指导
项目源码已开源,希望能为有类似需求的朋友提供参考。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/237888.html