src/components/CustomContextMenu.astro

@@ -0,0 +1,267 @@
+<div class="custom-context-menu" data-context-menu role="menu" aria-hidden="true">
+  <div class="context-menu-nav" aria-label="页面导航">
+    <button type="button" data-context-action="back" aria-label="后退上一页" title="后退上一页">
+      <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
+    </button>
+    <button type="button" data-context-action="forward" aria-label="前进下一页" title="前进下一页">
+      <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
+    </button>
+    <button type="button" data-context-action="reload" aria-label="刷新页面" title="刷新页面">
+      <i class="fa-solid fa-rotate-right" aria-hidden="true"></i>
+    </button>
+    <a href="/" aria-label="返回首页" title="返回首页">
+      <i class="fa-solid fa-house" aria-hidden="true"></i>
+    </a>
+  </div>
+
+  <div class="context-menu-group" data-selection-group hidden>
+    <button type="button" data-context-action="copy-selection" data-selection-item>
+      <i class="fa-regular fa-copy" aria-hidden="true"></i>
+      <span>复制选中文字</span>
+    </button>
+    <button type="button" data-context-action="search-selection" data-selection-item>
+      <i class="fa-brands fa-microsoft" aria-hidden="true"></i>
+      <span>用 Bing 搜索</span>
+    </button>
+    <button type="button" data-context-action="quote-selection" data-selection-item data-comments-item>
+      <i class="fa-regular fa-comment-dots" aria-hidden="true"></i>
+      <span>引用到评论区</span>
+    </button>
+  </div>
+
+  <div class="context-menu-group" data-image-group hidden>
+    <button type="button" data-context-action="copy-image">
+      <i class="fa-regular fa-image" aria-hidden="true"></i>
+      <span>复制图片</span>
+    </button>
+    <button type="button" data-context-action="open-image">
+      <i class="fa-solid fa-up-right-from-square" aria-hidden="true"></i>
+      <span>新页面打开图片</span>
+    </button>
+    <button type="button" data-context-action="copy-image-url">
+      <i class="fa-solid fa-link" aria-hidden="true"></i>
+      <span>复制图片地址</span>
+    </button>
+  </div>
+
+  <div class="context-menu-group">
+    <a href="/archives/">
+      <i class="fa-solid fa-box-archive" aria-hidden="true"></i>
+      <span>时间线</span>
+    </a>
+    <a href="/categories/">
+      <i class="fa-solid fa-folder" aria-hidden="true"></i>
+      <span>分类</span>
+    </a>
+    <a href="/tags/">
+      <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+      <span>标签</span>
+    </a>
+    <button type="button" data-context-action="comments" data-comments-item>
+      <i class="fa-regular fa-comment-dots" aria-hidden="true"></i>
+      <span>跳转评论区</span>
+    </button>
+    <button type="button" data-context-action="print">
+      <i class="fa-solid fa-print" aria-hidden="true"></i>
+      <span>打印页面</span>
+    </button>
+    <a href="/cc/">
+      <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
+      <span>网站版权</span>
+    </a>
+  </div>
+</div>
+
+<script is:inline>
+  (() => {
+    const menu = document.querySelector('[data-context-menu]');
+    if (!menu) return;
+
+    const selectionItems = [...menu.querySelectorAll('[data-selection-item]')];
+    const selectionGroup = menu.querySelector('[data-selection-group]');
+    const commentsItems = [...menu.querySelectorAll('[data-comments-item]')];
+    const imageGroup = menu.querySelector('[data-image-group]');
+    const focusableSelector = 'a[href], button:not([disabled])';
+    let lastSelectionText = '';
+    let lastImage = null;
+
+    const isNativeContextTarget = (target) =>
+      target instanceof Element &&
+      Boolean(target.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]'));
+
+    const getCommentsTarget = () =>
+      document.querySelector('.twikoo-comments, #twikoo-wrap, #twikoo, .tk-comments-container');
+
+    const getSelectionText = () => String(window.getSelection?.() || '').trim();
+
+    const getImageTarget = (target) => {
+      if (!(target instanceof Element)) return null;
+      const image = target.closest('img');
+      return image instanceof HTMLImageElement ? image : null;
+    };
+
+    const getImageUrl = () => {
+      if (!lastImage) return '';
+      return lastImage.currentSrc || lastImage.src || lastImage.getAttribute('src') || '';
+    };
+
+    const copyText = async (text) => {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        return;
+      }
+
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.setAttribute('readonly', '');
+      textarea.style.position = 'fixed';
+      textarea.style.inset = '0 auto auto -9999px';
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      textarea.remove();
+    };
+
+    const setMenuState = () => {
+      const hasSelection = lastSelectionText.length > 0;
+      const hasComments = Boolean(getCommentsTarget());
+      const hasImage = Boolean(getImageUrl());
+
+      selectionItems.forEach((item) => {
+        item.hidden = !hasSelection;
+      });
+      if (selectionGroup) selectionGroup.hidden = !hasSelection;
+
+      commentsItems.forEach((item) => {
+        item.hidden = !hasComments || (item.hasAttribute('data-selection-item') && !hasSelection);
+      });
+
+      if (imageGroup) imageGroup.hidden = !hasImage;
+    };
+
+    const closeMenu = () => {
+      menu.classList.remove('is-open');
+      menu.setAttribute('aria-hidden', 'true');
+    };
+
+    const openMenu = (x, y) => {
+      setMenuState();
+      menu.classList.add('is-open');
+      menu.setAttribute('aria-hidden', 'false');
+
+      const rect = menu.getBoundingClientRect();
+      const gap = 10;
+      const left = Math.min(Math.max(gap, x), window.innerWidth - rect.width - gap);
+      const top = Math.min(Math.max(gap, y), window.innerHeight - rect.height - gap);
+
+      menu.style.left = `${left}px`;
+      menu.style.top = `${top}px`;
+    };
+
+    const jumpToComments = () => {
+      const target = getCommentsTarget();
+      target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    };
+
+    const quoteToComments = () => {
+      jumpToComments();
+      window.setTimeout(() => {
+        const textarea = document.querySelector('#twikoo textarea, .twikoo-comments textarea, .tk-input textarea');
+        if (!(textarea instanceof HTMLTextAreaElement) || !lastSelectionText) return;
+
+        const quote = lastSelectionText
+          .split(/\r?\n/)
+          .map((line) => `> ${line}`)
+          .join('\n');
+        const current = textarea.value.trim();
+        textarea.value = current ? `${current}\n\n${quote}\n` : `${quote}\n`;
+        textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        textarea.focus();
+      }, 500);
+    };
+
+    const searchSelection = () => {
+      if (!lastSelectionText) return;
+      const url = `https://www.bing.com/search?q=${encodeURIComponent(lastSelectionText)}`;
+      window.open(url, '_blank', 'noopener,noreferrer');
+    };
+
+    const copyImage = async () => {
+      const imageUrl = getImageUrl();
+      if (!imageUrl) return;
+
+      try {
+        if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
+          throw new Error('Image clipboard is not available.');
+        }
+
+        const response = await fetch(imageUrl, { mode: 'cors' });
+        const blob = await response.blob();
+        await navigator.clipboard.write([
+          new ClipboardItem({ [blob.type || 'image/png']: blob }),
+        ]);
+      } catch {
+        await copyText(new URL(imageUrl, window.location.href).toString());
+      }
+    };
+
+    const openImage = () => {
+      const imageUrl = getImageUrl();
+      if (!imageUrl) return;
+      window.open(new URL(imageUrl, window.location.href).toString(), '_blank', 'noopener,noreferrer');
+    };
+
+    document.addEventListener('contextmenu', (event) => {
+      if (isNativeContextTarget(event.target)) return;
+
+      lastSelectionText = getSelectionText();
+      lastImage = getImageTarget(event.target);
+      event.preventDefault();
+      openMenu(event.clientX, event.clientY);
+    });
+
+    document.addEventListener('click', (event) => {
+      const actionTarget = event.target instanceof Element ? event.target.closest('[data-context-action]') : null;
+      if (!actionTarget || !menu.contains(actionTarget)) {
+        closeMenu();
+        return;
+      }
+
+      const action = actionTarget.dataset.contextAction;
+      closeMenu();
+
+      if (action === 'back') history.back();
+      if (action === 'forward') history.forward();
+      if (action === 'reload') location.reload();
+      if (action === 'copy-selection' && lastSelectionText) copyText(lastSelectionText);
+      if (action === 'search-selection') searchSelection();
+      if (action === 'quote-selection') quoteToComments();
+      if (action === 'copy-image') copyImage();
+      if (action === 'open-image') openImage();
+      if (action === 'copy-image-url') copyText(new URL(getImageUrl(), window.location.href).toString());
+      if (action === 'comments') jumpToComments();
+      if (action === 'print') window.print();
+    });
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') closeMenu();
+      if (event.key === 'Tab' && menu.classList.contains('is-open')) {
+        const items = [...menu.querySelectorAll(focusableSelector)].filter((item) => !item.closest('[hidden]'));
+        if (items.length === 0) return;
+        const first = items[0];
+        const last = items[items.length - 1];
+
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    });
+
+    window.addEventListener('scroll', closeMenu, { passive: true });
+    window.addEventListener('resize', closeMenu);
+  })();
+</script>

src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import '../styles/site.css';
+import CustomContextMenu from '@/components/CustomContextMenu.astro';
 import { publicSiteConfig, siteConfig } from '../../site.config.mjs';
 
 interface Props {
@@ -118,6 +119,7 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
         </section>
       </div>
     </footer>
+    <CustomContextMenu />
     <script is:inline src={siteConfig.cdn.instantsearchJs}></script>
     <script is:inline src={siteConfig.cdn.typesenseAdapterJs}></script>
     <script is:inline src={siteConfig.cdn.fancyboxJs}></script>

src/styles/site.css

@@ -226,6 +226,126 @@ a {
   color: var(--accent);
 }
 
+.custom-context-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: min(218px, calc(100vw - 20px));
+  max-height: calc(100vh - 20px);
+  overflow-y: auto;
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 14px;
+  padding: 8px;
+  color: #4f565b;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(235, 248, 231, 0.68)),
+    rgba(245, 252, 241, 0.82);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    0 18px 42px rgba(44, 55, 63, 0.18);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate3d(0, 6px, 0) scale(0.98);
+  transform-origin: top left;
+  transition:
+    opacity 0.14s ease,
+    transform 0.14s ease;
+}
+
+.custom-context-menu.is-open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.custom-context-menu [hidden] {
+  display: none !important;
+}
+
+.context-menu-nav {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+  padding-bottom: 7px;
+}
+
+.context-menu-group {
+  display: grid;
+  gap: 2px;
+  border-top: 1px dashed rgba(104, 111, 120, 0.18);
+  padding-top: 7px;
+}
+
+.context-menu-group + .context-menu-group {
+  margin-top: 7px;
+}
+
+.custom-context-menu :where(a, button) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  line-height: 1.25;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+}
+
+.context-menu-nav :where(a, button) {
+  justify-content: center;
+  height: 42px;
+  border: 1px solid rgba(178, 194, 170, 0.42);
+  border-radius: 14px;
+  color: #6b7174;
+  background: rgba(255, 255, 255, 0.44);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
+}
+
+.context-menu-group :where(a, button) {
+  gap: 12px;
+  min-height: 40px;
+  border-radius: 10px;
+  padding: 9px 10px;
+}
+
+.custom-context-menu :where(a, button):hover,
+.custom-context-menu :where(a, button):focus-visible {
+  color: var(--accent);
+  background: rgba(255, 255, 255, 0.58);
+  outline: 0;
+}
+
+.custom-context-menu i {
+  display: inline-grid;
+  width: 18px;
+  min-width: 18px;
+  height: 18px;
+  place-items: center;
+  color: #737a7d;
+  font-size: 0.98rem;
+  line-height: 1;
+}
+
+.custom-context-menu :where(a, button):hover i,
+.custom-context-menu :where(a, button):focus-visible i {
+  color: currentColor;
+}
+
+.custom-context-menu span {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.95rem;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .nav-links a:hover,
 .nav-random:hover,
 .nav-search:hover,
@@ -272,6 +392,38 @@ a {
     0 8px 18px rgba(0, 0, 0, 0.18);
 }
 
+:root[data-theme='dark'] .custom-context-menu {
+  border-color: rgba(174, 205, 197, 0.2);
+  color: #d8e5e2;
+  background:
+    linear-gradient(145deg, rgba(31, 48, 52, 0.88), rgba(13, 23, 26, 0.78)),
+    rgba(15, 25, 28, 0.82);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 18px 42px rgba(0, 0, 0, 0.34);
+}
+
+:root[data-theme='dark'] .context-menu-nav :where(a, button) {
+  border-color: rgba(174, 205, 197, 0.16);
+  color: #b7c7c4;
+  background: rgba(255, 255, 255, 0.06);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme='dark'] .context-menu-group {
+  border-top-color: rgba(174, 205, 197, 0.16);
+}
+
+:root[data-theme='dark'] .custom-context-menu :where(a, button):hover,
+:root[data-theme='dark'] .custom-context-menu :where(a, button):focus-visible {
+  color: var(--accent);
+  background: rgba(114, 222, 210, 0.11);
+}
+
+:root[data-theme='dark'] .custom-context-menu i {
+  color: #a8b8b5;
+}
+
 .hero {
   width: min(var(--wide-width), calc(100% - (var(--page-gutter) * 2)));
   min-height: 360px;
@@ -3316,6 +3468,22 @@ meting-js {
     --page-gutter: 16px;
   }
 
+  .custom-context-menu {
+    width: min(218px, calc(100vw - 16px));
+    border-radius: 12px;
+    padding: 7px;
+  }
+
+  .context-menu-nav :where(a, button) {
+    height: 40px;
+    border-radius: 13px;
+  }
+
+  .context-menu-group :where(a, button) {
+    min-height: 38px;
+    padding: 8px 9px;
+  }
+
   .nav {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 40px;