GLM-5.1 在「航空公司机队运营态势图」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：航空公司机队运营态势图
  • 测试类型：网页生成
  • 评测维度：数据看板

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于数据可视化仪表板与航空领域 Web 应用开发。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须写在同一个 HTML 文件中，可直接在浏览器打开运行，无需任何外部依赖或服务器环境。 2. 页面打开即呈现完整内容，必须内置模拟数据（至少 8 条航班记录），禁止依赖外部 API 或数据源。 3. 使用语义化 HTML 结构，CSS 采用 Flex 或 Grid 布局，确保页面在 1280px 以上宽度下布局整洁美观。 4. 地图区域使用内联 SVG 实现，在固定坐标系内绘制简化的中国地图轮廓或矩形区域，并用图标标注飞机位置。 5. 代码结构清晰，CSS 与 JS 分别集中在 <style> 和 <script> 标签内，变量命名语义化，关键逻辑添加注释。 6. 视觉风格遵循航空专业主题：深蓝色主色调、白色/浅灰辅助色，状态颜色严格区分（绿/黄/红）。

用户提示词（User Prompt）

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

请设计一个航空公司机队运营态势仪表板（基础版），所有代码写在单个 HTML 文件中，浏览器直接打开即可运行。 ## 页面布局要求 页面分为三个主要区域，整体采用深蓝色航空主题配色： ### 1. 顶部导航栏 - 显示航空公司 Logo 文字（如「天翼航空 · 运营指挥中心」） - 显示当前日期与时间（使用 JavaScript 实时更新，每秒刷新） - 深蓝色背景（#0a1628），白色文字 ### 2. 机队概览卡片区（三张卡片横向排列） - **总飞机数**：显示机队总数量（如 42 架），配飞机图标 - **飞行中**：显示当前在空飞机数量（如 18 架），绿色高亮数字 - **地面待命**：显示地面飞机数量（如 24 架），蓝色高亮数字 - 卡片需有悬停效果（hover 时轻微上移或阴影加深） ### 3. 主内容区（左右两栏布局） **左栏：航班状态列表（占 55% 宽度）** - 表格展示至少 8 条航班记录，包含以下列： - 航班号（如 TY-1023） - 出发机场 → 到达机场（如 北京PEK → 上海SHA） - 计划起飞时间 - 预计到达时间 - 当前状态（正常 / 延误 / 取消） - 状态列用彩色标签展示：绿色=正常、黄色=延误、红色=取消 - 表格行交替背景色，鼠标悬停高亮 **右栏：飞机分布示意图（占 45% 宽度）** - 使用内联 SVG 绘制一个简化的矩形地图区域（代表中国大陆范围） - 在 SVG 内用✈符号或小三角形标注至少 6 个飞机位置 - 用不同颜色区分飞行中（绿色）与地面（灰色）的飞机 - 标注 4-6 个主要机场名称（北京、上海、广州、成都等） - SVG 区域有边框和浅色网格背景 ## 数据要求 - 所有数据为硬编码的 JavaScript 模拟数据 - 航班状态分布：正常 ≥ 4 条、延误 2-3 条、取消 1-2 条 - 概览卡片数字需与列表数据逻辑一致 ## 视觉规范 - 主色：深蓝 #0a1628，次色：#1e3a5f，强调色：#00aaff - 正常状态：#00c853（绿），延误状态：#ffab00（黄），取消状态：#ff3d00（红） - 字体：系统无衬线字体，标题加粗 - 整体背景：#0d1f3c（深蓝灰）

任务要求

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

  1. 三张概览卡片（总飞机数、飞行中、地面待命）数据完整展示，数字与航班列表数据逻辑一致，卡片具有 hover 交互效果。
  2. 航班状态列表包含至少 8 条记录，覆盖全部三种状态（正常/延误/取消），状态标签使用规定的绿/黄/红三色彩色标签，表格具备交替行色与悬停高亮。
  3. SVG 地图区域正确渲染，包含至少 6 个飞机位置标注、4 个机场标签，飞行中与地面飞机用不同颜色区分。
  4. 顶部时钟使用 JavaScript 实时更新（每秒刷新），页面整体配色符合深蓝色航空主题规范（主色
  5. 页面在 1280px 宽度下三栏/两栏布局正确，无元素溢出或重叠，CSS 使用 Flex 或 Grid 实现响应式结构。
  6. 代码结构清晰：CSS 集中在 <style> 标签、JS 集中在 <script> 标签，模拟数据以数组/对象形式集中定义，关键逻辑有注释。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 天翼航空 · 运营指挥中心 /* ===== 设计令牌 ===== */ :root { --bg-primary: #0a1628; --bg-secondary: #0d1f3c; --bg-card: #122a4a; --bg-card-alt: rgba(0,170,255,0.03); --accent: #00aaff; --accent-dim: rgba(0,170,255,0.12); --accent-glow: rgba(0,170,255,0.25); --text-primary: #e8f0f8; --text-secondary: #8aa4be; --text-muted: #4a6a8a; --status-normal: #00c853; --status-delay: #ffab00; --status-cancel: #ff3d00; --ground-blue: #5e9ed6; --border: rgba(0,170,255,0.1); --border-hover: rgba(0,170,255,0.28); } /* ===== 全局重置 ===== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; background:var(--bg-secondary); color:var(--text-primary); min-height:100vh; line-height:1.5; overflow-x:hidden; } /* ===== 背景装饰光晕 ===== */ body::before{ content:''; position:fixed; top:-20%;left:-10%; width:50vw;height:50vw; background:radial-gradient(circle,rgba(0,170,255,0.06) 0%,transparent 70%); pointer-events:none; z-index:0; } body::after{ content:''; position:fixed; bottom:-30%;right:-15%; width:60vw;height:60vw; background:radial-gradient(circle,rgba(0,100,200,0.04) 0%,transparent 70%); pointer-events:none; z-index:0; } /* ===== 顶部导航栏 ===== */ header{ background:var(--bg-primary); border-bottom:1px solid var(--border); padding:0 2rem; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); } .logo{display:flex;align-items:center;gap:.75rem} .logo-icon{width:32px;height:32px;flex-shrink:0} .logo-text{font-size:1.15rem;font-weight:700;letter-spacing:.04em} .logo-text span{color:var(--accent);font-weight:800} .header-right{display:flex;align-items:center;gap:1.25rem} .online-badge{ display:flex;align-items:center;gap:.4rem; font-size:.78rem;color:var(--status-normal);font-weight:600; } .online-dot{ width:7px;height:7px;border-radius:50%;...

AI 评审点评

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

【CLAUDE】这是一个完成度极高的航空运营仪表板实现，完全满足所有功能要求并在视觉设计和代码质量上超出预期。亮点包括：1) 视觉设计专业且富有层次感，多种动画效果（脉冲/流动/呼吸/递增）协调配合营造实时监控氛围；2) SVG地图实现精细，包含简化中国轮廓、多层次装饰元素和7种动画类型；3) 数据逻辑严谨，概览数字与列表记录完全一致；4) 代码组织规范，CSS变量管理、模块化注释、无障碍支持均达到工程化标准。整体呈现出成熟的前端开发能力和对航空领域UI设计规范的深刻理解，可直接用于演示或原型展示场景。

进阶难度评测结果

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

模型生成产物

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

```html 航空公司机队运营监控中心 /* ===== CSS 变量与全局样式 ===== */ :root { --bg-deep: #0a1628; --bg-card: rgba(10, 30, 60, 0.85); --bg-card-hover: rgba(15, 40, 75, 0.95); --border-glow: rgba(30, 144, 255, 0.3); --border-glow-strong: rgba(30, 144, 255, 0.6); --primary: #1e90ff; --accent: #00d4ff; --text-primary: #e0e8f0; --text-secondary: #7a8fa6; --text-muted: #4a5f78; --green: #00c853; --yellow: #ffd600; --red: #ff1744; --orange: #ff9100; --font-display: 'Orbitron', monospace; --font-body: 'Noto Sans SC', sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; } body { font-family: var(--font-body); background: var(--bg-deep); color: var(--text-primary); min-width: 1280px; overflow-x: hidden; line-height: 1.5; } /* 背景装饰 */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 800px 600px at 20% 30%, rgba(30, 144, 255, 0.06) 0%, transparent 70%), radial-gradient(ellipse 600px 500px at 80% 70%, rgba(0, 212, 255, 0.04) 0%, transparent 70%), radial-gradient(ellipse 400px 400px at 50% 50%, rgba(30, 144, 255, 0.03) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ===== 顶部导航栏 ===== */ .top-bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 60px; background: rgba(8, 18, 38, 0.95); border-bottom: 1px solid var(--border-glow); backdrop-filter: blur(12px); } .top-bar-left { display: flex; align-items: center; gap: 16px; } .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; } .top-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color:...

AI 评审点评

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

【CLAUDE】这是一个高质量的航空机队运营监控中心实现，完整覆盖所有核心功能要求且代码结构清晰。亮点包括：1）数据驱动逻辑严密，所有动态效果均基于真实数据更新而非纯视觉切换；2）SVG 地图实现精细，飞机沿贝塞尔曲线移动的动画流畅自然；3）ECharts 图表配置专业，支持多时间维度切换且数据集独立生成；4）交互细节完善，弹窗定位、警报管理、状态筛选均有明确逻辑；5）视觉风格高度契合航空运营主题，配色、字体、布局均体现专业性。微小不足：载客率图表未响应时间筛选器、弹窗定位边界检测可优化、部分性能优化细节缺失。整体达到生产级单页应用水准，代码可直接运行且无需后端支持。

困难难度评测结果

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

模型生成产物

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

```html AOC 航空运营指挥中心 tailwind.config={theme:{extend:{colors:{'aoc-bg':'#060b18','aoc-card':'#0d1525','aoc-cyan':'#00e5ff','aoc-orange':'#ff6b35','aoc-amber':'#f59e0b'},fontFamily:{'orbitron':['Orbitron','monospace'],'noto':['Noto Sans SC','sans-serif']}}}} :root{--bg:#060b18;--card:#0d1525;--card2:#111d33;--border:rgba(0,229,255,0.12);--cyan:#00e5ff;--orange:#ff6b35;--amber:#f59e0b;--red:#ef4444;--green:#10b981;--text:#e2e8f0;--muted:#64748b;--glow-cyan:0 0 20px rgba(0,229,255,0.3);--glow-orange:0 0 20px rgba(255,107,53,0.3)} *{margin:0;padding:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--cyan) var(--card)} ::-webkit-scrollbar{width:4px;height:4px} ::-webkit-scrollbar-track{background:var(--card)} ::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:2px} body{font-family:'Noto Sans SC',sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh} .font-orbitron{font-family:'Orbitron',monospace} .glow-text{text-shadow:0 0 10px rgba(0,229,255,0.5)} .card{background:var(--card);border:1px solid var(--border);border-radius:8px;backdrop-filter:blur(10px)} .card2{background:var(--card2);border:1px solid var(--border);border-radius:6px} .btn-cyan{background:linear-gradient(135deg,rgba(0,229,255,0.15),rgba(0,229,255,0.05));border:1px solid rgba(0,229,255,0.3);color:var(--cyan);padding:6px 14px;border-radius:4px;cursor:pointer;transition:all .2s;font-size:12px} .btn-cyan:hover{background:rgba(0,229,255,0.25);box-shadow:var(--glow-cyan)} .btn-orange{background:linear-gradient(135deg,rgba(255,107,53,0.15),rgba(255,107,53,0.05));border:1px solid rgba(255,107,53,0.3);color:var(--orange);padding:6px 14px;border-radius:4px;cursor:pointer;transition:all .2s;font-size:12px} .btn-orange:hover{background:rgba(255,107,53,0.25);box-shadow:var(--glow-orange)} .btn-sm{padding:3px 10px;font-size:11px} .badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:0.5px}...

AI 评审点评

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

【CLAUDE】这是一个高质量的航空运营指挥中心系统实现，在视觉设计、功能完整度和交互逻辑三方面均达到专业水准。代码结构清晰模块化，CSS 集中管理，JavaScript 按功能分区并有详细注释，避免了意大利面式代码。深色主题配色专业，信息密度高但层次分明，关键指标突出显示。五大功能模块覆盖全面，模拟数据丰富真实，动态更新机制完善。交互响应流畅，点击/悬停反馈及时，弹窗动画自然。主要不足在于：部分交互逻辑未深度联动（如 AI 建议采纳后未触发后续状态变更），历史回放功能仅为展示未实际回放轨迹，3D 地图缺少点击交互，部分图表数据为随机生成未与全局状态深度关联。但瑕不掩瑜，整体实现已达到可直接用于演示或原型验证的水平，体现了扎实的前端工程能力和对航空业务场景的深刻理解。 【GEMINI】这是一个极其优秀的单文件 AI 生成结果。它不仅完美遵循了所有技术约束（单文件、CDN 引入、离线降级逻辑），还在有限的篇幅内实现了极其复杂的业务逻辑。代码结构模块化清晰，可视化效果达到了专业级演示 Demo 的水平。特别是在交互联动（如天气预警联动地图定位）和数据动态更新方面，表现出了远超一般 AI 生成代码的严谨性。 【KIMI】该实现是一个高度完整的航空公司运营指挥中心系统，在单个HTML文件中集成了五大功能模块和丰富的全局交互功能。视觉设计达到专业级深色主题水准，功能覆盖全面且数据模拟真实，交互逻辑以数据驱动为核心实现了模块间联动。主要改进空间在于：历史回放需真正实现轨迹回溯、3D视图交互需完善、部分图表的视觉精致度和响应式适配可进一步提升。整体而言，这是一个可直接运行、具有演示价值的航空运营监控原型系统。

相关链接

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

加载中...
100%