doubao-seed-2-0-pro 在「拖拽排序列表」的评测结果

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

基本信息

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

系统提示词（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. 正确处理边缘情况：拖拽到自身位置不触发重排，拖拽到列表首尾位置时占位符显示正确。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 拖拽排序列表 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { min-height: 100vh; display: flex; justify-content: center; padding-top: 60px; background-color: #f5f7fa; } .container { width: 480px; } h1 { text-align: center; color: #333; margin-bottom: 24px; font-size: 24px; } #sortableList { list-style: none; } .list-item { background-color: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); margin-bottom: 8px; display: flex; align-items: center; transition: all 0.2s ease; user-select: none; } .list-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .drag-handle { font-size: 20px; color: #999; margin-right: 12px; cursor: grab; line-height: 1; } .task-content { color: #333; font-size: 16px; } .dragging { opacity: 0.5; transform: scale(1.02); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .dragging .drag-handle { cursor: grabbing; } .placeholder { background-color: #e3f2fd; border: 2px dashed #2196f3; border-radius: 8px; height: 56px; margin-bottom: 8px; transition: all 0.1s ease; } 任务列表 // 初始任务数据 const defaultTasks = [ '📝 撰写项目需求文档', '🎨 设计 UI 原型图', '💻 开发前端页面', '🔧 编写单元测试', '🚀 部署到测试环境', '✅ 验收与上线' ]; // DOM 元素 const listEl = document.getElementById('sortableList'); let draggedElement = null; // 页面加载时读取本地存储数据 function loadTasks() { const saved = localStorage.getItem('sortedTasks'); return saved ? JSON.parse(saved) : defaultTasks; } // 保存任务到本地存储 function saveTasks() { const tasks = Array.from(listEl.querySelectorAll('.task-content')) .map(el => el.textContent.trim()); localStorage.setItem('sortedTasks', JSON.stringify(tasks)); } // 渲染任务列表 function renderTasks(tasks) { listEl.innerHTML = ''; tasks.forEach(task => { const li = document.createElement('li'); li.className = 'list-item'; li.draggable = true; li.innerHTML = ` ⠿ ${task} `; listEl.appendChild(li); // 绑定拖拽事件到列表项 li.addEventListener('dragstart', handleDragStart); li.addEventListener('dragend',...

AI 评审点评

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

【CLAUDE】该实现整体质量较高，完整覆盖了需求的核心功能：原生 Drag and Drop API、占位符反馈、localStorage 持久化、拖拽视觉状态、边缘情况处理。代码结构清晰，视觉样式符合要求。主要不足在于：draggable 属性设置在整个列表项而非仅手柄区域（功能上可用但与需求描述有偏差）；dragleave 事件的目标判断逻辑在某些浏览器下可能失效；放置动画效果较为基础，仅依赖 CSS transition 而无专门的 fade-in 或位移动画。总体而言是一个功能完备、代码质量良好的基础版拖拽排序列表实现。 【GEMINI】该模型出色地完成了任务要求，不仅实现了所有核心功能，还在交互细节（如占位符的实时计算、拖拽状态的视觉反馈）上表现优异。代码质量高，完全符合「无需外部依赖」和「原生 API 实现」的约束，是一个高质量的前端交互组件实现。 【KIMI】该实现是一个功能完整、代码清晰的拖拽排序列表组件。核心功能如原生 DnD API 使用、占位符反馈、localStorage 持久化均已正确实现，边缘情况处理得当。主要改进点在于：拖拽手柄应作为唯一拖拽触发区域（当前整个列表项可拖拽）、放置动画可优化为更明显的位移动画、以及光标反馈的精确控制。整体达到生产可用水平，视觉设计和代码质量良好。

进阶难度评测结果

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

模型生成产物

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

```html 拖拽排序看板 * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; } :root { --primary: #4f46e5; --todo-bg: #eff6ff; --in-progress-bg: #fef3c7; --done-bg: #d1fae5; --card-bg: #ffffff; --border-color: #e5e7eb; --text-primary: #1f2937; --text-secondary: #6b7280; --shadow: 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); } body { background-color: #f9fafb; color: var(--text-primary); line-height: 1.5; padding: 2rem 1rem; min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .header h1 { font-size: 1.875rem; font-weight: 700; color: var(--primary); } .btn { padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 500; transition: background-color 0.2s ease; } .btn-primary { background-color: var(--primary); color: white; } .btn-primary:hover { background-color: #4338ca; } .kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; } .column { background-color: white; border-radius: 0.5rem; box-shadow: var(--shadow); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; border: 2px solid transparent; } .column.drop-target { border-color: var(--primary); box-shadow: var(--shadow-lg); } .column-header { padding: 1rem; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1.125rem; } .column.todo .column-header { background-color: var(--todo-bg); } .column.in-progress .column-header { background-color: var(--in-progress-bg); } .column.done .column-header { background-color: var(--done-bg); } .count-badge { background-color: rgba(0, 0, 0, 0.1); padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.875rem;...

AI 评审点评

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

【CLAUDE】该候选输出是一个明显未完成的代码片段，在 startDrag 函数的键盘分支处被截断，导致拖拽交互的核心逻辑（pointermove/pointerup处理、占位符位置判断、放置动画）、完整键盘导航、三种语义音效以及重置功能的事件绑定均缺失。代码的基础架构（HTML结构、CSS样式、数据模型、渲染逻辑）设计合理，显示出一定的工程能力，但由于输出被截断，整个应用无法实际运行，核心功能需求几乎全部未达成。这是一个有良好开端但严重不完整的实现。 【GEMINI】候选代码在 UI 设计和基础架构上表现良好，采用了现代化的 CSS 布局和清晰的数据结构。然而，由于输出内容在关键逻辑实现处（拖拽结束、键盘导航、音频 API 调用）发生了严重的截断，导致代码无法在浏览器中正常运行，未能满足「可独立运行」的核心要求，因此整体评分较低。 【KIMI】该实现展示了扎实的前端工程能力，在单一 HTML 文件中整合了 Pointer Events 拖拽、Web Audio、localStorage 持久化、键盘导航等进阶功能。代码结构清晰，数据与视图分离，CSS 使用合成层属性保证性能。主要缺陷在于输出被截断，导致放置动画、键盘导航完整逻辑、跨列状态更新等关键功能无法验证。已展示的部分质量较高，但截断使得部分需求（如完整的键盘操作闭环、空列拖入的占位符居中显示）无法确认是否实现。建议在完整代码提交后重新评估。

困难难度评测结果

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

模型生成产物

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

```html 拖拽嵌套看板 // 音效系统（Web Audio API 实现） class SoundPlayer { constructor() { this.enabled = localStorage.getItem('soundEnabled') !== 'false'; this.audioContext = null; } init() { if (!this.audioContext) this.audioContext = new (window.AudioContext || window.webkitAudioContext)(); } play(type) { if (!this.enabled) return; this.init(); const ctx = this.audioContext; const now = ctx.currentTime; const o = ctx.createOscillator(); const g = ctx.createGain(); o.connect(g); g.connect(ctx.destination); switch(type) { case 'pickup': o.frequency.setValueAtTime(220, now); o.frequency.linearRampToValueAtTime(440, now + 0.1); g.gain.setValueAtTime(0.3, now); g.gain.exponentialRampToValueAtTime(0.01, now + 0.1); o.start(now); o.stop(now + 0.1); break; case 'move': o.frequency.setValueAtTime(880, now); g.gain.setValueAtTime(0.1, now); g.gain.exponentialRampToValueAtTime(0.01, now + 0.05); o.start(now); o.stop(now + 0.05); break; case 'success': o.frequency.setValueAtTime(330, now); g.gain.setValueAtTime(0.2, now); g.gain.exponentialRampToValueAtTime(0.01, now + 0.2); o.start(now); o.stop(now + 0.2); const o2 = ctx.createOscillator(); const g2 = ctx.createGain(); o2.connect(g2); g2.connect(ctx.destination); o2.frequency.setValueAtTime(495, now + 0.05); g2.gain.setValueAtTime(0.2, now + 0.05); g2.gain.exponentialRampToValueAtTime(0.01, now + 0.25); o2.start(now + 0.05); o2.stop(now + 0.25); break; case 'error': o.frequency.setValueAtTime(150, now); g.gain.setValueAtTime(0.3, now); g.gain.exponentialRampToValueAtTime(0.01, now + 0.2); o.start(now); o.stop(now + 0.2); break; } } toggle() { this.enabled = !this.enabled; localStorage.setItem('soundEnabled', this.enabled); return this.enabled; } } const soundPlayer = new SoundPlayer(); /* 主题变量 */ :root { --bg-color: #f5f5f5; --text-color: #333; --card-bg: #fff; --border-color: #e0e0e0; --accent-color: #2196f3; --placeholder-color: #bbdefb; --shadow: 0 2px 8px rgba(0,0,0,0.1); --contrast: 1; } .theme-dark { --bg-color: #121212;...

AI 评审点评

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

【CLAUDE】该实现展示了良好的架构设计意图：虚拟化渲染框架、音效系统、主题 CSS Variables、ARIA 基础结构均有合理的骨架代码。然而代码在 `onDragMove` 函数处被硬截断，导致整个拖拽核心逻辑（占位符计算、放置逻辑、循环引用保护、跨列移动）完全缺失，键盘导航、滚动事件绑定、主题切换事件绑定等关键初始化代码也未出现。这是一个「有良好开头但未完成」的实现，无法作为可运行的完整产品交付。代码质量和工程化思维在已完成部分有所体现（如 flattenTree、SoundPlayer 类设计），但整体功能完成度不足40%。 【GEMINI】模型输出的代码在实现复杂交互组件时，由于输出长度限制导致代码在关键的拖拽交互逻辑（onDragMove/End）处中断，未能提供一个可运行的完整功能。尽管在虚拟化渲染、Web Audio 音效系统及工程化架构设计上展现了良好的专业度，但由于核心交互功能缺失，无法满足「直接运行」的硬性要求。 【KIMI】该候选输出呈现明显的「半成品」特征：代码在 `onDragMove` 函数处突然中断，导致拖拽核心逻辑、虚拟化与拖拽协同、键盘导航等关键功能无法验证。已实现的代码展现出良好的工程化结构（清晰的类封装、常量定义、状态管理）和部分基础功能（音效系统完整、虚拟化框架、主题系统骨架），但核心交互逻辑缺失使得整体可用性极低。从已完成代码的质量来看，开发者具备实现完整功能的技术能力，但交付物不完整导致无法满足生产要求。建议：补全拖拽移动检测、放置确认/取消、键盘导航、自动滚动等核心逻辑后重新评估。

相关链接

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

加载中...
100%