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();
+    }
+  }
+});