create_ioc_page
Generate Vue component code for the M8 low-code platform by executing npm run ioc create to automatically create directory structure and produce files following platform standards.
Instructions
【低码组件生成】生成符合 M8 低码平台规范的组件代码。
🔴 重要：此工具会自动在项目根目录执行 npm run ioc create 命令创建组件！
⚠️ 【最重要】优先使用 em-组件库！：
轮播/走马灯：必须使用
em-swipe+em-swipe-item，禁止自行实现轮播图片展示：必须使用
em-image（支持懒加载、失败占位）列表/单元格：使用
em-cell/em-cell-group按钮：使用
em-button弹窗：使用
em-popup/em-dialog标签：使用
em-tag下拉刷新：使用
em-minirefresh只有在组件库没有匹配组件时，才允许自定义实现！
📋 使用前必读 - 开发流程：
指定项目路径：必须提供 project_path 参数，指向包含 package.json 的项目根目录
自动创建组件：工具会在项目目录下执行
npm run ioc create ComponentName创建组件目录结构返回生成代码：返回完善后的代码内容，由 AI 助手覆盖写入对应文件
⚠️ 必须检查 base.js：确保 module_name 与组件文件夹名一致，name 为组件中文名
📁 生成的目录结构（自动创建）：
js/base.js（🔴 必须检查：name 中文名、module_name 必须=目录名、version）
js/config.js（属性/事件配置 - 含详细可配置项）
mock/data.js（模拟数据 - 需与 index.vue 的数据结构匹配）
index.vue（组件主文件 - 🔴 必须使用 em- 组件库）
css/index.scss（样式）
plugin/eventgenerate/index.js（事件生成插件）
plugin/boxoptions/config.js（容器配置插件）
index.js（组件注册入口）
📌 支持的配置项类型：
text: 文本输入
boolean: 开关
color: 颜色选择器
number: 数字输入
image: 图片URL
uploadimage: 图片上传（推荐）
select: 下拉选择
array: 数组配置（配合 dynamic:true 和 template）
💡 配置设计建议：
布局类：showTitle, showIcon, showBorder, layout, columns
样式类：backgroundColor, titleColor, titleSize, borderRadius
交互类：clickable, disabled, loading
数据类：使用 array 类型支持动态列表
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| project_path | Yes | 【必填】目标项目的根目录绝对路径，必须是包含 package.json 的目录。npm run ioc create 命令将在此目录下执行。例如：D:/projects/my-app 或 /home/user/my-app | |
| component_name | Yes | 组件名称，必须使用大驼峰命名法（PascalCase），如 ProductList、UserInfo、OrderDetail。此名称将用于：1. 组件目录名 2. js/base.js 中的 module_name | |
| display_name | Yes | 组件中文名称，将显示在低码平台中，如：商品列表、用户信息、订单详情 | |
| description | Yes | 组件功能描述，详细说明组件的功能、UI 布局、交互逻辑 | |
| author | No | 作者名称，默认 developer | |
| config_options | No | 自定义属性配置项列表 | |
| custom_events | No | 自定义事件列表（除标准的 onMounted、onClick、onChange 外） | |
| mock_data_structure | No | Mock 数据结构描述，如：包含 id、name、status、description 字段的列表 |