工时统计系统

一个基于 React 的现代化工时统计与管理系统，帮助团队高效追踪和管理工时记录。

功能特性

核心功能

• 📅 工时录入: 便捷的表单界面，支持选择日期、项目、任务类型和时长
• 📊 统计报表: 多维度的数据可视化，包括月度趋势图和项目占比环形图
• 📈 仪表板: 实时显示本周、本月和累计工时，以及记录总数
• 📋 记录查询: 完整的工时记录列表，支持筛选和分页
• 💾 数据持久化: 使用本地存储保存数据，无需后端支持
• 🎨 响应式设计: 完美适配各种屏幕尺寸

技术亮点

• 组件化架构: 使用 Material-UI 构建美观且一致的用户界面
• 状态管理: React Context API 实现全局状态共享
• 数据可视化: Recharts 提供强大的图表功能
• 表单验证: 完善的前端验证确保数据完整性
• 类型安全: 清晰的数据结构设计

技术栈

技术栈	版本	用途
React	^19.2.0	前端框架
React Router	^7.9.5	路由管理
Material-UI	^7.3.5	UI 组件库
Recharts	^2.13.0	图表库
Vite	^6.0.1	构建工具

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

应用将在 http://localhost:3000 自动打开。

构建生产版本

npm run build

预览生产版本

npm run preview -- --port 3000

项目结构

time-tracking-system/
├── src/
│   ├── components/          # 通用组件
│   │   └── AppLayout.jsx   # 应用布局组件
│   ├── context/            # React Context
│   │   └── TimesheetContext.jsx  # 工时记录上下文
│   ├── pages/              # 页面组件
│   │   ├── DashboardPage.jsx     # 仪表板
│   │   ├── TimesheetPage.jsx     # 工时录入
│   │   ├── RecordsPage.jsx       # 记录查询
│   │   └── ReportsPage.jsx       # 统计报表
│   ├── App.jsx             # 应用入口
│   ├── index.jsx           # React 渲染入口
│   └── index.css           # 全局样式
├── .gitignore              # Git 忽略文件
├── package.json            # 项目配置
└── vite.config.js          # Vite 配置

使用指南

1. 工时录入

1. 进入「工时录入」页面
2. 选择工作日期（默认为当天）
3. 选择项目（项目1/项目2/项目3）
4. 输入任务内容（详细描述工作内容）
5. 输入时长（0-24小时，支持0.5小时为单位）
6. 选择任务类型（开发/测试/文档/会议/其他）
7. 点击「保存记录」按钮完成录入

2. 仪表板

• 本周工时: 显示本周累计工时
• 本月工时: 显示本月累计工时
• 累计工时: 显示所有记录的累计工时
• 记录总数: 显示总记录条数
• 项目工时分布: 按项目分类的工时占比
• 最近记录: 显示最新的5条工时记录

3. 记录查询

• 显示所有工时记录的完整列表
• 支持分页查询（每页5/10/20条）
• 支持多选操作，可以批量删除记录
• 点击「查看详情」可以查看记录的完整信息
• 点击「删除」可以删除单条记录

4. 统计报表

• 月度趋势图: 按周显示不同项目的工时分布
• 项目占比环形图: 显示各项目的工时占比情况
• 支持按时间范围筛选数据（本周/上周/本月/上月/本季度/上季度）
• 支持生成不同类型的报表

数据结构

工时记录数据结构

{
  id: 'string',           // 唯一标识
  date: Date,             // 工作日期
  project: 'string',      // 项目名称
  task: 'string',         // 任务内容
  hours: 'number',        // 时长（小时）
  taskType: 'string',     // 任务类型
  createdAt: Date         // 创建时间
}

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

许可证

ISC

开发说明

表单验证规则

1. 日期：必填
2. 项目：必填
3. 任务内容：必填，不能为空
4. 时长：必填，必须是0-24之间的数字，支持0.5小时为单位
5. 任务类型：必填

数据持久化

• 使用 localStorage 保存工时记录
• 数据自动格式化：
  • date 和 createdAt 转换为 Date 对象
  • 确保数据的一致性和正确性

更新日志

v1.0.0 (2025-01-13)

• 初始版本发布
• 实现所有核心功能