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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 自定义仪表板 /* ===== CSS 变量 ===== */ :root { --toolbar-bg: #0f172a; --sidebar-bg: #1e293b; --canvas-bg: #f1f5f9; --card-bg: #ffffff; --accent: #f97316; --accent-hover: #ea580c; --accent-light: rgba(249,115,22,0.08); --text-light: #f1f5f9; --text-dark: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 4px 6px rgba(0,0,0,0.07), 0 12px 28px rgba(0,0,0,0.12); --radius: 12px; --radius-sm: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--canvas-bg); color: var(--text-dark); height: 100vh; overflow: hidden; display: flex; flex-direction: column; } /* ===== 顶部工具栏 ===== */ .toolbar { background: var(--toolbar-bg); color: var(--text-light); padding: 0 28px; height: 58px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.25); z-index: 100; position: relative; } .toolbar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), #fb923c, var(--accent)); } .toolbar-title { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; } .toolbar-title span { color: var(--accent); } .toolbar-actions { display: flex; gap: 10px; } .btn { padding: 9px 22px; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; letter-spacing: 0.3px; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249,115,22,0.35); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: rgba(255,255,255,0.08); color: var(--text-light); border: 1px solid rgba(255,255,255,0.15); } .btn-secondary:hover { background: rgba(255,255,255,0.16);...

AI 评审点评

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

【GEMINI】这是一份教科书级别的实现。作为资深前端工程师的身份设定体现得淋漓尽致，不仅完全满足了所有功能性要求（如原生 DnD 交互、Canvas 绘图、布局持久化），还在细节处做了大量优化，如 Canvas 的清晰度适配、流畅的排序算法以及精美的 CSS 视觉设计。代码结构健壮且易于维护，是一个高质量的可交互原型。 【KIMI】整体而言，该实现满足了题目要求的各项功能点，布局、拖拽、图表绘制、localStorage持久化等核心功能均实现良好。代码组织和视觉样式也较为专业。但在交互细节和动画效果上还有一定优化空间。总体来说，这是一个高质量的自定义布局仪表板实现。

进阶难度评测结果

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

模型生成产物

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

```html 自定义仪表板 /* ========== CSS变量与全局样式 ========== */ :root { --bg: #0d1117; --bg-panel: #151a23; --bg-card: #1c2333; --bg-card-alt: #222b3d; --border: #2a3040; --border-light: #3a4255; --accent: #00d4aa; --accent-hover: #00f0c0; --accent-dim: rgba(0,212,170,0.12); --accent2: #ff6b35; --accent2-dim: rgba(255,107,53,0.12); --danger: #ef4444; --danger-dim: rgba(239,68,68,0.12); --warning: #f59e0b; --success: #22c55e; --text: #e6edf3; --text-sec: #8b949e; --text-muted: #5a6270; --toolbar-h: 54px; --panel-w: 256px; --gap: 8px; --row-h: 80px; --radius: 10px; --radius-sm: 6px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;overflow:hidden} body{ font-family:'Noto Sans SC','Space Grotesk',sans-serif; background:var(--bg);color:var(--text); } ::-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)} input,button,select{font-family:inherit;font-size:inherit} /* ========== 布局 ========== */ #app{display:flex;flex-direction:column;height:100vh;overflow:hidden} #toolbar{ height:var(--toolbar-h);min-height:var(--toolbar-h); display:flex;align-items:center;justify-content:space-between; padding:0 20px; background:var(--bg-panel); border-bottom:1px solid var(--border); z-index:100; } .toolbar-left{display:flex;align-items:center;gap:14px} .toolbar-left h1{ font-family:'Space Grotesk',sans-serif; font-size:18px;font-weight:600;letter-spacing:-0.3px; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; } .toolbar-right{display:flex;align-items:center;gap:8px} #main{display:flex;flex:1;overflow:hidden} /* 左侧面板 */ #panel{ width:var(--panel-w);min-width:var(--panel-w); background:var(--bg-panel); border-right:1px solid var(--border); display:flex;flex-direction:column; transition:width .3s,min-width...

AI 评审点评

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

【GEMINI】这是一个极其优秀的前端工程实现。模型不仅准确理解了所有复杂的业务逻辑（如网格避障、数据持久化、三态排序等），还在视觉表现和交互细节上做了大量优化。代码结构清晰，模块化程度高，完全符合资深前端工程师的角色设定。在单文件内集成如此多功能且保持逻辑鲁棒性，表现非常突出。 【KIMI】整体而言，这是一个功能完整、交互流畅的可拖拽自定义仪表板实现。核心的网格布局引擎和组件功能均实现良好，布局持久化准确性高，数据交互功能完备。代码组织结构清晰，UI视觉统一专业。在细节优化和响应式适配方面还有一定提升空间，但整体完成度很高，是一个优秀的前端工程实现。

相关链接

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

加载中...
100%