# 12.9 前端编码规范

:::tip 建议遵守
前端通用风格约定：分层隔离、命名一致、组件复用、类型渐进。配合 `pnpm type:check` 与 `pnpm lint:eslint` 门禁。
:::

## 分层纪律

| 层 | 禁止 |
|---|---|
| views 页面 | 直接 axios、写信封判断、放公共组件 |
| api 模块 | UI 逻辑、持 Token、catch 兜底（拦截器已做） |
| components 公共组件 | 耦合具体业务模块 |
| store | 存可从接口推导的数据 |
| utils | import api/views/store（环依赖） |

## 命名

| 对象 | 规约 | 示例 |
|---|---|---|
| api 文件 | 域/模块.ts | system/user.ts |
| api 函数 | 模块+动作 | userPage、userAdd |
| 页面目录 | 域/模块/ | views/system/user/ |
| 组件 | PascalCase | UserTable.vue |
| hooks | use-*.ts | use-async.ts |
| store | camelCase 模块 | asyncRoute.ts |
| 权限码 | 与后端逐字一致 | sys:user:add |

## 组件实践

- 公共组件优先（Table/Page/Form/Select/Upload...），不重复造
- 页面私有组件放 views 下 components/
- props 显式声明 + 类型（vue-types/propTypes）
- 事件命名 `update:xxx` / `change`，不滥用全局事件总线

## 状态与数据

- 本地状态 ref/reactive；跨页面才进 Pinia
- storage 键走 mutation-types 常量，不散裸字符串
- 字典数据走字典接口，不硬编码 options

## 样式

- 颜色/间距用变量，不硬编码色值
- 组件样式 scoped；全局样式进 styles/ 统一管理
- 避免 `!important`；层级用变量

## 类型

- 渐进式补类型：api 泛型 → props → 页面
- 枚举用 as const + 类型导出
- 临时 any 需注释原因，不扩散

## 提交前

```bash
pnpm type:check
pnpm lint:eslint
```

## 相关

- [9.14 API 模块编写规范](/zh/frontend/api-module.html)
- [12.7 代码审查清单](/zh/standards/code-review.html)