Become a sponsor
9.2 目录结构详解
概述
本页给出 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——防止公共组件被单业务污染。