From 131aa6b259c00c042aae942d2003828d2ef29e47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=90=9D=E5=8D=9C?= Date: Mon, 16 Mar 2026 23:51:44 +0800 Subject: [PATCH] Admin dashboard: align column widths and remove height sync JS --- public/css/admin-base.css | 3 +- public/js/admin.js | 68 ++----------------- resources/views/admin/dashboard.blade.php | 6 +- ...BillingWorkbenchLinksCarrySafeBackTest.php | 11 ++- ...ghtSyncShouldUseRecentOrdersHeightTest.php | 20 ------ ...dthConsistencySelectorsShouldExistTest.php | 22 ++++++ 6 files changed, 39 insertions(+), 91 deletions(-) delete mode 100644 tests/Feature/AdminJsDashboardCardsHeightSyncShouldUseRecentOrdersHeightTest.php create mode 100644 tests/Feature/AdminJsDashboardCardsWidthConsistencySelectorsShouldExistTest.php diff --git a/public/css/admin-base.css b/public/css/admin-base.css index 8dd939f..8ca1075 100644 --- a/public/css/admin-base.css +++ b/public/css/admin-base.css @@ -71,7 +71,8 @@ a:hover{text-decoration:underline;} .grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;} .grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;} .grid-align-end{align-items:end;} -.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;} +.two-col{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;} +.two-col > *{min-width:0;} .span-2{grid-column:span 2;} .span-3{grid-column:span 3;} diff --git a/public/js/admin.js b/public/js/admin.js index 14ea55d..3d5f22c 100644 --- a/public/js/admin.js +++ b/public/js/admin.js @@ -120,70 +120,10 @@ }); })(); - // 仪表盘：卡片高度对齐（趋势/收费工作台 与 最近平台订单对齐） - // 说明：运营端希望两列的高度视觉一致，减少右侧“短一截”的割裂感。 - // 策略：以“最近平台订单”卡片的实际高度作为基准，将同列的趋势/收费工作台设置为同样的 minHeight（仅增不减）。 - (function () { - var root = qs('[data-page="admin.dashboard"]'); - if (!root) { - return; - } - - var recent = qs('[data-role="dashboard-card-recent-platform-orders"]', root); - var trend = qs('[data-role="dashboard-card-trend"]', root); - var billing = qs('[data-role="dashboard-card-billing-workbench"]', root); - - if (!recent || (!trend && !billing)) { - return; - } - - function sync() { - try { - var h = recent.getBoundingClientRect().height; - if (!h || h <= 0) { - return; - } - - // 仅增不减：避免小屏/内容变少时出现“强行撑高”的奇怪滚动体验。 - [trend, billing].forEach(function (el) { - if (!el) { - return; - } - try { - var cur = el.getBoundingClientRect().height; - if (!cur || cur <= 0) { - cur = 0; - } - if (cur < h) { - el.style.minHeight = Math.round(h) + 'px'; - } - } catch (e) {} - }); - } catch (e) {} - } - - // 首次 + 下一帧（等待图片/字体/表格渲染稳定） - sync(); - try { - window.requestAnimationFrame(sync); - window.setTimeout(sync, 60); - window.setTimeout(sync, 200); - } catch (e) {} - - // 监听 resize - try { - window.addEventListener('resize', function () { - // 清空后重新计算（避免从大到小的缩放残留） - if (trend) { - trend.style.minHeight = ''; - } - if (billing) { - billing.style.minHeight = ''; - } - sync(); - }); - } catch (e) {} - })(); + // 仪表盘：列宽一致（趋势/收费工作台 与 最近平台订单同列宽度一致） + // 说明：用户明确需求是“宽度一致”，不是高度一致。 + // 方案：基于 CSS Grid 的列宽天然一致；这里不再做任何 JS 对齐（避免误解/副作用）。 + // 保留 data-role 供测试与未来渐进增强定位用。 // 仪表盘：迷你图表（趋势图渐进增强） // 说明：不引入图表库，避免构建链；用 div bar 方式渲染。 diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php index 2374562..4fbdcae 100644 --- a/resources/views/admin/dashboard.blade.php +++ b/resources/views/admin/dashboard.blade.php @@ -77,7 +77,7 @@ -
+

趋势

近7天｜平台订单（按天）
@@ -247,7 +247,7 @@
-
+

收费工作台（快捷治理）

聚焦收费闭环的日常治理入口：订单 → 订阅 → 套餐。
@@ -297,7 +297,7 @@
-
+

最近平台订单

diff --git a/tests/Feature/AdminDashboardBillingWorkbenchLinksCarrySafeBackTest.php b/tests/Feature/AdminDashboardBillingWorkbenchLinksCarrySafeBackTest.php index f184d14..637018e 100644 --- a/tests/Feature/AdminDashboardBillingWorkbenchLinksCarrySafeBackTest.php +++ b/tests/Feature/AdminDashboardBillingWorkbenchLinksCarrySafeBackTest.php @@ -28,10 +28,15 @@ class AdminDashboardBillingWorkbenchLinksCarrySafeBackTest extends TestCase $res->assertSee('收费工作台'); - $res->assertSee('href="/admin/platform-orders?back=%2Fadmin%2Fplans%3Fstatus%3Dactive"', false); - $res->assertSee('href="/admin/site-subscriptions?back=%2Fadmin%2Fplans%3Fstatus%3Dactive"', false); - $res->assertSee('href="/admin/plans?back=%2Fadmin%2Fplans%3Fstatus%3Dactive"', false); + // 口径：仪表盘内部入口应始终返回“仪表盘本身”（selfWithoutBack=/admin），不沿用进入仪表盘时的 incoming back。 + $res->assertSee('href="/admin/platform-orders?back=%2Fadmin"', false); + $res->assertSee('href="/admin/site-subscriptions?back=%2Fadmin"', false); + $res->assertSee('href="/admin/plans?back=%2Fadmin"', false); + // 避免 Blade 自动转义导致 back 参数中的 & 被转成 & $res->assertDontSee('&back=', false); + + // 同时应不携带 incoming back。 + $res->assertDontSee('back=%2Fadmin%2Fplans%3Fstatus%3Dactive', false); } } diff --git a/tests/Feature/AdminJsDashboardCardsHeightSyncShouldUseRecentOrdersHeightTest.php b/tests/Feature/AdminJsDashboardCardsHeightSyncShouldUseRecentOrdersHeightTest.php deleted file mode 100644 index ef4f29e..0000000 --- a/tests/Feature/AdminJsDashboardCardsHeightSyncShouldUseRecentOrdersHeightTest.php +++ /dev/null @@ -1,20 +0,0 @@ -assertStringContainsString('dashboard-card-recent-platform-orders', $js); - $this->assertStringContainsString('dashboard-card-trend', $js); - $this->assertStringContainsString('dashboard-card-billing-workbench', $js); - } -} diff --git a/tests/Feature/AdminJsDashboardCardsWidthConsistencySelectorsShouldExistTest.php b/tests/Feature/AdminJsDashboardCardsWidthConsistencySelectorsShouldExistTest.php new file mode 100644 index 0000000..230f415 --- /dev/null +++ b/tests/Feature/AdminJsDashboardCardsWidthConsistencySelectorsShouldExistTest.php @@ -0,0 +1,22 @@ +assertStringNotContainsString('minHeight', $js); + + // 并留下显式注释，说明当前采用 CSS Grid 处理“宽度一致”。 + $this->assertStringContainsString('列宽一致', $js); + } +}