SwAdIcon

廣告位四要素
使用場景：應用推薦宮格 / 橫排（頁面頂 / 中 / 底、列表流內；slotKey 例 home_icon）
業界形態：Icon ads（中國大陸常見形態；AdSDK 格式 icon）
表現形態：圖示 + 名稱的宮格（grid）或橫排（image）佈局
打點事件：同 banner —— adImpression（IntersectionObserver 進入視窗一次）/ adClick；自動內建零組態，gate 關閉靜默 no-op
選錯場景 = 埋點 ad_type / 時機全錯。按場景選元件見廣告元件選型。

SwAdIcon 是圖示廣告位元件，屬廣告底座「圖片類」自渲染元件。支援兩種佈局：grid（多圖示宮格，如首頁金剛位）與 image（單圖示，如懸浮入口）。內建曝光 / 點擊埋點。

加载中...

Props

名稱	類型	必填	預設值	說明
`items`	`SwAdItem[]`	✓	—	廣告創意陣列
`slotKey`	`string`	✓	—	廣告位鍵 → `ad_slot_key`
`slotName`	`string`		`undefined`	廣告位名 → `ad_slot_name`
`pageKey`	`string`		`undefined`	頁面鍵 → `page_key`
`pageName`	`string`		`undefined`	頁面名 → `page_name`
`ratio`	`string`		`'1/1'`	圖示寬高比，預設正方形
`radius`	`number \| string`		`8`	圓角（number=px，string 原樣透傳 SwImage，如 `'1.125rem'`）
`showAdLabel`	`boolean`		`undefined`	「廣告」合規角標；不傳時跟隨全域 `swiftConfig.ad.showLabel`（預設 `true`），顯式傳值始終優先
`layout`	`'grid' \| 'image'`		`'grid'`	佈局：宮格 / 單圖示
`gridColumns`	`number \| { mobile?, tablet?, desktop? }`		`5`	`grid` 列數。物件形態按斷點分檔（<768 / 768-1023 / ≥1024），缺檔就近回退（同 SwGallery columns 範式）
`minItemWidth`	`number \| string`		`undefined`	卡片最小寬。number 視作 px，string 原樣透傳（同 `radius` / `gridGap`）。傳了且未傳 `gridColumns` 時走 auto-fill 流式（列數隨容器寬自適應）；`gridColumns` 優先
`gridGap`	`number \| string`		`8`	間距（number=px，string 原樣使用、可引 token）

Events

名稱	攜帶	說明
`load`	—	渲染完成
`empty`	—	`items` 為空
`impression`	`items: SwAdItem[]`	曝光（自動埋點）
`click`	`item: SwAdItem`	點擊（自動埋點）
`error`	—	渲染 / 載入錯誤

單圖示模式

layout="image" 渲染單個圖示，適合懸浮活動入口：

加载中...

<!-- 宮格金剛位 -->
<SwAdIcon :items="icons" slot-key="home_kingkong" :grid-columns="5" :radius="12" />

<!-- 響應式列數：行動 4 列 / 平板 6 列 / 桌面 8 列 -->
<SwAdIcon :items="icons" slot-key="home_kingkong" :grid-columns="{ mobile: 4, tablet: 6, desktop: 8 }" />

<!-- 流式自適應：不鎖列數，每卡至少 72px 寬，列數隨容器寬變化 -->
<SwAdIcon :items="icons" slot-key="home_kingkong" :min-item-width="72" />

<!-- gridGap / radius 支援 string：引 token / rem -->
<SwAdIcon :items="icons" slot-key="home_kingkong" grid-gap="0.75rem" radius="1.125rem" />

<!-- 懸浮單圖示入口 -->
<SwAdIcon :items="[entry]" slot-key="float_entry" layout="image" :radius="12" />

CSS 變數

佈局不寫內聯 style，全部經 CSS 變數落地 —— 業務可用普通 CSS 覆蓋佈局，無需 !important：

變數	預設值	說明
`--sw-ad-icon-gap`	`8px`	網格 / 橫排間距（對應 `gridGap`）
`--sw-ad-icon-cols-mobile` / `--sw-ad-icon-cols-tablet` / `--sw-ad-icon-cols-desktop`	`5`	grid 三檔斷點列數（對應 `gridColumns`）
`--sw-ad-icon-min`	—	流式模式最小卡寬（對應 `minItemWidth`，僅流式生效）
`--sw-ad-icon-item-width`	`4.5rem`	`layout="image"` 橫排單卡寬

注意事項

grid 列數由 gridColumns（數值或斷點物件）控制；傳 minItemWidth 且未傳 gridColumns 時改走 auto-fill 流式。
image 模式忽略 gridColumns / minItemWidth，gridGap 仍生效；多圖示時子項不壓縮（flex: 0 0 auto），超寬即橫向捲動，單卡寬用 --sw-ad-icon-item-width 調。
埋點內建，受 tracker 雙重 gate。