style: refine coach detail header layout

projects/xiaoshu-admin/src/app/pages/operations-coach-detail.component.html

@@ -1,11 +1,14 @@
+<a class="coach-back-link" routerLink="/admin/coaches"><lucide-icon [img]="icons.ArrowLeft" [size]="17"/>返回陪练老师</a>
 <header class="page-header coach-detail-header">
-  <div>
-    <a class="back-link" routerLink="/admin/coaches"><lucide-icon [img]="icons.ArrowLeft" [size]="17"/>返回陪练老师</a>
-    <p>COACH PROFILE</p>
-    <h1>{{data()?.coach?.displayName||'陪练详情'}}</h1>
-    <span>@if(data();as detail){ID {{detail.coach.userId}} · {{detail.profile.storeName||'未绑定门店'}} · {{detail.profile.statusLabel}}}</span>
+  <div class="coach-heading">
+    <div class="coach-avatar">{{(data()?.coach?.displayName||'陪').slice(0,1)}}</div>
+    <div>
+      <p>COACH PROFILE</p>
+      <h1>{{data()?.coach?.displayName||'陪练详情'}}</h1>
+      @if(data();as detail){<div class="coach-header-meta"><span>ID {{detail.coach.userId}}</span><span><lucide-icon [img]="icons.Building2" [size]="13"/>{{detail.profile.storeName||'未绑定门店'}}</span><strong>{{detail.profile.statusLabel}}</strong></div>}
+    </div>
   </div>
-  <button class="ui-button secondary" type="button" (click)="load(true)" [disabled]="loading()"><lucide-icon [img]="icons.RefreshCw" [size]="17" [class.spin]="loading()"/>{{loading()?'正在刷新':'刷新实时数据'}}</button>
+  <button class="ui-button secondary refresh-action" type="button" (click)="load(true)" [disabled]="loading()"><lucide-icon [img]="icons.RefreshCw" [size]="17" [class.spin]="loading()"/>{{loading()?'正在刷新':'刷新实时数据'}}</button>
 </header>
 
 @if(message()){<p class="notice" role="status">{{message()}}</p>}
@@ -16,20 +19,7 @@
 }
 
 @if(data();as detail){
-  <section class="source-strip" [class.cache]="detail.payrollSourceStatus.mode==='cache'" role="status">
-    <span></span>
-    <strong>{{detail.payrollMonth}} 收益数据</strong>
-    <em>{{detail.payrollSourceStatus.mode==='live'?'旧系统实时上课记录':'迁移库缓存记录'}}</em>
-    <small>更新于 {{detail.refreshedAt|date:'MM-dd HH:mm:ss'}}</small>
-  </section>
-
   <section class="coach-profile-card">
-    <div class="coach-avatar">{{detail.coach.displayName.slice(0,1)}}</div>
-    <div class="coach-identity">
-      <span>陪练老师</span>
-      <h2>{{detail.coach.displayName}}</h2>
-      <p>{{detail.profile.sourceLabel||'新系统账号'}} · {{detail.coach.statusLabel}}</p>
-    </div>
     <dl>
       <div><dt><lucide-icon [img]="icons.UserRound" [size]="16"/>登录账号</dt><dd>{{detail.profile.username||'历史账号未同步'}}</dd></div>
       <div><dt><lucide-icon [img]="icons.Phone" [size]="16"/>手机号码</dt><dd>{{detail.profile.mobile||'未登记'}}</dd></div>
@@ -38,6 +28,13 @@
     </dl>
   </section>
 
+  <section class="source-strip" [class.cache]="detail.payrollSourceStatus.mode==='cache'" role="status">
+    <span></span>
+    <strong>{{detail.payrollMonth}} 收益数据</strong>
+    <em>{{detail.payrollSourceStatus.mode==='live'?'旧系统实时上课记录':'迁移库缓存记录'}}</em>
+    <small>更新于 {{detail.refreshedAt|date:'MM-dd HH:mm:ss'}}</small>
+  </section>
+
   <section class="summary-grid coach-summary">
     <article class="summary-card"><span>今日排课</span><strong>{{detail.coach.todayAppointments}}</strong><small>未来待完成 {{upcomingCount()}} 节</small></article>
     <article class="summary-card"><span>{{detail.payrollMonth}} 有效课次</span><strong>{{detail.currentPayroll.lessonCount}}</strong><small>30分钟 {{detail.currentPayroll.type30Count}} · 60分钟 {{detail.currentPayroll.type60Count}}</small></article>

projects/xiaoshu-admin/src/app/pages/operations-coach-detail.component.scss

@@ -2,17 +2,84 @@
   display: block;
 }
 
-.coach-detail-header .back-link {
+.coach-back-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  margin-bottom: 18px;
+  margin-bottom: 16px;
   color: #557068;
   font-size: 13px;
   font-weight: 700;
   text-decoration: none;
 }
 
+.coach-back-link:hover {
+  color: #176c55;
+}
+
+.coach-detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 18px;
+}
+
+.coach-heading {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 16px;
+}
+
+.coach-heading p {
+  margin: 0 0 6px;
+  color: #258b68;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: .18em;
+}
+
+.coach-heading h1 {
+  margin: 0;
+  color: #20372f;
+  font-size: 30px;
+  line-height: 1.15;
+}
+
+.coach-header-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-top: 9px;
+}
+
+.coach-header-meta span,
+.coach-header-meta strong {
+  display: inline-flex;
+  min-height: 25px;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 9px;
+  border: 1px solid #dfe8e4;
+  border-radius: 999px;
+  color: #60746d;
+  background: #fff;
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.coach-header-meta strong {
+  border-color: #c8e4d9;
+  color: #176c55;
+  background: #eaf7f1;
+}
+
+.coach-detail-header .refresh-action {
+  flex: 0 0 auto;
+}
+
 .source-strip {
   display: flex;
   align-items: center;
@@ -50,16 +117,12 @@
 }
 
 .coach-profile-card {
-  display: grid;
-  grid-template-columns: auto minmax(180px, .7fr) minmax(420px, 1.7fr);
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 18px;
-  padding: 22px;
+  margin-bottom: 12px;
+  padding: 14px;
   border: 1px solid #dfe9e5;
-  border-radius: 20px;
+  border-radius: 16px;
   background: #fff;
-  box-shadow: 0 12px 32px rgba(28, 58, 48, .055);
+  box-shadow: 0 10px 28px rgba(28, 58, 48, .045);
 }
 
 .coach-avatar {
@@ -74,29 +137,10 @@
   font-weight: 850;
 }
 
-.coach-identity > span {
-  color: #288163;
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: .12em;
-}
-
-.coach-identity h2 {
-  margin: 5px 0;
-  color: #20372f;
-  font-size: 23px;
-}
-
-.coach-identity p {
-  margin: 0;
-  color: #80908a;
-  font-size: 12px;
-}
-
 .coach-profile-card dl {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
   margin: 0;
 }
 
@@ -415,16 +459,33 @@
   }
 
   .coach-profile-card {
-    grid-template-columns: auto 1fr;
+    padding: 12px;
   }
 
   .coach-profile-card dl {
-    grid-column: 1 / -1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
 }
 
 @media (max-width: 700px) {
+  .coach-detail-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .coach-detail-header .refresh-action {
+    align-self: flex-start;
+  }
+
+  .coach-heading {
+    align-items: flex-start;
+  }
+
+  .coach-heading h1 {
+    font-size: 25px;
+  }
+
   .source-strip {
     align-items: flex-start;
     flex-wrap: wrap;
@@ -436,9 +497,7 @@
   }
 
   .coach-profile-card {
-    grid-template-columns: auto 1fr;
-    gap: 14px;
-    padding: 16px;
+    padding: 10px;
   }
 
   .coach-avatar {