开山网商品详情页前端性能优化实战

    <div className="modal-body">
      <div className="inquiry-product">
        <img src={product.mainImage} alt={product.name} />
        <div className="product-info">
          <h4>{product.name}</h4>
          <p>货号: {product.sku}</p>
        </div>
      </div>

      <div className="inquiry-details">
        <div className="detail-row">
          <span>选择尺码:</span>
          <span>{selectedData.selectedSizes.size} 种</span>
        </div>
        <div className="detail-row">
          <span>采购数量:</span>
          <span>{selectedData.totalQuantity} 双</span>
        </div>
        <div className="detail-row">
          <span>预估金额:</span>
          <span className="highlight">¥{selectedData.estimatedTotal.toFixed(2)}</span>
        </div>
        {selectedData.notes && (
          <div className="detail-row notes">
            <span>备注:</span>
            <span>{selectedData.notes}</span>
          </div>
        )}
      </div>

      <div className="inquiry-notice">
        <p>📞 询价提交后，供应商将在24小时内回复报价</p>
        <p>💰 批量采购可享受阶梯批发价优惠</p>
      </div>
    </div>

    <div className="modal-footer">
      <button className="cancel-btn" onClick={onCancel} disabled={isProcessing}>
        取消
      </button>
      <button className="confirm-btn" onClick={onConfirm} disabled={isProcessing}>
        {isProcessing ? '提交中...' : '确认询价'}
      </button>
    </div>
  </div>
</div>

);
});

// 辅助函数
function getInventoryStatus(inventory: number): InventoryStatus {
if (inventory === 0) return { text: '缺货', color: '#ef4444', bgColor: '#fef2f2', disabled: true };
if (inventory <= 10) return { text: '紧张', color: '#f97316', bgColor: '#fff7ed', disabled: false };
if (inventory <= 50) return { text: '较少', color: '#eab308', bgColor: '#fefce8', disabled: false };
return { text: '充足', color: '#22c55e', bgColor: '#f0fdf4', disabled: false };
}

// 类型定义
interface Product {
id: string;
name: string;
sku: string;
basePrice: number;
minOrderQuantity: number;
mainImage: string;
sizes: Array<{
euSize: string;
usSize: string;
ukSize: string;
inventory: number;
}>;
}

interface InquiryData {
productId: string;
productName: string;
selectedSizes: [string, number][];
totalQuantity: number;
estimatedTotal: number;
notes: string;
contactInfo: any;
}

5.2 移动端性能优化

// 开山网移动端批采性能优化器
class KaiShanWangMobileBulkOptimizer {
private static instance: KaiShanWangMobileBulkOptimizer;
private touchFeedbackEnabled: boolean = true;
private gestureThreshold: number = 10;
private animationFrameId: number | null = null;
private scrollPosition: number = 0;

private constructor() {
this.initMobileOptimizations();
}

static getInstance(): KaiShanWangMobileBulkOptimizer {
if (!KaiShanWangMobileBulkOptimizer.instance) {
KaiShanWangMobileBulkOptimizer.instance = new KaiShanWangMobileBulkOptimizer();
}
return KaiShanWangMobileBulkOptimizer.instance;
}

// 初始化移动端优化
private initMobileOptimizations(): void {
// 检测设备能力
this.detectDeviceCapabilities();

// 启用触摸反馈
this.enableTouchFeedback();

// 优化滚动性能
this.optimizeScrollPerformance();

// 监听页面可见性
this.handleVisibilityChange();

// 监听网络状态
this.handleNetworkChanges();

}

// 检测设备能力
private detectDeviceCapabilities(): void {
const isLowEndDevice = this.checkLowEndDevice();
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (isLowEndDevice || prefersReducedMotion) {
  // 禁用复杂动画
  document.documentElement.classList.add('reduce-motion');
}

// 检测触摸支持
if ('ontouchstart' in window) {
  document.documentElement.classList.add('touch-device');
}

// 检测屏幕方向
this.handleOrientationChange();
window.addEventListener('orientationchange', () => this.handleOrientationChange());

}

// 检查是否为低端设备
private checkLowEndDevice(): boolean {
// 检查设备内存
const memory = (navigator as any).deviceMemory;
if (memory && memory <= 2) {
return true;
}

// 检查CPU核心数
const cores = navigator.hardwareConcurrency;
if (cores && cores <= 2) {
  return true;
}

// 检查设备像素比
if (window.devicePixelRatio >= 3) {
  return false; // 高DPI设备通常是高端设备
}

return false;

}

// 启用触摸反馈
private enableTouchFeedback(): void {
if (!this.touchFeedbackEnabled) return;

// 使用CSS变量实现涟漪效果
const style = document.createElement('style');
style.textContent = `
  .touch-ripple {
    position: relative;
    overflow: hidden;
  }

  .touch-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    opacity: 0;
  }

  .touch-ripple:active::after {
    width: 200px;
    height: 200px;
    opacity: 1;
  }
`;
document.head.appendChild(style);

}

// 优化滚动性能
private optimizeScrollPerformance(): void {
let ticking = false;

const handleScroll = (e: Event) => {
  if (!ticking) {
    requestAnimationFrame(() => {
      this.scrollPosition = window.scrollY;
      this.updateScrollIndicators();
      ticking = false;
    });
    ticking = true;
  }
};

window.addEventListener('scroll', handleScroll, { passive: true });

// 优化滚动容器
const scrollContainers = document.querySelectorAll('.scroll-container');
scrollContainers.forEach(container => {
  container.addEventListener('touchstart', () => {}, { passive: true });
  container.addEventListener('touchmove', () => {}, { passive: true });
});

}

// 更新滚动指示器
private updateScrollIndicators(): void {
const scrollIndicator = document.querySelector('.scroll-indicator');
if (scrollIndicator) {
const scrollPercent = (this.scrollPosition / (document.body.scrollHeight - window.innerHeight)) * 100;
scrollIndicator.setAttribute('data-scroll', ${scrollPercent}%);
}
}

// 处理页面可见性变化
private handleVisibilityChange(): void {
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
// 页面隐藏时暂停动画和定时器
this.pauseAnimations();
this.reduceUpdateFrequency();
} else {
// 页面可见时恢复
this.resumeAnimations();
this.normalizeUpdateFrequency();
}
});
}

// 处理网络状态变化
private handleNetworkChanges(): void {
if (navigator.connection) {
navigator.connection.addEventListener('change', () => {
const effectiveType = navigator.connection.effectiveType;

    switch (effectiveType) {
      case '4g':
      case 'wifi':
        this.enableHighQualityMode();
        break;
      case '3g':
        this.enableMediumQualityMode();
        break;
      case '2g':
      case 'slow-2g':
        this.enableLowQualityMode();
        break;
    }
  });
}

}

// 处理屏幕方向变化
private handleOrientationChange(): void {
const isLandscape = window.innerWidth > window.innerHeight;

if (isLandscape) {
  document.documentElement.classList.add('landscape');
  document.documentElement.classList.remove('portrait');
} else {
  document.documentElement.classList.add('portrait');
  document.documentElement.classList.remove('landscape');
}

// 重新计算布局
window.dispatchEvent(new Event('resize'));

}

// 暂停动画
private pauseAnimations(): void {
document.documentElement.classList.add('animations-paused');
}

// 恢复动画
private resumeAnimations(): void {
document.documentElement.classList.remove('animations-paused');
}

// 降低更新频率
private reduceUpdateFrequency(): void {
document.documentElement.classList.add('reduced-updates');
}

// 恢复正常更新频率
private normalizeUpdateFrequency(): void {
document.documentElement.classList.remove('reduced-updates');
}

// 启用高质量模式
private enableHighQualityMode(): void {
document.documentElement.classList.remove('low-quality', 'medium-quality');
document.documentElement.classList.add('high-quality');
}

// 启用中等质量模式
private enableMediumQualityMode(): void {
document.documentElement.classList.remove('high-quality', 'low-quality');
document.documentElement.classList.add('medium-quality');
}

// 启用低质量模式
private enableLowQualityMode(): void {
document.documentElement.classList.remove('high-quality', 'medium-quality');
document.documentElement.classList.add('low-quality');
}

// 优化图片加载
optimizeImageLoading(imageSrc: string, priority: 'high' | 'normal' | 'low'): string {
const url = new URL(imageSrc, window.location.origin);

// 根据网络状况调整质量
if (navigator.connection) {
  const effectiveType = navigator.connection.effectiveType;
  switch (effectiveType) {
    case '4g':
    case 'wifi':
      url.searchParams.set('q', '85');
      break;
    case '3g':
      url.searchParams.set('q', '70');
      break;
    case '2g':
    case 'slow-2g':
      url.searchParams.set('q', '50');
      break;
  }
}

// 根据设备能力调整格式
if (window.devicePixelRatio >= 2) {
  url.searchParams.set('dpr', '2');
}

// 设置加载优先级
if (priority === 'high') {
  url.searchParams.set('priority', 'high');
}

return url.toString();

}

// 获取移动端配置
getMobileConfig(): MobileConfig {
return {
touchFeedback: this.touchFeedbackEnabled,
gestureThreshold: this.gestureThreshold,
reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
isLowEndDevice: this.checkLowEndDevice(),
orientation: window.innerWidth > window.innerHeight ? 'landscape' : 'portrait',
networkType: navigator.connection?.effectiveType || 'unknown',
pixelRatio: window.devicePixelRatio || 1
};
}

// 清理资源
cleanup(): void {
if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId);
}
}
}

// 类型定义
interface MobileConfig {
touchFeedback: boolean;
gestureThreshold: number;
reducedMotion: boolean;
isLowEndDevice: boolean;
orientation: 'landscape' | 'portrait';
networkType: string;
pixelRatio: number;
}

六、开山网性能监控与优化

6.1 开山网性能监控系统

// 开山网性能监控系统
class KaiShanWangPerformanceMonitor {
private static instance: KaiShanWangPerformanceMonitor;
private metrics: KaiShanWangPerformanceMetrics = {
coreWebVitals: {
LCP: 0,
FID: 0,
CLS: 0,
INP: 0
},
mobileSpecific: {
appLaunchTime: 0,
scrollFPS: 0,
touchResponseTime: 0,
imageLoadTime: 0,
memoryUsage: 0,
batteryImpact: 0
},
businessMetrics: {
timeToFirstInteraction: 0,
timeToCompleteSelection: 0,
inquirySubmissionTime: 0,
imageGallerySwitchTime: 0,
sizeSelectorResponseTime: 0
},
resourceMetrics: {
totalPageSize: 0,
imageTotalSize: 0,
javascriptSize: 0,
cssSize: 0,
fontTotalSize: 0,
apiCallsCount: 0,
websocketLatency: 0
}
};

private observers: PerformanceObserver[] = [];
private isMonitoring: boolean = false;
private reportingEndpoint: string = 'https://analytics.kaishan.com/performance';
封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
private constructor() {}

static getInstance(): KaiShanWangPerformanceMonitor {
if (!KaiShanWangPerformanceMonitor.instance) {
KaiShanWangPerformanceMonitor.instance = new KaiShanWangPerformanceMonitor();
}
return KaiShanWangPerformanceMonitor.instance;
}

// 启动监控
startMonitoring(): void {
if (this.isMonitoring) return;
this.isMonitoring = true;

this.setupCoreWebVitalsObservers();
this.setupMobileSpecificObservers();
this.setupBusinessMetricsObservers();
this.setupResourceObservers();
this.setupLongTaskObserver();

}

// 设置核心Web指标观察器
private setupCoreWebVitalsObservers(): void {
// LCP
this.observers.push(
new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1] as any;
this.metrics.coreWebVitals.LCP = lastEntry.startTime;
this.reportMetric('LCP', lastEntry.startTime, 'core-web-vital');
})
).observe({ type: 'largest-contentful-paint', buffered: true });

// FID
this.observers.push(
  new PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach((entry: any) => {
      this.metrics.coreWebVitals.FID = entry.processingStart - entry.startTime;
      this.reportMetric('FID', this.metrics.coreWebVitals.FID, 'core-web-vital');
    });
  })
).observe({ type: 'first-input', buffered: true });

// CLS
this.observers.push(
  new PerformanceObserver((list) => {
    let clsValue = 0;
    list.getEntries().forEach((entry: any) => {
      if (!entry.hadRecentInput) {
        clsValue += entry.value;
      }
    });
    this.metrics.coreWebVitals.CLS = clsValue;
    this.reportMetric('CLS', clsValue, 'core-web-vital');
  })
).observe({ type: 'layout-shift', buffered: true });

// INP
this.observers.push(
  new PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach((entry: any) => {
      this.metrics.coreWebVitals.INP = entry.processingEnd - entry.startTime;
      this.reportMetric('INP', this.metrics.coreWebVitals.INP, 'core-web-vital');
    });
  })
).observe({ type: 'event', buffered: true });

}

// 设置移动端特定指标观察器
private setupMobileSpecificObservers(): void {
// 内存使用监控
if ('memory' in performance) {
setInterval(() => {
const memory = (performance as any).memory;
this.metrics.mobileSpecific.memoryUsage = memory.usedJSHeapSize;

    // 内存警告
    const usagePercent = memory.usedJSHeapSize / memory.jsHeapSizeLimit;
    if (usagePercent > 0.8) {
      this.reportWarning('High memory usage detected', usagePercent);
    }
  }, 10000);
}

// 滚动性能监控
let scrollFrameCount = 0;
let scrollStartTime = 0;

const handleScrollStart = () => {
  scrollStartTime = performance.now();
  scrollFrameCount = 0;
};

const handleScrollEnd = () => {
  const scrollDuration = performance.now() - scrollStartTime;
  const fps = scrollFrameCount / (scrollDuration / 1000);
  this.metrics.mobileSpecific.scrollFPS = fps;

  if (fps < 30) {
    this.reportWarning('Low scroll FPS detected', fps);
  }
};

let scrollTimeout: NodeJS.Timeout;

window.addEventListener('scroll', () => {
  scrollFrameCount++;

  if (!scrollStartTime) {
    handleScrollStart();
  }

  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(handleScrollEnd, 150);
}, { passive: true });

// 触摸响应时间监控
document.addEventListener('touchstart', () => {
  this.touchStartTime = performance.now();
}, { passive: true });

document.addEventListener('touchend', () => {
  const touchDuration = performance.now() - this.touchStartTime;
  this.metrics.mobileSpecific.touchResponseTime = touchDuration;

  if (touchDuration > 100) {
    this.reportWarning('Slow touch response detected', touchDuration);
  }
}, { passive: true });

}

// 设置业务指标观察器
private setupBusinessMetricsObservers(): void {
// 首次交互时间
const interactionStart = performance.now();

const trackFirstInteraction = () => {
  const timeToFirstInteraction = performance.now() - interactionStart;
  this.metrics.businessMetrics.timeToFirstInteraction = timeToFirstInteraction;
  this.reportMetric('TTFI', timeToFirstInteraction, 'business');

  document.removeEventListener('click', trackFirstInteraction);
  document.removeEventListener('touchstart', trackFirstInteraction);
};

document.addEventListener('click', trackFirstInteraction, { once: true, passive: true });
document.addEventListener('touchstart', trackFirstInteraction, { once: true, passive: true });

// 图片画廊切换时间
let gallerySwitchStart = 0;

document.addEventListener('gallery-switch-start', () => {
  gallerySwitchStart = performance.now();
}, { passive: true });

document.addEventListener('gallery-switch-end', () => {
  const switchTime = performance.now() - gallerySwitchStart;
  this.metrics.businessMetrics.imageGallerySwitchTime = switchTime;
  this.reportMetric('GallerySwitchTime', switchTime, 'business');
}, { passive: true });

// 尺码选择器响应时间
let sizeSelectorStart = 0;

document.addEventListener('size-selector-start', () => {
  sizeSelectorStart = performance.now();
}, { passive: true });

document.addEventListener('size-selector-end', () => {
  const responseTime = performance.now() - sizeSelectorStart;
  this.metrics.businessMetrics.sizeSelectorResponseTime = responseTime;
  this.reportMetric('SizeSelectorResponseTime', responseTime, 'business');
}, { passive: true });

}

// 设置资源观察器
private setupResourceObservers(): void {
// 图片加载时间
this.observers.push(
new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.name.match(/.(jpg|jpeg|png|webp|avif|gif)/i)) {
const loadTime = entry.duration;
this.metrics.resourceMetrics.imageLoadTime = loadTime;

        if (loadTime > 2000) {
          this.reportWarning('Slow image load detected', { url: entry.name, loadTime });
        }
      }
    });
  })
).observe({ type: 'resource', buffered: true });

// API调用计数
let apiCallCount = 0;

this.observers.push(
  new PerformanceObserver((list) => {
    list.getEntries().forEach((entry: any) => {
      if (entry.initiatorType === 'fetch' || entry.initiatorType === 'xmlhttprequest') {
        apiCallCount++;
        this.metrics.resourceMetrics.apiCallsCount = apiCallCount;

        // API调用时间过长警告
        if (entry.duration > 1000) {
          this.reportWarning('Slow API call detected', { url: entry.name, duration: entry.duration });
        }
      }
    });
  })
).observe({ type: 'resource', buffered: true });

}

// 设置长任务观察器
private setupLongTaskObserver(): void {
this.observers.push(
new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
this.reportWarning('Long task detected', {
duration: entry.duration,
startTime: entry.startTime,
name: entry.name
});
});
})
).observe({ type: 'longtask', buffered: true });
}

// 报告指标
private reportMetric(name: string, value: number, category: string): void {
const payload = {
metric: name,
value,
category,
timestamp: Date.now(),
url: window.location.href,
userAgent: navigator.userAgent,
deviceInfo: {
connectionType: (navigator as any).connection?.effectiveType || 'unknown',
devicePixelRatio: window.devicePixelRatio || 1,
viewportWidth: window.innerWidth,
viewportHeight: window.innerHeight,
memory: (performance as any).memory?.jsHeapSizeLimit
},
businessContext: {
pageType: 'product-detail',
productId: this.getProductIdFromUrl(),
userType: this.getUserType()
}
};

// 使用sendBeacon发送
if (navigator.sendBeacon) {
  navigator.sendBeacon(
    this.reportingEndpoint,
    JSON.stringify(payload)
  );
}

}

// 报告警告
private reportWarning(warning: string, details: any): void {
console.warn([KSW Perf] ${warning}:, details);

const payload = {
  warning,
  details,
  timestamp: Date.now(),
  url: window.location.href
};

if (navigator.sendBeacon) {
  navigator.sendBeacon(
    `${this.reportingEndpoint}/warnings`,
    JSON.stringify(payload)
  );
}

}

// 从URL获取产品ID
private getProductIdFromUrl(): string {
const match = window.location.pathname.match(/\/product\/(\d+)/);
return match ? match[1] : 'unknown';
}

// 获取用户类型
private getUserType(): string {
// 从localStorage或cookie获取用户类型
return localStorage.getItem('ksw_user_type') || 'guest';
}

// 获取当前指标快照
getMetricsSnapshot(): KaiShanWangPerformanceMetrics {
return { ...this.metrics };
}

// 生成性能报告
generateReport(): PerformanceReport {
const snapshot = this.getMetricsSnapshot();

return {
  summary: {
    lcp: snapshot.coreWebVitals.LCP,
    fid: snapshot.coreWebVitals.FID,
    cls: snapshot.coreWebVitals.CLS,
    inp: snapshot.coreWebVitals.INP
  },
  mobileMetrics: {
    scrollFPS: snapshot.mobileSpecific.scrollFPS,
    touchResponseTime: snapshot.mobileSpecific.touchResponseTime,
    imageLoadTime: snapshot.mobileSpecific.imageLoadTime,
    memoryUsage: snapshot.mobileSpecific.memoryUsage,
    batteryImpact: snapshot.mobileSpecific.batteryImpact
  },
  businessMetrics: {
    timeToFirstInteraction: snapshot.businessMetrics.timeToFirstInteraction,
    timeToCompleteSelection: snapshot.businessMetrics.timeToCompleteSelection,
    inquirySubmissionTime: snapshot.businessMetrics.inquirySubmissionTime
  },
  resourceMetrics: {
    totalPageSize: snapshot.resourceMetrics.totalPageSize,
    imageTotalSize: snapshot.resourceMetrics.imageTotalSize,
    apiCallsCount: snapshot.resourceMetrics.apiCallsCount
  },
  recommendations: this.generateRecommendations(snapshot),
  timestamp: Date.now()
};

}

// 生成优化建议
private generateRecommendations(metrics: KaiShanWangPerformanceMetrics): string[] {
const recommendations: string[] = [];

// LCP优化建议
if (metrics.coreWebVitals.LCP > 2500) {
  recommendations.push('优化首屏图片加载，考虑使用更小的图片或更好的CDN分发');
}

// FID优化建议
if (metrics.coreWebVitals.FID > 100) {
  recommendations.push('减少主线程阻塞，考虑代码分割或延迟加载非关键JavaScript');
}

// CLS优化建议
if (metrics.coreWebVitals.CLS > 0.1) {
  recommendations.push('为图片和广告预留空间，避免动态插入内容导致布局偏移');
}

// 滚动性能建议
if (metrics.mobileSpecific.scrollFPS < 55) {
  recommendations.push('优化滚动性能，避免滚动时触发重排和重绘');
}

// 触摸响应建议
if (metrics.mobileSpecific.touchResponseTime > 100) {
  recommendations.push('优化触摸响应，减少事件处理程序的复杂度');
}

// 图片加载建议
if (metrics.mobileSpecific.imageLoadTime > 2000) {
  recommendations.push('优化图片加载策略，使用适当的格式和质量设置');
}

// 内存使用建议
if (metrics.mobileSpecific.memoryUsage > 150 * 1024 * 1024) {
  recommendations.push('检测到较高的内存使用，请检查是否存在内存泄漏');
}

// API调用建议
if (metrics.resourceMetrics.apiCallsCount > 20) {
  recommendations.push('API调用次数较多，考虑合并请求或使用GraphQL');
}

return recommendations;

}

// 停止监控
stopMonitoring(): void {
this.observers.forEach(observer => observer.disconnect());
this.observers = [];
this.isMonitoring = false;
}
}

// 类型定义
interface KaiShanWangPerformanceMetrics {
coreWebVitals: {
LCP: number;
FID: number;
CLS: number;
INP: number;
};
mobileSpecific: {
appLaunchTime: number;
scrollFPS: number;
touchResponseTime: number;
imageLoadTime: number;
memoryUsage: number;
batteryImpact: number;
};
businessMetrics: {
timeToFirstInteraction: number;
timeToCompleteSelection: number;
inquirySubmissionTime: number;
imageGallerySwitchTime: number;
sizeSelectorResponseTime: number;
};
resourceMetrics: {
totalPageSize: number;
imageTotalSize: number;
javascriptSize: number;
cssSize: number;
fontTotalSize: number;
apiCallsCount: number;
websocketLatency: number;
};
}

interface PerformanceReport {
summary: {
lcp: number;
fid: number;
cls: number;
inp: number;
};
mobileMetrics: {
scrollFPS: number;
touchResponseTime: number;
imageLoadTime: number;
memoryUsage: number;
batteryImpact: number;
};
businessMetrics: {
timeToFirstInteraction: number;
timeToCompleteSelection: number;
inquirySubmissionTime: number;
};
resourceMetrics: {
totalPageSize: number;
imageTotalSize: number;
apiCallsCount: number;
};
recommendations: string[];
timestamp: number;
}

6.2 性能仪表板组件

// 开山网性能监控仪表板
const KaiShanWangPerformanceDashboard = () => {
const [metrics, setMetrics] = useState(null);
const [isMonitoring, setIsMonitoring] = useState(false);
const monitorRef = useRef(null);

useEffect(() => {
monitorRef.current = KaiShanWangPerformanceMonitor.getInstance();

return () => {
  monitorRef.current?.stopMonitoring();
};

}, []);

const startMonitoring = useCallback(() => {
monitorRef.current?.startMonitoring();
setIsMonitoring(true);

const interval = setInterval(() => {
  const report = monitorRef.current?.generateReport();
  if (report) {
    setMetrics(report);
  }
}, 5000);

return () => clearInterval(interval);

}, []);

const stopMonitoring = useCallback(() => {
monitorRef.current?.stopMonitoring();
setIsMonitoring(false);
}, []);

// 获取指标状态颜色
const getMetricStatus = (value: number, thresholds: { good: number; bad: number }) => {
if (value <= thresholds.good) return { status: 'good', color: '#22c55e' };
if (value <= thresholds.bad) return { status: 'needs-improvement', color: '#f59e0b' };
return { status: 'poor', color: '#ef4444' };
};

// 获取CLS评分
const getCLSScore = (cls: number) => {
if (cls <= 0.1) return { score: '优秀', color: '#22c55e' };
if (cls <= 0.25) return { score: '良好', color: '#f59e0b' };
return { score: '需改进', color: '#ef4444' };
};

return (

  {metrics && (
    <>
      {/* 核心Web指标 */}
      <div className="core-metrics">
        <h3>核心Web指标</h3>
        <div className="metrics-grid">
          <KSWMetricCard
            label="LCP"
            value={`${(metrics.summary.lcp / 1000).toFixed(2)}s`}
            target="< 2.5s"
            status={getMetricStatus(metrics.summary.lcp, { good: 2500, bad: 4000 })}
            icon="🚀"
          />
          <KSWMetricCard
            label="FID"
            value={`${metrics.summary.fid.toFixed(0)}ms`}
            target="< 100ms"
            status={getMetricStatus(metrics.summary.fid, { good: 100, bad: 300 })}
            icon="👆"
          />
          <KSWMetricCard
            label="CLS"
            value={metrics.summary.cls.toFixed(3)}
            target="< 0.1"
            status={getMetricStatus(metrics.summary.cls, { good: 0.1, bad: 0.25 })}
            icon="📐"
          />
          <KSWMetricCard
            label="INP"
            value={`${metrics.summary.inp.toFixed(0)}ms`}
            target="< 200ms"
            status={getMetricStatus(metrics.summary.inp, { good: 200, bad: 500 })}
            icon="⚡"
          />
        </div>
      </div>

      {/* 移动端特定指标 */}
      <div className="mobile-specific-metrics">
        <h3>移动端特定指标</h3>
        <div className="metrics-grid">
          <KSWMetricCard
            label="滚动FPS"
            value={`${metrics.mobileMetrics.scrollFPS.toFixed(1)}`}
            target="> 55"
            status={getMetricStatus(metrics.mobileMetrics.scrollFPS, { good: 55, bad: 30 })}
            icon="📜"
          />
          <KSWMetricCard
            label="触摸响应"
            value={`${metrics.mobileMetrics.touchResponseTime.toFixed(0)}ms`}
            target="< 100ms"
            status={getMetricStatus(metrics.mobileMetrics.touchResponseTime, { good: 100, bad: 200 })}
            icon="👆"
          />
          <KSWMetricCard
            label="图片加载"
            value={`${metrics.mobileMetrics.imageLoadTime.toFixed(0)}ms`}
            target="< 2000ms"
            status={getMetricStatus(metrics.mobileMetrics.imageLoadTime, { good: 2000, bad: 4000 })}
            icon="🖼️"
          />
          <KSWMetricCard
            label="内存使用"
            value={`${(metrics.mobileMetrics.memoryUsage / 1024 / 1024).toFixed(1)}MB`}
            target="< 200MB"
            status={getMetricStatus(metrics.mobileMetrics.memoryUsage, { good: 200 * 1024 * 1024, bad: 400 * 1024 * 1024 })}
            icon="💾"
          />
        </div>
      </div>

      {/* 业务指标 */}
      <div className="business-metrics">
        <h3>业务指标</h3>
        <div className="metrics-grid">
          <KSWMetricCard
            label="首次交互"
            value={`${(metrics.businessMetrics.timeToFirstInteraction / 1000).toFixed(2)}s`}
            target="< 1s"
            status={getMetricStatus(metrics.businessMetrics.timeToFirstInteraction, { good: 1000, bad: 3000 })}
            icon="🖱️"
          />
          <KSWMetricCard
            label="选码完成"
            value={`${(metrics.businessMetrics.timeToCompleteSelection / 1000).toFixed(2)}s`}
            target="< 3s"
            status={getMetricStatus(metrics.businessMetrics.timeToCompleteSelection, { good: 3000, bad: 8000 })}
            icon="👟"
          />
          <KSWMetricCard
            label="询价提交"
            value={`${(metrics.businessMetrics.inquirySubmissionTime / 1000).toFixed(2)}s`}
            target="< 2s"
            status={getMetricStatus(metrics.businessMetrics.inquirySubmissionTime, { good: 2000, bad: 5000 })}
            icon="💬"
          />
          <KSWMetricCard
            label="画廊切换"
            value={`${metrics.businessMetrics.imageGallerySwitchTime.toFixed(0)}ms`}
            target="< 100ms"
            status={getMetricStatus(metrics.businessMetrics.imageGallerySwitchTime, { good: 100, bad: 300 })}
            icon="🖼️"
          />
        </div>
      </div>

      {/* 资源指标 */}
      <div className="resource-metrics">
        <h3>资源指标</h3>
        <div className="metrics-grid">
          <KSWMetricCard
            label="页面大小"
            value={`${(metrics.resourceMetrics.totalPageSize / 1024 / 1024).toFixed(2)}MB`}
            target="< 3MB"
            status={getMetricStatus(metrics.resourceMetrics.totalPageSize, { good: 3 * 1024 * 1024, bad: 6 * 1024 * 1024 })}
            icon="📄"
          />
          <KSWMetricCard
            label="图片大小"
            value={`${(metrics.resourceMetrics.imageTotalSize / 1024 / 1024).toFixed(2)}MB`}
            target="< 2MB"
            status={getMetricStatus(metrics.resourceMetrics.imageTotalSize, { good: 2 * 1024 * 1024, bad: 4 * 1024 * 1024 })}
            icon="🖼️"
          />
          <KSWMetricCard
            label="API调用"
            value={`${metrics.resourceMetrics.apiCallsCount}`}
            target="< 20"
            status={getMetricStatus(metrics.resourceMetrics.apiCallsCount, { good: 20, bad: 40 })}
            icon="🔌"
          />
          <KSWMetricCard
            label="WebSocket延迟"
            value={`${metrics.resourceMetrics.websocketLatency.toFixed(0)}ms`}
            target="< 100ms"
            status={getMetricStatus(metrics.resourceMetrics.websocketLatency, { good: 100, bad: 300 })}
            icon="📡"
          />
        </div>
      </div>

      {/* 优化建议 */}
      <div className="recommendations">
        <h3>💡 优化建议</h3>
        {metrics.recommendations.length > 0 ? (
          <ul>
            {metrics.recommendations.map((rec, index) => (
              <li key={index}>{rec}</li>
            ))}
          </ul>
        ) : (
          <p className="no-recommendations">🎉 当前性能表现良好，无需特别优化</p>
        )}
      </div>

      {/* 实时监控图表 */}
      <div className="realtime-charts">
        <h3>📈 实时性能趋势</h3>
        <div className="chart-placeholder">
          <p>图表组件将在这里显示实时性能数据</p>
        </div>
      </div>
    </>
  )}
</div>