Function useWindowsTitleBarOverlay

src/composables/useWindowsTitleBarOverlay.ts:15–66

(triggers: WatchSource<unknown>[])

const TRANSITION_SAMPLE_MS = 420

export function useWindowsTitleBarOverlay(triggers: WatchSource<unknown>[]): void {
  if (!IS_ELECTRON || typeof navigator === 'undefined' || !navigator.platform.toLowerCase().includes('win')) return

  let frameId = 0
  let lastColor = ''

  const syncTitleBarColor = () => {
    const color = sampleTitleBarBackground()
    if (!color || color === lastColor) return

    lastColor = color
    window.api?.setTitleBarOverlayColor(color)
  }

  const scheduleSync = (durationMs = 0) => {
    if (frameId) {
      cancelAnimationFrame(frameId)
    }

    const startedAt = performance.now()
    const tick = () => {
      syncTitleBarColor()
      if (performance.now() - startedAt < durationMs) {
        frameId = requestAnimationFrame(tick)
      } else {
        frameId = 0
      }
    }

    nextTick(() => {
      frameId = requestAnimationFrame(tick)
    })
  }

  const handleResize = () => scheduleSync()

  onMounted(() => {
    window.addEventListener('resize', handleResize)
    scheduleSync(TRANSITION_SAMPLE_MS)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    if (frameId) {
      cancelAnimationFrame(frameId)
    }
  })

  for (const trigger of triggers) {
    watch(trigger, () => scheduleSync(TRANSITION_SAMPLE_MS), { flush: 'post' })
  }
}

// 采样 Windows 标题栏按钮区域下方的真实背景色，并用它推导原生按钮符号颜色。
// 这里需要沿 elementsFromPoint 返回的层级合成透明背景，才能覆盖设置弹窗淡入淡出时的 blur/backdrop 场景。