feat(admin-js): trend mini chart bars clickable via table date links
This commit is contained in:
@@ -381,6 +381,17 @@
|
|||||||
background:var(--adm-primary-tint-06, rgba(22, 119, 255, .06));
|
background:var(--adm-primary-tint-06, rgba(22, 119, 255, .06));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 趋势迷你图:bar 可点击(JS 渐进增强把 bar 渲染为 <a>) */
|
||||||
|
.adm-mini-chart-bar-link{
|
||||||
|
display:block;
|
||||||
|
cursor:pointer;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adm-mini-chart-bar-link:hover{
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
|
||||||
/* 可复用:迷你排行(渐进增强:由 admin.js 渲染,页面无 JS 时为空但不影响表格) */
|
/* 可复用:迷你排行(渐进增强:由 admin.js 渲染,页面无 JS 时为空但不影响表格) */
|
||||||
.adm-mini-rank{
|
.adm-mini-rank{
|
||||||
display:flex;
|
display:flex;
|
||||||
|
|||||||
@@ -153,6 +153,21 @@
|
|||||||
max = 1;
|
max = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 渐进增强:从下方表格复用“日期→订单集合”链接口径(避免硬编码 URL 规则)。
|
||||||
|
var dateToHref = {};
|
||||||
|
try {
|
||||||
|
var links = document.querySelectorAll('[data-role="platform-order-trend-7d"] a.link');
|
||||||
|
links.forEach(function (a) {
|
||||||
|
var d = String((a.textContent || '')).trim();
|
||||||
|
if (!d) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dateToHref[d] = String(a.getAttribute('href') || '');
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
dateToHref = {};
|
||||||
|
}
|
||||||
|
|
||||||
// 清空(避免 SSR/重复执行污染)
|
// 清空(避免 SSR/重复执行污染)
|
||||||
el.innerHTML = '';
|
el.innerHTML = '';
|
||||||
|
|
||||||
@@ -160,11 +175,18 @@
|
|||||||
var paid = Number(p && p.paid_sum ? p.paid_sum : 0);
|
var paid = Number(p && p.paid_sum ? p.paid_sum : 0);
|
||||||
var h = Math.round(Math.max(6, (paid / max) * 72));
|
var h = Math.round(Math.max(6, (paid / max) * 72));
|
||||||
|
|
||||||
var bar = document.createElement('div');
|
|
||||||
bar.className = 'adm-mini-chart-bar';
|
|
||||||
bar.style.height = h + 'px';
|
|
||||||
|
|
||||||
var date = (p && p.date) ? String(p.date) : '';
|
var date = (p && p.date) ? String(p.date) : '';
|
||||||
|
var href = (date && dateToHref[date]) ? String(dateToHref[date]) : '';
|
||||||
|
|
||||||
|
var bar = document.createElement(href ? 'a' : 'div');
|
||||||
|
bar.className = 'adm-mini-chart-bar' + (href ? ' adm-mini-chart-bar-link' : '');
|
||||||
|
bar.style.height = h + 'px';
|
||||||
|
if (href) {
|
||||||
|
bar.setAttribute('href', href);
|
||||||
|
bar.setAttribute('role', 'link');
|
||||||
|
bar.setAttribute('aria-label', '进入当日订单集合:' + date);
|
||||||
|
}
|
||||||
|
|
||||||
var countNum = Number(p && p.count != null ? p.count : 0);
|
var countNum = Number(p && p.count != null ? p.count : 0);
|
||||||
if (!isFinite(countNum) || countNum < 0) {
|
if (!isFinite(countNum) || countNum < 0) {
|
||||||
countNum = 0;
|
countNum = 0;
|
||||||
|
|||||||
@@ -0,0 +1,20 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Tests\Feature;
|
||||||
|
|
||||||
|
use Tests\TestCase;
|
||||||
|
|
||||||
|
class AdminJsPlatformOrderTrend7dShouldReuseTableDateLinksSelectorTest extends TestCase
|
||||||
|
{
|
||||||
|
public function test_admin_js_platform_order_trend_7d_should_reuse_table_date_links_selector(): void
|
||||||
|
{
|
||||||
|
$js = (string) file_get_contents(public_path('js/admin.js'));
|
||||||
|
|
||||||
|
// 护栏:趋势图应从表格复用日期链接口径(避免 JS 里硬编码 created_from/to 规则)
|
||||||
|
$this->assertStringContainsString('[data-role="platform-order-trend-7d"] a.link', $js);
|
||||||
|
|
||||||
|
// 且支持 a/div 二选一(可点击则 <a>)
|
||||||
|
$this->assertStringContainsString("document.createElement(href ? 'a' : 'div')", $js);
|
||||||
|
$this->assertStringContainsString('adm-mini-chart-bar-link', $js);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user