iter(g174): 时间线支持双侧交替

packages/skin/ui/src/timeline.ts

@@ -11,10 +11,14 @@ function node(item: TimelineItem, pending: boolean): HTMLElement {
   return h('li', { class: `ua-tl-item${pending ? ' is-pending' : ''}` }, dot, h('div', { class: 'ua-tl-body' }, head, body));
 }
 
-/*** 时间线：纵向事件流，mode 决定轴线在左还是在右；pending 为真时末尾补一个进行中节点 ***/
+/*** 时间线：纵向事件流，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));
+  const items = rows.map((row, i) => {
+    const el = node(row, !!props.pending && i === rows.length - 1);
+    if (props.mode === 'alternate') el.classList.add(i % 2 ? 'is-right' : 'is-left'); // 交替排布：奇偶决定左右，轴线由样式表居中
+    return el;
+  });
   return h('ol', { class: `ua-tl ua-tl-${props.mode ?? 'left'}` }, ...items);
 }