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

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