doubao-seed-2-1-pro 在「金融交易大屏」的评测结果

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

基本信息

  • 模型名称：doubao-seed-2-1-pro
  • 用例名称：金融交易大屏
  • 测试类型：网页生成
  • 评测维度：数据看板

系统提示词（System Prompt）

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

你是一名资深的前端开发工程师，专注于金融数据可视化和大屏展示系统的设计与实现。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，通过 CDN 引入所需第三方库（如 ECharts 5.x） 2. 必须包含模拟数据生成器，使用 JavaScript 生成静态或简单动态的金融数据以展示真实效果 3. 采用深色科技感主题（深蓝/黑色背景），配色符合金融专业审美，布局清晰合理 4. 代码结构清晰，HTML/CSS/JS 各司其职，注释完整，确保代码可独立运行 5. 图表和数据展示需具备基本的视觉完整性，涨跌颜色使用红涨绿跌（A股惯例）

用户提示词（User Prompt）

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

创建一个金融交易监控大屏，所有代码（HTML、CSS、JavaScript）必须在一个 HTML 文件中，直接输出完整的、可独立运行的 HTML 代码。 **功能要求：** 1. **页面整体布局**：采用深色科技感主题（深蓝或黑色背景），顶部显示大屏标题、当前日期时间（每秒刷新），整体使用栅格布局划分四个主要区域。 2. **股票实时行情展示区**：以表格形式展示至少 8 支股票的模拟行情数据，包含字段：股票代码、股票名称、当前价格、涨跌额、涨跌幅（%）、成交量。涨跌颜色用红色表示上涨、绿色表示下跌。 3. **K 线图表区域**：使用 ECharts 绘制一支示例股票（如「沪深300」）最近 30 个交易日的 K 线图，包含基本的开盘、收盘、最高、最低四个价格维度，数据使用静态模拟数据。 4. **涨跌幅排行榜**：分别展示涨幅前 5 名和跌幅前 5 名的股票列表，以条形进度条可视化涨跌幅大小，颜色区分涨跌。 5. **交易量统计图**：使用 ECharts 绘制柱状图，展示当日各时间段（如 9:30 至 15:00，每小时一个区间）的模拟成交量分布。 **技术要求：** - 通过 CDN 引入 ECharts 5.x - 模拟数据在 JavaScript 中硬编码或通过简单随机函数生成 - 页面需在 1920×1080 分辨率下布局完整，各区域无明显错位

任务要求

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

  1. 页面采用深色主题，整体布局划分为至少四个功能区域（行情表格、K线图、排行榜、成交量图），各区域边界清晰，视觉层次合理
  2. 股票行情表格包含不少于 6 个数据字段，至少展示 8 条模拟数据，涨跌颜色（红涨绿跌）正确应用
  3. K 线图使用 ECharts 正确渲染，包含完整的四价（开/高/低/收）数据，不少于 20 个交易日数据点，图表有标题和坐标轴标签
  4. 涨跌幅排行榜同时展示涨幅榜和跌幅榜，使用可视化进度条或图形元素区分大小，颜色与涨跌语义一致
  5. 交易量统计使用柱状图展示，时间轴标签清晰，图表可正常渲染无报错
  6. 顶部包含实时时钟（每秒更新）或页面标题，整体无明显布局错乱或内容溢出

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 金融交易监控大屏 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', sans-serif; background: linear-gradient(135deg, #0a1929 0%, #0f172a 100%); color: #e2e8f0; width: 100vw; height: 100vh; overflow: hidden; } /* 头部样式 */ .header { height: 80px; background: rgba(15, 23, 42, 0.8); border-bottom: 1px solid rgba(59, 130, 246, 0.3); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .header h1 { font-size: 32px; font-weight: bold; background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 4px; } .header .time { position: absolute; right: 40px; font-size: 18px; color: #94a3b8; } /* 主体栅格布局 */ .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; padding: 20px; height: calc(100vh - 80px); } /* 卡片通用样式 */ .card { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 8px; padding: 16px; box-shadow: 0 0 20px rgba(59, 130, 246, 0.1); display: flex; flex-direction: column; } .card-title { font-size: 18px; font-weight: bold; color: #60a5fa; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid #3b82f6; } /* 股票表格样式 */ .stock-table { width: 100%; flex: 1; border-collapse: collapse; font-size: 14px; } .stock-table th { background: rgba(59, 130, 246, 0.1); color: #94a3b8; padding: 10px; text-align: right; font-weight: normal; border-bottom: 1px solid rgba(59, 130, 246, 0.2); } .stock-table th:first-child, .stock-table th:nth-child(2) { text-align: left; } .stock-table td { padding: 10px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .stock-table td:first-child, .stock-table td:nth-child(2) { text-align: left; } .stock-table tr:hover { background: rgba(59, 130, 246, 0.05); } .up { color: #ef4444; } .down { color: #22c55e; } /* 图表容器 */...

AI 评审点评

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

【GEMINI】这是一个非常优秀且专业的金融大屏生成结果。代码结构清晰，通过单个 HTML 文件实现了复杂的栅格布局、多类型的 ECharts 图表以及动态数据更新逻辑。视觉上具有极强的“科技感”和“专业感”，功能上完全覆盖了行情监控、K线走势、排行榜和成交量统计等核心业务模块，且细节处理（如 A 股交易时间段、红涨绿跌配色、数据波动模拟）非常到位。

进阶难度评测结果

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

模型生成产物

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

以下是根据您的要求设计和实现的专业金融交易监控大屏完整代码： ```html 专业金融交易监控大屏 * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-primary: #0a0e17; --bg-secondary: #0d1117; --bg-card: #131a24; --border-color: #1e2d3d; --text-primary: #e6edf3; --text-secondary: #8b949e; --accent-cyan: #00d4ff; --accent-green: #00ff88; --accent-red: #ff4757; --accent-yellow: #ffa502; --accent-blue: #3498db; } body { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } /* 顶部标题栏 */ .header { background: linear-gradient(180deg, #0d1520 0%, #0a0e17 100%); border-bottom: 1px solid var(--border-color); padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; position: relative; } .header::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); } .header-title { font-size: 28px; font-weight: 700; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 4px; } .header-info { display: flex; gap: 30px; align-items: center; } .market-status { display: flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; } .market-status.open { background: rgba(0, 255, 136, 0.15); color: var(--accent-green); border: 1px solid var(--accent-green); } .market-status.closed { background: rgba(255, 71, 87, 0.15); color: var(--accent-red); border: 1px solid var(--accent-red); } .status-dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 2s infinite; } .market-status.open .status-dot { background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); } .market-status.closed .status-dot { background: var(--accent-red); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity:...

AI 评审点评

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

【CLAUDE】该候选输出整体质量较高，在单HTML文件内完整实现了金融交易监控大屏的全部7个功能模块。视觉设计专业，深色科技感主题统一，ECharts图表配置完整且类型选择恰当（蜡烛图、环形图、矩形树图）。数据驱动逻辑清晰，MACD/RSI算法实现正确，联动交互流畅。代码结构分层清晰（配置区、数据生成区、图表渲染区、UI更新区、初始化区），注释到位。存在少量边界情况处理不足（空列表、tooltip取值bug、极端屏幕尺寸）但不影响主体功能使用，整体达到专业级别的实现水准。 【GEMINI】该生成结果是一份高质量的金融前端开发范例。它不仅满足了所有功能性要求，还在代码结构、金融业务逻辑模拟（如 MACD/RSI 指标计算逻辑）以及 UI/UX 细节上展现了资深工程师的水准。代码完整且独立运行无误，是极佳的交付物。 【KIMI】该金融交易监控大屏整体实现质量较高，代码结构清晰，HTML/CSS/JS职责分明，关键逻辑有注释。作为单HTML文件通过CDN引入ECharts，完全满足技术约束。7大功能模块全部实现，视觉风格专业，交互流畅。主要不足在于：部分需求细节未完全覆盖（如颜色配置切换、K线辅助线、更严格的图表联动），以及自选股管理的边界情况处理。代码中存在HTML实体编码（<等）在最终输出中已正确渲染为实际字符，不影响功能。

相关链接

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

加载中...
100%