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

.ua/index.json

@@ -1,6 +1,6 @@
 {
   "$schema": "ui-arch-registry-index/0.1",
-  "generatedAt": "2026-10-26T08:20:12.255Z",
+  "generatedAt": "2026-10-26T08:21:19.789Z",
   "repoRoot": ".",
   "packages": [
     {
@@ -2049,8 +2049,8 @@
               },
               {
                 "n": "mode",
-                "t": "'left' | 'right'",
-                "d": "轴线与节点所在侧；缺省 left（内容在右），right 时内容左对齐轴线居右",
+                "t": "'left' | 'right' | 'alternate'",
+                "d": "轴线位置：left / right 单侧排布；alternate 双侧交替（轴线居中、奇偶左右分列，窄屏自动退回左侧）",
                 "df": "left"
               },
               {
@@ -2067,7 +2067,8 @@
               "time 是纯展示文案，格式自由（'09:12' / '10-23 18:00'），组件不做日期解析",
               "流程未结束时传 pending: true，末尾自动补一个虚线脉冲节点，完成后置回 false 即消失",
               "需要轴线居右（如右侧栏时间流）时传 mode: 'right'，条目与节点整体镜像",
-              "content 为纯文本；需要按钮等交互内容时改用 accordion / card 组合"
+              "content 为纯文本；需要按钮等交互内容时改用 accordion / card 组合",
+              "要做里程碑式双侧时间线就传 mode: 'alternate'：轴线居中、条目按奇偶分列左右并在窄屏退回单侧，pending 虚节点同样参与交替计数"
             ]
           },
           {

apps/demo/main.ts

@@ -798,6 +798,15 @@ const content = h(
       ],
       pending: !flowDone(),
     }),
+    divider({ dashed: true }),
+    timeline({ // 双侧交替：轴线居中，奇偶左右分列，窄屏退回单列
+      mode: 'alternate',
+      items: [
+        { title: '立项评审通过', time: '10-01', content: '范围与里程碑确定', variant: 'success' },
+        { title: '设计定稿', time: '10-09', content: '视觉与令牌同步交付', variant: 'success' },
+        { title: '一期上线', time: '10-22', content: '灰度 10% → 全量', variant: 'warning' },
+      ],
+    }),
   ),
   section(
     'sec-list',

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-26T08:20:12.255Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T08:21:19.789Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -1030,7 +1030,7 @@ dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓
 参数：
 
 - items（必填）：TimelineItem[] —— 条目列表，按时间顺序自上而下；每项含 title（必填）、content、time、variant
-- mode（默认 left）：'left' | 'right' —— 轴线与节点所在侧；缺省 left（内容在右），right 时内容左对齐轴线居右
+- mode（默认 left）：'left' | 'right' | 'alternate' —— 轴线位置：left / right 单侧排布；alternate 双侧交替（轴线居中、奇偶左右分列，窄屏自动退回左侧）
 - pending（默认 false）：boolean —— 末尾追加虚线「进行中…」节点，表示流程尚未结束；缺省 false
 
 示例：
@@ -1047,6 +1047,7 @@ timeline({ items: [{ title: '提交审批', time: '09:12', variant: 'success' },
 4. 流程未结束时传 pending: true，末尾自动补一个虚线脉冲节点，完成后置回 false 即消失
 5. 需要轴线居右（如右侧栏时间流）时传 mode: 'right'，条目与节点整体镜像
 6. content 为纯文本；需要按钮等交互内容时改用 accordion / card 组合
+7. 要做里程碑式双侧时间线就传 mode: 'alternate'：轴线居中、条目按奇偶分列左右并在窄屏退回单侧，pending 虚节点同样参与交替计数
 
 现场演示：apps/docs/demo.html#sec-timeline
 

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);
 }

packages/skin/ui/src/types.ts

@@ -435,7 +435,7 @@ export interface TimelineItem {
 /*** 时间线入参 ***/
 export interface TimelineProps {
   items: TimelineItem[];              // 条目列表，按时间顺序自上而下
-  mode?: 'left' | 'right';            // 轴线与节点所在侧；缺省 left（内容在右）
+  mode?: 'left' | 'right' | 'alternate'; // 轴线位置：left / right 单侧，alternate 双侧交替（轴线居中，窄屏自动退回左侧）；缺省 left
   pending?: boolean;                  // 末尾追加「进行中」虚线节点，表示流程未结束；缺省 false
 }
 

packages/skin/ui/ua.manifest.json

@@ -1920,8 +1920,8 @@
           },
           {
             "n": "mode",
-            "t": "'left' | 'right'",
-            "d": "轴线与节点所在侧；缺省 left（内容在右），right 时内容左对齐轴线居右",
+            "t": "'left' | 'right' | 'alternate'",
+            "d": "轴线位置：left / right 单侧排布；alternate 双侧交替（轴线居中、奇偶左右分列，窄屏自动退回左侧）",
             "df": "left"
           },
           {
@@ -1938,7 +1938,8 @@
           "time 是纯展示文案，格式自由（'09:12' / '10-23 18:00'），组件不做日期解析",
           "流程未结束时传 pending: true，末尾自动补一个虚线脉冲节点，完成后置回 false 即消失",
           "需要轴线居右（如右侧栏时间流）时传 mode: 'right'，条目与节点整体镜像",
-          "content 为纯文本；需要按钮等交互内容时改用 accordion / card 组合"
+          "content 为纯文本；需要按钮等交互内容时改用 accordion / card 组合",
+          "要做里程碑式双侧时间线就传 mode: 'alternate'：轴线居中、条目按奇偶分列左右并在窄屏退回单侧，pending 虚节点同样参与交替计数"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -2156,6 +2156,41 @@ button.ua-step-dot:hover {
 .ua-tl-right .ua-tl-item:last-child {
   padding-bottom: 0;
 }
+.ua-tl-alternate::before {
+  left: 50%; /* 双侧交替：轴线居中，圆点贴中线 */
+}
+.ua-tl-alternate .ua-tl-item {
+  width: 50%;
+  padding: 0 var(--ua-space-3) var(--ua-space-3) 0;
+}
+.ua-tl-alternate .ua-tl-item.is-left {
+  text-align: right;
+}
+.ua-tl-alternate .ua-tl-item.is-right {
+  margin-left: 50%;
+  padding: 0 0 var(--ua-space-3) var(--ua-space-3);
+  text-align: left;
+}
+.ua-tl-alternate .ua-tl-dot {
+  left: auto;
+  right: -5px;
+}
+.ua-tl-alternate .is-right .ua-tl-dot {
+  left: -5px;
+  right: auto;
+}
+@media (max-width: 640px) {
+  .ua-tl-alternate::before { left: 5px; }
+  .ua-tl-alternate .ua-tl-item,
+  .ua-tl-alternate .ua-tl-item.is-right {
+    width: auto;
+    margin-left: 0;
+    padding: 0 0 var(--ua-space-3) 22px;
+    text-align: left;
+  }
+  .ua-tl-alternate .ua-tl-dot,
+  .ua-tl-alternate .is-right .ua-tl-dot { left: 0; right: auto; }
+}
 .ua-tl-dot {
   position: absolute;
   left: 0;