使用说明

Ant Design with MCP - 后台管理系统

📖 项目简介

这是一个使用 Model Context Protocol (MCP) 实现自动代码生成的完整后台管理系统示例。通过 MCP 服务，AI 助手可以自动获取 Ant Design 组件和 ahooks 库的最新文档和使用示例，从而生成高质量、符合最佳实践的代码。

✨ 核心特性

🤖 AI 驱动开发: 通过 MCP 服务自动获取组件文档和示例
📚 智能代码生成: 基于最新的 Ant Design 和 ahooks 文档生成代码
🎯 最佳实践: 遵循官方推荐的使用方式和设计模式
🔧 开发规范: 统一的代码风格和项目结构

🛠 技术栈

React 18.3.1: 现代化的 React 开发
TypeScript: 类型安全的开发体验
Ant Design 6.0.0: 企业级 UI 组件库
ahooks 3.9.0: 强大的 React Hooks 工具库
React Router 7.7.1: 路由管理
SCSS: BEM 命名规范的样式方案

🚀 MCP 配置指南

1. 配置 MCP 服务

在项目的 .vscode/mcp.json 文件中配置 MCP 服务：

{
  "inputs": [],
  "servers": {
    "ant-design": {
      "type": "stdio",
      "command": "ant-design-mcp"
    },
    "ahooks": {
      "type": "stdio",
      "command": "ahooks-mcp"
    },
    "memory": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"]
    }
  }
}

2. 安装 MCP 服务

# 安装 Ant Design MCP 服务
npm install -g ant-design-mcp

# 安装 ahooks MCP 服务
npm install -g ahooks-mcp

3. 开发指令配置

在 .github/instructions/ 目录下配置 AI 助手的开发规范：

00-dev.instructions.md - 基础开发规范

React 函数式组件 + TypeScript
箭头函数语法
SCSS + BEM 命名规范
导入顺序规范
文件头注释规范

01-mcp.ant.instructions.md - MCP 使用规范

强制使用 MCP 服务获取组件信息
Ant Design 组件使用流程
ahooks Hooks 使用流程
标准工作流程示例

📋 可用的 MCP 工具

Ant Design 组件工具

// 获取所有组件列表
mcp_ant-design_get_all_component_names()

// 搜索组件
mcp_ant-design_search_components({ keyword: "table" })

// 获取组件详细信息
mcp_ant-design_get_component_info({ componentName: "Table" })

// 获取组件使用示例
mcp_ant-design_get_component_example({ componentName: "Table" })

// 按类别获取组件
mcp_ant-design_get_components_by_category({ category: "Data Display" })

ahooks 工具

// 获取所有 Hook 列表
mcp_ahooks_get_all_hook_names()

// 搜索 Hook
mcp_ahooks_search_hooks({ keyword: "request" })

// 获取 Hook 详细信息
mcp_ahooks_get_hook_info({ name: "useRequest" })

// 按类别获取 Hooks
mcp_ahooks_get_hooks_by_category({ category: "Request" })

// 获取所有类别
mcp_ahooks_get_all_categories()

💡 使用示例

场景 1：创建用户管理页面

搜索相关组件

// AI 助手自动调用
mcp_ant-design_search_components({ keyword: "table" })
mcp_ant-design_search_components({ keyword: "form" })

获取组件详细信息

mcp_ant-design_get_component_info({ componentName: "Table" })
mcp_ant-design_get_component_info({ componentName: "Form" })
mcp_ant-design_get_component_info({ componentName: "Modal" })

获取 Hooks 信息

mcp_ahooks_get_hook_info({ name: "useRequest" })
mcp_ahooks_get_hook_info({ name: "useAntdTable" })

AI 自动生成代码
- 基于最新文档生成 TypeScript 类型定义
- 生成符合最佳实践的组件代码
- 自动添加必要的导入和配置

场景 2：添加新功能

当需要添加新功能时，只需告诉 AI：

"请添加一个数据统计页面，包含图表展示和数据筛选功能"

AI 会自动：

调用 MCP 搜索相关组件（Chart、DatePicker、Select 等）
获取组件的详细 API 和示例
查询合适的 ahooks（如 useRequest、useDebounce）
生成完整的、类型安全的代码

📁 项目结构

ant-design-with-mcp/
├── .github/
│   └── instructions/              # AI 助手开发指令
│       ├── 00-dev.instructions.md # 基础开发规范
│       └── 01-mcp.ant.instructions.md # MCP 使用规范
├── .vscode/
│   └── mcp.json                   # MCP 服务配置
├── src/
│   ├── components/
│   │   ├── Layout/                # 布局组件
│   │   │   └── MainLayout.tsx     # 主布局（头部、侧边栏、面包屑）
│   │   ├── Dashboard/             # 工作台页面
│   │   ├── UserManagement/        # 用户管理页面
│   │   ├── Settings/              # 系统设置页面
│   │   └── NotFound/              # 404 页面
│   ├── routes/
│   │   ├── index.tsx              # 路由配置和菜单生成
│   │   └── routeConfig.tsx        # 路由懒加载配置
│   ├── services/
│   │   └── userService.ts         # 模拟 API 服务
│   ├── types/
│   │   └── user.ts                # TypeScript 类型定义
│   ├── scss/
│   │   └── common.scss            # 公共样式
│   ├── App.tsx                    # 应用入口
│   └── index.tsx                  # React 渲染入口
├── package.json
└── README.md

🎨 已实现功能

1. 后台布局系统

响应式顶部导航栏
可折叠侧边栏菜单（自动根据路由配置生成）
面包屑导航
用户信息下拉菜单

2. 工作台页面

系统统计数据卡片
快捷入口
系统通知

3. 用户管理

用户列表表格（分页、排序、搜索）
添加用户（表单验证）
编辑用户
删除用户（确认提示）
20 条中文模拟数据

4. 系统设置

基础设置: 系统名称、版本、语言、时区
安全设置: 密码修改、双因素认证、会话超时、API 密钥

5. 技术特性

React Router 路由管理
路由组件懒加载（React.lazy + Suspense）
菜单自动生成（基于路由配置）
TypeScript 类型安全
SCSS 模块化样式

🔧 快速开始

安装依赖

npm install

启动开发服务器

npm start

应用将在 http://localhost:3000 打开


## 🤖 AI 辅助开发流程

### 准备工作

1. **配置 VS Code**
   - 安装 GitHub Copilot 扩展
   - 配置 `.vscode/mcp.json` 文件

2. **安装 MCP 服务**
   ```bash
   npm install -g ant-design-mcp ahooks-mcp

配置开发指令
- 在 .github/instructions/ 中编写 AI 助手规范
- 使用 --- 和 applyTo 指定应用范围

开发新功能

示例：添加数据统计页面

与 AI 对话

用户: "请创建一个数据统计页面，包含用户增长趋势图、活跃用户饼图和数据汇总卡片"

AI 自动执行
- 🔍 搜索相关组件: mcp_ant-design_search_components({ keyword: "chart" })
- 📖 获取组件文档: mcp_ant-design_get_component_info({ componentName: "Card" })
- 🎣 查询 Hooks: mcp_ahooks_get_hook_info({ name: "useRequest" })
- ✨ 生成代码并自动保存
AI 生成内容
- TypeScript 类型定义
- React 函数式组件
- 符合 BEM 规范的 SCSS 样式
- 自动添加路由配置
- 更新菜单项

开发指令示例

在 .github/instructions/ 中配置：

---
applyTo: '**/*.{tsx,ts}'
---

# 强制使用 MCP 服务

1. 使用任何 Ant Design 组件前，必须调用 MCP 获取最新文档
2. 优先使用 ahooks 提供的 Hooks
3. 遵循 TypeScript 类型安全原则
4. 使用 BEM 命名规范编写样式

🎯 MCP 最佳实践

1. 组件开发流程

// Step 1: 搜索组件
mcp_ant-design_search_components({ keyword: "table" })

// Step 2: 获取详细文档
mcp_ant-design_get_component_info({ componentName: "Table" })

// Step 3: 查看示例代码
mcp_ant-design_get_component_example({ componentName: "Table" })

// Step 4: 获取相关 Hooks
mcp_ahooks_search_hooks({ keyword: "table" })
mcp_ahooks_get_hook_info({ name: "useAntdTable" })

// Step 5: AI 自动生成代码

2. 代码质量保证

✅ 类型安全: 所有组件都有 TypeScript 类型
✅ 最佳实践: 基于官方文档生成代码
✅ 统一规范: 遵循项目配置的开发指令
✅ 自动更新: MCP 服务提供最新的组件信息

3. 常见场景

场景	MCP 工具调用
创建表单	`search_components("form")` → `get_component_info("Form")`
数据展示	`get_components_by_category("Data Display")`
状态管理	`get_hooks_by_category("State")`
请求处理	`get_hook_info("useRequest")`
表格操作	`get_hook_info("useAntdTable")`

📚 学习资源

🤝 贡献指南

Fork 本仓库
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

📄 开源协议

MIT License

👤 作者

leon.wang