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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 表单构建器 :root { --primary: #1e6fd9; --primary-light: #eaf2fd; --primary-dark: #1558b0; --primary-hover: #1a5fbb; --accent: #e8930a; --bg: #eef2f7; --panel-bg: #ffffff; --text: #1a2332; --text-secondary: #6b7a8d; --border: #d5dce6; --border-light: #e6ecf3; --error: #d63031; --success: #27ae60; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 2px 8px rgba(0,0,0,0.07); --shadow-md: 0 4px 16px rgba(0,0,0,0.09); --shadow-lg: 0 8px 30px rgba(0,0,0,0.12); --radius: 8px; --radius-sm: 5px; --radius-lg: 12px; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden} /* ===== 顶部工具栏 ===== */ .toolbar{height:54px;background:var(--panel-bg);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:10px;box-shadow:var(--shadow-sm);position:relative;z-index:100} .toolbar-brand{font-size:17px;font-weight:700;color:var(--primary);margin-right:20px;display:flex;align-items:center;gap:8px;letter-spacing:-0.3px} .toolbar-brand i{font-size:20px} .toolbar-sep{width:1px;height:26px;background:var(--border);margin:0 6px} .toolbar-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel-bg);color:var(--text);font-size:12.5px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit;white-space:nowrap} .toolbar-btn:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)} .toolbar-btn:active{transform:scale(.97)} .toolbar-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)} .toolbar-btn.primary:hover{background:var(--primary-hover)} .toolbar-btn.danger:hover{background:#fef2f2;color:var(--error);border-color:var(--error)} /* ===== 三栏布局 ===== */ .main-layout{display:flex;height:calc(100vh - 54px)} /* ===== 左侧组件面板 ===== */...

AI 评审点评

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

【GEMINI】这是一个极其优秀的大模型生成结果。它不仅完美履行了所有的功能需求（包括复杂的拖拽排序、属性实时同步和 JSON 闭环），还在 UI/UX 细节上表现出了专业水准。预览模式下的表单校验功能非常实用，代码结构严谨，是一个可以直接投入使用的原型工具。 【KIMI】整体而言，该代码实现了表单构建器的核心功能，用户交互体验良好，代码组织清晰。在功能实现和代码质量方面都表现不错，只是在细节上还有优化空间，如增加拖拽动画效果，优化CSS和JS分区等。

进阶难度评测结果

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

模型生成产物

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

```html 高级表单构建器 :root { --primary: #4f46e5; --primary-light: #e0e7ff; --danger: #ef4444; --success: #10b981; --warning: #f59e0b; --bg: #f3f4f6; --card: #ffffff; --text: #1f2937; --text-muted: #6b7280; --border: #e5e7eb; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; display: flex; flex-direction: column; } /* 顶部工具栏 */ .toolbar { background: var(--card); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 3px rgba(0,0,0,0.05); z-index: 10; } .toolbar-title { font-size: 1.25rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; } .toolbar-actions { display: flex; gap: 10px; align-items: center; } .btn { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; font-size: 0.875rem; display: flex; align-items: center; gap: 6px; transition: all 0.2s; } .btn:hover { background: var(--bg); border-color: var(--text-muted); } .btn-primary { background: var(--primary); color: white; border-color: var(--primary); } .btn-primary:hover { background: #4338ca; } .btn-danger { color: var(--danger); border-color: var(--danger); } .btn-danger:hover { background: #fef2f2; } .btn-icon { padding: 8px; border: none; background: transparent; font-size: 1.1rem; color: var(--text-muted); } .btn-icon:hover { color: var(--text); } .btn-icon.muted { color: var(--danger); } .save-indicator { font-size: 0.8rem; color: var(--success); opacity: 0; transition: opacity 0.3s; margin-right: 10px; } .save-indicator.show { opacity: 1; } /* 主体布局 */ .main-container { display: flex; flex: 1; overflow: hidden; } /* 左侧面板 */ .left-panel { width: 260px; background: var(--card); border-right: 1px solid...

AI 评审点评

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

【GEMINI】这是一个高质量的表单构建器实现。它不仅完美达成了所有基础和进阶功能要求，还在 UX 细节（如音效设计、自动保存提示、预览验证体验）上表现出了极高的专业水准。代码逻辑严密，特别是在处理复杂的自定义正则测试和 JSON 结构还原方面做得非常出色，是一个可以直接投入使用的单文件 Web 应用示例。 【KIMI】整体而言，代码实现了大部分的核心功能，包括拖拽构建器、属性面板实时同步、复杂验证规则、localStorage持久化以及JSON导入导出。代码的组织结构清晰，易于阅读和维护。但是，代码中缺少对Web Audio API音效实现的具体代码，这可能会影响用户体验和代码的完整性。

困难难度评测结果

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

模型生成产物

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

```html 高级表单构建器 :root { --primary: #4f46e5; --primary-hover: #4338ca; --bg: #f3f4f6; --panel-bg: #ffffff; --border: #e5e7eb; --text: #1f2937; --text-muted: #6b7280; --danger: #ef4444; --success: #10b981; --warning: #f59e0b; --canvas-component-bg: #ffffff; --canvas-component-border: #e5e7eb; --selected-border: #4f46e5; --condition-hidden-border: #9ca3af; } * { 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: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Toolbar */ .toolbar { height: 56px; background: var(--panel-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; 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(--primary); margin-right: auto; display: flex; align-items: center; gap: 8px; } .toolbar-title svg { width: 24px; height: 24px; } .btn { padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-bg); color: var(--text); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; } .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); } .btn-danger:hover { background: #fef2f2; } .btn-sm { padding: 4px 8px; font-size: 12px; } .btn-icon { padding: 6px; border-radius: 4px; } .btn-active { background: var(--primary); color: white; border-color: var(--primary); } /* Main Layout */ .main-layout { flex: 1; display: flex; overflow: hidden; } /* Left Panel */ .left-panel { width: 260px; background: var(--panel-bg); border-right: 1px solid var(--border);...

AI 评审点评

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

【GEMINI】这是一个高质量的 Hard 级别实现。作者不仅完成了所有复杂的功能点（如多步骤、AND/OR 条件逻辑、Web Audio 音效），还特别在代码架构上展现了深厚的功底，模块化程度极高。JSON 闭环逻辑和循环依赖检测是亮点。唯一的小缺憾是步骤切换时的滑动动画效果未能通过 CSS 充分体现，但整体而言是一个非常专业且可直接运行的工具。 【KIMI】整体而言，代码实现了高级表单构建器的大部分核心功能，包括多步骤向导、条件显示逻辑引擎、富文本编辑器组件、JSON 导入导出闭环等，功能较为完整。在交互体验和代码质量方面也表现不错，但仍有一些细节可以优化。代码架构较为模块化，有一定的可读性和健壮性，但还可以进一步提升。

相关链接

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

加载中...
100%