fix: 修复 heo 主题交流频道翻转卡片悬停状态异常

[88lin]

Removed state and function.isFlippedhandleCardFlip Added div to encapsulate front and back.flip-card-inner Updated CSS for smoother transitions and added .perspective Modified hover effects for better interaction.

已知问题

1. heo 主题交流频道卡片翻转交互不稳定

   • 鼠标移入移出卡片时，存在连续翻转或状态残留的问题
   • 使用新标签页跳转后返回原页面，卡片有概率仍保持翻转状态

2. 翻转卡片的交互实现存在事件抖动风险

   • 早期实现依赖前后卡片面的事件切换，容易受 hover 边界和焦点状态影响
   • 卡片正反面切换时，事件触发不稳定，导致体验不够顺滑

解决方案

1. 重构 FlipCard 的翻转交互实现

   • 将原本依赖事件切换和状态翻转的实现，改为基于 CSS :hover 的稳定翻转方式
   • 引入 flip-card-inner 结构，由内层统一处理 3D 翻转动画
   • 增加 perspective 和更平滑的过渡曲线，优化翻转观感

2. 修复导航返回后卡片仍保持翻转的问题

   • 移除 :focus-within 对翻转状态的影响
   • 让卡片翻转仅由真实 hover 状态控制
   • 避免点击背面链接后因焦点残留导致返回页面时仍保持翻转

3. 优化正反面的事件命中逻辑

   • 通过 pointer-events 控制正反面的交互区域
   • 避免翻转过程中正反面同时抢占鼠标事件，减少连续翻转抖动

改动收益

1. 翻转卡片交互更稳定

   • 鼠标移入移出时不再容易出现多次连续翻转
   • 卡片不会轻易卡在错误的翻转状态

2. 跳转返回场景体验更自然

   • 点击卡片跳转后返回页面，不会再因为焦点残留导致卡片保持翻转
   • 交互行为更符合桌面端用户预期

3. 代码逻辑更简单可靠

   • 去掉了不必要的状态切换逻辑
   • 降低了事件顺序、焦点状态和层级切换带来的副作用

具体改动

1. components/FlipCard.js
   • 移除原有基于 React 状态和鼠标事件切换的翻转逻辑
   • 重构为 flip-card + flip-card-inner 的 3D 翻转结构
   • 使用 CSS :hover 控制翻转状态
   • 增加 perspective、优化动画时长与缓动曲线
   • 使用 pointer-events 分离正反面的交互命中区域
   • 移除 :focus-within，修复跳转返回后卡片仍保持翻转的问题

测试确认

• 本地开发环境测试通过
• 生产环境构建测试通过
• 版本号正确显示
• 环境变量配置正常工作

[vercel]

@88lin is attempting to deploy a commit to the tangly1024's projects Team on Vercel.

A member of the Team first needs to authorize it.