From 4d2463c9a9f4c9b53b862a9be682f95bef542c80 Mon Sep 17 00:00:00 2001 From: dekun Date: Mon, 29 Jun 2026 07:34:05 +0800 Subject: [PATCH] Show Tonghuashun symbol meta inline after the variety label. Move symbol-selected into the label row across all symbol pickers without shifting the input field. Co-authored-by: Cursor --- static/css/base.css | 14 ++++++++++++-- static/css/keys.css | 1 + static/css/trade.css | 1 + static/js/symbol.js | 20 ++++++++++++++++++++ 4 files changed, 34 insertions(+), 2 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index 3f36545..5f9a8a6 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -200,7 +200,9 @@ border-radius:2px;box-shadow:0 0 8px var(--card-glow); .form-compact.line-tight{gap:.35rem;margin-bottom:.5rem} .form-compact .line-btn{display:flex;gap:.5rem;align-items:center} .form-compact input,.form-compact select{padding:.55rem .7rem;font-size:.85rem;border-radius:8px} -.form-compact .symbol-selected{font-size:.7rem;margin-top:2px} +.form-compact .symbol-wrap{display:flex;flex-direction:column;align-self:stretch} +.form-compact .symbol-wrap>label.text-label,.form-compact .symbol-wrap>label.symbol-field-label{margin-bottom:.28rem} +.form-compact .symbol-selected{font-size:.68rem;margin:0} .form-compact button.btn-primary{padding:.55rem 1.5rem;font-size:.85rem;white-space:nowrap} .form-compact-review input.calc-readonly{color:var(--accent);background:var(--calc-bg);font-size:.82rem} .form-compact-review textarea{min-height:44px;font-size:.85rem;padding:.45rem .65rem} @@ -291,7 +293,15 @@ padding:.4rem .85rem;font-size:.72rem;font-weight:600; color:var(--text-muted);background:var(--card-inner); border-bottom:1px solid var(--table-border);position:sticky;top:0; } -.symbol-selected{font-size:.75rem;color:var(--accent);margin-top:4px} +.symbol-wrap{display:flex;flex-direction:column;align-self:stretch} +.symbol-wrap>label.text-label,.symbol-wrap>label.symbol-field-label{ +display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem; +font-size:.72rem;color:var(--text-label);margin-bottom:.28rem;line-height:1.35 +} +.symbol-wrap.trade-field>label.text-label,.symbol-wrap.key-field>label.text-label{margin-bottom:.28rem} +.symbol-selected,.symbol-wrap label .symbol-selected{ +font-size:.68rem;color:var(--accent);font-weight:400;margin:0;line-height:1.35 +} .check-row{display:flex;flex-wrap:wrap;gap:1rem;margin:.75rem 0} .check-row label{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--text-muted);cursor:pointer} .check-row input{width:auto} diff --git a/static/css/keys.css b/static/css/keys.css index 5666264..fa7586e 100644 --- a/static/css/keys.css +++ b/static/css/keys.css @@ -8,6 +8,7 @@ .key-form-line.line-3{grid-template-columns:1.4fr .85fr .85fr} .key-form-line.line-2{grid-template-columns:1fr 1fr} .key-field label{display:block;font-size:.72rem;margin-bottom:.28rem;color:var(--text-label)} +.symbol-wrap.key-field>label.text-label{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem} .key-field select,.key-field input{width:100%;box-sizing:border-box} .key-action-row{display:flex;flex-direction:column;gap:.35rem;margin-top:.15rem} .key-action-row .trailing-be-toggle{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--text-label);margin:0;cursor:pointer;user-select:none} diff --git a/static/css/trade.css b/static/css/trade.css index 55cab29..710a09d 100644 --- a/static/css/trade.css +++ b/static/css/trade.css @@ -37,6 +37,7 @@ .trade-form-line{display:grid;gap:.65rem;align-items:end} .trade-form-line.line-3{grid-template-columns:1.4fr 0.8fr 0.8fr} .trade-field label{display:block;font-size:.72rem;margin-bottom:.28rem;color:var(--text-label)} +.symbol-wrap.trade-field>label.text-label{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem} .trade-field select,.trade-field input{width:100%;box-sizing:border-box} .trade-field .lots-auto{color:var(--accent);font-weight:600;background:var(--card-inner);cursor:default} .lots-warn{font-size:.7rem;margin-top:.25rem;margin-bottom:0} diff --git a/static/js/symbol.js b/static/js/symbol.js index 1b9b718..d1e9d24 100644 --- a/static/js/symbol.js +++ b/static/js/symbol.js @@ -67,6 +67,25 @@ }); } + function setupSymbolMetaPlacement(wrapper, selectedEl) { + if (!selectedEl || wrapper.classList.contains('market-symbol-wrap')) { + return; + } + var label = wrapper.querySelector('label.text-label, label.symbol-field-label'); + if (!label) { + label = document.createElement('label'); + label.className = 'text-label symbol-field-label'; + label.appendChild(document.createTextNode('品种')); + var input = wrapper.querySelector('.symbol-input'); + if (input) { + wrapper.insertBefore(label, input); + } + } + if (selectedEl.parentElement !== label) { + label.appendChild(selectedEl); + } + } + function initSymbolInput(wrapper) { const input = wrapper.querySelector('.symbol-input'); const hiddenThs = wrapper.querySelector('input[name="symbol"]') @@ -76,6 +95,7 @@ const hiddenSina = wrapper.querySelector('input[name="sina_code"]'); const dropdown = wrapper.querySelector('.symbol-dropdown'); const selectedEl = wrapper.querySelector('.symbol-selected'); + setupSymbolMetaPlacement(wrapper, selectedEl); const isMarketPicker = wrapper.classList.contains('market-symbol-wrap'); const useMainsPicker = isMarketPicker || wrapper.classList.contains('symbol-mains'); let timer = null;