前端结构约定
Forge 前端基于 Vue 3.5 + Vite 7 + Naive UI 构建，采用组合式 API（<script setup>）。你需要了解各目录的职责，才能快速定位文件位置。
目录结构
forge-admin-ui/src/
├── api/ # API 接口定义（按模块拆分）
├── components/ # 公共组件
├── composables/ # 组合式 API
├── layouts/ # 布局组件
├── router/ # 路由配置
├── stores/ # Pinia Store
├── utils/ # 工具函数
├── views/ # 页面视图
├── styles/ # 全局样式
└── config/ # 应用配置各目录职责
| 目录 | 职责 | 文件命名 |
|---|---|---|
api/ | 后端接口定义，按模块拆分 | user.ts、role.ts |
components/ | 可复用公共组件 | DictSelect.vue、FileUpload/ |
composables/ | 组合式函数 | useDict.ts、usePermission.ts |
layouts/ | 布局骨架组件 | BasicLayout.vue |
router/ | 路由表与动态路由生成 | index.ts、guards.ts |
stores/ | Pinia 状态管理 | user.ts、permission.ts |
utils/ | 工具函数 | request.ts、encrypt-request.ts |
views/ | 页面视图，按模块分子目录 | system/user/index.vue |
styles/ | 全局样式与 UnoCSS 配置 | variables.scss |
config/ | 应用配置 | app.ts |
核心组件速查
| 组件 | 路径 | 用途 |
|---|---|---|
AiCrudPage | 内建组件 | 零代码 CRUD 页面（配置 api-config + schema） |
DictSelect | @/components/DictSelect.vue | 字典下拉选择 |
DictTag | @/components/DictTag.vue | 字典标签渲染 |
FileUpload | @/components/file-upload/ | 文件上传 |
AuthImage | @/components/common/AuthImage.vue | 鉴权图片（自动带 Token） |
RegionTreeSelect | @/components/RegionTreeSelect.vue | 行政区划树选择 |
IconSelector | @/components/IconSelector.vue | 图标选择器 |
API 层约定
- 统一请求工具：
import { request } from '@/utils/http' - 加密请求：
import { postEncrypt } from '@/utils/encrypt-request' - 接口路径格式：
METHOD@/api/module/action - 占位符格式：
:id（冒号），不是{id} - 分页参数：前端传
pageNum+pageSize
按钮样式约定
使用 UnoCSS 语义化颜色类：
vue
<a class="text-primary cursor-pointer hover:text-primary-hover" @click="handleEdit(row)">编辑</a>
<a class="text-error cursor-pointer hover:text-error-hover" @click="handleDelete(row)">删除</a>| 类名 | 场景 |
|---|---|
text-primary | 编辑、查看、授权 |
text-info | 详情、统计 |
text-warning | 刷新缓存、重置 |
text-error | 删除、强制下线 |
text-success | 启用、发布、通过 |