iter(g63): card 支持标题操作区、底部操作区与悬停态

packages/skin/ui/src/card.ts

@@ -1,12 +1,22 @@
 import { h } from '@ui-arch/frame';
 import type { CardProps } from './types.js';
 
-/*** 卡片容器：可选标题 + 任意子内容 ***/
+/*** 卡片容器：可选标题行（含右侧操作区）+ 任意子内容 + 可选底部操作区，bordered / hoverable 控制外观 ***/ 
 export function card(props: CardProps, ...children: unknown[]): HTMLElement {
+  const cls = `ua-card${props.bordered === false ? ' ua-card-borderless' : ''}${props.hoverable ? ' ua-card-hoverable' : ''}`;
+  const head = props.title || props.extra
+    ? h(
+      'div',
+      { class: 'ua-card-head' },
+      props.title ? h('h3', { class: 'ua-card-title' }, props.title) : h('span', {}), // 无标题时占位，保证操作区仍靠右
+      props.extra ? h('span', { class: 'ua-card-extra' }, props.extra) : null,
+    )
+    : null;
   return h(
     'div',
-    { class: 'ua-card' },
-    props.title ? h('h3', { class: 'ua-card-title' }, props.title) : null,
+    { class: cls },
+    head,
     ...children,
-  );
+    props.footer ? h('div', { class: 'ua-card-foot' }, props.footer) : null, // 底部操作区：右对齐，仅传了才渲染
+  ) as HTMLElement;
 }