xiaoxia-saas/apps/web/src/components/layout/MainLayout.css

/* ============================================================
   MainLayout.css - 主布局样式（Task 1.2）

   结构：
     .xx-app-shell          全屏 flex 容器
     ├── header (xx-top-nav) 顶部导航（Header.tsx 管理）
     └── .xx-app-body       水平 flex 行
         ├── .xx-app-sidebar  左侧侧边栏（240px / 64px 折叠）
         └── .xx-app-content  主内容区（自适应）

   所有尺寸/颜色均使用 global.css 设计系统变量
   ============================================================ */

/* ── 应用外壳 ─────────────────────────────────────────────── */
.xx-app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-secondary);
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

/* ── 主体区域（侧边栏 + 内容） ────────────────────────────── */
.xx-app-body {
  display: flex;
  flex: 1;
  min-height: 0; /* 允许子元素收缩，防止溢出 */
}

/* ── 侧边栏 ───────────────────────────────────────────────── */
.xx-app-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid rgba(226, 232, 240, 0.9);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-slow);
  overflow: hidden;
  z-index: var(--z-fixed);
}

/* 折叠态 —— 64px 图标栏 */
.xx-app-sidebar.xx-collapsed {
  width: 64px;
}

/* ── 侧边栏折叠按钮 ───────────────────────────────────────── */
.xx-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-light);
  height: 48px;
  flex-shrink: 0;
}

.xx-sidebar-toggle button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: var(--transition-colors);
  white-space: nowrap;
  overflow: hidden;
}

.xx-sidebar-toggle button:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

/* 折叠时隐藏文字标签，仅保留图标居中 */
.xx-app-sidebar.xx-collapsed .xx-sidebar-toggle {
  justify-content: center;
  padding: var(--space-sm) var(--space-xs);
}

.xx-app-sidebar.xx-collapsed .xx-sidebar-toggle-label {
  display: none;
}

/* ── 侧边栏内容区 ─────────────────────────────────────────── */
.xx-sidebar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-sm);
}

/* ── 主内容区 ─────────────────────────────────────────────── */
.xx-app-content {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
  overflow-y: auto;
  padding: var(--space-lg);
}

/* ── 移动端遮罩层（默认隐藏） ─────────────────────────────── */
.xx-sidebar-overlay {
  display: none;
}

/* ============================================================
   响应式 —— 平板（769px ~ 1024px）
   侧边栏默认折叠为图标栏
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .xx-app-sidebar {
    width: 64px;
  }

  .xx-app-sidebar .xx-sidebar-toggle {
    justify-content: center;
    padding: var(--space-sm) var(--space-xs);
  }

  .xx-app-sidebar .xx-sidebar-toggle-label {
    display: none;
  }

  /* 展开态恢复完整宽度 */
  .xx-app-sidebar:not(.xx-collapsed) {
    width: 240px;
  }

  .xx-app-sidebar:not(.xx-collapsed) .xx-sidebar-toggle {
    justify-content: flex-end;
    padding: var(--space-sm) var(--space-md);
  }

  .xx-app-sidebar:not(.xx-collapsed) .xx-sidebar-toggle-label {
    display: inline;
  }
}

/* ============================================================
   响应式 —— 移动端（≤768px）
   侧边栏隐藏，由 Header 汉堡菜单控制显示
   ============================================================ */
@media (max-width: 768px) {
  .xx-app-sidebar {
    position: fixed;
    top: 56px; /* 移动端 Header 高度 */
    left: 0;
    bottom: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    box-shadow: none;
    z-index: calc(var(--z-fixed) - 1); /* 低于 Header 的汉堡按钮 */
  }

  /* 展开态：滑入 */
  .xx-app-sidebar:not(.xx-collapsed) {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  /* 展开时显示遮罩 */
  .xx-app-sidebar:not(.xx-collapsed) ~ .xx-sidebar-overlay,
  .xx-app-sidebar:not(.xx-collapsed) + .xx-app-content::before {
    display: none;
  }

  /* 遮罩层 —— 使用独立选择器 */
  .xx-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: calc(var(--z-fixed) - 2);
    cursor: pointer;
  }

  /* 通过父级控制遮罩显示 */
  .xx-app-body:has(.xx-app-sidebar:not(.xx-collapsed)) > .xx-sidebar-overlay {
    display: block;
  }

  .xx-app-content {
    padding: var(--space-md);
  }
}