# 9.17 工具函数

:::tip 概述
`ui/src/utils` 收敛通用能力：http 封装、存储、鉴权、校验、日期、下载、格式化、DOM、颜色等。业务页面优先查这里，避免重复造轮子。
:::

## 主要工具

| 文件/目录 | 职责 |
|---|---|
| http/ | axios 封装（[9.4](/zh/frontend/http.html)） |
| 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 持久化底层） |

## 相关

- [9.18 Hooks 与枚举](/zh/frontend/hooks-enums.html)