AI驱动的CRUD页面生成器

一个智能的CRUD页面生成器，支持自然语言描述和外部配置输入，能够自动解析实体描述并生成相应的字段配置。

🚀 特性

• 🤖 AI智能解析: 支持自然语言描述，AI自动解析生成字段配置
• 📝 外部配置输入: 支持JSON格式的外部配置输入
• 🔧 灵活字段类型: 支持16种字段类型（文本、数字、日期、图片、文件等）
• ⚡ 快速生成: 一键生成完整的CRUD页面和组件
• 🔄 规则引擎备选: AI解析失败时自动使用规则引擎作为备选方案
• 🎯 两种使用方式: 支持Cursor任务和命令行快速生成
• 💬 聊天环境集成: 支持在AI聊天环境中程序化调用

📦 安装

# 安装依赖
npm install

# 或者全局安装
npm install -g .

🎯 使用方法

方法一：Cursor 任务（推荐）

1. 在 Cursor 中按 Cmd+Shift+P 打开命令面板
2. 输入 "Tasks: Run Task" 并选择
3. 选择以下任务之一：
   • 生成 CRUD 页面：交互式配置生成
   • 快速生成设备管理页面：一键生成设备管理
   • 快速生成用户管理页面：一键生成用户管理

方法二：自然语言描述（AI自动解析）

# 基本用法
node crud-generator-ai.js "帮我搭建一个设备管理页面"
node crud-generator-ai.js "创建用户管理系统"
node crud-generator-ai.js "生成产品列表页面"

# 使用AI服务（需要配置API密钥）
export OPENAI_API_KEY="your-api-key"
node crud-generator-ai.js "帮我创建一个博客文章管理系统"

方法三：外部配置输入

# JSON字符串配置
node crud-generator-ai.js --config '{"entityName":"产品","entityKey":"product","fields":[...]}'

方法四：AI聊天环境集成

在AI聊天环境中，您可以直接使用ai-crud生成器，无需手动编写代码。AI助手会优先使用您安装的ai-crud生成器来处理请求。

在聊天中使用

直接在聊天窗口输入类似以下内容：

帮我创建一个发票管理页面，包含发票号、客户名称、金额、开票日期、状态等字段

AI助手会自动：

1. 检测到您已安装ai-crud生成器
2. 使用生成器的AI解析功能处理您的请求
3. 生成完整的CRUD页面和组件
4. 提供生成结果和文件路径

程序化调用（开发者）

如果您想在代码中调用ai-crud生成器：

// 引入聊天集成模块
const ChatIntegration = require('ai-crud-generator/chat');

// 创建实例
const chat = new ChatIntegration();

// 从自然语言描述生成
const result = await chat.generateFromDescription('创建一个发票管理页面');

// 从配置对象生成
const config = {
  entityName: '产品',
  entityKey: 'product',
  fields: [
    { name: 'name', title: '产品名称', type: 'string', required: true },
    { name: 'price', title: '价格', type: 'number', required: true }
  ]
};
const result2 = await chat.generateFromConfig(config);

// 检查项目结构
const projectInfo = chat.checkProjectStructure();

// 获取支持的字段类型
const fieldTypes = chat.getSupportedFieldTypes();

运行示例

# 运行聊天集成示例
npm run chat

# 或者直接运行示例文件
node chat-usage-example.js

方法五：查看帮助

node crud-generator-ai.js --help
node crud-generator-ai.js -h

📋 支持的字段类型

| 类型 | 表格类型 | 表单类型 | 说明 | |------|----------|----------|------| | string | string | input | 文本输入 | | number | number | number | 数字输入 | | date | date | date | 日期选择 | | datetime | dateTime | datetime | 日期时间选择 | | textarea | string | textarea | 多行文本 | | select | string | select | 下拉选择 | | radio | string | radio | 单选按钮 | | checkbox | string | checkbox | 复选框 | | switch | boolean | switch | 开关 | | email | string | email | 邮箱输入 | | phone | string | phone | 电话输入 | | url | string | url | URL输入 | | image | string | image | 图片上传 | | file | string | file | 文件上传 | | richText | string | richText | 富文本编辑器 | | json | string | json | JSON编辑器 |

📝 配置文件格式

基本结构

{
  "entityName": "实体中文名称",
  "entityKey": "实体英文键名",
  "fields": [
    {
      "name": "字段英文名称",
      "title": "字段中文标题",
      "type": "字段类型",
      "required": true,
      "placeholder": "占位符文本",
      "options": ["选项1", "选项2"],
      "multiple": false,
      "readonly": false,
      "hidden": false
    }
  ]
}

字段配置说明

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | name | string | ✅ | 字段英文名称（驼峰命名） | | title | string | ✅ | 字段中文标题 | | type | string | ✅ | 字段类型（见上表） | | required | boolean | ❌ | 是否必填，默认false | | placeholder | string | ❌ | 占位符文本 | | options | array | ❌ | 选项数组（用于select/radio/checkbox） | | multiple | boolean | ❌ | 是否多选（用于select） | | readonly | boolean | ❌ | 是否只读 | | hidden | boolean | ❌ | 是否隐藏 |

示例配置文件

{
  "entityName": "文章",
  "entityKey": "article",
  "fields": [
    {
      "name": "id",
      "title": "ID",
      "type": "number",
      "required": true,
      "hidden": true
    },
    {
      "name": "title",
      "title": "文章标题",
      "type": "string",
      "required": true,
      "placeholder": "请输入文章标题"
    },
    {
      "name": "content",
      "title": "文章内容",
      "type": "richText",
      "required": true
    },
    {
      "name": "category",
      "title": "文章分类",
      "type": "select",
      "required": true,
      "options": ["技术", "生活", "工作", "其他"]
    },
    {
      "name": "tags",
      "title": "标签",
      "type": "select",
      "multiple": true,
      "options": ["JavaScript", "Vue", "React", "Node.js"]
    },
    {
      "name": "coverImage",
      "title": "封面图片",
      "type": "image"
    },
    {
      "name": "author",
      "title": "作者",
      "type": "string",
      "required": true
    },
    {
      "name": "publishDate",
      "title": "发布日期",
      "type": "date"
    },
    {
      "name": "status",
      "title": "状态",
      "type": "select",
      "required": true,
      "options": ["草稿", "已发布", "已下架"]
    },
    {
      "name": "createdAt",
      "title": "创建时间",
      "type": "datetime",
      "required": true,
      "readonly": true
    },
    {
      "name": "updatedAt",
      "title": "更新时间",
      "type": "datetime",
      "readonly": true
    }
  ]
}

🧪 测试

运行测试脚本来验证生成器的功能：

# 运行所有测试
npm test

# 或者运行特定测试
node test-generator.js natural    # 测试自然语言解析
node test-generator.js config     # 测试外部配置解析
node test-generator.js generate   # 测试完整生成流程
node test-generator.js types      # 测试字段类型支持
node test-generator.js examples   # 生成示例配置文件

🔧 AI配置

OpenAI配置

要使用AI服务进行实体解析，需要配置OpenAI API密钥：

# 设置环境变量
export OPENAI_API_KEY="your-openai-api-key"

# 或者在代码中配置
const generator = new AICRUDGenerator({
  ai: {
    apiKey: 'your-openai-api-key',
    model: 'gpt-3.5-turbo',
    maxTokens: 1000,
    temperature: 0.7
  }
});

自定义AI服务

你也可以配置其他AI服务：

const generator = new AICRUDGenerator({
  ai: {
    apiKey: 'your-api-key',
    apiEndpoint: 'https://your-ai-service.com/v1/chat/completions',
    model: 'your-model-name',
    maxTokens: 1000,
    temperature: 0.7
  }
});

📁 生成的文件结构

src/views/
├── pages/
│   └── {entityKey}/
│       └── index.vue          # 列表页面
└── components/
    └── {entityKey}/
        └── create-edit-dialog.vue  # 弹窗组件

🎨 生成的页面特性

列表页功能

• 使用 pro-table 组件，支持筛选和布局
• 批量删除功能
• 新增/编辑/详情/删除操作按钮
• 响应式表格设计
• 自动生成表格列配置

弹窗组件功能

• 使用 pro-form 组件
• 支持新增/编辑/详情三种模式
• 表单验证和错误提示
• 响应式表单设计
• 自动生成表单配置

代码规范

• 遵循 Vue 2 Composition API 规范
• 使用 defineComponent 定义组件
• 符合项目命名规范（kebab-case）
• 包含完整的 TODO 注释
• 使用 root.$message 进行消息提示

🎨 自定义模板

生成器使用模板文件来生成页面和组件。你可以自定义模板：

1. 在 crud-templates/ 目录下创建或修改模板文件
2. 模板支持变量替换和循环语法
3. 支持的变量：

• {{entityName}} - 实体中文名称
  • {{entityKey}} - 实体英文键名
  • {{entityNamePascal}} - 实体英文名称（PascalCase）
  • {{#each fields}}...{{/each}} - 字段循环

🔄 工作流程

1. 输入解析: 解析自然语言描述或外部配置
2. AI分析: 使用AI服务分析实体需求（如果配置了AI）
3. 字段生成: 根据分析结果生成字段配置
4. 模板处理: 使用模板生成页面和组件代码
5. 文件输出: 将生成的代码写入到指定目录

📝 使用示例

示例 1：生成设备管理页面

node crud-generator-ai.js "帮我搭建一个设备管理页面"

生成的文件：

• src/views/pages/device/index.vue - 设备列表页
• src/views/components/device/create-edit-dialog.vue - 设备弹窗组件

示例 2：生成用户管理页面

node crud-generator-ai.js "创建用户管理系统"

生成的文件：

• src/views/pages/user/index.vue - 用户列表页
• src/views/components/user/create-edit-dialog.vue - 用户弹窗组件

示例 3：使用外部配置生成产品管理页面

node crud-generator-ai.js --config '{"entityName":"产品","entityKey":"product","fields":[{"name":"name","title":"产品名称","type":"string","required":true},{"name":"price","title":"价格","type":"number","required":true}]}'

🎯 生成后的后续工作

生成页面后，你需要完成以下工作：

1. 实现数据获取逻辑

在列表页的 fetchData 方法中：

const fetchData = async (params) => {
  // TODO: 实现数据获取逻辑
  const response = await api.getEntityList(params);
  return {
    items: response.data.list,
    total: response.data.total
  };
};

2. 实现保存逻辑

在弹窗组件的 handleSubmit 方法中：

const handleSubmit = async () => {
  // TODO: 实现保存逻辑
  const formData = await formRef.value?.getValues();
  if (props.type === 'create') {
    await api.createEntity(formData);
  } else {
    await api.updateEntity(props.values.id, formData);
  }
  root.$message.success('保存成功');
  updateDialogVisible(false);
  emit('success');
};

3. 实现删除逻辑

在列表页的 handleBatchDelete 方法中：

const handleBatchDelete = (rows) => {
  const ids = rows?.length ? rows.map(item => item.id) : getSelectedInfo('id');
  deleteItems({ data: ids }, async () => {
    // TODO: 实现删除逻辑
    await api.deleteEntities(ids);
    reload();
  });
};

4. 调整字段配置

根据需要修改表单验证规则、字段类型、占位符等：

// 在弹窗组件中调整 schema 配置
const schema = defineSchema([
  {
    name: 'name',
    title: '名称',
    type: 'input',
    required: true,
    rules: [
      { required: true, message: '请输入名称' },
      { min: 2, max: 50, message: '名称长度在 2-50 个字符' }
    ]
  }
]);

🛠️ 开发

项目结构

ai-crud-generator/
├── crud-generator-ai.js      # 主生成器
├── ai-entity-parser.js       # AI解析器
├── test-generator.js         # 测试脚本
├── package.json              # 项目配置
├── README.md                # 说明文档
└── crud-templates/          # 模板目录
    ├── list-page.vue        # 列表页模板
    └── create-edit-dialog.vue # 弹窗组件模板

扩展字段类型

要添加新的字段类型，需要：

1. 在 FIELD_TYPE_MAP 中添加类型定义
2. 在模板中添加对应的渲染逻辑
3. 在AI解析器中添加类型验证

扩展AI功能

要增强AI解析功能，可以：

1. 修改 ai-entity-parser.js 中的提示词
2. 添加更多的字段生成规则
3. 集成其他AI服务

🐛 常见问题

Q: 生成器运行失败怎么办？

A: 确保：

1. 在项目根目录下运行
2. Node.js 版本 >= 14
3. 项目有 src/views 目录结构
4. 已安装依赖：npm install

Q: 如何修改生成的代码？

A: 生成器会在代码中添加 TODO 注释，按注释提示修改即可。

Q: 如何添加新的字段类型？

A: 在 FIELD_TYPE_MAP 中添加类型映射，并在模板中处理对应的渲染逻辑。

Q: 生成的页面路由如何配置？

A: 项目使用约定式路由，页面会自动根据文件路径生成路由，无需手动配置。

Q: AI解析失败怎么办？

A: 生成器会自动使用规则引擎作为备选方案，确保基本功能可用。

📄 许可证

MIT License

🤝 贡献

欢迎提交Issue和Pull Request！

📞 支持

如果你遇到问题或有建议，请：

1. 查看 Issues
2. 提交新的Issue
3. 联系维护者

注意: 使用AI功能需要配置相应的API密钥，并确保有足够的API调用额度。

祝您使用愉快！ 🎉