iter(g265): 新增布局骨架组件 layout

packages/skin/ui/ui.css

@@ -4992,7 +4992,8 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 .ua-treeselect-pop,
 .ua-vlist,
 .ua-cmdk-list,
-.ua-timepicker-col {
+.ua-timepicker-col,
+.ua-layout-content {
   scrollbar-width: thin; /* 标准属性：Firefox / Chromium 121+ 生效，细条不挤内容 */
   scrollbar-color: var(--ua-color-scrollbar) transparent; /* 拇指走令牌、轨道透明，避免画出方块底 */
 }
@@ -5314,3 +5315,95 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
     translate: none !important; /* 少数组件用独立 translate 属性做位移，一并归零 */
   }
 }
+
+/* ---- 布局骨架：只管四区位置与间距，颜色一律走表面 / 描边令牌 ----
+   骨架不带圆角与投影：它是页面容器而非卡片，浮起感应留给内容里的 card / modal */
+.ua-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  background: var(--ua-color-bg);
+  color: var(--ua-color-text);
+}
+
+.ua-layout-header {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--ua-space-3);
+  padding: var(--ua-space-3) var(--ua-space-4);
+  background: var(--ua-color-surface);
+  box-shadow: var(--ua-shadow-hairline); /* 页头与内容之间只留一道细线，不叠边框 */
+  font-size: var(--ua-font-size-md);
+}
+
+/* 吸顶：长内容里页头随滚动留在顶部，层级与其它吸顶件同档 */
+.ua-layout.is-sticky .ua-layout-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--ua-z-sticky);
+}
+
+/* 折叠开关：方形小按钮，只放符号，所以宽度直接锁控件高度档位 */
+.ua-layout-toggle {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--ua-control-h-sm);
+  height: var(--ua-control-h-sm);
+  padding: 0;
+  border: 1px solid var(--ua-color-border);
+  border-radius: var(--ua-radius-sm);
+  background: transparent;
+  color: var(--ua-color-text-muted);
+  font-size: var(--ua-font-size-sm);
+  cursor: pointer;
+  transition: background var(--ua-duration-fast) var(--ua-ease), color var(--ua-duration-fast) var(--ua-ease);
+}
+
+.ua-layout-toggle:hover {
+  background: var(--ua-color-tint-accent-weak);
+  color: var(--ua-color-accent);
+}
+
+.ua-layout-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--ua-focus-ring);
+}
+
+.ua-layout-body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0; /* 允许内部内容区自己滚动，而不是把整页撑高 */
+}
+
+/* 侧栏：宽度由内联的展开值给，折叠时收成 0 并由 overflow 裁掉内容 */
+.ua-layout-sider {
+  flex: 0 0 auto;
+  overflow: hidden;
+  padding: var(--ua-space-3);
+  border-right: 1px solid var(--ua-color-border);
+  background: var(--ua-color-surface);
+  transition: width var(--ua-duration-base) var(--ua-ease), padding var(--ua-duration-base) var(--ua-ease);
+}
+
+.ua-layout-sider.is-collapsed {
+  width: 0 !important; /* 压过内联展开宽度：折叠态是唯一的宽度来源，避免两处各写一份 */
+  padding-inline: 0;
+}
+
+.ua-layout-content {
+  flex: 1 1 auto;
+  min-width: 0; /* 内容区允许被压缩：否则宽表格会把侧栏挤回去 */
+  padding: var(--ua-space-4);
+  overflow: auto;
+}
+
+.ua-layout-footer {
+  flex: 0 0 auto;
+  padding: var(--ua-space-3) var(--ua-space-4);
+  border-top: 1px solid var(--ua-color-border);
+  color: var(--ua-color-text-muted);
+  font-size: var(--ua-font-size-sm);
+}