From 11345815b692e24966540da0466757c839d12d80 Mon Sep 17 00:00:00 2001
From: shy3130 <415333856@qq.com>
Date: Thu, 20 Aug 2026 14:46:24 +0800
Subject: [PATCH] =?UTF-8?q?fix(monitor):=20=E4=BD=9C=E7=94=A8=E8=8C=83?=
 =?UTF-8?q?=E5=9B=B4=E5=8C=BA=E5=B8=83=E5=B1=80=20=E2=80=94=20=E8=87=AA?=
 =?UTF-8?q?=E9=80=89=E5=AF=BC=E5=85=A5=E4=B8=8E=E6=90=9C=E7=B4=A2=E6=A1=86?=
 =?UTF-8?q?=E5=90=8C=E8=A1=8C=E7=AD=89=E9=AB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

上一轮标签重构把容器改为纵向堆叠, 自选导入按钮和搜索输入各自占一
行且输入框窄(w-32), 视觉散乱。调整为两行结构:
- 行1: 范围下拉 + 「已加入 N 只」汇总胶囊(或展开态的标签管理区)
- 行2: 自选导入按钮 + 搜索输入框 — 同一 flex 行等高(均 h-7), 输入框
  flex-1 占满剩余宽度, 搜索下拉宽度同步跟随

验证: tsc 通过; 浏览器实测同行(sameRow)等高(sameHeight=28px),
导入 22 只后布局整洁无错位。
---
 .../src/components/monitor/RuleEditor.tsx     | 110 +++++++++---------
 1 file changed, 56 insertions(+), 54 deletions(-)

diff --git a/frontend/src/components/monitor/RuleEditor.tsx b/frontend/src/components/monitor/RuleEditor.tsx
index dbb4216..44223e7 100644
--- a/frontend/src/components/monitor/RuleEditor.tsx
+++ b/frontend/src/components/monitor/RuleEditor.tsx
@@ -814,60 +814,62 @@ export function RuleEditor({ rule, preset, simple, onClose, onSaved }: Props) {
                   </div>
                 </>
               )}
-              {/* 从自选/自选分组批量导入标的 */}
-              <div className="relative" ref={watchMenuRef}>
-                <button
-                  type="button"
-                  onClick={() => setWatchMenuOpen(v => !v)}
-                  title="从自选 / 自选分组导入标的 (导入当前成员, 后续增删自选不影响本规则)"
-                  className={`inline-flex h-7 items-center gap-1 rounded border px-2 text-[11px] transition-colors cursor-pointer ${
-                    watchMenuOpen
-                      ? 'border-accent/40 bg-accent/10 text-accent'
-                      : 'border-border bg-base text-secondary hover:border-accent/30 hover:text-foreground'
-                  }`}
-                >
-                  <ListPlus className="h-3 w-3" />自选导入
-                </button>
-                {watchMenuOpen && (
-                  <div className="absolute z-10 mt-1 max-h-56 w-44 overflow-y-auto rounded border border-border bg-surface py-1 shadow-lg">
-                    {watchlistQ.isLoading ? (
-                      <div className="px-2.5 py-2 text-[11px] text-muted">正在加载自选...</div>
-                    ) : watchImportOptions.length === 0 ? (
-                      <div className="px-2.5 py-2 text-[11px] text-muted">自选列表为空</div>
-                    ) : watchImportOptions.map(option => (
-                      <button
-                        key={option.key}
-                        type="button"
-                        onClick={() => importSymbols(option.symbols)}
-                        className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left text-[11px] text-secondary transition-colors hover:bg-elevated hover:text-foreground cursor-pointer"
-                      >
-                        <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${option.dot}`} />
-                        <span className="min-w-0 flex-1 truncate">{option.name}</span>
-                        <span className="shrink-0 font-mono text-[9px] tabular-nums text-muted">{option.symbols.length}</span>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-              <div className="relative">
-                <input
-                  value={symbolQuery}
-                  onChange={e => setSymbolQuery(e.target.value)}
-                  placeholder="搜索代码或名称..."
-                  className="h-7 w-32 rounded border border-border bg-base pl-6 pr-2 text-[11px] text-foreground focus:outline-none focus:border-accent/50"
-                />
-                <Search className="absolute left-1.5 top-1.5 h-3.5 w-3.5 text-muted" />
-                {symbolSearch.data && symbolSearch.data.results.length > 0 && (
-                  <div className="absolute z-10 mt-1 max-h-48 w-48 overflow-auto rounded border border-border bg-surface shadow-lg">
-                    {symbolSearch.data.results.map(r => (
-                      <button key={r.symbol} onClick={() => addSymbol(r.symbol)} className="block w-full px-2 py-1 text-left text-[11px] hover:bg-elevated cursor-pointer">
-                        <span className="font-mono text-foreground/80">{r.symbol}</span>
-                        {(() => { const b = boardTag(r.symbol); return b && <span className={`ml-1 inline-flex items-center justify-center rounded px-0.5 text-[9px] font-bold leading-tight border ${b.color}`}>{b.label}</span> })()}
-                        <span className="ml-1 text-muted">{r.name}</span>
-                      </button>
-                    ))}
-                  </div>
-                )}
+              {/* 导入与搜索: 同一行等高(h-7), 搜索框占满剩余宽度 */}
+              <div className="flex flex-wrap items-center gap-1.5">
+                <div className="relative" ref={watchMenuRef}>
+                  <button
+                    type="button"
+                    onClick={() => setWatchMenuOpen(v => !v)}
+                    title="从自选 / 自选分组导入标的 (导入当前成员, 后续增删自选不影响本规则)"
+                    className={`inline-flex h-7 shrink-0 items-center gap-1 rounded border px-2 text-[11px] transition-colors cursor-pointer ${
+                      watchMenuOpen
+                        ? 'border-accent/40 bg-accent/10 text-accent'
+                        : 'border-border bg-base text-secondary hover:border-accent/30 hover:text-foreground'
+                    }`}
+                  >
+                    <ListPlus className="h-3 w-3" />自选导入
+                  </button>
+                  {watchMenuOpen && (
+                    <div className="absolute z-10 mt-1 max-h-56 w-44 overflow-y-auto rounded border border-border bg-surface py-1 shadow-lg">
+                      {watchlistQ.isLoading ? (
+                        <div className="px-2.5 py-2 text-[11px] text-muted">正在加载自选...</div>
+                      ) : watchImportOptions.length === 0 ? (
+                        <div className="px-2.5 py-2 text-[11px] text-muted">自选列表为空</div>
+                      ) : watchImportOptions.map(option => (
+                        <button
+                          key={option.key}
+                          type="button"
+                          onClick={() => importSymbols(option.symbols)}
+                          className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left text-[11px] text-secondary transition-colors hover:bg-elevated hover:text-foreground cursor-pointer"
+                        >
+                          <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${option.dot}`} />
+                          <span className="min-w-0 flex-1 truncate">{option.name}</span>
+                          <span className="shrink-0 font-mono text-[9px] tabular-nums text-muted">{option.symbols.length}</span>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+                <div className="relative min-w-[140px] flex-1">
+                  <input
+                    value={symbolQuery}
+                    onChange={e => setSymbolQuery(e.target.value)}
+                    placeholder="搜索代码或名称添加标的..."
+                    className="h-7 w-full rounded border border-border bg-base pl-6 pr-2 text-[11px] text-foreground focus:outline-none focus:border-accent/50"
+                  />
+                  <Search className="absolute left-1.5 top-1.5 h-3.5 w-3.5 text-muted" />
+                  {symbolSearch.data && symbolSearch.data.results.length > 0 && (
+                    <div className="absolute z-10 mt-1 max-h-48 w-full overflow-auto rounded border border-border bg-surface shadow-lg">
+                      {symbolSearch.data.results.map(r => (
+                        <button key={r.symbol} onClick={() => addSymbol(r.symbol)} className="block w-full px-2 py-1 text-left text-[11px] hover:bg-elevated cursor-pointer">
+                          <span className="font-mono text-foreground/80">{r.symbol}</span>
+                          {(() => { const b = boardTag(r.symbol); return b && <span className={`ml-1 inline-flex items-center justify-center rounded px-0.5 text-[9px] font-bold leading-tight border ${b.color}`}>{b.label}</span> })()}
+                          <span className="ml-1 text-muted">{r.name}</span>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
               </div>
             </div>
           )}