From f83fd8b116570588b5519cdf4e7daba641a175c8 Mon Sep 17 00:00:00 2001
From: Jeff Gu <idevs@foxmail.com>
Date: Thu, 9 Apr 2026 13:58:05 +0800
Subject: [PATCH] =?UTF-8?q?style(App):=20=E7=BB=9F=E4=B8=80=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E9=A3=8E=E6=A0=BC=EF=BC=8C=E4=BF=AE=E5=A4=8D=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx | 61 ++++++++++++++++++++++++--------------------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8c9dae2..5469c55 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,15 +1,15 @@
-import { useEffect } from 'react'
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { AppLayout } from './components/layout/AppLayout'
-import { Toaster } from './components/ui/toaster'
-import { useAuthStore } from './store/auth'
-import { Dashboard } from './pages/Dashboard'
-import { Channels } from './pages/Channels'
-import { Tokens } from './pages/Tokens'
-import { Pricing } from './pages/Pricing'
-import { ApiTest } from './pages/ApiTest'
-import { NotFound } from './pages/NotFound'
+import { useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AppLayout } from "./components/layout/AppLayout";
+import { Toaster } from "./components/ui/toaster";
+import { useAuthStore } from "./store/auth";
+import { Dashboard } from "./pages/Dashboard";
+import { Channels } from "./pages/Channels";
+import { Tokens } from "./pages/Tokens";
+import { Pricing } from "./pages/Pricing";
+import { ApiTest } from "./pages/ApiTest";
+import { NotFound } from "./pages/NotFound";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -18,42 +18,42 @@ const queryClient = new QueryClient({
       refetchOnWindowFocus: false,
     },
   },
-})
+});
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const { isAuthenticated, isLoading } = useAuthStore()
+  const { isAuthenticated, isLoading } = useAuthStore();
 
   if (isLoading) {
-    return null
+    return null;
   }
 
   if (!isAuthenticated) {
-    return <Navigate to="/" replace />
+    return <Navigate to="/" replace />;
   }
 
-  return <>{children}</>
+  return <>{children}</>;
 }
 
 function HomeRoute() {
-  const { isAuthenticated, isLoading } = useAuthStore()
+  const { isAuthenticated, isLoading } = useAuthStore();
 
   if (isLoading) {
-    return null
+    return null;
   }
 
   if (isAuthenticated) {
-    return <Navigate to="/channels" replace />
+    return <Navigate to="/channels" replace />;
   }
 
-  return <Dashboard />
+  return <Dashboard />;
 }
 
 function App() {
-  const { checkAuth } = useAuthStore()
+  const { checkAuth } = useAuthStore();
 
   useEffect(() => {
-    checkAuth()
-  }, [checkAuth])
+    checkAuth();
+  }, [checkAuth]);
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -61,7 +61,14 @@ function App() {
         <AppLayout>
           <Routes>
             <Route path="/" element={<HomeRoute />} />
-            <Route path="/api-test" element={<ApiTest />} />
+            <Route
+              path="/api-test"
+              element={
+                <ProtectedRoute>
+                  <ApiTest />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="/channels"
               element={
@@ -92,7 +99,7 @@ function App() {
         <Toaster />
       </Router>
     </QueryClientProvider>
-  )
+  );
 }
 
-export default App
+export default App;