iter(g240): 按钮 loading 态，转圈禁点支持布尔与信号动态同步

packages/skin/ui/src/button.ts

@@ -1,11 +1,22 @@
-import { h } from '@ui-arch/frame';
+import { effect, h, signal } from '@ui-arch/frame';
 import type { ButtonProps } from './types.js';
 
-/*** 按钮：variant 控制视觉强度，disabled 支持布尔或信号禁用，onClick 为点击回调 ***/
+/*** 按钮：variant 控制视觉强度，disabled / loading 支持布尔或信号动态同步（loading 转圈并禁点），onClick 为点击回调 ***/
 export function button(props: ButtonProps): HTMLElement {
-  return h(
+  const loading = typeof props.loading === 'function' ? props.loading : signal(!!props.loading); // 归一成信号：布尔也走同一响应式路径
+  const spin = h('span', { class: 'ua-spinner ua-btn-spin', 'aria-hidden': 'true' }); // 转圈指示：CSS 默认 display:none，加载态才显形
+  const el = h(
     'button',
-    { class: `ua-btn ua-btn-${props.variant ?? 'primary'}${props.size && props.size !== 'md' ? ` is-${props.size}` : ''}`, type: props.type ?? 'button', disabled: props.disabled, onClick: props.onClick }, // 缺省 button：表单内不隐式提交
+    {
+      class: `ua-btn ua-btn-${props.variant ?? 'primary'}${props.size && props.size !== 'md' ? ` is-${props.size}` : ''}`,
+      type: props.type ?? 'button',
+      disabled: () => (typeof props.disabled === 'function' ? props.disabled() : !!props.disabled) || loading(), // 禁点口径：显式禁用或加载中
+      'aria-busy': () => (loading() ? 'true' : null), // 读屏播报忙碌态（null 移除属性）
+      onClick: props.onClick,
+    }, // 缺省 button：表单内不隐式提交
+    spin,
     props.label,
   );
+  effect(() => el.classList.toggle('is-loading', loading())); // 加载态只切类名，不整棵重渲染（保住焦点与子节点）
+  return el;
 }

packages/skin/ui/src/types.ts

@@ -26,6 +26,7 @@ export interface ButtonProps {
   variant?: 'primary' | 'ghost' | 'danger'; // 视觉强度；缺省 primary
   type?: 'button' | 'submit' | 'reset'; // 原生类型；缺省 button（表单内不会意外触发提交）
   disabled?: boolean | Signal<boolean>; // 禁用态：布尔直接置位，传信号则动态同步
+  loading?: boolean | Signal<boolean>;  // 加载态：转圈并禁点（aria-busy）；布尔直接置位，传信号则动态同步
   onClick?: () => void; // 点击回调
 }