GLM-5.1 在「拖拽排序列表」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：拖拽排序列表
  • 测试类型：网页生成
  • 评测维度：交互组件

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于 Web 交互组件的实现与用户体验优化。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须写在同一个 HTML 文件中，可直接在浏览器中运行，无需任何外部依赖。 2. 优先使用原生 HTML5 Drag and Drop API 实现拖拽功能，代码结构清晰、注释适当。 3. 实现时需考虑边缘情况：如拖拽到列表首尾、快速拖拽、拖拽到自身位置等场景的正确处理。 4. 视觉样式需整洁美观，占位符、拖拽状态等交互反馈需清晰可辨。 5. 代码量适中，聚焦核心功能，不引入不必要的复杂度。

用户提示词（User Prompt）

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

# 拖拽排序列表（基础版） 请生成一个单列拖拽排序列表页面，所有代码（HTML、CSS、JavaScript）写在同一个 HTML 文件中，可直接在浏览器运行。 ## 功能要求 ### 核心交互 1. **拖拽排序**：列表项支持上下拖拽，松手后完成位置交换，使用原生 HTML5 Drag and Drop API 实现。 2. **拖拽手柄**：每个列表项左侧显示拖拽手柄图标（如 ⠿ 或 ≡），鼠标悬停时光标变为 `grab`，拖拽时变为 `grabbing`。 3. **占位符显示**：拖拽过程中，目标插入位置显示一个高亮占位符（虚线框或半透明色块），指示放置后的位置。 4. **放置动画**：列表项放置完成后，有简单的过渡动画（如 transform + transition 实现位置平滑过渡或 fade-in 效果）。 ### 数据持久化 5. **localStorage 存储**：每次拖拽排序完成后，将当前列表顺序保存到 `localStorage`；页面刷新后自动读取并还原上次的排列顺序。 ## 初始数据 列表默认包含以下 6 个任务项（可自行设计样式）： - 📝 撰写项目需求文档 - 🎨 设计 UI 原型图 - 💻 开发前端页面 - 🔧 编写单元测试 - 🚀 部署到测试环境 - ✅ 验收与上线 ## 视觉要求 - 页面居中布局，列表宽度适中（建议 400-500px） - 列表项有卡片样式（圆角、阴影），拖拽时被拖动项半透明或降低透明度 - 占位符与普通列表项高度一致，视觉上明显区分（如蓝色虚线边框 + 浅蓝背景） - 整体配色简洁，不要求复杂主题 ## 不需要实现 - 多列表（看板）功能 - 嵌套列表 - 触摸/移动端支持 - 键盘导航 - 音效

任务要求

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

  1. 使用原生 HTML5 Drag and Drop API（dragstart、dragover、drop 等事件）实现拖拽，不依赖第三方库。
  2. 拖拽过程中在正确的目标位置显示占位符，占位符位置随鼠标移动实时更新，且不出现闪烁或位置错误。
  3. 放置完成后列表项顺序正确更新，并有可见的过渡动画效果（不少于 150ms 的 CSS transition）。
  4. 每个列表项具有可识别的拖拽手柄图标，拖拽手柄区域的鼠标光标正确显示为 grab/grabbing。
  5. 排序结果正确持久化到 localStorage，刷新页面后列表顺序与上次一致，初次加载无数据时显示默认顺序。
  6. 正确处理边缘情况：拖拽到自身位置不触发重排，拖拽到列表首尾位置时占位符显示正确。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 拖拽排序列表 /* ========== 设计令牌 ========== */ :root { --bg: #f3efe9; --card: #ffffff; --fg: #2c2825; --muted: #918a82; --accent: #c05922; --accent-soft: rgba(192, 89, 34, 0.08); --accent-border: rgba(192, 89, 34, 0.45); --border: #e5dfd7; --handle: #c4bbb2; --shadow-sm: 0 1px 3px rgba(44, 40, 37, 0.05); --shadow-md: 0 4px 14px rgba(44, 40, 37, 0.09); --shadow-lg: 0 8px 28px rgba(44, 40, 37, 0.13); --radius: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background-color: var(--bg); /* 微妙的背景光斑 */ background-image: radial-gradient(ellipse 600px 400px at 20% 35%, rgba(192, 89, 34, 0.04) 0%, transparent 70%), radial-gradient(ellipse 500px 500px at 80% 75%, rgba(192, 89, 34, 0.03) 0%, transparent 60%); color: var(--fg); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 48px 20px; } /* ========== 容器 ========== */ .container { width: 100%; max-width: 480px; } /* ========== 头部 ========== */ .header { margin-bottom: 28px; text-align: center; } .header h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; } .header p { font-size: 14px; color: var(--muted); line-height: 1.5; } /* ========== 列表 ========== */ #sortable-list { list-style: none; display: flex; flex-direction: column; gap: 6px; /* 拖拽进行中时给列表一个微妙的内边框 */ transition: outline-color 0.25s ease; outline: 2px solid transparent; outline-offset: 6px; border-radius: 16px; } #sortable-list.is-dragging { outline-color: rgba(192, 89, 34, 0.12); } /* ========== 列表项 ========== */ .list-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1.5px solid var(--border); transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease, border-color 0.25s ease; user-select: none; position:...

AI 评审点评

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

【CLAUDE】这是一个完成度极高的拖拽排序列表实现。技术实现上严格遵循原生 HTML5 Drag and Drop API，占位符逻辑精确且流畅，边缘情况处理周全；数据持久化方案健壮可靠，容错机制完善；视觉设计精致，交互反馈细腻（入场动画、放置弹跳、Toast 提示等）。代码结构清晰，注释详尽，完全满足所有功能要求。唯一可优化点是代码量略显冗长，部分装饰性实现可精简，但这不影响其作为高质量参考实现的价值。综合来看，这是一个接近生产级别的组件实现。 【GEMINI】这是一个高质量的实现方案。它不仅完全满足了所有功能和视觉要求，还在用户体验（如 Toast 提示、序号自动更新）和代码健壮性（处理拖拽快照延迟、数据兼容性）上做了额外优化。交互流畅，代码组织极具专业性，是原生拖拽排序组件的优秀范例。 【KIMI】整体上，这段代码很好地实现了拖拽排序列表的核心功能，包括原生API的使用、占位符逻辑、动画效果、数据持久化等。代码结构清晰，注释适当，视觉样式简洁美观。在功能实现和代码质量方面都达到了较高的水准。

进阶难度评测结果

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

模型生成产物

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

```html 拖拽排序看板 :root { --bg: #0b0d12; --surface: #12151e; --card: #1a1e2c; --card-hover: #222840; --border: #272d44; --text: #e2e4ec; --text-muted: #636a8a; --accent: #f59e0b; --accent-dim: rgba(245,158,11,.12); --rose: #f43f5e; --rose-dim: rgba(244,63,94,.12); --emerald: #10b981; --emerald-dim: rgba(16,185,129,.12); --radius: 14px; --radius-sm: 10px; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} body{ font-family:'Noto Sans SC',system-ui,sans-serif; background:var(--bg);color:var(--text); min-height:100vh;overflow-x:hidden; } /* 背景氛围 */ body::before{ content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(ellipse 60% 50% at 15% 10%,rgba(245,158,11,.07),transparent), radial-gradient(ellipse 50% 60% at 85% 85%,rgba(244,63,94,.05),transparent), radial-gradient(ellipse 50% 50% at 50% 50%,rgba(16,185,129,.04),transparent); } /* 微妙网格 */ body::after{ content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03; background-image: linear-gradient(var(--text-muted) 1px,transparent 1px), linear-gradient(90deg,var(--text-muted) 1px,transparent 1px); background-size:60px 60px; } /* 头部 */ .header{ position:relative;z-index:2; padding:20px 32px;display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--border); backdrop-filter:blur(12px);background:rgba(11,13,18,.6); } .header h1{font-size:22px;font-weight:700;letter-spacing:-.5px} .header h1 span{color:var(--accent);font-weight:900} .reset-btn{ padding:8px 18px;background:transparent;border:1px solid var(--border); color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer; font-size:13px;font-family:inherit;transition:all .2s ease; } .reset-btn:hover{border-color:var(--rose);color:var(--rose);background:var(--rose-dim)} .reset-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* 看板 */ .kanban{ position:relative;z-index:1; display:grid;grid-template-columns:repeat(3,1fr);gap:20px;...

AI 评审点评

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

【CLAUDE】这是一个工程质量优秀的拖拽看板实现。核心亮点包括：基于 Pointer Events 的跨平台拖拽支持、FLIP 动画技术带来的流畅视觉体验、完整的键盘导航与 Web Audio 音效集成、清晰的数据模型与持久化方案。代码展现了对现代前端交互模式的深刻理解，边缘情况处理细致，用户体验打磨到位。主要改进空间在于：移除外部字体依赖以完全符合规范、抽象重复的数据操作逻辑、增强极端场景下的健壮性（如超长文本限制、任务删除功能）。整体而言，该实现已达到生产级质量标准，功能完整度和交互保真度均处于高水平。 【GEMINI】这是一份教科书级别的实现。模型不仅完全满足了所有功能和视觉要求，还在交互细节上做了大量加法，例如使用 FLIP 技术解决复杂的列表重排动画，以及极其完善的键盘导航反馈系统。代码健壮性强，能够优雅地处理触摸、鼠标、键盘三种输入方式，且在 Web Audio 的应用上展现了深厚的前端功底。 【KIMI】该实现是一个功能较为完整的拖拽排序看板，核心架构采用数据驱动，视觉设计现代，同时覆盖了鼠标、触摸、键盘三种交互方式。Pointer Events 的实现、FLIP 动画、Web Audio 音效等进阶功能均有体现。但代码在边界情况处理上存在若干隐患：拖拽与键盘操作的状态隔离不够彻底、数据索引计算在复杂 DOM 状态下可能偏差、键盘导航的 DOM 操作与数据驱动渲染存在架构冲突。整体达到可用水平，但距离生产级健壮性仍有优化空间，特别是在并发操作防护、无障碍细节和移动端触摸体验的稳定性方面。

困难难度评测结果

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

模型生成产物

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

这是一个非常复杂的全功能拖拽排序看板实现，涵盖虚拟化渲染、嵌套树形拖拽、键盘导航、音效系统、多主题等全部要求。下面是完整代码： ```html 拖拽排序看板 /* ===== 主题变量 ===== */ :root { --bg: #f0ebe4; --fg: #1c1917; --card: #ffffff; --border: #d6d0c8; --accent: #d4552a; --accent-soft: rgba(212,85,42,0.12); --muted: #8a8279; --column-bg: #e8e2da; --handle-color: #b5ada4; --placeholder-color: #d4552a; --ghost-bg: rgba(255,255,255,0.92); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 30px rgba(0,0,0,0.12); --radius: 8px; --radius-sm: 5px; --item-h: 44px; --font: 'DM Sans', sans-serif; } [data-theme="dark"] { --bg: #18181b; --fg: #ece7e1; --card: #27272a; --border: #3f3f46; --accent: #f97316; --accent-soft: rgba(249,115,22,0.15); --muted: #71717a; --column-bg: #1f1f23; --handle-color: #52525b; --placeholder-color: #f97316; --ghost-bg: rgba(39,39,42,0.95); --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 12px rgba(0,0,0,0.3); --shadow-lg: 0 8px 30px rgba(0,0,0,0.4); } [data-theme="high-contrast"] { --bg: #000000; --fg: #ffffff; --card: #111111; --border: #ffffff; --accent: #ffdd00; --accent-soft: rgba(255,221,0,0.2); --muted: #cccccc; --column-bg: #0a0a0a; --handle-color: #ffffff; --placeholder-color: #ffdd00; --ghost-bg: rgba(17,17,17,0.98); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* ===== 基础重置 ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; } body { font-family: var(--font); background: var(--bg); color: var(--fg); min-height: 100vh; overflow: hidden; transition: background 0.3s, color 0.3s; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ===== 顶部栏 ===== */ .top-bar { display: flex; align-items: center; justify-content:...

AI 评审点评

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

【CLAUDE】这是一个高质量的全功能拖拽排序看板实现，完整覆盖了所有核心要求。拖拽交互使用 Pointer Events API 实现，占位符逻辑准确，循环引用保护严格，动画流畅。虚拟化渲染真实有效，600 条数据下性能表现优秀，与拖拽功能协同良好。无障碍支持较完整，键盘导航全程可用，aria-live 播报清晰，但 ARIA 角色选择不完全符合 WAI-ARIA 1.2 对树形拖拽列表的规范建议。音效系统、多主题切换、数据持久化均完整实现且细节到位。代码结构清晰，工程化思维明显，关键逻辑有注释。整体实现水平优秀，符合困难级别要求，仅在 ARIA 语义规范和部分边缘提示上有改进空间。 【GEMINI】这是一个极其优秀的实现。模型不仅完成了所有硬性要求（如虚拟化、嵌套拖拽、Web Audio），还在交互细节和边缘情况处理上表现出资深工程师的水平。特别是在虚拟滚动与复杂嵌套拖拽逻辑的结合上，处理得非常丝滑。无障碍标准的执行也非常到位，是一个典型的高质量前端组件示例。 【KIMI】该实现作为一个复杂交互组件的尝试，覆盖了需求中的主要功能点，但在关键细节上存在较多问题。拖拽逻辑的循环引用保护和占位符计算不够严密，虚拟化与拖拽的协同工作存在明显缺陷（未实现拖拽时的渲染范围动态扩展），ARIA角色使用不符合最新规范且键盘导航设计有 accessibility 反模式。工程化方面代码结构尚可，但持久化逻辑分散、缺乏一致性。整体属于'功能可用但生产环境需大量修复'的水平，在hard难度下未达到稳健实现的标准。

相关链接

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

加载中...
100%