feat(auth): 添加iframe轮播消息支持并优化地址簿和订单状态处理

- 添加HostWheelMessage类型定义和IFRAME_WHEEL消息常量 - 实现iframe轮播事件监听和消息发送功能 - 移除address.type.ts中的region和region_text字段 - 更新英文本地化文件中的completed状态为Approved - 添加订单状态通知相关的国际化文案 - 更新常量文件中的订单状态描述注释 - 在index.ts中添加HostWheelMessage和OrderStatusCode类型 - 修改record页面的订单状态处理逻辑 - 实现订单状态变更通知弹窗功能 - 优化地址簿获取地址文本的方法 - 修复地址列表API响应数据访问问题 - 添加playx.html测试页面和相关配置文件
2026-07-27 14:23:45 +08:00
parent 8002650b95
commit 3eb03da0da
12 changed files with 442 additions and 61 deletions
--- a/public/playx.html
+++ b/public/playx.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta
+        name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    >
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>PlayX</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        html, body {
+            width: 100%;
+            height: 100%;
+        }
+
+        main {
+            display: flex;
+            height: calc(100% - 80px);
+            width: 100%;
+        }
+
+        header {
+            background-color: red;
+            height: 80px;
+            width: 100%;
+        }
+
+        aside {
+            background-color: blue;
+            height: 100%;
+            width: 200px;
+        }
+
+        section {
+            background-color: yellow;
+            height: 100%;
+            width: calc(100% - 200px);
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
+    </style>
+</head>
+<body>
+<header>header</header>
+<main>
+    <aside>aside</aside>
+    <section id="host-scroll-region">
+        <div id="iframe-container" style="height: 100%">
+            <iframe
+                id="playx-frame"
+                src="https://playx-mall.cjdhr.top"
+                width="100%"
+                height="100%"
+            ></iframe>
+        </div>
+        <footer style="height: 80px; background-color: green;">footer</footer>
+    </section>
+</main>
+
+<script>
+    const frame = document.getElementById('playx-frame')
+    const iframeContainer = document.getElementById('iframe-container')
+    const hostScrollRegion = document.getElementById('host-scroll-region')
+
+    frame.addEventListener('load', () => {
+        iframeContainer.style.height = '100%'
+        hostScrollRegion.scrollTop = 0
+    })
+
+    window.addEventListener('message', (event) => {
+        if (event.source !== frame.contentWindow) {
+            return
+        }
+
+        if (event.data?.type === 'IFRAME_HEIGHT') {
+            const height = Number(event.data?.payload?.height)
+
+            if (!Number.isFinite(height) || height <= 0) {
+                return
+            }
+
+            iframeContainer.style.height = `${height}px`
+            return
+        }
+
+        if (event.data?.type === 'IFRAME_WHEEL') {
+            const downTotalY = Number(event.data?.payload?.downTotalY)
+
+            if (!Number.isFinite(downTotalY)) {
+                return
+            }
+
+            const maxScrollTop = Math.max(hostScrollRegion.scrollHeight - hostScrollRegion.clientHeight, 0)
+            hostScrollRegion.scrollTop = Math.min(Math.max(downTotalY, 0), maxScrollTop)
+        }
+    })
+</script>
+</body>
+</html>
--- a/public/test-host.html
+++ b/public/test-host.html
@@ -330,6 +330,20 @@
            scheduleHeightLog(event.data)
            return
        }
+
+        if (event.source === frame.contentWindow && event.data?.type === 'IFRAME_WHEEL') {
+            const downTotalY = Number(event.data?.payload?.downTotalY)
+            const upTotalY = Number(event.data?.payload?.upTotalY)
+
+            if (!Number.isFinite(downTotalY) || !Number.isFinite(upTotalY)) {
+                return
+            }
+
+            appendLog('Received IFRAME_WHEEL from iframe', {
+                downTotalY,
+                upTotalY,
+            })
+        }
    })
 </script>
 </body>