OpenAI: gpt-oss-20b 在「可拖拽仪表板」的评测结果

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

基本信息

  • 模型名称：OpenAI: gpt-oss-20b
  • 用例名称：可拖拽仪表板
  • 测试类型：网页生成
  • 评测维度：仪表盘

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于 Web 应用的 UI 布局与交互实现。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须整合在单个 HTML 文件中，可直接在浏览器中运行，无需任何外部依赖或构建工具。 2. 禁止引入任何第三方 CDN 库（如 Chart.js、jQuery、Bootstrap），所有功能须使用原生 HTML5 Drag and Drop API、Canvas API 和 CSS 实现。 3. 代码结构清晰：`<style>` 标签集中管理样式，`<script>` 标签集中管理逻辑，HTML 结构语义化。 4. 图表使用原生 Canvas 2D API 绘制，数据为静态硬编码，无需动态更新。 5. 优先保证核心功能的正确性与稳定性，再考虑视觉美观度。 6. 拖拽交互须使用 HTML5 原生 Drag and Drop API，确保拖拽逻辑的基本鲁棒性（如正确处理 dragover、drop 事件）。

用户提示词（User Prompt）

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

请生成一个可拖拽自定义布局的仪表板，所有代码写在单个 HTML 文件中，直接可在浏览器运行。 ## 页面整体布局 页面分为三个区域： - **顶部工具栏**：包含「保存布局」按钮（存入 localStorage）和「重置布局」按钮（清除 localStorage 并恢复默认）。 - **左侧组件库（宽约 200px）**：列出 8 种可用组件，每个组件项可被拖拽。 - **右侧画布区域**：网格背景，用于放置和展示组件卡片。 ## 左侧组件库（8 种组件） 以列表形式展示以下组件，每项显示图标（可用 emoji 代替）和名称，支持拖拽到右侧画布： 1. 统计卡片 2. 折线图 3. 柱状图 4. 饼图 5. 数据表格 6. 待办事项列表 7. 日历组件 8. 快捷操作按钮组 ## 右侧画布区域 - 显示网格背景（CSS 实现即可）。 - 从左侧拖入组件后，在画布上生成对应的**组件卡片**。 - 每个组件卡片包含： - 标题栏（显示组件名称） - 关闭/删除按钮（点击移除该卡片） - 内容区域（展示该组件的静态内容，见下方说明） - 画布上的组件卡片支持**拖拽移动位置**（鼠标拖拽重新排列）。 ## 各组件静态内容要求 1. **统计卡片**：展示 3-4 个静态数字指标（如总用户数、今日订单、收入、增长率），带标签和数值。 2. **折线图**：使用 Canvas 绘制一条静态折线，带 X/Y 轴和至少 6 个数据点。 3. **柱状图**：使用 Canvas 绘制静态柱状图，带 X/Y 轴和至少 5 根柱子，柱子有不同颜色或统一颜色。 4. **饼图**：使用 Canvas 绘制静态饼图，至少 4 个扇区，每个扇区颜色不同，附简单图例。 5. **数据表格**：展示一个静态 HTML 表格，包含表头和至少 5 行数据（如姓名、部门、状态等列）。 6. **待办事项列表**：展示 4-5 条静态待办项，每项有复选框（可点击切换完成状态）和文字。 7. **日历组件**：展示当前月份的日历（用 JS 动态生成月份网格），高亮今天的日期。 8. **快捷操作按钮组**：展示 4-6 个功能按钮（如新建、导出、刷新、设置等），点击后弹出 alert 提示。 ## 工具栏功能 - **保存布局**：将当前画布中所有组件的类型和位置信息序列化后存入 `localStorage`，操作成功后给出视觉或文字反馈。 - **重置布局**：清除 `localStorage` 中保存的布局，将画布恢复为默认状态（预置 2-3 个默认组件，如统计卡片、折线图、数据表格）。 - 页面加载时，若 `localStorage` 中存在已保存的布局，则自动恢复。 ## 视觉要求 - 整体配色简洁专业（推荐深色工具栏 + 浅色画布，或全浅色方案）。 - 左侧组件库的组件项在鼠标悬停时有高亮效果，拖拽时有视觉反馈（如透明度变化）。 - 组件卡片有阴影和圆角，标题栏与内容区有明显分隔。 - Canvas 图表需填满组件卡片的内容区域，不得出现图表溢出或过小的情况。

任务要求

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

  1. 左侧组件库正确实现 HTML5 原生拖拽（dragstart/dragover/drop），将 8 种组件拖入画布后能生成对应的组件卡片，且卡片内容与组件类型匹配。
  2. 折线图、柱状图、饼图三种图表组件均使用原生 Canvas 2D API 绘制，图表包含坐标轴或图例等基本视觉元素，静态数据清晰可读。
  3. 画布上的组件卡片支持拖拽移动位置，且每个卡片均有可用的删除按钮，点击后卡片从画布中移除。
  4. 工具栏的「保存布局」功能能将当前组件信息写入 localStorage，「重置布局」能清除保存数据并恢复默认布局；页面刷新后能自动从 localStorage 恢复上次保存的布局。
  5. 待办事项列表的复选框可点击切换完成状态（视觉上有划线或颜色变化），日历组件能正确显示当前月份并高亮今日。
  6. 整体页面布局结构清晰（工具栏 + 左侧组件库 + 右侧画布三区域），样式整洁，组件卡片有基本的视觉区分（阴影、圆角、标题栏）。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

下面给出一个完整、可直接在浏览器中打开的 **单文件** HTML 示例。 它实现了： * 左侧组件库（8 种组件）可拖拽到右侧画布 * 右侧画布支持网格背景、组件卡片的拖拽、删除、内容展示 * 8 种组件均使用原生 Canvas / HTML 实现静态内容 * 工具栏提供“保存布局”和“重置布局”功能，布局保存在 `localStorage` * 所有代码均使用原生 Web API（无第三方库） > **注意**： > - 由于使用了原生 Drag‑and‑Drop，拖拽时会出现透明度变化。 > - 组件卡片默认宽度 300 px，内容区会根据需要自适应高度。 ```html 可拖拽自定义布局仪表板 html, body {margin:0; padding:0; height:100%; font-family:Arial, sans-serif;} #toolbar {height:50px; background:#333; color:#fff; display:flex; align-items:center; padding:0 10px; justify-content:flex-end; gap:10px;} #toolbar button {padding:5px 10px; border:none; background:#555; color:#fff; cursor:pointer; border-radius:3px;} #toolbar button:hover {background:#777;} #container {display:flex; height:calc(100% - 50px); overflow:hidden;} #sidebar {width:200px; background:#f9f9f9; border-right:1px solid #ddd; overflow-y:auto;} #sidebar h3 {margin:10px; font-size:14px;} .component-item {padding:8px 12px; cursor:grab; display:flex; align-items:center; gap:8px; user-select:none;} .component-item:hover {background:#e0e0e0;} #canvas {flex:1; position:relative; background: repeating-linear-gradient(0deg, #f0f0f0 0px, #f0f0f0 1px, #fff 1px, #fff 20px); overflow:auto;} .card {position:absolute; width:300px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); border-radius:4px; overflow:hidden; cursor:grab;} .card-header {display:flex; justify-content:space-between; align-items:center; background:#f5f5f5; padding:5px 10px; font-weight:bold; border-bottom:1px solid #ddd;} .card-close {background:none; border:none; cursor:pointer; font-size:14px;} .card-content {padding:10px;} .toast {position:absolute; top:10px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:8px 16px; border-radius:4px; opacity:0; transition:opacity .3s;} .toast.show {opacity:1;} 保存布局 重置布局 组件库 📊 统计卡片 📈 折线图 📊 柱状图 🥧 饼图 📋 数据表格 📝 待办事项 📅 日历组件 🔘 快捷操作按钮组 /* ---------- 工具函数 ---------- */ function showToast(msg) { const toast = document.getElementById('toast'); toast.textContent = msg;...

AI 评审点评

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

【CLAUDE】该实现完成了仪表板的基本框架，三区域布局正确，8种组件均有对应内容实现，Canvas图表基本可用，localStorage功能逻辑完整。但核心的画布内卡片拖拽移动功能存在逻辑缺陷，实际运行中卡片无法正确重定位；卡片标题显示type字符串而非中文名称；部分Canvas图表存在元素超出画布边界的问题。整体属于功能基本可用但存在明显bug的实现，需要修复拖拽逻辑和若干细节问题才能达到较高质量。 【GEMINI】这是一个非常优秀的前端实现案例。模型不仅完美对齐了所有功能需求，还在原生 Canvas 绘图和组件化逻辑设计上展现了深厚的技术功底。在不依赖任何第三方库的情况下，实现了一个功能完备、交互流畅且视觉美观的可自定义仪表板，完全符合「资深前端工程师」的人设定位。 【KIMI】该实现完整覆盖了需求中的所有功能点，作为单文件无依赖方案，代码结构清晰、可维护性较好。三种 Canvas 图表和其他 5 种组件均正确实现，localStorage 持久化功能工作正常。主要改进空间在于：优化画布内卡片拖拽的精准度和流畅性（建议采用 mousedown/mousemove/mouseup 替代或补充原生 DnD 实现更自由的拖拽）、提升图表的视觉丰富度（添加网格线、数据标签）、完善中文本地化（组件标题显示中文名称），以及增强拖拽过程中的视觉反馈。整体而言，这是一个合格且实用的仪表板实现，核心功能稳定可用。

进阶难度评测结果

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

模型生成产物

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

```html 高级可拖拽仪表板 /* -------------------- 基础布局 -------------------- */ body, html {margin:0; padding:0; height:100%; font-family:Arial, sans-serif; box-sizing:border-box;} #app {display:flex; flex-direction:column; height:100%;} #toolbar {display:flex; background:#2c3e50; color:#ecf0f1; padding:5px; align-items:center;} #toolbar button {margin-right:10px; background:#34495e; border:none; color:#ecf0f1; padding:5px 10px; cursor:pointer;} #toolbar button:hover {background:#3d566e;} #main {display:flex; flex:1; overflow:hidden;} #panel {width:250px; background:#ecf0f1; overflow-y:auto; transition:width .3s;} #panel.collapsed {width:0;} #panel .item {display:flex; align-items:center; padding:8px 12px; cursor:pointer; border-bottom:1px solid #bdc3c7;} #panel .item:hover {background:#dfe6e9;} #panel .item span {margin-left:8px;} #canvas {flex:1; background:#ecf0f1; position:relative; overflow:auto;} #grid {display:grid; grid-template-columns:repeat(12, 1fr); grid-auto-rows:80px; gap:4px; padding:4px;} .component {position:absolute; background:#fff; border:1px solid #bdc3c7; box-shadow:0 2px 4px rgba(0,0,0,.1); border-radius:4px; overflow:hidden; display:flex; flex-direction:column;} .component .header {background:#34495e; color:#ecf0f1; padding:4px 8px; display:flex; justify-content:space-between; align-items:center; cursor:move;} .component .header .title {font-weight:bold;} .component .header .actions button {background:none; border:none; color:#ecf0f1; cursor:pointer; margin-left:4px;} .component .body {flex:1; padding:8px; overflow:auto;} .component .footer {background:#ecf0f1; padding:4px 8px; text-align:right;} .component .resize-handle {position:absolute; width:12px; height:12px; right:0; bottom:0; cursor:nwse-resize; background:url('data:image/svg+xml;utf8,') no-repeat center center;} .component .close-btn {position:absolute; top:4px; right:4px; background:none; border:none; color:#ecf0f1; cursor:pointer;} .component .settings {position:absolute; top:0;...

困难难度评测结果

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

模型生成产物

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

```html 高级可拖拽仪表板 /* 基础布局 */ body, html {margin:0; padding:0; height:100%; font-family:Arial, sans-serif;} #app {display:flex; height:100%;} #sidebar {width:200px; background:#f5f5f5; border-right:1px solid #ddd; overflow:auto;} #canvas {flex:1; position:relative; background:#fafafa; overflow:auto;} #toolbar {position:absolute; top:0; left:0; right:0; height:40px; background:#333; color:#fff; display:flex; align-items:center; padding:0 10px; z-index:1000;} #toolbar button {margin-right:10px; color:#fff; background:#555; border:none; padding:5px 10px; cursor:pointer;} #toolbar button:hover {background:#777;} /* 组件卡片 */ .widget {position:absolute; background:#fff; border:1px solid #ddd; box-shadow:0 2px 4px rgba(0,0,0,.1); overflow:hidden; cursor:move;} .widget .header {background:#eee; padding:5px; font-size:12px; display:flex; justify-content:space-between; align-items:center;} .widget .header button {background:none; border:none; cursor:pointer; font-size:12px;} .widget .content {padding:5px; font-size:12px;} .widget .resize-handle {position:absolute; width:10px; height:10px; right:0; bottom:0; cursor:nwse-resize; background:#ddd;} /* Modal */ #modal {position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:2000;} #modal .panel {background:#fff; padding:20px; width:300px; border-radius:4px;} #modal .panel h3 {margin-top:0;} #modal .panel button {margin-top:10px;} /* Drill-down panel */ #drill {position:absolute; background:#fff; border:1px solid #ddd; padding:10px; z-index:1500; box-shadow:0 2px 4px rgba(0,0,0,.2);} #drill button {margin-top:10px;} /* Grid overlay for snapping */ #grid {position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; background-size:80px 80px; background-image:linear-gradient(to right, #eee 1px, transparent 1px), linear-gradient(to bottom, #eee 1px, transparent 1px);} 组件库 统计卡片 折线图 柱状图 数据表格 快捷操作 保存布局 重置布局 全屏 /*...

相关链接

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

加载中...
100%