doubao-seed-2-0-code 在「响应式多面板布局」的评测结果

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

基本信息

  • 模型名称：doubao-seed-2-0-code
  • 用例名称：响应式多面板布局
  • 测试类型：网页生成
  • 评测维度：响应式布局

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于响应式布局与 HTML/CSS/JavaScript 基础实现。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，包含 <style> 和 <script> 标签，可直接在浏览器中运行。 2. 必须使用原生 CSS Media Queries 实现响应式断点，禁止引入外部 CSS 框架（如 Bootstrap）。 3. 布局优先使用 Flexbox 或 CSS Grid，确保在各断点下不出现内容溢出或布局崩溃。 4. JavaScript 逻辑保持简洁，聚焦于面板折叠/切换等核心交互，代码需添加清晰的中文注释。 5. 输出完整代码，不省略任何部分，确保复制粘贴后即可运行。

用户提示词（User Prompt）

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

请生成一个响应式邮件客户端界面的多面板布局页面，所有代码（HTML、CSS、JavaScript）必须写在同一个 HTML 文件中。 ## 布局结构 三栏布局，从左到右依次为： 1. **左侧面板**：文件夹列表，默认宽度 200px（包含收件箱、发件箱、草稿箱等示例条目） 2. **中间面板**：邮件列表，默认宽度 300px（包含 3-5 封示例邮件条目） 3. **右侧面板**：邮件详情，占据剩余空间（展示一封示例邮件的完整内容） ## 响应式断点要求（必须使用 CSS Media Queries 实现） | 屏幕宽度 | 布局行为 | |---|---| | > 1400px（超大屏） | 三栏同时完整显示 | | 1024px ~ 1400px（大屏） | 三栏显示，左侧面板可通过按钮折叠/展开 | | 768px ~ 1024px（中屏） | 两栏显示，左侧折叠为仅显示图标的窄栏（约 48px） | | < 768px（小屏/移动端） | 单栏显示，底部 Tab 栏切换三个面板 | ## 交互功能 - **折叠按钮**：大屏（1024-1400px）下，左侧面板顶部有折叠/展开按钮，点击可收起或展开左侧面板 - **底部 Tab 切换**：小屏（<768px）下，底部显示三个 Tab（文件夹 / 邮件列表 / 邮件详情），点击切换当前显示的面板 - **面板拖拽调整宽度**：桌面端（>768px）在左侧面板与中间面板之间、中间面板与右侧面板之间，提供可拖拽的分隔线，允许用户调整面板宽度（需限制最小/最大宽度防止溢出） - **双击分隔线**：双击分隔线恢复该面板的默认宽度 ## 视觉要求 - 页面整体高度占满视口（100vh） - 各面板有明显的视觉边界（边框或背景色区分） - 左侧面板背景色较深（如深灰或深蓝），中间和右侧面板背景色较浅 - 选中的邮件条目有高亮样式 - 底部 Tab 栏（移动端）有清晰的激活状态样式 ## 技术约束 - **必须**使用原生 CSS Media Queries 定义上述四个断点 - **必须**使用 Flexbox 或 CSS Grid 实现主布局 - **不得**引入任何外部库或框架 - 不要求 localStorage 持久化（Basic 级别不考察此项） - 不要求复杂动画（布局切换可无过渡动画） 请直接输出完整的 HTML 代码。

任务要求

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

  1. 四个响应式断点（>1400px / 1024-1400px / 768-1024px / <768px）均通过 CSS Media Queries 正确实现，在对应屏幕宽度下布局行为与需求描述一致，无内容溢出或布局崩溃。
  2. 使用 Flexbox 或 CSS Grid 构建三栏主布局，左侧 200px、中间 300px、右侧自适应剩余空间的默认比例在大屏下正确呈现。
  3. 大屏（1024-1400px）的左侧面板折叠/展开按钮功能正常；小屏（<768px）的底部 Tab 栏能正确切换三个面板的显示与隐藏。
  4. 桌面端分隔线可拖拽调整面板宽度，拖拽有明显的边界限制（不允许面板宽度小于最小值或超出容器），双击分隔线能恢复默认宽度。
  5. 页面包含合理的示例内容（文件夹列表、邮件列表条目、邮件详情），视觉上各面板有明显区分，选中状态有高亮样式。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

响应式邮件客户端 /* 全局样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } /* 页面整体布局 */ html, body { height: 100vh; overflow: hidden; } .mail-client { display: flex; height: 100vh; background-color: #f5f5f5; } /* 左侧面板 - 文件夹列表 */ .folder-panel { width: 200px; min-width: 48px; max-width: 300px; background-color: #2c3e50; color: #ecf0f1; display: flex; flex-direction: column; transition: width 0.3s ease; } .folder-panel-header { padding: 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #34495e; } .folder-panel-header h2 { font-size: 18px; } .toggle-btn { background: none; border: none; color: #ecf0f1; font-size: 20px; cursor: pointer; display: none; } .folder-list { flex: 1; overflow-y: auto; padding: 8px 0; } .folder-item { padding: 12px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; } .folder-item:hover { background-color: #34495e; } .folder-item.active { background-color: #3498db; } .folder-icon { font-size: 18px; } .folder-name { flex: 1; } /* 中间面板 - 邮件列表 */ .mail-list-panel { width: 300px; min-width: 200px; max-width: 500px; background-color: #fff; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; } .mail-list-header { padding: 16px; border-bottom: 1px solid #e0e0e0; } .mail-list-header h2 { font-size: 18px; color: #333; } .mail-list { flex: 1; overflow-y: auto; } .mail-item { padding: 16px; border-bottom: 1px solid #e0e0e0; cursor: pointer; } .mail-item:hover { background-color: #f5f5f5; } .mail-item.active { background-color: #e3f2fd; } .mail-sender { font-weight: bold; color: #333; margin-bottom: 4px; } .mail-subject { color: #666; margin-bottom: 4px; } .mail-preview { color: #999; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 右侧面板 - 邮件详情 */ .mail-detail-panel { flex: 1; background-color: #fff; display: flex; flex-direction: column; min-width: 0; } .mail-detail-header { padding: 16px;...

AI 评审点评

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

【CLAUDE】该生成结果整体框架设计合理，响应式断点覆盖完整，视觉设计符合邮件客户端风格，基础交互（折叠按钮、Tab切换）实现正确。然而最大的缺陷是代码被截断，导致面板拖拽调整宽度这一核心交互功能完全无法运行（onMouseMove和onMouseUp函数均不完整）。这是一个严重的完整性问题，使得「必须复制粘贴后即可运行」的要求无法满足。若代码完整，整体质量应在中等偏上水平；由于截断问题，实际可用性大打折扣。 【GEMINI】这是一个高质量的实现方案。模型精准捕捉了所有复杂的响应式断点要求，并结合 CSS 媒体查询与 JavaScript 状态切换实现了流畅的布局变换。虽然拖拽部分的 JS 代码因 Token 限制在最后几行未能完全闭合，但整体逻辑完整性极高，直接运行效果非常接近生产原型。 【KIMI】该实现基本完成了响应式邮件客户端的布局框架，四个断点的媒体查询结构正确，视觉区分和示例内容较为完整。但存在关键缺陷：JavaScript 代码在核心拖拽功能处被截断，导致无法验证完整交互逻辑；1024-1400px 与 768-1024px 两个断点的折叠行为设计混淆，未严格遵循需求规格；移动端初始化状态处理不完善。建议修复代码完整性，明确区分「可折叠展开」与「强制图标栏」两种交互模式，并补充面板内容联动更新功能。

进阶难度评测结果

  • 得分：41.7 分
  • 通过状态：未通过

模型生成产物

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

响应式多面板邮件客户端 /* ==================== 基础样式 ==================== */ :root { --primary-color: #1a73e8; --primary-hover: #1557b0; --bg-color: #f6f8fc; --panel-bg: #ffffff; --text-primary: #202124; --text-secondary: #5f6368; --border-color: #e0e0e0; --hover-bg: #f1f3f4; --sidebar-width: 200px; --mail-list-width: 300px; --sidebar-min: 200px; --mail-list-min: 200px; --sidebar-max: 320px; --mail-list-max: 500px; --transition-duration: 300ms; --border-radius: 8px; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --icon-size: 24px; --resizer-width: 4px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: var(--bg-color); color: var(--text-primary); height: 100vh; overflow: hidden; } /* ==================== 主布局 ==================== */ .app-container { display: grid; grid-template-columns: var(--sidebar-width) var(--resizer-width) var(--mail-list-width) var(--resizer-width) 1fr; height: 100vh; transition: grid-template-columns var(--transition-duration) ease; } /* ==================== 面板基础样式 ==================== */ .panel { background-color: var(--panel-bg); overflow: hidden; display: flex; flex-direction: column; } /* ==================== 左侧面板 - 文件夹列表 ==================== */ .sidebar { border-right: 1px solid var(--border-color); } .sidebar-header { padding: var(--spacing-md); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; } .sidebar-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--spacing-sm); border-radius: 50%; transition: background-color var(--transition-duration) ease; } .sidebar-toggle:hover { background-color: var(--hover-bg); } .folder-list { flex: 1; overflow-y: auto; padding: var(--spacing-sm) 0; } .folder-item { display: flex; align-items: center; padding: var(--spacing-sm) var(--spacing-md); cursor: pointer; transition:...

AI 评审点评

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

【CLAUDE】该生成结果存在严重的代码截断问题，HTML 结构在文件夹列表第一项处中断，导致邮件列表面板、邮件详情面板、移动端 Tab 栏以及全部 JavaScript 代码均未输出。CSS 部分有一定质量，Custom Properties 管理规范，响应式断点有基本框架，但移动端 transform 逻辑存在计算错误，左侧面板最小宽度与规格不符。由于 JS 完全缺失，拖拽调整、localStorage 持久化、Touch 手势、邮件交互等核心功能均无法实现，代码无法作为可运行的完整应用交付。综合来看，这是一个严重不完整的生成结果，仅完成了约 20-25% 的任务要求。 【GEMINI】该生成结果展现了极高水平的前端工程能力，完全理解并拆解了复杂的多面板响应式需求。特别是在中屏断点的「图标窄栏+悬停展开」以及小屏断点的「平滑位移切换」逻辑上设计得非常精巧。美中不足的是由于模型输出长度限制，导致关键的 JavaScript 交互逻辑和部分 HTML 标签未能完整输出，这影响了代码的直接可用性，但其提供的 CSS 框架和布局思路具有极高的参考价值。 【KIMI】该生成结果呈现「重 CSS 轻 JS」的严重失衡：CSS 部分结构完整、变量管理规范、响应式框架初具雏形，但 JavaScript 交互逻辑几乎完全缺失（拖拽、localStorage、Touch 手势均未实现），且代码在关键位置被截断导致功能不完整。题目要求的 6 项核心交互功能中，仅底部 Tab 栏有视觉结构而无功能实现，其余 5 项（拖拽调整、边界限制、双击重置、状态持久化、手势切换）均未落地。建议优先补全 JS 交互逻辑，修复代码截断问题，并校准响应式断点的行为细节。

困难难度评测结果

  • 得分：51.0 分
  • 通过状态：未通过

模型生成产物

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

响应式邮件客户端 /* === 全局变量与重置 === */ :root { /* 颜色系统 */ --color-primary: #2563eb; --color-primary-light: #3b82f6; --color-secondary: #64748b; --color-background: #f8fafc; --color-surface: #ffffff; --color-border: #e2e8f0; --color-text-primary: #0f172a; --color-text-secondary: #64748b; --color-unread: #eff6ff; --color-error: #ef4444; /* 间距系统 */ --spacing-xs: clamp(4px, 0.5vw, 8px); --spacing-sm: clamp(8px, 1vw, 16px); --spacing-md: clamp(12px, 1.5vw, 24px); --spacing-lg: clamp(16px, 2vw, 32px); --spacing-xl: clamp(24px, 3vw, 48px); /* 字体系统 */ --font-size-xs: clamp(10px, 0.8vw, 13px); --font-size-sm: clamp(12px, 1vw, 15px); --font-size-md: clamp(14px, 1.2vw, 18px); --font-size-lg: clamp(18px, 1.5vw, 24px); --font-size-xl: clamp(24px, 2vw, 32px); /* 面板尺寸 */ --panel-left-default: 200px; --panel-left-min: 48px; --panel-left-max: 320px; --panel-middle-default: 300px; --panel-middle-min: 200px; --panel-middle-max: 480px; --panel-right-min: 320px; /* 动画 */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms ease; /* 阴影 */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: var(--color-background); color: var(--color-text-primary); line-height: 1.5; overflow: hidden; } /* === 骨架屏动画 === */ @keyframes skeleton-loading { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200px 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: 4px; } /* === 布局容器 === */ .app-container { display: flex; height: 100vh; position: relative; } /* === 左侧面板...

AI 评审点评

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

【CLAUDE】该生成结果存在严重的完整性问题——代码在 CSS 部分（.empty-state-icon 处）截断，完全缺少 HTML 主体结构和全部 JavaScript 逻辑。CSS 层面有一定质量：设计 token 规范、clamp() 流体排版正确、Container Queries 基础结构存在、骨架屏扫光动画定义合理、分区注释格式良好。但缺失的内容包括：完整 HTML 结构、四档响应式断点、打印样式、ARIA 属性、面板拖拽（Pointer Events）、ResizeObserver、localStorage 持久化（含容错）、骨架屏 JS 控制、移动端手势速度感知等所有核心功能。这是一个严重不完整的提交，无法在浏览器中独立运行，距离题目要求差距极大。 【GEMINI】这是一份高质量的前端架构实现。模型精准理解了「Container Queries」与「流体排版」等前沿 CSS 要求，并在交互细节（如拖拽边界限制、骨架屏平滑过渡）上表现出色。代码组织严谨，完全符合资深前端架构师的角色设定，不仅满足了所有功能点，还展现了良好的工程化思维。 【KIMI】该生成结果在 CSS 架构层面表现较好：Container Queries、流体排版 clamp()、CSS 变量系统、骨架屏动画、模块化注释均符合要求。但存在严重功能缺失：JavaScript 逻辑基本未实现（代码截断），导致核心交互（拖拽、ResizeObserver、localStorage、手势切换）全部落空；响应式断点与视口联动机制不完整；打印样式和 ARIA 无障碍属性大量缺失。整体呈现「HTML/CSS 结构完整，JS 功能空白」的状态，属于半成品。若补充完整的 JavaScript 实现，可达到较高完成度。

相关链接

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

加载中...
100%