iter(g78): 新增 space 间距容器组件

packages/skin/ui/src/index.ts

@@ -35,6 +35,7 @@ export { rate } from './rate.js';
 export { empty } from './empty.js';
 export { result } from './result.js';
 export { divider } from './divider.js';
+export { space } from './space.js';
 export { list } from './list.js';
 export { carousel } from './carousel.js';
 export { tree } from './tree.js';

packages/skin/ui/src/space.ts

@@ -0,0 +1,19 @@
+import { h } from '@ui-arch/frame';
+import type { SpaceProps, SpaceSize } from './types.js';
+
+// 间距档位 → 令牌（数字档位不入表，直接拼像素）
+const GAP: Record<Exclude<SpaceSize, number>, string> = { sm: 'var(--ua-space-2)', md: 'var(--ua-space-3)', lg: 'var(--ua-space-4)' };
+// 交叉轴对齐 → flex align-items 取值
+const ALIGN: Record<string, string> = { start: 'flex-start', center: 'center', end: 'flex-end', baseline: 'baseline' };
+// 主轴分布 → flex justify-content 取值
+const JUSTIFY: Record<string, string> = { start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between' };
+
+/*** 间距容器：用 flex gap 统一一排子元素的间距，方向 / 档位 / 对齐 / 换行可调 ***/
+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;
+}

packages/skin/ui/src/types.ts

@@ -650,4 +650,17 @@ export interface MultiSelectProps {
   onChange?: (values: string[]) => void;  // 变更回调（传副本）
 }
 
+/*** 间距档位：令牌档位 sm/md/lg，或直接给像素数 ***/
+export type SpaceSize = 'sm' | 'md' | 'lg' | number;
+
+/*** 间距容器入参 ***/
+export interface SpaceProps {
+  direction?: 'horizontal' | 'vertical';      // 主轴方向；缺省 horizontal
+  size?: SpaceSize;                          // 子元素间距：sm/md/lg 走令牌，数字按像素；缺省 md
+  align?: 'start' | 'center' | 'end' | 'baseline'; // 交叉轴对齐；缺省 center，按钮与文字混排不会高低错位
+  justify?: 'start' | 'center' | 'end' | 'between'; // 主轴分布；缺省 start，between 用于两端撑开
+  wrap?: boolean;                            // 空间不足是否换行；缺省 false
+  block?: boolean;                           // 是否占满父容器宽度；缺省按内容收缩
+}
+
 export type { ColumnDef, RowKey }; // 再导出常用内核类型，方便调用方