Antd Components MCP

🚀 項目結構

本項目主要介紹了項目的目錄結構、主要文件說明、緩存機制以及文檔抽取和發佈機制，幫助開發者更好地理解和使用項目。

🚀 快速開始

本項目的結構和機制有助於開發者高效地管理組件信息，提高系統的響應速度和效率，同時保持文檔的最新性。下面將詳細介紹項目的各個部分。

📦 安裝指南

暫未提供安裝步驟相關內容。

✨ 主要特性

目錄結構清晰

項目具有明確的目錄結構，便於管理和維護組件數據、元數據以及 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

示例代碼

<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 等一系列操作，確保了組件信息的即時性和準確性。