# 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）