@anker-in/headless-ui 1.0.26-alpha.1762500619766 → 1.0.26-alpha.1762502118179
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.
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/cjs/biz-components/ImageWithText/types.d.ts +2 -0
- package/dist/cjs/biz-components/ImageWithText/types.js.map +1 -1
- package/dist/cjs/biz-components/Ksp/index.js +1 -1
- package/dist/cjs/biz-components/Ksp/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/biz-components/Title/types.d.ts +2 -1
- package/dist/cjs/biz-components/Title/types.js +1 -1
- package/dist/cjs/biz-components/Title/types.js.map +1 -1
- package/dist/cjs/stories/imageWithText.stories.js +2 -2
- package/dist/cjs/stories/imageWithText.stories.js.map +2 -2
- package/dist/cjs/types/props.d.ts +1 -1
- package/dist/cjs/types/props.js +1 -1
- package/dist/cjs/types/props.js.map +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/esm/biz-components/ImageWithText/types.d.ts +2 -0
- package/dist/esm/biz-components/Ksp/index.js +1 -1
- package/dist/esm/biz-components/Ksp/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/Title/types.d.ts +2 -1
- package/dist/esm/stories/imageWithText.stories.js +2 -2
- package/dist/esm/stories/imageWithText.stories.js.map +2 -2
- package/dist/esm/types/props.d.ts +1 -1
- package/package.json +1 -1
- package/tailwind.config.js +4 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var pe=Object.create;var k=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var ce=(a,m)=>{for(var r in m)k(a,r,{get:m[r],enumerable:!0})},q=(a,m,r,v)=>{if(m&&typeof m=="object"||typeof m=="function")for(let x of re(m))!ne.call(a,x)&&x!==r&&k(a,x,{get:()=>m[x],enumerable:!(v=de(m,x))||v.enumerable});return a};var he=(a,m,r)=>(r=a!=null?pe(xe(a)):{},q(m||!a||!a.__esModule?k(r,"default",{value:a,enumerable:!0}):r,a)),ge=a=>q(k({},"__esModule",{value:!0}),a);var _e={};ce(_e,{default:()=>fe});module.exports=ge(_e);var e=require("react/jsx-runtime"),i=he(require("react")),s=require("../../components/index.js"),g=require("../../helpers/utils.js"),G=require("../../shared/Styles.js"),J=require("../../hooks/useExposure.js"),y=require("../../hooks/useIntersectionObserver.js"),_=require("framer-motion");const ue="image",ve="image_with_text",B=i.default.forwardRef(({data:a,className:m},r)=>{const{title:v,subtitle:x,desc:b,descIcon:N,image:w,padImage:V,mobileImage:E,theme:T="dark",items:H=[],imagePosition:K,layout:Q,mediaType:U="image",datalist:n=[],video:S,padVideo:W,mobVideo:z,poster:X,padPoster:Y,mobPoster:Z}=a,o=Q||K||"left",I=(0,i.useRef)(null),P=(0,i.useRef)(null),D=(0,i.useRef)(null),L=(0,i.useRef)(null),[c,ee]=(0,i.useState)(0),R=(0,i.useRef)([]),[j,te]=(0,i.useState)({left:0,width:0}),[f,ie]=(0,i.useState)(""),[A,ae]=(0,i.useState)(""),[$,oe]=(0,i.useState)("");(0,J.useExposure)(I,{componentType:ue,componentName:ve,componentTitle:v,componentDescription:x}),(0,i.useImperativeHandle)(r,()=>I.current),(0,i.useEffect)(()=>{if(n.length>0){const t=R.current[c];if(t){const{offsetLeft:d,offsetWidth:u}=t;te({left:d,width:u})}}},[c,n.length]),(0,y.useIntersectionObserverDelay)(P,{once:!0,threshold:.1,callback:()=>{S?.url&&ie(S.url)}}),(0,y.useIntersectionObserverDelay)(D,{once:!0,threshold:.1,callback:()=>{W?.url&&ae(W.url)}}),(0,y.useIntersectionObserverDelay)(L,{once:!0,threshold:.1,callback:()=>{z?.url&&oe(z.url)}});const le=(t,d)=>{ee(t),d.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},p=n.length>0,F=U==="video",l=H.length>0,C=()=>{if(p&&n[c]){const t=n[c];return`${t.image.url} ,${t.imgPad?.url||t.image.url} 1440, ${t.imageMob?.url||t.image.url} 767`}return w?`${w.url},${V?.url||w.url} 1024, ${E?.url||w.url} 768`:""},O=()=>{if(p){const h=n[c],M=h.poster?.url||h.image?.url,se=h.padPoster?.url||h.imgPad?.url||M,me=h.mobPoster?.url||h.imageMob?.url||M;return(0,e.jsx)(_.AnimatePresence,{mode:"wait",children:(0,e.jsx)(_.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[16px]",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:M,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:se,src:A||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:me,src:$||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},h.video?.url||h.image.url)})}const t=X?.url||w?.url,d=Y?.url||V?.url||t,u=Z?.url||E?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:d,src:A||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:u,src:$||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return(0,e.jsxs)("section",{ref:I,"data-ui-component-id":"ImageWithText",className:(0,g.cn)("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!p,"flex-col":!p&&(o==="top"||o==="bottom"),"flex-col laptop:flex-row":!p&&(o==="left"||o==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":p,"image-with-text--dark text-white":T==="dark","image-with-text--light text-[#1f1f1f]":T==="light","aiui-dark":l&&T==="dark"},m),children:[p&&(0,e.jsxs)("div",{className:"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(s.Heading,{as:"h3",size:4,html:v,className:"image-with-text__title"}),(0,e.jsx)(s.Text,{as:"p",size:1,html:b,className:"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,e.jsxs)("div",{className:"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:j.left,width:j.width}}),n.map((t,d)=>(0,e.jsx)("div",{ref:u=>{R.current[d]=u},onClick:u=>le(d,u),className:(0,g.cn)("image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",c===d?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(s.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},d))]})})]}),!p&&(0,e.jsxs)("div",{className:(0,g.cn)("image-with-text__content flex flex-col justify-center",{"w-full items-start laptop:w-fit":l,"order-1 laptop:order-2":l&&o==="left","order-1":l&&o==="right"||!l&&(o==="top"||o==="left"),"order-2":!l&&(o==="bottom"||o==="right")}),children:[(0,e.jsx)(s.Heading,{as:"h2",size:4,html:v,className:(0,g.cn)("image-with-text__title",{"w-full text-left":l})}),x&&(0,e.jsx)(s.Text,{as:"p",size:l?4:3,html:x,className:(0,g.cn)("image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",{"laptop:mt-[16px]":!l,"text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":l})}),!l&&(b||N)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[N&&(0,e.jsx)("img",{src:N,alt:"icon",className:"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),b&&(0,e.jsx)(s.Heading,{as:"h4",size:5,html:b,className:"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]}),l&&(0,e.jsx)("div",{className:"image-with-text__items flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0",children:H.map((t,d)=>(0,e.jsxs)("div",{className:"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[(0,e.jsxs)("div",{className:"image-with-text__item-header flex flex-row items-center gap-[8px]",children:[(0,e.jsx)(s.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),(0,e.jsx)(s.Heading,{size:5,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(s.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},d))})]}),(0,e.jsx)("div",{className:(0,g.cn)("image-with-text__media-wrapper",{"order-1":!p&&(o==="top"||o==="left"),"order-2":!p&&(o==="bottom"||o==="right"),"aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":l,"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":l&&o==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":l&&o==="right","relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":p}),children:p?F?O():(0,e.jsx)(_.AnimatePresence,{mode:"wait",children:(0,e.jsx)(_.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(s.Picture,{source:C(),alt:n[c].image.alt,className:"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]"})},n[c].image.url)}):F?O():(0,e.jsx)(s.Picture,{source:C(),className:(0,g.cn)("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!l})})})]})});B.displayName="ImageWithText";var fe=(0,G.withLayout)(B);
|
|
1
|
+
"use strict";"use client";var pe=Object.create;var y=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var xe=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var he=(a,m)=>{for(var r in m)y(a,r,{get:m[r],enumerable:!0})},B=(a,m,r,v)=>{if(m&&typeof m=="object"||typeof m=="function")for(let x of xe(m))!ce.call(a,x)&&x!==r&&y(a,x,{get:()=>m[x],enumerable:!(v=re(m,x))||v.enumerable});return a};var ge=(a,m,r)=>(r=a!=null?pe(ne(a)):{},B(m||!a||!a.__esModule?y(r,"default",{value:a,enumerable:!0}):r,a)),ue=a=>B(y({},"__esModule",{value:!0}),a);var we={};he(we,{default:()=>_e});module.exports=ue(we);var e=require("react/jsx-runtime"),i=ge(require("react")),s=require("../../components/index.js"),c=require("../../helpers/utils.js"),J=require("../../shared/Styles.js"),K=require("../../hooks/useExposure.js"),N=require("../../hooks/useIntersectionObserver.js"),_=require("framer-motion");const ve="image",fe="image_with_text",G=i.default.forwardRef(({data:a,className:m},r)=>{const{title:v,subtitle:x,desc:b,descIcon:T,image:w,padImage:E,mobileImage:H,theme:I="dark",items:S=[],imagePosition:Q,layout:U,mediaType:X="image",datalist:n=[],video:W,padVideo:z,mobVideo:R,poster:Y,padPoster:Z,mobPoster:ee,cols:k=1}=a,o=U||Q||"left",P=(0,i.useRef)(null),D=(0,i.useRef)(null),L=(0,i.useRef)(null),M=(0,i.useRef)(null),[h,te]=(0,i.useState)(0),A=(0,i.useRef)([]),[$,ie]=(0,i.useState)({left:0,width:0}),[f,ae]=(0,i.useState)(""),[j,oe]=(0,i.useState)(""),[F,le]=(0,i.useState)("");(0,K.useExposure)(P,{componentType:ve,componentName:fe,componentTitle:v,componentDescription:x}),(0,i.useImperativeHandle)(r,()=>P.current),(0,i.useEffect)(()=>{if(n.length>0){const t=A.current[h];if(t){const{offsetLeft:p,offsetWidth:u}=t;ie({left:p,width:u})}}},[h,n.length]),(0,N.useIntersectionObserverDelay)(D,{once:!0,threshold:.1,callback:()=>{W?.url&&ae(W.url)}}),(0,N.useIntersectionObserverDelay)(L,{once:!0,threshold:.1,callback:()=>{z?.url&&oe(z.url)}}),(0,N.useIntersectionObserverDelay)(M,{once:!0,threshold:.1,callback:()=>{R?.url&&le(R.url)}});const se=(t,p)=>{te(t),p.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},d=n.length>0,C=X==="video",l=S.length>0,O=()=>{if(d&&n[h]){const t=n[h];return`${t.image.url} ,${t.imgPad?.url||t.image.url} 1440, ${t.imageMob?.url||t.image.url} 767`}return w?`${w.url},${E?.url||w.url} 1024, ${H?.url||w.url} 768`:""},q=()=>{if(d){const g=n[h],V=g.poster?.url||g.image?.url,me=g.padPoster?.url||g.imgPad?.url||V,de=g.mobPoster?.url||g.imageMob?.url||V;return(0,e.jsx)(_.AnimatePresence,{mode:"wait",children:(0,e.jsx)(_.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[16px]",children:[(0,e.jsx)("div",{ref:D,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:V,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:me,src:j||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),(0,e.jsx)("div",{ref:M,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:de,src:F||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},g.video?.url||g.image.url)})}const t=Y?.url||w?.url,p=Z?.url||E?.url||t,u=ee?.url||H?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]",children:[(0,e.jsx)("div",{ref:D,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:p,src:j||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),(0,e.jsx)("div",{ref:M,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:u,src:F||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return(0,e.jsxs)("section",{ref:P,"data-ui-component-id":"ImageWithText",className:(0,c.cn)("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!d,"flex-col":!d&&(o==="top"||o==="bottom"),"flex-col laptop:flex-row":!d&&(o==="left"||o==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":d,"image-with-text--dark text-white":I==="dark","image-with-text--light text-[#1f1f1f]":I==="light","aiui-dark":l&&I==="dark"},m),children:[d&&(0,e.jsxs)("div",{className:"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(s.Heading,{as:"h3",size:4,html:v,className:"image-with-text__title"}),(0,e.jsx)(s.Text,{as:"p",size:1,html:b,className:"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,e.jsxs)("div",{className:"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:$.left,width:$.width}}),n.map((t,p)=>(0,e.jsx)("div",{ref:u=>{A.current[p]=u},onClick:u=>se(p,u),className:(0,c.cn)("image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",h===p?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(s.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},p))]})})]}),!d&&(0,e.jsxs)("div",{className:(0,c.cn)("image-with-text__content flex flex-col justify-center",{"w-full items-start laptop:w-fit":l,"order-1 laptop:order-2":l&&o==="left","order-1":l&&o==="right"||!l&&(o==="top"||o==="left"),"order-2":!l&&(o==="bottom"||o==="right")}),children:[(0,e.jsx)(s.Heading,{as:"h2",size:4,html:v,className:(0,c.cn)("image-with-text__title",{"w-full text-left":l})}),x&&(0,e.jsx)(s.Text,{as:"p",size:l?4:3,html:x,className:(0,c.cn)("image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",{"laptop:mt-[16px]":!l,"text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":l})}),!l&&(b||T)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[T&&(0,e.jsx)("img",{src:T,alt:"icon",className:"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),b&&(0,e.jsx)(s.Heading,{as:"h4",size:5,html:b,className:"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]}),l&&(0,e.jsx)("div",{className:(0,c.cn)("image-with-text__items w-full grid gap-6",{"grid-cols-1":k===1,"grid-cols-2":k===2,"grid-cols-3":k===3,"grid-cols-4":k===4}),children:S.map((t,p)=>(0,e.jsxs)("div",{className:"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[(0,e.jsxs)("div",{className:"image-with-text__item-header flex flex-row items-center gap-[8px]",children:[(0,e.jsx)(s.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),(0,e.jsx)(s.Heading,{size:5,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(s.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},p))})]}),(0,e.jsx)("div",{className:(0,c.cn)("image-with-text__media-wrapper",{"order-1":!d&&(o==="top"||o==="left"),"order-2":!d&&(o==="bottom"||o==="right"),"aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":l,"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":l&&o==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":l&&o==="right","relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":d}),children:d?C?q():(0,e.jsx)(_.AnimatePresence,{mode:"wait",children:(0,e.jsx)(_.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(s.Picture,{source:O(),alt:n[h].image.alt,className:"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]"})},n[h].image.url)}):C?q():(0,e.jsx)(s.Picture,{source:O(),className:(0,c.cn)("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!l})})})]})});G.displayName="ImageWithText";var _e=(0,J.withLayout)(G);
|
|
2
2
|
//# sourceMappingURL=ImageWithText.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n desc,\n descIcon,\n image,\n padImage,\n mobileImage,\n theme = 'dark',\n items = [],\n imagePosition,\n layout,\n mediaType = 'image',\n datalist = [],\n video,\n padVideo,\n mobVideo,\n poster,\n padPoster,\n mobPoster,\n } = data\n\n // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n const effectiveLayout = layout || imagePosition || 'left'\n\n const boxRef = useRef<HTMLDivElement>(null)\n const desktopVideoRef = useRef<HTMLDivElement>(null)\n const tabletVideoRef = useRef<HTMLDivElement>(null)\n const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n // Tab\u72B6\u6001\u7BA1\u7406\n const [activeIndex, setActiveIndex] = useState(0)\n const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n useEffect(() => {\n if (datalist.length > 0) {\n const current = tabRefs.current[activeIndex]\n if (current) {\n const { offsetLeft, offsetWidth } = current\n setSliderStyle({ left: offsetLeft, width: offsetWidth })\n }\n }\n }, [activeIndex, datalist.length])\n\n // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(desktopVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (video?.url) {\n setLoadedDesktopVideoSrc(video.url)\n }\n },\n })\n\n // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(tabletVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (padVideo?.url) {\n setLoadedTabletVideoSrc(padVideo.url)\n }\n },\n })\n\n // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(mobileVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (mobVideo?.url) {\n setLoadedMobileVideoSrc(mobVideo.url)\n }\n },\n })\n\n const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n setActiveIndex(index)\n ;(e.target as HTMLElement).scrollIntoView({\n behavior: 'smooth',\n inline: 'center',\n block: 'nearest',\n })\n }\n\n // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n const isTabMode = datalist.length > 0\n\n // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n const isVideo = mediaType === 'video'\n\n // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n const hasItems = items.length > 0\n\n // \u83B7\u53D6\u56FE\u7247\u6E90\n const getImageSource = () => {\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n return `${activeTab.image.url} ,${activeTab.imgPad?.url || activeTab.image.url} 1440, ${activeTab.imageMob?.url || activeTab.image.url} 767`\n }\n if (image) {\n return `${image.url},${padImage?.url || image.url} 1024, ${mobileImage?.url || image.url} 768`\n }\n return ''\n }\n\n // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n const renderVideo = () => {\n if (isTabMode) {\n const activeTab = datalist[activeIndex]\n // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n const mobilePoster = activeTab.mobPoster?.url || activeTab.imageMob?.url || desktopPoster\n\n return (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={activeTab.video?.url || activeTab.image.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n >\n <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[16px]\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n ></video>\n </div>\n </div>\n </motion.div>\n </AnimatePresence>\n )\n }\n\n // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = poster?.url || image?.url\n const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n return (\n <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n ></video>\n </div>\n </div>\n )\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageWithText\"\n className={cn(\n 'image-with-text',\n {\n // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n 'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n 'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n 'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n 'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n // \u4E3B\u9898\u6837\u5F0F\n 'image-with-text--dark text-white': theme === 'dark',\n 'image-with-text--light text-[#1f1f1f]': theme === 'light',\n 'aiui-dark': hasItems && theme === 'dark',\n },\n className\n )}\n >\n {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n {isTabMode && (\n <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n <div className=\"image-with-text__header\">\n <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n <Text\n as={'p'}\n size={1}\n html={desc}\n className=\"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n style={{\n left: sliderStyle.left,\n width: sliderStyle.width,\n }}\n />\n\n {/* Tab Items */}\n {datalist.map((item: ImageWithTextTabItem, index: number) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n onClick={e => handleTabClick(index, e)}\n className={cn(\n 'image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n )}\n >\n <Heading\n as=\"h1\"\n size={1}\n html={item?.title}\n className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n {!isTabMode && (\n <div\n className={cn('image-with-text__content flex flex-col justify-center', {\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'w-full items-start laptop:w-fit': hasItems,\n // order\u63A7\u5236\n 'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n 'order-1':\n (hasItems && effectiveLayout === 'right') ||\n (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n 'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n })}\n >\n <Heading\n as={'h2'}\n size={4}\n html={title}\n className={cn('image-with-text__title', {\n 'w-full text-left': hasItems,\n })}\n />\n {subtitle && (\n <Text\n as={'p'}\n size={hasItems ? 4 : 3}\n html={subtitle}\n className={cn(\n 'image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n {\n 'laptop:mt-[16px]': !hasItems,\n 'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n }\n )}\n />\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n {!hasItems && (desc || descIcon) && (\n <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n {descIcon && (\n <img\n src={descIcon}\n alt=\"icon\"\n className=\"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n />\n )}\n </div>\n )}\n\n {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n {hasItems && (\n <div className=\"image-with-text__items flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0\">\n {items.map((item: ImageWithTextItem, index: number) => (\n <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n <Picture\n source={item.icon?.url}\n alt={item.icon?.alt}\n className=\"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n />\n <Heading\n size={5}\n as=\"h6\"\n className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n >\n {item.text}\n </Heading>\n </div>\n <Text\n size={4}\n as=\"p\"\n html={item.desc}\n className=\"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n\n {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n <div\n className={cn('image-with-text__media-wrapper', {\n // \u57FA\u7840\u6A21\u5F0F\n 'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n 'order-2': !isTabMode && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n hasItems,\n 'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n 'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n // TabWithImage\u6A21\u5F0F\n 'relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n isTabMode,\n })}\n >\n {isTabMode ? (\n // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n isVideo ? (\n renderVideo()\n ) : (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={datalist[activeIndex].image.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n >\n <Picture\n source={getImageSource()}\n alt={datalist[activeIndex].image.alt}\n className=\"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]\"\n />\n </motion.div>\n </AnimatePresence>\n )\n ) : isVideo ? (\n // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n renderVideo()\n ) : (\n // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n <Picture\n source={getImageSource()}\n className={cn('image-with-text__image', {\n 'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n })}\n />\n )}\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
|
|
5
|
-
"mappings": "olBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "import_framer_motion", "componentType", "componentName", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "imagePosition", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "poster", "padPoster", "mobPoster", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "current", "offsetLeft", "offsetWidth", "handleTabClick", "index", "e", "isTabMode", "isVideo", "hasItems", "getImageSource", "activeTab", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n desc,\n descIcon,\n image,\n padImage,\n mobileImage,\n theme = 'dark',\n items = [],\n imagePosition,\n layout,\n mediaType = 'image',\n datalist = [],\n video,\n padVideo,\n mobVideo,\n poster,\n padPoster,\n mobPoster,\n cols = 1,\n } = data\n\n // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n const effectiveLayout = layout || imagePosition || 'left'\n\n const boxRef = useRef<HTMLDivElement>(null)\n const desktopVideoRef = useRef<HTMLDivElement>(null)\n const tabletVideoRef = useRef<HTMLDivElement>(null)\n const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n // Tab\u72B6\u6001\u7BA1\u7406\n const [activeIndex, setActiveIndex] = useState(0)\n const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n useEffect(() => {\n if (datalist.length > 0) {\n const current = tabRefs.current[activeIndex]\n if (current) {\n const { offsetLeft, offsetWidth } = current\n setSliderStyle({ left: offsetLeft, width: offsetWidth })\n }\n }\n }, [activeIndex, datalist.length])\n\n // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(desktopVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (video?.url) {\n setLoadedDesktopVideoSrc(video.url)\n }\n },\n })\n\n // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(tabletVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (padVideo?.url) {\n setLoadedTabletVideoSrc(padVideo.url)\n }\n },\n })\n\n // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(mobileVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (mobVideo?.url) {\n setLoadedMobileVideoSrc(mobVideo.url)\n }\n },\n })\n\n const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n setActiveIndex(index)\n ;(e.target as HTMLElement).scrollIntoView({\n behavior: 'smooth',\n inline: 'center',\n block: 'nearest',\n })\n }\n\n // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n const isTabMode = datalist.length > 0\n\n // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n const isVideo = mediaType === 'video'\n\n // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n const hasItems = items.length > 0\n\n // \u83B7\u53D6\u56FE\u7247\u6E90\n const getImageSource = () => {\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n return `${activeTab.image.url} ,${activeTab.imgPad?.url || activeTab.image.url} 1440, ${activeTab.imageMob?.url || activeTab.image.url} 767`\n }\n if (image) {\n return `${image.url},${padImage?.url || image.url} 1024, ${mobileImage?.url || image.url} 768`\n }\n return ''\n }\n\n // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n const renderVideo = () => {\n if (isTabMode) {\n const activeTab = datalist[activeIndex]\n // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n const mobilePoster = activeTab.mobPoster?.url || activeTab.imageMob?.url || desktopPoster\n\n return (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={activeTab.video?.url || activeTab.image.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n >\n <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[16px]\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n ></video>\n </div>\n </div>\n </motion.div>\n </AnimatePresence>\n )\n }\n\n // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = poster?.url || image?.url\n const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n return (\n <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n ></video>\n </div>\n </div>\n )\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageWithText\"\n className={cn(\n 'image-with-text',\n {\n // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n 'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n 'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n 'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n 'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n // \u4E3B\u9898\u6837\u5F0F\n 'image-with-text--dark text-white': theme === 'dark',\n 'image-with-text--light text-[#1f1f1f]': theme === 'light',\n 'aiui-dark': hasItems && theme === 'dark',\n },\n className\n )}\n >\n {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n {isTabMode && (\n <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n <div className=\"image-with-text__header\">\n <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n <Text\n as={'p'}\n size={1}\n html={desc}\n className=\"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n style={{\n left: sliderStyle.left,\n width: sliderStyle.width,\n }}\n />\n\n {/* Tab Items */}\n {datalist.map((item: ImageWithTextTabItem, index: number) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n onClick={e => handleTabClick(index, e)}\n className={cn(\n 'image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n )}\n >\n <Heading\n as=\"h1\"\n size={1}\n html={item?.title}\n className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n {!isTabMode && (\n <div\n className={cn('image-with-text__content flex flex-col justify-center', {\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'w-full items-start laptop:w-fit': hasItems,\n // order\u63A7\u5236\n 'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n 'order-1':\n (hasItems && effectiveLayout === 'right') ||\n (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n 'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n })}\n >\n <Heading\n as={'h2'}\n size={4}\n html={title}\n className={cn('image-with-text__title', {\n 'w-full text-left': hasItems,\n })}\n />\n {subtitle && (\n <Text\n as={'p'}\n size={hasItems ? 4 : 3}\n html={subtitle}\n className={cn(\n 'image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n {\n 'laptop:mt-[16px]': !hasItems,\n 'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n }\n )}\n />\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n {!hasItems && (desc || descIcon) && (\n <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n {descIcon && (\n <img\n src={descIcon}\n alt=\"icon\"\n className=\"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n />\n )}\n </div>\n )}\n\n {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n {hasItems && (\n <div\n className={cn('image-with-text__items w-full grid gap-6', {\n 'grid-cols-1': cols === 1,\n 'grid-cols-2': cols === 2,\n 'grid-cols-3': cols === 3,\n 'grid-cols-4': cols === 4,\n })}\n >\n {items.map((item: ImageWithTextItem, index: number) => (\n <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n <Picture\n source={item.icon?.url}\n alt={item.icon?.alt}\n className=\"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n />\n <Heading\n size={5}\n as=\"h6\"\n className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n >\n {item.text}\n </Heading>\n </div>\n <Text\n size={4}\n as=\"p\"\n html={item.desc}\n className=\"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n\n {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n <div\n className={cn('image-with-text__media-wrapper', {\n // \u57FA\u7840\u6A21\u5F0F\n 'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n 'order-2': !isTabMode && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n hasItems,\n 'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n 'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n // TabWithImage\u6A21\u5F0F\n 'relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n isTabMode,\n })}\n >\n {isTabMode ? (\n // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n isVideo ? (\n renderVideo()\n ) : (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={datalist[activeIndex].image.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n >\n <Picture\n source={getImageSource()}\n alt={datalist[activeIndex].image.alt}\n className=\"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]\"\n />\n </motion.div>\n </AnimatePresence>\n )\n ) : isVideo ? (\n // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n renderVideo()\n ) : (\n // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n <Picture\n source={getImageSource()}\n className={cn('image-with-text__image', {\n 'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n })}\n />\n )}\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "import_framer_motion", "componentType", "componentName", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "imagePosition", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "poster", "padPoster", "mobPoster", "cols", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "current", "offsetLeft", "offsetWidth", "handleTabClick", "index", "e", "isTabMode", "isVideo", "hasItems", "getImageSource", "activeTab", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageWithText/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface ImageWithTextItem {\n /** \u529F\u80FD\u56FE\u6807 */\n icon: Media\n /** \u529F\u80FD\u6807\u9898 */\n text: string\n /** \u529F\u80FD\u63CF\u8FF0 */\n desc: string\n}\n\nexport interface ImageWithTextTabItem {\n /**\n * \u684C\u9762\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n */\n image: Media\n /**\n * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > imgPad > image\uFF09\n */\n imgPad?: Media\n /**\n * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > imageMob > image\uFF09\n */\n imageMob?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n video?: Media\n /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n padVideo?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n mobVideo?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 image \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u684C\u9762\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n */\n poster?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 imgPad \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u5E73\u677F\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n */\n padPoster?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 imageMob \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u79FB\u52A8\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n */\n mobPoster?: Media\n /** Tab \u6807\u9898 */\n title: string\n}\n\nexport type MediaType = 'image' | 'video'\nexport type LayoutPosition = 'left' | 'right' | 'top' | 'bottom'\n\nexport interface ImageWithTextProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n subtitle?: string\n /** \u63CF\u8FF0\u6587\u672C\uFF08\u901A\u5E38\u662F\u5927\u53F7\u9AD8\u4EAE\u6587\u672C\uFF0C\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n desc?: string\n /** \u63CF\u8FF0\u6587\u672C\u56FE\u6807\uFF08\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n descIcon?: string\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 dark */\n theme?: Theme\n /** \u5E03\u5C40\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left\u3002\u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\uFF08left/right/top/bottom\uFF09 */\n layout?: LayoutPosition\n /** @deprecated \u4F7F\u7528 layout \u4EE3\u66FF\u3002\u56FE\u7247\u4F4D\u7F6E\uFF08\u5411\u540E\u517C\u5BB9\u7528\uFF09 */\n imagePosition?: 'left' | 'right'\n /** \u5A92\u4F53\u7C7B\u578B\uFF0C\u9ED8\u8BA4 image\u3002\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301 image \u548C video */\n mediaType?: MediaType\n /**\n * PC\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n */\n image?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n video?: Media\n /**\n * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > padImage > image\uFF09\n */\n padImage?: Media\n /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n padVideo?: Media\n /**\n * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > mobileImage > image\uFF09\n */\n mobileImage?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n mobVideo?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 image \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u684C\u9762\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n */\n poster?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 padImage \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u5E73\u677F\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n */\n padPoster?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 mobileImage \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u79FB\u52A8\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n */\n mobPoster?: Media\n /** \u529F\u80FD\u9879\u5217\u8868\uFF08\u53EF\u9009\uFF0C\u7528\u4E8E\u5C55\u793A\u529F\u80FD\u7279\u6027\u5217\u8868\uFF09 */\n items?: ImageWithTextItem[]\n /** Tab\u6570\u636E\u5217\u8868\uFF08TabWithImage\u6A21\u5F0F\uFF0C\u5F53\u5B58\u5728\u65F6\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09 */\n datalist?: ImageWithTextTabItem[]\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface ImageWithTextItem {\n /** \u529F\u80FD\u56FE\u6807 */\n icon: Media\n /** \u529F\u80FD\u6807\u9898 */\n text: string\n /** \u529F\u80FD\u63CF\u8FF0 */\n desc: string\n}\n\nexport interface ImageWithTextTabItem {\n /**\n * \u684C\u9762\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n */\n image: Media\n /**\n * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > imgPad > image\uFF09\n */\n imgPad?: Media\n /**\n * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > imageMob > image\uFF09\n */\n imageMob?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n video?: Media\n /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n padVideo?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n mobVideo?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 image \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u684C\u9762\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n */\n poster?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 imgPad \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u5E73\u677F\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n */\n padPoster?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 imageMob \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u79FB\u52A8\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n */\n mobPoster?: Media\n /** Tab \u6807\u9898 */\n title: string\n}\n\nexport type MediaType = 'image' | 'video'\nexport type LayoutPosition = 'left' | 'right' | 'top' | 'bottom'\n\nexport interface ImageWithTextProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n subtitle?: string\n /** \u63CF\u8FF0\u6587\u672C\uFF08\u901A\u5E38\u662F\u5927\u53F7\u9AD8\u4EAE\u6587\u672C\uFF0C\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n desc?: string\n /** \u63CF\u8FF0\u6587\u672C\u56FE\u6807\uFF08\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n descIcon?: string\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 dark */\n theme?: Theme\n /** \u5E03\u5C40\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left\u3002\u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\uFF08left/right/top/bottom\uFF09 */\n layout?: LayoutPosition\n /** @deprecated \u4F7F\u7528 layout \u4EE3\u66FF\u3002\u56FE\u7247\u4F4D\u7F6E\uFF08\u5411\u540E\u517C\u5BB9\u7528\uFF09 */\n imagePosition?: 'left' | 'right'\n /** \u5A92\u4F53\u7C7B\u578B\uFF0C\u9ED8\u8BA4 image\u3002\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301 image \u548C video */\n mediaType?: MediaType\n /**\n * PC\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n */\n image?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n video?: Media\n /**\n * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > padImage > image\uFF09\n */\n padImage?: Media\n /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n padVideo?: Media\n /**\n * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > mobileImage > image\uFF09\n */\n mobileImage?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n mobVideo?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 image \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u684C\u9762\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n */\n poster?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 padImage \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u5E73\u677F\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n */\n padPoster?: Media\n /**\n * @deprecated \u63A8\u8350\u4F7F\u7528 mobileImage \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n * \u79FB\u52A8\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n */\n mobPoster?: Media\n /** \u529F\u80FD\u9879\u5217\u8868\uFF08\u53EF\u9009\uFF0C\u7528\u4E8E\u5C55\u793A\u529F\u80FD\u7279\u6027\u5217\u8868\uFF09 */\n items?: ImageWithTextItem[]\n /** Tab\u6570\u636E\u5217\u8868\uFF08TabWithImage\u6A21\u5F0F\uFF0C\u5F53\u5B58\u5728\u65F6\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09 */\n datalist?: ImageWithTextTabItem[]\n /** \u529F\u80FD\u9879\u5217\u6570\uFF0C\u9ED8\u8BA4 1\u884C1\u5217 */\n cols?: number\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var w=(a,p)=>{for(var l in p)d(a,l,{get:p[l],enumerable:!0})},f=(a,p,l,t)=>{if(p&&typeof p=="object"||typeof p=="function")for(let o of k(p))!h.call(a,o)&&o!==l&&d(a,o,{get:()=>p[o],enumerable:!(t=n(p,o))||t.enumerable});return a};var N=a=>f(d({},"__esModule",{value:!0}),a);var v={};w(v,{default:()=>u});module.exports=N(v);var e=require("react/jsx-runtime"),i=require("../../components/index.js"),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const s=({title:a,desc:p,image:l,mobImage:t,video:o,mobVideo:r,className:c})=>(0,e.jsxs)("div",{className:(0,m.cn)("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]",c),children:[o&&r?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:o?.url,poster:l?.url,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:r?.url,poster:t?.url,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(l||t)&&(0,e.jsx)(i.Picture,{source:l?.url||t?.url,alt:l?.alt||t?.alt||"",className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),(0,e.jsxs)("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[(0,e.jsx)(i.Heading,{size:3,html:a,className:"ksp-card-title hidden w-full tablet:block"}),(0,e.jsx)(i.Heading,{size:2,html:a,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),(0,e.jsx)(i.Text,{size:2,html:p,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]});function b({data:a,className:p}){const{title:l,items:t}=a;return(0,e.jsxs)("section",{"data-ui-component-id":"ksp",className:(0,m.cn)("ksp-container flex scroll-mt-[108px] flex-col justify-center
|
|
1
|
+
"use strict";var d=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var w=(a,p)=>{for(var l in p)d(a,l,{get:p[l],enumerable:!0})},f=(a,p,l,t)=>{if(p&&typeof p=="object"||typeof p=="function")for(let o of k(p))!h.call(a,o)&&o!==l&&d(a,o,{get:()=>p[o],enumerable:!(t=n(p,o))||t.enumerable});return a};var N=a=>f(d({},"__esModule",{value:!0}),a);var v={};w(v,{default:()=>u});module.exports=N(v);var e=require("react/jsx-runtime"),i=require("../../components/index.js"),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const s=({title:a,desc:p,image:l,mobImage:t,video:o,mobVideo:r,className:c})=>(0,e.jsxs)("div",{className:(0,m.cn)("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]",c),children:[o&&r?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:o?.url,poster:l?.url,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:r?.url,poster:t?.url,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(l||t)&&(0,e.jsx)(i.Picture,{source:l?.url||t?.url,alt:l?.alt||t?.alt||"",className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),(0,e.jsxs)("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[(0,e.jsx)(i.Heading,{size:3,html:a,className:"ksp-card-title hidden w-full tablet:block"}),(0,e.jsx)(i.Heading,{size:2,html:a,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),(0,e.jsx)(i.Text,{size:2,html:p,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]});function b({data:a,className:p}){const{title:l,items:t}=a;return(0,e.jsxs)("section",{"data-ui-component-id":"ksp",className:(0,m.cn)("ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]",p),children:[(0,e.jsx)(i.Heading,{as:"h1",size:4,html:l,className:"ksp-title text-left text-white laptop:text-center"}),(0,e.jsxs)("div",{className:"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex",children:[(0,e.jsxs)("div",{className:"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[0]}),(0,e.jsx)(s,{className:"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[1]})]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[4]}),(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[3]}),(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[2]})]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]",...t[5]}),(0,e.jsx)(s,{className:"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]",...t[6]})]})]}),(0,e.jsxs)("div",{className:"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden",children:[(0,e.jsx)(s,{className:"h-[240px] w-[100%]",...t[0]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[(0,e.jsx)(s,{className:"w-[50%]",...t[1]}),(0,e.jsx)(s,{className:"w-[50%]",...t[2]})]}),(0,e.jsx)(s,{className:"max-h-[240px] w-[100%]",...t[6]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[(0,e.jsx)(s,{className:"w-[50%]",...t[3]}),(0,e.jsx)(s,{className:"w-[50%]",...t[4]})]}),(0,e.jsx)(s,{className:"max-h-[280px] w-[100%]",...t[5]})]})]})}var u=(0,x.withLayout)(b);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Ksp/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n /** \u6807\u9898 */\n title?: string\n /** \u63CF\u8FF0 */\n desc?: string\n /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n image?: Media\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n video?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nconst ImageCard = ({\n title,\n desc,\n image,\n mobImage,\n video,\n mobVideo,\n className,\n}: ImageCardProps) => {\n return (\n <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]', className)}>\n {video && mobVideo ? (\n <>\n <video\n playsInline\n autoPlay\n muted\n loop\n src={video?.url}\n poster={image?.url}\n className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n />\n <video\n playsInline\n autoPlay\n muted\n loop\n src={mobVideo?.url}\n poster={mobImage?.url}\n className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n />\n </>\n ) : (\n (image || mobImage) && (\n <Picture\n source={image?.url || mobImage?.url}\n alt={image?.alt || mobImage?.alt || ''}\n className=\"ksp-card-image h-full w-full\"\n imgClassName=\"h-full w-full object-cover object-bottom\"\n />\n )\n )}\n <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n <Text\n size={2}\n html={desc}\n className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n </div>\n )\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n * \n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u9700\u8981 7 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n * \n * @example\n * ```tsx\n * <Ksp\n * data={{\n * title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n * items: [\n * {\n * title: '\u9AD8\u6027\u80FD',\n * desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n * image: '/desktop.jpg',\n * mobImage: '/mobile.jpg'\n * },\n * // ... \u9700\u8981 7 \u4E2A\u9879\n * ]\n * }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n const { title, items } = data\n return (\n <section\n data-ui-component-id=\"ksp\"\n className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DQ,IAAAI,EAAA,6BA5DRC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCA8C3B,MAAMC,EAAY,CAAC,CACjB,MAAAC,EACA,KAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,CACF,OAEI,QAAC,OAAI,aAAW,MAAG,gEAAiEA,CAAS,EAC1F,UAAAF,GAASC,KACR,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,OACR,OAAC,WACC,OAAQD,GAAO,KAAOC,GAAU,IAChC,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,+BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,uIACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,4CAA4C,KACrF,OAAC,WAAQ,KAAM,EAAG,KAAMA,EAAO,UAAU,6DAA6D,KACtG,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,mIACZ,GACF,GAEF,EA4BJ,SAASM,EAAI,CAAE,KAAAC,EAAM,UAAAF,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAS,CAAM,EAAID,EACzB,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MAAG,
|
|
4
|
+
"sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n /** \u6807\u9898 */\n title?: string\n /** \u63CF\u8FF0 */\n desc?: string\n /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n image?: Media\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n video?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nconst ImageCard = ({\n title,\n desc,\n image,\n mobImage,\n video,\n mobVideo,\n className,\n}: ImageCardProps) => {\n return (\n <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]', className)}>\n {video && mobVideo ? (\n <>\n <video\n playsInline\n autoPlay\n muted\n loop\n src={video?.url}\n poster={image?.url}\n className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n />\n <video\n playsInline\n autoPlay\n muted\n loop\n src={mobVideo?.url}\n poster={mobImage?.url}\n className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n />\n </>\n ) : (\n (image || mobImage) && (\n <Picture\n source={image?.url || mobImage?.url}\n alt={image?.alt || mobImage?.alt || ''}\n className=\"ksp-card-image h-full w-full\"\n imgClassName=\"h-full w-full object-cover object-bottom\"\n />\n )\n )}\n <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n <Text\n size={2}\n html={desc}\n className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n </div>\n )\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n * \n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u9700\u8981 7 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n * \n * @example\n * ```tsx\n * <Ksp\n * data={{\n * title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n * items: [\n * {\n * title: '\u9AD8\u6027\u80FD',\n * desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n * image: '/desktop.jpg',\n * mobImage: '/mobile.jpg'\n * },\n * // ... \u9700\u8981 7 \u4E2A\u9879\n * ]\n * }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n const { title, items } = data\n return (\n <section\n data-ui-component-id=\"ksp\"\n className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n {/* ipad, pc\u7AEF */}\n <div className=\"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex\">\n <div className=\"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[0]}\n />\n <ImageCard\n className=\"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[1]}\n />\n </div>\n\n <div className=\"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[4]}\n />\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[3]}\n />\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[2]}\n />\n </div>\n\n <div className=\"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]\"\n {...items[5]}\n />\n <ImageCard\n className=\"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]\"\n {...items[6]}\n />\n </div>\n </div>\n\n {/* \u624B\u673A\u7AEF */}\n <div className=\"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden\">\n <ImageCard className=\"h-[240px] w-[100%]\" {...items[0]} />\n <div className=\"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n <ImageCard className=\"w-[50%]\" {...items[1]} />\n <ImageCard className=\"w-[50%]\" {...items[2]} />\n </div>\n <ImageCard className=\"max-h-[240px] w-[100%]\" {...items[6]} />\n <div className=\"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n <ImageCard className=\"w-[50%]\" {...items[3]} />\n <ImageCard className=\"w-[50%]\" {...items[4]} />\n </div>\n <ImageCard className=\"max-h-[280px] w-[100%]\" {...items[5]} />\n </div>\n </section>\n )\n}\n\n\nexport default withLayout(Ksp)"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DQ,IAAAI,EAAA,6BA5DRC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCA8C3B,MAAMC,EAAY,CAAC,CACjB,MAAAC,EACA,KAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,CACF,OAEI,QAAC,OAAI,aAAW,MAAG,gEAAiEA,CAAS,EAC1F,UAAAF,GAASC,KACR,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,OACR,OAAC,WACC,OAAQD,GAAO,KAAOC,GAAU,IAChC,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,+BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,uIACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,4CAA4C,KACrF,OAAC,WAAQ,KAAM,EAAG,KAAMA,EAAO,UAAU,6DAA6D,KACtG,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,mIACZ,GACF,GAEF,EA4BJ,SAASM,EAAI,CAAE,KAAAC,EAAM,UAAAF,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAS,CAAM,EAAID,EACzB,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MAAG,uFAAwFF,CAAS,EAE/G,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KAErG,QAAC,OAAI,UAAU,+GACb,qBAAC,OAAI,UAAU,yDACb,oBAACD,EAAA,CACC,UAAU,iFACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,iFACT,GAAGU,EAAM,CAAC,EACb,GACF,KAEA,QAAC,OAAI,UAAU,yDACb,oBAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,GACF,KAEA,QAAC,OAAI,UAAU,yDACb,oBAACV,EAAA,CACC,UAAU,4HACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,4HACT,GAAGU,EAAM,CAAC,EACb,GACF,GACF,KAGA,QAAC,OAAI,UAAU,gFACb,oBAACV,EAAA,CAAU,UAAU,qBAAsB,GAAGU,EAAM,CAAC,EAAG,KACxD,QAAC,OAAI,UAAU,mFACb,oBAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,KAC7C,OAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,GAC/C,KACA,OAACV,EAAA,CAAU,UAAU,yBAA0B,GAAGU,EAAM,CAAC,EAAG,KAC5D,QAAC,OAAI,UAAU,mFACb,oBAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,KAC7C,OAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,GAC/C,KACA,OAACV,EAAA,CAAU,UAAU,yBAA0B,GAAGU,EAAM,CAAC,EAAG,GAC9D,GACF,CAEJ,CAGA,IAAOhB,KAAQ,cAAWc,CAAG",
|
|
6
6
|
"names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "Ksp", "data", "items"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var G=Object.create;var m=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var X=(t,e)=>{for(var n in e)m(t,n,{get:e[n],enumerable:!0})},H=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of K(e))!W.call(t,i)&&i!==n&&m(t,i,{get:()=>e[i],enumerable:!(c=J(e,i))||c.enumerable});return t};var Y=(t,e,n)=>(n=t!=null?G(Q(t)):{},H(e||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t)),Z=t=>H(m({},"__esModule",{value:!0}),t);var et={};X(et,{default:()=>tt});module.exports=Z(et);var o=require("react/jsx-runtime"),r=Y(require("react")),u=require("gsap"),w=require("gsap/dist/SplitText"),v=require("gsap/dist/ScrollTrigger"),T=require("../../helpers/utils.js"),D=require("../../components/index.js"),P=require("../../shared/Styles.js"),nt=require("../../hooks/useExposure.js"),S=require("../../shared/trackUrlRef.js"),z=require("react-intersection-observer");const M="link",N="title",$=r.default.forwardRef(({data:t,className:e,as:n="h2"},c)=>{const{title:i,caption:f,theme:k,extensions:p,align:d="left"}=t,y=(0,r.useRef)(null),l=(0,r.useRef)(null),s=(0,r.useRef)(null),a=(0,r.useRef)(null),{ref:I,inView:b}=(0,z.useInView)();return(0,r.useImperativeHandle)(c,()=>y.current),(0,r.useEffect)(()=>{u.gsap.registerPlugin(w.SplitText,v.ScrollTrigger);function V(){if(!l.current)return;const U=l.current?.clientHeight||80;s.current&&s.current.revert(),a.current&&a.current.kill(),s.current=new w.SplitText(l.current,{type:"words",wordsClass:"word"});const g=s.current.words;u.gsap.set(g,{opacity:0}),a.current=v.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${U*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:j=>{const B=j.progress,R=g.length||1,C=.5,h=1/R,L=h*(1-C),E=(R-1)*L+h,F=Math.min(1,E>0?B/E:0);g.forEach((O,_)=>{const q=_*L,A=h;let x=(F-q)/A;x=Math.max(0,Math.min(1,x)),u.gsap.set(O,{opacity:x})})}})}return b&&V(),()=>{s.current&&s.current.revert(),a.current&&a.current.kill()}},[b]),(i||f)&&(0,o.jsxs)("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:y,children:[(0,o.jsx)("div",{ref:I,className:(0,T.cn)("space-y-4 flex-1",e,{"aiui-dark":k==="dark","text-center":d==="center","text-right":d==="right","text-left":d==="left"}),children:(0,o.jsx)(D.Heading,{ref:l,as:n,size:4,html:f||i})}),p?.textLink&&(0,o.jsxs)("a",{className:(0,T.cn)({"aiui-dark":k==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,S.trackUrlRef)(p?.link,`${M}_${N}`),"data-headless-type-name":`${M}#${N}`,"data-headless-title-desc-button":`${i}#${f}`,children:[p?.textLink,(0,o.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,o.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});$.displayName="Title";var tt=(0,P.withLayout)($);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2' }, ref) => {\n const { title, caption, theme, extensions } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,
|
|
6
|
-
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "as", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2' }, ref) => {\n const { title, caption, theme, extensions, align = 'left' } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div className=\"mb-6 flex items-end justify-between overflow-hidden title-box\" ref={innerRef}>\n <div\n ref={inViewRef}\n className={cn('space-y-4 flex-1', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-right': align === 'right',\n 'text-left': align === 'left',\n })}\n >\n <Heading ref={titleRef} as={as} size={4} html={caption || title} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n {extensions?.textLink}\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n ></path>\n </svg>\n </a>\n )}\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "as", "ref", "title", "caption", "theme", "extensions", "align", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Theme } from '../../types/props.js';
|
|
1
|
+
import type { Align, Theme } from '../../types/props.js';
|
|
2
2
|
export interface Feature {
|
|
3
3
|
/**
|
|
4
4
|
* 特性标题
|
|
@@ -7,6 +7,7 @@ export interface Feature {
|
|
|
7
7
|
}
|
|
8
8
|
export interface TitleProps {
|
|
9
9
|
data: {
|
|
10
|
+
align?: Align;
|
|
10
11
|
/**
|
|
11
12
|
* 主标题
|
|
12
13
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var s=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var o=(t,e,a,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of h(e))!p.call(t,i)&&i!==a&&s(t,i,{get:()=>e[i],enumerable:!(r=n(e,i))||r.enumerable});return t};var g=t=>o(s({},"__esModule",{value:!0}),t);var l={};module.exports=g(l);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n}\n\nexport interface TitleProps {\n data: {\n /**\n * \u4E3B\u6807\u9898\n */\n title?: string\n caption?: string\n /**\n * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n */\n features?: Feature[]\n /**\n * \u4E3B\u9898\u8272\n */\n theme?: Theme\n /**\n * \u6269\u5C55\u6570\u636E\n */\n extensions?: any\n }\n /**\n * \u81EA\u5B9A\u4E49\u7C7B\u540D\n */\n className?: string\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { Align, Theme } from '../../types/props.js'\n\nexport interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n}\n\nexport interface TitleProps {\n data: {\n align?: Align\n /**\n * \u4E3B\u6807\u9898\n */\n title?: string\n caption?: string\n /**\n * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n */\n features?: Feature[]\n /**\n * \u4E3B\u9898\u8272\n */\n theme?: Theme\n /**\n * \u6269\u5C55\u6570\u636E\n */\n extensions?: any\n }\n /**\n * \u81EA\u5B9A\u4E49\u7C7B\u540D\n */\n className?: string\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";var r=Object.create;var
|
|
1
|
+
"use strict";var r=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(e,i)=>{for(var a in i)c(e,a,{get:i[a],enumerable:!0})},l=(e,i,a,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of g(i))!b.call(e,n)&&n!==a&&c(e,n,{get:()=>i[n],enumerable:!(p=f(i,n))||p.enumerable});return e};var u=(e,i,a)=>(a=e!=null?r(h(e)):{},l(i||!e||!e.__esModule?c(a,"default",{value:e,enumerable:!0}):a,e)),_=e=>l(c({},"__esModule",{value:!0}),e);var B={};y(B,{DarkTheme:()=>x,Default:()=>S,LayoutBottom:()=>U,LayoutRight:()=>P,LayoutTop:()=>k,MinimalContent:()=>I,TabMode:()=>E,TabModeThreeItems:()=>O,TabModeWithVideo:()=>z,WithCustomStyles:()=>N,WithDescriptionText:()=>R,WithDescriptionTextDark:()=>L,WithItems:()=>F,WithItemsDark:()=>w,WithItemsImageRight:()=>W,WithItemsVideo:()=>V,WithVideo:()=>C,WithVideoRight:()=>D,WithVideoTop:()=>A,WithoutSubtitle:()=>M,default:()=>T});module.exports=_(B);var J=require("react"),d=u(require("../biz-components/ImageWithText/index.js"));const v={title:"Biz Components/ImageWithText",component:d.default,parameters:{layout:"padded",docs:{description:{component:`\u591A\u529F\u80FD\u56FE\u6587\u5C55\u793A\u7EC4\u4EF6\uFF0C\u652F\u63012\u79CD\u6A21\u5F0F\uFF1A
|
|
2
2
|
|
|
3
3
|
1. **\u57FA\u7840\u6A21\u5F0F**\uFF1A\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C4\u79CD\u5E03\u5C40\u4F4D\u7F6E(\u4E0A\u4E0B\u5DE6\u53F3)\uFF0C\u53EF\u9009\u529F\u80FD\u5217\u8868\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF(PC/Pad/Mobile)\u72EC\u7ACB\u914D\u7F6E
|
|
4
4
|
2. **Tab\u6A21\u5F0F**\uFF1ATab\u5207\u6362\u5C55\u793A\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E
|
|
5
5
|
|
|
6
|
-
\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09`}}},tags:["autodocs"]};var T=v;const s={theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},subtitle:"iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.",mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"}},S={args:{data:s},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F"}}}},x={args:{data:{...s,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898"}}}},M={args:{data:{...s,desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F"}}}},P={args:{data:{...s,theme:"dark",desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898"}}}},R={args:{data:{theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898"}}}},I={args:{data:{theme:"light",title:"Simple Title",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Simple Title",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Simple Title Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Simple Title Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E"}}}},L={args:{data:{...s,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0"}}}},k={args:{data:{...s,layout:"top"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A"}}}},U={args:{data:{...s,layout:"bottom"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0"}}}},o={title:"DuoSpiral\u2122 Detangle Brushes",subtitle:"DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.",mediaType:"video",image:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"DuoSpiral\u2122 Detangle Brushes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",alt:"DuoSpiral\u2122 Detangle Brushes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"image/png"},mobileVideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"}},C={args:{data:o},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD"}}}},A={args:{data:{...o,layout:"right"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0"}}}},F={args:{data:{...o,layout:"top"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F"}}}},m={title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",alt:"AI.See\u2122 Obstacle Avoidance Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",alt:"AI.See\u2122 Obstacle Avoidance Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",mimeType:"image/png"},items:[{icon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",text:"LED",desc:"Equipped with LEDs for dark environments"},{icon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",text:"200+",desc:"Identifies and avoids 200+ objects."}]},W={args:{data:m},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E"}}}},D={args:{data:{...m,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7"}}}},w={args:{data:{...m,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898"}}}},V={args:{data:{title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",mediaType:"video",video:o.video,padVideo:o.video,mobVideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"AI Feature Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"},poster:o.image,padPoster:o.image,mobPoster:o.mobileImage,items:m.items}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E"}}}},t={desc:"Effortless customization at your fingertips.",title:"Smart App Control",datalist:[{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Customizable Cleaning Modes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Customizable Cleaning Modes",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Customizable Cleaning Modes Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Customizable Cleaning Modes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}},{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",alt:"Multi-Floor Mapping",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",mimeType:"image/png"},title:"Multi-Floor Mapping",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",alt:"Multi-Floor Mapping Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",alt:"Multi-Floor Mapping Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",mimeType:"image/png"}}]},O={args:{data:t},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C"}}}},z={args:{data:{...t,datalist:[...t.datalist,{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Smart Scheduling",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Smart Scheduling Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Smart Scheduling Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879"}}}},E={args:{data:{title:"Smart App Control",desc:"Effortless customization at your fingertips.",mediaType:"video",datalist:[{title:"Customizable Cleaning Modes",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Customizable Cleaning Modes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"Customizable Cleaning Modes Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},image:t.datalist[0].image,imgPad:t.datalist[0].imgPad,imageMob:t.datalist[0].imageMob},{title:"Multi-Floor Mapping",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Multi-Floor Mapping Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"Multi-Floor Mapping Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},image:t.datalist[1].image,imgPad:t.datalist[1].imgPad,imageMob:t.datalist[1].imageMob}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E"}}}},N={args:{data:s,className:"custom-image-with-text"},parameters:{docs:{description:{story:`
|
|
6
|
+
\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09`}}},tags:["autodocs"]};var T=v;const s={theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},subtitle:"iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.",mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},items:[{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",alt:"LED",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",mimeType:"image/svg+xml"},text:"LED",desc:"Equipped with LEDs for dark environments"},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",alt:"200+",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",mimeType:"image/svg+xml"},text:"200+",desc:"Identifies and avoids 200+ objects."}]},S={args:{data:s},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F"}}}},x={args:{data:{...s,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898"}}}},R={args:{data:{...s,desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F"}}}},L={args:{data:{...s,theme:"dark",desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898"}}}},M={args:{data:{theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898"}}}},I={args:{data:{theme:"light",title:"Simple Title",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Simple Title",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Simple Title Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Simple Title Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E"}}}},P={args:{data:{...s,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0"}}}},k={args:{data:{...s,layout:"top"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A"}}}},U={args:{data:{...s,layout:"bottom"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0"}}}},o={title:"DuoSpiral\u2122 Detangle Brushes",subtitle:"DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.",mediaType:"video",image:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"DuoSpiral\u2122 Detangle Brushes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",alt:"DuoSpiral\u2122 Detangle Brushes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"image/png"},mobVideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"}},C={args:{data:o},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD"}}}},D={args:{data:{...o,layout:"right"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0"}}}},A={args:{data:{...o,layout:"top"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F"}}}},m={title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",alt:"AI.See\u2122 Obstacle Avoidance Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",alt:"AI.See\u2122 Obstacle Avoidance Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",mimeType:"image/png"},items:[{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",alt:"LED",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",mimeType:"image/svg+xml"},text:"LED",desc:"Equipped with LEDs for dark environments"},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",alt:"200+",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",mimeType:"image/svg+xml"},text:"200+",desc:"Identifies and avoids 200+ objects."}]},F={args:{data:m},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E"}}}},W={args:{data:{...m,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7"}}}},w={args:{data:{...m,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898"}}}},V={args:{data:{title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",mediaType:"video",video:o.video,padVideo:o.video,mobVideo:o.mobVideo,items:m.items}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E"}}}},t={desc:"Effortless customization at your fingertips.",title:"Smart App Control",datalist:[{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Customizable Cleaning Modes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Customizable Cleaning Modes",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Customizable Cleaning Modes Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Customizable Cleaning Modes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}},{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",alt:"Multi-Floor Mapping",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",mimeType:"image/png"},title:"Multi-Floor Mapping",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",alt:"Multi-Floor Mapping Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",alt:"Multi-Floor Mapping Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",mimeType:"image/png"}}]},E={args:{data:t},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C"}}}},O={args:{data:{...t,datalist:[...t.datalist,{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Smart Scheduling",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Smart Scheduling Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Smart Scheduling Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879"}}}},z={args:{data:{title:"Smart App Control",desc:"Effortless customization at your fingertips.",mediaType:"video",datalist:[{title:"Customizable Cleaning Modes",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Customizable Cleaning Modes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},image:t.datalist[0].image,imgPad:t.datalist[0].imgPad,imageMob:t.datalist[0].imageMob},{title:"Multi-Floor Mapping",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Multi-Floor Mapping Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},image:t.datalist[1].image,imgPad:t.datalist[1].imgPad,imageMob:t.datalist[1].imageMob}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E"}}}},N={args:{data:s,className:"custom-image-with-text"},parameters:{docs:{description:{story:`
|
|
7
7
|
\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A
|
|
8
8
|
|
|
9
9
|
**\u6839\u5143\u7D20\uFF1A**
|