Improve dashboard risk card styling, colors, and add risk control docs.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-29 22:14:11 +08:00
parent d8c6428eb5
commit 9a10ac8a51
6 changed files with 243 additions and 27 deletions
+54 -18
View File
@@ -100,8 +100,40 @@
}
function directionBadgeHtml(row) {
var label = row.direction_label || (row.direction === 'short' ? '做空' : '做多');
return '<span class="badge dir">' + escHtml(label) + '</span>';
var dir = (row.direction || 'long').toString().toLowerCase();
var label = row.direction_label || (dir === 'short' ? '做空' : '做多');
var cls = dir === 'short' ? 'dir dir-short' : 'dir dir-long';
return '<span class="badge ' + cls + '">' + escHtml(label) + '</span>';
}
function riskMarginPctHtml(used, limit) {
if (used == null) return escHtml('—');
var usedCls = 'risk-margin-safe';
if (limit != null && limit > 0) {
var ratio = Number(used) / Number(limit);
if (ratio >= 1) usedCls = 'risk-margin-over';
else if (ratio >= 0.85) usedCls = 'risk-margin-warn';
}
var html = '<span class="' + usedCls + '">' + escHtml(fmtNum(used) + '%') + '</span>';
if (limit != null) {
html += ' <span class="risk-margin-sep">/</span> ' +
'<span class="risk-margin-cap-inline">' + escHtml(fmtNum(limit) + '%') + '</span>';
}
return html;
}
function renderRiskGrid(items) {
if (!riskGridEl) return;
riskGridEl.innerHTML = items.map(function (it) {
var val = it.valueHtml != null ? it.valueHtml : escHtml(it.value);
var cls = 'dashboard-risk-value' + (it.valueClass ? ' ' + it.valueClass : '');
return (
'<div class="dashboard-risk-item">' +
'<div class="dashboard-risk-label">' + escHtml(it.label) + '</div>' +
'<div class="' + cls + '">' + val + '</div>' +
'</div>'
);
}).join('');
}
function fmtHours(h) {
@@ -164,10 +196,6 @@
}
var marginPct = risk.margin_pct_used;
var maxMarginPct = lim.max_margin_pct;
var marginPctText = marginPct != null ? fmtNum(marginPct) + '%' : '—';
if (maxMarginPct != null && marginPct != null) {
marginPctText += ' / ' + fmtNum(maxMarginPct) + '%';
}
if (riskReasonEl) {
var reason = st.reason || (enabled ? '可新开仓' : '风控已关闭');
@@ -185,7 +213,11 @@
}
var items = [
{ label: '风控开关', value: enabled ? '开启' : '关闭' },
{
label: '风控开关',
value: enabled ? '开启' : '关闭',
valueClass: enabled ? 'risk-switch-on' : 'risk-switch-off',
},
{ label: '持仓限制', value: active + ' / ' + (maxPos != null ? maxPos : '—') },
{ label: '日持仓限制', value: dailyOpens + ' / ' + (dailyPosLim != null ? dailyPosLim : '—') },
{ label: '日交易风险', value: dailyRiskText },
@@ -193,21 +225,25 @@
{ label: '冷静期(默认)', value: fmtHours(lim.cooling_hours_manual) },
{ label: '复盘后冷静', value: fmtHours(lim.cooling_hours_manual_journal) },
{ label: '冷静剩余', value: fmtRemainSec(st.freeze_remaining_sec) },
{ label: '保证金占比', value: marginPctText },
{ label: '保证金上限', value: maxMarginPct != null ? fmtNum(maxMarginPct) + '%' : '—' },
{ label: '综合保证金上限', value: lim.roll_max_margin_pct != null ? fmtNum(lim.roll_max_margin_pct) + '%' : '—' },
{
label: '综合保证金占比',
valueHtml: riskMarginPctHtml(marginPct, maxMarginPct),
},
{
label: '单仓保证金上限',
value: maxMarginPct != null ? fmtNum(maxMarginPct) + '%' : '—',
valueClass: 'risk-cap-single',
},
{
label: '综合保证金上限',
value: lim.roll_max_margin_pct != null ? fmtNum(lim.roll_max_margin_pct) + '%' : '—',
valueClass: 'risk-cap-roll',
},
{ label: '计仓模式', value: sizingDetail },
{ label: '交易日切', value: lim.trading_day_reset_hour != null ? lim.trading_day_reset_hour + ':00' : '—' }
];
riskGridEl.innerHTML = items.map(function (it) {
return (
'<div class="dashboard-risk-item">' +
'<div class="dashboard-risk-label">' + escHtml(it.label) + '</div>' +
'<div class="dashboard-risk-value">' + escHtml(it.value) + '</div>' +
'</div>'
);
}).join('');
renderRiskGrid(items);
}
function updateCtpBadge(st) {