右侧悬浮ai插件

yangzhuozhuo

198人浏览 · 2026-06-11 14:01:26

yangzhuozhuo · 2026-06-11 14:01:26 发布

(function (window) {
  // 私有作用域，不污染全局
  const AI_FLOAT_PLUGIN = function () {
    // 配置项
    const config = {
      // iframe 地址，外部可修改
      iframeSrc: "https://www.baidu.com",
      // 弹窗宽高
      modalWidth: 420,
      modalHeight: 520,
      // 悬浮球大小
      btnSize: 56,
      // 主题色
      primaryColor: "#1677ff"
    };

    // 拖拽状态
    const state = {
      btnDrag: { isDrag: false, offsetX: 0, offsetY: 0 },
      modalDrag: { isDrag: false, startX: 0, startY: 0, startLeft: 0, startTop: 0 }
    };

    // 容器DOM
    let floatBtn = null;
    let modalWrap = null;
    let modalHeader = null;
    let closeBtn = null;
    let iframe = null;

    // ===================== 创建样式 =====================
    function createStyle() {
      const style = document.createElement("style");
      style.id = "ai-float-plugin-style";
      style.textContent = `
        #ai-float-btn {
          position: fixed;
          right: 20px;
          bottom: 120px;
          width: ${config.btnSize}px;
          height: ${config.btnSize}px;
          border-radius: 50%;
          background: ${config.primaryColor};
          box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
          cursor: move;
          z-index: 99999;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 24px;
          user-select: none;
          transition: transform 0.2s;
        }
        #ai-float-btn:hover {
          transform: scale(1.08);
        }
        #ai-modal-wrap {
          position: fixed;
          width: ${config.modalWidth}px;
          height: ${config.modalHeight}px;
          background: #fff;
          border-radius: 12px;
          box-shadow: 0 8px 30px rgba(0,0,0,0.2);
          z-index: 99998;
          overflow: hidden;
          display: none;
          user-select: none;
        }
        #ai-modal-header {
          height: 40px;
          line-height: 40px;
          background: ${config.primaryColor};
          color: #fff;
          padding: 0 15px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: move;
        }
        #ai-modal-close {
          font-size: 20px;
          cursor: pointer;
          padding: 0 8px;
        }
        #ai-modal-close:hover {
          color: #f5f5f5;
        }
        #ai-iframe {
          width: 100%;
          height: calc(100% - 40px);
          border: none;
        }
      `;
      document.head.appendChild(style);
    }

    // ===================== 创建DOM结构 =====================
    function createDom() {
      // 悬浮按钮
      floatBtn = document.createElement("div");
      floatBtn.id = "ai-float-btn";
      floatBtn.innerText = "AI";

      // 弹窗外层
      modalWrap = document.createElement("div");
      modalWrap.id = "ai-modal-wrap";

      // 弹窗头部
      modalHeader = document.createElement("div");
      modalHeader.id = "ai-modal-header";
      modalHeader.innerHTML = `<span>AI智能助手</span>`;

      // 关闭按钮
      closeBtn = document.createElement("span");
      closeBtn.id = "ai-modal-close";
      closeBtn.innerText = "×";
      modalHeader.appendChild(closeBtn);

      // iframe
      iframe = document.createElement("iframe");
      iframe.id = "ai-iframe";
      iframe.src = config.iframeSrc;

      // 组装
      modalWrap.appendChild(modalHeader);
      modalWrap.appendChild(iframe);

      // 挂载到body
      document.body.appendChild(floatBtn);
      document.body.appendChild(modalWrap);
    }

    // ===================== 悬浮球拖拽 =====================
    function bindBtnDrag() {
      floatBtn.addEventListener("mousedown", (e) => {
        if (e.button !== 0) return;
        state.btnDrag.isDrag = true;
        const rect = floatBtn.getBoundingClientRect();
        state.btnDrag.offsetX = e.clientX - rect.left;
        state.btnDrag.offsetY = e.clientY - rect.top;
        floatBtn.style.transition = "none";
        e.preventDefault();
      });

      document.addEventListener("mousemove", (e) => {
        if (!state.btnDrag.isDrag) return;
        const winW = window.innerWidth;
        const winH = window.innerHeight;
        const btnW = floatBtn.offsetWidth;
        const btnH = floatBtn.offsetHeight;

        let x = e.clientX - state.btnDrag.offsetX;
        let y = e.clientY - state.btnDrag.offsetY;

        x = Math.max(0, Math.min(x, winW - btnW));
        y = Math.max(0, Math.min(y, winH - btnH));

        floatBtn.style.left = x + "px";
        floatBtn.style.right = "auto";
        floatBtn.style.top = y + "px";
      });

      document.addEventListener("mouseup", () => {
        if (state.btnDrag.isDrag) {
          state.btnDrag.isDrag = false;
          floatBtn.style.transition = "transform 0.2s";
        }
      });
    }

    // ===================== 点击打开弹窗 =====================
    function bindBtnClick() {
      floatBtn.addEventListener("click", () => {
        // 拖拽不触发点击
        if (state.btnDrag.isDrag) return;
        modalWrap.style.display = "block";
        // 弹窗居中
        const winW = window.innerWidth;
        const winH = window.innerHeight;
        const mW = modalWrap.offsetWidth;
        const mH = modalWrap.offsetHeight;
        modalWrap.style.left = (winW - mW) / 2 + "px";
        modalWrap.style.top = (winH - mH) / 2 + "px";
      });
    }

    // ===================== 弹窗关闭 =====================
    function bindClose() {
      closeBtn.addEventListener("click", () => {
        modalWrap.style.display = "none";
      });

      // ESC关闭
      document.addEventListener("keydown", (e) => {
        if (e.key === "Escape") {
          modalWrap.style.display = "none";
        }
      });
    }

    // ===================== 弹窗拖拽 =====================
    function bindModalDrag() {
      modalHeader.addEventListener("mousedown", (e) => {
        if (e.button !== 0) return;
        state.modalDrag.isDrag = true;
        state.modalDrag.startX = e.clientX;
        state.modalDrag.startY = e.clientY;
        const rect = modalWrap.getBoundingClientRect();
        state.modalDrag.startLeft = rect.left;
        state.modalDrag.startTop = rect.top;
        e.preventDefault();
      });

      document.addEventListener("mousemove", (e) => {
        if (!state.modalDrag.isDrag) return;
        const winW = window.innerWidth;
        const winH = window.innerHeight;
        const mW = modalWrap.offsetWidth;
        const mH = modalWrap.offsetHeight;

        const moveX = e.clientX - state.modalDrag.startX;
        const moveY = e.clientY - state.modalDrag.startY;

        let newLeft = state.modalDrag.startLeft + moveX;
        let newTop = state.modalDrag.startTop + moveY;

        newLeft = Math.max(0, Math.min(newLeft, winW - mW));
        newTop = Math.max(0, Math.min(newTop, winH - mH));

        modalWrap.style.left = newLeft + "px";
        modalWrap.style.top = newTop + "px";
      });

      document.addEventListener("mouseup", () => {
        state.modalDrag.isDrag = false;
      });
    }

    // ===================== 初始化 =====================
    function init(options = {}) {
      // 合并外部配置
      Object.assign(config, options);
      // 防止重复创建
      if (document.getElementById("ai-float-btn")) return;

      createStyle();
      createDom();
      bindBtnDrag();
      bindBtnClick();
      bindClose();
      bindModalDrag();
    }

    // 对外暴露方法
    return {
      init,
      // 手动关闭弹窗
      closeModal() {
        if (modalWrap) modalWrap.style.display = "none";
      },
      // 手动打开弹窗
      openModal() {
        if (modalWrap) modalWrap.style.display = "block";
      },
      // 更新iframe地址
      setIframeSrc(url) {
        if (iframe) iframe.src = url;
      },
      // 销毁插件
      destroy() {
        const style = document.getElementById("ai-float-plugin-style");
        style && style.remove();
        floatBtn && floatBtn.remove();
        modalWrap && modalWrap.remove();
      }
    };
  };

  // 挂载到全局，兼容所有框架
  window.AiFloatPlugin = AI_FLOAT_PLUGIN();
})(window);