SoundPeak Pro 耳机产品系统

立项原因：传统3C电商页面偏重参数罗列，缺乏场景化展示和沉浸式购物体验。本项目通过视觉设计和交互功能，让用户在浏览过程中直观感受产品卖点，降低购买决策门槛。
行业场景：无线耳机品类同质化严重，品牌需要通过高品质产品页面建立差异化形象，配合限时优惠和颜色选择功能提升转化率，适用于数码产品、消费电子等电商领域。

功能模块包括：品牌导航栏（亮点/规格/评价锚点导航 + 购物车加减按钮 + 数量角标动画 +加入购物车提示）、618促销通知条、产品首屏（左右分栏布局，左侧展示产品名、卖点列表、价格、购买按钮，右侧CSS耳机图形随配 色切换动态变化）、颜色选择器（星空黑/云雾白/暮光蓝三色切换，选中态高亮+耳机图联动）、产品亮点（Tab切换式功能展示，点击标签右侧实时更新详细描述）、配色规格区（三款配色卡片+详细参数表）、用户评价（头像 + 星级 + 已购验证标签）、品牌页脚。
主要功能：为数码产品品牌打造沉浸式电商落地页，用户可切 换三款配色并在右侧实时预览耳机外观变化，通过Tab交互深入了解产品亮点，支持购物车加减数量和立即购买弹窗下单。页面适配手机端，视觉融合深色科技感渐变与CSS绘制产品图形，兼顾品牌调性与购买转化。

我负责页面整体架构设计、组件开发、样式编写与交互逻辑实现。项目基于 React + Vite 技术栈，采用函数组件 +Hooks（useState/useEffect）进行状态管理，CSS Grid/Flexbox实现响应式布局。实现要点：将产品数据（配色、功能点、评价）抽取为数据数组，通过 map循环渲染实现数据驱动视图，便于后续维护和内容替换。
难点：CSS 耳机图形需要纯代码绘制，使用 border/box-shadow等属性模拟耳罩、头梁结构并叠加脉冲光晕动画；颜色切换需同时联动产品展示区背景渐变和耳机图，通过 useState管理选中态实现多组件同步更新。购物车加减操作需处理边界条件（数量不能为负），并使用 useEffect监听数量变化触发"已加入购物车"提示的定时消失动画。