glm-4.7 在「标签页组件」的评测结果

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

基本信息

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

系统提示词（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 逻辑封装合理，避免大量重复代码。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

多样式标签页组件展示 :root { /* 核心颜色变量 */ --primary-color: #3b82f6; --primary-hover: #2563eb; --text-main: #1f2937; --text-secondary: #4b5563; --bg-body: #f3f4f6; --bg-card: #ffffff; --border-color: #e5e7eb; --line-indicator-height: 3px; --transition-speed: 0.3s; --radius-md: 8px; --radius-pill: 9999px; } * { 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; } main { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; } h1 { text-align: center; margin-bottom: 20px; color: var(--text-main); } h2 { font-size: 1.25rem; margin-bottom: 15px; color: var(--text-secondary); border-left: 4px solid var(--primary-color); padding-left: 10px; } /* 通用组件容器 */ .tabs-wrapper { background: var(--bg-card); border-radius: var(--radius-md); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid var(--border-color); } /* 标签导航区域通用样式 */ .tabs-nav { display: flex; list-style: none; background: #fff; position: relative; } .tab-btn { padding: 16px 24px; cursor: pointer; font-weight: 500; color: var(--text-secondary); transition: all var(--transition-speed); border: none; background: none; font-size: 1rem; outline: none; } .tab-btn:hover { color: var(--primary-color); } .tab-btn:focus-visible { background-color: rgba(59, 130, 246, 0.1); } /* 内容区域通用样式 */ .tabs-content { padding: 30px; min-height: 200px; } .tab-panel { display: none; /* 默认隐藏 */ } .tab-panel.active { display: block; /* 激活显示 */ animation: fadeIn var(--transition-speed) ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .panel-title { font-size: 1.5rem; margin-bottom: 15px; color: var(--text-main); } .panel-text { color: var(--text-secondary); margin-bottom: 12px; } /*...

AI 评审点评

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

【CLAUDE】该实现整体质量较高，视觉设计美观，三种标签样式区分度清晰，CSS变量管理规范，代码结构清晰易读。主要缺陷在于功能设计上违反了「三种组件独立运行」的核心需求——所有组件通过同一`switchTab`函数同步联动，而非各自独立管理状态。这一设计决策虽然简化了URL hash同步逻辑，但未能满足需求规格。键盘导航和URL状态恢复功能实现完整，淡入动画效果良好。整体是一个完成度较高但在独立性需求上存在明显偏差的实现。 【GEMINI】这是一个高质量的实现。开发者不仅满足了所有功能性要求（如 Hash 同步、键盘导航、动画），还在细节上做了很多优化，比如胶囊标签的缩放反馈、响应式布局的滚动处理以及标准的无障碍属性。唯一的争议点在于组件间的独立性：开发者选择让所有样式的状态与单个 URL Hash 强绑定，导致操作其中一个会联动另外两个，这在满足“同步恢复”要求的同时牺牲了交互的独立性，但在单页面演示场景下是合理的权衡。 【KIMI】这是一个高质量的Tab组件实现，完整满足了所有功能需求。三种视觉样式区分度高且美观，核心交互功能（点击切换、淡入动画、键盘导航、URL hash同步）全部正确实现，代码结构清晰、复用性好，CSS变量和JavaScript封装都体现了良好的工程实践。特别值得称赞的是三种组件状态同步的设计，以及完善的ARIA无障碍支持。

进阶难度评测结果

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

模型生成产物

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

```html 高级标签页组件展示 :root { /* 设计 Token */ --primary-color: #3b82f6; --primary-hover: #2563eb; --secondary-color: #64748b; --bg-color: #f8fafc; --card-bg: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border-color: #e2e8f0; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --radius-md: 8px; --radius-pill: 9999px; --transition-speed: 0.3s; --spacing-unit: 1rem; } * { 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-main); line-height: 1.6; padding: 2rem; } header { text-align: center; margin-bottom: 3rem; } h1 { font-size: 2rem; margin-bottom: 0.5rem; color: var(--text-main); } p.subtitle { color: var(--text-muted); } main { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 4rem; } /* 通用组件容器 */ .tab-section { background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 2rem; border: 1px solid var(--border-color); } .section-title { font-size: 1.25rem; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); } /* 标签页头部通用样式 */ .tab-header { position: relative; display: flex; margin-bottom: 1.5rem; } .tab-btn { background: none; border: none; cursor: pointer; padding: 0.75rem 1.5rem; font-size: 1rem; color: var(--text-muted); transition: all var(--transition-speed) ease; outline: none; position: relative; z-index: 1; } .tab-btn:hover { color: var(--primary-color); } .tab-btn:focus-visible { box-shadow: 0 0 0 2px var(--primary-color); border-radius: 4px; } .tab-btn[aria-selected="true"] { color: var(--primary-color); font-weight: 600; } /* 内容区域通用样式 */ .tab-content { position: relative; min-height: 150px; } .tab-panel { display: none; animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }...

AI 评审点评

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

【CLAUDE】该实现整体质量中等偏上，三种标签样式、键盘导航、localStorage持久化、URL hash同步、Web Audio API音效等核心功能均有实现，代码架构采用类封装，CSS变量使用规范。主要问题集中在：(1) hash优先级逻辑存在边界bug（hash为#tab-1时可能被localStorage覆盖）；(2) 初始panel显示依赖HTML手动设置aria-hidden，存在潜在显示问题；(3) 动画效果仅在内容切换时有淡入位移，标签按钮本身的切换缺乏过渡动效。总体而言是一个功能较完整但细节处理有瑕疵的实现。 【GEMINI】这是一份教科书级别的前端组件实现。不仅完全满足了所有功能性和技术性约束（单文件、无外部依赖、Web Audio 合成、Hash 同步等），还在代码健壮性和视觉细节上表现卓越。通过 Class 封装标签逻辑使得代码易于维护，对 Web Audio 的处理也规避了浏览器自动播放限制的常见陷阱。整体表现非常优秀。 【KIMI】这是一个高质量的 Tab 组件实现，完整覆盖了所有功能需求。三种视觉样式各具特色且交互一致，动画效果细腻流畅，代码架构清晰可维护。Web Audio API 的音效实现尤为出色，不同频率的设计增加了交互层次感。状态持久化策略正确，hash 优先于 localStorage 的处理符合需求。整体达到生产可用水准，仅在极端场景（如 hashchange 触发切换）的音效一致性和移动端胶囊标签的响应式细节上有微小优化空间。

困难难度评测结果

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

模型生成产物

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

```html 高级标签页组件系统 /* ========================================= CSS 变量与主题系统 ========================================= */ :root { /* 浅色主题 (默认) */ --bg-body: #f8f9fa; --bg-card: #ffffff; --bg-panel: #ffffff; --text-main: #212529; --text-muted: #6c757d; --border-color: #dee2e6; --primary-color: #3b82f6; --primary-hover: #2563eb; --primary-light: rgba(59, 130, 246, 0.1); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.4); --transition-speed: 0.3s; --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } [data-theme="dark"] { /* 深色主题 */ --bg-body: #121212; --bg-card: #1e1e1e; --bg-panel: #1e1e1e; --text-main: #e0e0e0; --text-muted: #a0a0a0; --border-color: #333333; --primary-color: #60a5fa; --primary-hover: #93c5fd; --primary-light: rgba(96, 165, 250, 0.15); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.3); } /* ========================================= 基础重置与布局 ========================================= */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-stack); background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; transition: background-color var(--transition-speed), color var(--transition-speed); padding-bottom: 4rem; } header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; background-color: var(--bg-card); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); } h1 { font-size: 1.5rem; font-weight: 700; } .controls { display: flex; gap: 1rem; } .icon-btn { background: none; border: 1px solid var(--border-color); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-main); transition: all 0.2s; }...

AI 评审点评

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

【CLAUDE】该实现整体质量较高，单文件内完整涵盖了三种标签样式、WAI-ARIA 无障碍支持、主题切换系统、URL Hash 同步、Web Audio API 音效、localStorage 持久化和响应式布局等核心需求。代码结构清晰，使用面向对象封装，CSS Variables 主题系统设计规范。主要不足在于：键盘导航采用了仅移动焦点不自动激活的模式（ARIA APG 对水平标签建议 Follow Focus）；悬停音效的事件绑定逻辑使用捕获阶段的 mouseenter 有轻微误差；hashchange 响应逻辑与 groups 数组的硬耦合有一定脆弱性；线条指示器初始位置在 DOMContentLoaded 后未立即通过 requestAnimationFrame 触发，可能在页面首次渲染时指示器位置不正确（宽度为 0）。整体属于功能完整、细节尚需打磨的 Hard 级别实现。 【GEMINI】这是一份高质量的生产级代码实现。开发者不仅满足了所有功能性需求，还在细节上表现出色，特别是在无障碍焦点管理、Web Audio 音效合成以及 URL 状态同步的健壮性方面。代码结构清晰，注释充分，完美契合 Hard 级别的评测标准。 【KIMI】该实现是一份高质量的生产级 Tab 组件代码，完整覆盖了 Hard 级别的所有核心要求。WAI-ARIA 无障碍实现规范，键盘导航符合标准；三种视觉样式区分清晰，主题系统基于 CSS Variables 且过渡流畅；功能层面 Hash 同步、localStorage 持久化、Web Audio API 音效系统均正确实现，并妥善处理了浏览器自动播放策略；代码采用类封装实现状态与 DOM 解耦，健壮性良好。 minor 改进空间包括：全局硬编码颜色值的消除、URL Hash 与多标签组关系的更明确处理、以及个别代码格式细节的完善。整体而言，该实现已达到生产环境可用水准。

相关链接

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

加载中...
100%