GLM-5v-turbo 在「标签页组件」的评测结果

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

基本信息

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

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 标签页组件展示 :root { --bg: #0f1419; --fg: #e7e9ea; --muted: #71767b; --accent: #00d4aa; --accent-dim: rgba(0, 212, 170, 0.15); --card: #1c2128; --card-hover: #252c35; --border: #2f3640; --radius-sm: 6px; --radius-md: 10px; --radius-pill: 50px; --shadow: 0 4px 24px rgba(0, 0, 0, 0.3); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; line-height: 1.6; padding: 40px 20px; } .page-title { text-align: center; font-size: clamp(28px, 5vw, 42px); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.5px; background: linear-gradient(135deg, var(--fg) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .page-subtitle { text-align: center; color: var(--muted); font-size: 16px; margin-bottom: 60px; } .container { max-width: 900px; margin: 0 auto; } .section { margin-bottom: 60px; } .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .section-badge { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--accent-dim); color: var(--accent); font-size: 12px; font-weight: 600; border-radius: var(--radius-pill); letter-spacing: 0.5px; text-transform: uppercase; } .section-name { font-size: 20px; font-weight: 600; color: var(--fg); } /* Tabs 基础样式 */ .tabs-wrapper { background: var(--card); border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); } .tabs-nav { display: flex; position: relative; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid var(--border); } .tab-btn { flex: 1; padding: 16px 24px; background: transparent; border: none; color: var(--muted); font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.25s ease; position: relative; outline: none; } .tab-btn:hover { color: var(--fg); background: rgba(255, 255, 255, 0.03); }...

AI 评审点评

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

【CLAUDE】这是一个高质量的Tabs组件实现，视觉设计精美，三种样式区分明显，代码结构清晰，CSS变量使用规范，JavaScript封装合理。主要问题在于功能需求的矛盾处理：需求同时要求「三种组件互不干扰」和「hash同步恢复」，代码选择了完全同步方案（点击任一组件会同步所有组件），这与「互不干扰」的字面要求冲突。若理解为仅在页面加载时同步恢复、运行时独立，则需要调整逻辑。整体完成度高，是一个接近生产可用的组件展示页面。 【GEMINI】这是一个教科书级别的组件实现。不仅完全满足了所有功能性要求（三种样式、动画、键盘导航、Hash 同步），还在代码健壮性、无障碍访问（Accessibility）以及视觉审美上达到了极高的水准。代码结构清晰，逻辑严谨，是一个非常高质量的交付结果。 【KIMI】整体而言，该实现满足了题目的所有核心要求，三种标签样式的视觉区分度和交互功能均实现得很好，代码结构也比较清晰。但在代码复用性和封装性方面还有一定优化空间。

困难难度评测结果

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

模型生成产物

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

这是一个 Hard 级别的标签页组件需求，我将实现一个生产级健壮性的完整方案，包含完整的 WAI-ARIA 支持、主题系统、音效系统和状态持久化。 ```html 高级标签页组件 | Tab Component System /* ========== CSS 变量主题系统 ========== */ :root { --bg-base: #f0f2f5; --bg-surface: #ffffff; --bg-elevated: #fafbfc; --bg-muted: #e8eaed; --fg-primary: #1a1c1e; --fg-secondary: #4a4d52; --fg-tertiary: #787c82; --fg-inverse: #ffffff; --accent: #0066cc; --accent-hover: #0052a3; --accent-light: rgba(0, 102, 204, 0.1); --border: #d8dbe0; --border-light: #eef0f2; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.03); --shadow-md: 0 4px 8px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04); --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 16px 32px rgba(0,0,0,0.06); --focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.35); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] { --bg-base: #0f1114; --bg-surface: #18191c; --bg-elevated: #222427; --bg-muted: #2a2d32; --fg-primary: #e8eaed; --fg-secondary: #b8bcc2; --fg-tertiary: #8a8e94; --fg-inverse: #1a1c1e; --accent: #4da6ff; --accent-hover: #3391ee; --accent-light: rgba(77, 166, 255, 0.15); --border: #33363b; --border-light: #2a2d32; --shadow-sm: 0 1px 2px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.15); --shadow-md: 0 4px 8px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.2); --shadow-lg: 0 8px 24px rgba(0,0,0,0.3), 0 16px 32px rgba(0,0,0,0.25); --focus-ring: 0 0 0 3px rgba(77, 166, 255, 0.4); } /* ========== 基础重置 ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", Roboto, Helvetica, Arial, sans-serif; background: var(--bg-base); color: var(--fg-primary); line-height: 1.65; min-height: 100vh; transition: background-color var(--transition-normal), color...

AI 评审点评

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

【CLAUDE】WAI-ARIA 实现极为完整：role 三角色正确设置，aria-selected/aria-controls/aria-labelledby/aria-hidden 四属性双向绑定无遗漏，roving tabindex 模式实现标准（激活标签 tabindex=0，其余 -1）。键盘导航覆盖全面：方向键循环切换、Home/End 跳转首尾、Enter/Space 激活（通过 click 事件隐式支持）。焦点环使用 box-shadow 实现且清晰可见，未使用 outline:none 消除样式。唯一微小不足：未显式处理 Enter/Space 键激活逻辑（虽然浏览器默认会触发 click），但整体已达生产级标准。 【GEMINI】这是一份高质量的 Hard 级别实现。开发者不仅满足了所有功能性要求，还在无障碍细节（如 roving tabindex）和生产级健壮性（如存储异常捕获、Hash 正则校验、Resize 防抖更新指示器）上表现出色。代码结构清晰，视觉效果精美，完全符合资深前端工程师的产出标准。 【KIMI】整体而言，代码实现了所有指定的功能要求，代码结构清晰，功能实现完整。在WAI-ARIA无障碍支持、视觉和主题切换、功能完整性方面都表现优秀。响应式布局和音效系统也符合要求。但在代码架构方面，注释和命名还有改进空间，影响了代码的可读性。总体来说，这是一个高质量的前端组件实现。

相关链接

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

加载中...
100%