From e94034c9a8e2d2a2614e004d1df1e7b3e1ef6fac Mon Sep 17 00:00:00 2001 From: Muse Date: Sat, 14 Nov 2026 15:49:25 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=B8=8B=E6=8B=89=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E5=A4=B1=E6=95=88=E2=80=94=E2=80=94CSS=20?= =?UTF-8?q?=E6=8F=92=E5=85=A5=E9=94=9A=E7=82=B9=E8=AF=AF=E4=B8=AD=20.ws-se?= =?UTF-8?q?arch-box=20.input?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 插入 Dropdown 样式时以 '.input {' 为锚,实际命中的是 '.ws-search-box .input' 中的子串:插入的规则被拼成 '.ws-search-box .dropdown…' 后代选择器而整体失效,菜单虽生成却定位到 窗口底部之外(点击「没反应」);同时 .ws-search-box 前缀被吞已一并恢复。 教训:CSS 补丁锚点必须带足上下文,验证要量几何位置而非只查 DOM 存在。 --- src/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles.css b/src/styles.css index b5d4e06..77bbd23 100644 --- a/src/styles.css +++ b/src/styles.css @@ -304,7 +304,7 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius .modal-actions.left button { text-align: left; } .ws-search { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 0; } .ws-search-box { display: flex; gap: 6px; } -.ws-search-box /* 自绘下拉(Dropdown 组件):按钮对齐 .input,展开层沿用应用菜单语言 */ +/* 自绘下拉(Dropdown 组件):按钮对齐 .input,展开层沿用应用菜单语言 */ .dropdown { position: relative; } .dropdown-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 6px; padding: 5px 9px; font-size: 13px; font-family: inherit; cursor: pointer; text-align: left; } .dropdown-button:hover:not(:disabled) { border-color: var(--accent); } @@ -315,7 +315,7 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius .dropdown-menu button { border: 0; background: transparent; color: var(--text); padding: 6px 9px; border-radius: 5px; font-size: 13px; font-family: inherit; text-align: left; cursor: pointer; } .dropdown-menu button:hover, .dropdown-menu button:focus-visible { background: var(--hover); outline: none; } .dropdown-menu button.selected { background: var(--accent-weak); } -.input { flex: 1; min-width: 0; } +.ws-search-box .input { flex: 1; min-width: 0; } .ws-search-case { font-size: 12px; color: var(--text-dim); display: flex; gap: 5px; align-items: center; } .ws-search-summary { font-size: 12px; color: var(--text-dim); } .ws-search-results { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }