Initial Commit

components/interactive-feedback/interactive-feedback.js

@@ -0,0 +1,567 @@
+// 🎯 交互反馈组件逻辑
+const animationManager = require('../../utils/animation-manager.js');
+
+Component({
+  properties: {
+    // 反馈类型
+    feedbackType: {
+      type: String,
+      value: 'button' // button, card, list-item, icon, floating
+    },
+    
+    // 是否启用波纹效果
+    ripple: {
+      type: Boolean,
+      value: true
+    },
+    
+    // 波纹颜色
+    rippleColor: {
+      type: String,
+      value: 'primary' // primary, white, dark
+    },
+    
+    // 触摸反馈类型
+    touchFeedback: {
+      type: String,
+      value: 'overlay' // overlay, highlight, glow, none
+    },
+    
+    // 是否启用缩放效果
+    scaleEffect: {
+      type: Boolean,
+      value: true
+    },
+    
+    // 缩放类型
+    scaleType: {
+      type: String,
+      value: 'normal' // normal, large, none
+    },
+    
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      value: false
+    },
+    
+    // 加载状态
+    loading: {
+      type: Boolean,
+      value: false,
+      observer: 'onLoadingChange'
+    },
+    
+    // 主题
+    theme: {
+      type: String,
+      value: 'default' // default, primary, success, error, ghost, minimal
+    },
+    
+    // 特殊效果
+    effect: {
+      type: String,
+      value: 'none' // none, glass, neon, gradient, hover-lift, hover-glow
+    }
+  },
+
+  data: {
+    // 反馈状态
+    pressed: false,
+    active: false,
+    
+    // 波纹数据
+    ripples: [],
+    showRipple: false,
+    
+    // 触摸反馈
+    showTouchFeedback: false,
+    touchFeedbackClass: '',
+    touchFeedbackStyle: '',
+    
+    // 动画数据
+    animationData: null,
+    loadingAnimation: null,
+    successAnimation: null,
+    errorAnimation: null,
+    
+    // 样式
+    feedbackStyle: '',
+    feedbackClass: '',
+    
+    // 状态反馈
+    showSuccess: false,
+    showError: false,
+    
+    // 定时器
+    rippleTimer: null,
+    feedbackTimer: null
+  },
+
+  lifetimes: {
+    attached() {
+      console.log('🎯 交互反馈组件加载');
+      this.initComponent();
+    },
+    
+    detached() {
+      console.log('🎯 交互反馈组件卸载');
+      this.cleanup();
+    }
+  },
+
+  methods: {
+    // 初始化组件
+    initComponent() {
+      this.updateFeedbackClass();
+      this.updateTouchFeedbackClass();
+      this.createLoadingAnimation();
+    },
+
+    // 加载状态变化处理
+    onLoadingChange(loading) {
+      if (loading) {
+        this.startLoadingAnimation();
+      } else {
+        this.stopLoadingAnimation();
+      }
+    },
+
+    // 🎯 ===== 触摸事件处理 =====
+
+    // 触摸开始
+    onTouchStart(e) {
+      if (this.properties.disabled || this.properties.loading) {
+        return;
+      }
+      
+      console.log('🎯 触摸开始');
+      
+      this.setData({
+        pressed: true
+      });
+      
+      // 显示触摸反馈
+      this.showTouchFeedbackEffect();
+      
+      // 创建波纹效果
+      if (this.properties.ripple) {
+        this.createRipple(e);
+      }
+      
+      // 缩放效果
+      if (this.properties.scaleEffect) {
+        this.applyScaleEffect(true);
+      }
+      
+      this.triggerEvent('touchstart', e);
+    },
+
+    // 触摸结束
+    onTouchEnd(e) {
+      if (this.properties.disabled || this.properties.loading) {
+        return;
+      }
+      
+      console.log('🎯 触摸结束');
+      
+      this.setData({
+        pressed: false
+      });
+      
+      // 隐藏触摸反馈
+      this.hideTouchFeedbackEffect();
+      
+      // 恢复缩放
+      if (this.properties.scaleEffect) {
+        this.applyScaleEffect(false);
+      }
+      
+      this.triggerEvent('touchend', e);
+    },
+
+    // 触摸取消
+    onTouchCancel(e) {
+      if (this.properties.disabled || this.properties.loading) {
+        return;
+      }
+      
+      console.log('🎯 触摸取消');
+      
+      this.setData({
+        pressed: false
+      });
+      
+      // 隐藏触摸反馈
+      this.hideTouchFeedbackEffect();
+      
+      // 恢复缩放
+      if (this.properties.scaleEffect) {
+        this.applyScaleEffect(false);
+      }
+      
+      this.triggerEvent('touchcancel', e);
+    },
+
+    // 点击事件
+    onTap(e) {
+      if (this.properties.disabled || this.properties.loading) {
+        return;
+      }
+      
+      console.log('🎯 点击事件');
+      
+      // 按钮点击动画
+      this.playButtonPressAnimation();
+      
+      this.triggerEvent('tap', e);
+    },
+
+    // 长按事件
+    onLongPress(e) {
+      if (this.properties.disabled || this.properties.loading) {
+        return;
+      }
+      
+      console.log('🎯 长按事件');
+      
+      // 长按反馈
+      this.playLongPressFeedback();
+      
+      this.triggerEvent('longpress', e);
+    },
+
+    // 🌊 ===== 波纹效果 =====
+
+    // 创建波纹
+    createRipple(e) {
+      const touch = e.touches[0];
+      if (!touch) return;
+      
+      // 获取组件位置信息
+      this.createSelectorQuery()
+        .select('.interactive-feedback-container')
+        .boundingClientRect((rect) => {
+          if (!rect) return;
+          
+          // 计算波纹位置
+          const x = touch.clientX - rect.left;
+          const y = touch.clientY - rect.top;
+          
+          // 计算波纹大小
+          const size = Math.max(rect.width, rect.height) * 2;
+          
+          // 创建波纹数据
+          const ripple = {
+            id: this.generateRippleId(),
+            class: `${this.properties.rippleColor} animate`,
+            style: `
+              left: ${x - size / 2}px;
+              top: ${y - size / 2}px;
+              width: ${size}px;
+              height: ${size}px;
+            `,
+            animation: null
+          };
+          
+          // 添加波纹
+          const ripples = [...this.data.ripples, ripple];
+          this.setData({
+            ripples: ripples,
+            showRipple: true
+          });
+          
+          // 清理波纹
+          this.rippleTimer = setTimeout(() => {
+            this.removeRipple(ripple.id);
+          }, 600);
+          
+        })
+        .exec();
+    },
+
+    // 移除波纹
+    removeRipple(rippleId) {
+      const ripples = this.data.ripples.filter(ripple => ripple.id !== rippleId);
+      this.setData({
+        ripples: ripples,
+        showRipple: ripples.length > 0
+      });
+    },
+
+    // 清理所有波纹
+    clearRipples() {
+      this.setData({
+        ripples: [],
+        showRipple: false
+      });
+    },
+
+    // 📱 ===== 触摸反馈 =====
+
+    // 显示触摸反馈
+    showTouchFeedbackEffect() {
+      if (this.properties.touchFeedback === 'none') return;
+      
+      this.setData({
+        showTouchFeedback: true,
+        touchFeedbackClass: `${this.properties.touchFeedback} active`
+      });
+    },
+
+    // 隐藏触摸反馈
+    hideTouchFeedbackEffect() {
+      this.setData({
+        showTouchFeedback: false,
+        touchFeedbackClass: this.properties.touchFeedback
+      });
+    },
+
+    // 🎭 ===== 动画效果 =====
+
+    // 应用缩放效果
+    applyScaleEffect(pressed) {
+      if (!this.properties.scaleEffect) return;
+      
+      let scale = 1;
+      if (pressed) {
+        switch (this.properties.scaleType) {
+          case 'large':
+            scale = 1.02;
+            break;
+          case 'none':
+            scale = 1;
+            break;
+          case 'normal':
+          default:
+            scale = 0.98;
+            break;
+        }
+      }
+      
+      const animation = animationManager.scale(scale, {
+        duration: 150,
+        timingFunction: 'ease-out'
+      });
+      
+      this.setData({
+        animationData: animation.export()
+      });
+    },
+
+    // 播放按钮点击动画
+    playButtonPressAnimation() {
+      const animation = animationManager.buttonPress({
+        duration: 200
+      });
+      
+      this.setData({
+        animationData: animation.export()
+      });
+    },
+
+    // 播放长按反馈
+    playLongPressFeedback() {
+      const animation = animationManager.pulse({
+        duration: 300
+      });
+      
+      this.setData({
+        animationData: animation.export()
+      });
+    },
+
+    // 🔄 ===== 加载动画 =====
+
+    // 创建加载动画
+    createLoadingAnimation() {
+      const loadingAnimation = animationManager.loadingSpinner({
+        duration: 1000
+      });
+      
+      this.setData({
+        loadingAnimation: loadingAnimation.export()
+      });
+    },
+
+    // 开始加载动画
+    startLoadingAnimation() {
+      this.loadingTimer = setInterval(() => {
+        const loadingAnimation = animationManager.loadingSpinner({
+          duration: 1000
+        });
+        
+        this.setData({
+          loadingAnimation: loadingAnimation.export()
+        });
+      }, 1000);
+    },
+
+    // 停止加载动画
+    stopLoadingAnimation() {
+      if (this.loadingTimer) {
+        clearInterval(this.loadingTimer);
+        this.loadingTimer = null;
+      }
+    },
+
+    // ✅ ===== 状态反馈 =====
+
+    // 显示成功反馈
+    showSuccessFeedback(duration = 1500) {
+      console.log('✅ 显示成功反馈');
+      
+      this.setData({
+        showSuccess: true
+      });
+      
+      const successAnimation = animationManager.bounceIn({
+        duration: 500
+      });
+      
+      this.setData({
+        successAnimation: successAnimation.export()
+      });
+      
+      // 自动隐藏
+      setTimeout(() => {
+        this.hideSuccessFeedback();
+      }, duration);
+    },
+
+    // 隐藏成功反馈
+    hideSuccessFeedback() {
+      this.setData({
+        showSuccess: false
+      });
+    },
+
+    // 显示错误反馈
+    showErrorFeedback(duration = 1500) {
+      console.log('❌ 显示错误反馈');
+      
+      this.setData({
+        showError: true
+      });
+      
+      const errorAnimation = animationManager.shake({
+        duration: 500
+      });
+      
+      this.setData({
+        errorAnimation: errorAnimation.export()
+      });
+      
+      // 自动隐藏
+      setTimeout(() => {
+        this.hideErrorFeedback();
+      }, duration);
+    },
+
+    // 隐藏错误反馈
+    hideErrorFeedback() {
+      this.setData({
+        showError: false
+      });
+    },
+
+    // 🎨 ===== 样式管理 =====
+
+    // 更新反馈类
+    updateFeedbackClass() {
+      let feedbackClass = this.properties.feedbackType;
+      
+      if (this.properties.theme !== 'default') {
+        feedbackClass += ` theme-${this.properties.theme}`;
+      }
+      
+      if (this.properties.effect !== 'none') {
+        feedbackClass += ` ${this.properties.effect}`;
+      }
+      
+      if (this.properties.disabled) {
+        feedbackClass += ' disabled';
+      }
+      
+      if (this.properties.loading) {
+        feedbackClass += ' loading';
+      }
+      
+      if (this.data.pressed) {
+        feedbackClass += ' pressed';
+      }
+      
+      if (this.data.active) {
+        feedbackClass += ' active';
+      }
+      
+      this.setData({
+        feedbackClass: feedbackClass
+      });
+    },
+
+    // 更新触摸反馈类
+    updateTouchFeedbackClass() {
+      this.setData({
+        touchFeedbackClass: this.properties.touchFeedback
+      });
+    },
+
+    // 🔧 ===== 工具方法 =====
+
+    // 生成波纹ID
+    generateRippleId() {
+      return `ripple_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    },
+
+    // 设置激活状态
+    setActive(active) {
+      this.setData({
+        active: active
+      });
+      this.updateFeedbackClass();
+    },
+
+    // 触发成功状态
+    triggerSuccess() {
+      this.showSuccessFeedback();
+      this.triggerEvent('success');
+    },
+
+    // 触发错误状态
+    triggerError() {
+      this.showErrorFeedback();
+      this.triggerEvent('error');
+    },
+
+    // 重置状态
+    reset() {
+      this.setData({
+        pressed: false,
+        active: false,
+        showSuccess: false,
+        showError: false
+      });
+      
+      this.clearRipples();
+      this.hideTouchFeedbackEffect();
+      this.updateFeedbackClass();
+    },
+
+    // 清理资源
+    cleanup() {
+      if (this.rippleTimer) {
+        clearTimeout(this.rippleTimer);
+        this.rippleTimer = null;
+      }
+      
+      if (this.feedbackTimer) {
+        clearTimeout(this.feedbackTimer);
+        this.feedbackTimer = null;
+      }
+      
+      this.stopLoadingAnimation();
+      this.clearRipples();
+    }
+  }
+});

components/interactive-feedback/interactive-feedback.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/interactive-feedback/interactive-feedback.wxml

@@ -0,0 +1,44 @@
+<!-- 🎯 交互反馈组件 -->
+<view class="interactive-feedback-container {{feedbackClass}}" 
+      style="{{feedbackStyle}}"
+      animation="{{animationData}}"
+      bindtouchstart="onTouchStart"
+      bindtouchend="onTouchEnd"
+      bindtouchcancel="onTouchCancel"
+      bindtap="onTap"
+      bindlongpress="onLongPress">
+  
+  <!-- 内容插槽 -->
+  <slot></slot>
+  
+  <!-- 波纹效果 -->
+  <view wx:if="{{showRipple}}" class="ripple-container">
+    <view wx:for="{{ripples}}" 
+          wx:key="id" 
+          class="ripple {{item.class}}"
+          style="{{item.style}}"
+          animation="{{item.animation}}">
+    </view>
+  </view>
+  
+  <!-- 触摸反馈 -->
+  <view wx:if="{{showTouchFeedback}}" 
+        class="touch-feedback {{touchFeedbackClass}}"
+        style="{{touchFeedbackStyle}}">
+  </view>
+  
+  <!-- 加载状态 -->
+  <view wx:if="{{loading}}" class="loading-overlay">
+    <view class="loading-spinner" animation="{{loadingAnimation}}"></view>
+  </view>
+  
+  <!-- 成功反馈 -->
+  <view wx:if="{{showSuccess}}" class="success-feedback" animation="{{successAnimation}}">
+    <text class="success-icon">✓</text>
+  </view>
+  
+  <!-- 错误反馈 -->
+  <view wx:if="{{showError}}" class="error-feedback" animation="{{errorAnimation}}">
+    <text class="error-icon">✕</text>
+  </view>
+</view>

components/interactive-feedback/interactive-feedback.wxss

@@ -0,0 +1,446 @@
+/* 🎯 交互反馈组件样式 */
+
+/* CSS变量定义 */
+.interactive-feedback-container {
+  --primary-color: #007AFF;
+  --primary-light: #5AC8FA;
+  --success-color: #34C759;
+  --error-color: #FF3B30;
+  --background-color: #F2F2F7;
+  --surface-color: #FFFFFF;
+  --text-primary: #000000;
+  --text-secondary: #8E8E93;
+  --border-color: #E5E5EA;
+  --shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  --radius-medium: 12rpx;
+}
+
+/* 🌙 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .interactive-feedback-container {
+    --primary-color: #0A84FF;
+    --background-color: #000000;
+    --surface-color: #1C1C1E;
+    --text-primary: #FFFFFF;
+    --text-secondary: #8E8E93;
+    --border-color: #38383A;
+    --shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+  }
+}
+
+.interactive-feedback-container {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 🎨 反馈类型样式 */
+.interactive-feedback-container.button {
+  border-radius: var(--radius-medium);
+  background: var(--surface-color);
+  border: 1rpx solid var(--border-color);
+  box-shadow: var(--shadow-light);
+}
+
+.interactive-feedback-container.card {
+  border-radius: var(--radius-medium);
+  background: var(--surface-color);
+  box-shadow: var(--shadow-light);
+}
+
+.interactive-feedback-container.list-item {
+  background: var(--surface-color);
+  border-bottom: 1rpx solid var(--border-color);
+}
+
+.interactive-feedback-container.icon {
+  border-radius: 50%;
+  background: var(--background-color);
+}
+
+.interactive-feedback-container.floating {
+  border-radius: 50%;
+  background: var(--primary-color);
+  box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
+}
+
+/* 🎭 状态样式 */
+.interactive-feedback-container.pressed {
+  transform: scale(0.98);
+}
+
+.interactive-feedback-container.active {
+  background: var(--primary-color);
+  color: white;
+}
+
+.interactive-feedback-container.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.interactive-feedback-container.loading {
+  pointer-events: none;
+}
+
+.interactive-feedback-container.success {
+  background: var(--success-color);
+  color: white;
+}
+
+.interactive-feedback-container.error {
+  background: var(--error-color);
+  color: white;
+}
+
+/* 🌊 波纹效果 */
+.ripple-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  transform: scale(0);
+  opacity: 0.3;
+}
+
+.ripple.primary {
+  background: var(--primary-color);
+}
+
+.ripple.white {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.ripple.dark {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/* 📱 触摸反馈 */
+.touch-feedback {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.touch-feedback.overlay {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.touch-feedback.highlight {
+  background: rgba(0, 122, 255, 0.1);
+}
+
+.touch-feedback.glow {
+  box-shadow: 0 0 20rpx rgba(0, 122, 255, 0.5);
+}
+
+.touch-feedback.active {
+  opacity: 1;
+}
+
+/* 🔄 加载状态 */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: inherit;
+}
+
+.loading-spinner {
+  width: 40rpx;
+  height: 40rpx;
+  border: 3rpx solid rgba(0, 122, 255, 0.2);
+  border-top: 3rpx solid var(--primary-color);
+  border-radius: 50%;
+}
+
+/* ✅ 成功反馈 */
+.success-feedback {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background: var(--success-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0);
+}
+
+.success-icon {
+  font-size: 40rpx;
+  color: white;
+  font-weight: bold;
+}
+
+/* ❌ 错误反馈 */
+.error-feedback {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background: var(--error-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0);
+}
+
+.error-icon {
+  font-size: 40rpx;
+  color: white;
+  font-weight: bold;
+}
+
+/* 🎪 动画效果 */
+@keyframes rippleExpand {
+  from {
+    transform: scale(0);
+    opacity: 0.3;
+  }
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes successPop {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.2);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes errorShake {
+  0%, 100% {
+    transform: translate(-50%, -50%) translateX(0);
+  }
+  25% {
+    transform: translate(-50%, -50%) translateX(-10rpx);
+  }
+  75% {
+    transform: translate(-50%, -50%) translateX(10rpx);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+@keyframes bounce {
+  0%, 20%, 53%, 80%, 100% {
+    transform: scale(1);
+  }
+  40%, 43% {
+    transform: scale(1.1);
+  }
+  70% {
+    transform: scale(1.05);
+  }
+  90% {
+    transform: scale(1.02);
+  }
+}
+
+/* 🎭 动画类应用 */
+.ripple.animate {
+  animation: rippleExpand 0.6s ease-out;
+}
+
+.loading-spinner {
+  animation: spin 1s linear infinite;
+}
+
+.success-feedback.animate {
+  animation: successPop 0.5s ease-out;
+}
+
+.error-feedback.animate {
+  animation: errorShake 0.5s ease-out;
+}
+
+.interactive-feedback-container.pulse {
+  animation: pulse 1s ease-in-out infinite;
+}
+
+.interactive-feedback-container.bounce {
+  animation: bounce 1s ease-in-out;
+}
+
+/* 🎨 特殊效果 */
+.interactive-feedback-container.glass {
+  backdrop-filter: blur(20rpx);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1rpx solid rgba(255, 255, 255, 0.2);
+}
+
+.interactive-feedback-container.neon {
+  box-shadow: 
+    0 0 10rpx var(--primary-color),
+    0 0 20rpx var(--primary-color),
+    0 0 40rpx var(--primary-color);
+}
+
+.interactive-feedback-container.gradient {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+}
+
+/* 📱 响应式设计 */
+@media screen and (max-width: 375px) {
+  .success-feedback,
+  .error-feedback {
+    width: 60rpx;
+    height: 60rpx;
+  }
+  
+  .success-icon,
+  .error-icon {
+    font-size: 30rpx;
+  }
+  
+  .loading-spinner {
+    width: 30rpx;
+    height: 30rpx;
+    border-width: 2rpx;
+  }
+}
+
+@media screen and (min-width: 414px) {
+  .success-feedback,
+  .error-feedback {
+    width: 100rpx;
+    height: 100rpx;
+  }
+  
+  .success-icon,
+  .error-icon {
+    font-size: 50rpx;
+  }
+  
+  .loading-spinner {
+    width: 50rpx;
+    height: 50rpx;
+    border-width: 4rpx;
+  }
+}
+
+/* 🎯 交互状态 */
+.interactive-feedback-container:active {
+  transform: scale(0.98);
+}
+
+.interactive-feedback-container.no-scale:active {
+  transform: none;
+}
+
+.interactive-feedback-container.scale-large:active {
+  transform: scale(1.02);
+}
+
+/* 🔧 性能优化 */
+.interactive-feedback-container {
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.ripple {
+  will-change: transform, opacity;
+}
+
+/* 🎪 组合效果 */
+.interactive-feedback-container.hover-lift {
+  transition: all 0.3s ease;
+}
+
+.interactive-feedback-container.hover-lift:hover {
+  transform: translateY(-4rpx);
+  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
+}
+
+.interactive-feedback-container.hover-glow:hover {
+  box-shadow: 0 0 30rpx rgba(0, 122, 255, 0.4);
+}
+
+/* 🎭 主题变体 */
+.interactive-feedback-container.theme-primary {
+  background: var(--primary-color);
+  color: white;
+}
+
+.interactive-feedback-container.theme-success {
+  background: var(--success-color);
+  color: white;
+}
+
+.interactive-feedback-container.theme-error {
+  background: var(--error-color);
+  color: white;
+}
+
+.interactive-feedback-container.theme-ghost {
+  background: transparent;
+  border: 2rpx solid var(--primary-color);
+  color: var(--primary-color);
+}
+
+.interactive-feedback-container.theme-minimal {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}