MoliTodo 开发日志

项目实现步骤记录

第一阶段：项目初始化和架构设计

步骤 1: 项目配置

✅ 创建 package.json，配置 Electron 项目
✅ 设置开发依赖：electron, electron-builder
✅ 设置生产依赖：electron-store, node-schedule
✅ 配置构建脚本和 electron-builder 设置

步骤 2: 架构设计

✅ 创建 ARCHITECTURE.md，定义领域驱动设计架构
✅ 规划目录结构：domain, infrastructure, presentation, main
✅ 定义各层职责和模块划分

第二阶段：领域层实现

步骤 3: 核心实体

✅ 实现 Task 实体类 (src/domain/entities/task.js)
- 任务属性：id, content, completed, createdAt, reminderTime, updatedAt
- 业务方法：markAsCompleted, setReminder, updateContent 等
- 序列化方法：toJSON, fromJSON

步骤 4: 仓储接口

✅ 定义 TaskRepository 接口 (src/domain/repositories/task-repository.js)
- 抽象方法：findAll, findById, save, delete 等
- 查询方法：findIncomplete, findCompleted, findTasksToRemind

步骤 5: 领域服务

✅ 实现 TaskService (src/domain/services/task-service.js)
- 任务管理：创建、完成、删除、更新任务
- 查询服务：获取各种状态的任务列表
- 批量操作：批量完成、批量删除
✅ 实现 NotificationService (src/domain/services/notification-service.js)
- 系统通知：发送任务提醒、应用通知
- 提醒调度：使用 node-schedule 管理定时任务
- 通知管理：调度、取消、重新调度提醒

第三阶段：基础设施层实现

步骤 6: 数据持久化

✅ 实现 FileTaskRepository (src/infrastructure/persistence/file-task-repository.js)
- 继承 TaskRepository 接口
- 使用 electron-store 进行 JSON 文件存储
- 实现所有仓储方法
- 额外功能：数据导入导出、清空数据

第四阶段：主进程实现

步骤 7: 主进程架构

✅ 实现 MoliTodoApp 主类 (src/main/main.js)
- 应用初始化和生命周期管理
- 窗口管理：悬浮窗口、任务面板窗口
- 系统托盘集成（待完善）
- IPC 通信处理
- 服务集成：TaskService, NotificationService

第五阶段：表现层实现

步骤 8: 悬浮图标组件

✅ HTML 结构 (src/presentation/floating-icon/floating-icon.html)
- 默认图标、提醒状态图标
- 任务数量角标显示
✅ CSS 样式 (src/presentation/floating-icon/floating-icon.css)
- 悬浮效果、拖拽样式
- 动画效果：提醒闪烁、悬停反馈
- 响应式设计、无障碍支持
✅ JavaScript 逻辑 (src/presentation/floating-icon/floating-icon.js)
- 交互处理：点击、悬停、拖拽
- IPC 通信：与主进程数据交换
- 状态管理：角标更新、提醒状态

步骤 9: 任务面板组件

✅ HTML 结构 (src/presentation/task-panel/task-panel.html)
- 面板头部、快速添加区域
- 任务列表、空状态提示
- 提醒设置弹窗、统计信息
✅ CSS 样式 (src/presentation/task-panel/task-panel.css)
- 毛玻璃效果、现代化设计
- 任务项样式、交互动画
- 模态框样式、响应式布局
✅ JavaScript 逻辑 (src/presentation/task-panel/task-panel.js)
- 任务管理：添加、完成、删除、编辑
- 提醒设置：时间选择、快速选项
- 数据同步：与主进程实时通信
- UI 更新：任务渲染、统计显示

第六阶段：资源文件

步骤 10: 图标资源

✅ 应用图标 (src/presentation/assets/icons/app-icon.svg)
- SVG 格式，渐变设计
- 对勾图标，现代化风格
✅ 托盘图标 (src/presentation/assets/icons/tray-icon.svg)
- 简化版本，适配系统托盘
- 需要转换为 PNG 格式（待处理）

第七阶段：项目完善

步骤 11: 配置优化

✅ 修复主进程配置问题
✅ 优化窗口设置和安全配置
✅ 暂时禁用托盘功能（等待图标资源）

步骤 12: 文档完善

✅ 创建项目 README
✅ 记录开发步骤和架构说明
✅ 编写使用指南和开发文档

当前状态

✅ 已完成功能

核心架构：完整的 DDD 分层架构
任务管理：增删改查、状态管理
数据持久化：基于 electron-store 的文件存储
悬浮图标：可拖拽、显示角标、状态指示
任务面板：现代化 UI、完整交互
提醒系统：定时提醒、系统通知
IPC 通信：主进程与渲染进程数据同步

🚧 待完善功能

系统托盘：需要 PNG 格式图标
错误处理：完善异常处理机制
设置面板：用户配置选项
开机自启：系统启动时自动运行
性能优化：内存使用、响应速度

📋 下一步计划

创建 PNG 格式的托盘图标
完善错误处理和日志记录
添加设置面板和配置选项
实现开机自启动功能
进行全面测试和优化

最近更新

2025-07-25: 重大功能更新 - 完整时间跟踪系统

功能概述

实现了完整的任务时间跟踪系统，支持任务状态管理、时间计算、实时显示和数据持久化。

核心功能实现

1. 任务状态管理系统

三种状态: todo（待办）、doing（进行中）、completed（已完成）
状态转换逻辑:
- todo → doing: 开始任务，记录开始时间
- doing → todo: 暂停任务，累计已用时间
- doing → completed: 完成任务，记录完成时间
- todo → completed: 直接完成，不记录工作时间

2. 时间计算引擎

当前进行时长: Date.now() - startedAt（仅doing状态）
总工作时长: totalDuration + 当前进行时长
任务完成耗时: completedAt - startedAt + totalDuration

3. 智能时间格式化

// 标准格式: "2小时30分钟" / "30分钟" / "45秒"
formatDuration(milliseconds)

// 紧凑格式: "2h30m" / "30m" (用于悬浮面板)
formatDurationCompact(milliseconds)

UI 组件更新

TaskManager 页面增强

待办任务: 显示创建时间、提醒时间，[开始] [编辑] [删除] 操作
进行中任务: 实时显示"进行中 2小时30分钟"，[暂停] [完成] [编辑] 操作
已完成任务: 显示"用时 1小时15分钟" + 完成时间，[重新开始] [删除] 操作

TaskPanel 悬浮面板优化

进行中任务: 显示紧凑格式"进行中 30m"（每30秒更新）
简洁设计: 保持悬浮面板的简洁性，不显示详细时间信息

实时更新机制

TaskManager: 每分钟更新进行中任务时长显示
TaskPanel: 每30秒更新进行中任务时长显示
定时器管理: 使用 setInterval 实现，组件销毁时自动清理

数据持久化增强

存储结构扩展

{
  "tasks": {
    "taskId1": {
      "id": "taskId1",
      "content": "任务内容",
      "status": "doing",
      "completed": false,
      "createdAt": "2025-07-23T15:38:09.273Z",
      "startedAt": "2025-07-24T09:15:00.000Z",
      "completedAt": null,
      "reminderTime": null,
      "updatedAt": "2025-07-24T09:15:00.000Z",
      "totalDuration": 1800000
    }
  }
}

数据迁移策略

为现有任务添加默认值: startedAt: null, completedAt: null, status: 'todo', totalDuration: 0
保持向后兼容性，优雅处理缺失字段
提供数据修复工具处理异常时间数据

文件修改清单

src/domain/entities/task.js - 任务实体增加时间跟踪属性和方法
src/domain/services/task-service.js - 任务服务增加状态管理逻辑
src/infrastructure/persistence/sqlite-task-repository.js - 数据持久化支持新字段
src/application/services/task-application-service.js - 应用服务层时间跟踪逻辑
src/presentation/task-manager/task-manager.js - 任务管理器UI和交互逻辑
src/presentation/task-manager/task-manager.css - 时间跟踪相关样式
src/presentation/task-panel/task-panel.js - 悬浮面板时间显示逻辑
src/presentation/task-panel/task-panel.css - 悬浮面板时间显示样式
src/main/main.js - 主进程IPC通信支持

技术亮点

完整的状态机: 清晰的任务状态转换逻辑
精确时间计算: 支持暂停/继续的累计时间统计
实时UI更新: 不同组件的差异化更新频率
数据向后兼容: 平滑的数据迁移和错误处理
用户体验优化: 直观的时间显示和操作反馈

用户价值

时间管理: 精确跟踪任务耗时，提升工作效率
数据洞察: 了解任务完成时间分布，优化时间分配
工作习惯: 通过时间跟踪培养专注工作的习惯
项目管理: 为项目时间估算提供历史数据支持

架构快速参考

数据流概览

Vue Components → Pinia Store → electronAPI → IPC Handlers → Domain Services → SQLite Repository → Database

关键文件映射

前端状态: src/renderer/src/store/taskStore.js
IPC 通信: src/main/preload.js + src/main/ipc-handlers.js
业务逻辑: src/domain/services/task-service.js
数据持久化: src/infrastructure/persistence/sqlite-task-repository.js

主要 API 调用链

// 创建任务示例
taskStore.createTask(data)
  → window.electronAPI.tasks.create(data)
  → ipcMain.handle('create-task')
  → taskService.createTask()
  → taskRepository.save()
  → SQLite INSERT

详细架构说明请参考 ARCHITECTURE.md

技术亮点

领域驱动设计：清晰的分层架构，易于维护和扩展
现代化 UI：毛玻璃效果、流畅动画、响应式设计
完整的业务逻辑：任务管理、提醒系统、数据持久化
良好的用户体验：悬浮操作、快捷功能、实时反馈
可扩展架构：模块化设计，便于添加新功能
安全的 IPC 通信：使用 contextBridge 确保渲染进程安全
实时数据同步：多窗口数据一致性保证

FilesExpand file tree

development-log.md

Latest commit

History

development-log.md

File metadata and controls

MoliTodo 开发日志

项目实现步骤记录

第一阶段：项目初始化和架构设计

步骤 1: 项目配置

步骤 2: 架构设计

第二阶段：领域层实现

步骤 3: 核心实体

步骤 4: 仓储接口

步骤 5: 领域服务

第三阶段：基础设施层实现

步骤 6: 数据持久化

第四阶段：主进程实现

步骤 7: 主进程架构

第五阶段：表现层实现

步骤 8: 悬浮图标组件

步骤 9: 任务面板组件

第六阶段：资源文件

步骤 10: 图标资源

第七阶段：项目完善

步骤 11: 配置优化

步骤 12: 文档完善

当前状态

✅ 已完成功能

🚧 待完善功能

📋 下一步计划

最近更新

2025-07-25: 重大功能更新 - 完整时间跟踪系统

功能概述

核心功能实现

UI 组件更新

实时更新机制

数据持久化增强

文件修改清单

技术亮点

用户价值

架构快速参考

数据流概览

关键文件映射

主要 API 调用链

技术亮点