iter: b03 新增 skeleton 骨架屏组件（三形状占位 + 扫光 + reduced-motion 兜底）

packages/skin/ui/src/index.ts

@@ -11,6 +11,7 @@ export { badge } from './badge.js';
 export { alert } from './alert.js';
 export { toast, showToast } from './toast.js';
 export { tooltip } from './tooltip.js';
+export { skeleton } from './skeleton.js';
 export { spinner } from './spinner.js';
 export { progress } from './progress.js';
 export { tabs } from './tabs.js';

packages/skin/ui/src/skeleton.ts

@@ -0,0 +1,12 @@
+import { h } from '@ui-arch/frame';
+import type { SkeletonProps } from './types.js';
+
+/*** 骨架屏：variant 决定占位形状（text 多行 / rect 块 / circle 圆），纯展示无状态 ***/
+export function skeleton(props: SkeletonProps): HTMLElement {
+  const variant = props.variant ?? 'rect'; // 缺省整块矩形
+  if (variant !== 'text') return h('div', { class: `ua-skeleton ua-skeleton-${variant}` }); // 单形状直接返回
+  const rows = props.rows ?? 3; // text 行数，末行缩短模拟段落收尾
+  const lines: HTMLElement[] = [];
+  for (let i = 0; i < rows; i++) lines.push(h('div', { class: `ua-skeleton ua-skeleton-text${i === rows - 1 ? ' ua-last' : ''}` }));
+  return h('div', { class: 'ua-skeleton-group' }, ...lines);
+}

packages/skin/ui/src/types.ts

@@ -92,6 +92,12 @@ export interface AlertProps {
   variant?: 'info' | 'success' | 'warning' | 'danger'; // 语义色；缺省 info
 }
 
+/*** 骨架屏入参 ***/
+export interface SkeletonProps {
+  variant?: 'text' | 'rect' | 'circle'; // 占位形状；缺省 rect
+  rows?: number;                         // text 形状的行数；缺省 3
+}
+
 /*** toast 消息提示入参 ***/
 export interface ToastProps {
   message: string;  // 提示文案