0.0.34

- Deleted the globals.css file to streamline styles.
- Updated color variables in index.css for improved consistency and design coherence across the application.

index.html

@@ -18,6 +18,11 @@
     <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/" />
@@ -60,8 +65,8 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
 
-    <!-- Cloudflare Web Analytics -->
+    <!-- Cloudflare Web Analytics - Only in Production -->
-    <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "2aecdc025eb043bc89ce931b54a80054"}'></script>
+    <!--CLOUDFLARE_ANALYTICS_PLACEHOLDER-->
     <!-- End Cloudflare Web Analytics -->
   </body>
 </html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "litek",
   "private": true,
-  "version": "0.0.25",
+  "version": "0.0.34",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,12 +17,15 @@
     "@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-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/vite": "^4.1.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "lucide-react": "^0.548.0",
     "nanoid": "^5.1.6",
     "next-themes": "^0.4.6",

pnpm-lock.yaml

@@ -20,6 +20,12 @@ importers:
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.16
         version: 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-label':
+        specifier: ^2.1.7
+        version: 2.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-separator':
         specifier: ^1.1.7
         version: 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -38,6 +44,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       lucide-react:
         specifier: ^0.548.0
         version: 0.548.0(react@19.2.0)
@@ -1050,6 +1059,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-label@2.1.7':
+    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-menu@2.1.16':
     resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
     peerDependencies:
@@ -1063,6 +1085,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popover@1.1.15':
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.2.8':
     resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
     peerDependencies:
@@ -1703,6 +1738,12 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -4085,6 +4126,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.2
 
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -4111,6 +4161,29 @@ snapshots:
       '@types/react': 19.2.2
       '@types/react-dom': 19.2.2(@types/react@19.2.2)
 
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.1(@types/react@19.2.2)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -4736,6 +4809,18 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cmdk@1.1.1(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4

src/components/sidebar/index.tsx

@@ -114,11 +114,7 @@ export const AppSidebar = () => {
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
-      <SidebarFooter className="flex flex-row justify-between items-center gap-2">
+      <SidebarFooter className="flex flex-col gap-2" />
-        <SidebarMenuButton variant="outline" asChild>
-          <a href="mailto:litek@mail.typist.cc">need more tools?</a>
-        </SidebarMenuButton>
-      </SidebarFooter>
     </Sidebar>
   );
 };

src/components/tool/currency.tsx

@@ -0,0 +1,413 @@
+import { useState, useEffect, type FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { toast } from "sonner";
+import { Check, X, Plus } from "lucide-react";
+
+interface Currency {
+  code: string;
+  name: string;
+  symbol: string;
+}
+
+// Available currencies (supported by Frankfurter API)
+const AVAILABLE_CURRENCIES: Currency[] = [
+  { code: "USD", name: "US Dollar", symbol: "$" },
+  { code: "CNY", name: "Chinese Yuan", symbol: "¥" },
+  { code: "EUR", name: "Euro", symbol: "€" },
+  { code: "GBP", name: "British Pound", symbol: "£" },
+  { code: "JPY", name: "Japanese Yen", symbol: "¥" },
+  { code: "HKD", name: "Hong Kong Dollar", symbol: "HK$" },
+  { code: "AUD", name: "Australian Dollar", symbol: "A$" },
+  { code: "CAD", name: "Canadian Dollar", symbol: "C$" },
+  { code: "SGD", name: "Singapore Dollar", symbol: "S$" },
+  { code: "CHF", name: "Swiss Franc", symbol: "CHF" },
+  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$" },
+  { code: "KRW", name: "South Korean Won", symbol: "₩" },
+  { code: "THB", name: "Thai Baht", symbol: "฿" },
+  { code: "MYR", name: "Malaysian Ringgit", symbol: "RM" },
+  { code: "INR", name: "Indian Rupee", symbol: "₹" },
+  { code: "BRL", name: "Brazilian Real", symbol: "R$" },
+  { code: "MXN", name: "Mexican Peso", symbol: "MX$" },
+  { code: "SEK", name: "Swedish Krona", symbol: "kr" },
+  { code: "NOK", name: "Norwegian Krone", symbol: "kr" },
+  { code: "DKK", name: "Danish Krone", symbol: "kr" },
+  { code: "PLN", name: "Polish Złoty", symbol: "zł" },
+  { code: "TRY", name: "Turkish Lira", symbol: "₺" },
+  { code: "PHP", name: "Philippine Peso", symbol: "₱" },
+  { code: "IDR", name: "Indonesian Rupiah", symbol: "Rp" },
+  { code: "ILS", name: "Israeli New Shekel", symbol: "₪" },
+  { code: "CZK", name: "Czech Koruna", symbol: "Kč" },
+  { code: "RON", name: "Romanian Leu", symbol: "lei" },
+  { code: "HUF", name: "Hungarian Forint", symbol: "Ft" },
+  { code: "BGN", name: "Bulgarian Lev", symbol: "лв" },
+  { code: "ISK", name: "Icelandic Króna", symbol: "kr" },
+];
+
+// Required currencies (cannot be removed) - USD first, CNY second
+const REQUIRED_CURRENCIES = ["USD", "CNY"];
+
+const STORAGE_KEY = "selectedCurrencies";
+
+const Tool: FC = () => {
+  const [amounts, setAmounts] = useState<Record<string, string>>({});
+  const [selectedCurrencies, setSelectedCurrencies] = useState<string[]>([]);
+  const [rates, setRates] = useState<Record<string, number>>({});
+  const [loading, setLoading] = useState<boolean>(false);
+  const [open, setOpen] = useState(false);
+
+  // Load selected currencies from localStorage
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (Array.isArray(parsed) && parsed.length >= 2) {
+          setSelectedCurrencies(parsed);
+          return;
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load saved currencies:", error);
+    }
+    // Default: USD and CNY (USD first)
+    setSelectedCurrencies(["USD", "CNY"]);
+  }, []);
+
+  // Save selected currencies to localStorage
+  useEffect(() => {
+    if (selectedCurrencies.length >= 2) {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(selectedCurrencies));
+      } catch (error) {
+        console.error("Failed to save currencies:", error);
+      }
+    }
+  }, [selectedCurrencies]);
+
+  // Fetch exchange rates (Service Worker handles caching)
+  useEffect(() => {
+    const fetchRates = async () => {
+      try {
+        setLoading(true);
+        // Service Worker will handle caching with StaleWhileRevalidate strategy
+        const response = await fetch("https://api.frankfurter.app/latest?base=USD");
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        const allRates: Record<string, number> = { USD: 1, ...data.rates };
+        
+        setRates(allRates);
+      } catch (error) {
+        console.error("Failed to fetch rates:", error);
+        if (error instanceof Error) {
+          toast.error(`Failed to fetch exchange rates: ${error.message}`);
+        } else {
+          toast.error("Failed to fetch exchange rates");
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRates();
+  }, []);
+
+  // Initialize amounts after rates are loaded
+  useEffect(() => {
+    if (selectedCurrencies.length > 0 && Object.keys(rates).length > 0) {
+      if (Object.keys(amounts).length === 0) {
+        // Initial setup: 1 USD as base
+        const initialAmounts: Record<string, string> = {};
+        const baseAmountInUSD = 1; // 1 USD
+        
+        selectedCurrencies.forEach(code => {
+          if (rates[code]) {
+            const convertedAmount = baseAmountInUSD * rates[code];
+            initialAmounts[code] = convertedAmount.toFixed(2);
+          } else {
+            initialAmounts[code] = "";
+          }
+        });
+        setAmounts(initialAmounts);
+      }
+    }
+  }, [selectedCurrencies, rates, amounts]);
+
+  // Auto-update amounts when rates change
+  useEffect(() => {
+    if (Object.keys(rates).length > 0 && Object.keys(amounts).length > 0) {
+      // Find first currency with value as base
+      const baseCurrency = selectedCurrencies.find(code => amounts[code] && parseFloat(amounts[code]) > 0);
+      
+      if (baseCurrency && rates[baseCurrency]) {
+        const baseValue = parseFloat(amounts[baseCurrency]);
+        const amountInUSD = baseValue / rates[baseCurrency];
+        
+        // Recalculate all currencies
+        const updatedAmounts: Record<string, string> = {};
+        selectedCurrencies.forEach(code => {
+          if (rates[code]) {
+            const convertedAmount = amountInUSD * rates[code];
+            updatedAmounts[code] = convertedAmount.toFixed(2);
+          } else {
+            updatedAmounts[code] = amounts[code] || "";
+          }
+        });
+        
+        // Only update if values changed
+        const hasChanged = selectedCurrencies.some(
+          code => updatedAmounts[code] !== amounts[code]
+        );
+        if (hasChanged) {
+          setAmounts(updatedAmounts);
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rates]);
+
+  // Handle amount input change
+  const handleAmountChange = (currencyCode: string, value: string) => {
+    // Only allow numbers and decimal point
+    if (value !== "" && !/^\d*\.?\d*$/.test(value)) {
+      return;
+    }
+
+    if (!rates[currencyCode]) {
+      setAmounts({ ...amounts, [currencyCode]: value });
+      return;
+    }
+
+    // Clear all if empty
+    if (value === "" || value === "0" || parseFloat(value) === 0) {
+      const newAmounts: Record<string, string> = {};
+      selectedCurrencies.forEach(code => {
+        newAmounts[code] = "";
+      });
+      setAmounts(newAmounts);
+      return;
+    }
+
+    const inputValue = parseFloat(value);
+    
+    // Calculate other currencies
+    const newAmounts: Record<string, string> = { [currencyCode]: value };
+    
+    // Convert to USD first
+    const amountInUSD = inputValue / rates[currencyCode];
+    
+    // Convert to other currencies
+    selectedCurrencies.forEach(code => {
+      if (code !== currencyCode && rates[code]) {
+        const convertedAmount = amountInUSD * rates[code];
+        newAmounts[code] = convertedAmount.toFixed(2);
+      }
+    });
+
+    setAmounts(newAmounts);
+  };
+
+  // Add currency
+  const addCurrency = (currencyCode: string) => {
+    if (!selectedCurrencies.includes(currencyCode)) {
+      setSelectedCurrencies([...selectedCurrencies, currencyCode]);
+      
+      // Calculate initial amount for new currency
+      if (rates[currencyCode] && Object.keys(amounts).length > 0) {
+        const firstCurrency = selectedCurrencies[0];
+        if (firstCurrency && amounts[firstCurrency] && rates[firstCurrency]) {
+          const firstAmount = parseFloat(amounts[firstCurrency]) || 0;
+          const amountInUSD = firstAmount / rates[firstCurrency];
+          const newAmount = amountInUSD * rates[currencyCode];
+          setAmounts({ ...amounts, [currencyCode]: newAmount.toFixed(2) });
+        }
+      }
+      
+      toast.success(`Added ${currencyCode}`);
+    }
+  };
+
+  // Remove currency
+  const removeCurrency = (currencyCode: string) => {
+    if (REQUIRED_CURRENCIES.includes(currencyCode)) {
+      toast.error(`${currencyCode} is required and cannot be removed`);
+      return;
+    }
+    if (selectedCurrencies.length <= 2) {
+      toast.error("At least two currencies are required");
+      return;
+    }
+    setSelectedCurrencies(selectedCurrencies.filter((c) => c !== currencyCode));
+    
+    // Remove corresponding amount
+    const newAmounts = { ...amounts };
+    delete newAmounts[currencyCode];
+    setAmounts(newAmounts);
+    
+    toast.success(`Removed ${currencyCode}`);
+  };
+
+  // Get currency info
+  const getCurrency = (code: string): Currency | undefined => {
+    return AVAILABLE_CURRENCIES.find((c) => c.code === code);
+  };
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+
+      {/* Currency selector */}
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <Label>Select Currencies</Label>
+          {/* Add currency button - fixed at top right */}
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="gap-1">
+                <Plus className="size-4" />
+                Add Currency
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[300px] p-0" align="end" side="bottom" sideOffset={5}>
+              <Command>
+                <CommandInput placeholder="Search currencies..." />
+                <CommandList>
+                  <CommandEmpty>No currency found</CommandEmpty>
+                  <CommandGroup>
+                    {AVAILABLE_CURRENCIES.map((currency) => {
+                      const isSelected = selectedCurrencies.includes(currency.code);
+                      const isRequired = REQUIRED_CURRENCIES.includes(currency.code);
+                      return (
+                        <CommandItem
+                          key={currency.code}
+                          value={`${currency.code} ${currency.name}`}
+                          disabled={isRequired}
+                          onSelect={() => {
+                            if (isRequired) return; // Required currencies cannot be toggled
+                            if (isSelected && selectedCurrencies.length > 2) {
+                              removeCurrency(currency.code);
+                            } else if (!isSelected) {
+                              addCurrency(currency.code);
+                            }
+                          }}
+                        >
+                          <Check
+                            className={`mr-2 size-4 flex-shrink-0 ${
+                              isSelected ? "opacity-100" : "opacity-0"
+                            }`}
+                          />
+                          <span className="inline-block w-8 text-right flex-shrink-0">{currency.symbol}</span>
+                          <span className="ml-2">{currency.code}</span>
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+        
+        {/* Selected currency badges */}
+        <div className="flex flex-wrap gap-2">
+          {selectedCurrencies.map((code) => {
+            const currency = getCurrency(code);
+            const isRequired = REQUIRED_CURRENCIES.includes(code);
+            return (
+              <Badge
+                key={code}
+                variant={isRequired ? "default" : "secondary"}
+                className={`relative gap-1 px-2.5 py-1 transition-all duration-200 ${
+                  !isRequired 
+                    ? "cursor-pointer hover:bg-destructive hover:text-destructive-foreground hover:border-destructive group" 
+                    : ""
+                }`}
+                onClick={() => {
+                  if (!isRequired) {
+                    removeCurrency(code);
+                  }
+                }}
+              >
+                <span className={!isRequired ? "group-hover:opacity-0 transition-opacity duration-200" : ""}>
+                  {currency?.symbol} {code}
+                </span>
+                {!isRequired && (
+                  <X className="absolute inset-0 m-auto size-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" />
+                )}
+              </Badge>
+            );
+          })}
+        </div>
+        
+        <span className="text-xs text-muted-foreground">
+          {REQUIRED_CURRENCIES.map((c) => getCurrency(c)?.code).join(", ")} are required. At least two currencies needed.
+        </span>
+      </div>
+
+      {/* Currency list */}
+      {loading ? (
+        <div className="flex items-center justify-center py-8 text-muted-foreground">
+          Loading exchange rates...
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3 flex-1 overflow-auto">
+          <div className="text-sm font-medium">Currency Amounts:</div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 auto-rows-min">
+            {selectedCurrencies.map((code) => {
+              const currency = getCurrency(code);
+              if (!currency) return null;
+              
+              return (
+                <Card key={code} className="flex flex-col">
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-sm font-medium text-muted-foreground">
+                      <div className="leading-tight">
+                        <div>{currency.symbol} {currency.code}</div>
+                        <div className="text-xs font-normal mt-1">{currency.name}</div>
+                      </div>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <Input
+                      type="text"
+                      placeholder="Enter amount"
+                      value={amounts[code] || ""}
+                      onChange={(e) => handleAmountChange(code, e.target.value)}
+                      className="text-xl font-semibold"
+                    />
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {!loading && Object.keys(rates).length > 0 && (
+        <div className="text-xs text-muted-foreground">
+          Exchange rate data from:{" "}
+          <a
+            href="https://www.frankfurter.app/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline hover:text-foreground transition-colors"
+          >
+            Frankfurter API
+          </a>
+          {" "}(Based on European Central Bank data)
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tool;
+

src/components/tool/index.tsx

@@ -1,10 +1,11 @@
 import { lazy, type ReactNode, type ComponentType } from 'react';
-import { FileJson, Hash, Binary, Network, Globe, Activity, Gauge, Wifi, MapPin } from 'lucide-react'
+import { FileJson, Hash, Binary, Network, Globe, Activity, Gauge, Wifi, MapPin, Coins } from 'lucide-react'
 
 // 懒加载工具组件
 const UUID = lazy(() => import('./uuid'))
 const JSON = lazy(() => import('./json'))
 const Base64 = lazy(() => import('./base64'))
+const Currency = lazy(() => import('./currency'))
 const DNS = lazy(() => import('./network/dns'))
 const Ping = lazy(() => import('./network/ping'))
 const TCPing = lazy(() => import('./network/tcping'))
@@ -42,6 +43,13 @@ export const tools: Tool[] = [
     icon: <Binary />,
     component: Base64,
   },
+  {
+    path: "currency",
+    name: "Currency Converter",
+    description: "Real-time currency exchange rates",
+    icon: <Coins />,
+    component: Currency,
+  },
   {
     path: "network",
     name: "Network Tools",

src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/command.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/globals.css

@@ -1,23 +0,0 @@
-@layer base {
-  :root {
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-  }
-
-  .dark {
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.439 0 0);
-  }
-}

src/index.css

@@ -42,72 +42,72 @@
 }
 
 :root {
-  --radius: 0.625rem;
+  --radius: 0.65rem;
   --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
+  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.034 264.665);
+  --primary: oklch(0.646 0.222 41.116);
-  --primary-foreground: oklch(0.985 0.002 247.839);
+  --primary-foreground: oklch(0.98 0.016 73.684);
-  --secondary: oklch(0.967 0.003 264.542);
+  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.003 264.542);
+  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.551 0.027 264.364);
+  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.003 264.542);
+  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.034 264.665);
+  --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.928 0.006 264.531);
+  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.928 0.006 264.531);
+  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.707 0.022 261.325);
+  --ring: oklch(0.75 0.183 55.934);
-  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-1: oklch(0.837 0.128 66.29);
-  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-2: oklch(0.705 0.213 47.604);
-  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-3: oklch(0.646 0.222 41.116);
-  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-4: oklch(0.553 0.195 38.402);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --chart-5: oklch(0.47 0.157 37.304);
-  --sidebar: oklch(0.985 0.002 247.839);
+  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
+  --sidebar-primary: oklch(0.646 0.222 41.116);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.928 0.006 264.531);
+  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
+  --sidebar-ring: oklch(0.75 0.183 55.934);
 }
 
 .dark {
-  --background: oklch(0.13 0.028 261.692);
+  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0.002 247.839);
+  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.034 264.665);
+  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0.002 247.839);
+  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.034 264.665);
+  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0.002 247.839);
+  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.928 0.006 264.531);
+  --primary: oklch(0.705 0.213 47.604);
-  --primary-foreground: oklch(0.21 0.034 264.665);
+  --primary-foreground: oklch(0.98 0.016 73.684);
-  --secondary: oklch(0.278 0.033 256.848);
+  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
+  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.278 0.033 256.848);
+  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.707 0.022 261.325);
+  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.278 0.033 256.848);
+  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0.002 247.839);
+  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
+  --ring: oklch(0.408 0.123 38.172);
-  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-1: oklch(0.837 0.128 66.29);
-  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-2: oklch(0.705 0.213 47.604);
-  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-3: oklch(0.646 0.222 41.116);
-  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-4: oklch(0.553 0.195 38.402);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --chart-5: oklch(0.47 0.157 37.304);
-  --sidebar: oklch(0.21 0.034 264.665);
+  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary: oklch(0.705 0.213 47.604);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --sidebar-ring: oklch(0.408 0.123 38.172);
 }
 
 @layer base {
@@ -116,6 +116,7 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-family: 'Roboto Mono', 'Noto Sans SC', 'SF Mono', Consolas, monospace;
   }
 }
 

src/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
 import { Toaster } from '@/components/ui/sonner'
-
+import { toast } from 'sonner'
 
 import './index.css'
 import { AppRouter } from './router'
@@ -19,11 +19,32 @@ 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) {
+    wb.addEventListener('waiting', () => {
-        console.log('New service worker installed, reloading page...')
+      // 显示更新通知，右上角弹窗
-        window.location.reload()
+      toast.info('found new version', {
+        description: 'new content available, click update to get the latest version',
+        duration: Infinity, // 持续显示，直到用户操作
+        action: {
+          label: 'update now',
+          onClick: () => {
+            // 用户点击更新按钮
+            wb.messageSkipWaiting()
           }
+        },
+        cancel: {
+          label: 'later',
+          onClick: () => {
+            // 用户选择稍后更新，关闭通知
+            // 新版本会在下次手动刷新时自动激活
+          }
+        }
+      })
+    })
+
+    // 当新的 Service Worker 接管页面时，刷新页面
+    wb.addEventListener('controlling', () => {
+      window.location.reload()
     })
 
     wb.register()

vite.config.ts

@@ -5,10 +5,20 @@ import tailwindcss from "@tailwindcss/vite"
 import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vite.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [
     react(), 
     tailwindcss(),
+    // HTML 替换插件 - 仅在生产环境注入 Cloudflare Analytics
+    {
+      name: 'html-transform',
+      transformIndexHtml(html) {
+        const cloudflareScript = mode === 'production' 
+          ? `<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "2aecdc025eb043bc89ce931b54a80054"}'></script>`
+          : '';
+        return html.replace('<!--CLOUDFLARE_ANALYTICS_PLACEHOLDER-->', cloudflareScript);
+      }
+    },
     VitePWA({
       registerType: 'autoUpdate',
       includeAssets: ['lite.svg', 'robots.txt', 'sitemap.xml'],
@@ -43,11 +53,56 @@ export default defineConfig({
                 statuses: [0, 200]
               }
             }
+          },
+          {
+            // Frankfurter API 汇率缓存
+            urlPattern: /^https:\/\/api\.frankfurter\.app\/.*/i,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'currency-rates-cache',
+              expiration: {
+                maxEntries: 5,
+                maxAgeSeconds: 60 * 60 * 12 // 12 小时
+              },
+              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,
+        clientsClaim: true,   // 新 SW 激活后立即接管
-        skipWaiting: true
+        skipWaiting: false    // 不自动跳过等待，需要手动触发
       }
     })
   ],
@@ -100,4 +155,4 @@ export default defineConfig({
     },
     chunkSizeWarningLimit: 500,
   },
-})
+}))