fix: fix vim-chaser

Author: ChenZiHong-Gavin

apps/vim-chaser/package-lock.json

@@ -9,8 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.91.2",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.13.1",
+    "sonner": "^2.0.7"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",

apps/vim-chaser/package.json

@@ -1,24 +1,85 @@
 import { useState } from 'react';
+import { 
+  BrowserRouter, 
+  Routes, 
+  Route, 
+  Navigate, 
+  useNavigate,
+  useLocation 
+} from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { Toaster } from '@/components/ui/toaster';
+import { Toaster as Sonner } from '@/components/ui/sonner';
 import { Home } from '@/pages/Home';
 import { Adventure } from '@/modes/Adventure';
 import { SpeedRun } from '@/modes/SpeedRun';
 import { ChallengeMode } from '@/modes/Challenge';
+import NotFound from '@/pages/NotFound';
 
-type Page = 'home' | 'adventure' | 'speedrun' | 'challenge';
+// 创建 QueryClient 实例
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60 * 1000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 
-function App() {
-  const [page, setPage] = useState<Page>('home');
+// 包装 Home 组件，注入导航功能
+const HomePage = () => {
+  const navigate = useNavigate();
+  return (
+    <Home 
+      onNavigate={(page) => {
+        const routeMap: Record<string, string> = {
+          'adventure': '/adventure',
+          'speedrun': '/speedrun',
+          'challenge': '/challenge'
+        };
+        navigate(routeMap[page] || '/');
+      }} 
+    />
+  );
+};
+
+// 包装各个模式组件，注入返回功能
+const AdventurePage = () => {
+  const navigate = useNavigate();
+  return <Adventure onBack={() => navigate('/')} />;
+};
+
+const SpeedRunPage = () => {
+  const navigate = useNavigate();
+  return <SpeedRun onBack={() => navigate('/')} />;
+};
 
-  switch (page) {
-    case 'adventure':
-      return <Adventure onBack={() => setPage('home')} />;
-    case 'speedrun':
-      return <SpeedRun onBack={() => setPage('home')} />;
-    case 'challenge':
-      return <ChallengeMode onBack={() => setPage('home')} />;
-    default:
-      return <Home onNavigate={(p) => setPage(p)} />;
-  }
+const ChallengePage = () => {
+  const navigate = useNavigate();
+  return <ChallengeMode onBack={() => navigate('/')} />;
+};
+
+// 主应用组件
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TooltipProvider>
+        <Toaster />
+        <Sonner />
+        <BrowserRouter basename={import.meta.env.BASE_URL}>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/adventure" element={<AdventurePage />} />
+            <Route path="/speedrun" element={<SpeedRunPage />} />
+            <Route path="/challenge" element={<ChallengePage />} />
+            {/* 兜底路由 */}
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      </TooltipProvider>
+    </QueryClientProvider>
+  );
 }
 
-export default App;
+export default App;

apps/vim-chaser/src/App.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Toaster: React.FC = () => {
+  return null;
+};

apps/vim-chaser/src/components/ui/sonner.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Toaster: React.FC = () => {
+  return null;
+};

apps/vim-chaser/src/components/ui/toaster.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const TooltipProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>;
+};

apps/vim-chaser/src/components/ui/tooltip.tsx

@@ -0,0 +1,16 @@
+import { useNavigate } from 'react-router-dom';
+
+const NotFound = () => {
+  const navigate = useNavigate();
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', color: '#fff', background: '#0a0a0a' }}>
+      <h1 style={{ fontSize: '4rem', marginBottom: '1rem' }}>404</h1>
+      <p style={{ fontSize: '1.2rem', marginBottom: '2rem' }}>Page not found</p>
+      <button onClick={() => navigate('/')} style={{ padding: '0.5rem 1.5rem', fontSize: '1rem', cursor: 'pointer', background: '#333', color: '#fff', border: '1px solid #555', borderRadius: '4px' }}>
+        Back to Home
+      </button>
+    </div>
+  );
+};
+
+export default NotFound;

apps/vim-chaser/src/pages/NotFound.tsx

@@ -2,12 +2,20 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import path from 'path'
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   base: process.env.NODE_ENV === 'production' ? '/weekly-vibe-coding/vim-chaser/' : '/',
-  plugins: [react()],
+  server: {
+    host: "::",
+    port: 8080,
+    historyApiFallback: true
+  },
+  plugins: [
+    react(),
+  ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
-})
+}));
+