0.0.27

feat: enhance caching strategies for Google Fonts
- Added caching configurations for Google Fonts stylesheets and webfonts. - Implemented 'StaleWhileRevalidate' for stylesheets and 'CacheFirst' for font files to optimize loading and improve performance.
2025-10-29 14:49:15 +08:00 · 2025-10-29 14:49:06 +08:00 · 2025-10-29 14:45:03 +08:00 · 2025-10-29 14:43:59 +08:00 · 2025-10-29 14:44:30 +08:00 · 2025-10-29 10:05:58 +08:00
25 changed files with 5492 additions and 107 deletions
--- a/.gitea/workflows/build.yaml
+++ b/.gitea/workflows/build.yaml
@@ -43,8 +43,8 @@ jobs:
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=registry,ref=${{ secrets.REGISTRY_ENDPOINT }}/${{ github.repository_owner }}/litek:buildcache
+          # cache-from: type=registry,ref=${{ secrets.REGISTRY_ENDPOINT }}/${{ github.repository_owner }}/litek:buildcache
-          cache-to: type=registry,ref=${{ secrets.REGISTRY_ENDPOINT }}/${{ github.repository_owner }}/litek:buildcache,mode=max
+          # cache-to: type=registry,ref=${{ secrets.REGISTRY_ENDPOINT }}/${{ github.repository_owner }}/litek:buildcache,mode=max
          # platforms: linux/amd64,linux/arm64
          platforms: linux/amd64
--- a/index.html
+++ b/index.html
@@ -2,12 +2,71 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/lite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lite Kit</title>
+    
    <!-- Primary Meta Tags -->
    <title>Lite Kit - Lightweight Online Tools</title>
    <meta name="description" content="Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more. Fast, secure, and easy to use." />
    <meta name="keywords" content="online tools,UUID generator,JSON formatter,Base64 encoder,network tools,DNS lookup,Ping test,TCPing,speed test,IP query" />
    <meta name="author" content="Lite Kit" />
    <meta name="theme-color" content="#000000" />
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/lite.svg" />
    <!-- DNS Prefetch & Preconnect for external APIs -->
    <link rel="dns-prefetch" href="https://ipinfo.io">
    <link rel="preconnect" href="https://ipinfo.io" crossorigin>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://litek.typist.cc/" />
    <meta property="og:title" content="Lite Kit - Lightweight Online Tools" />
    <meta property="og:description" content="Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more." />
    <meta property="og:image" content="https://litek.typist.cc/lite.svg" />
    <meta property="og:site_name" content="Lite Kit" />
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Lite Kit - Lightweight Online Tools" />
    <meta name="twitter:description" content="Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more." />
    <meta name="twitter:image" content="https://litek.typist.cc/lite.svg" />
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />
    <!-- Structured Data (JSON-LD) -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "Lite Kit",
      "description": "Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more",
      "url": "https://litek.typist.cc/",
      "author": {
        "@type": "Organization",
        "name": "Lite Kit"
      },
      "applicationCategory": "UtilitiesApplication",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      }
    }
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <!-- Cloudflare Web Analytics -->
    <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "2aecdc025eb043bc89ce931b54a80054"}'></script>
    <!-- End Cloudflare Web Analytics -->
  </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
 {
  "name": "litek",
  "private": true,
-  "version": "0.0.8",
+  "version": "0.0.27",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "generate:sitemap": "tsx scripts/generate-sitemap.ts",
    "lint": "eslint .",
    "preview": "vite preview",
    "release:patch": "npm version patch && git push --follow-tags",
@@ -13,6 +14,7 @@
    "release:major": "npm version major && git push --follow-tags"
  },
  "dependencies": {
    "@radix-ui/react-collapsible": "^1.1.12",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-separator": "^1.1.7",
@@ -42,17 +44,22 @@
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.22",
    "globals": "^16.4.0",
    "terser": "^5.44.0",
    "tsx": "^4.19.2",
    "tw-animate-css": "^1.4.0",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.45.0",
-    "vite": "npm:rolldown-vite@7.1.14"
+    "vite": "npm:rolldown-vite@7.1.14",
    "vite-plugin-pwa": "^1.1.0",
    "workbox-window": "^7.3.0"
  },
  "pnpm": {
    "overrides": {
      "vite": "npm:rolldown-vite@7.1.14"
    },
    "onlyBuiltDependencies": [
-      "@swc/core"
+      "@swc/core",
      "esbuild"
    ]
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/lite.svg
+++ b/public/lite.svg
@@ -1,7 +1,19 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
-
+  /* 默认浅色模式使用黑色 */
-<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+  path {
-
+    fill: #000000;
  }
  /* 暗色模式使用白色 */
  @media (prefers-color-scheme: dark) {
    path {
      fill: #ffffff;
    }
  }
 </style>
 <g id="SVGRepo_bgCarrier" stroke-width="0"/>
 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
 <g id="SVGRepo_iconCarrier"> <path d="M12.6089 6.12601C12.6785 5.85878 12.5183 5.58573 12.251 5.51614C11.9838 5.44655 11.7108 5.60676 11.6412 5.87399L10.0842 11.8528L7.85646 12.5211C7.59196 12.6005 7.44187 12.8792 7.52122 13.1437C7.60057 13.4082 7.87931 13.5583 8.14381 13.479L9.78926 12.9853L8.51617 17.874C8.47715 18.0238 8.50974 18.1833 8.60443 18.3058C8.69911 18.4283 8.8452 18.5 9.00003 18.5H16C16.2762 18.5 16.5 18.2761 16.5 18C16.5 17.7239 16.2762 17.5 16 17.5H9.64691L10.9102 12.6491L13.1438 11.979C13.4083 11.8996 13.5584 11.6209 13.479 11.3564C13.3997 11.0919 13.121 10.9418 12.8565 11.0211L11.2051 11.5165L12.6089 6.12601Z"/> </g>
 </svg>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,21 @@
 {
  "name": "Lite Kit - Lightweight Online Tools",
  "short_name": "Lite Kit",
  "description": "Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#000000",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/lite.svg",
      "type": "image/svg+xml",
      "sizes": "any"
    }
  ],
  "categories": ["utilities", "productivity"],
  "lang": "en",
  "dir": "ltr"
 }
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,21 @@
 # Allow all crawlers
 User-agent: *
 Allow: /
 # Sitemaps
 Sitemap: https://litek.typist.cc/sitemap.xml
 # Common bots
 User-agent: Googlebot
 Allow: /
 User-agent: Bingbot
 Allow: /
 User-agent: Baiduspider
 Allow: /
 # Crawl-delay for less aggressive bots
 User-agent: *
 Crawl-delay: 1
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -0,0 +1,63 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://litek.typist.cc</loc>
    <lastmod>2025-10-29</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://litek.typist.cc/tool</loc>
    <lastmod>2025-10-29</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://litek.typist.cc/tool/uuid</loc>
    <lastmod>2025-10-29</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://litek.typist.cc/tool/json</loc>
    <lastmod>2025-10-29</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://litek.typist.cc/tool/base64</loc>
    <lastmod>2025-10-29</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://litek.typist.cc/tool/network/dns</loc>
    <lastmod>2025-10-29</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://litek.typist.cc/tool/network/ping</loc>
    <lastmod>2025-10-29</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://litek.typist.cc/tool/network/tcping</loc>
    <lastmod>2025-10-29</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://litek.typist.cc/tool/network/speedtest</loc>
    <lastmod>2025-10-29</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://litek.typist.cc/tool/network/ipquery</loc>
    <lastmod>2025-10-29</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
 </urlset>
--- a/scripts/generate-sitemap.ts
+++ b/scripts/generate-sitemap.ts
@@ -0,0 +1,83 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 interface SitemapUrl {
  loc: string;
  lastmod: string;
  changefreq: string;
  priority: string;
 }
 const BASE_URL = 'https://litek.typist.cc';
 const currentDate = new Date().toISOString().split('T')[0];
 const tools = [
  { path: '/tool/uuid', priority: '0.9' },
  { path: '/tool/json', priority: '0.9' },
  { path: '/tool/base64', priority: '0.9' },
  { path: '/tool/network/dns', priority: '0.8' },
  { path: '/tool/network/ping', priority: '0.8' },
  { path: '/tool/network/tcping', priority: '0.8' },
  { path: '/tool/network/speedtest', priority: '0.8' },
  { path: '/tool/network/ipquery', priority: '0.8' },
 ];
 const urls: SitemapUrl[] = [
  {
    loc: BASE_URL,
    lastmod: currentDate,
    changefreq: 'weekly',
    priority: '1.0',
  },
  {
    loc: `${BASE_URL}/tool`,
    lastmod: currentDate,
    changefreq: 'weekly',
    priority: '0.9',
  },
 ];
 // Add all tool pages
 tools.forEach((tool) => {
  urls.push({
    loc: `${BASE_URL}${tool.path}`,
    lastmod: currentDate,
    changefreq: 'monthly',
    priority: tool.priority,
  });
 });
 function generateSitemap(): string {
  let xml = '<?xml version="1.0" encoding="UTF-8"?>\n';
  xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n';
  urls.forEach((url) => {
    xml += '  <url>\n';
    xml += `    <loc>${url.loc}</loc>\n`;
    xml += `    <lastmod>${url.lastmod}</lastmod>\n`;
    xml += `    <changefreq>${url.changefreq}</changefreq>\n`;
    xml += `    <priority>${url.priority}</priority>\n`;
    xml += '  </url>\n';
  });
  xml += '</urlset>\n';
  return xml;
 }
 // Generate and write sitemap
 const sitemap = generateSitemap();
 const publicDir = path.resolve(__dirname, '../public');
 const sitemapPath = path.join(publicDir, 'sitemap.xml');
 // Ensure public directory exists
 if (!fs.existsSync(publicDir)) {
  fs.mkdirSync(publicDir, { recursive: true });
 }
 fs.writeFileSync(sitemapPath, sitemap, 'utf-8');
 console.log(`✅ Sitemap generated successfully at ${sitemapPath}`);
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -1,40 +1,124 @@
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import type { ReactNode } from "react";
 import { tools } from "@/components/tool";
 import { Link } from "react-router-dom";
-import { ModeToggle } from "@/components/theme/toggle";
+import { ChevronRight } from "lucide-react";
 import { Button } from "../ui/button";
-export const AppSidebar = () => (
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenuButton, SidebarMenuItem, SidebarMenu, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton } from "@/components/ui/sidebar";
-  <Sidebar>
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
-    <SidebarHeader className="text-2xl font-bold flex justify-center items-center">
+import { tools, type Tool } from "@/components/tool";
-      Lite Kit
+
-    </SidebarHeader>
+
-    <SidebarContent>
+export const AppSidebar = () => {
-      <SidebarGroup>
+  // 递归构建完整路径
-        <SidebarGroupLabel>
+  const buildFullPath = (pathSegments: string[]): string => {
-          Tools
+    return `/tool/${pathSegments.join("/")}`;
-        </SidebarGroupLabel>
+  };
-        <SidebarGroupContent>
+
-          {
+  // 递归渲染子菜单内容
-            tools.map((tool) => (
+  const renderSubMenuContent = (child: Tool, currentPaths: string[]): ReactNode => {
-              <SidebarMenuItem key={tool.name}>
+    if (child.children) {
-                <SidebarMenuButton asChild>
+      // 子菜单内的可折叠项
-                  <Link to={`/tool/${tool.path}`} title={tool.description}>
+      return (
-                    {tool.icon}
+        <Collapsible defaultOpen={false} className="group/collapsible">
-                    {tool.name}
+          <CollapsibleTrigger asChild>
-                  </Link>
+            <SidebarMenuSubButton>
-                </SidebarMenuButton>
+              {child.icon}
-              </SidebarMenuItem>
+              <span>{child.name}</span>
-            ))
+              <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-          }
+            </SidebarMenuSubButton>
-        </SidebarGroupContent>
+          </CollapsibleTrigger>
-      </SidebarGroup>
+          <CollapsibleContent>
-    </SidebarContent>
+            <SidebarMenuSub>
-    <SidebarFooter className="flex flex-row justify-between items-center gap-2">
+              {child.children.map((subChild) => (
-      <Button variant="link">
+                <SidebarMenuSubItem key={subChild.name}>
-        <a href="mailto:litek@mail.typist.cc">need more tools?</a>
+                  {renderSubMenuContent(subChild, [...currentPaths, child.path])}
-      </Button>
+                </SidebarMenuSubItem>
-      <ModeToggle />
+              ))}
-    </SidebarFooter>
+            </SidebarMenuSub>
-  </Sidebar>
+          </CollapsibleContent>
-)
+        </Collapsible>
      );
    }
    // 叶子节点
    return (
      <SidebarMenuSubButton asChild>
        <Link
          to={buildFullPath([...currentPaths, child.path])}
          title={child.description}
        >
          {child.icon}
          <span>{child.name}</span>
        </Link>
      </SidebarMenuSubButton>
    );
  };
  // 递归渲染菜单项
  const renderMenuItem = (tool: Tool, parentPaths: string[] = []): ReactNode => {
    const currentPaths = [...parentPaths, tool.path];
    if (tool.children) {
      // 有子菜单的项目
      return (
        <SidebarMenuItem key={tool.name}>
          <Collapsible
            defaultOpen={false}
            className="group/collapsible"
          >
            <CollapsibleTrigger asChild>
              <SidebarMenuButton tooltip={tool.description}>
                {tool.icon}
                <span>{tool.name}</span>
                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
              </SidebarMenuButton>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <SidebarMenuSub>
                {tool.children.map((child) => (
                  <SidebarMenuSubItem key={child.name}>
                    {renderSubMenuContent(child, currentPaths)}
                  </SidebarMenuSubItem>
                ))}
              </SidebarMenuSub>
            </CollapsibleContent>
          </Collapsible>
        </SidebarMenuItem>
      );
    }
    // 没有子菜单的项目
    return (
      <SidebarMenuItem key={tool.name}>
        <SidebarMenuButton asChild tooltip={tool.description}>
          <Link to={buildFullPath(currentPaths)}>
            {tool.icon}
            <span>{tool.name}</span>
          </Link>
        </SidebarMenuButton>
      </SidebarMenuItem>
    );
  };
  return (
    <Sidebar>
      <SidebarHeader className="text-2xl font-bold flex justify-center items-center">
        Lite Kit
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Tools</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {tools.map((tool) => renderMenuItem(tool))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter className="flex flex-row justify-between items-center gap-2">
        <SidebarMenuButton variant="outline" asChild>
          <a href="mailto:litek@mail.typist.cc">need more tools?</a>
        </SidebarMenuButton>
      </SidebarFooter>
    </Sidebar>
  );
 };
--- a/src/components/tool/index.tsx
+++ b/src/components/tool/index.tsx
@@ -1,16 +1,23 @@
-import type { ReactNode } from 'react';
+import { lazy, type ReactNode, type ComponentType } from 'react';
-import { FileJson, Hash, Binary } from 'lucide-react'
+import { FileJson, Hash, Binary, Network, Globe, Activity, Gauge, Wifi, MapPin } from 'lucide-react'
-import UUID from './uuid'
+// 懒加载工具组件
-import JSON from './json'
+const UUID = lazy(() => import('./uuid'))
-import Base64 from './base64'
+const JSON = lazy(() => import('./json'))
 const Base64 = lazy(() => import('./base64'))
 const DNS = lazy(() => import('./network/dns'))
 const Ping = lazy(() => import('./network/ping'))
 const TCPing = lazy(() => import('./network/tcping'))
 const SpeedTest = lazy(() => import('./network/speedtest'))
 const IPQuery = lazy(() => import('./network/ipquery'))
 export interface Tool {
  path: string;
  name: string;
  icon: ReactNode;
  description: string;
-  component: ReactNode;
+  component?: ComponentType;
  children?: Tool[];
 }
 export const tools: Tool[] = [
@@ -19,20 +26,63 @@ export const tools: Tool[] = [
    name: "UUID Generator",
    description: "Generate a UUID",
    icon: <Hash />,
-    component: <UUID />,
+    component: UUID,
  },
  {
    path: "json",
    name: "JSON Formatter",
    description: "Format and validate JSON",
    icon: <FileJson />,
-    component: <JSON />,
+    component: JSON,
  },
  {
    path: "base64",
    name: "Base64 Encoder/Decoder",
    description: "Encode and decode Base64",
    icon: <Binary />,
-    component: <Base64 />,
+    component: Base64,
-  }
+  },
  {
    path: "network",
    name: "Network Tools",
    description: "Network testing tools",
    icon: <Network />,
    children: [
      {
        path: "dns",
        name: "DNS Lookup",
        description: "DNS query tool",
        icon: <Globe />,
        component: DNS,
      },
      {
        path: "ping",
        name: "Ping",
        description: "Ping test tool",
        icon: <Activity />,
        component: Ping,
      },
      {
        path: "tcping",
        name: "TCPing",
        description: "TCP port connectivity test",
        icon: <Wifi />,
        component: TCPing,
      },
      {
        path: "speedtest",
        name: "Speed Test",
        description: "Website speed test",
        icon: <Gauge />,
        component: SpeedTest,
      },
      {
        path: "ipquery",
        name: "IP Query",
        description: "Query IP location, quality and risk info",
        icon: <MapPin />,
        component: IPQuery,
      },
    ],
  },
 ];
--- a/src/components/tool/network/dns.tsx
+++ b/src/components/tool/network/dns.tsx
@@ -0,0 +1,200 @@
 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 DNSRecord {
  name: string;
  type: number;
  TTL: number;
  data: string;
 }
 interface DNSResponse {
  Status: number;
  Answer?: DNSRecord[];
  Question?: Array<{ name: string; type: number }>;
 }
 const DNS_RECORD_TYPES = [
  { value: "1", label: "A", description: "IPv4 Address" },
  { value: "28", label: "AAAA", description: "IPv6 Address" },
  { value: "5", label: "CNAME", description: "Canonical Name" },
  { value: "15", label: "MX", description: "Mail Exchange" },
  { value: "2", label: "NS", description: "Name Server" },
  { value: "16", label: "TXT", description: "Text Record" },
  { value: "6", label: "SOA", description: "Start of Authority" },
  { value: "257", label: "CAA", description: "Certification Authority Authorization" },
  { value: "12", label: "PTR", description: "Pointer Record" },
  { value: "33", label: "SRV", description: "Service Record" },
 ];
 const getRecordTypeName = (type: number): string => {
  const record = DNS_RECORD_TYPES.find((r) => r.value === String(type));
  return record ? record.label : `TYPE${type}`;
 };
 const Tool: FC = () => {
  const [domain, setDomain] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const [results, setResults] = useState<DNSRecord[]>([]);
  const [queryTime, setQueryTime] = useState<number>(0);
  const handleDomainBlur = () => {
    if (!domain.trim()) return;
    let input = domain.trim();
    let cleanDomain = input;
    try {
      // Try to parse as URL
      const url = new URL(input.startsWith('http') ? input : `https://${input}`);
      cleanDomain = url.hostname;
    } catch {
      // If parsing fails, fallback to manual cleanup
      cleanDomain = input.replace(/^https?:\/\//, "").split("/")[0].split(":")[0];
    }
    if (cleanDomain !== input) {
      setDomain(cleanDomain);
    }
  };
  const queryDNS = async () => {
    if (!domain.trim()) {
      toast.error("Please enter a domain name");
      return;
    }
    setLoading(true);
    setResults([]);
    setQueryTime(0);
    const startTime = performance.now();
    try {
      // Query all record types concurrently
      const queries = DNS_RECORD_TYPES.map((recordType) =>
        fetch(
          `https://cloudflare-dns.com/dns-query?name=${encodeURIComponent(
            domain.trim()
          )}&type=${recordType.value}`,
          {
            headers: {
              Accept: "application/dns-json",
            },
          }
        )
          .then((response) => response.json())
          .then((data: DNSResponse) => {
            if (data.Status === 0 && data.Answer && data.Answer.length > 0) {
              return data.Answer;
            }
            return [];
          })
          .catch(() => [])
      );
      const allResults = await Promise.all(queries);
      const endTime = performance.now();
      setQueryTime(endTime - startTime);
      // Merge and deduplicate results
      const combinedResults = allResults.flat();
      if (combinedResults.length > 0) {
        // Group by record type and deduplicate
        const uniqueResults = Array.from(
          new Map(
            combinedResults.map((record) => [
              `${record.name}-${record.type}-${record.data}`,
              record,
            ])
          ).values()
        );
        setResults(uniqueResults);
        toast.success(`Query successful, found ${uniqueResults.length} record(s)`);
      } else {
        setResults([]);
        toast.info("No records found");
      }
    } catch (error: unknown) {
      if (error instanceof Error) {
        toast.error(`Query failed: ${error.message}`);
      } else {
        toast.error("Query failed");
      }
      setResults([]);
    } finally {
      setLoading(false);
    }
  };
  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" && !loading) {
      queryDNS();
    }
  };
  return (
    <div className="flex flex-col gap-4 h-full">
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">Domain Name</label>
          <Input
            placeholder="e.g. example.com"
            value={domain}
            onChange={(e) => setDomain(e.target.value)}
            onBlur={handleDomainBlur}
            onKeyPress={handleKeyPress}
            disabled={loading}
          />
          <span className="text-xs text-muted-foreground">
            Will automatically query all DNS record types
          </span>
        </div>
        <Button onClick={queryDNS} disabled={loading} className="w-full">
          {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
          {loading ? "Querying..." : "Query All Records"}
        </Button>
      </div>
      {queryTime > 0 && (
        <div className="text-sm text-muted-foreground">
          Query time: {queryTime.toFixed(2)} ms
        </div>
      )}
      {results.length > 0 && (
        <div className="flex flex-col gap-3 flex-1 overflow-auto">
          <div className="text-sm font-medium">Query Results:</div>
          <div className="space-y-2">
            {results.map((record, index) => (
              <div
                key={index}
                className="border rounded-md p-3 bg-card text-card-foreground"
              >
                <div className="grid grid-cols-2 gap-2 text-sm">
                  <div className="text-muted-foreground">Name:</div>
                  <div className="font-mono break-all">{record.name}</div>
                  <div className="text-muted-foreground">Type:</div>
                  <div>{getRecordTypeName(record.type)}</div>
                  <div className="text-muted-foreground">TTL:</div>
                  <div>{record.TTL} seconds</div>
                  <div className="text-muted-foreground">Data:</div>
                  <div className="font-mono break-all">{record.data}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
 };
 export default Tool;
--- a/src/components/tool/network/ipquery.tsx
+++ b/src/components/tool/network/ipquery.tsx
@@ -0,0 +1,296 @@
 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 IPInfo {
  ip: string;
  city?: string;
  region?: string;
  country?: string;
  countryCode?: string;
  loc?: string;
  org?: string;
  timezone?: string;
  isp?: string;
  as?: string;
  proxy?: boolean;
  hosting?: boolean;
  query?: string;
 }
 const Tool: FC = () => {
  const [ip, setIp] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const [ipInfo, setIpInfo] = useState<IPInfo | null>(null);
  const [queryTime, setQueryTime] = useState<number>(0);
  const isValidIP = (ip: string): boolean => {
    // IPv4 正则
    const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
    // IPv6 正则 (简化版)
    const ipv6Regex = /^([0-9a-fA-F]{0,4}:){2,7}[0-9a-fA-F]{0,4}$/;
    if (ipv4Regex.test(ip)) {
      const parts = ip.split('.');
      return parts.every(part => parseInt(part) >= 0 && parseInt(part) <= 255);
    }
    return ipv6Regex.test(ip);
  };
  const queryCurrentIP = async () => {
    setLoading(true);
    setIpInfo(null);
    setQueryTime(0);
    const startTime = performance.now();
    try {
      // 使用 ipinfo.io 查询当前IP (免费，无需密钥)
      const response = await fetch("https://ipinfo.io/json");
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      const endTime = performance.now();
      setQueryTime(endTime - startTime);
      setIpInfo(data);
      setIp(data.ip);
      toast.success("Successfully queried current IP");
    } catch (error) {
      if (error instanceof Error) {
        toast.error(`Query failed: ${error.message}`);
      } else {
        toast.error("Query failed");
      }
    } finally {
      setLoading(false);
    }
  };
  const queryIP = async () => {
    if (!ip.trim()) {
      toast.error("Please enter an IP address");
      return;
    }
    if (!isValidIP(ip.trim())) {
      toast.error("Invalid IP address format");
      return;
    }
    setLoading(true);
    setIpInfo(null);
    setQueryTime(0);
    const startTime = performance.now();
    try {
      // 使用 ipinfo.io (免费，稳定可靠)
      const response = await fetch(`https://ipinfo.io/${encodeURIComponent(ip.trim())}/json`);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      const endTime = performance.now();
      setQueryTime(endTime - startTime);
      // ipinfo.io 返回格式已经符合 IPInfo 接口
      setIpInfo(data);
      toast.success("Query successful");
    } catch (error) {
      if (error instanceof Error) {
        toast.error(`Query failed: ${error.message}`);
      } else {
        toast.error("Query failed");
      }
    } finally {
      setLoading(false);
    }
  };
  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" && !loading) {
      queryIP();
    }
  };
  const getRiskLevel = () => {
    if (!ipInfo) return null;
    // ipinfo.io 通过 org 字段可以简单判断是否为托管IP
    const orgLower = ipInfo.org?.toLowerCase() || "";
    const isHosting = orgLower.includes("hosting") || 
                     orgLower.includes("datacenter") || 
                     orgLower.includes("cloud") ||
                     orgLower.includes("server");
    if (isHosting) {
      return {
        level: "Medium",
        color: "text-yellow-500",
        reasons: ["Possible Hosting/Datacenter IP"],
      };
    }
    return {
      level: "Low",
      color: "text-green-500",
      reasons: ["Regular residential IP"],
    };
  };
  const riskInfo = getRiskLevel();
  return (
    <div className="flex flex-col gap-4 h-full">
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">IP Address</label>
          <Input
            placeholder="e.g. 8.8.8.8 or leave empty for current IP"
            value={ip}
            onChange={(e) => setIp(e.target.value)}
            onKeyPress={handleKeyPress}
            disabled={loading}
          />
          <span className="text-xs text-muted-foreground">
            Supports IPv4 and IPv6 addresses
          </span>
        </div>
        <div className="flex gap-2">
          <Button onClick={queryIP} disabled={loading} className="flex-1">
            {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
            {loading ? "Querying..." : "Query IP"}
          </Button>
          <Button 
            onClick={queryCurrentIP} 
            disabled={loading} 
            variant="outline"
            className="flex-1"
          >
            {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
            Query My IP
          </Button>
        </div>
      </div>
      {queryTime > 0 && (
        <div className="text-sm text-muted-foreground">
          Query time: {queryTime.toFixed(2)} ms
        </div>
      )}
      {ipInfo && (
        <div className="flex flex-col gap-3 flex-1 overflow-auto">
          <div className="text-sm font-medium">IP Information:</div>
          {/* 基本信息 */}
          <div className="border rounded-md p-4 bg-card text-card-foreground">
            <div className="text-sm font-medium mb-3">Basic Information</div>
            <div className="grid grid-cols-2 gap-2 text-sm">
              <div className="text-muted-foreground">IP Address:</div>
              <div className="font-mono">{ipInfo.ip || ipInfo.query}</div>
              {ipInfo.country && (
                <>
                  <div className="text-muted-foreground">Country:</div>
                  <div>{ipInfo.country} ({ipInfo.countryCode})</div>
                </>
              )}
              {ipInfo.region && (
                <>
                  <div className="text-muted-foreground">Region:</div>
                  <div>{ipInfo.region}</div>
                </>
              )}
              {ipInfo.city && (
                <>
                  <div className="text-muted-foreground">City:</div>
                  <div>{ipInfo.city}</div>
                </>
              )}
              {ipInfo.loc && (
                <>
                  <div className="text-muted-foreground">Coordinates:</div>
                  <div className="font-mono">{ipInfo.loc}</div>
                </>
              )}
              {ipInfo.timezone && (
                <>
                  <div className="text-muted-foreground">Timezone:</div>
                  <div>{ipInfo.timezone}</div>
                </>
              )}
            </div>
          </div>
          {/* 网络信息 */}
          {(ipInfo.isp || ipInfo.org || ipInfo.as) && (
            <div className="border rounded-md p-4 bg-card text-card-foreground">
              <div className="text-sm font-medium mb-3">Network Information</div>
              <div className="grid grid-cols-2 gap-2 text-sm">
                {ipInfo.isp && (
                  <>
                    <div className="text-muted-foreground">ISP:</div>
                    <div>{ipInfo.isp}</div>
                  </>
                )}
                {ipInfo.org && (
                  <>
                    <div className="text-muted-foreground">Organization:</div>
                    <div>{ipInfo.org}</div>
                  </>
                )}
                {ipInfo.as && (
                  <>
                    <div className="text-muted-foreground">AS Number:</div>
                    <div className="font-mono">{ipInfo.as}</div>
                  </>
                )}
              </div>
            </div>
          )}
          {/* 风险评估 */}
          {riskInfo && (
            <div className="border rounded-md p-4 bg-card text-card-foreground">
              <div className="text-sm font-medium mb-3">Risk Assessment</div>
              <div className="grid grid-cols-2 gap-2 text-sm">
                <div className="text-muted-foreground">Risk Level:</div>
                <div className={`font-medium ${riskInfo.color}`}>
                  {riskInfo.level}
                </div>
                <div className="text-muted-foreground">Details:</div>
                <div className="space-y-1">
                  {riskInfo.reasons.map((reason, idx) => (
                    <div key={idx} className="text-sm">{reason}</div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
 };
 export default Tool;
--- a/src/components/tool/network/ping.tsx
+++ b/src/components/tool/network/ping.tsx
@@ -0,0 +1,278 @@
 import { useState, useEffect, useRef, 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 PingResult {
  seq: number;
  time: number;
  success: boolean;
  error?: string;
 }
 interface PingStats {
  sent: number;
  received: number;
  lost: number;
  min: number;
  max: number;
  avg: number;
 }
 const Tool: FC = () => {
  const [url, setUrl] = useState<string>("");
  const [running, setRunning] = useState<boolean>(false);
  const [results, setResults] = useState<PingResult[]>([]);
  const [stats, setStats] = useState<PingStats>({
    sent: 0,
    received: 0,
    lost: 0,
    min: 0,
    max: 0,
    avg: 0,
  });
  const intervalRef = useRef<number | null>(null);
  const seqRef = useRef<number>(0);
  const resultsContainerRef = useRef<HTMLDivElement>(null);
  const handleUrlBlur = () => {
    if (!url.trim()) return;
    let input = url.trim();
    try {
      // Try to parse as URL
      const parsedUrl = new URL(input.startsWith('http') ? input : `https://${input}`);
      const normalizedUrl = parsedUrl.toString();
      if (normalizedUrl !== input) {
        setUrl(normalizedUrl);
      }
    } catch {
      // If parsing fails, add https:// prefix
      if (!input.startsWith("http://") && !input.startsWith("https://")) {
        setUrl(`https://${input}`);
      }
    }
  };
  const ping = async () => {
    if (!url.trim()) {
      toast.error("Please enter a URL");
      return;
    }
    const seq = ++seqRef.current;
    const targetUrl = url.trim();
    const startTime = performance.now();
    try {
      await fetch(targetUrl, {
        method: "HEAD",
        mode: "no-cors",
        cache: "no-cache",
      });
      const endTime = performance.now();
      const time = endTime - startTime;
      const newResult: PingResult = {
        seq,
        time,
        success: true,
      };
      setResults((prev) => [...prev, newResult]);
      updateStats(newResult);
    } catch (error: unknown) {
      const endTime = performance.now();
      const time = endTime - startTime;
      const errorMessage =
        error instanceof Error ? error.message : "Request failed";
      const newResult: PingResult = {
        seq,
        time,
        success: false,
        error: errorMessage,
      };
      setResults((prev) => [...prev, newResult]);
      updateStats(newResult);
    }
  };
  const updateStats = (newResult: PingResult) => {
    setStats((prev) => {
      const sent = prev.sent + 1;
      const received = newResult.success ? prev.received + 1 : prev.received;
      const lost = sent - received;
      let min = prev.min;
      let max = prev.max;
      let avg = prev.avg;
      if (newResult.success) {
        if (received === 1) {
          min = newResult.time;
          max = newResult.time;
          avg = newResult.time;
        } else {
          min = Math.min(min, newResult.time);
          max = Math.max(max, newResult.time);
          avg = (prev.avg * (received - 1) + newResult.time) / received;
        }
      }
      return { sent, received, lost, min, max, avg };
    });
  };
  const startPing = () => {
    if (!url.trim()) {
      toast.error("Please enter a URL");
      return;
    }
    setRunning(true);
    setResults([]);
    setStats({
      sent: 0,
      received: 0,
      lost: 0,
      min: 0,
      max: 0,
      avg: 0,
    });
    seqRef.current = 0;
    // Execute first ping immediately
    ping();
    // Then execute every second
    intervalRef.current = window.setInterval(ping, 1000);
  };
  const stopPing = () => {
    setRunning(false);
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };
  useEffect(() => {
    // Auto-scroll to bottom
    if (resultsContainerRef.current) {
      resultsContainerRef.current.scrollTop =
        resultsContainerRef.current.scrollHeight;
    }
  }, [results]);
  useEffect(() => {
    // Cleanup timer
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);
  const lossRate =
    stats.sent > 0 ? ((stats.lost / stats.sent) * 100).toFixed(1) : "0.0";
  return (
    <div className="flex flex-col gap-4 h-full">
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">Target URL or IP</label>
          <Input
            placeholder="e.g. example.com or https://example.com"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            onBlur={handleUrlBlur}
            disabled={running}
          />
        </div>
        <div className="flex gap-2">
          {!running ? (
            <Button onClick={startPing} className="flex-1">
              Start Ping
            </Button>
          ) : (
            <Button onClick={stopPing} variant="destructive" className="flex-1">
              Stop
            </Button>
          )}
        </div>
      </div>
      {stats.sent > 0 && (
        <div className="border rounded-md p-3 bg-card text-card-foreground">
          <div className="text-sm font-medium mb-2">Statistics</div>
          <div className="grid grid-cols-2 gap-2 text-sm">
            <div className="text-muted-foreground">Sent:</div>
            <div>{stats.sent} packets</div>
            <div className="text-muted-foreground">Received:</div>
            <div>{stats.received} packets</div>
            <div className="text-muted-foreground">Lost:</div>
            <div>
              {stats.lost} packets ({lossRate}%)
            </div>
            {stats.received > 0 && (
              <>
                <div className="text-muted-foreground">Min Latency:</div>
                <div>{stats.min.toFixed(2)} ms</div>
                <div className="text-muted-foreground">Max Latency:</div>
                <div>{stats.max.toFixed(2)} ms</div>
                <div className="text-muted-foreground">Avg Latency:</div>
                <div>{stats.avg.toFixed(2)} ms</div>
              </>
            )}
          </div>
        </div>
      )}
      {results.length > 0 && (
        <div className="flex flex-col gap-2 flex-1 overflow-hidden">
          <div className="text-sm font-medium">Ping Results:</div>
          <div
            ref={resultsContainerRef}
            className="flex-1 overflow-auto space-y-1 font-mono text-sm border rounded-md p-3 bg-card"
          >
            {results.map((result) => (
              <div
                key={result.seq}
                className={result.success ? "text-green-500" : "text-red-500"}
              >
                {result.success ? (
                  <>
                    seq={result.seq} time={result.time.toFixed(2)}ms
                  </>
                ) : (
                  <>
                    seq={result.seq} Request timeout
                    {result.error && ` (${result.error})`}
                  </>
                )}
              </div>
            ))}
            {running && (
              <div className="flex items-center gap-2 text-muted-foreground">
                <Loader2 className="size-3 animate-spin" />
                Running...
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
 };
 export default Tool;
--- a/src/components/tool/network/speedtest.tsx
+++ b/src/components/tool/network/speedtest.tsx
@@ -0,0 +1,355 @@
 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 {
        // If no detailed performance data, only return total time
        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 handleUrlBlur = () => {
    if (!url.trim()) return;
    let input = url.trim();
    try {
      // Try to parse as URL
      const parsedUrl = new URL(input.startsWith('http') ? input : `https://${input}`);
      const normalizedUrl = parsedUrl.toString();
      if (normalizedUrl !== input) {
        setUrl(normalizedUrl);
      }
    } catch {
      // If parsing fails, add https:// prefix
      if (!input.startsWith("http://") && !input.startsWith("https://")) {
        setUrl(`https://${input}`);
      }
    }
  };
  const startTest = async () => {
    if (!url.trim()) {
      toast.error("Please enter a URL");
      return;
    }
    const targetUrl = url.trim();
    setTesting(true);
    setResult(null);
    try {
      let testResult: SpeedTestResult = {};
      switch (testType) {
        case "performance":
          testResult = await testPerformance(targetUrl);
          toast.success("Performance test completed");
          break;
        case "download":
          testResult = await testDownloadSpeed(targetUrl);
          toast.success("Download speed test completed");
          break;
        case "upload":
          testResult = await testUploadSpeed(targetUrl);
          toast.success("Upload speed test completed");
          break;
      }
      setResult(testResult);
    } catch (error: unknown) {
      if (error instanceof Error) {
        toast.error(`Test failed: ${error.message}`);
      } else {
        toast.error("Test failed");
      }
    } 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 Restrictions
        </div>
        <div className="text-xs text-muted-foreground space-y-1">
          <p>Due to browser CORS security policies, some websites cannot be tested directly.</p>
          <p>Recommended websites to test:</p>
          <ul className="list-disc list-inside ml-2">
            <li>Public APIs with CORS support</li>
            <li>Your own websites (with configured CORS headers)</li>
            <li>Using CORS proxy services</li>
          </ul>
        </div>
      </div>
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">Target URL</label>
          <Input
            placeholder="e.g. https://example.com"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            onBlur={handleUrlBlur}
            onKeyPress={handleKeyPress}
            disabled={testing}
          />
        </div>
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">Test Type</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">Page Load Performance</option>
            <option value="download">Download Speed</option>
            <option value="upload">Upload Speed</option>
          </select>
        </div>
        <Button onClick={startTest} disabled={testing} className="w-full">
          {testing && <Loader2 className="mr-2 size-4 animate-spin" />}
          {testing ? "Testing..." : "Start Test"}
        </Button>
      </div>
      {result && (
        <div className="flex flex-col gap-3 flex-1 overflow-auto">
          <div className="text-sm font-medium">Test Results:</div>
          {result.performance && (
            <div className="border rounded-md p-3 bg-card text-card-foreground">
              <div className="text-sm font-medium mb-3">Page Load Performance</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 Lookup:</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 Connection:</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 Handshake:</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">Time to First Byte (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">Content Download:</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">Total Time:</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">Download Speed</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">Upload Speed</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">
          Note: Download speed test will download content from the target URL and calculate speed
        </div>
      )}
      {testType === "upload" && (
        <div className="text-xs text-muted-foreground">
          Note: Upload speed test will send 1MB of test data to the target URL
        </div>
      )}
    </div>
  );
 };
 export default Tool;
--- a/src/components/tool/network/tcping.tsx
+++ b/src/components/tool/network/tcping.tsx
@@ -0,0 +1,323 @@
 import { useState, useEffect, useRef, 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 TCPingResult {
  seq: number;
  time: number;
  success: boolean;
  error?: string;
 }
 interface TCPingStats {
  sent: number;
  received: number;
  lost: number;
  min: number;
  max: number;
  avg: number;
 }
 const Tool: FC = () => {
  const [host, setHost] = useState<string>("");
  const [port, setPort] = useState<string>("443");
  const [running, setRunning] = useState<boolean>(false);
  const [results, setResults] = useState<TCPingResult[]>([]);
  const [stats, setStats] = useState<TCPingStats>({
    sent: 0,
    received: 0,
    lost: 0,
    min: 0,
    max: 0,
    avg: 0,
  });
  const intervalRef = useRef<number | null>(null);
  const seqRef = useRef<number>(0);
  const resultsContainerRef = useRef<HTMLDivElement>(null);
  const handleHostBlur = () => {
    if (!host.trim()) return;
    let input = host.trim();
    let cleanHost = input;
    let extractedPort: string | null = null;
    try {
      // Try to parse as URL
      const url = new URL(input.startsWith('http') ? input : `https://${input}`);
      cleanHost = url.hostname;
      // Extract port if specified in URL
      if (url.port) {
        extractedPort = url.port;
      }
    } catch {
      // If parsing fails, fallback to manual cleanup
      const withoutProtocol = input.replace(/^https?:\/\//, "");
      const withoutPath = withoutProtocol.split("/")[0];
      // Check for port in the format hostname:port
      const portMatch = withoutPath.match(/^(.+):(\d+)$/);
      if (portMatch) {
        cleanHost = portMatch[1];
        extractedPort = portMatch[2];
      } else {
        cleanHost = withoutPath;
      }
    }
    if (cleanHost !== input) {
      setHost(cleanHost);
    }
    if (extractedPort) {
      setPort(extractedPort);
    }
  };
  const tcping = async () => {
    if (!host.trim()) {
      toast.error("Please enter a hostname or IP");
      return;
    }
    const seq = ++seqRef.current;
    const portNum = parseInt(port) || 443;
    const targetHost = host.trim();
    // Build test URL
    const protocol = portNum === 443 ? "https" : "http";
    const url = `${protocol}://${targetHost}:${portNum}`;
    const startTime = performance.now();
    try {
      // 使用 fetch 测试连接
      await fetch(url, {
        method: "HEAD",
        mode: "no-cors",
        cache: "no-cache",
      });
      const endTime = performance.now();
      const time = endTime - startTime;
      const newResult: TCPingResult = {
        seq,
        time,
        success: true,
      };
      setResults((prev) => [...prev, newResult]);
      updateStats(newResult);
    } catch (error: unknown) {
      const endTime = performance.now();
      const time = endTime - startTime;
      const errorMessage =
        error instanceof Error ? error.message : "Connection failed";
      const newResult: TCPingResult = {
        seq,
        time,
        success: false,
        error: errorMessage,
      };
      setResults((prev) => [...prev, newResult]);
      updateStats(newResult);
    }
  };
  const updateStats = (newResult: TCPingResult) => {
    setStats((prev) => {
      const sent = prev.sent + 1;
      const received = newResult.success ? prev.received + 1 : prev.received;
      const lost = sent - received;
      let min = prev.min;
      let max = prev.max;
      let avg = prev.avg;
      if (newResult.success) {
        if (received === 1) {
          min = newResult.time;
          max = newResult.time;
          avg = newResult.time;
        } else {
          min = Math.min(min, newResult.time);
          max = Math.max(max, newResult.time);
          avg = (prev.avg * (received - 1) + newResult.time) / received;
        }
      }
      return { sent, received, lost, min, max, avg };
    });
  };
  const startTCPing = () => {
    if (!host.trim()) {
      toast.error("Please enter a hostname or IP");
      return;
    }
    setRunning(true);
    setResults([]);
    setStats({
      sent: 0,
      received: 0,
      lost: 0,
      min: 0,
      max: 0,
      avg: 0,
    });
    seqRef.current = 0;
    // 立即执行第一次 tcping
    tcping();
    // 然后每秒执行一次
    intervalRef.current = window.setInterval(tcping, 1000);
  };
  const stopTCPing = () => {
    setRunning(false);
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };
  useEffect(() => {
    // 自动滚动到底部
    if (resultsContainerRef.current) {
      resultsContainerRef.current.scrollTop =
        resultsContainerRef.current.scrollHeight;
    }
  }, [results]);
  useEffect(() => {
    // 清理定时器
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);
  const lossRate =
    stats.sent > 0 ? ((stats.lost / stats.sent) * 100).toFixed(1) : "0.0";
  return (
    <div className="flex flex-col gap-4 h-full">
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">Hostname or IP</label>
          <Input
            placeholder="e.g. example.com or 192.168.1.1"
            value={host}
            onChange={(e) => setHost(e.target.value)}
            onBlur={handleHostBlur}
            disabled={running}
          />
        </div>
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">Port</label>
          <Input
            type="number"
            placeholder="e.g. 443"
            value={port}
            onChange={(e) => setPort(e.target.value)}
            disabled={running}
            min="1"
            max="65535"
          />
        </div>
        <div className="flex gap-2">
          {!running ? (
            <Button onClick={startTCPing} className="flex-1">
              Start Test
            </Button>
          ) : (
            <Button
              onClick={stopTCPing}
              variant="destructive"
              className="flex-1"
            >
              Stop
            </Button>
          )}
        </div>
      </div>
      {stats.sent > 0 && (
        <div className="border rounded-md p-3 bg-card text-card-foreground">
          <div className="text-sm font-medium mb-2">Statistics</div>
          <div className="grid grid-cols-2 gap-2 text-sm">
            <div className="text-muted-foreground">Sent:</div>
            <div>{stats.sent} times</div>
            <div className="text-muted-foreground">Success:</div>
            <div>{stats.received} times</div>
            <div className="text-muted-foreground">Failed:</div>
            <div>
              {stats.lost} times ({lossRate}%)
            </div>
            {stats.received > 0 && (
              <>
                <div className="text-muted-foreground">Min Latency:</div>
                <div>{stats.min.toFixed(2)} ms</div>
                <div className="text-muted-foreground">Max Latency:</div>
                <div>{stats.max.toFixed(2)} ms</div>
                <div className="text-muted-foreground">Avg Latency:</div>
                <div>{stats.avg.toFixed(2)} ms</div>
                <div className="text-muted-foreground">Port Status:</div>
                <div className="text-green-500 font-medium">Open</div>
              </>
            )}
          </div>
        </div>
      )}
      {results.length > 0 && (
        <div className="flex flex-col gap-2 flex-1 overflow-hidden">
          <div className="text-sm font-medium">TCPing Results:</div>
          <div
            ref={resultsContainerRef}
            className="flex-1 overflow-auto space-y-1 font-mono text-sm border rounded-md p-3 bg-card"
          >
            {results.map((result) => (
              <div
                key={result.seq}
                className={result.success ? "text-green-500" : "text-red-500"}
              >
                {result.success ? (
                  <>
                    seq={result.seq} port={port} time={result.time.toFixed(2)}ms
                  </>
                ) : (
                  <>
                    seq={result.seq} port={port} Connection failed
                    {result.error && ` (${result.error})`}
                  </>
                )}
              </div>
            ))}
            {running && (
              <div className="flex items-center gap-2 text-muted-foreground">
                <Loader2 className="size-3 animate-spin" />
                Running...
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
 };
 export default Tool;
--- a/src/components/tool/uuid.tsx
+++ b/src/components/tool/uuid.tsx
@@ -1,22 +1,94 @@
-import { type FC } from "react";
+import { type FC, useState } from "react";
-
+import { RefreshCw, Copy } from "lucide-react";
 import * as uuid from 'uuid'
 import { nanoid } from 'nanoid'
 import { Button } from "@/components/ui/button";
 import { toast } from "sonner";
 interface IDGeneratorProps {
  label: string;
  value: string;
  onRegenerate: () => void;
 }
 const IDGenerator: FC<IDGeneratorProps> = ({ label, value, onRegenerate }) => {
  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(value);
      toast(`${label} has been copied to clipboard`);
    } catch (err) {
      toast.error("Copy failed");
    }
  };
  return (
    <div className="flex flex-col gap-2">
      <label className="font-medium">{label}</label>
      <div className="flex items-center gap-2">
        <span className="flex-1 px-3 py-2 bg-muted rounded-md font-mono text-sm break-all max-w-[400px]">
          {value}
        </span>
        <Button
          size="icon"
          variant="outline"
          onClick={onRegenerate}
          title="Regenerate"
        >
          <RefreshCw className="h-4 w-4" />
        </Button>
        <Button
          size="icon"
          variant="outline"
          onClick={copyToClipboard}
          title="Copy"
        >
          <Copy className="h-4 w-4" />
        </Button>
      </div>
    </div>
  );
 };
 const Tool: FC = () => {
  const [uuidV1, setUuidV1] = useState(() => uuid.v1());
  const [uuidV4, setUuidV4] = useState(() => uuid.v4());
  const [uuidV6, setUuidV6] = useState(() => uuid.v6());
  const [uuidV7, setUuidV7] = useState(() => uuid.v7());
  const [nanoId, setNanoId] = useState(() => nanoid());
  return (
    <div className="flex flex-col gap-4">
-      <span className="text-sm text-muted-foreground">Refresh the page to generate new UUID</span>
+      <span className="text-sm text-muted-foreground">Click the refresh button to regenerate the corresponding ID</span>
-      <label>UUID Version 1</label>
+      
-      <span>{uuid.v1()}</span>
+      <IDGenerator 
-      <label>UUID Version 4</label>
+        label="UUID Version 1" 
-      <span>{uuid.v4()}</span>
+        value={uuidV1} 
-      <label>UUID Version 6</label>
+        onRegenerate={() => setUuidV1(uuid.v1())} 
-      <span>{uuid.v6()}</span>
+      />
-      <label>UUID Version 7</label>
+      
-      <span>{uuid.v7()}</span>
+      <IDGenerator 
-      <label>Nano ID</label>
+        label="UUID Version 4" 
-      <span>{nanoid()}</span>
+        value={uuidV4} 
        onRegenerate={() => setUuidV4(uuid.v4())} 
      />
      <IDGenerator 
        label="UUID Version 6" 
        value={uuidV6} 
        onRegenerate={() => setUuidV6(uuid.v6())} 
      />
      <IDGenerator 
        label="UUID Version 7" 
        value={uuidV7} 
        onRegenerate={() => setUuidV7(uuid.v7())} 
      />
      <IDGenerator 
        label="Nano ID" 
        value={nanoId} 
        onRegenerate={() => setNanoId(nanoid())} 
      />
    </div>
  );
 };
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,12 @@
 "use client"
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 const Collapsible = CollapsiblePrimitive.Root
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
 export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/src/hooks/use-seo.ts
+++ b/src/hooks/use-seo.ts
@@ -0,0 +1,96 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 interface UseSEOOptions {
  title?: string;
  description?: string;
  baseUrl?: string;
 }
 /**
 * SEO Hook - 动态更新页面 SEO 元数据
 * 
 * @param options - SEO 配置选项
 * @param options.title - 页面标题（可选）
 * @param options.description - 页面描述（可选）
 * @param options.baseUrl - 网站基础 URL，默认为 https://litek.typist.cc
 * 
 * @example
 * ```tsx
 * // 在组件中使用
 * useSEO({
 *   title: 'UUID Generator',
 *   description: 'Free online UUID generator tool'
 * });
 * ```
 */
 export const useSEO = (options: UseSEOOptions = {}) => {
  const location = useLocation();
  const { 
    title, 
    description, 
    baseUrl = 'https://litek.typist.cc' 
  } = options;
  useEffect(() => {
    // 构建当前页面的完整 URL
    const canonicalUrl = `${baseUrl}${location.pathname}`;
    // 更新或创建 canonical 链接
    let canonical = document.querySelector('link[rel="canonical"]') as HTMLLinkElement;
    if (!canonical) {
      canonical = document.createElement('link');
      canonical.setAttribute('rel', 'canonical');
      document.head.appendChild(canonical);
    }
    canonical.setAttribute('href', canonicalUrl);
    // 更新页面标题
    if (title) {
      document.title = `${title} - Lite Kit`;
    }
    // 更新 meta description
    if (description) {
      let metaDescription = document.querySelector('meta[name="description"]') as HTMLMetaElement;
      if (metaDescription) {
        metaDescription.setAttribute('content', description);
      }
    }
    // 更新 Open Graph URL
    let ogUrl = document.querySelector('meta[property="og:url"]') as HTMLMetaElement;
    if (ogUrl) {
      ogUrl.setAttribute('content', canonicalUrl);
    }
    // 更新 Open Graph Title
    if (title) {
      let ogTitle = document.querySelector('meta[property="og:title"]') as HTMLMetaElement;
      if (ogTitle) {
        ogTitle.setAttribute('content', `${title} - Lite Kit`);
      }
      // 更新 Twitter Card Title
      let twitterTitle = document.querySelector('meta[name="twitter:title"]') as HTMLMetaElement;
      if (twitterTitle) {
        twitterTitle.setAttribute('content', `${title} - Lite Kit`);
      }
    }
    // 更新 Open Graph Description
    if (description) {
      let ogDescription = document.querySelector('meta[property="og:description"]') as HTMLMetaElement;
      if (ogDescription) {
        ogDescription.setAttribute('content', description);
      }
      // 更新 Twitter Card Description
      let twitterDescription = document.querySelector('meta[name="twitter:description"]') as HTMLMetaElement;
      if (twitterDescription) {
        twitterDescription.setAttribute('content', description);
      }
    }
  }, [location.pathname, title, description, baseUrl]);
 };
--- a/src/index.css
+++ b/src/index.css
@@ -116,5 +116,53 @@
  }
  body {
    @apply bg-background text-foreground;
    font-family: 'Roboto Mono', 'Noto Sans SC', 'SF Mono', Consolas, monospace;
  }
 }
 /* 自定义滚动条样式 */
 * {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.551 0.027 264.364 / 0.3) transparent;
 }
 *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
 }
 *::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
 }
 *::-webkit-scrollbar-thumb {
  background: oklch(0.551 0.027 264.364 / 0.3);
  border-radius: 4px;
  transition: background 0.2s ease;
 }
 *::-webkit-scrollbar-thumb:hover {
  background: oklch(0.551 0.027 264.364 / 0.5);
 }
 *::-webkit-scrollbar-thumb:active {
  background: oklch(0.551 0.027 264.364 / 0.6);
 }
 /* 深色模式下的滚动条 */
 .dark *::-webkit-scrollbar-thumb {
  background: oklch(0.707 0.022 261.325 / 0.4);
 }
 .dark *::-webkit-scrollbar-thumb:hover {
  background: oklch(0.707 0.022 261.325 / 0.6);
 }
 .dark *::-webkit-scrollbar-thumb:active {
  background: oklch(0.707 0.022 261.325 / 0.7);
 }
 .dark * {
  scrollbar-color: oklch(0.707 0.022 261.325 / 0.4) transparent;
 }
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -4,20 +4,28 @@ import { Outlet } from "react-router-dom";
 import { ThemeProvider } from "@/components/theme/provider"
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
 import { AppSidebar } from "@/components/sidebar";
 import { ModeToggle } from "@/components/theme/toggle";
-export const Layout: FC = () => (
+import { useSEO } from "@/hooks/use-seo";
-  <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+
-    <SidebarProvider>
+export const Layout: FC = () => {
-      <AppSidebar />
+  // 使用 SEO hook 自动更新 canonical URL 和其他 SEO 元数据
-      <div className="p-4 flex flex-col w-full h-[100vh] overflow-hidden">
+  useSEO();
-        <nav className="flex items-center justify-between">
+
-          <SidebarTrigger className="size-10" />
+  return (
-          <div role="actions" />
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-        </nav>
+      <SidebarProvider>
-        <main className="flex-1 overflow-auto p-4 overflow-hidden">
+        <AppSidebar />
-          <Outlet />
+        <div className="p-4 flex flex-col w-full h-[100vh] overflow-hidden">
-        </main>
+          <nav className="flex items-center justify-between">
-      </div>
+            <SidebarTrigger className="size-10" />
-    </SidebarProvider>
+            <ModeToggle />
-  </ThemeProvider>
+          </nav>
-);
+          <main className="flex-1 overflow-auto p-4 overflow-hidden">
            <Outlet />
          </main>
        </div>
      </SidebarProvider>
    </ThemeProvider>
  );
 };
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -13,3 +13,21 @@ createRoot(document.getElementById('root')!).render(
    <Toaster />
  </StrictMode>
 )
 // 注册 Service Worker
 if ('serviceWorker' in navigator && import.meta.env.PROD) {
  import('workbox-window').then(({ Workbox }) => {
    const wb = new Workbox('/sw.js')
    wb.addEventListener('installed', (event) => {
      if (event.isUpdate) {
        console.log('New service worker installed, reloading page...')
        window.location.reload()
      }
    })
    wb.register()
  }).catch((error) => {
    console.error('Failed to register service worker:', error)
  })
 }
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,12 +1,50 @@
 import { Suspense, createElement } from "react";
 import {
  createBrowserRouter,
  redirect,
  RouterProvider,
  type RouteObject,
 } from "react-router-dom";
-import { tools } from "@/components/tool";
+import { tools, type Tool } from "@/components/tool";
 import { Layout } from "./layout";
 // 加载中的占位组件
 const LoadingFallback = () => (
  <div className="flex items-center justify-center h-full">
    <div className="text-center flex flex-col items-center gap-3">
      <div className="relative">
        <div className="h-12 w-12 rounded-full border-4 border-muted"></div>
        <div className="absolute top-0 left-0 h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
      </div>
      <p className="text-sm text-muted-foreground font-medium">Loading...</p>
    </div>
  </div>
 );
 const buildToolRoutes = (tools: Tool[]): RouteObject[] => {
  return tools.map((tool) => {
    const route: RouteObject = {
      path: tool.path,
    };
    if (tool.component) {
      // 使用 Suspense 包裹懒加载组件
      route.element = (
        <Suspense fallback={<LoadingFallback />}>
          {createElement(tool.component)}
        </Suspense>
      );
    }
    if (tool.children && tool.children.length > 0) {
      route.children = buildToolRoutes(tool.children);
    }
    return route;
  });
 };
 // 路由配置
 const router = createBrowserRouter([
  {
@@ -16,19 +54,14 @@ const router = createBrowserRouter([
      {
        path: "tool",
        children: [
-          ...tools.map((tool) => (
+          ...buildToolRoutes(tools),
            {
              path: tool.path,
              element: tool.component,
            }
          )),
          {
            index: true,
            loader: () => redirect("/tool/uuid"),
          },
-        ]
+        ],
      },
-    ]
+    ],
  },
  {
    index: true,
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,3 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-pwa/client" />
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,13 +2,132 @@ import path from "path"
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from "@tailwindcss/vite"
 import { VitePWA } from 'vite-plugin-pwa'
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [
    react(), 
    tailwindcss(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['lite.svg', 'robots.txt', 'sitemap.xml'],
      manifest: {
        name: 'Lite Kit - Lightweight Online Tools',
        short_name: 'Lite Kit',
        description: 'Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more',
        theme_color: '#000000',
        background_color: '#000000',
        display: 'standalone',
        icons: [
          {
            src: '/lite.svg',
            type: 'image/svg+xml',
            sizes: 'any'
          }
        ]
      },
      workbox: {
        globPatterns: ['**/*.{js,css,html,svg,png,ico,woff2}'],
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/ipinfo\.io\/.*/i,
            handler: "NetworkFirst",
            options: {
              cacheName: 'ipinfo-cache',
              expiration: {
                maxEntries: 10,
                maxAgeSeconds: 60 * 60 // 延长到 1 小时
              },
              cacheableResponse: {
                statuses: [0, 200]
              }
            }
          },
          {
            // Google Fonts 样式表缓存
            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
            handler: 'StaleWhileRevalidate',
            options: {
              cacheName: 'google-fonts-stylesheets',
              expiration: {
                maxEntries: 10,
                maxAgeSeconds: 60 * 60 * 24 * 365 // 1 年
              },
              cacheableResponse: {
                statuses: [0, 200]
              }
            }
          },
          {
            // Google Fonts 字体文件缓存
            urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
            handler: 'CacheFirst',
            options: {
              cacheName: 'google-fonts-webfonts',
              expiration: {
                maxEntries: 30,
                maxAgeSeconds: 60 * 60 * 24 * 365 // 1 年
              },
              cacheableResponse: {
                statuses: [0, 200]
              }
            }
          }
        ],
        cleanupOutdatedCaches: true,
        clientsClaim: true,
        skipWaiting: true
      }
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          // React 核心拆分得更细
          if (id.includes('node_modules/react/') && !id.includes('node_modules/react-dom')) {
            return 'react-core';
          }
          if (id.includes('node_modules/react-dom/')) {
            return 'react-dom';
          }
          if (id.includes('node_modules/react-router-dom')) {
            return 'react-router';
          }
          // Radix UI组件
          if (id.includes('node_modules/@radix-ui')) {
            return 'ui-vendor';
          }
          // 图标库
          if (id.includes('node_modules/lucide-react')) {
            return 'icons';
          }
          // 其他工具库
          if (id.includes('node_modules/')) {
            return 'vendor';
          }
        },
      },
    },
    // 启用更激进的压缩
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log'],
        // 移除未使用的代码
        unused: true,
        // 移除死代码
        dead_code: true,
      },
    },
    chunkSizeWarningLimit: 500,
  },
 })
Author	SHA1	Message	Date
typist	9c2799f7d5	0.0.27 All checks were successful Build and Push Docker Image / build (push) Successful in 1m14s Details	2025-10-29 14:49:15 +08:00
typist	dd70f9d886	feat: enhance caching strategies for Google Fonts - Added caching configurations for Google Fonts stylesheets and webfonts. - Implemented 'StaleWhileRevalidate' for stylesheets and 'CacheFirst' for font files to optimize loading and improve performance.	2025-10-29 14:49:06 +08:00
typist	35cccf6a8f	0.0.26 All checks were successful Build and Push Docker Image / build (push) Successful in 1m29s Details	2025-10-29 14:45:03 +08:00
typist	c5616600fa	Merge pull request 'feat: add Google Fonts for improved typography' (#11 ) from feat/update-fonts into main Reviewed-on: #11	2025-10-29 14:43:59 +08:00
typist	986708fbb4	feat: add Google Fonts for improved typography - Included preconnect links for Google Fonts to optimize loading. - Added 'Roboto Mono' and 'Noto Sans SC' font families to enhance text presentation in the application.	2025-10-29 14:44:30 +08:00
typist	6a1b68ed2c	0.0.25 All checks were successful Build and Push Docker Image / build (push) Successful in 1m32s Details	2025-10-29 10:05:58 +08:00
typist	32970acf32	chore: support Cloudflare Web Analytics	2025-10-29 10:05:43 +08:00
typist	812bb8c248	0.0.24 All checks were successful Build and Push Docker Image / build (push) Successful in 1m21s Details	2025-10-29 09:35:10 +08:00
typist	09f9e6588f	fix: update caching strategy for ipinfo API in Vite config - Changed caching handler from 'CacheFirst' to 'NetworkFirst' to prioritize network responses. - This adjustment aims to improve data freshness while still utilizing caching effectively.	2025-10-29 09:34:59 +08:00
typist	10a167febd	chore: remove SEO-README.md as part of project restructuring - Deleted the SEO-README.md file which contained outdated SEO optimization details and instructions. - This change is part of a broader effort to streamline project documentation and improve clarity.	2025-10-29 09:27:54 +08:00
typist	91c0686a46	0.0.23 All checks were successful Build and Push Docker Image / build (push) Successful in 1m11s Details	2025-10-29 09:24:17 +08:00
typist	40bfde8e57	feat: implement ID generator component for UUIDs and Nano ID - Added IDGenerator component to handle the display and regeneration of UUIDs and Nano ID. - Integrated clipboard functionality to copy generated IDs with user feedback via toast notifications. - Refactored the Tool component to utilize the new IDGenerator for improved user interaction and code organization.	2025-10-29 09:24:01 +08:00
typist	b4ba7a2219	0.0.22 All checks were successful Build and Push Docker Image / build (push) Successful in 1m52s Details	2025-10-29 09:11:11 +08:00
typist	25e42e3af5	fix: update caching strategy for ipinfo API in Vite config - Changed caching handler from 'NetworkFirst' to 'CacheFirst' for improved performance. - Extended cache expiration time from 5 minutes to 1 hour to enhance data availability.	2025-10-29 09:10:59 +08:00
typist	4398b53ea7	0.0.21 All checks were successful Build and Push Docker Image / build (push) Successful in 1m14s Details	2025-10-29 09:07:27 +08:00
typist	3e14bc652f	feat: add terser for advanced minification and improve React chunking - Added terser as a dependency for enhanced code minification. - Updated Vite configuration to enable aggressive minification using terser with options to drop console logs and unused code. - Refined manual chunking for React libraries to improve code splitting and loading efficiency.	2025-10-29 09:06:56 +08:00
typist	aca7e11835	0.0.20 All checks were successful Build and Push Docker Image / build (push) Successful in 1m10s Details	2025-10-29 08:58:11 +08:00
typist	782de6e38a	feat: integrate PWA support and service worker registration - Added vite-plugin-pwa for Progressive Web App capabilities. - Configured service worker with caching strategies for improved offline support. - Registered service worker in main.tsx to handle updates and caching. - Updated package.json to include new dependencies for PWA functionality.	2025-10-29 08:58:02 +08:00
typist	7646830194	0.0.19 All checks were successful Build and Push Docker Image / build (push) Successful in 1m6s Details	2025-10-29 08:50:18 +08:00
typist	59f998e8e3	feat: enhance tool loading and performance optimization - Added DNS prefetch and preconnect links in index.html for improved API loading times. - Implemented lazy loading for tool components to optimize performance and reduce initial load time. - Wrapped tool components in Suspense with a loading fallback to enhance user experience during loading. - Refactored Vite configuration to create manual chunks for better code splitting of React and UI libraries.	2025-10-29 08:49:25 +08:00
typist	55207beff5	0.0.18 All checks were successful Build and Push Docker Image / build (push) Successful in 1m39s Details	2025-10-29 08:33:42 +08:00
typist	e98a344b95	feat: enhance sidebar component with recursive submenu rendering - Implemented recursive rendering of submenu items in the sidebar for better navigation. - Added support for collapsible submenus, improving user experience with nested tools. - Refactored menu item rendering logic to utilize a new renderSubMenuContent function for cleaner code.	2025-10-29 08:33:22 +08:00
typist	d553c3e04c	0.0.17 All checks were successful Build and Push Docker Image / build (push) Successful in 1m1s Details	2025-10-29 08:27:15 +08:00
typist	e2da2758cc	chore: simplify build script in package.json - Removed sitemap generation step from the build script for a more streamlined build process.	2025-10-29 08:27:00 +08:00
typist	3ab70498e6	feat: add ModeToggle component to layout and sidebar - Integrated ModeToggle component into the layout for theme switching. - Replaced the existing button in the sidebar footer with SidebarMenuButton for improved styling and functionality.	2025-10-29 08:26:26 +08:00
typist	a5ef1a1e70	0.0.16 All checks were successful Build and Push Docker Image / build (push) Successful in 1m7s Details	2025-10-29 08:16:17 +08:00
typist	297000f208	feat: integrate SEO hook for dynamic metadata management - Removed hardcoded canonical link from index.html. - Implemented useSEO hook in layout.tsx to dynamically update SEO metadata including title, description, and canonical URL based on the current route. - Added new use-seo.ts file containing the SEO hook logic for improved search engine optimization.	2025-10-29 08:15:53 +08:00
typist	04fbf12e07	0.0.15 All checks were successful Build and Push Docker Image / build (push) Successful in 1m6s Details	2025-10-29 08:06:21 +08:00
typist	a9a6354b2d	Merge pull request 'feat: implement SEO enhancements and sitemap generation' (#10 ) from feat/seo into main Reviewed-on: #10	2025-10-29 08:05:18 +08:00
typist	109139a42e	feat: implement SEO enhancements and sitemap generation - Added comprehensive SEO meta tags in index.html for improved search engine visibility, including Open Graph and Twitter Card tags. - Created a sitemap.xml for better indexing of site tools, generated automatically via a new script (generate-sitemap.ts). - Introduced robots.txt to manage crawler access and specified sitemap location. - Updated package.json to include a build step for sitemap generation and added tsx as a dependency. - Documented SEO optimizations and usage instructions in a new SEO-README.md file.	2025-10-29 08:05:37 +08:00
typist	b5a811e5ee	0.0.14 All checks were successful Build and Push Docker Image / build (push) Successful in 1m0s Details	2025-10-29 07:28:46 +08:00
typist	b3adfe5c8f	refactor: update IP query API and response handling - Switched from ip-api.com to ipinfo.io for IP information retrieval, ensuring more reliable service. - Simplified response handling by directly using the data returned from ipinfo.io, eliminating unnecessary data transformation. - Adjusted risk level determination logic to utilize the 'org' field for identifying potential hosting or datacenter IPs.	2025-10-29 07:28:21 +08:00
typist	8eda2eae99	0.0.13 All checks were successful Build and Push Docker Image / build (push) Successful in 1m1s Details	2025-10-29 07:18:09 +08:00
typist	99673913a6	chore: comment out cache settings in build workflow - Temporarily disabled cache-from and cache-to settings in the build workflow to prevent potential issues with the build process. - Retained platform specification for compatibility.	2025-10-29 07:18:02 +08:00
typist	83e48e3485	0.0.12 All checks were successful Build and Push Docker Image / build (push) Successful in 1m40s Details	2025-10-29 07:10:25 +08:00
typist	8607591871	feat: enhance SVG for dark mode support - Added CSS styles to the SVG for dark mode compatibility, allowing the icon to switch colors based on the user's color scheme preference. - Cleaned up the SVG structure for better readability and maintainability.	2025-10-29 07:10:15 +08:00
typist	24c154a759	0.0.11 All checks were successful Build and Push Docker Image / build (push) Successful in 1m15s Details	2025-10-29 06:36:32 +08:00
typist	edf87370d9	feat: add IP Query tool - Introduced a new tool for querying IP information, including location and risk assessment. - Updated the tool index to include the new IP Query component and its corresponding icon. - Added IPQuery component with functionality to validate and fetch IP data from external APIs.	2025-10-29 06:36:20 +08:00
typist	ae0f9447ea	0.0.10 All checks were successful Build and Push Docker Image / build (push) Successful in 1m30s Details	2025-10-29 06:09:10 +08:00
typist	972b6c7f22	feat: enhance input handling for network tools - Added domain and URL normalization on blur for DNS, Ping, Speedtest, and TCPing components. - Improved user experience by ensuring valid input formats and extracting ports where applicable.	2025-10-29 06:08:47 +08:00
typist	be56d896ca	0.0.9 All checks were successful Build and Push Docker Image / build (push) Successful in 1m14s Details	2025-10-29 05:52:31 +08:00
typist	3b31ce9ddf	feat: add-tool `network` (#9 ) Co-authored-by: typist <git@mail.typist.cc> Reviewed-on: #9	2025-10-29 05:51:11 +08:00
		`@@ -0,0 +1,3 @@`
							`/// <reference types="vite/client" />`
							`/// <reference types="vite-plugin-pwa/client" />`