litek/src/components/tool/network/speedtest.tsx

import { useState, type FC } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "sonner";
import { Loader2 } from "lucide-react";

interface PerformanceMetrics {
  dns: number;
  tcp: number;
  ssl: number;
  ttfb: number;
  download: number;
  total: number;
}

interface SpeedTestResult {
  downloadSpeed?: number;
  uploadSpeed?: number;
  performance?: PerformanceMetrics;
}

const Tool: FC = () => {
  const [url, setUrl] = useState<string>("");
  const [testType, setTestType] = useState<"performance" | "download" | "upload">(
    "performance"
  );
  const [testing, setTesting] = useState<boolean>(false);
  const [result, setResult] = useState<SpeedTestResult | null>(null);

  const testPerformance = async (targetUrl: string) => {
    // 清除之前的性能数据
    performance.clearResourceTimings();

    const startTime = performance.now();

    try {
      const response = await fetch(targetUrl, {
        cache: "no-cache",
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      // 等待内容加载完成
      await response.blob();

      const endTime = performance.now();

      // 获取性能数据
      const perfEntries = performance.getEntriesByType(
        "resource"
      ) as PerformanceResourceTiming[];
      const entry = perfEntries.find((e) => e.name === targetUrl);

      if (entry) {
        const metrics: PerformanceMetrics = {
          dns: entry.domainLookupEnd - entry.domainLookupStart,
          tcp: entry.connectEnd - entry.connectStart,
          ssl:
            entry.secureConnectionStart > 0
              ? entry.connectEnd - entry.secureConnectionStart
              : 0,
          ttfb: entry.responseStart - entry.requestStart,
          download: entry.responseEnd - entry.responseStart,
          total: entry.responseEnd - entry.startTime,
        };

        return { performance: metrics };
      } else {
        // 如果没有详细的性能数据，只返回总时间
        return {
          performance: {
            dns: 0,
            tcp: 0,
            ssl: 0,
            ttfb: 0,
            download: 0,
            total: endTime - startTime,
          },
        };
      }
    } catch (error) {
      throw error;
    }
  };

  const testDownloadSpeed = async (targetUrl: string) => {
    const startTime = performance.now();

    try {
      const response = await fetch(targetUrl, {
        cache: "no-cache",
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const blob = await response.blob();
      const endTime = performance.now();

      const fileSizeBytes = blob.size;
      const durationSeconds = (endTime - startTime) / 1000;
      const speedMbps = (fileSizeBytes * 8) / (durationSeconds * 1000000);

      return { downloadSpeed: speedMbps };
    } catch (error) {
      throw error;
    }
  };

  const testUploadSpeed = async (targetUrl: string) => {
    // 生成 1MB 的测试数据
    const testData = new Uint8Array(1024 * 1024);
    for (let i = 0; i < testData.length; i++) {
      testData[i] = Math.floor(Math.random() * 256);
    }

    const startTime = performance.now();

    try {
      const response = await fetch(targetUrl, {
        method: "POST",
        body: testData,
        cache: "no-cache",
      });

      const endTime = performance.now();

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const fileSizeBytes = testData.length;
      const durationSeconds = (endTime - startTime) / 1000;
      const speedMbps = (fileSizeBytes * 8) / (durationSeconds * 1000000);

      return { uploadSpeed: speedMbps };
    } catch (error) {
      throw error;
    }
  };

  const startTest = async () => {
    if (!url.trim()) {
      toast.error("请输入 URL");
      return;
    }

    let targetUrl = url.trim();

    // 如果没有协议前缀，默认使用 https://
    if (!targetUrl.startsWith("http://") && !targetUrl.startsWith("https://")) {
      targetUrl = `https://${targetUrl}`;
    }

    setTesting(true);
    setResult(null);

    try {
      let testResult: SpeedTestResult = {};

      switch (testType) {
        case "performance":
          testResult = await testPerformance(targetUrl);
          toast.success("性能测试完成");
          break;
        case "download":
          testResult = await testDownloadSpeed(targetUrl);
          toast.success("下载速度测试完成");
          break;
        case "upload":
          testResult = await testUploadSpeed(targetUrl);
          toast.success("上传速度测试完成");
          break;
      }

      setResult(testResult);
    } catch (error: unknown) {
      if (error instanceof Error) {
        toast.error(`测试失败: ${error.message}`);
      } else {
        toast.error("测试失败");
      }
    } finally {
      setTesting(false);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" && !testing) {
      startTest();
    }
  };

  return (
    <div className="flex flex-col gap-4 h-full">
      <div className="border rounded-md p-3 bg-yellow-500/10 border-yellow-500/50">
        <div className="text-sm font-medium text-yellow-600 dark:text-yellow-400 mb-1">
          ⚠️ CORS 限制说明
        </div>
        <div className="text-xs text-muted-foreground space-y-1">
          <p>由于浏览器的 CORS 安全策略，部分网站可能无法直接测试。</p>
          <p>建议测试以下类型的网站：</p>
          <ul className="list-disc list-inside ml-2">
            <li>支持 CORS 的公共 API</li>
            <li>您自己控制的网站（可配置 CORS 头）</li>
            <li>使用 CORS 代理服务</li>
          </ul>
        </div>
      </div>

      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">目标 URL</label>
          <Input
            placeholder="例如: https://example.com"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            onKeyPress={handleKeyPress}
            disabled={testing}
          />
        </div>

        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">测试类型</label>
          <select
            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
            value={testType}
            onChange={(e) =>
              setTestType(e.target.value as "performance" | "download" | "upload")
            }
            disabled={testing}
          >
            <option value="performance">页面加载性能</option>
            <option value="download">下载速度</option>
            <option value="upload">上传速度</option>
          </select>
        </div>

        <Button onClick={startTest} disabled={testing} className="w-full">
          {testing && <Loader2 className="mr-2 size-4 animate-spin" />}
          {testing ? "测试中..." : "开始测试"}
        </Button>
      </div>

      {result && (
        <div className="flex flex-col gap-3 flex-1 overflow-auto">
          <div className="text-sm font-medium">测试结果:</div>

          {result.performance && (
            <div className="border rounded-md p-3 bg-card text-card-foreground">
              <div className="text-sm font-medium mb-3">页面加载性能</div>
              <div className="space-y-2">
                {result.performance.dns > 0 && (
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div className="text-muted-foreground">DNS 查询:</div>
                    <div>{result.performance.dns.toFixed(2)} ms</div>
                  </div>
                )}
                {result.performance.tcp > 0 && (
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div className="text-muted-foreground">TCP 连接:</div>
                    <div>{result.performance.tcp.toFixed(2)} ms</div>
                  </div>
                )}
                {result.performance.ssl > 0 && (
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div className="text-muted-foreground">SSL 握手:</div>
                    <div>{result.performance.ssl.toFixed(2)} ms</div>
                  </div>
                )}
                {result.performance.ttfb > 0 && (
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div className="text-muted-foreground">首字节时间 (TTFB):</div>
                    <div>{result.performance.ttfb.toFixed(2)} ms</div>
                  </div>
                )}
                {result.performance.download > 0 && (
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div className="text-muted-foreground">内容下载:</div>
                    <div>{result.performance.download.toFixed(2)} ms</div>
                  </div>
                )}
                <div className="grid grid-cols-2 gap-2 text-sm border-t pt-2 mt-2">
                  <div className="text-muted-foreground font-medium">总时间:</div>
                  <div className="font-medium">
                    {result.performance.total.toFixed(2)} ms
                  </div>
                </div>
              </div>
            </div>
          )}

          {result.downloadSpeed !== undefined && (
            <div className="border rounded-md p-3 bg-card text-card-foreground">
              <div className="text-sm font-medium mb-3">下载速度</div>
              <div className="text-2xl font-bold text-green-500">
                {result.downloadSpeed.toFixed(2)} Mbps
              </div>
              <div className="text-sm text-muted-foreground mt-1">
                {(result.downloadSpeed / 8).toFixed(2)} MB/s
              </div>
            </div>
          )}

          {result.uploadSpeed !== undefined && (
            <div className="border rounded-md p-3 bg-card text-card-foreground">
              <div className="text-sm font-medium mb-3">上传速度</div>
              <div className="text-2xl font-bold text-blue-500">
                {result.uploadSpeed.toFixed(2)} Mbps
              </div>
              <div className="text-sm text-muted-foreground mt-1">
                {(result.uploadSpeed / 8).toFixed(2)} MB/s
              </div>
            </div>
          )}
        </div>
      )}

      {testType === "download" && (
        <div className="text-xs text-muted-foreground">
          提示: 下载速度测试会下载目标 URL 的内容并计算速度
        </div>
      )}

      {testType === "upload" && (
        <div className="text-xs text-muted-foreground">
          提示: 上传速度测试会向目标 URL 发送 1MB 测试数据
        </div>
      )}
    </div>
  );
};

export default Tool;