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. 指标卡片的同比/环比数值使用不同颜色（正值绿色、负值红色）加以区分，整体页面具备基本的专业视觉风格。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 数据分析报表 /* ========== CSS 变量 ========== */ :root { --bg: #0d1117; --bg-elevated: #131a24; --card: #161b22; --card-hover: #1c2431; --border: #2a3140; --fg: #e6edf3; --fg-secondary: #b1bac4; --muted: #7d8590; --accent: #00d4aa; --accent-hover: #00f0c0; --accent-dim: rgba(0,212,170,0.1); --positive: #3fb950; --negative: #f85149; --warning: #d29922; --radius: 10px; } /* ========== 全局重置 ========== */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } /* 背景装饰光晕 */ body::before { content: ''; position: fixed; top: -250px; right: -200px; width: 650px; height: 650px; background: radial-gradient(circle, rgba(0,212,170,0.05) 0%, transparent 70%); pointer-events: none; } body::after { content: ''; position: fixed; bottom: -300px; left: -150px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(240,136,62,0.04) 0%, transparent 70%); pointer-events: none; } /* ========== 容器 ========== */ .container { max-width: 1280px; margin: 0 auto; padding: 28px 32px 48px; position: relative; z-index: 1; } /* ========== 页面标题 ========== */ .page-header { margin-bottom: 28px; } .page-header h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; } .page-header p { color: var(--muted); font-size: 13px; margin-top: 4px; } /* ========== 筛选栏 ========== */ .filter-bar { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 24px; flex-wrap: wrap; } .filter-group { display: flex; align-items: center; gap: 6px; } .filter-group label { font-size: 12px; color: var(--muted); white-space: nowrap; } .filter-bar input[type="date"], .filter-bar select { padding: 7px 10px; background: var(--bg); border: 1px...

AI 评审点评

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

【GEMINI】这是一份极高水准的交付。模型不仅完全满足了所有功能性要求和技术约束，还在视觉细节（动画、阴影、响应式）和 Canvas 绘图深度（高DPI适配、平滑曲线、交互Tooltip）上表现出了资深前端工程师的水平。代码组织良好，无需任何外部依赖即可在浏览器中完美运行。 【KIMI】整体而言，该实现满足了题目要求的各项功能点，代码组织结构清晰，图表和表格的交互功能均能正常工作。页面视觉风格具备一定的专业感，布局整齐，色彩搭配合理。在基础要求之上，还增加了一些交互细节，如卡片 hover 效果、页面加载动画等，提升了用户体验。

进阶难度评测结果

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

模型生成产物

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

```html DataVision - 数据分析报表 :root { --bg: #0d1117; --bg2: #131a24; --card: #161d2a; --card-hover: #1c2536; --fg: #e6edf3; --fg2: #c9d1d9; --muted: #7d8a99; --accent: #00d4aa; --accent-dim: rgba(0,212,170,0.12); --accent2: #f0b429; --accent2-dim: rgba(240,180,41,0.12); --border: #252e3b; --success: #3fb950; --danger: #f85149; --radius: 14px; --shadow: 0 4px 32px rgba(0,0,0,0.35); } * { margin:0; padding:0; box-sizing:border-box; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; overflow-x: hidden; } h1,h2,h3,h4 { font-family: 'Space Grotesk', sans-serif; } /* 背景装饰 */ body::before { content: ''; position: fixed; top: -200px; left: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,212,170,0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; bottom: -300px; right: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(240,180,41,0.04) 0%, transparent 70%); pointer-events: none; z-index: 0; } .main-wrap { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 24px 48px; } /* 顶部标题 */ .top-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .logo-box { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #00a88a); display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; box-shadow: 0 0 20px rgba(0,212,170,0.25); } /* 筛选栏 */ .filter-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 20px; background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 20px; } .filter-group { display: flex; align-items: center; gap: 10px; } .filter-label { font-size: 13px; color: var(--muted); white-space: nowrap; font-weight: 500; } .date-btns {...

AI 评审点评

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

【GEMINI】这是一个极高水准的生成结果。不仅完全满足了所有进阶交互要求，还在视觉美化、动画细节和代码健壮性上超出了预期。代码结构清晰，逻辑闭环，是一个可以直接用于演示的专业级数据分析报表页面。 【KIMI】整体而言，代码实现了大部分的功能要求，具有良好的用户体验和合理的代码结构。但在代码的模块化和数据渲染分离方面还有改进的空间。

困难难度评测结果

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

模型生成产物

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

```html 数据分析报表中心 /* ========== CSS 变量 & 全局样式 ========== */ :root { --bg-primary: #070B14; --bg-secondary: #0D1321; --bg-card: #111827; --bg-card-hover: #162032; --bg-input: #0F172A; --border: #1E2D44; --border-light: #263550; --text-primary: #E8ECF4; --text-secondary: #8B9DC3; --text-muted: #5A6F94; --accent: #00E8A2; --accent-dim: rgba(0, 232, 162, 0.12); --accent-glow: rgba(0, 232, 162, 0.25); --positive: #00E8A2; --negative: #FF4D6A; --warning: #FFB020; --info: #00B8DB; --chart-1: #00E8A2; --chart-2: #FFB020; --chart-3: #FF4D6A; --chart-4: #00B8DB; --chart-5: #F97316; --chart-6: #38BDF8; --radius: 10px; --radius-sm: 6px; --shadow: 0 4px 24px rgba(0,0,0,0.35); --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; scroll-behavior: smooth; } body { font-family: 'Noto Sans SC', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } /* 背景装饰 */ body::before { content: ''; position: fixed; top: -30%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,232,162,0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; bottom: -20%; right: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(0,184,219,0.05) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ========== 滚动条 ========== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ========== 顶部筛选栏 ========== */ .filter-bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: rgba(13,19,33,0.92); backdrop-filter: blur(16px); border-bottom: 1px solid...

AI 评审点评

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

【GEMINI】这是一份近乎完美的 Hard 级别任务实现。开发者展示了深厚的前端工程功底，不仅满足了所有功能性要求（如联动、钻取、拖拽、实时更新），还在代码架构上采用了事件驱动的模块化设计，使得单文件代码依然保持了极高的可维护性和扩展性。视觉效果上，细节处理（如数字滚动、搜索高亮、自定义滚动条）达到了商业级报表的水准。 【KIMI】代码实现了数据分析报表页面的核心功能，包括模拟实时数据流、数据钻取、全局数据联动、可拖拽布局和表格功能。整体架构清晰，模块职责划分合理，代码组织能力优秀。在专业视觉呈现和交互流畅度方面表现良好，但在部分细节动画上有待完善。

相关链接

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

加载中...
100%