iter(g96): 抽屉支持上下滑出方位

packages/skin/ui/src/drawer.ts

@@ -22,7 +22,7 @@ export function drawer(props: DrawerProps, ...children: unknown[]): HTMLElement
     'aside',
     {
       class: `ua-drawer ua-drawer-${props.placement ?? 'right'}`,
-      style: `width:${props.width ?? 320}px`,
+      style: `${props.placement === 'top' || props.placement === 'bottom' ? 'height' : 'width'}:${props.width ?? 320}px`, // 上下滑出改高度
       role: 'dialog',
       'aria-labelledby': titleId,
       'aria-hidden': () => String(!props.open()),

packages/skin/ui/src/types.ts

@@ -343,8 +343,8 @@ export interface ModalProps {
 export interface DrawerProps {
   title: string;             // 标题
   open: Signal<boolean>;     // 开关信号：true 滑出 / false 收起
-  placement?: 'left' | 'right'; // 滑出方向；缺省 right
-  width?: number;            // 面板宽度像素；缺省 320
+  placement?: 'left' | 'right' | 'top' | 'bottom'; // 滑出方向；缺省 right
+  width?: number;            // 面板尺寸像素：左右滑出为宽度，上下滑出为高度；缺省 320
   footer?: unknown;          // 底部操作区内容；缺省不渲染
   onClose?: () => void;      // 关闭回调（遮罩 / × / Esc 触发）
 }

packages/skin/ui/ua.manifest.json

@@ -1490,14 +1490,14 @@
           },
           {
             "n": "placement",
-            "t": "'left' | 'right'",
+            "t": "'left' | 'right' | 'top' | 'bottom'",
             "d": "滑出方向；缺省 right",
             "df": "right"
           },
           {
             "n": "width",
             "t": "number",
-            "d": "面板宽度像素（窄屏最多 92vw）；缺省 320",
+            "d": "面板尺寸（像素）：左右滑出为宽度，上下滑出为高度；缺省 320",
             "df": "320"
           },
           {

packages/skin/ui/ui.css

@@ -1576,8 +1576,30 @@ button.ua-step-dot:hover {
   border-right: 1px solid var(--ua-color-border);
   transform: translateX(-100%);
 }
+.ua-drawer-top,
+.ua-drawer-bottom {
+  left: 0;
+  right: 0;
+  bottom: auto;
+  max-width: none;
+  border-left: none;
+  border-bottom: 1px solid var(--ua-color-border);
+}
+.ua-drawer-top {
+  top: 0;
+  transform: translateY(-100%);
+}
+.ua-drawer-bottom {
+  top: auto;
+  bottom: 0;
+  border-bottom: none;
+  border-top: 1px solid var(--ua-color-border);
+  transform: translateY(100%);
+}
 .ua-drawer-overlay.ua-open .ua-drawer-right,
-.ua-drawer-overlay.ua-open .ua-drawer-left {
+.ua-drawer-overlay.ua-open .ua-drawer-left,
+.ua-drawer-overlay.ua-open .ua-drawer-top,
+.ua-drawer-overlay.ua-open .ua-drawer-bottom {
   transform: none;
 }
 .ua-drawer-head {