---
name: jjb-project-directory-structure
description: 定义 JJB 微应用标准项目目录结构。在搭建项目、创建 src/pages/api/enumerate/hooks/utils 等目录或查阅 main.js、Container、InjectContext 时使用。
---

# 项目页面结构

## 项目目录结构示意图

> **说明**：以下为项目的**经典/标准目录结构示意图**，展示了微应用的标准文件组织方式。实际项目中的文件结构可能会根据具体需求略有调整，但整体结构保持一致。

```
项目根目录/
├── public/
│   └── index.html              # 项目 HTML 模板
├── src/
│   ├── main.js                 # 应用入口文件
│   ├── pages/                  # 应用页面文件夹
│   │   └── Container/          # 应用页面入口容器（常规页面存放于此，外部页面可直接放在 pages/ 下）
│   │       ├── Entry/          # 应用首页
│   │       ├── UserList/       # 示例：用户列表页
│   │       │   ├── index.js
│   │       │   └── index.less
│   │       └── UserDetail_id/  # 示例：用户详情页（动态路由）
│   │           ├── index.js
│   │           └── index.less
│   ├── components/             # 公共组件目录
│   │   └── CommonButton/
│   │       ├── index.js
│   │       └── index.less
│   ├── api/                    # 应用接口服务管理
│   │   ├── user/               # 用户相关接口（小驼峰命名）
│   │   │   └── index.js
│   │   └── order/              # 订单相关接口
│   │       └── index.js
│   ├── enumerate/              # 应用枚举、常量、命名空间
│   │   ├── namespace/          # 命名空间定义
│   │   │   └── index.js
│   │   ├── enum/               # 枚举值
│   │   │   └── index.js
│   │   ├── constant/           # 常量
│   │   │   └── index.js
│   │   └── context/            # React 全局 Context（导出 InjectContext）
│   │       └── index.js
│   ├── hooks/                  # 自定义 Hooks 目录
│   │   └── useDict.js          # 示例：字典数据 Hook
│   └── utils/                  # 工具函数库
│       └── index.js
├── jjb.config.js               # 应用配置文件
├── jjb.babel.js                # Babel 配置文件
└── package.json
```

## 核心文件说明

- **应用入口文件**：`src/main.js`
  - 应用的启动入口文件，负责初始化 React 应用、注册路由、注册模型等

- **应用页面文件夹**：`src/pages`
  - 存放所有页面组件的根目录

- **应用接口服务管理**：`src/api`
  - 存放所有接口定义文件，使用 `declareRequest` 定义接口请求
  - 目录命名规范：统一使用 **小驼峰（camelCase）** 命名

- **应用枚举、常量、命名空间**：`src/enumerate`
  - `namespace/`：命名空间定义，使用 `defineNamespace` 定义
  - `enum/`：枚举值定义
  - `constant/`：常量定义
  - `context/`：React 全局 Context 定义，导出 `InjectContext` 上下文

- **自定义 Hooks 目录**：`src/hooks/`
  - 用于存放自定义 Hooks，如字典数据 Hook、业务逻辑 Hook 等
  - 字典数据获取统一使用 Hooks 方式（详细规范参考 [`11-接口与数据层规范`](../../11-接口与数据层规范/05-字典数据获取规范/SKILL.md)）

- **应用页面入口容器**：`src/pages/Container`
  - **核心职责**：
    1. 作为应用页面入口容器，存放常规路由页面（在底座中访问的页面）
    2. 负责应用全局主题配置
    3. 负责 `InjectContext` 上下文注册（值为 `antd useApp()` 值）
    4. 可以通过 `InjectContext` 访问 `antd/App` 里面的数据
  - **`InjectContext` 来源**：`InjectContext` 从 `src/enumerate/context` 导出，在 `src/pages/Container` 中进行注册和使用
  - **路由约束说明**：详细的路由约束规则请参考 [`03-页面目录规则`](../03-页面目录规则/SKILL.md)

- **项目 HTML 模板**：`public/index.html`
  - 项目的 HTML 模板文件，支持 EJS 模板语法，可通过 `windowInject` 配置注入外部资源