GLM-5.1 在「分析报表页」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：分析报表页
  • 测试类型：网页生成
  • 评测维度：数据看板

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于数据可视化与报表页面的构建。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须集中在单个 HTML 文件中，可直接在浏览器中运行，无需任何外部依赖。 2. 图表（折线图、饼图、柱状图）必须使用原生 Canvas API 手动绘制，不得引入任何第三方图表库。 3. 页面数据全部使用硬编码的静态数据，无需实现真实的数据请求或复杂的动态交互逻辑。 4. 代码结构清晰，HTML/CSS/JS 各自分区，关键逻辑处需添加简短注释说明用途。 5. 页面视觉风格应具备基本的专业感，布局整齐，色彩搭配合理，适合作为数据报表展示。

用户提示词（User Prompt）

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

# 数据分析报表页面（基础版） 请生成一个静态数据分析报表页面，所有代码写在单个 HTML 文件中，直接输出完整可运行的代码。 ## 页面结构要求 ### 1. 顶部筛选栏 - 日期范围选择器（两个 date 类型的 input，分别代表开始日期和结束日期） - 数据类型下拉菜单（选项：销售 / 用户 / 流量） - 「刷新」按钮（点击后可仅做视觉反馈，如按钮短暂变色） - 「导出」按钮（点击后弹出 alert 提示「导出功能模拟中」即可） ### 2. 汇总指标卡片区 展示 4 个关键指标卡片，每张卡片包含： - 指标名称（如：总销售额、订单数量、活跃用户、页面流量） - 当前数值（硬编码静态数据） - 同比变化（如：↑ 12.5%，用绿色/红色区分正负） - 环比变化（如：↓ 3.2%，用绿色/红色区分正负） ### 3. 趋势分析区 - 使用 Canvas 绘制一条折线图，展示近 7 天的趋势数据（硬编码） - 图表需包含：X 轴（日期标签）、Y 轴（数值刻度）、折线、数据点 - 提供「日 / 周 / 月」三个切换按钮，点击后用对应的硬编码数据集重新绘制折线图 ### 4. 分布分析区（左右并排布局） - **左侧**：使用 Canvas 绘制饼图，展示 4～5 个类别的占比分布，需包含图例 - **右侧**：使用 Canvas 绘制水平或垂直柱状图，展示 TOP 5～10 排名数据，需包含类别标签和数值 ### 5. 明细数据表格 - 展示至少 15 条硬编码的明细数据（列：序号、名称、类别、数值、日期、状态） - 实现基础分页功能：每页显示 5 条，提供「上一页 / 下一页」按钮及当前页码显示 - 实现列标题点击排序（至少支持「数值」列的升序/降序切换，并用箭头图标指示当前排序方向） - 提供一个文本输入框，支持按「名称」字段对表格数据进行实时筛选 ## 技术约束 - **不允许**引入任何外部 CSS 框架或 JavaScript 库（包括 CDN 链接） - 图表使用原生 `<canvas>` 元素配合 JavaScript Canvas 2D API 绘制 - 所有数据均为 JavaScript 中硬编码的静态数组或对象 - 页面需在现代浏览器（Chrome/Firefox 最新版）中正常显示 请直接输出完整的 HTML 代码。

任务要求

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

  1. 页面五大区域（筛选栏、指标卡片、趋势图、分布图、明细表格）均已实现，布局结构清晰，视觉上无明显错位或重叠。
  2. 三张图表（折线图、饼图、柱状图）均使用原生 Canvas API 绘制，且包含必要的坐标轴、标签或图例，图形数据与硬编码数据一致。
  3. 折线图的日/周/月视图切换功能可正常工作，点击按钮后 Canvas 内容正确更新为对应数据集。
  4. 明细表格的分页逻辑正确（页码显示准确、边界处理合理），列排序功能可正常切换升降序，文本筛选框能实时过滤表格行。
  5. 代码全部集中在单个 HTML 文件中，无外部依赖，可在浏览器中直接打开运行，无控制台报错。
  6. 指标卡片的同比/环比数值使用不同颜色（正值绿色、负值红色）加以区分，整体页面具备基本的专业视觉风格。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 数据分析报表 /* ========== CSS 变量 ========== */ :root { --bg: #0d1117; --bg-secondary: #161b22; --card: #1c2333; --border: #2d3748; --fg: #e6edf3; --fg-secondary: #8b949e; --accent: #00d4aa; --accent-dim: rgba(0, 212, 170, 0.12); --danger: #f85149; --success: #3fb950; --warning: #f0b429; --radius: 10px; --shadow: 0 4px 24px rgba(0,0,0,0.25); } /* ========== 全局重置 ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 14px; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6; min-height: 100vh; background-image: radial-gradient(ellipse at 15% 30%, rgba(0,212,170,0.04) 0%, transparent 50%), radial-gradient(ellipse at 85% 70%, rgba(240,180,41,0.03) 0%, transparent 50%); } /* ========== 滚动条 ========== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--fg-secondary); } /* ========== 顶部筛选栏 ========== */ .filter-bar { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 16px 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); } .filter-bar .logo { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.5px; color: var(--accent); margin-right: 12px; white-space: nowrap; } .filter-bar .logo span { color: var(--fg); font-weight: 400; } .filter-group { display: flex; align-items: center; gap: 8px; } .filter-group label { color: var(--fg-secondary); font-size: 0.85rem; white-space: nowrap; } .filter-bar input[type="date"], .filter-bar select { background: var(--card); border: 1px solid var(--border); color: var(--fg); padding: 7px 12px; border-radius: 6px; font-size: 0.85rem; outline: none;...

AI 评审点评

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

【CLAUDE】该候选输出是一个高质量的数据分析报表页面实现。代码完全符合技术约束要求：单文件 HTML、无外部依赖、Canvas 原生绘制、硬编码静态数据。五大功能区域全部实现且质量优秀，折线图的视图切换、表格的分页/排序/筛选等核心交互功能均正确工作。视觉设计专业，深色主题配色协调，动画效果流畅自然（卡片入场、图表绘制、按钮反馈）。代码结构清晰，注释充分，使用了多项优化技巧（高 DPI 适配、防抖处理、缓动函数、requestAnimationFrame）。细节处理到位（Toast 提示替代 alert、排序箭头指示、筛选结果计数、空状态处理）。整体完成度极高，超出基础要求，是一个可直接用于展示的专业级静态报表页面。 【GEMINI】这是一个极其优秀的大模型生成案例。模型不仅完全满足了所有功能性要求和技术约束（单文件、无外部依赖、原生 Canvas），还在视觉美化、交互细节（如 Toast 提示替代 alert、重绘防抖、入场动画）以及代码工程化结构上展现了极高的水准。Canvas 绘图部分尤其令人印象深刻，展示了深厚的前端功底。 【KIMI】该实现是一份高质量的单文件数据分析报表页面，完全满足所有功能需求和技术约束。深色主题设计专业，三大Canvas图表绘制精细且带动画效果，表格交互逻辑完整。代码组织清晰，注释到位，无明显bug或控制台报错。整体超出基础版要求，在视觉动效和交互体验上有额外加分表现。

进阶难度评测结果

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

模型生成产物

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

```html 数据分析报表 :root { --bg-primary: #0b0d13; --bg-secondary: #12151e; --bg-card: #161a26; --bg-card-hover: #1c2030; --border: #252a3a; --border-light: #2f3548; --text-primary: #e8eaf0; --text-secondary: #8890a4; --text-muted: #5a6078; --accent: #e8a838; --accent-light: #f0c060; --accent-dim: rgba(232,168,56,0.12); --success: #0ecb81; --success-dim: rgba(14,203,129,0.12); --danger: #f6465d; --danger-dim: rgba(246,70,93,0.12); --info: #22d3ee; --info-dim: rgba(34,211,238,0.12); --radius: 10px; --radius-sm: 6px; --shadow: 0 2px 12px rgba(0,0,0,0.3); --transition: 0.25s cubic-bezier(0.4,0,0.2,1); } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { font-size:14px; } body { font-family:'DM Sans','Space Grotesk',sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; overflow-x:hidden; line-height:1.6; } body::before { content:''; position:fixed; top:0; left:0; width:100%; height:100%; background: radial-gradient(ellipse at 15% 0%,rgba(232,168,56,0.06) 0%,transparent 50%), radial-gradient(ellipse at 85% 100%,rgba(34,211,238,0.04) 0%,transparent 50%); pointer-events:none; z-index:0; } #app { position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:20px 28px 40px; } /* 加载遮罩 */ .loading-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(11,13,19,0.7); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity 0.3s; } .loading-overlay.hidden { opacity:0; pointer-events:none; } .spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* Toast */ .toast-container { position:fixed; top:24px; right:24px; z-index:10000; display:flex; flex-direction:column; gap:10px; } .toast { background:var(--bg-card); border:1px solid var(--border-light); border-left:3px solid...

AI 评审点评

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

【CLAUDE】这是一个高质量的数据分析报表页面实现。功能完整度极高，所有核心需求（筛选联动、图表交互、表格操作、指标卡片动画）均正确实现且逻辑严谨。视觉呈现专业，深色商务风格统一，交互动画流畅自然，用户体验良好。代码架构优秀，JS 模块化清晰，CSS 变量化管理规范，模拟数据设计合理且类型差异明显。唯一可优化之处在于部分交互细节（如排序加载反馈）和代码细粒度拆分，但整体已达到生产级水准，完全满足进阶交互版报表的要求。 【GEMINI】这是一份高质量的评测提交。模型不仅完全满足了所有功能性要求，还在交互细节（如数字滚动、入场动画、数据聚合逻辑）和代码工程化（如状态驱动、模块化渲染）方面表现优异。页面视觉风格统一且专业，代码可读性极高，是一个非常成熟的数据可视化报表原型。 【KIMI】该实现是一个高质量的数据分析报表页面，功能覆盖全面，视觉设计专业，代码组织合理。核心亮点包括：完善的筛选联动机制、流畅的图表动画与交互、完整的表格功能（排序/分页/筛选）以及美观的深色主题设计。主要改进空间在于自定义日期功能的真实实现（而非映射到固定档位）、表格数据的内存管理优化，以及DOM构建方式的安全性提升。整体达到生产环境演示级别，可作为数据可视化项目的优秀参考实现。

困难难度评测结果

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

模型生成产物

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

```html DataVision · 数据分析报表 tailwind.config = { theme: { extend: { fontFamily: { sans: ['Noto Sans SC', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] } } } } /* ===== 主题变量 ===== */ :root { --bg-deep: #060b14; --bg-primary: #0a1120; --bg-card: #0f1a2e; --bg-card-hover: #142240; --bg-input: #0c1526; --border: #1a2a44; --border-light: #243554; --accent: #00e5a0; --accent-dim: rgba(0,229,160,0.15); --accent-glow: rgba(0,229,160,0.3); --warm: #fbbf24; --warm-dim: rgba(251,191,36,0.15); --up: #00e5a0; --down: #ff4d6a; --text-primary: #e8edf5; --text-secondary: #7b8faa; --text-muted: #4a5d7a; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans SC', sans-serif; background: var(--bg-deep); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } /* ===== 背景氛围 ===== */ body::before { content: ''; position: fixed; top: -30%; left: -10%; width: 60%; height: 60%; background: radial-gradient(ellipse, rgba(0,229,160,0.04) 0%, transparent 70%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; bottom: -20%; right: -10%; width: 50%; height: 50%; background: radial-gradient(ellipse, rgba(251,191,36,0.03) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ===== 滚动条 ===== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ===== 通用卡片 ===== */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; transition: all 0.3s ease; } .card:hover { border-color: var(--border-light); box-shadow: 0 4px 24px rgba(0,0,0,0.3); } /* ===== 入场动画 ===== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }...

AI 评审点评

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

【CLAUDE】这是一个高质量的数据分析报表页面实现，完整满足 Hard 级别的所有功能要求。代码在单 HTML 文件约束下实现了清晰的模块化架构，数据引擎、状态管理、图表控制、表格管理、布局控制等模块职责明确且注释详尽；功能实现完整且逻辑正确，实时更新、数据钻取、全局联动、拖拽布局、表格交互均正常工作；视觉呈现专业，深色主题一致性强，交互动画流畅自然。主要优点包括：状态管理集中化、数据生成算法合理（随机游走、权重分配）、图表配置统一、动画细节丰富。改进空间：部分交互细节可优化（如拖拽占位提示、详情面板布局）、长函数可拆分、字符串拼接渲染存在安全隐患、缺少边界错误处理。整体而言，该实现展现了扎实的前端工程能力和对复杂交互系统的良好把控。 【GEMINI】这是一份近乎完美的 Hard 级别任务答卷。模型不仅在功能完整性上做到了无可挑剔，更在代码架构的优雅度和视觉交互的专业性上表现卓越。所有的复杂交互（如数据钻取、拖拽持久化、实时数字滚动）均通过原生 JS 和第三方库的合理组合高效完成，体现了资深全栈工程师的水平。 【KIMI】该候选输出是一份高质量的数据分析报表实现，在单HTML文件约束下完成了Hard级别要求的全部核心功能。代码采用模块化架构，状态管理清晰，视觉呈现专业，交互体验流畅。 particularly在实时数据更新、多层级数据钻取、拖拽布局持久化等复杂功能上实现扎实。主要改进空间在于：增强移动端适配、优化ECharts主题细节对比度、进一步拆分App模块的事件绑定逻辑、以及增加错误处理机制。整体达到生产可用水平，可作为数据可视化项目的优秀参考实现。

相关链接

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

加载中...
100%