通用方法

本小节，分享前端项目的常用方法和工具类。

1. 工具类

项目的工具类位于 src/utils (opens new window) 目录。

文件	作用
`index.ts`	通用工具（路由解析、页面跳转、环境配置等）
`date.ts`	日期格式化、相对时间
`tree.ts`	树形结构构建、查找
`constants.ts`	枚举常量导出
`debounce.ts`	防抖函数
`download.ts`	文件下载
`encrypt.ts`	加解密
`validator.ts`	表单验证
`url.ts`	URL 处理
`systemInfo.ts`	系统信息获取
`toLoginPage.ts`	跳转登录页

2. Hooks

项目的 Hooks 位于 src/hooks (opens new window) 目录。

文件	作用
`useRequest.ts`	异步请求封装
`useScroll.ts`	分页滚动加载
`useDict.ts`	字典数据
`useAccess.ts`	权限控制
`useUpload.ts`	文件上传

3. 枚举类

项目在 src/utils/constants (opens new window) 目录定义了枚举类。

3.1 字典枚举

字典枚举定义在 dict-enum.ts (opens new window) 中，对应后端字典管理的字典类型 KEY。

import { DICT_TYPE } from '@/utils/constants'

// 使用字典类型
DICT_TYPE.COMMON_STATUS // 'common_status'
DICT_TYPE.SYSTEM_USER_SEX // 'system_user_sex'
DICT_TYPE.BPM_TASK_STATUS // 'bpm_task_status'

3.2 业务枚举

业务枚举用于前端业务逻辑判断，避免"魔法值"。

文件	模块
`biz-system-enum.ts`	系统模块（状态、菜单类型、角色类型等）
`biz-infra-enum.ts`	基础设施模块
`biz-bpm-enum.ts`	工作流模块

import { CommonStatusEnum, SystemMenuTypeEnum } from '@/utils/constants'

// 通用状态
if (status === CommonStatusEnum.ENABLE) { /* 开启 */ }
if (status === CommonStatusEnum.DISABLE) { /* 禁用 */ }

// 菜单类型判断
if (menuType === SystemMenuTypeEnum.DIR) { /* 目录 */ }
if (menuType === SystemMenuTypeEnum.MENU) { /* 菜单 */ }
if (menuType === SystemMenuTypeEnum.BUTTON) { /* 按钮 */ }

4. 缓存配置

项目使用 Pinia (opens new window) 进行状态管理，配合 pinia-plugin-persistedstate 插件实现数据持久化。

Store 文件位于 src/store (opens new window) 目录下：

store/
├── index.ts                  # Store 入口，统一导出
├── user.ts                   # 用户信息（用户、角色、权限）
├── token.ts                  # Token 管理（登录、登出、刷新令牌）
├── dict.ts                   # 字典数据缓存
└── theme.ts                  # 主题配置

官方文档

详细的 Store 使用方式，请参考：《unibest 官方文档 —— 状态管理篇》 (opens new window) 文档。

持久化数据存储在：

H5：localStorage
小程序：uni.setStorageSync
App：uni.setStorageSync

返回离线目录