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 细节上还有优化空间。

进阶难度评测结果

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

模型生成产物

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

```html 自定义下拉选择组件 :root { --bg: #0b0e14; --bg-card: #111520; --bg-dropdown: #151a28; --bg-hover: #1a2035; --bg-highlight: #1f2640; --fg: #e2dfd9; --fg-muted: #6d7285; --fg-disabled: #3d4255; --accent: #00d4aa; --accent-dim: rgba(0,212,170,0.1); --accent-glow: rgba(0,212,170,0.25); --danger: #ff6b4a; --danger-dim: rgba(255,107,74,0.1); --border: #1e2335; --border-focus: #00d4aa; --radius: 10px; --radius-sm: 6px; --shadow: 0 12px 40px rgba(0,0,0,0.5); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; line-height: 1.6; overflow-x: hidden; } /* 背景装饰 */ body::before, body::after { content: ''; position: fixed; pointer-events: none; z-index: 0; border-radius: 50%; } body::before { top: -25%; left: -15%; width: 55%; height: 55%; background: radial-gradient(ellipse, rgba(0,212,170,0.045) 0%, transparent 70%); } body::after { bottom: -25%; right: -15%; width: 55%; height: 55%; background: radial-gradient(ellipse, rgba(255,107,74,0.03) 0%, transparent 70%); } .page { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 48px 24px 64px; } /* 页面标题 */ .page-header { text-align: center; margin-bottom: 48px; } .page-header h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; background: linear-gradient(135deg, var(--fg) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; } .page-header p { color: var(--fg-muted); font-size: 14px; } /* 组件网格 */ .components-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } @media (max-width: 920px) { .components-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .components-grid { grid-template-columns: 1fr; } } /* 卡片 */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius:...

AI 评审点评

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

【GEMINI】这是一份近乎完美的前端组件实现方案。模型不仅满足了所有硬性功能指标，还在用户体验（UX）和代码工程化方面展现了资深工程师的水准。动画流畅度、键盘导航的细节处理以及 Web Audio API 的优雅实现，都显著超出了基础要求。代码整洁、逻辑严密，是一个高质量的可直接商用的组件原型。 【KIMI】整体而言，该实现很好地满足了功能要求、用户体验和代码质量的期望。三个下拉组件的核心功能与高级功能完整实现，动画过渡效果和键盘导航体验良好。代码结构清晰、状态管理集中，具有良好的可读性和健壮性。是一个高质量的自定义下拉选择组件实现。

相关链接

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

加载中...
100%