# 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 为准。