iter(g07): 新增 timeline 时间线组件

packages/skin/ui/src/index.ts

@@ -29,6 +29,7 @@ export { stepper } from './stepper.js';
 export { rate } from './rate.js';
 export { empty } from './empty.js';
 export { divider } from './divider.js';
+export { timeline } from './timeline.js';
 export { modal } from './modal.js';
 export { drawer } from './drawer.js';
 export { form, formItem } from './form.js';

packages/skin/ui/src/timeline.ts

@@ -0,0 +1,20 @@
+import { h } from '@ui-arch/frame';
+import type { TimelineItem, TimelineProps } from './types.js';
+
+/*** 单个时间线节点：绝对定位的语义色圆点 + 标题 / 时间 / 正文，pending 节点为虚线空心圈 ***/
+function node(item: TimelineItem, pending: boolean): HTMLElement {
+  const dot = h('span', { class: `ua-tl-dot ua-tl-dot-${pending ? 'pending' : item.variant ?? 'default'}` });
+  const head = h('div', { class: 'ua-tl-head' },
+    h('span', { class: 'ua-tl-title' }, item.title),
+    item.time ? h('span', { class: 'ua-tl-time' }, item.time) : null);
+  const body = item.content ? h('p', { class: 'ua-tl-content' }, item.content) : null;
+  return h('li', { class: `ua-tl-item${pending ? ' is-pending' : ''}` }, dot, h('div', { class: 'ua-tl-body' }, head, body));
+}
+
+/*** 时间线：纵向事件流，mode 决定轴线在左还是在右；pending 为真时末尾补一个进行中节点 ***/
+export function timeline(props: TimelineProps): HTMLElement {
+  const rows: TimelineItem[] = [...props.items]; // 复制入参，避免改动调用方数组
+  if (props.pending) rows.push({ title: '进行中…' }); // 尾部虚节点表示流程尚未结束
+  const items = rows.map((row, i) => node(row, !!props.pending && i === rows.length - 1));
+  return h('ol', { class: `ua-tl ua-tl-${props.mode ?? 'left'}` }, ...items);
+}

packages/skin/ui/src/types.ts

@@ -348,4 +348,19 @@ export interface FormProps {
   onReset?: () => void;  // 重置回调
 }
 
+/*** 时间线条目 ***/
+export interface TimelineItem {
+  title: string;    // 条目标题（事件名）
+  content?: string; // 条目正文补充；缺省不渲染
+  time?: string;    // 时间文案（如 '09:30' / '10-23'）；缺省不渲染
+  variant?: 'default' | 'success' | 'warning' | 'danger'; // 节点语义色；缺省 default
+}
+
+/*** 时间线入参 ***/
+export interface TimelineProps {
+  items: TimelineItem[];              // 条目列表，按时间顺序自上而下
+  mode?: 'left' | 'right';            // 轴线与节点所在侧；缺省 left（内容在右）
+  pending?: boolean;                  // 末尾追加「进行中」虚线节点，表示流程未结束；缺省 false
+}
+
 export type { ColumnDef, RowKey }; // 再导出常用内核类型，方便调用方