dev #2
42
AGENTS.md
42
AGENTS.md
@@ -23,20 +23,26 @@
|
||||
```
|
||||
src/
|
||||
index.tsx # 应用入口,将 React 根节点挂载到 #root
|
||||
App.tsx # 根组件,渲染 <RouterProvider>
|
||||
App.css # 根组件样式
|
||||
App.tsx # 根组件,渲染 <RouterProvider>,包含 ConfigProvider / AntdApp 全局配置
|
||||
App.css # 全局样式(reset)
|
||||
router.tsx # createBrowserRouter,由路由树自动生成
|
||||
env.d.ts # Rsbuild 环境类型声明
|
||||
env.d.ts # Rsbuild 环境变量类型声明(ImportMetaEnv)
|
||||
routes/
|
||||
types.ts # RouteItem 类型定义
|
||||
index.tsx # 路由树数据(唯一数据源),导出 routes / RouteItem
|
||||
utils.tsx # toRouteObjects():将路由树转为 React Router RouteObject[]
|
||||
layouts/
|
||||
RootLayout.tsx # 根布局,包含导航链接和 <Outlet />
|
||||
RootLayout.tsx # 根布局(Header + Sider + Content)
|
||||
pages/
|
||||
Home.tsx # "/" 首页
|
||||
About.tsx # "/about" 关于页
|
||||
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/
|
||||
favicon.png
|
||||
rsbuild.config.ts # 构建配置
|
||||
@@ -44,6 +50,19 @@ eslint.config.mjs # ESLint 扁平配置(仅作用于 TS/TSX,忽略 dist/)
|
||||
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`。
|
||||
@@ -87,6 +106,21 @@ import { ConfigProvider } from 'antd';
|
||||
</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
|
||||
|
||||
Reference in New Issue
Block a user