时间轴排班看板组件-思路

一个“时间轴排班看板组件”，可以理解为中后台场景下的轻量甘特图。它把“教室 + 时间段占用记录”可视化成可操作的二维视图。

---

1. 这个组件解决了什么问题

传统表格适合“列表”，但不适合“时间分布”。教室租赁业务更关心的是：

1. 某个教室在某个时刻是否空闲。
2. 某个预约块在一天中的精确位置和持续时长。
3. 当前时间落在营业时段的什么位置。
4. 点击可视化块后，能直接进入业务处理流程。

这个组件把这些问题统一到一个“时间坐标系统”里解决。

---

2. 核心设计：时间 -> 分钟 -> 像素

这是全组件最重要的思想：

1. 先把时间统一转为分钟数。
2. 任意两时间点做分钟差。
3. 用固定比例尺映射到像素：1 分钟 = 2px。

于是得到统一公式：

• left = 分钟差(startTime, blockStart) * 2
• width = 分钟差(blockStart, blockEnd) * 2

这让所有元素（预约块、锁场块、当前时间线）都共享同一个坐标体系，位置自然不会乱。

---

3. 为什么能做到 5 分钟刻度

组件按“每小时 12 段”渲染小刻度：

• 1小时 = 60分钟
• 60 / 12 = 5 分钟

模板里每小时循环 12 个小刻度，样式中每刻度 10px。
由于比例尺是 2px/分钟，所以：

• 5分钟 = 10px
• 30分钟 = 60px
• 1小时 = 120px

这三者完全一致，视觉和数据计算形成闭环。

---

4. 当前时间蓝线是怎么做的

不是 transform，而是绝对定位：

1. 在时间轴容器里放 position: absolute 的 current_line。
2. 计算 leftDistance：从营业开始到当前时刻的分钟差 * 2。
3. 加上左侧固定列宽补偿（100px）。
4. 若当前时间在营业时段外，做边界处理（隐藏或钉在末端）。

这种做法直观、稳定、可维护，且和预约块定位逻辑一致。

---

5. 数据预处理策略（视图模型化）

接口原始数据并不直接渲染，而是先转换成“视图模型”：

1. 先过滤不在营业区间内的记录。
2. 为每条记录计算 left/width/background/type。
3. 再交给模板渲染。

优势：

1. 模板更干净。
2. 业务规则集中在脚本逻辑层。
3. 后续改颜色、加状态、调规则成本低。

---

6. 生命周期与 keep-alive 的工程处理

该页面在 keep-alive 场景下运行，组件处理了两类关键问题：

1. 回页数据刷新：onActivated 里做静默刷新，保证数据新鲜度。
2. 资源释放：定时器在 onDeactivated + onUnmounted 都清理，避免内存泄漏或重复计时。

这是中后台长时间使用场景里非常实用的稳定性细节。

---

7. 交互闭环设计

用户从“看状态”到“处理状态”路径很短：

1. 看板直接展示占用状态（颜色区分已预约/已结算/锁场）。
2. 点击占用块打开弹窗。
3. 弹窗内通过 tab 切换业务动作（在线租赁、已租赁等）。

可视化与业务操作在同一链路闭环，效率高。

---

8. 这个实现的亮点与难点

亮点：

1. 把复杂排班问题统一抽象为“时间像素坐标系”。
2. 视觉刻度、占用块、当前线全部同源计算，精度一致。
3. 生命周期处理完整，兼顾用户体验和性能稳定。

难点：

1. 时间边界处理：半点起止、跨区间裁剪、营业时段外显示策略。
2. 精度与性能平衡：5分钟粒度下仍要保持渲染可控。
3. 状态一致性：日期切换、回页刷新、弹窗交互后要保持数据一致。

---

二、可直接复用的“面试亮点/难点”简明话术

30秒版本
我做了一个教室租赁时间轴看板组件，核心是把时间统一转分钟，再用 2px/分钟 映射成像素。预约块位置和宽度、当前时间线、5分钟刻度都基于同一套坐标算法，保证了精确对齐。并且在 keep-alive 下用 onActivated 刷新数据、onDeactivated/onUnmounted 清理定时器，兼顾了实时性和稳定性。

90秒版本
这个组件本质是轻量甘特图。难点在于业务不是整点场景，有半小时、跨时段、营业区间裁剪等问题。我用“时间坐标系统”统一处理：先算分钟差，再按 2px/分钟 映射；同时每小时拆 12 段实现 5 分钟刻度，所以 5分钟=10px、半小时=60px、1小时=120px，视觉和算法一致。数据层先做预处理，给每个占用块附加 left/width/type 再渲染，模板更简洁。工程上针对 keep-alive 做回页静默刷新和定时器双重清理，避免长时间运行出现脏状态和性能问题。

亮点关键词（可单独抛）

1. 时间像素坐标系抽象。
2. 5分钟粒度刻度可视化。
3. 视图模型化预处理。
4. keep-alive 生命周期治理。
5. 可视化与业务弹窗操作闭环。

难点关键词（可单独抛）

1. 半点与边界裁剪。
2. 时间精度和渲染性能平衡。
3. 多入口状态一致性（切日、回页、弹窗回刷）。

---