Vue 模版生成器 MCP 服务

面向 dbUI 项目的 Vue 页面和操作组件模版生成器，支持 MCP (Model Context Protocol) 协议。

功能特性

🚀 核心功能

• Modern Vue 列表页面生成 - 基于 jcb-search-box、jcb-search-list、JcbPageContainer 生成列表页面
• Vue 详情页面生成 - 支持多标签页、操作按钮、状态显示的详情页面模版
• Vue 创建页面生成 - 支持表单验证、权限检查、配额检查等创建页面能力
• Vue 操作组件生成 - 支持列表页和详情页中的操作按钮组件
• dbUI 组件集成 - 完全集成 @jdcloud/dbUI 组件库和最佳实践
• 多种模版类型 - 支持 modern、modern-simple、basic、full、simple 等多种预设模版
• 文件直接输出 - 可直接生成文件到指定路径，无需手动复制

📋 模版特性

• Vue 2.7 Composition API - 使用最新的 Composition API 语法
• 响应式设计 - 完整的响应式数据管理和状态处理
• 国际化支持 - 内置 i18n 国际化配置和使用规范
• 错误处理 - 统一的 errorHandle 错误处理机制
• 权限控制 - 集成 jcb-operation-check 权限验证
• 自动刷新 - 可配置的自动刷新功能

安装和配置

1. 安装依赖

cd /Users/chenjingnan/work/vue-list-template-generator
npm install

2. 构建项目

npm run build

3. 启动服务

npm start

MCP 工具接口

generate_vue_modern_list - 生成 Modern Vue 列表页面

生成基于 jcb-search-box + jcb-search-list + JcbPageContainer 的现代化 Vue 列表页面组件。

参数说明

| 参数名 | 类型 | 必填 | 默认值 | 说明 | |--------|------|------|--------|------| | componentName | string | ✅ | "DefaultList" | 组件名称 (如 "InstanceList") | | entityName | string | ✅ | "Item" | 实体名称 (如 "Instance") | | apiName | string | ✅ | "ItemApi" | API 模块名称 (如 "InstanceApi") | | apiMethodName | string | ❌ | describe{EntityName}s | API 调用方法名 | | apiResponseListField | string | ❌ | {entityNameLower}s | API 返回数据中的列表字段 | | pageTitle | string | ❌ | "{EntityName}列表" | 页面标题 | | createRouteName | string | ❌ | "create" | 创建页路由名称 | | detailRouteName | string | ❌ | "detail" | 详情页路由名称 | | idField | string | ❌ | "id" | ID字段名 | | nameField | string | ❌ | "name" | 名称字段名 | | statusField | string | ❌ | "status" | 状态字段名 | | cacheId | string | ❌ | "{entityNameLower}ListPage" | 搜索历史/收藏缓存 ID | | columns | array | ❌ | 默认列配置 | 表格列配置 | | searchFields | array | ❌ | [] | 搜索字段配置 | | templateType | string | ❌ | "modern" | 模版类型 (modern/modern-simple) | | hasRegion | boolean | ❌ | true | 是否包含区域选择 | | hasTag | boolean | ❌ | true | 是否包含标签筛选 | | hasPolling | boolean | ❌ | true | 是否包含中间态轮询 | | hasModifyName | boolean | ❌ | true | 是否包含修改名称组件 | | outputPath | string | ❌ | - | 输出文件路径 |

使用示例

// Modern 列表页面生成
{
  "componentName": "InstanceList",
  "entityName": "Instance",
  "apiName": "InstanceApi",
  "apiMethodName": "describeInstances",
  "apiResponseListField": "instances",
  "pageTitle": "实例列表",
  "createRouteName": "instance-create",
  "detailRouteName": "instance-detail",
  "templateType": "modern",
  "outputPath": "./src/views/instance/List.vue"
}

generate_vue_detail - 生成 Vue 详情页面

生成标准化的 Vue 详情页面组件，支持多标签页、操作按钮、状态显示等功能。

参数说明

| 参数名 | 类型 | 必填 | 默认值 | 说明 | |--------|------|------|--------|------| | componentName | string | ✅ | - | 组件名称 (如 "InstanceDetail") | | entityName | string | ✅ | - | 实体名称 (如 "Instance") | | pageTitle | string | ✅ | - | 页面标题 | | apiName | string | ✅ | - | API名称 (如 "InstanceApi") | | backRouteName | string | ✅ | - | 返回页面的路由名称 | | templateType | string | ❌ | "basic" | 模版类型 | | tabs | array | ❌ | 默认标签页 | 标签页配置 | | showStatus | boolean | ❌ | true | 是否显示状态 | | showOperations | boolean | ❌ | true | 是否显示操作按钮 | | enableAutoRefresh | boolean | ❌ | true | 是否启用自动刷新 | | refreshInterval | number | ❌ | 8000 | 自动刷新间隔(毫秒) | | hasRegion | boolean | ❌ | true | 是否包含区域功能 | | outputPath | string | ❌ | - | 输出文件路径 |

使用示例

// 详情页面生成
{
  "componentName": "InstanceDetail",
  "entityName": "Instance", 
  "pageTitle": "实例详情",
  "apiName": "InstanceApi",
  "backRouteName": "instance-list",
  "templateType": "full",
  "tabs": [
    {"name": "BasicInfo", "labelKey": "basicInfo", "label": "基本信息"},
    {"name": "Monitor", "labelKey": "monitor", "label": "监控"}
  ],
  "outputPath": "./src/views/instance/Detail.vue"
}

模版类型

Modern 列表页面模版类型

| 类型 | 说明 | 包含功能 | |------|------|----------| | modern | 完整模版 | 区域、标签、轮询、修改名称、搜索历史、URL 同步 | | modern-simple | 简化模版 | 区域、表格、搜索、分页 |

详情页面模版类型

| 类型 | 说明 | 包含功能 | |------|------|----------| | basic | 基础模版 | 基本信息 + 操作按钮 | | full | 完整模版 | 多标签页 + 状态显示 + 自动刷新 | | simple | 简化模版 | 仅基本信息展示 | | readonly | 只读模版 | 只读信息，无操作功能 |

生成的代码特性

Vue 2.7 Composition API 规范

• 使用 setup() 函数组织代码
• 响应式数据使用 ref() 和 reactive()
• 生命周期钩子使用 onMounted() 等
• 事件处理器统一使用 handle 前缀

dbUI 组件库集成

• 自动导入 @jdcloud/dbUI 相关组件和 hooks
• 使用 useI18n() 处理国际化
• 集成 errorHandle() 统一错误处理
• 使用 jcb-id-name-display 等专用组件

代码质量保证

• ESLint 兼容的代码格式
• 完整的 JSDoc 注释
• 统一的命名规范
• 合理的代码组织结构

开发和调试

开发模式

npm run dev

构建项目

npm run build

清理构建文件

npm run clean

项目结构

vue-list-template-generator/
├── src/
│   └── index.ts          # MCP 服务主文件
├── dist/                 # 构建输出目录
├── package.json          # 项目配置
├── tsconfig.json         # TypeScript 配置
└── README.md            # 项目文档

技术栈

• Node.js >= 18.0.0
• TypeScript 5.0+
• MCP SDK 0.5.0+
• ESNext 模块系统

贡献指南

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

更新日志

v1.0.0

• ✨ 初始版本发布
• 🚀 支持 Modern Vue 列表和详情页面模版生成
• 📦 完整的 MCP 协议支持
• 🎨 集成 dbUI 组件库最佳实践
• 📝 完整的文档和示例

支持

如果您在使用过程中遇到问题，请：

1. 查看 Issues
2. 创建新的 Issue 描述问题
3. 联系开发团队获取支持

JoyCode Team - 让代码生成更简单，让开发更高效！