pb-sxp-ui 1.19.13 → 1.19.15

package/dist/index.css

@@ -65,6 +65,7 @@ a:active {
 }
 
 :root {
+  --safe-area-inset-bottom: constant(safe-area-inset-bottom);
   --safe-area-inset-bottom: env(safe-area-inset-bottom);
 }
 .pb-appoint-form {
@@ -1075,7 +1076,7 @@ a:active {
   padding-top: 18px;
   padding-left: 18px;
   padding-right: 18px;
-  padding-bottom: calc(18px + env(safe-area-inset-bottom));
+  padding-bottom: calc(18px + var(--safe-area-inset-bottom, 0px));
 }
 .waterfallFlow__title {
   text-align: center;
@@ -1554,7 +1555,7 @@ a:active {
   top: 0;
   left: 0;
   right: 0;
-  bottom: env(safe-area-inset-bottom);
+  bottom: var(--safe-area-inset-bottom, 0px);
   width: 100%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -2466,7 +2467,7 @@ button.swiper-pagination-bullet {
   left: 0;
   top: 0;
   right: 0;
-  bottom: env(safe-area-inset-bottom);
+  bottom: var(--safe-area-inset-bottom, 0px);
   z-index: 100;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;

package/dist/index.js

@@ -18979,12 +18979,98 @@ const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
 var NavBack$1 = memo(NavBack);
 
 const useVisibleHeight = () => {
+    var _a, _b;
     const [visibleHeight, setVisibleHeight] = 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 = 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]);
     useEffect(() => {
         // 初始计算
         updateHeight();
@@ -19225,24 +19311,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         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 = useMemo(() => {
-        return visibleHeight - minusHeight - tagHeight - getHeightWithSafeArea2();
-    }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea2, containerHeight]);
+        return getDvhInPx() - minusHeight - tagHeight - getHeightWithSafeArea();
+    }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea, containerHeight, getDvhInPx]);
     const visList = useMemo(() => {
         var _a;
         const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -19725,10 +19809,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 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%',