wms-saas/docs/10-frontend.md

10 前端

技术栈

Vue 3 + TypeScript + Vite + Element Plus + Pinia + Vue Router + VueUse + ECharts + Axios + ESLint + Prettier。

Admin 框架

前端 Admin 采用 pure-admin-thin（i18n 分支），代码位于 frontend/。pure-admin 原生基于 Element Plus，并内置国际化。

• 使用 pure-admin 提供的 Layout / Router / 权限 / 标签页 / i18n 等基础能力
• Element Plus 作为唯一业务 UI 组件库，不引入 Naive UI 等第二套 UI 库
• 不要重复实现 pure-admin 已有的 Admin 基础设施

目录结构

src/
├── api/
├── assets/
├── components/
├── constants/
├── layouts/
├── router/
├── stores/
├── styles/
├── types/
├── utils/
├── views/
│   ├── dashboard/
│   ├── warehouse/
│   ├── product/
│   ├── inventory/
│   ├── inbound/
│   ├── outbound/
│   ├── picking/
│   ├── packing/
│   ├── shipping/
│   ├── customer/
│   ├── supplier/
│   ├── reports/
│   └── system/
└── App.vue

页面必须按照业务领域组织。若所选 Admin 框架已有约定目录，以框架约定为准，在其中按业务领域组织。

Element Plus 使用规范

统一使用 Element Plus，重点组件：

• ElTable
• ElForm
• ElDialog
• ElDrawer
• ElSelect
• ElCascader
• ElDatePicker
• ElPagination
• ElTabs
• ElSteps
• ElUpload
• ElTree
• ElDescriptions

所有列表页尽量统一布局：

查询区
 ↓
Toolbar
 ↓
Table
 ↓
Pagination

不要每个页面设计一套完全不同的交互，不要重复实现 Element Plus 已提供的组件。

前端权限

支持：

• 菜单权限
• 页面权限
• Button / API 权限
• Role
• Tenant

权限码格式 模块:动作，例如：

inventory:view
inventory:adjust
inventory:export
inbound:view
inbound:create
inbound:receive
outbound:view
outbound:allocate
outbound:pick
outbound:ship

前端权限仅用于展示控制，最终授权以后端 Policies / Gates 为准。