doubao-seed-1-6-flash 在「日期选择器」的评测结果

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

基本信息

  • 模型名称：doubao-seed-1-6-flash
  • 用例名称：日期选择器
  • 测试类型：网页生成
  • 评测维度：交互组件

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于原生 HTML/CSS/JavaScript 的组件开发。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，不得引用任何外部库或 CDN 资源。 2. 日期逻辑必须使用原生 JavaScript 实现，禁止使用 Moment.js、jQuery UI 等重型日期库。 3. 输出完整、可直接在浏览器中打开运行的 HTML 代码，不得省略任何部分。 4. 代码结构清晰，变量命名语义化，核心逻辑需有简要注释。 5. 优先保证功能正确性，样式简洁美观即可，无需过度设计。

用户提示词（User Prompt）

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

请在单个 HTML 文件中实现一个基础日期选择器（Date Picker）组件页面。 ## 核心功能要求 1. **触发显示**：点击文本输入框时，在输入框下方弹出日历面板；点击日历面板外部区域时，日历面板关闭。 2. **日历渲染**： - 顶部显示当前年份和月份（格式：YYYY年 MM月） - 按周排列显示日期格子，第一列为周日 - 正确处理每月天数及月份首日的偏移量（含闰年） 3. **年月切换**： - 提供「上个月 / 下个月」切换按钮 - 提供「上一年 / 下一年」切换按钮 - 切换后日历内容实时更新 4. **日期选择**： - 点击某一天后，该日期以 `YYYY-MM-DD` 格式填入输入框 - 日历面板随即关闭 5. **今天标记**：当前日期在日历中有明显的视觉标识（如不同背景色或边框）。 6. **选中标记**：已选中的日期在日历中有明显的高亮样式，与今天标记视觉上可区分。 ## 样式要求 - 日历面板有基础的卡片样式（边框、圆角、阴影） - 日期格子在 hover 时有视觉反馈 - 整体布局整洁，可在现代桌面浏览器中正常显示 ## 约束 - 单文件 HTML，CSS 写在 `<style>` 标签内，JS 写在 `<script>` 标签内 - 不使用任何外部依赖 - 输出完整代码，不得使用省略号代替任何部分

任务要求

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

  1. 日历面板能通过点击输入框正确显示，点击外部区域正确关闭，无残留状态。
  2. 年月切换逻辑正确，能跨年切换（如从 1 月切换上个月变为上一年 12 月），日历格子天数与实际日历一致（含闰年验证）。
  3. 选择日期后，输入框内容以 `YYYY-MM-DD` 格式正确填入，且日历中选中日期有高亮标记。
  4. 今天日期在日历中有独立的视觉标识，与选中态样式可区分。
  5. 代码为单文件结构，不依赖外部资源，可直接在浏览器中打开运行。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 基础日期选择器 .date-picker { position: relative; display: inline-block; } .date-input { padding: 6px 10px; cursor: pointer; } .calendar { position: absolute; top: 35px; left: 0; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); padding: 10px; display: none; } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .header-btn { cursor: pointer; padding: 5px 10px; } .calendar-table { width: 100%; border-collapse: collapse; } .calendar-table th, .calendar-table td { text-align: center; padding: 5px; } .date-cell { cursor: pointer; border-radius: 4px; } .date-cell:hover { background-color: #f0f0f0; } .today { background-color: #e0f7fa; } .selected { background-color: #4fc3f7; color: #fff; } 上一年 上个月 下个月 下一年 日 一 二 三 四 五 六 // 获取DOM元素 const dateInput = document.getElementById('date-input'); const calendar = document.getElementById('calendar'); const yearMonth = document.getElementById('year-month'); const dateBody = document.getElementById('date-body'); const prevYearBtn = document.getElementById('prev-year'); const prevMonthBtn = document.getElementById('prev-month'); const nextMonthBtn = document.getElementById('next-month'); const nextYearBtn = document.getElementById('next-year'); let currentDate = new Date(); // 当前显示的日期，初始为今天 let selectedDate = null; // 选中的日期 // 渲染日历函数 function renderCalendar() { const year = currentDate.getFullYear(); const month = currentDate.getMonth(); // 月份从0开始 // 更新顶部年份和月份显示 yearMonth.textContent = `${year}年 ${month + 1}月`; // 计算当月第一天是周几（0代表周日） const firstDayOfMonth = new Date(year, month, 1).getDay(); // 计算当月天数 const daysInMonth = new Date(year, month + 1, 0).getDate(); // 清空日期表格内容 dateBody.innerHTML = ''; // 填充上月需要显示的日期 let prevMonthDays = 0; if (firstDayOfMonth !== 0) { prevMonthDays = 7 - firstDayOfMonth; } const prevYear = month === 0 ? year - 1 : year; const prevMonth = month === 0 ? 11 : month - 1; for (let i = prevMonthDays; i >...

AI 评审点评

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

【GEMINI】该模型生成的代码在工程规范和基础交互逻辑上表现良好，但在核心的日历算法和 HTML 表格结构生成上存在明显逻辑缺陷，导致日历无法以正确的 7 列周布局显示。虽然具备年月切换和日期格式化功能，但作为日期选择器，其最基础的视觉呈现逻辑需要修正。 【KIMI】该实现存在严重的功能性缺陷，核心问题在于日历渲染逻辑完全错误——将每个日期放入独立的<tr>导致布局纵向排列，且日期偏移量计算、上月日期填充、「今天」判断等关键算法均有错误。虽然代码结构、命名规范和单文件约束遵守较好，样式基础也存在，但核心功能基本无法正常使用。建议修复：1）使用正确的7列网格布局，每7天创建一行；2）修正 `firstDayOfMonth` 的偏移计算；3）使用固定的 `new Date()` 判断「今天」而非随切换改变的变量。

进阶难度评测结果

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

模型生成产物

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

```html 日期选择器组件 * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } .input-group { position: relative; display: inline-block; margin: 20px; } .input-group input { padding: 8px; width: 200px; font-size: 14px; } .calendar { position: absolute; background: #fff; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: none; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .calendar.double { display: flex; } .calendar.single { width: 300px; } .calendar-header { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f5f5f5; } .calendar-header .btn { cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; border-radius: 3px; background: #fff; } .calendar-header .btn:hover { background: #f0f0f0; } .calendar-header .title { font-weight: bold; } .week-row { display: flex; justify-content: space-around; padding: 5px; background: #eee; } .week-row span { flex: 1; text-align: center; padding: 5px; } .date-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 5px; } .date-cell { text-align: center; padding: 5px; cursor: pointer; transition: background 0.2s; } .date-cell.disabled { color: #ccc; cursor: not-allowed; } .date-cell.today { border: 1px solid #f00; border-radius: 50%; } .date-cell.selected { background: #007bff; color: #fff; } .date-cell.hover-range { background: rgba(0,123,255,0.2); } .time-picker { display: flex; padding: 10px; } .time-picker select { margin: 0 5px; } .shortcut-btns { display: flex; justify-content: space-around; padding: 10px; background: #f5f5f5; } .shortcut-btns button { padding: 5px 10px; cursor: pointer; } @media (max-width: 600px) { .calendar.double { flex-direction: column; } } const DATE_FORMAT = 'YYYY-MM-DD'; const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm'; let currentDate = new Date(); let selectedStart = null; let selectedEnd = null; let...

AI 评审点评

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

【GEMINI】该生成结果完整实现了题目要求的绝大部分功能，代码组织良好，满足单文件和原生 API 的约束。主要扣分点在于：1. 时间选择器的数值未成功合并到点击日期的输出中；2. 键盘导航和悬停预览逻辑中，由于直接从 DOM 文本获取日期导致 Date 对象解析失败，影响了进阶交互的可用性；3. 双日历模式在 UI 上表现为单面板复用，而非标准的左右双面板联动。 【KIMI】该实现完成了日期选择器的基础框架，但核心功能存在严重缺陷：双日历模式未真正实现、年份切换缺失、时间选择器未联动、键盘导航完全不可用。代码结构臃肿，状态管理混乱，多处日期解析逻辑错误。建议重构：分离单月历/双月历渲染逻辑，修复键盘导航的焦点管理，完善时间选择与输入框的联动，优化 localStorage 的数据结构设计。

困难难度评测结果

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

模型生成产物

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

```html 日期选择器 :root { --color-bg: #fff; --color-text: #333; --color-primary: #007bff; --color-disabled: #ccc; --color-hover: #f0f0f0; } .dark { --color-bg: #212121; --color-text: #fff; --color-primary: #66a3ff; --color-disabled: #444; --color-hover: #333; } body { margin: 0; padding: 20px; background-color: var(--color-bg); color: var(--color-text); font-family: sans-serif; } .date-input { padding: 8px; font-size: 14px; } .calendar { position: absolute; background: var(--color-bg); border: 1px solid #ccc; border-radius: 4px; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: none; transition: opacity 0.3s, transform 0.3s; opacity: 0; transform: translateY(5px); } .calendar.show { display: block; opacity: 1; transform: translateY(0); } .calendar[role="dialog"] { position: fixed; top: 50px; left: 50%; transform: translateX(-50%); } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .nav-btn { background: none; border: none; cursor: pointer; color: var(--color-text); font-size: 16px; padding: 0 5px; } .calendar-table { border-collapse: collapse; } .calendar-table th, .calendar-table td { width: 30px; height: 30px; text-align: center; border-radius: 4px; role: gridcell; } .calendar-table td { cursor: pointer; } .calendar-table td[aria-disabled="true"] { color: var(--color-disabled); cursor: not-allowed; } .calendar-table td[aria-selected="true"] { background: var(--color-primary); color: #fff; } .calendar-table td:hover { background: var(--color-hover); } .time-picker { display: none; } .time-picker.show { display: block; } .time-row { display: flex; align-items: center; margin: 10px 0; } .time-row label { margin-right: 10px; } .time-select { width: 60px; padding: 4px; } .quick-buttons { margin-top: 10px; } .quick-btn { margin-right: 10px; padding: 5px 10px; background: var(--color-primary); color: #fff; border: none; border-radius: 4px; cursor: pointer; } .history-list { margin-top: 10px; }...

AI 评审点评

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

【GEMINI】该生成结果在架构设计上表现优秀，采用了标准的「状态驱动视图」模式和 CSS 变量主题系统，符合资深工程师的工程化思维。然而，在功能实现上存在明显缺漏：最核心的「双日历并排」和「键盘导航」未完成，且由于输出截断导致 JavaScript 存在语法错误（函数未闭合），无法直接运行。此外，日期禁用逻辑的边界处理不够精细，导致当天日期无法选中。 【KIMI】该实现为半成品，核心需求的双日历范围选择、键盘导航、撤销功能等均未正确完成。代码结构虽采用集中式状态管理，但render函数臃肿且存在多处逻辑错误。无障碍支持流于表面，ARIA实现不符合实际使用场景。音效系统未完成，主题切换覆盖不全。整体距离工程级组件要求差距较大，建议重新实现关键功能模块。

相关链接

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

加载中...
100%