zhangwenrui/material_manage_system
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
master
material_manage_system/docs/superpowers/specs/2026-09-07-wmms-vue-migration-design.md
文睿 张 31aae223c2 Initial commit
2026-09-15 16:08:18 +08:00

8.7 KiB
Raw Permalink Blame History

WMMS Vue 重构设计方案

日期：2026-09-07 项目：仓库物料管理系统（WMMS） 目标：jQuery 前端 → Vue 3 前端

一、技术选型

层 选型 说明
框架 Vue 3 (Composition API) 最新稳定版
构建工具 Vite 快速开发热更新
状态管理 Pinia Vue 3 官方推荐
路由 Vue Router 4 History 模式
UI 组件库 Element Plus 后台管理系统标配
HTTP 客户端 Axios 封装请求拦截器
开发端口 8081 与旧版 8080 分离

二、项目结构

warehouse-mms/
├── web/                          # 旧版 jQuery 前端（已禁用）
│   ├── index.html                # 已重命名为 index.html.bak
│   ├── js/
│   └── css/
├── frontend/                     # 新版 Vue 项目
│   ├── src/
│   │   ├── assets/               # 静态资源
│   │   ├── components/           # 基础组件
│   │   │   ├── business/         # 业务组件
│   │   │   │   ├── BaseTable.vue
│   │   │   │   ├── BasePagination.vue
│   │   │   │   ├── BaseModal.vue
│   │   │   │   ├── BaseForm.vue
│   │   │   │   ├── StatusBadge.vue
│   │   │   │   ├── RoleBadge.vue
│   │   │   │   ├── DeleteConfirm.vue
│   │   │   │   ├── AlertTip.vue
│   │   │   │   ├── LoadingOverlay.vue
│   │   │   │   ├── ImagePreview.vue
│   │   │   │   ├── DatePicker.vue
│   │   │   │   └── MaterialSelect.vue
│   │   │   └── layout/           # 布局组件
│   │   │       ├── AppHeader.vue
│   │   │       └── AppSidebar.vue
│   │   ├── views/                # 页面组件
│   │   │   ├── Login.vue
│   │   │   ├── Materials.vue
│   │   │   ├── Inbound.vue
│   │   │   ├── Outbound.vue
│   │   │   ├── Stock.vue
│   │   │   ├── Application.vue
│   │   │   ├── Approval.vue
│   │   │   ├── Logs.vue
│   │   │   └── Users.vue
│   │   ├── stores/               # Pinia Store
│   │   │   ├── auth.js
│   │   │   ├── materials.js
│   │   │   ├── stock.js
│   │   │   ├── inbound.js
│   │   │   ├── outbound.js
│   │   │   ├── application.js
│   │   │   ├── approval.js
│   │   │   ├── logs.js
│   │   │   ├── users.js
│   │   │   └── ui.js
│   │   ├── api/                  # API 封装层
│   │   │   ├── index.js          # Axios 实例
│   │   │   ├── auth.js
│   │   │   ├── materials.js
│   │   │   ├── inbound.js
│   │   │   ├── outbound.js
│   │   │   ├── stock.js
│   │   │   ├── application.js
│   │   │   ├── logs.js
│   │   │   └── users.js
│   │   ├── router/               # 路由配置
│   │   │   └── index.js
│   │   ├── App.vue
│   │   └── main.js
│   ├── public/
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
└── internal/                     # Go 后端（不变）

三、路由设计

路径 页面 权限
/login 登录页 游客
/materials 物料管理 admin
/inbound 入库管理 admin
/outbound 出库管理 admin
/stock 库存查询 登录用户
/application 物料申请 登录用户
/approval 申请审批 admin
/logs 日志记录 admin
/users 用户管理 admin

路由守卫：

  • authRequired：需登录
  • adminOnly：需管理员权限
  • guestOnly：仅限未登录用户

四、组件设计

4.1 布局组件

AppHeader

  • 顶部导航栏
  • 显示系统标题、当前用户、角色徽章、退出按钮
  • Props: user, isLoggedIn
  • Emits: logout

AppSidebar

  • 左侧菜单
  • 根据用户权限动态显示菜单项
  • 高亮当前激活菜单
  • Props: menuItems, activeMenu
  • Emits: menu-select

4.2 基础组件

组件 职责
BaseTable 通用表格，封装分页、加载状态
BasePagination 分页组件
BaseModal 弹窗基础组件
BaseForm 表单基础组件
StatusBadge 状态徽章（pending/completed/processing）
RoleBadge 角色徽章（admin/user）
DeleteConfirm 删除确认弹窗
AlertTip 提示消息
LoadingOverlay 加载遮罩
ImagePreview 图片预览
DatePicker 日期选择
MaterialSelect 物料选择器

4.3 业务组件

组件 对应模块 职责
MaterialTable materials.js 物料列表、新增编辑删除
MaterialForm materials.js 物料表单
InboundTable inbound.js 入库单列表
InboundForm inbound.js 入库单表单
OutboundTable outbound.js 出库单列表
OutboundForm outbound.js 出库单表单
StockTable stock.js 库存列表
StockWarning stock.js 库存预警
StockLogs stock.js 库存变动日志
ApplicationForm application.js 物料申请表单
MyApplications application.js 我的申请列表
ApprovalTable application.js 审批列表
LogsTable logs.js 日志记录
UserTable users.js 用户管理

五、Pinia Store 设计

auth

  • State: token, user, isLoggedIn, isAdmin
  • Actions: login, logout, fetchCurrentUser, saveAuth, clearAuth

materials

  • State: materials, materialsCache, categoryMap, loading, pagination
  • Actions: fetchMaterials, createMaterial, updateMaterial, deleteMaterial

stock

  • State: stockList, warningList, logs, loading, stockPage, warningPage, logsPage
  • Actions: fetchStock, fetchStockWarning, fetchStockLogs

inbound

  • State: inboundList, currentInbound, loading, page
  • Actions: fetchInboundList, createInbound, updateInbound, deleteInbound

outbound

  • State: outboundList, currentOutbound, loading, page
  • Actions: fetchOutboundList, createOutbound, updateOutbound, deleteOutbound

application

  • State: myApplications, materialsCache, loading, myPage
  • Actions: createApplication, fetchMyApplications, cancelApplication

approval

  • State: applications, loading, approvalPage
  • Actions: fetchPendingApplications, approveApplication, rejectApplication

logs

  • State: logs, loading, page, filters
  • Actions: fetchLogs, setFilters, resetFilters

users

  • State: users, loading, page
  • Actions: fetchUsers, createUser, updateUser, deleteUser

ui

  • State: loading, loadingText, activeTab, sidebarCollapsed
  • Actions: setLoading, setActiveTab, toggleSidebar

六、API 层设计

基于现有 web/js/api.js 重构为 frontend/src/api/ 模块化结构。

Axios 实例配置：

  • baseURL: /api
  • timeout: 30000ms
  • 请求拦截器：添加 Authorization: Bearer token
  • 响应拦截器：2xx 直接返回 data，401 跳转登录

API 模块：

  • auth.js - 登录、获取当前用户
  • materials.js - 物料 CRUD
  • inbound.js - 入库单 CRUD
  • outbound.js - 出库单 CRUD
  • stock.js - 库存查询、预警、日志
  • application.js - 申请单
  • logs.js - 操作日志
  • users.js - 用户 CRUD

WebSocket：

  • 端口：8080/ws（与后端相同）
  • 重连机制：指数退避
  • 用途：实时库存更新推送

七、实施计划

Day 任务 交付物
Day 1 初始化 Vue 项目 + API 层 + Pinia 基础 项目架子、API 接口封装、Store 基础模块
Day 2 基础组件 + 登录/物料/库存页面 10 个基础组件、3 个主要页面
Day 3 出入库/申请/审批/日志/用户 + 权限 剩余页面、路由守卫、权限控制

八、风险与应对

风险 影响 应对
业务逻辑遗漏 重构后功能不完整 逐模块对照旧版代码、详细测试
性能退化 大数据量时变慢 虚拟滚动、合理使用 computed
WebSocket 重连 实时功能失效 指数退避重连 + 心跳检测
权限控制绕过 安全风险 后端 API 也有 AdminOnly 验证

九、测试验收标准

  1. 所有 8 个页面功能正常
  2. 登录/登出正常
  3. 权限控制生效（admin vs 普通用户）
  4. 分页、搜索功能正常
  5. 新增/编辑/删除操作正常
  6. WebSocket 实时推送正常
  7. 旧版 web/ 可随时恢复