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

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;