GLM-5.1 在「下拉选择组件」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：下拉选择组件
  • 测试类型：网页生成
  • 评测维度：交互组件

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建交互式 UI 组件。 回答要求： 1. 遵循 KISS 原则（Keep It Simple, Stupid），代码结构清晰、易于阅读，避免过度设计。 2. 所有代码必须写在单个 HTML 文件中，无需任何外部依赖，可直接在浏览器中运行。 3. 优先保证核心功能的正确性与稳定性，样式简洁美观即可，无需复杂动画。 4. 使用语义化的变量命名和适当的代码注释，便于理解各模块的职责。 5. 直接输出完整的 HTML 代码，不附加任何解释性文字。

用户提示词（User Prompt）

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

# 自定义下拉选择组件（基础版） 请在单个 HTML 文件中实现一个自定义下拉选择组件页面，包含以下三个展示场景。 ## 核心功能要求 每个下拉组件必须具备： 1. **点击触发**：点击触发区域打开/关闭下拉菜单 2. **选项列表**：清晰展示所有可选项 3. **选中高亮**：已选中的选项在列表中有明显的视觉区分（如背景色或勾选标记） 4. **选中回显**：点击选项后关闭菜单，并在触发区域显示选中的值 5. **点击外部关闭**：点击下拉菜单以外的区域时，菜单自动关闭 6. **键盘支持**：支持 ↑↓ 方向键移动焦点、Enter 键确认选择、ESC 键关闭菜单 ## 高级功能要求 1. **搜索过滤**：菜单内提供输入框，实时过滤匹配的选项（不区分大小写） 2. **多选模式**：支持选择多个选项，已选项以「标签（Tag）」形式展示在触发区域，标签可单独删除 3. **分组选项**：选项按类别分组展示，组名作为不可点击的标题行 4. **禁用选项**：部分选项标记为禁用状态，视觉上置灰且不可点击 5. **清空按钮**：触发区域提供一键清除所有已选项的按钮（有选中项时才显示） ## 展示场景 请在页面中依次展示以下三个独立的下拉组件： ### 场景一：国家选择器（单选 + 搜索） - 模式：单选，带搜索过滤 - 数据：至少包含 10 个国家，例如：中国、美国、英国、日本、德国、法国、澳大利亚、加拿大、韩国、巴西 - 占位文本：「请选择国家」 ### 场景二：技能标签选择（多选） - 模式：多选，显示为标签 - 数据：至少包含 8 个技能选项，例如：JavaScript、Python、Java、CSS、React、Vue、Node.js、SQL，其中至少 1 个为禁用状态 - 占位文本：「请选择技能」 ### 场景三：部门选择（分组 + 单选） - 模式：单选，选项按部门分组 - 数据：至少 3 个分组，每组至少 2 个选项，例如：技术部（前端组、后端组、测试组）、产品部（产品组、设计组）、运营部（市场组、客服组） - 占位文本：「请选择部门」 ## 样式要求 - 页面整体布局整洁，三个场景有明确的标题标注 - 下拉菜单有基础的边框、圆角和阴影，与页面背景区分明显 - 禁用选项视觉上明显置灰 - 组件宽度统一，建议 300px 左右 请直接输出完整的 HTML 代码。

任务要求

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

  1. 核心交互完整性：五项核心功能（点击开关、选中高亮、值回显、点击外部关闭、键盘支持 ↑↓/Enter/ESC）均须正确实现，无明显 Bug。
  2. 高级功能覆盖度：搜索过滤、多选标签（含单独删除）、分组展示、禁用状态、清空按钮五项高级功能须全部实现且逻辑正确。
  3. 三场景正确适配：国家选择器（单选+搜索）、技能选择（多选+禁用）、部门选择（分组）三个场景均须按要求独立展示，数据量和模式符合规格。
  4. 状态管理正确性：多选标签的增删、清空、禁用项拦截等状态变更逻辑准确，不出现状态错乱或 UI 不同步问题。
  5. 代码可读性：代码结构清晰，HTML/CSS/JS 职责分明，关键逻辑有注释，变量命名语义化。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 自定义下拉选择组件 /* ========== 设计令牌 ========== */ :root { --bg: #f0f2f5; --fg: #1a1a2e; --muted: #6b7280; --accent: #0d9488; --accent-light: #ccfbf1; --card: #ffffff; --border: #d1d5db; --hover: #f0fdfa; --disabled-bg: #f3f4f6; --disabled-fg: #9ca3af; --shadow: 0 4px 16px rgba(0,0,0,0.08); --radius: 8px; --tag-bg: #e0f2f1; --tag-fg: #0d9488; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6; padding: 48px 20px 80px; } /* ========== 页面布局 ========== */ .page-container { max-width: 560px; margin: 0 auto; } .page-header { margin-bottom: 40px; } .page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--fg); margin-bottom: 6px; } .page-subtitle { font-size: 14px; color: var(--muted); } /* ========== 场景卡片 ========== */ .scene { background: var(--card); border-radius: var(--radius); border-left: 3px solid var(--accent); padding: 20px 24px 24px; margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .scene-title { font-size: 16px; font-weight: 700; margin-bottom: 2px; } .scene-desc { font-size: 13px; color: var(--muted); margin-bottom: 16px; } /* ========== 下拉组件 ========== */ .custom-select { position: relative; width: 320px; } /* 触发区域 */ .select-trigger { display: flex; align-items: center; min-height: 42px; padding: 4px 56px 4px 12px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--card); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; position: relative; user-select: none; } .select-trigger:hover { border-color: var(--accent); } .select-trigger.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,148,136,0.12); } .select-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .select-placeholder { color: var(--muted); font-size: 14px; }...

AI 评审点评

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

【CLAUDE】这是一份高质量的自定义下拉选择组件实现。代码采用面向对象的Class封装，结构清晰，所有功能需求均完整覆盖且逻辑正确。CSS设计令牌的使用体现了良好的工程素养，视觉效果精致统一。三个场景的数据和模式完全符合规格要求。键盘导航、搜索过滤、多选标签管理等复杂交互均处理得当。整体达到生产可用级别，是一份优秀的答案。 【GEMINI】这是一份非常专业且高质量的实现方案。开发者不仅完成了所有基础和高级功能要求，还通过封装通用的 CustomSelect 类展示了良好的工程素养。代码在键盘交互、无障碍支持和搜索过滤逻辑（如自动隐藏空分组）等细节上处理得非常到位，UI 简洁大方，是一个标准的工业级组件原型。 【KIMI】整体而言，该实现满足了核心功能和高级功能的要求，三个场景适配正确，状态管理准确。页面交互和视觉体验良好，代码可读性和结构合理。但在代码简洁性和部分 UI 细节上还有优化空间。

进阶难度评测结果

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

模型生成产物

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

```html 自定义下拉选择组件 /* ========== CSS 变量 ========== */ :root { --bg: #0D1117; --bg-subtle: #111820; --surface: #161B22; --surface-elevated: #1C2333; --surface-hover: #243447; --border: #30363D; --border-focus: #FF6B4A; --text: #E6EDF3; --text-secondary: #8B949E; --text-muted: #6E7681; --accent: #FF6B4A; --accent-hover: #FF8566; --accent-muted: rgba(255,107,74,0.15); --mint: #4ECDC4; --mint-hover: #6FE0D9; --mint-muted: rgba(78,205,196,0.12); --danger: #F85149; --disabled-bg: #21262D; --disabled-text: #484F58; --highlight-bg: rgba(255,107,74,0.1); --shadow: 0 12px 40px rgba(0,0,0,0.5); --radius: 10px; --radius-sm: 6px; --font: 'Noto Sans SC', system-ui, sans-serif; } /* ========== 全局重置 ========== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; overflow-x: hidden; } /* ========== 背景装饰 ========== */ .page-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 800px 600px at 15% 10%, rgba(255,107,74,0.07) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 85% 85%, rgba(78,205,196,0.05) 0%, transparent 60%), radial-gradient(ellipse 400px 400px at 50% 50%, rgba(255,107,74,0.02) 0%, transparent 70%); } .page-bg::before, .page-bg::after { content: ''; position: absolute; border-radius: 50%; } .page-bg::before { width: 500px; height: 500px; top: -150px; right: -80px; background: radial-gradient(circle, rgba(255,107,74,0.05) 0%, transparent 70%); animation: bgFloat1 25s ease-in-out infinite; } .page-bg::after { width: 400px; height: 400px; bottom: -100px; left: -60px; background: radial-gradient(circle, rgba(78,205,196,0.04) 0%, transparent 70%); animation: bgFloat2 30s ease-in-out infinite; } @keyframes bgFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,30px)} } @keyframes bgFloat2 {...

AI 评审点评

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

【CLAUDE】这是一个高质量的自定义下拉选择组件实现，完整满足所有功能要求与交互体验标准。三个展示场景功能独立且数据互不干扰，核心功能（搜索过滤、多选标签、分组禁用、清空逻辑）与高级功能（localStorage 持久化、Web Audio 音效）均完整实现。动画过渡流畅自然，标签增删有明显的弹性动效，下拉菜单展开收起丝滑无跳变。键盘导航逻辑完善，焦点管理清晰，搜索框自动获焦，高亮项始终可见。音效实现优秀，三种操作音调区分明显且音量适中。代码架构清晰，状态管理集中，组件逻辑与 UI 渲染分离，可读性与健壮性俱佳。视觉风格现代简洁，配色协调，页面布局整洁。唯一的改进空间在于多选标签删除时音效与动画的时序同步，以及部分代码细节的进一步优化。整体而言，这是一个接近生产级别的组件实现，展现了扎实的前端开发功底与对用户体验的深刻理解。 【GEMINI】这是一份教科书级别的实现。不仅完整覆盖了所有复杂的功能点（如分组、禁用、搜索高亮、多选标签），还在用户体验上做了深度优化。特别是利用 Web Audio API 动态合成音效而非加载外部文件，以及完善的键盘可访问性（A11y）支持，体现了极高的前端开发专业素养。视觉设计现代且响应式，代码组织严谨，是高质量的组件化开发范例。 【KIMI】该实现是一个高质量的原生自定义下拉选择组件，完整覆盖了所有功能需求，交互体验精致，代码架构合理。在动画细节、键盘导航完整性、状态持久化和音效反馈方面表现尤为出色。主要改进空间在于：增强无障碍访问（ARIA属性动态更新、标签删除的键盘操作）、优化性能（事件委托、DOM复用）、以及完善生命周期管理（组件销毁与内存清理）。整体达到生产可用水平，是原生组件开发的优秀范例。

困难难度评测结果

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

模型生成产物

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

```html 高性能无障碍自定义下拉选择组件 /* ===== 主题变量 ===== */ :root { --bg-primary: #F5F4F0; --bg-secondary: #FFFFFF; --bg-tertiary: #EDECE7; --text-primary: #1A1A2E; --text-secondary: #555568; --text-muted: #8E8EA0; --accent: #0D9488; --accent-hover: #0F766E; --accent-light: rgba(13,148,136,0.10); --accent-focus: rgba(13,148,136,0.25); --border: #DDD9D0; --border-focus: #0D9488; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --tag-bg: rgba(13,148,136,0.12); --tag-text: #0D9488; --tag-border: rgba(13,148,136,0.25); --disabled-bg: #F0EFEB; --disabled-text: #B8B8C8; --dropdown-bg: #FFFFFF; --hover-bg: rgba(13,148,136,0.06); --active-bg: rgba(13,148,136,0.14); --search-bg: #F5F4F0; --group-bg: #FAFAF7; --radius: 10px; --radius-sm: 6px; --transition-color: 200ms ease; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace; } .dark { --bg-primary: #0E0E14; --bg-secondary: #181822; --bg-tertiary: #20202E; --text-primary: #E4E2DC; --text-secondary: #9E9EB2; --text-muted: #5E5E72; --accent: #2DD4BF; --accent-hover: #5EEAD4; --accent-light: rgba(45,212,191,0.10); --accent-focus: rgba(45,212,191,0.25); --border: #2A2A3A; --border-focus: #2DD4BF; --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.3); --shadow-lg: 0 8px 32px rgba(0,0,0,0.4); --tag-bg: rgba(45,212,191,0.12); --tag-text: #2DD4BF; --tag-border: rgba(45,212,191,0.25); --disabled-bg: #1C1C28; --disabled-text: #44445A; --dropdown-bg: #181822; --hover-bg: rgba(45,212,191,0.07); --active-bg: rgba(45,212,191,0.15); --search-bg: #20202E; --group-bg: #14141E; } /* ===== 基础重置 ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font); background: var(--bg-primary); color:...

AI 评审点评

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

【CLAUDE】这是一个工程质量极高的自定义下拉选择组件实现。代码完整实现了所有 Hard 级别核心要求：WAI-ARIA 无障碍规范支持完整且正确，虚拟化渲染在 150+ 数据下性能优异，状态机架构清晰健壮，主题切换系统和音效系统均完整实现并持久化。三个展示场景功能齐全，交互流畅，视觉设计专业。代码结构清晰，注释充分，单文件 HTML 可独立运行无需外部依赖。唯一的微小不足包括：部门选择器的业务线信息未在页面上单独展示（仅在 JSON 输出中体现）、分组未使用标准 ARIA 模式、以及虚拟滚动和状态机在极端情况下的细微优化空间。整体而言，这是一个接近生产级别的高质量实现，充分展示了前端工程化能力和无障碍工程实践。

相关链接

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

加载中...
100%