SepTimeline 时间轴组件 v1.0.0

时间流程可视化 · 垂直/水平 direction · mode 左/右/交替 · type 五色节点 · 自定义颜色 · 空心/大号/图标节点 · label 双侧标签 · 点击交互 onItemClick · 倒序 reverse · 幽灵节点 pending · 虚线/点线连接 · 时间戳上下放置 · 动态 setMode/setDirection/setReverse/setPending/setItems/setState

1. 基础用法（三种 mode）

HTML 声明式标签（alternate 模式 + 带 description）
JS API 初始化（alternate 模式 + 带 description）
JS API 初始化 — 动态切换 mode
Left Right Alternate mode: left

1b. 水平时间轴 direction=horizontal

HTML 声明式标签（水平布局，节点在顶部居中）
JS API 初始化
JS API 初始化 — 动态切换 direction
垂直 水平 direction: vertical

2. 节点颜色 type

HTML 声明式标签（五色节点）
JS API 初始化（五色节点）
JS API 初始化（运维场景）

3. 自定义颜色 color

HTML 声明式标签（品牌色 / 阶段色）
JS API 初始化（品牌色）
JS API 初始化（项目阶段）

4. 空心节点 hollow

HTML 声明式标签
JS API 初始化

5. 大号节点 size=large

HTML 声明式标签
JS API 初始化

6. 自定义图标 icon

HTML 声明式标签（icon 属性支持 emoji / 文本 / SVG）
JS API 初始化

7. 倒序 reverse

HTML 声明式标签（项目里程碑倒序展示）
JS API 初始化（项目里程碑倒序）
JS API 初始化 — 动态切换
切换倒序 reverse: false

8. 幽灵节点 pending

HTML 声明式标签（自定义 pendingText）
JS API 初始化（自定义 pendingText）
JS API 初始化 — 动态切换
显示/隐藏 幽灵节点 pending: true

9. 连接线样式 lineType / lineColor

HTML 声明式标签（虚线 + 自定义线条颜色）
JS API 初始化

10. 时间戳上下放置 timePlacement

HTML 声明式标签（每个 item 可独立设置 timePlacement: top / bottom）
JS API 初始化

11. 隐藏时间 hideTime

HTML 声明式标签（item.hideTime=true 隐藏时间戳）
JS API 初始化

12. 综合场景：物流跟踪

HTML 声明式标签（alternate + icon + 彩色节点 + description）
JS API 初始化（alternate + icon + 彩色节点）

13. subscribe 订阅 + className

HTML 声明式标签（className 自定义容器样式）
JS API 初始化 — subscribe 监听 + setState 通知 + 自定义容器 className
模拟完成最后一步 状态：未完成

13b. 点击交互 onItemClick

JS API 初始化（点击节点查看详情，第三项禁用点击）
点击结果
点击左侧时间轴节点查看详情...

13c. label 双侧标签

HTML 声明式标签（alternate 模式，label 显示在节点另一侧）
JS API 初始化（left 模式，label 显示在左侧时间列）

13d. loading 整体加载状态

HTML 声明式标签（loading=true 显示骨架屏）
JS API 初始化 — 模拟数据加载
切换加载状态 loading: false

13e. lineArrow 箭头指示

HTML 声明式标签（线末端三角箭头 ▼）
JS API 初始化 — 水平模式箭头 ▶
切换箭头 lineArrow: true

13f. timestampPlacement 时间标签位置

HTML 声明式标签（timestamp-placement="top"）
JS API 初始化 — 四种模式切换
Content（默认） Top Bottom Hide timestampPlacement: bottom

13g. size 全局尺寸

HTML 声明式标签（size="small"）
JS API 初始化 — 三档切换
Small Default Large size: default

13h. collapse 展开/折叠

HTML 声明式标签（collapseCount=3 collapsed）
JS API 初始化（可点击切换）

13i. groupBy 日期分组分隔

HTML 声明式标签（groupBy="date"）
水平方向（direction="horizontal" groupBy="date"）
JS API 初始化

13j. loadMore 动态加载更多

HTML 声明式标签（loadMore="true" onLoadMore="..."）
JS API 初始化（模拟异步加载）

13k. 自定义节点内容 dot（HTML）

HTML 声明式标签（dot 支持任意 HTML，优先级高于 icon）
JS API 初始化

13l. 对侧自定义内容 opposite

HTML 声明式标签（alternate 模式，opposite 放在节点另一侧）
JS API 初始化（left 模式）

13m. 激活态高亮 active / activeIndex

HTML 声明式标签（item.active=true 单独高亮）
JS API 初始化 — activeIndex 全局激活（点击切换）
上一项 下一项 activeIndex: 1

13n. 分组可折叠 groupCollapsible

HTML 声明式标签（groupBy + groupCollapsible，点击分组标签折叠）
JS API 初始化 — 折叠状态回调
折叠分组：[]

13o. 单条连线定制 / tooltip / className

HTML 声明式标签（item.lineType / lineColor / tooltip / className）
JS API 初始化

14. 自动化断言