* 搜索引擎快捷工具 * 核心功能：页面底部搜索引擎快捷栏、拖拽排序、自定义引擎管理、快捷搜索 、增加底部搜索引擎栏偏移设置(确保任何浏览器内搜索引擎导航栏都能够聚焦在输入法键盘上方)
当前为
```javascript
/**
* 显示使用说明
*/
showKeyboardShortcuts() {
const shortcuts = [
{
key: 'Alt + S',
action: '打开搜索框'
},
{
key: 'Alt + E',
action: '打开引擎管理'
},
{
key: 'Alt + M',
action: '打开/关闭菜单'
},
{
key: 'ESC',
action: '关闭当前弹窗'
}
];
const features = [
{
title: '🔍 智能搜索',
description: '自动提取当前页面搜索关键词，一键多引擎搜索'
},
{
title: '🎯 快捷操作',
description: '支持拖拽排序、键盘快捷键、触摸优化'
},
{
title: '⚙️ 个性化定制',
description: '添加自定义搜索引擎，配置图标和显示顺序'
}
];
const offsetTool = {
title: '📱 底部偏移工具',
description: '解决移动端输入法遮挡搜索栏问题',
usage: [
'点击菜单中的「设置底部偏移」',
'输入像素值（推荐 200-400px）',
'确认后搜索栏会在输入法激活时自动上移'
],
tips: [
'默认值：0px（不偏移）',
'常见值：300px（适合大多数设备）',
'可根据实际输入法高度调整'
]
};
let message = '🚀 多引擎快捷搜索工具 - 使用说明\n\n';
message += '📋 键盘快捷键:\n';
shortcuts.forEach(shortcut => {
message += ` ${shortcut.key} - ${shortcut.action}\n`;
});
message += '\n✨ 核心功能:\n';
features.forEach(feature => {
message += ` ${feature.title}: ${feature.description}\n`;
});
message += `\n${offsetTool.title}:\n`;
message += ` ${offsetTool.description}\n\n`;
message += ' 使用方法:\n';
offsetTool.usage.forEach(step => {
message += ` • ${step}\n`;
});
message += '\n 使用技巧:\n';
offsetTool.tips.forEach(tip => {
message += ` • ${tip}\n`;
});
message += '\n💡 提示:\n';
message += ' • 在搜索引擎页面自动显示搜索栏\n';
message += ' • 支持拖拽调整引擎按钮顺序\n';
message += ' • 长按引擎按钮可进入拖拽模式\n';
message += ' • 移动端滑动时搜索栏自动隐藏\n';
// 创建更美观的弹窗
const modal = document.createElement('div');
modal.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
z-index: 10010;
max-width: 500px;
max-height: 80vh;
overflow-y: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.5;
`;
const title = document.createElement('h3');
title.textContent = '🚀 使用说明';
title.style.cssText = `
margin: 0 0 15px 0;
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
`;
const content = document.createElement('div');
content.style.cssText = `
font-size: 14px;
color: #34495e;
`;
// 分段创建内容
const sections = [
{
title: '📋 键盘快捷键',
items: shortcuts.map(s => `${s.key} - ${s.action}`)
},
{
title: '✨ 核心功能',
items: features.map(f => `${f.title}: ${f.description}`)
},
{
title: '📱 底部偏移工具',
items: [
offsetTool.description,
'使用方法:',
...offsetTool.usage.map(u => ` • ${u}`),
'使用技巧:',
...offsetTool.tips.map(t => ` • ${t}`)
]
},
{
title: '💡 使用提示',
items: [
'在搜索引擎页面自动显示搜索栏',
'支持拖拽调整引擎按钮顺序',
'长按引擎按钮可进入拖拽模式',
'移动端滑动时搜索栏自动隐藏',
'点击空白区域可快速显示搜索栏'
]
}
];
sections.forEach(section => {
const sectionEl = document.createElement('div');
sectionEl.style.marginBottom = '20px';
const sectionTitle = document.createElement('h4');
sectionTitle.textContent = section.title;
sectionTitle.style.cssText = `
margin: 0 0 10px 0;
color: #2c3e50;
font-size: 15px;
`;
const sectionContent = document.createElement('div');
section.items.forEach(item => {
const itemEl = document.createElement('div');
itemEl.textContent = item;
itemEl.style.marginBottom = '5px';
itemEl.style.paddingLeft = item.startsWith(' •') ? '15px' : '0';
sectionContent.appendChild(itemEl);
});
sectionEl.appendChild(sectionTitle);
sectionEl.appendChild(sectionContent);
content.appendChild(sectionEl);
});
const closeBtn = document.createElement('button');
closeBtn.textContent = '关闭';
closeBtn.style.cssText = `
display: block;
margin: 20px auto 0;
padding: 8px 20px;
background: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
`;
closeBtn.addEventListener('click', () => {
modal.remove();
overlay.remove();
this.hideHamburgerMenu();
});
const overlay = document.createElement('div');
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 10009;
`;
overlay.addEventListener('click', () => {
modal.remove();
overlay.remove();
this.hideHamburgerMenu();
});
modal.appendChild(title);
modal.appendChild(content);
modal.appendChild(closeBtn);
document.body.appendChild(overlay);
document.body.appendChild(modal);
// 添加键盘事件监听
const handleKeydown = (e) => {
if (e.key === 'Escape') {
modal.remove();
overlay.remove();
document.removeEventListener('keydown', handleKeydown);
this.hideHamburgerMenu();
}
};
document.addEventListener('keydown', handleKeydown);
},
```
这个改进后的使用说明功能具有以下特点：
🆕 新功能特性
📖 结构化内容
· 分类清晰: 将信息分为快捷键、核心功能、偏移工具、使用提示四个部分
· 层次分明: 使用标题和列表项组织内容，易于阅读
🎨 美观界面
· 现代化弹窗: 替代原生 alert，提供更好的视觉体验
· 响应式设计: 适应不同屏幕尺寸
· 优雅动画: 平滑的显示和关闭效果
📱 偏移工具详解
· 问题描述: 明确说明解决输入法遮挡问题
· 使用步骤: 详细的操作指引
· 参数建议: 提供实用的像素值参考范围
· 使用技巧: 针对不同设备的优化建议
⌨️ 交互优化
· 多种关闭方式: 点击关闭按钮、点击遮罩、按ESC键
· 焦点管理: 自动处理弹窗的显示和隐藏
· 无障碍支持: 完整的键盘导航支持
💡 实用信息
· 功能概览: 快速了解脚本核心能力
· 操作指南: 具体的操作步骤说明
· 最佳实践: 基于实际使用经验的建议
这样的使用说明不仅提供了必要的操作信息，还通过良好的视觉设计和交互体验，让用户更容易理解和使用脚本的各项功能。
