glm-5.2 在「全球业务分布地图数据页」的评测结果

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

基本信息

  • 模型名称：glm-5.2
  • 用例名称：全球业务分布地图数据页
  • 测试类型：网页生成
  • 评测维度：AI 生成单页 PPT

系统提示词（System Prompt）

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

你是一名前端开发工程师。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 代码结构清晰，有适当注释

用户提示词（User Prompt）

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

创建一个全球业务分布地图数据页。 功能要求： - 使用 SVG 世界地图作为底图，底图背景为深灰色（如 #1a1a2e 或类似深色调） - 在以下主要城市位置标注发光热点：北京、纽约、伦敦 - 每个热点旁显示气泡框，内容包含城市名称和销售额数据（数据可自行设定） - 热点使用亮色（如橙色、青色等）与深色底图形成对比 - 热点具备简单的发光/脉冲动画效果

任务要求

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

  1. 页面底图为深灰色调，整体视觉风格为深色主题
  2. 北京、纽约、伦敦三个城市均有热点标注
  3. 热点具备发光或脉冲动画效果
  4. 每个热点旁有气泡框显示城市名称和销售额数据
  5. 热点与气泡框颜色与底图形成明显亮色对比

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

我将为你创建一个具有科技感的全球业务分布地图数据页，包含 SVG 世界地图、发光热点、气泡框、脉冲动画以及完整的数据面板。 ```html 全球业务分布网络 · Global Business Network /* === 基础重置 === */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-deep: #0a0e27; --bg-mid: #131838; --bg-card: rgba(20, 28, 60, 0.55); --border: rgba(120, 180, 255, 0.18); --border-strong: rgba(120, 180, 255, 0.35); --text-primary: #e8ecf5; --text-secondary: #8a92b2; --text-muted: #5a6285; --accent-beijing: #ff6b35; --accent-newyork: #00d9ff; --accent-london: #b561ff; --success: #00ff9d; } body { background: radial-gradient(ellipse at top, #1a1f4a 0%, var(--bg-deep) 55%); color: var(--text-primary); font-family: 'Segoe UI', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; min-height: 100vh; overflow-x: hidden; position: relative; } /* 背景网格层 */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(100, 180, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 180, 255, 0.035) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } /* 顶部光晕 */ body::after { content: ''; position: fixed; top: -250px; left: 50%; transform: translateX(-50%); width: 900px; height: 450px; background: radial-gradient(ellipse, rgba(0, 217, 255, 0.12) 0%, transparent 70%); pointer-events: none; z-index: 0; } .app { position: relative; z-index: 1; padding: 24px 32px; max-width: 1600px; margin: 0 auto; } /* === 顶部导航 === */ .header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 24px; } .brand { display: flex; align-items: center; gap: 14px; } .brand-logo { width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg, #00d9ff, #b561ff); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; color: #0a0e27; box-shadow: 0 0 24px rgba(0, 217, 255, 0.4); letter-spacing: -1px; } .brand-text h1 { font-size: 19px;...

AI 评审点评

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

【CLAUDE】该生成结果完整实现了功能要求的所有核心要素：深色调SVG世界地图底图、三城市发光脉冲热点、彩色气泡框（含城市名和销售额）、亮色与深色的强对比设计。代码结构清晰，注释详细，HTML/CSS/JS完整内联。在基础需求之上额外提供了连接线动画、扫描线、实时活动日志、数据面板等丰富功能，整体视觉质量达到专业数据可视化大屏水准。主要不足在于世界地图为简化手绘路径，精度有限，以及气泡框与热点的响应式对齐依赖CSS百分比定位存在潜在偏差风险。 【GEMINI】这是一份非常优秀的生成结果。模型不仅完全满足了所有功能要求（深色底图、三城热点、脉冲动画、数据气泡），还在视觉表现力上做了大量加分项，如手绘SVG地图、多货币支持、实时活动仿真等。代码实现方案纯粹（无外部依赖），逻辑严密，直接可用性极高。 【KIMI】该实现完整满足了所有功能要求，深色主题科技感强，三个城市热点位置准确且具备脉冲发光动画，气泡框信息完整且视觉对比鲜明。额外提供了连接线动画、实时活动日志、数据面板等增强功能，超出基础要求。主要不足在于SVG地图为简化手绘风格、气泡框采用绝对定位缺乏自适应能力、以及部分动画为装饰性非必需元素。整体为高质量的完整单页HTML应用实现。

困难难度评测结果

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

模型生成产物

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

我将为你创建一个专业级的全球业务分布地图数据大屏。这个项目融合了 D3.js 地图渲染、SVG 飞线动画、CSS 脉冲效果和实时数据交互。 ```html 全球业务分布态势中心 | Global Business Distribution Center :root { --bg-primary: #0a0e1a; --bg-secondary: #0f1525; --bg-card: rgba(15, 21, 37, 0.7); --border-color: rgba(0, 212, 255, 0.2); --border-bright: rgba(0, 212, 255, 0.5); --text-primary: #e8f0ff; --text-secondary: #8a9bb8; --text-muted: #4a5878; --accent-cyan: #00d4ff; --accent-yellow: #ffd700; --accent-red: #ff3b5c; --accent-green: #00ff9d; --accent-orange: #ff8c42; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Rajdhani', 'Microsoft YaHei', sans-serif; background: var(--bg-primary); color: var(--text-primary); overflow: hidden; height: 100vh; background-image: radial-gradient(ellipse at 20% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(255, 59, 92, 0.06) 0%, transparent 50%), linear-gradient(180deg, #0a0e1a 0%, #050810 100%); } body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(0, 212, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.025) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } .dashboard { display: grid; grid-template-rows: 72px 108px 1fr 92px; grid-template-columns: 1fr 380px; height: 100vh; gap: 12px; padding: 12px; position: relative; z-index: 1; } /* ============ 标题栏 ============ */ .header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: linear-gradient(90deg, rgba(0, 212, 255, 0.04) 0%, rgba(0, 212, 255, 0.12) 50%, rgba(0, 212, 255, 0.04) 100%); border: 1px solid var(--border-color); border-radius: 4px; position: relative; overflow: hidden; } .header::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent 0%,...

AI 评审点评

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

【CLAUDE】这是一个功能完整、视觉效果出色的全球业务分布地图数据大屏实现。代码架构清晰，使用 D3.js 处理地图投影和数据绑定，CSS 动画处理视觉效果，模块化程度较高。8项核心功能均有实现，交互逻辑完整，数据驱动的动画效果流畅。主要不足在于：①依赖外部 CDN 资源（D3、TopoJSON、世界地图数据、Google Fonts），网络不稳定时可能影响功能；②区域筛选对飞线的处理不够精细（仅整体降低透明度）；③点击排行榜后气泡框定位使用屏幕中心而非精确热点位置。整体而言，这是一个高质量的数据大屏实现，代码量充足，视觉细节丰富，功能覆盖全面。 【GEMINI】这是一个极其优秀的前端实现方案。模型不仅完全满足了所有功能性要求（如地图交互、热点映射、飞线、气泡框双模式、排行榜联动、时间轴及区域筛选），还在视觉表现力上做了深度优化。代码结构清晰，利用 D3.js 的数据绑定机制实现了复杂的数据更新过渡，是一个教科书级的单页大屏应用示例。 【KIMI】该实现是一个高质量的专业级数据大屏，功能覆盖全面，视觉设计精致，交互逻辑清晰。D3.js与原生SVG的结合使用得当，动画效果丰富且性能可控。主要改进空间在于：增强离线容错能力（地图数据本地缓存或备用方案）、优化极端缩放下的坐标同步、以及增加地图热点与排行榜的双向高亮联动。整体达到生产环境可用水准，略优于及格线，属于中上水平的实现。

相关链接

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

加载中...
100%