jackyu66git
0ba5b3bd71
- /api/state: current market state with all factor scores - /api/history: regime + breadth history for charts - /api/expectancy: signal expectancy query - Bootstrap 5 + Chart.js dark theme, Chinese UI - Factor cards, regime timeline, breadth chart, expectancy table
139 lines
5.4 KiB
HTML
139 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ChanMacro — 市场状态</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
<style>
|
|
:root { --bg: #0d1117; --card: #161b22; --border: #30363d; --text: #e6edf3; --muted: #8b949e;
|
|
--green: #3fb950; --red: #f85149; --orange: #d29922; --blue: #58a6ff; }
|
|
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
|
|
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
|
|
.hero-regime { font-size: 3rem; font-weight: 700; }
|
|
.hero-conf { font-size: 1.2rem; color: var(--muted); }
|
|
.factor-value { font-size: 2.2rem; font-weight: 700; }
|
|
.factor-label { color: var(--muted); font-size: 0.85rem; }
|
|
.regime-TREND { color: var(--green); }
|
|
.regime-RANGE { color: var(--orange); }
|
|
.regime-PANIC { color: var(--red); }
|
|
.bucket-EXTREME, .bucket-STRONG { color: var(--green); }
|
|
.bucket-NORMAL { color: var(--orange); }
|
|
.bucket-WEAK, .bucket-PANIC { color: var(--red); }
|
|
.badge-regime { font-size: 0.85rem; padding: 4px 12px; border-radius: 20px; }
|
|
.badge-TREND { background: #1a3a1a; color: var(--green); }
|
|
.badge-RANGE { background: #3a2a0a; color: var(--orange); }
|
|
.badge-PANIC { background: #3a0a0a; color: var(--red); }
|
|
.narrative { color: var(--muted); font-size: 0.9rem; }
|
|
.loading { opacity: 0.5; }
|
|
canvas { max-height: 300px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid py-3 px-4">
|
|
|
|
<!-- Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h4 class="mb-0">ChanMacro <span class="text-muted fs-6">市场状态</span></h4>
|
|
<small class="text-muted" id="update-time"></small>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-secondary" id="db-status">加载中...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero: Regime -->
|
|
<div class="card p-4 mb-3 text-center">
|
|
<div class="hero-conf mb-1">当前制度</div>
|
|
<div class="hero-regime" id="hero-regime">—</div>
|
|
<div>
|
|
<span class="badge-regime" id="hero-badge">—</span>
|
|
<span class="ms-2 text-muted">置信度 <strong id="hero-conf">—</strong></span>
|
|
<span class="ms-2 text-muted">成熟度 <strong id="hero-maturity">—</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4 Factor Cards -->
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-3">
|
|
<div class="card p-3 h-100">
|
|
<div class="factor-label">价格结构</div>
|
|
<div class="factor-value" id="f-price">—</div>
|
|
<div class="text-muted small" id="f-price-sub"></div>
|
|
<div class="narrative mt-1" id="f-price-narr"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card p-3 h-100">
|
|
<div class="factor-label">市场广度</div>
|
|
<div class="factor-value" id="f-breadth">—</div>
|
|
<div class="text-muted small" id="f-breadth-sub"></div>
|
|
<div class="narrative mt-1" id="f-breadth-narr"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card p-3 h-100">
|
|
<div class="factor-label">OI 状态</div>
|
|
<div class="factor-value fs-4" id="f-oi">—</div>
|
|
<div class="text-muted small" id="f-oi-sub"></div>
|
|
<div class="narrative mt-1" id="f-oi-narr"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card p-3 h-100">
|
|
<div class="factor-label">波动率</div>
|
|
<div class="factor-value" id="f-vol">—</div>
|
|
<div class="text-muted small" id="f-vol-sub"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row -->
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-6">
|
|
<div class="card p-3">
|
|
<h6 class="mb-3">制度历史</h6>
|
|
<canvas id="chart-regime"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card p-3">
|
|
<h6 class="mb-3">市场广度</h6>
|
|
<canvas id="chart-breadth"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expectancy -->
|
|
<div class="card p-3">
|
|
<h6 class="mb-3">信号期望查询</h6>
|
|
<div class="row g-2 align-items-end">
|
|
<div class="col-auto">
|
|
<select class="form-select form-select-sm" id="exp-signal" style="background:#0d1117;color:#e6edf3;border-color:#30363d">
|
|
<option value="B3">B3 (三买)</option><option value="B2">B2 (二买)</option><option value="B1">B1 (一买)</option>
|
|
<option value="S3">S3 (三卖)</option><option value="S2">S2 (二卖)</option><option value="S1">S1 (一卖)</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button class="btn btn-sm btn-primary" onclick="loadExpectancy()">查询</button>
|
|
</div>
|
|
<div class="col-auto">
|
|
<span class="badge bg-secondary" id="exp-sufficiency">—</span>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive mt-2">
|
|
<table class="table table-sm table-dark mb-0" style="--bs-table-bg:#161b22">
|
|
<thead><tr><th>层级</th><th>样本</th><th>有效样本</th><th>原始胜率</th><th>后验胜率</th><th>平均收益</th></tr></thead>
|
|
<tbody id="exp-layers"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-2 text-muted small" id="exp-summary"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/dashboard.js"></script>
|
|
</body>
|
|
</html>
|