diff --git a/apps/web/src/components/layout/PageHead.css b/apps/web/src/components/layout/PageHead.css deleted file mode 100644 index 9789a9183..000000000 --- a/apps/web/src/components/layout/PageHead.css +++ /dev/null @@ -1,161 +0,0 @@ -/* ============================================================ - 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; - } -}