fix: 字体、终端样式

2025-07-19 12:03:37 +00:00 · 2025-02-04 12:59:51 +08:00
parent 8002dc5bc5
commit 0f3251f35b
23 changed files with 173 additions and 121 deletions
--- a/napcat.webui/package.json
+++ b/napcat.webui/package.json
@@ -46,9 +46,9 @@
    "@react-aria/visually-hidden": "^3.8.19",
    "@reduxjs/toolkit": "^2.5.1",
    "@uidotdev/usehooks": "^2.4.1",
+    "@xterm/addon-canvas": "^0.7.0",
    "@xterm/addon-fit": "^0.10.0",
    "@xterm/addon-web-links": "^0.11.0",
-    "@xterm/addon-webgl": "^0.18.0",
    "@xterm/xterm": "^5.5.0",
    "ahooks": "^3.8.4",
    "axios": "^1.7.9",
--- a/napcat.webui/public/fonts/AaCute.woff
+++ b/napcat.webui/public/fonts/AaCute.woff
--- a/napcat.webui/public/fonts/JetBrainsMono-Italic.ttf
+++ b/napcat.webui/public/fonts/JetBrainsMono-Italic.ttf
--- a/napcat.webui/public/fonts/JetBrainsMono.ttf
+++ b/napcat.webui/public/fonts/JetBrainsMono.ttf
--- a/napcat.webui/src/components/display_network_item.tsx
+++ b/napcat.webui/src/components/display_network_item.tsx
@@ -27,7 +27,7 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
      <CardBody className="items-center md:gap-1 p-1 md:p-2">
        <div
          className={clsx(
-            'font-outfit flex-1',
+            'flex-1',
            size === 'md' ? 'text-2xl md:text-3xl' : 'text-xl md:text-2xl',
            title({
              color: size === 'md' ? 'pink' : 'yellow',
--- a/napcat.webui/src/components/file_manage/file_table.tsx
+++ b/napcat.webui/src/components/file_manage/file_table.tsx
@@ -58,7 +58,7 @@ export default function FileTable({
  onDownload
 }: FileTableProps) {
  const [page, setPage] = useState(1)
-  const pages = Math.ceil(files.length / PAGE_SIZE)
+  const pages = Math.ceil(files.length / PAGE_SIZE) || 1
  const start = (page - 1) * PAGE_SIZE
  const end = start + PAGE_SIZE
  const displayFiles = files.slice(start, end)
--- a/napcat.webui/src/components/hitokoto.tsx
+++ b/napcat.webui/src/components/hitokoto.tsx
@@ -36,7 +36,7 @@ export default function Hitokoto() {
          <div className="text-danger-400">一言加载失败：{error.message}</div>
        ) : (
          <>
-            <div className="font-noto-serif">{data?.hitokoto}</div>
+            <div>{data?.hitokoto}</div>
            <div className="text-right">
              —— <span className="text-default-400">{data?.from}</span>{' '}
              {data?.from_who}
--- a/napcat.webui/src/components/hover_titled_card.tsx
+++ b/napcat.webui/src/components/hover_titled_card.tsx
@@ -34,7 +34,7 @@ export default function HoverTiltedCard({
  rotateAmplitude = 14,
  showTooltip = false,
  overlayContent = (
-    <div className="text-center font-ubuntu mt-6 px-4 py-0.5 shadow-lg rounded-full bg-danger-600 text-default-100 bg-opacity-80">
+    <div className="text-center mt-6 px-4 py-0.5 shadow-lg rounded-full bg-danger-600 text-default-100 bg-opacity-80">
      NapCat
    </div>
  ),
--- a/napcat.webui/src/components/onebot/api/debug.tsx
+++ b/napcat.webui/src/components/onebot/api/debug.tsx
@@ -138,7 +138,7 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
        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">
+        <CardHeader className="font-bold text-lg gap-1 pb-0">
          <span className="mr-2">请求体</span>
          <Button
            color="warning"
@@ -186,7 +186,7 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
        className="my-4 relative bg-opacity-50 backdrop-blur-md"
      >
        <PageLoading loading={isFetching} />
-        <CardHeader className="font-noto-serif font-bold text-lg gap-1 pb-0">
+        <CardHeader className="font-bold text-lg gap-1 pb-0">
          <span className="mr-2">响应</span>
          <Button
            color="warning"
--- a/napcat.webui/src/components/onebot/api/nav_list.tsx
+++ b/napcat.webui/src/components/onebot/api/nav_list.tsx
@@ -67,7 +67,7 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
            onPress={() => onSelect(apiName as OneBotHttpApiPath)}
          >
            <CardBody>
-              <h2 className="font-ubuntu font-bold">{api.description}</h2>
+              <h2 className="font-bold">{api.description}</h2>
              <div
                className={clsx('text-sm text-danger-200', {
                  '!text-danger-400': apiName === selectedApi
--- a/napcat.webui/src/components/qq_info_card.tsx
+++ b/napcat.webui/src/components/qq_info_card.tsx
@@ -23,9 +23,7 @@ const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
      <PageLoading loading={loading} />
      {error ? (
        <CardBody className="items-center gap-1 justify-center">
-          <div className="font-outfit flex-1 text-content1-foreground">
-            Error
-          </div>
+          <div className="flex-1 text-content1-foreground">Error</div>
          <div className="whitespace-nowrap text-nowrap flex-shrink-0">
            {error.message}
          </div>
@@ -51,10 +49,8 @@ const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
            ></div>
          </div>
          <div className="flex-col justify-center">
-            <div className="font-outfit text-lg truncate">{data?.nick}</div>
-            <div className="font-ubuntu text-danger-500 text-sm">
-              {data?.uin}
-            </div>
+            <div className="text-lg truncate">{data?.nick}</div>
+            <div className="text-danger-500 text-sm">{data?.uin}</div>
          </div>
        </CardBody>
      )}
--- a/napcat.webui/src/components/sidebar/index.tsx
+++ b/napcat.webui/src/components/sidebar/index.tsx
@@ -47,11 +47,11 @@ const SideBar: React.FC<SideBarProps> = (props) => {
      style={{ overflow: 'hidden' }}
    >
      <motion.div className="w-64 flex flex-col items-stretch h-full transition-transform duration-300 ease-in-out z-30 relative float-right">
-        <div className="flex justify-center items-center mt-2 gap-2">
+        <div className="flex justify-center items-center my-2 gap-2">
          <Image radius="none" height={40} src={logo} className="mb-2" />
          <div
            className={clsx(
-              'flex items-center hm-medium',
+              'flex items-center font-bold',
              '!text-2xl shiny-text'
            )}
          >
--- a/napcat.webui/src/components/terminal/terminal-instance.tsx
+++ b/napcat.webui/src/components/terminal/terminal-instance.tsx
@@ -10,23 +10,24 @@ interface TerminalInstanceProps {

 export function TerminalInstance({ id }: TerminalInstanceProps) {
  const termRef = useRef<XTermRef>(null)
+  const connected = useRef(false)
+
+  const handleData = (data: string) => {
+    try {
+      const parsed = JSON.parse(data)
+      if (parsed.data) {
+        termRef.current?.write(parsed.data)
+      }
+    } catch (e) {
+      termRef.current?.write(data)
+    }
+  }

  useEffect(() => {
-    const handleData = (data: string) => {
-      try {
-        const parsed = JSON.parse(data)
-        if (parsed.data) {
-          termRef.current?.write(parsed.data)
-        }
-      } catch (e) {
-        termRef.current?.write(data)
-      }
-    }
-
-    TerminalManager.connectTerminal(id, handleData)
-
    return () => {
-      TerminalManager.disconnectTerminal(id, handleData)
+      if (connected.current) {
+        TerminalManager.disconnectTerminal(id, handleData)
+      }
    }
  }, [id])

@@ -34,5 +35,22 @@ export function TerminalInstance({ id }: TerminalInstanceProps) {
    TerminalManager.sendInput(id, data)
  }

-  return <XTerm ref={termRef} onInput={handleInput} className="w-full h-full" />
+  const handleResize = (cols: number, rows: number) => {
+    if (!connected.current) {
+      connected.current = true
+      console.log('instance', rows, cols)
+      TerminalManager.connectTerminal(id, handleData, { rows, cols })
+    } else {
+      TerminalManager.sendResize(id, cols, rows)
+    }
+  }
+
+  return (
+    <XTerm
+      ref={termRef}
+      onInput={handleInput}
+      onResize={handleResize} // 使用 fitAddon 改变后触发的 resize 回调
+      className="w-full h-full"
+    />
+  )
 }
--- a/napcat.webui/src/components/xterm.tsx
+++ b/napcat.webui/src/components/xterm.tsx
@@ -1,5 +1,7 @@
+import { CanvasAddon } from '@xterm/addon-canvas'
 import { FitAddon } from '@xterm/addon-fit'
 import { WebLinksAddon } from '@xterm/addon-web-links'
+// import { WebglAddon } from '@xterm/addon-webgl'
 import { Terminal } from '@xterm/xterm'
 import '@xterm/xterm/css/xterm.css'
 import clsx from 'clsx'
@@ -7,8 +9,6 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'

 import { useTheme } from '@/hooks/use-theme'

-import { gradientText } from '@/utils/terminal'
-
 export type XTermRef = {
  write: (
    ...args: Parameters<Terminal['write']>
@@ -19,26 +19,26 @@ export type XTermRef = {
  ) => ReturnType<Terminal['writeln']>
  writelnAsync: (data: Parameters<Terminal['writeln']>[0]) => Promise<void>
  clear: () => void
+  terminalRef: React.RefObject<Terminal | null>
 }

 export interface XTermProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onInput'> {
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onInput' | 'onResize'> {
  onInput?: (data: string) => void
  onKey?: (key: string, event: KeyboardEvent) => void
+  onResize?: (cols: number, rows: number) => void // 新增属性
 }

 const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
  const domRef = useRef<HTMLDivElement>(null)
  const terminalRef = useRef<Terminal | null>(null)
-  const { className, onInput, onKey, ...rest } = props
+  const { className, onInput, onKey, onResize, ...rest } = props
  const { theme } = useTheme()
  useEffect(() => {
-    if (!domRef.current) {
-      return
-    }
    const terminal = new Terminal({
      allowTransparency: true,
-      fontFamily: '"JetBrains Mono", "Aa偷吃可爱长大的", "Noto Serif SC", monospace',
+      fontFamily:
+        '"JetBrains Mono", "Aa偷吃可爱长大的", "Noto Serif SC", monospace',
      cursorInactiveStyle: 'outline',
      drawBoldTextInBrightColors: false,
      fontSize: 14,
@@ -48,25 +48,15 @@ const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
    const fitAddon = new FitAddon()
    terminal.loadAddon(
      new WebLinksAddon((event, uri) => {
-        if (event.ctrlKey) {
+        if (event.ctrlKey || event.metaKey) {
          window.open(uri, '_blank')
        }
      })
    )
    terminal.loadAddon(fitAddon)
-    terminal.open(domRef.current)
-
-    terminal.writeln(
-      gradientText(
-        'Welcome to NapCat WebUI',
-        [255, 0, 0],
-        [0, 255, 0],
-        true,
-        true,
-        true
-      )
-    )
+    terminal.open(domRef.current!)

+    terminal.loadAddon(new CanvasAddon())
    terminal.onData((data) => {
      if (onInput) {
        onInput(data)
@@ -81,6 +71,12 @@ const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {

    const resizeObserver = new ResizeObserver(() => {
      fitAddon.fit()
+      // 获取当前终端尺寸
+      const cols = terminal.cols
+      const rows = terminal.rows
+      if (onResize) {
+        onResize(cols, rows)
+      }
    })

    // 字体加载完成后重新调整终端大小
@@ -100,21 +96,49 @@ const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {

  useEffect(() => {
    if (terminalRef.current) {
-      terminalRef.current.options.theme = {
-        background: theme === 'dark' ? '#00000000' : '#ffffff00',
-        foreground: theme === 'dark' ? '#fff' : '#000',
-        selectionBackground:
-          theme === 'dark'
-            ? 'rgba(179, 0, 0, 0.3)'
-            : 'rgba(255, 167, 167, 0.3)',
-        cursor: theme === 'dark' ? '#fff' : '#000',
-        cursorAccent: theme === 'dark' ? '#000' : '#fff',
-        black: theme === 'dark' ? '#fff' : '#000'
+      if (theme === 'dark') {
+        terminalRef.current.options.theme = {
+          background: '#00000000',
+          black: '#000000',
+          red: '#cd3131',
+          green: '#0dbc79',
+          yellow: '#e5e510',
+          blue: '#2472c8',
+          cyan: '#11a8cd',
+          white: '#e5e5e5',
+          brightBlack: '#666666',
+          brightRed: '#f14c4c',
+          brightGreen: '#23d18b',
+          brightYellow: '#f5f543',
+          brightBlue: '#3b8eea',
+          brightCyan: '#29b8db',
+          brightWhite: '#e5e5e5',
+          foreground: '#cccccc',
+          selectionBackground: '#3a3d41',
+          cursor: '#ffffff'
+        }
+      } else {
+        terminalRef.current.options.theme = {
+          background: '#ffffff00',
+          black: '#000000',
+          red: '#aa3731',
+          green: '#448c27',
+          yellow: '#cb9000',
+          blue: '#325cc0',
+          cyan: '#0083b2',
+          white: '#7f7f7f',
+          brightBlack: '#777777',
+          brightRed: '#f05050',
+          brightGreen: '#60cb00',
+          brightYellow: '#ffbc5d',
+          brightBlue: '#007acc',
+          brightCyan: '#00aacb',
+          brightWhite: '#b0b0b0',
+          foreground: '#000000',
+          selectionBackground: '#bfdbfe',
+          cursor: '#007acc'
+        }
      }
-      terminalRef.current.options.fontWeight =
-        theme === 'dark' ? 'normal' : '600'
-      terminalRef.current.options.fontWeightBold =
-        theme === 'dark' ? 'bold' : '900'
    }
  }, [theme])

@@ -139,7 +163,8 @@ const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
      },
      clear: () => {
        terminalRef.current?.clear()
-      }
+      },
+      terminalRef: terminalRef
    }),
    []
  )
--- a/napcat.webui/src/config/site.tsx
+++ b/napcat.webui/src/config/site.tsx
@@ -51,7 +51,7 @@ export const siteConfig = {
      href: '/config'
    },
    {
-      label: 'NapCat日志',
+      label: '猫猫日志',
      icon: (
        <div className="w-5 h-5">
          <LogIcon />
--- a/napcat.webui/src/controllers/terminal_manager.ts
+++ b/napcat.webui/src/controllers/terminal_manager.ts
@@ -41,9 +41,16 @@ class TerminalManager {
    return data.data
  }

-  connectTerminal(id: string, callback: TerminalCallback): WebSocket {
+  connectTerminal(
+    id: string,
+    callback: TerminalCallback,
+    config?: {
+      cols?: number
+      rows?: number
+    }
+  ): WebSocket {
    let conn = this.connections.get(id)
-
+    const { cols = 80, rows = 24 } = config || {}
    if (!conn) {
      const url = new URL(window.location.href)
      url.protocol = url.protocol.replace('http', 'ws')
@@ -74,6 +81,7 @@ class TerminalManager {

      ws.onopen = () => {
        if (conn) conn.isConnected = true
+        this.sendResize(id, cols, rows)
      }

      ws.onclose = () => {
@@ -111,6 +119,13 @@ class TerminalManager {
      conn.ws.send(JSON.stringify({ type: 'input', data }))
    }
  }
+
+  sendResize(id: string, cols: number, rows: number) {
+    const conn = this.connections.get(id)
+    if (conn?.ws.readyState === WebSocket.OPEN) {
+      conn.ws.send(JSON.stringify({ type: 'resize', cols, rows }))
+    }
+  }
 }

 const terminalManager = new TerminalManager()
--- a/napcat.webui/src/fonts/AaCute.ttf
+++ b/napcat.webui/src/fonts/AaCute.ttf
--- a/napcat.webui/src/layouts/default.tsx
+++ b/napcat.webui/src/layouts/default.tsx
@@ -98,7 +98,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
      >
        <div
          className={clsx(
-            'h-10 flex items-center hm-medium text-xl backdrop-blur-lg rounded-full',
+            'h-10 flex items-center font-bold text-xl backdrop-blur-lg rounded-full',
            'dark:bg-background dark:shadow-danger-100',
            'bg-background !bg-opacity-50',
            'shadow-sm shadow-danger-50',
--- a/napcat.webui/src/pages/dashboard/terminal.tsx
+++ b/napcat.webui/src/pages/dashboard/terminal.tsx
@@ -100,7 +100,7 @@ export default function TerminalPage() {
  )

  return (
-    <div className="flex flex-col gap-2 p-4">
+    <div className="flex flex-col gap-2 p-4 h-[calc(100vh-6rem)] md:h-[calc(100vh-4rem)]">
      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter}
--- a/napcat.webui/src/styles/fonts.css
+++ b/napcat.webui/src/styles/fonts.css
@@ -1,17 +1,13 @@
@font-face {
  font-family: 'Aa偷吃可爱长大的';
-  src: url('../fonts/AaCute.ttf') format('truetype');
-  font-weight: normal;
+  src: url('/fonts/AaCute.woff') format('woff');
 }
@font-face {
  font-family: 'JetBrains Mono';
-  src: url('../fonts/JetBrainsMono.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
+  src: url('/fonts/JetBrainsMono.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/JetBrainsMono-Italic.ttf') format('truetype');
+  font-style: italic;
 }
-.xterm {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  font-smooth: always;
-}
--- a/napcat.webui/src/styles/globals.css
+++ b/napcat.webui/src/styles/globals.css
@@ -6,35 +6,14 @@

 body {
  font-family:
-    PingFang SC,
    'Aa偷吃可爱长大的',
+    PingFang SC,
    Helvetica Neue,
    Microsoft YaHei,
    sans-serif !important;
 }

@layer components {
-  .hm-medium {
-    font-family:
-      PingFang SC,
-      'Aa偷吃可爱长大的',
-      Helvetica Neue,
-      Microsoft YaHei,
-      sans-serif !important;
-    @apply font-bold;
-  }
-  .font-ubuntu {
-    font-family: 'Aa偷吃可爱长大的', sans-serif;
-  }
-  .font-outfit {
-    font-family: 'Aa偷吃可爱长大的', sans-serif;
-  }
-  .font-libre {
-    font-family: 'Aa偷吃可爱长大的', serif;
-  }
-  .font-noto-serif {
-    font-family: 'Aa偷吃可爱长大的', serif;
-  }
  .hide-scrollbar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
@@ -105,7 +84,7 @@ body {
 .context-view.monaco-menu-container * {
  font-family:
    PingFang SC,
-    'Harmony',
+    'Aa偷吃可爱长大的',
    Helvetica Neue,
    Microsoft YaHei,
    sans-serif !important;
@@ -117,3 +96,10 @@ body {
 .ql-editor img {
  @apply inline-block;
 }
+
+.xterm {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-smooth: always;
+}