pb-sxp-ui 1.19.13 → 1.19.15

package/dist/pb-ui.js

@@ -18994,12 +18994,98 @@ Made in Italy` })));
     var NavBack$1 = React.memo(NavBack);
 
     const useVisibleHeight = () => {
+        var _a, _b;
         const [visibleHeight, setVisibleHeight] = React.useState(0);
+        const getDvhInPx = () => {
+            const detector = document.createElement('div');
+            detector.style.position = 'fixed';
+            detector.style.bottom = `${getHeightWithSafeArea()}px`;
+            detector.style.left = '0';
+            detector.style.height = '100dvh';
+            detector.style.visibility = 'hidden';
+            detector.style.zIndex = '-1';
+            document.body.appendChild(detector);
+            const dvhInPx = detector.clientHeight;
+            document.body.removeChild(detector);
+            return dvhInPx;
+        };
+        const getVhInPx = () => {
+            const detector = document.createElement('div');
+            detector.style.position = 'fixed';
+            detector.style.bottom = `${getHeightWithSafeArea()}px`;
+            detector.style.left = '0';
+            detector.style.height = '100vh';
+            detector.style.visibility = 'hidden';
+            detector.style.zIndex = '-1';
+            document.body.appendChild(detector);
+            const dvhInPx = detector.clientHeight;
+            document.body.removeChild(detector);
+            return dvhInPx;
+        };
+        const getFillAvailableInPx = () => {
+            const detector = document.createElement('div');
+            detector.style.position = 'fixed';
+            detector.style.bottom = `${getHeightWithSafeArea()}px`;
+            detector.style.left = '0';
+            detector.style.height = '-webkit-fill-available';
+            detector.style.visibility = 'hidden';
+            detector.style.zIndex = '-1';
+            document.body.appendChild(detector);
+            const dvhInPx = detector.clientHeight;
+            document.body.removeChild(detector);
+            return dvhInPx;
+        };
+        const getHeightWithSafeArea = () => {
+            const root = document.documentElement;
+            const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
+            // 处理可能的值（可能是 '0px', '34px' 等）
+            const numericValue = parseInt(value) || 0;
+            return numericValue;
+        };
+        const dvhToPx = (dvh) => {
+            return Math.round((dvh / 100) * document.documentElement.clientHeight);
+        };
+        const systemInfo = {
+            visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
+            innerHeight: window.innerHeight,
+            clientHeight: document.documentElement.clientHeight,
+            screenHeight: window.screen.height,
+            bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
+            agent: navigator.userAgent,
+            version: '1.19.14',
+            safeArea: getHeightWithSafeArea(),
+            dvh: dvhToPx(100),
+            dvhInPx: getDvhInPx(),
+            vhInPx: getVhInPx(),
+            fillAvailableInPx: getFillAvailableInPx()
+        };
+        console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
+        if ('fundebug' in window) {
+            window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
+        }
         const updateHeight = React.useCallback(() => {
-            var _a;
-            const height = ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight);
+            var _a, _b, _c;
+            const systemInfo = {
+                visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
+                innerHeight: window.innerHeight,
+                clientHeight: document.documentElement.clientHeight,
+                screenHeight: window.screen.height,
+                bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
+                agent: navigator.userAgent,
+                version: '1.19.15',
+                safeArea: getHeightWithSafeArea(),
+                dvh: dvhToPx(100),
+                dvhInPx: getDvhInPx(),
+                vhInPx: getVhInPx(),
+                fillAvailableInPx: getFillAvailableInPx()
+            };
+            console.log(systemInfo, 'fundebug-resize--------------------->systemInfo');
+            if ('fundebug' in window) {
+                window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
+            }
+            const height = ((_c = document === null || document === void 0 ? void 0 : document.documentElement) === null || _c === void 0 ? void 0 : _c.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight);
             setVisibleHeight(height);
-        }, []);
+        }, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
         React.useEffect(() => {
             // 初始计算
             updateHeight();
@@ -19240,24 +19326,22 @@ Made in Italy` })));
             const numericValue = parseInt(value) || 0;
             return numericValue;
         };
-        const getHeightWithSafeArea2 = () => {
-            // 获取窗口高度
-            // 动态检测安全区域
+        const getDvhInPx = () => {
             const detector = document.createElement('div');
             detector.style.position = 'fixed';
-            detector.style.bottom = '0';
+            detector.style.bottom = `${getHeightWithSafeArea()}px`;
             detector.style.left = '0';
-            detector.style.paddingBottom = 'env(safe-area-inset-bottom)';
+            detector.style.height = '100dvh';
             detector.style.visibility = 'hidden';
+            detector.style.zIndex = '-1';
             document.body.appendChild(detector);
-            const computedStyle = window.getComputedStyle(detector);
-            const safeAreaBottom = parseFloat(computedStyle.paddingBottom) || 0;
+            const dvhInPx = detector.clientHeight;
             document.body.removeChild(detector);
-            return safeAreaBottom;
+            return dvhInPx;
         };
         const height = React.useMemo(() => {
-            return visibleHeight - minusHeight - tagHeight - getHeightWithSafeArea2();
-        }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea2, containerHeight]);
+            return getDvhInPx() - minusHeight - tagHeight - getHeightWithSafeArea();
+        }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea, containerHeight, getDvhInPx]);
         const visList = React.useMemo(() => {
             var _a;
             const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -19740,10 +19824,10 @@ Made in Italy` })));
                     renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
                 React.createElement(WaterFall$1, Object.assign({}, (_u = (_t = (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.item) === null || _u === void 0 ? void 0 : _u.props)),
                 React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
-                openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 'env(safe-area-inset-bottom)' } }))))),
+                openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 'var(--safe-area-inset-bottom,0px)' } }))))),
             (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
                     position: 'fixed',
-                    bottom: 'env(safe-area-inset-bottom)',
+                    bottom: 'var(--safe-area-inset-bottom,0px)',
                     left: 0,
                     right: 0,
                     width: '100%',