60:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 61:T1848,"use client" import * as React from "react" import { cn } from "@/lib/utils" const MARQUEE_CSS = ` @keyframes tv-marquee-x { to { transform: translateX(-100%) } } @keyframes tv-marquee-y { to { transform: translateY(-100%) } } [data-slot="marquee"] { display:flex; overflow:hidden; container-type:inline-size; rotate:var(--marquee-rotate) } [data-slot="marquee-group"] { display:flex; flex:none; align-items:center; justify-content:space-around; gap:var(--marquee-gap); min-width:100%; padding-inline-end:var(--marquee-gap); animation:tv-marquee-x var(--marquee-duration,30s) linear infinite; animation-direction:var(--marquee-reverse) } [data-slot="marquee"][data-vertical="true"] { flex-direction:column } [data-vertical="true"] > [data-slot="marquee-group"] { flex-direction:column; min-width:0; width:100%; min-height:100%; padding-inline-end:0; padding-block-end:var(--marquee-gap); animation-name:tv-marquee-y } [data-slot="marquee"][data-fade="true"] { mask-image:linear-gradient(to right,transparent,var(--foreground) 8%,var(--foreground) 92%,transparent) } [data-slot="marquee"][data-vertical="true"][data-fade="true"] { mask-image:linear-gradient(to bottom,transparent,var(--foreground) 8%,var(--foreground) 92%,transparent) } [data-slot="marquee"]:focus-within > [data-slot="marquee-group"], [data-slot="marquee"][data-paused="true"] > [data-slot="marquee-group"], [data-slot="marquee"][data-hover="true"]:hover > [data-slot="marquee-group"] { animation-play-state:paused } @media(prefers-reduced-motion:reduce) { [data-slot="marquee"] { overflow:auto; mask-image:none!important; rotate:none } [data-slot="marquee-group"] { animation:none!important; justify-content:flex-start } [data-slot="marquee-group"][aria-hidden="true"] { display:none } }` /** 文档调整覆盖项；不提供 Provider 时沿用组件属性。 */ type MarqueeReport = { speed: number reverse: boolean gap: number rotate: number fade: boolean pauseOnHover: boolean paused: boolean } type MarqueeTuning = Partial & { /** 回报覆盖前的示例取值。 */ onReport?: (report: MarqueeReport) => void } const MarqueeTuningContext = React.createContext({}) type MarqueeDirection = "left" | "right" | "up" | "down" type MarqueeProps = React.ComponentProps<"div"> & { direction?: MarqueeDirection /** 每秒移动的像素数；脚本只测量，不驱动动画。 */ speed?: number pauseOnHover?: boolean paused?: boolean reverse?: boolean /** 总内容组数，至少 2 组。 */ repeat?: number fade?: boolean /** 项目之间的像素间距。 */ gap?: number /** 整条带子的旋转角度。 */ rotate?: number label?: string } function Marquee({ direction = "left", speed: speedProp = 48, pauseOnHover: pauseOnHoverProp = true, paused: pausedProp = false, reverse: reverseProp = false, repeat = 3, fade: fadeProp = true, gap: gapProp = 32, rotate: rotateProp = 0, label = "跑马灯", children, className, style, ...props }: MarqueeProps) { const tuning = React.useContext(MarqueeTuningContext) const { onReport } = tuning const speed = tuning.speed ?? speedProp const reverse = tuning.reverse ?? reverseProp const gap = tuning.gap ?? gapProp const rotate = tuning.rotate ?? rotateProp const fade = tuning.fade ?? fadeProp const pauseOnHover = tuning.pauseOnHover ?? pauseOnHoverProp const paused = tuning.paused ?? pausedProp React.useEffect(() => { onReport?.({ speed: speedProp, reverse: reverseProp, gap: gapProp, rotate: rotateProp, fade: fadeProp, pauseOnHover: pauseOnHoverProp, paused: pausedProp, }) }, [ onReport, speedProp, reverseProp, gapProp, rotateProp, fadeProp, pauseOnHoverProp, pausedProp, ]) const root = React.useRef(null) const group = React.useRef(null) const vertical = direction === "up" || direction === "down" const backwards = (direction === "right" || direction === "down") !== reverse const count = Math.min(20, Math.max(2, Math.floor(repeat) || 2)) React.useEffect(() => { const element = group.current const viewport = root.current if (!element || !viewport) return function measure() { if (!element || !viewport) return const distance = vertical ? element.offsetHeight : element.offsetWidth viewport.style.setProperty( "--marquee-duration", `${distance / Math.max(1, speed)}s`, ) } const observer = new ResizeObserver(measure) observer.observe(element) observer.observe(viewport) measure() return () => observer.disconnect() }, [speed, vertical]) return (

{Array.from({ length: count }, (_, index) => (

0 ? true : undefined} inert={index > 0 ? true : undefined} > {children}

))}

) } function MarqueeItem({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { MarqueeTuningContext, Marquee, MarqueeItem } export type { MarqueeTuning, MarqueeReport, MarqueeProps, MarqueeDirection } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L60",null,{"files":[{"path":"src/registry/ui/marquee/marquee.tsx","content":"$61","type":"registry:ui","target":"@ui/marquee/marquee.tsx"}],"className":"h-[70svh] min-h-80"}]]}]