# 9.2 目录结构详解

:::tip 概述
本节详细介绍前端项目的目录结构，帮助开发者快速定位代码和理解项目组织方式。
:::

```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/              # 异常页面
```