@ennuoltd/kit

恩诺业务组件库工具集 - 快速获取和同步业务组件到你的项目中。

✨ 特性

• 🚀 快速安装 - 一行命令即可初始化配置
• 📦 组件管理 - 轻松添加、移除、同步远程组件
• 🔄 版本管理 - 支持指定组件版本，更新到最新版本
• 📡 远程获取 - 从远程服务器自动下载和同步组件
• 📖 AI 友好 - 同步的组件可作为 AI 代码生成的参考
• 🎯 批量操作 - 支持同时安装多个组件
• 🔗 依赖管理 - 自动检测和添加组件间依赖关系（新增）
• ✅ 依赖检测 - 自动检测 npm 依赖并提示安装

📦 安装

# 使用 npm
npm install @ennuoltd/kit -D

# 使用 pnpm
pnpm add @ennuoltd/kit -D

# 使用 yarn
yarn add @ennuoltd/kit -D

或者直接使用 npx（无需安装）：

npx @ennuoltd/kit init

🚀 快速开始

1. 初始化项目

npx @ennuoltd/kit init

这将创建配置文件 ennuoltd-kit.config.json 和组件目录结构。

2. 查看可用组件

npx @ennuoltd/kit list

3. 添加组件

# 添加最新版本（自动下载）
npx @ennuoltd/kit add example-button

# 添加指定版本
npx @ennuoltd/kit add [email protected]

4. 同步组件

npx @ennuoltd/kit sync

组件将同步到 src/ennuoltd-components 目录（可配置）。

📋 命令参考

| 命令 | 说明 | |------|------| | init | 初始化项目配置 | | sync | 从远程同步组件到目标目录 | | add <name> | 添加远程组件到配置 | | remove <name> | 从配置移除组件 | | list | 列出所有可用的远程组件 | | status | 显示当前同步状态 | | update [name] | 更新组件到最新版本 | | publish <name> | 发布组件到远程服务器 | | publish-all | 一键发布所有有更新的组件 | | route | 扫描组件目录并生成路由配置文件 |

init

初始化项目配置：

# 交互式初始化
npx @ennuoltd/kit init

# 使用默认配置
npx @ennuoltd/kit init -y

# 指定目标目录
npx @ennuoltd/kit init -d src/components/ennuoltd

sync

同步组件：

# 同步已安装的组件
npx @ennuoltd/kit sync

# 强制同步（覆盖已存在的文件）
npx @ennuoltd/kit sync --force

依赖检测：同步完成后，工具会自动检测所有组件的依赖，如果发现未安装的依赖，会提示你安装。

add

添加组件（会自动下载到目标目录）：

# 添加最新版本
npx @ennuoltd/kit add example-button

# 添加指定版本（使用 name@version 格式）
npx @ennuoltd/kit add [email protected]

# 同时添加多个组件（支持混合版本格式）
npx @ennuoltd/kit add example-button [email protected] another-component

智能依赖管理：

• 组件依赖：添加组件时，工具会自动检测并添加该组件依赖的其他组件库内部组件（递归处理传递依赖）
• npm 依赖：添加完成后，工具会检测所有组件所需的 npm 包依赖，如果发现未安装的依赖，会提示你安装

详细文档请查看：组件依赖功能使用指南

remove

移除组件（会自动删除已下载的文件，并智能清理未使用的依赖组件）：

# 从配置移除组件并删除文件
npx @ennuoltd/kit remove example-button

# 如果该组件依赖其他组件，且这些依赖不再被其他组件使用，会自动清理

智能依赖清理：

• 移除组件时，系统会自动检查其依赖的组件
• 如果某个依赖组件不再被任何其他组件使用，将自动移除
• 避免项目中残留无用的组件

详细说明请查看：组件依赖功能使用指南

update

更新组件：

# 更新所有组件到最新版本
npx @ennuoltd/kit update

# 更新指定组件
npx @ennuoltd/kit update example-button

publish

发布组件到远程服务器：

# 发布组件（需要包含 config.json 文件）
npx @ennuoltd/kit publish example-button

# 强制发布（覆盖同版本）
npx @ennuoltd/kit publish example-button --force

组件要求：

• 组件目录下必须包含 config.json 文件
• config.json 必须包含 name 和 version 字段

config.json 示例：

{
  "name": "example-button",
  "version": "1.0.1",
  "title": "Example Button",
  "group": "基础组件",
  "componentType": "component",
  "description": "An example button component for Ennuoltd Kit.",
  "dependencies": {
    "echarts": "^6.0.0"
  }
}

字段说明：

• name：组件名称（必填）
• version：组件版本，需符合语义化版本规范（必填）
• title：组件标题，用于显示的友好名称（可选）
• group：组件分组，如"基础组件"、"业务组件"等（可选）
• componentType：组件类型，如"component"、"layout"等（可选）
• description：组件描述（可选）
• dependencies：组件依赖的 npm 包（可选）
• componentDependencies：组件库内部组件依赖（可选，数组格式）

组件依赖示例：

{
  "name": "advanced-chart",
  "version": "1.0.0",
  "description": "高级图表组件",
  "dependencies": {
    "echarts": "^6.0.0"
  },
  "componentDependencies": [
    "example-button",
    "example-card"
  ]
}

当添加 advanced-chart 时，系统会自动添加 example-button 和 example-card。

publish-all

一键发布所有有更新的组件：

# 自动检测版本更新并发布
npx @ennuoltd/kit publish-all

# 强制发布所有组件（覆盖同版本）
npx @ennuoltd/kit publish-all --force

# 跳过确认提示，自动发布
npx @ennuoltd/kit publish-all --yes

功能说明：

• 自动扫描 targetDir 目录下的所有组件
• 检测每个组件的版本是否有更新
• 自动发布有更新的组件到远程服务器
• 显示详细的发布结果统计

发布结果示例：

╔════════════════════════════════════════╗
║     批量发布结果统计                    ║
╚════════════════════════════════════════╝

ℹ 总计扫描: 3 个组件

✓ 成功发布: 2 个组件
  [更新] [email protected]
  [新增] [email protected]

⚠ 跳过: 1 个组件
  - [email protected]: 版本相同 (1.0.0)，无需发布

🎉 所有组件已成功发布到远程服务器！

route

自动扫描组件目录并生成路由配置文件：

# 使用配置文件中的输出路径
npx @ennuoltd/kit route

# 临时指定输出路径（优先级高于配置文件）
npx @ennuoltd/kit route -o src/router/routes/components.ts

功能说明：

• 自动扫描组件目录，查找包含 example.vue 的组件
• 从 config.json 读取组件标题（如果存在）
• 生成 Vue Router 配置文件
• 输出路径从 ennuoltd-kit.config.json 的 routesOutputPath 字段读取
• 可通过 -o 参数临时指定输出路径

生成的路由文件示例：

import type { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    name: 'Components',
    path: '/components',
    meta: {
      title: '组件库',
      icon: 'ant-design:appstore-outlined',
    },
    children: [
      {
        name: 'ExampleButton',
        path: '/example-button',
        component: () => import('#/ennuoltd-components/example-button/example.vue'),
        meta: {
          title: 'Example Button',
        },
      },
      // ... 更多组件路由
    ],
  },
];

export default routes;

⚙️ 配置文件

ennuoltd-kit.config.json:

{
  "version": "1.0.0",
  "targetDir": "src/ennuoltd-components",
  "remoteUrl": "http://192.168.2.32:31001",
  "routesOutputPath": "src/router/routes/modules/components.ts",
  "components": [
    {
      "name": "example-button",
      "version": "1.0.0"
    },
    {
      "name": "example-card",
      "version": "1.2.0"
    }
  ],
  "lastSync": "2025-12-01T00:00:00.000Z"
}

配置项说明

| 字段 | 类型 | 说明 | |------|------|------| | version | string | 配置版本 | | targetDir | string | 组件同步目标目录 | | remoteUrl | string | 远程服务器 URL | | routesOutputPath | string | 路由文件输出路径（可选） | | components | Array<{name: string, version: string}> | 已安装的组件列表及版本 | | lastSync | string | 最后同步时间 |

📁 目录结构

初始化后的项目结构：

your-project/
├── ennuoltd-kit.config.json    # 配置文件
└── src/
    └── ennuoltd-components/    # 远程组件同步目标目录
        ├── README.md          # 自动生成的说明文档
        ├── index.ts           # 自动生成的导出文件
        ├── example-button/    # 从远程下载的组件
        └── example-card/      # 从远程下载的组件

🎨 组件结构

从远程下载的组件通常包含：

component-name/
├── index.vue       # 组件主文件
├── README.md       # 组件文档
├── types.ts        # 类型定义 (可选)
└── composables/    # 组合式函数 (可选)

🤖 AI 集成说明

同步到 src/ennuoltd-components 的组件可供 AI 读取参考：

• ✅ AI 可以读取组件代码作为参考
• ✅ AI 可以基于这些组件的模式创建新组件
• ❌ AI 不应该直接修改此目录下的文件
• ❌ AI 不应该删除或重命名此目录下的文件

这种设计使得：

1. 团队可以维护一套标准组件库
2. AI 可以学习组件的编码风格和模式
3. 新组件可以遵循相同的规范生成

🔧 编程式使用

除了 CLI，你也可以在代码中使用：

import { EnnuoltdKit } from '@ennuoltd/kit';

const kit = new EnnuoltdKit(process.cwd());

// 初始化
await kit.init({
  targetDir: 'src/ennuoltd-components',
  remoteUrl: 'http://192.168.2.32:31001',
});

// 添加组件（最新版本）
await kit.addComponent('example-button');

// 添加组件（指定版本）
await kit.addComponent('example-card', { version: '1.0.0' });

// 同步
const result = await kit.sync();
console.log('Synced:', result.synced);

// 更新组件
const updateResult = await kit.update();
console.log('Updated:', updateResult.updated);

// 获取状态
const status = await kit.getStatus();
console.log('Available:', status.availableCount);

// 发布组件
const publishResult = await kit.publish({
  componentName: 'example-button',
  force: false,
});
console.log('Published:', publishResult.name, publishResult.version);

// 批量发布组件
const batchPublishResult = await kit.batchPublish({
  force: false,
  skipConfirm: true,
});
console.log('Published:', batchPublishResult.published.length);
console.log('Skipped:', batchPublishResult.skipped.length);
console.log('Failed:', batchPublishResult.failed.length);