chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: 重构搜索框样式

Browse Source
This commit is contained in:
rbetree
2026-01-02 22:08:46 +08:00
parent 0e151156df
commit 87b4cea290
3 changed files with 260 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/script.js
View File

@@ -874,31 +874,32 @@ document.addEventListener('DOMContentLoaded', () => {
items: []
};
// 搜索引擎配置
const searchEngines = {
local: {
name: '本地搜索',
icon: 'fas fa-search',
url: null // 本地搜索不需要URL
},
google: {
name: 'Google搜索',
icon: 'fab fa-google',
url: 'https://www.google.com/search?q='
},
bing: {
name: 'Bing搜索',
icon: 'fab fa-microsoft',
url: 'https://www.bing.com/search?q='
},
baidu: {
name: '百度搜索',
icon: 'fas fa-paw',
url: 'https://www.baidu.com/s?wd='
}
// 搜索引擎配置
const searchEngines = {
local: {
name: '本地搜索',
iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false"><path fill="#616161" d="M29.171,32.001L32,29.172l12.001,12l-2.828,2.828L29.171,32.001z"></path><path fill="#616161" d="M36,20c0,8.837-7.163,16-16,16S4,28.837,4,20S11.163,4,20,4S36,11.163,36,20"></path><path fill="#37474f" d="M32.476,35.307l2.828-2.828l8.693,8.693L41.17,44L32.476,35.307z"></path><path fill="#64b5f6" d="M7,20c0-7.18,5.82-13,13-13s13,5.82,13,13s-5.82,13-13,13S7,27.18,7,20"></path></svg>`,
url: null // 本地搜索不需要URL
},
google: {
name: 'Google搜索',
iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false"><path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path></svg>`,
url: 'https://www.google.com/search?q='
},
bing: {
name: 'Bing搜索',
iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" focusable="false"><g fill="#2877fb" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M45,26.10156v-5.10156c0,-0.89844 -0.60156,-1.69922 -1.39844,-1.89844l-4.60156,-1.40234c-5.30078,-1.59766 -10.30078,-3 -15.60156,-4.69922h-0.09766c-0.80078,-0.19922 -1.60156,0.69922 -1.19922,1.5c1.89844,3.89844 3.89844,9.5 3.89844,9.5l6.69922,2.60156c-0.30078,0 -21.69922,11.39844 -21.69922,11.39844l9,-8v-23c0,-0.89844 -0.60156,-1.80078 -1.39844,-2c0,0 -4.90234,-1.89844 -8,-2.89844c-0.20312,-0.10156 -0.40234,-0.10156 -0.60156,-0.10156c-0.39844,0 -0.80078,0.10156 -1.19922,0.39844c-0.5,0.40234 -0.80078,1 -0.80078,1.60156v34.69922c0,0.69922 0.30078,1.30078 0.89844,1.60156c2.10156,1.5 4.30078,3 6.40234,4.5l3,2.09766c0.30078,0.20313 0.69922,0.40234 1.09766,0.40234c0.40234,0 0.70313,-0.10156 1,-0.30078c4.30078,-2.60156 8.70313,-5.19922 13,-7.80078l10.60156,-6.30078c0.60156,-0.39844 1,-1 1,-1.69922z"></path></g></g></svg>`,
url: 'https://www.bing.com/search?q='
},
duckduckgo: {
name: 'DuckDuckGo搜索',
shortName: 'duckgo',
// DuckDuckGo 使用内联 SVG，避免依赖不存在的 Font Awesome 品牌图标
iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 40 40" focusable="false"><path fill="#ff3d00" d="M44,24c0,11-9,20-20,20S4,35,4,24S13,4,24,4S44,13,44,24z"></path><path fill="#fff" d="M26,16.2c-0.6-0.6-1.5-0.9-2.5-1.1c-0.4-0.5-1-1-1.9-1.5c-1.6-0.8-3.5-1.2-5.3-0.9h-0.4 c-0.1,0-0.2,0.1-0.4,0.1c0.2,0,1,0.4,1.6,0.6c-0.3,0.2-0.8,0.2-1.1,0.4c0,0,0,0-0.1,0L15.7,14c-0.1,0.2-0.2,0.4-0.2,0.5 c1.3-0.1,3.2,0,4.6,0.4C19,15,18,15.3,17.3,15.7c-0.5,0.3-1,0.6-1.3,1.1c-1.2,1.3-1.7,3.5-1.3,5.9c0.5,2.7,2.4,11.4,3.4,16.3 l0.3,1.6c0,0,3.5,0.4,5.6,0.4c1.2,0,3.2,0.3,3.7-0.2c-0.1,0-0.6-0.6-0.8-1.1c-0.5-1-1-1.9-1.4-2.6c-1.2-2.5-2.5-5.9-1.9-8.1 c0.1-0.4,0.1-2.1,0.4-2.3c2.6-1.7,2.4-0.1,3.5-0.8c0.5-0.4,1-0.9,1.2-1.5C29.4,22.1,27.8,18,26,16.2z"></path><path fill="#fff" d="M24,42c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18c9.9,0,18,8.1,18,18C42,33.9,33.9,42,24,42z M24,8 C15.2,8,8,15.2,8,24s7.2,16,16,16s16-7.2,16-16S32.8,8,24,8z"></path><path fill="#0277bd" d="M19,21.1c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2c0.6,0,1.2-0.5,1.2-1.2 C20.1,21.7,19.6,21.1,19,21.1z M19.5,22.2c-0.2,0-0.3-0.1-0.3-0.3c0-0.2,0.1-0.3,0.3-0.3s0.3,0.1,0.3,0.3 C19.8,22.1,19.6,22.2,19.5,22.2z M26.8,20.6c-0.6,0-1,0.5-1,1c0,0.6,0.5,1,1,1c0.6,0,1-0.5,1-1S27.3,20.6,26.8,20.6z M27.2,21.5 c-0.1,0-0.3-0.1-0.3-0.3c0-0.1,0.1-0.3,0.3-0.3c0.1,0,0.3,0.1,0.3,0.3S27.4,21.5,27.2,21.5z M19.3,18.9c0,0-0.9-0.4-1.7,0.1 c-0.9,0.5-0.8,1.1-0.8,1.1s-0.5-1,0.8-1.5C18.7,18.1,19.3,18.9,19.3,18.9 M27.4,18.8c0,0-0.6-0.4-1.1-0.4c-1,0-1.3,0.5-1.3,0.5 s0.2-1.1,1.5-0.9C27.1,18.2,27.4,18.8,27.4,18.8"></path><path fill="#8bc34a" d="M23.3,35.7c0,0-4.3-2.3-4.4-1.4c-0.1,0.9,0,4.7,0.5,5s4.1-1.9,4.1-1.9L23.3,35.7z M25,35.6 c0,0,2.9-2.2,3.6-2.1c0.6,0.1,0.8,4.7,0.2,4.9c-0.6,0.2-3.9-1.2-3.9-1.2L25,35.6z"></path><path fill="#689f38" d="M22.5,35.7c0,1.5-0.2,2.1,0.4,2.3c0.6,0.1,1.9,0,2.3-0.3c0.4-0.3,0.1-2.2-0.1-2.6 C25,34.8,22.5,35.1,22.5,35.7"></path><path fill="#ffca28" d="M22.3,26.8c0.1-0.7,2-2.1,3.3-2.2c1.3-0.1,1.7-0.1,2.8-0.3c1.1-0.3,3.9-1,4.7-1.3 c0.8-0.4,4.1,0.2,1.8,1.5c-1,0.6-3.7,1.6-5.7,2.2c-1.9,0.6-3.1-0.6-3.8,0.4c-0.5,0.8-0.1,1.8,2.2,2c3.1,0.3,6.2-1.4,6.5-0.5 c0.3,0.9-2.7,2-4.6,2.1c-1.8,0-5.6-1.2-6.1-1.6C22.9,28.7,22.2,27.8,22.3,26.8"></path></svg>`,
url: 'https://duckduckgo.com/?q='
}
};
// 获取DOM元素 - 基本元素
const searchInput = document.getElementById('search');
const searchBox = document.querySelector('.search-box');
@@ -906,8 +907,13 @@ document.addEventListener('DOMContentLoaded', () => {
const searchSections = searchResultsPage.querySelectorAll('.search-section');
// 搜索引擎相关元素
const searchIcon = document.querySelector('.search-icon');
const searchEngineToggle = document.querySelector('.search-engine-toggle');
const searchEngineToggleIcon = searchEngineToggle
? searchEngineToggle.querySelector('.search-engine-icon')
: null;
const searchEngineToggleLabel = searchEngineToggle
? searchEngineToggle.querySelector('.search-engine-label')
: null;
const searchEngineDropdown = document.querySelector('.search-engine-dropdown');
const searchEngineOptions = document.querySelectorAll('.search-engine-option');
@@ -1515,6 +1521,7 @@ document.addEventListener('DOMContentLoaded', () => {
// 初始化搜索引擎下拉菜单事件
const toggleEngineDropdown = () => {
if (!searchEngineDropdown) return;
const next = !searchEngineDropdown.classList.contains('active');
searchEngineDropdown.classList.toggle('active', next);
if (searchBox) {
@@ -1525,18 +1532,12 @@ document.addEventListener('DOMContentLoaded', () => {
}
};
if (searchIcon) {
searchIcon.addEventListener('click', (e) => {
e.stopPropagation();
toggleEngineDropdown();
});
}
if (searchEngineToggle) {
searchEngineToggle.addEventListener('click', (e) => {
e.stopPropagation();
toggleEngineDropdown();
});
// 键盘可访问性：Enter/Space 触发
searchEngineToggle.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
@@ -1574,7 +1575,9 @@ document.addEventListener('DOMContentLoaded', () => {
updateSearchEngineUI();
// 关闭下拉菜单
searchEngineDropdown.classList.remove('active');
if (searchEngineDropdown) {
searchEngineDropdown.classList.remove('active');
}
if (searchBox) {
searchBox.classList.remove('dropdown-open');
}
@@ -1584,6 +1587,7 @@ document.addEventListener('DOMContentLoaded', () => {
// 点击页面其他位置关闭下拉菜单
document.addEventListener('click', () => {
if (!searchEngineDropdown) return;
searchEngineDropdown.classList.remove('active');
if (searchBox) {
searchBox.classList.remove('dropdown-open');
@@ -1603,24 +1607,26 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
// 更新搜索图标以反映当前搜索引擎
if (searchIcon) {
// 清除所有类，保留基本的search-icon类
const classList = searchIcon.className.split(' ').filter(cls => cls === 'search-icon');
searchIcon.className = classList.join(' ');
// 更新搜索引擎按钮（方案B：前缀按钮显示当前引擎）
const engine = searchEngines[currentSearchEngine];
if (!engine) return;
const displayName = engine.shortName || engine.name.replace(/搜索$/, '');
// 添加当前搜索引擎的图标类
const engine = searchEngines[currentSearchEngine];
if (engine) {
const iconClasses = engine.icon.split(' ');
iconClasses.forEach(cls => {
searchIcon.classList.add(cls);
});
// 更新标题提示
searchIcon.setAttribute('title', engine.name);
if (searchEngineToggleIcon) {
if (engine.iconSvg) {
searchEngineToggleIcon.className = 'search-engine-icon search-engine-icon-svg';
searchEngineToggleIcon.innerHTML = engine.iconSvg;
} else {
searchEngineToggleIcon.innerHTML = '';
searchEngineToggleIcon.className = `search-engine-icon ${engine.icon}`;
}
}
if (searchEngineToggleLabel) {
searchEngineToggleLabel.textContent = displayName;
}
if (searchEngineToggle) {
searchEngineToggle.setAttribute('aria-label', `当前搜索引擎：${engine.name}，点击切换`);
}
}
// 执行搜索（根据选择的搜索引擎）