组件：时间轴

时间轴组件用于按时间顺序展示信息流，以垂直方向呈现事件、操作记录或历史节点，支持左排和交替两种布局模式。适用于展示项目里程碑、版本发布日志、用户操作记录、事件追踪等需要清晰时间线的场景。

典型使用场景：

项目开发日志（版本迭代、功能更新记录）
用户操作历史（登录记录、订单状态变更）
事件追踪（工单处理流程、审批进度）
企业动态（公司大事记、荣誉资质）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置布局模式	`模式`	`时间轴1.模式 = "alternate"`
添加单个时间项	`添加项目(项目对象)`	`时间轴1.添加项目({time:"2024-01-01", title:"开始", content:"启动项目", color:"#1890ff"})`
批量设置项目	`置项目数组(项目数组)`	`时间轴1.置项目数组([{time:"...", title:"...", ...}, ...])`
清空所有项目	`清空()`	`时间轴1.清空()`

样式美化参考

时间轴的视觉效果主要由每个项目的配置对象控制，但整体容器也支持样式调整：

整体背景/边框：通过继承的 背景颜色、边框、边框圆角 等属性美化整个时间轴容器。
内边距：通过 内边距 调整项目与容器边缘的距离，使布局更舒适。
布局模式：
- "left"（默认）：所有项目显示在时间轴左侧，适合简洁的列表式展示。
- "alternate"：项目交替显示在时间轴左右两侧，适合更丰富、宽松的布局。

项目对象属性说明：

time（文本型，必填）：时间或日期，显示在节点上方。
title（文本型，必填）：事件标题，加粗显示。
content（文本型，可选）：详细描述，显示在标题下方。
color（文本型，可选）：节点圆点的颜色，支持颜色名称或十六进制，默认使用主题色。

基础示例

最简单的使用方式，添加三个时间点，默认左排布局。

变量 时间轴1 = 创建 时间轴()
时间轴1.左边 = 100
时间轴1.顶边 = 100
时间轴1.宽度 = 400

' 添加项目
时间轴1.添加项目({ time: "2024-01-01", title: "项目启动", content: "团队组建完成，正式开工", color: "#1890ff" })
时间轴1.添加项目({ time: "2024-02-15", title: "原型评审", content: "第一版原型通过客户验收", color: "#52c41a" })
时间轴1.添加项目({ time: "2024-03-30", title: "正式发布", content: "v1.0 上线，用户反响热烈", color: "#faad14" })

添加组件(时间轴1)

综合示例：用户操作日志

本示例模拟展示用户的操作记录，采用交替模式，并支持点击事件回调，方便查看详细信息或执行后续操作。

' ========== 创建时间轴 ==========
变量 操作日志 = 创建 时间轴()
操作日志.左边 = 20
操作日志.顶边 = 20
操作日志.宽度 = 600
操作日志.模式 = "alternate"  ' 交替布局
操作日志.背景颜色 = "#fafafa"
操作日志.边框 = "1px solid #e8e8e8"
操作日志.边框圆角 = 8
操作日志.内边距 = "16px"
添加组件(操作日志)

' ========== 准备数据（实际可从接口获取） ==========
变量 日志数据 = [
    { time: "2024-08-01 09:12", title: "用户登录", content: "IP: 192.168.1.100", color: "#1890ff" },
    { time: "2024-08-01 10:35", title: "查看订单", content: "订单号 #ORD-20240801-001", color: "#52c41a" },
    { time: "2024-08-01 11:20", title: "修改密码", content: "密码强度提升至强", color: "#faad14" },
    { time: "2024-08-01 14:05", title: "退出登录", content: "会话超时自动退出", color: "#ff4d4f" }
]

' 批量添加
操作日志.置项目数组(日志数据)

' ========== 添加点击事件 ==========
' 虽然时间轴本身没有自带"项目被单击"回调，但我们可以利用视图的"被单击"事件整体响应，
' 或者为每个项目单独绑定（需自定义渲染，但当前组件不支持），这里演示整体单击获取当前选中项。
' 由于轻语言时间轴组件未提供内置的"项目被单击"事件，以下为整体单击示例，实际可结合自定义渲染或原生DOM实现。
' 此处展示如何通过整体单击获取坐标判断点击位置，但较为复杂，不推荐。故省略高级交互示例，仅演示基本用法。

' 添加一个按钮，显示选中信息（演示）
变量 查看详情按钮 = 创建 按钮()
查看详情按钮.左边 = 20
查看详情按钮.顶边 = 300
查看详情按钮.宽度 = 120
查看详情按钮.高度 = 36
查看详情按钮.文本 = "查看选中日志"
查看详情按钮.背景颜色 = "#1890ff"
查看详情按钮.文本颜色 = "#ffffff"
添加组件(查看详情按钮)

查看详情按钮.置被单击回调((源对象, 事件对象) => {
    ' 模拟获取当前选中的日志索引（这里固定为0演示）
    弹出提示("您点击了第一条日志：用户登录")
})

注：当前时间轴组件未直接提供节点点击事件，若需要每个节点独立交互，可考虑使用自定义组件或结合原生 DOM 事件实现。也可通过框架的 添加事件 方法为内部元素绑定。

属性详解

模式

类型： 文本型
说明： 设置或获取时间轴的布局模式，可选值：
- "left"（默认）：所有项目节点和时间内容均排列在时间轴的左侧。
- "alternate"：项目交替排列在时间轴左右两侧（奇数在左，偶数在右），视觉效果更丰富。

函数详解

添加项目(项目对象)

功能： 向时间轴末尾添加一个时间项。
参数： 项目对象，是一个对象，包含以下属性（均为文本型）：
- time：必填，时间或日期字符串。
- title：必填，事件标题。
- content：可选，详细描述内容。
- color：可选，节点圆点颜色（如 "#1890ff" 或 "red"）。
返回值： 数值型，新添加项目的索引位置（从0开始）。

示例：

变量 索引 = 时间轴1.添加项目({ time: "2024-08-02", title: "新事件", content: "描述", color: "#faad14" })

置项目数组(项目数组)

功能： 批量设置时间轴项目，会覆盖当前所有项目。
参数： 项目数组，由多个项目对象组成的数组（结构同 添加项目）。
返回值： 无。