dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hub): dashboard SSE push, light-theme cards, simplify AI coach

Browse Source 
Replace dashboard polling with backend SSE and snapshot refresh. Restyle for light/dark theme with soft card glow instead of neon. Remove Today's Summary from AI page; keep trading and general chat only. Update hub documentation.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-11 10:53:50 +08:00
parent 582ada7e60
commit 07e8604ea6
11 changed files with 481 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+6 -20
View File
@@ -3850,13 +3850,15 @@ body.hub-page-ai #page-ai {
.ai-layout {
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(0, 1fr);
gap: 12px;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
}
.ai-layout .ai-chat-panel {
flex: 1 1 auto;
min-height: 0;
}
.ai-mobile-tabs {
display: none;
}
@@ -3938,22 +3940,6 @@ body.hub-page-ai #page-ai {
overflow: hidden;
}
body.hub-page-ai .ai-layout[data-ai-mobile-tab="chat"] .ai-summary-panel,
body.hub-page-ai .ai-layout[data-ai-mobile-tab="summary"] .ai-chat-panel,
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-summary-panel {
display: none !important;
}
body.hub-page-ai .ai-layout[data-ai-mobile-tab="chat"] .ai-chat-panel,
body.hub-page-ai .ai-layout[data-ai-mobile-tab="summary"] .ai-summary-panel {
display: flex;
flex: 1 1 auto;
width: 100%;
max-width: 100%;
min-height: 0;
min-width: 0;
}
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-panel {
display: flex;
flex: 1 1 auto;
manual_trading_hub/static/app.js
+1 -213
View File
@@ -3142,26 +3142,11 @@
showToast("已添加一行，请填写 URL 后点「保存设置」");
};
let aiSummaryLoading = false;
let aiChatLoading = false;
let aiChatSessionCache = null;
let aiChatSessionsCache = [];
let aiSelectedBotMode = "trading";
function aiPnlClass(v) {
const n = Number(v);
if (!Number.isFinite(n) || Math.abs(n) < 1e-9) return "";
return n > 0 ? "pos" : "neg";
}
function aiPnlSigned(v, digits) {
const n = Number(v);
if (!Number.isFinite(n)) return "—";
const abs = fmt(Math.abs(n), digits);
if (Math.abs(n) < 1e-9) return `${abs}U`;
return `${n > 0 ? "+" : "-"}${abs}U`;
}
function renderHubMarkdown(text) {
const raw = String(text || "");
if (typeof window !== "undefined" && window.AiReviewRender && window.AiReviewRender.renderMarkdown) {
@@ -3172,154 +3157,6 @@
.replace(/\n/g, "<br>");
}
function renderAiMarkdown(text) {
return renderHubMarkdown(text);
}
function enhanceHubSummaryMarkdown(md) {
let out = String(md || "");
out = out.replace(/\*\*今日交易总结（([^）]+)）\*\*/g, "# 📋 今日交易总结（$1）");
out = out.replace(/\*\*1\.\s*(?:📊\s*)?总览\*\*/g, "## 1. 📊 总览");
out = out.replace(/\*\*2\.\s*(?:👥\s*)?分户明细\*\*/g, "## 2. 👥 分户明细");
out = out.replace(/\*\*3\.\s*(?:⚠️\s*)?需关注\*\*/g, "## 3. ⚠️ 需关注");
out = out.replace(/\*\*4\.\s*(?:ℹ️\s*)?数据说明\*\*/g, "## 4. ℹ️ 数据说明");
out = out.replace(/\*\*5\.\s*(?:💡\s*)?操作建议\*\*/g, "## 5. 💡 操作建议");
return out;
}
function aiFmtFund(v) {
const n = Number(v);
if (!Number.isFinite(n)) return "—";
return `${fmt(n, 2)}U`;
}
function aiPnlCellHtml(v, digits) {
const cls = aiPnlClass(v);
const valCls = cls ? ` ai-stat-val ${cls}` : " ai-stat-val";
return `<span class="${valCls.trim()}">${aiPnlSigned(v, digits)}</span>`;
}
function aiAccountStatusClass(status) {
const s = String(status || "");
if (s === "未监控") return "ai-ac-unmon";
if (s.includes("异常")) return "ai-ac-err";
if (s.includes("需关注")) return "ai-ac-warn";
return "";
}
function renderAiAccountTable(snapshot) {
const accounts = snapshot && snapshot.by_account;
if (!accounts || typeof accounts !== "object") return "";
const rows = Object.values(accounts);
if (!rows.length) return "";
const head =
"<thead><tr>" +
"<th>账户</th><th>状态</th><th>资金账户</th><th>交易账户</th><th>今日盈亏</th><th>笔数</th><th>浮盈亏</th><th>备注</th>" +
"</tr></thead>";
const body = rows
.map((ac) => {
const closedPnl = Number(ac.pnl_u);
const floatPnl = Number(ac.float_pnl_u);
const remark =
ac.remark ||
(Array.isArray(ac.issues) && ac.issues.length ? ac.issues.join("；") : "无");
const statusCls = aiAccountStatusClass(ac.status);
const countLabel = `${Number(ac.closed_count) || 0}${Number(ac.closed_count_yesterday) ? ` / 昨${Number(ac.closed_count_yesterday)}` : ""}`;
return (
"<tr>" +
`<td class="ai-ac-name">${esc(ac.name || "—")}</td>` +
`<td class="${statusCls}">${esc(ac.status || "—")}</td>` +
`<td>${aiFmtFund(ac.funding_usdt)}</td>` +
`<td>${aiFmtFund(ac.trading_usdt)}</td>` +
`<td>${aiPnlCellHtml(closedPnl, 2)}</td>` +
`<td>${countLabel}</td>` +
`<td>${aiPnlCellHtml(floatPnl, 2)}</td>` +
`<td class="ai-ac-remark">${esc(remark)}</td>` +
"</tr>"
);
})
.join("");
return `<div class="ai-ac-table-wrap"><table class="ai-ac-table">${head}<tbody>${body}</tbody></table></div>`;
}
function renderAiClosedTradesBlock(snapshot) {
const rows = (snapshot && snapshot.closed_trades) || [];
if (!rows.length) return "";
const head =
"<thead><tr><th>交易日</th><th>账户</th><th>合约</th><th>方向</th><th>结果</th><th>盈亏</th><th>时间</th></tr></thead>";
const body = rows
.map((t) => {
const pnl = Number(t.pnl_amount);
return (
"<tr>" +
`<td>${esc(t.trading_day || "—")}</td>` +
`<td>${esc(t.account_name || "—")}</td>` +
`<td>${esc(t.symbol || "—")}</td>` +
`<td>${esc(t.direction || "—")}</td>` +
`<td>${esc(t.result || "—")}</td>` +
`<td>${aiPnlCellHtml(pnl, 2)}</td>` +
`<td class="ai-ac-remark">${esc(t.closed_at || "—")}</td>` +
"</tr>"
);
})
.join("");
return (
`<div class="ai-closed-trades-wrap">` +
`<h4 class="ai-closed-trades-title">平仓明细（今日）</h4>` +
`<div class="ai-ac-table-wrap"><table class="ai-ac-table ai-closed-trades-table">${head}<tbody>${body}</tbody></table></div>` +
`</div>`
);
}
function renderAiSummaryBody(contentMd, snapshot) {
const md = enhanceHubSummaryMarkdown(contentMd);
const sec2 = /##\s*2\.\s*👥\s*分户明细/;
const sec3 = /##\s*3\.\s*⚠️\s*需关注/;
const i2 = md.search(sec2);
const i3 = md.search(sec3);
const tableHtml = renderAiAccountTable(snapshot);
const closedHtml = renderAiClosedTradesBlock(snapshot);
if (i2 >= 0 && i3 > i2 && tableHtml) {
const headEnd = i2 + md.slice(i2).match(sec2)[0].length;
const part1 = md.slice(0, headEnd);
const part2 = md.slice(i3);
return renderHubMarkdown(part1) + tableHtml + closedHtml + renderHubMarkdown(part2);
}
return renderHubMarkdown(md) + (tableHtml ? tableHtml + closedHtml : "");
}
function setAiSummaryMarkdown(body, contentMd, snapshot) {
if (!body) return;
body.classList.add("ai-result-md");
body.innerHTML = renderAiSummaryBody(contentMd, snapshot);
}
function setAiSummaryPlaceholder(body, html) {
if (!body) return;
body.classList.remove("ai-result-md");
body.innerHTML = html;
}
function renderAiSummaryStats(snapshot) {
const el = document.getElementById("ai-summary-stats");
if (!el) return;
if (!snapshot || !snapshot.totals) {
el.innerHTML = "";
return;
}
const t = snapshot.totals;
const closedPnl = Number(t.total_pnl_u);
const floatPnl = Number(t.float_pnl_u);
const closedCls = aiPnlClass(closedPnl);
const floatCls = aiPnlClass(floatPnl);
el.innerHTML = [
`<span class="ai-stat-chip"><strong>交易日</strong>${esc(t.trading_day || "—")}</span>`,
`<span class="ai-stat-chip ${closedCls}"><strong>平仓盈亏</strong><span class="ai-stat-val ${closedCls}">${aiPnlSigned(closedPnl, 2)}</span></span>`,
`<span class="ai-stat-chip"><strong>笔数</strong>${t.closed_count || 0}（胜${t.win_count || 0}/负${t.loss_count || 0}）</span>`,
`<span class="ai-stat-chip ${floatCls}"><strong>浮盈亏</strong><span class="ai-stat-val ${floatCls}">${aiPnlSigned(floatPnl, 2)}</span></span>`,
].join("");
}
function scrollAiChatToEnd() {
const box = document.getElementById("ai-chat-messages");
if (!box) return;
@@ -3476,21 +3313,6 @@
if (input) input.disabled = busy;
}
async function loadAiSummary() {
const body = document.getElementById("ai-summary-body");
try {
const r = await apiFetch("/api/ai/summary");
const j = await r.json();
const latest = j.latest;
if (latest && latest.content_md) {
if (body) setAiSummaryMarkdown(body, latest.content_md, latest.stats_snapshot);
renderAiSummaryStats(latest.stats_snapshot);
}
} catch (e) {
if (body) setAiSummaryPlaceholder(body, `<p class="ai-placeholder">${esc(String(e))}</p>`);
}
}
async function loadAiChatSession() {
const r = await apiFetch("/api/ai/chat/session");
const j = await r.json();
@@ -3547,7 +3369,7 @@
async function loadAiPage() {
applyAiMobileTab();
await Promise.all([loadAiSummary(), loadAiChatSession()]);
await loadAiChatSession();
if (isMobileLayout() && (localStorage.getItem(AI_MOBILE_TAB_KEY) || "chat") === "chat") {
const input = document.getElementById("ai-chat-input");
if (input && !aiChatLoading) {
@@ -3556,38 +3378,6 @@
}
}
async function generateAiSummary() {
if (aiSummaryLoading) return;
aiSummaryLoading = true;
const btn = document.getElementById("btn-ai-summary");
const body = document.getElementById("ai-summary-body");
if (btn) btn.disabled = true;
if (body) setAiSummaryPlaceholder(body, '<p class="ai-placeholder">正在聚合四户数据并生成总结…</p>');
try {
const r = await apiFetch("/api/ai/summary/generate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ force: true }),
});
const j = await r.json();
if (!r.ok) throw new Error(j.detail || j.msg || "生成失败");
if (!j.ok && j.detail) throw new Error(j.detail);
const sum = j.summary;
if (sum && sum.content_md && body) {
setAiSummaryMarkdown(body, sum.content_md, sum.stats_snapshot);
renderAiSummaryStats(sum.stats_snapshot);
}
showToast(j.cached ? "已是最新上下文，返回缓存总结" : "今日总结已生成");
await loadAiSummary();
} catch (e) {
showToast(String(e), true);
if (body) setAiSummaryPlaceholder(body, `<p class="ai-placeholder">${esc(String(e))}</p>`);
} finally {
aiSummaryLoading = false;
if (btn) btn.disabled = false;
}
}
async function newAiChat(botMode) {
const mode = botMode === "general" ? "general" : "trading";
try {
@@ -3663,8 +3453,6 @@
});
}
const aiSummaryBtn = document.getElementById("btn-ai-summary");
if (aiSummaryBtn) aiSummaryBtn.onclick = () => generateAiSummary();
const aiChatNewBtn = document.getElementById("btn-ai-chat-new");
if (aiChatNewBtn) aiChatNewBtn.onclick = () => newAiChat(aiSelectedBotMode);
const aiChatForm = document.getElementById("ai-chat-form");
manual_trading_hub/static/dashboard.css
+94 -134
View File
@@ -1,49 +1,43 @@
/* 数据看板 — 科技感展示 */
/* 数据看板 — 随中控亮/暗主题，卡片柔光 */
body.hub-page-dashboard {
--dash-cyan: #3ee7ff;
--dash-mag: #c45bff;
--dash-warn: #ff5c7a;
--dash-ok: #3dffb0;
--dash-panel: rgba(10, 16, 32, 0.82);
--dash-border: rgba(62, 231, 255, 0.22);
--dash-card-bg: var(--panel);
--dash-card-border: var(--border-soft);
--dash-card-glow: 0 2px 12px rgba(0, 0, 0, 0.06);
--dash-section-bg: var(--panel);
--dash-muted: var(--muted);
--dash-text: var(--text);
--dash-accent: var(--accent);
--dash-ok: var(--green);
--dash-warn: var(--red);
}
html[data-theme="light"] body.hub-page-dashboard {
--dash-card-glow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 8px 24px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] body.hub-page-dashboard {
--dash-card-glow:
0 4px 18px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.hub-page-dashboard .page#page-dashboard {
position: relative;
overflow: hidden;
}
.dash-bg-grid {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.45;
background-image:
linear-gradient(rgba(62, 231, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(62, 231, 255, 0.04) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 75%);
}
.dash-bg-glow {
position: absolute;
width: 520px;
height: 520px;
border-radius: 50%;
filter: blur(90px);
opacity: 0.35;
pointer-events: none;
}
.dash-bg-glow-a {
top: -120px;
left: -80px;
background: var(--dash-cyan);
}
.dash-bg-glow-b {
top: 40%;
right: -160px;
background: var(--dash-mag);
linear-gradient(color-mix(in srgb, var(--border-soft) 55%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--border-soft) 55%, transparent) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 15%, transparent 72%);
}
.dash-wrap {
@@ -64,40 +58,36 @@ body.hub-page-dashboard .page#page-dashboard {
}
.dash-head h1 {
font-family: Orbitron, var(--font-sans, system-ui), sans-serif;
font-size: clamp(1.35rem, 2.5vw, 1.85rem);
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
font-weight: 700;
letter-spacing: 0.06em;
letter-spacing: 0.02em;
margin: 0;
background: linear-gradient(90deg, var(--dash-cyan), #8fc8ff 45%, var(--dash-mag));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
color: var(--dash-text);
}
.dash-head-tag {
display: inline-block;
font-family: JetBrains Mono, monospace;
font-size: 0.65rem;
color: var(--dash-cyan);
border: 1px solid var(--dash-border);
color: var(--dash-accent);
border: 1px solid var(--dash-card-border);
padding: 2px 8px;
border-radius: 4px;
margin-right: 10px;
vertical-align: middle;
letter-spacing: 0.12em;
letter-spacing: 0.1em;
}
.dash-head-meta {
font-family: JetBrains Mono, monospace;
font-size: 0.78rem;
color: var(--muted);
color: var(--dash-muted);
text-align: right;
}
.dash-head-meta strong {
color: var(--dash-cyan);
font-weight: 500;
color: var(--dash-text);
font-weight: 600;
}
.dash-pulse-dot {
@@ -107,7 +97,7 @@ body.hub-page-dashboard .page#page-dashboard {
border-radius: 50%;
background: var(--dash-ok);
margin-right: 6px;
box-shadow: 0 0 10px var(--dash-ok);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--dash-ok) 25%, transparent);
animation: dash-pulse 2s ease-in-out infinite;
}
@@ -118,8 +108,8 @@ body.hub-page-dashboard .page#page-dashboard {
transform: scale(1);
}
50% {
opacity: 0.55;
transform: scale(0.85);
opacity: 0.65;
transform: scale(0.9);
}
}
@@ -129,56 +119,48 @@ body.hub-page-dashboard .page#page-dashboard {
gap: 12px;
}
.dash-kpi,
.dash-section,
.dash-ac-card {
box-shadow: var(--dash-card-glow);
}
.dash-kpi {
position: relative;
padding: 16px 18px;
border-radius: 12px;
background: var(--dash-panel);
border: 1px solid var(--dash-border);
backdrop-filter: blur(12px);
background: var(--dash-card-bg);
border: 1px solid var(--dash-card-border);
overflow: hidden;
}
.dash-kpi::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--dash-cyan), transparent);
opacity: 0.7;
}
.dash-kpi-label {
font-size: 0.72rem;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dash-muted);
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.dash-kpi-value {
font-family: JetBrains Mono, monospace;
font-size: clamp(1.25rem, 2.2vw, 1.65rem);
font-size: clamp(1.25rem, 2.2vw, 1.55rem);
font-weight: 600;
line-height: 1.2;
color: var(--dash-text);
}
.dash-kpi-value.pos {
color: var(--dash-ok);
text-shadow: 0 0 18px rgba(61, 255, 176, 0.35);
}
.dash-kpi-value.neg {
color: var(--dash-warn);
text-shadow: 0 0 18px rgba(255, 92, 122, 0.35);
}
.dash-kpi-sub {
margin-top: 6px;
font-size: 0.72rem;
color: #8892b0;
color: var(--dash-muted);
}
.dash-alert-banner {
@@ -187,37 +169,25 @@ body.hub-page-dashboard .page#page-dashboard {
gap: 12px;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid rgba(255, 92, 122, 0.45);
background: linear-gradient(90deg, rgba(255, 92, 122, 0.12), rgba(196, 91, 255, 0.08));
border: 1px solid color-mix(in srgb, var(--dash-warn) 45%, var(--dash-card-border));
background: color-mix(in srgb, var(--dash-warn) 8%, var(--dash-card-bg));
font-size: 0.85rem;
animation: dash-alert-glow 2.5s ease-in-out infinite;
box-shadow: var(--dash-card-glow);
}
.dash-alert-banner.is-on {
display: flex;
}
@keyframes dash-alert-glow {
0%,
100% {
box-shadow: 0 0 0 rgba(255, 92, 122, 0);
}
50% {
box-shadow: 0 0 22px rgba(255, 92, 122, 0.25);
}
}
.dash-alert-banner strong {
color: var(--dash-warn);
font-family: Orbitron, sans-serif;
letter-spacing: 0.04em;
letter-spacing: 0.02em;
}
.dash-section {
border-radius: 14px;
border: 1px solid var(--dash-border);
background: var(--dash-panel);
backdrop-filter: blur(10px);
border: 1px solid var(--dash-card-border);
background: var(--dash-section-bg);
overflow: hidden;
}
@@ -226,11 +196,11 @@ body.hub-page-dashboard .page#page-dashboard {
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid rgba(62, 231, 255, 0.12);
font-family: Orbitron, sans-serif;
border-bottom: 1px solid var(--dash-card-border);
font-size: 0.82rem;
letter-spacing: 0.1em;
color: var(--dash-cyan);
letter-spacing: 0.06em;
color: var(--dash-muted);
font-weight: 600;
}
.dash-section-body {
@@ -248,35 +218,20 @@ body.hub-page-dashboard .page#page-dashboard {
position: relative;
padding: 14px 16px;
border-radius: 10px;
border: 1px solid rgba(136, 146, 176, 0.2);
background: rgba(8, 12, 24, 0.65);
border: 1px solid var(--dash-card-border);
background: var(--dash-card-bg);
transition: border-color 0.2s, box-shadow 0.2s;
}
.dash-ac-card.is-alert {
border-color: rgba(255, 92, 122, 0.65);
border-color: color-mix(in srgb, var(--dash-warn) 55%, var(--dash-card-border));
box-shadow:
0 0 0 1px rgba(255, 92, 122, 0.2),
0 0 28px rgba(255, 92, 122, 0.15);
animation: dash-card-alert 3s ease-in-out infinite;
}
@keyframes dash-card-alert {
0%,
100% {
box-shadow:
0 0 0 1px rgba(255, 92, 122, 0.2),
0 0 20px rgba(255, 92, 122, 0.1);
}
50% {
box-shadow:
0 0 0 1px rgba(255, 92, 122, 0.45),
0 0 36px rgba(255, 92, 122, 0.22);
}
var(--dash-card-glow),
0 0 0 1px color-mix(in srgb, var(--dash-warn) 18%, transparent);
}
.dash-ac-card.is-unmon {
opacity: 0.55;
opacity: 0.6;
}
.dash-ac-top {
@@ -290,7 +245,7 @@ body.hub-page-dashboard .page#page-dashboard {
.dash-ac-name {
font-weight: 600;
font-size: 0.92rem;
color: #e8eeff;
color: var(--dash-text);
}
.dash-ac-badge {
@@ -298,18 +253,19 @@ body.hub-page-dashboard .page#page-dashboard {
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
letter-spacing: 0.06em;
letter-spacing: 0.04em;
white-space: nowrap;
}
.dash-ac-badge.alert {
color: #fff;
background: linear-gradient(135deg, #ff5c7a, #c45bff);
background: var(--dash-warn);
}
.dash-ac-badge.ok {
color: var(--dash-cyan);
border: 1px solid var(--dash-border);
color: var(--dash-accent);
border: 1px solid var(--dash-card-border);
background: color-mix(in srgb, var(--dash-accent) 8%, var(--dash-card-bg));
}
.dash-ac-metrics {
@@ -322,11 +278,15 @@ body.hub-page-dashboard .page#page-dashboard {
.dash-ac-metric span {
display: block;
color: #8892b0;
color: var(--dash-muted);
font-size: 0.65rem;
margin-bottom: 2px;
}
.dash-ac-metric strong {
color: var(--dash-text);
}
.dash-ac-metric strong.pos {
color: var(--dash-ok);
}
@@ -339,7 +299,7 @@ body.hub-page-dashboard .page#page-dashboard {
margin-top: 10px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.08);
background: color-mix(in srgb, var(--dash-muted) 18%, transparent);
overflow: hidden;
}
@@ -347,14 +307,14 @@ body.hub-page-dashboard .page#page-dashboard {
display: block;
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, var(--dash-warn), var(--dash-mag));
background: var(--dash-warn);
transition: width 0.6s ease;
}
.dash-ac-remark {
margin-top: 10px;
font-size: 0.7rem;
color: #8892b0;
color: var(--dash-muted);
line-height: 1.4;
word-break: break-word;
}
@@ -377,25 +337,25 @@ body.hub-page-dashboard .page#page-dashboard {
z-index: 1;
text-align: left;
padding: 10px 12px;
background: rgba(12, 18, 36, 0.95);
color: var(--dash-cyan);
font-weight: 500;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--dash-border);
background: var(--inset-surface);
color: var(--dash-muted);
font-weight: 600;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--dash-card-border);
}
.dash-table td {
padding: 9px 12px;
border-bottom: 1px solid rgba(42, 52, 72, 0.5);
color: #c5cde0;
border-bottom: 1px solid var(--dash-card-border);
color: var(--dash-text);
}
.dash-table tr:hover td {
background: rgba(62, 231, 255, 0.04);
background: color-mix(in srgb, var(--dash-accent) 6%, transparent);
}
.dash-table tr.is-alert-row td {
background: rgba(255, 92, 122, 0.08);
background: color-mix(in srgb, var(--dash-warn) 10%, transparent);
}
.dash-table .pos {
@@ -409,14 +369,14 @@ body.hub-page-dashboard .page#page-dashboard {
.dash-empty {
padding: 32px;
text-align: center;
color: var(--muted);
color: var(--dash-muted);
font-size: 0.85rem;
}
.dash-status {
font-family: JetBrains Mono, monospace;
font-size: 0.75rem;
color: var(--muted);
color: var(--dash-muted);
}
.dash-status.err {
manual_trading_hub/static/dashboard.js
+75 -23
View File
@@ -1,12 +1,13 @@
/**
* 中控数据看板：总览 / 分户 / 平仓明细，60s 自动刷新。
* 中控数据看板：后端 SSE 推送版本号，前端拉快照刷新（无轮询闪烁）。
*/
(function () {
const page = document.getElementById("page-dashboard");
if (!page) return;
const POLL_MS = 60 * 1000;
let timer = null;
let dashEventSource = null;
let dashReconnectTimer = null;
let localDashVersion = 0;
let inited = false;
let loading = false;
@@ -191,10 +192,11 @@
}
}
async function fetchDashboard() {
if (loading) return;
async function fetchDashboardSnapshot(opts) {
const options = opts || {};
if (loading && !options.force) return;
loading = true;
setStatus("同步中…");
if (!options.silent) setStatus("同步中…");
try {
const r = await fetch("/api/dashboard/daily", { credentials: "same-origin" });
if (r.status === 401) {
@@ -202,9 +204,12 @@
return;
}
const data = await r.json();
if (!data.ok) throw new Error(data.detail || data.msg || "加载失败");
if (!data.ok) throw new Error(data.detail || data.msg || data.error || "加载失败");
const ver = Number(data.dashboard_version) || 0;
if (ver) localDashVersion = ver;
renderPayload(data);
setStatus(`每 ${(data.poll_interval_sec || 60)}s 自动刷新`);
const sec = Number(data.poll_interval_sec) || 60;
setStatus(options.silent ? `SSE 已连接 · 后台每 ${sec}s 聚合` : `已更新 · 后台每 ${sec}s 聚合`);
} catch (e) {
setStatus(String(e.message || e), true);
} finally {
@@ -212,31 +217,78 @@
}
}
function startPoll() {
stopPoll();
void fetchDashboard();
timer = setInterval(fetchDashboard, POLL_MS);
}
function stopPoll() {
if (timer) {
clearInterval(timer);
timer = null;
function closeDashboardStream() {
if (dashEventSource) {
dashEventSource.close();
dashEventSource = null;
}
if (dashReconnectTimer) {
clearTimeout(dashReconnectTimer);
dashReconnectTimer = null;
}
}
function connectDashboardStream() {
closeDashboardStream();
dashEventSource = new EventSource("/api/dashboard/stream");
dashEventSource.addEventListener("dashboard", (ev) => {
try {
const st = JSON.parse(ev.data || "{}");
const ver = Number(st.dashboard_version) || 0;
if (ver && ver !== localDashVersion) {
void fetchDashboardSnapshot({ silent: true });
} else if (st.aggregating) {
setStatus("后台聚合中…");
}
} catch (_) {
/* ignore */
}
});
dashEventSource.onerror = () => {
closeDashboardStream();
setStatus("SSE 断开，8s 后重连…", true);
dashReconnectTimer = setTimeout(() => {
if (inited) {
connectDashboardStream();
void fetchDashboardSnapshot({ silent: true });
}
}, 8000);
};
}
async function requestDashboardRefresh() {
try {
await fetch("/api/dashboard/refresh", { method: "POST", credentials: "same-origin" });
} catch (_) {
/* ignore */
}
}
function startLive() {
void fetchDashboardSnapshot();
connectDashboardStream();
}
function stopLive() {
closeDashboardStream();
setStatus("");
}
if (btnRefresh) {
btnRefresh.addEventListener("click", () => void fetchDashboard());
btnRefresh.addEventListener("click", () => {
void requestDashboardRefresh();
void fetchDashboardSnapshot({ force: true });
});
}
window.hubDashboardPage = {
init() {
if (!inited) inited = true;
startPoll();
inited = true;
startLive();
},
destroy() {
stopPoll();
setStatus("");
inited = false;
stopLive();
},
};
})();
manual_trading_hub/static/index.html
+5 -20
View File
@@ -16,7 +16,7 @@
<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=20260609-hub-funds-fold" />
<link rel="stylesheet" href="/assets/dashboard.css?v=20260611-hub-dashboard" />
<link rel="stylesheet" href="/assets/dashboard.css?v=20260611-hub-dash-sse" />
</head>
<body>
<div class="app-bg" aria-hidden="true"></div>
@@ -316,13 +316,11 @@
<div id="page-dashboard" class="page hidden">
<div class="dash-bg-grid" aria-hidden="true"></div>
<div class="dash-bg-glow dash-bg-glow-a" aria-hidden="true"></div>
<div class="dash-bg-glow dash-bg-glow-b" aria-hidden="true"></div>
<div class="dash-wrap">
<div class="dash-head">
<div>
<h1><span class="dash-head-tag">DASH</span>数据看板</h1>
<p class="page-desc">四户当日总览 · 分户明细 · 平仓流水 · 每 60 秒刷新</p>
<p class="page-desc">四户当日总览 · 分户明细 · 平仓流水 · SSE 推送更新</p>
</div>
<div class="dash-head-meta">
<div><span class="dash-pulse-dot" aria-hidden="true"></span><strong>LIVE</strong> · 交易日 <span id="dash-trading-day">—</span></div>
@@ -443,26 +441,13 @@
<div id="page-ai" class="page hidden">
<div class="page-head">
<h1><span class="head-tag">AI</span> 教练</h1>
<p class="page-desc">四户今日总结 · 交易教练 / 普通聊天 · 右侧可回看历史会话</p>
<p class="page-desc">交易教练 / 普通聊天 · 右侧可回看历史会话</p>
</div>
<div class="ai-mobile-tabs" role="tablist" aria-label="AI 教练视图">
<button type="button" class="ai-mobile-tab is-active" data-ai-tab="chat" role="tab" aria-selected="true">聊天</button>
<button type="button" class="ai-mobile-tab" data-ai-tab="history" role="tab" aria-selected="false">历史</button>
<button type="button" class="ai-mobile-tab" data-ai-tab="summary" role="tab" aria-selected="false">今日总结</button>
</div>
<div class="ai-layout" data-ai-mobile-tab="chat">
<section class="ai-panel ai-summary-panel" data-ai-panel="summary">
<div class="ai-panel-head">
<h2>今日总结</h2>
<div class="ai-panel-actions">
<button type="button" id="btn-ai-summary" class="primary">生成今日总结</button>
</div>
</div>
<div id="ai-summary-stats" class="ai-stats-row" aria-live="polite"></div>
<div id="ai-summary-body" class="ai-panel-scroll ai-md-body">
<p class="ai-placeholder">点击「生成今日总结」聚合四户平仓与持仓数据（未启用账户显示「未监控」）。</p>
</div>
</section>
<section class="ai-panel ai-chat-panel" data-ai-panel="chat">
<div class="ai-bot-bar" role="tablist" aria-label="聊天机器人">
<button type="button" class="ai-bot-tab is-active" data-bot="trading" role="tab" aria-selected="true">交易教练</button>
@@ -560,8 +545,8 @@
<script src="/assets/chart.js?v=20260609-market-day-split"></script>
<script src="/assets/archive.js?v=20260608-hub-archive-history"></script>
<script src="/assets/funds.js?v=20260609-hub-funds-fold"></script>
<script src="/assets/dashboard.js?v=20260611-hub-dashboard"></script>
<script src="/assets/dashboard.js?v=20260611-hub-dash-sse"></script>
<script src="/assets/ai_review_render.js?v=2"></script>
<script src="/assets/app.js?v=20260611-hub-dashboard"></script>
<script src="/assets/app.js?v=20260611-hub-ai-chat"></script>
</body>
</html>