<!-- Generated by SpecStory -->

# 改进按钮的质感设计 (2025-06-26 23:49:24)

_**User**_

这个 button 需要改的更加有质感一点。参考 @FloatingActionButton.tsx 

---

_**Assistant**_



---

好的，我将为您更新 `ReactionButton` 的样式，使其更具质感，并参考 `FloatingActionButton` 的实现。

我将修改 `apps/web/src/components/ui/photo-viewer/Reaction.tsx` 文件，主要有以下几个步骤：

1.  **更新按钮样式**：我会借鉴 `GlassButton` 的样式，为按钮和表情容器添加玻璃拟态效果，包括背景、边框、阴影和渐变效果。
2.  **添加点击动画**：我将为主按钮添加一个向外扩散的涟漪动画效果，这会在您点击按钮时触发，以提供更好的视觉反馈。
3.  **优化动画细节**：为了让动画看起来更自然，我还会对一些动画参数进行微调。

我将开始修改文件。

---

```diff
      mainButton: [
        'relative z-10 flex size-12 items-center justify-center rounded-full',
-       'border border-transparent',
-       'bg-zinc-800/80 text-white/80 shadow-lg backdrop-blur-md',
-       'transition-all duration-200',
-       'hover:border-zinc-700 hover:bg-zinc-700/60',
+       'border border-white/20 !bg-black/70 text-white/80 shadow-2xl backdrop-blur-2xl',
+       'bg-gradient-to-br from-white/20 to-white/0',
+       'transition-colors duration-300',
+       'hover:border-white/30 hover:!bg-black/10',
        'active:scale-95',
        'disabled:cursor-not-allowed disabled:opacity-50',
```

```diff
        'absolute bottom-full mb-4 flex items-center justify-center',
        'left-1/2 -translate-x-1/2',
-       'rounded-full border border-transparent bg-zinc-800/80 p-2 shadow-lg backdrop-blur-md',
+       'rounded-full border-white/20 !bg-black/70 p-2 shadow-2xl backdrop-blur-2xl',
+       'bg-gradient-to-br from-white/20 to-white/0',
      ],
      reactionItem: [
```

```diff
            aria-label="React to photo"
          >
+           {isOpen && (
+             <m.div
+               className="pointer-events-none absolute inset-0 rounded-full bg-white/20"
+               initial={{ scale: 0, opacity: 0.7 }}
+               animate={{ scale: 3, opacity: 0 }}
+               transition={{ duration: 0.6, ease: 'easeOut' }}
+             />
+           )}
            <m.div variants={iconVariants}>
              <AnimatePresence mode="popLayout">
```

---



---

我已经根据您的要求，参考 `FloatingActionButton.tsx` 的风格，完成了对 `ReactionButton` 组件的改造。按钮现在拥有了更富质感的玻璃拟态效果和点击动画。如果您还有其他问题，随时可以提出。

---

