SultanZhalifa/smart-warehouse
GitHub: SultanZhalifa/smart-warehouse
一个基于 React 的智能仓库管理系统前端原型,通过模拟目标检测实现生物危害识别,并提供库存管理、区域监控和数据分析功能。
Stars: 1 | Forks: 0
# 智能仓库
**面向现代仓库的 AI 驱动目标检测与库存管理系统**




## 目录
- [关于项目](#about-the-project)
- [功能特性](#features)
- [技术栈](#tech-stack)
- [团队成员与角色](#team-members-and-roles)
- [产品待办列表](#product-backlogs)
- [Sprint 文档](#sprint-documentation)
- [入门指南](#getting-started)
- [项目结构](#project-structure)
- [Scrum 方法论](#scrum-methodology)
## 关于项目
智能仓库是一个基于 Web 的系统,旨在使用模拟目标检测来探测仓库环境中的生物危害和害虫。该系统侧重于通过识别潜在的有害动物并防止污染来提高安全性。
除了检测功能外,该系统还包括仓库监控功能,例如库存跟踪、区域管理和分析,以支持运营效率。
本项目是作为 President University 软件工程课程的一部分,使用 Scrum 方法论开发的。
## 检测工作流程
1. 摄像头捕获实时镜头(模拟)
2. 系统处理图像
3. 目标检测识别潜在害虫(蛇、猫、壁虎)
4. 系统对风险级别进行分类
5. 向仓库工作人员触发警报
6. 存储数据以供监控和分析
### 本项目的作用
- 使用边界框模拟对有害动物的实时检测
- 帮助识别仓库环境中潜在的生物危害
- 允许用户通过搜索和过滤管理库存物品
- 通过可视化平面图监控 6 个仓库区域
- 在检测到潜在危险时发送警报
- 提供用于决策的分析图表
## 截图
### 登录页面

### 仪表板

### 目标检测

### 库存管理

### 警报中心

### 分析与报告

### 区域管理

### 设置

## 功能特性
| 功能 | 描述 |
|---------|-------------|
| **身份验证** | 基于角色的登录系统(管理员、经理、操作员)及路由保护 |
| **仪表板** | 包含 KPI 卡片、摄像头源、活动流和系统健康状况的概览页 |
| **目标检测** | 基于 Canvas 的模拟,带有动画边界框和检测日志 |
| **库存** | 完整的 CRUD 操作、搜索、类别/区域过滤、可排序表格、CSV 导出 |
| **警报中心** | 基于严重程度的过滤(危急/警告/信息)、已读/未读状态 |
| **数据分析** | 使用 Chart.js 提供 5 种图表类型 —— 折线图、柱状图、环形图等 |
| **区域管理** | 交互式平面图,包含每个区域的利用率跟踪 |
| **活动日志** | 带有基于类型的过滤器和时间线视图的审计跟踪,可导出为 CSV |
| **设置** | 个人资料编辑、通知偏好设置、主题自定义、安全设置 |
| **深色 UI 主题** | 带有毛玻璃效果和霓虹色彩的自定义深色主题 |
## 技术栈
| 层级 | 技术 | 用途 |
|-------|-----------|---------|
| **构建工具** | Vite 8.x | 开发服务器和打包 |
| **前端** | React 19 | 基于组件的 UI |
| **样式** | Vanilla CSS | 使用 CSS 变量的自定义设计系统 |
| **图表** | Chart.js + react-chartjs-2 | 数据可视化 |
| **图标** | Lucide React | 图标系统 |
| **路由** | React Router v6 | 带有身份验证守卫的客户端路由 |
| **状态** | Context API + useReducer | 全局状态管理 |
| **画布** | HTML5 Canvas API | 目标检测模拟 |
## 团队成员与角色
| Scrum 角色 | 姓名 | 学号 | 职责 |
|------------|------|------------|-----------------|
| **产品负责人** | Risly Maria Theresia Worung | 001202400069 | 管理产品愿景、待办事项优先级划分、Sprint 验收 |
| **Scrum 主管** | Sultan Zhalifunnas Musyaffa | 001202400200 | 促进会议仪式、扫除障碍、确保流程合规 |
| **开发者** | Misha Andalusia | 001202400040 | 前端开发、UI/UX、数据导出功能 |
| **开发者** | Fathir Barhouti Awlya | 001202400054 | 状态管理、检测系统、实时通知 |
## 产品待办列表
| # | 待办事项 | 优先级 | 故事点 | 用户故事 |
|---|-------------|----------|-------------|------------|
| 1 | 仪表板概览 | 高 | 8 | 作为经理,我想要一个实时仪表板来一览无余地监控运营情况 |
| 2 | 目标检测界面 | 高 | 13 | 作为操作员,我想看到带有边界框的检测目标 |
| 3 | 库存管理 | 高 | 8 | 作为工作人员,我想管理库存物品以跟踪库存水平 |
| 4 | 实时警报系统 | 中 | 5 | 作为经理,我想在检测到异常物体时收到警报 |
| 5 | 分析和报告 | 中 | 8 | 作为经理,我希望获得用于数据驱动决策的分析 |
| 6 | 区域管理 | 中 | 8 | 作为规划人员,我想定义用于位置跟踪的区域 |
| 7 | 用户身份验证 | 低 | 5 | 作为管理员,我想要基于角色的访问控制 |
| 8 | 活动日志与审计跟踪 | 低 | 5 | 作为审计员,我想审查所有的系统活动 |
**总故事点数:** 60
## Sprint 文档
### Sprint 1 (第 1 周) -- 基础与核心
- **目标:** 建立项目架构、设计系统、身份验证以及全部 8 个页面
- **承诺:** 21 点 | **交付:** 60 点
- **速度:** 285%
- **报告:** [SPRINT_1_REPORT.md](./docs/SPRINT_1_REPORT.md)
- **回顾:** [SPRINT_RETROSPECTIVE.md](./docs/SPRINT_RETROSPECTIVE.md)
### Sprint 2 (第 2 周) -- 增强
- **目标:** 设置页面、导出系统、实时通知、RBAC、高级过滤器
- **承诺:** 23 点 | **交付:** 23 点
- **报告:** [SPRINT_2_REPORT.md](./SPRINT_2_REPORT.md)
- **回顾:** [SPRINT_2_RETROSPECTIVE.md](./docs/SPRINT_2_RETROSPECTIVE.md)
### 其他文档
- [每日站会记录](./docs/DAILY_STANDUP_LOG.md) -- 全部 8 天的站会笔记
- [Sprint 评审笔记](./docs/SPRINT_REVIEW_NOTES.md) -- 来自两次 Sprint 评审的会议记录
- [产品待办列表](./docs/PRODUCT_BACKLOG.md) -- 包含用户故事的全部 8 个待办事项
- [架构概览](./docs/ARCHITECTURE.md) -- 系统设计、状态管理、路由、用例图
- [燃尽图](./docs/BURNDOWN_CHART.md) -- 带有速度数据的 Sprint 进度跟踪
## 入门指南
### 前置条件
- Node.js 18 或更新版本
- npm 或 yarn
### 安装
```
# Clone 仓库
git clone https://github.com/SultanZhalifa/smart-warehouse.git
# 前往项目文件夹
cd smart-warehouse
# 安装依赖
npm install
# 启动 dev server
npm run dev
```
然后在浏览器中打开 **http://localhost:5173**。
### 演示凭据
| 用户 | 电子邮件 | 角色 | 密码 |
|------|-------|------|----------|
| Risly | risly@warehouse.io | 管理员 | admin123 |
| Misha | misha@warehouse.io | 经理 | admin123 |
| Fathir | fathir@warehouse.io | 操作员 | admin123 |
| Sultan | sultan@warehouse.io | 管理员 | admin123 |
## 项目结构
```
smart-warehouse/
├── src/
│ ├── components/
│ │ ├── common/ # Shared components (Toast, LiveEventSimulator)
│ │ └── layout/ # Sidebar, Header, Layout
│ ├── context/ # AuthContext, WarehouseContext
│ ├── data/ # Mock data
│ ├── pages/ # All 9 page components
│ ├── utils/ # Export utilities
│ ├── index.css # Design system
│ ├── App.jsx # Root + routing
│ └── main.jsx # Entry point
├── docs/ # Scrum documentation
├── SPRINT_2_REPORT.md
└── README.md
```
## Scrum 方法论
### 完成定义
- 功能已实现并正常运行
- 代码遵循项目规范
- UI 符合设计系统
- 功能已经过人工测试,无控制台错误
- 代码已提交并附带清晰的提交信息
- 已由至少一名团队成员审查
### Sprint 会议仪式
| 会议仪式 | 频率 | 时长 | 主持人 |
|----------|-----------|----------|-------------|
| Sprint 计划会 | Sprint 开始时 | 1 小时 | Scrum 主管 |
| 每日站会 | 每天 | 15 分钟 | Scrum 主管 |
| Sprint 评审会 | Sprint 结束时 | 30 分钟 | 产品负责人 |
| Sprint 回顾会 | Sprint 结束时 | 30 分钟 | Scrum 主管 |
**由 Group 5 构建 -- President University**
Risly - Misha - Fathir - Sultan
标签:Chart.js, CSS3, React, Scrum, Syscalls, Vite, 人工智能, 代码示例, 区域管理, 安全教育, 实时警报系统, 库存管理系统, 敏捷开发, 数据分析, 数据管道, 智慧仓储, 智能监控, 有害生物检测, 物联网, 现代仓库, 生物危害防护, 用户模式Hook绕过, 目标检测, 网络应用, 自定义脚本, 视频监控, 计算机视觉, 软件工程