heren-design-cli

heren-design-web-vue 知识查询和项目分析 CLI 工具，专为 AI 代码助手优化。

功能

• 组件知识查询：查询 hr-* 和 hrd-* 组件的 Props、Events、Slots、方法和示例代码
• 工程规范查询：查询 heren-design 前端工程规范（目录结构、命名、模板等）
• 项目分析：扫描项目中 heren-design-web-vue 的使用情况，检查规范问题
• 项目诊断：检查 heren-design 的安装和配置
• MCP 集成：作为 MCP 服务器与 AI 助手集成

安装

npm install -g heren-design-cli

命令

组件知识查询

hrdc list                         # 列出所有组件
hrdc list --category business     # 按分类过滤

hrdc info hr-button               # 查询组件 API
hrdc info hrd-page-layout --detail # 查看完整 API

hrdc doc hr-form                  # 获取完整文档
hrdc demo hr-dialog               # 列出所有示例
hrdc demo hr-dialog basic         # 获取指定示例代码

工程规范查询

hrdc standards                    # 列出所有规范主题
hrdc standards overview           # 工程规范总览
hrdc standards structure          # 目录结构规范
hrdc standards naming             # 命名规范
hrdc standards components         # 组件开发规范
hrdc standards api                # API 接口规范

业务代码模板

查询业务代码模板。不指定 name 时列出所有可用模板，指定 name 时输出完整模板内容。

hrdc templates                         # 列出所有可用模板
hrdc templates list-page               # 列表页模板
hrdc templates form-page               # 表单页模板
hrdc templates detail-page             # 详情页模板
hrdc templates dialog-form             # 抽屉表单模式
hrdc templates --format json

项目分析

hrdc usage [dir]                  # 扫描组件使用统计
hrdc lint [target]                # 检查规范问题
hrdc doctor                       # 诊断项目配置
hrdc env                          # 收集环境信息

接口相关

hrdc api-resolve <url> --project-path <path> --format json
hrdc api-probe <url> --project-path <path> --format json

说明：

• 研发场景下可直接通过 CLI 使用接口解析与探测能力，无需先配置 MCP
• api-resolve / api-probe 是普通 CLI 入口，复用现有 heren_api_resolve / heren_api_probe 主逻辑
• 相对路径场景优先结合项目代理配置与环境解析

MCP 服务器

hrdc mcp                          # 启动 MCP 服务器

Claude Desktop 配置（~/.claude/claude_desktop_config.json）：

{
  "mcpServers": {
    "heren-design": {
      "command": "hrdc",
      "args": ["mcp"]
    }
  }
}

全局选项

--format <format>   # 输出格式：json、text、markdown（默认：text）
--lang <lang>       # 输出语言：en、zh（默认：zh）
--detail            # 显示详细信息
-V, --cli-version   # 显示 CLI 版本

组件命名

• 基础组件（hr- 前缀）：hr-button、hr-input、hr-select、hr-form、hr-table、hr-dialog、hr-pagination、hr-tabs、hr-tree
• 业务组合组件（hrd- 前缀）：hrd-page-layout、hrd-search-bar

更新组件数据

组件元数据存储在 data/components.json。更新方法：

# 从内部 GitLab 拉取（需要内网环境）
npm run extract -- --from-gitlab

# 从源码提取
npm run extract -- --source <heren-design-web-vue 源码路径>

开发

npm run build        # 构建
npm run dev          # 监视模式
npm run test         # 运行测试
npm run typecheck    # 类型检查

License

MIT