doubao-seed-2-1-pro 在「多标签工作台」的评测结果

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

基本信息

  • 模型名称：doubao-seed-2-1-pro
  • 用例名称：多标签工作台
  • 测试类型：网页生成
  • 评测维度：数据看板

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建企业级管理后台界面。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，无需任何外部依赖，可直接在浏览器中运行。 2. 页面布局需包含侧边栏导航、顶部标签栏和主内容区三个核心区域，结构清晰。 3. 标签页的切换必须通过隐藏/显示 DOM 节点实现（display:none / display:block），而非重新渲染，以保持内容状态。 4. 代码需具备良好可读性，CSS 样式集中管理，JavaScript 逻辑结构清晰，关键逻辑添加注释。 5. 优先保证核心功能（打开标签、切换标签、关闭标签）的稳定性，再考虑视觉美观度。 6. 图表使用原生 Canvas API 绘制，不引入第三方图表库。

用户提示词（User Prompt）

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

请生成一个多标签页工作台（Workbench）页面，所有代码写在单个 HTML 文件中，可直接在浏览器运行。 ## 页面整体布局 - 左侧固定侧边栏（宽度约 200px），包含应用 Logo 和导航菜单 - 顶部标签栏，紧贴侧边栏右侧，横向排列已打开的标签 - 标签栏下方为内容区，展示当前激活标签的内容 ## 功能要求 ### 1. 侧边栏菜单（至少 10 个菜单项） 包含以下菜单项（带图标文字即可）： 仪表盘、用户管理、订单管理、商品管理、数据统计、系统设置、角色权限、日志管理、消息中心、帮助文档 ### 2. 标签栏核心功能 - 点击侧边栏菜单项，在标签栏中打开对应标签（同一菜单项重复点击只激活已有标签，不重复创建） - 每个标签显示菜单名称和关闭按钮（×），点击关闭按钮可关闭该标签 - 最多同时打开 10 个标签，超出时提示用户并阻止继续打开 - 标签超出可视区域时，标签栏两侧显示左右滚动箭头，点击可横向滚动标签列表 - 标签右键菜单，包含三个选项：关闭当前标签、关闭其他标签、关闭所有标签 - 关闭当前激活标签时，自动激活相邻标签（优先右侧，无右侧则左侧） ### 3. 标签内容区 - 切换标签时通过显示/隐藏 DOM 节点保持内容状态（不重新渲染） - 各菜单项对应不同的内容，至少包含以下几种内容类型： - **仪表盘**：展示 4 个统计卡片（总用户数、今日订单、月销售额、系统消息），并用 Canvas 绘制一个简单的柱状图 - **用户管理**：展示一个包含静态数据的用户列表表格（姓名、邮箱、角色、状态、操作列） - **系统设置**：展示一个包含若干输入项的设置表单（网站名称、管理员邮箱、语言选择等） - 其余菜单项展示简单的占位内容页（标题 + 描述文字）即可 ### 4. 快捷键支持 - `Ctrl+W`：关闭当前激活的标签（需阻止浏览器默认的关闭标签页行为） - `Ctrl+Tab`：循环切换到下一个标签 ## 视觉要求 - 整体采用浅色主题，侧边栏使用深色背景（如深蓝或深灰） - 当前激活的标签有明显的高亮样式区分 - 当前激活的侧边栏菜单项有高亮样式 - 页面在 1280px 宽度下布局正常，无明显错位

任务要求

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

  1. 标签生命周期管理正确：点击菜单可打开标签，重复点击不重复创建，关闭后自动激活相邻标签，超出 10 个时有提示拦截
  2. 状态保持机制正确：标签内容通过 DOM 显示/隐藏切换，切换标签后表单输入值、滚动位置等内容状态不丢失
  3. 右键菜单功能完整：在标签上右键可弹出上下文菜单，「关闭当前」、「关闭其他」、「关闭所有」三项功能均可正常执行
  4. 标签栏滚动功能可用：标签数量超出可视区域时，左右滚动箭头出现并可正常点击滚动
  5. 内容区差异化展示：仪表盘含 Canvas 柱状图和统计卡片，用户管理含数据表格，系统设置含表单，内容各不相同
  6. 快捷键响应正确：Ctrl+W 可关闭当前标签且不触发浏览器关闭窗口，Ctrl+Tab 可循环切换标签

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

以下是根据您的要求创建的多标签页工作台页面，所有代码整合在单个HTML文件中，可直接在浏览器运行： ```html 多标签页工作台 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f0f2f5; height: 100vh; overflow: hidden; } /* 整体布局 */ .layout { display: flex; height: 100vh; } /* 侧边栏 */ .sidebar { width: 200px; background: linear-gradient(180deg, #1d2129 0%, #2c323b 100%); color: #fff; display: flex; flex-direction: column; flex-shrink: 0; } .logo { height: 60px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.1); } .logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 18px; } .menu { flex: 1; overflow-y: auto; padding: 10px 0; } .menu-item { display: flex; align-items: center; padding: 12px 20px; cursor: pointer; transition: all 0.2s; color: rgba(255,255,255,0.7); border-left: 3px solid transparent; } .menu-item:hover { background: rgba(255,255,255,0.1); color: #fff; } .menu-item.active { background: rgba(59, 130, 246, 0.2); color: #fff; border-left-color: #3b82f6; } .menu-icon { width: 20px; height: 20px; margin-right: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; } /* 主内容区域 */ .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* 标签栏 */ .tabs-container { height: 40px; background: #fff; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; position: relative; } .tabs-scroll-btn { width: 32px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #f9fafb; border: none; color: #6b7280; font-size: 18px; flex-shrink: 0; transition: background 0.2s; } .tabs-scroll-btn:hover { background: #f3f4f6; color: #374151; }...

AI 评审点评

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

【CLAUDE】该候选输出质量较高，完整实现了多标签页工作台的核心功能需求。代码结构清晰，CSS集中管理，JavaScript逻辑模块化注释良好。标签生命周期管理、DOM状态保持、右键菜单、滚动箭头、快捷键等功能均得到正确实现。仪表盘Canvas柱状图视觉效果专业，用户管理表格和系统设置表单内容丰富。整体可在1280px宽度下正常显示，无明显布局错位。主要不足在于标签滚动存在轻微时序风险、右键菜单无边界检测、roundRect存在兼容性问题，但均属次要缺陷，不影响主体功能使用。 【GEMINI】这是一个非常高质量的实现。代码结构清晰，将配置、状态管理、DOM 操作和初始化逻辑分块管理，可读性极佳。功能上不仅满足了所有硬性指标（如标签限制、快捷键、右键菜单），还在视觉细节（Canvas 渐变、Toast 提示、开关组件）上做了额外优化，完全符合资深前端工程师的角色设定。 【KIMI】该候选输出整体质量较高，完整实现了多标签页工作台的所有核心功能。标签系统通过DOM显示/隐藏实现状态保持，生命周期管理正确；交互功能包括右键菜单、标签滚动、快捷键等均实现到位；内容区差异化明显，Canvas图表绘制质量良好，UI视觉专业。主要改进点在于边界情况处理（如右键菜单位置溢出、单标签循环切换）、代码规范性（内联事件处理）以及部分细节优化。作为basic难度题目，该实现已超出及格线，属于优秀水平。

进阶难度评测结果

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

模型生成产物

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

以下是完整的多标签页工作台实现，包含了所有要求的功能和交互细节： ```html 多标签页工作台 :root { --primary: #1e40af; --primary-light: #3b82f6; --primary-dark: #1e3a8a; --sidebar-bg: #1e293b; --sidebar-hover: #334155; --sidebar-active: #3b82f6; --tab-bg: #f1f5f9; --tab-active: #ffffff; --tab-hover: #e2e8f0; --border: #e2e8f0; --text-primary: #1e293b; --text-secondary: #64748b; --text-sidebar: #cbd5e1; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #f8fafc; color: var(--text-primary); overflow: hidden; height: 100vh; } /* 顶部标题栏 */ .header { height: 56px; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 100; } .header-left { display: flex; align-items: center; gap: 16px; } .toggle-btn { width: 36px; height: 36px; border: none; background: rgba(255,255,255,0.1); color: white; border-radius: 6px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .toggle-btn:hover { background: rgba(255,255,255,0.2); } .logo { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .user-info { display: flex; align-items: center; gap: 12px; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #60a5fa, #a78bfa); display: flex; align-items: center; justify-content: center; font-weight: 600; } /* 主体布局 */ .main-container { display: flex; height: calc(100vh - 56px); } /* 侧边栏 */ .sidebar { width: 220px; background: var(--sidebar-bg); transition: width 0.3s ease; overflow: hidden; flex-shrink: 0; } .sidebar.collapsed { width: 60px; } .menu-item { display: flex; align-items: center; padding: 12px 20px; color:...

AI 评审点评

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

【CLAUDE】该实现是一个功能较为完整的多标签页工作台，覆盖了大部分需求点：标签页生命周期管理、拖拽排序、右键菜单、Canvas图表（含动画和tooltip）、数据表格（筛选排序）、Web Audio音效、系统设置表单状态保持等。最大的硬伤是引入了外部CDN（tailwindcss），违反了「无需任何外部依赖」的核心要求，尽管实际上并未使用Tailwind的class。交互细节上拖拽占位反馈不够直观，右键菜单关闭时序存在潜在问题。Canvas图表的尺寸初始化时机可能导致渲染异常。整体代码质量中等偏上，适合作为企业级工作台的原型参考，但需要修复外部依赖问题和若干交互细节才能达到生产级别。 【GEMINI】该生成结果是一个功能高度完备且交互细腻的工作台应用。它在 Canvas 动画、Web Audio 音效合成、拖拽排序以及标签页状态保持等方面表现出极高的专业水准。唯一的显著缺点是使用了外部 Tailwind CSS 库，未能完全遵守‘单文件且无外部依赖’的限制条件。如果将样式改为原生 CSS 或内联样式，将是一个近乎完美的交付物。 【KIMI】该实现整体功能完整，交互丰富，视觉效果专业，基本满足题目所有核心要求。主要扣分点在于：引入了Tailwind CSS外部依赖违反'单文件无外部依赖'要求；HTML实体编码影响直接运行；拖拽视觉反馈较弱；以及部分边界情况处理不够完善。代码模块划分清晰，但部分函数过长，且全局状态管理可进一步优化。

相关链接

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

加载中...
100%