style: align member list columns and separate row actions

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

@@ -29,11 +29,11 @@
   <header><div><lucide-icon [img]="icons.Users" [size]="19" /><strong>正式会员</strong><span>{{ page()?.total || 0 }} 人</span></div><small>{{ page()?.sourceStatus?.message || page()?.sync?.label || '同步状态未知' }} · 最后刷新：{{ lastRefreshedAt() | date:'HH:mm:ss' }} · 注册时间倒序</small></header>
   @if (loading() && !page()) { <div class="state"><lucide-icon class="spin" [img]="icons.LoaderCircle" [size]="26" />正在加载会员…</div> }
   @else {
-    <div class="desktop-table"><table><thead><tr><th>会员</th><th>手机号</th><th>学习状态</th><th>注册时间</th><th>所属门店/代理</th><th>剩余课时</th><th>最近上课</th><th>下次预约</th><th>风险</th><th>账号</th><th><span class="sr-only">操作</span></th></tr></thead><tbody>
-      @for (row of page()?.items || []; track row.objectId) { <tr><td><div class="user-cell"><strong>{{ row.displayName }}</strong><span>ID {{ row.userId || '—' }} · {{ row.nickname || row.username }}</span></div></td><td>{{ row.mobile || row.mobileMasked || '—' }}</td><td><span class="learning-status" [attr.data-status]="row.learningStatus">{{ row.learningStatusLabel }}</span><small class="status-reason">{{ row.learningStatusReason }}</small></td><td><time>{{ row.registeredAt | date:'yyyy-MM-dd HH:mm' }}</time></td><td>{{ row.parentDisplayName || '未绑定' }}</td><td><strong>{{ row.periods30 | number }}</strong> × 30分<br/><strong>{{ row.periods60 | number }}</strong> × 60分<br/><small>{{ row.trialPeriods | number }} × 体验</small></td><td>{{ row.lastLessonAt ? (row.lastLessonAt | date:'MM-dd HH:mm') : '暂无' }}</td><td>{{ row.nextAppointmentAt ? (row.nextAppointmentAt | date:'MM-dd HH:mm') : '待排课' }}</td><td><div class="risk-list">@for (item of row.riskFlags || []; track item) { <span>{{ item }}</span> } @empty { <small>正常</small> }</div></td><td><span class="status" [class.disabled]="row.status === 'disabled'">{{ row.statusLabel }}</span></td><td><a [routerLink]="['/admin/members', row.objectId]" [queryParams]="{tab:'balances'}">充值／扣回</a> <a [routerLink]="['/admin/members', row.objectId]" aria-label="查看会员详情"><lucide-icon [img]="icons.Eye" [size]="17" /></a></td></tr> }
+    <div class="desktop-table"><table><colgroup><col class="col-member"/><col class="col-phone"/><col class="col-learning"/><col class="col-registered"/><col class="col-store"/><col class="col-balance"/><col class="col-time"/><col class="col-time"/><col class="col-risk"/><col class="col-status"/><col class="col-actions"/></colgroup><thead><tr><th>会员</th><th>手机号</th><th>学习状态</th><th>注册时间</th><th>所属门店/代理</th><th>剩余课时</th><th>最近上课</th><th>下次预约</th><th>风险</th><th>账号</th><th class="actions-column">操作</th></tr></thead><tbody>
+      @for (row of page()?.items || []; track row.objectId) { <tr><td><div class="user-cell"><strong>{{ row.displayName }}</strong><span>ID {{ row.userId || '—' }} · {{ row.nickname || row.username }}</span></div></td><td>{{ row.mobile || row.mobileMasked || '—' }}</td><td><span class="learning-status" [attr.data-status]="row.learningStatus">{{ row.learningStatusLabel }}</span><small class="status-reason">{{ row.learningStatusReason }}</small></td><td><time>{{ row.registeredAt | date:'yyyy-MM-dd HH:mm' }}</time></td><td>{{ row.parentDisplayName || '未绑定' }}</td><td><strong>{{ row.periods30 | number }}</strong> × 30分<br/><strong>{{ row.periods60 | number }}</strong> × 60分<br/><small>{{ row.trialPeriods | number }} × 体验</small></td><td>{{ row.lastLessonAt ? (row.lastLessonAt | date:'MM-dd HH:mm') : '暂无' }}</td><td>{{ row.nextAppointmentAt ? (row.nextAppointmentAt | date:'MM-dd HH:mm') : '待排课' }}</td><td><div class="risk-list">@for (item of row.riskFlags || []; track item) { <span>{{ item }}</span> } @empty { <small>正常</small> }</div></td><td><span class="status" [class.disabled]="row.status === 'disabled'">{{ row.statusLabel }}</span></td><td class="actions-column"><div class="member-actions"><a class="credit-action" [routerLink]="['/admin/members', row.objectId]" [queryParams]="{tab:'balances'}">充值／扣回</a><a class="detail-action" [routerLink]="['/admin/members', row.objectId]" aria-label="查看会员详情" title="查看会员详情"><lucide-icon [img]="icons.Eye" [size]="17" /></a></div></td></tr> }
       @empty { <tr><td colspan="11"><div class="state">没有符合条件的会员</div></td></tr> }
     </tbody></table></div>
-    <div class="mobile-cards">@for (row of page()?.items || []; track row.objectId) { <article><header><div><strong>{{ row.displayName }}</strong><span>ID {{ row.userId || '—' }} · {{ row.mobile || row.mobileMasked || '—' }}</span></div><span class="status" [class.disabled]="row.status === 'disabled'">{{ row.statusLabel }}</span></header><div class="card-status"><span class="learning-status" [attr.data-status]="row.learningStatus">{{ row.learningStatusLabel }}</span>@for (item of row.riskFlags || []; track item) { <em>{{ item }}</em> }</div><dl><div><dt>注册时间</dt><dd>{{ row.registeredAt | date:'yyyy-MM-dd HH:mm' }}</dd></div><div><dt>所属代理</dt><dd>{{ row.parentDisplayName || '未绑定' }}</dd></div><div><dt>剩余课时</dt><dd>{{ row.periods30 }}×30分 · {{ row.periods60 }}×60分</dd></div><div><dt>下次预约</dt><dd>{{ row.nextAppointmentAt ? (row.nextAppointmentAt | date:'MM-dd HH:mm') : '待排课' }}</dd></div></dl><a [routerLink]="['/admin/members', row.objectId]" [queryParams]="{tab:'balances'}">充值／扣回</a> <a [routerLink]="['/admin/members', row.objectId]">查看会员详情<lucide-icon [img]="icons.ChevronRight" [size]="17" /></a></article> } @empty { <div class="state">没有符合条件的会员</div> }</div>
+    <div class="mobile-cards">@for (row of page()?.items || []; track row.objectId) { <article><header><div><strong>{{ row.displayName }}</strong><span>ID {{ row.userId || '—' }} · {{ row.mobile || row.mobileMasked || '—' }}</span></div><span class="status" [class.disabled]="row.status === 'disabled'">{{ row.statusLabel }}</span></header><div class="card-status"><span class="learning-status" [attr.data-status]="row.learningStatus">{{ row.learningStatusLabel }}</span>@for (item of row.riskFlags || []; track item) { <em>{{ item }}</em> }</div><dl><div><dt>注册时间</dt><dd>{{ row.registeredAt | date:'yyyy-MM-dd HH:mm' }}</dd></div><div><dt>所属代理</dt><dd>{{ row.parentDisplayName || '未绑定' }}</dd></div><div><dt>剩余课时</dt><dd>{{ row.periods30 }}×30分 · {{ row.periods60 }}×60分</dd></div><div><dt>下次预约</dt><dd>{{ row.nextAppointmentAt ? (row.nextAppointmentAt | date:'MM-dd HH:mm') : '待排课' }}</dd></div></dl><div class="member-actions"><a class="credit-action" [routerLink]="['/admin/members', row.objectId]" [queryParams]="{tab:'balances'}">充值／扣回</a><a class="detail-action" [routerLink]="['/admin/members', row.objectId]">查看详情<lucide-icon [img]="icons.ChevronRight" [size]="17" /></a></div></article> } @empty { <div class="state">没有符合条件的会员</div> }</div>
     <footer class="pagination"><span>第 {{ page()?.page || 1 }} / {{ pageCount() }} 页 · 共 {{ page()?.total || 0 }} 人</span><div><button type="button" aria-label="上一页" [disabled]="(page()?.page || 1) <= 1" (click)="load((page()?.page || 1) - 1)"><lucide-icon [img]="icons.ChevronLeft" [size]="18" /></button><button type="button" aria-label="下一页" [disabled]="(page()?.page || 1) >= pageCount()" (click)="load((page()?.page || 1) + 1)"><lucide-icon [img]="icons.ChevronRight" [size]="18" /></button></div></footer>
   }
 </section>