Prototype Generator

Generates admin/list prototypes from requirements. Supports mountListPage-style frameworks (e.g. kfk-mock-ui), standalone HTML, or project-specific setups. Use when user wants to create a prototype, generate prototype from requirements, add list pages, or says "根据需求生成原型" / "自动生成一套原型" / "创建原型".

通用原型自动生成

根据用户输入的需求，自动生成后台列表原型。支持多种输出模式，适配不同项目结构。

触发条件

• 用户要求「根据需求生成原型」「自动生成一套原型」「创建原型」
• 用户描述业务场景并希望得到可运行的原型页面
• 用户要求新增列表页或管理页面

第一步：检测项目上下文

生成前先扫描项目，确定输出模式：

检测到	输出模式	说明
kfk-mock-ui.js 或 KFK.mountListPage	列表框架模式	生成 menu.js、view_*.html，在现有 mock-ui 中加假数据分支
kfk-admin.css 或上层 UI 库目录	子项目模式	同上，资源路径为 ../父目录/
无上述依赖	独立模式	生成自包含的 HTML（内联样式+脚本），无外部依赖

若用户明确指定（如「用现有框架」「独立页面」「纯 HTML」），优先按指定执行。

第二步：解析需求

从用户描述中提取或推断：

项	说明	缺失时默认
项目/模块名称	品牌或模块名	询问或取首句关键词
目标目录	输出位置	项目根或同名子目录
菜单分组	按业务域分组	如「核心业务」「基础数据」「系统配置」
页面列表	每页：标题、表格列、查询条件、行操作	从需求逐条对应

字段推断规则：

• 名称/标题/编码类 → 模糊查询 mode: 'like'
• 是/否、状态、枚举 → 下拉 type: 'select'，options: [{value:'',label:'全部'},...]
• 年月/日期 → type: 'month' 或 placeholder 如 2025-10
• 枚举选项从需求或示例中抽取

第三步：生成文件（按模式）

列表框架模式（存在 kfk-mock-ui 或类似 mountListPage 框架）

1. menu.js：{ group, items: [{ id, title, href }] }，id 用 kebab-case
2. view_xxx.html：引用 css/js，调用 mountListPage(app, config)（如 KFK.mountListPage）
3. mock-ui.js：新增 generateXxxRow，在 generateRows 中加分支
4. sql/*.sql（可选）：与业务字段对应的建表语句

资源路径约定：若项目中有上层 UI 库目录（如父级原型目录），用 ../父目录/css/、../父目录/js/；否则用项目内 ./css/、./js/。

独立模式（无框架依赖）

生成单页 HTML，包含：

• 查询表单（根据 queryFields）
• 数据表格（根据 columns）
• 简单分页
• 行操作按钮（查看/编辑/删除等）
• 内联样式与脚本，可直接用浏览器打开

结构：query-form + data-table + pager，内联 CSS 与脚本。详见 references/standalone-template.md。

多页独立模式

当有多个列表页且用户需要菜单导航时，可生成：

• index.html：左侧菜单 + iframe 展示
• view_xxx.html：各列表页（独立 HTML）
• menu.js 或内联菜单数据

第四步：校验清单

• menu item 的 id 与 pageId / 页面标识一致
• columns 的 key 与假数据对象 key 一致
• 下拉类 queryFields 使用 type: 'select' 和 options
• 独立模式下样式、脚本可正常运行

配置模板（列表框架模式）

queryFields

javascript

{ key: 'name', label: '名称', placeholder: '请输入', mode: 'like' }
{ key: 'status', label: '状态', type: 'select', mode: 'eq', options: [
  { value: '', label: '全部' }, { value: '是', label: '是' }, { value: '否', label: '否' }
]}
{ key: 'summaryMonth', label: '月份', type: 'month', mode: 'eq' }

columns

javascript

{ key: 'serialNo', title: '序号' }
{ key: 'code', title: '编码', mono: true }
{ key: 'name', title: '名称', align: 'left', required: true }
{ key: 'remark', title: '备注', align: 'left' }
{ key: 'createTime', title: '创建时间', mono: true }

rowActions + onRowAction

javascript

rowActions: [
  { act: 'view', label: '查看' },
  { act: 'edit', label: '编辑' },
  { act: 'delete', label: '删除', danger: true }
]

需求示例

用户输入	产出
「做一个供应商管理，名称、主体、备注」	1 页供应商列表，3 列 + remark/createTime
「发票池按销方、购方、是否推送查询」	queryFields：销方/购方/是否推送（下拉）
「列表要有报废、重置按钮」	rowActions 增加自定义操作，onRowAction 实现逻辑
「独立原型，不要依赖」	单 HTML 文件，内联样式和脚本

可选引用

项目中若有以下规则，可一并遵循：

• .cursor/rules/prototype-menu.mdc：菜单与列表页结构
• 项目中若有列表页 config、CRUD 约定规则，可一并遵循

参考

• 独立模式详细模板：references/standalone-template.md