Эх сурвалжийг харах

style(admin): align store actions in two columns

彭峰 1 долоо хоног өмнө
parent
commit
90295cd587

+ 1 - 1
projects/xiaoshu-admin/src/app/pages/operations-stores.component.html

@@ -39,7 +39,7 @@
       <td><strong>{{row.memberCount}}</strong> 人</td><td><strong>{{row.activeStudyingMemberCount ?? '—'}}</strong>@if(row.activeStudyingMemberCount != null){ 人}</td><td><strong>{{row.coachCount}}</strong> 人</td><td>{{row.todayAppointments}} 节</td><td>{{row.totalAppointments}} 节</td>
       <td>@if(row.lastAppointmentAt){<span>{{row.lastAppointmentAt|date:'yyyy-MM-dd'}}</span><small>{{row.lastAppointmentAt|date:'HH:mm'}}</small>}@else{暂无}</td><td>@if(row.lastLoginAt){<span>{{row.lastLoginAt|date:'yyyy-MM-dd'}}</span><small>{{row.lastLoginAt|date:'HH:mm'}}</small>}@else{从未登录}</td>
       <td><span class="badge" [class.muted]="row.status==='disabled'">{{row.statusLabel}}</span></td>
-      <td><div class="row-actions">@if(page()?.canFund&&!row.readOnly&&row.status!=='disabled'){<button type="button" class="ui-button secondary" (click)="creditTarget.set(row)">充值额度</button>}@if(!row.readOnly){<a class="icon-action" [routerLink]="['/admin/stores',row.objectId]" aria-label="查看门店经营详情" title="经营详情"><lucide-icon [img]="icons.Eye" [size]="16"/></a>}@else{<span class="readonly-label">待同步</span>}@if(page()?.canManage&&!row.readOnly){<button class="icon-action" type="button" (click)="openEdit(row)" aria-label="编辑门店" title="编辑"><lucide-icon [img]="icons.Pencil" [size]="16"/></button><button class="icon-action danger" type="button" (click)="openEdit(row,true)" aria-label="删除门店" title="删除"><lucide-icon [img]="icons.Trash2" [size]="16"/></button>}</div></td>
+      <td><div class="row-actions">@if(page()?.canFund&&!row.readOnly&&row.status!=='disabled'){<button type="button" class="ui-button secondary" (click)="creditTarget.set(row)">充值额度</button>}@if(!row.readOnly){<a class="icon-action" [routerLink]="['/admin/stores',row.objectId]" aria-label="查看门店经营详情" title="经营详情"><lucide-icon [img]="icons.Eye" [size]="16"/><span>查看</span></a>}@else{<span class="readonly-label">待同步</span>}@if(page()?.canManage&&!row.readOnly){<button class="icon-action" type="button" (click)="openEdit(row)" aria-label="编辑门店" title="编辑"><lucide-icon [img]="icons.Pencil" [size]="16"/><span>编辑</span></button><button class="icon-action danger" type="button" (click)="openEdit(row,true)" aria-label="删除门店" title="删除"><lucide-icon [img]="icons.Trash2" [size]="16"/><span>删除</span></button>}</div></td>
     </tr>}@empty{<tr><td colspan="12"><div class="empty">没有符合条件的门店</div></td></tr>}
   </tbody></table></div>
   <footer class="pagination"><span>第 {{page()?.page||1}} / {{pageCount()}} 页</span><div><button aria-label="上一页" type="button" [disabled]="(page()?.page||1)<=1" (click)="load((page()?.page||1)-1)"><lucide-icon [img]="icons.ChevronLeft" [size]="17"/></button><button type="button" [disabled]="(page()?.page||1)>=pageCount()" (click)="load((page()?.page||1)+1)"><lucide-icon [img]="icons.ChevronRight" [size]="17"/></button></div></footer>

+ 20 - 5
projects/xiaoshu-admin/src/app/pages/operations-stores.component.scss

@@ -80,8 +80,26 @@
   box-shadow: -1px 0 0 #edf1ef;
 }
 .data-table th:last-child { background: #f6f9f7; }
-.row-actions { display: flex; min-width: 0; justify-content: center; gap: 8px; flex-wrap: nowrap; }
-.row-actions .icon-action { flex: 0 0 34px; }
+.row-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  width: 100%;
+  max-width: 176px;
+  min-width: 136px;
+  margin-inline: auto;
+  gap: 8px;
+}
+.row-actions > .ui-button,
+.row-actions > .icon-action {
+  width: 100%;
+  height: 36px;
+  min-height: 36px;
+  box-sizing: border-box;
+  padding: 6px;
+  gap: 5px;
+  font-size: 12px;
+  white-space: nowrap;
+}
 
 .store-editor { width: min(640px, 100%); }
 .store-editor header p { margin: 0; color: #258b68; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
@@ -121,6 +139,3 @@
   .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .toolbar label:not(.grow) { grid-column: 1 / -1; }
 }
-
-.row-actions { flex-wrap: wrap; }
-.row-actions > .ui-button { padding: 7px 10px; white-space: nowrap; }