GPT-5.2 在「响应式表格」的评测结果

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

基本信息

  • 模型名称：GPT-5.2
  • 用例名称：响应式表格
  • 测试类型：网页生成
  • 评测维度：响应式布局

系统提示词（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. 页面具备基础视觉样式（表头样式、行间距、悬停效果、按钮样式），整体布局整洁，代码有适当注释

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 响应式员工信息表格（3 种模式） /* ========================= 基础样式（全局） ========================== */ :root{ --bg: #f6f7fb; --card: #ffffff; --text: #1f2937; --muted: #6b7280; --border: #e5e7eb; --head: #eef2ff; --primary: #2563eb; --danger: #dc2626; --shadow: 0 6px 18px rgba(17, 24, 39, .08); --radius: 12px; } * { box-sizing: border-box; } body{ margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color: var(--text); background: var(--bg); } header{ padding: 20px 16px 8px; max-width: 1100px; margin: 0 auto; } h1{ font-size: 18px; margin: 0 0 12px; font-weight: 700; } main{ max-width: 1100px; margin: 0 auto; padding: 0 16px 28px; } /* ========================= Tabs（可 Tab 键切换） ========================== */ .tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .tab-btn{ appearance: none; border: 1px solid var(--border); background: var(--card); color: var(--text); padding: 10px 12px; border-radius: 999px; cursor: pointer; font-weight: 600; line-height: 1; transition: background .15s ease, border-color .15s ease, color .15s ease; } .tab-btn:hover{ border-color: #cbd5e1; } .tab-btn[aria-selected="true"]{ background: var(--primary); border-color: var(--primary); color: #fff; } .tab-btn:focus-visible{ outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px; } /* ========================= 表格容器 + 表格基础样式 ========================== */ .table-wrap{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; /* 圆角裁切 */ } /* 模式一：水平滚动容器（默认不滚动，切到模式一才启用） */ .table-scroll{ overflow-x: hidden; } table{ width: 100%; border-collapse: separate; border-spacing: 0; } thead th{ background: var(--head); text-align: left; font-weight: 700; color: #111827; border-bottom: 1px solid var(--border); padding: 12px 12px; white-space: nowrap; } tbody td{ padding: 12px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }...

AI 评审点评

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

【CLAUDE】这是一份高质量的响应式员工信息表格实现。三种响应式模式功能完整、逻辑清晰，CSS 架构以 body[data-mode] 属性选择器为核心驱动样式切换的设计思路优雅，避免了 JS 频繁操作 DOM 类名。HTML 语义化和无障碍属性使用规范，JavaScript 代码结构清晰且有安全意识（XSS 转义）。视觉设计精致，具备完整的设计系统（CSS 变量、色彩语义、交互反馈）。主要改进空间：桌面端「展开」按钮可在非模式三时通过 CSS 隐藏以提升一致性；模式三在桌面端也可考虑隐藏展开按钮列。整体而言代码质量优秀，可直接用于生产环境参考。 【GEMINI】这是一份高质量的响应式表格实现。模型不仅完全满足了所有功能需求，还在代码质量、交互体验和无障碍设计（如 aria 属性、键盘可访问性）上表现出色。代码逻辑清晰，易于维护，且无需任何外部依赖即可运行，完全符合资深前端工程师的交付标准。 【KIMI】该实现是一个高质量的响应式表格解决方案，三种模式功能完整，代码结构清晰，语义化和可访问性考虑周到。HTML/CSS/JavaScript 分区明确，注释充分，可直接在浏览器运行无需外部依赖。主要改进空间在于水平滚动模式的宽度策略优化，以及展开按钮的显示时机控制。整体达到生产可用水准，适合作为移动端表格适配的参考实现。

进阶难度评测结果

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

模型生成产物

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

```html 员工信息表格（响应式进阶版） /* ========================= Design Tokens ========================== */ :root{ --bg: #0b1220; --panel: rgba(255,255,255,.06); --panel-2: rgba(255,255,255,.08); --stroke: rgba(255,255,255,.12); --stroke-2: rgba(255,255,255,.18); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.68); --faint: rgba(255,255,255,.52); --brand: #7c5cff; --brand-2: #22c55e; --danger: #ff4d6d; --warn: #f59e0b; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --shadow-sm: 0 10px 24px rgba(0,0,0,.25); --shadow-md: 0 18px 44px rgba(0,0,0,.35); --shadow-glow: 0 0 0 1px rgba(124,92,255,.25), 0 18px 60px rgba(124,92,255,.18); --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 32px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --container: 1120px; --container-lg: 1320px; --container-xl: 1520px; --row-h: 52px; --sticky-w: 220px; --ease: cubic-bezier(.2,.8,.2,1); --dur-1: 160ms; --dur-2: 260ms; --dur-3: 420ms; } /* ========================= Base ========================== */ *{ box-sizing: border-box; } html, body{ height: 100%; } body{ margin: 0; font-family: var(--font); color: var(--text); background: radial-gradient(1200px 600px at 15% 10%, rgba(124,92,255,.22), transparent 60%), radial-gradient(900px 500px at 85% 20%, rgba(34,197,94,.14), transparent 55%), radial-gradient(900px 700px at 50% 110%, rgba(245,158,11,.10), transparent 60%), linear-gradient(180deg, #070b14 0%, #0b1220 40%, #070b14 100%); overflow-x: hidden; } a, button{ color: inherit; } button{ font: inherit; border: 0; background: none; cursor: pointer; } .app{ min-height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-5); padding: clamp(16px, 2.4vw, 28px); } .container{ width: min(var(--container), 100%); margin: 0 auto; } /*...

困难难度评测结果

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

模型生成产物

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

```html 高性能响应式员工数据表格（Container Queries + 流体排版 + Skeleton + Print） /* ========================= Design tokens / Fluid type ========================= */ :root{ color-scheme: light; --bg: #0b1220; --panel: rgba(255,255,255,.08); --panel-2: rgba(255,255,255,.10); --stroke: rgba(255,255,255,.12); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.70); --muted-2: rgba(255,255,255,.55); --accent: #7c5cff; --accent-2: #2dd4bf; --danger: #ff4d6d; --shadow: 0 18px 50px rgba(0,0,0,.35); --shadow-soft: 0 10px 24px rgba(0,0,0,.25); /* Fluid type scale */ --fs-0: clamp(.78rem, .72rem + .25vw, .92rem); /* helper */ --fs-1: clamp(.92rem, .86rem + .35vw, 1.05rem); /* body */ --fs-2: clamp(1.05rem, .98rem + .55vw, 1.25rem); /* subhead */ --fs-3: clamp(1.25rem, 1.10rem + 1.1vw, 1.75rem);/* title */ /* Fluid spacing */ --s-1: clamp(.35rem, .25rem + .6vw, .6rem); --s-2: clamp(.55rem, .45rem + .9vw, .9rem); --s-3: clamp(.75rem, .60rem + 1.2vw, 1.2rem); --s-4: clamp(1.0rem, .75rem + 1.8vw, 1.6rem); --s-5: clamp(1.25rem, .95rem + 2.4vw, 2.1rem); --radius: clamp(.7rem, .55rem + .6vw, 1rem); --radius-sm: clamp(.55rem, .45rem + .4vw, .8rem); --focus: 0 0 0 3px color-mix(in oklab, var(--accent) 55%, transparent); } *{ box-sizing: border-box; } html,body{ height:100%; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", Arial, sans-serif; background: radial-gradient(1200px 700px at 20% 0%, rgba(124,92,255,.35), transparent 60%), radial-gradient(900px 600px at 90% 20%, rgba(45,212,191,.22), transparent 55%), linear-gradient(180deg, #070b14, #0b1220 40%, #070b14); color: var(--text); font-size: var(--fs-1); line-height: 1.45; } a{ color: inherit; } .app{ max-width: 1100px; margin: 0 auto; padding: var(--s-5) var(--s-3); } header{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--s-3); margin-bottom: var(--s-3); } .title{ display:flex; flex-direction:column; gap:...

AI 评审点评

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

【CLAUDE】这是一份技术深度和完成度都极高的实现。代码在单一 HTML 文件中完整实现了所有要求：三种响应式策略均功能完整且交互流畅，Container Queries 被正确用于组件级响应式（而非仅视口查询），流体排版系统通过 CSS 自定义属性和 clamp() 函数构建完整，骨架屏 shimmer 动画效果良好，打印样式覆盖全面。视觉设计现代且精致，无障碍属性覆盖完备。主要可改进点：骨架屏可针对不同模式提供对应结构；移动端 tooltip 可用自定义实现替代 title 属性；列隐藏模式中操作按钮与展开触发区域的交互边界处理可进一步优化。整体而言，这是一份接近生产级别的高质量代码，充分展示了前端架构师对现代 CSS 特性的掌握。 【GEMINI】这是一份高质量的响应式前端实现方案。模型不仅完美覆盖了所有技术细节要求，还在代码架构、交互体验及无障碍性方面表现出极高的专业度。代码结构清晰，CSS 现代特性（如 Container Queries, clamp, color-mix）运用娴熟，是一个可以直接用于生产环境参考的优秀组件示例。 【KIMI】该实现是高质量的前端工程范例，完整满足了 Hard 级别的所有技术要求。Container Queries 与流体排版的结合展示了现代 CSS 架构能力，三种响应式模式各具特色且交互细节考究。代码结构清晰、注释规范、无障碍考虑周全，可直接作为生产环境参考实现。建议在骨架屏行数匹配、色彩对比度优化方面进一步提升。

相关链接

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

加载中...
100%