签入版本

2026-10-08 17:50:29 +08:00
parent 809750b47e
commit e213a9b31d
444 changed files with 39366 additions and 37533 deletions
@@ -1,7 +1,7 @@
 # 9.2 目录结构详解

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

 ```text
@@ -18,10 +18,10 @@ ui/src/
 │   ├── setting/                # 设置（个人资料/网站配置）
 │   └── tool/                   # 工具（示例/代码生成器）
 ├── components/                 # 公共组件库（20+ 个）
-│   ├── Table/                  # 数据表格
-│   ├── Form/                   # 动态表单
+│   ├── Table/                  # 数据表格（BasicTable）
+│   ├── Form/                   # 动态表单（BasicForm）
 │   ├── Modal/                  # 弹窗
-│   ├── Upload/                 # 文件上传
+│   ├── Upload/                 # 文件上传（BasicUpload）
 │   ├── Editor/                 # 富文本编辑器
 │   ├── Excel/                  # Excel 导入导出
 │   ├── Cropper/                # 头像裁剪
@@ -35,20 +35,29 @@ ui/src/
 │   ├── httpEnum.ts             # HTTP 枚举
 │   └── pageEnum.ts             # 页面枚举
 ├── hooks/                      # 组合式函数
-├── layout/                     # 布局组件
+│   ├── core/ event/ setting/ web/
+│   └── web/usePermission.ts 等 # 权限、页面、图表等复用逻辑
+├── layout/                     # 布局组件（侧边栏/顶栏/内容区）
+├── plugins/                    # 插件
 ├── router/                     # 路由配置
 │   ├── index.ts                # 路由实例
-│   ├── base.ts                 # 静态路由
-│   ├── generator-routers.ts    # 动态路由生成
-│   └── router-guards.ts        # 路由守卫
+│   ├── base.ts                 # 静态路由（登录/404）
+│   ├── generator-routers.ts    # 动态路由生成（后端菜单 → 路由）
+│   └── router-guards.ts        # 路由守卫（登录校验/菜单加载）
+├── settings/                   # 项目配置（标题/主题/布局）
 ├── store/                      # Pinia 状态管理
 │   └── modules/
-│       ├── user.ts             # 用户 Store
+│       ├── user.ts             # 用户 Store（Token/用户信息/权限）
 │       ├── asyncRoute.ts       # 动态路由 Store
-│       └── ...
-├── styles/                     # 全局样式
+│       ├── tabsView.ts         # 标签页 Store
+│       ├── projectSetting.ts   # 项目配置 Store
+│       ├── designSetting.ts    # 主题设计 Store
+│       ├── lockscreen.ts       # 锁屏 Store
+│       └── ossConfig.ts        # 云存储配置 Store
+├── styles/                     # 全局样式（Tailwind / 主题变量）
 ├── utils/                      # 工具函数
-│   └── http/                   # HTTP 请求封装
+│   ├── http/axios/              # HTTP 请求封装（拦截器）
+│   └── Storage.ts              # 本地存储封装
 └── views/                      # 页面视图
    ├── login/                  # 登录页
    ├── dashboard/              # 仪表盘
@@ -56,6 +65,40 @@ ui/src/
    ├── content/                # 内容管理页面
    ├── data/                   # 数据管理页面
    ├── monitor/                # 监控管理页面
-    ├── tool/                   # 工具页面
-    └── exception/              # 异常页面
-```
+    ├── 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)。
+:::