lsy/echoes
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

粒子图画变自适应

Browse Source
This commit is contained in:
lsy 2024-12-06 11:51:40 +08:00
parent 9eada9af3b
commit 206f97f0c5
2 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/hooks/ParticleImage.tsx
View File

@ -207,10 +207,7 @@ const BG_CONFIG = {
via: 'rgb(8,27,57)', via: 'rgb(8,27,57)',
to: 'rgb(2,8,23)' to: 'rgb(2,8,23)'
}, },
className: 'bg-gradient-to-br from-[rgb(248,250,252)] via-[rgb(241,245,249)] to-[rgb(236,241,247)] dark:from-[rgb(10,37,77)] dark:via-[rgb(8,27,57)] dark:to-[rgb(2,8,23)]', className: 'bg-gradient-to-br from-[rgb(248,250,252)] via-[rgb(241,245,249)] to-[rgb(236,241,247)] dark:from-[rgb(10,37,77)] dark:via-[rgb(8,27,57)] dark:to-[rgb(2,8,23)]'
size: {
container: 'w-[120px] md:w-[140px] h-[120px] md:h-[140px]'
}
}; };
export const ParticleImage = ({ export const ParticleImage = ({
@ -243,7 +240,7 @@ export const ParticleImage = ({
// 更新渲染器大小 // 更新渲染器大小
rendererRef.current.setSize(width, height); rendererRef.current.setSize(width, height);
// 只有当尺寸变化超<EFBFBD><EFBFBD><EFBFBD>阈值时才重生成粒子 // 只有当尺寸变化超阈值时才重生成粒子
const currentSize = Math.min(width, height); const currentSize = Math.min(width, height);
const previousSize = sceneRef.current.userData.previousSize || currentSize; const previousSize = sceneRef.current.userData.previousSize || currentSize;
const sizeChange = Math.abs(currentSize - previousSize) / previousSize; const sizeChange = Math.abs(currentSize - previousSize) / previousSize;
@ -784,7 +781,7 @@ export const ImageLoader = ({
}, [src, preloadImage]); }, [src, preloadImage]);
return ( return (
<div className={`relative ${BG_CONFIG.size.container} shrink-0 overflow-hidden`}> <div className="relative w-full h-full overflow-hidden">
<div className={`absolute inset-0 ${BG_CONFIG.className} rounded-lg overflow-hidden`}> <div className={`absolute inset-0 ${BG_CONFIG.className} rounded-lg overflow-hidden`}>
<ParticleImage <ParticleImage
src={src} src={src}

4
frontend/themes/echoes/article.tsx
View File

@ -157,11 +157,13 @@ export default new Template({}, ({ http, args }) => {
> >
<div className="p-4 relative flex flex-col gap-4"> <div className="p-4 relative flex flex-col gap-4">
<div className="flex gap-4"> <div className="flex gap-4">
<div className="w-[120px] md:w-[140px] h-[120px] md:h-[140px]">
<ImageLoader <ImageLoader
src={article.coverImage} src={article.coverImage}
alt={article.title || ""} alt={article.title || ""}
className="group-hover:scale-105 transition-transform duration-500 relative z-[1] object-cover rounded-lg shrink-0" className="group-hover:scale-105 transition-transform duration-500 relative z-[1] object-cover rounded-lg"
/> />
</div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<Heading <Heading