iter(g165): 步骤条支持竖向排列

packages/skin/ui/src/stepper.ts

@@ -1,7 +1,7 @@
 import { effect, h } from '@ui-arch/frame';
 import type { StepperProps } from './types.js';
 
-/*** 步骤条：done/current/upcoming 三态横向流程指示，clickable 时已完成步骤可点回跳并写回 active 信号 ***/
+/*** 步骤条：done/current/upcoming 三态流程指示（横向 / 竖向），clickable 时已完成步骤可点回跳并写回 active 信号 ***/
 export function stepper(props: StepperProps): HTMLElement {
   const active = props.active;
   const clickStep = (i: number): void => { if (!props.clickable || i >= active()) return; // 卫语句：不可点或未完成不回跳
@@ -20,7 +20,8 @@ export function stepper(props: StepperProps): HTMLElement {
       const li = h('li', { class: `ua-step ua-step-${state}`, 'aria-current': state === 'current' ? 'step' : null }, head, body);
       return li;
     });
-    return h('ol', { class: 'ua-stepper' }, ...items);
+    const cls = props.direction === 'vertical' ? 'ua-stepper is-vertical' : 'ua-stepper'; // 方向只影响布局类，渲染逻辑共用
+    return h('ol', { class: cls }, ...items);
   };
   let el!: HTMLElement; // 当前渲染产物（effect 首跑赋值）
   effect(() => { const next = render(); if (el) el.replaceWith(next); el = next; }); // active 变化整条重渲染（条目少，开销可忽略）

packages/skin/ui/src/types.ts

@@ -224,6 +224,7 @@ export interface StepperProps {
   steps: StepperItem[];    // 步骤列表（按顺序渲染）
   active: Signal<number>;  // 当前步索引（0 基），双向绑定（回跳写回、外部赋值同步）
   clickable?: boolean;     // 已完成步骤是否可点击回跳；缺省 false
+  direction?: 'horizontal' | 'vertical'; // 排列方向；缺省 horizontal（竖向适合侧栏 / 移动端，连接线走圆点下方）
   onChange?: (index: number) => void; // 步骤切换回调（点击回跳触发）
 }
 

packages/skin/ui/ua.manifest.json

@@ -1331,6 +1331,12 @@
             "t": "boolean",
             "d": "已完成步骤是否可点击回跳；缺省 false"
           },
+          {
+            "n": "direction",
+            "t": "'horizontal' | 'vertical'",
+            "df": "'horizontal'",
+            "d": "排列方向：horizontal 横排连接线在节点之间；vertical 竖排、连接线落在圆点下方，已走完的一段用主色"
+          },
           {
             "n": "onChange",
             "t": "(index: number) => void",
@@ -1342,7 +1348,8 @@
         "steps": [
           "用 signal(0) 创建当前步索引，传入 active；索引之前的步骤显示 ✓ 已完成态",
           "流程推进时外部赋值即可：step(step() + 1)，组件三态自动跟随",
-          "clickable: true 时已完成步骤可点击回跳并写回信号，配合 onChange 同步业务状态"
+          "clickable: true 时已完成步骤可点击回跳并写回信号，配合 onChange 同步业务状态",
+          "侧栏或移动端传 direction: 'vertical'：圆点成一列、说明文字紧贴右侧，步与步之间由圆点下方的竖线相连（末步不画线，已完成的段用主色标进度）"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -915,6 +915,39 @@ body.ua-col-resizing {
   padding: 0;
   list-style: none;
 }
+.ua-stepper.is-vertical {
+  flex-direction: column;
+  gap: 0;
+}
+.ua-stepper.is-vertical .ua-step {
+  flex: none;
+  position: relative;
+  padding: 0 0 var(--ua-space-3);
+}
+.ua-stepper.is-vertical .ua-step:last-child {
+  padding-bottom: 0;
+}
+.ua-stepper.is-vertical .ua-step + .ua-step {
+  padding-left: 0; /* 横排的左内距在竖排里会让圆点错位 */
+}
+.ua-stepper.is-vertical .ua-step + .ua-step::before {
+  display: none; /* 横排的短横线在竖排里换成圆点下方的长线 */
+}
+.ua-stepper.is-vertical .ua-step::after {
+  content: '';
+  position: absolute;
+  left: 13px; /* 圆点水平中心 */
+  top: 30px;
+  bottom: 2px;
+  width: 1px;
+  background: var(--ua-color-border);
+}
+.ua-stepper.is-vertical .ua-step:last-child::after {
+  display: none; /* 末步没有下一段可连 */
+}
+.ua-stepper.is-vertical .ua-step-done::after {
+  background: color-mix(in srgb, var(--ua-color-accent) 55%, transparent); /* 已走完的一段用主色，进度一眼可读 */
+}
 .ua-step {
   display: flex;
   align-items: flex-start;