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

feat: split options settings into compact swap and transfer cards with aligned columns

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-07 10:18:41 +08:00
parent 75aa4b1391
commit 2a3f36d34f
7 changed files with 169 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/instance_theme.css
+91 -14
View File
@@ -2185,18 +2185,59 @@ html[data-theme="light"] .journal-detail-img-thumb {
.settings-cards-grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
gap: 16px;
align-items: start;
gap: 12px;
align-items: stretch;
}
.settings-side-col {
display: flex;
flex-direction: column;
gap: 16px;
gap: 10px;
min-height: 100%;
}
.settings-card--risk {
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.settings-side-col .settings-card--export {
margin-top: auto;
}
.settings-card--compact {
padding: 10px 12px;
}
.settings-card--compact h2 {
margin: 0 0 6px;
font-size: 0.88rem;
font-weight: 600;
}
.settings-card--compact .settings-card-desc {
font-size: 0.72rem;
margin: 0 0 8px;
line-height: 1.45;
}
.settings-card--compact .settings-transfer-auto,
.settings-card--compact .settings-transfer-form {
font-size: 0.72rem;
}
.settings-card--compact .settings-transfer-form input,
.settings-card--compact .settings-transfer-form select,
.settings-card--compact .settings-transfer-form button {
font-size: 0.75rem;
padding: 4px 8px;
}
.settings-card--compact .settings-export-link {
font-size: 0.75rem;
padding: 5px 10px;
}
@media (max-width: 900px) {
@@ -2237,27 +2278,28 @@ html[data-theme="light"] .journal-detail-img-thumb {
.settings-risk-sections {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
gap: 10px;
margin-top: 10px;
flex: 1;
}
.settings-subcard {
padding: 12px 14px;
padding: 10px 12px;
min-width: 0;
margin: 0;
}
.settings-subcard-title {
margin: 0 0 10px;
font-size: 0.9rem;
margin: 0 0 8px;
font-size: 0.82rem;
font-weight: 600;
color: #cfd3ef;
}
.settings-kv--compact .settings-kv-row {
grid-template-columns: 8.5em 1fr;
padding: 5px 0;
font-size: 0.8rem;
grid-template-columns: 8em 1fr;
padding: 4px 0;
font-size: 0.75rem;
}
@media (max-width: 720px) {
@@ -2604,13 +2646,48 @@ html[data-theme="light"] .settings-export-link {
.options-settings-block {
margin-bottom: 14px;
}
.options-settings-section {
margin-bottom: 10px;
}
.options-settings-section:last-child {
margin-bottom: 0;
}
.options-settings-subtitle {
font-size: 0.72rem;
font-weight: 600;
color: #a8b0cc;
margin: 0 0 6px;
}
.options-settings-arrow {
font-size: 0.75rem;
color: #8892b0;
align-self: center;
}
.options-settings-row {
flex-wrap: wrap;
gap: 8px;
gap: 6px;
align-items: center;
}
.options-settings-row select,
.options-settings-row input[type="number"] {
font-size: 0.75rem;
padding: 4px 7px;
min-height: 28px;
}
.options-settings-row .btn-sm {
font-size: 0.72rem;
padding: 4px 10px;
min-height: 28px;
}
.options-settings-hint {
font-size: 0.82rem;
margin: 0 0 8px;
font-size: 0.72rem;
margin: 0 0 6px;
line-height: 1.45;
}
.options-settings-msg {
font-size: 0.7rem;
margin-top: 4px;
min-height: 1em;
}
.pos-pnl-profit {
color: #7ee787;
lib/instance/templates/embed_shell.html
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
<link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
<link rel="stylesheet" href="/static/instance_page.css?v=3">
<link rel="stylesheet" href="/static/instance_theme.css?v=62">
<link rel="stylesheet" href="/static/instance_theme.css?v=63">
<script src="/static/account_risk_badge.js?v=4"></script>
<meta name="theme-color" content="#0b0d14">
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
lib/instance/templates/index.html
+1 -1
View File
@@ -17,7 +17,7 @@
<link rel="manifest" href="/static/icons/manifest.webmanifest">
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
<link rel="stylesheet" href="/static/instance_page.css?v=1">
<link rel="stylesheet" href="/static/instance_theme.css?v=62">
<link rel="stylesheet" href="/static/instance_theme.css?v=63">
</head>
<body
lib/instance/templates/settings_panel.html
+13 -8
View File
@@ -50,21 +50,26 @@
<div class="settings-side-col">
{% if instance_settings.options_settings_enabled %}
<div class="card settings-card">
<h2>期权设置</h2>
<p class="settings-card-desc">主账户期权资金：现货市价兑换 USDT/USDC；主账户与子账户（永续）之间划转。</p>
{% include 'options_settings_panel.html' %}
<div class="card settings-card settings-card--compact">
<h2>币种兑换</h2>
{% include 'options_settings_swap.html' %}
</div>
<div class="card settings-card settings-card--compact">
<h2>资金划转</h2>
<p class="settings-card-desc">主账户期权资金：账户内划转、主账户与子账户之间划转。</p>
{% include 'options_settings_transfer.html' %}
</div>
{% include 'options_settings_panel.html' %}
{% endif %}
{% if instance_settings.show_transfer %}
<div class="card settings-card">
<h2>资金划转</h2>
<p class="settings-card-desc">手动在资金账户与交易账户之间划转 USDT；自动划转规则见下方说明。</p>
<div class="card settings-card settings-card--compact settings-card--swap-transfer">
<h2>永续资金划转</h2>
<p class="settings-card-desc">子账户永续：资金账户与交易账户之间划转 USDT。</p>
{% include 'instance_transfer_panel.html' %}
</div>
{% endif %}
<div class="card settings-card">
<div class="card settings-card settings-card--compact settings-card--export">
<h2>数据导出</h2>
<p class="settings-card-desc">
CSV · UTF-8 · v{{ instance_settings.data_export_version }}。
lib/options/templates/options_settings_panel.html
+4 -66
View File
@@ -1,66 +1,4 @@
<div class="options-settings-panel" id="options-settings-root"
data-sub-account="{{ instance_settings.options_sub_account | default('', true) }}">
<div class="options-settings-block card-nested">
<h3>币种兑换（现货市价）</h3>
<p class="muted options-settings-hint">主账户资金账户：USDT ↔ USDC，走 USDC-USDT 现货市价单。</p>
<div class="form-row options-settings-row">
<select id="opt-set-swap-dir">
<option value="usdt_to_usdc" selected>USDT → USDC</option>
<option value="usdc_to_usdt">USDC → USDT</option>
</select>
<input type="number" id="opt-set-swap-amount" min="0.01" step="0.01" placeholder="数量">
<button type="button" class="btn-primary" id="opt-set-swap-btn">市价兑换</button>
</div>
<div id="opt-set-swap-msg" class="muted"></div>
</div>
<div class="options-settings-block card-nested">
<h3>主账户内划转</h3>
<div class="form-row options-settings-row">
<select id="opt-set-int-ccy">
<option value="USDC" selected>USDC</option>
<option value="USDT">USDT</option>
</select>
<select id="opt-set-int-from">
<option value="funding" selected>资金账户</option>
<option value="trading">交易账户</option>
</select>
<span>→</span>
<select id="opt-set-int-to">
<option value="trading" selected>交易账户</option>
<option value="funding">资金账户</option>
</select>
<input type="number" id="opt-set-int-amount" min="0.01" step="0.01" placeholder="数量">
<button type="button" class="btn-primary" id="opt-set-int-btn">确认划转</button>
</div>
<div id="opt-set-int-msg" class="muted"></div>
</div>
<div class="options-settings-block card-nested">
<h3>主账户 ↔ 子账户划转</h3>
<p class="muted options-settings-hint">子账户：{{ instance_settings.options_sub_account or '未配置 OKX_SUB_ACCOUNT_NAME' }}</p>
<div class="form-row options-settings-row">
<select id="opt-set-cross-ccy">
<option value="USDT" selected>USDT</option>
<option value="USDC">USDC</option>
</select>
<select id="opt-set-cross-from-acct">
<option value="funding" selected>资金账户</option>
<option value="trading">交易账户</option>
</select>
<span>→</span>
<select id="opt-set-cross-to-acct">
<option value="trading" selected>交易账户</option>
<option value="funding">资金账户</option>
</select>
<select id="opt-set-cross-dir">
<option value="sub_to_main" selected>子账户 → 主账户</option>
<option value="main_to_sub">主账户 → 子账户</option>
</select>
<input type="number" id="opt-set-cross-amount" min="0.01" step="0.01" placeholder="数量">
<button type="button" class="btn-primary" id="opt-set-cross-btn">确认划转</button>
</div>
<div id="opt-set-cross-msg" class="muted"></div>
</div>
</div>
<script src="/static/options_settings.js?v=2"></script>
{# 期权设置脚本挂载点（卡片在 settings_panel 中拆分） #}
<div id="options-settings-root" hidden
data-sub-account="{{ instance_settings.options_sub_account | default('', true) }}"></div>
<script src="/static/options_settings.js?v=3"></script>
lib/options/templates/options_settings_swap.html
+12
View File
@@ -0,0 +1,12 @@
<div class="options-settings-section">
<p class="options-settings-hint">主账户资金账户：USDT ↔ USDC，走 USDC-USDT 现货市价单。</p>
<div class="form-row options-settings-row">
<select id="opt-set-swap-dir">
<option value="usdt_to_usdc" selected>USDT → USDC</option>
<option value="usdc_to_usdt">USDC → USDT</option>
</select>
<input type="number" id="opt-set-swap-amount" min="0.01" step="0.01" placeholder="数量">
<button type="button" class="btn-primary btn-sm" id="opt-set-swap-btn">市价兑换</button>
</div>
<div id="opt-set-swap-msg" class="options-settings-msg muted"></div>
</div>
lib/options/templates/options_settings_transfer.html
+47
View File
@@ -0,0 +1,47 @@
<div class="options-settings-section">
<div class="options-settings-subtitle">主账户内</div>
<div class="form-row options-settings-row">
<select id="opt-set-int-ccy">
<option value="USDC" selected>USDC</option>
<option value="USDT">USDT</option>
</select>
<select id="opt-set-int-from">
<option value="funding" selected>资金账户</option>
<option value="trading">交易账户</option>
</select>
<span class="options-settings-arrow">→</span>
<select id="opt-set-int-to">
<option value="trading" selected>交易账户</option>
<option value="funding">资金账户</option>
</select>
<input type="number" id="opt-set-int-amount" min="0.01" step="0.01" placeholder="数量">
<button type="button" class="btn-primary btn-sm" id="opt-set-int-btn">划转</button>
</div>
<div id="opt-set-int-msg" class="options-settings-msg muted"></div>
</div>
<div class="options-settings-section">
<div class="options-settings-subtitle">主账户 ↔ 子账户 <span class="muted">（{{ instance_settings.options_sub_account or '未配置' }}）</span></div>
<div class="form-row options-settings-row">
<select id="opt-set-cross-ccy">
<option value="USDT" selected>USDT</option>
<option value="USDC">USDC</option>
</select>
<select id="opt-set-cross-from-acct">
<option value="funding" selected>资金账户</option>
<option value="trading">交易账户</option>
</select>
<span class="options-settings-arrow">→</span>
<select id="opt-set-cross-to-acct">
<option value="trading" selected>交易账户</option>
<option value="funding">资金账户</option>
</select>
<select id="opt-set-cross-dir">
<option value="sub_to_main" selected>子 → 主</option>
<option value="main_to_sub">主 → 子</option>
</select>
<input type="number" id="opt-set-cross-amount" min="0.01" step="0.01" placeholder="数量">
<button type="button" class="btn-primary btn-sm" id="opt-set-cross-btn">划转</button>
</div>
<div id="opt-set-cross-msg" class="options-settings-msg muted"></div>
</div>