fix: 新增B站原始顶栏的登录按钮跳转 #436

Author: keleus

src/contentScripts/index.ts

@@ -10,7 +10,7 @@ import { setupApp } from '~/logic/common-setup'
 import { useTopBarStore } from '~/stores/topBarStore'
 import RESET_BEWLY_CSS from '~/styles/reset.css?raw'
 import { cleanupBilibiliScripts } from '~/utils/bilibiliScriptCleanup'
-import { captureOriginalBilibiliTopBar, ensureOriginalBilibiliTopBarAppended, resetBilibiliTopBarInlineStyles } from '~/utils/bilibiliTopBar'
+import { captureOriginalBilibiliTopBar, ensureOriginalBilibiliTopBarAppended, resetBilibiliTopBarInlineStyles, setupLoginButtonClickHandlers } from '~/utils/bilibiliTopBar'
 import { initFavoriteDialogEnhancement } from '~/utils/favoriteDialog'
 import { runWhenIdle } from '~/utils/lazyLoad'
 import { getLocalWallpaper, hasLocalWallpaper, isLocalWallpaperUrl } from '~/utils/localWallpaper'
@@ -433,6 +433,9 @@ async function onDOMLoaded() {
 
     ensureOriginalBilibiliTopBarAppended(document)
 
+    // Setup login button click handlers for the original Bilibili top bar
+    setupLoginButtonClickHandlers(document)
+
     // 如果要使用方案1（删除DOM），取消注释以下代码并注释掉上面的 CSS 方案：
     /*
     // 清理 B 站脚本资源，避免内存泄漏和性能问题
@@ -686,8 +689,11 @@ window.addEventListener('message', (event) => {
       return
 
     document.documentElement.classList.toggle('remove-top-bar', !useOriginalBilibiliTopBar)
-    if (useOriginalBilibiliTopBar)
+    if (useOriginalBilibiliTopBar) {
       resetBilibiliTopBarInlineStyles(document)
+      // Setup login button click handlers when switching to original top bar
+      setupLoginButtonClickHandlers(document)
+    }
   }
 }, { passive: true })
 

src/contentScripts/views/App.vue

@@ -7,7 +7,7 @@ import UpdateLogNotifier from '~/components/UpdateLogNotifier.vue'
 import type { BewlyAppProvider } from '~/composables/useAppProvider'
 import { DrawerType, UndoForwardState } from '~/composables/useAppProvider'
 import { useDark } from '~/composables/useDark'
-import { BEWLY_MOUNTED, DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FULL, IFRAME_PAGE_SWITCH_BEWLY, IFRAME_PAGE_SWITCH_BILI, OVERLAY_SCROLL_BAR_SCROLL } from '~/constants/globalEvents'
+import { BEWLY_MOUNTED, DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FULL, IFRAME_PAGE_SWITCH_BEWLY, IFRAME_PAGE_SWITCH_BILI, OVERLAY_SCROLL_BAR_SCROLL, OVERLAY_SCROLL_STATE_CHANGE } from '~/constants/globalEvents'
 import { HomeSubPage } from '~/contentScripts/views/Home/types'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
@@ -514,6 +514,7 @@ function handleBackToTop(targetScrollTop = 0 as number) {
 
 // 添加滚动结束检测
 let scrollEndTimer: ReturnType<typeof setTimeout> | null = null
+let scrollStateTimer: ReturnType<typeof setTimeout> | null = null
 let lastScrollTop = 0
 let rafId: number | null = null
 
@@ -522,6 +523,9 @@ function handleOsScroll() {
   if (rafId !== null)
     return
 
+  // 发出滚动开始信号（用于 useGlobalScrollState）
+  emitter.emit(OVERLAY_SCROLL_STATE_CHANGE, true)
+
   // 使用 RAF 将所有 DOM 读取合并到下一帧
   rafId = requestAnimationFrame(() => {
     const osInstance = scrollbarRef.value?.osInstance()
@@ -560,6 +564,16 @@ function handleOsScroll() {
       clearTimeout(scrollEndTimer)
     }
 
+    // 清除之前的滚动状态定时器
+    if (scrollStateTimer) {
+      clearTimeout(scrollStateTimer)
+    }
+
+    // 设置滚动状态结束检测，150ms后发出滚动结束信号
+    scrollStateTimer = setTimeout(() => {
+      emitter.emit(OVERLAY_SCROLL_STATE_CHANGE, false)
+    }, 150)
+
     // 设置滚动结束检测，在滚动停止150ms后再检查一次
     // 缓存当前的滚动值，避免在 setTimeout 中再次读取 DOM
     const cachedScrollTop = scrollTop

src/utils/bilibiliScriptCleanup.ts

@@ -3,22 +3,6 @@
  * 用于在替换首页时减少B站原生脚本的性能影响，避免内存泄漏
  */
 
-/**
- * 清理 B 站特定的定时器
- * 使用更温和的策略，只清理已知的 B 站定时器
- */
-function clearBilibiliTimers() {
-  // 不再清理所有定时器，因为可能会影响插件自身
-  // 改为记录一个基准 ID，后续可以选择性清理
-  const baseTimerId = setTimeout(() => {}, 0)
-  clearTimeout(baseTimerId)
-
-  console.log('[BewlyBewly] Recorded base timer ID:', baseTimerId)
-
-  // 返回基准 ID 供后续使用
-  return baseTimerId
-}
-
 /**
  * 清理 B 站的全局变量和对象
  */
@@ -49,38 +33,6 @@ function cleanupGlobalObjects() {
   }
 }
 
-/**
- * 禁用 B 站的 MutationObserver
- * 防止 B 站脚本监听 DOM 变化后尝试操作不存在的元素
- */
-function disableBilibiliMutationObservers() {
-  // 保存原始的 MutationObserver
-  const OriginalMutationObserver = window.MutationObserver
-  const observersToDisable: MutationObserver[] = []
-
-  // 代理 MutationObserver，记录所有创建的 observer
-  window.MutationObserver = class extends OriginalMutationObserver {
-    constructor(callback: MutationCallback) {
-      super(callback)
-      observersToDisable.push(this)
-    }
-  } as any
-
-  // 500ms 后断开所有 observer 并恢复原始构造函数
-  setTimeout(() => {
-    observersToDisable.forEach((observer) => {
-      try {
-        observer.disconnect()
-      }
-      catch {
-        // 忽略错误
-      }
-    })
-    window.MutationObserver = OriginalMutationObserver
-    console.log('[BewlyBewly] Disconnected', observersToDisable.length, 'MutationObservers')
-  }, 500)
-}
-
 /**
  * 主清理函数（温和版本）
  * 在清空 DOM 之前调用，减少 B 站脚本的性能影响
@@ -89,15 +41,9 @@ export function cleanupBilibiliScripts() {
   console.log('[BewlyBewly] Starting gentle Bilibili script cleanup...')
 
   try {
-    // 1. 记录定时器基准（不清理）
-    clearBilibiliTimers()
-
-    // 2. 清理全局对象
+    // 清理全局对象
     cleanupGlobalObjects()
 
-    // 3. 禁用 MutationObserver
-    disableBilibiliMutationObservers()
-
     console.log('[BewlyBewly] Gentle cleanup completed')
   }
   catch (e) {

src/utils/bilibiliTopBar.ts

@@ -70,3 +70,61 @@ export function resetBilibiliTopBarInlineStyles(doc: Document) {
     })
   }
 }
+
+/**
+ * Add click event listeners to login buttons in the original Bilibili top bar
+ * to redirect users to the login page.
+ */
+export function setupLoginButtonClickHandlers(doc: Document) {
+  const LOGIN_URL = 'https://passport.bilibili.com/login'
+
+  // Function to handle login button binding
+  function bindLoginButton(button: HTMLElement) {
+    if (button.hasAttribute('data-bewly-login-handler'))
+      return
+
+    button.setAttribute('data-bewly-login-handler', 'true')
+    button.style.cursor = 'pointer'
+    button.addEventListener('click', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      window.location.href = LOGIN_URL
+    })
+  }
+
+  // Bind existing login buttons
+  const existingButtons = doc.querySelectorAll<HTMLElement>('.login-btn')
+  existingButtons.forEach(bindLoginButton)
+
+  // Use MutationObserver to handle dynamically added popup elements
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        // Check if the added node is an element
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          const element = node as HTMLElement
+
+          // Check if the added node itself is a login button
+          if (element.classList.contains('login-btn')) {
+            bindLoginButton(element)
+          }
+
+          // Check if the added node contains login buttons
+          const loginButtons = element.querySelectorAll<HTMLElement>('.login-btn')
+          loginButtons.forEach(bindLoginButton)
+        }
+      })
+    })
+  })
+
+  // Observe the entire document for popup elements
+  observer.observe(doc.body, {
+    childList: true,
+    subtree: true,
+  })
+
+  // Return cleanup function
+  return () => {
+    observer.disconnect()
+  }
+}