---
description: Vue 3 + TypeScript + Element Plus 前端规范（pure-admin-thin）
globs: frontend/**/*.vue,frontend/**/*.ts,frontend/**/*.tsx
alwaysApply: false
---
# 前端规范

详见 `docs/10-frontend.md`。

## 框架
- Admin 基于 pure-admin-thin（i18n 分支），复用其 Layout / Router / 权限 / 标签页 / i18n，不重复实现。
- UI 只用 Element Plus，不引入 Naive UI 等第二套组件库；不重复实现 Element Plus 已有组件。
- 新增依赖前先确认框架与现有依赖无法满足。

## 结构
- 页面按业务领域放 `src/views/{domain}/`（warehouse、inventory、inbound、outbound 等）。
- 接口调用统一放 `src/api/{domain}.ts`，通过框架封装的 HTTP 实例，页面内不直接写 axios。
- 类型放 `src/types/`，状态 / 枚举常量放 `src/constants/`，禁止魔法字符串。

## 编码
- `<script setup lang="ts">` + Composition API；Props、Emits、接口响应都要声明类型，避免 `any`。
- 列表页统一：查询区 → Toolbar → ElTable → ElPagination；表单用 ElForm + rules，弹窗用 ElDialog / ElDrawer。
- 文案走 i18n，不硬编码中文。

## 权限
- 按钮 / 菜单权限使用权限码 `模块:动作`（如 `inventory:adjust`、`outbound:ship`），通过框架的权限指令 / 组件控制。
- 前端权限只控制展示，最终以后端授权为准。