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

/* ============================================================
   PageHead.css - 页面头部扩展样式（Task 1.4）

   基础样式复用 global.css 中的 .xx-page-head，
   本文件补充面包屑、标题区、操作区等扩展样式。

   结构：
     .xx-page-head                    头部容器（global.css 定义）
     ├── .xx-page-head-left           左侧区域
     │   ├── .xx-page-breadcrumb      面包屑导航
     │   │   └── .xx-page-breadcrumb-item    面包屑项
     │   │       ├── .xx-page-breadcrumb-separator  分隔符
     │   │       ├── .xx-page-breadcrumb-link      可点击链接
     │   │       ├── .xx-page-breadcrumb-current   当前页（不可点击）
     │   │       └── .xx-page-breadcrumb-home      首页图标
     │   └── .xx-page-head-title      标题 + 描述
     └── .xx-page-head-actions        右侧操作按钮区
   ============================================================ */

/* ── 左侧区域 ─────────────────────────────────────────────── */
.xx-page-head-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0; /* 允许内容收缩，防止溢出 */
}

/* ── 面包屑导航 ───────────────────────────────────────────── */
.xx-page-breadcrumb {
  margin: 0;
  padding: 0;
}

.xx-page-breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.xx-page-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  line-height: var(--line-height-tight);
}

/* 分隔符 */
.xx-page-breadcrumb-separator {
  font-size: 10px;
  color: var(--text-quaternary);
  flex-shrink: 0;
}

/* 可点击链接 */
.xx-page-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-colors);
  border-radius: var(--radius-xs);
  padding: 2px 4px;
  margin: -2px -4px;
}

.xx-page-breadcrumb-link:hover {
  color: var(--primary-color);
  background: var(--primary-soft);
}

/* 当前页（不可点击） */
.xx-page-breadcrumb-current {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* 首页图标 */
.xx-page-breadcrumb-home {
  font-size: 12px;
}

/* ── 标题区 ───────────────────────────────────────────────── */
.xx-page-head-title h2 {
  margin: 0;
}

.xx-page-head-title p {
  margin: var(--space-xxs) 0 0;
}

/* ── 右侧操作区 ───────────────────────────────────────────── */
.xx-page-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  margin-left: var(--space-lg);
}

/* ============================================================
   响应式 —— 平板（≤1024px）
   操作区按钮紧凑排列
   ============================================================ */
@media (max-width: 1024px) {
  .xx-page-head-actions {
    gap: var(--space-xs);
    margin-left: var(--space-md);
  }
}

/* ============================================================
   响应式 —— 移动端（≤768px）
   隐藏面包屑，简化布局
   ============================================================ */
@media (max-width: 768px) {
  /* 隐藏面包屑 */
  .xx-page-breadcrumb {
    display: none;
  }

  /* 标题区占满宽度 */
  .xx-page-head-left {
    flex: 1;
  }

  /* 操作区换行显示 */
  .xx-page-head {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .xx-page-head-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}

/* ============================================================
   响应式 —— 小屏手机（≤480px）
   标题缩小，操作区堆叠
   ============================================================ */
@media (max-width: 480px) {
  .xx-page-head-title h2 {
    font-size: 20px;
  }

  .xx-page-head-actions {
    flex-wrap: wrap;
  }
}