CI Bot
8d185492d7
CI/CD Pipeline / Validate Code Quality And Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Lint (push) Has been cancelled
Deploy / Deploy Staging (push) Has been cancelled
Deploy / Build Production Runtime Images (push) Has been cancelled
Deploy / Deploy Production (push) Has been cancelled
Deploy / Production Browser E2E (push) Has been cancelled
- 新增 PageHead 组件：页面标题、面包屑导航、操作按钮区域 - 面包屑根据路由路径自动生成，支持手动覆盖 - 响应式适配：移动端隐藏面包屑，操作区换行 - 复用 global.css 中 .xx-page-head 基础样式 - 集成到所有页面：Dashboard、素材库、配音库、标题库、 任务历史、成品库、模板库、一键生成、订阅页
162 lines
4.4 KiB
CSS
162 lines
4.4 KiB
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;
|
||
}
|
||
}
|