linxianzhuang/saasshop
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): extract admin mini bar row blade component

Browse Source
This commit is contained in:
萝卜
2026-03-17 08:30:20 +08:00
parent 617400a9e1
commit ac929ec593
2 changed files with 68 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
resources/views/admin/components/mini_bar_row.blade.php Normal file
View File

@@ -0,0 +1,46 @@
@php
/**
* Admin UI Component: Mini Bar Row (link)
*
* Required:
* - $href
* - $label
* - $pct
* - $value
*
* Optional:
* - $rowRole
* - $barRole
* - $title
* - $ariaLabel
* - $class
*/
$href = (string) ($href ?? '#');
$label = (string) ($label ?? '');
$pct = (float) ($pct ?? 0);
$value = (string) ($value ?? '');
$rowRole = (string) ($rowRole ?? '');
$barRole = (string) ($barRole ?? '');
$title = (string) ($title ?? '');
$ariaLabel = (string) ($ariaLabel ?? '');
$class = (string) ($class ?? '');
$pct = max(0, min(100, $pct));
@endphp
<a class="adm-mini-bar-row adm-mini-bar-row-link {{ $class }}"
@if($rowRole !== '') data-role="{{ $rowRole }}" @endif
href="{!! $href !!}"
@if($ariaLabel !== '') aria-label="{{ $ariaLabel }}" @endif
>
<div class="adm-mini-bar-label">{{ $label }}</div>
<div class="adm-mini-bar"
@if($barRole !== '') data-role="{{ $barRole }}" @endif
@if($title !== '') title="{{ $title }}" @endif
>
<span class="adm-mini-bar-fill" style="width: {{ $pct }}%"></span>
</div>
<div class="adm-mini-bar-value">{{ $value }}</div>
</a>

36
resources/views/admin/dashboard.blade.php
View File

@@ -534,21 +534,29 @@
<div class="mt-10" data-role="platform-ops-northstar-bars"> <div class="mt-10" data-role="platform-ops-northstar-bars">
<div class="muted"><strong>北极星指标（图形化）</strong></div> <div class="muted"><strong>北极星指标（图形化）</strong></div>
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="ops-northstar-active-paid-merchants-row" href="{!! (string) ($opsLinks['active_paid_merchants_subscriptions'] ?? $billingEntryLinks['site_subscriptions']) !!}" 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="ops-northstar-active-paid-merchants-bar" title="{{ $activePaidMerchants }} / {{ $merchantsTotal }}（{{ $pctActivePaidMerchants }}%）"> 'rowRole' => 'ops-northstar-active-paid-merchants-row',
<span class="adm-mini-bar-fill" style="width: {{ $pctActivePaidMerchants }}%"></span> 'barRole' => 'ops-northstar-active-paid-merchants-bar',
</div> 'href' => (string) ($opsLinks['active_paid_merchants_subscriptions'] ?? $billingEntryLinks['site_subscriptions']),
<div class="adm-mini-bar-value">{{ $pctActivePaidMerchants }}%（{{ $activePaidMerchants }}）</div> 'ariaLabel' => '进入活跃付费站点订阅集合',
</a> 'label' => '付费渗透',
'pct' => $pctActivePaidMerchants,
'title' => $activePaidMerchants . ' / ' . $merchantsTotal . '（' . $pctActivePaidMerchants . '%）',
'value' => $pctActivePaidMerchants . '%（' . $activePaidMerchants . '）',
])
<a class="adm-mini-bar-row adm-mini-bar-row-link mt-6" data-role="ops-northstar-renewal-rate-row" href="{!! (string) ($opsLinks['renewal_orders_30d'] ?? $billingEntryLinks['platform_orders']) !!}" aria-label="进入近30天续费订单集合"> @include('admin.components.mini_bar_row', [
<div class="adm-mini-bar-label">续费成功率</div> 'class' => 'mt-6',
<div class="adm-mini-bar" data-role="ops-northstar-renewal-rate-bar" title="{{ $renewalRate30d }}%（{{ $renewalSuccess30d }} / {{ $renewalCreated30d }}）"> 'rowRole' => 'ops-northstar-renewal-rate-row',
<span class="adm-mini-bar-fill" style="width: {{ $renewalRate30d }}%"></span> 'barRole' => 'ops-northstar-renewal-rate-bar',
</div> 'href' => (string) ($opsLinks['renewal_orders_30d'] ?? $billingEntryLinks['platform_orders']),
<div class="adm-mini-bar-value">{{ $renewalRate30d }}%</div> 'ariaLabel' => '进入近30天续费订单集合',
</a> 'label' => '续费成功率',
'pct' => $renewalRate30d,
'title' => $renewalRate30d . '%（' . $renewalSuccess30d . ' / ' . $renewalCreated30d . '）',
'value' => $renewalRate30d . '%',
])
<div class="muted muted-xs mt-6">说明：付费渗透 = 活跃付费站点 / 站点总数；续费成功率按近30天续费单计算。</div> <div class="muted muted-xs mt-6">说明：付费渗透 = 活跃付费站点 / 站点总数；续费成功率按近30天续费单计算。</div>
</div> </div>