1. 这个组件解决了什么问题传统表格适合“列表”但不适合“时间分布”。教室租赁业务更关心的是某个教室在某个时刻是否空闲。某个预约块在一天中的精确位置和持续时长。当前时间落在营业时段的什么位置。点击可视化块后能直接进入业务处理流程。这个组件把这些问题统一到一个“时间坐标系统”里解决。2. 核心设计时间 - 分钟 - 像素这是全组件最重要的思想先把时间统一转为分钟数。任意两时间点做分钟差。用固定比例尺映射到像素1 分钟 2px。于是得到统一公式left 分钟差(startTime, blockStart) * 2width 分钟差(blockStart, blockEnd) * 2这让所有元素预约块、锁场块、当前时间线都共享同一个坐标体系位置自然不会乱。3. 为什么能做到 5 分钟刻度组件按“每小时 12 段”渲染小刻度1小时 60分钟60 / 12 5 分钟模板里每小时循环 12 个小刻度样式中每刻度10px。由于比例尺是2px/分钟所以5分钟 10px30分钟 60px1小时 120px这三者完全一致视觉和数据计算形成闭环。4. 当前时间蓝线是怎么做的不是 transform而是绝对定位在时间轴容器里放position: absolute的current_line。计算leftDistance从营业开始到当前时刻的分钟差 * 2。加上左侧固定列宽补偿100px。若当前时间在营业时段外做边界处理隐藏或钉在末端。这种做法直观、稳定、可维护且和预约块定位逻辑一致。5. 数据预处理策略视图模型化接口原始数据并不直接渲染而是先转换成“视图模型”先过滤不在营业区间内的记录。为每条记录计算left/width/background/type。再交给模板渲染。优势模板更干净。业务规则集中在脚本逻辑层。后续改颜色、加状态、调规则成本低。6. 生命周期与 keep-alive 的工程处理该页面在 keep-alive 场景下运行组件处理了两类关键问题回页数据刷新onActivated里做静默刷新保证数据新鲜度。资源释放定时器在onDeactivatedonUnmounted都清理避免内存泄漏或重复计时。这是中后台长时间使用场景里非常实用的稳定性细节。7. 交互闭环设计用户从“看状态”到“处理状态”路径很短看板直接展示占用状态颜色区分已预约/已结算/锁场。点击占用块打开弹窗。弹窗内通过 tab 切换业务动作在线租赁、已租赁等。可视化与业务操作在同一链路闭环效率高。8. 这个实现的亮点与难点亮点把复杂排班问题统一抽象为“时间像素坐标系”。视觉刻度、占用块、当前线全部同源计算精度一致。生命周期处理完整兼顾用户体验和性能稳定。难点时间边界处理半点起止、跨区间裁剪、营业时段外显示策略。精度与性能平衡5分钟粒度下仍要保持渲染可控。状态一致性日期切换、回页刷新、弹窗交互后要保持数据一致。二、可直接复用的“面试亮点/难点”简明话术30秒版本我做了一个教室租赁时间轴看板组件核心是把时间统一转分钟再用2px/分钟映射成像素。预约块位置和宽度、当前时间线、5分钟刻度都基于同一套坐标算法保证了精确对齐。并且在 keep-alive 下用onActivated刷新数据、onDeactivated/onUnmounted清理定时器兼顾了实时性和稳定性。90秒版本这个组件本质是轻量甘特图。难点在于业务不是整点场景有半小时、跨时段、营业区间裁剪等问题。我用“时间坐标系统”统一处理先算分钟差再按2px/分钟映射同时每小时拆 12 段实现 5 分钟刻度所以 5分钟10px、半小时60px、1小时120px视觉和算法一致。数据层先做预处理给每个占用块附加left/width/type再渲染模板更简洁。工程上针对 keep-alive 做回页静默刷新和定时器双重清理避免长时间运行出现脏状态和性能问题。亮点关键词可单独抛时间像素坐标系抽象。5分钟粒度刻度可视化。视图模型化预处理。keep-alive 生命周期治理。