MiniCPM-V-4.7-35B-A3B 在「标签页组件」的评测结果

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

基本信息

  • 模型名称：MiniCPM-V-4.7-35B-A3B
  • 用例名称：标签页组件
  • 测试类型：网页生成
  • 评测维度：交互组件

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于 HTML/CSS/JavaScript 组件开发。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，可在浏览器直接打开运行，无需任何外部依赖。 2. 代码结构清晰，HTML、CSS、JavaScript 各自分区，便于阅读。 3. 优先保证核心交互功能的正确性与稳定性，视觉样式需有明显区分度。 4. CSS 使用变量（custom properties）管理颜色与间距，JavaScript 逻辑简洁直观。 5. 直接输出完整可运行的 HTML 代码，不附加任何解释文字。

用户提示词（User Prompt）

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

请在单个 HTML 文件中实现一个标签页（Tabs）组件展示页面，包含以下要求： ## 标签内容 共 5 个标签，依次为：概述、功能、规格、评价、FAQ。 每个标签对应独立的内容区域，内容区域需包含标题和 2-3 段描述性文字，以体现内容差异。 ## 核心交互 1. 点击标签时，切换至对应内容区域，同时高亮当前选中标签。 2. 内容区域切换时，新内容以淡入（fade-in）动画出现（持续约 300ms）。 3. 支持键盘左右方向键在标签间切换（需先聚焦到标签栏区域）。 ## 三种标签样式 页面需同时展示以下三种独立的标签页组件，每种样式独立运作，互不干扰： 1. **线条标签**：选中标签下方显示一条彩色下划线指示器。 2. **卡片标签**：选中标签具有明显的背景色填充，整体呈卡片感。 3. **胶囊标签**：选中标签使用圆角（pill 形状）背景色高亮。 ## 状态保持 - 使用 URL hash（如 `#tab1`、`#tab2`）同步当前选中的标签索引。 - 刷新页面后，根据 URL hash 自动恢复到对应标签（三种样式同步恢复）。 - 若 hash 无效或不存在，默认显示第一个标签。 ## 技术约束 - 所有代码（HTML、CSS、JavaScript）必须在一个 `.html` 文件中。 - 不得引用任何外部 CDN、字体或图片资源，确保离线可用。 - 使用 CSS 自定义属性（变量）管理主色调，方便统一调整。 请直接输出完整的 HTML 代码。

任务要求

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

  1. 三种标签样式（线条、卡片、胶囊）在视觉上有清晰且明显的区分，选中与未选中状态对比明确。
  2. 点击标签可正确切换内容区域，且内容切换时有可见的淡入动画效果（不少于 200ms）。
  3. 键盘左右方向键能在标签间循环切换，且当前焦点/选中状态有视觉反馈。
  4. URL hash 与当前选中标签保持同步，刷新页面后能正确恢复选中状态，无效 hash 时回退到第一个标签。
  5. 三种标签页组件相互独立运行，切换其中一个不影响其他两个的状态。
  6. 代码使用 CSS 自定义属性管理颜色，JavaScript 逻辑封装合理，避免大量重复代码。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 标签页组件展示 :root { --primary-color: #4f46e5; --primary-light: #e0e7ff; --text-color: #374151; --text-secondary: #6b7280; --bg-color: #f9fafb; --border-color: #e5e7eb; --transition-speed: 300ms; } * { 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); line-height: 1.6; padding: 40px 20px; } .container { max-width: 900px; margin: 0 auto; } h1 { text-align: center; margin-bottom: 40px; color: var(--text-color); } .tabs-section { margin-bottom: 50px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .tabs-section h2 { margin-bottom: 20px; font-size: 1.25rem; color: var(--text-secondary); } /* 标签栏通用样式 */ .tab-list { display: flex; list-style: none; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; } .tab-btn { border: none; background: none; padding: 10px 16px; cursor: pointer; font-size: 0.95rem; color: var(--text-secondary); transition: all var(--transition-speed); position: relative; outline: none; } .tab-btn:hover { color: var(--primary-color); } .tab-btn:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 4px; } .tab-content { display: none; animation: fadeIn var(--transition-speed) ease-in-out; } .tab-content.active { display: block; } .tab-content h3 { margin-bottom: 15px; color: var(--text-color); } .tab-content p { margin-bottom: 15px; color: var(--text-secondary); } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* 1. 线条标签样式 */ .tabs-line .tab-list { border-bottom: 1px solid var(--border-color); } .tabs-line .tab-btn { border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs-line .tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight:...

AI 评审点评

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

【CLAUDE】视觉与样式部分完成度高，三种标签风格区分明显、变量管理规范，动画时长也达标。但核心功能链路存在严重问题：hash 写入 `#line-tabs-0` 与 split('-') 解析逻辑不兼容，加上 hashchange 回调无条件全量重置，使得点击与键盘切换后立即回弹到第一个标签，刷新恢复也完全失效——这恰好覆盖了本题最关键的「切换 + 状态保持」两项要求。代码结构尚可，但三份内容区硬拷贝与重复的状态重置逻辑拉低了复用性。建议将 hash 改为单一索引（如 #tab1），解析时用 lastIndexOf('-') 或独立索引格式，并让 hashchange 只做初始化/外部变更同步，避免与 switchTab 互相触发。 【GEMINI】页面在视觉设计、样式区分度和 HTML/CSS 编码规范上表现良好，动画与无障碍属性齐备。但 JavaScript 在 URL hash 处理上存在致命的逻辑缺陷：`split('-')` 误切了包含连字符的 ID，导致解析 NaN，且主动修改 hash 触发的 `hashchange` 事件直接将标签重置为第一项，导致除首项外的点击切换与状态保持功能均无法正常使用。 【KIMI】该代码在视觉层面基本满足三种标签样式的区分要求，但在核心功能实现上存在严重缺陷：三个组件未能独立运作、URL hash解析逻辑错误、淡入动画无法可靠触发。这些问题导致该实现无法通过实际的功能测试。代码组织虽有一定规范性，但组件化设计不足，状态管理存在根本性错误。建议在修复hash格式设计（如使用#tab1、#tab2的统一索引而非依赖组件id）、隔离各组件状态、改用visibility/opacity方案实现动画等方面进行改进。

进阶难度评测结果

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

模型生成产物

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

```html 进阶版标签页组件 :root { --primary-color: #4f46e5; --primary-light: #e0e7ff; --text-main: #1f2937; --text-secondary: #6b7280; --bg-body: #f3f4f6; --bg-card: #ffffff; --border-color: #e5e7eb; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --radius-sm: 4px; --radius-md: 8px; --radius-full: 9999px; --transition-speed: 0.3s; } * { 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-body); color: var(--text-main); line-height: 1.6; padding: 40px 20px; } .container { max-width: 900px; margin: 0 auto; } h1 { text-align: center; margin-bottom: 40px; color: var(--text-main); font-size: 2rem; } .section { background: var(--bg-card); border-radius: var(--radius-md); padding: 30px; margin-bottom: 40px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); } .section-title { font-size: 1.25rem; margin-bottom: 20px; color: var(--text-secondary); font-weight: 600; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; } /* 标签页通用结构 */ .tabs-wrapper { position: relative; } .tab-list { display: flex; list-style: none; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .tab-item { cursor: pointer; padding: 10px 20px; border: none; background: transparent; font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); transition: all var(--transition-speed) ease; outline: none; position: relative; } .tab-item:focus-visible { box-shadow: 0 0 0 2px var(--primary-color); border-radius: var(--radius-sm); } .tab-content { display: none; animation: fadeSlideIn 0.4s ease-out forwards; padding: 20px; background: var(--bg-body); border-radius: var(--radius-sm); min-height: 150px; } .tab-content.active { display: block; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /*...

AI 评审点评

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

【CLAUDE】整体是一份完整可运行、结构清晰的单文件实现：三组标签、内容淡入位移动画、键盘左右键导航与焦点转移、分键名 localStorage 持久化、URL hash 同步及优先于本地存储、Web Audio API 合成音效（600/800/1000Hz 三档）均已落地，代码用 AudioSynth / TabManager 两类做了基本解耦，CSS 变量体系也已建立。最突出的短板是线条标签的滑动下划线指示器完全没有实现，代码用当前项自身的 border-bottom 变色替代，恰好落空在需求反复强调的「指示器需平滑滑动到对应位置、非跳变」上；其次是卡片组未激活项背景未按规格设为透明、CSS 变量未覆盖间距 token，以及 hash 越界时回退逻辑的边界漏洞。总体达到可用水准，但进阶动效这一得分重点完成度偏弱。 【GEMINI】候选方案整体完成度较高，单文件整合完整且无任何外部资源依赖。代码架构良好，规范地使用 ES6 Class 封装了音频合成与标签状态管理，成功实现了 URL Hash 同步、localStorage 存储及键盘无障碍切换。主要不足在于线条标签未实现题目重点要求的独立平滑滑动下划线指示器，仅使用了普通的 border-color 渐变。 【KIMI】该实现整体质量良好，三种标签样式的基础功能和视觉表现到位，Web Audio API 音效系统和状态持久化机制完整。主要短板在于线条标签的滑动下划线指示器未实现（为核心需求缺失）以及 Tab 键导航行为不符合规范要求。若修复滑动指示器（添加独立指示器元素并通过 transform/transition 实现位移动画）并调整 Tab 键焦点管理（标签组内使用左右箭头，Tab 键跳转到下一组），将达到更高水平。

困难难度评测结果

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

模型生成产物

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

```html 高级标签页组件 :root { --bg-primary: #ffffff; --bg-secondary: #f5f5f7; --text-primary: #1d1d1f; --text-secondary: #6e6e73; --accent-color: #0071e3; --border-color: #d2d2d7; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --transition-speed: 0.3s; --tab-height: 48px; } [data-theme="dark"] { --bg-primary: #1c1c1e; --bg-secondary: #2c2c2e; --text-primary: #f5f5f7; --text-secondary: #a1a1a6; --accent-color: #0a84ff; --border-color: #38383a; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; transition: background-color var(--transition-speed), color var(--transition-speed); min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; flex-wrap: wrap; gap: 20px; } h1 { font-size: 2rem; font-weight: 700; color: var(--text-primary); } .controls { display: flex; gap: 12px; align-items: center; } .control-btn { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 1.2rem; color: var(--text-primary); transition: all var(--transition-speed); display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; } .control-btn:hover { background: var(--accent-color); color: white; border-color: var(--accent-color); } .control-btn:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; } .tabs-section { margin-bottom: 40px; } .section-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 16px; color: var(--text-secondary); } /* 标签页容器通用样式 */ .tabs-container { background: var(--bg-primary); border-radius:...

AI 评审点评

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

【CLAUDE】整体框架、ARIA 标注与 CSS 变量主题体系看得出是按需求逐条搭的，静态结构有相当完成度，但存在一处致命的接线错误——activateTab 里 getElementById 收到的是「line」而非「line-tablist」，容器为 null 后立即抛错，使点击切换、键盘导航、Hash 恢复三条核心路径全部失效。再叠加线条标签指示器未做滑动动画、面板未真正隐藏导致高度跳动、localStorage 全程无异常捕获、Hash 格式与 #tab-1~#tab-5 规格不符且回退校验恒不成立、音效开关状态刷新后不恢复等问题，整体距离 Hard 级别所要求的生产级健壮性仍有明显差距。 【GEMINI】代码在架构设计和样式编写上展现了良好的初始意图，无障碍属性与 Web Audio API 音效设计也较为规范。然而，由于 DOM ID 传参和元素定义不一致（缺少 id='line' 等容器元素），导致核心的标签点击和键盘切换事件在运行时均会抛出 TypeError 异常而完全失效；同时 Hash 解析逻辑存在匹配错误，线条标签亦未实现物理滑动指示器，整体功能可用性存在严重缺陷。 【KIMI】该实现作为基础 Tab 组件有一定完成度，主题切换、基本键盘导航和响应式布局实现尚可，但存在大量影响生产使用的严重缺陷：URL Hash 同步逻辑完全错误、localStorage 缺少异常捕获、线条标签动画缺失、roving tabindex 实现不符合 ARIA 规范。在 Hard 级别要求下，当前代码无法通过质量门禁，需要大幅重构才能满足生产环境部署标准。建议重点修复 hash 解析逻辑、补充完整错误处理、分离状态管理与 DOM 操作层，并正确实现符合规范的键盘导航模式。

相关链接

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

加载中...
100%