# 9.2 目录结构详解

:::tip 概述
本页给出 `ui/src` 各目录的职责与放置规则。核心原则：**按业务域分组、按层次隔离**——页面不直连 axios，组件不耦合业务。
:::

## 一级目录职责

| 目录 | 职责 | 放置规则 |
|---|---|---|
| api/ | 接口函数 | 按业务域分子目录（system/content/data/monitor/tool...），一模块一文件 |
| views/ | 页面 | 按业务域分目录，与 api/ 域名对应 |
| components/ | 公共组件 | 任何页面可复用的才进这里 |
| store/ | Pinia | 全局状态（用户、路由、标签页、设置）；页面局部状态不进 store |
| router/ | 路由 | constant 静态 + generator-routers 动态 + guards 守卫 |
| directives/ | 指令 | perm / perms / scrollBar / clickOutside |
| hooks/ | 组合式函数 | core/event/setting/web 分组 |
| enums/ | 枚举 | http/role/permissions/cache/page/breakpoint/avatar |
| utils/ | 工具 | http 封装、auth、validate、日期、下载、颜色、DOM... |
| layout/ | 布局 | 侧边栏、顶栏、标签页、面包屑组件 |
| styles/ | 样式 | 全局样式、主题变量、过渡动画 |
| settings/ | 设置 | 应用级默认配置 |
| plugins/ | 插件 | element、指令、echarts 等全局注册 |
| assets/ | 静态资源 | 图片、svg |

## views 域划分

```text
views/
├── dashboard/     控制台
├── system/        系统管理（user/role/menu/dept/level/position/tenant/logger）
├── content/       内容管理（article/category/link）
├── data/          数据管理（dict/config/param/notice/city）
├── monitor/       监控（job/online/server/cache）
├── file/          文件（fileTemplate）
├── tool/          工具（example/generator）
├── setting/       设置（configWeb/profile）
├── login/         登录（四种表单）
├── exception/     异常页
└── iframe/ redirect/ about/
```

## api 域划分

```text
api/
├── system/    user/role/menu/dept/level/position/tenant/dictionary/operLog/loginLog
├── content/   article/category/link
├── data/      dict/config/param/notice/city
├── monitor/   job/onlineUser/serverMonitor/cacheMonitor/dataSource
├── tool/      example/generator
├── file/      fileTemplate
├── setting/   profile/web
├── dashboard/ console/message
├── common/    index/menu/user/city
└── region/    region
```

## 页面内私有组件

页面专属的子组件放 `views/{域}/{模块}/components/`，不进全局 components——防止公共组件被单业务污染。

## 相关

- [4.5 前端分层架构](/zh/architecture/frontend-layer.html)
- [9.14 API 模块编写规范](/zh/frontend/api-module.html)