106 lines
2.1 KiB
Markdown
106 lines
2.1 KiB
Markdown
# 10 前端
|
||
|
||
## 技术栈
|
||
|
||
Vue 3 + TypeScript + Vite + Element Plus + Pinia + Vue Router + VueUse + ECharts + Axios + ESLint + Prettier。
|
||
|
||
## Admin 框架
|
||
|
||
前端 Admin 采用 [pure-admin-thin（i18n 分支）](https://github.com/pure-admin/pure-admin-thin/tree/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 为准。
|