GLM-5.1 在「表单构建器」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：表单构建器
  • 测试类型：网页生成
  • 评测维度：表单设计

系统提示词（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 在单文件内分区编写，无明显运行时报错。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 表单构建器 tailwind.config = { theme: { extend: { fontFamily: { sans: ['"Noto Sans SC"', 'sans-serif'] } } } } :root { --primary: #4361EE; --primary-hover: #3A56D4; --primary-light: #EEF1FF; --primary-ghost: rgba(67,97,238,0.08); --danger: #EF4444; --danger-hover: #DC2626; --danger-light: #FEF2F2; --success: #10B981; --bg: #F1F5F9; --card: #FFFFFF; --text: #1E293B; --text-secondary: #64748B; --text-muted: #94A3B8; --border: #E2E8F0; --border-light: #F1F5F9; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Noto Sans SC', sans-serif; background: var(--bg); color: var(--text); overflow: hidden; } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94A3B8; } /* 顶部工具栏 */ .toolbar { height: 56px; background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-shadow: var(--shadow-sm); position: relative; z-index: 100; } .toolbar-title { font-size: 18px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 10px; } .toolbar-title i { font-size: 20px; } .toolbar-actions { display: flex; gap: 8px; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; transition: all 0.2s ease; font-family: inherit; white-space: nowrap; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(67,97,238,0.3); } .btn-outline { background: var(--card); color: var(--text); border:...

AI 评审点评

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

【CLAUDE】这是一个完成度极高的表单构建器实现。代码在单 HTML 文件内实现了完整的拖拽式表单设计功能，包含 10 种组件类型、实时属性编辑、预览验证和 JSON 导入导出等核心能力。技术选型合理（Sortable.js 处理拖拽、原生 JS 实现业务逻辑），UI 设计现代且一致（蓝色主题、卡片式布局、流畅动画），用户体验流畅（拖拽反馈、选中高亮、Toast 通知、键盘快捷键）。代码组织清晰，HTML 语义化良好，CSS 使用变量和模块化命名，JavaScript 函数职责单一且有充分注释，安全性考虑到位（XSS 防护）。外部依赖使用主流 CDN，开箱即用。唯一可优化点包括：Tailwind CSS 引入但未充分使用、预览页面标题不可自定义、部分边界情况处理可更健壮。整体而言，这是一个功能完整、体验优秀、代码质量高的专业级实现，完全满足需求规格说明中的所有要求。 【GEMINI】这是一个高质量的表单构建器实现。它不仅完全满足了所有需求，还在细节上做了大量优化，如预览窗口的复杂验证逻辑、快捷键支持（Delete/Esc）以及优雅的 CSS 动画反馈。代码结构清晰，逻辑严密，是一个非常优秀的 AI 生成示例。 【KIMI】该表单构建器实现完整，功能覆盖题目要求的全部核心场景，交互体验流畅，视觉设计简洁美观。代码组织清晰，单文件可独立运行，依赖可靠。主要扣分点在于：HTML实体编码的输出格式问题、属性面板中选项label/value的耦合设计、以及部分代码可维护性优化空间。整体达到生产可用水平，是一款优秀的表单构建工具实现。

进阶难度评测结果

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

模型生成产物

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

```html 高级表单构建器 :root { --bg-color: #f3f4f6; --panel-bg: #ffffff; --border-color: #e5e7eb; --text-main: #1f2937; --text-muted: #6b7280; --primary: #3b82f6; --primary-hover: #2563eb; --danger: #ef4444; --success: #10b981; --canvas-item-bg: #ffffff; --canvas-item-border: #e5e7eb; --active-item-border: #3b82f6; --active-item-shadow: rgba(59, 130, 246, 0.25); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } body { background: var(--bg-color); color: var(--text-main); height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* 顶部工具栏 */ .toolbar { height: 56px; background: var(--panel-bg); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 20px; gap: 12px; z-index: 100; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .toolbar-title { font-weight: 700; font-size: 18px; color: var(--text-main); margin-right: auto; display: flex; align-items: center; gap: 8px; } .toolbar-title i { color: var(--primary); } .btn { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border-color); background: white; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: all 0.2s; color: var(--text-main); } .btn:hover { background: #f9fafb; border-color: #d1d5db; } .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); background: white; } .btn-danger:hover { background: #fef2f2; } .btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; font-size: 16px; border-radius: 8px; } .auto-save-indicator { font-size: 12px; color: var(--success); opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; gap: 4px; } .auto-save-indicator.show { opacity: 1; } /* 主体布局 */ .main-container { display: flex; flex:...

AI 评审点评

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

【CLAUDE】这是一个完成度极高的表单构建器实现，完整满足了所有核心需求。功能层面实现了拖拽构建、属性实时同步、复杂验证规则（含自定义正则测试）、localStorage 持久化及 JSON 导入导出闭环；交互层面拖拽流畅、视觉反馈清晰、Web Audio API 音效实现专业且有区分度；代码层面单文件架构清晰、职责分离良好、外部依赖可靠、开箱即用。主要扣分点集中在细节优化空间：预览表单中 radio/checkbox 验证反馈不够明显、部分样式管理略显混乱、代码中存在可进一步抽象的长函数和魔法数字。总体而言这是一个功能完整、体验流畅、代码质量优秀的高水平实现，达到了进阶版表单构建器的预期标准。 【GEMINI】这是一个非常高水准的实现。不仅完美对齐了所有进阶功能要求（特别是音效反馈和复杂的实时验证逻辑），还在 UI 细节和代码架构上展现了资深前端工程师的专业性。应用逻辑严密，JSON 导入导出和持久化功能确保了生产级别的可用性，是一个优秀的单文件 Web 应用示例。 【KIMI】该实现作为中等难度表单构建器基本达标，核心功能框架完整，UI设计专业。主要短板在于：Sortable.js与自定义DOM操作的协同处理不够健壮，导致排序后状态同步存在隐患；验证反馈的视觉一致性有待加强（radio/checkbox与text输入框体验不一致）；代码在工程化细节（错误处理、性能优化、浏览器兼容）方面还有提升空间。音效实现符合Web Audio API要求但场景覆盖和音质调校可更精细。整体属于可用但需打磨的实现，距离生产级代码尚有距离。

困难难度评测结果

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

模型生成产物

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

```html 高级表单构建器 :root { --primary: #4f46e5; --primary-hover: #4338ca; --bg: #f3f4f6; --panel-bg: #ffffff; --text: #1f2937; --text-light: #6b7280; --border: #e5e7eb; --danger: #ef4444; --success: #10b981; --canvas-bg: #f9fafb; --shadow: 0 1px 3px rgba(0,0,0,0.1); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body { background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; display: flex; flex-direction: column; } /* Toolbar */ .toolbar { height: 56px; background: var(--panel-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 12px; box-shadow: var(--shadow); z-index: 10; } .toolbar h1 { font-size: 18px; font-weight: 700; margin-right: auto; color: var(--primary); } .btn { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-bg); cursor: pointer; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; transition: all 0.2s; } .btn:hover { background: #f3f4f6; } .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; } .btn-icon { padding: 6px; border: none; background: transparent; color: var(--text-light); font-size: 18px; } .btn-icon:hover { color: var(--text); background: #f3f4f6; border-radius: 4px; } .btn-icon.active { color: var(--primary); } /* Layout */ .main-layout { flex: 1; display: flex; overflow: hidden; } .panel { width: 280px; background: var(--panel-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; } .panel-right { border-right: none; border-left: 1px solid var(--border); } .panel-title { padding: 16px; font-weight: 600; border-bottom: 1px solid var(--border); background: #fafbfc;...

AI 评审点评

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

【CLAUDE】这是一个高质量的 Hard 级别表单构建器实现，功能完整度达到 92%，核心需求如多步骤向导、条件显示逻辑引擎、音效系统、JSON 导入导出闭环均已实现且运行正常。代码架构采用清晰的模块化设计，五个核心类职责分离良好，XSS 防护和 localStorage 持久化处理到位，单文件封装完整且可独立运行。交互体验整体流畅，拖拽排序、属性实时同步、音效反馈、视觉设计均达到专业水准。主要不足：富文本编辑器缺少格式化工具栏的实际实现（虽有 CSS 定义但未渲染按钮），步骤切换动画不够明显，部分代码存在冗余和潜在 bug（如 Sortable reorder 逻辑、循环依赖检测算法）。综合来看，该实现在功能性、交互性和代码质量三方面均表现优秀，符合 Hard 级别要求，但在细节打磨和边界处理上仍有提升空间。 【GEMINI】这是一个高质量的 Hard 级别表单构建器实现。代码组织专业，采用了现代前端的类模块化设计模式，逻辑清晰且健壮。核心难点如条件逻辑的循环依赖检测、多步骤状态机、程序化音频生成均得到了妥善处理。整体视觉设计简洁专业，交互逻辑闭环，是一个非常优秀的单文件 Web 应用示例。 【KIMI】该实现作为Hard级别表单构建器，基础框架已搭建完成，核心类结构清晰，基础拖拽、属性编辑、音效系统、JSON导入导出等功能可用。但在关键高级功能上存在严重缺陷：富文本编辑器为不可用的空壳（工具栏无事件绑定）、条件逻辑引擎的循环依赖检测算法错误、多步骤动画缺失、画布排序索引映射逻辑错误。XSS防护部分执行，innerHTML的不当使用在多处留下安全隐患。整体处于勉强及格水平，距离生产可用的高级表单构建器差距明显，需重点修复富文本编辑器功能、条件引擎算法、排序索引映射和XSS漏洞。

相关链接

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

加载中...
100%