# inventory **Repository Path**: Bob_Zhou/inventory ## Basic Information - **Project Name**: inventory - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: 64003周天赐 - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-01-30 - **Last Updated**: 2026-01-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 🏢 多租户库存管理系统 (Multi-Tenant Inventory Management System)
**一款面向企业级的SaaS库存管理平台** [![Spring Boot](https://img.shields.io/badge/Spring%20Boot-3.2.0-brightgreen.svg)](https://spring.io/projects/spring-boot) [![Vue](https://img.shields.io/badge/Vue-3.4.0-4FC08D.svg)](https://vuejs.org/) [![Element Plus](https://img.shields.io/badge/Element%20Plus-2.5.0-409EFF.svg)](https://element-plus.org/) [![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
--- ## 📖 项目简介 这是一款基于 **Spring Boot 3 + Vue 3** 构建的现代化多租户SaaS库存管理系统，专为中小企业提供专业的库存管理解决方案。系统采用前后端分离架构，支持多租户隔离、细粒度权限控制、实时数据统计与可视化分析。 ### 🎯 适用场景 - 🏭 **制造企业**：原材料与成品库存管理 - 🛒 **电商企业**：多仓库、多品类商品管理 - 🏪 **零售连锁**：多门店库存协同管理 - 📦 **物流仓储**：第三方仓储管理服务 --- ## ✨ 核心亮点 ### 🌐 1. 多租户SaaS架构 - ✅ **租户完全隔离**：数据库级隔离，确保数据安全 - ✅ **租户自助注册**：系统管理员审批机制 - ✅ **独立数据空间**：每个租户拥有独立的用户、商品、仓库数据 - ✅ **弹性扩展**：支持无限租户接入 > **截图位置 1**：系统管理员 - 租户管理页面（展示租户列表、审批流程） > ![img.png](img.png) > ![img_1.png](img_1.png) ### 🔐 2. 精细化权限体系 系统内置三种核心角色： | 角色 | 权限范围 | 核心功能 | |------|----------|----------| | **系统管理员** | 全局管理 | 租户审批、系统监控、数据统计 | | **租户管理员** | 租户级管理 | 员工管理、仓库配置、月结审批 | | **仓库管理员** | 操作级管理 | 出入库操作、库存查询、数据录入 | - 基于 Spring Security + JWT 的认证授权 - 支持细粒度的资源权限控制（`@PreAuthorize`） - 前端路由守卫 + 动态菜单生成 > **截图位置 2**：角色权限矩阵图、员工管理页面 > ![img_2.png](img_2.png) ### 🎨 3. 现代化UI设计 #### 🔹 B2B风格登录页 - 左右分屏设计（60% 宣传区 + 40% 登录区） - 高清背景图 + 半透明遮罩 - 演示账号一键填充 - 输入框聚焦动画 > **截图位置 3**：登录页面（展示左右分屏、logo、演示账号区域） > ![img_4.png](img_4.png) #### 🔹 数据驾驶舱式Dashboard **系统管理员视角**： - 4个KPI卡片（待审批租户、总租户数、本月新增、系统状态） - 租户增长趋势图（ECharts折线图，来自真实数据库） - 待审批租户列表 - 快捷操作入口 **租户管理员视角**： - 业务数据概览（商品总数、仓库数、出入库金额） - 渐变图标 + 趋势指示器（环比增长） - 近7天趋势图 + 月度金额对比图 - 6个快捷操作按钮（新建入库/出库、库存查询、库存预警、商品管理、仓库管理） > **截图位置 4**：系统管理员Dashboard > **截图位置 5**：租户管理员Dashboard（展示KPI卡片、图表、快捷操作） > ![img_5.png](img_5.png) ### 📊 4. 专业级报表系统 #### 📅 日报表 - **顶部汇总卡片**：累计入库金额、累计出库金额、累计数量、资金净流入 - **趋势图表**：可切换"金额趋势"/"单据量趋势"，平滑曲线图 + 渐变填充 - **明细表格**：入库/出库分组，视觉色彩区分（蓝色/橙色背景） - **业务状况标签**：自动判断（无业务/进货为主/出货为主/均衡） > **截图位置 6**：日报表（展示汇总卡片、趋势图、色彩分组表格） > ![img_6.png](img_6.png) #### 📆 月报表 - **净结余卡片**：出库-入库，显示盈余/亏损 - **堆叠柱状图**：可切换"堆叠"/"并排"模式 - **环比增长列**：自动计算与上月对比百分比 - **千分位格式化**：等宽字体（Monospace）确保数字对齐 - **打印样式优化**：一键打印报表 > **截图位置 7**：月报表（展示净结余、堆叠柱状图、环比增长） > ![img_7.png](img_7.png) ### 🔒 5. 严谨的月结管理 这是系统最具**仪式感**和**安全性**的功能模块！ #### 特色设计： 1. **状态指示器**：大型圆形图标（未结账：橙色 | 已结账：绿色） 2. **实时预览**：选择月份后自动显示入库/出库单数、金额、待锁定数据 3. **三步确认流程**： - **步骤1**：系统自检（自动检查待审核单据、数据完整性、重复月结） - **步骤2**：数据确认（展示月度盈亏概览） - **步骤3**：手动输入"确认月结"四个字才能提交 4. **时间轴历史记录**：使用 `el-timeline` 展示已结账月份，带"已锁定"标签 #### 安全机制： - ✅ 防止重复月结（数据库唯一约束） - ✅ 顺序验证（不能跳过中间月份） - ✅ 待审核单据拦截 - ✅ 文本验证（必须输入"确认月结"） - ✅ 对话框防误关（不可通过遮罩或ESC关闭） > **截图位置 8**：月结管理页面（展示状态指示器、预览数据） > ![img_8.png](img_8.png) > **截图位置 9**：三步确认对话框（展示系统自检、数据确认、手动输入） > ![img_9.png](img_9.png) > ![img_10.png](img_10.png) > ![img_11.png](img_11.png) ### 🎯 6. 电商级商品管理 - **商品缩略图**：60x60px圆角，点击查看大图 - **分类标签**：不同分类使用不同颜色的 `el-tag` - **价格展示**：销售价加粗红色，成本价可隐藏（眼睛图标） - **库存预警**：总库存 < 10 时红色文字 + 脉动图标 - **库存进度条**：可视化库存充足度 - **行内编辑**：双击销售价可直接修改 > **截图位置 10**：商品管理页面（展示商品图片、价格、库存预警） > ![img_12.png](img_12.png) ### 🏢 7. 可视化仓库管理 - **仓库名称**：图标 + 加粗名称 + 灰色仓库代码 - **地址显示**：定位图标 + Tooltip悬停显示完整地址 - **负责人头像**：使用 `el-avatar` 显示首字母 + 渐变背景 - **库存摘要**：显示"X 品类 / Y 件"，渐变背景卡片 - **状态徽章**：运营中（绿色脉动点）| 已停用（灰色点） > **截图位置 11**：仓库管理页面（展示图标、头像、库存摘要、状态徽章） > ![img_13.png](img_13.png) ### 📦 8. 智能库存查询 #### 库存明细视图 - **商品图片**：点击查看大图 - **实时库存预警**：充足（绿色）| 预警（橙色 + 图标动画）| 危险（红色 + 图标动画） - **仓库信息**：图标 + Tooltip显示地址 #### 库存汇总视图 - **仓库分布**：使用 `el-progress` 可视化各仓库库存占比 - **多维筛选**：仓库筛选 + 库存状态筛选 > **截图位置 12**：库存查询页面（展示库存预警、仓库分布进度条） ### 📋 9. 专业出入库管理 - **状态时间轴**：使用 `el-steps` 可视化单据流程（草稿 -> 已确认） - **详情对话框**：使用 `el-descriptions` 展示订单信息，`el-timeline` 展示状态历史 - **操作按钮组**：查看 | 确认 | 删除（带图标和Tooltip） - **高级筛选**：单号/供应商搜索 + 状态筛选 + 日期范围 > **截图位置 13**：入库管理页面（展示状态时间轴、详情对话框） > ![img_14.png](img_14.png) ### 👥 10. 精致员工管理 - **员工展示**：头像（首字母渐变背景）+ 姓名（加粗）+ 用户名（灰色） - **联系方式**：图标化展示邮箱和手机号 + Tooltip - **角色标签**：不同角色不同颜色 + 图标 - **状态徽章**：激活（绿色脉动点）| 禁用（灰色点） - **当前账号标识**：旋转星星图标 - **圆形图标按钮**：编辑 | 重置密码 | 删除（带Hover动画） > **截图位置 14**：员工管理页面（展示头像、角色标签、状态徽章） > ![img_15.png](img_15.png) ### 🎛️ 11. 系统亮点功能 #### 租户数据查看 - 系统管理员可以"切换视角"查看任意租户的数据 - 顶部显示醒目的蓝色横幅："您正在查看 [租户名称] 的数据" - 一键退出查看模式 #### 面包屑导航 - 全局顶部面包屑导航（首页 / XX管理 / XX页面） #### 用户头像下拉菜单 - 显示用户名、角色 - 个人中心 | 系统设置 | 退出登录 --- ## 🛠️ 技术栈 ### 后端技术 | 技术 | 版本 | 说明 | |------|------|------| | Spring Boot | 3.2.0 | 核心框架 | | Spring Security | 6.x | 安全认证 | | Spring Data JPA | 3.2.0 | ORM框架 | | SQLite | 3.x | 嵌入式数据库（易部署） | | JWT | 0.12.x | 无状态Token认证 | | Lombok | 1.18.x | 简化代码 | | Validation API | - | 参数校验 | ### 前端技术 | 技术 | 版本 | 说明 | |------|------|------| | Vue 3 | 3.4.0 | 渐进式框架 | | Vite | 5.x | 构建工具 | | Element Plus | 2.5.0 | UI组件库 | | Vue Router | 4.x | 路由管理 | | Pinia | 2.x | 状态管理 | | Axios | 1.x | HTTP客户端 | | ECharts | 5.x | 数据可视化 | | SCSS | - | CSS预处理器 | --- ## 📂 项目结构 ``` multi-tenant-inventory/ ├── backend/ # 后端 Spring Boot 项目 │ ├── src/main/java/com/inventory/ │ │ ├── common/ # 公共模块 │ │ │ ├── config/ # 配置类（Security、CORS等） │ │ │ ├── context/ # 上下文（TenantContext、UserContext） │ │ │ ├── dto/ # 通用DTO │ │ │ ├── entity/ # 基础实体类 │ │ │ ├── exception/ # 异常处理 │ │ │ └── filter/ # 过滤器（JWT、租户等） │ │ ├── controller/ # 控制器层 │ │ ├── dto/ # 数据传输对象 │ │ ├── entity/ # 实体类 │ │ ├── repository/ # 数据访问层 │ │ ├── service/ # 业务逻辑层 │ │ └── util/ # 工具类 │ ├── src/main/resources/ │ │ ├── schema.sql # 数据库结构 │ │ ├── data.sql # 初始数据（含测试租户） │ │ └── application.yml # 配置文件 │ └── pom.xml # Maven依赖 │ ├── frontend/ # 前端 Vue 3 项目 │ ├── src/ │ │ ├── api/ # API接口封装 │ │ ├── assets/ # 静态资源 │ │ ├── components/ # 公共组件 │ │ ├── layouts/ # 布局组件 │ │ ├── router/ # 路由配置 │ │ ├── stores/ # Pinia状态管理 │ │ ├── utils/ # 工具函数 │ │ ├── views/ # 页面组件 │ │ │ ├── Dashboard.vue # 首页仪表盘 │ │ │ ├── Login.vue # 登录页 │ │ │ ├── inventory/ # 库存模块 │ │ │ ├── monthly/ # 月结管理 │ │ │ ├── order/ # 出入库管理 │ │ │ ├── product/ # 商品管理 │ │ │ ├── report/ # 报表管理 │ │ │ ├── system/ # 系统管理 │ │ │ └── warehouse/ # 仓库管理 │ │ ├── App.vue # 根组件 │ │ └── main.js # 入口文件 │ ├── package.json # 依赖配置 │ └── vite.config.js # Vite配置 │ ├── database/ # 数据库文件目录 │ └── inventory.db # SQLite数据库文件 │ └── README.md # 项目文档 ``` --- ## 🚀 快速开始 ### 环境要求 - **JDK**: 17 或更高版本 - **Node.js**: 18 或更高版本 - **Maven**: 3.8+ - **IDE**: IntelliJ IDEA / VS Code (推荐) ### 后端启动 ```bash # 1. 进入后端目录 cd backend # 2. 安装依赖 mvn clean install # 3. 启动项目 mvn spring-boot:run # 后端服务运行在: http://localhost:8080 ``` ### 前端启动 ```bash # 1. 进入前端目录 cd frontend # 2. 安装依赖 npm install # 3. 启动开发服务器 npm run dev # 前端服务运行在: http://localhost:5173 ``` ### 首次启动说明 项目启动后会自动初始化数据库（`schema.sql` + `data.sql`），包含： - 3个系统角色 - 1个系统管理员账号 - 2个测试租户（含租户管理员和仓库管理员） - 历史租户数据（用于趋势图展示） --- ## 🔑 演示账号 | 角色 | 用户名 | 密码 | 说明 | |------|--------|------|------| | **系统管理员** | `sysadmin` | `123456` | 全局管理权限 | | **租户管理员** | `tenant001` | `123456` | 测试公司A | | **仓库管理员** | `zuhu` | `123456` | 测试公司A | | **租户管理员** | `tenant002` | `123456` | 测试公司B | > 💡 登录页面已集成"演示账号"区域，点击即可自动填充 --- ## 📐 系统架构 ### 多租户隔离架构 ``` ┌─────────────────────────────────────────────────────────┐ │ Frontend (Vue 3) │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────────┐ │ │ │ 登录页面 │ │ Dashboard│ │ 业务模块 │ │ 报表管理│ │ │ └──────────┘ └──────────┘ └──────────┘ └─────────┘ │ └────────────────────────┬────────────────────────────────┘ │ HTTP + JWT ▼ ┌─────────────────────────────────────────────────────────┐ │ Spring Boot Backend │ │ ┌──────────────────────────────────────────────────┐ │ │ │ JWT Filter + Tenant Filter │ │ │ └──────────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ Controller -> Service -> Repository (JPA) │ │ │ └──────────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ TenantContext (ThreadLocal) │ │ │ │ 每个请求自动注入租户ID，查询时自动过滤 │ │ │ └──────────────────────────────────────────────────┘ │ └────────────────────────┬────────────────────────────────┘ │ ▼ ┌──────────┐ │ SQLite │ (单数据库，通过tenant_id隔离) └──────────┘ ``` ### 权限控制流程 ``` 用户登录 ↓ JWT Token生成（包含userId, tenantId, roles） ↓ 前端存储Token，每次请求携带 ↓ 后端JWT Filter解析Token ↓ 设置TenantContext + UserContext (ThreadLocal) ↓ @PreAuthorize注解验证角色权限 ↓ Repository查询时自动添加tenantId过滤 ↓ 返回数据（仅包含当前租户数据） ``` --- ## 💎 功能模块详解 ### 🏠 首页（Dashboard） #### 系统管理员 - **租户统计**：总数、待审批、本月新增、活跃租户 - **租户增长趋势图**：近6个月注册量（真实数据） - **待审批列表**：最新5条待审批租户 - **快捷操作**：审批租户、租户管理、数据统计、系统配置 - **租户数据查看**：点击活跃租户卡片，切换视角查看该租户的所有数据 #### 租户管理员 - **业务KPI**：商品总数、仓库数、本月入库/出库金额、库存预警 - **趋势分析**：近7天出入库趋势图、月度金额对比图 - **快捷入口**：新建入库/出库、库存查询、库存预警、商品管理、仓库管理 ### 📦 库存管理 #### 商品管理 - 商品列表（图片、代码、名称、分类、价格、库存） - 新增/编辑商品 - 分类筛选、状态筛选 - 导出Excel - 行内编辑价格 #### 仓库管理 - 仓库列表（名称、地址、负责人、库存摘要、状态） - 新增/编辑仓库 - 启用/禁用仓库 - 仓库筛选 #### 库存查询 - 库存明细：按商品+仓库维度查询 - 库存汇总：按商品维度汇总所有仓库库存 - 实时库存预警 - 仓库筛选、库存状态筛选 ### 📋 出入库管理 #### 入库管理 - 入库单列表（单号、供应商、状态、金额、时间） - 新建入库单 - 查看详情（订单信息、商品明细、状态历史） - 确认入库（自动更新库存） - 删除草稿单 #### 出库管理 - 出库单列表（单号、客户、状态、金额、时间） - 新建出库单 - 查看详情 - 确认出库（自动扣减库存） - 删除草稿单 ### 📊 报表管理 #### 日报表 - 选择日期范围 - 汇总卡片（入库/出库金额、数量、净流入） - 趋势图表（可切换金额/单据量） - 明细表格（带合计行） - 业务状况标签 - 导出Excel #### 月报表 - 选择月份范围 - 汇总卡片（入库/出库总额、净结余） - 堆叠柱状图（可切换堆叠/并排） - 明细表格（带环比增长） - 导出Excel、打印报表 ### 🔒 月结管理 - 状态指示器（显示已结至XX月） - 选择月份自动预览数据 - 待审核单据检测 - 三步确认流程： 1. 系统自检（进度条动画） 2. 数据确认（详细盈亏概览） 3. 手动输入"确认月结" - 时间轴历史记录 ### 👥 系统管理 #### 租户管理（系统管理员） - 租户列表（名称、代码、联系人、状态） - 高级筛选（关键词、日期范围、状态） - 审批/拒绝租户（弹窗交互） - 查看租户数据（切换视角） - 重置租户管理员密码 #### 员工管理（租户管理员） - 员工列表（头像、姓名、角色、状态） - 新增员工（分配角色） - 编辑员工信息 - 重置密码 - 启用/禁用账号 - 删除员工 --- ## 🎨 设计规范 ### 色彩体系 | 用途 | 颜色 | 说明 | |------|------|------| | 主色调 | `#409EFF` | Element Plus默认蓝 | | 成功/入库 | `#67C23A` | 绿色系 | | 警告/预警 | `#E6A23C` | 橙色系 | | 危险/出库 | `#F56C6C` | 红色系 | | 信息 | `#909399` | 灰色系 | ### 渐变色 - 蓝绿渐变：`linear-gradient(135deg, #5B8FF9 0%, #61DDAA 100%)`（入库） - 黄红渐变：`linear-gradient(135deg, #F6BD16 0%, #F86C6B 100%)`（出库） - 紫粉渐变：`linear-gradient(135deg, #A35BFF 0%, #FF5BC9 100%)`（其他） ### 字体 - 标题：PingFang SC / Microsoft YaHei（16px - 28px，粗体） - 正文：14px - 辅助文字：12px - 13px，灰色 - 数字金额：DIN Alternate / Consolas（等宽字体） ### 间距 - 页面外边距：20px - 卡片间距：20px - 卡片内边距：24px - 32px - 表单间距：16px ### 圆角 - 卡片：12px - 按钮：4px - 8px - 标签：20px（完全圆角） - 头像：50%（圆形） --- ## 🔧 开发指南 ### 新增一个业务模块 #### 后端开发流程 1. **创建实体类**（`entity/`） ```java @Entity @Table(name = "your_table") public class YourEntity extends BaseEntity { @Column(name = "tenant_id") private Long tenantId; // ... 其他字段 } ``` 2. **创建Repository**（`repository/`） ```java public interface YourRepository extends JpaRepository { List findByTenantId(Long tenantId); } ``` 3. **创建Service**（`service/`） ```java @Service @RequiredArgsConstructor public class YourService { private final YourRepository repository; public List getList() { Long tenantId = TenantContext.getTenantId(); return repository.findByTenantId(tenantId); } } ``` 4. **创建Controller**（`controller/`） ```java @RestController @RequestMapping("/api/your-module") @PreAuthorize("hasAnyRole('TENANT_ADMIN', 'INVENTORY_MANAGER')") public class YourController { // ... 接口 } ``` #### 前端开发流程 1. **创建API接口**（`src/api/your-module.js`） ```javascript import request from '@/utils/request' export function getList() { return request({ url: '/api/your-module', method: 'get' }) } ``` 2. **创建页面组件**（`src/views/your-module/YourList.vue`） ```vue ``` 3. **配置路由**（`src/router/index.js`） ```javascript { path: 'your-module', name: 'YourModule', component: () => import('@/views/your-module/YourList.vue'), meta: { title: '您的模块' } } ``` --- ## 📸 系统截图说明 为了更直观地展示系统功能，请按以下顺序准备截图： ### 必备截图清单 1. ✅ **登录页面**：展示左右分屏、logo、演示账号 2. ✅ **系统管理员Dashboard**：租户统计、趋势图 3. ✅ **租户管理页面**：列表、筛选、审批按钮 4. ✅ **租户管理员Dashboard**：业务KPI、图表、快捷操作 5. ✅ **商品管理页面**：商品图片、价格、库存预警 6. ✅ **仓库管理页面**：头像、库存摘要、状态徽章 7. ✅ **库存查询页面**：库存预警、仓库分布 8. ✅ **入库管理页面**：状态时间轴、详情对话框 9. ✅ **日报表页面**：汇总卡片、趋势图、表格 10. ✅ **月报表页面**：净结余、堆叠图、环比增长 11. ✅ **月结管理页面**：状态指示器、预览数据 12. ✅ **月结确认对话框**：三步流程（系统自检、数据确认、手动输入） 13. ✅ **员工管理页面**：头像、角色标签、圆形按钮 14. ✅ **租户数据查看**：顶部蓝色横幅 ### 截图规范 - **分辨率**：1920x1080 或更高 - **格式**：PNG（保证清晰度） - **内容**：显示有意义的测试数据，避免空白页面 - **浏览器**：隐藏浏览器工具栏，全屏截图 - **建议**：使用 Snipaste 或 FastStone Capture 工具 --- ## 📈 未来规划 ### 短期计划（1-3个月） - [ ] 移动端适配（响应式布局） - [ ] Excel批量导入商品 - [ ] 库存盘点功能 - [ ] 数据备份与恢复 - [ ] 操作日志审计 ### 中期计划（3-6个月） - [ ] 多语言支持（i18n） - [ ] 消息通知中心（站内信、邮件） - [ ] 供应商管理模块 - [ ] 客户管理模块 - [ ] 财务对账功能 ### 长期计划（6-12个月） - [ ] 移动端App（React Native） - [ ] 数据大屏（实时监控） - [ ] AI智能预测（库存预警、销售预测） - [ ] 区块链溯源（商品追踪） - [ ] 开放API（第三方集成） --- ## 🤝 贡献指南 欢迎提交Issue和Pull Request！ 1. Fork本仓库 2. 创建特性分支（`git checkout -b feature/AmazingFeature`） 3. 提交更改（`git commit -m 'Add some AmazingFeature'`） 4. 推送到分支（`git push origin feature/AmazingFeature`） 5. 提交Pull Request --- ## 📄 开源协议 本项目采用 [MIT License](LICENSE) 开源协议。 --- ## 📞 联系方式 - **项目作者**：李四 - **邮箱**：example@email.com - **GitHub**：https://github.com/yourusername/inventory-system --- ## 🙏 鸣谢 感谢以下开源项目： - [Spring Boot](https://spring.io/projects/spring-boot) - [Vue.js](https://vuejs.org/) - [Element Plus](https://element-plus.org/) - [ECharts](https://echarts.apache.org/) - [Vite](https://vitejs.dev/) ---
**⭐ 如果这个项目对您有帮助，请给一个Star支持一下！⭐** Made with ❤️ by 李四