style(组件): 优化搜索图片网格卡片样式

- 调整圆角为更精致的 rounded 样式
- 更新背景色支持亮色/暗色主题
- 使用 ring 替代 border 实现更细腻的边框效果
- 添加精细的阴影层次感
- 优化 hover 状态的阴影过渡效果
This commit is contained in:
gaoziman 2025-12-22 14:34:07 +08:00
parent cb05f06483
commit 92ec88e1a3

View File

@ -136,11 +136,12 @@ export function SearchImagesGrid({
key={`${image.imageUrl}-${originalIndex}`}
className={cn(
'break-inside-avoid mb-3 group relative',
'rounded-lg overflow-hidden',
'bg-muted/30 dark:bg-muted/20',
'border border-border/50',
'rounded overflow-hidden',
'bg-white dark:bg-zinc-900',
'ring-1 ring-black/5 dark:ring-white/10',
'shadow-[0_2px_8px_rgba(0,0,0,0.06)]',
'transition-all duration-200',
'hover:shadow-lg hover:border-primary/30',
'hover:shadow-[0_6px_20px_rgba(0,0,0,0.1)]',
!isLoaded && 'animate-pulse'
)}
>