feat(search): 搜索框支持切换搜索引擎

- 采用效果五:点击右侧引擎名展开横向快捷切换栏
- 支持 Google / Bing / 百度 / 搜狗 / 360,选择结果存 localStorage
- 输入时仍按原逻辑过滤本地项目;回车用当前引擎打开新标签搜索
- Esc 关闭切换栏,点击外部自动收起
This commit is contained in:
2026-11-03 20:33:41 +08:00
parent a5d7859c6e
commit 038b7ecb42
2 changed files with 177 additions and 1 deletions
+77
View File
@@ -1436,3 +1436,80 @@ html.theme-transition .site-background {
animation: none;
}
}
/* ---------- 搜索框:搜索引擎切换(效果五) ---------- */
.engine-switch {
position: relative;
display: inline-flex;
align-items: center;
}
.engine-toggle {
display: inline-flex;
align-items: center;
gap: 3px;
height: 24px;
padding: 0 var(--su-space-2);
border: 1px solid var(--su-border);
border-radius: var(--su-radius-xs);
background-color: var(--su-bg-subtle);
color: var(--su-text-sub);
font: inherit;
font-size: 11px;
line-height: 1;
cursor: pointer;
transition:
color var(--su-duration-fast) var(--su-ease-in-out),
background-color var(--su-duration-fast) var(--su-ease-in-out),
border-color var(--su-duration-fast) var(--su-ease-in-out);
}
.engine-toggle:hover,
.engine-toggle[aria-expanded='true'] {
border-color: var(--su-border-strong);
background-color: var(--su-bg-hover);
color: var(--su-text-main);
}
.engine-toggle span {
font-size: 9px;
opacity: 0.6;
}
.engine-menu {
position: absolute;
top: calc(100% + 12px);
right: 0;
z-index: var(--su-z-float);
display: flex;
flex-direction: row;
gap: 2px;
padding: var(--su-space-1);
border: 1px solid var(--su-border);
border-radius: var(--su-radius-sm);
background-color: var(--su-bg-card);
box-shadow: var(--su-shadow-pop);
}
.engine-option {
padding: var(--su-space-1) var(--su-space-2);
border: 0;
border-radius: var(--su-radius-xs);
background: transparent;
color: var(--su-text-sub);
font: inherit;
font-size: var(--su-font-size-xs);
white-space: nowrap;
cursor: pointer;
}
.engine-option:hover {
background-color: var(--su-bg-subtle);
color: var(--su-text-main);
}
.engine-option.is-active {
background-color: var(--su-color-primary-soft);
color: var(--su-color-primary);
font-weight: 600;
}