28 lines
1.3 KiB
Plaintext
28 lines
1.3 KiB
Plaintext
---
|
||
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`），通过框架的权限指令 / 组件控制。
|
||
- 前端权限只控制展示，最终以后端授权为准。
|