docs: 更新 AGENTS.md,补充环境变量与 HTTP 请求说明

This commit is contained in:
2026-05-15 13:11:16 +08:00
parent 0ffa0e1ddf
commit f31c459610

View File

@@ -23,27 +23,46 @@
``` ```
src/ src/
index.tsx # 应用入口,将 React 根节点挂载到 #root index.tsx # 应用入口,将 React 根节点挂载到 #root
App.tsx # 根组件,渲染 <RouterProvider> App.tsx # 根组件,渲染 <RouterProvider>,包含 ConfigProvider / AntdApp 全局配置
App.css # 根组件样式 App.css # 全局样式reset
router.tsx # createBrowserRouter由路由树自动生成 router.tsx # createBrowserRouter由路由树自动生成
env.d.ts # Rsbuild 环境类型声明 env.d.ts # Rsbuild 环境变量类型声明ImportMetaEnv
routes/ routes/
types.ts # RouteItem 类型定义 types.ts # RouteItem 类型定义
index.tsx # 路由树数据(唯一数据源),导出 routes / RouteItem index.tsx # 路由树数据(唯一数据源),导出 routes / RouteItem
utils.tsx # toRouteObjects():将路由树转为 React Router RouteObject[] utils.tsx # toRouteObjects():将路由树转为 React Router RouteObject[]
layouts/ layouts/
RootLayout.tsx # 根布局,包含导航链接和 <Outlet /> RootLayout.tsx # 根布局Header + Sider + Content
pages/ pages/
Home.tsx # "/" 首页 Home.tsx # "/" 首页
About.tsx # "/about" 关于页 About.tsx # "/about" 关于页
NotFound.tsx # "*" 兜底 404 页 NotFound.tsx # "*" 兜底 404 页
types/
http.d.ts # 全局 API 命名空间(无需 import 直接使用 API.Response<T>
utils/
request.ts # axios 实例封装,导出 get / post / put / del
.env # 本地环境变量(已 gitignore勿提交
.env.example # 环境变量模板(提交到仓库供参考)
public/ public/
favicon.png favicon.png
rsbuild.config.ts # 构建配置 rsbuild.config.ts # 构建配置
eslint.config.mjs # ESLint 扁平配置(仅作用于 TS/TSX忽略 dist/ eslint.config.mjs # ESLint 扁平配置(仅作用于 TS/TSX忽略 dist/
tsconfig.json tsconfig.json
``` ```
## 环境变量
- 变量文件:`.env`(本地,已 gitignore
- 模板文件:`.env.example`(提交到仓库)
- 新成员初始化:`cp .env.example .env`
- Rsbuild 规则:**以 `PUBLIC_` 为前缀**的变量会暴露给客户端,通过 `import.meta.env.PUBLIC_XXX` 读取
| 变量 | 说明 |
|------|------|
| `PUBLIC_BASE_URL` | 后端接口 baseURL |
不同环境可创建 `.env.development` / `.env.production` 覆盖默认值,`.env.example` 中同步维护所有变量。
## 路由 ## 路由
使用 **React Router v7**`react-router`)的 `createBrowserRouter` 使用 **React Router v7**`react-router`)的 `createBrowserRouter`
@@ -87,6 +106,21 @@ import { ConfigProvider } from 'antd';
</ConfigProvider> </ConfigProvider>
``` ```
## HTTP 请求
- 所有请求通过 `src/utils/request.ts` 封装的方法发出,不直接使用 `axios`
- 导出方法:`get` / `post` / `put` / `del`,返回值类型自动推断为 `API.Response<T>`
- 全局响应结构 `API.Response<T>` 定义在 `src/types/http.d.ts`,无需 import 直接使用
- 请求拦截器(添加 token和响应拦截器处理错误码统一在 `request.ts` 中维护
```ts
// 使用示例
import { get, post } from '../utils/request';
const res = await get<User[]>('/api/users');
// res.code / res.msg / res.data / res.ok / res.time
```
## 参考文档 ## 参考文档
- Rsbuild: https://rsbuild.rs/llms.txt - Rsbuild: https://rsbuild.rs/llms.txt