签入版本
This commit is contained in:
@@ -1,84 +1,114 @@
|
||||
# I. 前端 Enums 速查
|
||||
|
||||
:::tip 概述
|
||||
前端枚举定义在 `ui/src/enums/` 目录下,用于统一管理常量值。
|
||||
前端枚举与常量定义在 `ui/src/enums/` 目录下,全局存储键名在 `ui/src/store/mutation-types.ts`。
|
||||
:::
|
||||
|
||||
## httpEnum
|
||||
|
||||
**文件**:`enums/httpEnum.ts`
|
||||
**文件**:`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',
|
||||
}
|
||||
|
||||
// 响应状态码
|
||||
export enum ResultEnum {
|
||||
SUCCESS = 0, // 业务成功
|
||||
FAIL = 1, // 业务失败
|
||||
}
|
||||
|
||||
// 内容类型
|
||||
/**
|
||||
* @description: 常用的 contentType 类型
|
||||
*/
|
||||
export enum ContentTypeEnum {
|
||||
JSON = 'application/json',
|
||||
FORM_URLENCODED = 'application/x-www-form-urlencoded',
|
||||
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
|
||||
|
||||
**文件**:`enums/pageEnum.ts`
|
||||
**文件**:`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_ERROR_LOG = '/exception/404',
|
||||
REDIRECT = '/redirect',
|
||||
// 首页跳转默认路由
|
||||
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 (response.code === ResultEnum.SUCCESS) {
|
||||
// 处理成功
|
||||
}
|
||||
if (code === ResultEnum.SUCCESS) { ... }
|
||||
|
||||
// 跳转登录页
|
||||
router.push(PageEnum.BASE_LOGIN);
|
||||
|
||||
// 判断请求方法
|
||||
if (method === RequestEnum.POST) {
|
||||
// POST 请求
|
||||
}
|
||||
// 读取 token
|
||||
const token = storage.get(ACCESS_TOKEN, '');
|
||||
```
|
||||
|
||||
## 自定义枚举
|
||||
|
||||
```typescript
|
||||
// 添加新枚举时,在 enums/ 目录下创建文件
|
||||
// ui/src/enums/statusEnum.ts
|
||||
新增业务枚举放在 `ui/src/enums/` 下,文件名以 `Enum` 结尾(如 `statusEnum.ts`),导出 `enum` 或常量对象:
|
||||
|
||||
```typescript
|
||||
// ui/src/enums/statusEnum.ts
|
||||
export enum UserStatus {
|
||||
ENABLE = 1,
|
||||
DISABLE = 2,
|
||||
}
|
||||
|
||||
export enum ArticleStatus {
|
||||
DRAFT = 0,
|
||||
PUBLISHED = 1,
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user