// 性能分析 API
const perf = performance.getEntriesByType('navigation')[0];
console.log({
  DNS查詢: perf.domainLookupEnd - perf.domainLookupStart,
  TCP連接: perf.connectEnd - perf.connectStart,
  請(qǐng)求耗時(shí): perf.responseEnd - perf.requestStart,
  DOM解析: perf.domInteractive - perf.responseEnd,
  首屏渲染: perf.domContentLoaded,
  完全加載: perf.loadEventEnd
});

import { onCLS, onFID, onLCP } from 'web-vitals';

onCLS(metric => {
  if (metric.value > 0.1) {
    console.error('CLS 過(guò)高:', metric.value, metric.sources);
  }
});

onLCP(metric => {
  if (metric.value > 2500) {
    console.error('LCP 過(guò)長(zhǎng):', metric.value);
  }
});

// 路由懶加載
const Home = () => import('./Home.vue');
const About = () => import('./About.vue');

// 圖片懶加載
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

// 常見(jiàn)泄漏場(chǎng)景
class BadComponent {
  constructor() {
    // ? 錯(cuò)誤：定時(shí)器沒(méi)有清理
    this.interval = setInterval(() => {
      this.fetchData();
    }, 1000);

    // ? 錯(cuò)誤：全局事件監(jiān)聽(tīng)沒(méi)有移除
    window.addEventListener('resize', this.handleResize);
  }

  destroy() {
    // ? 正確：清理所有副作用
    clearInterval(this.interval);
    window.removeEventListener('resize', this.handleResize);
    this.data = null;
  }
}

// 全局錯(cuò)誤邊界（React）/ 全局錯(cuò)誤處理（Vue3）
// Vue3 全局錯(cuò)誤處理
const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  // 1. 上報(bào)錯(cuò)誤到監(jiān)控系統(tǒng)（Sentry/自建）
  errorReporter.capture(err, {
    component: instance?.$options?.name,
    info,
    userAgent: navigator.userAgent,
    url: location.href,
  });

  // 2. 區(qū)分錯(cuò)誤類型：網(wǎng)絡(luò)錯(cuò)誤 vs 業(yè)務(wù)錯(cuò)誤 vs 未知錯(cuò)誤
  if (err instanceof NetworkError) {
    toast.error('網(wǎng)絡(luò)連接失敗，請(qǐng)檢查網(wǎng)絡(luò)');
  } else if (err instanceof BusinessError) {
    toast.warning(err.message);
  } else {
    toast.error('系統(tǒng)異常，請(qǐng)稍后重試');
    console.error('[未知錯(cuò)誤]', err);
  }
};

// 異步錯(cuò)誤：Promise.reject 未處理
window.addEventListener('unhandledrejection', (event) => {
  errorReporter.capture(event.reason, { type: 'unhandledrejection' });
  event.preventDefault(); // 阻止默認(rèn)的控制臺(tái)報(bào)錯(cuò)
});

// 前端性能監(jiān)控：Core Web Vitals + 自定義指標(biāo)
import { onCLS, onFID, onFCP, onLCP, onTTFB } from 'web-vitals';

// 收集 Web Vitals 并上報(bào)
function reportWebVitals(metric) {
  const { name, value, id, delta } = metric;

  // 發(fā)送到自建監(jiān)控或 Google Analytics
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify({
      name,           // CLS/FID/FCP/LCP/TTFB
      value,          // 當(dāng)前值
      delta,          // 與上次的差值
      id,             // 唯一標(biāo)識(shí)
      page: location.pathname,
      timestamp: Date.now(),
    }),
    keepalive: true,  // 頁(yè)面關(guān)閉時(shí)也能發(fā)送
  });
}

onCLS(reportWebVitals);   // 累積布局偏移
onFID(reportWebVitals);   // 首次輸入延遲
onLCP(reportWebVitals);   // 最大內(nèi)容繪制（< 2.5s 為優(yōu)）
onFCP(reportWebVitals);   // 首次內(nèi)容繪制
onTTFB(reportWebVitals);  // 首字節(jié)時(shí)間

// 自定義性能標(biāo)記
performance.mark('api-start');
const data = await fetch('/api/data');
performance.mark('api-end');
performance.measure('api-latency', 'api-start', 'api-end');

const [measure] = performance.getEntriesByName('api-latency');
console.log('API 耗時(shí):', measure.duration.toFixed(2) + 'ms');

// Vue3 組件測(cè)試（Vitest + Vue Testing Library）
import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent, waitFor } from '@testing-library/vue';
import UserCard from './UserCard.vue';

describe('UserCard 組件', () => {
  it('正確渲染用戶信息', () => {
    const { getByText } = render(UserCard, {
      props: { name: '張三', email: 'zhang@example.com', role: 'admin' },
    });

    expect(getByText('張三')).toBeInTheDocument();
    expect(getByText('zhang@example.com')).toBeInTheDocument();
    expect(getByText('管理員')).toBeInTheDocument();
  });

  it('點(diǎn)擊刪除按鈕時(shí) emit delete 事件', async () => {
    const { getByRole, emitted } = render(UserCard, {
      props: { name: '李四', email: 'li@example.com', role: 'user' },
    });

    await fireEvent.click(getByRole('button', { name: '刪除' }));
    expect(emitted().delete).toBeTruthy();
    expect(emitted().delete[0]).toEqual([{ email: 'li@example.com' }]);
  });

  it('加載狀態(tài)下顯示 Skeleton', () => {
    const { container } = render(UserCard, {
      props: { loading: true },
    });
    expect(container.querySelector('.skeleton')).toBeInTheDocument();
  });
});

// Pinia Store 測(cè)試
import { setActivePinia, createPinia } from 'pinia';
import { useUserStore } from '@/stores/user';

describe('UserStore', () => {
  beforeEach(() => setActivePinia(createPinia()));

  it('login 成功后更新 state', async () => {
    const store = useUserStore();
    vi.spyOn(authApi, 'login').mockResolvedValue({
      token: 'mock-token',
      user: { id: 1, name: '測(cè)試用戶' },
    });

    await store.login('test@example.com', 'password');

    expect(store.isLoggedIn).toBe(true);
    expect(store.user?.name).toBe('測(cè)試用戶');
    expect(localStorage.getItem('token')).toBe('mock-token');
  });
});