# Timeline 时间轴

`Timeline` 用于垂直展示事件流、审批流、日志记录、版本更新记录等。它强调“发生过什么”，通常用于补充 `Steps` 的当前流程状态。

## 最小示例

```aardio
import win.ui;
/*DSG{{*/
var winform = win.form(text="AntdUI Timeline";right=680;bottom=420)
winform.add(host={cls="custom";left=20;top=20;right=650;bottom=380;db=1;dl=1;dr=1;dt=1;z=1})
/*}}*/

import dotNet.AntdUI;

// AntdUI.Timeline(winform.host) 会自动填充 custom 宿主。
var timeline = AntdUI.Timeline(winform.host);
timeline.Gap = 16;

timeline.Items.Add(AntdUI.TimelineItem("提交申请","用户提交表单").SetType(AntdUI.TTypeMini.Primary));
timeline.Items.Add(AntdUI.TimelineItem("审核中","等待管理员审核").SetType(AntdUI.TTypeMini.Warn));
timeline.Items.Add(AntdUI.TimelineItem("已完成","流程结束").SetType(AntdUI.TTypeMini.Success));

timeline.ItemClick = function(sender,e){
    var item = e.Item;
    winform.text = "点击：" + item.Text;
}

winform.show();
win.loopMessage();
```

## 自定义颜色与图标

`TimelineItem.Type` 适合使用主题色；如果需要特定节点颜色，可设置 `Fill`。自定义 SVG 图标可设置 `IconSvg`。

```aardio
import win.ui;
import dotNet.AntdUI;
import System.Drawing;
/*DSG{{*/
var winform = win.form(text="Timeline 自定义节点";right=720;bottom=420)
winform.add(host={cls="custom";left=20;top=20;right=690;bottom=380;db=1;dl=1;dr=1;dt=1;z=1})
/*}}*/

var timeline = AntdUI.Timeline(winform.host);

var item1 = AntdUI.TimelineItem("构建完成","CI 已生成安装包");
item1.ID = "build";
item1.Type = AntdUI.TTypeMini.Success;
timeline.Items.Add(item1);

var item2 = AntdUI.TimelineItem("人工复核","等待测试负责人确认");
item2.ID = "review";
item2.Fill = 0xFFFAAD14;
item2.IconSvg = `<svg viewBox="0 0 1024 1024"><path d="M512 64l448 832H64z"/></svg>`;
timeline.Items.Add(item2);

winform.show();
win.loopMessage();
```

## 常用属性

| 成员 | 说明 |
| --- | --- |
| `Items` | 时间轴项集合，添加 `AntdUI.TimelineItem`。这是 .NET 集合，索引从 `0` 开始。 |
| `ForeColor` | 标题文字颜色；aardio 中直接使用 `0xAARRGGBB` 数值。 |
| `FontDescription` | 描述文字字体。 |
| `Gap` | 项目间距，`int?`。 |
| `PauseLayout` | 批量更新时暂停布局。大量添加项时先设为 `true`，添加完恢复为 `false`。 |
| `ItemClick` | 点击时间轴项事件，事件对象 `e.Item` 为 `TimelineItem`。 |

## TimelineItem

| 属性 | 说明 |
| --- | --- |
| `ID` / `Name` | 业务标识或名称。 |
| `Text` | 标题文本。 |
| `Description` | 描述文本。 |
| `LocalizationText` / `LocalizationDescription` | 本地化键。 |
| `Type` | 颜色类型，常用 `AntdUI.TTypeMini.Default/Primary/Success/Error/Warn/Info`。 |
| `Fill` | 自定义节点颜色；aardio 中直接使用 `0xAARRGGBB` 数值。设置后可覆盖主题类型颜色。 |
| `Icon` / `IconSvg` | 自定义图标。 |
| `Visible` | 是否显示。 |
| `Tag` | 用户自定义数据，可保存业务 key 或对象。 |

`TimelineItem` 支持链式方法：`SetType()`、`SetFill()`、`SetID()`、`SetName()`、`SetText()`、`SetDescription()`、`SetIcon()`、`SetVisible()`、`SetTag()`。

## 枚举速查

`TimelineItem.Type` 常用枚举：

- `AntdUI.TTypeMini.Default`
- `AntdUI.TTypeMini.Primary`
- `AntdUI.TTypeMini.Success`
- `AntdUI.TTypeMini.Error`
- `AntdUI.TTypeMini.Warn`
- `AntdUI.TTypeMini.Info`

## 事件参数

`ItemClick` 的事件委托参数为 `(sender,e)`，被点击的时间轴项在 `e.Item` 中：

```aardio
timeline.ItemClick = function(sender,e){
    var item = e.Item;
    winform.text = item.ID + " / " + item.Text;
}
```

`e` 还继承常见鼠标事件信息，例如 `e.Button`、`e.Clicks`、`e.X`、`e.Y`、`e.Location`。

## 注意

- `Timeline` 适合记录历史日志，不适合表达“当前走到第几步”；当前流程状态请用 `Steps`。
- `timeline.Items` 是 .NET 集合，索引从 `0` 开始；读取第一项可写 `timeline.Items.get_Item(0)`。
- 大量项批量添加时，可设置 `PauseLayout=true`，添加完恢复为 `false`，减少重复布局。
- 组合流程状态与日志记录可参考高级示例：[Steps + Timeline 工单流转面板](../../advanced/steps-timeline-workflow-showcase.html)。