iter: d11 modal 补 size 档位与 footer 操作区

packages/skin/ui/src/modal.ts

@@ -16,9 +16,10 @@ export function modal(props: ModalProps, ...children: unknown[]): HTMLElement {
   });
   const box = h(
     'div',
-    { class: 'ua-modal' },
+    { class: `ua-modal ua-modal-${props.size ?? 'md'}` },
     h('div', { class: 'ua-modal-head' }, h('h3', { class: 'ua-modal-title' }, props.title), h('button', { class: 'ua-modal-close', onClick: close }, '×')),
     h('div', { class: 'ua-modal-body' }, ...children),
+    props.footer ? h('div', { class: 'ua-modal-foot' }, props.footer) : null, // 底部操作区：右对齐，仅传了才渲染
   );
   overlay.append(box);
   effect(() => {

packages/skin/ui/src/types.ts

@@ -213,6 +213,8 @@ export interface TabsProps {
 export interface ModalProps {
   title: string;           // 标题
   open: Signal<boolean>;   // 开关信号：true 显示 / false 隐藏
+  size?: 'sm' | 'md' | 'lg'; // 宽度档位；缺省 md（420px），sm 340px / lg 640px
+  footer?: unknown;        // 底部操作区内容（常见为按钮组）；缺省不渲染
   onClose?: () => void;    // 关闭回调（点遮罩、× 或 Esc 触发）
 }
 

packages/skin/ui/ua.manifest.json

@@ -35,7 +35,7 @@
       "spinner(props)：加载指示器，size 控制直径",
       "progress(props)：进度条，轨道 + 渐变流动填充，value 信号驱动 0-100，满格切 success 色",
       "tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签",
-      "modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭",
+      "modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区",
       "form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit",
       "formItem(props, control)：表单字段，label + 必填红星 + 规则校验 + 错误区，返回 { el, validate } 句柄",
       "dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态；loading 为真时数据行换骨架行且筛选/翻页禁用，内核为 table-core"
@@ -883,6 +883,17 @@
             "r": 1,
             "d": "标题"
           },
+          {
+            "n": "size",
+            "t": "'sm' | 'md' | 'lg'",
+            "d": "宽度档位：sm 340px / md 420px / lg 640px；缺省 md",
+            "df": "md"
+          },
+          {
+            "n": "footer",
+            "t": "unknown",
+            "d": "底部操作区内容（常见为按钮组，右对齐）；缺省不渲染"
+          },
           {
             "n": "onClose",
             "t": "() => void",
@@ -900,7 +911,8 @@
           "创建布尔信号 open = signal(false)，弹窗初始隐藏",
           "把 open 传给 modal，其余参数为弹窗内容子节点",
           "打开：open(true)；关闭：open(false)，点遮罩或 × 会自动写回 false",
-          "入场自带遮罩淡入 + 弹窗上浮动画"
+          "入场自带遮罩淡入 + 弹窗上浮动画",
+          "底部操作按钮放进 footer（如取消/确定），需要更宽内容用 size: 'lg'，窄确认框用 'sm'"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -984,6 +984,20 @@
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
   animation: ua-pop-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
 }
+/* 宽度档位：md 为基准，sm / lg 覆盖 */
+.ua-modal-sm {
+  width: min(340px, 90vw);
+}
+.ua-modal-lg {
+  width: min(640px, 92vw);
+}
+.ua-modal-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ua-space-2);
+  padding: 12px 16px;
+  border-top: 1px solid var(--ua-color-border);
+}
 @keyframes ua-fade {
   from {
     opacity: 0;