fix: 终端字符宽度&微调样式&路由切换动画

napcat.webui/src/pages/index.tsx

@@ -1,4 +1,5 @@
-import { Route, Routes } from 'react-router-dom'
+import { AnimatePresence, motion } from 'motion/react'
+import { Route, Routes, useLocation } from 'react-router-dom'
 
 import DefaultLayout from '@/layouts/default'
 
@@ -12,19 +13,30 @@ import LogsPage from './dashboard/logs'
 import NetworkPage from './dashboard/network'
 
 export default function IndexPage() {
+  const location = useLocation()
   return (
     <DefaultLayout>
-      <Routes>
-        <Route element={<DashboardIndexPage />} path="/" />
-        <Route element={<NetworkPage />} path="/network" />
-        <Route element={<ConfigPage />} path="/config" />
-        <Route element={<LogsPage />} path="/logs" />
-        <Route element={<DebugPage />} path="/debug">
-          <Route path="ws" element={<WSDebug />} />
-          <Route path="http" element={<HttpDebug />} />
-        </Route>
-        <Route element={<AboutPage />} path="/about" />
-      </Routes>
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={location.pathname}
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -50 }}
+          transition={{ duration: 0.3 }}
+        >
+          <Routes location={location} key={location.pathname}>
+            <Route element={<DashboardIndexPage />} path="/" />
+            <Route element={<NetworkPage />} path="/network" />
+            <Route element={<ConfigPage />} path="/config" />
+            <Route element={<LogsPage />} path="/logs" />
+            <Route element={<DebugPage />} path="/debug">
+              <Route path="ws" element={<WSDebug />} />
+              <Route path="http" element={<HttpDebug />} />
+            </Route>
+            <Route element={<AboutPage />} path="/about" />
+          </Routes>
+        </motion.div>
+      </AnimatePresence>
     </DefaultLayout>
   )
 }