qb-pc-sdk 1.1.5 → 1.1.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qb-pc-sdk",
-  "version": "1.1.5",
-  "description": "趣变广告 SDK 封装器 - https",
+  "version": "1.1.6",
+  "description": "趣变广告 SDK 封装器 - 自适应Banner广告",
   "main": "index.js",
   "files": [
     "index.js",

package/src/ad-sdk-wrapper.js

@@ -310,6 +310,21 @@
         .q-ad-wrapper.q-ad-small .q-ad-title { font-size: 12px; }
         .q-ad-wrapper.q-ad-small .q-ad-desc { font-size: 10px; margin-bottom: 4px; }
         .q-ad-wrapper.q-ad-small .q-cta-btn { padding: 3px 10px; font-size: 10px; }
+        /* Banner样式（横向细长条广告）优化 */
+        .q-ad-wrapper.q-ad-banner { flex-direction: row !important; align-items: stretch; }
+        .q-ad-wrapper.q-ad-banner .q-media-container { width: auto !important; flex: 0 0 auto !important; min-width: 0; height: 100% !important; max-width: 40% !important; min-width: 120px; position: relative; }
+        .q-ad-wrapper.q-ad-banner .q-ad-img, .q-ad-wrapper.q-ad-banner .q-ad-video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
+        .q-ad-wrapper.q-ad-banner .q-content-container { flex: 1 !important; padding: 6px 10px !important; justify-content: center !important; min-width: 0; display: flex !important; flex-direction: column !important; width: auto !important; }
+        .q-ad-wrapper.q-ad-banner .q-ad-title { font-size: 14px !important; margin: 0 0 3px 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex-shrink: 0; }
+        .q-ad-wrapper.q-ad-banner .q-ad-desc { font-size: 11px !important; margin: 0 0 4px 0 !important; -webkit-line-clamp: 1 !important; line-height: 1.3 !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; flex-shrink: 0; }
+        .q-ad-wrapper.q-ad-banner .q-cta-btn { padding: 4px 12px !important; font-size: 11px !important; align-self: flex-start !important; flex-shrink: 0; margin-top: auto !important; }
+        .q-ad-wrapper.q-ad-banner .q-ad-tag { right: auto !important; left: 5px !important; }
+        /* 超窄Banner样式（高度小于80px） */
+        .q-ad-wrapper.q-ad-banner.q-ad-banner-narrow .q-media-container { max-width: 35% !important; min-width: 100px !important; }
+        .q-ad-wrapper.q-ad-banner.q-ad-banner-narrow .q-content-container { padding: 4px 8px !important; }
+        .q-ad-wrapper.q-ad-banner.q-ad-banner-narrow .q-ad-title { font-size: 13px !important; margin-bottom: 2px !important; }
+        .q-ad-wrapper.q-ad-banner.q-ad-banner-narrow .q-ad-desc { font-size: 10px !important; margin-bottom: 3px !important; display: none !important; }
+        .q-ad-wrapper.q-ad-banner.q-ad-banner-narrow .q-cta-btn { padding: 3px 10px !important; font-size: 10px !important; }
     `;
 
     class AdSDKWrapper {
@@ -513,20 +528,70 @@
             const adImageWidth = ad.getImageWidth ? ad.getImageWidth() : 0;
             const adImageHeight = ad.getImageHeight ? ad.getImageHeight() : 0;
             
-            // 获取容器尺寸
-            const containerRect = this.container.getBoundingClientRect();
-            const containerWidth = containerRect.width || this.container.offsetWidth || 200;
-            const containerHeight = containerRect.height || this.container.offsetHeight || 120;
+            // 获取容器尺寸（优先使用计算样式，确保获取准确）
+            let containerWidth = this.container.offsetWidth;
+            let containerHeight = this.container.offsetHeight;
             
-            // 判断是否为小尺寸广告（宽度或高度小于300px）
-            const isSmallAd = containerWidth < 300 || containerHeight < 200;
-            const wrapperClass = isSmallAd ? 'q-ad-wrapper q-ad-small' : 'q-ad-wrapper';
+            // 如果 offsetWidth/offsetHeight 为0，尝试使用 getBoundingClientRect
+            if (!containerWidth || !containerHeight) {
+                const containerRect = this.container.getBoundingClientRect();
+                containerWidth = containerRect.width || containerWidth || 200;
+                containerHeight = containerRect.height || containerHeight || 120;
+            }
+            
+            // 如果还是0，尝试从计算样式获取
+            if (!containerWidth || !containerHeight) {
+                const computedStyle = window.getComputedStyle(this.container);
+                containerWidth = parseFloat(computedStyle.width) || 200;
+                containerHeight = parseFloat(computedStyle.height) || 120;
+            }
+            
+            // 计算宽高比
+            const aspectRatio = containerWidth / containerHeight;
+            
+            // 判断是否为Banner样式（横向细长条）：宽高比大于3:1，且高度小于150px
+            const isBanner = aspectRatio > 3 && containerHeight < 150;
+            const isNarrowBanner = isBanner && containerHeight < 80;
+            
+            // 判断是否为小尺寸广告（宽度或高度小于300px，但不是Banner）
+            const isSmallAd = !isBanner && (containerWidth < 300 || containerHeight < 200);
+            
+            // 构建样式类
+            let wrapperClass = 'q-ad-wrapper';
+            if (isBanner) {
+                wrapperClass += ' q-ad-banner';
+                if (isNarrowBanner) {
+                    wrapperClass += ' q-ad-banner-narrow';
+                }
+            } else if (isSmallAd) {
+                wrapperClass += ' q-ad-small';
+            }
+            
+            // 调试信息（始终输出，便于排查问题）
+            console.log('[AdSDK] 容器尺寸检测:', {
+                width: containerWidth,
+                height: containerHeight,
+                aspectRatio: aspectRatio.toFixed(2),
+                isBanner: isBanner,
+                isNarrowBanner: isNarrowBanner,
+                isSmallAd: isSmallAd,
+                wrapperClass: wrapperClass
+            });
 
             // 构建 HTML 结构
+            // 如果是Banner样式，计算媒体容器的宽度（基于高度和宽高比）
+            let mediaContainerStyle = '';
+            if (isBanner) {
+                // Banner样式：媒体容器宽度 = 高度 * 宽高比（16:9 或 4:3）
+                const mediaAspectRatio = isNarrowBanner ? 4/3 : 16/9;
+                const mediaWidth = Math.min(containerHeight * mediaAspectRatio, containerWidth * 0.4);
+                mediaContainerStyle = `width: ${mediaWidth}px;`;
+            }
+            
             this.container.innerHTML = `
                 <div class="${wrapperClass}">
                     <button class="q-ad-close" title="关闭广告" style="position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; z-index: 10; transition: background 0.2s; flex-shrink: 0; padding: 0; margin: 0; box-sizing: border-box; font-family: Arial, sans-serif; font-weight: bold;">×</button>
-                    <div class="q-media-container">
+                    <div class="q-media-container" style="${mediaContainerStyle}">
                         <div class="q-ad-video" style="display:none"></div>
                         <img class="q-ad-img" style="display:none">
                         <span class="q-ad-tag">广告</span>

package/src/example-simple.html

@@ -7,8 +7,8 @@
     <style>
         body { margin: 0; padding: 20px; font-family: sans-serif; background: #f0f2f5; }
         #ad-slot-1 {
-            width: 400px;
-            height: 220px;
+            width: 728px;
+            height: 60px;
             margin: 20px auto;
             box-sizing: border-box;
         }
@@ -17,10 +17,13 @@
 <body>
     <div id="ad-slot-1"></div>
 
-    <!-- 只需引入一个文件，会自动加载底层 SDK 和封装 SDK -->
-    <!-- CDN 方式（发布到 npm 后使用） -->
-    <script src="https://unpkg.com/qb-pc-sdk@latest/qb-pc-sdk.js"></script>
-    <!-- 本地测试方式（如果还未发布到 npm，取消下面这行的注释，注释掉上面的 CDN 方式） -->
+    <!-- 测试最新代码：直接引用源文件 -->
+    <!-- 先引入底层 SDK -->
+    <script src="https://unpkg.com/qb-pc-ad-sdk-origin/dist/qb-pc-ad-sdk.v1.0.0.js"></script>
+    <!-- 再引入封装 SDK 源文件（包含最新的 Banner 适配代码） -->
+    <script src="ad-sdk-wrapper.js"></script>
+    
+    <!-- 如果使用打包后的文件（可能不包含最新代码），取消下面这行的注释 -->
     <!-- <script src="../qb-pc-sdk.js"></script> -->
     
     <script>
@@ -74,8 +77,8 @@
             
             // 初始化广告
             const adSDK = new window.AdSDK({
-                appId: '1999364640831725629',
-                placementId: '2003009002186760245',
+                appId: '2004088976381599817',
+                placementId: '2004089182414200847',
                 container: '#ad-slot-1',
                 onAdLoaded: (ad, adSDKInstance) => {
                     console.log('✅ 广告加载完成');