我用Claude Code实现了定制的一个工作日志工具

UpUpLiu
0 阅读4分钟

项目背景

在日常工作中，我们经常面临任务管理分散、日志记录不规范、时间统计困难等问题。市场上虽然存在众多项目管理工具，但往往功能过于复杂或者不够灵活。为了满足个人和小团队的高效工作记录需求，我开发了这款工作任务日志工具 (Work Log Tool)。

这个项目的一个独特之处在于：它完全基于 Claude Code（Anthropic 的 AI 编程助手）开发完成。从需求分析到架构设计，再到代码实现，整个开发过程都有 Claude Code 的深度参与。

项目地址：gitee.com/liu_de_huai…

核心功能

1. 任务管理

image.png

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

2. 工作日志

image.png

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

3. 标签系统

image.png

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

4. 数据导出

image.png

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

5. 灵活存储

image.png

  • 支持文件存储、SQLite、MySQL 三种存储方式
  • 存储层热切换，无需重启服务

技术架构

技术栈

层级技术
前端Vue 3 + Vite
后端Node.js + Express
存储可切换（File/SQLite/MySQL）
work-log-tool/
├── src/
│   ├── main.js              # Vue 应用入口
│   ├── App.vue              # 根组件（业务逻辑核心）
│   ├── style.css            # 全局样式
│   └── components/          # Vue 组件
│       ├── AppHeader.vue    # 应用头部
│       ├── TaskList.vue     # 任务列表
│       ├── LogView.vue      # 日志查看
│       └── ...              # 其他组件
├── storage/                 # 存储层（核心特色）
│   ├── storageFactory.cjs   # 存储工厂
│   ├── fileStorage.cjs      # JSON 文件存储
│   ├── sqliteStorage.cjs    # SQLite 存储
│   └── mysqlStorage.cjs    # MySQL 存储
├── config.cjs               # 存储配置
├── server.cjs               # Express 后端
└── vite.config.js           # Vite 配置

存储层架构设计

这是项目的核心亮点。通过工厂模式实现了存储层的可插拔架构：

// storageFactory.cjs 核心逻辑
const storageFactory = (type, config) => {
  switch (type) {
    case 'sqlite':
      return new SQLiteStorage(config);
    case 'mysql':
      return new MySQLStorage(config);
    default:
      return new FileStorage(config);
  }
};

这种设计的优势：

  1. 开闭原则：新增存储类型只需添加新的存储类，无需修改现有代码
  2. 热切换：通过 API /api/storage/switch 可动态切换存储方式
  3. 配置驱动：通过 config.cjs 或环境变量灵活配置

前端架构

前端采用 Vue 3 的 Composition API，所有业务逻辑集中在 App.vue 中。这种"大一统"的设计适合中小型项目，代码内聚性好，状态管理清晰。

组件采用平铺式结构，核心组件包括：

  • TaskCard.vue - 任务卡片
  • TaskModal.vue - 任务编辑
  • LogModal.vue - 日志编辑
  • ExportModal.vue - 导出功能
  • TagModal.vue - 标签管理

API 设计

后端提供清晰的 RESTful 接口：

接口方法说明
/api/dataGET/POST数据的获取与保存
/api/export/markdownGETMarkdown 导出
/api/tagsGET/POST/PUT/DELETE标签 CRUD
/api/storage/*GET/PUT存储管理

Claude Code 开发体验

使用 Claude Code 开发这个项目带来了独特的体验：

  1. 快速原型：通过自然语言描述需求，Claude Code 能快速生成基础代码框架
  2. 架构建议：在设计存储层时，Claude Code 建议使用工厂模式，提高了代码的可维护性
  3. 代码解释：对于不熟悉的领域（如 Express），Claude Code 提供了详细的实现方案
  4. 迭代优化：通过多轮对话不断完善功能，从简单的任务管理逐步扩展到支持多种存储方式

快速开始

# 克隆项目
git clone https://gitee.com/liu_de_huai/work-log-tool.git
cd work-log-tool

# 安装依赖
npm install

# 启动前端开发服务器
npm run dev

# 启动后端服务
npm start

总结

这个项目展示了如何利用 AI 编程助手快速构建一个完整的全栈应用。从 Vue 3 前端到 Express 后端，从文件存储到数据库存储，每一步都有 Claude Code 的参与。

这种开发模式特别适合：

  • 个人开发者快速验证想法
  • 小团队快速迭代产品
  • 学习新技术时获得即时指导

项目源码已开源，希望能为有类似需求的朋友提供参考。

avatar
文章
阅读
粉丝