会议室时间轴需用语义化<ol>结构，结合ISO 8601时间标记、伪元素精准绘线、表单实时联动及响应式卡片布局，确保可访问性、准确性与交互性统一。
会议室预定表单里的时间轴占用展示，核心不是“做个漂亮图表”，而是让用户一眼看清「哪些时段已被占、哪些还能选、冲突是否发生」。这需要结构语义清晰、样式直观、交互即时反馈，三者缺一不可。
用 <ol> 搭建真正可读的时间轴结构
别用 div 堆时间条，也别用 ul 冒充顺序——时间占用是严格有序的事件流，<ol class="booking-timeline"> 是唯一合规选择。每个已预约时段用一个 <li> 表示，内部嵌套 <time datetime="2026-09-05T14:00:00+08:00">14:00–15:30</time>。这样搜索引擎能抓取、读屏器会按序播报、打印时仍保留编号，连邮件客户端预览都正常显示。
- datetime 属性必须用 ISO 8601 格式，带时区（如
+08:00），不能写成 “14:00” 或 “2026/09/05” - 后端返回的时间字符串（如 "2026-09-05 14:00"）需前端转为标准格式：
new Date(str).toISOString() - 预留空闲时段也应作为
<li>存在，用data-status="available"标记，方便 CSS 区分样式
CSS 画线不靠 border，用伪元素精准控制
给 <ol> 加 border-left 看似简单，但缩放时错位、打印时偏移、高 DPI 屏幕模糊——全因 border 参与盒模型计算。正确做法是：
- 主时间线用
ol::before：绝对定位居中，top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; - 每个时段节点用
li::after：定位在线上中点，content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; - 已占时段圆点设为红色实心，空闲时段用浅灰空心，视觉对比一目了然
结合表单实时联动，让选择有依据
时间轴不是静态装饰，要和下方的预约表单双向响应：
立即学习“前端免费学习笔记（深入）”；
- 用户点击某个空闲时段，自动填充
input[type="datetime-local"]的值，并高亮该<li> - 用户修改表单时间，立即扫描时间轴，把对应时段标记为「当前选择」，其他已占时段保持原色
- 提交前校验：若所选时间与某
data-status="booked"的<li>时间重叠，禁用提交按钮并提示「该时段已被预约」 - 用 Intersection Observer 监听可视区域，只对当前可见的时段做 hover 提示（含预约人、部门、事由），避免性能浪费
移动端适配：从竖排到卡片，不牺牲语义
小屏下强行竖排时间轴会挤成一条细线。合理方案是：
- 用
@media (max-width: 768px)切换布局：时间轴转为横向滚动容器，overflow-x: auto，内层<ol>设display: flex; gap: 8px; - 每个
<li>改为卡片式：顶部显示时间区间，下方简写事由，右上角小徽章标状态（✅ 已约 / ✅ 可选） - 保留所有
<time datetime>和<ol>结构，仅改样式——语义和可访问性丝毫不打折扣
