kimi-k2.7-code 在「全球业务分布地图数据页」的评测结果

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

基本信息

  • 模型名称：kimi-k2.7-code
  • 用例名称：全球业务分布地图数据页
  • 测试类型：网页生成
  • 评测维度：单页 PPT

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

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

任务要求

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

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 全球业务分布数据看板 /* ================= 全局重置与基础样式 ================= */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; background-color: #0f0f1a; /* 比地图更深的背景 */ color: #ffffff; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } /* ================= 顶部标题栏 ================= */ .header { padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, rgba(15,15,26,0.95) 0%, rgba(15,15,26,0) 100%); position: relative; z-index: 10; } .header h1 { font-size: 26px; font-weight: 300; letter-spacing: 2px; color: #e0e0ff; } .header h1 strong { color: #00d4ff; font-weight: 500; } .header .subtitle { font-size: 13px; color: #8899aa; letter-spacing: 1px; } /* ================= 主内容区：地图容器 ================= */ .map-container { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; padding: 20px; } /* SVG 地图本体 */ .world-map { width: 100%; height: 100%; max-width: 1400px; max-height: 800px; filter: drop-shadow(0 0 40px rgba(0, 150, 255, 0.1)); } .map-bg { fill: #1a1a2e; /* 深灰色/蓝黑色底图 */ } .continent { fill: #242442; stroke: #3a3a5e; stroke-width: 0.8; transition: fill 0.3s ease; } .continent:hover { fill: #2d2d52; } .grid-line { stroke: #2a2a45; stroke-width: 0.5; fill: none; opacity: 0.4; } /* ================= 热点标记样式 ================= */ .hotspot-group { cursor: pointer; } .hotspot-core { fill: currentColor; filter: drop-shadow(0 0 8px currentColor); } .hotspot-pulse { fill: currentColor; opacity: 0.6; transform-origin: center; animation: pulse 2.5s ease-out infinite; } .hotspot-pulse-delayed { animation-delay: 1.25s; } /* 脉冲动画 */ @keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(4); opacity: 0; } } /* ================= 气泡框样式 ================= */ .bubble { position: absolute; background: rgba(20, 22, 40, 0.92); border: 1px solid rgba(255, 255, 255, 0.15);...

AI 评审点评

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

【CLAUDE】该实现整体完成度较高，深色主题统一，三城市热点标注、脉冲动画、气泡框数据展示均已实现，颜色对比鲜明，UI设计具有科技感和专业性。主要不足在于世界地图轮廓采用手写简化多边形，大陆形状辨识度低，若使用标准GeoJSON或成熟地图库（如D3.js）渲染真实地图轮廓，整体效果将大幅提升。气泡定位逻辑设计合理，交互体验良好。 【GEMINI】该生成结果非常出色，完全满足并超越了用户的所有需求。模型不仅实现了功能性的地图标注和动画，还通过 CSS 滤镜、复杂的布局设计以及额外的装饰性元素，提供了一个视觉效果极佳、可直接用于演示的专业级前端页面。代码实现上，经纬度转换算法的加入使得地理分布具有逻辑合理性，体现了模型深厚的前端功底。 【KIMI】该实现是一个功能完整、视觉效果出色的全球业务分布地图。代码结构清晰，注释充分，交互设计周到。核心功能全部达标，且在深色主题统一性、动画丰富度、额外数据面板等方面有加分表现。主要短板在于使用了极度简化的世界地图轮廓而非标准地图数据，这在地理信息可视化场景下是明显的专业性损失。气泡框与SVG分离的定位方案虽实现了功能，但属于技术妥协而非最佳实践。综合来看，作为前端演示作品质量较高，但作为地理数据可视化产品地图精度不足。

困难难度评测结果

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

模型生成产物

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

下面是一份可直接运行的**单页 HTML 数据大屏应用**。所有 CSS、JavaScript、地图数据与业务数据均内联在一个文件中，采用 Canvas 2D 绘制世界地图、热力点、飞线与脉冲动画，配合 HTML/CSS overlay 实现 KPI、排行榜、时间轴与筛选面板。 ```html 全球业务分布数据大屏 :root { --bg: #0a0e1a; --panel: rgba(12, 20, 38, 0.78); --panel-border: rgba(64, 156, 255, 0.22); --text: #e6f1ff; --text-secondary: #8aa4c8; --cyan: #00f0ff; --blue: #2b95ff; --yellow: #ffd166; --red: #ff3b6b; --green: #00e3aa; --grid: rgba(64, 156, 255, 0.08); --shadow: 0 0 20px rgba(0, 240, 255, 0.15); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: var(--bg); color: var(--text); font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; overflow: hidden; user-select: none; } /* 加载层 */ #loader { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; transition: opacity .8s ease; } #loader.hidden { opacity: 0; pointer-events: none; } .loader-ring { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(0,240,255,0.12); border-top-color: var(--cyan); animation: spin 1s linear infinite; box-shadow: 0 0 20px var(--cyan); } .loader-text { margin-top: 18px; color: var(--cyan); letter-spacing: 4px; font-size: 13px; } @keyframes spin { to { transform: rotate(360deg); } } /* 主容器 */ #app { position: relative; width: 100%; height: 100%; } #map-container { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 50%, #0d1426 0%, #060912 100%); } canvas { display: block; width: 100%; height: 100%; } /* 科技感网格背景（CSS 叠加） */ .bg-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 60px 60px; opacity: .6; } .scanline { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(0,240,255,0.03) 50%,...

AI 评审点评

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

【CLAUDE】该候选输出实现了题目要求的绝大多数功能，代码结构清晰，采用纯Canvas+HTML/CSS内联方案，无外部依赖，整体完成度较高。核心亮点包括：完整的缩放拖拽地图、多层脉冲热点动画、飞线效果、气泡框双模式、排行榜联动定位、季度切换平滑过渡、区域筛选淡出等。主要不足：世界地图轮廓极度简化（每块大陆仅十几个顶点），地图精度和视觉质量是最大短板；存在「大洋ia」拼写bug；KPI数字动画效果较基础；部分交互细节（拖拽/点击区分、tooltip位置跟随）有待优化。综合来看，这是一个功能较为完整、视觉风格统一的数据大屏实现，但在地图底图质量和部分细节打磨上与顶级专业大屏仍有差距。 【GEMINI】这是一份极高质量的单页大屏实现。模型展现了深厚的前端功底，在仅使用原生技术栈且不依赖外部数据源的情况下，通过 Canvas 绘制出了一套完整的地理信息可视化系统。其动画细节（如飞线、脉冲、数字滚动、地图平滑定位）处理得非常精细，完全符合“专业级”和“极致视觉效果”的要求。 【KIMI】该实现是一个功能较为完整的单页数据大屏应用，在单文件HTML内联所有代码，无需外部依赖。核心功能如地图交互、热点动画、飞线效果、双模式气泡框、排行榜联动、时间轴切换、区域筛选均已实现，且动画过渡流畅。主要不足在于地图底图采用简化多边形而非精细矢量数据，视觉精细度受限；部分视觉细节如字体层级、面板装饰、数据标记等可进一步优化；KPI动效和实时数据模拟较为基础。整体达到可用水准，但距离专业级商业大屏的精致度还有提升空间。

相关链接

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

加载中...
100%