# 工时统计系统

一个基于 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   | 构建工具                       |

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

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

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
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. 统计报表

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

## 数据结构

### 工时记录数据结构

```javascript
{
  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)
- 初始版本发布
- 实现所有核心功能