Greasy Fork

浏览器宽度调整后，悬浮窗位置不会动态调整，会导致窗口被遮挡。可以将14625-14771行代码改为：

  var RootNode = document.createElement("div");
  var RootID = randomString(6);
  RootNode.id = RootID;
  var ShadowRoot = RootNode.attachShadow({ mode: "open" });

  // 样式部分保持不变...
  ShadowRoot.innerHTML = `<style>
  #Abracadabra_Card{
    height: 130px;
    width: 200px;
    border-radius: 8px;
    background: background-color: #8EC5FC;
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
    box-shadow: 0px 5px 10px 3px #8c8c8c;
    display:grid;
    grid-template-rows: 33% 33% 33%;
  };
  .button{
    opacity: 0.7;
  }
  .button:active{
    opacity: 0.5;
  }
  </style>
  <div id="Abracadabra_Card">
  <div id="InputAContainer" style="display:grid;">
    <input id="originalText" style="
    width: 180px;
    top: 7px;
    height: 28px;
    justify-self: center;
    border-radius: 8px;
    border: solid 1px #00000080;
    opacity: 0.7;
    position: relative;" type="text" placeholder="\u5F85\u5904\u7406\u6587\u672C">
  <div id="KeyAndButtonContainer" style="display:grid;grid-template-columns: 50% 25% 25%;margin-top: 10px;">
    <input id="KeyText" style="
    width: 100px;
    top: 0px;
    left: 7px;
    height: 18px;
    justify-self: left;
    border-radius: 8px;
    border: solid 1px #00000080;
    opacity: 0.7;
    position: relative;" type="text" placeholder="\u5BC6\u94A5(\u53EF\u7701\u7565)">
    <button id="Enc" class="button" style="
    width: 38px;
    top: 0px;
    left: 9px;
    height: 22px;
    justify-self: center;
    border-radius: 8px;
    border: solid 1px #00000080;
    position: relative;
    background: #5D73F8;
    color:white;
    white-space: nowrap;">\u52A0\u5BC6</button>
  <button id="Dec" class="button" style="
    width: 38px;
    top: 0px;
    left: -1px;
    height: 22px;
    justify-self: center;
    border-radius: 8px;
    border: solid 1px #00000080;
    position: relative;
    background: #ff5c82;
    color:white;
    white-space: nowrap;">\u89E3\u5BC6
  </button>
  </div>
  <div id="OutputContainer" style="display:grid;margin-top: 10px;">
    <input id="OutputText" style="
    width: 180px;
    top: -3px;
    height: 36px;
    justify-self: center;
    border-radius: 8px;
    border: solid 1px #00000080;
    opacity: 0.7;
    position: relative;" type="text" placeholder="\u8F93\u51FA">
    <span style="
    position: relative;
    width: fit-content;
    height: fit-content;
    top: -7px;
    left: 7px;
    font-size: 1rem;
    font-variant: petite-caps;
    text-align: left;
    padding: 6px;
    border-radius: inherit;
    margin: 0px;
    zoom: 70%;">Powered by <a href="https://github.com/SheepChef/Abracadabra">ABRACADABRA</a></span>
  </div>
  </div>
  </div>`;

  // 事件监听部分保持不变...
  ShadowRoot.getElementById("Enc").addEventListener("click", (event) => {
    var Text = ShadowRoot.getElementById("originalText").value;
    var Key = ShadowRoot.getElementById("KeyText").value == "" ? "ABRACADABRA" : ShadowRoot.getElementById("KeyText").value;
    Abra.Input_Next(Text, "ENCRYPT", Key, true, 50);
    var Res = Abra.Output();
    ShadowRoot.getElementById("OutputText").value = Res;
    ShadowRoot.getElementById("OutputText").select();
    navigator.clipboard.writeText(window.getSelection().toString());
  });
  ShadowRoot.getElementById("Dec").addEventListener("click", (event) => {
    var Text = ShadowRoot.getElementById("originalText").value;
    var Key = ShadowRoot.getElementById("KeyText").value == "" ? "ABRACADABRA" : ShadowRoot.getElementById("KeyText").value;
    Abra.Input_Next(Text, "DECRYPT", Key);
    var Res = Abra.Output();
    ShadowRoot.getElementById("OutputText").value = Res;
    ShadowRoot.getElementById("OutputText").select();
    navigator.clipboard.writeText(window.getSelection().toString());
  });

  // 新增窗口resize处理函数
  function updatePosition() {
    const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
    if (document.location.host == "tieba.baidu.com") {
      RootNode.style.right = '20px';
      RootNode.style.left = 'auto';
    } else if (document.location.host == "www.bilibili.com") {
      RootNode.style.right = viewportWidth > 1400 ? '20px' : '10px';
    }
  }

  // 初始化样式
  const baseStyle = `
    transition: 1s;
    opacity: 0.3;
    position: fixed;
    z-index: 100000;
    bottom: 100px;
    right: 20px;
    box-sizing: border-box;`;

  if (document.location.host == "tieba.baidu.com") {
    RootNode.style.cssText = baseStyle + `
      bottom: 100px;
      right: 20px;`;
    // 使用更稳定的容器选择器
    const container = document.querySelector('.editor_content_wrapper') || document.body;
    container.appendChild(RootNode);
  } else if (document.location.host == "www.bilibili.com") {
    RootNode.style.cssText = baseStyle + `
      bottom: 10px;
      right: 20px;
      zoom: 70%;`;
    // 添加容错机制
    const observer = new MutationObserver(() => {
      const target = document.querySelector("#commentapp") || document.body;
      if (!RootNode.parentElement) {
        target.appendChild(RootNode);
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }

  // 添加resize监听
  window.addEventListener('resize', () => {
    requestAnimationFrame(updatePosition);
  });

  // 初始化定位
  updatePosition();

  // 其他事件监听保持不变...
  RootNode.addEventListener("mouseenter", (event) => {
    RootNode.style.opacity = "1";
  });
  RootNode.addEventListener("mouseout", (event) => {
    if (document.activeElement.id != RootID) {
      RootNode.style.opacity = "0.3";
    }
  });
  RootNode.addEventListener("focus", (event) => {
    RootNode.style.opacity = "1";
  });
  RootNode.addEventListener("focusout", (event) => {
    RootNode.style.opacity = "0.3";
  });

感谢反馈。