hunyuan-pro 在「条件显示表单」的评测结果

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

基本信息

  • 模型名称：hunyuan-pro
  • 用例名称：条件显示表单
  • 测试类型：网页生成
  • 评测维度：表单设计

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建交互式表单页面。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，可在浏览器中直接运行，无需任何外部依赖。 2. 代码结构清晰，HTML 语义化，CSS 与 JS 分别置于 <style> 和 <script> 标签内。 3. 条件显示逻辑必须准确：隐藏的字段在视觉上不可见，且不参与表单验证；只验证当前可见字段。 4. 表单验证仅需覆盖必填项检查，错误提示信息应清晰、具体，紧邻对应字段显示。 5. 保费计算逻辑可使用固定的模拟数值，重点在于根据保险类型和支付方式正确切换显示价格。 6. 优先保证功能正确性与代码可读性，不追求复杂动画或高级架构。

用户提示词（User Prompt）

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

# 保险申请表 —— 条件显示表单（基础版） 请生成一个保险申请表页面，所有代码（HTML、CSS、JavaScript）写在同一个 HTML 文件中，可直接在浏览器打开运行。 ## 页面布局要求 - 页面居中显示，最大宽度 600px，有基础样式（背景色、卡片阴影、内边距） - 表单分区清晰，每个条件区块有明显的视觉分隔 ## 条件显示逻辑（核心功能） ### 1. 保险类型选择（下拉菜单，必填） 选项：请选择 / 车险 / 健康险 / 旅行险 - 选择【车险】：显示「车辆信息」区块，包含： - 车牌号（文本输入，必填） - 车辆品牌（文本输入，必填） - 车辆型号（文本输入，必填） - 购买年份（数字输入，必填） - 选择【健康险】：显示「健康信息」区块，包含： - 年龄（数字输入，必填） - 身高 cm（数字输入，必填） - 体重 kg（数字输入，必填） - 既往病史（文本域，选填） - 选择【旅行险】：显示「旅行信息」区块，包含： - 目的地（文本输入，必填） - 出发日期（日期选择，必填） - 返回日期（日期选择，必填） - 出行人数（数字输入，必填，最小值 1） - 切换保险类型时，隐藏其他区块，且隐藏区块的字段不参与验证 ### 2. 是否有附加险需求（单选按钮：是 / 否，默认否） - 选择【是】：显示附加险选项区块（多选框），包含： - □ 意外伤害险 - □ 财产损失险 - □ 第三方责任险 - 选择【否】：隐藏附加险区块 ### 3. 支付方式（单选按钮：月付 / 年付，默认月付） - 在页面上显示「预估保费」区域，根据保险类型 + 支付方式展示模拟价格： - 车险月付：¥500/月；车险年付：¥5,500/年（节省500元） - 健康险月付：¥300/月；健康险年付：¥3,200/年（节省400元） - 旅行险月付：¥150/月；旅行险年付：¥1,600/年（节省200元） - 未选择保险类型时：显示「请先选择保险类型」 ### 4. 是否需要发票（单选按钮：是 / 否，默认否） - 选择【是】：显示发票信息区块，包含： - 公司名称（文本输入，必填） - 税号（文本输入，必填） - 选择【否】：隐藏发票信息区块 ## 表单验证要求 - 点击「提交申请」按钮时触发验证 - 只验证当前可见字段中标注为「必填」的字段 - 验证规则：必填字段不能为空 - 错误提示：在对应字段下方显示红色错误文字，输入框边框变红 - 验证通过后：显示一个成功提示（alert 或页面内提示均可），内容为「申请提交成功！」 - 重新输入时，对应字段的错误状态应清除 ## 字段显示/隐藏 - 使用 display: none / display: block 控制区块的显示与隐藏 - 可添加简单的 CSS transition 使切换更平滑（可选，不强制） 请直接输出完整的 HTML 代码。

任务要求

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

  1. 条件显示逻辑正确：三种保险类型对应的信息区块能准确切换显示，切换时隐藏其他区块，附加险和发票区块也能根据单选按钮正确显示/隐藏
  2. 验证范围动态绑定：表单提交验证时，只对当前可见的必填字段进行非空校验，隐藏字段不触发验证错误
  3. 错误提示清晰可见：验证失败时，错误信息紧邻对应字段显示，输入框有明显的错误状态样式（如红色边框），且错误提示在用户修正后能正确清除
  4. 保费展示随条件更新：预估保费区域能根据保险类型和支付方式的组合，实时显示正确的模拟价格文案
  5. 代码结构清晰：HTML 结构语义化，JavaScript 逻辑可读，条件判断与 DOM 操作职责分明，无明显冗余代码

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 保险申请表 body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: #fff; max-width: 600px; width: 100%; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; } .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; border: 1px solid #ccc; border-radius: 4px; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #007BFF; outline: none; } .error { color: red; font-size: 14px; margin-top: 5px; } .hidden { display: none; } .premium { margin-top: 20px; font-weight: bold; } 保险类型 请选择 车险 健康险 旅行险 车牌号 车辆品牌 车辆型号 购买年份 年龄 身高 cm 体重 kg 既往病史 目的地 出发日期 返回日期 出行人数 是否有附加险需求 是 否 意外伤害险 财产损失险 第三方责任险 支付方式 月付 年付 请先选择保险类型 是否需要发票 是 否 公司名称 税号 提交申请 const insuranceType = document.getElementById('insuranceType'); const vehicleInfo = document.getElementById('vehicleInfo'); const healthInfo = document.getElementById('healthInfo'); const travelInfo = document.getElementById('travelInfo'); const yesExtra = document.getElementById('yesExtra'); const extraInsuranceOptions = document.getElementById('extraInsuranceOptions'); const monthly = document.getElementById('monthly'); const annual = document.getElementById('annual'); const premiumDisplay = document.getElementById('premiumDisplay'); const yesInvoice = document.getElementById('yesInvoice'); const invoiceInfo = document.getElementById('invoiceInfo'); insuranceType.addEventListener('change', function() { const type = this.value; vehicleInfo.classList.add('hidden'); healthInfo.classList.add('hidden'); travelInfo.classList.add('hidden'); if (type === '车险') { vehicleInfo.classList.remove('hidden'); } else if (type === '健康险') { healthInfo.classList.remove('hidden'); } else if (type === '旅行险') {...

AI 评审点评

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

【CLAUDE】该实现存在较严重的功能缺陷：各保险类型的信息区块字段被拆分为独立 div 但切换逻辑只控制了每组的第一个字段，导致大量必填字段永远不可见；id 命名冲突（div 与 input 同名）会引发 JS 错误；附加险和发票的「否」选项未注册事件监听。保费展示和基础样式实现较好。建议将同类字段统一包裹在一个父容器中，通过控制父容器的显隐来简化逻辑，并修复 id 冲突和事件监听缺失问题。 【GEMINI】生成结果功能基本完整，能够满足保险申请表的条件显示和动态验证核心需求。页面视觉呈现符合预期，保费计算逻辑准确。主要缺陷在于部分显隐切换逻辑（如单选按钮切换回「否」时）存在失效风险，且未完全实现「输入时清除错误」的交互细节。 【KIMI】该实现存在严重的结构性缺陷，核心功能无法正常工作。主要问题在于保险类型对应的字段区块被错误地拆分为多个独立的form-group，而JavaScript逻辑仅控制了第一个字段的显示，导致大部分条件字段始终处于隐藏状态。附加险和发票的显隐逻辑不完整，表单验证因字段显示问题而失效。建议重构HTML结构，将同类型保险的字段包裹在同一个容器内统一控制显隐，并完善事件绑定逻辑以支持双向切换。

进阶难度评测结果

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

模型生成产物

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

以下是一个完整的保险申请表页面的HTML文件，包含了所有的功能要求： ```html 保险申请表 .hidden { max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; overflow: hidden; } .visible { max-height: 500px; opacity: 1; transition: max-height 0.3s ease, opacity 0.3s ease; } .error { color: red; } 保险申请表 保险类型: 请选择 车险 健康险 旅行险 车牌号: 品牌: 型号: 购买年份: 年龄: 身高(cm): 体重(kg): 既往病史: 目的地: 出发日期: 返回日期: 出行人数: 附加险需求: 请选择 是 否 意外险 医疗险 财产险 法律援助险 支付方式: 请选择 月付 年付 公司名称: 纳税人识别号: 提交 清除草稿 保费预览: ￥0 // JavaScript 代码实现逻辑 // ... ``` 在这个HTML文件中，我已经包含了基本的表单结构和一些CSS样式来实现动画效果。JavaScript部分需要实现以下功能： 1. 根据用户选择的保险类型显示对应的表单区块，并隐藏其他区块。 2. 实现实时验证和错误信息显示。 3. 实现保费的实时计算和显示。 4. 使用localStorage来保存和恢复表单草稿。 5. 在表单提交时进行验证，并展示提交结果。 由于JavaScript代码较长，这里没有完全展示，但你可以根据上述要求和HTML结构来实现相应的逻辑。记得在实现时考虑到所有条件显示逻辑、实时验证、保费计算、草稿保存和表单提交等功能。

AI 评审点评

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

【CLAUDE】该模型生成结果是一个严重不完整的骨架代码，最核心的JavaScript逻辑部分完全缺失，仅用注释占位符代替。这意味着所有功能需求（条件显示、实时验证、保费计算、草稿保存、表单提交）均无法运行。HTML结构存在明显遗漏（缺少发票触发控件），CSS极度简陋。模型在回答末尾用文字描述了应该实现的功能，但这不能替代实际代码。这是一个典型的「知道要做什么但没有做」的失败案例，完全无法满足用户「直接输出完整的、可独立运行的HTML代码」的明确要求，综合评分极低。 【GEMINI】该生成结果严重不符合预期。模型未能遵循「直接输出完整的、可独立运行的 HTML 代码」这一核心指令，缺失了几乎所有的 JavaScript 业务逻辑（验证、计算、存储、动态绑定），仅提供了一个静态的 UI 模板，无法实际运行和测试功能。 【KIMI】该生成结果属于典型的「半成品」代码，仅完成了静态 HTML 结构和基础 CSS 样式，核心 JavaScript 功能完全未实现。作为「资深前端工程师」角色的输出，严重不符合「可直接在浏览器运行」的要求。用户若直接使用此代码，将获得一个无法交互的静态页面。建议在完整实现所有 JS 逻辑后再提交，包括：事件监听绑定、条件显示切换、正则验证集成、保费计算引擎、localStorage 持久化、表单提交处理等模块。

困难难度评测结果

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

模型生成产物

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

```html 保险申请表 body { font-family: Arial, sans-serif; background-color: #f4f8fa; color: #333; } .stepper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .step { width: 25%; text-align: center; position: relative; } .step::before { content: ''; position: absolute; top: 50%; left: -50%; width: 100%; height: 2px; background: #ccc; transform: translateY(-50%); z-index: -1; } .step:first-child::before { display: none; } .step.active { color: #007bff; font-weight: bold; } .step::after { content: '●'; position: absolute; right: -15px; width: 10px; height: 10px; background: #ccc; border-radius: 50%; } .step:last-child::after { display: none; } .step.active::after { background: #007bff; } .form-group { margin-bottom: 15px; } .form-control { width: 100%; padding: 8px; box-sizing: border-box; } .hidden { max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; overflow: hidden; } .visible { max-height: 500px; opacity: 1; } /* 其他样式省略，如错误提示、按钮样式等 */ 提交申请 静音 // 配置层 const config = { steps: [ { name: '基本信息', fields: [ { type: 'text', name: 'name', label: '姓名', required: true }, { type: 'text', name: 'idCard', label: '身份证号', required: true }, { type: 'tel', name: 'phone', label: '联系电话', required: true }, { type: 'email', name: 'email', label: '电子邮箱', required: true } ] }, { name: '险种选择', fields: [ { type: 'select', name: 'insuranceType', label: '保险类型', options: ['车险', '健康险', '旅行险'], required: true, conditionFields: { '车险': [ { type: 'text', name: 'licensePlate', label: '车牌号', pattern: '^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$', asyncValidate: true }, { type: 'text', name: 'brand', label: '品牌' }, { type: 'text', name: 'model', label: '型号' }, { type: 'number', name: 'purchaseYear', label: '购买年份' } ], '健康险': [ { type: 'number', name: 'age', label: '年龄', min: 18, max: 70 }, { type: 'number', name: 'height', label: '身高(cm)' }, { type: 'number', name: 'weight', label: '体重(kg)' }, { type: 'checkbox',...

AI 评审点评

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

【CLAUDE】该模型生成的结果本质上是一个「框架骨架」而非可运行的完整实现。配置层有一定的设计价值，展示了数据驱动架构的意图，但渲染层、验证层、状态层均以「省略」或「代码省略」的注释代替，导致整个应用完全无法运行。模型在回答末尾也明确承认「上述代码仅为框架示例」，这直接违反了原始提示词中「直接输出完整的、可独立运行的HTML代码」的核心要求。对于如此复杂的需求，模型应当尽力输出完整实现，而非仅提供骨架并声明「篇幅限制」。综合评分极低，不具备实用价值。 【GEMINI】该生成结果严重不合格。尽管提示词明确要求「直接输出完整的、可独立运行的 HTML 代码」，但模型仅给出了数据结构定义，跳过了所有核心功能的逻辑实现。作为一个技术评测案例，它未能完成任务要求的任何实质性功能（如动态渲染、异步验证、音效合成等），仅提供了一个视觉上的 UI 占位符。 【KIMI】该生成结果是一个严重不完整的框架示例，而非可运行的实现。虽然配置层的设计思路符合数据驱动架构的要求，但渲染层、验证层、状态层、音效系统等核心功能全部被省略，仅通过注释说明「代码省略，详见完整实现」。对于要求「直接输出完整的、可独立运行的HTML代码」的任务而言，此结果远未达到交付标准。所有评分维度的实际功能均未验证，只能基于现有代码结构给出较低分数。建议要求模型补全所有省略的实现代码，特别是条件渲染逻辑、异步验证流程、音效合成、状态机管理和无障碍支持等关键模块。

相关链接

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

加载中...
100%