166 lines
4.7 KiB
Markdown
166 lines
4.7 KiB
Markdown
# 工时统计系统
|
||
|
||
一个基于 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)
|
||
- 初始版本发布
|
||
- 实现所有核心功能 |