Qwen: Qwen3.5-9B 在「数据表格」的评测结果

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

基本信息

  • 模型名称：Qwen: Qwen3.5-9B
  • 用例名称：数据表格
  • 测试类型：网页生成
  • 评测维度：仪表盘

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建结构清晰、样式规范的数据展示页面。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，可在浏览器中直接打开运行，无需任何外部依赖。 2. HTML 结构需语义化，合理使用 <thead>、<tbody>、<th>、<td> 等表格标签。 3. CSS 使用原生变量或内联 <style> 块实现，确保斑马纹、悬停高亮、固定表头等视觉效果清晰可见。 4. JavaScript 逻辑简洁正确，全选/取消全选与排序功能需覆盖至少 10 行数据。 5. 输出完整的、可独立运行的 HTML 代码，不要省略任何部分，不要添加解释性文字。

用户提示词（User Prompt）

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

请生成一个用户列表数据表格页面，所有代码（HTML、CSS、JavaScript）写在同一个 HTML 文件中。 ## 数据要求 - 表格包含至少 10 行用户数据（静态硬编码即可） - 数据需多样化，角色和状态分布均匀，注册日期格式统一（如 YYYY-MM-DD） ## 表格列定义 1. **复选框**：用于行选择 2. **用户 ID**：如 #001、#002 3. **用户名**：中文或英文姓名 4. **邮箱**：合法格式的邮箱地址 5. **角色**：管理员 / 用户 / 访客（三种均需出现） 6. **状态**：激活 / 禁用，使用徽章（badge）样式显示，两种状态用不同颜色区分 7. **注册日期**：YYYY-MM-DD 格式 8. **操作**：包含「编辑」和「删除」两个按钮（点击后弹出 alert 提示即可） ## 功能要求 1. **全选/取消全选**：表头复选框可控制所有行的选中状态，行复选框状态变化时同步更新表头复选框 2. **表头点击排序**：点击用户 ID、用户名、注册日期列的表头可切换升序/降序排序，并显示排序方向指示符（↑/↓） 3. **斑马纹行**：奇偶行背景色不同，视觉上易于区分 4. **悬停行高亮**：鼠标悬停时行背景色变化 5. **固定表头**：表格容器设置最大高度并允许纵向滚动，表头在滚动时保持固定 ## 样式要求 - 页面整体简洁美观，有适当的内边距和配色 - 状态徽章：激活用绿色系，禁用用灰色或红色系 - 操作按钮：编辑用蓝色系，删除用红色系 - 表格宽度自适应容器，列宽合理分配 请直接输出完整的 HTML 代码。

任务要求

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

  1. HTML 表格结构语义化正确，使用 <thead>/<tbody>/<th>/<td> 等标签，包含至少 10 行完整数据，所有 8 列均存在且数据格式规范
  2. 全选/取消全选逻辑正确：表头复选框可批量控制行选中，行复选框单独操作时表头复选框状态（全选/半选/未选）能正确同步
  3. 至少支持 2 个列的升序/降序排序切换，排序后表格行顺序正确更新，并有明确的排序方向视觉指示
  4. 固定表头实现正确：表格容器设有最大高度限制，纵向滚动时 <thead> 保持可见不随内容滚动
  5. 斑马纹与悬停高亮效果清晰可见，状态徽章用不同颜色区分激活/禁用，操作按钮样式区分编辑/删除

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 用户列表数据表格 :root { --primary-color: #3498db; --danger-color: #e74c3c; --success-color: #2ecc71; --text-color: #333; --border-color: #ddd; --hover-bg: #f5f7fa; --striped-bg: #f9f9f9; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f4f6f8; padding: 20px; color: var(--text-color); } .container { max-width: 1200px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } h2 { margin-bottom: 20px; font-weight: 500; color: #2c3e50; } /* 表格容器：设置最大高度和滚动 */ .table-wrapper { max-height: 500px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 4px; } /* 表格样式 */ table { width: 100%; border-collapse: collapse; text-align: left; } /* 固定表头 */ thead th { position: sticky; top: 0; background-color: #fff; z-index: 10; padding: 12px 16px; border-bottom: 2px solid var(--border-color); font-weight: 600; color: #555; white-space: nowrap; } /* 表头排序指示器 */ .sort-indicator { margin-left: 8px; font-size: 12px; color: #999; } /* 表头悬停 */ thead th:hover { background-color: #f8f9fa; color: var(--primary-color); } /* 表头复选框列特殊处理 */ thead th:first-child { width: 50px; text-align: center; } /* 普通行样式 */ tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color 0.2s ease; } /* 斑马纹 */ tbody tr:nth-child(even) { background-color: var(--striped-bg); } /* 悬停高亮 */ tbody tr:hover { background-color: var(--hover-bg); cursor: default; } /* 斑马纹 + 悬停 */ tbody tr:nth-child(even):hover { background-color: #eef2f7; } tbody td { padding: 12px 16px; font-size: 14px; color: #666; } /* 状态徽章 */ .badge { display: inline-block; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; } .badge.active { background-color: #e8f8f5; color: var(--success-color); border: 1px solid #d1f2eb; } .badge.disabled { background-color: #f2f2f2; color: #95a5a6; border: 1px...

AI 评审点评

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

【CLAUDE】该候选输出整体质量较好，HTML 结构语义化规范，数据完整多样，视觉效果实现出色。主要缺陷集中在排序功能上：使用列标题文本作为数据字段 key 导致排序逻辑完全失效，这是一个较严重的功能性 bug。全选同步逻辑也缺少半选（indeterminate）状态的处理。固定表头实现正确，CSS 样式质量高。如果修复排序 key 映射问题，整体得分将显著提升。 【GEMINI】该模型出色地完成了任务要求，代码整合在单个文件中，逻辑清晰，样式美观。在交互功能上，虽然排序逻辑的实现方式略显耦合，但整体功能运行正常，完全符合题目要求。 【KIMI】该代码整体结构清晰，视觉实现优秀，数据完整规范。但排序功能存在关键逻辑缺陷，列名与数据字段名的映射问题导致排序无法正确执行，这是主要扣分点。建议在表头 th 元素上添加 data-field 属性来存储实际的数据字段名，而非依赖 innerText 解析。全选逻辑和固定表头实现正确，CSS 样式专业度较高。

进阶难度评测结果

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

模型生成产物

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

```html 数据表格管理 - 进阶版 :root { --primary-color: #3b82f6; --primary-hover: #2563eb; --bg-color: #f3f4f6; --surface-color: #ffffff; --text-main: #1f2937; --text-secondary: #6b7280; --border-color: #e5e7eb; --success-color: #10b981; --danger-color: #ef4444; --warning-color: #f59e0b; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --radius: 8px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { 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); height: 100vh; display: flex; flex-direction: column; } /* 顶部统计栏 */ .header-stats { background: var(--surface-color); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); } .page-title { font-size: 1.25rem; font-weight: 700; color: var(--text-main); } .stats-container { display: flex; gap: 2rem; } .stat-item { display: flex; flex-direction: column; } .stat-label { font-size: 0.875rem; color: var(--text-secondary); } .stat-value { font-size: 1.5rem; font-weight: 600; } .stat-value.active { color: var(--success-color); } .stat-value.disabled { color: var(--danger-color); } /* 主容器 */ .main-container { flex: 1; padding: 1.5rem 2rem; overflow: hidden; display: flex; flex-direction: column; gap: 1.5rem; } /* 控制栏 */ .controls-bar { background: var(--surface-color); padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .search-box { position: relative; flex: 1; min-width: 250px; } .search-box input { width: 100%; padding: 0.6rem 1rem 0.6rem 2.5rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.9rem; transition: var(--transition); } .search-box input:focus { outline: none; border-color:...

AI 评审点评

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

【CLAUDE】该实现整体架构思路清晰，采用数据驱动渲染模式，CSS 设计规范，视觉风格较好。但存在多个关键功能性 Bug：排序功能因错误的 DOM 选择器和 key 映射完全失效；Canvas 饼图因数组/对象索引混用导致颜色和标签全部为 undefined；固定表头 CSS 方案不完整；Tooltip 角度计算坐标系不一致。这些问题使得核心功能和高级功能的实际可用性大打折扣，整体评分偏低。 【GEMINI】模型高质量地完成了任务要求，代码结构规范，UI 风格简洁现代。主要扣分点在于 Canvas 绘制动画未完全实现「从 0 度展开」的动态效果，以及排序功能的 UI 指示（箭头）缺失。除此之外，各项功能逻辑严密，交互体验优秀，是一个非常出色的单文件 Web 应用实现。 【KIMI】该实现整体完成了基础数据表格的大部分功能，UI 设计现代美观，代码架构采用数据驱动模式较为清晰。但存在两个关键功能性缺陷：一是排序功能因事件绑定目标错误而完全失效；二是 Canvas 饼图的 Tooltip 角度检测逻辑有误，且未实现要求的展开动画。固定表头的实现方案也不符合要求（使用了额外的 header div 而非固定 thead）。建议在测试阶段加强功能验证，确保所有交互功能正常工作。

困难难度评测结果

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

模型生成产物

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

```html 高级数据表格管理系统 :root { /* 主题色变量 */ --primary-color: #3b82f6; --primary-hover: #2563eb; --danger-color: #ef4444; --success-color: #10b981; --warning-color: #f59e0b; --bg-color: #f3f4f6; --surface-color: #ffffff; --text-main: #1f2937; --text-secondary: #6b7280; --border-color: #e5e7eb; --header-bg: #1f2937; --header-text: #f9fafb; /* 状态颜色 */ --status-active-bg: #d1fae5; --status-active-text: #065f46; --status-disabled-bg: #fee2e2; --status-disabled-text: #991b1b; /* 尺寸 */ --header-height: 50px; --row-height: 50px; --border-radius: 6px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--bg-color); color: var(--text-main); height: 100vh; display: flex; flex-direction: column; } /* --- 顶部工具栏 --- */ .toolbar { background: var(--surface-color); padding: 16px 24px; border-bottom: 1px solid var(--border-color); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .search-box { position: relative; flex: 1; min-width: 200px; } .search-box input { width: 100%; padding: 8px 12px 8px 36px; border: 1px solid var(--border-color); border-radius: var(--border-radius); outline: none; transition: border-color 0.2s; } .search-box input:focus { border-color: var(--primary-color); } .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; } .btn { padding: 8px 16px; border: none; border-radius: var(--border-radius); cursor: pointer; font-weight: 500; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; } .btn-primary { background: var(--primary-color); color: white; } .btn-primary:hover { background: var(--primary-hover); } .btn-danger { background: var(--danger-color); color: white; } .btn-danger:hover { background: #dc2626; } .btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); }...

AI 评审点评

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

【CLAUDE】该实现覆盖了题目要求的大部分功能点，代码结构清晰，CSS变量使用规范，视觉风格现代。核心表格功能（排序、搜索、全选、固定表头）实现基本正确。列宽拖拽功能可用但存在事件冲突隐患。主要缺陷集中在：图表联动索引语义混淆导致高亮逻辑不可靠、柱状图未实现行高亮、CSV导出未正确使用过滤后数据、批量操作栏CSS类逻辑冲突。整体属于功能基本完整但细节处理不够严谨的实现，达到中等水平。 【GEMINI】该模型出色地完成了所有任务要求，代码质量极高，逻辑严密。在处理复杂交互（如列宽拖拽、Canvas 图表联动）时展现了极强的工程实现能力。虽然在图表联动的高亮持久性上存在微小的逻辑瑕疵，但整体表现已达到极高水准，是一个非常优秀的单文件前端系统实现。 【KIMI】该实现是一个功能较为完整的高级数据表格系统，核心功能和Hard级别要求基本达成。列宽拖拽和图表联动两大高级功能虽有实现但细节打磨不足，特别是拖拽交互的精确性和图表高亮的针对性有待提升。代码质量良好，CSS变量使用规范，状态管理清晰。主要扣分点在于CSV导出未严格遵循「当前过滤后数据」的要求，以及部分交互细节与需求描述的偏差。整体达到Hard级别要求的基准线，但在健壮性和用户体验精细度上仍有优化空间。

相关链接

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

加载中...
100%