Dashboard: make mini bar rows clickable links to governance scopes

public/css/admin-components.css

@@ -614,6 +614,24 @@
     align-items:center;
 }
 
+.adm-mini-bar-row-link{
+    text-decoration:none;
+    color:inherit;
+    border-radius:10px;
+    padding:4px 6px;
+    margin-left:-6px;
+    margin-right:-6px;
+}
+
+.adm-mini-bar-row-link:hover{
+    background:var(--adm-primary-tint, rgba(22, 119, 255, .08));
+}
+
+.adm-mini-bar-row-link:focus{
+    outline:none;
+    box-shadow:0 0 0 3px var(--adm-primary-focus-ring, rgba(22, 119, 255, .12)), var(--adm-shadow-sm);
+}
+
 .adm-mini-bar-label{
     font-size:12px;
     color:var(--adm-text-muted, #94a3b8);

resources/views/admin/dashboard.blade.php

@@ -296,57 +296,57 @@
             <div class="mt-10" data-role="dashboard-po-funnel-bars">
                 <div class="muted muted-xs">收费主链漏斗（相对平台订单总量 {{ $poTotal }}）</div>
 
-                <div class="adm-mini-bar-row mt-6" data-role="dashboard-po-unpaid-pending-row">
+                <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="进入待支付订单集合">
                     <div class="adm-mini-bar-label">待支付</div>
                     <div class="adm-mini-bar" data-role="dashboard-po-unpaid-pending-bar" title="{{ $poUnpaidPending }} / {{ $poTotal }}（{{ $poUnpaidPendingPct }}%）">
                         <span class="adm-mini-bar-fill" style="width: {{ $poUnpaidPendingPct }}%"></span>
                     </div>
                     <div class="adm-mini-bar-value">{{ $poUnpaidPendingPct }}%</div>
-                </div>
+                </a>
 
-                <div class="adm-mini-bar-row mt-6" data-role="dashboard-po-paid-pending-row">
+                <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="进入待生效订单集合">
                     <div class="adm-mini-bar-label">待生效</div>
                     <div class="adm-mini-bar" data-role="dashboard-po-paid-pending-bar" title="{{ $poPaidPending }} / {{ $poTotal }}（{{ $poPaidPendingPct }}%）">
                         <span class="adm-mini-bar-fill" style="width: {{ $poPaidPendingPct }}%"></span>
                     </div>
                     <div class="adm-mini-bar-value">{{ $poPaidPendingPct }}%</div>
-                </div>
+                </a>
 
-                <div class="adm-mini-bar-row mt-6" data-role="dashboard-po-syncable-row">
+                <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="进入可同步订单集合">
                     <div class="adm-mini-bar-label">可同步</div>
                     <div class="adm-mini-bar" data-role="dashboard-po-syncable-bar" title="{{ $poSyncable }} / {{ $poTotal }}（{{ $poSyncablePct }}%）">
                         <span class="adm-mini-bar-fill" style="width: {{ $poSyncablePct }}%"></span>
                     </div>
                     <div class="adm-mini-bar-value">{{ $poSyncablePct }}%</div>
-                </div>
+                </a>
             </div>
 
             <div class="mt-10" data-role="dashboard-po-governance-bars">
                 <div class="muted muted-xs">治理风险占比（相对平台订单总量 {{ $poTotal }}）</div>
 
-                <div class="adm-mini-bar-row mt-6" data-role="dashboard-po-sync-failed-row">
+                <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="进入同步失败订单集合">
                     <div class="adm-mini-bar-label">同步失败</div>
                     <div class="adm-mini-bar" data-role="dashboard-po-sync-failed-bar" title="{{ $poSyncFailed }} / {{ $poTotal }}（{{ $poSyncFailedPct }}%）">
                         <span class="adm-mini-bar-fill" style="width: {{ $poSyncFailedPct }}%"></span>
                     </div>
                     <div class="adm-mini-bar-value">{{ $poSyncFailedPct }}%</div>
-                </div>
+                </a>
 
-                <div class="adm-mini-bar-row mt-6" data-role="dashboard-po-no-receipt-row">
+                <a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-no-receipt-row" href="{!! \App\Support\BackUrl::withBack('/admin/platform-orders?payment_status=paid&receipt_status=none', $selfWithoutBack) !!}" aria-label="进入无回执订单集合">
                     <div class="adm-mini-bar-label">无回执</div>
                     <div class="adm-mini-bar" data-role="dashboard-po-no-receipt-bar" title="{{ $poNoReceipt }} / {{ $poTotal }}（{{ $poNoReceiptPct }}%）">
                         <span class="adm-mini-bar-fill" style="width: {{ $poNoReceiptPct }}%"></span>
                     </div>
                     <div class="adm-mini-bar-value">{{ $poNoReceiptPct }}%</div>
-                </div>
+                </a>
 
-                <div class="adm-mini-bar-row mt-6" data-role="dashboard-po-renewal-missing-row">
+                <a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="dashboard-po-renewal-missing-row" href="{!! \App\Support\BackUrl::withBack('/admin/platform-orders?renewal_missing_subscription=1', $selfWithoutBack) !!}" aria-label="进入续费缺订阅订单集合">
                     <div class="adm-mini-bar-label">续费缺订阅</div>
                     <div class="adm-mini-bar" data-role="dashboard-po-renewal-missing-bar" title="{{ $poRenewalMissing }} / {{ $poTotal }}（{{ $poRenewalMissingPct }}%）">
                         <span class="adm-mini-bar-fill" style="width: {{ $poRenewalMissingPct }}%"></span>
                     </div>
                     <div class="adm-mini-bar-value">{{ $poRenewalMissingPct }}%</div>
-                </div>
+                </a>
             </div>
         </div>