MiniCPM-V-4.7-35B-A3B 在「响应式表格」的评测结果

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

基本信息

  • 模型名称：MiniCPM-V-4.7-35B-A3B
  • 用例名称：响应式表格
  • 测试类型：网页生成
  • 评测维度：响应式布局

系统提示词（System Prompt）

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

你是一名资深前端工程师，专注于 HTML/CSS/JavaScript 的标准化实现与跨设备兼容性。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，可直接在浏览器中运行，无需任何外部依赖。 2. 优先保证代码的语义化与可读性，使用清晰的注释说明关键逻辑。 3. 使用传统 Media Queries 实现响应式布局，断点设计合理（移动端 ≤768px，桌面端 >768px）。 4. 确保三种响应式模式（水平滚动、卡片、列隐藏）功能完整且可通过 Tab 正确切换。 5. 代码结构清晰，HTML 结构、CSS 样式、JavaScript 逻辑分区明确。

用户提示词（User Prompt）

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

请生成一个响应式员工信息表格页面，所有代码（HTML、CSS、JavaScript）写在同一个 HTML 文件中，可直接在浏览器运行。 ## 表格数据 员工信息表，包含 10 行示例数据，列字段如下： ID、姓名、部门、职位、邮箱、电话、入职日期、操作（编辑/删除按钮） ## 功能要求 页面顶部提供三个 Tab 按钮，用于切换以下三种响应式模式： ### 模式一：水平滚动模式 - 表格保持固定宽度，不压缩列宽 - 表格容器允许水平滚动（overflow-x: auto） - 第一列（ID 列）固定在左侧，不随滚动移动（position: sticky） ### 模式二：卡片模式 - 桌面端：正常表格展示 - 移动端（≤768px）：每一行数据转换为独立卡片 - 卡片内每个字段以「列名：数据」的形式展示（使用 data-label 属性配合 CSS 实现） - 卡片垂直堆叠排列，卡片间有间距 ### 模式三：列隐藏模式 - 桌面端：正常表格展示所有列 - 移动端（≤768px）：仅显示 ID、姓名、部门、操作 等主要列，隐藏邮箱、电话、入职日期等次要列 - 每行提供「展开」按钮，点击后在行下方显示被隐藏的列信息 - 再次点击可折叠 ## 技术要求 - 使用语义化 HTML 标签（table、thead、tbody、th、td 等） - 使用 CSS Media Queries 实现响应式，主断点为 768px - JavaScript 仅用于 Tab 切换逻辑和列隐藏模式的展开/折叠交互 - 页面需有基本的视觉样式（表头背景色、行悬停效果、按钮样式） - 代码添加必要注释，结构清晰易读

任务要求

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

  1. HTML 结构语义化，正确使用 table 相关标签，三种模式的表格结构完整，包含全部 8 列及 10 行数据
  2. Tab 切换功能正确实现，点击不同 Tab 时对应模式内容显示，其余模式隐藏，激活状态有视觉区分
  3. 水平滚动模式中，容器可水平滚动，第一列通过 position:sticky 固定，在移动端和桌面端均可验证效果
  4. 卡片模式在移动端（≤768px）正确将表格行转换为卡片布局，使用 data-label 或伪元素显示列名标签
  5. 列隐藏模式在移动端隐藏次要列，展开/折叠按钮交互正常，展开后能显示被隐藏的字段信息
  6. 页面具备基础视觉样式（表头样式、行间距、悬停效果、按钮样式），整体布局整洁，代码有适当注释

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 响应式员工信息表格 /* 全局样式 */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f7fa; color: #333; line-height: 1.6; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; } h1 { text-align: center; margin-bottom: 20px; color: #2c3e50; } /* Tab 按钮样式 */ .tab-container { display: flex; justify-content: center; margin-bottom: 20px; gap: 10px; flex-wrap: wrap; } .tab-btn { padding: 10px 20px; border: none; background-color: #e0e0e0; color: #333; cursor: pointer; border-radius: 4px; transition: all 0.3s ease; font-weight: 500; } .tab-btn:hover { background-color: #d0d0d0; } .tab-btn.active { background-color: #3498db; color: white; } /* 表格通用样式 */ .table-wrapper { overflow: hidden; border-radius: 4px; border: 1px solid #eee; } table { width: 100%; border-collapse: collapse; min-width: 600px; } thead { background-color: #3498db; color: white; } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; } tbody tr:hover { background-color: #f8f9fa; } /* 操作按钮样式 */ .action-btn { padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; font-size: 12px; margin-right: 5px; transition: background-color 0.2s; } .edit-btn { background-color: #2ecc71; color: white; } .edit-btn:hover { background-color: #27ae60; } .delete-btn { background-color: #e74c3c; color: white; } .delete-btn:hover { background-color: #c0392b; } .expand-btn { background-color: #9b59b6; color: white; padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; font-size: 12px; } /* 模式一：水平滚动模式 */ .mode-scroll .table-wrapper { overflow-x: auto; } .mode-scroll .table-wrapper table { min-width: 800px; } .mode-scroll .sticky-col { position: sticky; left: 0; background-color: #3498db; z-index: 10; } .mode-scroll tbody .sticky-col { background-color: white; } /* 模式二：卡片模式 */...

AI 评审点评

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

【CLAUDE】该产出在数据完整性、语义化标签、基础样式与 Tab 切换主流程上达到了及格线以上的水平，但最核心的响应式能力存在方向性错误：卡片模式的媒体查询逻辑被写反，列隐藏模式所需的类名从未落到 HTML 上因而完全失效，加上展开行在滚动/卡片模式下默认常驻、表头首列未固定，三条响应式路径中只有「水平滚动」基本可用。建议把卡片样式移入 `@media (max-width: 768px)`、给次要列的 td 实际添加 `hidden-col`/`collapsed` 类并理顺其显隐语义、把 `.expand-row` 的默认隐藏提升为全局规则、并将 `sticky-col` 同时应用到表头 th。综合三个维度加权，距离需求描述仍有一定差距。 【GEMINI】候选输出完整实现了单 HTML 文件交付、10 行示例数据以及 Tab 切换骨架。然而，核心的移动端适配存在严重逻辑错误：卡片模式在桌面端与移动端的 CSS 断点规则颠倒，导致桌面端呈现卡片而移动端变回表格；列隐藏模式因 HTML 缺失 class 而导致次要列在移动端无法隐藏；水平滚动模式表头第一列未做固定。虽然界面视觉和基础 JS 逻辑合格，但核心响应式功能未能达到预期要求。 【KIMI】该实现具备完整的基础框架和视觉样式，三种模式的Tab切换框架已搭建，但卡片模式的Media Query逻辑完全颠倒（桌面端显示卡片、移动端显示表格），加上列隐藏模式缺少关键的hidden-col类应用，导致核心响应式功能存在严重缺陷。若修复卡片模式的@media逻辑、补充hidden-col类到对应td元素、并确保sticky-col覆盖th元素，即可达到合格标准。

进阶难度评测结果

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

模型生成产物

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

```html 响应式员工信息表格（进阶版） /* ==================== Design Tokens ==================== */ :root { --primary-color: #4f46e5; --primary-hover: #4338ca; --secondary-color: #64748b; --bg-color: #f8fafc; --card-bg: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border-color: #e2e8f0; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --transition-fast: 0.2s ease; --transition-smooth: 0.3s ease; /* Department Colors */ --dept-tech: #dbeafe; --dept-tech-text: #1e40af; --dept-product: #dcfce7; --dept-product-text: #166534; --dept-design: #f3e8ff; --dept-design-text: #7c3aed; --dept-marketing: #fef3c7; --dept-marketing-text: #92400e; --dept-hr: #fee2e2; --dept-hr-text: #991b1b; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; padding: 20px; } .container { max-width: 1440px; margin: 0 auto; } /* ==================== Header & Stats ==================== */ header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } h1 { font-size: 1.8rem; font-weight: 700; color: var(--text-main); } .stats { background: var(--card-bg); padding: 8px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); font-weight: 600; color: var(--primary-color); } /* ==================== Tab Navigation ==================== */ .tab-container { display: flex; gap: 8px; margin-bottom: 24px; background: var(--card-bg); padding: 6px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); width: fit-content; } .tab-btn { padding: 10px 20px; border: none; background: transparent; color: var(--text-muted); font-weight: 600;...

AI 评审点评

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

【CLAUDE】代码在结构、token 化、三种模式的骨架和 JS 组织上都体现了合格的工程意识，Tab 切换、accordion 高度过渡、data-label 标签、badge 配色、自定义滚动条等要求基本落地。但存在三处影响可用性的缺陷：水平滚动模式两个 sticky 列同为 left:0 相互覆盖，卡片模式桌面端 8 列外层网格把卡片压扁导致布局崩坏，以及 Tab 的淡入动画因 display 切换而实际不生效；此外大屏断点缺失、模式三手机端收起态残留空盒子、断点边界值归属不清。若修复 sticky 的 left 偏移与列宽、将桌面卡片改为「表头 + 单列 grid 行」的真表格结构、用 opacity/visibility 或 requestAnimationFrame 保证淡入可执行、补齐 >1440px 层级，整体质量可显著上一个档次。 【GEMINI】生成代码结构清晰，设计规范完整，包含了完整的 10 条模拟数据、部门 Badge 标签体系以及三个模式的切换架构。但在具体响应式策略细节上出现了两处明显的布局 Bug（两列 sticky 设置相同 left 导致重叠、卡片模式桌面端 Grid 嵌套破坏），且利用 display 切换导致 Tab 淡入动画失效，需要进一步修复 CSS 样式以确保真实渲染效果。 【KIMI】该实现完成了三种响应式模式的基础框架，CSS 变量体系和基础样式较为规范，但在核心功能细节上存在多处'差一口气'的问题：卡片模式桌面端的错误重构、列隐藏模式 accordion 的结构缺陷、Tab 过渡动画的实现瑕疵等。这些问题导致代码无法稳定满足任务规格中的响应式行为要求，尤其在移动端和断点切换时体验受损。建议在实现复杂响应式表格时，更严格地遵循'渐进增强'原则，确保每种模式在目标断点下的行为可预测，并加强 DOM 结构与视觉表现的解耦。

困难难度评测结果

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

模型生成产物

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

```html 高性能响应式员工数据表格 /* ========================================= 1. CSS 自定义属性与流体排版系统 ========================================= */ :root { --color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-bg: #f3f4f6; --color-surface: #ffffff; --color-text-main: #1f2937; --color-text-secondary: #6b7280; --color-border: #e5e7eb; --color-shadow: rgba(0, 0, 0, 0.1); /* 流体字体比例尺 */ --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --font-size-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --font-size-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem); --font-size-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem); /* 流体间距 */ --space-sm: clamp(0.5rem, 0.4rem + 0.25vw, 0.75rem); --space-md: clamp(0.75rem, 0.6rem + 0.5vw, 1rem); --space-lg: clamp(1rem, 0.8rem + 0.75vw, 1.5rem); --radius-md: 0.5rem; --radius-lg: 0.75rem; --shadow-sm: 0 1px 2px var(--color-shadow); --shadow-md: 0 4px 6px -1px var(--color-shadow); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--color-bg); color: var(--color-text-main); line-height: 1.6; padding: var(--space-lg); } .container { max-width: 1200px; margin: 0 auto; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } /* ========================================= 2. 骨架屏样式 (Shimmer Effect) ========================================= */ .skeleton-screen { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); animation: fadeIn 0.3s ease-out; } .skeleton-header { height: clamp(2rem, 1.5rem + 1vw, 3rem); background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite linear; border-radius: var(--radius-md); width: 30%; } .skeleton-row { display: flex; gap: var(--space-md); align-items: center; }...

AI 评审点评

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

【CLAUDE】整体是一份结构清晰、覆盖面广的实现，三种响应式模式的骨架、Container Queries 与 clamp() 流体排版、shimmer 骨架屏、打印样式与页眉日期均已具备，Tab 切换与渲染逻辑可运行。主要问题集中在细节正确性上：卡片模式窄容器回退规则是非法 CSS 被直接丢弃、320px 断点引用未定义的 --space-xs、卡片网格在 320px 下存在溢出裁切、列隐藏动画施加在 <tr> 上、滚动阴影显示逻辑与直觉相反、打印时三种模式内容重复输出并破坏表格行结构，以及完全缺失 text-overflow: ellipsis 截断和若干 ARIA 关联错误。按 Hard 级标准衡量，方向正确但工程完成度与鲁棒性仍有较明显差距。 【GEMINI】生成代码完整度高，单文件即可直接运行，高质量地实现了流体排版、骨架屏加载、Tab 切换和三种响应式策略。核心扣分点集中在两处技术细节：一是卡片模式中书写了非法的 `:not(:where(@container ...))` CSS 选择器；二是文本截断未实际生效（缺少 text-overflow: ellipsis 等样式）。整体仍不失为一份架构清晰、工程化考量全面的前端实现。 【KIMI】该实现作为Hard级别任务整体处于及格边缘，三种响应式模式的核心概念都已覆盖但执行层面问题较多。主要短板在于：Container Queries的降级语法错误、超长文本截断功能缺失、320px适配不够彻底。骨架屏和打印样式基本可用但细节粗糙。代码组织清晰，单HTML文件结构良好，但工程严谨性（如sticky列偏移计算、XSS防护、CSS语法有效性）与Hard级别要求存在差距。建议优先修复CSS语法错误、补充text-overflow处理、完善极小屏幕测试。

相关链接

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

加载中...
100%