style(hub): color-code monitor card strategy stat chips

Use shared cyan for breakout/fib keys, purple for watch keys, green for trends, and orange for roll groups.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-03 23:30:33 +08:00
parent 98038b1945
commit 2c01d11fe1
3 changed files with 39 additions and 10 deletions
+28 -2
View File
@@ -1296,9 +1296,35 @@ body.market-chart-fs-open {
border-radius: 6px;
font-size: 11px;
line-height: 1.3;
border: 1px solid transparent;
}
/* 突破 + 斐波 */
.card-stat-chip.card-stat-key-breakout {
color: var(--accent);
background: var(--accent-dim);
border: 1px solid var(--border-soft);
background: rgba(0, 212, 255, 0.14);
border-color: rgba(0, 212, 255, 0.38);
}
/* 关键位监控(阻力/支撑等) */
.card-stat-chip.card-stat-key-watch {
color: #b8a0ff;
background: rgba(123, 97, 255, 0.18);
border-color: rgba(123, 97, 255, 0.42);
}
/* 趋势回调 */
.card-stat-chip.card-stat-trend {
color: var(--green);
background: rgba(0, 255, 157, 0.1);
border-color: rgba(0, 255, 157, 0.38);
}
/* 顺势加仓 */
.card-stat-chip.card-stat-roll {
color: #ffb020;
background: rgba(255, 176, 32, 0.14);
border-color: rgba(255, 176, 32, 0.42);
}
.hub-tile .card-strategy-stats {
+9 -6
View File
@@ -1652,19 +1652,22 @@
const chips = [];
if (caps.includes("key")) {
const kc = countKeyMonitorsByBucket(hm.keys || []);
if (kc.breakout > 0) chips.push(`突破 ${kc.breakout}`);
if (kc.fib > 0) chips.push(`斐波 ${kc.fib}`);
if (kc.watch > 0) chips.push(`监控 ${kc.watch}`);
if (kc.breakout > 0) chips.push({ kind: "key-breakout", label: `突破 ${kc.breakout}` });
if (kc.fib > 0) chips.push({ kind: "key-breakout", label: `斐波 ${kc.fib}` });
if (kc.watch > 0) chips.push({ kind: "key-watch", label: `监控 ${kc.watch}` });
}
if (caps.includes("trend")) {
const trendN = Array.isArray(hm.trends) ? hm.trends.length : 0;
if (trendN > 0) chips.push(`趋势回调 ${trendN}`);
if (trendN > 0) chips.push({ kind: "trend", label: `趋势回调 ${trendN}` });
}
const rollN = Array.isArray(hm.rolls) ? hm.rolls.length : 0;
if (rollN > 0) chips.push(`顺势加仓 ${rollN}`);
if (rollN > 0) chips.push({ kind: "roll", label: `顺势加仓 ${rollN}` });
if (!chips.length) return "";
return `<div class="card-strategy-stats">${chips
.map((label) => `<span class="card-stat-chip">${esc(label)}</span>`)
.map(
(c) =>
`<span class="card-stat-chip card-stat-${esc(c.kind)}">${esc(c.label)}</span>`
)
.join("")}</div>`;
}
+2 -2
View File
@@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
<link rel="stylesheet" href="/assets/app.css?v=20260604-hub-card-stats" />
<link rel="stylesheet" href="/assets/app.css?v=20260604-hub-stat-colors" />
</head>
<body>
<div class="app-bg" aria-hidden="true"></div>
@@ -246,6 +246,6 @@
<div id="toast"></div>
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="/assets/chart.js?v=20260603-hub-binance-tick"></script>
<script src="/assets/app.js?v=20260604-hub-card-stats"></script>
<script src="/assets/app.js?v=20260604-hub-stat-colors"></script>
</body>
</html>