doubao-seed-2-1-pro 在「全球业务分布地图数据页」的评测结果

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

基本信息

  • 模型名称：doubao-seed-2-1-pro
  • 用例名称：全球业务分布地图数据页
  • 测试类型：网页生成
  • 评测维度：单页 PPT

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

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

任务要求

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

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

以下是根据您的要求创建的全球业务分布地图数据页面的完整代码： ```html 全球业务分布地图 /* 自定义动画和样式 */ body { background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%); min-height: 100vh; } /* 热点脉冲动画 */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(2); opacity: 0.5; } 100% { transform: scale(3); opacity: 0; } } @keyframes glow { 0%, 100% { filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 15px currentColor); } 50% { filter: drop-shadow(0 0 15px currentColor) drop-shadow(0 0 30px currentColor); } } .hotpoint { cursor: pointer; } .hotpoint-core { animation: glow 2s ease-in-out infinite; } .hotpoint-pulse { animation: pulse 2s ease-out infinite; transform-origin: center; } .hotpoint-pulse-delay-1 { animation-delay: 0.5s; } .hotpoint-pulse-delay-2 { animation-delay: 1s; } /* 气泡框样式 */ .bubble { opacity: 0; transform: translateY(10px); transition: all 0.3s ease; pointer-events: none; } .hotpoint:hover .bubble { opacity: 1; transform: translateY(0); } /* 地图路径样式 */ .country-path { fill: #2d3a4f; stroke: #3d4f6f; stroke-width: 0.5; transition: fill 0.3s ease; } .country-path:hover { fill: #3d5a7f; } /* 网格背景 */ .grid-bg { background-image: linear-gradient(rgba(100, 150, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 150, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; } /* 数据卡片动画 */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .stat-card { animation: fadeInUp 0.6s ease forwards; } .stat-card:nth-child(1) { animation-delay: 0.1s; } .stat-card:nth-child(2) { animation-delay: 0.2s; } .stat-card:nth-child(3) { animation-delay: 0.3s; } 全球业务分布地图 Global Business Distribution Map 北京 · Beijing ¥2.8亿 亚太地区总部 🏯 同比增长 23.5% 纽约 · New York $4.2亿 美洲地区总部 🗽 同比增长 18.2% 伦敦 · London £3.1亿 欧洲地区总部 🎡 同比增长 15.8% 图例说明 亚太区 美洲区 欧洲区 北京 · Beijing ¥280,000,000 亚太地区总部 纽约 · New York $420,000,000 美洲地区总部 伦敦 · London £310,000,000 欧洲地区总部 鼠标悬停在热点上查看详细数据 ¥70.6亿 全球总营收 +19.2% 平均增长率 3...

AI 评审点评

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

【CLAUDE】该方案整体框架完整，功能点基本覆盖：深色主题、三城市热点、脉冲动画、气泡框、亮色对比均有实现。代码结构清晰，注释适当，交互逻辑（hover显示、自动轮播、鼠标跟随）体现了较好的工程思维。最大短板是SVG世界地图底图过于简化，仅用十余个粗糙多边形表示大洲，无法提供真实的地理参考效果，这对于「全球业务分布地图」这一核心展示诉求来说是明显缺陷。若使用自然地球或TopoJSON等标准地图数据，整体效果将大幅提升。 【GEMINI】这是一份非常优秀的代码实现。模型不仅完全满足了所有功能要求（深色底图、特定城市热点、发光动画、气泡框数据），还在视觉表现力上做了大量加分项。它巧妙地使用简化的 SVG 路径解决了地图底图问题，并提供了平滑的数字动画和自动交互逻辑，代码结构清晰，注释到位，是一个高质量的单页数据可视化示例。 【KIMI】该实现基本满足所有功能要求，深色主题专业统一，热点动画效果出色，数据展示完整。主要不足在于SVG地图过度简化导致地理准确性不足，以及部分交互细节（如气泡默认隐藏、箭头方向不一致）可进一步优化。整体为一份合格偏上的前端实现。

困难难度评测结果

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

模型生成产物

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

以下是根据您的要求创建的专业级全球业务分布地图数据大屏页面： ```html 全球业务分布数据大屏 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); :root { --bg-primary: #0a0e1a; --bg-secondary: #0d1321; --border-color: rgba(0, 195, 255, 0.3); --glow-cyan: #00c3ff; --glow-yellow: #ffd700; --glow-red: #ff4757; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Noto Sans SC', sans-serif; background: var(--bg-primary); color: #fff; overflow: hidden; height: 100vh; } .font-tech { font-family: 'Orbitron', 'Noto Sans SC', sans-serif; } /* 扫光效果 */ .scan-line { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.1), transparent); animation: scan 3s linear infinite; } @keyframes scan { 0% { left: -100%; } 100% { left: 100%; } } /* 流光边框 */ .glow-border { position: relative; background: linear-gradient(135deg, rgba(0, 195, 255, 0.1), rgba(0, 195, 255, 0.05)); border: 1px solid var(--border-color); } .glow-border::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; background: linear-gradient(45deg, var(--glow-cyan), transparent, var(--glow-cyan)); z-index: -1; border-radius: inherit; opacity: 0.3; animation: borderGlow 3s ease-in-out infinite; } @keyframes borderGlow { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } } /* 脉冲动画 */ .pulse-ring { animation: pulse 2s ease-out infinite; } .pulse-ring:nth-child(2) { animation-delay: 0.5s; } .pulse-ring:nth-child(3) { animation-delay: 1s; } @keyframes pulse { 0% { r: 5; opacity: 0.8; } 100% { r: 30; opacity: 0; } } /* 飞线动画 */ .fly-line { stroke-dasharray: 10, 20; animation: flyLine 2s linear infinite; } @keyframes flyLine { 0% { stroke-dashoffset: 30; } 100% { stroke-dashoffset: 0; } } /* 数字滚动动画 */ .number-roll { display: inline-block; transition: all 0.5s ease; } /* 热点发光 */ .hotspot-glow { filter: drop-shadow(0 0 10px currentColor); } /* 滚动条样式 */...

AI 评审点评

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

【CLAUDE】该候选输出实现了需求中的大部分功能，代码结构清晰，数据组织合理（四个季度的完整数据集），交互逻辑基本完整。主要优点是功能覆盖面广，KPI动画、飞线、气泡框、排行榜联动等核心功能均有实现。主要不足在于：1）世界地图底图质量偏低，使用手绘SVG路径而非专业地图数据，影响专业感；2）部分动画效果（如热点脉冲、季度切换过渡）在实际浏览器中可能存在兼容性问题或效果不如预期；3）气泡框坐标计算存在潜在偏差；4）整体视觉精细度有待提升。作为一个单页HTML应用，在功能完整性和代码质量方面表现中等偏上，但距离「专业级」数据大屏的视觉标准还有一定差距。 【GEMINI】这是一个非常优秀的数据大屏生成案例。模型在单页 HTML 环境下，不依赖任何第三方图表库（如 ECharts 或 Leaflet），完全依靠原生 SVG、Tailwind CSS 和原生 JavaScript 实现了极其复杂的地理信息可视化功能。交互逻辑严密（如排行榜点击后地图平移缩放至中心并弹出气泡），视觉动效丰富且不冗余，完美契合了“资深前端开发工程师”的人设要求。唯一的微小不足是手动绘制的 SVG 地图轮廓较为简化，但在单文件交付场景下这是极佳的工程折中方案。 【KIMI】该实现是一个功能较为完整的全球业务分布数据大屏，涵盖了需求中的所有核心功能点。代码结构清晰，使用现代CSS特性，交互逻辑完整。主要不足在于：地图底图采用简化SVG路径而非真实地理数据，专业感大打折扣；部分动画效果（如季度切换过渡）未完全达到平滑过渡的要求；气泡框定位计算复杂且在缩放状态下可能不够精准。整体达到可用水准，但距离专业级数据大屏的视觉精细度还有提升空间。

相关链接

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

加载中...
100%