[js][css] 文档内的数据库反引常态跟随移动

指的标题旁边的数据库反引：

更新：解决了总是最高层显示的 bug

js:

(() => {
  // == SiYuan: 覆盖层镜像按钮 + 自动层级修复版 ==
  var PANE_SEL = '.protyle';
  var ORIG_SEL = '.protyle-title .popover__block[data-popover-url*="getMirrorDatabaseBlocks"]';
  var OVERLAY_CLASS = 'affix-av-overlay';
  var CLONE_CLASS = 'affix-av-clone';

  var panes = new Map();

  function ensureOverlay(pane) {
    var ov = pane.querySelector('.' + OVERLAY_CLASS);
    if (!ov) {
      ov = document.createElement('div');
      ov.className = OVERLAY_CLASS;
  
      // === 修改点 1：在这里直接强制设置安全的样式，防止层级过高 ===
      // z-index: 10 保证它浮在文字上面，但远低于思源的菜单(通常>1000)
      ov.style.zIndex = '10'; 
      // 关键：让覆盖层容器本身“不接收鼠标事件”，防止它像个透明玻璃挡住正文
      ov.style.pointerEvents = 'none'; 
      // 如果你的 CSS 没写定位，这里最好也补一个默认定位（视你的 CSS 而定，这里假设你的 CSS 处理了位置）
      // ov.style.position = 'absolute'; 
  
      pane.appendChild(ov);
    }
    return ov;
  }

  function attachForwarding(clone, orig) {
    if (clone.__avBound) return;
    var types = ['mouseenter','mousemove','mouseleave','mousedown','mouseup','click','contextmenu','auxclick'];
    types.forEach(function(t){
      clone.addEventListener(t, function(e){
        if (!orig || !document.body.contains(orig)) return;
        var evt = new MouseEvent(t, {
          bubbles: true, cancelable: true, view: window,
          clientX: e.clientX, clientY: e.clientY,
          screenX: e.screenX, screenY: e.screenY,
          button: e.button, buttons: e.buttons,
          ctrlKey: e.ctrlKey, shiftKey: e.shiftKey, altKey: e.altKey, metaKey: e.metaKey
        });
        orig.dispatchEvent(evt);
      });
    });
    clone.__avBound = true;
  }

  function syncOnePane(pane) {
    var orig = pane.querySelector(ORIG_SEL);
    var ov = ensureOverlay(pane);

    if (!orig) { 
      var old = ov.querySelector('.' + CLONE_CLASS);
      if (old) old.remove();
      return;
    }

    var clone = ov.querySelector('.' + CLONE_CLASS);
    if (!clone) {
      clone = orig.cloneNode(true);   
      clone.classList.add(CLONE_CLASS); 
  
      // === 修改点 2：恢复按钮本身的点击能力 ===
      // 因为容器设置了 pointer-events: none，按钮必须设为 auto 才能被点击
      clone.style.pointerEvents = 'auto'; 
  
      ov.appendChild(clone);
    } else {
      clone.innerHTML = orig.innerHTML;
      var names = clone.getAttributeNames ? clone.getAttributeNames() : [];
      for (var i=0;i<names.length;i++) if (names[i].indexOf('data-')===0) clone.removeAttribute(names[i]);
      var onames = orig.getAttributeNames ? orig.getAttributeNames() : [];
      for (var j=0;j<onames.length;j++) if (onames[j].indexOf('data-')===0) clone.setAttribute(onames[j], orig.getAttribute(onames[j]));
    }

    attachForwarding(clone, orig);
  }

  function scheduleSync(pane) {
    var st = panes.get(pane) || {};
    if (st.raf) cancelAnimationFrame(st.raf);
    st.raf = requestAnimationFrame(function(){
      syncOnePane(pane);
      st.raf = 0;
    });
    panes.set(pane, st);
  }

  function initPane(pane) {
    if (panes.has(pane)) return;
    ensureOverlay(pane);
    var title = pane.querySelector('.protyle-title') || pane;
    var mo = new MutationObserver(function(){ scheduleSync(pane); });
    mo.observe(title, { childList:true, subtree:true, attributes:true, characterData:false });
    panes.set(pane, { mo: mo, raf: 0 });
    scheduleSync(pane);
  }

  function cleanupPane(pane) {
    var st = panes.get(pane);
    if (!st) return;
    try { st.mo.disconnect(); } catch(_){}
    if (st.raf) cancelAnimationFrame(st.raf);
    var ov = pane.querySelector('.' + OVERLAY_CLASS);
    if (ov) ov.remove();
    panes.delete(pane);
  }

  function scanAll() {
    var nodes = document.querySelectorAll(PANE_SEL);
    for (var i=0;i<nodes.length;i++) initPane(nodes[i]);
    panes.forEach(function(_st, p){
      if (!document.body.contains(p)) cleanupPane(p);
    });
  }

  var rootMO = new MutationObserver(function(){ requestAnimationFrame(scanAll); });
  rootMO.observe(document.body, { childList:true, subtree:true });

  window.addEventListener('load', scanAll);
  document.addEventListener('visibilitychange', function(){ if (!document.hidden) scanAll(); });
  setInterval(scanAll, 5000);
})();

css:

/* 让每个窗格成为定位容器 */
.protyle { position: relative; }

/* 覆盖层：不占布局，不拦截事件 */
.affix-av-overlay {
  position: absolute;
  top: 24px;              /* 如有顶部工具栏，改成相应高度 */
  right: 16px;
  z-index: 15;
  pointer-events: none;   /* 容器不吃点击，下面正文可滚动/选择 */
}

/* 镜像按钮本体：可以点击 */
.affix-av-overlay .affix-av-clone {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;        /* 避免太长，超出省略 */
  padding: 2px 10px;
  font-size: 12px;
  line-height: 20px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--b3-theme-background) 80%, transparent);
  border: 1px solid var(--b3-border-color, rgba(0,0,0,.08));
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  backdrop-filter: saturate(1.2) blur(6px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 让内部文字/图标更紧凑 */
.affix-av-overlay .affix-av-clone .b3-chip,
.affix-av-overlay .affix-av-clone span {
  font-size: 12px !important;
  line-height: 18px !important;
  padding: 0 !important;
  margin: 0 2px 0 0 !important;
}

/* 悬停微动效（可删） */
.affix-av-overlay .affix-av-clone:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* 避免遮住滚动条：小屏时自动内收 */
@media (max-width: 1024px) {
  .affix-av-overlay { right: 10px; top: 8px; }
}