Become a sponsor
9.17 工具函数
概述
ui/src/utils 收敛通用能力：http 封装、存储、鉴权、校验、日期、下载、格式化、DOM、颜色等。业务页面优先查这里，避免重复造轮子。
主要工具
| 文件/目录 | 职责 |
|---|---|
| http/ | axios 封装（9.4） |
| Storage.ts | 持久化封装（localStorage 统一入口） |
| auth.ts | token/权限辅助（菜单树查找 findTreeByPath 等） |
| validate.ts | 校验（手机号、邮箱、URL、长度等） |
| dateUtil.ts / formatTime.ts | 日期解析与格式化（dayjs 封装） |
| downloadFile.ts | URL 文件下载 |
| urlUtils.ts | URL 参数处理 |
| domUtils.ts | DOM 操作辅助 |
| color.ts | 颜色计算（主题） |
| index.ts | 聚合出口 |
| is/ | 类型判断 |
| lib/ helper/ file/ | 子域工具（库封装、文件处理等） |
| propTypes.ts | 组件 props 类型 |
| useLockFn.ts | 防重入函数包装 |
| lodashChunk.ts | 数组分块 |
| wartermark.ts | 水印 |
| log.ts / env.ts / browser-type.ts | 日志、环境、浏览器探测 |
使用规约
- 统一入口：
import { xxx } from '@/utils'（聚合出口），保持引用一致 - 纯函数优先：工具函数不做 IO 副作用（下载类除外）
- 不引业务：utils 不得 import api/views/store（防环依赖）
- 新增前检索：先确认 index.ts 是否已有同能力
高频组合
| 场景 | 组合 |
|---|---|
| 导出下载 | downloadFile（配合 Export 接口返回的 URL） |
| 时间展示 | formatTime（列表列、日志时间） |
| 表单校验 | validate（与后端 binding 标签双侧校验） |
| 记住页签/主题 | Storage（store 持久化底层） |