115 lines
2.8 KiB
Markdown
115 lines
2.8 KiB
Markdown
# I. 前端 Enums 速查
|
||
|
||
:::tip 概述
|
||
前端枚举与常量定义在 `ui/src/enums/` 目录下，全局存储键名在 `ui/src/store/mutation-types.ts`。
|
||
:::
|
||
|
||
## httpEnum
|
||
|
||
**文件**：`ui/src/enums/httpEnum.ts`
|
||
|
||
```typescript
|
||
/**
|
||
* @description: 请求结果集
|
||
*/
|
||
export enum ResultEnum {
|
||
SUCCESS = 0, // 本项目成功码（统一响应 code=0）
|
||
ERROR = 1, // 业务失败
|
||
TIMEOUT = 401, // Token 过期
|
||
TYPE = 'success',
|
||
}
|
||
|
||
/**
|
||
* @description: 请求方法
|
||
*/
|
||
export enum RequestEnum {
|
||
GET = 'GET',
|
||
POST = 'POST',
|
||
PATCH = 'PATCH',
|
||
PUT = 'PUT',
|
||
DELETE = 'DELETE',
|
||
}
|
||
|
||
/**
|
||
* @description: 常用的 contentType 类型
|
||
*/
|
||
export enum ContentTypeEnum {
|
||
JSON = 'application/json;charset=UTF-8',
|
||
TEXT = 'text/plain;charset=UTF-8',
|
||
FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
|
||
FORM_DATA = 'multipart/form-data;charset=UTF-8',
|
||
}
|
||
```
|
||
|
||
## pageEnum
|
||
|
||
**文件**：`ui/src/enums/pageEnum.ts`
|
||
|
||
```typescript
|
||
export enum PageEnum {
|
||
// 登录
|
||
BASE_LOGIN = '/login',
|
||
BASE_LOGIN_NAME = 'Login',
|
||
// 重定向
|
||
REDIRECT = '/redirect',
|
||
REDIRECT_NAME = 'Redirect',
|
||
// 首页
|
||
BASE_HOME = '/dashboard',
|
||
// 首页跳转默认路由
|
||
BASE_HOME_REDIRECT = '/dashboard/console',
|
||
// 错误
|
||
ERROR_PAGE_NAME = 'ErrorPage',
|
||
}
|
||
```
|
||
|
||
## 其它枚举
|
||
|
||
| 文件 | 导出 | 说明 |
|
||
|------|------|------|
|
||
| `avatarEnum.ts` | `avatarEnum` | 默认头像资源路径（avatar-1 ~ 6） |
|
||
| `breakpointEnum.ts` | `sizeEnum` / `screenEnum` / `screenMap` | 响应式断点（XS 480 ~ XXL 1600） |
|
||
| `cacheEnum.ts` | `TOKEN_KEY`、`USER_INFO_KEY`、`ROLES_KEY` 等 | 本地缓存键名常量 |
|
||
| `permissionsEnum.ts` | `PermissionsEnum`（interface） | 权限项类型 `{ value, label }` |
|
||
| `roleEnum.ts` | `RoleEnum` | 角色（`admin` / `normal`） |
|
||
|
||
## store/mutation-types
|
||
|
||
**文件**：`ui/src/store/mutation-types.ts` — Storage / Pinia 使用的全局键名：
|
||
|
||
```typescript
|
||
export const ACCESS_TOKEN = 'ACCESS-TOKEN'; // 用户 token
|
||
export const CURRENT_USER = 'CURRENT-USER'; // 当前用户信息
|
||
export const IS_LOCKSCREEN = 'IS-LOCKSCREEN'; // 是否锁屏
|
||
export const TABS_ROUTES = 'TABS-ROUTES'; // 标签页
|
||
export const FIRST_ROUTE = 'FIRST-ROUTE'; // 菜单第一个路由
|
||
```
|
||
|
||
## 使用示例
|
||
|
||
```typescript
|
||
import { ResultEnum } from '@/enums/httpEnum';
|
||
import { PageEnum } from '@/enums/pageEnum';
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types';
|
||
|
||
// 判断响应是否成功
|
||
if (code === ResultEnum.SUCCESS) { ... }
|
||
|
||
// 跳转登录页
|
||
router.push(PageEnum.BASE_LOGIN);
|
||
|
||
// 读取 token
|
||
const token = storage.get(ACCESS_TOKEN, '');
|
||
```
|
||
|
||
## 自定义枚举
|
||
|
||
新增业务枚举放在 `ui/src/enums/` 下，文件名以 `Enum` 结尾（如 `statusEnum.ts`），导出 `enum` 或常量对象：
|
||
|
||
```typescript
|
||
// ui/src/enums/statusEnum.ts
|
||
export enum UserStatus {
|
||
ENABLE = 1,
|
||
DISABLE = 2,
|
||
}
|
||
```
|