Просмотр исходного кода

style: balance full-width member credit layouts

彭峰 10 часов назад
Родитель
Сommit
cc5692a11b

+ 6 - 2
projects/xiaoshu-admin/src/app/components/member-credit-account.component.html

@@ -12,11 +12,15 @@
 <label>课时类型<select name="account" [(ngModel)]="account" (ngModelChange)="resetPreview()" [disabled]="direction==='deduct'&&!store">@for(a of value.accounts;track a.account){<option [value]="a.account">{{a.label}}</option>}</select></label>
 <label class="credit-quantity">数量<input name="amount" type="number" [min]="account==='UserPoint'?0.01:1" [step]="account==='UserPoint'?0.01:1" [(ngModel)]="amount" required /></label>
 <label>付款或记账方式<select name="method" [(ngModel)]="method" required><option value="">请选择</option><option>微信</option><option>支付宝</option><option>转账</option><option>线下收款</option><option>运营记账</option></select></label>
-@if(!store&&direction==='add'){<p class="wide">{{account==='UserPoint'?'单独补充陪练时长,用于独立复习服务或历史额度补充。':account==='UserExp'?'体验固定发放 1 次,结课不扣普通陪练余额。':'普通课充值自动配套陪练:30 分钟每次 0.5 小时,60 分钟每次 1 小时。'}}</p>}
-@if(direction==='adjust'){<label>增减方向<select name="adjustSign" [(ngModel)]="adjustSign"><option value="deduct">扣回差错额度</option><option value="add">补充差错额度</option></select></label><label class="credit-adjust-scope">调整范围<select name="adjustMode" [(ngModel)]="adjustMode"><option value="paired">普通课时配套调整陪练</option><option value="single">仅纠正所选账户</option></select></label><label class="wide credit-evidence">核对依据<input name="evidence" [(ngModel)]="evidence" placeholder="填写原始单据、核对记录等证据" required /></label><p class="wide">独立调整只影响学员,不增加或扣减门店库存。</p>}
+
+@if(direction==='adjust'){<label>增减方向<select name="adjustSign" [(ngModel)]="adjustSign"><option value="deduct">扣回差错额度</option><option value="add">补充差错额度</option></select></label><label class="credit-adjust-scope">调整范围<select name="adjustMode" [(ngModel)]="adjustMode"><option value="paired">普通课时配套调整陪练</option><option value="single">仅纠正所选账户</option></select></label><label class="wide credit-evidence">核对依据<input name="evidence" [(ngModel)]="evidence" placeholder="填写原始单据、核对记录等证据" required /></label>}
 <label class="wide credit-reason">操作原因<input name="reason" [(ngModel)]="reason" minlength="2" maxlength="500" placeholder="填写本次充值、扣回或调整原因" required /></label>
+<div class="credit-submit-row">
+@if(!store&&direction==='add'){<p class="wide">{{account==='UserPoint'?'单独补充陪练时长,用于独立复习服务或历史额度补充。':account==='UserExp'?'体验固定发放 1 次,结课不扣普通陪练余额。':'普通课充值自动配套陪练:30 分钟每次 0.5 小时,60 分钟每次 1 小时。'}}</p>}
+@if(!store&&direction==='adjust'){<p class="wide">独立调整只影响学员,不增加或扣减门店库存。</p>}
 <button class="primary" type="submit" [disabled]="saving()||(!store&&!value.storeId&&direction==='add')">{{saving()?'处理中…':store?'确认总部入账':'预览账户变动'}}</button>
 @if(!store&&value.storeId){<a routerLink="/admin/stores">查看门店库存 / 总部入账</a>}
+</div>
 </fieldset></form>}
 @if(preview();as p){<section class="preview-panel" aria-label="账户变动预览"><h3>确认本次变动 · 会员 {{p.studentId}}</h3><p>{{p.storeId?'原门店 ID '+p.storeId:'独立差错调整,仅影响学员'}}</p><div class="scroll"><table><thead><tr><th>账户</th><th>学员增减</th><th>学员余额</th><th>学员可用</th><th>门店余额</th><th>门店可用</th></tr></thead><tbody>@for(l of p.lines;track l.account){<tr><td>{{label(l.account)}}</td><td>{{l.delta>0?'+':''}}{{l.delta}}</td><td>{{l.before}} → {{l.after}}</td><td>{{l.availableBefore}} → {{l.availableAfter}}</td><td>{{l.storeBefore??'—'}} → {{l.storeAfter??'—'}}</td><td>{{l.storeAvailableBefore??'—'}} → {{l.storeAvailableAfter??'—'}}</td></tr>}</tbody></table></div><button type="button" class="primary" (click)="submit()" [disabled]="saving()">{{saving()?'正在提交…':'确认记账'}}</button></section>}
 @if(store){<div class="scroll"><table><thead><tr><th>时间</th><th>业务</th><th>账户</th><th>数量</th><th>学员</th><th>原因</th></tr></thead><tbody>@for(t of value.transactions;track t.objectId){<tr><td>{{t.createdAt|date:'yyyy-MM-dd HH:mm':'+0800'}}</td><td>{{kindLabel(t.kind)}}</td><td>{{label(t.account)}}</td><td>{{t.amount}}</td><td>{{t.studentId||'—'}}</td><td>{{t.reason}}</td></tr>}</tbody></table></div>}

+ 16 - 11
projects/xiaoshu-admin/src/app/components/member-enrollment.scss

@@ -36,31 +36,36 @@ input[type=checkbox]:disabled { cursor:not-allowed; }
 
 .credit-panel a{color:#1b735d;font-weight:600;text-underline-offset:3px}.credit-panel form,.ledger-panel{scroll-margin-top:90px}
 
-// Keep member credit controls sized to their content instead of stretching across the panel.
+// Flexible fields fill each row; numeric inputs stay narrow and actions form a shared footer.
+.credit-submit-row { display:contents; }
 .credit-entry-fields {
   display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:14px 0;
-  > label { flex:0 1 180px; gap:5px; }
-  > .credit-direction { flex-basis:220px; }
-  > .credit-quantity { flex-basis:100px; }
+  > label { flex:1 1 160px; gap:5px; }
+  > .credit-direction { flex-basis:200px; }
+  > .credit-quantity { flex:0 0 100px; }
   > .credit-adjust-scope { flex-basis:240px; }
-  > .credit-source { flex-basis:360px; }
-  > .credit-reason, > .credit-evidence { flex-basis:380px; }
-  > p { flex:0 0 100%; margin:0; font-size:13px; }
-  > button { flex:0 0 auto; }
-  > a { display:inline-flex; align-items:center; min-height:40px; font-size:13px; }
+  > .credit-source { flex:2 1 360px; }
+  > .credit-reason, > .credit-evidence { flex:2 1 300px; }
+  > .credit-submit-row {
+    flex:0 0 100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 16px;
+    > p { flex:1 1 360px; margin:0; font-size:13px; }
+    > button { flex:0 0 auto; }
+    > a { display:inline-flex; align-items:center; min-height:40px; font-size:13px; }
+  }
 }
 @media(max-width:650px) {
   .credit-entry-fields {
     gap:10px;
     > label { flex:1 1 calc(50% - 5px); }
     > .credit-source, > .credit-reason, > .credit-evidence { flex-basis:100%; }
+    > .credit-submit-row { justify-content:flex-start; }
   }
 }
 
 .ledger-filters {
   display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px;
-  > label { flex:0 1 160px; gap:5px; }
-  > app-operations-date-filter { flex:0 1 180px; --date-filter-height:48px; }
+  > label { flex:1 1 160px; gap:5px; }
+  > app-operations-date-filter { flex:1.1 1 180px; --date-filter-height:48px; }
   > .account-actions { flex:0 0 auto; }
 }
 @media(max-width:650px) {