SultanZhalifa/smart-warehouse

GitHub: SultanZhalifa/smart-warehouse

一个基于 React 的智能仓库管理系统前端原型,通过模拟目标检测实现生物危害识别,并提供库存管理、区域监控和数据分析功能。

Stars: 1 | Forks: 0

# 智能仓库
**面向现代仓库的 AI 驱动目标检测与库存管理系统** ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white) ![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) ![Chart.js](https://img.shields.io/badge/Chart.js-FF6384?style=for-the-badge&logo=chartdotjs&logoColor=white) ![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
## 目录 - [关于项目](#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 个仓库区域 - 在检测到潜在危险时发送警报 - 提供用于决策的分析图表 ## 截图 ### 登录页面 ![登录页面](https://static.pigsec.cn/wp-content/uploads/repos/2026/04/fc4dfa47f6120808.png) ### 仪表板 ![仪表板](https://static.pigsec.cn/wp-content/uploads/repos/2026/04/68535f52fd120811.png) ### 目标检测 ![目标检测](https://static.pigsec.cn/wp-content/uploads/repos/2026/04/ba9cfce280120813.png) ### 库存管理 ![库存管理](https://static.pigsec.cn/wp-content/uploads/repos/2026/04/ff35bacf8a120815.png) ### 警报中心 ![警报中心](https://static.pigsec.cn/wp-content/uploads/repos/2026/04/6ee77947ab120817.png) ### 分析与报告 ![分析与报告](https://static.pigsec.cn/wp-content/uploads/repos/2026/04/c17d6d070f120819.png) ### 区域管理 ![区域管理](https://static.pigsec.cn/wp-content/uploads/repos/2026/04/9c63bcefe3120820.png) ### 设置 ![设置](https://static.pigsec.cn/wp-content/uploads/repos/2026/04/771c8e9fba120822.png) ## 功能特性 | 功能 | 描述 | |---------|-------------| | **身份验证** | 基于角色的登录系统(管理员、经理、操作员)及路由保护 | | **仪表板** | 包含 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绕过, 目标检测, 网络应用, 自定义脚本, 视频监控, 计算机视觉, 软件工程