99 lines
4.9 KiB
Markdown
99 lines
4.9 KiB
Markdown
# 9.2 目录结构详解
|
||
|
||
:::tip 概述
|
||
前端目录按"共享层平铺、页面层按域分目录"组织：api/views 按域（system/data/content/monitor/tool）对应后端模块域；components/store/utils/hooks 全局共享。本节逐层说明。
|
||
:::
|
||
|
||
## src 目录树
|
||
|
||
```text
|
||
ui/src/
|
||
├── App.vue
|
||
├── main.ts # 入口：挂载 Pinia/Router/ElementPlus 等
|
||
├── api/ # 接口模块（按域分目录）
|
||
│ ├── common/ # city/index/menu/user（跨域公共接口）
|
||
│ ├── content/ # article/category/link
|
||
│ ├── dashboard/ # console/message
|
||
│ ├── data/ # city/config/dictionary/notice/param
|
||
│ ├── file/ # fileTemplate
|
||
│ ├── monitor/ # cacheMonitor/job/onlineUser/serverMonitor…
|
||
│ ├── region/ # region（区划）
|
||
│ ├── setting/ # profile/web
|
||
│ ├── system/ # dept/dictionary/level/loginLog/menu/operLog/position/role…
|
||
│ └── tool/ # example/generator
|
||
├── components/ # 公共组件（25 类）
|
||
│ ├── Application Authority CheckToken ChinaArea CountTo Cropper Editor
|
||
│ ├── Excel Form Lockscreen Modal Page Password Qrcode Region Render
|
||
│ ├── Select Table TableSelect Upload Websocket icon importFile
|
||
│ ├── numberInput pagination priceInput …
|
||
├── directives/ # 自定义指令
|
||
│ ├── permission.ts # 权限指令（按钮级显隐）
|
||
│ ├── clickOutside.ts / scrollBar.ts
|
||
├── enums/ # 枚举常量
|
||
│ ├── httpEnum.ts # RequestEnum/ResultEnum/ContentTypeEnum
|
||
│ ├── pageEnum.ts cacheEnum.ts permissionsEnum.ts roleEnum.ts …
|
||
├── hooks/ # 组合式函数
|
||
│ ├── core/ event/ setting/ web/
|
||
│ ├── use-async.ts useBattery.ts useDomWidth.ts useOnline.ts useTime.ts
|
||
├── layout/ # 布局系统（侧栏/顶栏/标签页/面包屑）
|
||
├── router/
|
||
│ ├── constant.ts # 常量路由（login/redirect/403/404…）
|
||
│ ├── generator-routers.ts # 动态菜单路由生成（消费 getMenus）
|
||
│ ├── router-guards.ts # 守卫（token 校验/动态路由注入/进度条）
|
||
│ ├── base.ts router-icons.ts menus/ types.ts index.ts
|
||
├── settings/ # 全局设置
|
||
│ ├── projectSetting.ts # 项目设置（主题/水印/标签页等）
|
||
│ ├── designSetting.ts componentSetting.ts animateSetting.ts
|
||
├── store/ # Pinia
|
||
│ ├── modules/
|
||
│ │ ├── user.ts # 登录/令牌/身份信息
|
||
│ │ ├── asyncRoute.ts # 动态路由
|
||
│ │ ├── tabsView.ts # 标签页
|
||
│ │ ├── designSetting.ts projectSetting.ts lockscreen.ts ossConfig.ts
|
||
│ ├── mutation-types.ts # ACCESS_TOKEN 等存储键常量
|
||
│ ├── index.ts types.ts plugins/
|
||
├── styles/ # 全局样式与主题变量（Element Plus 变量覆盖）
|
||
├── utils/
|
||
│ ├── http/axios/ # HTTP 封装（VAxios/transform/checkStatus…）
|
||
│ ├── auth.ts Storage.ts # 路径工具 / 本地存储封装
|
||
│ ├── downloadFile.ts dateUtil.ts validate.ts propTypes.ts …
|
||
│ ├── file/ helper/ is/ lib/
|
||
├── views/ # 页面（按域分目录）
|
||
│ ├── system/ data/ content/ monitor/ tool/ file/ setting/
|
||
│ ├── dashboard/ login/ exception/ iframe/ redirect/ about/
|
||
└── plugins/ assets/
|
||
```
|
||
|
||
## 命名约定
|
||
|
||
```text
|
||
api 文件：驼峰（fileTemplate.ts、onlineUser.ts）
|
||
views 目录/文件：域/驼峰模块（content/article/index.vue）
|
||
配置文件：camelCase（columns.ts、querySchemas.ts）
|
||
组件：PascalCase（.vue）
|
||
后端对照：前端驼峰 ↔ 后端 snake（fileTemplate ↔ file_template）——
|
||
联调时注意两边命名形态不同
|
||
```
|
||
|
||
## 页面标准五件套
|
||
|
||
```text
|
||
views/{域}/{模块}/
|
||
├── index.vue # 列表页（分页表格 + 筛选 + 增删改入口）
|
||
├── edit.vue # 新增/编辑弹窗
|
||
├── detail.vue # 详情
|
||
├── columns.ts # 表格列配置
|
||
└── querySchemas.ts # 筛选表单配置
|
||
|
||
（生成器树形模块用 ui2 模板：index/edit/detail 三件，无 columns/querySchemas）
|
||
```
|
||
|
||
## 分目录的理由
|
||
|
||
| 层 | 组织方式 | 理由 |
|
||
|----|---------|------|
|
||
| api/views | 按域分目录 | 与后端模块域、生成器 genDomainMap 一致，心智对齐 |
|
||
| components/hooks/utils | 全局平铺 | 跨域共享，避免"通用组件放哪个域"的争议 |
|
||
| enums/settings/styles | 全局 | 全局配置面 |
|
||
| store/modules | 按状态域一文件 | user/asyncRoute 等状态域清晰 |
|