金大哥 - antd-components-mcp MCP 详情

article

README

🚀 项目结构

本项目主要介绍了项目的目录结构、主要文件说明、缓存机制以及文档抽取和发布机制，帮助开发者更好地理解和使用项目。

🚀 快速开始

本项目的结构和机制有助于开发者高效地管理组件信息，提高系统的响应速度和效率，同时保持文档的最新性。下面将详细介绍项目的各个部分。

📦 安装指南

暂未提供安装步骤相关内容。

✨ 主要特性

目录结构清晰

项目具有明确的目录结构，便于管理和维护组件数据、元数据以及 npm 包配置。

.
├── components          # 组件数据目录
│   ├── alert         # 示例组件目录
│   │   └── doc.md    # 组件文档文件
│   └── examples.json  # 组件示例文件
├── metadata.json       # 元数据文件
└── package.json        # npm 包配置文件

主要文件说明

package.json：npm 包的配置文件，包含项目的名称、版本、描述、脚本和依赖等信息。

{
  "name": "@jzone-mcp/antd-components",
  "version": "1.0.0",
  "description": "Ant Design Components Monitoring Platform",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "extract": "./bin/extract-docs.js"
  },
  "dependencies": {
    "@jzone-mcp/utils": "^1.0.0",
    "express": "^4.18.2"
  }
}

components/components-index.json：组件索引文件，列出了项目中的组件及其相关信息。

[
  {
    "name": "alert",
    "dirName": "alert",
    "title": "Alert 提示框",
    "subtitle": "用于重要信息的提示"
  },
  {
    "name": "button",
    "dirName": "button",
    "title": "Button 按钮",
    "subtitle": "页面中的按钮元素"
  }
]

components/alert/doc.md：以 Alert 提示框组件为例，详细说明了组件的描述、使用方法、API 和示例代码。

## Alert 提示框

### 描述
Alert 组件用于在页面中显示重要信息的提示，支持成功、警告、错误和信息四种类型。

### 使用方法
```javascript
<Alert message="内容" type="success|warning|error|info" />

API

| 参数 | 类型 | 描述 | |------|------|------| | message | string | 提示的内容 | | type | string | 提示的类型，支持 success, warning, error, info 四种值 |

示例代码

<Alert message="操作成功" type="success" />
<Alert message="注意事项" type="warning" />


### 缓存机制
为了提高系统的响应速度和效率，MCP 采用了缓存机制。每次请求组件信息时，系统会首先检查缓存中是否存在该数据。如果存在，则直接返回缓存中的数据；如果不存在，则从数据源读取数据并更新到缓存中。

```mermaid
flowchart LR
    Request[组件请求] --> CacheCheck{缓存检查}
    CacheCheck -->|存在| ReturnCache[返回缓存数据]
    CacheCheck -->|不存在| ReadFile[读取文件]
    ReadFile --> ProcessData[处理数据]
    ProcessData --> UpdateCache[更新缓存]
    UpdateCache --> ReturnData[返回数据]

文档抽取和发布机制

为了保持文档的最新性，MCP 提供了定期和手动触发文档抽取和发布的功能。默认情况下，系统会在每周一晚上 10 点自动执行该流程。

flowchart TD
    A[开始] --> B[触发条件]
    B --> |每周一晚上 10 点| C[自动触发]
    B --> |手动触发| D[手动触发]

    C --> E[设置环境变量]
    D --> E
    E --> F[克隆 Ant Design 仓库]
    F --> G[获取版本信息]

    G --> G1[获取 Ant Design 版本]
    G --> G2[获取已抽取数据版本]

    G1 --> H[检查更新]
    G2 --> H

    H --> |输出调试信息| I[显示版本信息]

    H --> J{版本一致？}
    J --> |是| K[结束流程]
    J --> |否| L[创建动态分支]

    L --> M[生成 Ant Design 变更日志]
    M --> N[抽取文档数据]
    N --> O[提交并推送更改]

    O --> P[发布 npm 包]
    P --> Q[创建 PR]

    Q --> R{已有 PR 吗？}
    R --> |是| S[记录现有 PR]
    R --> |否| T[创建新 PR]

    S --> K
    T --> K

通过上述机制，MCP 确保了组件信息的实时性和准确性。

💻 使用示例

Alert 提示框使用示例

<Alert message="操作成功" type="success" />
<Alert message="注意事项" type="warning" />

🔧 技术细节

缓存机制：通过缓存机制，系统可以避免重复读取数据源，从而提高响应速度和效率。每次请求组件信息时，系统会首先检查缓存中是否存在该数据，根据检查结果进行相应的处理。
文档抽取和发布机制：为了保持文档的最新性，MCP 提供了定期和手动触发文档抽取和发布的功能。系统会在每周一晚上 10 点自动执行该流程，也可以手动触发。该机制涉及到克隆仓库、获取版本信息、检查更新、生成变更日志、抽取文档数据、提交并推送更改、发布 npm 包和创建 PR 等一系列操作，确保了组件信息的实时性和准确性。

antd-components-mcp