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。