@anker-in/headless-ui 1.1.17-alpha.1766575112329 → 1.1.17-alpha.1766577905101

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/cjs/biz-components/AnchorNavigation/index.js +1 -1
  2. package/dist/cjs/biz-components/AnchorNavigation/index.js.map +3 -3
  3. package/dist/cjs/biz-components/EventSchedule/index.d.ts +23 -34
  4. package/dist/cjs/biz-components/EventSchedule/index.js +1 -1
  5. package/dist/cjs/biz-components/EventSchedule/index.js.map +3 -3
  6. package/dist/cjs/biz-components/PromotionalBar/index.d.ts +27 -14
  7. package/dist/cjs/biz-components/PromotionalBar/index.js +1 -1
  8. package/dist/cjs/biz-components/PromotionalBar/index.js.map +3 -3
  9. package/dist/esm/biz-components/AnchorNavigation/index.js +1 -1
  10. package/dist/esm/biz-components/AnchorNavigation/index.js.map +3 -3
  11. package/dist/esm/biz-components/EventSchedule/index.d.ts +23 -34
  12. package/dist/esm/biz-components/EventSchedule/index.js +1 -1
  13. package/dist/esm/biz-components/EventSchedule/index.js.map +3 -3
  14. package/dist/esm/biz-components/PromotionalBar/index.d.ts +27 -14
  15. package/dist/esm/biz-components/PromotionalBar/index.js +1 -1
  16. package/dist/esm/biz-components/PromotionalBar/index.js.map +3 -3
  17. package/package.json +1 -1
package/dist/cjs/biz-components/AnchorNavigation/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var R=Object.create;var d=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var T=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},p=(t,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of w(e))!L.call(t,a)&&a!==n&&d(t,a,{get:()=>e[a],enumerable:!(l=V(e,a))||l.enumerable});return t};var A=(t,e,n)=>(n=t!=null?R(D(t)):{},p(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),E=t=>p(d({},"__esModule",{value:!0}),t);var P={};T(P,{default:()=>M});module.exports=E(P);var c=require("react/jsx-runtime"),m=A(require("react")),g=require("../../helpers/utils.js"),I=require("../../components/container.js"),u=require("class-variance-authority"),N=A(require("./useAnchorPosition.js"));const C=(0,u.cva)("anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"justify-start",center:"justify-center",end:"justify-end"}},defaultVariants:{alignment:"start"}}),H=(0,u.cva)("sticky top-0 z-10 w-full",{variants:{theme:{light:"bg-white",dark:"bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),k=m.forwardRef(({className:t,data:e,...n},l)=>{const{alignment:a="start",theme:b="light"}=e,y=(0,N.default)(e.sectionIds?.map(r=>r.targetId)||[]),h=m.useRef(null),v=m.useRef([]),x=m.useCallback(r=>{const s=v.current[r];if(s&&h.current){const o=h.current,i=s,f=i.offsetLeft-o.offsetWidth/2+i.offsetWidth/2;o.scrollTo({left:f,behavior:"smooth"})}},[]);return(0,c.jsx)("div",{ref:l,className:(0,g.cn)(H({theme:b}),t),...n,children:(0,c.jsx)(I.Container,{children:(0,c.jsx)("div",{ref:h,className:(0,g.cn)(C({alignment:a})),children:e.sectionIds?.map((r,s)=>{const o=y===r.targetId,i=b==="dark";return(0,c.jsx)("button",{ref:f=>{f&&(v.current[s]=f)},onClick:()=>{x(s),document.getElementById(r.targetId)?.scrollIntoView({behavior:"smooth"})},className:(0,g.cn)("anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold",{"text-[#4A4C56]":!i&&!o,"border-b-brand text-[#080A0F]":!i&&o,"text-[#8A8D92]":i&&!o,"border-b-brand text-white":i&&o}),children:r.label},r.targetId)})})})})});k.displayName="AnchorNavigation";var M=k;
1
+ "use strict";"use client";var I=Object.create;var d=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var V=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},b=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of w(e))!R.call(t,o)&&o!==n&&d(t,o,{get:()=>e[o],enumerable:!(c=N(e,o))||c.enumerable});return t};var v=(t,e,n)=>(n=t!=null?I(L(t)):{},b(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),D=t=>b(d({},"__esModule",{value:!0}),t);var M={};V(M,{default:()=>H});module.exports=D(M);var m=require("react/jsx-runtime"),f=v(require("react")),p=require("../../helpers/utils.js"),C=require("../../components/container.js"),h=require("class-variance-authority"),k=v(require("./useAnchorPosition.js")),B=require("../../shared/Styles.js");const T=(0,h.cva)("anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"justify-start",center:"justify-center",end:"justify-end"}},defaultVariants:{alignment:"start"}}),E=(0,h.cva)("tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] sticky top-0 z-[60] w-full px-4",{variants:{theme:{light:"bg-white",dark:"bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),x=f.forwardRef(({className:t,data:e},n)=>{const{alignment:c="start",theme:o="light"}=e,A=(0,k.default)(e.sectionIds?.map(a=>a.targetId)||[]),g=f.useRef(null),u=f.useRef([]),y=f.useCallback(a=>{const s=u.current[a];if(s&&g.current){const r=g.current,i=s,l=i.offsetLeft-r.offsetWidth/2+i.offsetWidth/2;r.scrollTo({left:l,behavior:"smooth"})}},[]);return(0,m.jsx)("div",{ref:n,className:(0,p.cn)(E({theme:o}),t),children:(0,m.jsx)("div",{ref:g,className:(0,p.cn)(T({alignment:c})),children:e.sectionIds?.map((a,s)=>{const r=A===a.targetId,i=o==="dark";return(0,m.jsx)("button",{ref:l=>{l&&(u.current[s]=l)},onClick:()=>{y(s),document.getElementById(a.targetId)?.scrollIntoView({behavior:"smooth"})},className:(0,p.cn)("anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold",{"text-[#4A4C56]":!i&&!r,"border-b-brand text-[#080A0F]":!i&&r,"text-[#8A8D92]":i&&!r,"border-b-brand text-white":i&&r}),children:a.label},a.targetId)})})})});x.displayName="AnchorNavigation";var H=x;
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/AnchorNavigation/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/AnchorNavigation/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Container } from '../../components/container.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n 'anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden',\n {\n variants: {\n alignment: {\n start: 'justify-start',\n center: 'justify-center',\n end: 'justify-end',\n },\n },\n defaultVariants: {\n alignment: 'start',\n },\n }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva('sticky top-0 z-10 w-full', {\n variants: {\n theme: {\n light: 'bg-white',\n dark: 'bg-[#1E2024]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n /** \u951A\u70B9\u5217\u8868 */\n sectionIds: {\n targetId: string\n label: string\n }[]\n /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n alignment?: 'start' | 'center' | 'end'\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n}\n\nexport interface AnchorNavigationProps\n extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: AnchorNavigationData\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(\n ({ className, data, ...props }, ref) => {\n const { alignment = 'start', theme = 'light' } = data\n const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n const containerRef = React.useRef<HTMLDivElement>(null)\n const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n const curRef = sectionRefs.current[activeIdIndex]\n\n if (curRef && containerRef.current) {\n const container = containerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n return (\n <div ref={ref} className={cn(containerVariants({ theme }), className)} {...props}>\n <Container>\n <div ref={containerRef} className={cn(anchorNavigationVariants({ alignment }))}>\n {data.sectionIds?.map((item, index) => {\n const isActive = activeId === item.targetId\n const isDark = theme === 'dark'\n\n return (\n <button\n key={item.targetId}\n ref={el => {\n if (el) {\n sectionRefs.current[index] = el\n }\n }}\n onClick={() => {\n autoScrollToActiveItem(index)\n document.getElementById(item.targetId)?.scrollIntoView({ behavior: 'smooth' })\n }}\n className={cn(\n 'anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold',\n {\n // Light theme colors\n 'text-[#4A4C56]': !isDark && !isActive,\n 'border-b-brand text-[#080A0F]': !isDark && isActive,\n // Dark theme colors\n 'text-[#8A8D92]': isDark && !isActive,\n 'border-b-brand text-white': isDark && isActive,\n }\n )}\n >\n {item.label}\n </button>\n )\n })}\n </div>\n </Container>\n </div>\n )\n }\n)\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default AnchorNavigation\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmGgB,IAAAI,EAAA,6BAjGhBC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAA0B,yCAC1BC,EAAuC,oCACvCC,EAA8B,qCAK9B,MAAMC,KAA2B,OAC/B,gHACA,CACE,SAAU,CACR,UAAW,CACT,MAAO,gBACP,OAAQ,iBACR,IAAK,aACP,CACF,EACA,gBAAiB,CACf,UAAW,OACb,CACF,CACF,EAKMC,KAAoB,OAAI,2BAA4B,CACxD,SAAU,CACR,MAAO,CACL,MAAO,WACP,KAAM,cACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CAAC,EA4BKC,EAAmBP,EAAM,WAC7B,CAAC,CAAE,UAAAQ,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CACtC,KAAM,CAAE,UAAAC,EAAY,QAAS,MAAAC,EAAQ,OAAQ,EAAIJ,EAC3CK,KAAW,EAAAC,SAAkBN,EAAK,YAAY,IAAIO,GAAQA,EAAK,QAAQ,GAAK,CAAC,CAAC,EAC9EC,EAAejB,EAAM,OAAuB,IAAI,EAChDkB,EAAclB,EAAM,OAA4B,CAAC,CAAC,EAElDmB,EAAyBnB,EAAM,YAAaoB,GAA0B,CAC1E,MAAMC,EAASH,EAAY,QAAQE,CAAa,EAEhD,GAAIC,GAAUJ,EAAa,QAAS,CAClC,MAAMK,EAAYL,EAAa,QACzBM,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAEL,SACE,OAAC,OAAI,IAAKb,EAAK,aAAW,MAAGL,EAAkB,CAAE,MAAAO,CAAM,CAAC,EAAGL,CAAS,EAAI,GAAGE,EACzE,mBAAC,aACC,mBAAC,OAAI,IAAKO,EAAc,aAAW,MAAGZ,EAAyB,CAAE,UAAAO,CAAU,CAAC,CAAC,EAC1E,SAAAH,EAAK,YAAY,IAAI,CAACO,EAAMS,IAAU,CACrC,MAAMC,EAAWZ,IAAaE,EAAK,SAC7BW,EAASd,IAAU,OAEzB,SACE,OAAC,UAEC,IAAKe,GAAM,CACLA,IACFV,EAAY,QAAQO,CAAK,EAAIG,EAEjC,EACA,QAAS,IAAM,CACbT,EAAuBM,CAAK,EAC5B,SAAS,eAAeT,EAAK,QAAQ,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,CAC/E,EACA,aAAW,MACT,wGACA,CAEE,iBAAkB,CAACW,GAAU,CAACD,EAC9B,gCAAiC,CAACC,GAAUD,EAE5C,iBAAkBC,GAAU,CAACD,EAC7B,4BAA6BC,GAAUD,CACzC,CACF,EAEC,SAAAV,EAAK,OAtBDA,EAAK,QAuBZ,CAEJ,CAAC,EACH,EACF,EACF,CAEJ,CACF,EAEAT,EAAiB,YAAc,mBAC/B,IAAOV,EAAQU",
6
- "names": ["AnchorNavigation_exports", "__export", "AnchorNavigation_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_container", "import_class_variance_authority", "import_useAnchorPosition", "anchorNavigationVariants", "containerVariants", "AnchorNavigation", "className", "data", "props", "ref", "alignment", "theme", "activeId", "useAnchorPosition", "item", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "index", "isActive", "isDark", "el"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Container } from '../../components/container.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\nimport { withLayout } from '../../shared/Styles.js'\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n 'anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden',\n {\n variants: {\n alignment: {\n start: 'justify-start',\n center: 'justify-center',\n end: 'justify-end',\n },\n },\n defaultVariants: {\n alignment: 'start',\n },\n }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva(\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] sticky top-0 z-[60] w-full px-4',\n {\n variants: {\n theme: {\n light: 'bg-white',\n dark: 'bg-[#1E2024]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n /** \u951A\u70B9\u5217\u8868 */\n sectionIds: {\n targetId: string\n label: string\n }[]\n /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n alignment?: 'start' | 'center' | 'end'\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n}\n\nexport interface AnchorNavigationProps\n extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: AnchorNavigationData\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(({ className, data }, ref) => {\n const { alignment = 'start', theme = 'light' } = data\n const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n const containerRef = React.useRef<HTMLDivElement>(null)\n const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n const curRef = sectionRefs.current[activeIdIndex]\n\n if (curRef && containerRef.current) {\n const container = containerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n return (\n <div ref={ref} className={cn(containerVariants({ theme }), className)}>\n <div ref={containerRef} className={cn(anchorNavigationVariants({ alignment }))}>\n {data.sectionIds?.map((item, index) => {\n const isActive = activeId === item.targetId\n const isDark = theme === 'dark'\n\n return (\n <button\n key={item.targetId}\n ref={el => {\n if (el) {\n sectionRefs.current[index] = el\n }\n }}\n onClick={() => {\n autoScrollToActiveItem(index)\n document.getElementById(item.targetId)?.scrollIntoView({ behavior: 'smooth' })\n }}\n className={cn(\n 'anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold',\n {\n // Light theme colors\n 'text-[#4A4C56]': !isDark && !isActive,\n 'border-b-brand text-[#080A0F]': !isDark && isActive,\n // Dark theme colors\n 'text-[#8A8D92]': isDark && !isActive,\n 'border-b-brand text-white': isDark && isActive,\n }\n )}\n >\n {item.label}\n </button>\n )\n })}\n </div>\n </div>\n )\n})\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default AnchorNavigation\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoGY,IAAAI,EAAA,6BAlGZC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAA0B,yCAC1BC,EAAuC,oCACvCC,EAA8B,qCAC9BC,EAA2B,kCAI3B,MAAMC,KAA2B,OAC/B,gHACA,CACE,SAAU,CACR,UAAW,CACT,MAAO,gBACP,OAAQ,iBACR,IAAK,aACP,CACF,EACA,gBAAiB,CACf,UAAW,OACb,CACF,CACF,EAKMC,KAAoB,OACxB,yGACA,CACE,SAAU,CACR,MAAO,CACL,MAAO,WACP,KAAM,cACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CACF,EA4BMC,EAAmBR,EAAM,WAAkD,CAAC,CAAE,UAAAS,EAAW,KAAAC,CAAK,EAAGC,IAAQ,CAC7G,KAAM,CAAE,UAAAC,EAAY,QAAS,MAAAC,EAAQ,OAAQ,EAAIH,EAC3CI,KAAW,EAAAC,SAAkBL,EAAK,YAAY,IAAIM,GAAQA,EAAK,QAAQ,GAAK,CAAC,CAAC,EAC9EC,EAAejB,EAAM,OAAuB,IAAI,EAChDkB,EAAclB,EAAM,OAA4B,CAAC,CAAC,EAElDmB,EAAyBnB,EAAM,YAAaoB,GAA0B,CAC1E,MAAMC,EAASH,EAAY,QAAQE,CAAa,EAEhD,GAAIC,GAAUJ,EAAa,QAAS,CAClC,MAAMK,EAAYL,EAAa,QACzBM,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAEL,SACE,OAAC,OAAI,IAAKb,EAAK,aAAW,MAAGJ,EAAkB,CAAE,MAAAM,CAAM,CAAC,EAAGJ,CAAS,EAClE,mBAAC,OAAI,IAAKQ,EAAc,aAAW,MAAGX,EAAyB,CAAE,UAAAM,CAAU,CAAC,CAAC,EAC1E,SAAAF,EAAK,YAAY,IAAI,CAACM,EAAMS,IAAU,CACrC,MAAMC,EAAWZ,IAAaE,EAAK,SAC7BW,EAASd,IAAU,OAEzB,SACE,OAAC,UAEC,IAAKe,GAAM,CACLA,IACFV,EAAY,QAAQO,CAAK,EAAIG,EAEjC,EACA,QAAS,IAAM,CACbT,EAAuBM,CAAK,EAC5B,SAAS,eAAeT,EAAK,QAAQ,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,CAC/E,EACA,aAAW,MACT,wGACA,CAEE,iBAAkB,CAACW,GAAU,CAACD,EAC9B,gCAAiC,CAACC,GAAUD,EAE5C,iBAAkBC,GAAU,CAACD,EAC7B,4BAA6BC,GAAUD,CACzC,CACF,EAEC,SAAAV,EAAK,OAtBDA,EAAK,QAuBZ,CAEJ,CAAC,EACH,EACF,CAEJ,CAAC,EAEDR,EAAiB,YAAc,mBAC/B,IAAOX,EAAQW",
6
+ "names": ["AnchorNavigation_exports", "__export", "AnchorNavigation_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_container", "import_class_variance_authority", "import_useAnchorPosition", "import_Styles", "anchorNavigationVariants", "containerVariants", "AnchorNavigation", "className", "data", "ref", "alignment", "theme", "activeId", "useAnchorPosition", "item", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "index", "isActive", "isDark", "el"]
7
7
  }
package/dist/cjs/biz-components/EventSchedule/index.d.ts CHANGED
@@ -1,26 +1,27 @@
1
1
  import * as React from 'react';
2
+ import type { Media } from '../../types/props.js';
2
3
  export type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard';
3
4
  /**
4
5
  * 响应式背景图片配置
5
6
  */
6
7
  export interface ResponsiveBackgroundImage {
7
8
  /** 移动端图片 (<1024px) */
8
- mobile?: string;
9
+ mobile?: Media;
9
10
  /** 笔记本图片 (1025-1440px) */
10
- laptop?: string;
11
+ laptop?: Media;
11
12
  /** 桌面图片 (1441-1920px) */
12
- desktop?: string;
13
+ desktop?: Media;
13
14
  /** 超大桌面图片 (≥1921px) */
14
- lgDesktop?: string;
15
+ lgDesktop?: Media;
15
16
  }
16
17
  /**
17
18
  * 状态化背景图片配置
18
19
  */
19
20
  export interface StateBackgroundImage {
20
21
  /** 激活状态的背景图片 */
21
- active: string | ResponsiveBackgroundImage;
22
+ active: ResponsiveBackgroundImage;
22
23
  /** 非激活状态的背景图片 */
23
- inactive: string | ResponsiveBackgroundImage;
24
+ inactive: ResponsiveBackgroundImage;
24
25
  }
25
26
  /**
26
27
  * 活动日程项数据接口
@@ -35,7 +36,7 @@ export interface EventScheduleItem {
35
36
  /** 详细信息列表 */
36
37
  items: {
37
38
  /** 图标 (SVG 字符串或 URL) */
38
- icon: React.ReactNode;
39
+ icon?: Media;
39
40
  /** 文本内容 */
40
41
  label: string;
41
42
  }[];
@@ -49,48 +50,36 @@ export interface EventScheduleData {
49
50
  /**
50
51
  * 背景图片配置，支持响应式图片和状态化图片
51
52
  * 可以传入：
52
- * 1. 字符串（单一图片URL）
53
- * 2. ResponsiveBackgroundImage（多尺寸图片）
54
- * 3. StateBackgroundImage（激活/非激活状态图片）
55
- *
56
- * @example
57
- * // 单一图片
58
- * backgroundImage: "https://example.com/image.jpg"
53
+ * 1. ResponsiveBackgroundImage（多尺寸 Media 对象）
54
+ * 2. StateBackgroundImage（激活/非激活状态的响应式图片）
59
55
  *
60
56
  * @example
61
57
  * // 响应式图片
62
58
  * backgroundImage: {
63
- * mobile: "https://example.com/mobile.jpg",
64
- * laptop: "https://example.com/laptop.jpg",
65
- * desktop: "https://example.com/desktop.jpg",
66
- * lgDesktop: "https://example.com/lg-desktop.jpg"
67
- * }
68
- *
69
- * @example
70
- * // 状态化图片（单一URL）
71
- * backgroundImage: {
72
- * active: "https://example.com/active.jpg",
73
- * inactive: "https://example.com/inactive.jpg"
59
+ * mobile: { url: "https://example.com/mobile.jpg", alt: "...", ... },
60
+ * laptop: { url: "https://example.com/laptop.jpg", alt: "...", ... },
61
+ * desktop: { url: "https://example.com/desktop.jpg", alt: "...", ... },
62
+ * lgDesktop: { url: "https://example.com/lg-desktop.jpg", alt: "...", ... }
74
63
  * }
75
64
  *
76
65
  * @example
77
66
  * // 状态化 + 响应式图片
78
67
  * backgroundImage: {
79
68
  * active: {
80
- * mobile: "https://example.com/active-mobile.jpg",
81
- * laptop: "https://example.com/active-laptop.jpg",
82
- * desktop: "https://example.com/active-desktop.jpg",
83
- * lgDesktop: "https://example.com/active-lg-desktop.jpg"
69
+ * mobile: { url: "https://example.com/active-mobile.jpg", alt: "...", ... },
70
+ * laptop: { url: "https://example.com/active-laptop.jpg", alt: "...", ... },
71
+ * desktop: { url: "https://example.com/active-desktop.jpg", alt: "...", ... },
72
+ * lgDesktop: { url: "https://example.com/active-lg-desktop.jpg", alt: "...", ... }
84
73
  * },
85
74
  * inactive: {
86
- * mobile: "https://example.com/inactive-mobile.jpg",
87
- * laptop: "https://example.com/inactive-laptop.jpg",
88
- * desktop: "https://example.com/inactive-desktop.jpg",
89
- * lgDesktop: "https://example.com/inactive-lg-desktop.jpg"
75
+ * mobile: { url: "https://example.com/inactive-mobile.jpg", alt: "...", ... },
76
+ * laptop: { url: "https://example.com/inactive-laptop.jpg", alt: "...", ... },
77
+ * desktop: { url: "https://example.com/inactive-desktop.jpg", alt: "...", ... },
78
+ * lgDesktop: { url: "https://example.com/inactive-lg-desktop.jpg", alt: "...", ... }
90
79
  * }
91
80
  * }
92
81
  */
93
- backgroundImage?: string | ResponsiveBackgroundImage | StateBackgroundImage;
82
+ backgroundImage?: ResponsiveBackgroundImage | StateBackgroundImage;
94
83
  /** 是否显示时间轴，默认为 true */
95
84
  showTimeline?: boolean;
96
85
  }
package/dist/cjs/biz-components/EventSchedule/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var B=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var I=(e,t)=>{for(var s in t)c(e,s,{get:t[s],enumerable:!0})},v=(e,t,s,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of N(t))!b.call(e,n)&&n!==s&&c(e,n,{get:()=>t[n],enumerable:!(a=E(t,n))||a.enumerable});return e};var w=(e,t,s)=>(s=e!=null?B(k(e)):{},v(t||!e||!e.__esModule?c(s,"default",{value:e,enumerable:!0}):s,e)),P=e=>v(c({},"__esModule",{value:!0}),e);var L={};I(L,{default:()=>C});module.exports=P(L);var i=require("react/jsx-runtime"),d=w(require("react")),l=require("../../helpers/index.js"),p=require("../../components/index.js"),m=require("swiper/react"),u=w(require("dayjs"));const R=(e,t)=>{const s=(0,u.default)(),a=(0,u.default)(e).startOf("day"),n=(0,u.default)(t).endOf("day");return s.isAfter(a)&&s.isBefore(n)},V=e=>R(e.startDate,e.endDate),y=({active:e,className:t})=>(0,i.jsxs)("div",{className:(0,l.cn)("relative my-1 flex h-2 flex-1 items-center justify-center",t),children:[(0,i.jsx)("div",{className:(0,l.cn)("h-2 w-full ",{"bg-[#F6CD4E] rounded-full":e,"bg-[#EAEAEC]":!e})}),(0,i.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,i.jsx)("div",{className:(0,l.cn)("size-4 rounded-full border-2 transition-colors",{"border-[#F6CD4E] bg-[#F6CD4E]":e,"border-[#EAEAEC] bg-[#EAEAEC]":!e})})})]}),D=e=>typeof e=="object"&&("active"in e||"inactive"in e),h=e=>{if(!e)return;if(typeof e=="string")return e;const{mobile:t,laptop:s,desktop:a,lgDesktop:n}=e,r=[];return n&&r.push(n),a&&r.push(`${a} 1920`),s&&r.push(`${s} 1440`),t&&r.push(`${t} 1024`),r.length>0?r.join(", "):void 0},A=(e,t)=>{if(e){if(D(e)){const s=t?e.active:e.inactive;return h(s)}return h(e)}},T=({active:e,item:t,backgroundImage:s,className:a})=>{const n=d.useMemo(()=>A(s,e),[s,e]);return(0,i.jsxs)("div",{className:(0,l.cn)("rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden",a),children:[(0,i.jsx)(p.Picture,{source:n,alt:"",className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"}),(0,i.jsxs)("div",{className:"relative z-20 size-full p-4",children:[(0,i.jsx)("h2",{className:(0,l.cn)("desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]"),dangerouslySetInnerHTML:{__html:t.title}}),(0,i.jsx)("div",{className:"flex flex-col gap-0.5",children:t.items.map((r,o)=>(0,i.jsxs)("div",{className:"flex items-center gap-2",children:[r.icon&&(0,i.jsx)("div",{className:"desktop:size-6 size-5 shrink-0",children:(0,i.jsx)("img",{src:r.icon,alt:"",className:"size-full"})}),(0,i.jsx)(p.Text,{html:r.label,className:(0,l.cn)("desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]")})]},o))})]})]})},x=d.forwardRef(({classNames:e={},data:t,...s},a)=>{const n=d.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),r=d.useMemo(()=>{switch(n){case 2:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2},1024:{spaceBetween:16},1440:{spaceBetween:16,slidesPerView:2}};case 3:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:n,spaceBetween:16},1440:{spaceBetween:16,slidesPerView:n}};case 4:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:3.2,spaceBetween:16},1440:{slidesPerView:n}};default:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:1},1024:{slidesPerView:n,spaceBetween:16},1440:{slidesPerView:n}}}},[n]),o=t.showTimeline!==!1;return(0,i.jsx)("div",{ref:a,className:(0,l.cn)("desktop:px-16 laptop:px-16 tablet:px-8 w-full overflow-hidden px-4",e?.root),...s,children:(0,i.jsx)("div",{className:"flex w-full flex-col gap-4",children:(0,i.jsx)(m.Swiper,{breakpoints:r,className:"w-full !overflow-visible",children:t.scheduleList.map((g,S)=>{const f=V(g);return(0,i.jsxs)(m.SwiperSlide,{children:[o&&(0,i.jsx)(y,{active:f}),(0,i.jsx)(T,{active:f,className:o?"mt-4":"",item:g,backgroundImage:t.backgroundImage})]},"SwiperSlideItem"+S)})})})})});x.displayName="EventSchedule";var C=x;
1
+ "use strict";"use client";var b=Object.create;var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var s in t)u(e,s,{get:t[s],enumerable:!0})},h=(e,t,s,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of I(t))!P.call(e,a)&&a!==s&&u(e,a,{get:()=>t[a],enumerable:!(n=E(t,a))||n.enumerable});return e};var x=(e,t,s)=>(s=e!=null?b(N(e)):{},h(t||!e||!e.__esModule?u(s,"default",{value:e,enumerable:!0}):s,e)),V=e=>h(u({},"__esModule",{value:!0}),e);var L={};R(L,{default:()=>z});module.exports=V(L);var i=require("react/jsx-runtime"),m=x(require("react")),l=require("../../helpers/index.js"),c=require("../../components/index.js"),g=require("swiper/react"),f=x(require("dayjs"));const y=(e,t)=>{const s=(0,f.default)(),n=(0,f.default)(e).startOf("day"),a=(0,f.default)(t).endOf("day");return s.isAfter(n)&&s.isBefore(a)},D=e=>y(e.startDate,e.endDate),M=({active:e,className:t})=>(0,i.jsxs)("div",{className:(0,l.cn)("relative my-1 flex h-2 flex-1 items-center justify-center",t),children:[(0,i.jsx)("div",{className:(0,l.cn)("h-2 w-full ",{"bg-[#F6CD4E] rounded-full":e,"bg-[#EAEAEC]":!e})}),(0,i.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,i.jsx)("div",{className:(0,l.cn)("size-4 rounded-full border-2 transition-colors",{"border-[#F6CD4E] bg-[#F6CD4E]":e,"border-[#EAEAEC] bg-[#EAEAEC]":!e})})})]}),A=e=>typeof e=="object"&&("active"in e||"inactive"in e),S=e=>{if(!e)return;const{mobile:t,laptop:s,desktop:n,lgDesktop:a}=e,r=[],o=B=>B?.url,p=o(a),d=o(n),v=o(s),w=o(t);return p&&r.push(p),d&&r.push(`${d} 1920`),v&&r.push(`${v} 1440`),w&&r.push(`${w} 1024`),r.length>0?r.join(", "):void 0},C=(e,t)=>{if(e){if(A(e)){const s=t?e.active:e.inactive;return S(s)}return S(e)}},T=({active:e,item:t,backgroundImage:s,className:n})=>{const a=m.useMemo(()=>C(s,e),[s,e]);return(0,i.jsxs)("div",{className:(0,l.cn)("rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden",n),children:[(0,i.jsx)(c.Picture,{source:a,alt:"",className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"}),(0,i.jsxs)("div",{className:"relative z-20 size-full p-4",children:[(0,i.jsx)(c.Heading,{html:t.title,className:(0,l.cn)("desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]")}),(0,i.jsx)("div",{className:"flex flex-col gap-0.5",children:t.items.map((r,o)=>(0,i.jsxs)("div",{className:"flex items-center gap-2",children:[r.icon&&(0,i.jsx)("div",{className:"desktop:size-6 size-5 shrink-0",children:(0,i.jsx)(c.Picture,{source:r.icon.url,alt:r.icon.alt,className:"size-full"})}),(0,i.jsx)(c.Text,{html:r.label,className:(0,l.cn)("desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]")})]},o))})]})]})},k=m.forwardRef(({classNames:e={},data:t},s)=>{const n=m.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),a=m.useMemo(()=>{switch(n){case 2:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2},1024:{spaceBetween:16},1440:{spaceBetween:16,slidesPerView:2}};case 3:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:n,spaceBetween:16},1440:{spaceBetween:16,slidesPerView:n}};case 4:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:3.2,spaceBetween:16},1440:{slidesPerView:n}};default:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:1},1024:{slidesPerView:n,spaceBetween:16},1440:{slidesPerView:n}}}},[n]),r=t.showTimeline!==!1;return(0,i.jsx)("div",{ref:s,className:(0,l.cn)("tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] flex w-full flex-col gap-4 overflow-hidden px-4",e?.root),children:(0,i.jsx)(g.Swiper,{breakpoints:a,className:"w-full !overflow-visible",children:t.scheduleList.map((o,p)=>{const d=D(o);return(0,i.jsxs)(g.SwiperSlide,{children:[r&&(0,i.jsx)(M,{className:e?.timeline,active:d}),(0,i.jsx)(T,{active:d,className:(0,l.cn)(r?"mt-4":"",e?.eventScheduleCard),item:o,backgroundImage:t.backgroundImage})]},"SwiperSlideItem"+p)})})})});k.displayName="EventSchedule";var z=k;
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/EventSchedule/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/EventSchedule/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport dayjs from 'dayjs'\n\nexport type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard'\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<1024px) */\n mobile?: string\n /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n laptop?: string\n /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n desktop?: string\n /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n lgDesktop?: string\n}\n\n/**\n * \u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface StateBackgroundImage {\n /** \u6FC0\u6D3B\u72B6\u6001\u7684\u80CC\u666F\u56FE\u7247 */\n active: string | ResponsiveBackgroundImage\n /** \u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u80CC\u666F\u56FE\u7247 */\n inactive: string | ResponsiveBackgroundImage\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n /** \u6807\u9898 */\n title: string\n /** \u5F00\u59CB\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-01'\uFF09 */\n startDate: string\n /** \u7ED3\u675F\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-31'\uFF09 */\n endDate: string\n /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n items: {\n /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n icon: React.ReactNode\n /** \u6587\u672C\u5185\u5BB9 */\n label: string\n }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n /** \u65E5\u7A0B\u5217\u8868 */\n scheduleList: EventScheduleItem[]\n /**\n * \u80CC\u666F\u56FE\u7247\u914D\u7F6E\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u56FE\u7247\u548C\u72B6\u6001\u5316\u56FE\u7247\n * \u53EF\u4EE5\u4F20\u5165\uFF1A\n * 1. \u5B57\u7B26\u4E32\uFF08\u5355\u4E00\u56FE\u7247URL\uFF09\n * 2. ResponsiveBackgroundImage\uFF08\u591A\u5C3A\u5BF8\u56FE\u7247\uFF09\n * 3. StateBackgroundImage\uFF08\u6FC0\u6D3B/\u975E\u6FC0\u6D3B\u72B6\u6001\u56FE\u7247\uFF09\n *\n * @example\n * // \u5355\u4E00\u56FE\u7247\n * backgroundImage: \"https://example.com/image.jpg\"\n *\n * @example\n * // \u54CD\u5E94\u5F0F\u56FE\u7247\n * backgroundImage: {\n * mobile: \"https://example.com/mobile.jpg\",\n * laptop: \"https://example.com/laptop.jpg\",\n * desktop: \"https://example.com/desktop.jpg\",\n * lgDesktop: \"https://example.com/lg-desktop.jpg\"\n * }\n *\n * @example\n * // \u72B6\u6001\u5316\u56FE\u7247\uFF08\u5355\u4E00URL\uFF09\n * backgroundImage: {\n * active: \"https://example.com/active.jpg\",\n * inactive: \"https://example.com/inactive.jpg\"\n * }\n *\n * @example\n * // \u72B6\u6001\u5316 + \u54CD\u5E94\u5F0F\u56FE\u7247\n * backgroundImage: {\n * active: {\n * mobile: \"https://example.com/active-mobile.jpg\",\n * laptop: \"https://example.com/active-laptop.jpg\",\n * desktop: \"https://example.com/active-desktop.jpg\",\n * lgDesktop: \"https://example.com/active-lg-desktop.jpg\"\n * },\n * inactive: {\n * mobile: \"https://example.com/inactive-mobile.jpg\",\n * laptop: \"https://example.com/inactive-laptop.jpg\",\n * desktop: \"https://example.com/inactive-desktop.jpg\",\n * lgDesktop: \"https://example.com/inactive-lg-desktop.jpg\"\n * }\n * }\n */\n backgroundImage?: string | ResponsiveBackgroundImage | StateBackgroundImage\n /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74\uFF0C\u9ED8\u8BA4\u4E3A true */\n showTimeline?: boolean\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: EventScheduleData\n classNames?: Partial<Record<EventScheduleSemanticName, string>>\n}\n\n/**\n * \u5224\u65AD\u5F53\u524D\u65F6\u95F4\u662F\u5426\u5728\u6307\u5B9A\u7684\u65F6\u95F4\u533A\u95F4\u5185\n * @param startDate \u5F00\u59CB\u65E5\u671F\n * @param endDate \u7ED3\u675F\u65E5\u671F\n * @returns \u662F\u5426\u5728\u533A\u95F4\u5185\n */\nconst isInTimeRange = (startDate: string, endDate: string): boolean => {\n const now = dayjs()\n const start = dayjs(startDate).startOf('day')\n const end = dayjs(endDate).endOf('day')\n return now.isAfter(start) && now.isBefore(end)\n}\n\n/**\n * \u83B7\u53D6\u6D3B\u52A8\u9879\u7684\u6FC0\u6D3B\u72B6\u6001\n * @param item \u6D3B\u52A8\u9879\n * @returns \u662F\u5426\u6FC0\u6D3B\n */\nconst getItemActiveStatus = (item: EventScheduleItem): boolean => {\n // \u5426\u5219\u6839\u636E\u65F6\u95F4\u533A\u95F4\u81EA\u52A8\u5224\u65AD\n return isInTimeRange(item.startDate, item.endDate)\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ active, className }: { active: boolean; className?: string }) => {\n return (\n <div className={cn('relative my-1 flex h-2 flex-1 items-center justify-center', className)}>\n {/* \u8FDB\u5EA6\u6761 */}\n <div\n className={cn('h-2 w-full ', {\n 'bg-[#F6CD4E] rounded-full': active,\n 'bg-[#EAEAEC]': !active,\n })}\n />\n {/* \u65F6\u95F4\u8282\u70B9 */}\n <div className=\"absolute inset-0 flex items-center justify-center\">\n <div\n className={cn('size-4 rounded-full border-2 transition-colors', {\n 'border-[#F6CD4E] bg-[#F6CD4E]': active,\n 'border-[#EAEAEC] bg-[#EAEAEC]': !active,\n })}\n />\n </div>\n </div>\n )\n}\n\n/**\n * \u5224\u65AD\u662F\u5426\u4E3A\u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @param obj \u5F85\u68C0\u67E5\u7684\u5BF9\u8C61\n * @returns \u662F\u5426\u4E3AStateBackgroundImage\u7C7B\u578B\n */\nconst isStateBackgroundImage = (\n obj: string | ResponsiveBackgroundImage | StateBackgroundImage\n): obj is StateBackgroundImage => {\n return typeof obj === 'object' && ('active' in obj || 'inactive' in obj)\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3APicture\u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n * @param backgroundImage \u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @returns Picture\u7EC4\u4EF6\u53EF\u7528\u7684source\u5B57\u7B26\u4E32\n */\nconst convertResponsiveImageToString = (backgroundImage: string | ResponsiveBackgroundImage): string | undefined => {\n if (!backgroundImage) return undefined\n if (typeof backgroundImage === 'string') return backgroundImage\n\n const { mobile, laptop, desktop, lgDesktop } = backgroundImage\n const parts: string[] = []\n\n // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n if (lgDesktop) parts.push(lgDesktop)\n\n // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n if (desktop) parts.push(`${desktop} 1920`)\n if (laptop) parts.push(`${laptop} 1440`)\n if (mobile) parts.push(`${mobile} 1024`)\n\n return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * \u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u83B7\u53D6\u5BF9\u5E94\u7684\u80CC\u666F\u56FE\u7247\n * @param backgroundImage \u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @param isActive \u662F\u5426\u6FC0\u6D3B\u72B6\u6001\n * @returns Picture\u7EC4\u4EF6\u53EF\u7528\u7684source\u5B57\u7B26\u4E32\n */\nconst formatBackgroundImage = (\n backgroundImage: string | ResponsiveBackgroundImage | StateBackgroundImage | undefined,\n isActive: boolean\n): string | undefined => {\n if (!backgroundImage) return undefined\n\n // \u5982\u679C\u662F\u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\uFF0C\u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u9009\u62E9\u5BF9\u5E94\u7684\u56FE\u7247\n if (isStateBackgroundImage(backgroundImage)) {\n const stateImage = isActive ? backgroundImage.active : backgroundImage.inactive\n return convertResponsiveImageToString(stateImage)\n }\n\n // \u5426\u5219\u76F4\u63A5\u8F6C\u6362\n return convertResponsiveImageToString(backgroundImage)\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({\n active,\n item,\n backgroundImage,\n className,\n}: {\n active: boolean\n item: EventScheduleItem\n backgroundImage: string | ResponsiveBackgroundImage | StateBackgroundImage | undefined\n className?: string\n}) => {\n const pictureSource = React.useMemo(() => {\n return formatBackgroundImage(backgroundImage, active)\n }, [backgroundImage, active])\n\n return (\n <div\n className={cn(\n 'rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden',\n className\n )}\n >\n <Picture source={pictureSource} alt=\"\" className=\"absolute inset-0 z-10\" imgClassName=\"h-full object-cover\" />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-20 size-full p-4\">\n <h2\n className={cn('desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]')}\n dangerouslySetInnerHTML={{ __html: item.title }}\n />\n {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n <div className=\"flex flex-col gap-0.5\">\n {item.items.map((detail, index) => (\n <div key={index} className=\"flex items-center gap-2\">\n {/* \u56FE\u6807 */}\n {detail.icon && (\n <div className=\"desktop:size-6 size-5 shrink-0\">\n <img src={detail.icon as string} alt=\"\" className=\"size-full\" />\n </div>\n )}\n {/* \u6587\u672C */}\n <Text\n html={detail.label}\n className={cn('desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]')}\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(\n ({ classNames = {}, data, ...props }, ref) => {\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n // \u6839\u636E itemsPerRow \u914D\u7F6E\u54CD\u5E94\u5F0F\u65AD\u70B9\n const swiperBreakpoints = React.useMemo(() => {\n switch (itemsPerRow) {\n case 2:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2,\n },\n 1024: {\n spaceBetween: 16,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: 2,\n },\n }\n case 3:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2.4,\n },\n 1024: {\n slidesPerView: itemsPerRow,\n spaceBetween: 16,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: itemsPerRow,\n },\n }\n case 4:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2.4,\n },\n 1024: {\n slidesPerView: 3.2,\n spaceBetween: 16,\n },\n 1440: {\n slidesPerView: itemsPerRow,\n },\n }\n default:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 1,\n },\n 1024: {\n slidesPerView: itemsPerRow,\n spaceBetween: 16,\n },\n 1440: {\n slidesPerView: itemsPerRow,\n },\n }\n }\n }, [itemsPerRow])\n\n const showTimeline = data.showTimeline !== false // \u9ED8\u8BA4\u4E3A true\n\n return (\n <div\n ref={ref}\n className={cn('desktop:px-16 laptop:px-16 tablet:px-8 w-full overflow-hidden px-4', classNames?.root)}\n {...props}\n >\n <div className=\"flex w-full flex-col gap-4\">\n <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n {data.scheduleList.map((item, index) => {\n const isActive = getItemActiveStatus(item)\n return (\n <SwiperSlide key={'SwiperSlideItem' + index}>\n {/* \u65F6\u95F4\u8F74 */}\n {showTimeline && <TimelineNode active={isActive} />}\n <EventScheduleCard\n active={isActive}\n className={showTimeline ? 'mt-4' : ''}\n item={item}\n backgroundImage={data.backgroundImage}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n </div>\n </div>\n )\n }\n)\n\nEventSchedule.displayName = 'EventSchedule'\nexport default EventSchedule\n\n// \u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\n// export type { ResponsiveBackgroundImage, StateBackgroundImage, EventScheduleItem, EventScheduleData, EventScheduleProps }\n"],
5
- "mappings": "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",
6
- "names": ["EventSchedule_exports", "__export", "EventSchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_react", "import_dayjs", "isInTimeRange", "startDate", "endDate", "now", "dayjs", "start", "end", "getItemActiveStatus", "item", "TimelineNode", "active", "className", "isStateBackgroundImage", "obj", "convertResponsiveImageToString", "backgroundImage", "mobile", "laptop", "desktop", "lgDesktop", "parts", "formatBackgroundImage", "isActive", "stateImage", "EventScheduleCard", "pictureSource", "detail", "index", "EventSchedule", "classNames", "data", "props", "ref", "itemsPerRow", "swiperBreakpoints", "showTimeline"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport dayjs from 'dayjs'\nimport type { Media } from '../../types/props.js'\nexport type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard'\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<1024px) */\n mobile?: Media\n /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n laptop?: Media\n /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n desktop?: Media\n /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n lgDesktop?: Media\n}\n\n/**\n * \u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface StateBackgroundImage {\n /** \u6FC0\u6D3B\u72B6\u6001\u7684\u80CC\u666F\u56FE\u7247 */\n active: ResponsiveBackgroundImage\n /** \u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u80CC\u666F\u56FE\u7247 */\n inactive: ResponsiveBackgroundImage\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n /** \u6807\u9898 */\n title: string\n /** \u5F00\u59CB\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-01'\uFF09 */\n startDate: string\n /** \u7ED3\u675F\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-31'\uFF09 */\n endDate: string\n /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n items: {\n /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n icon?: Media\n /** \u6587\u672C\u5185\u5BB9 */\n label: string\n }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n /** \u65E5\u7A0B\u5217\u8868 */\n scheduleList: EventScheduleItem[]\n /**\n * \u80CC\u666F\u56FE\u7247\u914D\u7F6E\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u56FE\u7247\u548C\u72B6\u6001\u5316\u56FE\u7247\n * \u53EF\u4EE5\u4F20\u5165\uFF1A\n * 1. ResponsiveBackgroundImage\uFF08\u591A\u5C3A\u5BF8 Media \u5BF9\u8C61\uFF09\n * 2. StateBackgroundImage\uFF08\u6FC0\u6D3B/\u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u54CD\u5E94\u5F0F\u56FE\u7247\uFF09\n *\n * @example\n * // \u54CD\u5E94\u5F0F\u56FE\u7247\n * backgroundImage: {\n * mobile: { url: \"https://example.com/mobile.jpg\", alt: \"...\", ... },\n * laptop: { url: \"https://example.com/laptop.jpg\", alt: \"...\", ... },\n * desktop: { url: \"https://example.com/desktop.jpg\", alt: \"...\", ... },\n * lgDesktop: { url: \"https://example.com/lg-desktop.jpg\", alt: \"...\", ... }\n * }\n *\n * @example\n * // \u72B6\u6001\u5316 + \u54CD\u5E94\u5F0F\u56FE\u7247\n * backgroundImage: {\n * active: {\n * mobile: { url: \"https://example.com/active-mobile.jpg\", alt: \"...\", ... },\n * laptop: { url: \"https://example.com/active-laptop.jpg\", alt: \"...\", ... },\n * desktop: { url: \"https://example.com/active-desktop.jpg\", alt: \"...\", ... },\n * lgDesktop: { url: \"https://example.com/active-lg-desktop.jpg\", alt: \"...\", ... }\n * },\n * inactive: {\n * mobile: { url: \"https://example.com/inactive-mobile.jpg\", alt: \"...\", ... },\n * laptop: { url: \"https://example.com/inactive-laptop.jpg\", alt: \"...\", ... },\n * desktop: { url: \"https://example.com/inactive-desktop.jpg\", alt: \"...\", ... },\n * lgDesktop: { url: \"https://example.com/inactive-lg-desktop.jpg\", alt: \"...\", ... }\n * }\n * }\n */\n backgroundImage?: ResponsiveBackgroundImage | StateBackgroundImage\n /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74\uFF0C\u9ED8\u8BA4\u4E3A true */\n showTimeline?: boolean\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: EventScheduleData\n classNames?: Partial<Record<EventScheduleSemanticName, string>>\n}\n\n/**\n * \u5224\u65AD\u5F53\u524D\u65F6\u95F4\u662F\u5426\u5728\u6307\u5B9A\u7684\u65F6\u95F4\u533A\u95F4\u5185\n * @param startDate \u5F00\u59CB\u65E5\u671F\n * @param endDate \u7ED3\u675F\u65E5\u671F\n * @returns \u662F\u5426\u5728\u533A\u95F4\u5185\n */\nconst isInTimeRange = (startDate: string, endDate: string): boolean => {\n const now = dayjs()\n const start = dayjs(startDate).startOf('day')\n const end = dayjs(endDate).endOf('day')\n return now.isAfter(start) && now.isBefore(end)\n}\n\n/**\n * \u83B7\u53D6\u6D3B\u52A8\u9879\u7684\u6FC0\u6D3B\u72B6\u6001\n * @param item \u6D3B\u52A8\u9879\n * @returns \u662F\u5426\u6FC0\u6D3B\n */\nconst getItemActiveStatus = (item: EventScheduleItem): boolean => {\n // \u5426\u5219\u6839\u636E\u65F6\u95F4\u533A\u95F4\u81EA\u52A8\u5224\u65AD\n return isInTimeRange(item.startDate, item.endDate)\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ active, className }: { active: boolean; className?: string }) => {\n return (\n <div className={cn('relative my-1 flex h-2 flex-1 items-center justify-center', className)}>\n {/* \u8FDB\u5EA6\u6761 */}\n <div\n className={cn('h-2 w-full ', {\n 'bg-[#F6CD4E] rounded-full': active,\n 'bg-[#EAEAEC]': !active,\n })}\n />\n {/* \u65F6\u95F4\u8282\u70B9 */}\n <div className=\"absolute inset-0 flex items-center justify-center\">\n <div\n className={cn('size-4 rounded-full border-2 transition-colors', {\n 'border-[#F6CD4E] bg-[#F6CD4E]': active,\n 'border-[#EAEAEC] bg-[#EAEAEC]': !active,\n })}\n />\n </div>\n </div>\n )\n}\n\n/**\n * \u5224\u65AD\u662F\u5426\u4E3A\u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @param obj \u5F85\u68C0\u67E5\u7684\u5BF9\u8C61\n * @returns \u662F\u5426\u4E3AStateBackgroundImage\u7C7B\u578B\n */\nconst isStateBackgroundImage = (obj: ResponsiveBackgroundImage | StateBackgroundImage): obj is StateBackgroundImage => {\n return typeof obj === 'object' && ('active' in obj || 'inactive' in obj)\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3APicture\u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n * @param backgroundImage \u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @returns Picture\u7EC4\u4EF6\u53EF\u7528\u7684source\u5B57\u7B26\u4E32\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage): string | undefined => {\n if (!backgroundImage) return undefined\n\n const { mobile, laptop, desktop, lgDesktop } = backgroundImage\n const parts: string[] = []\n\n // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n const getUrl = (media: Media | undefined): string | undefined => {\n return media?.url\n }\n\n // \u83B7\u53D6\u5404\u5C3A\u5BF8\u7684 URL\n const lgDesktopUrl = getUrl(lgDesktop)\n const desktopUrl = getUrl(desktop)\n const laptopUrl = getUrl(laptop)\n const mobileUrl = getUrl(mobile)\n\n // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n if (lgDesktopUrl) parts.push(lgDesktopUrl)\n\n // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n if (desktopUrl) parts.push(`${desktopUrl} 1920`)\n if (laptopUrl) parts.push(`${laptopUrl} 1440`)\n if (mobileUrl) parts.push(`${mobileUrl} 1024`)\n\n return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * \u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u83B7\u53D6\u5BF9\u5E94\u7684\u80CC\u666F\u56FE\u7247\n * @param backgroundImage \u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @param isActive \u662F\u5426\u6FC0\u6D3B\u72B6\u6001\n * @returns Picture\u7EC4\u4EF6\u53EF\u7528\u7684source\u5B57\u7B26\u4E32\n */\nconst formatBackgroundImage = (\n backgroundImage: ResponsiveBackgroundImage | StateBackgroundImage | undefined,\n isActive: boolean\n): string | undefined => {\n if (!backgroundImage) return undefined\n\n // \u5982\u679C\u662F\u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\uFF0C\u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u9009\u62E9\u5BF9\u5E94\u7684\u56FE\u7247\n if (isStateBackgroundImage(backgroundImage)) {\n const stateImage = isActive ? backgroundImage.active : backgroundImage.inactive\n return convertResponsiveImageToString(stateImage)\n }\n\n // \u5426\u5219\u76F4\u63A5\u8F6C\u6362\n return convertResponsiveImageToString(backgroundImage)\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({\n active,\n item,\n backgroundImage,\n className,\n}: {\n active: boolean\n item: EventScheduleItem\n backgroundImage: ResponsiveBackgroundImage | StateBackgroundImage | undefined\n className?: string\n}) => {\n const pictureSource = React.useMemo(() => {\n return formatBackgroundImage(backgroundImage, active)\n }, [backgroundImage, active])\n\n return (\n <div\n className={cn(\n 'rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden',\n className\n )}\n >\n <Picture source={pictureSource} alt=\"\" className=\"absolute inset-0 z-10\" imgClassName=\"h-full object-cover\" />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-20 size-full p-4\">\n <Heading\n html={item.title}\n className={cn('desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]')}\n />\n {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n <div className=\"flex flex-col gap-0.5\">\n {item.items.map((detail, index) => (\n <div key={index} className=\"flex items-center gap-2\">\n {/* \u56FE\u6807 */}\n {detail.icon && (\n <div className=\"desktop:size-6 size-5 shrink-0\">\n <Picture source={detail.icon.url} alt={detail.icon.alt} className=\"size-full\" />\n </div>\n )}\n {/* \u6587\u672C */}\n <Text\n html={detail.label}\n className={cn('desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]')}\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(({ classNames = {}, data }, ref) => {\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n // \u6839\u636E itemsPerRow \u914D\u7F6E\u54CD\u5E94\u5F0F\u65AD\u70B9\n const swiperBreakpoints = React.useMemo(() => {\n switch (itemsPerRow) {\n case 2:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2,\n },\n 1024: {\n spaceBetween: 16,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: 2,\n },\n }\n case 3:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2.4,\n },\n 1024: {\n slidesPerView: itemsPerRow,\n spaceBetween: 16,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: itemsPerRow,\n },\n }\n case 4:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2.4,\n },\n 1024: {\n slidesPerView: 3.2,\n spaceBetween: 16,\n },\n 1440: {\n slidesPerView: itemsPerRow,\n },\n }\n default:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 1,\n },\n 1024: {\n slidesPerView: itemsPerRow,\n spaceBetween: 16,\n },\n 1440: {\n slidesPerView: itemsPerRow,\n },\n }\n }\n }, [itemsPerRow])\n\n const showTimeline = data.showTimeline !== false // \u9ED8\u8BA4\u4E3A true\n\n return (\n <div\n ref={ref}\n className={cn(\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] flex w-full flex-col gap-4 overflow-hidden px-4',\n classNames?.root\n )}\n >\n <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n {data.scheduleList.map((item, index) => {\n const isActive = getItemActiveStatus(item)\n return (\n <SwiperSlide key={'SwiperSlideItem' + index}>\n {/* \u65F6\u95F4\u8F74 */}\n {showTimeline && <TimelineNode className={classNames?.timeline} active={isActive} />}\n <EventScheduleCard\n active={isActive}\n className={cn(showTimeline ? 'mt-4' : '', classNames?.eventScheduleCard)}\n item={item}\n backgroundImage={data.backgroundImage}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n </div>\n )\n})\n\nEventSchedule.displayName = 'EventSchedule'\nexport default EventSchedule\n\n// \u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\n// export type { ResponsiveBackgroundImage, StateBackgroundImage, EventScheduleItem, EventScheduleData, EventScheduleProps }\n"],
5
+ "mappings": "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",
6
+ "names": ["EventSchedule_exports", "__export", "EventSchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_react", "import_dayjs", "isInTimeRange", "startDate", "endDate", "now", "dayjs", "start", "end", "getItemActiveStatus", "item", "TimelineNode", "active", "className", "isStateBackgroundImage", "obj", "convertResponsiveImageToString", "backgroundImage", "mobile", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "mobileUrl", "formatBackgroundImage", "isActive", "stateImage", "EventScheduleCard", "pictureSource", "detail", "index", "EventSchedule", "classNames", "data", "ref", "itemsPerRow", "swiperBreakpoints", "showTimeline"]
7
7
  }
package/dist/cjs/biz-components/PromotionalBar/index.d.ts CHANGED
@@ -1,18 +1,26 @@
1
1
  import * as React from 'react';
2
+ import type { Media } from '../../types/props.js';
3
+ export interface PromotionalBarSemanticName {
4
+ root: 'root';
5
+ content: 'content';
6
+ title: 'title';
7
+ description: 'description';
8
+ button: 'button';
9
+ }
2
10
  /**
3
11
  * 响应式背景图片配置
4
12
  */
5
13
  export interface ResponsiveBackgroundImage {
6
14
  /** 移动端图片 (<768px) */
7
- mobile?: string;
15
+ mobile?: Media;
8
16
  /** 平板图片 (768-1440px) */
9
- tablet?: string;
17
+ tablet?: Media;
10
18
  /** 笔记本图片 (1025-1440px) */
11
- laptop?: string;
19
+ laptop?: Media;
12
20
  /** 桌面图片 (1441-1920px) */
13
- desktop?: string;
21
+ desktop?: Media;
14
22
  /** 超大桌面图片 (≥1921px) */
15
- lgDesktop?: string;
23
+ lgDesktop?: Media;
16
24
  }
17
25
  /**
18
26
  * PromotionalBar 业务组件数据接口
@@ -26,17 +34,22 @@ export interface PromotionalBarData {
26
34
  buttonText?: string;
27
35
  /** 按钮链接 */
28
36
  buttonLink?: string;
29
- /** 背景图片 - 支持字符串或响应式图片对象 */
30
- backgroundImage?: string | ResponsiveBackgroundImage;
37
+ /** 背景图片 - 响应式图片对象 */
38
+ backgroundImage?: ResponsiveBackgroundImage;
31
39
  }
32
40
  export interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {
33
41
  /** 业务数据 */
34
42
  data: PromotionalBarData;
43
+ classNames?: {
44
+ root?: string;
45
+ content?: string;
46
+ title?: string;
47
+ description?: string;
48
+ button?: string;
49
+ };
35
50
  }
36
- /**
37
- * PromotionalBar - 推广栏
38
- *
39
- * @description 推广栏
40
- */
41
- declare const PromotionalBar: React.ForwardRefExoticComponent<PromotionalBarProps & React.RefAttributes<HTMLDivElement>>;
42
- export default PromotionalBar;
51
+ declare const _default: React.ForwardRefExoticComponent<Omit<Omit<PromotionalBarProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
52
+ className?: string | undefined;
53
+ data?: Record<string, any> | undefined;
54
+ }, "ref"> & React.RefAttributes<any>>;
55
+ export default _default;
package/dist/cjs/biz-components/PromotionalBar/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var d=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},c=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of x(t))!h.call(e,n)&&n!==o&&l(e,n,{get:()=>t[n],enumerable:!(s=g(t,n))||s.enumerable});return e};var k=(e,t,o)=>(o=e!=null?d(v(e)):{},c(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),B=e=>c(l({},"__esModule",{value:!0}),e);var D={};b(D,{default:()=>T});module.exports=B(D);var r=require("react/jsx-runtime"),u=k(require("react")),f=require("../../helpers/index.js"),a=require("../../components/index.js");const N=e=>{if(!e)return;if(typeof e=="string")return e;const{mobile:t,tablet:o,laptop:s,desktop:n,lgDesktop:p}=e,i=[];return p?i.push(p):n?i.push(n):s?i.push(s):o?i.push(o):t&&i.push(t),n&&p&&i.push(`${n} 1920`),s&&(n||p)&&i.push(`${s} 1440`),o&&(s||n||p)&&i.push(`${o} 1024`),t&&(o||s||n||p)&&i.push(`${t} 768`),i.length>0?i.join(", "):void 0},m=u.forwardRef(({className:e,data:t,...o},s)=>{const{backgroundImage:n}=t,p=u.useMemo(()=>N(n),[n]);return(0,r.jsx)("div",{ref:s,className:(0,f.cn)("w-full",e),...o,children:(0,r.jsx)(a.Container,{className:"laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",children:(0,r.jsxs)("div",{className:"promotional-bar-content rounded-box relative h-full overflow-hidden",children:[(0,r.jsxs)("div",{className:"laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 relative z-20 flex h-full flex-col p-4",children:[t.contentTitle&&(0,r.jsx)(a.Heading,{className:"text-[#F5F6F7]",size:3,children:t.contentTitle}),t.contentDesc&&(0,r.jsx)("p",{className:"laptop:text-[16px] laptop:line-clamp-2 lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",children:t.contentDesc}),(0,r.jsx)("div",{className:"laptop:mt-4 mt-1",children:t.buttonText&&(0,r.jsx)(a.Button,{as:"a",variant:"link",className:"!p-0 text-[#F5F6F7]",href:t.buttonLink,children:t.buttonText})})]}),(0,r.jsx)(a.Picture,{source:p,className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"})]})})})});m.displayName="PromotionalBar";var T=m;
1
+ "use strict";"use client";var M=Object.create;var g=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var N=(t,e)=>{for(var o in e)g(t,o,{get:e[o],enumerable:!0})},x=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of D(e))!F.call(t,r)&&r!==o&&g(t,r,{get:()=>e[r],enumerable:!(s=T(e,r))||s.enumerable});return t};var y=(t,e,o)=>(o=t!=null?M(P(t)):{},x(e||!t||!t.__esModule?g(o,"default",{value:t,enumerable:!0}):o,t)),L=t=>x(g({},"__esModule",{value:!0}),t);var I={};N(I,{default:()=>w});module.exports=L(I);var i=require("react/jsx-runtime"),b=y(require("react")),c=require("../../helpers/index.js"),u=require("../../components/index.js"),v=require("../../shared/Styles.js");const R=t=>{if(!t)return;const{mobile:e,tablet:o,laptop:s,desktop:r,lgDesktop:k}=t,n=[],d=B=>B?.url,l=d(k),p=d(r),a=d(s),m=d(o),f=d(e);return l?n.push(l):p?n.push(p):a?n.push(a):m?n.push(m):f&&n.push(f),p&&l&&n.push(`${p} 1920`),a&&(p||l)&&n.push(`${a} 1440`),m&&(a||p||l)&&n.push(`${m} 1024`),f&&(m||a||p||l)&&n.push(`${f} 768`),n.length>0?n.join(", "):void 0},h=b.forwardRef(({classNames:t,data:e},o)=>{const{backgroundImage:s}=e,r=b.useMemo(()=>R(s),[s]);return(0,i.jsx)("div",{ref:o,className:(0,c.cn)("laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",t?.root),children:(0,i.jsxs)("div",{className:"promotional-bar-content rounded-box relative h-full overflow-hidden",children:[(0,i.jsxs)("div",{className:(0,c.cn)("laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 relative z-20 flex h-full flex-col p-4",t?.content),children:[e.contentTitle&&(0,i.jsx)(u.Heading,{className:(0,c.cn)("text-[#F5F6F7]",t?.title),html:e.contentTitle,size:3}),e.contentDesc&&(0,i.jsx)("p",{className:(0,c.cn)("laptop:text-[16px] laptop:line-clamp-2 lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",t?.description),dangerouslySetInnerHTML:{__html:e.contentDesc}}),(0,i.jsx)("div",{className:"laptop:mt-4 mt-1",children:e.buttonText&&(0,i.jsx)(u.Button,{as:"a",variant:"link",className:(0,c.cn)("!p-0 text-[#F5F6F7]",t?.button),href:e.buttonLink,children:e.buttonText})})]}),(0,i.jsx)(u.Picture,{source:r,className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"})]})})});h.displayName="PromotionalBar";var w=(0,v.withLayout)(h);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/PromotionalBar/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/PromotionalBar/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture, Container } from '../../components/index.js'\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n mobile?: string\n /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n tablet?: string\n /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n laptop?: string\n /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n desktop?: string\n /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n lgDesktop?: string\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n contentTitle?: string\n /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n contentDesc?: string\n /** \u6309\u94AE\u6587\u672C */\n buttonText?: string\n /** \u6309\u94AE\u94FE\u63A5 */\n buttonLink?: string\n /** \u80CC\u666F\u56FE\u7247 - \u652F\u6301\u5B57\u7B26\u4E32\u6216\u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n backgroundImage?: string | ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: PromotionalBarData\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (\n backgroundImage: string | ResponsiveBackgroundImage | undefined\n): string | undefined => {\n if (!backgroundImage) return undefined\n if (typeof backgroundImage === 'string') return backgroundImage\n\n const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n const parts: string[] = []\n\n // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n if (lgDesktop) parts.push(lgDesktop)\n else if (desktop) parts.push(desktop)\n else if (laptop) parts.push(laptop)\n else if (tablet) parts.push(tablet)\n else if (mobile) parts.push(mobile)\n\n // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n if (desktop && lgDesktop) parts.push(`${desktop} 1920`)\n if (laptop && (desktop || lgDesktop)) parts.push(`${laptop} 1440`)\n if (tablet && (laptop || desktop || lgDesktop)) parts.push(`${tablet} 1024`)\n if (mobile && (tablet || laptop || desktop || lgDesktop)) parts.push(`${mobile} 768`)\n\n return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(({ className, data, ...props }, ref) => {\n const { backgroundImage } = data\n const pictureSource = React.useMemo(() => {\n return convertResponsiveImageToString(backgroundImage)\n }, [backgroundImage])\n return (\n <div ref={ref} className={cn('w-full', className)} {...props}>\n {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n <Container className=\"laptop:h-[192px] lg-desktop:h-[240px] h-[240px]\">\n <div className=\"promotional-bar-content rounded-box relative h-full overflow-hidden\">\n <div className=\"laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 relative z-20 flex h-full flex-col p-4\">\n {data.contentTitle && (\n <Heading className=\"text-[#F5F6F7]\" size={3}>\n {data.contentTitle}\n </Heading>\n )}\n {data.contentDesc && (\n <p className=\"laptop:text-[16px] laptop:line-clamp-2 lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#F5F6F7]\">\n {data.contentDesc}\n </p>\n )}\n <div className=\"laptop:mt-4 mt-1\">\n {data.buttonText && (\n <Button as=\"a\" variant=\"link\" className=\"!p-0 text-[#F5F6F7]\" href={data.buttonLink}>\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n <Picture source={pictureSource} className=\"absolute inset-0 z-10\" imgClassName=\"h-full object-cover\" />\n </div>\n </Container>\n </div>\n )\n})\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default PromotionalBar\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsFU,IAAAI,EAAA,6BApFVC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAAoD,qCA0CpD,MAAMC,EACJC,GACuB,CACvB,GAAI,CAACA,EAAiB,OACtB,GAAI,OAAOA,GAAoB,SAAU,OAAOA,EAEhD,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGzB,OAAID,EAAWC,EAAM,KAAKD,CAAS,EAC1BD,EAASE,EAAM,KAAKF,CAAO,EAC3BD,EAAQG,EAAM,KAAKH,CAAM,EACzBD,EAAQI,EAAM,KAAKJ,CAAM,EACzBD,GAAQK,EAAM,KAAKL,CAAM,EAG9BG,GAAWC,GAAWC,EAAM,KAAK,GAAGF,CAAO,OAAO,EAClDD,IAAWC,GAAWC,IAAYC,EAAM,KAAK,GAAGH,CAAM,OAAO,EAC7DD,IAAWC,GAAUC,GAAWC,IAAYC,EAAM,KAAK,GAAGJ,CAAM,OAAO,EACvED,IAAWC,GAAUC,GAAUC,GAAWC,IAAYC,EAAM,KAAK,GAAGL,CAAM,MAAM,EAE7EK,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMC,EAAiBX,EAAM,WAAgD,CAAC,CAAE,UAAAY,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CACnH,KAAM,CAAE,gBAAAX,CAAgB,EAAIS,EACtBG,EAAgBhB,EAAM,QAAQ,IAC3BG,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,SACE,OAAC,OAAI,IAAKW,EAAK,aAAW,MAAG,SAAUH,CAAS,EAAI,GAAGE,EAErD,mBAAC,aAAU,UAAU,kDACnB,oBAAC,OAAI,UAAU,sEACb,qBAAC,OAAI,UAAU,2JACZ,UAAAD,EAAK,iBACJ,OAAC,WAAQ,UAAU,iBAAiB,KAAM,EACvC,SAAAA,EAAK,aACR,EAEDA,EAAK,gBACJ,OAAC,KAAE,UAAU,mHACV,SAAAA,EAAK,YACR,KAEF,OAAC,OAAI,UAAU,mBACZ,SAAAA,EAAK,eACJ,OAAC,UAAO,GAAG,IAAI,QAAQ,OAAO,UAAU,sBAAsB,KAAMA,EAAK,WACtE,SAAAA,EAAK,WACR,EAEJ,GACF,KACA,OAAC,WAAQ,OAAQG,EAAe,UAAU,wBAAwB,aAAa,sBAAsB,GACvG,EACF,EACF,CAEJ,CAAC,EAEDL,EAAe,YAAc,iBAC7B,IAAOd,EAAQc",
6
- "names": ["PromotionalBar_exports", "__export", "PromotionalBar_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "PromotionalBar", "className", "data", "props", "ref", "pictureSource"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture, Container } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\nexport interface PromotionalBarSemanticName {\n root: 'root'\n content: 'content'\n title: 'title'\n description: 'description'\n button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n mobile?: Media\n /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n tablet?: Media\n /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n laptop?: Media\n /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n desktop?: Media\n /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n contentTitle?: string\n /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n contentDesc?: string\n /** \u6309\u94AE\u6587\u672C */\n buttonText?: string\n /** \u6309\u94AE\u94FE\u63A5 */\n buttonLink?: string\n /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: PromotionalBarData\n classNames?: {\n root?: string\n content?: string\n title?: string\n description?: string\n button?: string\n }\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n if (!backgroundImage) return undefined\n\n const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n const parts: string[] = []\n\n // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n const getUrl = (media: Media | undefined): string | undefined => {\n return media?.url\n }\n\n // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n const lgDesktopUrl = getUrl(lgDesktop)\n const desktopUrl = getUrl(desktop)\n const laptopUrl = getUrl(laptop)\n const tabletUrl = getUrl(tablet)\n const mobileUrl = getUrl(mobile)\n\n if (lgDesktopUrl) parts.push(lgDesktopUrl)\n else if (desktopUrl) parts.push(desktopUrl)\n else if (laptopUrl) parts.push(laptopUrl)\n else if (tabletUrl) parts.push(tabletUrl)\n else if (mobileUrl) parts.push(mobileUrl)\n\n // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(({ classNames, data }, ref) => {\n const { backgroundImage } = data\n const pictureSource = React.useMemo(() => {\n return convertResponsiveImageToString(backgroundImage)\n }, [backgroundImage])\n return (\n <div ref={ref} className={cn('laptop:h-[192px] lg-desktop:h-[240px] h-[240px]', classNames?.root)}>\n {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n <div className=\"promotional-bar-content rounded-box relative h-full overflow-hidden\">\n <div\n className={cn(\n 'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 relative z-20 flex h-full flex-col p-4',\n classNames?.content\n )}\n >\n {data.contentTitle && (\n <Heading className={cn('text-[#F5F6F7]', classNames?.title)} html={data.contentTitle} size={3} />\n )}\n {data.contentDesc && (\n <p\n className={cn(\n 'laptop:text-[16px] laptop:line-clamp-2 lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#F5F6F7]',\n classNames?.description\n )}\n dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n />\n )}\n <div className=\"laptop:mt-4 mt-1\">\n {data.buttonText && (\n <Button\n as=\"a\"\n variant=\"link\"\n className={cn('!p-0 text-[#F5F6F7]', classNames?.button)}\n href={data.buttonLink}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n <Picture source={pictureSource} className=\"absolute inset-0 z-10\" imgClassName=\"h-full object-cover\" />\n </div>\n </div>\n )\n})\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8GQ,IAAAI,EAAA,6BA5GRC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAAoD,qCACpDC,EAA2B,kCA0D3B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBnB,EAAM,WAAgD,CAAC,CAAE,WAAAoB,EAAY,KAAAC,CAAK,EAAGC,IAAQ,CAC1G,KAAM,CAAE,gBAAAjB,CAAgB,EAAIgB,EACtBE,EAAgBvB,EAAM,QAAQ,IAC3BI,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,SACE,OAAC,OAAI,IAAKiB,EAAK,aAAW,MAAG,kDAAmDF,GAAY,IAAI,EAE9F,oBAAC,OAAI,UAAU,sEACb,qBAAC,OACC,aAAW,MACT,2JACAA,GAAY,OACd,EAEC,UAAAC,EAAK,iBACJ,OAAC,WAAQ,aAAW,MAAG,iBAAkBD,GAAY,KAAK,EAAG,KAAMC,EAAK,aAAc,KAAM,EAAG,EAEhGA,EAAK,gBACJ,OAAC,KACC,aAAW,MACT,mHACAD,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,KAEF,OAAC,OAAI,UAAU,mBACZ,SAAAA,EAAK,eACJ,OAAC,UACC,GAAG,IACH,QAAQ,OACR,aAAW,MAAG,sBAAuBD,GAAY,MAAM,EACvD,KAAMC,EAAK,WAEV,SAAAA,EAAK,WACR,EAEJ,GACF,KACA,OAAC,WAAQ,OAAQE,EAAe,UAAU,wBAAwB,aAAa,sBAAsB,GACvG,EACF,CAEJ,CAAC,EAEDJ,EAAe,YAAc,iBAC7B,IAAOtB,KAAQ,cAAWsB,CAAc",
6
+ "names": ["PromotionalBar_exports", "__export", "PromotionalBar_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_Styles", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "ref", "pictureSource"]
7
7
  }
package/dist/esm/biz-components/AnchorNavigation/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as i}from"react/jsx-runtime";import*as o from"react";import{cn as l}from"../../helpers/utils.js";import{Container as k}from"../../components/container.js";import{cva as m}from"class-variance-authority";import I from"./useAnchorPosition.js";const N=m("anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"justify-start",center:"justify-center",end:"justify-end"}},defaultVariants:{alignment:"start"}}),y=m("sticky top-0 z-10 w-full",{variants:{theme:{light:"bg-white",dark:"bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),g=o.forwardRef(({className:h,data:s,...u},b)=>{const{alignment:v="start",theme:f="light"}=s,p=I(s.sectionIds?.map(t=>t.targetId)||[]),c=o.useRef(null),d=o.useRef([]),A=o.useCallback(t=>{const r=d.current[t];if(r&&c.current){const e=c.current,n=r,a=n.offsetLeft-e.offsetWidth/2+n.offsetWidth/2;e.scrollTo({left:a,behavior:"smooth"})}},[]);return i("div",{ref:b,className:l(y({theme:f}),h),...u,children:i(k,{children:i("div",{ref:c,className:l(N({alignment:v})),children:s.sectionIds?.map((t,r)=>{const e=p===t.targetId,n=f==="dark";return i("button",{ref:a=>{a&&(d.current[r]=a)},onClick:()=>{A(r),document.getElementById(t.targetId)?.scrollIntoView({behavior:"smooth"})},className:l("anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold",{"text-[#4A4C56]":!n&&!e,"border-b-brand text-[#080A0F]":!n&&e,"text-[#8A8D92]":n&&!e,"border-b-brand text-white":n&&e}),children:t.label},t.targetId)})})})})});g.displayName="AnchorNavigation";var D=g;export{D as default};
1
+ "use client";import{jsx as l}from"react/jsx-runtime";import*as r from"react";import{cn as c}from"../../helpers/utils.js";import"../../components/container.js";import{cva as p}from"class-variance-authority";import x from"./useAnchorPosition.js";import"../../shared/Styles.js";const k=p("anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"justify-start",center:"justify-center",end:"justify-end"}},defaultVariants:{alignment:"start"}}),A=p("tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] sticky top-0 z-[60] w-full px-4",{variants:{theme:{light:"bg-white",dark:"bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),m=r.forwardRef(({className:g,data:i},h)=>{const{alignment:u="start",theme:d="light"}=i,b=x(i.sectionIds?.map(t=>t.targetId)||[]),s=r.useRef(null),f=r.useRef([]),v=r.useCallback(t=>{const o=f.current[t];if(o&&s.current){const e=s.current,n=o,a=n.offsetLeft-e.offsetWidth/2+n.offsetWidth/2;e.scrollTo({left:a,behavior:"smooth"})}},[]);return l("div",{ref:h,className:c(A({theme:d}),g),children:l("div",{ref:s,className:c(k({alignment:u})),children:i.sectionIds?.map((t,o)=>{const e=b===t.targetId,n=d==="dark";return l("button",{ref:a=>{a&&(f.current[o]=a)},onClick:()=>{v(o),document.getElementById(t.targetId)?.scrollIntoView({behavior:"smooth"})},className:c("anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold",{"text-[#4A4C56]":!n&&!e,"border-b-brand text-[#080A0F]":!n&&e,"text-[#8A8D92]":n&&!e,"border-b-brand text-white":n&&e}),children:t.label},t.targetId)})})})});m.displayName="AnchorNavigation";var D=m;export{D as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/AnchorNavigation/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/AnchorNavigation/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Container } from '../../components/container.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n 'anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden',\n {\n variants: {\n alignment: {\n start: 'justify-start',\n center: 'justify-center',\n end: 'justify-end',\n },\n },\n defaultVariants: {\n alignment: 'start',\n },\n }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva('sticky top-0 z-10 w-full', {\n variants: {\n theme: {\n light: 'bg-white',\n dark: 'bg-[#1E2024]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n /** \u951A\u70B9\u5217\u8868 */\n sectionIds: {\n targetId: string\n label: string\n }[]\n /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n alignment?: 'start' | 'center' | 'end'\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n}\n\nexport interface AnchorNavigationProps\n extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: AnchorNavigationData\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(\n ({ className, data, ...props }, ref) => {\n const { alignment = 'start', theme = 'light' } = data\n const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n const containerRef = React.useRef<HTMLDivElement>(null)\n const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n const curRef = sectionRefs.current[activeIdIndex]\n\n if (curRef && containerRef.current) {\n const container = containerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n return (\n <div ref={ref} className={cn(containerVariants({ theme }), className)} {...props}>\n <Container>\n <div ref={containerRef} className={cn(anchorNavigationVariants({ alignment }))}>\n {data.sectionIds?.map((item, index) => {\n const isActive = activeId === item.targetId\n const isDark = theme === 'dark'\n\n return (\n <button\n key={item.targetId}\n ref={el => {\n if (el) {\n sectionRefs.current[index] = el\n }\n }}\n onClick={() => {\n autoScrollToActiveItem(index)\n document.getElementById(item.targetId)?.scrollIntoView({ behavior: 'smooth' })\n }}\n className={cn(\n 'anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold',\n {\n // Light theme colors\n 'text-[#4A4C56]': !isDark && !isActive,\n 'border-b-brand text-[#080A0F]': !isDark && isActive,\n // Dark theme colors\n 'text-[#8A8D92]': isDark && !isActive,\n 'border-b-brand text-white': isDark && isActive,\n }\n )}\n >\n {item.label}\n </button>\n )\n })}\n </div>\n </Container>\n </div>\n )\n }\n)\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default AnchorNavigation\n"],
5
- "mappings": "aAmGgB,cAAAA,MAAA,oBAjGhB,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,OAAAC,MAA8B,2BACvC,OAAOC,MAAuB,yBAK9B,MAAMC,EAA2BF,EAC/B,gHACA,CACE,SAAU,CACR,UAAW,CACT,MAAO,gBACP,OAAQ,iBACR,IAAK,aACP,CACF,EACA,gBAAiB,CACf,UAAW,OACb,CACF,CACF,EAKMG,EAAoBH,EAAI,2BAA4B,CACxD,SAAU,CACR,MAAO,CACL,MAAO,WACP,KAAM,cACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CAAC,EA4BKI,EAAmBP,EAAM,WAC7B,CAAC,CAAE,UAAAQ,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CACtC,KAAM,CAAE,UAAAC,EAAY,QAAS,MAAAC,EAAQ,OAAQ,EAAIJ,EAC3CK,EAAWV,EAAkBK,EAAK,YAAY,IAAIM,GAAQA,EAAK,QAAQ,GAAK,CAAC,CAAC,EAC9EC,EAAehB,EAAM,OAAuB,IAAI,EAChDiB,EAAcjB,EAAM,OAA4B,CAAC,CAAC,EAElDkB,EAAyBlB,EAAM,YAAamB,GAA0B,CAC1E,MAAMC,EAASH,EAAY,QAAQE,CAAa,EAEhD,GAAIC,GAAUJ,EAAa,QAAS,CAClC,MAAMK,EAAYL,EAAa,QACzBM,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAEL,OACExB,EAAC,OAAI,IAAKY,EAAK,UAAWV,EAAGK,EAAkB,CAAE,MAAAO,CAAM,CAAC,EAAGL,CAAS,EAAI,GAAGE,EACzE,SAAAX,EAACG,EAAA,CACC,SAAAH,EAAC,OAAI,IAAKiB,EAAc,UAAWf,EAAGI,EAAyB,CAAE,UAAAO,CAAU,CAAC,CAAC,EAC1E,SAAAH,EAAK,YAAY,IAAI,CAACM,EAAMS,IAAU,CACrC,MAAMC,EAAWX,IAAaC,EAAK,SAC7BW,EAASb,IAAU,OAEzB,OACEd,EAAC,UAEC,IAAK4B,GAAM,CACLA,IACFV,EAAY,QAAQO,CAAK,EAAIG,EAEjC,EACA,QAAS,IAAM,CACbT,EAAuBM,CAAK,EAC5B,SAAS,eAAeT,EAAK,QAAQ,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,CAC/E,EACA,UAAWd,EACT,wGACA,CAEE,iBAAkB,CAACyB,GAAU,CAACD,EAC9B,gCAAiC,CAACC,GAAUD,EAE5C,iBAAkBC,GAAU,CAACD,EAC7B,4BAA6BC,GAAUD,CACzC,CACF,EAEC,SAAAV,EAAK,OAtBDA,EAAK,QAuBZ,CAEJ,CAAC,EACH,EACF,EACF,CAEJ,CACF,EAEAR,EAAiB,YAAc,mBAC/B,IAAOqB,EAAQrB",
6
- "names": ["jsx", "React", "cn", "Container", "cva", "useAnchorPosition", "anchorNavigationVariants", "containerVariants", "AnchorNavigation", "className", "data", "props", "ref", "alignment", "theme", "activeId", "item", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "index", "isActive", "isDark", "el", "AnchorNavigation_default"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Container } from '../../components/container.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\nimport { withLayout } from '../../shared/Styles.js'\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n 'anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden',\n {\n variants: {\n alignment: {\n start: 'justify-start',\n center: 'justify-center',\n end: 'justify-end',\n },\n },\n defaultVariants: {\n alignment: 'start',\n },\n }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva(\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] sticky top-0 z-[60] w-full px-4',\n {\n variants: {\n theme: {\n light: 'bg-white',\n dark: 'bg-[#1E2024]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n /** \u951A\u70B9\u5217\u8868 */\n sectionIds: {\n targetId: string\n label: string\n }[]\n /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n alignment?: 'start' | 'center' | 'end'\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n}\n\nexport interface AnchorNavigationProps\n extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: AnchorNavigationData\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(({ className, data }, ref) => {\n const { alignment = 'start', theme = 'light' } = data\n const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n const containerRef = React.useRef<HTMLDivElement>(null)\n const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n const curRef = sectionRefs.current[activeIdIndex]\n\n if (curRef && containerRef.current) {\n const container = containerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n return (\n <div ref={ref} className={cn(containerVariants({ theme }), className)}>\n <div ref={containerRef} className={cn(anchorNavigationVariants({ alignment }))}>\n {data.sectionIds?.map((item, index) => {\n const isActive = activeId === item.targetId\n const isDark = theme === 'dark'\n\n return (\n <button\n key={item.targetId}\n ref={el => {\n if (el) {\n sectionRefs.current[index] = el\n }\n }}\n onClick={() => {\n autoScrollToActiveItem(index)\n document.getElementById(item.targetId)?.scrollIntoView({ behavior: 'smooth' })\n }}\n className={cn(\n 'anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold',\n {\n // Light theme colors\n 'text-[#4A4C56]': !isDark && !isActive,\n 'border-b-brand text-[#080A0F]': !isDark && isActive,\n // Dark theme colors\n 'text-[#8A8D92]': isDark && !isActive,\n 'border-b-brand text-white': isDark && isActive,\n }\n )}\n >\n {item.label}\n </button>\n )\n })}\n </div>\n </div>\n )\n})\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default AnchorNavigation\n"],
5
+ "mappings": "aAoGY,cAAAA,MAAA,oBAlGZ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,MAA0B,gCAC1B,OAAS,OAAAC,MAA8B,2BACvC,OAAOC,MAAuB,yBAC9B,MAA2B,yBAI3B,MAAMC,EAA2BF,EAC/B,gHACA,CACE,SAAU,CACR,UAAW,CACT,MAAO,gBACP,OAAQ,iBACR,IAAK,aACP,CACF,EACA,gBAAiB,CACf,UAAW,OACb,CACF,CACF,EAKMG,EAAoBH,EACxB,yGACA,CACE,SAAU,CACR,MAAO,CACL,MAAO,WACP,KAAM,cACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CACF,EA4BMI,EAAmBN,EAAM,WAAkD,CAAC,CAAE,UAAAO,EAAW,KAAAC,CAAK,EAAGC,IAAQ,CAC7G,KAAM,CAAE,UAAAC,EAAY,QAAS,MAAAC,EAAQ,OAAQ,EAAIH,EAC3CI,EAAWT,EAAkBK,EAAK,YAAY,IAAIK,GAAQA,EAAK,QAAQ,GAAK,CAAC,CAAC,EAC9EC,EAAed,EAAM,OAAuB,IAAI,EAChDe,EAAcf,EAAM,OAA4B,CAAC,CAAC,EAElDgB,EAAyBhB,EAAM,YAAaiB,GAA0B,CAC1E,MAAMC,EAASH,EAAY,QAAQE,CAAa,EAEhD,GAAIC,GAAUJ,EAAa,QAAS,CAClC,MAAMK,EAAYL,EAAa,QACzBM,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAEL,OACEtB,EAAC,OAAI,IAAKU,EAAK,UAAWR,EAAGI,EAAkB,CAAE,MAAAM,CAAM,CAAC,EAAGJ,CAAS,EAClE,SAAAR,EAAC,OAAI,IAAKe,EAAc,UAAWb,EAAGG,EAAyB,CAAE,UAAAM,CAAU,CAAC,CAAC,EAC1E,SAAAF,EAAK,YAAY,IAAI,CAACK,EAAMS,IAAU,CACrC,MAAMC,EAAWX,IAAaC,EAAK,SAC7BW,EAASb,IAAU,OAEzB,OACEZ,EAAC,UAEC,IAAK0B,GAAM,CACLA,IACFV,EAAY,QAAQO,CAAK,EAAIG,EAEjC,EACA,QAAS,IAAM,CACbT,EAAuBM,CAAK,EAC5B,SAAS,eAAeT,EAAK,QAAQ,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,CAC/E,EACA,UAAWZ,EACT,wGACA,CAEE,iBAAkB,CAACuB,GAAU,CAACD,EAC9B,gCAAiC,CAACC,GAAUD,EAE5C,iBAAkBC,GAAU,CAACD,EAC7B,4BAA6BC,GAAUD,CACzC,CACF,EAEC,SAAAV,EAAK,OAtBDA,EAAK,QAuBZ,CAEJ,CAAC,EACH,EACF,CAEJ,CAAC,EAEDP,EAAiB,YAAc,mBAC/B,IAAOoB,EAAQpB",
6
+ "names": ["jsx", "React", "cn", "cva", "useAnchorPosition", "anchorNavigationVariants", "containerVariants", "AnchorNavigation", "className", "data", "ref", "alignment", "theme", "activeId", "item", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "index", "isActive", "isDark", "el", "AnchorNavigation_default"]
7
7
  }
package/dist/esm/biz-components/EventSchedule/index.d.ts CHANGED
@@ -1,26 +1,27 @@
1
1
  import * as React from 'react';
2
+ import type { Media } from '../../types/props.js';
2
3
  export type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard';
3
4
  /**
4
5
  * 响应式背景图片配置
5
6
  */
6
7
  export interface ResponsiveBackgroundImage {
7
8
  /** 移动端图片 (<1024px) */
8
- mobile?: string;
9
+ mobile?: Media;
9
10
  /** 笔记本图片 (1025-1440px) */
10
- laptop?: string;
11
+ laptop?: Media;
11
12
  /** 桌面图片 (1441-1920px) */
12
- desktop?: string;
13
+ desktop?: Media;
13
14
  /** 超大桌面图片 (≥1921px) */
14
- lgDesktop?: string;
15
+ lgDesktop?: Media;
15
16
  }
16
17
  /**
17
18
  * 状态化背景图片配置
18
19
  */
19
20
  export interface StateBackgroundImage {
20
21
  /** 激活状态的背景图片 */
21
- active: string | ResponsiveBackgroundImage;
22
+ active: ResponsiveBackgroundImage;
22
23
  /** 非激活状态的背景图片 */
23
- inactive: string | ResponsiveBackgroundImage;
24
+ inactive: ResponsiveBackgroundImage;
24
25
  }
25
26
  /**
26
27
  * 活动日程项数据接口
@@ -35,7 +36,7 @@ export interface EventScheduleItem {
35
36
  /** 详细信息列表 */
36
37
  items: {
37
38
  /** 图标 (SVG 字符串或 URL) */
38
- icon: React.ReactNode;
39
+ icon?: Media;
39
40
  /** 文本内容 */
40
41
  label: string;
41
42
  }[];
@@ -49,48 +50,36 @@ export interface EventScheduleData {
49
50
  /**
50
51
  * 背景图片配置，支持响应式图片和状态化图片
51
52
  * 可以传入：
52
- * 1. 字符串（单一图片URL）
53
- * 2. ResponsiveBackgroundImage（多尺寸图片）
54
- * 3. StateBackgroundImage（激活/非激活状态图片）
55
- *
56
- * @example
57
- * // 单一图片
58
- * backgroundImage: "https://example.com/image.jpg"
53
+ * 1. ResponsiveBackgroundImage（多尺寸 Media 对象）
54
+ * 2. StateBackgroundImage（激活/非激活状态的响应式图片）
59
55
  *
60
56
  * @example
61
57
  * // 响应式图片
62
58
  * backgroundImage: {
63
- * mobile: "https://example.com/mobile.jpg",
64
- * laptop: "https://example.com/laptop.jpg",
65
- * desktop: "https://example.com/desktop.jpg",
66
- * lgDesktop: "https://example.com/lg-desktop.jpg"
67
- * }
68
- *
69
- * @example
70
- * // 状态化图片（单一URL）
71
- * backgroundImage: {
72
- * active: "https://example.com/active.jpg",
73
- * inactive: "https://example.com/inactive.jpg"
59
+ * mobile: { url: "https://example.com/mobile.jpg", alt: "...", ... },
60
+ * laptop: { url: "https://example.com/laptop.jpg", alt: "...", ... },
61
+ * desktop: { url: "https://example.com/desktop.jpg", alt: "...", ... },
62
+ * lgDesktop: { url: "https://example.com/lg-desktop.jpg", alt: "...", ... }
74
63
  * }
75
64
  *
76
65
  * @example
77
66
  * // 状态化 + 响应式图片
78
67
  * backgroundImage: {
79
68
  * active: {
80
- * mobile: "https://example.com/active-mobile.jpg",
81
- * laptop: "https://example.com/active-laptop.jpg",
82
- * desktop: "https://example.com/active-desktop.jpg",
83
- * lgDesktop: "https://example.com/active-lg-desktop.jpg"
69
+ * mobile: { url: "https://example.com/active-mobile.jpg", alt: "...", ... },
70
+ * laptop: { url: "https://example.com/active-laptop.jpg", alt: "...", ... },
71
+ * desktop: { url: "https://example.com/active-desktop.jpg", alt: "...", ... },
72
+ * lgDesktop: { url: "https://example.com/active-lg-desktop.jpg", alt: "...", ... }
84
73
  * },
85
74
  * inactive: {
86
- * mobile: "https://example.com/inactive-mobile.jpg",
87
- * laptop: "https://example.com/inactive-laptop.jpg",
88
- * desktop: "https://example.com/inactive-desktop.jpg",
89
- * lgDesktop: "https://example.com/inactive-lg-desktop.jpg"
75
+ * mobile: { url: "https://example.com/inactive-mobile.jpg", alt: "...", ... },
76
+ * laptop: { url: "https://example.com/inactive-laptop.jpg", alt: "...", ... },
77
+ * desktop: { url: "https://example.com/inactive-desktop.jpg", alt: "...", ... },
78
+ * lgDesktop: { url: "https://example.com/inactive-lg-desktop.jpg", alt: "...", ... }
90
79
  * }
91
80
  * }
92
81
  */
93
- backgroundImage?: string | ResponsiveBackgroundImage | StateBackgroundImage;
82
+ backgroundImage?: ResponsiveBackgroundImage | StateBackgroundImage;
94
83
  /** 是否显示时间轴，默认为 true */
95
84
  showTimeline?: boolean;
96
85
  }
package/dist/esm/biz-components/EventSchedule/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as i,jsxs as o}from"react/jsx-runtime";import*as d from"react";import{cn as l}from"../../helpers/index.js";import{Text as w,Picture as h}from"../../components/index.js";import{Swiper as x,SwiperSlide as S}from"swiper/react";import u from"dayjs";const B=(e,t)=>{const n=u(),a=u(e).startOf("day"),s=u(t).endOf("day");return n.isAfter(a)&&n.isBefore(s)},E=e=>B(e.startDate,e.endDate),N=({active:e,className:t})=>o("div",{className:l("relative my-1 flex h-2 flex-1 items-center justify-center",t),children:[i("div",{className:l("h-2 w-full ",{"bg-[#F6CD4E] rounded-full":e,"bg-[#EAEAEC]":!e})}),i("div",{className:"absolute inset-0 flex items-center justify-center",children:i("div",{className:l("size-4 rounded-full border-2 transition-colors",{"border-[#F6CD4E] bg-[#F6CD4E]":e,"border-[#EAEAEC] bg-[#EAEAEC]":!e})})})]}),k=e=>typeof e=="object"&&("active"in e||"inactive"in e),g=e=>{if(!e)return;if(typeof e=="string")return e;const{mobile:t,laptop:n,desktop:a,lgDesktop:s}=e,r=[];return s&&r.push(s),a&&r.push(`${a} 1920`),n&&r.push(`${n} 1440`),t&&r.push(`${t} 1024`),r.length>0?r.join(", "):void 0},b=(e,t)=>{if(e){if(k(e)){const n=t?e.active:e.inactive;return g(n)}return g(e)}},I=({active:e,item:t,backgroundImage:n,className:a})=>{const s=d.useMemo(()=>b(n,e),[n,e]);return o("div",{className:l("rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden",a),children:[i(h,{source:s,alt:"",className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"}),o("div",{className:"relative z-20 size-full p-4",children:[i("h2",{className:l("desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]"),dangerouslySetInnerHTML:{__html:t.title}}),i("div",{className:"flex flex-col gap-0.5",children:t.items.map((r,c)=>o("div",{className:"flex items-center gap-2",children:[r.icon&&i("div",{className:"desktop:size-6 size-5 shrink-0",children:i("img",{src:r.icon,alt:"",className:"size-full"})}),i(w,{html:r.label,className:l("desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]")})]},c))})]})]})},f=d.forwardRef(({classNames:e={},data:t,...n},a)=>{const s=d.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),r=d.useMemo(()=>{switch(s){case 2:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2},1024:{spaceBetween:16},1440:{spaceBetween:16,slidesPerView:2}};case 3:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:s,spaceBetween:16},1440:{spaceBetween:16,slidesPerView:s}};case 4:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:3.2,spaceBetween:16},1440:{slidesPerView:s}};default:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:1},1024:{slidesPerView:s,spaceBetween:16},1440:{slidesPerView:s}}}},[s]),c=t.showTimeline!==!1;return i("div",{ref:a,className:l("desktop:px-16 laptop:px-16 tablet:px-8 w-full overflow-hidden px-4",e?.root),...n,children:i("div",{className:"flex w-full flex-col gap-4",children:i(x,{breakpoints:r,className:"w-full !overflow-visible",children:t.scheduleList.map((p,v)=>{const m=E(p);return o(S,{children:[c&&i(N,{active:m}),i(I,{active:m,className:c?"mt-4":"",item:p,backgroundImage:t.backgroundImage})]},"SwiperSlideItem"+v)})})})})});f.displayName="EventSchedule";var D=f;export{D as default};
1
+ "use client";import{jsx as n,jsxs as d}from"react/jsx-runtime";import*as u from"react";import{cn as o}from"../../helpers/index.js";import{Text as S,Picture as v,Heading as k}from"../../components/index.js";import{Swiper as B,SwiperSlide as b}from"swiper/react";import m from"dayjs";const E=(e,t)=>{const r=m(),i=m(e).startOf("day"),l=m(t).endOf("day");return r.isAfter(i)&&r.isBefore(l)},I=e=>E(e.startDate,e.endDate),N=({active:e,className:t})=>d("div",{className:o("relative my-1 flex h-2 flex-1 items-center justify-center",t),children:[n("div",{className:o("h-2 w-full ",{"bg-[#F6CD4E] rounded-full":e,"bg-[#EAEAEC]":!e})}),n("div",{className:"absolute inset-0 flex items-center justify-center",children:n("div",{className:o("size-4 rounded-full border-2 transition-colors",{"border-[#F6CD4E] bg-[#F6CD4E]":e,"border-[#EAEAEC] bg-[#EAEAEC]":!e})})})]}),P=e=>typeof e=="object"&&("active"in e||"inactive"in e),w=e=>{if(!e)return;const{mobile:t,laptop:r,desktop:i,lgDesktop:l}=e,s=[],a=x=>x?.url,p=a(l),c=a(i),f=a(r),g=a(t);return p&&s.push(p),c&&s.push(`${c} 1920`),f&&s.push(`${f} 1440`),g&&s.push(`${g} 1024`),s.length>0?s.join(", "):void 0},R=(e,t)=>{if(e){if(P(e)){const r=t?e.active:e.inactive;return w(r)}return w(e)}},V=({active:e,item:t,backgroundImage:r,className:i})=>{const l=u.useMemo(()=>R(r,e),[r,e]);return d("div",{className:o("rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden",i),children:[n(v,{source:l,alt:"",className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"}),d("div",{className:"relative z-20 size-full p-4",children:[n(k,{html:t.title,className:o("desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]")}),n("div",{className:"flex flex-col gap-0.5",children:t.items.map((s,a)=>d("div",{className:"flex items-center gap-2",children:[s.icon&&n("div",{className:"desktop:size-6 size-5 shrink-0",children:n(v,{source:s.icon.url,alt:s.icon.alt,className:"size-full"})}),n(S,{html:s.label,className:o("desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]")})]},a))})]})]})},h=u.forwardRef(({classNames:e={},data:t},r)=>{const i=u.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),l=u.useMemo(()=>{switch(i){case 2:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2},1024:{spaceBetween:16},1440:{spaceBetween:16,slidesPerView:2}};case 3:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:i,spaceBetween:16},1440:{spaceBetween:16,slidesPerView:i}};case 4:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:3.2,spaceBetween:16},1440:{slidesPerView:i}};default:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:1},1024:{slidesPerView:i,spaceBetween:16},1440:{slidesPerView:i}}}},[i]),s=t.showTimeline!==!1;return n("div",{ref:r,className:o("tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] flex w-full flex-col gap-4 overflow-hidden px-4",e?.root),children:n(B,{breakpoints:l,className:"w-full !overflow-visible",children:t.scheduleList.map((a,p)=>{const c=I(a);return d(b,{children:[s&&n(N,{className:e?.timeline,active:c}),n(V,{active:c,className:o(s?"mt-4":"",e?.eventScheduleCard),item:a,backgroundImage:t.backgroundImage})]},"SwiperSlideItem"+p)})})})});h.displayName="EventSchedule";var C=h;export{C as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/EventSchedule/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/EventSchedule/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport dayjs from 'dayjs'\n\nexport type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard'\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<1024px) */\n mobile?: string\n /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n laptop?: string\n /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n desktop?: string\n /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n lgDesktop?: string\n}\n\n/**\n * \u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface StateBackgroundImage {\n /** \u6FC0\u6D3B\u72B6\u6001\u7684\u80CC\u666F\u56FE\u7247 */\n active: string | ResponsiveBackgroundImage\n /** \u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u80CC\u666F\u56FE\u7247 */\n inactive: string | ResponsiveBackgroundImage\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n /** \u6807\u9898 */\n title: string\n /** \u5F00\u59CB\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-01'\uFF09 */\n startDate: string\n /** \u7ED3\u675F\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-31'\uFF09 */\n endDate: string\n /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n items: {\n /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n icon: React.ReactNode\n /** \u6587\u672C\u5185\u5BB9 */\n label: string\n }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n /** \u65E5\u7A0B\u5217\u8868 */\n scheduleList: EventScheduleItem[]\n /**\n * \u80CC\u666F\u56FE\u7247\u914D\u7F6E\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u56FE\u7247\u548C\u72B6\u6001\u5316\u56FE\u7247\n * \u53EF\u4EE5\u4F20\u5165\uFF1A\n * 1. \u5B57\u7B26\u4E32\uFF08\u5355\u4E00\u56FE\u7247URL\uFF09\n * 2. ResponsiveBackgroundImage\uFF08\u591A\u5C3A\u5BF8\u56FE\u7247\uFF09\n * 3. StateBackgroundImage\uFF08\u6FC0\u6D3B/\u975E\u6FC0\u6D3B\u72B6\u6001\u56FE\u7247\uFF09\n *\n * @example\n * // \u5355\u4E00\u56FE\u7247\n * backgroundImage: \"https://example.com/image.jpg\"\n *\n * @example\n * // \u54CD\u5E94\u5F0F\u56FE\u7247\n * backgroundImage: {\n * mobile: \"https://example.com/mobile.jpg\",\n * laptop: \"https://example.com/laptop.jpg\",\n * desktop: \"https://example.com/desktop.jpg\",\n * lgDesktop: \"https://example.com/lg-desktop.jpg\"\n * }\n *\n * @example\n * // \u72B6\u6001\u5316\u56FE\u7247\uFF08\u5355\u4E00URL\uFF09\n * backgroundImage: {\n * active: \"https://example.com/active.jpg\",\n * inactive: \"https://example.com/inactive.jpg\"\n * }\n *\n * @example\n * // \u72B6\u6001\u5316 + \u54CD\u5E94\u5F0F\u56FE\u7247\n * backgroundImage: {\n * active: {\n * mobile: \"https://example.com/active-mobile.jpg\",\n * laptop: \"https://example.com/active-laptop.jpg\",\n * desktop: \"https://example.com/active-desktop.jpg\",\n * lgDesktop: \"https://example.com/active-lg-desktop.jpg\"\n * },\n * inactive: {\n * mobile: \"https://example.com/inactive-mobile.jpg\",\n * laptop: \"https://example.com/inactive-laptop.jpg\",\n * desktop: \"https://example.com/inactive-desktop.jpg\",\n * lgDesktop: \"https://example.com/inactive-lg-desktop.jpg\"\n * }\n * }\n */\n backgroundImage?: string | ResponsiveBackgroundImage | StateBackgroundImage\n /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74\uFF0C\u9ED8\u8BA4\u4E3A true */\n showTimeline?: boolean\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: EventScheduleData\n classNames?: Partial<Record<EventScheduleSemanticName, string>>\n}\n\n/**\n * \u5224\u65AD\u5F53\u524D\u65F6\u95F4\u662F\u5426\u5728\u6307\u5B9A\u7684\u65F6\u95F4\u533A\u95F4\u5185\n * @param startDate \u5F00\u59CB\u65E5\u671F\n * @param endDate \u7ED3\u675F\u65E5\u671F\n * @returns \u662F\u5426\u5728\u533A\u95F4\u5185\n */\nconst isInTimeRange = (startDate: string, endDate: string): boolean => {\n const now = dayjs()\n const start = dayjs(startDate).startOf('day')\n const end = dayjs(endDate).endOf('day')\n return now.isAfter(start) && now.isBefore(end)\n}\n\n/**\n * \u83B7\u53D6\u6D3B\u52A8\u9879\u7684\u6FC0\u6D3B\u72B6\u6001\n * @param item \u6D3B\u52A8\u9879\n * @returns \u662F\u5426\u6FC0\u6D3B\n */\nconst getItemActiveStatus = (item: EventScheduleItem): boolean => {\n // \u5426\u5219\u6839\u636E\u65F6\u95F4\u533A\u95F4\u81EA\u52A8\u5224\u65AD\n return isInTimeRange(item.startDate, item.endDate)\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ active, className }: { active: boolean; className?: string }) => {\n return (\n <div className={cn('relative my-1 flex h-2 flex-1 items-center justify-center', className)}>\n {/* \u8FDB\u5EA6\u6761 */}\n <div\n className={cn('h-2 w-full ', {\n 'bg-[#F6CD4E] rounded-full': active,\n 'bg-[#EAEAEC]': !active,\n })}\n />\n {/* \u65F6\u95F4\u8282\u70B9 */}\n <div className=\"absolute inset-0 flex items-center justify-center\">\n <div\n className={cn('size-4 rounded-full border-2 transition-colors', {\n 'border-[#F6CD4E] bg-[#F6CD4E]': active,\n 'border-[#EAEAEC] bg-[#EAEAEC]': !active,\n })}\n />\n </div>\n </div>\n )\n}\n\n/**\n * \u5224\u65AD\u662F\u5426\u4E3A\u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @param obj \u5F85\u68C0\u67E5\u7684\u5BF9\u8C61\n * @returns \u662F\u5426\u4E3AStateBackgroundImage\u7C7B\u578B\n */\nconst isStateBackgroundImage = (\n obj: string | ResponsiveBackgroundImage | StateBackgroundImage\n): obj is StateBackgroundImage => {\n return typeof obj === 'object' && ('active' in obj || 'inactive' in obj)\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3APicture\u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n * @param backgroundImage \u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @returns Picture\u7EC4\u4EF6\u53EF\u7528\u7684source\u5B57\u7B26\u4E32\n */\nconst convertResponsiveImageToString = (backgroundImage: string | ResponsiveBackgroundImage): string | undefined => {\n if (!backgroundImage) return undefined\n if (typeof backgroundImage === 'string') return backgroundImage\n\n const { mobile, laptop, desktop, lgDesktop } = backgroundImage\n const parts: string[] = []\n\n // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n if (lgDesktop) parts.push(lgDesktop)\n\n // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n if (desktop) parts.push(`${desktop} 1920`)\n if (laptop) parts.push(`${laptop} 1440`)\n if (mobile) parts.push(`${mobile} 1024`)\n\n return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * \u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u83B7\u53D6\u5BF9\u5E94\u7684\u80CC\u666F\u56FE\u7247\n * @param backgroundImage \u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @param isActive \u662F\u5426\u6FC0\u6D3B\u72B6\u6001\n * @returns Picture\u7EC4\u4EF6\u53EF\u7528\u7684source\u5B57\u7B26\u4E32\n */\nconst formatBackgroundImage = (\n backgroundImage: string | ResponsiveBackgroundImage | StateBackgroundImage | undefined,\n isActive: boolean\n): string | undefined => {\n if (!backgroundImage) return undefined\n\n // \u5982\u679C\u662F\u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\uFF0C\u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u9009\u62E9\u5BF9\u5E94\u7684\u56FE\u7247\n if (isStateBackgroundImage(backgroundImage)) {\n const stateImage = isActive ? backgroundImage.active : backgroundImage.inactive\n return convertResponsiveImageToString(stateImage)\n }\n\n // \u5426\u5219\u76F4\u63A5\u8F6C\u6362\n return convertResponsiveImageToString(backgroundImage)\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({\n active,\n item,\n backgroundImage,\n className,\n}: {\n active: boolean\n item: EventScheduleItem\n backgroundImage: string | ResponsiveBackgroundImage | StateBackgroundImage | undefined\n className?: string\n}) => {\n const pictureSource = React.useMemo(() => {\n return formatBackgroundImage(backgroundImage, active)\n }, [backgroundImage, active])\n\n return (\n <div\n className={cn(\n 'rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden',\n className\n )}\n >\n <Picture source={pictureSource} alt=\"\" className=\"absolute inset-0 z-10\" imgClassName=\"h-full object-cover\" />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-20 size-full p-4\">\n <h2\n className={cn('desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]')}\n dangerouslySetInnerHTML={{ __html: item.title }}\n />\n {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n <div className=\"flex flex-col gap-0.5\">\n {item.items.map((detail, index) => (\n <div key={index} className=\"flex items-center gap-2\">\n {/* \u56FE\u6807 */}\n {detail.icon && (\n <div className=\"desktop:size-6 size-5 shrink-0\">\n <img src={detail.icon as string} alt=\"\" className=\"size-full\" />\n </div>\n )}\n {/* \u6587\u672C */}\n <Text\n html={detail.label}\n className={cn('desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]')}\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(\n ({ classNames = {}, data, ...props }, ref) => {\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n // \u6839\u636E itemsPerRow \u914D\u7F6E\u54CD\u5E94\u5F0F\u65AD\u70B9\n const swiperBreakpoints = React.useMemo(() => {\n switch (itemsPerRow) {\n case 2:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2,\n },\n 1024: {\n spaceBetween: 16,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: 2,\n },\n }\n case 3:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2.4,\n },\n 1024: {\n slidesPerView: itemsPerRow,\n spaceBetween: 16,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: itemsPerRow,\n },\n }\n case 4:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2.4,\n },\n 1024: {\n slidesPerView: 3.2,\n spaceBetween: 16,\n },\n 1440: {\n slidesPerView: itemsPerRow,\n },\n }\n default:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 1,\n },\n 1024: {\n slidesPerView: itemsPerRow,\n spaceBetween: 16,\n },\n 1440: {\n slidesPerView: itemsPerRow,\n },\n }\n }\n }, [itemsPerRow])\n\n const showTimeline = data.showTimeline !== false // \u9ED8\u8BA4\u4E3A true\n\n return (\n <div\n ref={ref}\n className={cn('desktop:px-16 laptop:px-16 tablet:px-8 w-full overflow-hidden px-4', classNames?.root)}\n {...props}\n >\n <div className=\"flex w-full flex-col gap-4\">\n <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n {data.scheduleList.map((item, index) => {\n const isActive = getItemActiveStatus(item)\n return (\n <SwiperSlide key={'SwiperSlideItem' + index}>\n {/* \u65F6\u95F4\u8F74 */}\n {showTimeline && <TimelineNode active={isActive} />}\n <EventScheduleCard\n active={isActive}\n className={showTimeline ? 'mt-4' : ''}\n item={item}\n backgroundImage={data.backgroundImage}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n </div>\n </div>\n )\n }\n)\n\nEventSchedule.displayName = 'EventSchedule'\nexport default EventSchedule\n\n// \u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\n// export type { ResponsiveBackgroundImage, StateBackgroundImage, EventScheduleItem, EventScheduleData, EventScheduleProps }\n"],
5
- "mappings": "aA8II,OAEE,OAAAA,EAFF,QAAAC,MAAA,oBA5IJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,QAAAC,EAAM,WAAAC,MAAe,4BAC9B,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAOC,MAAW,QAkHlB,MAAMC,EAAgB,CAACC,EAAmBC,IAA6B,CACrE,MAAMC,EAAMJ,EAAM,EACZK,EAAQL,EAAME,CAAS,EAAE,QAAQ,KAAK,EACtCI,EAAMN,EAAMG,CAAO,EAAE,MAAM,KAAK,EACtC,OAAOC,EAAI,QAAQC,CAAK,GAAKD,EAAI,SAASE,CAAG,CAC/C,EAOMC,EAAuBC,GAEpBP,EAAcO,EAAK,UAAWA,EAAK,OAAO,EAM7CC,EAAe,CAAC,CAAE,OAAAC,EAAQ,UAAAC,CAAU,IAEtClB,EAAC,OAAI,UAAWE,EAAG,4DAA6DgB,CAAS,EAEvF,UAAAnB,EAAC,OACC,UAAWG,EAAG,cAAe,CAC3B,4BAA6Be,EAC7B,eAAgB,CAACA,CACnB,CAAC,EACH,EAEAlB,EAAC,OAAI,UAAU,oDACb,SAAAA,EAAC,OACC,UAAWG,EAAG,iDAAkD,CAC9D,gCAAiCe,EACjC,gCAAiC,CAACA,CACpC,CAAC,EACH,EACF,GACF,EASEE,EACJC,GAEO,OAAOA,GAAQ,WAAa,WAAYA,GAAO,aAAcA,GAQhEC,EAAkCC,GAA4E,CAClH,GAAI,CAACA,EAAiB,OACtB,GAAI,OAAOA,GAAoB,SAAU,OAAOA,EAEhD,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIJ,EACzCK,EAAkB,CAAC,EAGzB,OAAID,GAAWC,EAAM,KAAKD,CAAS,EAG/BD,GAASE,EAAM,KAAK,GAAGF,CAAO,OAAO,EACrCD,GAAQG,EAAM,KAAK,GAAGH,CAAM,OAAO,EACnCD,GAAQI,EAAM,KAAK,GAAGJ,CAAM,OAAO,EAEhCI,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAQMC,EAAwB,CAC5BN,EACAO,IACuB,CACvB,GAAKP,EAGL,IAAIH,EAAuBG,CAAe,EAAG,CAC3C,MAAMQ,EAAaD,EAAWP,EAAgB,OAASA,EAAgB,SACvE,OAAOD,EAA+BS,CAAU,CAClD,CAGA,OAAOT,EAA+BC,CAAe,EACvD,EAKMS,EAAoB,CAAC,CACzB,OAAAd,EACA,KAAAF,EACA,gBAAAO,EACA,UAAAJ,CACF,IAKM,CACJ,MAAMc,EAAgB/B,EAAM,QAAQ,IAC3B2B,EAAsBN,EAAiBL,CAAM,EACnD,CAACK,EAAiBL,CAAM,CAAC,EAE5B,OACEjB,EAAC,OACC,UAAWE,EACT,qHACAgB,CACF,EAEA,UAAAnB,EAACK,EAAA,CAAQ,OAAQ4B,EAAe,IAAI,GAAG,UAAU,wBAAwB,aAAa,sBAAsB,EAE5GhC,EAAC,OAAI,UAAU,8BACb,UAAAD,EAAC,MACC,UAAWG,EAAG,wEAAwE,EACtF,wBAAyB,CAAE,OAAQa,EAAK,KAAM,EAChD,EAEAhB,EAAC,OAAI,UAAU,wBACZ,SAAAgB,EAAK,MAAM,IAAI,CAACkB,EAAQC,IACvBlC,EAAC,OAAgB,UAAU,0BAExB,UAAAiC,EAAO,MACNlC,EAAC,OAAI,UAAU,iCACb,SAAAA,EAAC,OAAI,IAAKkC,EAAO,KAAgB,IAAI,GAAG,UAAU,YAAY,EAChE,EAGFlC,EAACI,EAAA,CACC,KAAM8B,EAAO,MACb,UAAW/B,EAAG,+EAA+E,EAC/F,IAXQgC,CAYV,CACD,EACH,GACF,GACF,CAEJ,EAOMC,EAAgBlC,EAAM,WAC1B,CAAC,CAAE,WAAAmC,EAAa,CAAC,EAAG,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CAC5C,MAAMC,EAAcvC,EAAM,QAAQ,IACzBoC,GAAM,cAAc,QAAU,EACpC,CAACA,GAAM,YAAY,CAAC,EAGjBI,EAAoBxC,EAAM,QAAQ,IAAM,CAC5C,OAAQuC,EAAa,CACnB,IAAK,GACH,MAAO,CACL,EAAG,CACD,cAAe,KACf,aAAc,EAChB,EACA,IAAK,CACH,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,EAChB,EACA,KAAM,CACJ,aAAc,GACd,cAAe,CACjB,CACF,EACF,IAAK,GACH,MAAO,CACL,EAAG,CACD,cAAe,KACf,aAAc,EAChB,EACA,IAAK,CACH,cAAe,GACjB,EACA,KAAM,CACJ,cAAeA,EACf,aAAc,EAChB,EACA,KAAM,CACJ,aAAc,GACd,cAAeA,CACjB,CACF,EACF,IAAK,GACH,MAAO,CACL,EAAG,CACD,cAAe,KACf,aAAc,EAChB,EACA,IAAK,CACH,cAAe,GACjB,EACA,KAAM,CACJ,cAAe,IACf,aAAc,EAChB,EACA,KAAM,CACJ,cAAeA,CACjB,CACF,EACF,QACE,MAAO,CACL,EAAG,CACD,cAAe,KACf,aAAc,EAChB,EACA,IAAK,CACH,cAAe,CACjB,EACA,KAAM,CACJ,cAAeA,EACf,aAAc,EAChB,EACA,KAAM,CACJ,cAAeA,CACjB,CACF,CACJ,CACF,EAAG,CAACA,CAAW,CAAC,EAEVE,EAAeL,EAAK,eAAiB,GAE3C,OACEtC,EAAC,OACC,IAAKwC,EACL,UAAWrC,EAAG,qEAAsEkC,GAAY,IAAI,EACnG,GAAGE,EAEJ,SAAAvC,EAAC,OAAI,UAAU,6BACb,SAAAA,EAACM,EAAA,CAAO,YAAaoC,EAAmB,UAAU,2BAC/C,SAAAJ,EAAK,aAAa,IAAI,CAACtB,EAAMmB,IAAU,CACtC,MAAML,EAAWf,EAAoBC,CAAI,EACzC,OACEf,EAACM,EAAA,CAEE,UAAAoC,GAAgB3C,EAACiB,EAAA,CAAa,OAAQa,EAAU,EACjD9B,EAACgC,EAAA,CACC,OAAQF,EACR,UAAWa,EAAe,OAAS,GACnC,KAAM3B,EACN,gBAAiBsB,EAAK,gBACxB,IARgB,kBAAoBH,CAStC,CAEJ,CAAC,EACH,EACF,EACF,CAEJ,CACF,EAEAC,EAAc,YAAc,gBAC5B,IAAOQ,EAAQR",
6
- "names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Swiper", "SwiperSlide", "dayjs", "isInTimeRange", "startDate", "endDate", "now", "start", "end", "getItemActiveStatus", "item", "TimelineNode", "active", "className", "isStateBackgroundImage", "obj", "convertResponsiveImageToString", "backgroundImage", "mobile", "laptop", "desktop", "lgDesktop", "parts", "formatBackgroundImage", "isActive", "stateImage", "EventScheduleCard", "pictureSource", "detail", "index", "EventSchedule", "classNames", "data", "props", "ref", "itemsPerRow", "swiperBreakpoints", "showTimeline", "EventSchedule_default"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport dayjs from 'dayjs'\nimport type { Media } from '../../types/props.js'\nexport type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard'\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<1024px) */\n mobile?: Media\n /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n laptop?: Media\n /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n desktop?: Media\n /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n lgDesktop?: Media\n}\n\n/**\n * \u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface StateBackgroundImage {\n /** \u6FC0\u6D3B\u72B6\u6001\u7684\u80CC\u666F\u56FE\u7247 */\n active: ResponsiveBackgroundImage\n /** \u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u80CC\u666F\u56FE\u7247 */\n inactive: ResponsiveBackgroundImage\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n /** \u6807\u9898 */\n title: string\n /** \u5F00\u59CB\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-01'\uFF09 */\n startDate: string\n /** \u7ED3\u675F\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-31'\uFF09 */\n endDate: string\n /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n items: {\n /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n icon?: Media\n /** \u6587\u672C\u5185\u5BB9 */\n label: string\n }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n /** \u65E5\u7A0B\u5217\u8868 */\n scheduleList: EventScheduleItem[]\n /**\n * \u80CC\u666F\u56FE\u7247\u914D\u7F6E\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u56FE\u7247\u548C\u72B6\u6001\u5316\u56FE\u7247\n * \u53EF\u4EE5\u4F20\u5165\uFF1A\n * 1. ResponsiveBackgroundImage\uFF08\u591A\u5C3A\u5BF8 Media \u5BF9\u8C61\uFF09\n * 2. StateBackgroundImage\uFF08\u6FC0\u6D3B/\u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u54CD\u5E94\u5F0F\u56FE\u7247\uFF09\n *\n * @example\n * // \u54CD\u5E94\u5F0F\u56FE\u7247\n * backgroundImage: {\n * mobile: { url: \"https://example.com/mobile.jpg\", alt: \"...\", ... },\n * laptop: { url: \"https://example.com/laptop.jpg\", alt: \"...\", ... },\n * desktop: { url: \"https://example.com/desktop.jpg\", alt: \"...\", ... },\n * lgDesktop: { url: \"https://example.com/lg-desktop.jpg\", alt: \"...\", ... }\n * }\n *\n * @example\n * // \u72B6\u6001\u5316 + \u54CD\u5E94\u5F0F\u56FE\u7247\n * backgroundImage: {\n * active: {\n * mobile: { url: \"https://example.com/active-mobile.jpg\", alt: \"...\", ... },\n * laptop: { url: \"https://example.com/active-laptop.jpg\", alt: \"...\", ... },\n * desktop: { url: \"https://example.com/active-desktop.jpg\", alt: \"...\", ... },\n * lgDesktop: { url: \"https://example.com/active-lg-desktop.jpg\", alt: \"...\", ... }\n * },\n * inactive: {\n * mobile: { url: \"https://example.com/inactive-mobile.jpg\", alt: \"...\", ... },\n * laptop: { url: \"https://example.com/inactive-laptop.jpg\", alt: \"...\", ... },\n * desktop: { url: \"https://example.com/inactive-desktop.jpg\", alt: \"...\", ... },\n * lgDesktop: { url: \"https://example.com/inactive-lg-desktop.jpg\", alt: \"...\", ... }\n * }\n * }\n */\n backgroundImage?: ResponsiveBackgroundImage | StateBackgroundImage\n /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74\uFF0C\u9ED8\u8BA4\u4E3A true */\n showTimeline?: boolean\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: EventScheduleData\n classNames?: Partial<Record<EventScheduleSemanticName, string>>\n}\n\n/**\n * \u5224\u65AD\u5F53\u524D\u65F6\u95F4\u662F\u5426\u5728\u6307\u5B9A\u7684\u65F6\u95F4\u533A\u95F4\u5185\n * @param startDate \u5F00\u59CB\u65E5\u671F\n * @param endDate \u7ED3\u675F\u65E5\u671F\n * @returns \u662F\u5426\u5728\u533A\u95F4\u5185\n */\nconst isInTimeRange = (startDate: string, endDate: string): boolean => {\n const now = dayjs()\n const start = dayjs(startDate).startOf('day')\n const end = dayjs(endDate).endOf('day')\n return now.isAfter(start) && now.isBefore(end)\n}\n\n/**\n * \u83B7\u53D6\u6D3B\u52A8\u9879\u7684\u6FC0\u6D3B\u72B6\u6001\n * @param item \u6D3B\u52A8\u9879\n * @returns \u662F\u5426\u6FC0\u6D3B\n */\nconst getItemActiveStatus = (item: EventScheduleItem): boolean => {\n // \u5426\u5219\u6839\u636E\u65F6\u95F4\u533A\u95F4\u81EA\u52A8\u5224\u65AD\n return isInTimeRange(item.startDate, item.endDate)\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ active, className }: { active: boolean; className?: string }) => {\n return (\n <div className={cn('relative my-1 flex h-2 flex-1 items-center justify-center', className)}>\n {/* \u8FDB\u5EA6\u6761 */}\n <div\n className={cn('h-2 w-full ', {\n 'bg-[#F6CD4E] rounded-full': active,\n 'bg-[#EAEAEC]': !active,\n })}\n />\n {/* \u65F6\u95F4\u8282\u70B9 */}\n <div className=\"absolute inset-0 flex items-center justify-center\">\n <div\n className={cn('size-4 rounded-full border-2 transition-colors', {\n 'border-[#F6CD4E] bg-[#F6CD4E]': active,\n 'border-[#EAEAEC] bg-[#EAEAEC]': !active,\n })}\n />\n </div>\n </div>\n )\n}\n\n/**\n * \u5224\u65AD\u662F\u5426\u4E3A\u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @param obj \u5F85\u68C0\u67E5\u7684\u5BF9\u8C61\n * @returns \u662F\u5426\u4E3AStateBackgroundImage\u7C7B\u578B\n */\nconst isStateBackgroundImage = (obj: ResponsiveBackgroundImage | StateBackgroundImage): obj is StateBackgroundImage => {\n return typeof obj === 'object' && ('active' in obj || 'inactive' in obj)\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3APicture\u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n * @param backgroundImage \u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @returns Picture\u7EC4\u4EF6\u53EF\u7528\u7684source\u5B57\u7B26\u4E32\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage): string | undefined => {\n if (!backgroundImage) return undefined\n\n const { mobile, laptop, desktop, lgDesktop } = backgroundImage\n const parts: string[] = []\n\n // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n const getUrl = (media: Media | undefined): string | undefined => {\n return media?.url\n }\n\n // \u83B7\u53D6\u5404\u5C3A\u5BF8\u7684 URL\n const lgDesktopUrl = getUrl(lgDesktop)\n const desktopUrl = getUrl(desktop)\n const laptopUrl = getUrl(laptop)\n const mobileUrl = getUrl(mobile)\n\n // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n if (lgDesktopUrl) parts.push(lgDesktopUrl)\n\n // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n if (desktopUrl) parts.push(`${desktopUrl} 1920`)\n if (laptopUrl) parts.push(`${laptopUrl} 1440`)\n if (mobileUrl) parts.push(`${mobileUrl} 1024`)\n\n return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * \u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u83B7\u53D6\u5BF9\u5E94\u7684\u80CC\u666F\u56FE\u7247\n * @param backgroundImage \u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @param isActive \u662F\u5426\u6FC0\u6D3B\u72B6\u6001\n * @returns Picture\u7EC4\u4EF6\u53EF\u7528\u7684source\u5B57\u7B26\u4E32\n */\nconst formatBackgroundImage = (\n backgroundImage: ResponsiveBackgroundImage | StateBackgroundImage | undefined,\n isActive: boolean\n): string | undefined => {\n if (!backgroundImage) return undefined\n\n // \u5982\u679C\u662F\u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\uFF0C\u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u9009\u62E9\u5BF9\u5E94\u7684\u56FE\u7247\n if (isStateBackgroundImage(backgroundImage)) {\n const stateImage = isActive ? backgroundImage.active : backgroundImage.inactive\n return convertResponsiveImageToString(stateImage)\n }\n\n // \u5426\u5219\u76F4\u63A5\u8F6C\u6362\n return convertResponsiveImageToString(backgroundImage)\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({\n active,\n item,\n backgroundImage,\n className,\n}: {\n active: boolean\n item: EventScheduleItem\n backgroundImage: ResponsiveBackgroundImage | StateBackgroundImage | undefined\n className?: string\n}) => {\n const pictureSource = React.useMemo(() => {\n return formatBackgroundImage(backgroundImage, active)\n }, [backgroundImage, active])\n\n return (\n <div\n className={cn(\n 'rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden',\n className\n )}\n >\n <Picture source={pictureSource} alt=\"\" className=\"absolute inset-0 z-10\" imgClassName=\"h-full object-cover\" />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-20 size-full p-4\">\n <Heading\n html={item.title}\n className={cn('desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]')}\n />\n {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n <div className=\"flex flex-col gap-0.5\">\n {item.items.map((detail, index) => (\n <div key={index} className=\"flex items-center gap-2\">\n {/* \u56FE\u6807 */}\n {detail.icon && (\n <div className=\"desktop:size-6 size-5 shrink-0\">\n <Picture source={detail.icon.url} alt={detail.icon.alt} className=\"size-full\" />\n </div>\n )}\n {/* \u6587\u672C */}\n <Text\n html={detail.label}\n className={cn('desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]')}\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(({ classNames = {}, data }, ref) => {\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n // \u6839\u636E itemsPerRow \u914D\u7F6E\u54CD\u5E94\u5F0F\u65AD\u70B9\n const swiperBreakpoints = React.useMemo(() => {\n switch (itemsPerRow) {\n case 2:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2,\n },\n 1024: {\n spaceBetween: 16,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: 2,\n },\n }\n case 3:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2.4,\n },\n 1024: {\n slidesPerView: itemsPerRow,\n spaceBetween: 16,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: itemsPerRow,\n },\n }\n case 4:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 2.4,\n },\n 1024: {\n slidesPerView: 3.2,\n spaceBetween: 16,\n },\n 1440: {\n slidesPerView: itemsPerRow,\n },\n }\n default:\n return {\n 0: {\n slidesPerView: 1.17,\n spaceBetween: 12,\n },\n 768: {\n slidesPerView: 1,\n },\n 1024: {\n slidesPerView: itemsPerRow,\n spaceBetween: 16,\n },\n 1440: {\n slidesPerView: itemsPerRow,\n },\n }\n }\n }, [itemsPerRow])\n\n const showTimeline = data.showTimeline !== false // \u9ED8\u8BA4\u4E3A true\n\n return (\n <div\n ref={ref}\n className={cn(\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] flex w-full flex-col gap-4 overflow-hidden px-4',\n classNames?.root\n )}\n >\n <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n {data.scheduleList.map((item, index) => {\n const isActive = getItemActiveStatus(item)\n return (\n <SwiperSlide key={'SwiperSlideItem' + index}>\n {/* \u65F6\u95F4\u8F74 */}\n {showTimeline && <TimelineNode className={classNames?.timeline} active={isActive} />}\n <EventScheduleCard\n active={isActive}\n className={cn(showTimeline ? 'mt-4' : '', classNames?.eventScheduleCard)}\n item={item}\n backgroundImage={data.backgroundImage}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n </div>\n )\n})\n\nEventSchedule.displayName = 'EventSchedule'\nexport default EventSchedule\n\n// \u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\n// export type { ResponsiveBackgroundImage, StateBackgroundImage, EventScheduleItem, EventScheduleData, EventScheduleProps }\n"],
5
+ "mappings": "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",
6
+ "names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Heading", "Swiper", "SwiperSlide", "dayjs", "isInTimeRange", "startDate", "endDate", "now", "start", "end", "getItemActiveStatus", "item", "TimelineNode", "active", "className", "isStateBackgroundImage", "obj", "convertResponsiveImageToString", "backgroundImage", "mobile", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "mobileUrl", "formatBackgroundImage", "isActive", "stateImage", "EventScheduleCard", "pictureSource", "detail", "index", "EventSchedule", "classNames", "data", "ref", "itemsPerRow", "swiperBreakpoints", "showTimeline", "EventSchedule_default"]
7
7
  }
package/dist/esm/biz-components/PromotionalBar/index.d.ts CHANGED
@@ -1,18 +1,26 @@
1
1
  import * as React from 'react';
2
+ import type { Media } from '../../types/props.js';
3
+ export interface PromotionalBarSemanticName {
4
+ root: 'root';
5
+ content: 'content';
6
+ title: 'title';
7
+ description: 'description';
8
+ button: 'button';
9
+ }
2
10
  /**
3
11
  * 响应式背景图片配置
4
12
  */
5
13
  export interface ResponsiveBackgroundImage {
6
14
  /** 移动端图片 (<768px) */
7
- mobile?: string;
15
+ mobile?: Media;
8
16
  /** 平板图片 (768-1440px) */
9
- tablet?: string;
17
+ tablet?: Media;
10
18
  /** 笔记本图片 (1025-1440px) */
11
- laptop?: string;
19
+ laptop?: Media;
12
20
  /** 桌面图片 (1441-1920px) */
13
- desktop?: string;
21
+ desktop?: Media;
14
22
  /** 超大桌面图片 (≥1921px) */
15
- lgDesktop?: string;
23
+ lgDesktop?: Media;
16
24
  }
17
25
  /**
18
26
  * PromotionalBar 业务组件数据接口
@@ -26,17 +34,22 @@ export interface PromotionalBarData {
26
34
  buttonText?: string;
27
35
  /** 按钮链接 */
28
36
  buttonLink?: string;
29
- /** 背景图片 - 支持字符串或响应式图片对象 */
30
- backgroundImage?: string | ResponsiveBackgroundImage;
37
+ /** 背景图片 - 响应式图片对象 */
38
+ backgroundImage?: ResponsiveBackgroundImage;
31
39
  }
32
40
  export interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {
33
41
  /** 业务数据 */
34
42
  data: PromotionalBarData;
43
+ classNames?: {
44
+ root?: string;
45
+ content?: string;
46
+ title?: string;
47
+ description?: string;
48
+ button?: string;
49
+ };
35
50
  }
36
- /**
37
- * PromotionalBar - 推广栏
38
- *
39
- * @description 推广栏
40
- */
41
- declare const PromotionalBar: React.ForwardRefExoticComponent<PromotionalBarProps & React.RefAttributes<HTMLDivElement>>;
42
- export default PromotionalBar;
51
+ declare const _default: React.ForwardRefExoticComponent<Omit<Omit<PromotionalBarProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
52
+ className?: string | undefined;
53
+ data?: Record<string, any> | undefined;
54
+ }, "ref"> & React.RefAttributes<any>>;
55
+ export default _default;
package/dist/esm/biz-components/PromotionalBar/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as r,jsxs as c}from"react/jsx-runtime";import*as a from"react";import{cn as u}from"../../helpers/index.js";import{Heading as m,Button as f,Picture as d,Container as g}from"../../components/index.js";const x=p=>{if(!p)return;if(typeof p=="string")return p;const{mobile:t,tablet:i,laptop:n,desktop:o,lgDesktop:s}=p,e=[];return s?e.push(s):o?e.push(o):n?e.push(n):i?e.push(i):t&&e.push(t),o&&s&&e.push(`${o} 1920`),n&&(o||s)&&e.push(`${n} 1440`),i&&(n||o||s)&&e.push(`${i} 1024`),t&&(i||n||o||s)&&e.push(`${t} 768`),e.length>0?e.join(", "):void 0},l=a.forwardRef(({className:p,data:t,...i},n)=>{const{backgroundImage:o}=t,s=a.useMemo(()=>x(o),[o]);return r("div",{ref:n,className:u("w-full",p),...i,children:r(g,{className:"laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",children:c("div",{className:"promotional-bar-content rounded-box relative h-full overflow-hidden",children:[c("div",{className:"laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 relative z-20 flex h-full flex-col p-4",children:[t.contentTitle&&r(m,{className:"text-[#F5F6F7]",size:3,children:t.contentTitle}),t.contentDesc&&r("p",{className:"laptop:text-[16px] laptop:line-clamp-2 lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",children:t.contentDesc}),r("div",{className:"laptop:mt-4 mt-1",children:t.buttonText&&r(f,{as:"a",variant:"link",className:"!p-0 text-[#F5F6F7]",href:t.buttonLink,children:t.buttonText})})]}),r(d,{source:s,className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"})]})})})});l.displayName="PromotionalBar";var b=l;export{b as default};
1
+ "use client";import{jsx as s,jsxs as x}from"react/jsx-runtime";import*as f from"react";import{cn as a}from"../../helpers/index.js";import{Heading as v,Button as k,Picture as B}from"../../components/index.js";import{withLayout as M}from"../../shared/Styles.js";const T=o=>{if(!o)return;const{mobile:e,tablet:d,laptop:c,desktop:m,lgDesktop:b}=o,t=[],p=h=>h?.url,i=p(b),n=p(m),r=p(c),l=p(d),u=p(e);return i?t.push(i):n?t.push(n):r?t.push(r):l?t.push(l):u&&t.push(u),n&&i&&t.push(`${n} 1920`),r&&(n||i)&&t.push(`${r} 1440`),l&&(r||n||i)&&t.push(`${l} 1024`),u&&(l||r||n||i)&&t.push(`${u} 768`),t.length>0?t.join(", "):void 0},g=f.forwardRef(({classNames:o,data:e},d)=>{const{backgroundImage:c}=e,m=f.useMemo(()=>T(c),[c]);return s("div",{ref:d,className:a("laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",o?.root),children:x("div",{className:"promotional-bar-content rounded-box relative h-full overflow-hidden",children:[x("div",{className:a("laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 relative z-20 flex h-full flex-col p-4",o?.content),children:[e.contentTitle&&s(v,{className:a("text-[#F5F6F7]",o?.title),html:e.contentTitle,size:3}),e.contentDesc&&s("p",{className:a("laptop:text-[16px] laptop:line-clamp-2 lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",o?.description),dangerouslySetInnerHTML:{__html:e.contentDesc}}),s("div",{className:"laptop:mt-4 mt-1",children:e.buttonText&&s(k,{as:"a",variant:"link",className:a("!p-0 text-[#F5F6F7]",o?.button),href:e.buttonLink,children:e.buttonText})})]}),s(B,{source:m,className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"})]})})});g.displayName="PromotionalBar";var y=M(g);export{y as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/PromotionalBar/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/PromotionalBar/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture, Container } from '../../components/index.js'\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n mobile?: string\n /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n tablet?: string\n /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n laptop?: string\n /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n desktop?: string\n /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n lgDesktop?: string\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n contentTitle?: string\n /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n contentDesc?: string\n /** \u6309\u94AE\u6587\u672C */\n buttonText?: string\n /** \u6309\u94AE\u94FE\u63A5 */\n buttonLink?: string\n /** \u80CC\u666F\u56FE\u7247 - \u652F\u6301\u5B57\u7B26\u4E32\u6216\u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n backgroundImage?: string | ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: PromotionalBarData\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (\n backgroundImage: string | ResponsiveBackgroundImage | undefined\n): string | undefined => {\n if (!backgroundImage) return undefined\n if (typeof backgroundImage === 'string') return backgroundImage\n\n const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n const parts: string[] = []\n\n // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n if (lgDesktop) parts.push(lgDesktop)\n else if (desktop) parts.push(desktop)\n else if (laptop) parts.push(laptop)\n else if (tablet) parts.push(tablet)\n else if (mobile) parts.push(mobile)\n\n // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n if (desktop && lgDesktop) parts.push(`${desktop} 1920`)\n if (laptop && (desktop || lgDesktop)) parts.push(`${laptop} 1440`)\n if (tablet && (laptop || desktop || lgDesktop)) parts.push(`${tablet} 1024`)\n if (mobile && (tablet || laptop || desktop || lgDesktop)) parts.push(`${mobile} 768`)\n\n return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(({ className, data, ...props }, ref) => {\n const { backgroundImage } = data\n const pictureSource = React.useMemo(() => {\n return convertResponsiveImageToString(backgroundImage)\n }, [backgroundImage])\n return (\n <div ref={ref} className={cn('w-full', className)} {...props}>\n {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n <Container className=\"laptop:h-[192px] lg-desktop:h-[240px] h-[240px]\">\n <div className=\"promotional-bar-content rounded-box relative h-full overflow-hidden\">\n <div className=\"laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 relative z-20 flex h-full flex-col p-4\">\n {data.contentTitle && (\n <Heading className=\"text-[#F5F6F7]\" size={3}>\n {data.contentTitle}\n </Heading>\n )}\n {data.contentDesc && (\n <p className=\"laptop:text-[16px] laptop:line-clamp-2 lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#F5F6F7]\">\n {data.contentDesc}\n </p>\n )}\n <div className=\"laptop:mt-4 mt-1\">\n {data.buttonText && (\n <Button as=\"a\" variant=\"link\" className=\"!p-0 text-[#F5F6F7]\" href={data.buttonLink}>\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n <Picture source={pictureSource} className=\"absolute inset-0 z-10\" imgClassName=\"h-full object-cover\" />\n </div>\n </Container>\n </div>\n )\n})\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default PromotionalBar\n"],
5
- "mappings": "aAsFU,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBApFV,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,aAAAC,MAAiB,4BA0CpD,MAAMC,EACJC,GACuB,CACvB,GAAI,CAACA,EAAiB,OACtB,GAAI,OAAOA,GAAoB,SAAU,OAAOA,EAEhD,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGzB,OAAID,EAAWC,EAAM,KAAKD,CAAS,EAC1BD,EAASE,EAAM,KAAKF,CAAO,EAC3BD,EAAQG,EAAM,KAAKH,CAAM,EACzBD,EAAQI,EAAM,KAAKJ,CAAM,EACzBD,GAAQK,EAAM,KAAKL,CAAM,EAG9BG,GAAWC,GAAWC,EAAM,KAAK,GAAGF,CAAO,OAAO,EAClDD,IAAWC,GAAWC,IAAYC,EAAM,KAAK,GAAGH,CAAM,OAAO,EAC7DD,IAAWC,GAAUC,GAAWC,IAAYC,EAAM,KAAK,GAAGJ,CAAM,OAAO,EACvED,IAAWC,GAAUC,GAAUC,GAAWC,IAAYC,EAAM,KAAK,GAAGL,CAAM,MAAM,EAE7EK,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMC,EAAiBd,EAAM,WAAgD,CAAC,CAAE,UAAAe,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CACnH,KAAM,CAAE,gBAAAX,CAAgB,EAAIS,EACtBG,EAAgBnB,EAAM,QAAQ,IAC3BM,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACET,EAAC,OAAI,IAAKoB,EAAK,UAAWjB,EAAG,SAAUc,CAAS,EAAI,GAAGE,EAErD,SAAAnB,EAACO,EAAA,CAAU,UAAU,kDACnB,SAAAN,EAAC,OAAI,UAAU,sEACb,UAAAA,EAAC,OAAI,UAAU,2JACZ,UAAAiB,EAAK,cACJlB,EAACI,EAAA,CAAQ,UAAU,iBAAiB,KAAM,EACvC,SAAAc,EAAK,aACR,EAEDA,EAAK,aACJlB,EAAC,KAAE,UAAU,mHACV,SAAAkB,EAAK,YACR,EAEFlB,EAAC,OAAI,UAAU,mBACZ,SAAAkB,EAAK,YACJlB,EAACK,EAAA,CAAO,GAAG,IAAI,QAAQ,OAAO,UAAU,sBAAsB,KAAMa,EAAK,WACtE,SAAAA,EAAK,WACR,EAEJ,GACF,EACAlB,EAACM,EAAA,CAAQ,OAAQe,EAAe,UAAU,wBAAwB,aAAa,sBAAsB,GACvG,EACF,EACF,CAEJ,CAAC,EAEDL,EAAe,YAAc,iBAC7B,IAAOM,EAAQN",
6
- "names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "Container", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "PromotionalBar", "className", "data", "props", "ref", "pictureSource", "PromotionalBar_default"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture, Container } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\nexport interface PromotionalBarSemanticName {\n root: 'root'\n content: 'content'\n title: 'title'\n description: 'description'\n button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n mobile?: Media\n /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n tablet?: Media\n /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n laptop?: Media\n /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n desktop?: Media\n /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n contentTitle?: string\n /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n contentDesc?: string\n /** \u6309\u94AE\u6587\u672C */\n buttonText?: string\n /** \u6309\u94AE\u94FE\u63A5 */\n buttonLink?: string\n /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: PromotionalBarData\n classNames?: {\n root?: string\n content?: string\n title?: string\n description?: string\n button?: string\n }\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n if (!backgroundImage) return undefined\n\n const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n const parts: string[] = []\n\n // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n const getUrl = (media: Media | undefined): string | undefined => {\n return media?.url\n }\n\n // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n const lgDesktopUrl = getUrl(lgDesktop)\n const desktopUrl = getUrl(desktop)\n const laptopUrl = getUrl(laptop)\n const tabletUrl = getUrl(tablet)\n const mobileUrl = getUrl(mobile)\n\n if (lgDesktopUrl) parts.push(lgDesktopUrl)\n else if (desktopUrl) parts.push(desktopUrl)\n else if (laptopUrl) parts.push(laptopUrl)\n else if (tabletUrl) parts.push(tabletUrl)\n else if (mobileUrl) parts.push(mobileUrl)\n\n // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(({ classNames, data }, ref) => {\n const { backgroundImage } = data\n const pictureSource = React.useMemo(() => {\n return convertResponsiveImageToString(backgroundImage)\n }, [backgroundImage])\n return (\n <div ref={ref} className={cn('laptop:h-[192px] lg-desktop:h-[240px] h-[240px]', classNames?.root)}>\n {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n <div className=\"promotional-bar-content rounded-box relative h-full overflow-hidden\">\n <div\n className={cn(\n 'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 relative z-20 flex h-full flex-col p-4',\n classNames?.content\n )}\n >\n {data.contentTitle && (\n <Heading className={cn('text-[#F5F6F7]', classNames?.title)} html={data.contentTitle} size={3} />\n )}\n {data.contentDesc && (\n <p\n className={cn(\n 'laptop:text-[16px] laptop:line-clamp-2 lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#F5F6F7]',\n classNames?.description\n )}\n dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n />\n )}\n <div className=\"laptop:mt-4 mt-1\">\n {data.buttonText && (\n <Button\n as=\"a\"\n variant=\"link\"\n className={cn('!p-0 text-[#F5F6F7]', classNames?.button)}\n href={data.buttonLink}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n <Picture source={pictureSource} className=\"absolute inset-0 z-10\" imgClassName=\"h-full object-cover\" />\n </div>\n </div>\n )\n})\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
5
+ "mappings": "aA8GQ,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBA5GR,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,MAA0B,4BACpD,OAAS,cAAAC,MAAkB,yBA0D3B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBrB,EAAM,WAAgD,CAAC,CAAE,WAAAsB,EAAY,KAAAC,CAAK,EAAGC,IAAQ,CAC1G,KAAM,CAAE,gBAAAjB,CAAgB,EAAIgB,EACtBE,EAAgBzB,EAAM,QAAQ,IAC3BM,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACET,EAAC,OAAI,IAAK0B,EAAK,UAAWvB,EAAG,kDAAmDqB,GAAY,IAAI,EAE9F,SAAAvB,EAAC,OAAI,UAAU,sEACb,UAAAA,EAAC,OACC,UAAWE,EACT,2JACAqB,GAAY,OACd,EAEC,UAAAC,EAAK,cACJzB,EAACI,EAAA,CAAQ,UAAWD,EAAG,iBAAkBqB,GAAY,KAAK,EAAG,KAAMC,EAAK,aAAc,KAAM,EAAG,EAEhGA,EAAK,aACJzB,EAAC,KACC,UAAWG,EACT,mHACAqB,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,EAEFzB,EAAC,OAAI,UAAU,mBACZ,SAAAyB,EAAK,YACJzB,EAACK,EAAA,CACC,GAAG,IACH,QAAQ,OACR,UAAWF,EAAG,sBAAuBqB,GAAY,MAAM,EACvD,KAAMC,EAAK,WAEV,SAAAA,EAAK,WACR,EAEJ,GACF,EACAzB,EAACM,EAAA,CAAQ,OAAQqB,EAAe,UAAU,wBAAwB,aAAa,sBAAsB,GACvG,EACF,CAEJ,CAAC,EAEDJ,EAAe,YAAc,iBAC7B,IAAOK,EAAQrB,EAAWgB,CAAc",
6
+ "names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "withLayout", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "ref", "pictureSource", "PromotionalBar_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.17-alpha.1766575112329",
3
+ "version": "1.1.17-alpha.1766577905101",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",