签入版本

2026-10-25 17:24:27 +08:00
parent 48911cc08f
commit fdbeae092a
1010 changed files with 30682 additions and 95274 deletions
@@ -1,61 +1,66 @@
 # 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
-ui/src/
-├── api/                        # API 接口层（按业务域分组）
-│   ├── common/                 # 公共接口（登录/菜单/用户信息/城市）
-│   ├── system/                 # 系统管理（用户/角色/菜单/部门/岗位/职级/日志/租户）
-│   ├── content/                # 内容管理（文章/分类/链接）
-│   ├── data/                   # 数据管理（城市/配置/字典/公告/参数）
-│   ├── dashboard/              # 仪表盘（控制台/消息）
-│   ├── file/                   # 文件管理（文件模板）
-│   ├── monitor/                # 监控管理（定时任务）
-│   ├── region/                 # 行政区划
-│   ├── setting/                # 设置（个人资料/网站配置）
-│   └── tool/                   # 工具（示例/代码生成器）
-├── components/                 # 公共组件库（20+ 个）
-│   ├── Table/                  # 数据表格
-│   ├── Form/                   # 动态表单
-│   ├── Modal/                  # 弹窗
-│   ├── Upload/                 # 文件上传
-│   ├── Editor/                 # 富文本编辑器
-│   ├── Excel/                  # Excel 导入导出
-│   ├── Cropper/                # 头像裁剪
-│   ├── Region/                 # 行政区划
-│   ├── Password/               # 密码强度
-│   ├── Qrcode/                 # 二维码
-│   └── ...
-├── directives/                 # 自定义指令
-│   └── permission.ts           # v-perm / v-perms 权限指令
-├── enums/                      # 枚举常量
-│   ├── httpEnum.ts             # HTTP 枚举
-│   └── pageEnum.ts             # 页面枚举
-├── hooks/                      # 组合式函数
-├── layout/                     # 布局组件
-├── router/                     # 路由配置
-│   ├── index.ts                # 路由实例
-│   ├── base.ts                 # 静态路由
-│   ├── generator-routers.ts    # 动态路由生成
-│   └── router-guards.ts        # 路由守卫
-├── store/                      # Pinia 状态管理
-│   └── modules/
-│       ├── user.ts             # 用户 Store
-│       ├── asyncRoute.ts       # 动态路由 Store
-│       └── ...
-├── styles/                     # 全局样式
-├── utils/                      # 工具函数
-│   └── http/                   # HTTP 请求封装
-└── views/                      # 页面视图
-    ├── login/                  # 登录页
-    ├── dashboard/              # 仪表盘
-    ├── system/                 # 系统管理页面
-    ├── content/                # 内容管理页面
-    ├── data/                   # 数据管理页面
-    ├── monitor/                # 监控管理页面
-    ├── tool/                   # 工具页面
-    └── exception/              # 异常页面
-```
+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)