GLM-5.1 在「可拖拽仪表板」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：可拖拽仪表板
  • 测试类型：网页生成
  • 评测维度：数据看板

系统提示词（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. 整体页面布局结构清晰（工具栏 + 左侧组件库 + 右侧画布三区域），样式整洁，组件卡片有基本的视觉区分（阴影、圆角、标题栏）。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html Dashboard Studio - 自定义仪表板 /* ========== 全局重置与变量 ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --toolbar-bg: #0f172a; --sidebar-bg: #1e293b; --canvas-bg: #f1f5f9; --card-bg: #ffffff; --accent: #10b981; --accent-hover: #059669; --accent-light: #ecfdf5; --text-on-dark: #e2e8f0; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --border: #e2e8f0; --danger: #ef4444; --amber: #f59e0b; --blue: #3b82f6; --violet: #8b5cf6; --rose: #f43f5e; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--text-primary); background: var(--canvas-bg); } /* ========== 顶部工具栏 ========== */ .toolbar { background: var(--toolbar-bg); color: var(--text-on-dark); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.3); z-index: 100; } .toolbar-brand { display: flex; align-items: center; gap: 10px; } .toolbar-logo { width: 32px; height: 32px; background: linear-gradient(135deg, var(--accent), #34d399); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; color: white; } .toolbar-title { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; } .toolbar-title span { color: var(--accent); } .toolbar-actions { display: flex; gap: 10px; } .toolbar-btn { padding: 8px 20px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.2px; } .btn-save { background: var(--accent); color: white; } .btn-save:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-reset { background: rgba(255,255,255,0.08); color: var(--text-on-dark); border: 1px solid rgba(255,255,255,0.15); } .btn-reset:hover { background:...

AI 评审点评

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

【CLAUDE】这是一个高质量的单文件仪表板实现，完整满足所有核心功能要求。HTML5 原生拖拽机制实现流畅，支持从组件库拖入和画布内移动；三种 Canvas 图表绘制完整且视觉清晰；localStorage 布局持久化功能完善；8 种组件内容丰富且交互正常。代码结构清晰，CSS 变量统一管理样式，JS 模块化组织良好。视觉设计专业，配色协调，动画细腻，Toast 提示等细节体现了良好的用户体验。唯一可改进之处是拖拽性能优化和边界处理，但瑕不掩瑜，整体完成度和质量均属优秀水平。 【GEMINI】这是一份教科书级别的实现。模型不仅完美对齐了所有功能性要求（原生拖拽、Canvas 绘图、持久化存储），还在用户体验和视觉细节上做了大量加分工作。代码结构清晰，无任何外部依赖，且在原生 API 的限制下实现了非常流畅的交互效果，完全符合专业级 Web 应用的评测标准。 【KIMI】该实现整体质量优秀，完整覆盖了需求中的所有功能点，三种Canvas图表渲染精细，交互体验流畅。主要改进空间在于：增加窗口resize时的图表重绘机制、优化画布内拖拽的精准度、以及使用更现代的Web API（如ResizeObserver）。作为零依赖的单文件解决方案，已达到生产可用水平。

进阶难度评测结果

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

模型生成产物

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

```html Dashboard Studio :root{ --bg:#0d1117;--fg:#e6edf3;--muted:#8b949e;--accent:#00d4aa; --accent-dim:rgba(0,212,170,.12);--card:#161b22;--card-hover:#1c2128; --border:#30363d;--sidebar-bg:#0d1117;--toolbar-bg:#161b22; --danger:#f85149;--warning:#d29922;--success:#3fb950; --font:'Space Grotesk',sans-serif;--mono:'JetBrains Mono',monospace; --cols:12;--row-h:80px;--gap:8px; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font);background:var(--bg);color:var(--fg);overflow:hidden;height:100vh} ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} /* ===== 工具栏 ===== */ #toolbar{height:52px;background:var(--toolbar-bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:100;position:relative} .toolbar-left{display:flex;align-items:center;gap:10px} .toolbar-left i{color:var(--accent);font-size:18px} .logo-text{font-weight:700;font-size:17px;letter-spacing:-.3px} .toolbar-right{display:flex;gap:8px} .toolbar-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--fg);font-family:var(--font);font-size:13px;cursor:pointer;transition:all .2s} .toolbar-btn:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)} .toolbar-btn i{font-size:13px} /* ===== 主区域 ===== */ #main{display:flex;height:calc(100vh - 52px);position:relative} /* ===== 侧边栏 ===== */ #sidebar{width:220px;min-width:220px;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:all .3s ease;overflow:hidden} #sidebar.collapsed{width:0;min-width:0;border-right:none} .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);white-space:nowrap} .sidebar-header...

AI 评审点评

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

【CLAUDE】这是一个高质量的仪表板实现，核心功能完整且代码结构清晰。布局引擎的网格吸附、碰撞检测、持久化机制均实现到位，拖拽交互流畅且鲁棒；图表渲染使用 Chart.js 专业配置，Tooltip 和动画效果符合预期；数据表格的排序/筛选、待办事项、日历等组件功能完备。代码采用模块化注释分区（布局引擎、组件渲染、交互层等），易于维护。视觉设计采用深色主题，配色统一（使用 CSS 变量），组件添加动画（淡入+缩放）提升用户体验。主要改进空间：拖拽新组件时若自动调整位置应给予视觉反馈；图表数据集可增加更多样化的数值变化以提升可视化效果；数据表格可扩展更多行数以测试性能边界。整体达到生产级代码标准，符合需求文档的所有核心要求。 【GEMINI】这是一份极高水准的交付。代码结构极其清晰，将复杂的拖拽、网格计算、组件渲染和状态管理解耦得非常好。UI 视觉设计精美，采用了现代化的深色配色方案和流畅的 CSS 动画（如淡入缩放、数字滚动）。功能上完全覆盖了需求书中的所有进阶要求，包括复杂的碰撞检测、全屏 API 调用、表格多态排序以及布局持久化，没有任何语法错误或明显的逻辑漏洞，是一个可直接投入生产参考的 Demo。 【KIMI】该实现是一个功能较为完整的可拖拽自定义仪表板，整体代码结构清晰，采用单HTML文件组织，CSS和JavaScript分区明确。暗色主题的视觉设计专业统一，组件入场动画流畅。核心功能如网格布局、拖拽交互、布局持久化、图表渲染、数据表格排序筛选等均已实现。主要不足在于：resize过程中图表未实时重绘、部分边界检测场景覆盖不全、以及少量交互状态的持久化问题。作为medium难度的实现，整体质量良好，但在细节打磨和极端场景处理上还有提升空间。

困难难度评测结果

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

模型生成产物

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

```html 可拖拽仪表板 :root { --bg: #0b0d13; --bg2: #111420; --card: #161a28; --card-hover: #1c2133; --border: #252a3a; --border-light: #2f3548; --fg: #e4e2df; --fg2: #9ca3b4; --muted: #5c6478; --accent: #e8a838; --accent-hover: #f0b84a; --accent-dim: rgba(232,168,56,0.12); --success: #34d399; --danger: #f87171; --info: #60a5fa; --radius: 10px; --row-h: 80px; --gap: 6px; --sidebar-w: 230px; --toolbar-h: 52px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;overflow:hidden} body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--fg)} ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--border-light)} /* ===== 工具栏 ===== */ #toolbar{height:var(--toolbar-h);background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:relative;z-index:50} #toolbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-0.3px} #toolbar .brand i{color:var(--accent);font-size:20px} #toolbar .actions{display:flex;gap:8px} .tb-btn{background:var(--card);border:1px solid var(--border);color:var(--fg2);padding:7px 14px;border-radius:7px;cursor:pointer;font-family:inherit;font-size:13px;display:flex;align-items:center;gap:6px;transition:all .2s} .tb-btn:hover{background:var(--card-hover);color:var(--fg);border-color:var(--border-light)} .tb-btn.accent{background:var(--accent-dim);border-color:rgba(232,168,56,0.3);color:var(--accent)} .tb-btn.accent:hover{background:rgba(232,168,56,0.22);border-color:var(--accent)} /* ===== 主容器 ===== */ #main-container{display:flex;height:calc(100vh - var(--toolbar-h))} /* ===== 侧边栏 ===== */ #sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);padding:16px...

AI 评审点评

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

【CLAUDE】这是一个工程质量极高的可拖拽仪表板实现，完整满足所有核心功能要求。网格布局引擎精确可靠，拖拽系统基于原生事件实现流畅，碰撞检测与边界约束逻辑严谨。EventBus 实现的组件联动机制优雅地解耦了组件间依赖，两条联动链路（图表→表格、按钮→卡片）均正常工作并有视觉反馈。实时数据流通过定时器驱动，数值变化动画平滑自然。数据钻取浮层功能完整，展示二级数据并支持返回。布局持久化准确可靠，刷新后能精确还原所有组件状态。8类组件功能实现深度到位，表格排序/筛选、待办增删、设置面板配置切换等细节功能均已实现。代码结构清晰，注释充分，变量命名语义化。UI 设计现代美观，深色主题配色专业，微交互细节（悬停效果、过渡动画、Toast 通知）打磨精细。扣分主要集中在：钻取浮层未实现智能定位、数据模拟场景略显简单、部分 UI 反馈细节可优化。整体而言，这是一个可直接用于生产环境演示的高质量前端作品。

相关链接

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

加载中...
100%