@funhub/platform 0.2.30 → 0.2.31

package/dist/components/biz/business/advertisement/ad-match.mjs

@@ -1,2 +1,143 @@
 
-function e(e){return{...e}}function t(e){let t=e?.adExtData;if(!t)return{};try{let e=JSON.parse(t);return typeof e==`object`&&e?e:{}}catch{return{}}}function n(e){return[...e??[]].sort((e,t)=>Number(e?.sort??0)-Number(t?.sort??0))}function r(e){return!!(e?.hit&&Array.isArray(e.materials)&&e.materials.length>0)}function i(e){return n(e?.materials).filter(e=>e.advertiseIcon&&e.advertiseUrl).map(e=>({id:e.advertiseCode||``,materialUrl:e.advertiseIcon||``,jumpUrl:e.advertiseUrl||``,name:e.advertiseName||``}))}function a(e){let r=n(e?.materials).filter(e=>e.advertiseIcon&&e.advertiseUrl).map(e=>{let n=t(e);return{id:e.advertiseCode||``,title:n.title||e.advertiseName||``,icon:e.advertiseIcon||``,jumpUrl:e.advertiseUrl||``,badgeText:`广告`}}).filter(e=>e.title&&e.icon&&e.jumpUrl);return{displayCount:l(e?.config,r.length),items:r}}function o(e){let t=n(e?.materials).map(e=>({id:e.advertiseCode||``,text:e.advertiseName||e.advertiseDesc||``,jumpUrl:e.advertiseUrl||``})).filter(e=>e.text);return{displayCount:l(e?.config,t.length),items:t}}function s(e){let r=n(e?.materials).filter(e=>e.advertiseIcon&&e.advertiseUrl),i=r.map(e=>{let n=t(e);return{id:e.advertiseCode||``,coverUrl:e.advertiseIcon||``,jumpUrl:e.advertiseUrl||``,title:n.title||e.advertiseName||``}}).filter(e=>e.coverUrl&&e.jumpUrl);return{displayCount:l(e?.config,i.length),switchInterval:u(e?.config,r),styleSize:d(e?.config,r),items:i}}function c(e){return n(e?.materials).map(e=>{let n=t(e);return{id:e.advertiseCode||``,title:n.title||e.advertiseName||``,jumpUrl:e.advertiseUrl||``,materialUrl:e.advertiseIcon||``,desc:e.advertiseDesc||``}}).filter(e=>e.id&&e.materialUrl&&e.jumpUrl)}function l(e,t=0){let n=Number(e?.displayCount??t);return!Number.isFinite(n)||n<=0?t:Math.min(Math.floor(n),t)}function u(e,n){let r=t(n?.[0]),i=Number(e?.switchInterval??r.switchInterval??3e3);return!Number.isFinite(i)||i<=0?3e3:i}function d(e,n){let r=t(n?.[0]),i=String(e?.styleSize??r.styleSize??`large`);return i===`700x400`||i===`700x200`||i===`720x150`||i===`720x300`?i:i===`small`?`720x150`:i===`medium`?`700x200`:`700x400`}export{s as adaptBannerAdProps,i as adaptFloatingAdItems,a as adaptIconAdProps,c as adaptPopupAdMaterials,o as adaptTextAdProps,e as buildAdsMatchRequest,r as hasMatchedAds,t as parseAdsMatchExtData,n as sortAdsMatchMaterials};
+//#region components/biz/business/advertisement/ad-match.ts
+/**
+* 构建广告匹配请求体。
+*/
+function buildAdsMatchRequest(input) {
+	return { ...input };
+}
+/**
+* 解析广告扩展数据。
+*/
+function parseAdsMatchExtData(material) {
+	const raw = material?.adExtData;
+	if (!raw) return {};
+	try {
+		const parsed = JSON.parse(raw);
+		return typeof parsed === "object" && parsed !== null ? parsed : {};
+	} catch {
+		return {};
+	}
+}
+/**
+* 对素材按排序值升序排列。
+*/
+function sortAdsMatchMaterials(materials) {
+	return [...materials ?? []].sort((left, right) => {
+		return Number(left?.sort ?? 0) - Number(right?.sort ?? 0);
+	});
+}
+/**
+* 判断当前响应是否命中有效广告。
+*/
+function hasMatchedAds(matchData) {
+	return Boolean(matchData?.hit && Array.isArray(matchData.materials) && matchData.materials.length > 0);
+}
+/**
+* 适配悬浮广告数据列表。
+*/
+function adaptFloatingAdItems(matchData) {
+	return sortAdsMatchMaterials(matchData?.materials).filter((item) => item.advertiseIcon && item.advertiseUrl).map((material) => ({
+		id: material.advertiseCode || "",
+		materialUrl: material.advertiseIcon || "",
+		jumpUrl: material.advertiseUrl || "",
+		name: material.advertiseName || ""
+	}));
+}
+/**
+* 适配图标广告数据。
+*/
+function adaptIconAdProps(matchData) {
+	const items = sortAdsMatchMaterials(matchData?.materials).filter((item) => item.advertiseIcon && item.advertiseUrl).map((material) => {
+		const extData = parseAdsMatchExtData(material);
+		return {
+			id: material.advertiseCode || "",
+			title: extData.title || material.advertiseName || "",
+			icon: material.advertiseIcon || "",
+			jumpUrl: material.advertiseUrl || "",
+			badgeText: "广告"
+		};
+	}).filter((item) => item.title && item.icon && item.jumpUrl);
+	return {
+		displayCount: normalizeDisplayCount(matchData?.config, items.length),
+		items
+	};
+}
+/**
+* 适配文字广告数据。
+*/
+function adaptTextAdProps(matchData) {
+	const items = sortAdsMatchMaterials(matchData?.materials).map((material) => {
+		return {
+			id: material.advertiseCode || "",
+			text: material.advertiseName || material.advertiseDesc || "",
+			jumpUrl: material.advertiseUrl || ""
+		};
+	}).filter((item) => item.text);
+	return {
+		displayCount: normalizeDisplayCount(matchData?.config, items.length),
+		items
+	};
+}
+/**
+* 适配 Banner 广告数据。
+*/
+function adaptBannerAdProps(matchData) {
+	const materials = sortAdsMatchMaterials(matchData?.materials).filter((item) => item.advertiseIcon && item.advertiseUrl);
+	const items = materials.map((material) => {
+		const extData = parseAdsMatchExtData(material);
+		return {
+			id: material.advertiseCode || "",
+			coverUrl: material.advertiseIcon || "",
+			jumpUrl: material.advertiseUrl || "",
+			title: extData.title || material.advertiseName || ""
+		};
+	}).filter((item) => item.coverUrl && item.jumpUrl);
+	return {
+		displayCount: normalizeDisplayCount(matchData?.config, items.length),
+		switchInterval: normalizeSwitchInterval(matchData?.config, materials),
+		styleSize: normalizeBannerStyleSize(matchData?.config, materials),
+		items
+	};
+}
+/**
+* 适配弹窗广告数据。
+*/
+function adaptPopupAdMaterials(matchData) {
+	return sortAdsMatchMaterials(matchData?.materials).map((material) => {
+		const extData = parseAdsMatchExtData(material);
+		return {
+			id: material.advertiseCode || "",
+			title: extData.title || material.advertiseName || "",
+			jumpUrl: material.advertiseUrl || "",
+			materialUrl: material.advertiseIcon || "",
+			advertiseType: Number(material.advertiseType ?? 1),
+			videoUrl: material.advertiseVideo || "",
+			resolution: extData.resolution || "",
+			desc: material.advertiseDesc || ""
+		};
+	}).filter((item) => item.id && (item.materialUrl || item.videoUrl) && item.jumpUrl);
+}
+function normalizeDisplayCount(config, fallbackLength = 0) {
+	const count = Number(config?.displayCount ?? fallbackLength);
+	if (!Number.isFinite(count) || count <= 0) return fallbackLength;
+	return Math.min(Math.floor(count), fallbackLength);
+}
+function normalizeSwitchInterval(config, materials) {
+	const firstExtData = parseAdsMatchExtData(materials?.[0]);
+	const value = Number(config?.switchInterval ?? firstExtData.switchInterval ?? 3e3);
+	if (!Number.isFinite(value) || value <= 0) return 3e3;
+	return value;
+}
+function normalizeBannerStyleSize(config, materials) {
+	const firstExtData = parseAdsMatchExtData(materials?.[0]);
+	const value = String(config?.styleSize ?? firstExtData.styleSize ?? "large");
+	if (value === "700x400" || value === "700x200" || value === "720x150" || value === "720x300") return value;
+	if (value === "small") return "720x150";
+	if (value === "medium") return "700x200";
+	if (value === "large") return "700x400";
+	return "700x400";
+}
+
+//#endregion
+export { adaptBannerAdProps, adaptFloatingAdItems, adaptIconAdProps, adaptPopupAdMaterials, adaptTextAdProps, buildAdsMatchRequest, hasMatchedAds, parseAdsMatchExtData, sortAdsMatchMaterials };

package/dist/components/biz/business/advertisement/ad-provider.mjs

@@ -1,2 +1,51 @@
 
-"use client";import{useRequest as e}from"../../../../hooks/query/use-query.mjs";import{createAdsMatchQueryFn as t,getAdsMatchQueryKey as n}from"./ad-query.mjs";import{createContext as r,use as i,useMemo as a}from"react";import{jsx as o}from"react/jsx-runtime";const s=r(void 0);function c({adType:r,componentId:i,sceneContext:c,mode:l=`renderer`,children:u}){let{data:d}=e(n({adType:r,componentId:i,sceneContext:c}),t({adType:r,componentId:i,sceneContext:c}),{enabled:l===`renderer`});return o(s,{value:a(()=>({adType:r,componentId:i,sceneContext:c,mode:l,matchData:d?.data}),[r,d?.data,i,l,c]),children:u})}function l(){return i(s)}export{c as AdProvider,l as useAdProvider};
+'use client';
+
+import { useRequest } from "../../../../hooks/query/use-query.mjs";
+import { createAdsMatchQueryFn, getAdsMatchQueryKey } from "./ad-query.mjs";
+import { createContext, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/biz/business/advertisement/ad-provider.tsx
+const AdProviderContext = createContext(void 0);
+/**
+* 广告运行时 Provider。
+*/
+function AdProvider({ adType, componentId, sceneContext, mode = "renderer", children }) {
+	const { data: adsMatchResponse } = useRequest(getAdsMatchQueryKey({
+		adType,
+		componentId,
+		sceneContext
+	}), createAdsMatchQueryFn({
+		adType,
+		componentId,
+		sceneContext
+	}), { enabled: mode === "renderer" });
+	return /* @__PURE__ */ jsx(AdProviderContext, {
+		value: useMemo(() => {
+			return {
+				adType,
+				componentId,
+				sceneContext,
+				mode,
+				matchData: adsMatchResponse?.data
+			};
+		}, [
+			adType,
+			adsMatchResponse?.data,
+			componentId,
+			mode,
+			sceneContext
+		]),
+		children
+	});
+}
+/**
+* 获取广告运行时上下文。
+*/
+function useAdProvider() {
+	return use(AdProviderContext);
+}
+
+//#endregion
+export { AdProvider, useAdProvider };

package/dist/components/biz/business/advertisement/ad-query.mjs

@@ -1,2 +1,40 @@
 
-import{pContentAdsMatch as e,pContentAdsMatchKey as t}from"../../../../service/advertisement.mjs";import{buildAdsMatchRequest as n}from"./ad-match.mjs";function r(e){return t({adType:e.adType,componentId:e.componentId,sceneContext:e.sceneContext})}function i(t){return async()=>e(await n({adType:t.adType,componentId:t.componentId,sceneContext:t.sceneContext}),{revalidate:!1})}function a(e){return{type:`query`,queryKey:r(e),queryFn:i(e)}}export{a as createAdsMatchPrefetchItem,i as createAdsMatchQueryFn,r as getAdsMatchQueryKey};
+import { pContentAdsMatch, pContentAdsMatchKey } from "../../../../service/advertisement.mjs";
+import { buildAdsMatchRequest } from "./ad-match.mjs";
+
+//#region components/biz/business/advertisement/ad-query.ts
+/**
+* 获取广告查询 key。
+*/
+function getAdsMatchQueryKey(options) {
+	return pContentAdsMatchKey({
+		adType: options.adType,
+		componentId: options.componentId,
+		sceneContext: options.sceneContext
+	});
+}
+/**
+* 获取广告查询函数。
+*/
+function createAdsMatchQueryFn(options) {
+	return async () => {
+		return pContentAdsMatch(await buildAdsMatchRequest({
+			adType: options.adType,
+			componentId: options.componentId,
+			sceneContext: options.sceneContext
+		}), { revalidate: false });
+	};
+}
+/**
+* 获取广告预取配置。
+*/
+function createAdsMatchPrefetchItem(options) {
+	return {
+		type: "query",
+		queryKey: getAdsMatchQueryKey(options),
+		queryFn: createAdsMatchQueryFn(options)
+	};
+}
+
+//#endregion
+export { createAdsMatchPrefetchItem, createAdsMatchQueryFn, getAdsMatchQueryKey };

package/dist/components/biz/business/advertisement/ad-runtime-provider.mjs

@@ -1,2 +1,22 @@
 
-import{AdProvider as e}from"./ad-provider.mjs";import{jsx as t}from"react/jsx-runtime";function n({adType:n,componentId:r,sceneContext:i,mode:a=`renderer`,children:o}){return t(e,{adType:n,componentId:r,sceneContext:i,mode:a,children:o})}export{n as AdRuntimeProvider};
+import { AdProvider } from "./ad-provider.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/biz/business/advertisement/ad-runtime-provider.tsx
+/**
+* 广告运行时 Provider。
+*
+* 广告数据统一由客户端 Provider 发起请求，避免服务端阶段拿不到用户态信息。
+*/
+function AdRuntimeProvider({ adType, componentId, sceneContext, mode = "renderer", children }) {
+	return /* @__PURE__ */ jsx(AdProvider, {
+		adType,
+		componentId,
+		sceneContext,
+		mode,
+		children
+	});
+}
+
+//#endregion
+export { AdRuntimeProvider };

package/dist/components/biz/business/advertisement/banner-ad/client.mjs

@@ -1,2 +1,275 @@
 
-"use client";import{trackAdClick as e,trackAdImpression as t}from"../../../../../utils/tracking.mjs";import{Image as n}from"../../../../ui/image.mjs";import{Box as r}from"../../../../ui/box.mjs";import{Carousel as i,CarouselContent as a,CarouselItem as o}from"../../../../ui/carousel.mjs";import{Text as s}from"../../../../ui/text.mjs";import c from"../../../../ui/link.mjs";import{adaptBannerAdProps as l,hasMatchedAds as u}from"../ad-match.mjs";import{useAdProvider as d}from"../ad-provider.mjs";import{bannerAdInspectorDefaultProps as f}from"./schema.mjs";import p from"clsx";import{useEffect as m,useMemo as h,useRef as g,useState as _}from"react";import{jsx as v,jsxs as y}from"react/jsx-runtime";const b={"700x400":{minHeight:`400px`,aspectRatio:`7 / 4`,titleFontSize:`14px`},"700x200":{minHeight:`200px`,aspectRatio:`7 / 2`,titleFontSize:`14px`},"720x150":{minHeight:`150px`,aspectRatio:`24 / 5`,titleFontSize:`12px`},"720x300":{minHeight:`300px`,aspectRatio:`12 / 5`,titleFontSize:`14px`}},x=[{coverUrl:`/static/components-resource/banner.png`,jumpUrl:`/search`,title:`Banner 广告一`},{coverUrl:`/static/components-resource/banner.png`,jumpUrl:`/search`,title:`Banner 广告二`},{coverUrl:`/static/components-resource/banner.png`,jumpUrl:`/search`,title:`Banner 广告三`},{coverUrl:`/static/components-resource/banner.png`,jumpUrl:`/search`,title:`Banner 广告四`},{coverUrl:`/static/components-resource/banner.png`,jumpUrl:`/search`,title:`Banner 广告五`}];function S(e,t){return Array.isArray(e)&&e.length>0?e:t??[]}function C(e,t){return typeof e==`number`&&e>0?e:t}function w(e,t){return typeof e==`number`&&e>0?e:t}function T(e,t){return e??t}function E({mode:E=`renderer`,displayCount:D,switchInterval:O=3e3,styleSize:k=`700x400`,items:A,pointerEventsDisabled:j=!1,pageKey:M=`home`,pageName:N=`首页`}){let P=E===`editor`?{displayCount:C(D,f.displayCount),switchInterval:w(O,f.switchInterval),styleSize:T(k,f.styleSize),items:S(A,x)}:{displayCount:D,switchInterval:O,styleSize:k,items:A},F=d(),I=h(()=>u(F?.matchData)?l(F?.matchData):{displayCount:P.displayCount,switchInterval:P.switchInterval,styleSize:P.styleSize,items:P.items??[]},[F?.matchData,P.displayCount,P.items,P.styleSize,P.switchInterval]),[L,R]=_(),[z,B]=_(0),V=g(null),H=h(()=>typeof I.displayCount==`number`?I.items.slice(0,Math.max(I.displayCount,0)):I.items,[I]),U=F?.matchData?.advertiseLocationCode||`home_banner`,W=H[z];m(()=>{!W?.id||E===`editor`||t({page_key:M,page_name:N,ad_slot_key:U,ad_slot_name:`Banner广告`,ad_id:W.id,ad_type:`banner`})},[W?.id,U,M,N,E]);function G(t){t.id&&e({page_key:M,page_name:N,ad_slot_key:U,ad_slot_name:`Banner广告`,ad_id:t.id,ad_type:`banner`})}if(m(()=>{if(!L||H.length<=1)return;let e=()=>{B(L.selectedScrollSnap())};return L.on(`select`,e),e(),()=>{L.off(`select`,e)}},[L,H.length]),m(()=>{if(!(!L||H.length<=1))return V.current=setInterval(()=>{if(L.canScrollNext()){L.scrollNext();return}L.scrollTo(0)},I.switchInterval??3e3),()=>{V.current&&=(clearInterval(V.current),null)}},[L,I.switchInterval,H.length]),H.length===0)return null;let K=b[I.styleSize??`700x400`];return v(r,{as:`section`,className:`w-full px-[12px] py-[12px]`,"aria-label":`Banner 广告`,style:{pointerEvents:j?`none`:void 0},children:y(i,{setApi:R,opts:{align:`start`,loop:H.length>1},className:`w-full`,children:[v(a,{className:`ml-0`,children:H.map((e,t)=>v(o,{className:`pl-0`,children:y(c,{href:e.jumpUrl,className:p(`relative block w-full overflow-hidden bg-white`),style:{minHeight:K?.minHeight,aspectRatio:K?.aspectRatio,borderRadius:`10px`},onClick:()=>G(e),children:[v(r,{className:`absolute inset-0`,children:v(n,{src:e.coverUrl,alt:e.title||`Banner 广告`,fill:!0,className:`object-cover object-center`,unoptimized:!0})}),v(r,{className:`absolute inset-x-0 bottom-0`,style:{height:`28%`,background:`linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)`,opacity:.84}}),v(r,{className:`absolute right-0 top-0 overflow-hidden`,style:{width:`56px`,height:`25px`,backgroundColor:`rgba(255, 255, 255, 0.16)`,borderBottomLeftRadius:`8px`},children:v(s,{className:`flex h-full items-center justify-center text-white`,style:{fontSize:`12px`,lineHeight:`normal`,fontWeight:400},children:`广告`})}),e.title?v(s,{className:`absolute line-clamp-2 text-white`,style:{left:`16px`,bottom:`16px`,maxWidth:`calc(100% - 120px)`,fontSize:K.titleFontSize,lineHeight:`normal`,fontWeight:500},children:e.title}):null]})},`${e.jumpUrl}-${t}`))}),H.length>1?v(r,{className:`pointer-events-none absolute bottom-[18px] right-[16px] z-10 flex items-center gap-[6px]`,children:H.map((e,t)=>v(r,{className:`rounded-full transition-all duration-300`,style:{width:t===z?`16px`:`8px`,height:`8px`,backgroundColor:t===z?`#FFFFFF`:`rgba(255, 255, 255, 0.78)`}},t))}):null]})})}export{E as BannerAd};
+'use client';
+
+import { trackAdClick, trackAdImpression } from "../../../../../utils/tracking.mjs";
+import { Image } from "../../../../ui/image.mjs";
+import { Box } from "../../../../ui/box.mjs";
+import { Carousel, CarouselContent, CarouselItem } from "../../../../ui/carousel.mjs";
+import { Text } from "../../../../ui/text.mjs";
+import Link from "../../../../ui/link.mjs";
+import { adaptBannerAdProps, hasMatchedAds } from "../ad-match.mjs";
+import { useAdProvider } from "../ad-provider.mjs";
+import { bannerAdInspectorDefaultProps } from "./schema.mjs";
+import clsx from "clsx";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/biz/business/advertisement/banner-ad/client.tsx
+const STYLE_DIMENSION_MAP = {
+	"700x400": {
+		minHeight: "400px",
+		aspectRatio: "7 / 4",
+		titleFontSize: "14px"
+	},
+	"700x200": {
+		minHeight: "200px",
+		aspectRatio: "7 / 2",
+		titleFontSize: "14px"
+	},
+	"720x150": {
+		minHeight: "150px",
+		aspectRatio: "24 / 5",
+		titleFontSize: "12px"
+	},
+	"720x300": {
+		minHeight: "300px",
+		aspectRatio: "12 / 5",
+		titleFontSize: "14px"
+	}
+};
+const BANNER_AD_DEFAULT_ITEMS = [
+	{
+		coverUrl: "/static/components-resource/banner.png",
+		jumpUrl: "/search",
+		title: "Banner 广告一"
+	},
+	{
+		coverUrl: "/static/components-resource/banner.png",
+		jumpUrl: "/search",
+		title: "Banner 广告二"
+	},
+	{
+		coverUrl: "/static/components-resource/banner.png",
+		jumpUrl: "/search",
+		title: "Banner 广告三"
+	},
+	{
+		coverUrl: "/static/components-resource/banner.png",
+		jumpUrl: "/search",
+		title: "Banner 广告四"
+	},
+	{
+		coverUrl: "/static/components-resource/banner.png",
+		jumpUrl: "/search",
+		title: "Banner 广告五"
+	}
+];
+function fallbackEditorItems(items, fallback) {
+	return Array.isArray(items) && items.length > 0 ? items : fallback ?? [];
+}
+function fallbackEditorCount(value, fallback) {
+	return typeof value === "number" && value > 0 ? value : fallback;
+}
+function fallbackEditorInterval(value, fallback) {
+	return typeof value === "number" && value > 0 ? value : fallback;
+}
+function fallbackEditorStyleSize(value, fallback) {
+	return value ?? fallback;
+}
+/**
+* Banner 广告组件。
+*/
+function BannerAd({ mode: _mode = "renderer", displayCount, switchInterval = 3e3, styleSize = "700x400", items, pointerEventsDisabled = false, pageKey = "home", pageName = "首页" }) {
+	const mergedProps = _mode === "editor" ? {
+		displayCount: fallbackEditorCount(displayCount, bannerAdInspectorDefaultProps.displayCount),
+		switchInterval: fallbackEditorInterval(switchInterval, bannerAdInspectorDefaultProps.switchInterval),
+		styleSize: fallbackEditorStyleSize(styleSize, bannerAdInspectorDefaultProps.styleSize),
+		items: fallbackEditorItems(items, BANNER_AD_DEFAULT_ITEMS)
+	} : {
+		displayCount,
+		switchInterval,
+		styleSize,
+		items
+	};
+	const adContext = useAdProvider();
+	const resolvedProps = useMemo(() => {
+		if (hasMatchedAds(adContext?.matchData)) return adaptBannerAdProps(adContext?.matchData);
+		return {
+			displayCount: mergedProps.displayCount,
+			switchInterval: mergedProps.switchInterval,
+			styleSize: mergedProps.styleSize,
+			items: mergedProps.items ?? []
+		};
+	}, [
+		adContext?.matchData,
+		mergedProps.displayCount,
+		mergedProps.items,
+		mergedProps.styleSize,
+		mergedProps.switchInterval
+	]);
+	const [api, setApi] = useState();
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const timerRef = useRef(null);
+	const visibleItems = useMemo(() => {
+		if (typeof resolvedProps.displayCount !== "number") return resolvedProps.items;
+		return resolvedProps.items.slice(0, Math.max(resolvedProps.displayCount, 0));
+	}, [resolvedProps]);
+	const adSlotKey = adContext?.matchData?.advertiseLocationCode || "home_banner";
+	const currentItem = visibleItems[currentIndex];
+	/** Banner 广告曝光上报，当前展示的 banner 变化时上报。 */
+	useEffect(() => {
+		if (!currentItem?.id || _mode === "editor") return;
+		trackAdImpression({
+			page_key: pageKey,
+			page_name: pageName,
+			ad_slot_key: adSlotKey,
+			ad_slot_name: "Banner广告",
+			ad_id: currentItem.id,
+			ad_type: "banner"
+		});
+	}, [
+		currentItem?.id,
+		adSlotKey,
+		pageKey,
+		pageName,
+		_mode
+	]);
+	/** Banner 广告点击上报。 */
+	function handleBannerClick(item) {
+		if (!item.id) return;
+		trackAdClick({
+			page_key: pageKey,
+			page_name: pageName,
+			ad_slot_key: adSlotKey,
+			ad_slot_name: "Banner广告",
+			ad_id: item.id,
+			ad_type: "banner"
+		});
+	}
+	useEffect(() => {
+		if (!api || visibleItems.length <= 1) return;
+		const onSelect = () => {
+			setCurrentIndex(api.selectedScrollSnap());
+		};
+		api.on("select", onSelect);
+		onSelect();
+		return () => {
+			api.off("select", onSelect);
+		};
+	}, [api, visibleItems.length]);
+	useEffect(() => {
+		if (!api || visibleItems.length <= 1) return;
+		timerRef.current = setInterval(() => {
+			if (api.canScrollNext()) {
+				api.scrollNext();
+				return;
+			}
+			api.scrollTo(0);
+		}, resolvedProps.switchInterval ?? 3e3);
+		return () => {
+			if (timerRef.current) {
+				clearInterval(timerRef.current);
+				timerRef.current = null;
+			}
+		};
+	}, [
+		api,
+		resolvedProps.switchInterval,
+		visibleItems.length
+	]);
+	if (visibleItems.length === 0) return null;
+	const bannerDimension = STYLE_DIMENSION_MAP[resolvedProps.styleSize ?? "700x400"];
+	return /* @__PURE__ */ jsx(Box, {
+		as: "section",
+		className: "w-full px-[12px] py-[12px]",
+		"aria-label": "Banner 广告",
+		style: { pointerEvents: pointerEventsDisabled ? "none" : void 0 },
+		children: /* @__PURE__ */ jsxs(Carousel, {
+			setApi,
+			opts: {
+				align: "start",
+				loop: visibleItems.length > 1
+			},
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx(CarouselContent, {
+				className: "ml-0",
+				children: visibleItems.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, {
+					className: "pl-0",
+					children: /* @__PURE__ */ jsxs(Link, {
+						href: item.jumpUrl,
+						className: clsx("relative block w-full overflow-hidden bg-white"),
+						style: {
+							minHeight: bannerDimension?.minHeight,
+							aspectRatio: bannerDimension?.aspectRatio,
+							borderRadius: "10px"
+						},
+						onClick: () => handleBannerClick(item),
+						children: [
+							/* @__PURE__ */ jsx(Box, {
+								className: "absolute inset-0",
+								children: /* @__PURE__ */ jsx(Image, {
+									src: item.coverUrl,
+									alt: item.title || "Banner 广告",
+									fill: true,
+									className: "object-cover object-center",
+									unoptimized: true
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								className: "absolute inset-x-0 bottom-0",
+								style: {
+									height: "28%",
+									background: "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)",
+									opacity: .84
+								}
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								className: "absolute right-0 top-0 overflow-hidden",
+								style: {
+									width: "56px",
+									height: "25px",
+									backgroundColor: "rgba(255, 255, 255, 0.16)",
+									borderBottomLeftRadius: "8px"
+								},
+								children: /* @__PURE__ */ jsx(Text, {
+									className: "flex h-full items-center justify-center text-white",
+									style: {
+										fontSize: "12px",
+										lineHeight: "normal",
+										fontWeight: 400
+									},
+									children: "广告"
+								})
+							}),
+							item.title ? /* @__PURE__ */ jsx(Text, {
+								className: "absolute line-clamp-2 text-white",
+								style: {
+									left: "16px",
+									bottom: "16px",
+									maxWidth: "calc(100% - 120px)",
+									fontSize: bannerDimension.titleFontSize,
+									lineHeight: "normal",
+									fontWeight: 500
+								},
+								children: item.title
+							}) : null
+						]
+					})
+				}, `${item.jumpUrl}-${index}`))
+			}), visibleItems.length > 1 ? /* @__PURE__ */ jsx(Box, {
+				className: "pointer-events-none absolute bottom-[18px] right-[16px] z-10 flex items-center gap-[6px]",
+				children: visibleItems.map((_, index) => /* @__PURE__ */ jsx(Box, {
+					className: "rounded-full transition-all duration-300",
+					style: {
+						width: index === currentIndex ? "16px" : "8px",
+						height: "8px",
+						backgroundColor: index === currentIndex ? "#FFFFFF" : "rgba(255, 255, 255, 0.78)"
+					}
+				}, index))
+			}) : null]
+		})
+	});
+}
+
+//#endregion
+export { BannerAd };

package/dist/components/biz/business/advertisement/banner-ad/material.mjs

@@ -1,2 +1,22 @@
 
-import{defineMaterial as e}from"../../../../../utils/schema/material.mjs";import{bannerAdInspectorPropsSchema as t}from"./schema.mjs";import{BannerAd as n}from"./client.mjs";import{BannerAdServer as r}from"./server.mjs";const i=e({type:`banner-ad`,name:`Banner广告`,icon:`/static/components-thumb/carousel_banner.png`,category:`广告组件`,serverComponent:r,clientComponent:n,propsSchema:t});export{i as bannerAdMaterial};
+import { defineMaterial } from "../../../../../utils/schema/material.mjs";
+import { bannerAdInspectorPropsSchema } from "./schema.mjs";
+import { BannerAd } from "./client.mjs";
+import { BannerAdServer } from "./server.mjs";
+
+//#region components/biz/business/advertisement/banner-ad/material.ts
+/**
+* Banner 广告物料定义。
+*/
+const bannerAdMaterial = defineMaterial({
+	type: "banner-ad",
+	name: "Banner广告",
+	icon: "/static/components-thumb/carousel_banner.png",
+	category: "广告组件",
+	serverComponent: BannerAdServer,
+	clientComponent: BannerAd,
+	propsSchema: bannerAdInspectorPropsSchema
+});
+
+//#endregion
+export { bannerAdMaterial };

package/dist/components/biz/business/advertisement/banner-ad/schema.mjs

@@ -1,2 +1,56 @@
 
-import{defineComponentPropsSchema as e,getSchemaDefaultProps as t}from"../../../../../utils/schema/schema.mjs";import n from"zod";const r=[`700x400`,`700x200`,`720x150`,`720x300`],i=e(e=>({displayCount:e.number(1,{label:`轮播数量`,required:!0}).refine(e=>e>=1&&e<=5,`轮播数量必须为 1-5`),switchInterval:e.number(3e3,{label:`轮播切换时间`,required:!0}),styleSize:e.enum(r,`700x400`,{label:`样式尺寸选择`,required:!0}),default_advertise_location_code:e.string(``,{label:`广告标识`,required:!0}),items:e.array(n.object({coverUrl:e.string(``,{label:`封面图`,required:!0}),jumpUrl:e.string(``,{label:`跳转链接`,required:!0}),title:e.string(`Banner 广告`,{label:`标题`,required:!1})}),{label:`Banner 列表`,required:!0})})),a=t(i);export{a as bannerAdInspectorDefaultProps,i as bannerAdInspectorPropsSchema,r as bannerAdStyleSizeOptions};
+import { defineComponentPropsSchema, getSchemaDefaultProps } from "../../../../../utils/schema/schema.mjs";
+import z$1 from "zod";
+
+//#region components/biz/business/advertisement/banner-ad/schema.ts
+/**
+* Banner 尺寸选项。
+*/
+const bannerAdStyleSizeOptions = [
+	"700x400",
+	"700x200",
+	"720x150",
+	"720x300"
+];
+/**
+* Banner 广告物料属性。
+*/
+const bannerAdInspectorPropsSchema = defineComponentPropsSchema((t) => ({
+	displayCount: t.number(1, {
+		label: "轮播数量",
+		required: true
+	}).refine((value) => value >= 1 && value <= 5, "轮播数量必须为 1-5"),
+	switchInterval: t.number(3e3, {
+		label: "轮播切换时间",
+		required: true
+	}),
+	styleSize: t.enum(bannerAdStyleSizeOptions, "700x400", {
+		label: "样式尺寸选择",
+		required: true
+	}),
+	default_advertise_location_code: t.string("", {
+		label: "广告标识",
+		required: true
+	}),
+	items: t.array(z$1.object({
+		coverUrl: t.string("", {
+			label: "封面图",
+			required: true
+		}),
+		jumpUrl: t.string("", {
+			label: "跳转链接",
+			required: true
+		}),
+		title: t.string("Banner 广告", {
+			label: "标题",
+			required: false
+		})
+	}), {
+		label: "Banner 列表",
+		required: true
+	})
+}));
+const bannerAdInspectorDefaultProps = getSchemaDefaultProps(bannerAdInspectorPropsSchema);
+
+//#endregion
+export { bannerAdInspectorDefaultProps, bannerAdInspectorPropsSchema, bannerAdStyleSizeOptions };

package/dist/components/biz/business/advertisement/banner-ad/server.mjs

@@ -1,2 +1,25 @@
 
-import{AdRuntimeProvider as e}from"../ad-runtime-provider.mjs";import{BannerAd as t}from"./client.mjs";import{jsx as n}from"react/jsx-runtime";async function r(r){let{mode:i=`renderer`,componentId:a,sceneContext:o,...s}=r;return n(e,{adType:`banner`,componentId:a,sceneContext:o,mode:i,children:n(t,{...s,mode:i})})}export{r as BannerAdServer};
+import { AdRuntimeProvider } from "../ad-runtime-provider.mjs";
+import { BannerAd } from "./client.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/biz/business/advertisement/banner-ad/server.tsx
+/**
+* Banner 广告服务端组件。
+*/
+async function BannerAdServer(props) {
+	const { mode = "renderer", componentId, sceneContext, ...rest } = props;
+	return /* @__PURE__ */ jsx(AdRuntimeProvider, {
+		adType: "banner",
+		componentId,
+		sceneContext,
+		mode,
+		children: /* @__PURE__ */ jsx(BannerAd, {
+			...rest,
+			mode
+		})
+	});
+}
+
+//#endregion
+export { BannerAdServer };