MiniCPM-V-4.7-35B-A3B 在「表单构建器」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：MiniCPM-V-4.7-35B-A3B
  • 用例名称：表单构建器
  • 测试类型：网页生成
  • 评测维度：表单设计

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名资深前端开发工程师，专注于 Web 应用开发与 UI 交互设计。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须整合在单个 HTML 文件中，可独立运行，无需任何本地依赖。 2. 若需引用外部库（如 Sortable.js），必须使用主流可靠的 CDN（如 cdnjs、unpkg），确保代码开箱即用。 3. 页面布局采用三栏结构（左侧组件面板 + 中间画布 + 右侧属性面板），样式简洁清晰，具备基本的视觉层次。 4. 拖拽功能需真实可用，组件从左侧面板拖入画布后应正确渲染，并支持画布内上下排序。 5. 导出的 JSON 格式须标准化，导入时能完整还原表单结构，确保导入导出逻辑闭环。 6. 直接输出完整可运行的 HTML 代码，不附加任何解释说明。

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

请生成一个**表单构建器**页面，所有代码（HTML、CSS、JavaScript）必须在一个 HTML 文件中，直接可在浏览器运行。 ## 页面布局 采用三栏布局，顶部固定工具栏： ### 顶部工具栏 包含以下按钮，从左到右排列： - **预览**：将当前画布中的表单在新窗口（或新标签页）中渲染为可填写的真实表单 - **导出 JSON**：将表单结构导出为标准 JSON 并触发下载 - **导入 JSON**：通过文件选择框读取 JSON 文件并还原表单结构 - **清空**：清除画布中所有组件（需二次确认） ### 左侧组件面板（宽约 200px） 列出以下 10 种可拖拽组件，每个组件显示图标和名称： 1. 文本输入（Text Input） 2. 多行文本（Textarea） 3. 数字输入（Number Input） 4. 下拉选择（Select） 5. 单选按钮组（Radio Group） 6. 多选框组（Checkbox Group） 7. 日期选择（Date Picker） 8. 文件上传（File Upload） 9. 分割线（Divider） 10. 标题文本（Heading） ### 中间画布区（flex: 1，自适应宽度） - 支持从左侧面板**拖拽**组件到画布，放置后渲染对应的表单控件预览 - 画布内组件支持**上下拖拽排序** - **点击**画布中的组件可选中，选中态有明显高亮边框，并显示**删除按钮**（右上角 ×） - 画布为空时，居中显示提示文字「拖拽组件到此处」 ### 右侧属性面板（宽约 260px） - 未选中组件时显示提示「请选择一个组件」 - 选中组件后，显示以下可编辑属性（实时同步到画布预览）： - **字段标签**（Label）：显示在控件上方的文字 - **字段名称**（Field Name）：表单提交时的 key，自动生成默认值 - **占位文本**（Placeholder）：适用于文本类控件 - **是否必填**（Required）：复选框 - **验证规则**（Validation）：下拉选择，包含「无」、「邮箱格式」、「手机号」、「纯数字」、「自定义正则」五项；选择「自定义正则」时显示正则输入框 - **选项列表**（Options）：仅对下拉选择、单选按钮组、多选框组显示，支持添加/删除选项 ## 功能要求 1. **拖拽功能**：使用 HTML5 原生拖拽 API 或引入 Sortable.js（CDN），实现左侧到画布的拖入，以及画布内的排序。 2. **属性同步**：修改右侧属性面板中的任意字段后，画布中对应组件的预览应立即更新。 3. **必填验证**：预览表单时，对标记为必填的字段进行非空校验，未通过时在字段下方显示红色错误提示文字。 4. **JSON 导入导出**：导出的 JSON 包含所有组件的类型、属性、选项等完整信息；导入时完整还原画布状态。 5. **样式要求**：整体配色简洁（推荐白色背景 + 蓝色主色调），组件面板和属性面板有轻微阴影与背景色区分，选中态使用蓝色边框高亮。

任务要求

AI 模型需要满足以下要求：

  1. 三栏布局正确实现，左侧组件面板、中间画布、右侧属性面板各司其职，顶部工具栏四个按钮功能均可用。
  2. 全部 10 种组件可从左侧拖入画布并正确渲染预览，画布内支持拖拽排序，空状态提示正常显示。
  3. 点击画布组件可选中（高亮边框），右侧属性面板随之显示对应属性，修改属性后画布预览实时同步。
  4. 必填验证在预览模式下正常工作，未填写必填项时显示清晰的红色错误提示。
  5. JSON 导出格式标准化（包含 type、label、name、placeholder、required、validation、options 等字段），导入后能完整还原画布状态，形成闭环。
  6. 代码组织清晰，HTML 结构语义化，CSS 与 JS 在单文件内分区编写，无明显运行时报错。

评测结果

综合得分

该模型在此用例的得分为：72.7 分（满分 100 分），已通过

基础难度评测结果

  • 得分：72.7 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 表单构建器 :root { --primary-color: #1890ff; --bg-color: #f5f7fa; --panel-bg: #ffffff; --border-color: #e8e8e8; --text-color: #333; --text-secondary: #666; --danger-color: #ff4d4f; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* 顶部工具栏 */ .toolbar { height: 50px; background: var(--panel-bg); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); z-index: 10; } .toolbar button { margin-right: 10px; padding: 6px 12px; border: 1px solid var(--border-color); background: white; cursor: pointer; border-radius: 4px; font-size: 14px; transition: all 0.3s; } .toolbar button:hover { border-color: var(--primary-color); color: var(--primary-color); } .toolbar button.primary { background: var(--primary-color); color: white; border-color: var(--primary-color); } .toolbar button.primary:hover { background: #40a9ff; } /* 主体布局 */ .main-container { display: flex; flex: 1; overflow: hidden; } /* 左侧组件面板 */ .left-panel { width: 200px; background: var(--panel-bg); border-right: 1px solid var(--border-color); padding: 15px; overflow-y: auto; } .component-item { display: flex; align-items: center; padding: 10px; margin-bottom: 8px; background: #fafafa; border: 1px solid var(--border-color); border-radius: 4px; cursor: grab; transition: all 0.2s; } .component-item:hover { border-color: var(--primary-color); background: #e6f7ff; } .component-item:active { cursor: grabbing; } .component-icon { margin-right: 10px; font-size: 18px; width: 24px; text-align: center; } /* 中间画布区 */ .canvas-area { flex: 1; background: var(--bg-color); padding: 20px; overflow-y: auto; position: relative; } .canvas-placeholder { text-align: center; color: #999; margin-top:...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现完成了表单构建器的基本框架，布局正确，10种组件均可拖拽添加并渲染，属性面板基本可用，JSON导入导出形成闭环。主要问题是画布内Sortable排序后数组同步逻辑有bug导致排序功能实际不可靠，以及验证规则（邮箱、手机号等）在预览模式下未实际实现。整体是一个功能覆盖较广但存在若干实现缺陷的中等质量作品。 【GEMINI】该方案在页面布局、UI视觉设计、10种组件支持及右侧动态属性配置上表现优秀，导入导出与独立预览也均完整实现。主要缺陷在于画布内拖拽排序（onSort）回调中存在覆盖自身数组的逻辑Bug，导致排序后组件状态丢失，且表单预览验证对单选/多选及正则验证处理不够完善。 【KIMI】该表单构建器实现了基本的三栏布局和核心交互流程，但在关键功能上存在严重缺陷：拖拽排序完全失效（Sortable初始化与DOM更新策略冲突）、验证规则未完整实现、以及HTML实体编码导致的潜在运行问题。视觉设计较为简洁美观，符合基本要求，但代码的工程质量和健壮性不足，距离生产可用有较大差距。建议在DOM更新策略、Sortable生命周期管理、以及验证规则完整实现方面进行重点改进。

进阶难度评测结果

  • 得分：70.9 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 表单构建器（进阶版） :root { --primary-color: #4a90e2; --secondary-color: #f5f7fa; --border-color: #e0e0e0; --text-color: #333; --danger-color: #e74c3c; --success-color: #2ecc71; --panel-width: 260px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f0f2f5; color: var(--text-color); height: 100vh; display: flex; flex-direction: column; } /* 顶部工具栏 */ .toolbar { background: white; padding: 10px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); z-index: 100; } .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 10px; } .btn { padding: 6px 12px; border: 1px solid var(--border-color); background: white; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.2s; display: flex; align-items: center; gap: 5px; } .btn:hover { background: var(--secondary-color); border-color: var(--primary-color); } .btn-primary { background: var(--primary-color); color: white; border-color: var(--primary-color); } .btn-primary:hover { background: #357abd; } .save-status { font-size: 12px; color: var(--success-color); opacity: 0; transition: opacity 0.3s; } .save-status.show { opacity: 1; } /* 主布局 */ .main-container { display: flex; flex: 1; overflow: hidden; } /* 左侧组件面板 */ .component-panel { width: var(--panel-width); background: white; border-right: 1px solid var(--border-color); padding: 15px; overflow-y: auto; } .component-panel h3 { font-size: 16px; margin-bottom: 15px; color: #555; } .component-list { display: flex; flex-direction: column; gap: 8px; } .component-item { padding: 10px 12px; background: var(--secondary-color); border: 1px solid var(--border-color); border-radius: 4px; cursor: grab; font-size: 14px; transition: all 0.2s; user-select: none; } .component-item:hover { background: #e8f0fe;...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一份结构完整、路线正确的实现：单文件交付、jsDelivr 依赖、Web Audio 四音效、localStorage 自动保存、JSON 双向闭环、双栏编辑器 + 预览弹窗等题目要点基本都落地，UI 观感也较为专业，可见作者对需求清单有整体把握。问题集中在中后段：radio/checkbox 的选项容器在两处渲染逻辑中都没被挂载，属性面板不随验证规则切换重绘导致自定义正则输入框不出现，Sortable 与空状态占位节点共存造成排序索引错位，divider/heading 因 innerHTML 覆盖与未绑定点击而无法选中或删除，提交校验对 radio/checkbox 的取值也有误。这些都是「看似写完、实则跑不通」的隐性缺陷，说明缺少一次端到端自测；叠加画布与预览的整段重复代码，进一步拖低了稳定性与可维护性。整体处于及格线以上的中上水平：如果补齐上述关键缺陷并补一次回环验证，功能分可上探 85 以上。 【GEMINI】整体实现质量优秀，完整达成了高阶表单构建器的核心与进阶要求。Web Audio API 音效反馈、数据持久化及标准 JSON 导入导出形成了良好的闭环，UI 清爽规范。仅在自定义正则测试样例的输入灵活性及属性实时输入监听（oninput vs onchange）上有微小提升空间。 【KIMI】该实现是一个功能意图完整但执行欠缺的表单构建器。基础架构（单文件、Web Audio API、localStorage）已搭建，但核心交互（拖拽排序、实时同步、验证闭环）存在严重bug。主要问题根源在于：Sortable.js未正确绑定到动态字段列表导致排序失效、属性面板采用全量重建DOM的粗暴更新策略、以及大量代码重复和安全漏洞。建议优先修复：1)将Sortable绑定到包裹字段的容器而非canvas；2)采用diff方式更新属性面板或至少保持focus状态；3)抽取验证规则为配置中心化管理；4)添加XSS过滤函数。当前实现距离生产可用有显著差距，但基本功能骨架可见。

困难难度评测结果

  • 得分：60.0 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 高级表单构建器 :root { --primary: #4f46e5; --primary-hover: #4338ca; --bg-light: #f3f4f6; --border: #e5e7eb; --text: #1f2937; --text-light: #6b7280; --danger: #ef4444; --success: #10b981; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg-light); color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* 顶部工具栏 */ .toolbar { height: 56px; background: white; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 100; } .toolbar-group { display: flex; align-items: center; gap: 8px; } .btn { padding: 6px 12px; border: 1px solid var(--border); background: white; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.2s; } .btn:hover { background: var(--bg-light); } .btn-primary { background: var(--primary); color: white; border-color: var(--primary); } .btn-primary:hover { background: var(--primary-hover); } .btn-danger { color: var(--danger); border-color: var(--danger); } .btn-danger:hover { background: #fef2f2; } .mode-toggle { display: flex; background: var(--bg-light); border-radius: 4px; padding: 2px; } .mode-btn { padding: 4px 12px; border: none; background: transparent; cursor: pointer; border-radius: 3px; } .mode-btn.active { background: white; shadow: 0 1px 3px rgba(0,0,0,0.1); } /* 主体布局 */ .main-container { display: flex; flex: 1; overflow: hidden; } /* 左侧组件面板 */ .sidebar-left { width: 260px; background: white; border-right: 1px solid var(--border); overflow-y: auto; padding: 16px; } .component-group { margin-bottom: 20px; } .component-group h3 { font-size: 12px; text-transform: uppercase; color: var(--text-light); margin-bottom: 8px; } .component-item { padding: 8px 12px; background: var(--bg-light); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 6px; cursor: grab; font-size: 14px;...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】代码骨架和分层设计是这份答案的最大亮点：六个职责清晰的类、单文件、CDN 合规、Web Audio 音效无外部依赖、localStorage 持久化与 XSS 基本防护都做到了，界面也具备可用的专业观感。问题出在 Hard 级别最难的几条链路上全部掉链子：左侧拖拽因为漏加 draggable="true" 而无法启动，这条是主交互命脉；画布排序的 Sortable 回调 this 绑定错误会直接抛异常；验证逻辑被简化成永远返回 true 的空函数，直接导致提交验证、成功/失败音效、多步骤分步校验一整套逻辑形同虚设；步骤删除无入口、切换无滑动动画、循环依赖检测写了不调用；富文本编辑器内容既不回写也不可导出。这些属于「看得见功能点但跑不通」的实现，与 Hard 级别对状态机和闭环的要求差距较大。若把 dragstart 补上 draggable、修正 Sortable 的 this 绑定与 placeholder 引用、补全真实校验规则并把 checkCircularDependencies 接入配置流程，整体质量会有大幅提升。 【GEMINI】该方案结构清晰，代码组织高度模块化，通过类模式清晰解耦了渲染、状态、条件和音效系统，单文件即可独立运行。主要扣分点在于部分复杂业务逻辑（如表单分步提交验证、正则测试工具、UI 层循环依赖拦截、步骤滑动动画）存在未完全落地的半成品或桩函数实现，但整体工程水准与基础交互仍属良好。 【KIMI】该候选代码在Hard级别要求下存在显著的功能缺失和稳定性问题。主要痛点包括：拖拽功能完全无法使用（核心交互断裂）、多步骤向导的步骤动画与组件归属管理缺失、条件逻辑引擎的循环依赖检测形同虚设、验证规则未在预览中实际执行。代码虽有类结构封装，但存在大量运行时错误隐患（innerHTML清空导致Sortable失效、currentStep状态计算错误等）。建议在以下方面重点修复：1）修复拖拽桥接逻辑或改用Sortable的group配置实现跨容器拖拽；2）完善多步骤模式下的步骤切换动画和组件归属管理；3）修正循环依赖检测算法；4）统一状态变更入口，避免直接操作state导致的持久化不一致；5）补全验证执行和预览渲染的readOnly问题。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%