From e744890cc92769ce1bed9b4a82256d11d02eb6a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=9D=E5=8D=9C?= <dev@saasshop.local>
Date: Mon, 16 Mar 2026 10:35:48 +0800
Subject: [PATCH] refactor(admin-dashboard): unify mini chart styles and show
 names

---
 public/css/admin-components.css           | 49 +++++++----------------
 public/js/admin.js                        |  7 ++--
 resources/views/admin/dashboard.blade.php |  8 +++-
 3 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/public/css/admin-components.css b/public/css/admin-components.css
index 5f1de93..c250f16 100644
--- a/public/css/admin-components.css
+++ b/public/css/admin-components.css
@@ -309,14 +309,12 @@
 
 /* 可复用：KPI 卡片栅格（参考 Ant Design Pro Analysis：第一行 4 个等宽卡片） */
 
-/* 可复用：迷你图表（渐进增强：由 admin.js 渲染，页面无 JS 时为空但不影响表格） */
-.adm-mini-chart{
+/* 可复用：迷你图表/排行/占比（渐进增强：由 admin.js 渲染，页面无 JS 时为空但不影响表格） */
+.adm-mini-chart,
+.adm-mini-rank,
+.adm-mini-share{
     margin-top:10px;
-    height:86px;
     width:100%;
-    display:flex;
-    align-items:flex-end;
-    gap:8px;
     padding:10px 10px;
     border:1px solid var(--adm-border-color, #e5e7eb);
     border-radius:var(--adm-radius, 12px);
@@ -324,13 +322,22 @@
     box-shadow:var(--adm-shadow-sm);
 }
 
-.adm-mini-chart.is-empty{
+.adm-mini-chart.is-empty,
+.adm-mini-rank.is-empty,
+.adm-mini-share.is-empty{
     align-items:center;
     justify-content:center;
     color:var(--adm-text-muted, #94a3b8);
     font-size:12px;
 }
 
+.adm-mini-chart{
+    height:86px;
+    display:flex;
+    align-items:flex-end;
+    gap:8px;
+}
+
 .adm-mini-chart-bar{
     flex:1;
     min-width:0;
@@ -356,23 +363,9 @@
 
 /* 可复用：迷你排行（渐进增强：由 admin.js 渲染，页面无 JS 时为空但不影响表格） */
 .adm-mini-rank{
-    margin-top:10px;
-    width:100%;
     display:flex;
     flex-direction:column;
     gap:8px;
-    padding:10px 10px;
-    border:1px solid var(--adm-border-color, #e5e7eb);
-    border-radius:var(--adm-radius, 12px);
-    background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
-    box-shadow:var(--adm-shadow-sm);
-}
-
-.adm-mini-rank.is-empty{
-    align-items:center;
-    justify-content:center;
-    color:var(--adm-text-muted, #94a3b8);
-    font-size:12px;
 }
 
 .adm-mini-rank-row{
@@ -417,23 +410,9 @@
 
 /* 可复用：迷你占比（Top5）（渐进增强：由 admin.js 渲染，页面无 JS 时为空但不影响表格） */
 .adm-mini-share{
-    margin-top:10px;
-    width:100%;
     display:flex;
     flex-direction:column;
     gap:8px;
-    padding:10px 10px;
-    border:1px solid var(--adm-border-color, #e5e7eb);
-    border-radius:var(--adm-radius, 12px);
-    background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
-    box-shadow:var(--adm-shadow-sm);
-}
-
-.adm-mini-share.is-empty{
-    align-items:center;
-    justify-content:center;
-    color:var(--adm-text-muted, #94a3b8);
-    font-size:12px;
 }
 
 .adm-mini-share-row{
diff --git a/public/js/admin.js b/public/js/admin.js
index 5dfa58e..85eb81e 100644
--- a/public/js/admin.js
+++ b/public/js/admin.js
@@ -169,8 +169,8 @@
 
             var name = document.createElement('div');
             name.className = 'adm-mini-rank-name';
-            // 仅展示 #排名（站点名在表格里可看；后续可把真实名字也塞进 data-points）
-            name.textContent = '#' + (idx + 1);
+            var mname = (p && p.name) ? String(p.name) : ('#' + (idx + 1));
+            name.textContent = mname;
 
             var wrap = document.createElement('div');
             wrap.className = 'adm-mini-rank-bar-wrap';
@@ -232,7 +232,8 @@
 
             var name = document.createElement('div');
             name.className = 'adm-mini-share-name';
-            name.textContent = '#' + (idx + 1);
+            var pname = (p && p.name) ? String(p.name) : ('#' + (idx + 1));
+            name.textContent = pname;
 
             var wrap = document.createElement('div');
             wrap.className = 'adm-mini-share-bar-wrap';
diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index ab62a40..be0da1b 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -148,8 +148,10 @@
             // 用于前端渐进增强渲染迷你排行（JS 读取 data-points）
             $rankPoints = [];
             foreach ($rankRows as $r) {
+                $mid = (int) ($r['merchant_id'] ?? 0);
                 $rankPoints[] = [
-                    'merchant_id' => (int) ($r['merchant_id'] ?? 0),
+                    'merchant_id' => $mid,
+                    'name' => (string) (($merchantIdToName[$mid] ?? '') ?: ('#' . $mid)),
                     'count' => (int) ($r['count'] ?? 0),
                     'paid_sum' => (float) ($r['paid_sum'] ?? 0),
                 ];
@@ -346,8 +348,10 @@
             // 用于前端渐进增强渲染占比条形图（JS 读取 data-points）
             $sharePoints = [];
             foreach ($shareRows as $r) {
+                $pid = (int) ($r['plan_id'] ?? 0);
                 $sharePoints[] = [
-                    'plan_id' => (int) ($r['plan_id'] ?? 0),
+                    'plan_id' => $pid,
+                    'name' => (string) (($planIdToName[$pid] ?? '') ?: ('#' . $pid)),
                     'count' => (int) ($r['count'] ?? 0),
                 ];
             }