Vue 列表模版生成器 MCP 服务

基于 Operations.vue 组件提取的 Vue 列表和详情页面模版生成器，支持 MCP (Model Context Protocol) 协议。

功能特性

🚀 核心功能

• Vue 列表页面生成 - 基于配置生成标准化的 Vue 2.7 Composition API 列表页面
• Vue 详情页面生成 - 支持多标签页、操作按钮、状态显示的详情页面模版
• dbUI 组件集成 - 完全集成 @jdcloud/dbUI 组件库和最佳实践
• 多种模版类型 - 支持 basic、full、simple、readonly 等多种预设模版
• 文件直接输出 - 可直接生成文件到指定路径，无需手动复制

📋 模版特性

• 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_list - 生成 Vue 列表页面

生成标准化的 Vue 列表页面组件，包含表格、搜索、分页等功能。

参数说明

| 参数名 | 类型 | 必填 | 默认值 | 说明 | |--------|------|------|--------|------| | componentName | string | ✅ | - | 组件名称 (如 "InstanceList") | | entityName | string | ✅ | - | 实体名称 (如 "Instance") | | apiName | string | ✅ | - | API名称 (如 "InstanceApi") | | routeName | string | ✅ | - | 路由名称 (如 "instance-list") | | detailRouteName | string | ❌ | - | 详情页路由名称 | | idField | string | ❌ | "id" | ID字段名 | | nameField | string | ❌ | "name" | 名称字段名 | | columns | array | ❌ | 默认列配置 | 表格列配置 | | searchFields | array | ❌ | [] | 搜索字段配置 | | templateType | string | ❌ | "basic" | 模版类型 (basic/full/simple/readonly) | | outputPath | string | ❌ | - | 输出文件路径 |

使用示例

// 基础列表页面生成
{
  "componentName": "InstanceList",
  "entityName": "Instance",
  "apiName": "InstanceApi",
  "routeName": "instance-list",
  "detailRouteName": "instance-detail",
  "templateType": "basic",
  "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"
}

模版类型

列表页面模版类型

| 类型 | 说明 | 包含功能 | |------|------|----------| | basic | 基础模版 | 表格、搜索、分页、基础操作 | | full | 完整模版 | 包含所有功能 + 高级筛选 + 批量操作 | | simple | 简化模版 | 仅表格和基础分页 | | readonly | 只读模版 | 只读表格，无操作按钮 |

详情页面模版类型

| 类型 | 说明 | 包含功能 | |------|------|----------| | 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

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

支持

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

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

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