fix(ui): 下拉菜单定位失效——CSS 插入锚点误中 .ws-search-box .input

插入 Dropdown 样式时以 '.input {' 为锚,实际命中的是
'.ws-search-box .input' 中的子串:插入的规则被拼成
'.ws-search-box .dropdown…' 后代选择器而整体失效,菜单虽生成却定位到
窗口底部之外(点击「没反应」);同时 .ws-search-box 前缀被吞已一并恢复。
教训:CSS 补丁锚点必须带足上下文,验证要量几何位置而非只查 DOM 存在。
This commit is contained in:
Muse
2026-11-14 15:49:25 +08:00
parent 9503350cf1
commit e94034c9a8

View File

@@ -304,7 +304,7 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius
.modal-actions.left button { text-align: left; } .modal-actions.left button { text-align: left; }
.ws-search { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 0; } .ws-search { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 0; }
.ws-search-box { display: flex; gap: 6px; } .ws-search-box { display: flex; gap: 6px; }
.ws-search-box /* 自绘下拉(Dropdown 组件):按钮对齐 .input,展开层沿用应用菜单语言 */ /* 自绘下拉(Dropdown 组件):按钮对齐 .input,展开层沿用应用菜单语言 */
.dropdown { position: relative; } .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 { 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); } .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 { 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:hover, .dropdown-menu button:focus-visible { background: var(--hover); outline: none; }
.dropdown-menu button.selected { background: var(--accent-weak); } .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-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-summary { font-size: 12px; color: var(--text-dim); }
.ws-search-results { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .ws-search-results { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }