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

napcat.webui/src/pages/dashboard/debug/http/index.tsx

@@ -27,41 +27,36 @@ export default function HttpDebug() {
   return (
     <>
       <title>HTTP调试 - NapCat WebUI</title>
-      <div className="w-full h-[calc(100%-3.6rem)] flex items-stretch">
-        <OneBotApiNavList
-          data={oneBotHttpApi}
-          selectedApi={selectedApi}
-          onSelect={setSelectedApi}
-          openSideBar={openSideBar}
-        />
-        <div
-          ref={contentRef}
-          className="flex-1 h-full overflow-x-hidden relative"
+      <OneBotApiNavList
+        data={oneBotHttpApi}
+        selectedApi={selectedApi}
+        onSelect={setSelectedApi}
+        openSideBar={openSideBar}
+      />
+      <div ref={contentRef} className="flex-1 h-full overflow-x-hidden">
+        <motion.div
+          className="absolute top-16 z-30 md:!ml-4"
+          animate={{ marginLeft: openSideBar ? '16rem' : '1rem' }}
+          transition={{ type: 'spring', stiffness: 150, damping: 15 }}
         >
-          <motion.div
-            className="sticky top-0 z-20 md:!ml-4"
-            animate={{ marginLeft: openSideBar ? '16rem' : '1rem' }}
-            transition={{ type: 'spring', stiffness: 150, damping: 15 }}
+          <Button
+            isIconOnly
+            color="danger"
+            radius="md"
+            variant="shadow"
+            size="sm"
+            onPress={() => setOpenSideBar(!openSideBar)}
           >
-            <Button
-              isIconOnly
-              color="danger"
-              radius="md"
-              variant="shadow"
-              size="sm"
-              onPress={() => setOpenSideBar(!openSideBar)}
-            >
-              <TbSquareRoundedChevronLeftFilled
-                size={24}
-                className={clsx(
-                  'transition-transform',
-                  openSideBar ? '' : 'transform rotate-180'
-                )}
-              />
-            </Button>
-          </motion.div>
-          <OneBotApiDebug path={selectedApi} data={data} />
-        </div>
+            <TbSquareRoundedChevronLeftFilled
+              size={24}
+              className={clsx(
+                'transition-transform',
+                openSideBar ? '' : 'transform rotate-180'
+              )}
+            />
+          </Button>
+        </motion.div>
+        <OneBotApiDebug path={selectedApi} data={data} />
       </div>
     </>
   )

napcat.webui/src/pages/dashboard/debug/websocket/index.tsx

@@ -7,7 +7,6 @@ import toast from 'react-hot-toast'
 
 import key from '@/const/key'
 
-import ChatInputModal from '@/components/chat_input/modal'
 import OneBotMessageList from '@/components/onebot/message_list'
 import OneBotSendModal from '@/components/onebot/send_modal'
 import WSStatus from '@/components/onebot/ws_status'
@@ -82,7 +81,6 @@ export default function WSDebug() {
                   {FilterMessagesType}
                 </div>
                 <OneBotSendModal sendMessage={sendMessage} />
-                <ChatInputModal />
               </div>
             </div>
           </CardBody>

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>
   )
 }