opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-09-08 02:43:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: title only show after scroll

Browse Source
This commit is contained in:
Stephen Zhou 2026-02-12 17:44:40 +08:00
parent ad1ebd9bbc
commit 27933ed4ae
No known key found for this signature in database
1 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/app/components/plugins/marketplace/description/index.tsx
View File

@ -36,13 +36,13 @@ export const Description = ({
const heroSubtitleKey = isTemplatesView ? 'marketplace.templatesHeroSubtitle' : 'marketplace.pluginsHeroSubtitle' const heroSubtitleKey = isTemplatesView ? 'marketplace.templatesHeroSubtitle' : 'marketplace.pluginsHeroSubtitle'
const rafRef = useRef<number | null>(null) const rafRef = useRef<number | null>(null)
const lastProgressRef = useRef(0) const lastProgressRef = useRef(0)
const titleRef = useRef<HTMLDivElement | null>(null) const titleContentRef = useRef<HTMLDivElement | null>(null)
const progress = useMotionValue(0) const progress = useMotionValue(0)
const titleHeight = useMotionValue(0) const titleHeight = useMotionValue(72)
const smoothProgress = useSpring(progress, { stiffness: 260, damping: 34 }) const smoothProgress = useSpring(progress, { stiffness: 260, damping: 34 })
useLayoutEffect(() => { useLayoutEffect(() => {
const node = titleRef.current const node = titleContentRef.current
if (!node) if (!node)
return return
@ -99,7 +99,7 @@ export const Description = ({
if (rafRef.current) if (rafRef.current)
cancelAnimationFrame(rafRef.current) cancelAnimationFrame(rafRef.current)
} }
}, [smoothProgress, scrollContainerId]) }, [progress, scrollContainerId])
// Calculate interpolated values // Calculate interpolated values
const contentOpacity = useTransform(smoothProgress, [0, 1], [1, 0]) const contentOpacity = useTransform(smoothProgress, [0, 1], [1, 0])
@ -149,7 +149,6 @@ export const Description = ({
<div className="relative z-10"> <div className="relative z-10">
{/* Title and subtitle - fade out and scale down */} {/* Title and subtitle - fade out and scale down */}
<motion.div <motion.div
ref={titleRef}
style={{ style={{
opacity: contentOpacity, opacity: contentOpacity,
scale: contentScale, scale: contentScale,
@ -160,12 +159,14 @@ export const Description = ({
marginTop: titleMarginTop, marginTop: titleMarginTop,
}} }}
> >
<h1 className="title-4xl-semi-bold mb-2 shrink-0 text-text-primary-on-surface"> <div ref={titleContentRef}>
{t(heroTitleKey)} <h1 className="title-4xl-semi-bold mb-2 shrink-0 text-text-primary-on-surface">
</h1> {t(heroTitleKey)}
<h2 className="body-md-regular shrink-0 text-text-secondary-on-surface"> </h1>
{t(heroSubtitleKey)} <h2 className="body-md-regular shrink-0 text-text-secondary-on-surface">
</h2> {t(heroSubtitleKey)}
</h2>
</div>
</motion.div> </motion.div>
{/* Category switch tabs - Plugin or Template based on creationType */} {/* Category switch tabs - Plugin or Template based on creationType */}