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 <cursoragent@cursor.com>

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}

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}

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}

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;