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

feat: improve light mode key monitor UI and collapse rule tips by default

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-09 16:18:10 +08:00
parent 260828041f
commit 4a043e65e3
7 changed files with 151 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crypto_monitor_binance/templates/index.html
+8 -5
View File
@@ -232,7 +232,7 @@
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=9"> <link rel="stylesheet" href="/static/instance_theme.css?v=10">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
@@ -317,7 +317,7 @@
<div class="stat-item"><div class="label">交易日</div><div class="value">{{ trading_day }}</div></div> <div class="stat-item"><div class="label">交易日</div><div class="value">{{ trading_day }}</div></div>
<div class="stat-item"><div class="label">当日资金(交易账户)</div><div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div></div> <div class="stat-item"><div class="label">当日资金(交易账户)</div><div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div></div>
</div> </div>
<div class="rule-tip">实时价格更新时间：<span id="price-last-updated">--</span>（北京时间 UTC+8）</div> <div class="rule-tip">实时价格更新：<span id="price-last-updated">--</span>（北京时间 UTC+8）</div>
<div class="grid"> <div class="grid">
{% if page == 'key_monitor' %} {% if page == 'key_monitor' %}
@@ -348,9 +348,12 @@
{% endif %} {% endif %}
｜移动保本：下单可勾选关闭；开启时 {{ breakeven_rr_trigger }}R 触发（每 1R 阶梯上移），偏移 {{ breakeven_offset_pct }}% ｜移动保本：下单可勾选关闭；开启时 {{ breakeven_rr_trigger }}R 触发（每 1R 阶梯上移），偏移 {{ breakeven_offset_pct }}%
</div> </div>
<div class="rule-tip"> <details class="tip-collapse transfer-rule-collapse">
划转：自动划转 {{ '开启' if auto_transfer_enabled else '关闭' }}（每天<strong>北京时间 {{ auto_transfer_bj_hour }}:00</strong>起该整点小时内尝试；账簿按 <strong>UTC 自然日</strong>去重；将 {{ auto_transfer_to }} 调整至 {{ auto_transfer_amount }}U：不足从 {{ auto_transfer_from }} 划入、超出划回 {{ auto_transfer_from }}；<strong>持仓中不划转</strong>并微信通知） <summary class="tip-collapse-summary">划转规则说明</summary>
</div> <div class="tip-collapse-body rule-tip">
划转：自动划转 {{ '开启' if auto_transfer_enabled else '关闭' }}（每天<strong>北京时间 {{ auto_transfer_bj_hour }}:00</strong>起该整点小时内尝试；账簿按 <strong>UTC 自然日</strong>去重；将 {{ auto_transfer_to }} 调整至 {{ auto_transfer_amount }}U：不足从 {{ auto_transfer_from }} 划入、超出划回 {{ auto_transfer_from }}；<strong>持仓中不划转</strong>并微信通知）
</div>
</details>
<form action="/manual_transfer" method="post" class="form-row"> <form action="/manual_transfer" method="post" class="form-row">
<input name="amount" type="number" min="0.01" step="0.01" placeholder="手动划转金额U" required> <input name="amount" type="number" min="0.01" step="0.01" placeholder="手动划转金额U" required>
<select name="from_account"> <select name="from_account">
crypto_monitor_gate/templates/index.html
+1 -2
View File
@@ -232,7 +232,7 @@
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=9"> <link rel="stylesheet" href="/static/instance_theme.css?v=10">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
@@ -317,7 +317,6 @@
<div class="stat-item"><div class="label">交易日</div><div class="value">{{ trading_day }}</div></div> <div class="stat-item"><div class="label">交易日</div><div class="value">{{ trading_day }}</div></div>
<div class="stat-item"><div class="label">当日资金(交易账户)</div><div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div></div> <div class="stat-item"><div class="label">当日资金(交易账户)</div><div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div></div>
</div> </div>
<div class="rule-tip">实时价格更新时间：<span id="price-last-updated">--</span>（北京时间 UTC+8）</div>
{% include 'gate_transfer_block.html' %} {% include 'gate_transfer_block.html' %}
<div class="grid"> <div class="grid">
crypto_monitor_gate_bot/templates/index.html
+1 -2
View File
@@ -269,7 +269,7 @@
.stats-split-row{grid-template-columns:1fr} .stats-split-row{grid-template-columns:1fr}
} }
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=9"> <link rel="stylesheet" href="/static/instance_theme.css?v=10">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
@@ -367,7 +367,6 @@
<div class="stat-item"><div class="label">交易日</div><div class="value">{{ trading_day }}</div></div> <div class="stat-item"><div class="label">交易日</div><div class="value">{{ trading_day }}</div></div>
<div class="stat-item"><div class="label">当日资金(交易账户)</div><div class="value" id="current-capital">{{ money_fmt(current_capital) }}U</div></div> <div class="stat-item"><div class="label">当日资金(交易账户)</div><div class="value" id="current-capital">{{ money_fmt(current_capital) }}U</div></div>
</div> </div>
<div class="rule-tip">实时价格更新时间：<span id="price-last-updated">--</span>（北京时间 UTC+8）</div>
{% include 'gate_transfer_block.html' %} {% include 'gate_transfer_block.html' %}
<div class="grid"> <div class="grid">
crypto_monitor_okx/templates/index.html
+8 -5
View File
@@ -232,7 +232,7 @@
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=9"> <link rel="stylesheet" href="/static/instance_theme.css?v=10">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
@@ -317,7 +317,7 @@
<div class="stat-item"><div class="label">交易日</div><div class="value">{{ trading_day }}</div></div> <div class="stat-item"><div class="label">交易日</div><div class="value">{{ trading_day }}</div></div>
<div class="stat-item"><div class="label">当日资金(交易账户)</div><div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div></div> <div class="stat-item"><div class="label">当日资金(交易账户)</div><div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div></div>
</div> </div>
<div class="rule-tip">实时价格更新时间：<span id="price-last-updated">--</span>（北京时间 UTC+8）</div> <div class="rule-tip">实时价格更新：<span id="price-last-updated">--</span>（北京时间 UTC+8）</div>
<div class="rule-tip" id="open-guard-bar" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"> <div class="rule-tip" id="open-guard-bar" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
<label style="display:flex;align-items:center;gap:6px;cursor:pointer;color:#cfd3ef"> <label style="display:flex;align-items:center;gap:6px;cursor:pointer;color:#cfd3ef">
<input type="checkbox" id="allow-open-before-reset" {% if not open_guard_enabled %}checked{% endif %}> <input type="checkbox" id="allow-open-before-reset" {% if not open_guard_enabled %}checked{% endif %}>
@@ -357,9 +357,12 @@
{% endif %} {% endif %}
｜移动保本：下单可勾选关闭；开启时 {{ breakeven_rr_trigger }}R 触发（每 1R 阶梯上移），偏移 {{ breakeven_offset_pct }}% ｜移动保本：下单可勾选关闭；开启时 {{ breakeven_rr_trigger }}R 触发（每 1R 阶梯上移），偏移 {{ breakeven_offset_pct }}%
</div> </div>
<div class="rule-tip"> <details class="tip-collapse transfer-rule-collapse">
划转：自动划转 {{ '开启' if auto_transfer_enabled else '关闭' }}（每天<strong>北京时间 {{ auto_transfer_bj_hour }}:00</strong>起该整点小时内尝试；账簿按 <strong>UTC 自然日</strong>去重；将 {{ auto_transfer_to }} 调整至 {{ auto_transfer_amount }}U：不足从 {{ auto_transfer_from }} 划入、超出划回 {{ auto_transfer_from }}；<strong>持仓中不划转</strong>并微信通知） <summary class="tip-collapse-summary">划转规则说明</summary>
</div> <div class="tip-collapse-body rule-tip">
划转：自动划转 {{ '开启' if auto_transfer_enabled else '关闭' }}（每天<strong>北京时间 {{ auto_transfer_bj_hour }}:00</strong>起该整点小时内尝试；账簿按 <strong>UTC 自然日</strong>去重；将 {{ auto_transfer_to }} 调整至 {{ auto_transfer_amount }}U：不足从 {{ auto_transfer_from }} 划入、超出划回 {{ auto_transfer_from }}；<strong>持仓中不划转</strong>并微信通知）
</div>
</details>
<form action="/manual_transfer" method="post" class="form-row"> <form action="/manual_transfer" method="post" class="form-row">
<input name="amount" type="number" min="0.01" step="0.01" placeholder="手动划转金额U" required> <input name="amount" type="number" min="0.01" step="0.01" placeholder="手动划转金额U" required>
<select name="from_account"> <select name="from_account">
static/instance_theme.css
+118
View File
@@ -712,3 +712,121 @@ html[data-theme="light"] .stats-split-col .stat-item .label {
html[data-theme="light"] .stats-split-col .stat-item .value { html[data-theme="light"] .stats-split-col .stat-item .value {
color: #142232 !important; color: #142232 !important;
} }
/* ── 可折叠说明（规则 / 划转 / 价格）── */
.tip-collapse {
margin-bottom: 8px;
border: 1px solid #2a3348;
border-radius: 8px;
background: rgba(20, 25, 35, 0.45);
overflow: hidden;
}
.tip-collapse-summary {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
padding: 8px 12px;
cursor: pointer;
list-style: none;
font-size: 0.8rem;
color: #95a2c2;
line-height: 1.45;
}
.tip-collapse-summary::-webkit-details-marker {
display: none;
}
.tip-collapse-summary::before {
content: "▸";
flex: 0 0 auto;
color: #6d7a99;
transition: transform 0.15s ease;
}
.tip-collapse[open] > .tip-collapse-summary::before {
transform: rotate(90deg);
}
.tip-collapse-hint {
color: #6d7a99;
font-size: 0.74rem;
}
.tip-collapse-body {
padding: 0 12px 10px;
border-top: 1px solid #232b3d;
}
.tip-collapse-body.rule-tip {
margin-bottom: 0;
padding-top: 8px;
}
html[data-theme="light"] .tip-collapse {
background: #f6f9fc !important;
border-color: #b8c8d8 !important;
}
html[data-theme="light"] .tip-collapse-summary {
color: #4a6078 !important;
}
html[data-theme="light"] .tip-collapse-summary::before {
color: #6a7588 !important;
}
html[data-theme="light"] .tip-collapse-hint {
color: #6a7588 !important;
}
html[data-theme="light"] .tip-collapse-body {
border-top-color: #d0dae4 !important;
}
html[data-theme="light"] .tip-collapse-body.rule-tip {
color: #4a6078 !important;
}
/* ── 关键位折叠行（亮色）── */
html[data-theme="light"] .key-row-collapse {
background: #f6f9fc !important;
border-color: #b8c8d8 !important;
}
html[data-theme="light"] .key-row-collapse-summary {
color: #1a2838 !important;
}
html[data-theme="light"] .key-row-collapse-summary::before {
color: #6a7588 !important;
}
html[data-theme="light"] .key-row-summary-title strong {
color: #142232 !important;
}
html[data-theme="light"] .key-row-summary-line,
html[data-theme="light"] .key-history-brief {
color: #4a6078 !important;
}
html[data-theme="light"] .key-row-summary-live {
color: #006e9a !important;
}
html[data-theme="light"] .key-row-collapse-body {
border-top-color: #d0dae4 !important;
}
html[data-theme="light"] .key-history-alert {
color: #4a6078 !important;
}
html[data-theme="light"] .key-row-collapse .pos-side-badge[style*="2a3152"] {
background: rgba(0, 110, 154, 0.1) !important;
color: #006e9a !important;
}
strategy_templates/gate_transfer_block.html
+9 -3
View File
@@ -1,6 +1,12 @@
<div class="rule-tip gate-transfer-tip"> <details class="tip-collapse gate-top-tips-collapse">
划转：自动划转 {{ '开启' if auto_transfer_enabled else '关闭' }}（每天<strong>北京时间 {{ auto_transfer_bj_hour }}:00</strong>起该整点小时内尝试；账簿按 <strong>UTC 自然日</strong>去重；将 {{ auto_transfer_to }} 调整至 {{ transfer_amount_fmt }}U：不足从 {{ auto_transfer_from }} 划入、超出划回 {{ auto_transfer_from }}；<strong>持仓中不划转</strong>并微信通知） <summary class="tip-collapse-summary">
</div> 实时价格更新：<span id="price-last-updated">--</span>（北京时间 UTC+8）
<span class="tip-collapse-hint">· 划转规则</span>
</summary>
<div class="tip-collapse-body rule-tip gate-transfer-tip">
划转：自动划转 {{ '开启' if auto_transfer_enabled else '关闭' }}（每天<strong>北京时间 {{ auto_transfer_bj_hour }}:00</strong>起该整点小时内尝试；账簿按 <strong>UTC 自然日</strong>去重；将 {{ auto_transfer_to }} 调整至 {{ transfer_amount_fmt }}U：不足从 {{ auto_transfer_from }} 划入、超出划回 {{ auto_transfer_from }}；<strong>持仓中不划转</strong>并微信通知）
</div>
</details>
<form action="/manual_transfer" method="post" class="form-row gate-transfer-form"> <form action="/manual_transfer" method="post" class="form-row gate-transfer-form">
<input name="amount" type="number" min="0.01" step="0.01" placeholder="手动划转金额U" required> <input name="amount" type="number" min="0.01" step="0.01" placeholder="手动划转金额U" required>
<select name="from_account"> <select name="from_account">
strategy_templates/key_monitor_panel.html
+6 -3
View File
@@ -73,7 +73,10 @@
</label> </label>
<button type="submit">添加</button> <button type="submit">添加</button>
</form> </form>
<div class="rule-tip">{{ key_gate_rule_text }}</div> <details class="tip-collapse key-rule-collapse">
<summary class="tip-collapse-summary">关键位监控规则说明</summary>
<div class="tip-collapse-body rule-tip">{{ key_gate_rule_text }}</div>
</details>
<div class="panel-scroll pos-list"> <div class="panel-scroll pos-list">
{% for k in key %} {% for k in key %}
<details class="key-row-collapse" id="key-row-{{ k.id }}"> <details class="key-row-collapse" id="key-row-{{ k.id }}">
@@ -88,7 +91,6 @@
{% endif %} {% endif %}
<span class="badge direction">{{ k.monitor_type }}</span> <span class="badge direction">{{ k.monitor_type }}</span>
</span> </span>
<span class="key-row-summary-line">{{ key_monitor_brief(k) }}</span>
<span class="key-row-summary-live" id="key-summary-live-{{ k.id }}">现价 — · 门控 —</span> <span class="key-row-summary-live" id="key-summary-live-{{ k.id }}">现价 — · 门控 —</span>
</span> </span>
<span class="key-row-summary-actions"> <span class="key-row-summary-actions">
@@ -96,6 +98,7 @@
</span> </span>
</summary> </summary>
<div class="key-row-collapse-body"> <div class="key-row-collapse-body">
<div class="key-row-summary-line">{{ key_monitor_brief(k) }}</div>
<div class="pos-meta"> <div class="pos-meta">
<span class="pos-meta-item">上沿: {{ k.upper }}</span> <span class="pos-meta-item">上沿: {{ k.upper }}</span>
<span class="pos-meta-item">下沿: {{ k.lower }}</span> <span class="pos-meta-item">下沿: {{ k.lower }}</span>
@@ -134,13 +137,13 @@
<span class="pos-side-badge {{ 'pos-side-long' if h.direction == 'long' else 'pos-side-short' }}">{{ key_direction_label(h) }}</span> <span class="pos-side-badge {{ 'pos-side-long' if h.direction == 'long' else 'pos-side-short' }}">{{ key_direction_label(h) }}</span>
<span class="badge direction">{{ h.monitor_type }}</span> <span class="badge direction">{{ h.monitor_type }}</span>
</span> </span>
<span class="key-row-summary-line">{{ key_history_brief(h) }}</span>
</span> </span>
<span class="key-row-summary-actions"> <span class="key-row-summary-actions">
<button type="button" class="table-del" onclick="event.preventDefault(); event.stopPropagation(); deleteKeyHistory({{ h.id }})">删除</button> <button type="button" class="table-del" onclick="event.preventDefault(); event.stopPropagation(); deleteKeyHistory({{ h.id }})">删除</button>
</span> </span>
</summary> </summary>
<div class="key-row-collapse-body"> <div class="key-row-collapse-body">
<div class="key-row-summary-line key-history-brief">{{ key_history_brief(h) }}</div>
<div class="pos-meta"> <div class="pos-meta">
<span class="pos-meta-item">类型: {{ h.monitor_type }}</span> <span class="pos-meta-item">类型: {{ h.monitor_type }}</span>
<span class="pos-meta-item">结案: {{ h.close_reason or '—' }}</span> <span class="pos-meta-item">结案: {{ h.close_reason or '—' }}</span>