iter: d14 新增抽屉 drawer 组件

packages/skin/ui/ui.css

@@ -1014,6 +1014,82 @@
   margin-top: 4px;
 }
 
+/* —— 抽屉（侧滑面板） —— */
+.ua-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  background: rgba(0, 0, 0, 0.36);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.22s ease, visibility 0.22s;
+}
+.ua-drawer-overlay.ua-open {
+  opacity: 1;
+  visibility: visible;
+}
+.ua-drawer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  max-width: 92vw;
+  background: var(--ua-color-surface);
+  border-left: 1px solid var(--ua-color-border);
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.22);
+  transition: transform 0.24s ease;
+}
+.ua-drawer-right {
+  right: 0;
+  transform: translateX(100%);
+}
+.ua-drawer-left {
+  left: 0;
+  border-left: none;
+  border-right: 1px solid var(--ua-color-border);
+  transform: translateX(-100%);
+}
+.ua-drawer-overlay.ua-open .ua-drawer-right,
+.ua-drawer-overlay.ua-open .ua-drawer-left {
+  transform: none;
+}
+.ua-drawer-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ua-space-2);
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--ua-color-border);
+}
+.ua-drawer-title {
+  margin: 0;
+  font-size: var(--ua-font-size-lg);
+  font-weight: 500;
+}
+.ua-drawer-close {
+  border: none;
+  background: none;
+  color: var(--ua-color-text-muted);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+.ua-drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  color: var(--ua-color-text);
+  font-size: var(--ua-font-size-md);
+}
+.ua-drawer-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ua-space-2);
+  padding: 12px 16px;
+  border-top: 1px solid var(--ua-color-border);
+}
+
 /* —— 弹窗 —— */
 .ua-modal-overlay {
   display: none;
@@ -1182,7 +1258,9 @@
   .ua-skeleton::after,
   .ua-form-error,
   .ua-modal,
-  .ua-modal-overlay {
+  .ua-modal-overlay,
+  .ua-drawer,
+  .ua-drawer-overlay {
     animation: none !important;
     transition: none !important;
   }