OpenAI: gpt-oss-20b 在「多标签工作台」的评测结果

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

基本信息

  • 模型名称：OpenAI: gpt-oss-20b
  • 用例名称：多标签工作台
  • 测试类型：网页生成
  • 评测维度：仪表盘

系统提示词（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 可循环切换标签

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

下面给出一个完整的 **单文件** 实现，直接保存为 `workbench.html` 并在浏览器打开即可看到效果。 代码已按要求做了注释，方便阅读与维护。 ```html 多标签页工作台 /* ---------- 基础样式 ---------- */ html,body{margin:0;padding:0;height:100%;font-family:Arial,Helvetica,sans-serif;background:#f5f5f5;} *{box-sizing:border-box;} a{color:#333;text-decoration:none;cursor:pointer;} ul{list-style:none;padding:0;margin:0;} button{border:none;background:none;cursor:pointer;} /* ---------- 布局 ---------- */ #app{display:flex;height:100vh;} /* 侧边栏 */ .sidebar{ width:200px;background:#2c3e50;color:#ecf0f1;display:flex;flex-direction:column; } .sidebar .logo{padding:20px;font-size:1.2em;text-align:center;background:#1a252f;} .sidebar nav{flex:1;overflow-y:auto;} .sidebar nav ul li{padding:12px 20px;cursor:pointer;} .sidebar nav ul li:hover{background:#34495e;} .sidebar nav ul li.active{background:#1abc9c;color:#fff;} /* 标签栏 */ .tabbar{ flex:1;display:flex;flex-direction:column;background:#ecf0f1;border-bottom:1px solid #bdc3c7; } .tabbar .header{ display:flex;align-items:center;height:40px;position:relative;overflow:hidden; } .tabbar .header .scroll-btn{ width:30px;height:100%;display:flex;align-items:center;justify-content:center; cursor:pointer;background:#dfe6e9;color:#2c3e50;font-weight:bold; } .tabbar .header .scroll-btn.disabled{color:#95a5a6;cursor:not-allowed;} .tabbar .header .tabs{ flex:1;display:flex;overflow-x:auto;overflow-y:hidden;white-space:nowrap; scrollbar-width:none;/* Firefox */ } .tabbar .header .tabs::-webkit-scrollbar{display:none;}/* Chrome, Safari */ .tabbar .header .tabs .tab{ padding:0 12px;height:100%;display:flex;align-items:center;cursor:pointer; border-right:1px solid #bdc3c7;position:relative; } .tabbar .header .tabs .tab.active{background:#fff;color:#2c3e50;font-weight:bold;} .tabbar .header .tabs .tab .close{margin-left:8px;font-size:12px;color:#7f8c8d;} .tabbar .header .tabs .tab .close:hover{color:#e74c3c;} .tabbar .content{ flex:1;overflow:auto;padding:20px;background:#fff; } .tabbar .content...

AI 评审点评

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

【GEMINI】这是一个功能相对完备的多标签页工作台实现。代码结构清晰，成功实现了标签生命周期管理、状态保持、右键菜单和基础布局。视觉表现良好，符合 1280px 布局要求。主要不足在于 Canvas 绘图逻辑的触发机制有误（innerHTML 注入脚本不执行）以及侧边栏高亮状态在切换标签时缺乏联动同步。 【KIMI】整体而言，代码实现了多标签页工作台的核心功能，包括标签的生命周期管理、右键菜单、标签滚动、快捷键等交互功能，以及差异化的内容展示。代码结构清晰，注释详细，可读性良好。在功能实现和代码质量方面表现优秀。但在视觉美观度上还有一定提升空间，如优化标签栏和内容区的样式。总体完成度较高，是一个优秀的多标签页工作台实现。

困难难度评测结果

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

模型生成产物

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

**完整可直接在浏览器运行的单文件实现** （请将下面代码复制到一个 `.html` 文件中，直接打开即可体验） ```html 多标签工作台（高难度版） /* ==================== 主题变量 ==================== */ :root { --bg: #ffffff; --text: #000000; --primary: #1890ff; --tab-bg: #f5f5f5; --tab-active-bg: #e6f7ff; --tab-hover-bg: #e6f7ff; --kpi-bg: #fafafa; --kpi-text: #000000; --chart-bg: #ffffff; --chart-grid: #e8e8e8; --chart-line: #1890ff; --chart-bar: #52c41a; --chart-pie: #faad14; --tooltip-bg: #000000; --tooltip-text: #ffffff; } /* 深色主题 */ [data-theme="dark"] { --bg: #1f1f1f; --text: #ffffff; --primary: #40a9ff; --tab-bg: #262626; --tab-active-bg: #3a3a3a; --tab-hover-bg: #3a3a3a; --kpi-bg: #2d2d2d; --kpi-text: #ffffff; --chart-bg: #2d2d2d; --chart-grid: #444444; --chart-line: #40a9ff; --chart-bar: #73d13d; --chart-pie: #ffc107; --tooltip-bg: #ffffff; --tooltip-text: #000000; } /* ==================== 基础布局 ==================== */ *{box-sizing:border-box;margin:0;padding:0} body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden} #app{display:flex;height:100%} /* 侧边栏 */ #sidebar{ width:200px;background:#f0f2f5;overflow:auto;transition:width .3s } #sidebar.collapsed{width:60px} #sidebar button{width:100%;padding:10px;background:var(--primary);color:#fff;border:none;cursor:pointer} #menuList{list-style:none;padding:0;margin:0} #menuList li{padding:10px 15px;display:flex;align-items:center;cursor:pointer} #menuList li:hover{background:#e6f7ff} #menuList li .icon{margin-right:10px;font-size:18px} #sidebar.collapsed #menuList li .text{display:none} /* 主区域 */ #main{flex:1;display:flex;flex-direction:column;overflow:hidden} #tabBar{ display:flex;align-items:center;background:var(--tab-bg);border-bottom:1px solid #e8e8e8;overflow:hidden } #tabBar .scrollBtn{ width:30px;text-align:center;cursor:pointer;background:transparent;border:none;color:var(--text) } #tabsContainer{display:flex;flex:1;overflow:auto;white-space:nowrap} .tab{ padding:10px...

AI 评审点评

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

【CLAUDE】该实现提供了一个多标签工作台的基本框架，具备侧边栏、标签栏、内容区的整体布局，并实现了部分核心功能（标签打开/关闭/去重/上限、快捷键框架、Web Audio基础音效、CSS主题变量）。然而，与高难度需求相比存在大量严重缺陷：最核心的状态保持机制（display:none/block）被点击时重新渲染内容所破坏；数据钻取完全缺失；图表Tooltip未实现；仪表盘卡片拖拽重排未实现；拖拽排序缺少视觉占位；饼图颜色变量未定义导致渲染错误；数据表格缺少排序/筛选/分页；EventEmitter定义后完全未使用。整体来看，代码更像是一个功能骨架而非完整实现，许多需求点仅有形式上的代码但功能不正确或不完整。 【GEMINI】这是一个高质量的单文件复杂应用实现。模型准确理解了资深前端架构师的角色，在原生 JS 状态管理、快捷键劫持、Web Audio 音效合成等高难度要求上表现出色。虽然在「图表卡片拖拽」和「数据钻取交互」这两个细节功能上有所遗漏或简化，但整体架构稳健，视觉效果专业，完全符合生产环境原型的要求。 【KIMI】该实现完成了多标签工作台的基础框架，标签生命周期管理、主题切换、音效系统等核心功能已具雏形。但存在关键性缺陷：最核心的「状态保持」需求未正确实现——代码在标签切换时重新生成内容而非真正的DOM隐藏/显示，导致表单状态丢失；数据钻取、仪表盘卡片拖拽重排、表格排序筛选分页等高级功能缺失或未完成；Canvas图表质量粗糙，Tooltip未实际工作；背景音乐仅为单一音调而非旋律。整体属于「功能框架可用，细节实现不足」的水平，距离生产级应用有较大差距。建议重点修复状态保持机制，完善数据钻取和图表交互，优化视觉设计。

相关链接

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

加载中...
100%