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;
 }

packages/skin/ui/src/types.ts

@@ -40,7 +40,11 @@ export interface TextFieldProps {
 
 /*** 卡片入参 ***/
 export interface CardProps {
-  title?: string; // 标题；缺省不渲染标题行
+  title?: string;      // 标题；缺省不渲染标题行
+  extra?: unknown;     // 标题行右侧操作区（按钮 / 链接）；缺省不渲染
+  footer?: unknown;    // 底部操作区；缺省不渲染
+  bordered?: boolean;  // 是否显示边框；缺省 true
+  hoverable?: boolean; // 悬停浮起（可点击卡片）；缺省 false
 }
 
 /*** 皮肤层列定义：内核列定义 + 纯渲染字段（对齐 / 文案格式化），不参与排序筛选语义 ***/