105 lines
5.4 KiB
Markdown
105 lines
5.4 KiB
Markdown
# 9.2 目录结构详解
|
||
|
||
:::tip 概述
|
||
本节详细介绍前端项目的目录结构，帮助开发者快速定位代码和理解项目组织方式。
|
||
:::
|
||
|
||
```text
|
||
ui/src/
|
||
├── api/ # API 接口层（按业务域分组）
|
||
│ ├── common/ # 公共接口（登录/菜单/用户信息/城市）
|
||
│ ├── system/ # 系统管理（用户/角色/菜单/部门/岗位/职级/日志/租户）
|
||
│ ├── content/ # 内容管理（文章/分类/链接）
|
||
│ ├── data/ # 数据管理（城市/配置/字典/公告/参数）
|
||
│ ├── dashboard/ # 仪表盘（控制台/消息）
|
||
│ ├── file/ # 文件管理（文件模板）
|
||
│ ├── monitor/ # 监控管理（定时任务）
|
||
│ ├── region/ # 行政区划
|
||
│ ├── setting/ # 设置（个人资料/网站配置）
|
||
│ └── tool/ # 工具（示例/代码生成器）
|
||
├── components/ # 公共组件库（20+ 个）
|
||
│ ├── Table/ # 数据表格（BasicTable）
|
||
│ ├── Form/ # 动态表单（BasicForm）
|
||
│ ├── Modal/ # 弹窗
|
||
│ ├── Upload/ # 文件上传（BasicUpload）
|
||
│ ├── Editor/ # 富文本编辑器
|
||
│ ├── Excel/ # Excel 导入导出
|
||
│ ├── Cropper/ # 头像裁剪
|
||
│ ├── Region/ # 行政区划
|
||
│ ├── Password/ # 密码强度
|
||
│ ├── Qrcode/ # 二维码
|
||
│ └── ...
|
||
├── directives/ # 自定义指令
|
||
│ └── permission.ts # v-perm / v-perms 权限指令
|
||
├── enums/ # 枚举常量
|
||
│ ├── httpEnum.ts # HTTP 枚举
|
||
│ └── pageEnum.ts # 页面枚举
|
||
├── hooks/ # 组合式函数
|
||
│ ├── core/ event/ setting/ web/
|
||
│ └── web/usePermission.ts 等 # 权限、页面、图表等复用逻辑
|
||
├── layout/ # 布局组件（侧边栏/顶栏/内容区）
|
||
├── plugins/ # 插件
|
||
├── router/ # 路由配置
|
||
│ ├── index.ts # 路由实例
|
||
│ ├── base.ts # 静态路由（登录/404）
|
||
│ ├── generator-routers.ts # 动态路由生成（后端菜单 → 路由）
|
||
│ └── router-guards.ts # 路由守卫（登录校验/菜单加载）
|
||
├── settings/ # 项目配置（标题/主题/布局）
|
||
├── store/ # Pinia 状态管理
|
||
│ └── modules/
|
||
│ ├── user.ts # 用户 Store（Token/用户信息/权限）
|
||
│ ├── asyncRoute.ts # 动态路由 Store
|
||
│ ├── tabsView.ts # 标签页 Store
|
||
│ ├── projectSetting.ts # 项目配置 Store
|
||
│ ├── designSetting.ts # 主题设计 Store
|
||
│ ├── lockscreen.ts # 锁屏 Store
|
||
│ └── ossConfig.ts # 云存储配置 Store
|
||
├── styles/ # 全局样式（Tailwind / 主题变量）
|
||
├── utils/ # 工具函数
|
||
│ ├── http/axios/ # HTTP 请求封装（拦截器）
|
||
│ └── Storage.ts # 本地存储封装
|
||
└── views/ # 页面视图
|
||
├── login/ # 登录页
|
||
├── dashboard/ # 仪表盘
|
||
├── system/ # 系统管理页面
|
||
├── content/ # 内容管理页面
|
||
├── data/ # 数据管理页面
|
||
├── monitor/ # 监控管理页面
|
||
├── file/ # 文件管理页面
|
||
├── setting/ # 设置页面（个人资料等）
|
||
├── tool/ # 工具页面（示例/代码生成器）
|
||
├── iframe/ # 内嵌 iframe 页面
|
||
├── redirect/ # 重定向页面
|
||
└── exception/ # 异常页面（403/404/500）
|
||
```
|
||
|
||
## 分层调用关系
|
||
|
||
```text
|
||
views/（页面）
|
||
│ 调用
|
||
▼
|
||
api/（接口函数）──→ utils/http/axios（拦截器 + Token + 响应解包）──→ 后端 API
|
||
│
|
||
▼
|
||
store/（全局状态：用户、权限、动态路由、标签页）
|
||
│
|
||
▼
|
||
directives/（v-perm 按权限显隐） + hooks/（复用逻辑）
|
||
```
|
||
|
||
## 命名规范
|
||
|
||
| 类型 | 规范 | 示例 |
|
||
|------|------|------|
|
||
| API 文件 | 小写业务域名 | `user.ts`、`example.ts` |
|
||
| 页面目录 | 小写业务域名 | `views/system/user/` |
|
||
| 组件 | 大驼峰 | `BasicTable`、`BasicUpload` |
|
||
| Store | 驼峰 + Store 后缀引用 | `useUserStore` |
|
||
| Hooks | `use` 前缀 | `usePermission`、`usePage` |
|
||
| 枚举 | 大驼峰 | `HttpEnum`、`PageEnum` |
|
||
|
||
:::tip 页面标准文件
|
||
每个业务页面目录由 5 个文件组成（与代码生成器输出一致）：`index.vue`（列表）、`edit.vue`（编辑弹窗）、`detail.vue`（详情）、`columns.ts`（表格列）、`querySchemas.ts`（查询条件）——见 [9.12 新增页面开发步骤](/zh/frontend/new-page.html)。
|
||
:::
|