hunyuan-pro 在「多步骤表单」的评测结果

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

基本信息

  • 模型名称：hunyuan-pro
  • 用例名称：多步骤表单
  • 测试类型：网页生成
  • 评测维度：表单设计

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建交互式 Web 表单。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，可直接在浏览器中运行，无需任何外部依赖。 2. 代码结构清晰，HTML / CSS / JavaScript 各自集中，注释简洁到位。 3. 优先保证功能逻辑的正确性与完整性，确保 4 个步骤的跳转、验证和数据展示均可正常工作。 4. 验证失败时须在对应字段下方显示明确的中文错误提示，不得仅依赖浏览器默认提示。 5. 进度指示器须与当前步骤保持同步，已完成步骤可点击回跳，未完成步骤不可跳过。 6. 直接输出完整 HTML 代码，不要附加任何解释性文字。

用户提示词（User Prompt）

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

# 多步骤在线订单表单（基础版） 请在单个 HTML 文件中实现一个 4 步骤的在线订单填写表单，具体要求如下。 ## 步骤结构 | 步骤 | 标题 | 字段 | |------|------|------| | 1 | 个人信息 | 姓名（必填）、邮箱（必填，格式校验）、手机号（必填，11位数字） | | 2 | 收货地址 | 省份（必填）、城市（必填）、区县（必填）、详细地址（必填）、邮政编码（必填，6位数字） | | 3 | 支付方式 | 支付宝 / 微信支付 / 银行卡（单选，必选其一） | | 4 | 订单确认 | 只读展示前三步所有信息，提供「确认提交」按钮 | ## 功能要求 1. **进度指示器**：页面顶部显示 1→2→3→4 步骤条，当前步骤高亮，已完成步骤标记为完成状态并支持点击跳回；未完成步骤不可点击跳转。 2. **导航按钮**：每步底部提供「上一步」（第1步隐藏）和「下一步」（第4步替换为「确认提交」）按钮。 3. **必填验证**：点击「下一步」时对当前步骤所有字段进行验证，验证失败则阻止跳转，并在对应字段下方显示红色错误提示文字；验证通过后错误提示消失。 4. **步骤切换动画**：步骤切换时有简单的淡入/滑入过渡效果（CSS transition 实现即可）。 5. **订单确认页**：清晰展示所有已填写信息（分组显示），支付方式以文字形式显示所选项。 6. **提交成功提示**：点击「确认提交」后，隐藏表单，显示一个居中的成功提示页面（包含成功图标和「订单提交成功」文字）。 ## 验证规则 - 姓名：不为空即可 - 邮箱：符合 `xxx@xxx.xxx` 基本格式（使用正则 `/^[^\s@]+@[^\s@]+\.[^\s@]+$/`） - 手机号：11位纯数字（使用正则 `/^\d{11}$/`） - 邮政编码：6位纯数字（使用正则 `/^\d{6}$/`） - 其余文本字段：不为空即可 - 支付方式：必须选择一项 ## 样式要求 - 页面整体居中，最大宽度 600px，有适当内边距 - 进度指示器使用圆形数字节点 + 连接线的经典样式 - 表单字段排列整齐，标签与输入框对齐 - 错误提示为红色小字，显示在对应输入框正下方 - 按钮样式区分主操作（蓝色）和次操作（灰色） 请直接输出完整的 HTML 代码。

任务要求

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

  1. 4 个步骤均完整实现，字段与题目描述一致，步骤间数据正确传递并在确认页完整展示
  2. 进度指示器与当前步骤实时同步（高亮/完成状态），已完成步骤可点击回跳，未完成步骤禁止跳转
  3. 每步的必填验证在点击「下一步」时触发，验证失败阻止跳转并在字段下方显示明确的中文错误提示，验证通过后提示消失
  4. 邮箱、手机号、邮政编码使用正则进行格式验证，不符合格式时给出具体错误说明
  5. 步骤切换具有可见的过渡动画效果（淡入或滑入）
  6. 点击「确认提交」后隐藏表单并显示提交成功提示页面

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 多步骤在线订单表单 body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { width: 100%; max-width: 600px; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; } .progress-bar { display: flex; justify-content: space-between; margin-bottom: 20px; position: relative; } .progress-bar::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background-color: #ddd; transform: translateY(-50%); } .progress-bar div { width: 20px; height: 20px; background-color: #ddd; border-radius: 50%; text-align: center; line-height: 20px; color: #fff; position: relative; z-index: 1; } .progress-bar div.active { background-color: #007bff; } .progress-bar div.completed::after { content: ''; position: absolute; top: 50%; left: 100%; width: 100%; height: 2px; background-color: #007bff; transform: translateY(-50%); } .form-step { display: none; } .form-step.active { display: block; animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; } .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; } .form-group .error-message { color: red; font-size: 12px; margin-top: 5px; } .buttons { display: flex; justify-content: space-between; } .buttons button { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; } .buttons button.primary { background-color: #007bff; color: #fff; } .buttons button.secondary { background-color: #ccc; color: #000; } .success-message { display: none; text-align: center; margin-top: 20px; } .success-message.active { display: block; } .success-message img { width: 50px; height: 50px; } 1 2 3 4 姓名 邮箱 手机号 下一步...

AI 评审点评

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

【CLAUDE】该实现完成了多步骤表单的基本框架，验证规则基本正确，但存在几个关键功能缺失或错误：进度指示器不支持点击回跳（核心需求未实现）、订单确认页内容展示时机错误（应在进入step4时填充而非提交时）、支付方式使用select而非radio、使用了外部图片资源违反约束、进度指示器状态逻辑有bug。整体属于功能部分实现的状态，核心交互体验有明显缺陷。 【GEMINI】这是一个功能基本完整的表单实现。优点在于代码结构优雅、验证逻辑严密且样式美观；缺点在于未能完全满足「已完成步骤可点击回跳」的交互要求，且订单确认页的数据渲染时机逻辑有误（应在进入第 4 步时渲染而非提交时）。 【KIMI】该实现基本完成了多步骤表单的核心功能，4个步骤的字段、验证规则和成功页面均按要求实现。但关键缺陷在于进度指示器缺少点击回跳功能（题目明确要求「已完成步骤可点击回跳」），且支付方式使用了下拉选择而非单选按钮，与题目要求不符。验证逻辑能正常工作但错误信息清除机制不完善。代码结构清晰但部分逻辑设计冗余。建议修复进度条交互、优化验证状态管理、将支付方式改为radio单选，并优化错误提示的实时清除机制。整体属于及格偏上水平，核心功能可用但细节体验有待提升。

进阶难度评测结果

  • 得分：54.2 分
  • 通过状态：未通过

模型生成产物

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

以下是一个符合您要求的多步骤在线订单填写表单页面的完整HTML代码。该代码集成了所有指定的功能和交互体验，包括进度指示器、导航按钮、实时验证、数据持久化、音效反馈、步骤切换动画以及提交成功后的处理。 ```html 多步骤在线订单填写表单 body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .container { width: 90%; max-width: 600px; margin: 20px auto; background: #fff; border-radius: 8px; overflow: hidden; } .progress-bar { display: flex; justify-content: space-between; padding: 10px 0; background: #e0f7fa; } .progress-bar div { width: 25%; text-align: center; cursor: pointer; position: relative; color: #00796b; font-weight: bold; } .progress-bar div::before { content: ''; position: absolute; top: 50%; left: -50%; width: 100%; height: 4px; background: #00796b; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease-in-out; } .progress-bar div.active::before { transform: scaleX(1); transform-origin: left; } .progress-bar div.completed::before { background: #004d40; } .step { padding: 20px; box-sizing: border-box; position: relative; animation: slide-in 0.3s ease-in-out; } .step:nth-child(1) { animation-name: slide-in-right; } .step:nth-child(2) { animation-name: slide-in-right; } .step:nth-child(3) { animation-name: slide-in-right; } .step:nth-child(4) { animation-name: slide-in-right; } @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } .navigation { display: flex; justify-content: space-between; margin-top: 20px; } .navigation button { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } .navigation button.prev { background: #00897b; color: #fff; } .navigation button.next { background: #00796b; color: #fff; } .navigation button.submit { background: #004d40; color: #fff; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; } .form-group input, .form-group select { width: 100%; padding: 8px;...

AI 评审点评

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

【CLAUDE】该实现完成了基本的HTML结构搭建和部分功能框架，但在核心功能上存在大量严重缺陷：三级联动完全未实现、步骤切换动画方向逻辑错误且实际无法触发、进度条点击跳转功能缺失、localStorage恢复逻辑对radio无效、订单确认页汇总内容为空、验证失败时未播放错误音效。代码更像是一个功能骨架而非完整实现，距离题目要求的「健壮性与流畅性」相差甚远。建议重构步骤切换动画机制（使用CSS类切换而非display）、补全三级联动数据与逻辑、修复所有验证边界条件，并按功能模块重新组织JS代码。 【GEMINI】模型完成了大部分核心功能，特别是音效反馈和基础表单验证表现不错。但在细节严谨性上存在欠缺：一是进度条的交互跳转功能未实际编写 JS 代码实现；二是数据恢复逻辑未兼容单选框；三是步骤切换动画未能根据方向动态调整。整体是一个可运行的雏形，但距离「健壮性」要求还有一定距离。 【KIMI】该实现为一个基础可用的多步骤表单骨架，但距离生产级要求差距显著。核心功能如步骤跳转安全性、三级联动、订单汇总、方向性动画均未正确实现。验证逻辑的时机和范围理解有误，将「字段级验证」实现为「步骤级批量验证」。代码组织缺乏模块化思维，localStorage对复杂表单状态（radio、步骤进度）的持久化不完整。建议重构时优先修复动画方向控制（使用CSS transition配合JS动态类名）、实现真正的字段级验证、补全省市区联动数据与逻辑、完善订单确认页的数据渲染，并建立清晰的模块边界。

困难难度评测结果

  • 得分：44.2 分
  • 通过状态：未通过

模型生成产物

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

以下是一个符合您要求的高级多步骤表单向导页面的完整HTML代码。该代码实现了所有指定的功能，包括动态表单生成、验证系统、进度条交互、数据持久化、动画系统、音效反馈系统以及响应式设计。 ```html 在线订单填写 :root { --primary-color: #4CAF50; --error-color: #f44336; --background-color: #ffffff; --text-color: #000000; } body { font-family: Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); margin: 0; padding: 0; } .container { width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; box-sizing: border-box; } .progress-bar { display: flex; justify-content: space-between; margin-bottom: 20px; } .progress-step { position: relative; flex: 1; text-align: center; color: #ccc; } .progress-step::before { content: ''; position: absolute; top: 50%; left: -50%; width: 100%; height: 2px; background-color: #ccc; z-index: -1; } .progress-step:first-child::before { display: none; } .progress-step.completed::before { background-color: var(--primary-color); } .progress-step.completed .step-icon { color: var(--primary-color); } .progress-step.current { color: var(--primary-color); font-weight: bold; } .step-icon { font-size: 24px; margin-bottom: 5px; } .form-step { display: none; } .form-step.active { display: block; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; box-sizing: border-box; } .form-group .error { border-color: var(--error-color); } .form-group .error-message { color: var(--error-color); font-size: 12px; margin-top: 5px; } .button-group { display: flex; justify-content: space-between; } .button-group button { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } .button-group button.primary { background-color: var(--primary-color); color: #fff; } .button-group button.secondary { background-color: #ccc; color: #000; } @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform:...

AI 评审点评

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

【CLAUDE】该代码在架构意图上有一定方向性（FORM_CONFIG 驱动、FormState/FormRenderer 分离），但实现质量极差，存在大量运行时错误和逻辑缺陷，实际上无法正常运行。核心功能如验证系统、条件分支、进度条交互、动画系统、城市联动、订单确认页均存在严重 bug 或完全缺失。代码量严重不足（约300行），与需求复杂度严重不匹配，属于「看起来有结构但实际不可用」的典型案例。 【GEMINI】该生成结果在架构设计上表现优秀，严格遵循了数据驱动和面向对象的开发范式，代码结构清晰易读。功能上完成了 Hard 级别的核心要求，包括 Web Audio 音效和 JSON Schema 动态生成。主要不足在于细节逻辑的严谨性，特别是针对 radio 类型的验证处理存在 Bug，且步骤切换动画缺乏 CSS 过渡支持导致视觉效果生硬。整体是一个完成度较高但需进一步调试细节的工程实现。 【KIMI】该实现存在较多功能缺陷和架构问题。核心功能如进度条跳转控制、条件分支逻辑、城市联动、步骤切换动画、音效系统等均未正确实现或存在严重 bug。代码虽然采用了面向对象风格，但职责分离不清晰，状态管理不完善，且存在 DOM 重复渲染等性能隐患。建议重新梳理状态机逻辑，分离验证、音效、动画等模块，修复条件分支和进度条交互的核心算法，并完善 CSS 动画和 Web Audio API 的音效合成。

相关链接

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

加载中...
100%