1. 功能总览

这段代码是一套高度定制化的网页右键菜单解决方案，替代了浏览器默认右键菜单，集成了导航、复制粘贴、主题切换、内容搜索等实用功能，同时具备深浅主题适配、响应式布局、友好的交互反馈（如复制提示、动画效果），核心目标是提升网页操作的便捷性和用户体验。

2. 核心功能模块拆解

（1）样式体系：适配性与视觉体验

• 主题变量定义：通过 CSS 变量--theme-primary/--menu-bg等区分浅色 / 深色主题，body.dark-theme类切换时自动更新菜单背景、文字、阴影等样式，实现无感知主题切换；
• 动画与交互样式：包含pulse脉冲动画（复制成功弹窗图标）、过渡动画（菜单显隐、提示弹窗滑入）、hover 交互（菜单 / 按钮的样式变化）；
• 响应式适配：针对移动端（768px 以下）调整提示弹窗位置（从右上角改为底部），避免小屏显示异常；
• 层级与遮罩：通过z-index（最高 999999）确保菜单 / 弹窗置顶，backdrop-filter实现毛玻璃效果，提升视觉质感。

（2）右键菜单核心功能

菜单包含三大类操作，覆盖导航、编辑、工具类需求：

功能分类	具体操作
基础导航	后退 / 前进、返回顶部（平滑滚动）、刷新页面、跳转网站首页 / 友链页面
内容编辑	复制选中内容 / 页面 URL / 图片链接 / 链接地址（自动加版权）、仅可编辑区域粘贴内容
工具类	深浅主题切换、内容搜索（弹窗式搜索框）

（3）复制功能：健壮性与用户反馈

• 剪贴板操作：优先使用现代navigator.clipboard API，兼容低版本浏览器时降级为document.execCommand('copy')；
• 版权自动追加：复制内容时自动添加 “优源库博客网” 版权信息（含链接），支持自定义版权 URL；
• 双重反馈提示：
  • 轻量提示：右侧 / 底部滑入式tooltip（区分成功 / 失败样式），支持多提示堆叠排版；
  • 强化提示：layer弹窗居中显示复制结果，含动画和版权信息，3 秒后自动关闭。

（4）交互优化：细节提升体验

• 菜单位置自适应：右键触发菜单时，自动计算视口边界，避免菜单超出屏幕（限制左右 / 上下边距）；
• 动态菜单项：右键点击图片 / 链接时，自动显示 “复制图片链接 / 复制链接” 选项；点击输入框 / 可编辑区域时，显示 “粘贴” 选项；
• 性能优化：使用事件委托（菜单点击统一处理）、requestIdleCallback延迟初始化、resize 防抖，避免阻塞页面加载；
• 快捷键兼容：搜索框支持Ctrl+Enter触发搜索，ESC 键关闭搜索弹窗，符合用户操作习惯。

（5）辅助功能

• 搜索弹窗：点击 “搜索内容” 后弹出带毛玻璃效果的搜索框，支持输入 / 粘贴内容，点击 “去搜索” 跳转至网站搜索页；
• 剪贴板读取：粘贴功能仅在可编辑区域（input/textarea/ContentEditable 元素）生效，避免无效操作；
• 移动端兼容：检测移动端 UA，小屏（<250px）自动禁用右键菜单，避免操作冲突。

3. 关键实现细节

（1）菜单显隐逻辑

• 禁用默认右键：document.addEventListener('contextmenu', e => e.preventDefault())；
• 触发与隐藏：右键（e.button===2）触发菜单，左键点击非菜单区域 / 滚动页面 / 调整窗口大小时隐藏菜单；
• 动画显隐：菜单通过opacity+transform实现渐入渐出，避免生硬切换。

（2）复制功能核心代码

function copyTextToClipboard(text, successTip, type, showToast, addCopyright, copyrightUrl) {
  if (!text) { showTooltip('无内容可复制', 'error'); return; }
  // 自动追加版权
  var finalText = addCopyright ? text + '\n\n------------------\n来源：优源库博客网(www.yykbk.com)\n链接：' + (copyrightUrl || window.location.href) : text;
  // 现代API优先
  if (navigator.clipboard) {
    navigator.clipboard.writeText(finalText)
      .then(() => showToast && showTooltip(successTip, type))
      .catch(() => fallbackCopy(finalText, successTip, type, showToast)); // 降级方案
  } else {
    fallbackCopy(finalText, successTip, type, showToast);
  }
}
// 降级方案：创建临时input实现复制
function fallbackCopy(text, successTip, type, showToast) {
  var tempInput = document.createElement('input');
  tempInput.style.cssText = 'position:absolute;left:-9999px';
  tempInput.value = text;
  document.body.appendChild(tempInput);
  tempInput.select();
  var successful = document.execCommand('copy');
  showToast && showTooltip(successful ? successTip : '复制失败', successful ? type : 'error');
  document.body.removeChild(tempInput);
}

（3）主题切换逻辑

function toggleTheme() {
  var bodyEl = document.body;
  var isDark = bodyEl.classList.contains('dark-theme');
  // 切换body类名+更新菜单文字/图标
  isDark ? bodyEl.classList.remove('dark-theme') : bodyEl.classList.add('dark-theme');
  setTheme(isDark ? 'light' : 'dark'); // 更新菜单内“切换深色/浅色”文字和图标
  showTooltip('已切换' + (isDark ? '浅色' : '深色') + '模式', 'success');
}

4. 适用场景与扩展建议

• 适用场景：博客、文档类网站（需便捷复制 / 版权保护）、个性化官网（提升品牌体验）；
• 扩展方向：
  • 增加菜单自定义配置（如可关闭 / 开启某功能）；
  • 记忆用户主题偏好（localStorage 存储）；
  • 支持更多复制格式（如富文本）。