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

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

基本信息

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

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 多样式标签页组件 :root { --primary-color: #2563eb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-600: #4b5563; --gray-900: #111827; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, sans-serif; background-color: #f1f5f9; padding: 2rem 1rem; max-width: 900px; margin: 0 auto; } h1 { text-align: center; color: var(--gray-900); margin-bottom: 3rem; } .demo-section { margin-bottom: 3.5rem; } .demo-section h2 { font-size: 1.25rem; color: var(--gray-900); margin-bottom: 1rem; font-weight: 600; } .tabs-container { background-color: white; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); } .tabs-header { display: flex; gap: 0.25rem; margin-bottom: 0; } .tab-btn { border: none; background: transparent; padding: 0.75rem 1.25rem; font-size: 1rem; font-weight: 500; cursor: pointer; color: var(--gray-600); position: relative; transition: var(--transition); border-radius: 0.25rem; } .tab-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } .tab-panel { opacity: 0; visibility: hidden; transition: opacity 0.3s ease; line-height: 1.7; } .tab-panel.active { opacity: 1; visibility: visible; padding: 1.5rem 0 0.5rem; } .tab-panel h3 { color: var(--gray-900); margin-bottom: 1rem; font-size: 1.3rem; } .tab-panel p { color: var(--gray-600); margin-bottom: 1rem; } .tab-panel p:last-child { margin-bottom: 0; } /* 线条标签样式 */ .tabs-underline .tabs-header { border-bottom: 1px solid var(--gray-200); } .tabs-underline .tab-btn.active { color: var(--primary-color); } .tabs-underline .tab-btn.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: var(--primary-color); } /* 卡片标签样式 */ .tabs-card .tabs-header { gap: 0.5rem; } .tabs-card .tab-btn { background-color: var(--gray-100); border-radius: 0.5rem 0.5rem 0 0; border: 1px solid transparent; } .tabs-card .tab-btn.active { background-color:...

AI 评审点评

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

【GEMINI】这是一份高质量的实现方案。作者不仅完成了所有视觉和交互要求，还在代码整洁度和可维护性上表现出色。虽然在「组件独立性」的理解上选择了「状态同步」而非「完全隔离」（由于共用一个 URL Hash 导致的逻辑选择），但整体运行稳定，动画流畅，是一个非常专业的前端组件示例。 【KIMI】该实现整体质量良好，视觉设计美观，代码结构清晰，CSS变量使用规范。但核心缺陷在于三种标签组件共享全局hash状态，未能实现「独立运作，互不干扰」的关键需求，这是功能正确性方面的重大扣分项。建议为每种样式分配独立的hash命名空间（如#underline-1、#card-1、#pill-1），或重构为完全独立的组件实例，各自管理自身状态。

进阶难度评测结果

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

模型生成产物

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

进阶版标签页组件 :root { --primary-color: #2563eb; --text-primary: #1e293b; --text-secondary: #64748b; --bg-primary: #ffffff; --bg-secondary: #f1f5f9; --border-color: #e2e8f0; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-full: 9999px; --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.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: var(--bg-secondary); color: var(--text-primary); line-height: 1.6; } .container { max-width: 900px; margin: 0 auto; padding: var(--spacing-lg) var(--spacing-md); } h1 { text-align: center; margin-bottom: var(--spacing-lg); color: var(--text-primary); font-size: 2rem; } .tabs-section { margin-bottom: var(--spacing-lg); background-color: var(--bg-primary); padding: var(--spacing-md); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .tabs-section h2 { margin-bottom: var(--spacing-md); font-size: 1.25rem; color: var(--text-secondary); font-weight: 500; } .tabs-nav { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); } .tab-btn { flex: 1; min-width: 80px; padding: var(--spacing-sm) var(--spacing-md); border: none; background-color: transparent; font-size: 1rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: var(--transition); outline: none; } .tab-btn:hover { color: var(--primary-color); } .tab-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: var(--radius-sm); } .tab-btn.active { color: var(--primary-color); font-weight: 600; } .tabs-content { min-height: 200px; } .content-panel { padding: var(--spacing-md) 0; opacity: 0; transform: translateY(10px); transition: var(--transition); display: none;...

AI 评审点评

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

【GEMINI】这是一份高质量的进阶版标签页组件实现。模型不仅完美达成了所有基础功能，还在进阶要求（如 Web Audio API 音效层次感、URL hash 优先级逻辑、类封装组件化）上表现出色。代码结构严谨，动画细节处理细腻，充分体现了资深前端工程师的专业水准。 【KIMI】该实现是一份高质量的标签页组件代码，完整覆盖了所有功能需求与进阶特性。三种视觉样式各具特色且实现精致，状态持久化与URL同步逻辑严谨，Web Audio API音效系统创新且符合无外部资源约束。代码架构清晰，CSS变量系统规范，JavaScript模块化程度良好。动画效果细腻流畅，整体用户体验出色。 minor改进空间包括：AudioContext启动策略的兼容性优化、部分配置常量的提取、以及极端边界情况的防御处理。

困难难度评测结果

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

模型生成产物

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

下面是完整符合要求的可运行标签页组件代码： ```html 无障碍标签页组件 - Hard 级别 :root { --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #e9ecef; --text-primary: #212529; --text-secondary: #6c757d; --border-color: #dee2e6; --accent-color: #0d6efd; --accent-hover: #0b5ed7; --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --transition: all 0.3s ease; } [data-theme="dark"] { --bg-primary: #121212; --bg-secondary: #1e1e1e; --bg-tertiary: #2d2d2d; --text-primary: #f8f9fa; --text-secondary: #adb5bd; --border-color: #424242; --accent-color: #3b82f6; --accent-hover: #2563eb; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.4); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; transition: var(--transition); min-height: 100vh; padding: 2rem 1rem; max-width: 900px; margin: 0 auto; } .header-actions { position: fixed; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; z-index: 100; } .icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color); background-color: var(--bg-secondary); color: var(--text-primary); font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; transition: var(--transition); } .icon-btn:hover { background-color: var(--bg-tertiary); transform: scale(1.05); } .icon-btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; } h1 { text-align: center; margin-bottom: 2.5rem; color: var(--text-primary); font-size: 2rem; } .tabs-section { margin-bottom: 3rem; } .tabs-section-title { font-size: 1.25rem; margin-bottom: 1rem; color: var(--text-primary); padding-left: 0.25rem; border-left: 4px solid var(--accent-color); } .tab-list { display: flex; gap: 0; position: relative; margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }...

AI 评审点评

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

【GEMINI】该模型对 Hard 级别的需求理解非常到位，在 CSS 样式设计、无障碍属性标注以及响应式布局方面表现出色。然而，由于输出长度限制，最关键的 JavaScript 逻辑（音效合成、Hash 同步、持久化存储等）完全没有输出，导致最终交付物是一个无法交互的半成品。如果代码完整，这将是一个高质量的方案。

相关链接

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

加载中...
100%