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