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:

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）

3.3 KiB Raw Blame History Unescape Escape