refactor(dashboard): reuse mini bar row component for billing workbench PO bars

This commit is contained in:
萝卜
2026-03-17 08:43:59 +08:00
parent b3cafcc7c9
commit 91f45c1828

View File

@@ -350,81 +350,117 @@
<div class="mt-10" data-role="dashboard-po-funnel-bars"> <div class="mt-10" data-role="dashboard-po-funnel-bars">
<div class="muted muted-xs">收费主链漏斗(相对平台订单总量 {{ $poTotal }}</div> <div class="muted muted-xs">收费主链漏斗(相对平台订单总量 {{ $poTotal }}</div>
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-unpaid-pending-row" href="{!! $platformOrdersQuickLinks['unpaid_pending'] !!}" aria-label="进入待支付订单集合"> @include('admin.components.mini_bar_row', [
<div class="adm-mini-bar-label">待支付</div> 'class' => 'mt-6',
<div class="adm-mini-bar" data-role="dashboard-po-unpaid-pending-bar" title="{{ $poUnpaidPending }} / {{ $poTotal }}{{ $poUnpaidPendingPct }}%"> 'rowRole' => 'dashboard-po-unpaid-pending-row',
<span class="adm-mini-bar-fill" style="width: {{ $poUnpaidPendingPct }}%"></span> 'barRole' => 'dashboard-po-unpaid-pending-bar',
</div> 'href' => $platformOrdersQuickLinks['unpaid_pending'],
<div class="adm-mini-bar-value">{{ $poUnpaidPendingPct }}%{{ $poUnpaidPending }}</div> 'ariaLabel' => '进入待支付订单集合',
</a> 'label' => '待支付',
'pct' => $poUnpaidPendingPct,
'title' => $poUnpaidPending . ' / ' . $poTotal . '' . $poUnpaidPendingPct . '%',
'value' => $poUnpaidPendingPct . '%' . $poUnpaidPending . '',
])
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-paid-pending-row" href="{!! $platformOrdersQuickLinks['paid_pending'] !!}" aria-label="进入待生效订单集合"> @include('admin.components.mini_bar_row', [
<div class="adm-mini-bar-label">待生效</div> 'class' => 'mt-6',
<div class="adm-mini-bar" data-role="dashboard-po-paid-pending-bar" title="{{ $poPaidPending }} / {{ $poTotal }}{{ $poPaidPendingPct }}%"> 'rowRole' => 'dashboard-po-paid-pending-row',
<span class="adm-mini-bar-fill" style="width: {{ $poPaidPendingPct }}%"></span> 'barRole' => 'dashboard-po-paid-pending-bar',
</div> 'href' => $platformOrdersQuickLinks['paid_pending'],
<div class="adm-mini-bar-value">{{ $poPaidPendingPct }}%{{ $poPaidPending }}</div> 'ariaLabel' => '进入待生效订单集合',
</a> 'label' => '待生效',
'pct' => $poPaidPendingPct,
'title' => $poPaidPending . ' / ' . $poTotal . '' . $poPaidPendingPct . '%',
'value' => $poPaidPendingPct . '%' . $poPaidPending . '',
])
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-syncable-row" href="{!! $platformOrdersQuickLinks['syncable_only'] !!}" aria-label="进入可同步订单集合"> @include('admin.components.mini_bar_row', [
<div class="adm-mini-bar-label">可同步</div> 'class' => 'mt-6',
<div class="adm-mini-bar" data-role="dashboard-po-syncable-bar" title="{{ $poSyncable }} / {{ $poTotal }}{{ $poSyncablePct }}%"> 'rowRole' => 'dashboard-po-syncable-row',
<span class="adm-mini-bar-fill" style="width: {{ $poSyncablePct }}%"></span> 'barRole' => 'dashboard-po-syncable-bar',
</div> 'href' => $platformOrdersQuickLinks['syncable_only'],
<div class="adm-mini-bar-value">{{ $poSyncablePct }}%{{ $poSyncable }}</div> 'ariaLabel' => '进入可同步订单集合',
</a> 'label' => '可同步',
'pct' => $poSyncablePct,
'title' => $poSyncable . ' / ' . $poTotal . '' . $poSyncablePct . '%',
'value' => $poSyncablePct . '%' . $poSyncable . '',
])
</div> </div>
<div class="mt-10" data-role="dashboard-po-governance-bars"> <div class="mt-10" data-role="dashboard-po-governance-bars">
<div class="muted muted-xs">治理风险占比(相对平台订单总量 {{ $poTotal }}</div> <div class="muted muted-xs">治理风险占比(相对平台订单总量 {{ $poTotal }}</div>
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-sync-failed-row" href="{!! $platformOrdersQuickLinks['sync_failed'] !!}" aria-label="进入同步失败订单集合"> @include('admin.components.mini_bar_row', [
<div class="adm-mini-bar-label">同步失败</div> 'class' => 'mt-6',
<div class="adm-mini-bar" data-role="dashboard-po-sync-failed-bar" title="{{ $poSyncFailed }} / {{ $poTotal }}{{ $poSyncFailedPct }}%"> 'rowRole' => 'dashboard-po-sync-failed-row',
<span class="adm-mini-bar-fill" style="width: {{ $poSyncFailedPct }}%"></span> 'barRole' => 'dashboard-po-sync-failed-bar',
</div> 'href' => $platformOrdersQuickLinks['sync_failed'],
<div class="adm-mini-bar-value">{{ $poSyncFailedPct }}%{{ $poSyncFailed }}</div> 'ariaLabel' => '进入同步失败订单集合',
</a> 'label' => '同步失败',
'pct' => $poSyncFailedPct,
'title' => $poSyncFailed . ' / ' . $poTotal . '' . $poSyncFailedPct . '%',
'value' => $poSyncFailedPct . '%' . $poSyncFailed . '',
])
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-bmpa-failed-row" href="{!! $platformOrdersQuickLinks['bmpa_failed'] !!}" aria-label="进入BMPA失败订单集合"> @include('admin.components.mini_bar_row', [
<div class="adm-mini-bar-label">BMPA失败</div> 'class' => 'mt-6',
<div class="adm-mini-bar" data-role="dashboard-po-bmpa-failed-bar" title="{{ $poBmpaFailed }} / {{ $poTotal }}{{ $poBmpaFailedPct }}%"> 'rowRole' => 'dashboard-po-bmpa-failed-row',
<span class="adm-mini-bar-fill" style="width: {{ $poBmpaFailedPct }}%"></span> 'barRole' => 'dashboard-po-bmpa-failed-bar',
</div> 'href' => $platformOrdersQuickLinks['bmpa_failed'],
<div class="adm-mini-bar-value">{{ $poBmpaFailedPct }}%{{ $poBmpaFailed }}</div> 'ariaLabel' => '进入BMPA失败订单集合',
</a> 'label' => 'BMPA失败',
'pct' => $poBmpaFailedPct,
'title' => $poBmpaFailed . ' / ' . $poTotal . '' . $poBmpaFailedPct . '%',
'value' => $poBmpaFailedPct . '%' . $poBmpaFailed . '',
])
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-no-receipt-row" href="{!! $platformOrdersQuickLinks['paid_no_receipt'] !!}" aria-label="进入无回执订单集合"> @include('admin.components.mini_bar_row', [
<div class="adm-mini-bar-label">无回执</div> 'class' => 'mt-6',
<div class="adm-mini-bar" data-role="dashboard-po-no-receipt-bar" title="{{ $poNoReceipt }} / {{ $poTotal }}{{ $poNoReceiptPct }}%"> 'rowRole' => 'dashboard-po-no-receipt-row',
<span class="adm-mini-bar-fill" style="width: {{ $poNoReceiptPct }}%"></span> 'barRole' => 'dashboard-po-no-receipt-bar',
</div> 'href' => $platformOrdersQuickLinks['paid_no_receipt'],
<div class="adm-mini-bar-value">{{ $poNoReceiptPct }}%{{ $poNoReceipt }}</div> 'ariaLabel' => '进入无回执订单集合',
</a> 'label' => '无回执',
'pct' => $poNoReceiptPct,
'title' => $poNoReceipt . ' / ' . $poTotal . '' . $poNoReceiptPct . '%',
'value' => $poNoReceiptPct . '%' . $poNoReceipt . '',
])
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-renewal-missing-row" href="{!! $platformOrdersQuickLinks['renewal_missing_subscription'] !!}" aria-label="进入续费缺订阅订单集合"> @include('admin.components.mini_bar_row', [
<div class="adm-mini-bar-label">续费缺订阅</div> 'class' => 'mt-6',
<div class="adm-mini-bar" data-role="dashboard-po-renewal-missing-bar" title="{{ $poRenewalMissing }} / {{ $poTotal }}{{ $poRenewalMissingPct }}%"> 'rowRole' => 'dashboard-po-renewal-missing-row',
<span class="adm-mini-bar-fill" style="width: {{ $poRenewalMissingPct }}%"></span> 'barRole' => 'dashboard-po-renewal-missing-bar',
</div> 'href' => $platformOrdersQuickLinks['renewal_missing_subscription'],
<div class="adm-mini-bar-value">{{ $poRenewalMissingPct }}%{{ $poRenewalMissing }}</div> 'ariaLabel' => '进入续费缺订阅订单集合',
</a> 'label' => '续费缺订阅',
'pct' => $poRenewalMissingPct,
'title' => $poRenewalMissing . ' / ' . $poTotal . '' . $poRenewalMissingPct . '%',
'value' => $poRenewalMissingPct . '%' . $poRenewalMissing . '',
])
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-reconcile-mismatch-row" href="{!! $platformOrdersQuickLinks['reconcile_mismatch'] !!}" aria-label="进入对账不一致订单集合"> @include('admin.components.mini_bar_row', [
<div class="adm-mini-bar-label">对账不一致</div> 'class' => 'mt-6',
<div class="adm-mini-bar" data-role="dashboard-po-reconcile-mismatch-bar" title="{{ $poReconcileMismatch }} / {{ $poTotal }}{{ $poReconcileMismatchPct }}%"> 'rowRole' => 'dashboard-po-reconcile-mismatch-row',
<span class="adm-mini-bar-fill" style="width: {{ $poReconcileMismatchPct }}%"></span> 'barRole' => 'dashboard-po-reconcile-mismatch-bar',
</div> 'href' => $platformOrdersQuickLinks['reconcile_mismatch'],
<div class="adm-mini-bar-value">{{ $poReconcileMismatchPct }}%{{ $poReconcileMismatch }}</div> 'ariaLabel' => '进入对账不一致订单集合',
</a> 'label' => '对账不一致',
'pct' => $poReconcileMismatchPct,
'title' => $poReconcileMismatch . ' / ' . $poTotal . '' . $poReconcileMismatchPct . '%',
'value' => $poReconcileMismatchPct . '%' . $poReconcileMismatch . '',
])
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-refund-inconsistent-row" href="{!! $platformOrdersQuickLinks['refund_inconsistent'] !!}" aria-label="进入退款不一致订单集合"> @include('admin.components.mini_bar_row', [
<div class="adm-mini-bar-label">退款不一致</div> 'class' => 'mt-6',
<div class="adm-mini-bar" data-role="dashboard-po-refund-inconsistent-bar" title="{{ $poRefundInconsistent }} / {{ $poTotal }}{{ $poRefundInconsistentPct }}%"> 'rowRole' => 'dashboard-po-refund-inconsistent-row',
<span class="adm-mini-bar-fill" style="width: {{ $poRefundInconsistentPct }}%"></span> 'barRole' => 'dashboard-po-refund-inconsistent-bar',
</div> 'href' => $platformOrdersQuickLinks['refund_inconsistent'],
<div class="adm-mini-bar-value">{{ $poRefundInconsistentPct }}%{{ $poRefundInconsistent }}</div> 'ariaLabel' => '进入退款不一致订单集合',
</a> 'label' => '退款不一致',
'pct' => $poRefundInconsistentPct,
'title' => $poRefundInconsistent . ' / ' . $poTotal . '' . $poRefundInconsistentPct . '%',
'value' => $poRefundInconsistentPct . '%' . $poRefundInconsistent . '',
])
</div> </div>
</div> </div>