0.0.34

refactor: remove globals.css and update color variables in index.css
- Deleted the globals.css file to streamline styles. - Updated color variables in index.css for improved consistency and design coherence across the application.
2025-10-30 20:26:38 +08:00 · 2025-10-30 20:26:21 +08:00 · 2025-10-30 09:49:41 +08:00 · 2025-10-30 09:49:30 +08:00 · 2025-10-30 09:45:15 +08:00 · 2025-10-30 09:44:05 +08:00
6 changed files with 92 additions and 146 deletions
--- a/index.html
+++ b/index.html
@@ -65,8 +65,8 @@
    <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>
+    <!-- Cloudflare Web Analytics - Only in Production -->
+    <!--CLOUDFLARE_ANALYTICS_PLACEHOLDER-->
    <!-- End Cloudflare Web Analytics -->
  </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "litek",
  "private": true,
-  "version": "0.0.31",
+  "version": "0.0.34",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/components/tool/currency.tsx
+++ b/src/components/tool/currency.tsx
@@ -53,7 +53,6 @@ const AVAILABLE_CURRENCIES: Currency[] = [
 const REQUIRED_CURRENCIES = ["USD", "CNY"];

 const STORAGE_KEY = "selectedCurrencies";
-const RATES_CACHE_KEY = "currencyRatesCache";

 const Tool: FC = () => {
  const [amounts, setAmounts] = useState<Record<string, string>>({});
@@ -91,42 +90,13 @@ const Tool: FC = () => {
    }
  }, [selectedCurrencies]);

-  // Fetch exchange rates with date-based caching
+  // Fetch exchange rates (Service Worker handles caching)
  useEffect(() => {
    const fetchRates = async () => {
      try {
-        // 1. Try to load from cache
-        const cached = localStorage.getItem(RATES_CACHE_KEY);
-        if (cached) {
-          try {
-            const { rates: cachedRates, date: cachedDate, fetchedAt } = JSON.parse(cached);
-            
-            const now = Date.now();
-            const twelveHoursInMs = 12 * 60 * 60 * 1000;
-            
-            // Strategy: Use cache if it's recent enough (within 12 hours)
-            // This handles all edge cases: weekends, holidays, timezone differences
-            // Exchange rates update once per day, so 12-hour cache is reasonable
-            if (fetchedAt && (now - fetchedAt < twelveHoursInMs)) {
-              setRates(cachedRates);
-              setLoading(false);
-              return;
-            } else {
-              // Cache is older than 12 hours, show it first then update in background
-              setRates(cachedRates);
-              setLoading(false);
-              // Continue to fetch new data below
-            }
-          } catch (e) {
-            console.error("Failed to parse cached rates:", e);
-          }
-        }
-
-        // 2. Fetch latest data from network
        setLoading(true);
-        const response = await fetch("https://api.frankfurter.app/latest?base=USD", {
-          cache: "no-cache",
-        });
+        // 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}`);
@@ -134,40 +104,14 @@ const Tool: FC = () => {
        
        const data = await response.json();
        const allRates: Record<string, number> = { USD: 1, ...data.rates };
-        const apiDate = data.date; // Date from API (YYYY-MM-DD format)
        
-        // 3. Update state and cache (with timestamp)
        setRates(allRates);
-        localStorage.setItem(
-          RATES_CACHE_KEY,
-          JSON.stringify({ 
-            rates: allRates, 
-            date: apiDate,
-            fetchedAt: Date.now() // Timestamp when we fetched the data
-          })
-        );
      } catch (error) {
-        // If cache exists, continue using it even if network fails
-        const cached = localStorage.getItem(RATES_CACHE_KEY);
-        if (cached) {
-          try {
-            const { rates: cachedRates } = JSON.parse(cached);
-            setRates(cachedRates);
-            toast.info("Using cached exchange rates (network request failed)");
-          } catch (e) {
-            console.error("Failed to use cached rates:", e);
-            if (error instanceof Error) {
-              toast.error(`Failed to fetch rates: ${error.message}`);
-            } else {
-              toast.error("Failed to fetch rates");
-            }
-          }
+        console.error("Failed to fetch rates:", error);
+        if (error instanceof Error) {
+          toast.error(`Failed to fetch exchange rates: ${error.message}`);
        } else {
-          if (error instanceof Error) {
-            toast.error(`Failed to fetch rates: ${error.message}`);
-          } else {
-            toast.error("Failed to fetch rates");
-          }
+          toast.error("Failed to fetch exchange rates");
        }
      } finally {
        setLoading(false);
--- a/src/globals.css
+++ b/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);
-  }
-}
--- a/src/index.css
+++ b/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);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.646 0.222 41.116);
+  --primary-foreground: oklch(0.98 0.016 73.684);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --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);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.75 0.183 55.934);
+  --chart-1: oklch(0.837 0.128 66.29);
+  --chart-2: oklch(0.705 0.213 47.604);
+  --chart-3: oklch(0.646 0.222 41.116);
+  --chart-4: oklch(0.553 0.195 38.402);
+  --chart-5: oklch(0.47 0.157 37.304);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.646 0.222 41.116);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.75 0.183 55.934);
 }

 .dark {
-  --background: oklch(0.13 0.028 261.692);
-  --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
-  --card-foreground: oklch(0.985 0.002 247.839);
-  --popover: oklch(0.21 0.034 264.665);
-  --popover-foreground: oklch(0.985 0.002 247.839);
-  --primary: oklch(0.928 0.006 264.531);
-  --primary-foreground: oklch(0.21 0.034 264.665);
-  --secondary: oklch(0.278 0.033 256.848);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
-  --muted: oklch(0.278 0.033 256.848);
-  --muted-foreground: oklch(0.707 0.022 261.325);
-  --accent: oklch(0.278 0.033 256.848);
-  --accent-foreground: oklch(0.985 0.002 247.839);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.705 0.213 47.604);
+  --primary-foreground: oklch(0.98 0.016 73.684);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --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);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.034 264.665);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --ring: oklch(0.408 0.123 38.172);
+  --chart-1: oklch(0.837 0.128 66.29);
+  --chart-2: oklch(0.705 0.213 47.604);
+  --chart-3: oklch(0.646 0.222 41.116);
+  --chart-4: oklch(0.553 0.195 38.402);
+  --chart-5: oklch(0.47 0.157 37.304);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.705 0.213 47.604);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --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 {
--- a/vite.config.ts
+++ b/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'],
@@ -44,6 +54,21 @@ export default defineConfig({
              }
            }
          },
+          {
+            // 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,
@@ -130,4 +155,4 @@ export default defineConfig({
    },
    chunkSizeWarningLimit: 500,
  },
-})
+}))
Author	SHA1	Message	Date
typist	ea62204d8e	0.0.34 All checks were successful Build and Push Docker Image / build (push) Successful in 1m20s Details	2025-10-30 20:26:38 +08:00
typist	3bafcbafed	refactor: remove globals.css and update color variables in index.css - Deleted the globals.css file to streamline styles. - Updated color variables in index.css for improved consistency and design coherence across the application.	2025-10-30 20:26:21 +08:00
typist	1a00f27c6a	0.0.33 All checks were successful Build and Push Docker Image / build (push) Successful in 1m37s Details	2025-10-30 09:49:41 +08:00
typist	1bcbd3e37d	feat: implement caching for Frankfurter API exchange rates - Added a caching strategy for the Frankfurter API using Service Worker with StaleWhileRevalidate. - Removed the local storage caching logic from the currency tool to streamline data fetching. - Updated the currency tool to rely on the Service Worker for managing exchange rate data.	2025-10-30 09:49:30 +08:00
typist	e88770dd3f	fix: remove unused date property from cached rates in currency tool - Updated the currency tool to eliminate the unused 'date' property from the cached rates object, streamlining the data structure.	2025-10-30 09:45:15 +08:00
typist	5cef15c032	0.0.32 Some checks failed Build and Push Docker Image / build (push) Failing after 1m12s Details	2025-10-30 09:44:05 +08:00
typist	970d1ac3ed	feat: conditionally inject Cloudflare Analytics script - Updated index.html to include a placeholder for Cloudflare Web Analytics, which is now only injected in production mode. - Modified vite.config.ts to implement an HTML transform plugin that dynamically adds the Cloudflare script based on the environment.	2025-10-30 09:43:50 +08:00