GLM-5.1 在「实时监控面板」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：实时监控面板
  • 测试类型：网页生成
  • 评测维度：仪表盘

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于数据可视化与监控面板的构建。 回答要求： 1. 所有代码必须在单个 HTML 文件中完成，不引用任何外部库或 CDN 资源，仅使用原生 HTML/CSS/JavaScript。 2. 使用原生 Canvas API 绘制仪表盘和折线图，使用 CSS 实现进度条和环形进度条。 3. 使用 setInterval 模拟数据更新，确保 DOM 数值能正确刷新，数据范围合理（CPU/内存/磁盘 0-100%）。 4. 代码结构清晰，HTML/CSS/JS 各自集中，变量命名语义化，关键逻辑添加注释。 5. 页面需具备基本的视觉专业度：深色监控风格配色、卡片布局、清晰的数据标签。

用户提示词（User Prompt）

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

# 实时监控面板（基础版） ## 应用要求 - 所有代码（HTML、CSS、JavaScript）必须在一个 HTML 文件中 - 不得引用任何外部库（无 CDN、无 npm 包） - 直接输出完整的、可独立运行的 HTML 代码 ## 功能要求 ### 1. 系统状态卡片（4 个） - **CPU 使用率**：使用 Canvas 绘制半圆仪表盘，显示 0-100% 数值，指针或弧线随数值变化 - **内存使用率**：使用 CSS 进度条展示，显示当前百分比数值（如 「72%」） - **磁盘使用率**：使用 Canvas 或纯 CSS 绘制环形进度条，显示百分比 - **网络流量**：以数字形式展示上行/下行速率（如 「↑ 1.2 MB/s ↓ 3.4 MB/s」） ### 2. CPU 实时折线图 - 使用 Canvas 绘制折线图，X 轴表示最近 60 秒，Y 轴表示 0-100% - 每秒通过 setInterval 新增一个模拟数据点，旧数据向左滚动移出 - 绘制 X/Y 坐标轴及刻度标签 ### 3. 服务状态列表 - 展示 5 个服务：Web Server、Database、Cache、Queue、API - 每行包含：状态指示灯（绿色=正常/黄色=警告/红色=故障）、服务名称、响应时间（ms）、最后检查时间 - 状态和响应时间每 5 秒随机更新一次 ### 4. 告警列表 - 展示最近 5-8 条告警记录，每条包含：告警级别（严重/警告/信息）、告警内容、时间戳 - 不同级别使用不同颜色标识（红/黄/蓝） - 新产生的告警条目有 CSS 闪烁动画效果（持续约 3 秒） - 每 8 秒随机生成一条新告警并插入列表顶部，超出 8 条时移除最旧的 ## 视觉要求 - 整体采用深色主题（深灰/深蓝背景） - 卡片式布局，卡片间有明显间距和圆角 - 页面顶部有标题栏，显示面板名称和当前时间（每秒更新） 请直接输出完整的 HTML 代码。

任务要求

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

  1. 四个系统状态卡片均正确实现对应的可视化形式：Canvas 仪表盘（CPU）、CSS 进度条（内存）、环形进度条（磁盘）、数字显示（网络），且数值随 setInterval 动态更新
  2. Canvas 折线图能正确绘制坐标轴与折线，每秒追加新数据点并实现左滚效果，历史数据保留最近 60 个点
  3. 服务状态列表包含全部 5 个服务，状态指示灯颜色与状态值一致，响应时间和检查时间定期更新
  4. 告警列表能动态插入新告警，不同级别颜色区分明确，新告警条目具有可见的闪烁动画
  5. 页面整体采用深色主题，布局结构清晰，各模块在视觉上有明确分区，无明显样式错乱

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 实时监控面板 /* ===== 全局变量与基础样式 ===== */ :root { --bg-deep: #060b14; --bg-primary: #0a1120; --bg-card: #0f1729; --bg-card-alt: #111d33; --border: #1a2744; --border-glow: rgba(0, 224, 150, 0.2); --accent: #00e096; --accent-dim: rgba(0, 224, 150, 0.12); --text-primary: #e8edf5; --text-secondary: #8899b4; --text-muted: #4e6183; --danger: #f0465a; --warning: #f0a030; --info: #3b8bf6; --success: #22c55e; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg-deep); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } /* 背景氛围层 */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 800px 600px at 15% 20%, rgba(0, 224, 150, 0.04) 0%, transparent 70%), radial-gradient(ellipse 600px 500px at 85% 70%, rgba(59, 139, 246, 0.035) 0%, transparent 70%), radial-gradient(ellipse 500px 400px at 50% 90%, rgba(240, 70, 90, 0.02) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ===== 顶部标题栏 ===== */ .header { display: flex; justify-content: space-between; align-items: center; padding: 14px 32px; background: rgba(10, 17, 32, 0.85); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; } .header-left { display: flex; align-items: center; gap: 12px; } .header-logo { width: 8px; height: 28px; border-radius: 4px; background: linear-gradient(180deg, var(--accent), #00a870); box-shadow: 0 0 12px rgba(0, 224, 150, 0.3); } .header-title { font-size: 20px; font-weight: 700; letter-spacing: 2px; color: var(--text-primary); } .header-title em { font-style: normal; color: var(--accent); } .header-time { font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; } .header-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; animation: blink-dot 2s ease-in-out...

AI 评审点评

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

【GEMINI】这是一个极其优秀的代码实现。不仅完全符合所有的功能和技术限制（单文件、无外部库、Canvas/CSS 混合绘图），还在视觉呈现和代码健壮性上表现卓越。数据模拟逻辑自然，UI 交互细节（如告警闪烁、进度条动画）处理得非常到位，是一个高质量的资深前端开发范例。 【KIMI】该实时监控面板实现质量很高，代码结构清晰，功能逻辑完整，视觉专业度强，符合题目要求。

进阶难度评测结果

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

模型生成产物

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

```html 实时数据监控面板 /* ===== 设计令牌 ===== */ :root { --bg: #0d1117; --bg-elevated: #161b22; --border: #30363d; --fg: #e6edf3; --muted: #8b949e; --accent: #00d4aa; --accent-dim: rgba(0,212,170,0.12); --amber: #f0b429; --danger: #f85149; --warning: #d29922; --info: #58a6ff; --success: #3fb950; --card-radius: 12px; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--fg); font-family: -apple-system, 'Segoe UI', 'Noto Sans SC', sans-serif; min-height: 100vh; overflow-x: hidden; } /* 微妙的背景光晕 */ body::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 40% at 15% 0%, rgba(0,212,170,0.04) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 85% 90%, rgba(240,180,41,0.03) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ===== 顶部标题栏 ===== */ .header { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 14px 32px; background: linear-gradient(180deg, rgba(22,27,34,0.95) 0%, rgba(13,17,23,0.9) 100%); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); } .header-left { display: flex; align-items: center; gap: 14px; } .header-logo { width: 8px; height: 28px; border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--amber)); } .header h1 { font-size: 18px; font-weight: 700; letter-spacing: 2px; color: var(--fg); } .header h1 span { color: var(--accent); } .header .clock { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; } /* ===== 主布局 ===== */ .main-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 22px 28px; max-width: 1560px; margin: 0 auto; } /* ===== 通用卡片 ===== */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 20px; position: relative; overflow: hidden; transition: border-color 0.3s; }...

AI 评审点评

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

【GEMINI】这是一份极高水准的交付代码。它不仅完全满足了所有功能和技术栈限制（原生 Canvas、Web Audio、单文件、无外部库），还在交互细节上展现了深厚的前端功底。代码结构模块化，注释清晰，FLIP 动画和数字缓动效果的加入使应用具备了商业级产品的流畅感，完美契合资深前端工程师的角色设定。 【KIMI】该实现在视觉布局、数据逻辑、交互功能等方面均表现出色，基本满足了题目的所有要求。代码结构清晰，无外部依赖，页面在现代浏览器中可稳定独立运行。不足之处在于部分交互动画如服务列表排序的 FLIP 效果还有优化空间，整体来看是一个高质量的监控面板实现。

困难难度评测结果

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

模型生成产物

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

```html 实时监控面板 :root { --bg: #080c14; --card: #0f1520; --card-hover: #131b2a; --border: #1a2436; --fg: #e0e7ef; --muted: #5a6a80; --accent: #00d68f; --accent-dim: rgba(0,214,143,0.12); --warn: #f5a623; --warn-dim: rgba(245,166,35,0.12); --danger: #ff3d71; --danger-dim: rgba(255,61,113,0.12); --info: #0095ff; --info-dim: rgba(0,149,255,0.12); } *{margin:0;padding:0;box-sizing:border-box;} body{ background: var(--bg); color: var(--fg); font-family: 'SF Mono','Cascadia Code','Consolas','Menlo',monospace; min-height:100vh; overflow-x:hidden; background-image: radial-gradient(ellipse at 5% 0%, rgba(0,214,143,0.06) 0%, transparent 45%), radial-gradient(ellipse at 95% 100%, rgba(0,149,255,0.04) 0%, transparent 45%); } /* 顶部导航 */ .header{ display:flex;align-items:center;justify-content:space-between; padding:14px 28px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(0,214,143,0.04) 0%,transparent 100%); position:sticky;top:0;z-index:50; backdrop-filter:blur(12px); } .header-left{display:flex;align-items:center;gap:12px;} .header h1{font-size:17px;font-weight:700;letter-spacing:1.5px;color:var(--fg);} .live-dot{ width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 8px var(--accent); animation:livePulse 2s ease-in-out infinite; } @keyframes livePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}} .header-right{display:flex;align-items:center;gap:16px;} .clock{color:var(--muted);font-size:12px;letter-spacing:.5px;} .mute-btn{ background:var(--card);border:1px solid var(--border);color:var(--fg); padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px; font-family:inherit;transition:all .2s; } .mute-btn:hover{border-color:var(--accent);color:var(--accent);} .mute-btn.muted{color:var(--muted);border-color:var(--border);} /* 网格布局 */ .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px;padding:18px 24px; max-width:1440px;margin:0 auto; } .card{...

AI 评审点评

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

【GEMINI】这是一份极高水准的交付代码。在严禁外部库的苛刻条件下，开发者完美利用原生 Web API（Canvas, Web Audio, Drag and Drop）构建了一个复杂且流畅的监控系统。代码结构清晰，模块化程度高，不仅实现了所有功能要求，还在视觉特效（如脉冲动画、光晕效果）和交互体验（如平滑的数据插值动画、精确的图表悬停反馈）上超出了预期。数据逻辑严密，告警触发机制准确，是一个教科书级别的原生前端开发案例。 【KIMI】该实时监控面板整体实现质量很高，各项功能均符合要求，代码结构清晰，视觉风格专业，组件间布局协调，支持基本的响应式适配。在可拖拽布局、多维度图表切换、数据钻取弹窗、告警阈值逻辑等方面均实现良好，Web Audio 音效合成与静音控制也符合要求。综合评分为优秀。

相关链接

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

加载中...
100%