# 9.18 Hooks 与枚举

:::tip 概述
`hooks/` 按 core/event/setting/web 分组沉淀组合式逻辑；`enums/` 定义前端常量枚举。两者都是"写一次、处处引用"的基础设施。
:::

## Hooks 分组

| 分组 | 代表 | 职责 |
|---|---|---|
| web | usePermission | 权限判定（v-if 场景，[9.7](/zh/frontend/permission.html)） |
| core | use-async | 异步状态管理（loading/error 包装） |
| event | 事件类 hooks | 监听与派发 |
| setting | designSetting 相关 | 主题/布局参数读写 |
| 根目录 | useTime / useOnline / useBattery / useDomWidth | 时间、网络状态、电量、宽度监听 |

## 枚举清单（enums/）

| 文件 | 枚举内容 |
|---|---|
| httpEnum.ts | HTTP 相关常量（结果类型、超时） |
| permissionsEnum.ts | 权限相关常量 |
| roleEnum.ts | 角色常量 |
| pageEnum.ts | 页面路径常量（BASE_LOGIN 等，守卫引用） |
| cacheEnum.ts | 缓存键常量 |
| breakpointEnum.ts | 响应式断点 |
| avatarEnum.ts | 头像相关 |

## 使用示例

```typescript
import { usePermission } from '@/hooks/web/usePermission';
import { PageEnum } from '@/enums/pageEnum';

const { hasPermission } = usePermission();
const loginPath = PageEnum.BASE_LOGIN;
```

## 编写新 hook 的规约

- 文件名 `use-*.ts`（kebab），导出同名函数
- 纯组合式：内部用 ref/computed/watch，不依赖组件实例才能运行的 API（或显式在 setup 调用）
- 通用才抽：两个以上页面用到再沉淀，单页面逻辑留页面内

## 枚举编写规约

- `as const` + 类型导出，避免 any
- 键名大写下划线，值按语义（字符串枚举为主）
- 与后端常量对齐的值（如权限通配码）注明来源，防两端漂移

## 相关

- [9.17 工具函数](/zh/frontend/utils.html)
- [附录 J 前端枚举速查](/zh/appendix/enums.html)