iter(g142): 间距容器支持分隔符

packages/skin/ui/src/space.ts

@@ -8,12 +8,16 @@ const ALIGN: Record<string, string> = { start: 'flex-start', center: 'center', e
 // 主轴分布 → flex justify-content 取值
 const JUSTIFY: Record<string, string> = { start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between' };
 
-/*** 间距容器：用 flex gap 统一一排子元素的间距，方向 / 档位 / 对齐 / 换行可调 ***/
+/*** 间距容器：用 flex gap 统一一排子元素的间距，方向 / 档位 / 对齐 / 换行可调；split 在子元素之间插分隔符 ***/
 export function space(props: SpaceProps, ...children: unknown[]): HTMLDivElement {
   const size = props.size ?? 'md'; // 缺省中档，与多数组件内边距对齐
   const gap = typeof size === 'number' ? `${size}px` : GAP[size]; // 数字档位按像素透传
   const cls = ['ua-space', props.direction === 'vertical' ? 'is-vertical' : '', props.block ? 'is-block' : ''].filter(Boolean).join(' ');
   // 内联只放几何（间距/对齐/换行），颜色与描边一律留给令牌驱动的类名
   const geom = `gap:${gap};align-items:${ALIGN[props.align ?? 'center']};justify-content:${JUSTIFY[props.justify ?? 'start']};flex-wrap:${props.wrap ? 'wrap' : 'nowrap'}`;
-  return h('div', { class: cls, style: geom }, ...children) as HTMLDivElement;
+  // 分隔符：仅 2 个以上子元素时插入，aria-hidden 让读屏跳过装饰符号
+  const nodes = props.split && children.length > 1
+    ? children.flatMap((child, i) => (i === 0 ? [child] : [h('span', { class: 'ua-space-split', 'aria-hidden': 'true' }, props.split), child]))
+    : children;
+  return h('div', { class: cls, style: geom }, ...nodes) as HTMLDivElement;
 }

packages/skin/ui/src/types.ts

@@ -704,6 +704,7 @@ export interface SpaceProps {
   justify?: 'start' | 'center' | 'end' | 'between'; // 主轴分布；缺省 start，between 用于两端撑开
   wrap?: boolean;                            // 空间不足是否换行；缺省 false
   block?: boolean;                           // 是否占满父容器宽度；缺省按内容收缩
+  split?: string;                            // 子元素之间的分隔符（如 · / |）；纯装饰，读屏不念，仅 2 个以上子元素时插入
 }
 
 /*** 表格扩展接口：table-core 实例 + 皮肤层用到的两个取数方法 ***/

packages/skin/ui/ua.manifest.json

@@ -1446,6 +1446,11 @@
             "n": "block",
             "t": "boolean",
             "d": "是否占满父容器宽度；缺省按内容收缩"
+          },
+          {
+            "n": "split",
+            "t": "string",
+            "d": "子元素之间的分隔符（如 · / |）：纯装饰、aria-hidden，仅 2 个以上子元素时插入"
           }
         ],
         "example": "space({ size: 'lg' }, button({ label: '保存' }), button({ label: '取消', variant: 'ghost' })) / space({ direction: 'vertical', align: 'start' }, ...)",
@@ -1453,7 +1458,8 @@
           "把一排需要统一间距的元素交给 space 托管，不再各自写 margin",
           "调间距：size 传 sm/md/lg 走令牌，需要精确像素时直接给数字",
           "竖排用 direction: 'vertical'，配 align: 'start' 让子元素左对齐",
-          "工具栏两端撑开用 justify: 'between' + block: true；窄屏放不下时加 wrap"
+          "工具栏两端撑开用 justify: 'between' + block: true；窄屏放不下时加 wrap",
+          "一行里要塞分隔符（面包屑式「A · B · C」）传 split: '·'：分隔符由容器插入且读屏跳过，不要手写 span 再逐个调 margin"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -4412,3 +4412,10 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   left: var(--ua-space-4);
   right: auto;
 }
+
+/* —— 间距分隔符：弱化色 + 不可选中，避免被当成内容复制 —— */
+.ua-space-split {
+  color: var(--ua-color-text-muted);
+  font-size: var(--ua-font-size-sm);
+  user-select: none;
+}