collabdocchat 1.2.13 → 2.0.0

package/src/utils/responsive-handler.js

@@ -0,0 +1,491 @@
+/**
+ * 响应式处理器
+ * 处理不同设备的交互优化
+ */
+
+export class ResponsiveHandler {
+  constructor() {
+    this.isMobile = false;
+    this.isTablet = false;
+    this.isDesktop = false;
+    this.orientation = 'portrait';
+    
+    this.init();
+  }
+
+  /**
+   * 初始化
+   */
+  init() {
+    this.detectDevice();
+    this.setupEventListeners();
+    this.optimizeForDevice();
+  }
+
+  /**
+   * 检测设备类型
+   */
+  detectDevice() {
+    const width = window.innerWidth;
+    
+    this.isMobile = width < 768;
+    this.isTablet = width >= 768 && width < 1024;
+    this.isDesktop = width >= 1024;
+    this.orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+    
+    // 添加设备类到body
+    document.body.classList.remove('mobile', 'tablet', 'desktop', 'portrait', 'landscape');
+    
+    if (this.isMobile) {
+      document.body.classList.add('mobile');
+    } else if (this.isTablet) {
+      document.body.classList.add('tablet');
+    } else {
+      document.body.classList.add('desktop');
+    }
+    
+    document.body.classList.add(this.orientation);
+    
+    console.log('设备检测:', {
+      isMobile: this.isMobile,
+      isTablet: this.isTablet,
+      isDesktop: this.isDesktop,
+      orientation: this.orientation,
+      width: width
+    });
+  }
+
+  /**
+   * 设置事件监听
+   */
+  setupEventListeners() {
+    // 窗口大小改变
+    let resizeTimeout;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        this.detectDevice();
+        this.optimizeForDevice();
+      }, 250);
+    });
+
+    // 方向改变
+    window.addEventListener('orientationchange', () => {
+      setTimeout(() => {
+        this.detectDevice();
+        this.optimizeForDevice();
+      }, 100);
+    });
+
+    // 移动端菜单切换
+    if (this.isMobile) {
+      this.setupMobileMenu();
+    }
+  }
+
+  /**
+   * 根据设备优化
+   */
+  optimizeForDevice() {
+    if (this.isMobile) {
+      this.optimizeForMobile();
+    } else if (this.isTablet) {
+      this.optimizeForTablet();
+    } else {
+      this.optimizeForDesktop();
+    }
+  }
+
+  /**
+   * 移动端优化
+   */
+  optimizeForMobile() {
+    console.log('应用移动端优化');
+    
+    // 优化触摸滚动
+    this.enableSmoothScrolling();
+    
+    // 优化输入框
+    this.optimizeInputs();
+    
+    // 优化模态框
+    this.optimizeModals();
+    
+    // 添加返回顶部按钮
+    this.addBackToTopButton();
+    
+    // 优化表格显示
+    this.optimizeTables();
+  }
+
+  /**
+   * 平板优化
+   */
+  optimizeForTablet() {
+    console.log('应用平板优化');
+    
+    // 优化触摸滚动
+    this.enableSmoothScrolling();
+    
+    // 优化模态框
+    this.optimizeModals();
+  }
+
+  /**
+   * 桌面优化
+   */
+  optimizeForDesktop() {
+    console.log('应用桌面优化');
+    
+    // 移除移动端特定元素
+    const backToTop = document.getElementById('backToTopBtn');
+    if (backToTop) {
+      backToTop.remove();
+    }
+  }
+
+  /**
+   * 启用平滑滚动
+   */
+  enableSmoothScrolling() {
+    document.documentElement.style.scrollBehavior = 'smooth';
+    
+    // 为所有可滚动元素添加平滑滚动
+    const scrollableElements = document.querySelectorAll('.main-content, .messages, .nav-menu');
+    scrollableElements.forEach(el => {
+      el.style.webkitOverflowScrolling = 'touch';
+    });
+  }
+
+  /**
+   * 优化输入框
+   */
+  optimizeInputs() {
+    // 防止输入框放大
+    const inputs = document.querySelectorAll('input, textarea, select');
+    inputs.forEach(input => {
+      if (!input.style.fontSize || parseInt(input.style.fontSize) < 16) {
+        input.style.fontSize = '16px';
+      }
+    });
+  }
+
+  /**
+   * 优化模态框
+   */
+  optimizeModals() {
+    // 监听模态框打开
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.classList && node.classList.contains('modal')) {
+            this.handleModalOpen(node);
+          }
+        });
+      });
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: false
+    });
+  }
+
+  /**
+   * 处理模态框打开
+   */
+  handleModalOpen(modal) {
+    if (this.isMobile) {
+      // 禁止背景滚动
+      document.body.style.overflow = 'hidden';
+      
+      // 模态框关闭时恢复滚动
+      const closeModal = () => {
+        document.body.style.overflow = '';
+        modal.removeEventListener('click', handleClick);
+      };
+      
+      const handleClick = (e) => {
+        if (e.target === modal || e.target.classList.contains('modal-close') || e.target.classList.contains('close-btn')) {
+          closeModal();
+        }
+      };
+      
+      modal.addEventListener('click', handleClick);
+    }
+  }
+
+  /**
+   * 添加返回顶部按钮
+   */
+  addBackToTopButton() {
+    // 检查是否已存在
+    if (document.getElementById('backToTopBtn')) return;
+    
+    const button = document.createElement('button');
+    button.id = 'backToTopBtn';
+    button.innerHTML = '↑';
+    button.style.cssText = `
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      border: none;
+      font-size: 24px;
+      font-weight: bold;
+      cursor: pointer;
+      box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+    `;
+    
+    document.body.appendChild(button);
+    
+    // 滚动显示/隐藏
+    const mainContent = document.querySelector('.main-content');
+    if (mainContent) {
+      mainContent.addEventListener('scroll', () => {
+        if (mainContent.scrollTop > 300) {
+          button.style.opacity = '1';
+          button.style.visibility = 'visible';
+        } else {
+          button.style.opacity = '0';
+          button.style.visibility = 'hidden';
+        }
+      });
+    }
+    
+    // 点击返回顶部
+    button.addEventListener('click', () => {
+      if (mainContent) {
+        mainContent.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      } else {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      }
+    });
+  }
+
+  /**
+   * 优化表格显示
+   */
+  optimizeTables() {
+    // 为表格添加横向滚动容器
+    const tables = document.querySelectorAll('.audit-table, .members-table, .backups-table');
+    tables.forEach(table => {
+      if (!table.parentElement.classList.contains('table-scroll-wrapper')) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'table-scroll-wrapper';
+        wrapper.style.cssText = `
+          overflow-x: auto;
+          -webkit-overflow-scrolling: touch;
+          margin: 0 -16px;
+          padding: 0 16px;
+        `;
+        table.parentNode.insertBefore(wrapper, table);
+        wrapper.appendChild(table);
+      }
+    });
+  }
+
+  /**
+   * 设置移动端菜单
+   */
+  setupMobileMenu() {
+    // 添加菜单切换按钮（如果需要）
+    const sidebar = document.querySelector('.sidebar');
+    if (!sidebar) return;
+    
+    // 可以添加汉堡菜单按钮等
+    // 这里保持简单，使用横向滚动菜单
+  }
+
+  /**
+   * 获取设备信息
+   */
+  getDeviceInfo() {
+    return {
+      isMobile: this.isMobile,
+      isTablet: this.isTablet,
+      isDesktop: this.isDesktop,
+      orientation: this.orientation,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      userAgent: navigator.userAgent,
+      platform: navigator.platform,
+      touchSupport: 'ontouchstart' in window
+    };
+  }
+
+  /**
+   * 检测是否为触摸设备
+   */
+  isTouchDevice() {
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+  }
+
+  /**
+   * 获取视口尺寸
+   */
+  getViewportSize() {
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  }
+
+  /**
+   * 检测网络状态
+   */
+  getNetworkStatus() {
+    if ('connection' in navigator) {
+      const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+      return {
+        effectiveType: connection.effectiveType,
+        downlink: connection.downlink,
+        rtt: connection.rtt,
+        saveData: connection.saveData
+      };
+    }
+    return null;
+  }
+
+  /**
+   * 优化图片加载
+   */
+  optimizeImages() {
+    const images = document.querySelectorAll('img[data-src]');
+    
+    if ('IntersectionObserver' in window) {
+      const imageObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const img = entry.target;
+            img.src = img.dataset.src;
+            img.removeAttribute('data-src');
+            imageObserver.unobserve(img);
+          }
+        });
+      });
+      
+      images.forEach(img => imageObserver.observe(img));
+    } else {
+      // 降级方案：直接加载所有图片
+      images.forEach(img => {
+        img.src = img.dataset.src;
+        img.removeAttribute('data-src');
+      });
+    }
+  }
+
+  /**
+   * 添加触摸手势支持
+   */
+  addSwipeGesture(element, onSwipeLeft, onSwipeRight) {
+    let touchStartX = 0;
+    let touchEndX = 0;
+    
+    element.addEventListener('touchstart', (e) => {
+      touchStartX = e.changedTouches[0].screenX;
+    }, { passive: true });
+    
+    element.addEventListener('touchend', (e) => {
+      touchEndX = e.changedTouches[0].screenX;
+      this.handleSwipe(touchStartX, touchEndX, onSwipeLeft, onSwipeRight);
+    }, { passive: true });
+  }
+
+  /**
+   * 处理滑动手势
+   */
+  handleSwipe(startX, endX, onSwipeLeft, onSwipeRight) {
+    const threshold = 50; // 最小滑动距离
+    const diff = startX - endX;
+    
+    if (Math.abs(diff) > threshold) {
+      if (diff > 0 && onSwipeLeft) {
+        onSwipeLeft();
+      } else if (diff < 0 && onSwipeRight) {
+        onSwipeRight();
+      }
+    }
+  }
+
+  /**
+   * 防止双击缩放
+   */
+  preventDoubleTapZoom() {
+    let lastTouchEnd = 0;
+    document.addEventListener('touchend', (e) => {
+      const now = Date.now();
+      if (now - lastTouchEnd <= 300) {
+        e.preventDefault();
+      }
+      lastTouchEnd = now;
+    }, { passive: false });
+  }
+
+  /**
+   * 显示设备信息（调试用）
+   */
+  showDeviceInfo() {
+    const info = this.getDeviceInfo();
+    console.table(info);
+    
+    // 可选：在页面上显示
+    const infoDiv = document.createElement('div');
+    infoDiv.style.cssText = `
+      position: fixed;
+      bottom: 80px;
+      right: 20px;
+      background: rgba(0,0,0,0.8);
+      color: white;
+      padding: 10px;
+      border-radius: 8px;
+      font-size: 12px;
+      z-index: 9999;
+      max-width: 200px;
+    `;
+    infoDiv.innerHTML = `
+      <strong>设备信息</strong><br>
+      类型: ${this.isMobile ? '手机' : this.isTablet ? '平板' : '桌面'}<br>
+      方向: ${this.orientation}<br>
+      尺寸: ${info.width}x${info.height}<br>
+      触摸: ${info.touchSupport ? '是' : '否'}
+    `;
+    
+    document.body.appendChild(infoDiv);
+    
+    // 5秒后自动移除
+    setTimeout(() => infoDiv.remove(), 5000);
+  }
+}
+
+// 自动初始化
+let responsiveHandler;
+
+if (typeof window !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      responsiveHandler = new ResponsiveHandler();
+      window.responsiveHandler = responsiveHandler;
+    });
+  } else {
+    responsiveHandler = new ResponsiveHandler();
+    window.responsiveHandler = responsiveHandler;
+  }
+}
+
+export default ResponsiveHandler;
+