@anker-in/headless-ui 1.2.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
  2. package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
  3. package/dist/cjs/biz-components/Faq/Faq.js +1 -1
  4. package/dist/cjs/biz-components/Faq/Faq.js.map +2 -2
  5. package/dist/cjs/biz-components/Faq/types.d.ts +1 -0
  6. package/dist/cjs/biz-components/Faq/types.js +1 -1
  7. package/dist/cjs/biz-components/Faq/types.js.map +1 -1
  8. package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.d.ts +6 -6
  9. package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.js +1 -1
  10. package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.js.map +3 -3
  11. package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
  12. package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
  13. package/dist/esm/biz-components/Faq/Faq.js +1 -1
  14. package/dist/esm/biz-components/Faq/Faq.js.map +2 -2
  15. package/dist/esm/biz-components/Faq/types.d.ts +1 -0
  16. package/dist/esm/biz-components/MediaSceneSwitcherV2/index.d.ts +6 -6
  17. package/dist/esm/biz-components/MediaSceneSwitcherV2/index.js +1 -1
  18. package/dist/esm/biz-components/MediaSceneSwitcherV2/index.js.map +3 -3
  19. package/package.json +1 -1
package/dist/cjs/biz-components/BrandEquity/BrandEquity.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var P=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var i in t)d(e,i,{get:t[i],enumerable:!0})},g=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of L(t))!A.call(e,s)&&s!==i&&d(e,s,{get:()=>t[s],enumerable:!(a=T(t,s))||a.enumerable});return e};var k=(e,t,i)=>(i=e!=null?P(z(e)):{},g(t||!e||!e.__esModule?d(i,"default",{value:e,enumerable:!0}):i,e)),D=e=>g(d({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>C});module.exports=D(F);var r=require("react/jsx-runtime"),o=require("react"),l=require("../../helpers/utils.js"),f=k(require("../../components/picture.js")),w=require("../../shared/Styles.js"),q=require("react-responsive"),E=require("../../hooks/useExposure.js"),c=require("swiper/react"),p=require("swiper/modules"),S=k(require("../Title/index.js"));const R="copy",Q="store_benefits",$=(e,t)=>{const i=[];for(let a=0;a<e.length;a+=t)i.push(e.slice(a,a+t));return i},h=(0,o.forwardRef)(({data:{items:e=[],itemShape:t,title:i,theme:a},className:s},M)=>{const[y,B]=(0,o.useState)(!1),x=(0,q.useMediaQuery)({query:"(max-width: 768px)"}),v=(0,o.useRef)(null),u=(0,o.useRef)(null);(0,o.useImperativeHandle)(M,()=>u.current),(0,E.useExposure)(u,{componentType:R,componentName:Q}),(0,o.useEffect)(()=>{B(x)},[x]);const I=y?$(e,3):e;return(0,r.jsxs)("div",{ref:u,className:(0,l.cn)("brand-equity-wrapper w-full",{"aiui-dark":a==="dark"},s),children:[i&&(0,r.jsx)(S.default,{data:{title:i}}),y?(0,r.jsxs)(c.Swiper,{className:(0,l.cn)(s),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:v.current},breakpoints:{0:{spaceBetween:12}},children:[I?.map((n,m)=>(0,r.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((j,b)=>(0,r.jsx)(N,{data:j,itemShape:t,index:b},b))},"SwiperSlide"+m)),(0,r.jsx)("div",{ref:v,className:"mt-3 flex justify-center"})]}):(0,r.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((n,m)=>(0,r.jsx)(N,{data:n,itemShape:t,index:m},m))})]})}),N=({data:e,itemShape:t,index:i})=>(0,r.jsxs)("div",{className:(0,l.cn)("brand-equity-item",`brand-equity-item-${i+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-primary box-border flex w-full flex-col p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(i),"aiui-dark":e.theme==="dark"},t==="round"?"rounded-box":"rounded-none",e.className),children:[(0,r.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,r.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?(0,r.jsx)("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((a,s)=>(0,r.jsx)("div",{className:(0,l.cn)("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:(0,r.jsx)(f.default,{source:a.avatar?.url,alt:a.avatar?.alt,className:"size-full object-cover"})},s))}):(0,r.jsx)("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,r.jsx)(f.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,r.jsx)("p",{className:"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});h.displayName="BrandEquity";var C=(0,w.withLayout)(h);
1
+ "use strict";"use client";var j=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var i in t)d(e,i,{get:t[i],enumerable:!0})},k=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of L(t))!A.call(e,o)&&o!==i&&d(e,o,{get:()=>t[o],enumerable:!(a=P(t,o))||a.enumerable});return e};var h=(e,t,i)=>(i=e!=null?j(z(e)):{},k(t||!e||!e.__esModule?d(i,"default",{value:e,enumerable:!0}):i,e)),D=e=>k(d({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>C});module.exports=D(F);var r=require("react/jsx-runtime"),s=require("react"),l=require("../../helpers/utils.js"),y=h(require("../../components/picture.js")),q=require("../../shared/Styles.js"),E=require("react-responsive"),S=require("../../hooks/useExposure.js"),c=require("swiper/react"),n=require("swiper/modules"),M=h(require("../Title/index.js"));const R="copy",Q="store_benefits",$=(e,t)=>{const i=[];for(let a=0;a<e.length;a+=t)i.push(e.slice(a,a+t));return i},N=(0,s.forwardRef)(({data:{items:e=[],itemShape:t,title:i,theme:a},className:o},u)=>{const[x,B]=(0,s.useState)(!1),v=(0,E.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,s.useRef)(null),f=(0,s.useRef)(null);(0,s.useImperativeHandle)(u,()=>f.current),(0,S.useExposure)(f,{componentType:R,componentName:Q}),(0,s.useEffect)(()=>{B(v)},[v]);const T=x?$(e,3):e;return(0,r.jsxs)("div",{ref:f,className:(0,l.cn)("brand-equity-wrapper w-full",{"aiui-dark":a==="dark"},o),children:[i&&(0,r.jsx)(M.default,{data:{title:i}}),x?(0,r.jsxs)(c.Swiper,{className:(0,l.cn)(o),modules:[n.FreeMode,n.Mousewheel,n.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:b.current},breakpoints:{0:{spaceBetween:12}},children:[T?.map((p,m)=>(0,r.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(p)&&p?.map((I,g)=>(0,r.jsx)(w,{data:I,itemShape:t,index:g,theme:a},g))},"SwiperSlide"+m)),(0,r.jsx)("div",{ref:b,className:"mt-3 flex justify-center"})]}):(0,r.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((p,m)=>(0,r.jsx)(w,{data:p,itemShape:t,index:m,theme:a},m))})]})}),w=({data:e,itemShape:t,index:i,theme:a})=>(0,r.jsxs)("div",{className:(0,l.cn)("brand-equity-item",`brand-equity-item-${i+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-secondary-1 box-border flex w-full flex-col p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(i),"bg-container-primary":a==="dark"},t==="round"?"rounded-box":"rounded-none",e.className),children:[(0,r.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,r.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?(0,r.jsx)("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((o,u)=>(0,r.jsx)("div",{className:(0,l.cn)("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:(0,r.jsx)(y.default,{source:o.avatar?.url,alt:o.avatar?.alt,className:"size-full object-cover"})},u))}):(0,r.jsx)("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,r.jsx)(y.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,r.jsx)("p",{className:"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});N.displayName="BrandEquity";var C=(0,q.withLayout)(N);
2
2
  //# sourceMappingURL=BrandEquity.js.map
package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
4
- "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape, title, theme }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', { 'aiui-dark': theme === 'dark' }, className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n `brand-equity-item-${index + 1}`,\n data.containerName ? `brand-equity-item--${data.containerName}` : undefined,\n 'bg-container-primary box-border flex w-full flex-col p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n 'aiui-dark': data.theme === 'dark',\n },\n itemShape === 'round' ? 'rounded-box' : 'rounded-none',\n data.className\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex shrink-0 -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'border-container-primary size-[30px] overflow-hidden rounded-full border-2',\n 'relative inline-block shrink-0',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <div className=\"lg-desktop:size-[36px] size-[30px] shrink-0\">\n <Picture\n className=\"size-full object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nBrandEquity.displayName = 'BrandEquity'\n\nexport default withLayout(BrandEquity)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img, Theme } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape, title, theme }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', { 'aiui-dark': theme === 'dark' }, className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} theme={theme} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} theme={theme} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n theme,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n theme?: Theme\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n `brand-equity-item-${index + 1}`,\n data.containerName ? `brand-equity-item--${data.containerName}` : undefined,\n 'bg-container-secondary-1 box-border flex w-full flex-col p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n 'bg-container-primary': theme === 'dark',\n },\n itemShape === 'round' ? 'rounded-box' : 'rounded-none',\n data.className\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex shrink-0 -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'border-container-primary size-[30px] overflow-hidden rounded-full border-2',\n 'relative inline-block shrink-0',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <div className=\"lg-desktop:size-[36px] size-[30px] shrink-0\">\n <Picture\n className=\"size-full object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nBrandEquity.displayName = 'BrandEquity'\n\nexport default withLayout(BrandEquity)\n"],
5
+ "mappings": "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",
6
6
  "names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_react_responsive", "import_useExposure", "import_modules", "import_Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "itemShape", "title", "theme", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "Title", "item", "jIndex", "index", "BrandEquityItem", "data", "Picture"]
7
7
  }
package/dist/cjs/biz-components/Faq/Faq.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var x=Object.create;var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var w=(t,a)=>{for(var e in a)m(t,e,{get:a[e],enumerable:!0})},f=(t,a,e,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of b(a))!q.call(t,r)&&r!==e&&m(t,r,{get:()=>a[r],enumerable:!(o=h(a,r))||o.enumerable});return t};var N=(t,a,e)=>(e=t!=null?x(F(t)):{},f(a||!t||!t.__esModule?m(e,"default",{value:t,enumerable:!0}):e,t)),C=t=>f(m({},"__esModule",{value:!0}),t);var k={};w(k,{FaqItem:()=>l,default:()=>L});module.exports=C(k);var i=require("react/jsx-runtime"),s=N(require("react")),p=require("../../components/index.js"),n=require("../../helpers/index.js"),u=require("../../shared/Styles.js");const v=s.default.forwardRef(({data:t,className:a,defaultOpenIndex:e,classNames:o={}},r)=>{const d=(0,s.useRef)(null);(0,s.useImperativeHandle)(r,()=>d.current);const y=Array.isArray(e)?e:e!==void 0?[e]:[];return(0,i.jsx)("div",{ref:d,className:(0,n.cn)(a,o.root),children:(0,i.jsx)("div",{children:t?.productData?.map((g,c)=>(0,i.jsx)(l,{data:g,defaultOpen:y.includes(c),classNames:o},c))})})});v.displayName="Faq";const l=({data:t,defaultOpen:a=!1,classNames:e={}})=>{const[o,r]=(0,s.useState)(a),d=()=>{r(!o)};return(0,i.jsx)("div",{className:(0,n.cn)("tablet:py-6 border-b border-[#E4E5E6] py-4",e.item),children:(0,i.jsxs)("div",{children:[(0,i.jsxs)("div",{onClick:d,className:(0,n.cn)("tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",e.itemHeader),children:[(0,i.jsx)(p.Heading,{as:"h3",html:t?.title,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]",e.title)}),(0,i.jsx)("div",{className:(0,n.cn)("transition-transform duration-300",e.icon),children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,n.cn)("w-[20px] transition-transform duration-300",o&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,i.jsx)("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),(0,i.jsx)("div",{className:(0,n.cn)("overflow-hidden text-[#4A4C56] transition-all duration-300",o?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0",e.content),children:(0,i.jsx)(p.Text,{html:t?.richDesc??t?.desc,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline",e.description)})})]})})};l.displayName="FaqItem";var L=(0,u.withLayout)(v);
1
+ "use strict";"use client";var x=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var w=(t,a)=>{for(var e in a)d(t,e,{get:a[e],enumerable:!0})},f=(t,a,e,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of b(a))!q.call(t,r)&&r!==e&&d(t,r,{get:()=>a[r],enumerable:!(o=h(a,r))||o.enumerable});return t};var N=(t,a,e)=>(e=t!=null?x(F(t)):{},f(a||!t||!t.__esModule?d(e,"default",{value:t,enumerable:!0}):e,t)),C=t=>f(d({},"__esModule",{value:!0}),t);var k={};w(k,{FaqItem:()=>l,default:()=>L});module.exports=C(k);var i=require("react/jsx-runtime"),s=N(require("react")),p=require("../../components/index.js"),n=require("../../helpers/index.js"),u=require("../../shared/Styles.js");const v=s.default.forwardRef(({data:t,className:a,defaultOpenIndex:e,classNames:o={}},r)=>{const m=(0,s.useRef)(null);(0,s.useImperativeHandle)(r,()=>m.current);const y=Array.isArray(e)?e:e!==void 0?[e]:t?.openFirst??!0?[0]:[];return(0,i.jsx)("div",{ref:m,className:(0,n.cn)(a,o.root),children:(0,i.jsx)("div",{children:t?.productData?.map((g,c)=>(0,i.jsx)(l,{data:g,defaultOpen:y.includes(c),classNames:o},c))})})});v.displayName="Faq";const l=({data:t,defaultOpen:a=!1,classNames:e={}})=>{const[o,r]=(0,s.useState)(a),m=()=>{r(!o)};return(0,i.jsx)("div",{className:(0,n.cn)("tablet:py-6 border-b border-[#E4E5E6] py-4",e.item),children:(0,i.jsxs)("div",{children:[(0,i.jsxs)("div",{onClick:m,className:(0,n.cn)("tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",e.itemHeader),children:[(0,i.jsx)(p.Heading,{as:"h3",html:t?.title,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]",e.title)}),(0,i.jsx)("div",{className:(0,n.cn)("transition-transform duration-300",e.icon),children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,n.cn)("w-[20px] transition-transform duration-300",o&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,i.jsx)("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),(0,i.jsx)("div",{className:(0,n.cn)("overflow-hidden text-[#4A4C56] transition-all duration-300",o?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0",e.content),children:(0,i.jsx)(p.Text,{html:t?.richDesc??t?.desc,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline",e.description)})})]})})};l.displayName="FaqItem";var L=(0,u.withLayout)(v);
2
2
  //# sourceMappingURL=Faq.js.map
package/dist/cjs/biz-components/Faq/Faq.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Faq/Faq.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType, FaqSemanticName } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(\n ({ data, className, defaultOpenIndex, classNames = {} }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n // \u5C06 defaultOpenIndex \u8F6C\u6362\u4E3A\u6570\u7EC4\u65B9\u4FBF\u5224\u65AD\n const openIndexes = Array.isArray(defaultOpenIndex)\n ? defaultOpenIndex\n : defaultOpenIndex !== undefined\n ? [defaultOpenIndex]\n : []\n\n return (\n <div ref={innerRef} className={cn(className, classNames.root)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} defaultOpen={openIndexes.includes(index)} classNames={classNames} />\n ))}\n </div>\n </div>\n )\n }\n)\n\nFaq.displayName = 'Faq'\n\ninterface FaqItemProps {\n data: ItemType\n defaultOpen?: boolean\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n\nconst FaqItem = ({ data, defaultOpen = false, classNames = {} }: FaqItemProps) => {\n const [open, setOpen] = useState(defaultOpen)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className={cn('tablet:py-6 border-b border-[#E4E5E6] py-4', classNames.item)}>\n <div>\n <div\n onClick={handleToggle}\n className={cn(\n 'tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4',\n classNames.itemHeader\n )}\n >\n <Heading\n as=\"h3\"\n html={data?.title}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]',\n classNames.title\n )}\n />\n <div className={cn('transition-transform duration-300', classNames.icon)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden text-[#4A4C56] transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0',\n classNames.content\n )}\n >\n <Text\n html={data?.richDesc ?? data?.desc}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline',\n classNames.description\n )}\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAuBY,IAAAK,EAAA,6BAtBZC,EAA6D,oBAE7DC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAM,EAAAC,QAAM,WAChB,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,iBAAAC,EAAkB,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAAQ,CAC/D,MAAMC,KAAW,UAAuB,IAAI,KAC5C,uBAAoBD,EAAK,IAAMC,EAAS,OAAQ,EAGhD,MAAMC,EAAc,MAAM,QAAQJ,CAAgB,EAC9CA,EACAA,IAAqB,OACnB,CAACA,CAAgB,EACjB,CAAC,EAEP,SACE,OAAC,OAAI,IAAKG,EAAU,aAAW,MAAGJ,EAAWE,EAAW,IAAI,EAC1D,mBAAC,OACE,SAAAH,GAAM,aAAa,IAAI,CAACO,EAAWC,OAClC,OAAClB,EAAA,CAAoB,KAAMiB,EAAM,YAAaD,EAAY,SAASE,CAAK,EAAG,WAAYL,GAAzEK,CAAqF,CACpG,EACH,EACF,CAEJ,CACF,EAEAV,EAAI,YAAc,MAQlB,MAAMR,EAAU,CAAC,CAAE,KAAAU,EAAM,YAAAS,EAAc,GAAO,WAAAN,EAAa,CAAC,CAAE,IAAoB,CAChF,KAAM,CAACO,EAAMC,CAAO,KAAI,YAASF,CAAW,EAEtCG,EAAe,IAAM,CACzBD,EAAQ,CAACD,CAAI,CACf,EAEA,SACE,OAAC,OAAI,aAAW,MAAG,6CAA8CP,EAAW,IAAI,EAC9E,oBAAC,OACC,qBAAC,OACC,QAASS,EACT,aAAW,MACT,4EACAT,EAAW,UACb,EAEA,oBAAC,WACC,GAAG,KACH,KAAMH,GAAM,MACZ,aAAW,MACT,yFACAG,EAAW,KACb,EACF,KACA,OAAC,OAAI,aAAW,MAAG,oCAAqCA,EAAW,IAAI,EACrE,mBAAC,OACC,MAAM,6BACN,aAAW,MAAG,6CAA8CO,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,mBAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,KAGA,OAAC,OACC,aAAW,MACT,6DACAA,EAAO,iCAAmC,oBAC1CP,EAAW,OACb,EAEA,mBAAC,QACC,KAAMH,GAAM,UAAYA,GAAM,KAC9B,aAAW,MACT,8HACAG,EAAW,WACb,EACF,EACF,GACF,EACF,CAEJ,EAEAb,EAAQ,YAAc,UAEtB,IAAOC,KAAQ,cAAWO,CAAG",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType, FaqSemanticName } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(\n ({ data, className, defaultOpenIndex, classNames = {} }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n const openIndexes = Array.isArray(defaultOpenIndex)\n ? defaultOpenIndex\n : defaultOpenIndex !== undefined\n ? [defaultOpenIndex]\n : (data?.openFirst ?? true)\n ? [0]\n : []\n\n return (\n <div ref={innerRef} className={cn(className, classNames.root)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} defaultOpen={openIndexes.includes(index)} classNames={classNames} />\n ))}\n </div>\n </div>\n )\n }\n)\n\nFaq.displayName = 'Faq'\n\ninterface FaqItemProps {\n data: ItemType\n defaultOpen?: boolean\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n\nconst FaqItem = ({ data, defaultOpen = false, classNames = {} }: FaqItemProps) => {\n const [open, setOpen] = useState(defaultOpen)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className={cn('tablet:py-6 border-b border-[#E4E5E6] py-4', classNames.item)}>\n <div>\n <div\n onClick={handleToggle}\n className={cn(\n 'tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4',\n classNames.itemHeader\n )}\n >\n <Heading\n as=\"h3\"\n html={data?.title}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]',\n classNames.title\n )}\n />\n <div className={cn('transition-transform duration-300', classNames.icon)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden text-[#4A4C56] transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0',\n classNames.content\n )}\n >\n <Text\n html={data?.richDesc ?? data?.desc}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline',\n classNames.description\n )}\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAwBY,IAAAK,EAAA,6BAvBZC,EAA6D,oBAE7DC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAM,EAAAC,QAAM,WAChB,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,iBAAAC,EAAkB,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAAQ,CAC/D,MAAMC,KAAW,UAAuB,IAAI,KAC5C,uBAAoBD,EAAK,IAAMC,EAAS,OAAQ,EAEhD,MAAMC,EAAc,MAAM,QAAQJ,CAAgB,EAC9CA,EACAA,IAAqB,OACnB,CAACA,CAAgB,EAChBF,GAAM,WAAa,GAClB,CAAC,CAAC,EACF,CAAC,EAET,SACE,OAAC,OAAI,IAAKK,EAAU,aAAW,MAAGJ,EAAWE,EAAW,IAAI,EAC1D,mBAAC,OACE,SAAAH,GAAM,aAAa,IAAI,CAACO,EAAWC,OAClC,OAAClB,EAAA,CAAoB,KAAMiB,EAAM,YAAaD,EAAY,SAASE,CAAK,EAAG,WAAYL,GAAzEK,CAAqF,CACpG,EACH,EACF,CAEJ,CACF,EAEAV,EAAI,YAAc,MAQlB,MAAMR,EAAU,CAAC,CAAE,KAAAU,EAAM,YAAAS,EAAc,GAAO,WAAAN,EAAa,CAAC,CAAE,IAAoB,CAChF,KAAM,CAACO,EAAMC,CAAO,KAAI,YAASF,CAAW,EAEtCG,EAAe,IAAM,CACzBD,EAAQ,CAACD,CAAI,CACf,EAEA,SACE,OAAC,OAAI,aAAW,MAAG,6CAA8CP,EAAW,IAAI,EAC9E,oBAAC,OACC,qBAAC,OACC,QAASS,EACT,aAAW,MACT,4EACAT,EAAW,UACb,EAEA,oBAAC,WACC,GAAG,KACH,KAAMH,GAAM,MACZ,aAAW,MACT,yFACAG,EAAW,KACb,EACF,KACA,OAAC,OAAI,aAAW,MAAG,oCAAqCA,EAAW,IAAI,EACrE,mBAAC,OACC,MAAM,6BACN,aAAW,MAAG,6CAA8CO,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,mBAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,KAGA,OAAC,OACC,aAAW,MACT,6DACAA,EAAO,iCAAmC,oBAC1CP,EAAW,OACb,EAEA,mBAAC,QACC,KAAMH,GAAM,UAAYA,GAAM,KAC9B,aAAW,MACT,8HACAG,EAAW,WACb,EACF,EACF,GACF,EACF,CAEJ,EAEAb,EAAQ,YAAc,UAEtB,IAAOC,KAAQ,cAAWO,CAAG",
6
6
  "names": ["Faq_exports", "__export", "FaqItem", "Faq_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "Faq", "React", "data", "className", "defaultOpenIndex", "classNames", "ref", "innerRef", "openIndexes", "item", "index", "defaultOpen", "open", "setOpen", "handleToggle"]
7
7
  }
package/dist/cjs/biz-components/Faq/types.d.ts CHANGED
@@ -10,6 +10,7 @@ export type FaqSemanticName = 'root' | 'item' | 'itemHeader' | 'title' | 'icon'
10
10
  export interface FaqProps {
11
11
  data: {
12
12
  productData: FaqItem[];
13
+ openFirst?: boolean;
13
14
  };
14
15
  className?: string;
15
16
  /** 默认展开的 item 索引，可以是单个数字或数字数组 */
package/dist/cjs/biz-components/Faq/types.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var o=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of m(e))!c.call(t,a)&&a!==n&&i(t,a,{get:()=>e[a],enumerable:!(r=s(e,a))||r.enumerable});return t};var p=t=>o(i({},"__esModule",{value:!0}),t);var d={};module.exports=p(d);
1
+ "use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var c=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of o(e))!m.call(t,a)&&a!==n&&i(t,a,{get:()=>e[a],enumerable:!(r=s(e,a))||r.enumerable});return t};var p=t=>c(i({},"__esModule",{value:!0}),t);var d={};module.exports=p(d);
2
2
  //# sourceMappingURL=types.js.map
package/dist/cjs/biz-components/Faq/types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Faq/types.ts"],
4
- "sourcesContent": ["import type { Media } from '../../types/props.js'\n\nexport interface FaqItem {\n title: string\n desc: string\n richDesc: string\n img: Media\n}\n\n/** Faq \u7EC4\u4EF6\u8BED\u4E49\u5316\u6837\u5F0F\u540D\u79F0 */\nexport type FaqSemanticName = 'root' | 'item' | 'itemHeader' | 'title' | 'icon' | 'content' | 'description'\n\nexport interface FaqProps {\n data: {\n productData: FaqItem[]\n }\n className?: string\n /** \u9ED8\u8BA4\u5C55\u5F00\u7684 item \u7D22\u5F15\uFF0C\u53EF\u4EE5\u662F\u5355\u4E2A\u6570\u5B57\u6216\u6570\u5B57\u6570\u7EC4 */\n defaultOpenIndex?: number | number[]\n /** \u8BED\u4E49\u5316\u6837\u5F0F\u900F\u4F20 */\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n"],
4
+ "sourcesContent": ["import type { Media } from '../../types/props.js'\n\nexport interface FaqItem {\n title: string\n desc: string\n richDesc: string\n img: Media\n}\n\n/** Faq \u7EC4\u4EF6\u8BED\u4E49\u5316\u6837\u5F0F\u540D\u79F0 */\nexport type FaqSemanticName = 'root' | 'item' | 'itemHeader' | 'title' | 'icon' | 'content' | 'description'\n\nexport interface FaqProps {\n data: {\n productData: FaqItem[]\n openFirst?: boolean\n }\n className?: string\n /** \u9ED8\u8BA4\u5C55\u5F00\u7684 item \u7D22\u5F15\uFF0C\u53EF\u4EE5\u662F\u5355\u4E2A\u6570\u5B57\u6216\u6570\u5B57\u6570\u7EC4 */\n defaultOpenIndex?: number | number[]\n /** \u8BED\u4E49\u5316\u6837\u5F0F\u900F\u4F20 */\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n"],
5
5
  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
6
6
  "names": ["types_exports", "__toCommonJS"]
7
7
  }
package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { Media, Theme } from '../../types/props.js';
2
+ import type { Media as MediaType, Theme } from '../../types/props.js';
3
3
  export type MediaSceneSwitcherV2SemanticName = 'root' | 'header' | 'title' | 'subtitle' | 'container' | 'tabList' | 'tabItem' | 'tabTitle' | 'tabDescription' | 'mediaWrapper' | 'media' | 'swiper' | 'slide' | 'slideMedia' | 'slideContent';
4
4
  /**
5
5
  * 场景项数据接口
@@ -11,11 +11,11 @@ export interface MediaSceneSwitcherV2Item {
11
11
  description?: string;
12
12
  /** 场景媒体（图片/视频） */
13
13
  media: {
14
- mobile?: Media;
15
- tablet?: Media;
16
- laptop?: Media;
17
- desktop?: Media;
18
- lgDesktop?: Media;
14
+ mobile?: MediaType;
15
+ tablet?: MediaType;
16
+ laptop?: MediaType;
17
+ desktop?: MediaType;
18
+ lgDesktop?: MediaType;
19
19
  };
20
20
  }
21
21
  /**
package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var Y=Object.create;var V=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var Q=(t,i)=>{for(var l in i)V(t,l,{get:i[l],enumerable:!0})},H=(t,i,l,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let d of $(i))!K.call(t,d)&&d!==l&&V(t,d,{get:()=>i[d],enumerable:!(p=_(i,d))||p.enumerable});return t};var P=(t,i,l)=>(l=t!=null?Y(q(t)):{},H(i||!t||!t.__esModule?V(l,"default",{value:t,enumerable:!0}):l,t)),G=t=>H(V({},"__esModule",{value:!0}),t);var ie={};Q(ie,{default:()=>te});module.exports=G(ie);var r=require("react/jsx-runtime"),c=P(require("react")),L=require("swiper/react"),y=require("swiper/modules"),v=require("react-responsive"),a=require("../../helpers/index.js"),B=P(require("../../components/picture.js")),m=require("../../components/index.js"),j=require("../../shared/Styles.js");const C=[{key:"lgDesktop",width:1920},{key:"desktop",width:1440},{key:"laptop",width:1024},{key:"tablet",width:768},{key:"mobile",width:390}],J=(t,i)=>t[i]?.mimeType==="video/mp4",X=t=>C.filter(({key:l})=>t[l]?.url&&t[l]?.mimeType!=="video/mp4").map(({key:l,width:p})=>`${t[l].url} ${p}`).join(", "),Z=(t,i)=>{for(const{key:l}of C)if(t[l]?.alt)return t[l].alt;return i},W=({media:t,alt:i,className:l})=>{const p=(0,v.useMediaQuery)({minWidth:1920}),d=(0,v.useMediaQuery)({minWidth:1440,maxWidth:1919}),S=(0,v.useMediaQuery)({minWidth:1025,maxWidth:1439}),u=(0,v.useMediaQuery)({minWidth:768,maxWidth:1024}),f=c.useMemo(()=>{if(p&&t.lgDesktop?.url)return"lgDesktop";if(d&&t.desktop?.url)return"desktop";if(S&&t.laptop?.url)return"laptop";if(u&&t.tablet?.url)return"tablet";if(t.mobile?.url)return"mobile";for(const{key:x}of C)if(t[x]?.url)return x;return"desktop"},[p,d,S,u,t]),s=t[f];if(!s?.url)return null;if(J(t,f))return(0,r.jsx)("video",{src:s.url,className:l,autoPlay:!0,loop:!0,muted:!0,playsInline:!0});const M=X(t);return(0,r.jsx)(B.default,{source:M||s.url,alt:Z(t,i),className:l,imgClassName:"size-full object-cover"})},ee=3e3,F=c.forwardRef(({className:t,classNames:i={},data:l,onSceneChange:p,...d},S)=>{const{title:u,subtitle:f,items:s,defaultActiveIndex:M=0,layout:x="left",autoplay:h=!0,autoplayDelay:g=ee}=l,[n,R]=c.useState(M),E=c.useRef(null),w=c.useRef(0),T=c.useRef([]),I=(0,v.useMediaQuery)({minWidth:1025});c.useEffect(()=>!h||s.length<=1||!I?void 0:((()=>{w.current=window.setInterval(()=>{R(e=>(e+1)%s.length)},g)})(),()=>{w.current&&window.clearInterval(w.current)}),[h,g,s.length,I]),c.useEffect(()=>{if(!I||!T.current[n])return;const o=T.current[n],e=o?.parentElement;if(!e||e.scrollHeight<=e.clientHeight)return;const k=requestAnimationFrame(()=>{const D=e.getBoundingClientRect(),N=o.getBoundingClientRect();if(N.top>=D.top&&N.bottom<=D.bottom)return;const U=N.top-D.top-e.clientHeight/2+N.height/2;e.scrollTo({top:e.scrollTop+U,behavior:"smooth"})});return()=>cancelAnimationFrame(k)},[n,I]);const A=c.useCallback(o=>{R(o),p?.(o,s[o]),E.current?.slideTo(o),h&&s.length>1&&(w.current&&window.clearInterval(w.current),w.current=window.setInterval(()=>{R(e=>(e+1)%s.length)},g))},[s,p,h,g]),O=c.useCallback(o=>{const e=o.realIndex;R(e),p?.(e,s[e])},[s,p]),b=s[n],z=x==="top";return(0,r.jsxs)("div",{ref:S,className:(0,a.cn)("scene-switcher-root","text-info-primary w-full",t,i.root,{"aiui-dark":l.theme==="dark"}),...d,children:[(u||f)&&(0,r.jsxs)("div",{className:(0,a.cn)("scene-switcher-header mb-6",i.header),children:[u&&(0,r.jsx)(m.Heading,{as:"h2",size:4,html:u,className:(0,a.cn)("scene-switcher-title",i.title)}),f&&(0,r.jsx)(m.Text,{as:"p",size:3,className:(0,a.cn)("",i?.subtitle),html:f})]}),(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-swiper","laptop:hidden !overflow-visible",i.swiper),children:(0,r.jsx)(L.Swiper,{modules:[y.FreeMode,y.Mousewheel,y.Autoplay],onSwiper:o=>{E.current=o},className:"!overflow-visible",onSlideChange:O,slidesPerView:"auto",spaceBetween:12,freeMode:!0,mousewheel:{forceToAxis:!0},initialSlide:M,loop:h&&s.length>1,autoplay:h&&s.length>1?{delay:g,disableOnInteraction:!1}:!1,breakpoints:{768:{spaceBetween:16}},children:s.map((o,e)=>(0,r.jsx)(L.SwiperSlide,{className:"h-[462px] !w-[296px]",children:(0,r.jsxs)("div",{className:(0,a.cn)("scene-switcher-slide","flex cursor-pointer flex-col",i.slide),onClick:()=>A(e),children:[(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-slide-media","rounded-box relative aspect-[296/320] w-full overflow-hidden",i.slideMedia),children:(0,r.jsx)(W,{media:o.media,alt:o.title,className:"rounded-t-box size-full overflow-hidden object-cover"})}),(0,r.jsxs)("div",{className:(0,a.cn)("scene-switcher-slide-content"," mt-6 border-t pt-4",n===e?"border-info-primary border-t-4":"border-lines-primary",i.slideContent),children:[(0,r.jsx)(m.Heading,{className:(0,a.cn)("scene-switcher-tab-title ",n===e?"text-info-primary":"text-info-tertiary",o.title),size:3,as:"h3",html:o.title}),o.description&&(0,r.jsx)(m.Text,{className:(0,a.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",n===e?"text-info-primary":"text-info-tertiary"),html:o.description})]})]})},e))})}),z&&(0,r.jsxs)("div",{className:(0,a.cn)("scene-switcher-container","laptop:flex laptop:flex-col hidden","laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]",i.container),children:[(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:b&&(0,r.jsx)(W,{media:b.media,alt:b.title,className:(0,a.cn)("scene-switcher-media","rounded-box size-full object-cover",i.media)})}),(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-tab-list","border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t",i.tabList),children:s.map((o,e)=>(0,r.jsxs)("div",{ref:k=>{T.current[e]=k},className:(0,a.cn)("scene-switcher-tab-item","desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors",n===e?"border-info-primary border-t-4":"hover:border-lines-primary border-transparent",i.tabItem),onClick:()=>A(e),role:"button","aria-selected":n===e,children:[(0,r.jsx)(m.Heading,{className:(0,a.cn)("scene-switcher-tab-title line-clamp-2",n===e?"text-info-primary":"text-info-tertiary",o.title),size:3,as:"h3",html:o.title}),o.description&&(0,r.jsx)(m.Text,{className:(0,a.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",n===e?"text-info-primary":"text-info-tertiary"),html:o.description})]},e))})]}),!z&&(0,r.jsxs)("div",{className:(0,a.cn)("scene-switcher-container","laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]",x==="right"&&"flex-row-reverse",i.container),children:[(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-tab-list","laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center",i.tabList),children:(0,r.jsx)("div",{className:"flex max-h-full w-full flex-col overflow-y-auto",children:s.map((o,e)=>(0,r.jsxs)(c.Fragment,{children:[e>0&&(0,r.jsx)("div",{className:"border-lines-primary h-8 shrink-0 border-l-4"}),(0,r.jsxs)("div",{ref:k=>{T.current[e]=k},className:(0,a.cn)("scene-switcher-tab-item","shrink-0 cursor-pointer border-l-4 pl-5",n===e?"border-info-primary border-l-[6px]":"border-lines-primary hover:border-info-tertiary",i.tabItem),onClick:()=>A(e),role:"button","aria-selected":n===e,children:[(0,r.jsx)(m.Heading,{className:(0,a.cn)("scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2",n===e?"text-info-primary":"text-info-tertiary",o.title),size:3,as:"h3",html:o.title}),o.description&&(0,r.jsx)(m.Text,{className:(0,a.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",n===e?"text-info-primary":"text-info-tertiary hidden"),html:o.description})]})]},e))})}),(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:b&&(0,r.jsx)(W,{media:b.media,alt:b.title,className:(0,a.cn)("scene-switcher-media","rounded-box size-full h-full overflow-visible object-cover",i.media)})})]})]})});F.displayName="MediaSceneSwitcherV2";var te=(0,j.withLayout)(F);
1
+ "use strict";"use client";var U=Object.create;var k=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var G=(a,i)=>{for(var n in i)k(a,n,{get:i[n],enumerable:!0})},z=(a,i,n,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let m of _(i))!Q.call(a,m)&&m!==n&&k(a,m,{get:()=>i[m],enumerable:!(d=Y(i,m))||d.enumerable});return a};var H=(a,i,n)=>(n=a!=null?U(q(a)):{},z(i||!a||!a.__esModule?k(n,"default",{value:a,enumerable:!0}):n,a)),J=a=>z(k({},"__esModule",{value:!0}),a);var Z={};G(Z,{default:()=>X});module.exports=J(Z);var t=require("react/jsx-runtime"),p=H(require("react")),T=require("swiper/react"),u=require("swiper/modules"),P=require("react-responsive"),o=require("../../helpers/index.js"),c=require("../../components/index.js"),B=require("../../shared/Styles.js"),M=H(require("../Media/index.js"));const R=a=>({pcImage:a.lgDesktop,desktopImage:a.desktop,laptopImage:a.laptop,padImage:a.tablet,mobileImage:a.mobile}),K=3e3,F=p.forwardRef(({className:a,classNames:i={},data:n,onSceneChange:d,...m},O)=>{const{title:I,subtitle:V,items:l,defaultActiveIndex:A=0,layout:D="left",autoplay:h=!0,autoplayDelay:w=K}=n,[s,v]=p.useState(A),C=p.useRef(null),f=p.useRef(0),x=p.useRef([]),y=(0,P.useMediaQuery)({minWidth:1025});p.useEffect(()=>!h||l.length<=1||!y?void 0:((()=>{f.current=window.setInterval(()=>{v(e=>(e+1)%l.length)},w)})(),()=>{f.current&&window.clearInterval(f.current)}),[h,w,l.length,y]),p.useEffect(()=>{if(!y||!x.current[s])return;const r=x.current[s],e=r?.parentElement;if(!e||e.scrollHeight<=e.clientHeight)return;const b=requestAnimationFrame(()=>{const L=e.getBoundingClientRect(),S=r.getBoundingClientRect();if(S.top>=L.top&&S.bottom<=L.bottom)return;const j=S.top-L.top-e.clientHeight/2+S.height/2;e.scrollTo({top:e.scrollTop+j,behavior:"smooth"})});return()=>cancelAnimationFrame(b)},[s,y]);const N=p.useCallback(r=>{v(r),d?.(r,l[r]),C.current?.slideTo(r),h&&l.length>1&&(f.current&&window.clearInterval(f.current),f.current=window.setInterval(()=>{v(e=>(e+1)%l.length)},w))},[l,d,h,w]),W=p.useCallback(r=>{const e=r.realIndex;v(e),d?.(e,l[e])},[l,d]),g=l[s],E=D==="top";return(0,t.jsxs)("div",{ref:O,className:(0,o.cn)("scene-switcher-root","text-info-primary w-full",a,i.root,{"aiui-dark":n.theme==="dark"}),...m,children:[(I||V)&&(0,t.jsxs)("div",{className:(0,o.cn)("scene-switcher-header mb-6",i.header),children:[I&&(0,t.jsx)(c.Heading,{as:"h2",size:4,html:I,className:(0,o.cn)("scene-switcher-title",i.title)}),V&&(0,t.jsx)(c.Text,{as:"p",size:3,className:(0,o.cn)("",i?.subtitle),html:V})]}),(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-swiper","laptop:hidden !overflow-visible",i.swiper),children:(0,t.jsx)(T.Swiper,{modules:[u.FreeMode,u.Mousewheel,u.Autoplay],onSwiper:r=>{C.current=r},className:"!overflow-visible",onSlideChange:W,slidesPerView:"auto",spaceBetween:12,freeMode:!0,mousewheel:{forceToAxis:!0},initialSlide:A,loop:h&&l.length>1,autoplay:h&&l.length>1?{delay:w,disableOnInteraction:!1}:!1,breakpoints:{768:{spaceBetween:16}},children:l.map((r,e)=>(0,t.jsx)(T.SwiperSlide,{className:"h-[462px] !w-[296px]",children:(0,t.jsxs)("div",{className:(0,o.cn)("scene-switcher-slide","flex cursor-pointer flex-col",i.slide),onClick:()=>N(e),children:[(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-slide-media","rounded-box relative aspect-[296/320] w-full overflow-hidden",i.slideMedia),children:(0,t.jsx)(M.default,{...R(r.media),className:"rounded-t-box size-full overflow-hidden object-cover"})}),(0,t.jsxs)("div",{className:(0,o.cn)("scene-switcher-slide-content"," mt-6 border-t pt-4",s===e?"border-info-primary border-t-4":"border-lines-primary",i.slideContent),children:[(0,t.jsx)(c.Heading,{className:(0,o.cn)("scene-switcher-tab-title ",s===e?"text-info-primary":"text-info-tertiary",r.title),size:3,as:"h3",html:r.title}),r.description&&(0,t.jsx)(c.Text,{className:(0,o.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary"),html:r.description})]})]})},e))})}),E&&(0,t.jsxs)("div",{className:(0,o.cn)("scene-switcher-container","laptop:flex laptop:flex-col hidden","laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]",i.container),children:[(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:g&&(0,t.jsx)(M.default,{...R(g.media),className:(0,o.cn)("scene-switcher-media","rounded-box size-full object-cover",i.media)})}),(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-tab-list","border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t",i.tabList),children:l.map((r,e)=>(0,t.jsxs)("div",{ref:b=>{x.current[e]=b},className:(0,o.cn)("scene-switcher-tab-item","desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors",s===e?"border-info-primary border-t-4":"hover:border-lines-primary border-transparent",i.tabItem),onClick:()=>N(e),role:"button","aria-selected":s===e,children:[(0,t.jsx)(c.Heading,{className:(0,o.cn)("scene-switcher-tab-title line-clamp-2",s===e?"text-info-primary":"text-info-tertiary",r.title),size:3,as:"h3",html:r.title}),r.description&&(0,t.jsx)(c.Text,{className:(0,o.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary"),html:r.description})]},e))})]}),!E&&(0,t.jsxs)("div",{className:(0,o.cn)("scene-switcher-container","laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]",D==="right"&&"flex-row-reverse",i.container),children:[(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-tab-list","laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center",i.tabList),children:(0,t.jsx)("div",{className:"flex max-h-full w-full flex-col overflow-y-auto",children:l.map((r,e)=>(0,t.jsxs)(p.Fragment,{children:[e>0&&(0,t.jsx)("div",{className:"border-lines-primary h-8 shrink-0 border-l-4"}),(0,t.jsxs)("div",{ref:b=>{x.current[e]=b},className:(0,o.cn)("scene-switcher-tab-item","shrink-0 cursor-pointer border-l-4 pl-5",s===e?"border-info-primary border-l-[6px]":"border-lines-primary hover:border-info-tertiary",i.tabItem),onClick:()=>N(e),role:"button","aria-selected":s===e,children:[(0,t.jsx)(c.Heading,{className:(0,o.cn)("scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2",s===e?"text-info-primary":"text-info-tertiary",r.title),size:3,as:"h3",html:r.title}),r.description&&(0,t.jsx)(c.Text,{className:(0,o.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary hidden"),html:r.description})]})]},e))})}),(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:g&&(0,t.jsx)(M.default,{...R(g.media),className:(0,o.cn)("scene-switcher-media","rounded-box size-full h-full overflow-visible object-cover",i.media)})})]})]})});F.displayName="MediaSceneSwitcherV2";var X=(0,B.withLayout)(F);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaSceneSwitcherV2/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/index.js'\nimport Picture from '../../components/picture.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nexport type MediaSceneSwitcherV2SemanticName =\n | 'root'\n | 'header'\n | 'title'\n | 'subtitle'\n | 'container'\n | 'tabList'\n | 'tabItem'\n | 'tabTitle'\n | 'tabDescription'\n | 'mediaWrapper'\n | 'media'\n | 'swiper'\n | 'slide'\n | 'slideMedia'\n | 'slideContent'\n\n/**\n * \u573A\u666F\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Item {\n /** \u573A\u666F\u6807\u9898 */\n title: string\n /** \u573A\u666F\u63CF\u8FF0 */\n description?: string\n /** \u573A\u666F\u5A92\u4F53\uFF08\u56FE\u7247/\u89C6\u9891\uFF09 */\n media: {\n mobile?: Media\n tablet?: Media\n laptop?: Media\n desktop?: Media\n lgDesktop?: Media\n }\n}\n\n/**\n * \u5E03\u5C40\u6A21\u5F0F\n * - left: \u5DE6\u6587\u53F3\u56FE\uFF08laptop+ \u9ED8\u8BA4\uFF09\n * - right: \u5DE6\u56FE\u53F3\u6587\n * - top: \u4E0A\u56FE\u4E0B\u6587\uFF08swiper \u5361\u7247\u6A21\u5F0F\uFF09\n */\nexport type MediaSceneSwitcherV2Layout = 'left' | 'right' | 'top'\n\n/**\n * MediaSceneSwitcherV2 \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Data {\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u573A\u666F\u5217\u8868 */\n items: MediaSceneSwitcherV2Item[]\n /** \u9ED8\u8BA4\u9009\u4E2D\u7684\u573A\u666F\u7D22\u5F15 */\n defaultActiveIndex?: number\n /** \u5E03\u5C40\u6A21\u5F0F\uFF0C\u9ED8\u8BA4 text-left */\n layout?: MediaSceneSwitcherV2Layout\n /** \u662F\u5426\u5F00\u542F\u81EA\u52A8\u8F6E\u64AD\uFF0C\u9ED8\u8BA4 true */\n autoplay?: boolean\n /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 3000 */\n autoplayDelay?: number\n}\n\nexport interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: MediaSceneSwitcherV2Data\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n classNames?: Partial<Record<MediaSceneSwitcherV2SemanticName, string>>\n /** \u573A\u666F\u5207\u6362\u56DE\u8C03 */\n onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u5A92\u4F53\u7C7B\u578B\n */\ntype ResponsiveMedia = MediaSceneSwitcherV2Item['media']\n\n/** \u65AD\u70B9\u914D\u7F6E */\nconst BREAKPOINTS: { key: keyof ResponsiveMedia; width: number }[] = [\n { key: 'lgDesktop', width: 1920 },\n { key: 'desktop', width: 1440 },\n { key: 'laptop', width: 1024 },\n { key: 'tablet', width: 768 },\n { key: 'mobile', width: 390 },\n]\n\n/**\n * \u68C0\u67E5\u5F53\u524D\u65AD\u70B9\u7684\u5A92\u4F53\u662F\u5426\u4E3A\u89C6\u9891\n */\nconst isCurrentMediaVideo = (media: ResponsiveMedia, currentBreakpoint: keyof ResponsiveMedia): boolean => {\n return media[currentBreakpoint]?.mimeType === 'video/mp4'\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u5A92\u4F53\u5BF9\u8C61\u8F6C\u4E3A Picture source \u683C\u5F0F\u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"url1 1920, url2 1440, url3 1024\"\n */\nconst getImageSource = (media: ResponsiveMedia): string => {\n const sources = BREAKPOINTS.filter(({ key }) => media[key]?.url && media[key]?.mimeType !== 'video/mp4').map(\n ({ key, width }) => `${media[key]!.url} ${width}`\n )\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6 alt \u6587\u672C\n */\nconst getMediaAlt = (media: ResponsiveMedia, fallback: string): string => {\n for (const { key } of BREAKPOINTS) {\n if (media[key]?.alt) return media[key]!.alt\n }\n return fallback\n}\n\n/**\n * \u5A92\u4F53\u6E32\u67D3\u7EC4\u4EF6 - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u6839\u636E\u65AD\u70B9\u6E32\u67D3\u5BF9\u5E94\u8D44\u6E90\n */\nconst MediaRenderer: React.FC<{\n media: ResponsiveMedia\n alt: string\n className?: string\n}> = ({ media, alt, className }) => {\n const isLgDesktop = useMediaQuery({ minWidth: 1920 })\n const isDesktop = useMediaQuery({ minWidth: 1440, maxWidth: 1919 })\n const isLaptop = useMediaQuery({ minWidth: 1025, maxWidth: 1439 })\n const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1024 })\n\n // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9 key\n const currentBreakpoint = React.useMemo((): keyof ResponsiveMedia => {\n if (isLgDesktop && media.lgDesktop?.url) return 'lgDesktop'\n if (isDesktop && media.desktop?.url) return 'desktop'\n if (isLaptop && media.laptop?.url) return 'laptop'\n if (isTablet && media.tablet?.url) return 'tablet'\n if (media.mobile?.url) return 'mobile'\n\n // fallback: \u8FD4\u56DE\u7B2C\u4E00\u4E2A\u6709\u6548\u7684\u65AD\u70B9\n for (const { key } of BREAKPOINTS) {\n if (media[key]?.url) return key\n }\n return 'desktop'\n }, [isLgDesktop, isDesktop, isLaptop, isTablet, media])\n\n const currentMedia = media[currentBreakpoint]\n\n if (!currentMedia?.url) return null\n\n // \u5F53\u524D\u65AD\u70B9\u662F\u89C6\u9891\u5219\u6E32\u67D3\u89C6\u9891\n if (isCurrentMediaVideo(media, currentBreakpoint)) {\n return <video src={currentMedia.url} className={className} autoPlay loop muted playsInline />\n }\n\n // \u56FE\u7247\uFF1A\u4F7F\u7528 Picture \u7EC4\u4EF6\u7684\u54CD\u5E94\u5F0F\u683C\u5F0F\n const imageSource = getImageSource(media)\n\n return (\n <Picture\n source={imageSource || currentMedia.url}\n alt={getMediaAlt(media, alt)}\n className={className}\n imgClassName=\"size-full object-cover\"\n />\n )\n}\n\n/**\n * MediaSceneSwitcherV2 - \u591A\u573A\u666F\u5207\u6362\u7EC4\u4EF6\n *\n * @description \u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u573A\u666F\u7684\u5207\u6362\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\uFF1A\n * - mobile/tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40\n * - laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40\n */\nconst DEFAULT_AUTOPLAY_DELAY = 3000\n\nconst MediaSceneSwitcherV2 = React.forwardRef<HTMLDivElement, MediaSceneSwitcherV2Props>(\n ({ className, classNames = {}, data, onSceneChange, ...props }, ref) => {\n const {\n title,\n subtitle,\n items: scenes,\n defaultActiveIndex = 0,\n layout = 'left',\n autoplay = true,\n autoplayDelay = DEFAULT_AUTOPLAY_DELAY,\n } = data\n const [activeIndex, setActiveIndex] = React.useState(defaultActiveIndex)\n const swiperRef = React.useRef<SwiperType | null>(null)\n const intervalRef = React.useRef<number>(0)\n const tabRefs = React.useRef<(HTMLDivElement | null)[]>([])\n\n // \u5224\u65AD\u662F\u5426\u662F\u684C\u9762\u7AEF\n const isLaptopOrLarger = useMediaQuery({ minWidth: 1025 })\n\n // \u684C\u9762\u7AEF\u81EA\u52A8\u8F6E\u64AD\uFF08\u53EA\u5728 laptop+ \u751F\u6548\uFF0C\u624B\u673A\u7AEF\u7531 Swiper \u7684 onSlideChange \u540C\u6B65\uFF09\n React.useEffect(() => {\n if (!autoplay || scenes.length <= 1 || !isLaptopOrLarger) return\n\n const startAutoplay = () => {\n intervalRef.current = window.setInterval(() => {\n setActiveIndex(prev => (prev + 1) % scenes.length)\n }, autoplayDelay)\n }\n\n startAutoplay()\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [autoplay, autoplayDelay, scenes.length, isLaptopOrLarger])\n\n // \u5F53 activeIndex \u53D8\u5316\u65F6\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\uFF08\u4EC5\u5F53\u7236\u5BB9\u5668\u53EF\u6EDA\u52A8\u65F6\uFF09\n React.useEffect(() => {\n if (!isLaptopOrLarger || !tabRefs.current[activeIndex]) return\n\n const tabElement = tabRefs.current[activeIndex]\n const parentContainer = tabElement?.parentElement\n\n // \u68C0\u67E5\u7236\u5BB9\u5668\u662F\u5426\u53EF\u6EDA\u52A8\n if (!parentContainer || parentContainer.scrollHeight <= parentContainer.clientHeight) return\n\n // \u4F7F\u7528 requestAnimationFrame \u907F\u514D\u963B\u585E\u4E3B\u7EBF\u7A0B\n const rafId = requestAnimationFrame(() => {\n const containerRect = parentContainer.getBoundingClientRect()\n const tabRect = tabElement.getBoundingClientRect()\n\n // \u68C0\u67E5\u5143\u7D20\u662F\u5426\u5DF2\u5728\u53EF\u89C6\u533A\u57DF\u5185\n const isVisible = tabRect.top >= containerRect.top && tabRect.bottom <= containerRect.bottom\n\n // \u5982\u679C\u5DF2\u7ECF\u53EF\u89C1\uFF0C\u4E0D\u9700\u8981\u6EDA\u52A8\n if (isVisible) return\n\n // \u8BA1\u7B97\u6EDA\u52A8\u8DDD\u79BB\uFF0C\u8BA9 tab \u5C3D\u91CF\u5C45\u4E2D\u663E\u793A\n const scrollOffset = tabRect.top - containerRect.top - parentContainer.clientHeight / 2 + tabRect.height / 2\n\n parentContainer.scrollTo({\n top: parentContainer.scrollTop + scrollOffset,\n behavior: 'smooth',\n })\n })\n\n return () => cancelAnimationFrame(rafId)\n }, [activeIndex, isLaptopOrLarger])\n\n const handleSceneClick = React.useCallback(\n (index: number) => {\n setActiveIndex(index)\n onSceneChange?.(index, scenes[index])\n // \u540C\u6B65 swiper \u4F4D\u7F6E\n swiperRef.current?.slideTo(index)\n\n // \u91CD\u7F6E\u81EA\u52A8\u8F6E\u64AD\u8BA1\u65F6\u5668\n if (autoplay && scenes.length > 1) {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setActiveIndex(prev => (prev + 1) % scenes.length)\n }, autoplayDelay)\n }\n },\n [scenes, onSceneChange, autoplay, autoplayDelay]\n )\n\n const handleSlideChange = React.useCallback(\n (swiper: SwiperType) => {\n // \u4F7F\u7528 realIndex \u4EE5\u6B63\u786E\u5904\u7406 loop \u6A21\u5F0F\n const index = swiper.realIndex\n setActiveIndex(index)\n onSceneChange?.(index, scenes[index])\n },\n [scenes, onSceneChange]\n )\n\n const activeScene = scenes[activeIndex]\n\n const isMediaTop = layout === 'top'\n\n return (\n <div\n ref={ref}\n className={cn('scene-switcher-root', 'text-info-primary w-full', className, classNames.root, {\n 'aiui-dark': data.theme === 'dark',\n })}\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {(title || subtitle) && (\n <div className={cn('scene-switcher-header mb-6', classNames.header)}>\n {title && (\n <Heading as=\"h2\" size={4} html={title} className={cn('scene-switcher-title', classNames.title)} />\n )}\n {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n </div>\n )}\n {/* Mobile/Tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40 */}\n <div className={cn('scene-switcher-swiper', 'laptop:hidden !overflow-visible', classNames.swiper)}>\n <Swiper\n modules={[FreeMode, Mousewheel, Autoplay]}\n onSwiper={swiper => {\n swiperRef.current = swiper\n }}\n className=\"!overflow-visible\"\n onSlideChange={handleSlideChange}\n slidesPerView=\"auto\"\n spaceBetween={12}\n freeMode={true}\n mousewheel={{ forceToAxis: true }}\n initialSlide={defaultActiveIndex}\n loop={autoplay && scenes.length > 1}\n autoplay={autoplay && scenes.length > 1 ? { delay: autoplayDelay, disableOnInteraction: false } : false}\n breakpoints={{\n 768: { spaceBetween: 16 },\n }}\n >\n {scenes.map((scene, index) => (\n <SwiperSlide key={index} className=\"h-[462px] !w-[296px]\">\n <div\n className={cn('scene-switcher-slide', 'flex cursor-pointer flex-col', classNames.slide)}\n onClick={() => handleSceneClick(index)}\n >\n {/* \u5A92\u4F53 */}\n <div\n className={cn(\n 'scene-switcher-slide-media',\n 'rounded-box relative aspect-[296/320] w-full overflow-hidden',\n classNames.slideMedia\n )}\n >\n <MediaRenderer\n media={scene.media}\n alt={scene.title}\n className=\"rounded-t-box size-full overflow-hidden object-cover\"\n />\n </div>\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'scene-switcher-slide-content',\n ' mt-6 border-t pt-4',\n activeIndex === index ? 'border-info-primary border-t-4' : 'border-lines-primary',\n classNames.slideContent\n )}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title ',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n )}\n html={scene.description}\n />\n )}\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n\n {/* Laptop+: media-top \u5E03\u5C40 (\u4E0A\u56FE\u4E0B\u6587) */}\n {isMediaTop && (\n <div\n className={cn(\n 'scene-switcher-container',\n 'laptop:flex laptop:flex-col hidden',\n 'laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]',\n classNames.container\n )}\n >\n {/* \u5A92\u4F53\u533A\u57DF - \u663E\u793A\u5F53\u524D\u9009\u4E2D */}\n <div\n className={cn(\n 'scene-switcher-media-wrapper',\n 'rounded-box flex-1 overflow-hidden',\n classNames.mediaWrapper\n )}\n >\n {activeScene && (\n <MediaRenderer\n media={activeScene.media}\n alt={activeScene.title}\n className={cn('scene-switcher-media', 'rounded-box size-full object-cover', classNames.media)}\n />\n )}\n </div>\n\n {/* Tab \u5217\u8868 - \u6A2A\u5411\u6392\u5217 */}\n <div\n className={cn(\n 'scene-switcher-tab-list',\n 'border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t',\n classNames.tabList\n )}\n >\n {scenes.map((scene, index) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n className={cn(\n 'scene-switcher-tab-item',\n 'desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors',\n activeIndex === index\n ? 'border-info-primary border-t-4'\n : 'hover:border-lines-primary border-transparent',\n classNames.tabItem\n )}\n onClick={() => handleSceneClick(index)}\n role=\"button\"\n aria-selected={activeIndex === index}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title line-clamp-2',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n )}\n html={scene.description}\n />\n )}\n </div>\n ))}\n </div>\n </div>\n )}\n\n {/* Laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40 */}\n {!isMediaTop && (\n <div\n className={cn(\n 'scene-switcher-container',\n 'laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden',\n 'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n layout === 'right' && 'flex-row-reverse',\n classNames.container\n )}\n >\n {/* Tab \u5217\u8868 - \u5916\u5C42\u5C45\u4E2D */}\n <div\n className={cn(\n 'scene-switcher-tab-list',\n 'laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center',\n classNames.tabList\n )}\n >\n {/* \u5185\u5C42\u6EDA\u52A8 */}\n <div className=\"flex max-h-full w-full flex-col overflow-y-auto\">\n {scenes.map((scene, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"border-lines-primary h-8 shrink-0 border-l-4\" />}\n <div\n ref={el => {\n tabRefs.current[index] = el\n }}\n className={cn(\n 'scene-switcher-tab-item',\n 'shrink-0 cursor-pointer border-l-4 pl-5',\n activeIndex === index\n ? 'border-info-primary border-l-[6px]'\n : 'border-lines-primary hover:border-info-tertiary',\n classNames.tabItem\n )}\n onClick={() => handleSceneClick(index)}\n role=\"button\"\n aria-selected={activeIndex === index}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary hidden'\n )}\n html={scene.description}\n />\n )}\n </div>\n </React.Fragment>\n ))}\n </div>\n </div>\n\n {/* \u5A92\u4F53\u533A\u57DF */}\n <div\n className={cn(\n 'scene-switcher-media-wrapper',\n 'rounded-box flex-1 overflow-hidden',\n classNames.mediaWrapper\n )}\n >\n {activeScene && (\n <MediaRenderer\n media={activeScene.media}\n alt={activeScene.title}\n className={cn(\n 'scene-switcher-media',\n 'rounded-box size-full h-full overflow-visible object-cover',\n classNames.media\n )}\n />\n )}\n </div>\n </div>\n )}\n </div>\n )\n }\n)\n\nMediaSceneSwitcherV2.displayName = 'MediaSceneSwitcherV2'\nexport default withLayout(MediaSceneSwitcherV2)\n"],
5
- "mappings": "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",
6
- "names": ["MediaSceneSwitcherV2_exports", "__export", "MediaSceneSwitcherV2_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react", "import_modules", "import_react_responsive", "import_helpers", "import_picture", "import_components", "import_Styles", "BREAKPOINTS", "isCurrentMediaVideo", "media", "currentBreakpoint", "getImageSource", "key", "width", "getMediaAlt", "fallback", "MediaRenderer", "alt", "className", "isLgDesktop", "isDesktop", "isLaptop", "isTablet", "currentMedia", "imageSource", "Picture", "DEFAULT_AUTOPLAY_DELAY", "MediaSceneSwitcherV2", "classNames", "data", "onSceneChange", "props", "ref", "title", "subtitle", "scenes", "defaultActiveIndex", "layout", "autoplay", "autoplayDelay", "activeIndex", "setActiveIndex", "swiperRef", "intervalRef", "tabRefs", "isLaptopOrLarger", "prev", "tabElement", "parentContainer", "rafId", "containerRect", "tabRect", "scrollOffset", "handleSceneClick", "index", "handleSlideChange", "swiper", "activeScene", "isMediaTop", "scene", "el"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\n\nexport type MediaSceneSwitcherV2SemanticName =\n | 'root'\n | 'header'\n | 'title'\n | 'subtitle'\n | 'container'\n | 'tabList'\n | 'tabItem'\n | 'tabTitle'\n | 'tabDescription'\n | 'mediaWrapper'\n | 'media'\n | 'swiper'\n | 'slide'\n | 'slideMedia'\n | 'slideContent'\n\n/**\n * \u573A\u666F\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Item {\n /** \u573A\u666F\u6807\u9898 */\n title: string\n /** \u573A\u666F\u63CF\u8FF0 */\n description?: string\n /** \u573A\u666F\u5A92\u4F53\uFF08\u56FE\u7247/\u89C6\u9891\uFF09 */\n media: {\n mobile?: MediaType\n tablet?: MediaType\n laptop?: MediaType\n desktop?: MediaType\n lgDesktop?: MediaType\n }\n}\n\n/**\n * \u5E03\u5C40\u6A21\u5F0F\n * - left: \u5DE6\u6587\u53F3\u56FE\uFF08laptop+ \u9ED8\u8BA4\uFF09\n * - right: \u5DE6\u56FE\u53F3\u6587\n * - top: \u4E0A\u56FE\u4E0B\u6587\uFF08swiper \u5361\u7247\u6A21\u5F0F\uFF09\n */\nexport type MediaSceneSwitcherV2Layout = 'left' | 'right' | 'top'\n\n/**\n * MediaSceneSwitcherV2 \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Data {\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u573A\u666F\u5217\u8868 */\n items: MediaSceneSwitcherV2Item[]\n /** \u9ED8\u8BA4\u9009\u4E2D\u7684\u573A\u666F\u7D22\u5F15 */\n defaultActiveIndex?: number\n /** \u5E03\u5C40\u6A21\u5F0F\uFF0C\u9ED8\u8BA4 text-left */\n layout?: MediaSceneSwitcherV2Layout\n /** \u662F\u5426\u5F00\u542F\u81EA\u52A8\u8F6E\u64AD\uFF0C\u9ED8\u8BA4 true */\n autoplay?: boolean\n /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 3000 */\n autoplayDelay?: number\n}\n\nexport interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: MediaSceneSwitcherV2Data\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n classNames?: Partial<Record<MediaSceneSwitcherV2SemanticName, string>>\n /** \u573A\u666F\u5207\u6362\u56DE\u8C03 */\n onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void\n}\n\nconst toMediaProps = (media: MediaSceneSwitcherV2Item['media']) => ({\n pcImage: media.lgDesktop,\n desktopImage: media.desktop,\n laptopImage: media.laptop,\n padImage: media.tablet,\n mobileImage: media.mobile,\n})\n\n/**\n * MediaSceneSwitcherV2 - \u591A\u573A\u666F\u5207\u6362\u7EC4\u4EF6\n *\n * @description \u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u573A\u666F\u7684\u5207\u6362\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\uFF1A\n * - mobile/tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40\n * - laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40\n */\nconst DEFAULT_AUTOPLAY_DELAY = 3000\n\nconst MediaSceneSwitcherV2 = React.forwardRef<HTMLDivElement, MediaSceneSwitcherV2Props>(\n ({ className, classNames = {}, data, onSceneChange, ...props }, ref) => {\n const {\n title,\n subtitle,\n items: scenes,\n defaultActiveIndex = 0,\n layout = 'left',\n autoplay = true,\n autoplayDelay = DEFAULT_AUTOPLAY_DELAY,\n } = data\n const [activeIndex, setActiveIndex] = React.useState(defaultActiveIndex)\n const swiperRef = React.useRef<SwiperType | null>(null)\n const intervalRef = React.useRef<number>(0)\n const tabRefs = React.useRef<(HTMLDivElement | null)[]>([])\n\n // \u5224\u65AD\u662F\u5426\u662F\u684C\u9762\u7AEF\n const isLaptopOrLarger = useMediaQuery({ minWidth: 1025 })\n\n // \u684C\u9762\u7AEF\u81EA\u52A8\u8F6E\u64AD\uFF08\u53EA\u5728 laptop+ \u751F\u6548\uFF0C\u624B\u673A\u7AEF\u7531 Swiper \u7684 onSlideChange \u540C\u6B65\uFF09\n React.useEffect(() => {\n if (!autoplay || scenes.length <= 1 || !isLaptopOrLarger) return\n\n const startAutoplay = () => {\n intervalRef.current = window.setInterval(() => {\n setActiveIndex(prev => (prev + 1) % scenes.length)\n }, autoplayDelay)\n }\n\n startAutoplay()\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [autoplay, autoplayDelay, scenes.length, isLaptopOrLarger])\n\n // \u5F53 activeIndex \u53D8\u5316\u65F6\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\uFF08\u4EC5\u5F53\u7236\u5BB9\u5668\u53EF\u6EDA\u52A8\u65F6\uFF09\n React.useEffect(() => {\n if (!isLaptopOrLarger || !tabRefs.current[activeIndex]) return\n\n const tabElement = tabRefs.current[activeIndex]\n const parentContainer = tabElement?.parentElement\n\n // \u68C0\u67E5\u7236\u5BB9\u5668\u662F\u5426\u53EF\u6EDA\u52A8\n if (!parentContainer || parentContainer.scrollHeight <= parentContainer.clientHeight) return\n\n // \u4F7F\u7528 requestAnimationFrame \u907F\u514D\u963B\u585E\u4E3B\u7EBF\u7A0B\n const rafId = requestAnimationFrame(() => {\n const containerRect = parentContainer.getBoundingClientRect()\n const tabRect = tabElement.getBoundingClientRect()\n\n // \u68C0\u67E5\u5143\u7D20\u662F\u5426\u5DF2\u5728\u53EF\u89C6\u533A\u57DF\u5185\n const isVisible = tabRect.top >= containerRect.top && tabRect.bottom <= containerRect.bottom\n\n // \u5982\u679C\u5DF2\u7ECF\u53EF\u89C1\uFF0C\u4E0D\u9700\u8981\u6EDA\u52A8\n if (isVisible) return\n\n // \u8BA1\u7B97\u6EDA\u52A8\u8DDD\u79BB\uFF0C\u8BA9 tab \u5C3D\u91CF\u5C45\u4E2D\u663E\u793A\n const scrollOffset = tabRect.top - containerRect.top - parentContainer.clientHeight / 2 + tabRect.height / 2\n\n parentContainer.scrollTo({\n top: parentContainer.scrollTop + scrollOffset,\n behavior: 'smooth',\n })\n })\n\n return () => cancelAnimationFrame(rafId)\n }, [activeIndex, isLaptopOrLarger])\n\n const handleSceneClick = React.useCallback(\n (index: number) => {\n setActiveIndex(index)\n onSceneChange?.(index, scenes[index])\n // \u540C\u6B65 swiper \u4F4D\u7F6E\n swiperRef.current?.slideTo(index)\n\n // \u91CD\u7F6E\u81EA\u52A8\u8F6E\u64AD\u8BA1\u65F6\u5668\n if (autoplay && scenes.length > 1) {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setActiveIndex(prev => (prev + 1) % scenes.length)\n }, autoplayDelay)\n }\n },\n [scenes, onSceneChange, autoplay, autoplayDelay]\n )\n\n const handleSlideChange = React.useCallback(\n (swiper: SwiperType) => {\n // \u4F7F\u7528 realIndex \u4EE5\u6B63\u786E\u5904\u7406 loop \u6A21\u5F0F\n const index = swiper.realIndex\n setActiveIndex(index)\n onSceneChange?.(index, scenes[index])\n },\n [scenes, onSceneChange]\n )\n\n const activeScene = scenes[activeIndex]\n\n const isMediaTop = layout === 'top'\n\n return (\n <div\n ref={ref}\n className={cn('scene-switcher-root', 'text-info-primary w-full', className, classNames.root, {\n 'aiui-dark': data.theme === 'dark',\n })}\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {(title || subtitle) && (\n <div className={cn('scene-switcher-header mb-6', classNames.header)}>\n {title && (\n <Heading as=\"h2\" size={4} html={title} className={cn('scene-switcher-title', classNames.title)} />\n )}\n {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n </div>\n )}\n {/* Mobile/Tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40 */}\n <div className={cn('scene-switcher-swiper', 'laptop:hidden !overflow-visible', classNames.swiper)}>\n <Swiper\n modules={[FreeMode, Mousewheel, Autoplay]}\n onSwiper={swiper => {\n swiperRef.current = swiper\n }}\n className=\"!overflow-visible\"\n onSlideChange={handleSlideChange}\n slidesPerView=\"auto\"\n spaceBetween={12}\n freeMode={true}\n mousewheel={{ forceToAxis: true }}\n initialSlide={defaultActiveIndex}\n loop={autoplay && scenes.length > 1}\n autoplay={autoplay && scenes.length > 1 ? { delay: autoplayDelay, disableOnInteraction: false } : false}\n breakpoints={{\n 768: { spaceBetween: 16 },\n }}\n >\n {scenes.map((scene, index) => (\n <SwiperSlide key={index} className=\"h-[462px] !w-[296px]\">\n <div\n className={cn('scene-switcher-slide', 'flex cursor-pointer flex-col', classNames.slide)}\n onClick={() => handleSceneClick(index)}\n >\n {/* \u5A92\u4F53 */}\n <div\n className={cn(\n 'scene-switcher-slide-media',\n 'rounded-box relative aspect-[296/320] w-full overflow-hidden',\n classNames.slideMedia\n )}\n >\n <Media\n {...toMediaProps(scene.media)}\n className=\"rounded-t-box size-full overflow-hidden object-cover\"\n />\n </div>\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'scene-switcher-slide-content',\n ' mt-6 border-t pt-4',\n activeIndex === index ? 'border-info-primary border-t-4' : 'border-lines-primary',\n classNames.slideContent\n )}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title ',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n )}\n html={scene.description}\n />\n )}\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n\n {/* Laptop+: media-top \u5E03\u5C40 (\u4E0A\u56FE\u4E0B\u6587) */}\n {isMediaTop && (\n <div\n className={cn(\n 'scene-switcher-container',\n 'laptop:flex laptop:flex-col hidden',\n 'laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]',\n classNames.container\n )}\n >\n {/* \u5A92\u4F53\u533A\u57DF - \u663E\u793A\u5F53\u524D\u9009\u4E2D */}\n <div\n className={cn(\n 'scene-switcher-media-wrapper',\n 'rounded-box flex-1 overflow-hidden',\n classNames.mediaWrapper\n )}\n >\n {activeScene && (\n <Media\n {...toMediaProps(activeScene.media)}\n className={cn('scene-switcher-media', 'rounded-box size-full object-cover', classNames.media)}\n />\n )}\n </div>\n\n {/* Tab \u5217\u8868 - \u6A2A\u5411\u6392\u5217 */}\n <div\n className={cn(\n 'scene-switcher-tab-list',\n 'border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t',\n classNames.tabList\n )}\n >\n {scenes.map((scene, index) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n className={cn(\n 'scene-switcher-tab-item',\n 'desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors',\n activeIndex === index\n ? 'border-info-primary border-t-4'\n : 'hover:border-lines-primary border-transparent',\n classNames.tabItem\n )}\n onClick={() => handleSceneClick(index)}\n role=\"button\"\n aria-selected={activeIndex === index}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title line-clamp-2',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n )}\n html={scene.description}\n />\n )}\n </div>\n ))}\n </div>\n </div>\n )}\n\n {/* Laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40 */}\n {!isMediaTop && (\n <div\n className={cn(\n 'scene-switcher-container',\n 'laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden',\n 'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n layout === 'right' && 'flex-row-reverse',\n classNames.container\n )}\n >\n {/* Tab \u5217\u8868 - \u5916\u5C42\u5C45\u4E2D */}\n <div\n className={cn(\n 'scene-switcher-tab-list',\n 'laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center',\n classNames.tabList\n )}\n >\n {/* \u5185\u5C42\u6EDA\u52A8 */}\n <div className=\"flex max-h-full w-full flex-col overflow-y-auto\">\n {scenes.map((scene, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"border-lines-primary h-8 shrink-0 border-l-4\" />}\n <div\n ref={el => {\n tabRefs.current[index] = el\n }}\n className={cn(\n 'scene-switcher-tab-item',\n 'shrink-0 cursor-pointer border-l-4 pl-5',\n activeIndex === index\n ? 'border-info-primary border-l-[6px]'\n : 'border-lines-primary hover:border-info-tertiary',\n classNames.tabItem\n )}\n onClick={() => handleSceneClick(index)}\n role=\"button\"\n aria-selected={activeIndex === index}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary hidden'\n )}\n html={scene.description}\n />\n )}\n </div>\n </React.Fragment>\n ))}\n </div>\n </div>\n\n {/* \u5A92\u4F53\u533A\u57DF */}\n <div\n className={cn(\n 'scene-switcher-media-wrapper',\n 'rounded-box flex-1 overflow-hidden',\n classNames.mediaWrapper\n )}\n >\n {activeScene && (\n <Media\n {...toMediaProps(activeScene.media)}\n className={cn(\n 'scene-switcher-media',\n 'rounded-box size-full h-full overflow-visible object-cover',\n classNames.media\n )}\n />\n )}\n </div>\n </div>\n )}\n </div>\n )\n }\n)\n\nMediaSceneSwitcherV2.displayName = 'MediaSceneSwitcherV2'\nexport default withLayout(MediaSceneSwitcherV2)\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2NU,IAAAI,EAAA,6BAzNVC,EAAuB,oBACvBC,EAAoC,wBACpCC,EAA+C,0BAE/CC,EAA8B,4BAC9BC,EAAmB,kCAEnBC,EAA8B,qCAC9BC,EAA2B,kCAC3BC,EAAkB,gCA4ElB,MAAMC,EAAgBC,IAA8C,CAClE,QAASA,EAAM,UACf,aAAcA,EAAM,QACpB,YAAaA,EAAM,OACnB,SAAUA,EAAM,OAChB,YAAaA,EAAM,MACrB,GASMC,EAAyB,IAEzBC,EAAuBX,EAAM,WACjC,CAAC,CAAE,UAAAY,EAAW,WAAAC,EAAa,CAAC,EAAG,KAAAC,EAAM,cAAAC,EAAe,GAAGC,CAAM,EAAGC,IAAQ,CACtE,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,MAAOC,EACP,mBAAAC,EAAqB,EACrB,OAAAC,EAAS,OACT,SAAAC,EAAW,GACX,cAAAC,EAAgBd,CAClB,EAAII,EACE,CAACW,EAAaC,CAAc,EAAI1B,EAAM,SAASqB,CAAkB,EACjEM,EAAY3B,EAAM,OAA0B,IAAI,EAChD4B,EAAc5B,EAAM,OAAe,CAAC,EACpC6B,EAAU7B,EAAM,OAAkC,CAAC,CAAC,EAGpD8B,KAAmB,iBAAc,CAAE,SAAU,IAAK,CAAC,EAGzD9B,EAAM,UAAU,IACV,CAACuB,GAAYH,EAAO,QAAU,GAAK,CAACU,EAAkB,SAEpC,IAAM,CAC1BF,EAAY,QAAU,OAAO,YAAY,IAAM,CAC7CF,EAAeK,IAASA,EAAO,GAAKX,EAAO,MAAM,CACnD,EAAGI,CAAa,CAClB,GAEc,EAEP,IAAM,CACPI,EAAY,SACd,OAAO,cAAcA,EAAY,OAAO,CAE5C,GACC,CAACL,EAAUC,EAAeJ,EAAO,OAAQU,CAAgB,CAAC,EAG7D9B,EAAM,UAAU,IAAM,CACpB,GAAI,CAAC8B,GAAoB,CAACD,EAAQ,QAAQJ,CAAW,EAAG,OAExD,MAAMO,EAAaH,EAAQ,QAAQJ,CAAW,EACxCQ,EAAkBD,GAAY,cAGpC,GAAI,CAACC,GAAmBA,EAAgB,cAAgBA,EAAgB,aAAc,OAGtF,MAAMC,EAAQ,sBAAsB,IAAM,CACxC,MAAMC,EAAgBF,EAAgB,sBAAsB,EACtDG,EAAUJ,EAAW,sBAAsB,EAMjD,GAHkBI,EAAQ,KAAOD,EAAc,KAAOC,EAAQ,QAAUD,EAAc,OAGvE,OAGf,MAAME,EAAeD,EAAQ,IAAMD,EAAc,IAAMF,EAAgB,aAAe,EAAIG,EAAQ,OAAS,EAE3GH,EAAgB,SAAS,CACvB,IAAKA,EAAgB,UAAYI,EACjC,SAAU,QACZ,CAAC,CACH,CAAC,EAED,MAAO,IAAM,qBAAqBH,CAAK,CACzC,EAAG,CAACT,EAAaK,CAAgB,CAAC,EAElC,MAAMQ,EAAmBtC,EAAM,YAC5BuC,GAAkB,CACjBb,EAAea,CAAK,EACpBxB,IAAgBwB,EAAOnB,EAAOmB,CAAK,CAAC,EAEpCZ,EAAU,SAAS,QAAQY,CAAK,EAG5BhB,GAAYH,EAAO,OAAS,IAC1BQ,EAAY,SACd,OAAO,cAAcA,EAAY,OAAO,EAE1CA,EAAY,QAAU,OAAO,YAAY,IAAM,CAC7CF,EAAeK,IAASA,EAAO,GAAKX,EAAO,MAAM,CACnD,EAAGI,CAAa,EAEpB,EACA,CAACJ,EAAQL,EAAeQ,EAAUC,CAAa,CACjD,EAEMgB,EAAoBxC,EAAM,YAC7ByC,GAAuB,CAEtB,MAAMF,EAAQE,EAAO,UACrBf,EAAea,CAAK,EACpBxB,IAAgBwB,EAAOnB,EAAOmB,CAAK,CAAC,CACtC,EACA,CAACnB,EAAQL,CAAa,CACxB,EAEM2B,EAActB,EAAOK,CAAW,EAEhCkB,EAAarB,IAAW,MAE9B,SACE,QAAC,OACC,IAAKL,EACL,aAAW,MAAG,sBAAuB,2BAA4BL,EAAWC,EAAW,KAAM,CAC3F,YAAaC,EAAK,QAAU,MAC9B,CAAC,EACA,GAAGE,EAGF,WAAAE,GAASC,OACT,QAAC,OAAI,aAAW,MAAG,6BAA8BN,EAAW,MAAM,EAC/D,UAAAK,MACC,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMA,EAAO,aAAW,MAAG,uBAAwBL,EAAW,KAAK,EAAG,EAEjGM,MAAY,OAAC,QAAK,GAAG,IAAI,KAAM,EAAG,aAAW,MAAG,GAAIN,GAAY,QAAQ,EAAG,KAAMM,EAAU,GAC9F,KAGF,OAAC,OAAI,aAAW,MAAG,wBAAyB,kCAAmCN,EAAW,MAAM,EAC9F,mBAAC,UACC,QAAS,CAAC,WAAU,aAAY,UAAQ,EACxC,SAAU4B,GAAU,CAClBd,EAAU,QAAUc,CACtB,EACA,UAAU,oBACV,cAAeD,EACf,cAAc,OACd,aAAc,GACd,SAAU,GACV,WAAY,CAAE,YAAa,EAAK,EAChC,aAAcnB,EACd,KAAME,GAAYH,EAAO,OAAS,EAClC,SAAUG,GAAYH,EAAO,OAAS,EAAI,CAAE,MAAOI,EAAe,qBAAsB,EAAM,EAAI,GAClG,YAAa,CACX,IAAK,CAAE,aAAc,EAAG,CAC1B,EAEC,SAAAJ,EAAO,IAAI,CAACwB,EAAOL,OAClB,OAAC,eAAwB,UAAU,uBACjC,oBAAC,OACC,aAAW,MAAG,uBAAwB,+BAAgC1B,EAAW,KAAK,EACtF,QAAS,IAAMyB,EAAiBC,CAAK,EAGrC,oBAAC,OACC,aAAW,MACT,6BACA,+DACA1B,EAAW,UACb,EAEA,mBAAC,EAAAgC,QAAA,CACE,GAAGrC,EAAaoC,EAAM,KAAK,EAC5B,UAAU,uDACZ,EACF,KAEA,QAAC,OACC,aAAW,MACT,+BACA,uBACAnB,IAAgBc,EAAQ,iCAAmC,uBAC3D1B,EAAW,YACb,EAEA,oBAAC,WACC,aAAW,MACT,4BACAY,IAAgBc,EAAQ,oBAAsB,qBAC9CK,EAAM,KACR,EACA,KAAM,EACN,GAAI,KACJ,KAAMA,EAAM,MACd,EACCA,EAAM,gBACL,OAAC,QACC,aAAW,MACT,uEACAnB,IAAgBc,EAAQ,oBAAsB,oBAChD,EACA,KAAMK,EAAM,YACd,GAEJ,GACF,GA/CgBL,CAgDlB,CACD,EACH,EACF,EAGCI,MACC,QAAC,OACC,aAAW,MACT,2BACA,qCACA,wFACA9B,EAAW,SACb,EAGA,oBAAC,OACC,aAAW,MACT,+BACA,qCACAA,EAAW,YACb,EAEC,SAAA6B,MACC,OAAC,EAAAG,QAAA,CACE,GAAGrC,EAAakC,EAAY,KAAK,EAClC,aAAW,MAAG,uBAAwB,qCAAsC7B,EAAW,KAAK,EAC9F,EAEJ,KAGA,OAAC,OACC,aAAW,MACT,0BACA,iFACAA,EAAW,OACb,EAEC,SAAAO,EAAO,IAAI,CAACwB,EAAOL,OAClB,QAAC,OAEC,IAAKO,GAAM,CACTjB,EAAQ,QAAQU,CAAK,EAAIO,CAC3B,EACA,aAAW,MACT,0BACA,8EACArB,IAAgBc,EACZ,iCACA,gDACJ1B,EAAW,OACb,EACA,QAAS,IAAMyB,EAAiBC,CAAK,EACrC,KAAK,SACL,gBAAed,IAAgBc,EAE/B,oBAAC,WACC,aAAW,MACT,wCACAd,IAAgBc,EAAQ,oBAAsB,qBAC9CK,EAAM,KACR,EACA,KAAM,EACN,GAAI,KACJ,KAAMA,EAAM,MACd,EACCA,EAAM,gBACL,OAAC,QACC,aAAW,MACT,sEACAnB,IAAgBc,EAAQ,oBAAsB,oBAChD,EACA,KAAMK,EAAM,YACd,IAjCGL,CAmCP,CACD,EACH,GACF,EAID,CAACI,MACA,QAAC,OACC,aAAW,MACT,2BACA,kEACA,0DACArB,IAAW,SAAW,mBACtBT,EAAW,SACb,EAGA,oBAAC,OACC,aAAW,MACT,0BACA,4EACAA,EAAW,OACb,EAGA,mBAAC,OAAI,UAAU,kDACZ,SAAAO,EAAO,IAAI,CAACwB,EAAOL,OAClB,QAACvC,EAAM,SAAN,CACE,UAAAuC,EAAQ,MAAK,OAAC,OAAI,UAAU,+CAA+C,KAC5E,QAAC,OACC,IAAKO,GAAM,CACTjB,EAAQ,QAAQU,CAAK,EAAIO,CAC3B,EACA,aAAW,MACT,0BACA,0CACArB,IAAgBc,EACZ,qCACA,kDACJ1B,EAAW,OACb,EACA,QAAS,IAAMyB,EAAiBC,CAAK,EACrC,KAAK,SACL,gBAAed,IAAgBc,EAE/B,oBAAC,WACC,aAAW,MACT,6DACAd,IAAgBc,EAAQ,oBAAsB,qBAC9CK,EAAM,KACR,EACA,KAAM,EACN,GAAI,KACJ,KAAMA,EAAM,MACd,EACCA,EAAM,gBACL,OAAC,QACC,aAAW,MACT,sEACAnB,IAAgBc,EAAQ,oBAAsB,2BAChD,EACA,KAAMK,EAAM,YACd,GAEJ,IArCmBL,CAsCrB,CACD,EACH,EACF,KAGA,OAAC,OACC,aAAW,MACT,+BACA,qCACA1B,EAAW,YACb,EAEC,SAAA6B,MACC,OAAC,EAAAG,QAAA,CACE,GAAGrC,EAAakC,EAAY,KAAK,EAClC,aAAW,MACT,uBACA,6DACA7B,EAAW,KACb,EACF,EAEJ,GACF,GAEJ,CAEJ,CACF,EAEAF,EAAqB,YAAc,uBACnC,IAAOd,KAAQ,cAAWc,CAAoB",
6
+ "names": ["MediaSceneSwitcherV2_exports", "__export", "MediaSceneSwitcherV2_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react", "import_modules", "import_react_responsive", "import_helpers", "import_components", "import_Styles", "import_Media", "toMediaProps", "media", "DEFAULT_AUTOPLAY_DELAY", "MediaSceneSwitcherV2", "className", "classNames", "data", "onSceneChange", "props", "ref", "title", "subtitle", "scenes", "defaultActiveIndex", "layout", "autoplay", "autoplayDelay", "activeIndex", "setActiveIndex", "swiperRef", "intervalRef", "tabRefs", "isLaptopOrLarger", "prev", "tabElement", "parentContainer", "rafId", "containerRect", "tabRect", "scrollOffset", "handleSceneClick", "index", "handleSlideChange", "swiper", "activeScene", "isMediaTop", "scene", "Media", "el"]
7
7
  }
package/dist/esm/biz-components/BrandEquity/BrandEquity.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{forwardRef as w,useEffect as q,useRef as y,useState as E,useImperativeHandle as S}from"react";import{cn as o}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withLayout as M}from"../../shared/Styles.js";import{useMediaQuery as B}from"react-responsive";import{useExposure as I}from"../../hooks/useExposure.js";import{Swiper as j,SwiperSlide as P}from"swiper/react";import{Pagination as T,FreeMode as L,Mousewheel as z}from"swiper/modules";import A from"../Title/index.js";const H="copy",D="store_benefits",R=(e,a)=>{const i=[];for(let r=0;r<e.length;r+=a)i.push(e.slice(r,r+a));return i},v=w(({data:{items:e=[],itemShape:a,title:i,theme:r},className:s},g)=>{const[d,k]=E(!1),c=B({query:"(max-width: 768px)"}),u=y(null),m=y(null);S(g,()=>m.current),I(m,{componentType:H,componentName:D}),q(()=>{k(c)},[c]);const h=d?R(e,3):e;return n("div",{ref:m,className:o("brand-equity-wrapper w-full",{"aiui-dark":r==="dark"},s),children:[i&&t(A,{data:{title:i}}),d?n(j,{className:o(s),modules:[L,z,T],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:u.current},breakpoints:{0:{spaceBetween:12}},children:[h?.map((l,p)=>t(P,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((N,f)=>t(b,{data:N,itemShape:a,index:f},f))},"SwiperSlide"+p)),t("div",{ref:u,className:"mt-3 flex justify-center"})]}):t("div",{className:o("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,p)=>t(b,{data:l,itemShape:a,index:p},p))})]})}),b=({data:e,itemShape:a,index:i})=>n("div",{className:o("brand-equity-item",`brand-equity-item-${i+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-primary box-border flex w-full flex-col p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(i),"aiui-dark":e.theme==="dark"},a==="round"?"rounded-box":"rounded-none",e.className),children:[n("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?t("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((r,s)=>t("div",{className:o("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:t(x,{source:r.avatar?.url,alt:r.avatar?.alt,className:"size-full object-cover"})},s))}):t("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:t(x,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),t("p",{className:"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});v.displayName="BrandEquity";var U=M(v);export{U as default};
1
+ "use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{forwardRef as w,useEffect as q,useRef as x,useState as E,useImperativeHandle as S}from"react";import{cn as s}from"../../helpers/utils.js";import v from"../../components/picture.js";import{withLayout as M}from"../../shared/Styles.js";import{useMediaQuery as B}from"react-responsive";import{useExposure as T}from"../../hooks/useExposure.js";import{Swiper as I,SwiperSlide as j}from"swiper/react";import{Pagination as P,FreeMode as L,Mousewheel as z}from"swiper/modules";import A from"../Title/index.js";const H="copy",D="store_benefits",R=(e,a)=>{const i=[];for(let r=0;r<e.length;r+=a)i.push(e.slice(r,r+a));return i},b=w(({data:{items:e=[],itemShape:a,title:i,theme:r},className:o},m)=>{const[c,k]=E(!1),u=B({query:"(max-width: 768px)"}),f=x(null),d=x(null);S(m,()=>d.current),T(d,{componentType:H,componentName:D}),q(()=>{k(u)},[u]);const h=c?R(e,3):e;return p("div",{ref:d,className:s("brand-equity-wrapper w-full",{"aiui-dark":r==="dark"},o),children:[i&&t(A,{data:{title:i}}),c?p(I,{className:s(o),modules:[L,z,P],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:f.current},breakpoints:{0:{spaceBetween:12}},children:[h?.map((l,n)=>t(j,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((N,y)=>t(g,{data:N,itemShape:a,index:y,theme:r},y))},"SwiperSlide"+n)),t("div",{ref:f,className:"mt-3 flex justify-center"})]}):t("div",{className:s("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,n)=>t(g,{data:l,itemShape:a,index:n,theme:r},n))})]})}),g=({data:e,itemShape:a,index:i,theme:r})=>p("div",{className:s("brand-equity-item",`brand-equity-item-${i+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-secondary-1 box-border flex w-full flex-col p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(i),"bg-container-primary":r==="dark"},a==="round"?"rounded-box":"rounded-none",e.className),children:[p("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?t("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((o,m)=>t("div",{className:s("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:t(v,{source:o.avatar?.url,alt:o.avatar?.alt,className:"size-full object-cover"})},m))}):t("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:t(v,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),t("p",{className:"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});b.displayName="BrandEquity";var U=M(b);export{U as default};
2
2
  //# sourceMappingURL=BrandEquity.js.map
package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
4
- "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape, title, theme }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', { 'aiui-dark': theme === 'dark' }, className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n `brand-equity-item-${index + 1}`,\n data.containerName ? `brand-equity-item--${data.containerName}` : undefined,\n 'bg-container-primary box-border flex w-full flex-col p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n 'aiui-dark': data.theme === 'dark',\n },\n itemShape === 'round' ? 'rounded-box' : 'rounded-none',\n data.className\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex shrink-0 -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'border-container-primary size-[30px] overflow-hidden rounded-full border-2',\n 'relative inline-block shrink-0',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <div className=\"lg-desktop:size-[36px] size-[30px] shrink-0\">\n <Picture\n className=\"size-full object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nBrandEquity.displayName = 'BrandEquity'\n\nexport default withLayout(BrandEquity)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img, Theme } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape, title, theme }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', { 'aiui-dark': theme === 'dark' }, className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} theme={theme} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} theme={theme} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n theme,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n theme?: Theme\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n `brand-equity-item-${index + 1}`,\n data.containerName ? `brand-equity-item--${data.containerName}` : undefined,\n 'bg-container-secondary-1 box-border flex w-full flex-col p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n 'bg-container-primary': theme === 'dark',\n },\n itemShape === 'round' ? 'rounded-box' : 'rounded-none',\n data.className\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex shrink-0 -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'border-container-primary size-[30px] overflow-hidden rounded-full border-2',\n 'relative inline-block shrink-0',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <div className=\"lg-desktop:size-[36px] size-[30px] shrink-0\">\n <Picture\n className=\"size-full object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nBrandEquity.displayName = 'BrandEquity'\n\nexport default withLayout(BrandEquity)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "Picture", "withLayout", "useMediaQuery", "useExposure", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "itemShape", "title", "theme", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "BrandEquity_default"]
7
7
  }
package/dist/esm/biz-components/Faq/Faq.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import v,{useImperativeHandle as u,useRef as y,useState as g}from"react";import{Text as x,Heading as h}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withLayout as b}from"../../shared/Styles.js";const l=v.forwardRef(({data:o,className:n,defaultOpenIndex:t,classNames:i={}},s)=>{const r=y(null);u(s,()=>r.current);const c=Array.isArray(t)?t:t!==void 0?[t]:[];return e("div",{ref:r,className:a(n,i.root),children:e("div",{children:o?.productData?.map((f,m)=>e(d,{data:f,defaultOpen:c.includes(m),classNames:i},m))})})});l.displayName="Faq";const d=({data:o,defaultOpen:n=!1,classNames:t={}})=>{const[i,s]=g(n),r=()=>{s(!i)};return e("div",{className:a("tablet:py-6 border-b border-[#E4E5E6] py-4",t.item),children:p("div",{children:[p("div",{onClick:r,className:a("tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",t.itemHeader),children:[e(h,{as:"h3",html:o?.title,className:a("desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]",t.title)}),e("div",{className:a("transition-transform duration-300",t.icon),children:e("svg",{xmlns:"http://www.w3.org/2000/svg",className:a("w-[20px] transition-transform duration-300",i&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:e("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),e("div",{className:a("overflow-hidden text-[#4A4C56] transition-all duration-300",i?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0",t.content),children:e(x,{html:o?.richDesc??o?.desc,className:a("desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline",t.description)})})]})})};d.displayName="FaqItem";var C=b(l);export{d as FaqItem,C as default};
1
+ "use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import v,{useImperativeHandle as u,useRef as y,useState as g}from"react";import{Text as x,Heading as h}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withLayout as b}from"../../shared/Styles.js";const l=v.forwardRef(({data:i,className:n,defaultOpenIndex:t,classNames:o={}},s)=>{const r=y(null);u(s,()=>r.current);const c=Array.isArray(t)?t:t!==void 0?[t]:i?.openFirst??!0?[0]:[];return e("div",{ref:r,className:a(n,o.root),children:e("div",{children:i?.productData?.map((f,d)=>e(m,{data:f,defaultOpen:c.includes(d),classNames:o},d))})})});l.displayName="Faq";const m=({data:i,defaultOpen:n=!1,classNames:t={}})=>{const[o,s]=g(n),r=()=>{s(!o)};return e("div",{className:a("tablet:py-6 border-b border-[#E4E5E6] py-4",t.item),children:p("div",{children:[p("div",{onClick:r,className:a("tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",t.itemHeader),children:[e(h,{as:"h3",html:i?.title,className:a("desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]",t.title)}),e("div",{className:a("transition-transform duration-300",t.icon),children:e("svg",{xmlns:"http://www.w3.org/2000/svg",className:a("w-[20px] transition-transform duration-300",o&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:e("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),e("div",{className:a("overflow-hidden text-[#4A4C56] transition-all duration-300",o?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0",t.content),children:e(x,{html:i?.richDesc??i?.desc,className:a("desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline",t.description)})})]})})};m.displayName="FaqItem";var C=b(l);export{m as FaqItem,C as default};
2
2
  //# sourceMappingURL=Faq.js.map
package/dist/esm/biz-components/Faq/Faq.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Faq/Faq.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType, FaqSemanticName } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(\n ({ data, className, defaultOpenIndex, classNames = {} }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n // \u5C06 defaultOpenIndex \u8F6C\u6362\u4E3A\u6570\u7EC4\u65B9\u4FBF\u5224\u65AD\n const openIndexes = Array.isArray(defaultOpenIndex)\n ? defaultOpenIndex\n : defaultOpenIndex !== undefined\n ? [defaultOpenIndex]\n : []\n\n return (\n <div ref={innerRef} className={cn(className, classNames.root)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} defaultOpen={openIndexes.includes(index)} classNames={classNames} />\n ))}\n </div>\n </div>\n )\n }\n)\n\nFaq.displayName = 'Faq'\n\ninterface FaqItemProps {\n data: ItemType\n defaultOpen?: boolean\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n\nconst FaqItem = ({ data, defaultOpen = false, classNames = {} }: FaqItemProps) => {\n const [open, setOpen] = useState(defaultOpen)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className={cn('tablet:py-6 border-b border-[#E4E5E6] py-4', classNames.item)}>\n <div>\n <div\n onClick={handleToggle}\n className={cn(\n 'tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4',\n classNames.itemHeader\n )}\n >\n <Heading\n as=\"h3\"\n html={data?.title}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]',\n classNames.title\n )}\n />\n <div className={cn('transition-transform duration-300', classNames.icon)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden text-[#4A4C56] transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0',\n classNames.content\n )}\n >\n <Text\n html={data?.richDesc ?? data?.desc}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline',\n classNames.description\n )}\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
5
- "mappings": "aAuBY,cAAAA,EA0BJ,QAAAC,MA1BI,oBAtBZ,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAE7D,OAAS,QAAAC,EAAM,WAAAC,MAAe,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAMR,EAAM,WAChB,CAAC,CAAE,KAAAS,EAAM,UAAAC,EAAW,iBAAAC,EAAkB,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAAQ,CAC/D,MAAMC,EAAWZ,EAAuB,IAAI,EAC5CD,EAAoBY,EAAK,IAAMC,EAAS,OAAQ,EAGhD,MAAMC,EAAc,MAAM,QAAQJ,CAAgB,EAC9CA,EACAA,IAAqB,OACnB,CAACA,CAAgB,EACjB,CAAC,EAEP,OACEb,EAAC,OAAI,IAAKgB,EAAU,UAAWR,EAAGI,EAAWE,EAAW,IAAI,EAC1D,SAAAd,EAAC,OACE,SAAAW,GAAM,aAAa,IAAI,CAACO,EAAWC,IAClCnB,EAACoB,EAAA,CAAoB,KAAMF,EAAM,YAAaD,EAAY,SAASE,CAAK,EAAG,WAAYL,GAAzEK,CAAqF,CACpG,EACH,EACF,CAEJ,CACF,EAEAT,EAAI,YAAc,MAQlB,MAAMU,EAAU,CAAC,CAAE,KAAAT,EAAM,YAAAU,EAAc,GAAO,WAAAP,EAAa,CAAC,CAAE,IAAoB,CAChF,KAAM,CAACQ,EAAMC,CAAO,EAAIlB,EAASgB,CAAW,EAEtCG,EAAe,IAAM,CACzBD,EAAQ,CAACD,CAAI,CACf,EAEA,OACEtB,EAAC,OAAI,UAAWQ,EAAG,6CAA8CM,EAAW,IAAI,EAC9E,SAAAb,EAAC,OACC,UAAAA,EAAC,OACC,QAASuB,EACT,UAAWhB,EACT,4EACAM,EAAW,UACb,EAEA,UAAAd,EAACO,EAAA,CACC,GAAG,KACH,KAAMI,GAAM,MACZ,UAAWH,EACT,yFACAM,EAAW,KACb,EACF,EACAd,EAAC,OAAI,UAAWQ,EAAG,oCAAqCM,EAAW,IAAI,EACrE,SAAAd,EAAC,OACC,MAAM,6BACN,UAAWQ,EAAG,6CAA8Cc,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,SAAAtB,EAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,EAGAA,EAAC,OACC,UAAWQ,EACT,6DACAc,EAAO,iCAAmC,oBAC1CR,EAAW,OACb,EAEA,SAAAd,EAACM,EAAA,CACC,KAAMK,GAAM,UAAYA,GAAM,KAC9B,UAAWH,EACT,8HACAM,EAAW,WACb,EACF,EACF,GACF,EACF,CAEJ,EAEAM,EAAQ,YAAc,UAEtB,IAAOK,EAAQhB,EAAWC,CAAG",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType, FaqSemanticName } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(\n ({ data, className, defaultOpenIndex, classNames = {} }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n const openIndexes = Array.isArray(defaultOpenIndex)\n ? defaultOpenIndex\n : defaultOpenIndex !== undefined\n ? [defaultOpenIndex]\n : (data?.openFirst ?? true)\n ? [0]\n : []\n\n return (\n <div ref={innerRef} className={cn(className, classNames.root)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} defaultOpen={openIndexes.includes(index)} classNames={classNames} />\n ))}\n </div>\n </div>\n )\n }\n)\n\nFaq.displayName = 'Faq'\n\ninterface FaqItemProps {\n data: ItemType\n defaultOpen?: boolean\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n\nconst FaqItem = ({ data, defaultOpen = false, classNames = {} }: FaqItemProps) => {\n const [open, setOpen] = useState(defaultOpen)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className={cn('tablet:py-6 border-b border-[#E4E5E6] py-4', classNames.item)}>\n <div>\n <div\n onClick={handleToggle}\n className={cn(\n 'tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4',\n classNames.itemHeader\n )}\n >\n <Heading\n as=\"h3\"\n html={data?.title}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]',\n classNames.title\n )}\n />\n <div className={cn('transition-transform duration-300', classNames.icon)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden text-[#4A4C56] transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0',\n classNames.content\n )}\n >\n <Text\n html={data?.richDesc ?? data?.desc}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline',\n classNames.description\n )}\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
5
+ "mappings": "aAwBY,cAAAA,EA0BJ,QAAAC,MA1BI,oBAvBZ,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAE7D,OAAS,QAAAC,EAAM,WAAAC,MAAe,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAMR,EAAM,WAChB,CAAC,CAAE,KAAAS,EAAM,UAAAC,EAAW,iBAAAC,EAAkB,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAAQ,CAC/D,MAAMC,EAAWZ,EAAuB,IAAI,EAC5CD,EAAoBY,EAAK,IAAMC,EAAS,OAAQ,EAEhD,MAAMC,EAAc,MAAM,QAAQJ,CAAgB,EAC9CA,EACAA,IAAqB,OACnB,CAACA,CAAgB,EAChBF,GAAM,WAAa,GAClB,CAAC,CAAC,EACF,CAAC,EAET,OACEX,EAAC,OAAI,IAAKgB,EAAU,UAAWR,EAAGI,EAAWE,EAAW,IAAI,EAC1D,SAAAd,EAAC,OACE,SAAAW,GAAM,aAAa,IAAI,CAACO,EAAWC,IAClCnB,EAACoB,EAAA,CAAoB,KAAMF,EAAM,YAAaD,EAAY,SAASE,CAAK,EAAG,WAAYL,GAAzEK,CAAqF,CACpG,EACH,EACF,CAEJ,CACF,EAEAT,EAAI,YAAc,MAQlB,MAAMU,EAAU,CAAC,CAAE,KAAAT,EAAM,YAAAU,EAAc,GAAO,WAAAP,EAAa,CAAC,CAAE,IAAoB,CAChF,KAAM,CAACQ,EAAMC,CAAO,EAAIlB,EAASgB,CAAW,EAEtCG,EAAe,IAAM,CACzBD,EAAQ,CAACD,CAAI,CACf,EAEA,OACEtB,EAAC,OAAI,UAAWQ,EAAG,6CAA8CM,EAAW,IAAI,EAC9E,SAAAb,EAAC,OACC,UAAAA,EAAC,OACC,QAASuB,EACT,UAAWhB,EACT,4EACAM,EAAW,UACb,EAEA,UAAAd,EAACO,EAAA,CACC,GAAG,KACH,KAAMI,GAAM,MACZ,UAAWH,EACT,yFACAM,EAAW,KACb,EACF,EACAd,EAAC,OAAI,UAAWQ,EAAG,oCAAqCM,EAAW,IAAI,EACrE,SAAAd,EAAC,OACC,MAAM,6BACN,UAAWQ,EAAG,6CAA8Cc,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,SAAAtB,EAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,EAGAA,EAAC,OACC,UAAWQ,EACT,6DACAc,EAAO,iCAAmC,oBAC1CR,EAAW,OACb,EAEA,SAAAd,EAACM,EAAA,CACC,KAAMK,GAAM,UAAYA,GAAM,KAC9B,UAAWH,EACT,8HACAM,EAAW,WACb,EACF,EACF,GACF,EACF,CAEJ,EAEAM,EAAQ,YAAc,UAEtB,IAAOK,EAAQhB,EAAWC,CAAG",
6
6
  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "Text", "Heading", "cn", "withLayout", "Faq", "data", "className", "defaultOpenIndex", "classNames", "ref", "innerRef", "openIndexes", "item", "index", "FaqItem", "defaultOpen", "open", "setOpen", "handleToggle", "Faq_default"]
7
7
  }
package/dist/esm/biz-components/Faq/types.d.ts CHANGED
@@ -10,6 +10,7 @@ export type FaqSemanticName = 'root' | 'item' | 'itemHeader' | 'title' | 'icon'
10
10
  export interface FaqProps {
11
11
  data: {
12
12
  productData: FaqItem[];
13
+ openFirst?: boolean;
13
14
  };
14
15
  className?: string;
15
16
  /** 默认展开的 item 索引，可以是单个数字或数字数组 */
package/dist/esm/biz-components/MediaSceneSwitcherV2/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { Media, Theme } from '../../types/props.js';
2
+ import type { Media as MediaType, Theme } from '../../types/props.js';
3
3
  export type MediaSceneSwitcherV2SemanticName = 'root' | 'header' | 'title' | 'subtitle' | 'container' | 'tabList' | 'tabItem' | 'tabTitle' | 'tabDescription' | 'mediaWrapper' | 'media' | 'swiper' | 'slide' | 'slideMedia' | 'slideContent';
4
4
  /**
5
5
  * 场景项数据接口
@@ -11,11 +11,11 @@ export interface MediaSceneSwitcherV2Item {
11
11
  description?: string;
12
12
  /** 场景媒体（图片/视频） */
13
13
  media: {
14
- mobile?: Media;
15
- tablet?: Media;
16
- laptop?: Media;
17
- desktop?: Media;
18
- lgDesktop?: Media;
14
+ mobile?: MediaType;
15
+ tablet?: MediaType;
16
+ laptop?: MediaType;
17
+ desktop?: MediaType;
18
+ lgDesktop?: MediaType;
19
19
  };
20
20
  }
21
21
  /**
package/dist/esm/biz-components/MediaSceneSwitcherV2/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as o,jsxs as d}from"react/jsx-runtime";import*as p from"react";import{Swiper as F,SwiperSlide as B}from"swiper/react";import{FreeMode as j,Mousewheel as O,Autoplay as U}from"swiper/modules";import{useMediaQuery as x}from"react-responsive";import{cn as r}from"../../helpers/index.js";import Y from"../../components/picture.js";import{Heading as N,Text as V}from"../../components/index.js";import{withLayout as _}from"../../shared/Styles.js";const D=[{key:"lgDesktop",width:1920},{key:"desktop",width:1440},{key:"laptop",width:1024},{key:"tablet",width:768},{key:"mobile",width:390}],$=(a,i)=>a[i]?.mimeType==="video/mp4",q=a=>D.filter(({key:n})=>a[n]?.url&&a[n]?.mimeType!=="video/mp4").map(({key:n,width:c})=>`${a[n].url} ${c}`).join(", "),K=(a,i)=>{for(const{key:n}of D)if(a[n]?.alt)return a[n].alt;return i},C=({media:a,alt:i,className:n})=>{const c=x({minWidth:1920}),g=x({minWidth:1440,maxWidth:1919}),k=x({minWidth:1025,maxWidth:1439}),m=x({minWidth:768,maxWidth:1024}),u=p.useMemo(()=>{if(c&&a.lgDesktop?.url)return"lgDesktop";if(g&&a.desktop?.url)return"desktop";if(k&&a.laptop?.url)return"laptop";if(m&&a.tablet?.url)return"tablet";if(a.mobile?.url)return"mobile";for(const{key:b}of D)if(a[b]?.url)return b;return"desktop"},[c,g,k,m,a]),l=a[u];if(!l?.url)return null;if($(a,u))return o("video",{src:l.url,className:n,autoPlay:!0,loop:!0,muted:!0,playsInline:!0});const S=q(a);return o(Y,{source:S||l.url,alt:K(a,i),className:n,imgClassName:"size-full object-cover"})},Q=3e3,z=p.forwardRef(({className:a,classNames:i={},data:n,onSceneChange:c,...g},k)=>{const{title:m,subtitle:u,items:l,defaultActiveIndex:S=0,layout:b="left",autoplay:f=!0,autoplayDelay:v=Q}=n,[s,M]=p.useState(S),W=p.useRef(null),h=p.useRef(0),R=p.useRef([]),T=x({minWidth:1025});p.useEffect(()=>!f||l.length<=1||!T?void 0:((()=>{h.current=window.setInterval(()=>{M(e=>(e+1)%l.length)},v)})(),()=>{h.current&&window.clearInterval(h.current)}),[f,v,l.length,T]),p.useEffect(()=>{if(!T||!R.current[s])return;const t=R.current[s],e=t?.parentElement;if(!e||e.scrollHeight<=e.clientHeight)return;const y=requestAnimationFrame(()=>{const A=e.getBoundingClientRect(),I=t.getBoundingClientRect();if(I.top>=A.top&&I.bottom<=A.bottom)return;const P=I.top-A.top-e.clientHeight/2+I.height/2;e.scrollTo({top:e.scrollTop+P,behavior:"smooth"})});return()=>cancelAnimationFrame(y)},[s,T]);const L=p.useCallback(t=>{M(t),c?.(t,l[t]),W.current?.slideTo(t),f&&l.length>1&&(h.current&&window.clearInterval(h.current),h.current=window.setInterval(()=>{M(e=>(e+1)%l.length)},v))},[l,c,f,v]),H=p.useCallback(t=>{const e=t.realIndex;M(e),c?.(e,l[e])},[l,c]),w=l[s],E=b==="top";return d("div",{ref:k,className:r("scene-switcher-root","text-info-primary w-full",a,i.root,{"aiui-dark":n.theme==="dark"}),...g,children:[(m||u)&&d("div",{className:r("scene-switcher-header mb-6",i.header),children:[m&&o(N,{as:"h2",size:4,html:m,className:r("scene-switcher-title",i.title)}),u&&o(V,{as:"p",size:3,className:r("",i?.subtitle),html:u})]}),o("div",{className:r("scene-switcher-swiper","laptop:hidden !overflow-visible",i.swiper),children:o(F,{modules:[j,O,U],onSwiper:t=>{W.current=t},className:"!overflow-visible",onSlideChange:H,slidesPerView:"auto",spaceBetween:12,freeMode:!0,mousewheel:{forceToAxis:!0},initialSlide:S,loop:f&&l.length>1,autoplay:f&&l.length>1?{delay:v,disableOnInteraction:!1}:!1,breakpoints:{768:{spaceBetween:16}},children:l.map((t,e)=>o(B,{className:"h-[462px] !w-[296px]",children:d("div",{className:r("scene-switcher-slide","flex cursor-pointer flex-col",i.slide),onClick:()=>L(e),children:[o("div",{className:r("scene-switcher-slide-media","rounded-box relative aspect-[296/320] w-full overflow-hidden",i.slideMedia),children:o(C,{media:t.media,alt:t.title,className:"rounded-t-box size-full overflow-hidden object-cover"})}),d("div",{className:r("scene-switcher-slide-content"," mt-6 border-t pt-4",s===e?"border-info-primary border-t-4":"border-lines-primary",i.slideContent),children:[o(N,{className:r("scene-switcher-tab-title ",s===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&o(V,{className:r("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary"),html:t.description})]})]})},e))})}),E&&d("div",{className:r("scene-switcher-container","laptop:flex laptop:flex-col hidden","laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]",i.container),children:[o("div",{className:r("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:w&&o(C,{media:w.media,alt:w.title,className:r("scene-switcher-media","rounded-box size-full object-cover",i.media)})}),o("div",{className:r("scene-switcher-tab-list","border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t",i.tabList),children:l.map((t,e)=>d("div",{ref:y=>{R.current[e]=y},className:r("scene-switcher-tab-item","desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors",s===e?"border-info-primary border-t-4":"hover:border-lines-primary border-transparent",i.tabItem),onClick:()=>L(e),role:"button","aria-selected":s===e,children:[o(N,{className:r("scene-switcher-tab-title line-clamp-2",s===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&o(V,{className:r("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary"),html:t.description})]},e))})]}),!E&&d("div",{className:r("scene-switcher-container","laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]",b==="right"&&"flex-row-reverse",i.container),children:[o("div",{className:r("scene-switcher-tab-list","laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center",i.tabList),children:o("div",{className:"flex max-h-full w-full flex-col overflow-y-auto",children:l.map((t,e)=>d(p.Fragment,{children:[e>0&&o("div",{className:"border-lines-primary h-8 shrink-0 border-l-4"}),d("div",{ref:y=>{R.current[e]=y},className:r("scene-switcher-tab-item","shrink-0 cursor-pointer border-l-4 pl-5",s===e?"border-info-primary border-l-[6px]":"border-lines-primary hover:border-info-tertiary",i.tabItem),onClick:()=>L(e),role:"button","aria-selected":s===e,children:[o(N,{className:r("scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2",s===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&o(V,{className:r("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary hidden"),html:t.description})]})]},e))})}),o("div",{className:r("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:w&&o(C,{media:w.media,alt:w.title,className:r("scene-switcher-media","rounded-box size-full h-full overflow-visible object-cover",i.media)})})]})]})});z.displayName="MediaSceneSwitcherV2";var oe=_(z);export{oe as default};
1
+ "use client";import{jsx as r,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{Swiper as P,SwiperSlide as B}from"swiper/react";import{FreeMode as O,Mousewheel as W,Autoplay as j}from"swiper/modules";import{useMediaQuery as U}from"react-responsive";import{cn as i}from"../../helpers/index.js";import{Heading as y,Text as g}from"../../components/index.js";import{withLayout as Y}from"../../shared/Styles.js";import I from"../Media/index.js";const V=p=>({pcImage:p.lgDesktop,desktopImage:p.desktop,laptopImage:p.laptop,padImage:p.tablet,mobileImage:p.mobile}),_=3e3,C=s.forwardRef(({className:p,classNames:o={},data:N,onSceneChange:f,...E},z)=>{const{title:S,subtitle:k,items:a,defaultActiveIndex:L=0,layout:R="left",autoplay:c=!0,autoplayDelay:m=_}=N,[l,u]=s.useState(L),A=s.useRef(null),d=s.useRef(0),w=s.useRef([]),b=U({minWidth:1025});s.useEffect(()=>!c||a.length<=1||!b?void 0:((()=>{d.current=window.setInterval(()=>{u(e=>(e+1)%a.length)},m)})(),()=>{d.current&&window.clearInterval(d.current)}),[c,m,a.length,b]),s.useEffect(()=>{if(!b||!w.current[l])return;const t=w.current[l],e=t?.parentElement;if(!e||e.scrollHeight<=e.clientHeight)return;const h=requestAnimationFrame(()=>{const T=e.getBoundingClientRect(),x=t.getBoundingClientRect();if(x.top>=T.top&&x.bottom<=T.bottom)return;const F=x.top-T.top-e.clientHeight/2+x.height/2;e.scrollTo({top:e.scrollTop+F,behavior:"smooth"})});return()=>cancelAnimationFrame(h)},[l,b]);const M=s.useCallback(t=>{u(t),f?.(t,a[t]),A.current?.slideTo(t),c&&a.length>1&&(d.current&&window.clearInterval(d.current),d.current=window.setInterval(()=>{u(e=>(e+1)%a.length)},m))},[a,f,c,m]),H=s.useCallback(t=>{const e=t.realIndex;u(e),f?.(e,a[e])},[a,f]),v=a[l],D=R==="top";return n("div",{ref:z,className:i("scene-switcher-root","text-info-primary w-full",p,o.root,{"aiui-dark":N.theme==="dark"}),...E,children:[(S||k)&&n("div",{className:i("scene-switcher-header mb-6",o.header),children:[S&&r(y,{as:"h2",size:4,html:S,className:i("scene-switcher-title",o.title)}),k&&r(g,{as:"p",size:3,className:i("",o?.subtitle),html:k})]}),r("div",{className:i("scene-switcher-swiper","laptop:hidden !overflow-visible",o.swiper),children:r(P,{modules:[O,W,j],onSwiper:t=>{A.current=t},className:"!overflow-visible",onSlideChange:H,slidesPerView:"auto",spaceBetween:12,freeMode:!0,mousewheel:{forceToAxis:!0},initialSlide:L,loop:c&&a.length>1,autoplay:c&&a.length>1?{delay:m,disableOnInteraction:!1}:!1,breakpoints:{768:{spaceBetween:16}},children:a.map((t,e)=>r(B,{className:"h-[462px] !w-[296px]",children:n("div",{className:i("scene-switcher-slide","flex cursor-pointer flex-col",o.slide),onClick:()=>M(e),children:[r("div",{className:i("scene-switcher-slide-media","rounded-box relative aspect-[296/320] w-full overflow-hidden",o.slideMedia),children:r(I,{...V(t.media),className:"rounded-t-box size-full overflow-hidden object-cover"})}),n("div",{className:i("scene-switcher-slide-content"," mt-6 border-t pt-4",l===e?"border-info-primary border-t-4":"border-lines-primary",o.slideContent),children:[r(y,{className:i("scene-switcher-tab-title ",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",l===e?"text-info-primary":"text-info-tertiary"),html:t.description})]})]})},e))})}),D&&n("div",{className:i("scene-switcher-container","laptop:flex laptop:flex-col hidden","laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]",o.container),children:[r("div",{className:i("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",o.mediaWrapper),children:v&&r(I,{...V(v.media),className:i("scene-switcher-media","rounded-box size-full object-cover",o.media)})}),r("div",{className:i("scene-switcher-tab-list","border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t",o.tabList),children:a.map((t,e)=>n("div",{ref:h=>{w.current[e]=h},className:i("scene-switcher-tab-item","desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors",l===e?"border-info-primary border-t-4":"hover:border-lines-primary border-transparent",o.tabItem),onClick:()=>M(e),role:"button","aria-selected":l===e,children:[r(y,{className:i("scene-switcher-tab-title line-clamp-2",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",l===e?"text-info-primary":"text-info-tertiary"),html:t.description})]},e))})]}),!D&&n("div",{className:i("scene-switcher-container","laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]",R==="right"&&"flex-row-reverse",o.container),children:[r("div",{className:i("scene-switcher-tab-list","laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center",o.tabList),children:r("div",{className:"flex max-h-full w-full flex-col overflow-y-auto",children:a.map((t,e)=>n(s.Fragment,{children:[e>0&&r("div",{className:"border-lines-primary h-8 shrink-0 border-l-4"}),n("div",{ref:h=>{w.current[e]=h},className:i("scene-switcher-tab-item","shrink-0 cursor-pointer border-l-4 pl-5",l===e?"border-info-primary border-l-[6px]":"border-lines-primary hover:border-info-tertiary",o.tabItem),onClick:()=>M(e),role:"button","aria-selected":l===e,children:[r(y,{className:i("scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",l===e?"text-info-primary":"text-info-tertiary hidden"),html:t.description})]})]},e))})}),r("div",{className:i("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",o.mediaWrapper),children:v&&r(I,{...V(v.media),className:i("scene-switcher-media","rounded-box size-full h-full overflow-visible object-cover",o.media)})})]})]})});C.displayName="MediaSceneSwitcherV2";var ee=Y(C);export{ee as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/MediaSceneSwitcherV2/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaSceneSwitcherV2/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/index.js'\nimport Picture from '../../components/picture.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nexport type MediaSceneSwitcherV2SemanticName =\n | 'root'\n | 'header'\n | 'title'\n | 'subtitle'\n | 'container'\n | 'tabList'\n | 'tabItem'\n | 'tabTitle'\n | 'tabDescription'\n | 'mediaWrapper'\n | 'media'\n | 'swiper'\n | 'slide'\n | 'slideMedia'\n | 'slideContent'\n\n/**\n * \u573A\u666F\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Item {\n /** \u573A\u666F\u6807\u9898 */\n title: string\n /** \u573A\u666F\u63CF\u8FF0 */\n description?: string\n /** \u573A\u666F\u5A92\u4F53\uFF08\u56FE\u7247/\u89C6\u9891\uFF09 */\n media: {\n mobile?: Media\n tablet?: Media\n laptop?: Media\n desktop?: Media\n lgDesktop?: Media\n }\n}\n\n/**\n * \u5E03\u5C40\u6A21\u5F0F\n * - left: \u5DE6\u6587\u53F3\u56FE\uFF08laptop+ \u9ED8\u8BA4\uFF09\n * - right: \u5DE6\u56FE\u53F3\u6587\n * - top: \u4E0A\u56FE\u4E0B\u6587\uFF08swiper \u5361\u7247\u6A21\u5F0F\uFF09\n */\nexport type MediaSceneSwitcherV2Layout = 'left' | 'right' | 'top'\n\n/**\n * MediaSceneSwitcherV2 \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Data {\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u573A\u666F\u5217\u8868 */\n items: MediaSceneSwitcherV2Item[]\n /** \u9ED8\u8BA4\u9009\u4E2D\u7684\u573A\u666F\u7D22\u5F15 */\n defaultActiveIndex?: number\n /** \u5E03\u5C40\u6A21\u5F0F\uFF0C\u9ED8\u8BA4 text-left */\n layout?: MediaSceneSwitcherV2Layout\n /** \u662F\u5426\u5F00\u542F\u81EA\u52A8\u8F6E\u64AD\uFF0C\u9ED8\u8BA4 true */\n autoplay?: boolean\n /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 3000 */\n autoplayDelay?: number\n}\n\nexport interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: MediaSceneSwitcherV2Data\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n classNames?: Partial<Record<MediaSceneSwitcherV2SemanticName, string>>\n /** \u573A\u666F\u5207\u6362\u56DE\u8C03 */\n onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u5A92\u4F53\u7C7B\u578B\n */\ntype ResponsiveMedia = MediaSceneSwitcherV2Item['media']\n\n/** \u65AD\u70B9\u914D\u7F6E */\nconst BREAKPOINTS: { key: keyof ResponsiveMedia; width: number }[] = [\n { key: 'lgDesktop', width: 1920 },\n { key: 'desktop', width: 1440 },\n { key: 'laptop', width: 1024 },\n { key: 'tablet', width: 768 },\n { key: 'mobile', width: 390 },\n]\n\n/**\n * \u68C0\u67E5\u5F53\u524D\u65AD\u70B9\u7684\u5A92\u4F53\u662F\u5426\u4E3A\u89C6\u9891\n */\nconst isCurrentMediaVideo = (media: ResponsiveMedia, currentBreakpoint: keyof ResponsiveMedia): boolean => {\n return media[currentBreakpoint]?.mimeType === 'video/mp4'\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u5A92\u4F53\u5BF9\u8C61\u8F6C\u4E3A Picture source \u683C\u5F0F\u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"url1 1920, url2 1440, url3 1024\"\n */\nconst getImageSource = (media: ResponsiveMedia): string => {\n const sources = BREAKPOINTS.filter(({ key }) => media[key]?.url && media[key]?.mimeType !== 'video/mp4').map(\n ({ key, width }) => `${media[key]!.url} ${width}`\n )\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6 alt \u6587\u672C\n */\nconst getMediaAlt = (media: ResponsiveMedia, fallback: string): string => {\n for (const { key } of BREAKPOINTS) {\n if (media[key]?.alt) return media[key]!.alt\n }\n return fallback\n}\n\n/**\n * \u5A92\u4F53\u6E32\u67D3\u7EC4\u4EF6 - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u6839\u636E\u65AD\u70B9\u6E32\u67D3\u5BF9\u5E94\u8D44\u6E90\n */\nconst MediaRenderer: React.FC<{\n media: ResponsiveMedia\n alt: string\n className?: string\n}> = ({ media, alt, className }) => {\n const isLgDesktop = useMediaQuery({ minWidth: 1920 })\n const isDesktop = useMediaQuery({ minWidth: 1440, maxWidth: 1919 })\n const isLaptop = useMediaQuery({ minWidth: 1025, maxWidth: 1439 })\n const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1024 })\n\n // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9 key\n const currentBreakpoint = React.useMemo((): keyof ResponsiveMedia => {\n if (isLgDesktop && media.lgDesktop?.url) return 'lgDesktop'\n if (isDesktop && media.desktop?.url) return 'desktop'\n if (isLaptop && media.laptop?.url) return 'laptop'\n if (isTablet && media.tablet?.url) return 'tablet'\n if (media.mobile?.url) return 'mobile'\n\n // fallback: \u8FD4\u56DE\u7B2C\u4E00\u4E2A\u6709\u6548\u7684\u65AD\u70B9\n for (const { key } of BREAKPOINTS) {\n if (media[key]?.url) return key\n }\n return 'desktop'\n }, [isLgDesktop, isDesktop, isLaptop, isTablet, media])\n\n const currentMedia = media[currentBreakpoint]\n\n if (!currentMedia?.url) return null\n\n // \u5F53\u524D\u65AD\u70B9\u662F\u89C6\u9891\u5219\u6E32\u67D3\u89C6\u9891\n if (isCurrentMediaVideo(media, currentBreakpoint)) {\n return <video src={currentMedia.url} className={className} autoPlay loop muted playsInline />\n }\n\n // \u56FE\u7247\uFF1A\u4F7F\u7528 Picture \u7EC4\u4EF6\u7684\u54CD\u5E94\u5F0F\u683C\u5F0F\n const imageSource = getImageSource(media)\n\n return (\n <Picture\n source={imageSource || currentMedia.url}\n alt={getMediaAlt(media, alt)}\n className={className}\n imgClassName=\"size-full object-cover\"\n />\n )\n}\n\n/**\n * MediaSceneSwitcherV2 - \u591A\u573A\u666F\u5207\u6362\u7EC4\u4EF6\n *\n * @description \u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u573A\u666F\u7684\u5207\u6362\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\uFF1A\n * - mobile/tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40\n * - laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40\n */\nconst DEFAULT_AUTOPLAY_DELAY = 3000\n\nconst MediaSceneSwitcherV2 = React.forwardRef<HTMLDivElement, MediaSceneSwitcherV2Props>(\n ({ className, classNames = {}, data, onSceneChange, ...props }, ref) => {\n const {\n title,\n subtitle,\n items: scenes,\n defaultActiveIndex = 0,\n layout = 'left',\n autoplay = true,\n autoplayDelay = DEFAULT_AUTOPLAY_DELAY,\n } = data\n const [activeIndex, setActiveIndex] = React.useState(defaultActiveIndex)\n const swiperRef = React.useRef<SwiperType | null>(null)\n const intervalRef = React.useRef<number>(0)\n const tabRefs = React.useRef<(HTMLDivElement | null)[]>([])\n\n // \u5224\u65AD\u662F\u5426\u662F\u684C\u9762\u7AEF\n const isLaptopOrLarger = useMediaQuery({ minWidth: 1025 })\n\n // \u684C\u9762\u7AEF\u81EA\u52A8\u8F6E\u64AD\uFF08\u53EA\u5728 laptop+ \u751F\u6548\uFF0C\u624B\u673A\u7AEF\u7531 Swiper \u7684 onSlideChange \u540C\u6B65\uFF09\n React.useEffect(() => {\n if (!autoplay || scenes.length <= 1 || !isLaptopOrLarger) return\n\n const startAutoplay = () => {\n intervalRef.current = window.setInterval(() => {\n setActiveIndex(prev => (prev + 1) % scenes.length)\n }, autoplayDelay)\n }\n\n startAutoplay()\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [autoplay, autoplayDelay, scenes.length, isLaptopOrLarger])\n\n // \u5F53 activeIndex \u53D8\u5316\u65F6\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\uFF08\u4EC5\u5F53\u7236\u5BB9\u5668\u53EF\u6EDA\u52A8\u65F6\uFF09\n React.useEffect(() => {\n if (!isLaptopOrLarger || !tabRefs.current[activeIndex]) return\n\n const tabElement = tabRefs.current[activeIndex]\n const parentContainer = tabElement?.parentElement\n\n // \u68C0\u67E5\u7236\u5BB9\u5668\u662F\u5426\u53EF\u6EDA\u52A8\n if (!parentContainer || parentContainer.scrollHeight <= parentContainer.clientHeight) return\n\n // \u4F7F\u7528 requestAnimationFrame \u907F\u514D\u963B\u585E\u4E3B\u7EBF\u7A0B\n const rafId = requestAnimationFrame(() => {\n const containerRect = parentContainer.getBoundingClientRect()\n const tabRect = tabElement.getBoundingClientRect()\n\n // \u68C0\u67E5\u5143\u7D20\u662F\u5426\u5DF2\u5728\u53EF\u89C6\u533A\u57DF\u5185\n const isVisible = tabRect.top >= containerRect.top && tabRect.bottom <= containerRect.bottom\n\n // \u5982\u679C\u5DF2\u7ECF\u53EF\u89C1\uFF0C\u4E0D\u9700\u8981\u6EDA\u52A8\n if (isVisible) return\n\n // \u8BA1\u7B97\u6EDA\u52A8\u8DDD\u79BB\uFF0C\u8BA9 tab \u5C3D\u91CF\u5C45\u4E2D\u663E\u793A\n const scrollOffset = tabRect.top - containerRect.top - parentContainer.clientHeight / 2 + tabRect.height / 2\n\n parentContainer.scrollTo({\n top: parentContainer.scrollTop + scrollOffset,\n behavior: 'smooth',\n })\n })\n\n return () => cancelAnimationFrame(rafId)\n }, [activeIndex, isLaptopOrLarger])\n\n const handleSceneClick = React.useCallback(\n (index: number) => {\n setActiveIndex(index)\n onSceneChange?.(index, scenes[index])\n // \u540C\u6B65 swiper \u4F4D\u7F6E\n swiperRef.current?.slideTo(index)\n\n // \u91CD\u7F6E\u81EA\u52A8\u8F6E\u64AD\u8BA1\u65F6\u5668\n if (autoplay && scenes.length > 1) {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setActiveIndex(prev => (prev + 1) % scenes.length)\n }, autoplayDelay)\n }\n },\n [scenes, onSceneChange, autoplay, autoplayDelay]\n )\n\n const handleSlideChange = React.useCallback(\n (swiper: SwiperType) => {\n // \u4F7F\u7528 realIndex \u4EE5\u6B63\u786E\u5904\u7406 loop \u6A21\u5F0F\n const index = swiper.realIndex\n setActiveIndex(index)\n onSceneChange?.(index, scenes[index])\n },\n [scenes, onSceneChange]\n )\n\n const activeScene = scenes[activeIndex]\n\n const isMediaTop = layout === 'top'\n\n return (\n <div\n ref={ref}\n className={cn('scene-switcher-root', 'text-info-primary w-full', className, classNames.root, {\n 'aiui-dark': data.theme === 'dark',\n })}\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {(title || subtitle) && (\n <div className={cn('scene-switcher-header mb-6', classNames.header)}>\n {title && (\n <Heading as=\"h2\" size={4} html={title} className={cn('scene-switcher-title', classNames.title)} />\n )}\n {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n </div>\n )}\n {/* Mobile/Tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40 */}\n <div className={cn('scene-switcher-swiper', 'laptop:hidden !overflow-visible', classNames.swiper)}>\n <Swiper\n modules={[FreeMode, Mousewheel, Autoplay]}\n onSwiper={swiper => {\n swiperRef.current = swiper\n }}\n className=\"!overflow-visible\"\n onSlideChange={handleSlideChange}\n slidesPerView=\"auto\"\n spaceBetween={12}\n freeMode={true}\n mousewheel={{ forceToAxis: true }}\n initialSlide={defaultActiveIndex}\n loop={autoplay && scenes.length > 1}\n autoplay={autoplay && scenes.length > 1 ? { delay: autoplayDelay, disableOnInteraction: false } : false}\n breakpoints={{\n 768: { spaceBetween: 16 },\n }}\n >\n {scenes.map((scene, index) => (\n <SwiperSlide key={index} className=\"h-[462px] !w-[296px]\">\n <div\n className={cn('scene-switcher-slide', 'flex cursor-pointer flex-col', classNames.slide)}\n onClick={() => handleSceneClick(index)}\n >\n {/* \u5A92\u4F53 */}\n <div\n className={cn(\n 'scene-switcher-slide-media',\n 'rounded-box relative aspect-[296/320] w-full overflow-hidden',\n classNames.slideMedia\n )}\n >\n <MediaRenderer\n media={scene.media}\n alt={scene.title}\n className=\"rounded-t-box size-full overflow-hidden object-cover\"\n />\n </div>\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'scene-switcher-slide-content',\n ' mt-6 border-t pt-4',\n activeIndex === index ? 'border-info-primary border-t-4' : 'border-lines-primary',\n classNames.slideContent\n )}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title ',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n )}\n html={scene.description}\n />\n )}\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n\n {/* Laptop+: media-top \u5E03\u5C40 (\u4E0A\u56FE\u4E0B\u6587) */}\n {isMediaTop && (\n <div\n className={cn(\n 'scene-switcher-container',\n 'laptop:flex laptop:flex-col hidden',\n 'laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]',\n classNames.container\n )}\n >\n {/* \u5A92\u4F53\u533A\u57DF - \u663E\u793A\u5F53\u524D\u9009\u4E2D */}\n <div\n className={cn(\n 'scene-switcher-media-wrapper',\n 'rounded-box flex-1 overflow-hidden',\n classNames.mediaWrapper\n )}\n >\n {activeScene && (\n <MediaRenderer\n media={activeScene.media}\n alt={activeScene.title}\n className={cn('scene-switcher-media', 'rounded-box size-full object-cover', classNames.media)}\n />\n )}\n </div>\n\n {/* Tab \u5217\u8868 - \u6A2A\u5411\u6392\u5217 */}\n <div\n className={cn(\n 'scene-switcher-tab-list',\n 'border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t',\n classNames.tabList\n )}\n >\n {scenes.map((scene, index) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n className={cn(\n 'scene-switcher-tab-item',\n 'desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors',\n activeIndex === index\n ? 'border-info-primary border-t-4'\n : 'hover:border-lines-primary border-transparent',\n classNames.tabItem\n )}\n onClick={() => handleSceneClick(index)}\n role=\"button\"\n aria-selected={activeIndex === index}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title line-clamp-2',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n )}\n html={scene.description}\n />\n )}\n </div>\n ))}\n </div>\n </div>\n )}\n\n {/* Laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40 */}\n {!isMediaTop && (\n <div\n className={cn(\n 'scene-switcher-container',\n 'laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden',\n 'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n layout === 'right' && 'flex-row-reverse',\n classNames.container\n )}\n >\n {/* Tab \u5217\u8868 - \u5916\u5C42\u5C45\u4E2D */}\n <div\n className={cn(\n 'scene-switcher-tab-list',\n 'laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center',\n classNames.tabList\n )}\n >\n {/* \u5185\u5C42\u6EDA\u52A8 */}\n <div className=\"flex max-h-full w-full flex-col overflow-y-auto\">\n {scenes.map((scene, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"border-lines-primary h-8 shrink-0 border-l-4\" />}\n <div\n ref={el => {\n tabRefs.current[index] = el\n }}\n className={cn(\n 'scene-switcher-tab-item',\n 'shrink-0 cursor-pointer border-l-4 pl-5',\n activeIndex === index\n ? 'border-info-primary border-l-[6px]'\n : 'border-lines-primary hover:border-info-tertiary',\n classNames.tabItem\n )}\n onClick={() => handleSceneClick(index)}\n role=\"button\"\n aria-selected={activeIndex === index}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary hidden'\n )}\n html={scene.description}\n />\n )}\n </div>\n </React.Fragment>\n ))}\n </div>\n </div>\n\n {/* \u5A92\u4F53\u533A\u57DF */}\n <div\n className={cn(\n 'scene-switcher-media-wrapper',\n 'rounded-box flex-1 overflow-hidden',\n classNames.mediaWrapper\n )}\n >\n {activeScene && (\n <MediaRenderer\n media={activeScene.media}\n alt={activeScene.title}\n className={cn(\n 'scene-switcher-media',\n 'rounded-box size-full h-full overflow-visible object-cover',\n classNames.media\n )}\n />\n )}\n </div>\n </div>\n )}\n </div>\n )\n }\n)\n\nMediaSceneSwitcherV2.displayName = 'MediaSceneSwitcherV2'\nexport default withLayout(MediaSceneSwitcherV2)\n"],
5
- "mappings": "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",
6
- "names": ["jsx", "jsxs", "React", "Swiper", "SwiperSlide", "FreeMode", "Mousewheel", "Autoplay", "useMediaQuery", "cn", "Picture", "Heading", "Text", "withLayout", "BREAKPOINTS", "isCurrentMediaVideo", "media", "currentBreakpoint", "getImageSource", "key", "width", "getMediaAlt", "fallback", "MediaRenderer", "alt", "className", "isLgDesktop", "isDesktop", "isLaptop", "isTablet", "currentMedia", "imageSource", "DEFAULT_AUTOPLAY_DELAY", "MediaSceneSwitcherV2", "classNames", "data", "onSceneChange", "props", "ref", "title", "subtitle", "scenes", "defaultActiveIndex", "layout", "autoplay", "autoplayDelay", "activeIndex", "setActiveIndex", "swiperRef", "intervalRef", "tabRefs", "isLaptopOrLarger", "prev", "tabElement", "parentContainer", "rafId", "containerRect", "tabRect", "scrollOffset", "handleSceneClick", "index", "handleSlideChange", "swiper", "activeScene", "isMediaTop", "scene", "el", "MediaSceneSwitcherV2_default"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\n\nexport type MediaSceneSwitcherV2SemanticName =\n | 'root'\n | 'header'\n | 'title'\n | 'subtitle'\n | 'container'\n | 'tabList'\n | 'tabItem'\n | 'tabTitle'\n | 'tabDescription'\n | 'mediaWrapper'\n | 'media'\n | 'swiper'\n | 'slide'\n | 'slideMedia'\n | 'slideContent'\n\n/**\n * \u573A\u666F\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Item {\n /** \u573A\u666F\u6807\u9898 */\n title: string\n /** \u573A\u666F\u63CF\u8FF0 */\n description?: string\n /** \u573A\u666F\u5A92\u4F53\uFF08\u56FE\u7247/\u89C6\u9891\uFF09 */\n media: {\n mobile?: MediaType\n tablet?: MediaType\n laptop?: MediaType\n desktop?: MediaType\n lgDesktop?: MediaType\n }\n}\n\n/**\n * \u5E03\u5C40\u6A21\u5F0F\n * - left: \u5DE6\u6587\u53F3\u56FE\uFF08laptop+ \u9ED8\u8BA4\uFF09\n * - right: \u5DE6\u56FE\u53F3\u6587\n * - top: \u4E0A\u56FE\u4E0B\u6587\uFF08swiper \u5361\u7247\u6A21\u5F0F\uFF09\n */\nexport type MediaSceneSwitcherV2Layout = 'left' | 'right' | 'top'\n\n/**\n * MediaSceneSwitcherV2 \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Data {\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u573A\u666F\u5217\u8868 */\n items: MediaSceneSwitcherV2Item[]\n /** \u9ED8\u8BA4\u9009\u4E2D\u7684\u573A\u666F\u7D22\u5F15 */\n defaultActiveIndex?: number\n /** \u5E03\u5C40\u6A21\u5F0F\uFF0C\u9ED8\u8BA4 text-left */\n layout?: MediaSceneSwitcherV2Layout\n /** \u662F\u5426\u5F00\u542F\u81EA\u52A8\u8F6E\u64AD\uFF0C\u9ED8\u8BA4 true */\n autoplay?: boolean\n /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 3000 */\n autoplayDelay?: number\n}\n\nexport interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: MediaSceneSwitcherV2Data\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n classNames?: Partial<Record<MediaSceneSwitcherV2SemanticName, string>>\n /** \u573A\u666F\u5207\u6362\u56DE\u8C03 */\n onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void\n}\n\nconst toMediaProps = (media: MediaSceneSwitcherV2Item['media']) => ({\n pcImage: media.lgDesktop,\n desktopImage: media.desktop,\n laptopImage: media.laptop,\n padImage: media.tablet,\n mobileImage: media.mobile,\n})\n\n/**\n * MediaSceneSwitcherV2 - \u591A\u573A\u666F\u5207\u6362\u7EC4\u4EF6\n *\n * @description \u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u573A\u666F\u7684\u5207\u6362\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\uFF1A\n * - mobile/tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40\n * - laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40\n */\nconst DEFAULT_AUTOPLAY_DELAY = 3000\n\nconst MediaSceneSwitcherV2 = React.forwardRef<HTMLDivElement, MediaSceneSwitcherV2Props>(\n ({ className, classNames = {}, data, onSceneChange, ...props }, ref) => {\n const {\n title,\n subtitle,\n items: scenes,\n defaultActiveIndex = 0,\n layout = 'left',\n autoplay = true,\n autoplayDelay = DEFAULT_AUTOPLAY_DELAY,\n } = data\n const [activeIndex, setActiveIndex] = React.useState(defaultActiveIndex)\n const swiperRef = React.useRef<SwiperType | null>(null)\n const intervalRef = React.useRef<number>(0)\n const tabRefs = React.useRef<(HTMLDivElement | null)[]>([])\n\n // \u5224\u65AD\u662F\u5426\u662F\u684C\u9762\u7AEF\n const isLaptopOrLarger = useMediaQuery({ minWidth: 1025 })\n\n // \u684C\u9762\u7AEF\u81EA\u52A8\u8F6E\u64AD\uFF08\u53EA\u5728 laptop+ \u751F\u6548\uFF0C\u624B\u673A\u7AEF\u7531 Swiper \u7684 onSlideChange \u540C\u6B65\uFF09\n React.useEffect(() => {\n if (!autoplay || scenes.length <= 1 || !isLaptopOrLarger) return\n\n const startAutoplay = () => {\n intervalRef.current = window.setInterval(() => {\n setActiveIndex(prev => (prev + 1) % scenes.length)\n }, autoplayDelay)\n }\n\n startAutoplay()\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [autoplay, autoplayDelay, scenes.length, isLaptopOrLarger])\n\n // \u5F53 activeIndex \u53D8\u5316\u65F6\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\uFF08\u4EC5\u5F53\u7236\u5BB9\u5668\u53EF\u6EDA\u52A8\u65F6\uFF09\n React.useEffect(() => {\n if (!isLaptopOrLarger || !tabRefs.current[activeIndex]) return\n\n const tabElement = tabRefs.current[activeIndex]\n const parentContainer = tabElement?.parentElement\n\n // \u68C0\u67E5\u7236\u5BB9\u5668\u662F\u5426\u53EF\u6EDA\u52A8\n if (!parentContainer || parentContainer.scrollHeight <= parentContainer.clientHeight) return\n\n // \u4F7F\u7528 requestAnimationFrame \u907F\u514D\u963B\u585E\u4E3B\u7EBF\u7A0B\n const rafId = requestAnimationFrame(() => {\n const containerRect = parentContainer.getBoundingClientRect()\n const tabRect = tabElement.getBoundingClientRect()\n\n // \u68C0\u67E5\u5143\u7D20\u662F\u5426\u5DF2\u5728\u53EF\u89C6\u533A\u57DF\u5185\n const isVisible = tabRect.top >= containerRect.top && tabRect.bottom <= containerRect.bottom\n\n // \u5982\u679C\u5DF2\u7ECF\u53EF\u89C1\uFF0C\u4E0D\u9700\u8981\u6EDA\u52A8\n if (isVisible) return\n\n // \u8BA1\u7B97\u6EDA\u52A8\u8DDD\u79BB\uFF0C\u8BA9 tab \u5C3D\u91CF\u5C45\u4E2D\u663E\u793A\n const scrollOffset = tabRect.top - containerRect.top - parentContainer.clientHeight / 2 + tabRect.height / 2\n\n parentContainer.scrollTo({\n top: parentContainer.scrollTop + scrollOffset,\n behavior: 'smooth',\n })\n })\n\n return () => cancelAnimationFrame(rafId)\n }, [activeIndex, isLaptopOrLarger])\n\n const handleSceneClick = React.useCallback(\n (index: number) => {\n setActiveIndex(index)\n onSceneChange?.(index, scenes[index])\n // \u540C\u6B65 swiper \u4F4D\u7F6E\n swiperRef.current?.slideTo(index)\n\n // \u91CD\u7F6E\u81EA\u52A8\u8F6E\u64AD\u8BA1\u65F6\u5668\n if (autoplay && scenes.length > 1) {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setActiveIndex(prev => (prev + 1) % scenes.length)\n }, autoplayDelay)\n }\n },\n [scenes, onSceneChange, autoplay, autoplayDelay]\n )\n\n const handleSlideChange = React.useCallback(\n (swiper: SwiperType) => {\n // \u4F7F\u7528 realIndex \u4EE5\u6B63\u786E\u5904\u7406 loop \u6A21\u5F0F\n const index = swiper.realIndex\n setActiveIndex(index)\n onSceneChange?.(index, scenes[index])\n },\n [scenes, onSceneChange]\n )\n\n const activeScene = scenes[activeIndex]\n\n const isMediaTop = layout === 'top'\n\n return (\n <div\n ref={ref}\n className={cn('scene-switcher-root', 'text-info-primary w-full', className, classNames.root, {\n 'aiui-dark': data.theme === 'dark',\n })}\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {(title || subtitle) && (\n <div className={cn('scene-switcher-header mb-6', classNames.header)}>\n {title && (\n <Heading as=\"h2\" size={4} html={title} className={cn('scene-switcher-title', classNames.title)} />\n )}\n {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n </div>\n )}\n {/* Mobile/Tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40 */}\n <div className={cn('scene-switcher-swiper', 'laptop:hidden !overflow-visible', classNames.swiper)}>\n <Swiper\n modules={[FreeMode, Mousewheel, Autoplay]}\n onSwiper={swiper => {\n swiperRef.current = swiper\n }}\n className=\"!overflow-visible\"\n onSlideChange={handleSlideChange}\n slidesPerView=\"auto\"\n spaceBetween={12}\n freeMode={true}\n mousewheel={{ forceToAxis: true }}\n initialSlide={defaultActiveIndex}\n loop={autoplay && scenes.length > 1}\n autoplay={autoplay && scenes.length > 1 ? { delay: autoplayDelay, disableOnInteraction: false } : false}\n breakpoints={{\n 768: { spaceBetween: 16 },\n }}\n >\n {scenes.map((scene, index) => (\n <SwiperSlide key={index} className=\"h-[462px] !w-[296px]\">\n <div\n className={cn('scene-switcher-slide', 'flex cursor-pointer flex-col', classNames.slide)}\n onClick={() => handleSceneClick(index)}\n >\n {/* \u5A92\u4F53 */}\n <div\n className={cn(\n 'scene-switcher-slide-media',\n 'rounded-box relative aspect-[296/320] w-full overflow-hidden',\n classNames.slideMedia\n )}\n >\n <Media\n {...toMediaProps(scene.media)}\n className=\"rounded-t-box size-full overflow-hidden object-cover\"\n />\n </div>\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'scene-switcher-slide-content',\n ' mt-6 border-t pt-4',\n activeIndex === index ? 'border-info-primary border-t-4' : 'border-lines-primary',\n classNames.slideContent\n )}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title ',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n )}\n html={scene.description}\n />\n )}\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n\n {/* Laptop+: media-top \u5E03\u5C40 (\u4E0A\u56FE\u4E0B\u6587) */}\n {isMediaTop && (\n <div\n className={cn(\n 'scene-switcher-container',\n 'laptop:flex laptop:flex-col hidden',\n 'laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]',\n classNames.container\n )}\n >\n {/* \u5A92\u4F53\u533A\u57DF - \u663E\u793A\u5F53\u524D\u9009\u4E2D */}\n <div\n className={cn(\n 'scene-switcher-media-wrapper',\n 'rounded-box flex-1 overflow-hidden',\n classNames.mediaWrapper\n )}\n >\n {activeScene && (\n <Media\n {...toMediaProps(activeScene.media)}\n className={cn('scene-switcher-media', 'rounded-box size-full object-cover', classNames.media)}\n />\n )}\n </div>\n\n {/* Tab \u5217\u8868 - \u6A2A\u5411\u6392\u5217 */}\n <div\n className={cn(\n 'scene-switcher-tab-list',\n 'border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t',\n classNames.tabList\n )}\n >\n {scenes.map((scene, index) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n className={cn(\n 'scene-switcher-tab-item',\n 'desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors',\n activeIndex === index\n ? 'border-info-primary border-t-4'\n : 'hover:border-lines-primary border-transparent',\n classNames.tabItem\n )}\n onClick={() => handleSceneClick(index)}\n role=\"button\"\n aria-selected={activeIndex === index}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title line-clamp-2',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n )}\n html={scene.description}\n />\n )}\n </div>\n ))}\n </div>\n </div>\n )}\n\n {/* Laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40 */}\n {!isMediaTop && (\n <div\n className={cn(\n 'scene-switcher-container',\n 'laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden',\n 'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n layout === 'right' && 'flex-row-reverse',\n classNames.container\n )}\n >\n {/* Tab \u5217\u8868 - \u5916\u5C42\u5C45\u4E2D */}\n <div\n className={cn(\n 'scene-switcher-tab-list',\n 'laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center',\n classNames.tabList\n )}\n >\n {/* \u5185\u5C42\u6EDA\u52A8 */}\n <div className=\"flex max-h-full w-full flex-col overflow-y-auto\">\n {scenes.map((scene, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"border-lines-primary h-8 shrink-0 border-l-4\" />}\n <div\n ref={el => {\n tabRefs.current[index] = el\n }}\n className={cn(\n 'scene-switcher-tab-item',\n 'shrink-0 cursor-pointer border-l-4 pl-5',\n activeIndex === index\n ? 'border-info-primary border-l-[6px]'\n : 'border-lines-primary hover:border-info-tertiary',\n classNames.tabItem\n )}\n onClick={() => handleSceneClick(index)}\n role=\"button\"\n aria-selected={activeIndex === index}\n >\n <Heading\n className={cn(\n 'scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n scene.title\n )}\n size={3}\n as={'h3'}\n html={scene.title}\n />\n {scene.description && (\n <Text\n className={cn(\n 'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n activeIndex === index ? 'text-info-primary' : 'text-info-tertiary hidden'\n )}\n html={scene.description}\n />\n )}\n </div>\n </React.Fragment>\n ))}\n </div>\n </div>\n\n {/* \u5A92\u4F53\u533A\u57DF */}\n <div\n className={cn(\n 'scene-switcher-media-wrapper',\n 'rounded-box flex-1 overflow-hidden',\n classNames.mediaWrapper\n )}\n >\n {activeScene && (\n <Media\n {...toMediaProps(activeScene.media)}\n className={cn(\n 'scene-switcher-media',\n 'rounded-box size-full h-full overflow-visible object-cover',\n classNames.media\n )}\n />\n )}\n </div>\n </div>\n )}\n </div>\n )\n }\n)\n\nMediaSceneSwitcherV2.displayName = 'MediaSceneSwitcherV2'\nexport default withLayout(MediaSceneSwitcherV2)\n"],
5
+ "mappings": "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",
6
+ "names": ["jsx", "jsxs", "React", "Swiper", "SwiperSlide", "FreeMode", "Mousewheel", "Autoplay", "useMediaQuery", "cn", "Heading", "Text", "withLayout", "Media", "toMediaProps", "media", "DEFAULT_AUTOPLAY_DELAY", "MediaSceneSwitcherV2", "className", "classNames", "data", "onSceneChange", "props", "ref", "title", "subtitle", "scenes", "defaultActiveIndex", "layout", "autoplay", "autoplayDelay", "activeIndex", "setActiveIndex", "swiperRef", "intervalRef", "tabRefs", "isLaptopOrLarger", "prev", "tabElement", "parentContainer", "rafId", "containerRect", "tabRect", "scrollOffset", "handleSceneClick", "index", "handleSlideChange", "swiper", "activeScene", "isMediaTop", "scene", "el", "MediaSceneSwitcherV2_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",