doubao-seed-2-0-pro 在「标签页组件」的评测结果

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

基本信息

  • 模型名称：doubao-seed-2-0-pro
  • 用例名称：标签页组件
  • 测试类型：网页生成
  • 评测维度：交互组件

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 标签页组件展示 :root { --primary: #2563eb; --text-primary: #1f2937; --text-secondary: #6b7280; --border-color: #e5e7eb; --bg-gray: #f3f4f6; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; --transition-duration: 300ms; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, sans-serif; color: var(--text-primary); line-height: 1.6; max-width: 900px; margin: 0 auto; padding: var(--spacing-lg); } .page-title { text-align: center; margin-bottom: 3rem; font-size: 2rem; color: var(--text-primary); } .tabs-section { margin-bottom: 4rem; } .tabs-section h2 { font-size: 1.5rem; margin-bottom: var(--spacing-lg); color: var(--text-primary); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--border-color); } /* 通用标签样式 */ .tabs__nav { display: flex; gap: var(--spacing-lg); border-bottom: 1px solid var(--border-color); } .tabs__nav-item { padding: var(--spacing-md) 0; text-decoration: none; color: var(--text-secondary); font-weight: 500; transition: all calc(var(--transition-duration) * 0.7) ease; cursor: pointer; background: transparent; border: none; font-size: 1rem; } .tabs__nav-item.active { color: var(--primary); } .tabs__content { margin-top: var(--spacing-lg); position: relative; min-height: 180px; } .tabs__content-item { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity var(--transition-duration) ease, visibility var(--transition-duration) ease; } .tabs__content-item.active { opacity: 1; visibility: visible; position: relative; } .tabs__content-item h3 { margin-bottom: var(--spacing-md); font-size: 1.25rem; } .tabs__content-item p { margin-bottom: var(--spacing-md); color: var(--text-secondary); } /* 线条标签样式 */ .tabs--line .tabs__nav-item.active { border-bottom: 2px solid var(--primary); margin-bottom: -1px; } /* 卡片标签样式 */ .tabs--card .tabs__nav { border-bottom: 2px solid var(--primary); gap: 0; } .tabs--card .tabs__nav-item { padding: var(--spacing-md)...

AI 评审点评

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

【CLAUDE】该候选输出在CSS样式设计上有一定基础，三种标签样式的视觉区分方案设计合理，CSS变量使用规范。但JavaScript实现严重不完整，缺少点击事件绑定、键盘导航、URL hash同步等核心交互功能，导致组件在实际运行中几乎无法正常工作（除初始加载外）。HTML内容大量重复也是一个明显的代码质量问题。整体来看，这是一个「有样式骨架但缺乏交互灵魂」的不完整实现，距离需求要求差距较大。 【GEMINI】代码在视觉实现和结构组织上表现优秀，CSS 样式定义非常专业。遗憾的是，JavaScript 代码在实现核心交互逻辑（事件监听、键盘导航、Hash 同步）的关键部分因为输出长度限制而截断，导致组件无法交互，未能达到「可直接运行」的要求。 【KIMI】该实现展示了良好的CSS架构能力和视觉设计，三种标签样式区分度达标，动画效果正确。但JavaScript代码严重不完整，关键交互功能（键盘导航、URL hash同步、点击事件绑定）完全缺失，导致组件无法实际使用。这是一个典型的「半成品」提交，前端展示层完成但交互逻辑层断裂。若补全事件监听和状态管理逻辑，质量将有显著提升。当前状态无法满足生产环境要求。

进阶难度评测结果

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

模型生成产物

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

```html 进阶标签页组件 :root { --primary-color: #3b82f6; --primary-light: #eff6ff; --text-color: #1f2937; --text-light: #6b7280; --border-color: #e5e7eb; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --radius-sm: 6px; --radius-md: 10px; --radius-full: 999px; --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 32px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; } body { background-color: #f9fafb; color: var(--text-color); line-height: 1.6; padding: var(--spacing-lg); } .container { max-width: 900px; margin: 0 auto; } .section { background: white; border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); box-shadow: var(--shadow); } .section-title { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--spacing-md); color: var(--text-color); } /* 标签导航通用样式 */ .tabs-nav { position: relative; display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: var(--spacing-md); } .tab { padding: var(--spacing-sm) var(--spacing-md); background: transparent; border: none; font-size: 1rem; font-weight: 500; color: var(--text-light); cursor: pointer; transition: var(--transition); position: relative; outline: none; } .tab:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: var(--radius-sm); } .tab.active { color: var(--primary-color); } /* 线条标签样式 */ .tabs-nav.line .indicator { position: absolute; bottom: -1px; height: 2px; background-color: var(--primary-color); transition: var(--transition); border-radius: var(--radius-full); } /* 卡片标签样式 */ .tabs-nav.card { border-bottom: none; gap: var(--spacing-xs); } .tabs-nav.card .tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; } .tabs-nav.card .tab.active { background-color: var(--primary-light);...

AI 评审点评

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

【CLAUDE】该候选输出的最大问题是 JavaScript 代码被截断，导致所有交互功能均无法运行，仅剩静态 HTML/CSS 骨架。CSS 部分质量较高，设计 token 管理规范，三种标签样式的视觉差异化设计思路正确，动画过渡方案合理。JS 已有部分展示了良好的模块化意识和 Web Audio API 使用方式。但由于代码不完整，键盘导航、localStorage 持久化、URL hash 同步、实际标签切换交互等核心功能均缺失，无法作为可运行的完整组件交付。若代码完整，预计可达到中等偏上水平。 【GEMINI】模型生成的代码在视觉实现和结构设计上表现良好，符合前端工程化规范。然而，由于输出内容在 JavaScript 部分被截断，导致所有进阶功能（键盘导航、状态持久化、URL 同步、音效触发）均无法实际运行。这是一个严重的完整性问题，未能满足「输出完整可运行的 HTML 代码」这一核心指令。 【KIMI】该候选输出展现了扎实的前端工程基础，CSS 自定义变量使用规范，JavaScript 模块化组织思路清晰，三种标签样式的视觉区分明确。然而致命缺陷在于代码在关键功能处被截断（saveState 函数未完成，事件监听、hash 同步、键盘导航等逻辑均未呈现），导致无法验证核心交互功能是否实现。作为「完整可运行的 HTML 代码」提交物，此截断属于严重交付缺陷。若代码完整，预计可达良好水平；当前状态仅能判定为不及格交付物。

困难难度评测结果

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

模型生成产物

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

```html 标签页组件演示 :root { --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #e9ecef; --text-primary: #212529; --text-secondary: #6c757d; --accent: #4361ee; --accent-light: rgba(67, 97, 238, 0.1); --border-color: #dee2e6; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] { --bg-primary: #121212; --bg-secondary: #1e1e1e; --bg-tertiary: #2d2d2d; --text-primary: #ffffff; --text-secondary: #a0a0a0; --accent: #7289f2; --accent-light: rgba(114, 137, 242, 0.15); --border-color: #3d3d3d; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; transition: var(--transition); padding: 2rem 1rem; max-width: 1000px; margin: 0 auto; } .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); } .header-actions { display: flex; gap: 1rem; } .btn-icon { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); width: 40px; height: 40px; border-radius: 8px; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .btn-icon:hover { background: var(--bg-tertiary); } .btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tab-group { margin-bottom: 4rem; } .tab-group-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--text-primary); } .tablist { list-style: none; display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-color); overflow-x: auto; scrollbar-width: none;...

AI 评审点评

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

【CLAUDE】候选输出存在严重的截断问题，JavaScript 代码完全缺失，导致绝大多数 Hard 级别核心功能无法实现，包括键盘导航、URL Hash 同步、localStorage 持久化、Web Audio API 音效系统、主题切换逻辑等。HTML 结构和 CSS 设计质量尚可，ARIA 属性在静态 HTML 中有正确设置，CSS Variables 主题系统设计合理，三种标签样式视觉区分度较好。但由于 JS 的完全缺失，整个组件实际上是一个无法交互的静态页面，与 Hard 级别的要求相差甚远。 【GEMINI】模型未能完成任务要求，输出在关键的 JavaScript 实现部分发生截断，导致核心的进阶功能（音效、Hash 同步、状态持久化、键盘逻辑）全部缺失。虽然 CSS 和 HTML 结构符合设计要求，但作为一个完整的组件系统，当前版本不可用。 【KIMI】该候选输出在HTML结构和CSS样式层面展现了良好的基础实现，三种标签样式的视觉区分、WAI-ARIA属性设置、CSS Variables主题系统、响应式布局等均有正确体现。但由于输出在关键位置被截断（pill-tab部分及全部JavaScript逻辑缺失），导致Hard级别的核心功能——URL Hash同步、localStorage持久化、Web Audio API音效系统、键盘事件处理——均无法验证。这些功能对于Hard级别要求至关重要，且需要复杂的JS状态管理和错误处理机制。建议要求模型重新生成完整代码以确保功能完整性可评估。

相关链接

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

加载中...
100%