feat(auth): 添加iframe高度自适应传递功能

src/features/authGuide.tsx

@@ -10,8 +10,10 @@ import {useUserStore} from '@/store/user.ts'
 import type {HostContextMessage} from '@/types'
 
 const HOST_READY_MESSAGE = 'PLAYX_READY'
+const HOST_HEIGHT_MESSAGE = 'PLAYX_HEIGHT'
 const HOST_READY_INTERVAL = 500
 const HOST_READY_RETRY_LIMIT = 20
+const HOST_HEIGHT_REPORT_INTERVAL = 250
 const TEST_BOOTSTRAP_ENABLED = import.meta.env.VITE_BYPASS_IFRAME_CONTEXT === 'true'
 const TEST_BOOTSTRAP_USERNAME = '+60777777777'
 const TEST_BOOTSTRAP_LANGUAGE = 'zh'
@@ -142,6 +144,97 @@ export function AuthGuide({children}: PropsWithChildren) {
         clearUserInfo()
     }, [authBootstrapQuery.isError, clearUserInfo])
 
+    useEffect(() => {
+        if (window.parent === window) {
+            return
+        }
+
+        let frameId = 0
+        let timeoutId: number | null = null
+        let lastReportedHeight = 0
+        let lastReportedAt = 0
+
+        const measureHeight = () =>
+            Math.max(
+                document.body.scrollHeight,
+                document.documentElement.scrollHeight,
+                document.body.offsetHeight,
+                document.documentElement.offsetHeight,
+            )
+
+        const postHeight = (height: number) => {
+            lastReportedHeight = height
+            lastReportedAt = Date.now()
+            window.parent.postMessage(
+                {
+                    type: HOST_HEIGHT_MESSAGE,
+                    payload: {
+                        height,
+                    },
+                },
+                '*',
+            )
+        }
+
+        const flushPostHeight = () => {
+            frameId = 0
+
+            const nextHeight = measureHeight()
+            if (nextHeight === lastReportedHeight) {
+                return
+            }
+
+            const elapsed = Date.now() - lastReportedAt
+            if (elapsed >= HOST_HEIGHT_REPORT_INTERVAL) {
+                postHeight(nextHeight)
+                return
+            }
+
+            if (timeoutId != null) {
+                return
+            }
+
+            timeoutId = window.setTimeout(() => {
+                timeoutId = null
+                postHeight(measureHeight())
+            }, HOST_HEIGHT_REPORT_INTERVAL - elapsed)
+        }
+
+        const schedulePostHeight = () => {
+            if (frameId) {
+                window.cancelAnimationFrame(frameId)
+            }
+
+            frameId = window.requestAnimationFrame(() => {
+                flushPostHeight()
+            })
+        }
+
+        schedulePostHeight()
+
+        const resizeObserver = new ResizeObserver(() => {
+            schedulePostHeight()
+        })
+
+        resizeObserver.observe(document.body)
+        resizeObserver.observe(document.documentElement)
+
+        window.addEventListener('load', schedulePostHeight)
+        window.addEventListener('resize', schedulePostHeight)
+
+        return () => {
+            resizeObserver.disconnect()
+            window.removeEventListener('load', schedulePostHeight)
+            window.removeEventListener('resize', schedulePostHeight)
+            if (frameId) {
+                window.cancelAnimationFrame(frameId)
+            }
+            if (timeoutId != null) {
+                window.clearTimeout(timeoutId)
+            }
+        }
+    }, [])
+
     if (!username || authBootstrapQuery.isPending) {
         return (
             <div className="flex min-h-screen items-center justify-center bg-[#08070E] px-6 text-center text-[14px] text-white/68">