fix(admin): improve mobile schedule layout

design-qa.md

@@ -129,3 +129,47 @@ final result: passed
 - No actionable P0, P1, or P2 visual differences remain.
 
 final result: passed
+
+---
+
+# Design QA — 排课中心手机端
+
+## 验证范围
+
+- 页面：`/admin/schedule`
+- 原始问题截图：`design-qa-mobile-source.png`
+- 实现结果截图：`design-qa-mobile-implementation.png`
+- 原始截图：1060 × 2070 px（按 2× 屏幕密度归一化为 530 × 1035 CSS px）
+- 实现截图：530 × 1035 CSS px
+- 页面状态：已登录、日视图、日期 2024-07-20
+- 重点区域：首屏标题、操作按钮、筛选工具栏、提示条和运营数据卡片
+
+## 对比与修正记录
+
+### 第 1 轮
+
+- P1：四项运营数据在手机端逐张纵向排列，首屏只能看到部分数据。
+- P2：标题操作按钮与标题内容分列，视觉重心割裂，占用过多纵向空间。
+- P2：日/周/列表、日期切换和筛选控件的换行关系不稳定，日期控件宽度不足。
+
+修正：标题区改为单列内容与双列操作按钮；筛选工具栏改为明确的三列网格；日/周/列表与陪练筛选各自占整行；运营数据改为两列紧凑卡片，刷新时间独占整行。
+
+### 第 2 轮
+
+- 在 390 × 844 与 530 × 1035 两种手机视口复核，无横向页面溢出。
+- 日/周视图切换可操作，按钮激活状态正常。
+- 标题区按钮、日期箭头和筛选控件高度一致，触控区域不小于 40 px。
+- 运营数据在首屏内完整呈现，排课泳道标题也能进入 530 px 宽设备首屏。
+- 控制台错误：0。
+
+## 忠实度与可用性检查
+
+- 字体层级：通过；移动端标题和辅助文字已收紧，但保持原有品牌层级。
+- 间距与布局：通过；首屏纵向空间明显缩短，组件间距一致。
+- 颜色与状态：通过；沿用现有绿色主色、浅色背景和状态图例。
+- 文案：通过；未改变任何业务文案。
+- 图片质量：不适用；本次页面没有新增或修改位图资源。
+- 交互：通过；日/周切换、日期导航、陪练筛选和操作按钮保持可用。
+- 已知 P3：课程泳道仍允许内容区横向滚动，以保留密集排课卡片的可读宽度；页面主体本身无横向溢出。
+
+final result: passed

src/app/admin/pages/operations-schedule.component.scss

@@ -493,25 +493,185 @@ textarea:focus-visible {
 
 @media (max-width: 700px) {
   .page-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
     align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 14px;
   }
 
-  .drawer {
-    padding: 22px 18px;
-    border-radius: 0;
+  .page-header p {
+    margin: 0 0 5px;
+    font-size: 10px;
+    letter-spacing: .11em;
   }
 
-  .summary-grid {
-    grid-template-columns: 1fr;
+  .page-header h1 {
+    margin: 0 0 6px;
+    font-size: 27px;
+    line-height: 1.15;
+  }
+
+  .page-header span {
+    display: block;
+    max-width: 100%;
+    font-size: 12px;
+    line-height: 1.45;
+  }
+
+  .header-actions {
+    display: grid;
+    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
+    width: 100%;
+    gap: 8px;
+  }
+
+  .page-header button {
+    width: 100%;
+    min-height: 40px;
+    padding: 8px 11px;
+    font-size: 13px;
+  }
+
+  .toolbar {
+    display: grid;
+    grid-template-columns: 44px minmax(0, 1fr) 44px;
+    align-items: stretch;
+    gap: 10px;
+    margin-bottom: 12px;
+    padding: 12px;
+    border-radius: 15px;
+  }
+
+  .toolbar > .segmented {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  .toolbar > .segmented button {
+    flex: 1 1 0;
+    padding-inline: 8px;
+  }
+
+  .toolbar > button:not(.latest-data) {
+    width: 44px;
+    padding: 0;
+  }
+
+  .toolbar .date-filter {
+    grid-column: 2;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .toolbar .date-filter > span {
+    display: none;
+  }
+
+  .toolbar .date-filter input {
+    width: 100%;
+    min-width: 0;
   }
 
   .toolbar .coach-filter {
-    flex-basis: 100%;
+    grid-column: 1 / -1;
+    flex-basis: auto;
     width: 100%;
+    min-width: 0;
     max-width: none;
+    gap: 5px;
   }
 
   .toolbar .latest-data {
+    grid-column: 1 / -1;
+    width: 100%;
+    height: 40px;
+    min-height: 40px;
     margin-left: 0;
+    justify-content: flex-start;
+    padding-inline: 12px;
+    font-size: 12px;
+  }
+
+  .drawer {
+    padding: 22px 18px;
+    border-radius: 0;
+  }
+
+  .summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    margin-bottom: 14px;
+  }
+
+  .summary-card {
+    min-height: 94px;
+    align-content: center;
+    gap: 4px;
+    padding: 13px 14px;
+    border-radius: 14px;
+  }
+
+  .summary-card span {
+    font-size: 11px;
+  }
+
+  .summary-card strong {
+    font-size: 24px;
+    line-height: 1.1;
+  }
+
+  .summary-card small {
+    font-size: 10px;
+    line-height: 1.35;
+  }
+
+  .summary-card:last-child {
+    grid-column: 1 / -1;
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-height: 70px;
+  }
+
+  .summary-card:last-child span,
+  .summary-card:last-child small {
+    grid-column: 1;
+  }
+
+  .summary-card:last-child strong {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    align-self: center;
+    font-size: 22px;
+  }
+
+  .notice {
+    margin-block: 10px 12px;
+    padding: 10px 12px;
+    font-size: 12px;
+    line-height: 1.45;
+  }
+
+  .schedule-content-header {
+    align-items: flex-start;
+    padding: 14px;
+  }
+
+  .status-legend {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 380px) {
+  .summary-grid {
+    gap: 8px;
+  }
+
+  .summary-card {
+    min-height: 90px;
+    padding-inline: 12px;
+  }
+
+  .summary-card small {
+    overflow-wrap: anywhere;
   }
 }