48 lines
1.8 KiB
Markdown
48 lines
1.8 KiB
Markdown
# 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)
|