85 lines
3.3 KiB
Markdown
85 lines
3.3 KiB
Markdown
# AGENTS.md
|
||
|
||
You are an expert in JavaScript, Rsbuild, and web application development. You write maintainable, performant, and accessible code.
|
||
|
||
## Tech Stack
|
||
|
||
- **React 19** + **TypeScript** — frontend framework and type system
|
||
- **Rsbuild 2** — build tool (wraps Rspack), configured in `rsbuild.config.ts`
|
||
- **React Router v7** (`react-router`) — client-side routing
|
||
- **antd 6** + **@ant-design/icons 6** — UI component library and icon set
|
||
- **pnpm** — package manager
|
||
|
||
## Commands
|
||
|
||
- `pnpm run dev` - Start the dev server (auto-opens http://localhost:3000)
|
||
- `pnpm run build` - Build the app for production (output: `dist/`)
|
||
- `pnpm run preview` - Preview the production build locally
|
||
- `pnpm run lint` - Lint TypeScript/TSX files with ESLint
|
||
- `pnpm run format` - Format all files with Prettier
|
||
|
||
## Project Structure
|
||
|
||
```
|
||
src/
|
||
index.tsx # App entry point — mounts React root to #root
|
||
App.tsx # Root component — renders <RouterProvider>
|
||
App.css # Root component styles
|
||
router.tsx # createBrowserRouter，由 routes 树自动生成
|
||
env.d.ts # Rsbuild environment type declarations
|
||
routes/
|
||
types.ts # RouteItem 类型定义
|
||
index.tsx # 路由树数据（唯一数据源），导出 routes / RouteItem
|
||
utils.tsx # toRouteObjects()：将路由树转为 React Router RouteObject[]
|
||
layouts/
|
||
RootLayout.tsx # Root layout with nav links and <Outlet />
|
||
pages/
|
||
Home.tsx # "/" index page
|
||
About.tsx # "/about" page
|
||
NotFound.tsx # "*" catch-all 404 page
|
||
public/
|
||
favicon.png
|
||
rsbuild.config.ts # Build configuration
|
||
eslint.config.mjs # ESLint flat config (TS/TSX only, dist/ ignored)
|
||
tsconfig.json
|
||
```
|
||
|
||
## Routing
|
||
|
||
Uses **React Router v7** (`react-router`) with `createBrowserRouter`.
|
||
|
||
- **唯一数据源**：`src/routes/index.tsx` 维护 `routes: RouteItem[]` 路由树
|
||
- `RouteItem` 字段：`path` / `label` / `icon?` / `component?` / `hideInMenu?` / `redirect?` / `children?`
|
||
- `toRouteObjects(routes)` 将路由树转换为 React Router 所需的 `RouteObject[]`
|
||
- 菜单、面包屑等模块直接消费 `routes` 数组，无需重复维护路由信息
|
||
- 添加新页面：在 `src/pages/` 创建组件，在 `src/routes/index.tsx` 追加节点即可
|
||
|
||
## TypeScript Configuration
|
||
|
||
- `noUnusedLocals` and `noUnusedParameters` are enabled — unused variables/parameters are errors
|
||
- `verbatimModuleSyntax` is enabled — type-only imports must use `import type`
|
||
- `moduleResolution: "bundler"` — use bundler-style module resolution
|
||
|
||
## Code Style
|
||
|
||
- **Single quotes** (`singleQuote: true` in `.prettierrc`)
|
||
- ESLint applies to `**/*.{ts,tsx}` only, with `react-hooks` and `react-refresh` plugins enabled
|
||
|
||
## UI Components (antd)
|
||
|
||
- Import components directly from `antd`, icons from `@ant-design/icons` — tree-shaking is automatic
|
||
- To customize the theme, wrap the app with `ConfigProvider` in `App.tsx`:
|
||
```tsx
|
||
import { ConfigProvider } from 'antd';
|
||
<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
|
||
<RouterProvider router={router} />
|
||
</ConfigProvider>
|
||
```
|
||
|
||
## Docs
|
||
|
||
- Rsbuild: https://rsbuild.rs/llms.txt
|
||
- Rspack: https://rspack.rs/llms.txt
|
||
- antd v6 完整文档（中文）: https://ant.design/llms-full-cn.txt
|
||
- antd v6 组件单页（中文）: https://ant.design/components/{组件名}-cn.md（如 button-cn.md）
|