Initial commit: Complete工时统计系统 implementation
This commit is contained in:
166
README.md
Normal file
166
README.md
Normal file
@@ -0,0 +1,166 @@
|
||||
# 工时统计系统
|
||||
|
||||
一个基于 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)
|
||||
- 初始版本发布
|
||||
- 实现所有核心功能
|
||||
Reference in New Issue
Block a user