AGENTS.md

你是 JavaScript、Rsbuild 和 Web 应用开发方面的专家，编写可维护、高性能且无障碍的代码。

技术栈

React 19 + TypeScript — 前端框架和类型系统
Rsbuild 2 — 构建工具（基于 Rspack），配置文件为 rsbuild.config.ts
React Router v7（react-router）— 客户端路由
antd 6 + @ant-design/icons 6 — UI 组件库和图标集
pnpm — 包管理器

常用命令

pnpm run dev — 启动开发服务器（自动打开 http://localhost:3000）
pnpm run build — 构建生产版本（输出至 dist/）
pnpm run preview — 本地预览生产构建
pnpm run lint — 使用 ESLint 检查 TypeScript/TSX 文件
pnpm run format — 使用 Prettier 格式化所有文件

项目结构

src/
  index.tsx          # 应用入口，将 React 根节点挂载到 #root
  App.tsx            # 根组件，渲染 <RouterProvider>
  App.css            # 根组件样式
  router.tsx         # createBrowserRouter，由路由树自动生成
  env.d.ts           # Rsbuild 环境类型声明
  routes/
    types.ts         # RouteItem 类型定义
    index.tsx        # 路由树数据（唯一数据源），导出 routes / RouteItem
    utils.tsx        # toRouteObjects()：将路由树转为 React Router RouteObject[]
  layouts/
    RootLayout.tsx   # 根布局，包含导航链接和 <Outlet />
  pages/
    Home.tsx         # "/" 首页
    About.tsx        # "/about" 关于页
    NotFound.tsx     # "*" 兜底 404 页
public/
  favicon.png
rsbuild.config.ts  # 构建配置
eslint.config.mjs  # ESLint 扁平配置（仅作用于 TS/TSX，忽略 dist/）
tsconfig.json

路由

使用 React Router v7（react-router）的 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 配置

已启用 noUnusedLocals 和 noUnusedParameters，未使用的变量/参数会报错
已启用 verbatimModuleSyntax，纯类型导入必须使用 import type
moduleResolution: "bundler"，使用打包器风格的模块解析

代码风格

单引号（.prettierrc 中 singleQuote: true）
ESLint 仅作用于 **/*.{ts,tsx}，启用了 react-hooks 和 react-refresh 插件

UI 组件规范（antd）

页面 UI 优先使用 antd 组件，不自行实现已有组件的功能。

从 antd 直接导入组件，从 @ant-design/icons 导入图标，自动 tree-shaking
布局使用 Layout（Header / Sider / Content / Footer）
导航使用 Menu，面包屑使用 Breadcrumb
表单使用 Form + Form.Item，不使用原生 <form>
按钮使用 Button，不使用原生 <button>
弹窗使用 Modal，消息提示使用 message / notification
数据展示使用 Table / List / Descriptions / Card
空状态使用 Empty，加载状态使用 Spin / Skeleton
404 页面使用 Result status="404"

自定义主题通过 ConfigProvider 在 App.tsx 统一配置：

import { ConfigProvider } from 'antd';
<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
  <RouterProvider router={router} />
</ConfigProvider>

参考文档

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.8 KiB Raw Blame History Unescape Escape

AGENTS.md

技术栈

常用命令

项目结构

路由

TypeScript 配置

代码风格

UI 组件规范（antd）

参考文档

3.8 KiB

Raw Blame History