9.2 目录结构详解

概述

前端目录按"共享层平铺、页面层按域分目录"组织：api/views 按域（system/data/content/monitor/tool）对应后端模块域；components/store/utils/hooks 全局共享。本节逐层说明。

src 目录树

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/

命名约定

api 文件：驼峰（fileTemplate.ts、onlineUser.ts）
views 目录/文件：域/驼峰模块（content/article/index.vue）
配置文件：camelCase（columns.ts、querySchemas.ts）
组件：PascalCase（.vue）
后端对照：前端驼峰 ↔ 后端 snake（fileTemplate ↔ file_template）——
         联调时注意两边命名形态不同

页面标准五件套

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 等状态域清晰