BilibiliStreamKeyHelper.user.js

// ==UserScript==
// @name         B站推流码获取工具
// @namespace    https://github.com/smathsp
// @version      1.14
// @description  获取第三方推流码
// @author       smathsp
// @license      GPL-3.0
// @match        *://*.bilibili.com/*
// @icon         https://www.bilibili.com/favicon.ico
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant        GM_xmlhttpRequest
// @grant        GM_setClipboard
// @grant        GM_notification
// @connect      api.live.bilibili.com
// @connect      passport.bilibili.com
// @require      https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js
// @run-at       document-end
// ==/UserScript==

(function () {
  "use strict";

  // 存储键名常量
  const STORAGE_KEYS = {
    LAST_ROOM_ID: "bili_last_roomid",
    DARK_MODE: "bili_dark_mode",
    IS_LIVE_STARTED: "isLiveStarted",
    STREAM_INFO: "streamInfo",
    LAST_GROUP_ID: "bili_last_groupid",
    LAST_AREA_ID: "bili_last_areaid",
    AREA_LIST_TIME: "bili_area_list_time",
    AREA_LIST: "bili_area_list",
    USER_MID: "bili_user_mid",
    LAST_TITLE: "bili_last_title",
  };

  // API URL Constants
  const API_URL_AREA_LIST =
    "https://api.live.bilibili.com/room/v1/Area/getList?show_pinyin=1";
  const API_URL_START_LIVE =
    "https://api.live.bilibili.com/room/v1/Room/startLive";
  const API_URL_UPDATE_ROOM =
    "https://api.live.bilibili.com/room/v1/Room/update";
  const API_URL_STOP_LIVE =
    "https://api.live.bilibili.com/room/v1/Room/stopLive";
  const API_URL_FACE_AUTH =
    "https://api.live.bilibili.com/xlive/app-blink/v1/preLive/IsUserIdentifiedByFaceAuth";

  // 将 GM_xmlhttpRequest Promise 化
  function gmRequest(options) {
    return new Promise((resolve, reject) => {
      GM_xmlhttpRequest({
        ...options,
        onload: resolve,
        onerror: reject,
        ontimeout: reject,
        onabort: reject,
      });
    });
  }

  // SVG 图标常量
  const SUN_SVG =
    '<svg viewBox="0 0 24 24" width="20" height="20"><circle cx="12" cy="12" r="5" fill="#FFD600"/><g stroke="#FFD600" stroke-width="2"><line x1="12" y1="1" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/><line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/><line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/></g></svg>';
  const MOON_SVG =
    '<svg viewBox="0 0 24 24" width="20" height="20"><path d="M21 12.79A9 9 0 0 1 12.21 3c-.55 0-.66.71-.19.93A7 7 0 1 0 20.07 12c.22.47-.38.74-.87.79z" fill="#888"/></svg>';
  const CLOSE_SVG =
    '<svg viewBox="0 0 1024 1024" width="16" height="16"><path d="M512 421.49 331.09 240.58c-24.74-24.74-64.54-24.71-89.28 0.03-24.74 24.74-24.72 64.54 0.03 89.28L422.75 510.8 241.84 691.71c-24.74 24.74-24.72 64.54 0.03 89.33 24.74 24.74 64.54 24.71 89.28-0.03L512 600.1l180.91 180.91c24.74 24.74 64.54 24.71 89.28-0.03 24.74-24.74 24.72-64.54-0.03-89.28L601.25 510.8 782.16 329.89c24.74-24.74 24.72-64.54-0.03-89.33-24.74-24.74-64.54-24.71-89.28 0.03L512 421.49z" fill="#888888"></path></svg>';

  // 插入全局样式表，统一亮暗色模式
  function insertGlobalStyle() {
    if (document.getElementById("bili-stream-global-style")) return;
    const style = document.createElement("style");
    style.id = "bili-stream-global-style";
    style.innerHTML = `
        :root {
            --bili-bg: rgba(255, 255, 255, 0.8);
            --bili-fg: #222;
            --bili-panel-shadow: 0 8px 32px rgba(0,0,0,0.15);
            --bili-border: rgba(238, 238, 238, 0.6);
            --bili-input-bg: rgba(255, 255, 255, 0.9);
            --bili-input-fg: #222;
            --bili-input-border: rgba(221, 221, 221, 0.8);
            --bili-tip-bg: rgba(254, 240, 241, 0.9);
            --bili-tip-fg: #d92b46;
            --bili-tip-border: #fb7299;
            --bili-btn-main: #fb7299;
            --bili-btn-main-hover: #fc8bab;
            --bili-btn-main-disabled: #bfbfbf;
            --bili-btn-stop: #ff4b4b;
            --bili-btn-stop-hover: #d9363e;
            --bili-btn-stop-disabled: #999;
            --bili-btn-text: #fff;
            --bili-title-color: #fb7299;
            --bili-label-color: #666;
            --bili-tip-yellow-bg: rgba(255, 251, 230, 0.9);
            --bili-tip-yellow-border: #faad14;
            --bili-tip-yellow-fg: #faad14;
            --bili-tip-green-bg: rgba(230, 255, 237, 0.9);
            --bili-tip-green-border: #52c41a;
            --bili-tip-green-fg: #389e0d;
        }
        .bili-dark-mode {
            --bili-bg: rgba(35, 35, 36, 0.8);
            --bili-fg: #eee;
            --bili-panel-shadow: 0 8px 32px rgba(0,0,0,0.4);
            --bili-border: rgba(68, 68, 68, 0.6);
            --bili-input-bg: rgba(24, 24, 26, 0.9);
            --bili-input-fg: #eee;
            --bili-input-border: rgba(68, 68, 68, 0.8);
            --bili-tip-bg: rgba(45, 35, 38, 0.9);
            --bili-tip-fg: #ffb6c1;
            --bili-tip-border: #fb7299;
            --bili-btn-main: #fb7299;
            --bili-btn-main-hover: #fc8bab;
            --bili-btn-main-disabled: #bfbfbf;
            --bili-btn-stop: #ff4b4b;
            --bili-btn-stop-hover: #d9363e;
            --bili-btn-stop-disabled: #999;
            --bili-btn-text: #fff;
            --bili-title-color: #fb7299;
            --bili-label-color: #aaa;
            --bili-tip-yellow-bg: rgba(58, 45, 26, 0.9);
            --bili-tip-yellow-border: #faad14;
            --bili-tip-yellow-fg: #ffd666;
            --bili-tip-green-bg: rgba(30, 43, 34, 0.9);
            --bili-tip-green-border: #52c41a;
            --bili-tip-green-fg: #b7eb8f;
        }
        #bili-stream-code-panel {
            background-color: var(--bili-bg) !important;
            color: var(--bili-fg) !important;
            box-shadow: var(--bili-panel-shadow) !important;
            border-radius: 12px;
            padding: 12px;
            font-family: "Microsoft YaHei", sans-serif;
            max-width: 280px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--bili-border);
        }
        #bili-result {
            background-color: var(--bili-bg) !important;
            color: var(--bili-fg) !important;
            border: 1px solid var(--bili-border) !important;
            border-radius: 8px;
            margin-top: 15px;
            padding: 10px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .bili-input {
            background: var(--bili-input-bg) !important;
            color: var(--bili-input-fg) !important;
            border: 1px solid var(--bili-input-border) !important;
            border-radius: 4px;
            padding: 6px 8px;
            font-size: 13px;
            width: 100%;
            box-sizing: border-box;
        }
        .bili-select {
            background: var(--bili-input-bg) !important;
            color: var(--bili-input-fg) !important;
            border: 1px solid var(--bili-input-border) !important;
            border-radius: 4px;
            padding: 6px 8px;
            font-size: 13px;
            width: 100%;
            box-sizing: border-box;
        }
        #bili-room-id, #bili-title, #server-addr, #stream-code {
            background: var(--bili-input-bg) !important;
            color: var(--bili-input-fg) !important;
            border: 1px solid var(--bili-input-border) !important;
            border-radius: 4px;
            padding: 8px;
            font-size: 14px;
        }
        #bili-area-group, #bili-area {
            background: var(--bili-input-bg) !important;
            color: var(--bili-input-fg) !important;
            border: 1px solid var(--bili-input-border) !important;
            border-radius: 4px;
            padding: 8px;
            font-size: 14px;
        }
        .bili-important-tip {
            background-color: var(--bili-tip-bg) !important;
            color: var(--bili-tip-fg) !important;
            border-left: 4px solid var(--bili-tip-border) !important;
            border-radius: 6px;
            margin-top: 8px;
            padding: 8px;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .bili-tip-yellow {
            background: var(--bili-tip-yellow-bg);
            border-left: 4px solid var(--bili-tip-yellow-border);
            color: var(--bili-tip-yellow-fg);
            border-radius: 6px;
            margin-top: 8px;
            padding: 8px;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .bili-tip-green {
            background: var(--bili-tip-green-bg);
            border-left: 4px solid var(--bili-tip-green-border);
            color: var(--bili-tip-green-fg);
            border-radius: 6px;
            margin-top: 8px;
            padding: 8px;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        #bili-qr-container {
            background-color: var(--bili-bg) !important;
            color: var(--bili-fg) !important;
            border: 1px solid var(--bili-border) !important;
        }
        #bili-qr-container h3 {
            color: var(--bili-title-color) !important;
        }
        #bili-qr-container p {
            color: var(--bili-label-color) !important;
        }
        .bili-btn-main {
            background: var(--bili-btn-main);
            color: var(--bili-btn-text);
            border: none;
            border-radius: 4px;
            padding: 10px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s, opacity 0.3s;
        }
        .bili-btn-main:hover:not(:disabled) {
            background: var(--bili-btn-main-hover);
        }
        .bili-btn-main:disabled {
            background: var(--bili-btn-main-disabled);
            opacity: 0.5;
            cursor: not-allowed;
        }
        .bili-btn-stop {
            background: var(--bili-btn-stop);
            color: var(--bili-btn-text);
            border: none;
            border-radius: 4px;
            padding: 10px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s, opacity 0.3s;
        }
        .bili-btn-stop:hover:not(:disabled) {
            background: var(--bili-btn-stop-hover);
        }
        .bili-btn-stop:disabled {
            background: var(--bili-btn-stop-disabled);
            opacity: 0.5;
            cursor: not-allowed;
        }
        .bili-title {
            color: var(--bili-title-color) !important;
            font-size: 18px;
            margin: 0;
        }
        .bili-title:hover {
          opacity: 0.8;
          text-decoration: underline !important;
      }
        .bili-label {
            color: var(--bili-label-color);
            font-size: 14px;
        }
        .bili-copy-btn {
            margin-left: 5px;
            background: var(--bili-btn-main);
            color: var(--bili-btn-text);
            border: none;
            border-radius: 4px;
            padding: 6px 8px;
            cursor: pointer;
            transition: background 0.3s;
            font-size: 12px;
            flex-shrink: 0;
        }
        .bili-copy-btn:disabled {
            background: var(--bili-btn-main-disabled);
            cursor: not-allowed;
        }
        .bili-copy-btn:hover:not(:disabled) {
            background: var(--bili-btn-main-hover);
        }
        .bili-message {
            color: var(--bili-fg);
            font-size: 15px;
            margin: 0;
        }
        .bili-message-error {
            color: red;
        }
        .bili-status-success {
            background: #d4edda !important;
            color: #155724 !important;
            border: 1px solid #c3e6cb !important;
        }
        .bili-status-error {
            background: #f8d7da !important;
            color: #721c24 !important;
            border: 1px solid #f5c6cb !important;
        }
        `;
    document.head.appendChild(style);
  }

  // 全局变量
  let roomId = null; // 当前房间ID
  let csrf = null; // CSRF令牌
  let startLiveButton = null; // "开始直播"按钮引用
  let stopLiveButton = null; // "结束直播"按钮引用
  let editTitleButton = null; // "修改标题"按钮引用
  let editAreaButton = null; // "修改分区"按钮引用
  let isLiveStarted = GM_getValue(STORAGE_KEYS.IS_LIVE_STARTED, false); // 直播状态
  let streamInfo = GM_getValue(STORAGE_KEYS.STREAM_INFO, null); // 推流信息缓存

  // 请求头
  const headers = {
    accept: "application/json, text/plain, */*",
    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
    origin: "https://link.bilibili.com",
    referer: "https://link.bilibili.com/p/center/index",
    "user-agent":
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
  };

  // 开始直播数据模板
  const startData = {
    room_id: "",
    platform: "pc_link", //感谢bilibili Z-Lake提供
    area_v2: "",
    backup_stream: "0",
    csrf_token: "",
    csrf: "",
  };

  // 停止直播数据模板
  const stopData = {
    room_id: "",
    platform: "pc_link", //感谢bilibili Z-Lake提供
    csrf_token: "",
    csrf: "",
  };

  // 修改直播标题数据模板
  const titleData = {
    room_id: "",
    platform: "pc_link", //感谢bilibili Z-Lake提供
    title: "",
    csrf_token: "",
    csrf: "",
  };

  // 修改直播分区数据模板
  const areaData = {
    room_id: "",
    platform: "pc_link", //感谢bilibili Z-Lake提供
    area_id: "",
    csrf_token: "",
    csrf: "",
  };

  // 人脸验证数据模板
  const faceAuthData = {
    room_id: "",
    face_auth_code: "60024",
    csrf_token: "",
    csrf: "",
    visit_id: "",
  };

  // 初始化入口
  function init() {
    try {
      insertGlobalStyle(); // 插入全局样式
      removeExistingComponents(); // 清理旧组件
      createUI(); // 创建UI（只创建一次主面板）
      restoreLiveState(); // 恢复直播状态
    } catch (error) {
      console.error("B站推流码获取工具初始化失败:", error);
    }
  }

  // 移除已存在的组件
  function removeExistingComponents() {
    const existingPanel = document.getElementById("bili-stream-code-panel");
    if (existingPanel) {
      // 清理事件监听器
      if (existingPanel._clickOutsideHandler) {
        document.removeEventListener(
          "click",
          existingPanel._clickOutsideHandler,
          true
        );
      }
      existingPanel.remove();
    }
    const existingButton = document.getElementById("bili-stream-float-button");
    if (existingButton) existingButton.remove();
    // 清空按钮引用，防止旧引用干扰
    startLiveButton = null;
    stopLiveButton = null;
    editTitleButton = null;
    editAreaButton = null;
  }

  // 创建UI（只创建一次主面板）
  function createUI() {
    // 若主面板已存在则不再重复创建
    if (!document.getElementById("bili-stream-code-panel")) {
      const panel = createPanel();
      panel.style.display = "none";
    }
    // 浮动按钮可重复创建（防止丢失）
    createFloatButton();
  }

  // 创建面板
  function createPanel() {
    const panel = document.createElement("div");
    panel.id = "bili-stream-code-panel";
    panel.style.cssText = `
          position: fixed;
          top: 70px;
          right: 10px;
          width: 240px;
          z-index: 10000;
          display: none;
      `;
    // 头部区域
    const header = createPanelHeader();
    panel.appendChild(header);
    // 表单区域
    const form = createPanelForm();
    panel.appendChild(form);
    // 结果区域
    const resultArea = document.createElement("div");
    resultArea.id = "bili-result";
    resultArea.style.cssText = `
          margin-top: 15px;
          padding: 10px;
          border: 1px solid #eee;
          border-radius: 4px;
          background-color: #f9f9f9;
          display: none;
      `;
    panel.appendChild(resultArea);
    document.body.appendChild(panel);

    // 新增：设置点击外部隐藏面板
    setupClickOutsideHandler(panel);

    return panel;
  }

  // 新增：设置点击外部隐藏面板的处理器
  function setupClickOutsideHandler(panel) {
    function handleClickOutside(event) {
      // 只在面板可见时处理
      if (panel.style.display === "none") return;

      // 检查点击目标
      const floatButton = document.getElementById("bili-stream-float-button");
      const isClickInPanel = panel.contains(event.target);
      const isClickOnFloatButton =
        floatButton && floatButton.contains(event.target);

      // 点击面板外且不是浮动按钮时隐藏面板
      if (!isClickInPanel && !isClickOnFloatButton) {
        panel.style.display = "none";
      }
    }

    // 使用捕获阶段监听，确保在其他事件处理器之前执行
    document.addEventListener("click", handleClickOutside, true);

    // 存储处理器引用，便于清理
    panel._clickOutsideHandler = handleClickOutside;
  }

  // 创建面板头部
  function createPanelHeader() {
    const header = document.createElement("div");
    header.style.cssText =
      "display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;";

    // 标题 - 改为可点击的链接
    const title = document.createElement("a");
    title.textContent = "推流码获取";
    title.className = "bili-title";
    title.href = "https://github.com/smathsp/UserScript";
    title.target = "_blank";
    title.style.cssText = "text-decoration: none; cursor: pointer;";
    title.title = "访问 GitHub 仓库";

    // 亮暗模式切换按钮
    const modeBtn = document.createElement("button");
    modeBtn.id = "bili-mode-toggle";
    modeBtn.style.cssText =
      "width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 8px;";
    // SVG 图标
    let isDarkMode = GM_getValue(STORAGE_KEYS.DARK_MODE, false);
    modeBtn.innerHTML = isDarkMode ? MOON_SVG : SUN_SVG;
    modeBtn.title = isDarkMode ? "切换为亮色模式" : "切换为暗色模式";
    modeBtn.onclick = function () {
      isDarkMode = !isDarkMode;
      GM_setValue(STORAGE_KEYS.DARK_MODE, isDarkMode);
      modeBtn.innerHTML = isDarkMode ? MOON_SVG : SUN_SVG;
      modeBtn.title = isDarkMode ? "切换为亮色模式" : "切换为暗色模式";
      applyColorMode(isDarkMode);
    };
    // 首次渲染时应用模式
    setTimeout(() => applyColorMode(isDarkMode), 0);

    // 关闭按钮
    const closeButton = document.createElement("button");
    closeButton.innerHTML = CLOSE_SVG;
    closeButton.style.cssText =
      "width: 24px; height: 24px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;";
    closeButton.onclick = () => {
      document.getElementById("bili-stream-code-panel").style.display = "none";
    };

    // 头部右侧按钮组
    const rightBtns = document.createElement("div");
    rightBtns.style.cssText = "display: flex; align-items: center; gap: 4px;";
    rightBtns.appendChild(modeBtn);
    rightBtns.appendChild(closeButton);

    header.appendChild(title);
    header.appendChild(rightBtns);
    return header;
  }

  // 亮暗模式应用函数
  function applyColorMode(isDark) {
    // 只切换 class，不再手动设置 style
    const root = document.documentElement;
    if (isDark) {
      root.classList.add("bili-dark-mode");
    } else {
      root.classList.remove("bili-dark-mode");
    }
  }

  // 创建面板表单
  function createPanelForm() {
    const form = document.createElement("div");
    form.style.cssText = "display: flex; flex-direction: column; gap: 10px;";

    // 房间ID输入
    form.appendChild(createRoomIdInput());

    // 分区选择
    const areaSelectionElement = createAreaSelection();
    form.appendChild(areaSelectionElement);

    if (areaSelectionElement.loadAndBindAreaListPromise) {
      areaSelectionElement.loadAndBindAreaListPromise
        .then(() => {
          autoFillRoomId();
        })
        .catch((error) => {
          console.error(
            "Error during area list loading, or in autoFillRoomId:",
            error
          );
          setTimeout(autoFillRoomId, 300);
        });
    } else {
      console.warn(
        "loadAndBindAreaListPromise not found, falling back for autoFillRoomId."
      );
      setTimeout(autoFillRoomId, 300);
    }

    // 标题输入
    form.appendChild(createTitleInput());

    // 按钮组
    form.appendChild(createButtonGroup());

    return form;
  }

  // 创建房间ID输入
  function createRoomIdInput() {
    const container = document.createElement("div");
    container.style.cssText =
      "display: flex; flex-direction: column; gap: 5px;";
    const label = document.createElement("label");
    label.textContent = "房间ID:";
    label.className = "bili-label";

    const input = document.createElement("input");
    input.type = "text";
    input.id = "bili-room-id";
    input.placeholder = "请输入你的房间ID";
    input.className = "bili-input";
    // 新增：输入时保存
    input.addEventListener("blur", function () {
      GM_setValue(STORAGE_KEYS.LAST_ROOM_ID, input.value.trim());
    });

    container.appendChild(label);
    container.appendChild(input);

    return container;
  }

  // 创建分区选择
  function createAreaSelection() {
    const container = document.createElement("div");
    container.id = "bili-area-selection-container";
    container.style.cssText =
      "display: flex; flex-direction: column; gap: 5px;";
    const label = document.createElement("label");
    label.textContent = "直播分区:";
    label.className = "bili-label";

    // 加载指示器
    const loading = document.createElement("div");
    loading.id = "bili-area-loading";
    loading.textContent = "正在加载分区列表...";
    loading.style.cssText =
      "padding: 8px; color: #666; font-size: 14px; text-align: center; cursor: pointer;";

    // 分区组选择器
    const groupSelect = document.createElement("select");
    groupSelect.id = "bili-area-group";
    groupSelect.className = "bili-select";
    groupSelect.style.cssText = "margin-bottom: 8px; display: none;";

    // 子分区选择器
    const areaSelect = document.createElement("select");
    areaSelect.id = "bili-area";
    areaSelect.className = "bili-select";
    areaSelect.style.cssText = "display: none;";

    // 统一事件绑定
    groupSelect.addEventListener("change", function () {
      const areaList = getCachedAreaList() || [];
      const selectedIndex = this.options[this.selectedIndex].dataset.index;
      GM_setValue(STORAGE_KEYS.LAST_GROUP_ID, groupSelect.value);
      updateAreaSelectors(
        areaList,
        Number(selectedIndex),
        groupSelect,
        areaSelect
      );
    });
    areaSelect.addEventListener("change", function () {
      GM_setValue(STORAGE_KEYS.LAST_AREA_ID, areaSelect.value);
      GM_setValue(STORAGE_KEYS.LAST_GROUP_ID, groupSelect.value);
    });
    loading.onclick = function () {
      if (
        loading.style.color === "rgb(255, 75, 75)" ||
        loading.style.color === "#ff4b4b"
      ) {
        loadAndBindAreaList();
      }
    };

    container.appendChild(label);
    container.appendChild(loading);
    container.appendChild(groupSelect);
    container.appendChild(areaSelect);

    // 合并后的分区刷新函数
    function updateAreaSelectors(
      areaList,
      groupIdx = 0,
      groupSel = groupSelect,
      areaSel = areaSelect
    ) {
      groupSel.innerHTML = "";
      areaSel.innerHTML = "";
      areaList.forEach((group, idx) => {
        const option = document.createElement("option");
        option.value = group.id;
        option.textContent = group.name;
        option.dataset.index = idx;
        groupSel.appendChild(option);
      });
      // 恢复上次大类
      const lastGroupId = GM_getValue(STORAGE_KEYS.LAST_GROUP_ID);
      if (lastGroupId) {
        for (let i = 0; i < groupSel.options.length; i++) {
          if (groupSel.options[i].value == lastGroupId) {
            groupSel.selectedIndex = i;
            groupIdx = i;
            break;
          }
        }
      }
      if (areaList[groupIdx] && areaList[groupIdx].list) {
        areaList[groupIdx].list.forEach((area) => {
          const option = document.createElement("option");
          option.value = area.id;
          option.textContent = area.name;
          areaSel.appendChild(option);
        });
      }
      // 恢复上次分区id
      const lastAreaId = GM_getValue(STORAGE_KEYS.LAST_AREA_ID);
      if (lastAreaId && areaSel.options.length > 0) {
        for (let i = 0; i < areaSel.options.length; i++) {
          if (areaSel.options[i].value == lastAreaId) {
            areaSel.selectedIndex = i;
            break;
          }
        }
      }
      // 显示选择器
      loading.style.display = "none";
      groupSel.style.display = "block";
      areaSel.style.display = "block";
    }

    // 加载分区数据
    function loadAndBindAreaList() {
      return new Promise(async (resolve, reject) => {
        // 返回 Promise
        loading.style.display = "block";
        groupSelect.style.display = "none";
        areaSelect.style.display = "none";
        loading.textContent = "正在加载分区列表...";
        loading.style.color = "#666";
        const cachedList = getCachedAreaList();
        if (cachedList) {
          updateAreaSelectors(cachedList, 0, groupSelect, areaSelect);
          resolve(); // 解析 Promise
          return;
        }
        try {
          const response = await gmRequest({
            method: "GET",
            url: API_URL_AREA_LIST,
            headers: headers,
          });
          const result = JSON.parse(response.responseText);
          if (result.code === 0) {
            cacheAreaList(result.data);
            updateAreaSelectors(result.data, 0, groupSelect, areaSelect);
            resolve(); // 解析 Promise
          } else {
            console.error("Area list API error:", result);
            showAreaLoadError();
            reject(new Error("Failed to load area list")); // 拒绝 Promise
          }
        } catch (errorResponse) {
          console.error("Area list request error:", errorResponse);
          showAreaLoadError();
          reject(errorResponse); // 拒绝 Promise
        }
      });
    }

    // 将 Promise 附加到容器元素，以便在 createUI 中访问
    container.loadAndBindAreaListPromise = loadAndBindAreaList();
    return container;
  }

  // 创建标题输入
  function createTitleInput() {
    const container = document.createElement("div");
    container.style.cssText =
      "display: flex; flex-direction: column; gap: 5px;";

    const label = document.createElement("label");
    label.textContent = "直播标题:";
    label.className = "bili-label";

    const input = document.createElement("input");
    input.type = "text";
    input.id = "bili-title";
    input.placeholder = "请输入直播标题";
    input.className = "bili-input";
    // 新增：输入时保存
    input.addEventListener("blur", function () {
      GM_setValue(STORAGE_KEYS.LAST_TITLE, input.value.trim());
    });

    container.appendChild(label);
    container.appendChild(input);

    return container;
  }

  // 创建按钮组
  function createButtonGroup() {
    const container = document.createElement("div");
    container.style.cssText = "display: flex; flex-direction: column; gap: 8px; margin-top: 10px;";

    // 修改按钮组（直播中显示）
    const editButtonsContainer = document.createElement("div");
    editButtonsContainer.id = "bili-edit-buttons";
    editButtonsContainer.style.cssText = "display: none; gap: 8px;";

    // 修改标题按钮
    editTitleButton = document.createElement("button");
    editTitleButton.textContent = "修改标题";
    editTitleButton.className = "bili-btn-main";
    editTitleButton.style.cssText = "flex: 1; font-size: 13px; padding: 8px;";
    editTitleButton.onclick = editLiveTitle;

    // 修改分区按钮
    editAreaButton = document.createElement("button");
    editAreaButton.textContent = "修改分区";
    editAreaButton.className = "bili-btn-main";
    editAreaButton.style.cssText = "flex: 1; font-size: 13px; padding: 8px;";
    editAreaButton.onclick = editLiveArea;

    editButtonsContainer.appendChild(editTitleButton);
    editButtonsContainer.appendChild(editAreaButton);

    // 主按钮组
    const mainButtonsContainer = document.createElement("div");
    mainButtonsContainer.style.cssText = "display: flex; gap: 10px;";

    // 开始直播按钮
    startLiveButton = document.createElement("button");
    startLiveButton.textContent = "获取推流码并开始直播";
    startLiveButton.className = "bili-btn-main";
    startLiveButton.style.flex = "1";
    startLiveButton.onclick = startLive;

    // 结束直播按钮
    stopLiveButton = document.createElement("button");
    stopLiveButton.textContent = "结束直播";
    stopLiveButton.className = "bili-btn-stop";
    stopLiveButton.style.flex = "1";
    stopLiveButton.disabled = true;
    stopLiveButton.onclick = stopLive;

    mainButtonsContainer.appendChild(startLiveButton);
    mainButtonsContainer.appendChild(stopLiveButton);

    container.appendChild(editButtonsContainer);
    container.appendChild(mainButtonsContainer);

    return container;
  }

  // 创建浮动按钮
  function createFloatButton() {
    const button = document.createElement("div");
    button.id = "bili-stream-float-button";
    button.innerHTML =
      '<svg viewBox="0 0 1024 1024" width="24" height="24"><path d="M718.3 183.7H305.7c-122 0-221 99-221 221v214.6c0 122 99 221 221 221h412.6c122 0 221-99 221-221V404.7c0-122-99-221-221-221z m159.1 435.6c0 87.6-71.5 159.1-159.1 159.1H305.7c-87.6 0-159.1-71.5-159.1-159.1V404.7c0-87.6 71.5-159.1 159.1-159.1h412.6c87.6 0 159.1 71.5 159.1 159.1v214.6z" fill="#FFFFFF"></path><path d="M415.5 532.2v-131c0-7.1 3.8-13.6 10-17.1 6.2-3.5 13.7-3.5 19.9 0l131 75.1c6.2 3.5 10 10.1 10 17.1 0 7.1-3.8 13.6-10 17.1l-131 65.5c-6.2 3.5-13.7 3.5-19.9 0-6.2-3.5-10-10.1-10-17.1v-9.6z" fill="#FFFFFF"></path></svg>';
    button.style.cssText = `
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: #fb7299;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 10001;
            transition: transform 0.3s;
        `;
    button.onmouseover = function () {
      this.style.transform = "scale(1.1)";
    };
    button.onmouseout = function () {
      this.style.transform = "scale(1)";
    };
    button.onclick = togglePanel;

    document.body.appendChild(button);
    return button;
  }

  // 检查实际直播状态
  async function checkActualLiveStatus() {
    if (!roomId || !csrf) return;

    try {
      const response = await gmRequest({
        method: "POST",
        url: "https://api.live.bilibili.com/room/v1/Room/get_info",
        headers: headers,
        data: new URLSearchParams({ room_id: roomId }).toString(),
      });

      const result = JSON.parse(response.responseText);
      if (result.code === 0 && result.data) {
        const actualLiveStatus = result.data.live_status; // 0=未开播，1=直播中，2=轮播中

        // 检查本地状态与实际状态是否一致
        if (isLiveStarted && actualLiveStatus !== 1) {
          // 本地认为在直播，但实际未直播 - 状态不一致
          console.log("检测到直播状态不一致：本地显示直播中，但服务器显示未直播");

          // 更新本地状态
          isLiveStarted = false;
          streamInfo = null;
          GM_setValue(STORAGE_KEYS.IS_LIVE_STARTED, false);
          GM_setValue(STORAGE_KEYS.STREAM_INFO, null);

          // 更新UI
          updateButtonsForLive(false);

          // 清除结果区域或显示提示
          const resultArea = document.getElementById("bili-result");
          if (resultArea) {
            resultArea.innerHTML = `<div class="bili-tip-yellow"><span style="font-weight:bold;">提示：</span>检测到该房间直播已被结束，已自动更新状态</div>`;
            resultArea.style.display = "block";
          }

          // 显示通知
          GM_notification({
            text: "检测到直播已结束，状态已同步",
            title: "B站推流码获取工具",
            timeout: 5000,
          });
        } else if (!isLiveStarted && actualLiveStatus === 1) {
          // 本地认为未直播，但实际在直播 - 可能是其他地方开启的直播
          console.log("检测到可能存在其他地方开启的直播");

          const resultArea = document.getElementById("bili-result");
          if (resultArea) {
            resultArea.innerHTML = `<div class="bili-tip-yellow"><span style="font-weight:bold;">提示：</span>检测到该房间正在直播中，可能是通过其他方式开启的</div>`;
            resultArea.style.display = "block";
          }
        }
      }
    } catch (error) {
      console.error("检查直播状态失败:", error);
      // 静默失败，不影响正常使用
    }
  }

  // 显示/隐藏面板
  async function togglePanel() {
    const panel = document.getElementById("bili-stream-code-panel");
    if (!panel) return; // 理论上不会发生

    const isShowing = panel.style.display === "none" || !panel.style.display;
    panel.style.display = isShowing ? "block" : "none";

    // 如果是显示面板，检查直播状态
    if (isShowing) {
      // 延迟一点检查，确保面板已显示
      setTimeout(() => {
        checkActualLiveStatus();
      }, 100);
    }
  }

  // 检查浮动按钮
  function checkFloatButton() {
    if (!document.getElementById("bili-stream-float-button")) {
      createFloatButton();
    }
  }

  // 显示分区加载错误信息
  function showAreaLoadError() {
    const loading = document.getElementById("bili-area-loading");
    if (loading) {
      loading.textContent = "无法加载分区列表，请稍后刷新重试";
      loading.style.color = "#ff4b4b";
    }

    // 显示通知
    GM_notification({
      text: "无法加载直播分区列表，请检查网络连接或登录状态",
      title: "B站推流码获取工具",
      timeout: 5000,
    });
  }

  // 更新分区选择器
  function updateAreaSelectors(areaList) {
    const loading = document.getElementById("bili-area-loading");
    const groupSelect = document.getElementById("bili-area-group");
    const areaSelect = document.getElementById("bili-area");
    // 防止 loading 取不到时报错
    if (!loading || !groupSelect || !areaSelect) return;

    // 隐藏加载提示
    loading.style.display = "none";

    // 显示选择器
    groupSelect.style.display = "block";
    areaSelect.style.display = "block";

    // 清空选择器
    groupSelect.innerHTML = "";
    areaSelect.innerHTML = "";

    // 添加分区大类
    areaList.forEach((group, index) => {
      const option = document.createElement("option");
      option.value = group.id;
      option.textContent = group.name;
      option.dataset.index = index;
      groupSelect.appendChild(option);
    });

    // 默认显示第一个分区大类的子分区
    if (areaList.length > 0 && areaList[0].list) {
      areaList[0].list.forEach((area) => {
        const option = document.createElement("option");
        option.value = area.id;
        option.textContent = area.name;
        areaSelect.appendChild(option);
      });
    }

    // 分区大类变更事件
    groupSelect.addEventListener("change", function () {
      const selectedIndex = this.options[this.selectedIndex].dataset.index;
      const selectedGroup = areaList[selectedIndex];

      // 清空子分区
      areaSelect.innerHTML = "";

      if (selectedGroup && selectedGroup.list) {
        selectedGroup.list.forEach((area) => {
          const option = document.createElement("option");
          option.value = area.id;
          option.textContent = area.name;
          areaSelect.appendChild(option);
        });
      }
    });
  }

  // 获取缓存的分区列表
  function getCachedAreaList() {
    const timeStamp = GM_getValue(STORAGE_KEYS.AREA_LIST_TIME);
    if (!timeStamp) return null;

    const now = new Date().getTime();
    const oneDay = 24 * 60 * 60 * 1000;

    // 超过一天则认为过期
    if (now - timeStamp > oneDay) return null;

    const listStr = GM_getValue(STORAGE_KEYS.AREA_LIST);
    if (!listStr) return null;

    try {
      return JSON.parse(listStr);
    } catch (e) {
      return null;
    }
  }

  // 缓存分区列表
  function cacheAreaList(areaList) {
    GM_setValue(STORAGE_KEYS.AREA_LIST, JSON.stringify(areaList));
    GM_setValue(STORAGE_KEYS.AREA_LIST_TIME, new Date().getTime());
  }

  // 拆分 autoFillRoomId 内部逻辑
  function getRoomIdFromHistory() {
    return GM_getValue(STORAGE_KEYS.LAST_ROOM_ID);
  }
  function getCsrfToken() {
    const csrfCookie = document.cookie
      .split("; ")
      .find((row) => row.startsWith("bili_jct="));
    return csrfCookie ? csrfCookie.split("=")[1] : null;
  }
  function autoFillRoomId() {
    const lastRoomId = GM_getValue(STORAGE_KEYS.LAST_ROOM_ID);
    const lastAreaId = GM_getValue(STORAGE_KEYS.LAST_AREA_ID);
    const lastTitle = GM_getValue(STORAGE_KEYS.LAST_TITLE);
    if (streamInfo && streamInfo.roomId) {
      document.getElementById("bili-room-id").value = streamInfo.roomId;
      roomId = streamInfo.roomId;
      if (document.getElementById("bili-title") && streamInfo.title) {
        document.getElementById("bili-title").value = streamInfo.title;
      }
    } else {
      // 仅使用历史记录获取房间ID，取消自动获取功能
      const foundRoomId = getRoomIdFromHistory();
      if (foundRoomId) {
        document.getElementById("bili-room-id").value = foundRoomId;
        roomId = foundRoomId;
      } else if (lastRoomId) {
        document.getElementById("bili-room-id").value = lastRoomId;
        roomId = lastRoomId;
      }
    }
    if (document.getElementById("bili-title") && lastTitle) {
      document.getElementById("bili-title").value = lastTitle;
    }
    // 移除 setTimeout，因为现在依赖 Promise
    // setTimeout(() => {
    if (lastAreaId) {
      const areaSelect = document.getElementById("bili-area");
      if (areaSelect) {
        for (let i = 0; i < areaSelect.options.length; i++) {
          if (areaSelect.options[i].value == lastAreaId) {
            areaSelect.selectedIndex = i;
            break;
          }
        }
      }
    }
    // }, 500);
    csrf = getCsrfToken();
  }

  // 恢复直播状态
  function restoreLiveState() {
    if (isLiveStarted && streamInfo) {
      setTimeout(() => {
        const panel = document.getElementById("bili-stream-code-panel");
        if (panel) {
          // 更新按钮状态
          updateButtonsForLive(true);
          // 恢复推流信息
          restoreStreamInfo();
        }
      }, 500);
    }
  }

  // 推流信息区输入框和按钮也用 class
  function restoreStreamInfo() {
    if (!streamInfo) return;
    const resultArea = document.getElementById("bili-result");
    if (!resultArea) return;
    const rtmpAddr = streamInfo.rtmpAddr;
    const rtmpCode = streamInfo.rtmpCode;

    const resultHTML = `
            <div style="display: flex; flex-direction: column; gap: 8px;">
                <h3 class="bili-title" style="font-size: 16px;">推流信息 (进行中)</h3>
                <div>
                    <p style="margin: 0; font-weight: bold;">服务器地址:</p>
                    <div style="display: flex; align-items: center; margin-bottom: 8px;">
                        <input id="server-addr" readonly value="${rtmpAddr}" title="${rtmpAddr}" class="bili-input" />
                        <button id="copy-addr" class="bili-copy-btn">复制</button>
                    </div>
                    <p style="margin: 0; font-weight: bold;">推流码:</p>
                    <div style="display: flex; align-items: center;">
                        <input id="stream-code" readonly value="${rtmpCode}" title="${rtmpCode}" class="bili-input" />
                        <button id="copy-code" class="bili-copy-btn">复制</button>
                    </div>
                </div>
                <div class="bili-important-tip">
                    <p style="margin: 0; font-weight: bold;">重要提示:</p>
                    <p style="margin: 3px 0 0; font-size: 13px;">1. 长时间无信号会自动关闭直播</p>
                    <p style="margin: 3px 0 0; font-size: 13px;">2. 推流码如果变动会有提示</p>
                </div>
            </div>
        `;

    resultArea.innerHTML = resultHTML;
    resultArea.style.display = "block";
    // 添加复制按钮事件
    const copyAddrBtn = document.getElementById("copy-addr");
    if (copyAddrBtn) {
      copyAddrBtn.addEventListener("click", function () {
        copyToClipboardWithButton(rtmpAddr, copyAddrBtn);
      });
    }
    const copyCodeBtn = document.getElementById("copy-code");
    if (copyCodeBtn) {
      copyCodeBtn.addEventListener("click", function () {
        copyToClipboardWithButton(rtmpCode, copyCodeBtn);
      });
    }
    // 新增：推流信息区插入后，重新应用颜色模式
    const isDarkMode = GM_getValue("bili_dark_mode", false);
    applyColorMode(isDarkMode);
  }

  // 更新按钮状态（开始/结束直播）
  function updateButtonsForLive(isLive) {
    if (startLiveButton) {
      startLiveButton.disabled = isLive;
    }
    if (stopLiveButton) {
      stopLiveButton.disabled = !(roomId && String(roomId).trim() !== "");
    }
    
    // 控制修改按钮的显示
    const editButtonsContainer = document.getElementById("bili-edit-buttons");
    if (editButtonsContainer) {
      if (isLive) {
        editButtonsContainer.style.display = "flex";
      } else {
        editButtonsContainer.style.display = "none";
      }
    }
  }

  // 恢复直播状态
  function restoreLiveState() {
    if (isLiveStarted && streamInfo) {
      setTimeout(() => {
        const panel = document.getElementById("bili-stream-code-panel");
        if (panel) {
          // 更新按钮状态
          updateButtonsForLive(true);
          // 恢复推流信息
          restoreStreamInfo();
        }
      }, 500);
    }
  }

  // 推流信息区输入框和按钮也用 class
  function restoreStreamInfo() {
    if (!streamInfo) return;
    const resultArea = document.getElementById("bili-result");
    if (!resultArea) return;
    const rtmpAddr = streamInfo.rtmpAddr;
    const rtmpCode = streamInfo.rtmpCode;

    const resultHTML = `
            <div style="display: flex; flex-direction: column; gap: 8px;">
                <h3 class="bili-title" style="font-size: 16px;">推流信息 (进行中)</h3>
                <div>
                    <p style="margin: 0; font-weight: bold;">服务器地址:</p>
                    <div style="display: flex; align-items: center; margin-bottom: 8px;">
                        <input id="server-addr" readonly value="${rtmpAddr}" title="${rtmpAddr}" class="bili-input" />
                        <button id="copy-addr" class="bili-copy-btn">复制</button>
                    </div>
                    <p style="margin: 0; font-weight: bold;">推流码:</p>
                    <div style="display: flex; align-items: center;">
                        <input id="stream-code" readonly value="${rtmpCode}" title="${rtmpCode}" class="bili-input" />
                        <button id="copy-code" class="bili-copy-btn">复制</button>
                    </div>
                </div>
                <div class="bili-important-tip">
                    <p style="margin: 0; font-weight: bold;">重要提示:</p>
                    <p style="margin: 3px 0 0; font-size: 13px;">1. 长时间无信号会自动关闭直播</p>
                    <p style="margin: 3px 0 0; font-size: 13px;">2. 推流码如果变动会有提示</p>
                </div>
            </div>
        `;

    resultArea.innerHTML = resultHTML;
    resultArea.style.display = "block";
    // 添加复制按钮事件
    const copyAddrBtn = document.getElementById("copy-addr");
    if (copyAddrBtn) {
      copyAddrBtn.addEventListener("click", function () {
        copyToClipboardWithButton(rtmpAddr, copyAddrBtn);
      });
    }
    const copyCodeBtn = document.getElementById("copy-code");
    if (copyCodeBtn) {
      copyCodeBtn.addEventListener("click", function () {
        copyToClipboardWithButton(rtmpCode, copyCodeBtn);
      });
    }
    // 新增：推流信息区插入后，重新应用颜色模式
    const isDarkMode = GM_getValue("bili_dark_mode", false);
    applyColorMode(isDarkMode);
  }

  // 修改直播标题
  async function editLiveTitle() {
    if (!isLiveStarted || !roomId) {
      showMessage("请先开始直播", true);
      return;
    }

    // 直接使用UI输入框的值
    const newTitle = document.getElementById("bili-title").value.trim();
    if (!newTitle) {
      showMessage("请输入直播标题", true);
      return;
    }

    try {
      const success = await updateLiveTitle(roomId, newTitle);
      if (success) {
        // 更新本地存储的标题信息
        if (streamInfo) {
          streamInfo.title = newTitle;
          GM_setValue(STORAGE_KEYS.STREAM_INFO, streamInfo);
        }
        GM_setValue(STORAGE_KEYS.LAST_TITLE, newTitle);
        showMessage("直播标题修改成功");
      } else {
        showMessage("修改直播标题失败，请检查权限或网络连接", true);
      }
    } catch (error) {
      console.error("修改标题错误:", error);
      showMessage("修改直播标题时发生错误", true);
    }
  }

  // 修改直播分区
  async function editLiveArea() {
    if (!isLiveStarted || !roomId) {
      showMessage("请先开始直播", true);
      return;
    }

    const areaSelect = document.getElementById("bili-area");
    const newAreaId = areaSelect.value;

    try {
      // 直接更新分区，不重新开播
      const success = await updateLiveArea(roomId, newAreaId);
      
      if (success) {
        // 更新本地存储的分区信息
        if (streamInfo) {
          streamInfo.areaId = newAreaId;
          GM_setValue(STORAGE_KEYS.STREAM_INFO, streamInfo);
        }
        GM_setValue(STORAGE_KEYS.LAST_AREA_ID, newAreaId);
        showMessage("分区修改成功，直播继续进行中");
      } else {
        showMessage("修改分区失败，请检查权限或网络连接", true);
      }
    } catch (error) {
      console.error("修改分区错误:", error);
      showMessage("修改分区时发生错误", true);
    }
  }

  // 开始直播
  async function startLive() {
    // 获取输入值
    roomId = document.getElementById("bili-room-id").value.trim();
    const areaId = document.getElementById("bili-area").value;
    const liveTitle = document.getElementById("bili-title").value.trim();

    // 验证输入
    if (!roomId) {
      showMessage("请输入房间ID", true);
      return;
    }

    if (!liveTitle) {
      showMessage("请输入直播标题", true);
      return;
    }

    if (!csrf) {
      showMessage("无法获取CSRF令牌，请确保已登录B站", true);
      return;
    }

    try {
      const titleUpdated = await updateLiveTitle(roomId, liveTitle);
      if (!titleUpdated) {
        showMessage(
          "设置直播标题失败，请确认是否已登录或有权限修改此直播间",
          true
        );
        return;
      }

      // 设置请求参数
      startData.room_id = roomId;
      startData.csrf_token = csrf;
      startData.csrf = csrf;
      startData.area_v2 = areaId;

      // 获取推流码
      showMessage("正在获取推流码...");

      const startLiveResponse = await gmRequest({
        method: "POST",
        url: API_URL_START_LIVE,
        headers: headers,
        data: new URLSearchParams(startData).toString(),
      });

      const startLiveResult = JSON.parse(startLiveResponse.responseText);

      if (startLiveResult.code === 0) {
        // 成功获取
        handleStartLiveSuccess(startLiveResult.data, liveTitle, areaId);
      } else if (startLiveResult.code === 60024 || (startLiveResult.data && startLiveResult.data.qr)) {
        // 需要人脸验证
        console.log("需要人脸验证:", startLiveResult);
        showMessage("需要人脸验证，正在显示二维码...");
        await handleFaceAuth(startLiveResult.data.qr, roomId, liveTitle, areaId);
      } else {
        console.error("Start live API error:", startLiveResult);
        showMessage(
          `获取推流码失败: ${startLiveResult.message || "未知错误"} (${startLiveResult.code})`,
          true
        );
      }
    } catch (errorResponse) {
      console.error("API request failed in startLive:", errorResponse);
      let errorMessage = "网络请求失败或解析错误";
      if (errorResponse && errorResponse.responseText) {
        try {
          const parsedError = JSON.parse(errorResponse.responseText);
          errorMessage = `API错误: ${parsedError.message || "未知API错误"}`;
        } catch (e) {}
      } else if (errorResponse instanceof Error) {
        errorMessage = `请求错误: ${errorResponse.message}`;
      }
      showMessage(errorMessage, true);
    }
  }

  // 处理人脸验证
  async function handleFaceAuth(qrUrl, roomId, title, areaId) {
    if (!qrUrl) {
      showMessage("未获取到人脸验证二维码", true);
      return;
    }

    try {
      // 显示二维码
      showQRCode(qrUrl);
      
      // 设置人脸验证数据
      faceAuthData.room_id = roomId;
      faceAuthData.csrf_token = csrf;
      faceAuthData.csrf = csrf;

      // 轮询验证状态
      let isVerified = false;
      let attempts = 0;
      const maxAttempts = 60; // 最多等待60秒

      showMessage("请使用B站客户端扫描二维码进行人脸验证...");

      while (!isVerified && attempts < maxAttempts) {
        try {
          const response = await gmRequest({
            method: "POST",
            url: API_URL_FACE_AUTH,
            headers: headers,
            data: new URLSearchParams(faceAuthData).toString(),
          });

          const result = JSON.parse(response.responseText);
          
          if (result.code === 0 && result.data && result.data.is_identified) {
            isVerified = true;
            hideQRCode();
            showMessage("人脸验证成功，正在重新获取推流码...");
            
            // 验证成功后重新开始直播
            await retryStartLive(roomId, title, areaId);
            return;
          }
          
          // 等待1秒后重试
          await new Promise(resolve => setTimeout(resolve, 1000));
          attempts++;
          
        } catch (error) {
          console.error("人脸验证状态检查失败:", error);
          attempts++;
          await new Promise(resolve => setTimeout(resolve, 1000));
        }
      }

      // 超时处理
      hideQRCode();
      showMessage("人脸验证超时，请重试", true);
      
    } catch (error) {
      console.error("人脸验证处理失败:", error);
      hideQRCode();
      showMessage("人脸验证处理失败，请重试", true);
    }
  }

  // 显示二维码
  function showQRCode(qrUrl) {
    // 移除已存在的二维码容器和遮罩
    const existingContainer = document.getElementById('bili-qr-container');
    const existingOverlay = document.getElementById('bili-qr-overlay');
    if (existingContainer) {
      existingContainer.remove();
    }
    if (existingOverlay) {
      existingOverlay.remove();
    }

    // 创建遮罩层
    const overlay = document.createElement('div');
    overlay.id = 'bili-qr-overlay';
    overlay.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
    `;

    // 创建二维码容器
    const qrContainer = document.createElement('div');
    qrContainer.id = 'bili-qr-container';
    qrContainer.style.cssText = `
      position: relative;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid #ddd;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      text-align: center;
      min-width: 300px;
      max-width: 90vw;
      max-height: 90vh;
    `;

    const title = document.createElement('h3');
    title.textContent = '人脸验证';
    title.style.cssText = `
      margin: 0 0 15px 0;
      color: #fb7299;
      font-size: 18px;
      font-weight: bold;
    `;
    
    const instruction = document.createElement('p');
    instruction.textContent = '请使用B站客户端扫描二维码进行人脸验证';
    instruction.style.cssText = `
      margin: 0 0 20px 0;
      color: #666;
      font-size: 14px;
    `;
    
    const qrDiv = document.createElement('div');
    qrDiv.id = 'bili-qr-code';
    qrDiv.style.cssText = `
      margin: 20px auto;
      display: flex;
      justify-content: center;
      align-items: center;
    `;

    const closeBtn = document.createElement('button');
    closeBtn.textContent = '取消';
    closeBtn.style.cssText = `
      background: #ff4b4b;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px 20px;
      cursor: pointer;
      margin-top: 20px;
      font-size: 14px;
    `;
    closeBtn.onmouseover = () => closeBtn.style.background = '#d9363e';
    closeBtn.onmouseout = () => closeBtn.style.background = '#ff4b4b';
    closeBtn.onclick = () => {
      hideQRCode();
      showMessage("已取消人脸验证", true);
    };

    qrContainer.appendChild(title);
    qrContainer.appendChild(instruction);
    qrContainer.appendChild(qrDiv);
    qrContainer.appendChild(closeBtn);
    
    // 将二维码容器添加到遮罩层中
    overlay.appendChild(qrContainer);
    document.body.appendChild(overlay);
    
    // 点击遮罩层外部关闭二维码
    overlay.addEventListener('click', function(e) {
      if (e.target === overlay) {
        hideQRCode();
        showMessage("已取消人脸验证", true);
      }
    });

    // 生成二维码
    try {
      if (typeof QRCode !== 'undefined') {
        console.log('QRCode库已加载');
        console.log('qrUrl:', qrUrl);
        console.log('QRCode.CorrectLevel:', QRCode.CorrectLevel);
        
        // 创建二维码 - 使用更兼容的方式
        const qrcode = new QRCode(qrDiv, qrUrl);
        
        // 等待DOM更新后检查是否成功生成
        setTimeout(() => {
          if (qrDiv.innerHTML.trim() === '') {
            console.log('⚠️ 二维码DOM为空，尝试备用方法');
            // 备用方法：手动创建二维码
            try {
              qrDiv.innerHTML = '';
              const qrcode2 = new QRCode(qrDiv, {
                text: qrUrl,
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff"
              });
              
              // 再次检查
              setTimeout(() => {
                if (qrDiv.innerHTML.trim() === '') {
                  console.log('⚠️ 备用方法也失败，显示链接');
                  qrDiv.innerHTML = `
                    <p style="color: #666; font-size: 14px; line-height: 1.5; text-align: center;">
                      二维码生成失败，请手动访问：<br>
                      <a href="${qrUrl}" target="_blank" style="color: #fb7299; text-decoration: none; word-break: break-all;">${qrUrl}</a>
                    </p>
                  `;
                } else {
                  console.log('✅ 备用方法生成二维码成功');
                }
              }, 500);
            } catch (backupError) {
              console.error('备用二维码生成失败:', backupError);
              qrDiv.innerHTML = `
                <p style="color: #666; font-size: 14px; line-height: 1.5; text-align: center;">
                  二维码生成失败，请手动访问：<br>
                  <a href="${qrUrl}" target="_blank" style="color: #fb7299; text-decoration: none; word-break: break-all;">${qrUrl}</a>
                </p>
              `;
            }
          } else {
            console.log('✅ 二维码生成成功');
          }
        }, 500);
        
      } else {
        console.log('⚠️ QRCode库未加载，显示链接');
        // 如果QRCode库未加载，显示链接
        qrDiv.innerHTML = `
          <p style="color: #666; font-size: 14px; line-height: 1.5; text-align: center;">
            二维码库未加载，请手动访问：<br>
            <a href="${qrUrl}" target="_blank" style="color: #fb7299; text-decoration: none; word-break: break-all;">${qrUrl}</a>
          </p>
        `;
      }
    } catch (error) {
      console.error('生成二维码失败:', error);
      qrDiv.innerHTML = `
        <p style="color: #ff4b4b; font-size: 14px; line-height: 1.5; text-align: center;">
          生成二维码失败，请手动访问：<br>
          <a href="${qrUrl}" target="_blank" style="color: #fb7299; text-decoration: none; word-break: break-all;">${qrUrl}</a>
        </p>
      `;
    }
  }

  // 隐藏二维码
  function hideQRCode() {
    const qrContainer = document.getElementById('bili-qr-container');
    const qrOverlay = document.getElementById('bili-qr-overlay');
    if (qrContainer) {
      qrContainer.remove();
    }
    if (qrOverlay) {
      qrOverlay.remove();
    }
  }

  // 重试开始直播
  async function retryStartLive(roomId, title, areaId) {
    try {
      // 重新设置开始直播数据
      startData.room_id = roomId;
      startData.csrf_token = csrf;
      startData.csrf = csrf;
      startData.area_v2 = areaId;

      const response = await gmRequest({
        method: "POST",
        url: API_URL_START_LIVE,
        headers: headers,
        data: new URLSearchParams(startData).toString(),
      });

      const result = JSON.parse(response.responseText);

      if (result.code === 0) {
        handleStartLiveSuccess(result.data, title, areaId);
      } else {
        console.error("重试开始直播失败:", result);
        showMessage(`重试开始直播失败: ${result.message || "未知错误"} (${result.code})`, true);
      }
    } catch (error) {
      console.error("重试开始直播请求失败:", error);
      showMessage("重试开始直播请求失败", true);
    }
  }

  // 处理开始直播成功
  function handleStartLiveSuccess(data, title, areaId) {
    const rtmpAddr = data.rtmp.addr;
    const rtmpCode = data.rtmp.code;

    // 新增：保存本次推流信息到本地用于下次对比
    GM_setValue("bili_last_rtmp_addr", rtmpAddr);
    GM_setValue("bili_last_rtmp_code", rtmpCode);

    // 检查上次推流信息是否有变动
    let changeTip = "";
    const prevAddr = GM_getValue("bili_prev_rtmp_addr");
    const prevCode = GM_getValue("bili_prev_rtmp_code");
    if (prevAddr && prevCode) {
      if (prevAddr !== rtmpAddr || prevCode !== rtmpCode) {
        changeTip = `<div class=\"bili-tip-yellow\"><span style=\"font-weight:bold;\">注意：</span>本次推流信息与上次不同，请确认已更新到OBS等推流软件！</div>`;
      } else {
        changeTip = `<div class=\"bili-tip-green\"><span style=\"font-weight:bold;\">推流信息没有变动 🎉🎉</span></div>`;
      }
    }
    // 更新本地上次推流信息为本次
    GM_setValue("bili_prev_rtmp_addr", rtmpAddr);
    GM_setValue("bili_prev_rtmp_code", rtmpCode);

    // 显示推流信息
    const resultHTML = `
            <div style="display: flex; flex-direction: column; gap: 8px;">
                <h3 class="bili-title" style="font-size: 16px;">推流信息</h3>
                <div>
                    <p style="margin: 0; font-weight: bold;">服务器地址:</p>
                    <div style="display: flex; align-items: center; margin-bottom: 8px;">
                        <input id="server-addr" readonly value="${rtmpAddr}" title="${rtmpAddr}" class="bili-input" />
                        <button id="copy-addr" class="bili-copy-btn">复制</button>
                    </div>
                    <p style="margin: 0; font-weight: bold;">推流码:</p>
                    <div style="display: flex; align-items: center;">
                        <input id="stream-code" readonly value="${rtmpCode}" title="${rtmpCode}" class="bili-input" />
                        <button id="copy-code" class="bili-copy-btn">复制</button>
                    </div>
                </div>
                ${changeTip}
                <div class="bili-important-tip">
                    <p style="margin: 0; font-weight: bold;">重要提示:</p>
                    <p style="margin: 3px 0 0; font-size: 13px;">1. 长时间无信号会自动关闭直播</p>
                    <p style="margin: 3px 0 0; font-size: 13px;">2. 推流码如果变动会有提示</p>
                </div>
            </div>
        `;

    const resultArea = document.getElementById("bili-result");
    resultArea.innerHTML = resultHTML;
    resultArea.style.display = "block";
    // 添加复制按钮事件
    const copyAddrBtn = document.getElementById("copy-addr");
    if (copyAddrBtn) {
      copyAddrBtn.addEventListener("click", function () {
        copyToClipboardWithButton(rtmpAddr, copyAddrBtn);
      });
    }
    const copyCodeBtn = document.getElementById("copy-code");
    if (copyCodeBtn) {
      copyCodeBtn.addEventListener("click", function () {
        copyToClipboardWithButton(rtmpCode, copyCodeBtn);
      });
    }
    // 新增：推流信息区插入后，重新应用颜色模式
    const isDarkMode = GM_getValue("bili_dark_mode", false);
    applyColorMode(isDarkMode);

    // 更新按钮状态
    updateButtonsForLive(true);

    // 保存直播状态
    isLiveStarted = true;
    streamInfo = {
      rtmpAddr,
      rtmpCode,
      roomId,
      areaId,
      title,
    };

    GM_setValue("isLiveStarted", true);
    GM_setValue("streamInfo", streamInfo);

    // 显示通知
    GM_notification({
      text: "已成功获取推流码并开始直播",
      title: "B站推流码获取工具",
      timeout: 5000,
    });
  }

  // 更新直播标题
  async function updateLiveTitle(roomId, title) {
    titleData.room_id = roomId;
    titleData.title = title;
    titleData.csrf_token = csrf;
    titleData.csrf = csrf;
    try {
      const response = await gmRequest({
        method: "POST",
        url: API_URL_UPDATE_ROOM,
        headers: headers,
        data: new URLSearchParams(titleData).toString(),
      });
      const result = JSON.parse(response.responseText);
      if (result.code !== 0) {
        console.error("Update title API error:", result);
      }
      return result.code === 0;
    } catch (errorResponse) {
      console.error("Update title request error:", errorResponse);
      return false;
    }
  }

  // 更新直播分区
  async function updateLiveArea(roomId, areaId) {
    areaData.room_id = roomId;
    areaData.area_id = areaId;
    areaData.csrf_token = csrf;
    areaData.csrf = csrf;
    try {
      const response = await gmRequest({
        method: "POST",
        url: API_URL_UPDATE_ROOM,
        headers: headers,
        data: new URLSearchParams(areaData).toString(),
      });
      const result = JSON.parse(response.responseText);
      if (result.code !== 0) {
        console.error("Update area API error:", result);
      }
      return result.code === 0;
    } catch (errorResponse) {
      console.error("Update area request error:", errorResponse);
      return false;
    }
  }

  // 停止直播
  async function stopLive() {
    if (!isLiveStarted) return;

    if (!confirm("确定要结束直播吗？")) return;

    // 设置请求参数
    stopData.room_id = roomId;
    stopData.csrf_token = csrf;
    stopData.csrf = csrf;

    try {
      const response = await gmRequest({
        method: "POST",
        url: API_URL_STOP_LIVE,
        headers: headers,
        data: new URLSearchParams(stopData).toString(),
      });
      const result = JSON.parse(response.responseText);

      if (result.code === 0) {
        // 成功结束直播
        showMessage("直播已成功结束");

        // 更新按钮状态
        updateButtonsForLive(false);

        // 清除直播状态
        isLiveStarted = false;
        streamInfo = null;

        GM_setValue("isLiveStarted", false);
        GM_setValue("streamInfo", null);

        // 隐藏推流信息区域，回到未开播状态
        const resultArea = document.getElementById("bili-result");
        if (resultArea) {
          setTimeout(() => {
            resultArea.style.display = "none";
          }, 2000); // 2秒后隐藏，让用户看到结束成功的消息
        }
      } else {
        console.error("Stop live API error:", result);
        showMessage(`结束直播失败: ${result.message || "未知错误"}`, true);
      }
    } catch (errorResponse) {
      console.error("Stop live request error:", errorResponse);
      let errorMessage = "网络请求失败或解析错误";
      if (errorResponse && errorResponse.responseText) {
        try {
          const parsedError = JSON.parse(errorResponse.responseText);
          errorMessage = `API错误: ${parsedError.message || "未知API错误"}`;
        } catch (e) {}
      } else if (errorResponse instanceof Error) {
        errorMessage = `请求错误: ${errorResponse.message}`;
      }
      showMessage(errorMessage, true);
    }
  }

  // 显示消息（优化版：不覆盖推流信息）
  function showMessage(message, isError = false) {
    const resultArea = document.getElementById("bili-result");
    if (resultArea && isLiveStarted && streamInfo) {
      // 如果已开播，在推流信息区域内添加状态提示
      showStatusInStreamInfo(message, isError);
    } else if (resultArea) {
      // 未开播时，正常显示消息
      resultArea.innerHTML = `<p class="bili-message${
        isError ? " bili-message-error" : ""
      }">${message}</p>`;
      resultArea.style.display = "block";
    }

    // 始终显示Toast通知
    GM_notification({
      text: message,
      title: isError ? "错误" : "B站推流码获取工具",
      timeout: 5000,
    });
  }

  // 在推流信息区域显示状态提示
  function showStatusInStreamInfo(message, isError = false) {
    const resultArea = document.getElementById("bili-result");
    if (!resultArea) return;

    // 查找或创建状态栏
    let statusBar = document.getElementById("bili-status-bar");
    if (!statusBar) {
      statusBar = document.createElement("div");
      statusBar.id = "bili-status-bar";
      statusBar.style.cssText = `
        margin-bottom: 10px;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 13px;
        text-align: center;
        transition: all 0.3s ease;
      `;
      // 将状态栏插入到推流信息的前面
      resultArea.insertBefore(statusBar, resultArea.firstChild);
    }

    // 设置状态栏样式和内容
    statusBar.className = isError ? "bili-status-error" : "bili-status-success";
    statusBar.textContent = message;
    statusBar.style.display = "block";

    // 3秒后自动隐藏状态栏
    clearTimeout(statusBar._hideTimer);
    statusBar._hideTimer = setTimeout(() => {
      if (statusBar) {
        statusBar.style.display = "none";
      }
    }, 3000);
  }

  // 复制到剪贴板
  function copyToClipboard(text) {
    GM_setClipboard(text);
    showMessage("已复制到剪贴板");
  }

  // 复制到剪贴板（按钮变✅，不弹窗）
  function copyToClipboardWithButton(text, btn) {
    GM_setClipboard(text);
    if (!btn) return;
    const oldText = btn.textContent;
    btn.textContent = "✅";
    btn.disabled = true;
    btn.classList.add("bili-copy-btn");
    setTimeout(() => {
      btn.textContent = oldText;
      btn.disabled = false;
      btn.classList.add("bili-copy-btn");
    }, 2000);
  }

  // 页面导航事件监听
  window.addEventListener("popstate", init);
  window.addEventListener("hashchange", init);

  // 监听页面可见性变化，页面可见时检查浮动按钮
  document.addEventListener("visibilitychange", function () {
    if (document.visibilityState === "visible") {
      checkFloatButton();
    }
  });

  // 使用MutationObserver监听DOM变化，动态检查浮动按钮
  const observer = new MutationObserver(function () {
    checkFloatButton();
  });
  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });

  // 初始加载
  setTimeout(init, 500);
})();