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

2025-07-19 12:03:37 +00:00 · 2025-01-27 15:58:27 +08:00
parent 823faa2790
commit dcef3f3c3b
13 changed files with 133 additions and 96 deletions
--- a/napcat.webui/src/components/audio_player.tsx
+++ b/napcat.webui/src/components/audio_player.tsx
@@ -187,7 +187,7 @@ export default function AudioPlayer(props: AudioPlayerProps) {
  return (
    <div
      className={clsx(
-        'fixed right-0 bottom-0 z-[9999] w-full md:w-96',
+        'fixed right-0 bottom-0 z-[52] w-full md:w-96',
        !translateX && !translateY && 'transition-transform',
        isCollapsed && 'md:hover:!translate-x-80'
      )}
--- a/napcat.webui/src/components/code_editor.tsx
+++ b/napcat.webui/src/components/code_editor.tsx
@@ -19,12 +19,6 @@ loader.config({
  }
 })

-loader.config({
-  'vs/nls': {
-    availableLanguages: { '*': 'zh-cn' }
-  }
-})
-
 export interface CodeEditorProps extends React.ComponentProps<typeof Editor> {
  test?: string
 }
--- a/napcat.webui/src/components/icons.tsx
+++ b/napcat.webui/src/components/icons.tsx
@@ -1125,7 +1125,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1173,7 +1173,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1220,7 +1220,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1270,7 +1270,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1320,7 +1320,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1372,7 +1372,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1422,7 +1422,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1469,7 +1469,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1519,7 +1519,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1566,7 +1566,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1613,7 +1613,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1660,7 +1660,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
@@ -1707,7 +1707,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
    >
      <g
        id="svgGroup"
-        stroke-linecap="round"
+        strokeLinecap="round"
        stroke="#000"
        fill="transparent"
        style={{
--- a/napcat.webui/src/components/modal.tsx
+++ b/napcat.webui/src/components/modal.tsx
@@ -50,8 +50,8 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
        onNativeClose()
      }}
      classNames={{
-        backdrop: 'z-[99999999]',
-        wrapper: 'z-[999999999]'
+        backdrop: 'z-[99]',
+        wrapper: 'z-[99]'
      }}
      {...rest}
    >
--- a/napcat.webui/src/components/onebot/api/debug.tsx
+++ b/napcat.webui/src/components/onebot/api/debug.tsx
@@ -4,7 +4,7 @@ import { Input } from '@heroui/input'
 import { Snippet } from '@heroui/snippet'
 import { useLocalStorage } from '@uidotdev/usehooks'
 import { motion } from 'motion/react'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import toast from 'react-hot-toast'
 import { IoLink, IoSend } from 'react-icons/io5'
 import { PiCatDuotone } from 'react-icons/pi'
@@ -41,6 +41,7 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
  const [isCodeEditorOpen, setIsCodeEditorOpen] = useState(false)
  const [isResponseOpen, setIsResponseOpen] = useState(false)
  const [isFetching, setIsFetching] = useState(false)
+  const responseRef = useRef<HTMLDivElement>(null)
  const parsedRequest = parse(data.request)
  const parsedResponse = parse(data.response)

@@ -69,6 +70,11 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
        })
        .finally(() => {
          setIsFetching(false)
+          setIsResponseOpen(true)
+          responseRef.current?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          })
          toast.dismiss(r)
        })
    } catch (error) {
@@ -84,8 +90,8 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
  }, [path])

  return (
-    <div className="flex-1 overflow-y-auto p-4 rounded-lg shadow-md">
-      <h1 className="text-2xl font-bold mb-4 flex items-center gap-1 text-danger-400 ">
+    <section className="p-4 pt-14 rounded-lg shadow-md">
+      <h1 className="text-2xl font-bold mb-4 flex items-center gap-1 text-danger-400">
        <PiCatDuotone />
        {data.description}
      </h1>
@@ -93,6 +99,9 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
        <Snippet
          className="bg-default-50 bg-opacity-50 backdrop-blur-md"
          symbol={<IoLink size={18} className="inline-block mr-1" />}
+          tooltipProps={{
+            content: '点击复制地址'
+          }}
        >
          {path}
        </Snippet>
@@ -125,7 +134,10 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
          <IoSend />
        </Button>
      </div>
-      <Card shadow="sm" className="my-4 bg-opacity-50 backdrop-blur-md">
+      <Card
+        shadow="sm"
+        className="my-4 bg-opacity-50 backdrop-blur-md overflow-visible z-20"
+      >
        <CardHeader className="font-noto-serif font-bold text-lg gap-1 pb-0">
          <span className="mr-2">请求体</span>
          <Button
@@ -140,7 +152,7 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
        </CardHeader>
        <CardBody>
          <motion.div
-            className="overflow-hidden"
+            ref={responseRef}
            initial={{ opacity: 0, height: 0 }}
            animate={{
              opacity: isCodeEditorOpen ? 1 : 0,
@@ -223,7 +235,7 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
        <h2 className="text-xl font-semibold mt-4 mb-2">响应体结构</h2>
        <DisplayStruct schema={parsedResponse} />
      </div>
-    </div>
+    </section>
  )
 }

--- a/napcat.webui/src/components/onebot/api/nav_list.tsx
+++ b/napcat.webui/src/components/onebot/api/nav_list.tsx
@@ -19,9 +19,8 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
  return (
    <motion.div
      className={clsx(
-        'flex-shrink-0 absolute md:!top-0 md:bottom-0 left-0 !overflow-hidden md:relative md:w-auto z-20',
-        openSideBar &&
-          'bottom-8 z-10 bg-background bg-opacity-20 backdrop-blur-md top-14'
+        'h-[calc(100vh-3.5rem)] left-0 !overflow-hidden md:w-auto z-20 top-[3.3rem] md:top-[3rem] absolute md:sticky md:float-start',
+        openSideBar && 'bg-background bg-opacity-20 backdrop-blur-md'
      )}
      initial={{ width: 0 }}
      transition={{
@@ -32,7 +31,7 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
      animate={{ width: openSideBar ? '16rem' : '0rem' }}
      style={{ overflowY: openSideBar ? 'auto' : 'hidden' }}
    >
-      <div className="w-64 h-full overflow-y-auto px-2 float-right">
+      <div className="w-64 h-full overflow-y-auto px-2 pt-2 pb-10 md:pb-0">
        <Input
          className="sticky top-0 z-10 text-danger-600"
          classNames={{
--- a/napcat.webui/src/components/onebot/send_modal.tsx
+++ b/napcat.webui/src/components/onebot/send_modal.tsx
@@ -10,6 +10,7 @@ import {
 import { useCallback, useRef } from 'react'
 import toast from 'react-hot-toast'

+import ChatInputModal from '@/components/chat_input/modal'
 import CodeEditor from '@/components/code_editor'
 import type { CodeEditorRef } from '@/components/code_editor'

@@ -72,6 +73,8 @@ const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
                </div>
              </ModalBody>
              <ModalFooter>
+                <ChatInputModal />
+
                <Button color="danger" variant="flat" onPress={onClose}>
                  取消
                </Button>
--- a/napcat.webui/src/components/xterm.tsx
+++ b/napcat.webui/src/components/xterm.tsx
@@ -36,7 +36,9 @@ const XTerm = forwardRef<XTermRef, React.HTMLAttributes<HTMLDivElement>>(
        allowTransparency: true,
        fontFamily: '"Fira Code", "Harmony", "Noto Serif SC", monospace',
        cursorInactiveStyle: 'outline',
-        drawBoldTextInBrightColors: false
+        drawBoldTextInBrightColors: false,
+        letterSpacing: 0,
+        lineHeight: 1.0
      })
      terminalRef.current = terminal
      const fitAddon = new FitAddon()
@@ -51,10 +53,6 @@ const XTerm = forwardRef<XTermRef, React.HTMLAttributes<HTMLDivElement>>(
      terminal.loadAddon(new WebglAddon())
      terminal.open(domRef.current)

-      setTimeout(() => {
-        fitAddon.fit()
-      }, 0)
-
      terminal.writeln(
        gradientText(
          'Welcome to NapCat WebUI',
@@ -69,16 +67,16 @@ const XTerm = forwardRef<XTermRef, React.HTMLAttributes<HTMLDivElement>>(
      const resizeObserver = new ResizeObserver(() => {
        fitAddon.fit()
      })
-      resizeObserver.observe(domRef.current)

-      const handleFontLoad = () => {
-        terminal.refresh(0, terminal.rows - 1)
-      }
-      document.fonts.addEventListener('loadingdone', handleFontLoad)
+      // 字体加载完成后重新调整终端大小
+      document.fonts.ready.then(() => {
+        fitAddon.fit()
+
+        resizeObserver.observe(domRef.current!)
+      })

      return () => {
        resizeObserver.disconnect()
-        document.fonts.removeEventListener('loadingdone', handleFontLoad)
        setTimeout(() => {
          terminal.dispose()
        }, 0)
--- a/napcat.webui/src/layouts/default.tsx
+++ b/napcat.webui/src/layouts/default.tsx
@@ -2,7 +2,7 @@ import { BreadcrumbItem, Breadcrumbs } from '@heroui/breadcrumbs'
 import { Button } from '@heroui/button'
 import { useLocalStorage } from '@uidotdev/usehooks'
 import clsx from 'clsx'
-import { motion } from 'motion/react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useEffect, useMemo, useRef } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { MdMenu, MdMenuOpen } from 'react-icons/md'
@@ -79,7 +79,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  }, [location.pathname])
  return (
    <div
-      className="h-screen relative flex bg-danger-50 dark:bg-black"
+      className="h-screen relative flex bg-danger-50 dark:bg-black items-stretch"
      style={{
        backgroundImage: `url(${b64img})`,
        backgroundSize: 'cover'
@@ -89,13 +89,22 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
      <div
        ref={contentRef}
        className={clsx(
-          'overflow-y-auto relative flex-1 rounded-md m-1 bg-content1 pb-10 md:pb-0',
+          'overflow-y-auto flex-1 rounded-md m-1 bg-content1 pb-10 md:pb-0',
          openSideBar ? 'ml-0' : 'ml-1',
          !b64img && 'shadow-inner',
-          b64img && '!bg-opacity-50 backdrop-blur-none dark:bg-background'
+          b64img && '!bg-opacity-50 backdrop-blur-none dark:bg-background',
+          'overflow-x-hidden'
        )}
      >
-        <div className="h-10 flex items-center hm-medium text-xl sticky top-2 left-0 backdrop-blur-lg z-20 shadow-sm bg-background dark:bg-background shadow-danger-50 dark:shadow-danger-100 m-2 rounded-full !bg-opacity-50">
+        <div
+          className={clsx(
+            'h-10 flex items-center hm-medium text-xl backdrop-blur-lg rounded-full',
+            'dark:bg-background dark:shadow-danger-100',
+            'bg-background !bg-opacity-50',
+            'shadow-sm shadow-danger-50',
+            'z-30 m-2 mb-0 sticky top-2 left-0'
+          )}
+        >
          <motion.div
            className={clsx(
              'mr-1 ease-in-out ml-0 md:relative',
@@ -117,7 +126,19 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
          </motion.div>
          <Breadcrumbs isDisabled size="lg">
            {title?.map((item, index) => (
-              <BreadcrumbItem key={index}>{item}</BreadcrumbItem>
+              <BreadcrumbItem key={index}>
+                <AnimatePresence mode="wait">
+                  <motion.div
+                    key={item}
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: 10 }}
+                    transition={{ duration: 0.3 }}
+                  >
+                    {item}
+                  </motion.div>
+                </AnimatePresence>
+              </BreadcrumbItem>
            ))}
          </Breadcrumbs>
        </div>
--- a/napcat.webui/src/pages/dashboard/debug/http/index.tsx
+++ b/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>
    </>
  )
--- a/napcat.webui/src/pages/dashboard/debug/websocket/index.tsx
+++ b/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>
--- a/napcat.webui/src/pages/index.tsx
+++ b/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>
  )
 }
--- a/napcat.webui/src/styles/globals.css
+++ b/napcat.webui/src/styles/globals.css
@@ -44,6 +44,7 @@ body {
  -moz-border-radius: 2em;
  border-radius: 2em;
 }
+
 .monaco-editor {
  outline: none !important;
  border-radius: 5px !important;
@@ -75,6 +76,10 @@ body {
  border-radius: 5px !important;
 }

+.context-view.monaco-menu-container * {
+    font-family: PingFang SC,"Harmony",Helvetica Neue,Microsoft YaHei,sans-serif !important;
+}
+
 .ql-hidden {
  @apply hidden;
 }