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)',
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]'
}
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)]'
};
export const ParticleImage = ({
@ -243,7 +240,7 @@ export const ParticleImage = ({
// 更新渲染器大小
rendererRef.current.setSize(width, height);
// 只有当尺寸变化超<EFBFBD><EFBFBD><EFBFBD>阈值时才重生成粒子
// 只有当尺寸变化超阈值时才重生成粒子
const currentSize = Math.min(width, height);
const previousSize = sceneRef.current.userData.previousSize || currentSize;
const sizeChange = Math.abs(currentSize - previousSize) / previousSize;
@ -784,7 +781,7 @@ export const ImageLoader = ({
}, [src, preloadImage]);
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`}>
<ParticleImage
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="flex gap-4">
<div className="w-[120px] md:w-[140px] h-[120px] md:h-[140px]">
<ImageLoader
src={article.coverImage}
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">
<Heading