feat: 更新依赖项并移除速率限制中间件

refactor: remove image-size

.vscode/launch.json

@@ -0,0 +1,115 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:shell",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "dev:shell"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "build:shell",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "build:shell"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "build:universal",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "build:universal"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "build:framework",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "build:framework"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "build:webui",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "build:webui"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:universal",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "dev:universal"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:framework",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "dev:framework"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:webui",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "dev:webui"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "lint",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "lint"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "depend",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "depend"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:depend",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "dev:depend"
+            ]
+        }
+    ]
+}

.vscode/settings.json

@@ -5,5 +5,8 @@
         ".env.universal": ".env.*",
         "tsconfig.json": "tsconfig.*.json, env.d.ts, vite.config.ts",
         "package.json": "package-lock.json, eslint*, .prettier*, .editorconfig, manifest.json, logo.png, .gitignore, LICENSE"
-    }
+    },
+    "css.customData": [
+        ".vscode/tailwindcss.json"
+    ],
 }

.vscode/tailwindcss.json

@@ -0,0 +1,55 @@
+{
+    "version": 1.1,
+    "atDirectives": [
+        {
+            "name": "@tailwind",
+            "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+                }
+            ]
+        },
+        {
+            "name": "@apply",
+            "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+                }
+            ]
+        },
+        {
+            "name": "@responsive",
+            "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+                }
+            ]
+        },
+        {
+            "name": "@screen",
+            "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+                }
+            ]
+        },
+        {
+            "name": "@variants",
+            "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+                }
+            ]
+        }
+    ]
+}

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+nanaeonn@outlook.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

README.md

@@ -1,67 +1,66 @@
+<img src="https://napneko.github.io/assets/newnewlogo.png" width = "305" height = "411" alt="NapCat" align=right />
 <div align="center">
-  
-![NapCatQQ](https://socialify.git.ci/NapNeko/NapCatQQ/image?font=Jost&logo=https%3A%2F%2Fnapneko.github.io%2Fassets%2Fnewlogo.png&name=1&owner=1&pattern=Diagonal+Stripes&stargazers=1&theme=Auto)
-  
+
+# NapCat
+
+
+
+_Modern protocol-side framework implemented based on NTQQ._
+
+> 云起兮风生，心向远方兮路未曾至.
+
 </div>
 
 ---
-## 欢迎回家
-NapCatQQ 是现代化的基于 NTQQ 的 Bot 协议端实现
 
-## 特性介绍
-- [x] **安装简单**：就算是笨蛋也能使用
-- [x] **性能友好**：就算是低内存也能使用
-- [x] **接口丰富**：就算是没有也能使用
-- [x] **稳定好用**：就算是被捉也能使用
+## Welcome
++ NapCatQQ is a modern implementation of the Bot protocol based on NTQQ.
+  - NapCatQQ 是现代化的基于 NTQQ 的 Bot 协议端实现
 
-## 使用框架
+## Feature
+
++ **Easy to Use**
+  - 作为初学者能够轻松使用.
++ **Quick and Efficient**
+  - 在低内存操作系统长时运行.
++ **Rich API Interface**
+  - 完整实现了大部分标准接口.
++ **Stable and Reliable**
+  - 持续稳定的开发与维护.
+## Quick Start
 
 可前往 [Release](https://github.com/NapNeko/NapCatQQ/releases/) 页面下载最新版本
 
 **首次使用**请务必查看如下文档看使用教程
 
-### 文档地址
+## Link
 
-[Cloudflare.Worker](https://doc.napneko.icu/)
+| Docs | [![Github.IO](https://img.shields.io/badge/docs%20on-Github.IO-orange)](https://napneko.github.io/) | [![Cloudflare.Worker](https://img.shields.io/badge/docs%20on-Cloudflare.Worker-black)](https://doc.napneko.icu/) | [![Cloudflare.HKServer](https://img.shields.io/badge/docs%20on-Cloudflare.HKServer-informational)](https://napcat.napneko.icu/) |
+|:-:|:-:|:-:|:-:|
 
-[Cloudflare.HKServer](https://napcat.napneko.icu/)
+| Docs | [![Cloudflare.Pages](https://img.shields.io/badge/docs%20on-Cloudflare.Pages-blue)](https://napneko.pages.dev/) | [![Server.Other](https://img.shields.io/badge/docs%20on-Server.Other-green)](https://napcat.cyou/) | [![NapCat.Wiki](https://img.shields.io/badge/docs%20on-NapCat.Wiki-red)](https://www.napcat.wiki) |
+|:-:|:-:|:-:|:-:|
 
-[Github.IO](https://napneko.github.io/)
+| QQ Group | [![QQ Group#4](https://img.shields.io/badge/QQ%20Group%234-Join-blue)](https://qm.qq.com/q/CMmPbGw0jA) | [![QQ Group#3](https://img.shields.io/badge/QQ%20Group%233-Join-blue)](https://qm.qq.com/q/8zJMLjqy2Y) | [![QQ Group#2](https://img.shields.io/badge/QQ%20Group%232-Join-blue)](https://qm.qq.com/q/HaRcfrHpUk) | [![QQ Group#1](https://img.shields.io/badge/QQ%20Group%231-Join-blue)](https://qm.qq.com/q/I6LU87a0Yq) |
+|:-:|:-:|:-:|:-:|:-:|
 
-[Cloudflare.Pages](https://napneko.pages.dev/)
+| Telegram | [![Telegram](https://img.shields.io/badge/Telegram-MelodicMoonlight-blue)](https://t.me/MelodicMoonlight) |
+|:-:|:-:|
 
-[Server.Other](https://docs.napcat.cyou/)
+## Thanks
 
-[NapCat.Wiki](https://www.napcat.wiki)
++ [Lagrange](https://github.com/LagrangeDev/Lagrange.Core) 对本项目的大力支持 参考部分代码 已获授权
 
-## 回家旅途
-[QQ Group#1](https://qm.qq.com/q/I6LU87a0Yq)
++ [AstrBot](https://github.com/AstrBotDevs/AstrBot) 是完美适配本项目的LLM Bot框架 在此推荐一下
 
-[QQ Group#2](https://qm.qq.com/q/HaRcfrHpUk)
-
-[Telegram](https://t.me/MelodicMoonlight)
-
-> QQ Group#2 准许Bot / Telegram与QQ Group#2 为新建Group
-
-## 性能设计/协议标准
-NapCat 已实现90％+的 OneBot / GoCQ 标准接口，并提供兼容性保留接口，其设计理念遵守 无数据库/异步优先/后台刷新 的性能思想。
-
-由此设计带来一系列好处，在开发中，获取群员列表通常小于50Ms，单条文本消息发送在320Ms以内，在1k+的群聊流畅运行，同时带来一些副作用，消息Id无法持久，无法上报撤回消息原始内容。
-
-NapCat 在设计理念下遵守 OneBot 规范大多数要求并且积极改进，任何合理的标准化 Issue 与 Pr 将被接收。
-
-## 感谢他们
-感谢 [Lagrange](https://github.com/LagrangeDev/Lagrange.Core) 对本项目的大力支持 参考部分代码 已获授权
-
-感谢 React 强力驱动 NapCat.WebUi
-
-不过最最重要的 还是需要感谢屏幕前的你哦~
++ 不过最最重要的 还是需要感谢屏幕前的你哦~
 
 ---
 
-## 特殊感谢
-[LLOneBot](https://github.com/LLOneBot/LLOneBot) 相关的开发曾参与本项目
+## License
+本项目采用 混合协议 开源，因此使用本项目时，你需要注意以下几点：
+1. 第三方库代码或修改部分遵循其原始开源许可.
+2. 本项目获取部分项目授权而不受部分约束
+2. 项目其余逻辑代码采用[本仓库开源许可](./LICENSE).
 
-## 开源附加
-
-任何使用本仓库代码的地方，都应当严格遵守[本仓库开源许可](./LICENSE)。**本仓库仅用于提高IM易用性，实现类似Hook推送，此外，禁止任何项目未经仓库主作者授权二次分发或基于 NapCat 代码开发。使用请遵守当地法律法规，由此造成的问题由使用者和提供违规使用教程者负责。**
+**本仓库仅用于提高易用性，实现消息推送类功能，此外，禁止任何项目未经仓库主作者授权基于 NapCat 代码开发。使用请遵守当地法律法规，由此造成的问题由使用者和提供违规使用教程者负责。**

SECURITY.md

@@ -0,0 +1,11 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| > 4.0   | :white_check_mark: |
+| < 4.0   | :x:                |
+
+## Reporting a Vulnerability
+you should open an issue

launcher/launcher-user.bat

@@ -19,7 +19,7 @@ for %%a in ("%RetString%") do (
 SET QQPath=%pathWithoutUninstall%QQ.exe
 
 if not exist "%QQpath%" (
-    echo provided QQ path is invalid: %QQpath%
+    echo provided QQ path is invalid
     pause
     exit /b
 )

launcher/launcher-win10-user.bat

@@ -19,7 +19,7 @@ for %%a in ("%RetString%") do (
 SET QQPath=%pathWithoutUninstall%QQ.exe
 
 if not exist "%QQpath%" (
-    echo provided QQ path is invalid: %QQpath%
+    echo provided QQ path is invalid
     pause
     exit /b
 )

launcher/launcher-win10.bat

@@ -27,8 +27,8 @@ for %%a in ("%RetString%") do (
 
 SET QQPath=%pathWithoutUninstall%QQ.exe
 
-if not exist "%QQpath%" (
-    echo provided QQ path is invalid: %QQpath%
+if not exist "%QQPath%" (
+    echo provided QQ path is invalid
     pause
     exit /b
 )

launcher/launcher.bat

@@ -27,8 +27,8 @@ for %%a in ("%RetString%") do (
 
 SET QQPath=%pathWithoutUninstall%QQ.exe
 
-if not exist "%QQpath%" (
-    echo provided QQ path is invalid: %QQpath%
+if not exist "%QQPath%" (
+    echo provided QQ path is invalid
     pause
     exit /b
 )

launcher/qqnt.json

@@ -1,10 +1,9 @@
 {
   "name": "qq-chat",
-  "version": "9.9.17-30899",
-  "verHash": "ececf273",
-  "linuxVersion": "3.2.15-30899",
-  "linuxVerHash": "63c751e8",
-  "type": "module",
+  "version": "9.9.19-34740",
+  "verHash": "f31348f2",
+  "linuxVersion": "3.2.17-34740",
+  "linuxVerHash": "5aa2d8d6",
   "private": true,
   "description": "QQ",
   "productName": "QQ",
@@ -18,9 +17,9 @@
     "qd": "externals/devtools/cli/index.js"
   },
   "main": "./loadNapCat.js",
-  "buildVersion": "30899",
+  "buildVersion": "34740",
   "isPureShell": true,
   "isByteCodeShell": true,
   "platform": "win32",
   "eleArch": "x64"
-}
+}

manifest.json

@@ -4,7 +4,7 @@
   "name": "NapCatQQ",
   "slug": "NapCat.Framework",
   "description": "高性能的 OneBot 11 协议实现",
-  "version": "4.4.20",
+  "version": "4.7.62",
   "icon": "./logo.png",
   "authors": [
     {

napcat.webui/package.json

@@ -13,6 +13,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@heroui/accordion": "^2.2.8",
     "@heroui/avatar": "2.2.7",
     "@heroui/breadcrumbs": "2.2.7",
     "@heroui/button": "2.2.10",
@@ -32,6 +33,7 @@
     "@heroui/pagination": "^2.2.9",
     "@heroui/popover": "2.3.10",
     "@heroui/select": "2.4.10",
+    "@heroui/skeleton": "^2.2.6",
     "@heroui/slider": "2.4.8",
     "@heroui/snippet": "2.2.11",
     "@heroui/spinner": "2.2.7",
@@ -46,13 +48,14 @@
     "@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",
     "clsx": "^2.1.1",
+    "crypto-js": "^4.2.0",
     "echarts": "^5.5.1",
     "event-source-polyfill": "^1.0.31",
     "framer-motion": "^12.0.6",
@@ -63,6 +66,7 @@
     "qrcode.react": "^4.2.0",
     "quill": "^2.0.3",
     "react": "^19.0.0",
+    "react-color": "^2.19.3",
     "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.5",
     "react-error-boundary": "^5.0.0",
@@ -70,6 +74,7 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.4.0",
     "react-markdown": "^9.0.3",
+    "react-photo-view": "^1.2.7",
     "react-redux": "^9.2.0",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^7.1.4",
@@ -84,6 +89,7 @@
     "@eslint/js": "^9.19.0",
     "@react-types/shared": "^3.26.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/crypto-js": "^4.2.2",
     "@types/event-source-polyfill": "^1.0.5",
     "@types/fabric": "^5.3.9",
     "@types/node": "^22.12.0",

napcat.webui/src/App.tsx

@@ -16,6 +16,16 @@ import store from '@/store'
 const WebLoginPage = lazy(() => import('@/pages/web_login'))
 const IndexPage = lazy(() => import('@/pages/index'))
 const QQLoginPage = lazy(() => import('@/pages/qq_login'))
+const DashboardIndexPage = lazy(() => import('@/pages/dashboard'))
+const AboutPage = lazy(() => import('@/pages/dashboard/about'))
+const ConfigPage = lazy(() => import('@/pages/dashboard/config'))
+const DebugPage = lazy(() => import('@/pages/dashboard/debug'))
+const HttpDebug = lazy(() => import('@/pages/dashboard/debug/http'))
+const WSDebug = lazy(() => import('@/pages/dashboard/debug/websocket'))
+const FileManagerPage = lazy(() => import('@/pages/dashboard/file_manager'))
+const LogsPage = lazy(() => import('@/pages/dashboard/logs'))
+const NetworkPage = lazy(() => import('@/pages/dashboard/network'))
+const TerminalPage = lazy(() => import('@/pages/dashboard/terminal'))
 
 function App() {
   return (
@@ -58,9 +68,21 @@ function AuthChecker({ children }: { children: React.ReactNode }) {
 function AppRoutes() {
   return (
     <Routes>
-      <Route element={<IndexPage />} path="/*" />
-      <Route element={<QQLoginPage />} path="/qq_login" />
-      <Route element={<WebLoginPage />} path="/web_login" />
+      <Route path="/" element={<IndexPage />}>
+        <Route index element={<DashboardIndexPage />} />
+        <Route path="network" element={<NetworkPage />} />
+        <Route path="config" element={<ConfigPage />} />
+        <Route path="logs" element={<LogsPage />} />
+        <Route path="debug" element={<DebugPage />}>
+          <Route path="ws" element={<WSDebug />} />
+          <Route path="http" element={<HttpDebug />} />
+        </Route>
+        <Route path="file_manager" element={<FileManagerPage />} />
+        <Route path="terminal" element={<TerminalPage />} />
+        <Route path="about" element={<AboutPage />} />
+      </Route>
+      <Route path="/qq_login" element={<QQLoginPage />} />
+      <Route path="/web_login" element={<WebLoginPage />} />
     </Routes>
   )
 }

napcat.webui/src/components/ColorPicker.tsx

@@ -0,0 +1,36 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import React from 'react'
+import { ColorResult, SketchPicker } from 'react-color'
+
+// 假定 heroui 提供的 Popover组件
+
+interface ColorPickerProps {
+  color: string
+  onChange: (color: ColorResult) => void
+}
+
+const ColorPicker: React.FC<ColorPickerProps> = ({ color, onChange }) => {
+  const handleChange = (colorResult: ColorResult) => {
+    onChange(colorResult)
+  }
+
+  return (
+    <Popover triggerScaleOnOpen={false}>
+      <PopoverTrigger>
+        <div
+          className="w-36 h-8 rounded-md cursor-pointer border border-content4"
+          style={{ background: color }}
+        />
+      </PopoverTrigger>
+      <PopoverContent>
+        <SketchPicker
+          color={color}
+          onChange={handleChange}
+          className="!bg-transparent !shadow-none"
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default ColorPicker

napcat.webui/src/components/audio_player.tsx

@@ -231,7 +231,7 @@ export default function AudioPlayer(props: AudioPlayerProps) {
                 : 'top-3 -left-8 rounded-l-full bg-opacity-50 backdrop-blur-md'
             )}
             variant="solid"
-            color="danger"
+            color="primary"
             size="sm"
             onPress={() => setIsCollapsed(!isCollapsed)}
           >

napcat.webui/src/components/button/add_button.tsx

@@ -33,7 +33,7 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
     >
       <DropdownTrigger>
         <Button
-          color="danger"
+          color="primary"
           startContent={<IoAddCircleOutline className="text-2xl" />}
         >
           新建

napcat.webui/src/components/button/save_buttons.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@heroui/button'
+import clsx from 'clsx'
 import toast from 'react-hot-toast'
 import { IoMdRefresh } from 'react-icons/io'
 
@@ -7,15 +8,22 @@ export interface SaveButtonsProps {
   reset: () => void
   refresh?: () => void
   isSubmitting: boolean
+  className?: string
 }
 
 const SaveButtons: React.FC<SaveButtonsProps> = ({
   onSubmit,
   reset,
   isSubmitting,
-  refresh
+  refresh,
+  className
 }) => (
-  <div className="max-w-full mx-3 w-96 flex flex-col justify-center gap-3">
+  <div
+    className={clsx(
+      'max-w-full mx-3 w-96 flex flex-col justify-center gap-3',
+      className
+    )}
+  >
     <div className="flex items-center justify-center gap-2 mt-5">
       <Button
         color="default"
@@ -27,7 +35,7 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
         取消更改
       </Button>
       <Button
-        color="danger"
+        color="primary"
         isLoading={isSubmitting}
         onPress={() => onSubmit()}
       >

napcat.webui/src/components/chat_input/components/audio_insert.tsx

@@ -110,7 +110,7 @@ const AudioInsert = () => {
         <Tooltip content="发送音频">
           <div className="max-w-fit">
             <PopoverTrigger>
-              <Button color="danger" variant="flat" isIconOnly radius="full">
+              <Button color="primary" variant="flat" isIconOnly radius="full">
                 <IoMic className="text-xl" />
               </Button>
             </PopoverTrigger>
@@ -120,7 +120,7 @@ const AudioInsert = () => {
           <Tooltip content="上传音频">
             <Button
               className="text-lg"
-              color="danger"
+              color="primary"
               isIconOnly
               variant="flat"
               radius="full"
@@ -137,7 +137,7 @@ const AudioInsert = () => {
                 <PopoverTrigger tooltip="输入音频地址">
                   <Button
                     className="text-lg"
-                    color="danger"
+                    color="primary"
                     isIconOnly
                     variant="flat"
                     radius="full"
@@ -154,7 +154,7 @@ const AudioInsert = () => {
                 placeholder="请输入音频地址"
               />
               <Button
-                color="danger"
+                color="primary"
                 variant="flat"
                 isIconOnly
                 radius="full"
@@ -177,7 +177,7 @@ const AudioInsert = () => {
                 <PopoverTrigger>
                   <Button
                     className="text-lg"
-                    color="danger"
+                    color="primary"
                     isIconOnly
                     variant="flat"
                     radius="full"
@@ -190,7 +190,7 @@ const AudioInsert = () => {
             <PopoverContent className="flex-col gap-2 p-4">
               <div className="flex gap-2">
                 <Button
-                  color={isRecording ? 'danger' : 'danger'}
+                  color={isRecording ? 'primary' : 'primary'}
                   variant="flat"
                   onPress={isRecording ? stopRecording : startRecording}
                 >
@@ -198,7 +198,7 @@ const AudioInsert = () => {
                 </Button>
                 {showPreview && audioPreview && (
                   <Button
-                    color="danger"
+                    color="primary"
                     variant="flat"
                     onPress={handleShowPreview}
                   >
@@ -212,7 +212,7 @@ const AudioInsert = () => {
                     className={clsx(
                       'w-4 h-4 rounded-full',
                       isRecording
-                        ? 'animate-pulse bg-danger-400'
+                        ? 'animate-pulse bg-primary-400'
                         : 'bg-success-400'
                     )}
                   ></span>

napcat.webui/src/components/chat_input/components/dice_insert.tsx

@@ -10,7 +10,7 @@ const DiceInsert = () => {
   return (
     <Tooltip content="发送骰子">
       <Button
-        color="danger"
+        color="primary"
         variant="flat"
         isIconOnly
         radius="full"

napcat.webui/src/components/chat_input/components/emoji_picker.tsx

@@ -55,7 +55,7 @@ const EmojiPicker = ({ onInsertEmoji, onOpenChange }: EmojiPickerProps) => {
         <Tooltip content="插入表情">
           <div className="max-w-fit">
             <PopoverTrigger>
-              <Button color="danger" variant="flat" isIconOnly radius="full">
+              <Button color="primary" variant="flat" isIconOnly radius="full">
                 <MdEmojiEmotions className="text-xl" />
               </Button>
             </PopoverTrigger>
@@ -65,7 +65,7 @@ const EmojiPicker = ({ onInsertEmoji, onOpenChange }: EmojiPickerProps) => {
           {visibleEmojis.map((emoji) => (
             <Button
               key={emoji.id}
-              color="danger"
+              color="primary"
               variant="flat"
               isIconOnly
               radius="full"

napcat.webui/src/components/chat_input/components/file_insert.tsx

@@ -35,7 +35,7 @@ const FileInsert = () => {
         <Tooltip content="发送文件">
           <div className="max-w-fit">
             <PopoverTrigger>
-              <Button color="danger" variant="flat" isIconOnly radius="full">
+              <Button color="primary" variant="flat" isIconOnly radius="full">
                 <FaFolder className="text-lg" />
               </Button>
             </PopoverTrigger>
@@ -45,7 +45,7 @@ const FileInsert = () => {
           <Tooltip content="上传文件">
             <Button
               className="text-lg"
-              color="danger"
+              color="primary"
               isIconOnly
               variant="flat"
               radius="full"
@@ -62,7 +62,7 @@ const FileInsert = () => {
                 <PopoverTrigger tooltip="输入文件地址">
                   <Button
                     className="text-lg"
-                    color="danger"
+                    color="primary"
                     isIconOnly
                     variant="flat"
                     radius="full"
@@ -79,7 +79,7 @@ const FileInsert = () => {
                 placeholder="请输入文件地址"
               />
               <Button
-                color="danger"
+                color="primary"
                 variant="flat"
                 isIconOnly
                 radius="full"

napcat.webui/src/components/chat_input/components/image_insert.tsx

@@ -23,7 +23,7 @@ const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
         <Tooltip content="插入图片">
           <div className="max-w-fit">
             <PopoverTrigger>
-              <Button color="danger" variant="flat" isIconOnly radius="full">
+              <Button color="primary" variant="flat" isIconOnly radius="full">
                 <MdImage className="text-xl" />
               </Button>
             </PopoverTrigger>
@@ -33,7 +33,7 @@ const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
           <Tooltip content="上传图片">
             <Button
               className="text-lg"
-              color="danger"
+              color="primary"
               isIconOnly
               variant="flat"
               radius="full"
@@ -50,7 +50,7 @@ const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
                 <PopoverTrigger tooltip="输入图片地址">
                   <Button
                     className="text-lg"
-                    color="danger"
+                    color="primary"
                     isIconOnly
                     variant="flat"
                     radius="full"
@@ -67,7 +67,7 @@ const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
                 placeholder="请输入图片地址"
               />
               <Button
-                color="danger"
+                color="primary"
                 variant="flat"
                 isIconOnly
                 radius="full"

napcat.webui/src/components/chat_input/components/music_insert.tsx

@@ -80,7 +80,7 @@ const MusicInsert = () => {
         <Tooltip content="发送音乐">
           <div className="max-w-fit">
             <PopoverTrigger>
-              <Button color="danger" variant="flat" isIconOnly radius="full">
+              <Button color="primary" variant="flat" isIconOnly radius="full">
                 <IoMusicalNotes className="text-xl" />
               </Button>
             </PopoverTrigger>
@@ -132,7 +132,7 @@ const MusicInsert = () => {
               <Button
                 fullWidth
                 size="lg"
-                color="danger"
+                color="primary"
                 variant="flat"
                 radius="full"
                 onPress={() => {
@@ -236,7 +236,7 @@ const MusicInsert = () => {
                 <Button
                   fullWidth
                   size="lg"
-                  color="danger"
+                  color="primary"
                   variant="flat"
                   radius="full"
                   type="submit"

napcat.webui/src/components/chat_input/components/reply_insert.tsx

@@ -19,7 +19,7 @@ const ReplyInsert = ({ insertReply }: ReplyInsertProps) => {
         <Tooltip content="回复消息">
           <div className="max-w-fit">
             <PopoverTrigger>
-              <Button color="danger" variant="flat" isIconOnly radius="full">
+              <Button color="primary" variant="flat" isIconOnly radius="full">
                 <BsChatQuoteFill className="text-lg" />
               </Button>
             </PopoverTrigger>
@@ -38,7 +38,7 @@ const ReplyInsert = ({ insertReply }: ReplyInsertProps) => {
             }}
           />
           <Button
-            color="danger"
+            color="primary"
             variant="flat"
             radius="full"
             isIconOnly

napcat.webui/src/components/chat_input/components/rps_insert.tsx

@@ -10,7 +10,7 @@ const RPSInsert = () => {
   return (
     <Tooltip content="发送猜拳">
       <Button
-        color="danger"
+        color="primary"
         variant="flat"
         isIconOnly
         radius="full"

napcat.webui/src/components/chat_input/components/video_insert.tsx

@@ -35,7 +35,7 @@ const VideoInsert = () => {
         <Tooltip content="发送视频">
           <div className="max-w-fit">
             <PopoverTrigger>
-              <Button color="danger" variant="flat" isIconOnly radius="full">
+              <Button color="primary" variant="flat" isIconOnly radius="full">
                 <IoVideocam className="text-xl" />
               </Button>
             </PopoverTrigger>
@@ -45,7 +45,7 @@ const VideoInsert = () => {
           <Tooltip content="上传视频">
             <Button
               className="text-lg"
-              color="danger"
+              color="primary"
               isIconOnly
               variant="flat"
               radius="full"
@@ -62,7 +62,7 @@ const VideoInsert = () => {
                 <PopoverTrigger tooltip="输入视频地址">
                   <Button
                     className="text-lg"
-                    color="danger"
+                    color="primary"
                     isIconOnly
                     variant="flat"
                     radius="full"
@@ -79,7 +79,7 @@ const VideoInsert = () => {
                 placeholder="请输入视频地址"
               />
               <Button
-                color="danger"
+                color="primary"
                 variant="flat"
                 isIconOnly
                 radius="full"

napcat.webui/src/components/chat_input/index.tsx

@@ -190,7 +190,7 @@ const ChatInput = () => {
         <DiceInsert />
         <RPSInsert />
         <Button
-          color="danger"
+          color="primary"
           onPress={() => {
             const messages = getChatMessage()
             showStructuredMessage(messages)

napcat.webui/src/components/chat_input/modal.tsx

@@ -15,7 +15,7 @@ export default function ChatInputModal() {
 
   return (
     <>
-      <Button onPress={onOpen} color="danger" radius="full" variant="flat">
+      <Button onPress={onOpen} color="primary" radius="full" variant="flat">
         构造聊天消息
       </Button>
       <Modal
@@ -36,7 +36,7 @@ export default function ChatInputModal() {
                 </div>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" onPress={onClose} variant="flat">
+                <Button color="primary" onPress={onClose} variant="flat">
                   关闭
                 </Button>
               </ModalFooter>

napcat.webui/src/components/display_card/common_card.tsx

@@ -78,7 +78,7 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
             {debug ? '关闭调试' : '开启调试'}
           </Button>
           <Button
-            color="danger"
+            color="primary"
             startContent={<MdDeleteForever />}
             onPress={handleDelete}
           >

napcat.webui/src/components/display_network_item.tsx

@@ -19,7 +19,7 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
       className={clsx(
         'bg-opacity-60 shadow-sm md:rounded-3xl',
         size === 'md'
-          ? 'col-span-8 md:col-span-2 bg-danger-50 shadow-danger-100'
+          ? 'col-span-8 md:col-span-2 bg-primary-50 shadow-primary-100'
           : 'col-span-2 md:col-span-1 bg-warning-100 shadow-warning-200'
       )}
       shadow="sm"
@@ -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',

napcat.webui/src/components/file_manage/create_file_modal.tsx

@@ -33,7 +33,7 @@ export default function CreateFileModal({
         <ModalHeader>新建</ModalHeader>
         <ModalBody>
           <div className="flex flex-col gap-4">
-            <ButtonGroup color="danger">
+            <ButtonGroup color="primary">
               <Button
                 variant={fileType === 'file' ? 'solid' : 'flat'}
                 onPress={() => onTypeChange('file')}
@@ -51,10 +51,10 @@ export default function CreateFileModal({
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button color="danger" variant="flat" onPress={onClose}>
+          <Button color="primary" variant="flat" onPress={onClose}>
             取消
           </Button>
-          <Button color="danger" onPress={onCreate}>
+          <Button color="primary" onPress={onCreate}>
             创建
           </Button>
         </ModalFooter>

napcat.webui/src/components/file_manage/file_edit_modal.tsx

@@ -81,10 +81,10 @@ export default function FileEditModal({
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button color="danger" variant="flat" onPress={onClose}>
+          <Button color="primary" variant="flat" onPress={onClose}>
             取消
           </Button>
-          <Button color="danger" onPress={onSave}>
+          <Button color="primary" onPress={onSave}>
             保存
           </Button>
         </ModalFooter>

napcat.webui/src/components/file_manage/file_preview_modal.tsx

@@ -9,6 +9,7 @@ import {
 import { Spinner } from '@heroui/spinner'
 import { useRequest } from 'ahooks'
 import path from 'path-browserify'
+import { useEffect } from 'react'
 
 import FileManager from '@/controllers/file_manager'
 
@@ -18,11 +19,10 @@ interface FilePreviewModalProps {
   onClose: () => void
 }
 
-const imageExts = ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
-const videoExts = ['.mp4', '.webm']
-const audioExts = ['.mp3', '.wav']
+export const videoExts = ['.mp4', '.webm']
+export const audioExts = ['.mp3', '.wav']
 
-const supportedPreviewExts = [...imageExts, ...videoExts, ...audioExts]
+export const supportedPreviewExts = [...videoExts, ...audioExts]
 
 export default function FilePreviewModal({
   isOpen,
@@ -31,19 +31,26 @@ export default function FilePreviewModal({
 }: FilePreviewModalProps) {
   const ext = path.extname(filePath).toLowerCase()
   const { data, loading, error, run } = useRequest(
-    async (path: string) => FileManager.downloadToURL(path),
+    async () => FileManager.downloadToURL(filePath),
     {
       refreshDeps: [filePath],
+      manual: true,
       refreshDepsAction: () => {
         const ext = path.extname(filePath).toLowerCase()
         if (!filePath || !supportedPreviewExts.includes(ext)) {
           return
         }
-        run(filePath)
+        run()
       }
     }
   )
 
+  useEffect(() => {
+    if (filePath) {
+      run()
+    }
+  }, [filePath])
+
   let contentElement = null
   if (!supportedPreviewExts.includes(ext)) {
     contentElement = <div>暂不支持预览此文件类型</div>
@@ -55,27 +62,27 @@ export default function FilePreviewModal({
         <Spinner />
       </div>
     )
-  } else if (imageExts.includes(ext)) {
-    contentElement = (
-      <img src={data} alt="预览" className="max-w-full max-h-96" />
-    )
   } else if (videoExts.includes(ext)) {
-    contentElement = (
-      <video src={data} controls className="max-w-full max-h-96" />
-    )
+    contentElement = <video src={data} controls className="max-w-full" />
   } else if (audioExts.includes(ext)) {
     contentElement = <audio src={data} controls className="w-full" />
+  } else {
+    contentElement = (
+      <div className="flex justify-center items-center h-full">
+        <Spinner />
+      </div>
+    )
   }
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} scrollBehavior="inside">
+    <Modal isOpen={isOpen} onClose={onClose} scrollBehavior="inside" size="3xl">
       <ModalContent>
         <ModalHeader>文件预览</ModalHeader>
         <ModalBody className="flex justify-center items-center">
           {contentElement}
         </ModalBody>
         <ModalFooter>
-          <Button color="danger" variant="flat" onPress={onClose}>
+          <Button color="primary" variant="flat" onPress={onClose}>
             关闭
           </Button>
         </ModalFooter>

napcat.webui/src/components/file_manage/file_table.tsx

@@ -12,15 +12,19 @@ import {
   TableRow
 } from '@heroui/table'
 import path from 'path-browserify'
-import { useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { BiRename } from 'react-icons/bi'
 import { FiCopy, FiDownload, FiMove, FiTrash2 } from 'react-icons/fi'
+import { PhotoSlider } from 'react-photo-view'
 
 import FileIcon from '@/components/file_icon'
 
 import type { FileInfo } from '@/controllers/file_manager'
 
-interface FileTableProps {
+import { supportedPreviewExts } from './file_preview_modal'
+import ImageNameButton, { PreviewImage, imageExts } from './image_name_button'
+
+export interface FileTableProps {
   files: FileInfo[]
   currentPath: string
   loading: boolean
@@ -58,147 +62,184 @@ 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)
+  const [showImage, setShowImage] = useState(false)
+  const [previewIndex, setPreviewIndex] = useState(0)
+  const [previewImages, setPreviewImages] = useState<PreviewImage[]>([])
+
+  const addPreviewImage = useCallback((image: PreviewImage) => {
+    setPreviewImages((prev) => {
+      const exists = prev.some((p) => p.key === image.key)
+      if (exists) return prev
+      return [...prev, image]
+    })
+  }, [])
+
+  useEffect(() => {
+    setPreviewImages([])
+    setPreviewIndex(0)
+    setShowImage(false)
+  }, [currentPath])
+
+  const onPreviewImage = (name: string, images: PreviewImage[]) => {
+    const index = images.findIndex((image) => image.key === name)
+    if (index === -1) {
+      return
+    }
+    setPreviewIndex(index)
+    setShowImage(true)
+  }
+
   return (
-    <Table
-      aria-label="文件列表"
-      sortDescriptor={sortDescriptor}
-      onSortChange={onSortChange}
-      onSelectionChange={onSelectionChange}
-      defaultSelectedKeys={[]}
-      selectedKeys={selectedFiles}
-      selectionMode="multiple"
-      bottomContent={
-        <div className="flex w-full justify-center">
-          <Pagination
-            isCompact
-            showControls
-            showShadow
-            color="danger"
-            page={page}
-            total={pages}
-            onChange={(page) => setPage(page)}
-          />
-        </div>
-      }
-    >
-      <TableHeader>
-        <TableColumn key="name" allowsSorting>
-          名称
-        </TableColumn>
-        <TableColumn key="type" allowsSorting>
-          类型
-        </TableColumn>
-        <TableColumn key="size" allowsSorting>
-          大小
-        </TableColumn>
-        <TableColumn key="mtime" allowsSorting>
-          修改时间
-        </TableColumn>
-        <TableColumn key="actions">操作</TableColumn>
-      </TableHeader>
-      <TableBody
-        isLoading={loading}
-        loadingContent={
-          <div className="flex justify-center items-center h-full">
-            <Spinner />
+    <>
+      <PhotoSlider
+        images={previewImages}
+        visible={showImage}
+        onClose={() => setShowImage(false)}
+        index={previewIndex}
+        onIndexChange={setPreviewIndex}
+      />
+      <Table
+        aria-label="文件列表"
+        sortDescriptor={sortDescriptor}
+        onSortChange={onSortChange}
+        onSelectionChange={onSelectionChange}
+        defaultSelectedKeys={[]}
+        selectedKeys={selectedFiles}
+        selectionMode="multiple"
+        bottomContent={
+          <div className="flex w-full justify-center">
+            <Pagination
+              isCompact
+              showControls
+              showShadow
+              color="primary"
+              page={page}
+              total={pages}
+              onChange={(page) => setPage(page)}
+            />
           </div>
         }
-        items={displayFiles}
       >
-        {(file: FileInfo) => {
-          const filePath = path.join(currentPath, file.name)
-          // 判断预览类型
-          const ext = path.extname(file.name).toLowerCase()
-          const previewable = [
-            '.png',
-            '.jpg',
-            '.jpeg',
-            '.gif',
-            '.bmp',
-            '.mp4',
-            '.webm',
-            '.mp3',
-            '.wav'
-          ].includes(ext)
-          return (
-            <TableRow key={file.name}>
-              <TableCell>
-                <Button
-                  variant="light"
-                  onPress={() =>
-                    file.isDirectory
-                      ? onDirectoryClick(file.name)
-                      : previewable
-                        ? onPreview(filePath)
-                        : onEdit(filePath)
-                  }
-                  className="text-left justify-start"
-                  startContent={
-                    <FileIcon name={file.name} isDirectory={file.isDirectory} />
-                  }
-                >
-                  {file.name}
-                </Button>
-              </TableCell>
-              <TableCell>{file.isDirectory ? '目录' : '文件'}</TableCell>
-              <TableCell>
-                {isNaN(file.size) || file.isDirectory
-                  ? '-'
-                  : `${file.size} 字节`}
-              </TableCell>
-              <TableCell>{new Date(file.mtime).toLocaleString()}</TableCell>
-              <TableCell>
-                <ButtonGroup size="sm">
-                  <Button
-                    isIconOnly
-                    color="danger"
-                    variant="flat"
-                    onPress={() => onRenameRequest(file.name)}
-                  >
-                    <BiRename />
-                  </Button>
-                  <Button
-                    isIconOnly
-                    color="danger"
-                    variant="flat"
-                    onPress={() => onMoveRequest(file.name)}
-                  >
-                    <FiMove />
-                  </Button>
-                  <Button
-                    isIconOnly
-                    color="danger"
-                    variant="flat"
-                    onPress={() => onCopyPath(file.name)}
-                  >
-                    <FiCopy />
-                  </Button>
-                  <Button
-                    isIconOnly
-                    color="danger"
-                    variant="flat"
-                    onPress={() => onDownload(filePath)}
-                  >
-                    <FiDownload />
-                  </Button>
-                  <Button
-                    isIconOnly
-                    color="danger"
-                    variant="flat"
-                    onPress={() => onDelete(filePath)}
-                  >
-                    <FiTrash2 />
-                  </Button>
-                </ButtonGroup>
-              </TableCell>
-            </TableRow>
-          )
-        }}
-      </TableBody>
-    </Table>
+        <TableHeader>
+          <TableColumn key="name" allowsSorting>
+            名称
+          </TableColumn>
+          <TableColumn key="type" allowsSorting>
+            类型
+          </TableColumn>
+          <TableColumn key="size" allowsSorting>
+            大小
+          </TableColumn>
+          <TableColumn key="mtime" allowsSorting>
+            修改时间
+          </TableColumn>
+          <TableColumn key="actions">操作</TableColumn>
+        </TableHeader>
+        <TableBody
+          isLoading={loading}
+          loadingContent={
+            <div className="flex justify-center items-center h-full">
+              <Spinner />
+            </div>
+          }
+        >
+          {displayFiles.map((file: FileInfo) => {
+            const filePath = path.join(currentPath, file.name)
+            const ext = path.extname(file.name).toLowerCase()
+            const previewable = supportedPreviewExts.includes(ext)
+            const images = previewImages
+            return (
+              <TableRow key={file.name}>
+                <TableCell>
+                  {imageExts.includes(ext) ? (
+                    <ImageNameButton
+                      name={file.name}
+                      filePath={filePath}
+                      onPreview={() => onPreviewImage(file.name, images)}
+                      onAddPreview={addPreviewImage}
+                    />
+                  ) : (
+                    <Button
+                      variant="light"
+                      onPress={() =>
+                        file.isDirectory
+                          ? onDirectoryClick(file.name)
+                          : previewable
+                            ? onPreview(filePath)
+                            : onEdit(filePath)
+                      }
+                      className="text-left justify-start"
+                      startContent={
+                        <FileIcon
+                          name={file.name}
+                          isDirectory={file.isDirectory}
+                        />
+                      }
+                    >
+                      {file.name}
+                    </Button>
+                  )}
+                </TableCell>
+                <TableCell>{file.isDirectory ? '目录' : '文件'}</TableCell>
+                <TableCell>
+                  {isNaN(file.size) || file.isDirectory
+                    ? '-'
+                    : `${file.size} 字节`}
+                </TableCell>
+                <TableCell>{new Date(file.mtime).toLocaleString()}</TableCell>
+                <TableCell>
+                  <ButtonGroup size="sm">
+                    <Button
+                      isIconOnly
+                      color="primary"
+                      variant="flat"
+                      onPress={() => onRenameRequest(file.name)}
+                    >
+                      <BiRename />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color="primary"
+                      variant="flat"
+                      onPress={() => onMoveRequest(file.name)}
+                    >
+                      <FiMove />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color="primary"
+                      variant="flat"
+                      onPress={() => onCopyPath(file.name)}
+                    >
+                      <FiCopy />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color="primary"
+                      variant="flat"
+                      onPress={() => onDownload(filePath)}
+                    >
+                      <FiDownload />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color="primary"
+                      variant="flat"
+                      onPress={() => onDelete(filePath)}
+                    >
+                      <FiTrash2 />
+                    </Button>
+                  </ButtonGroup>
+                </TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </>
   )
 }

napcat.webui/src/components/file_manage/image_name_button.tsx

@@ -0,0 +1,88 @@
+import { Button } from '@heroui/button'
+import { Image } from '@heroui/image'
+import { Spinner } from '@heroui/spinner'
+import { useRequest } from 'ahooks'
+import path from 'path-browserify'
+import { useEffect } from 'react'
+
+import FileManager from '@/controllers/file_manager'
+
+import FileIcon from '../file_icon'
+
+export interface PreviewImage {
+  key: string
+  src: string
+  alt: string
+}
+export const imageExts = ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
+
+export interface ImageNameButtonProps {
+  name: string
+  filePath: string
+  onPreview: () => void
+  onAddPreview: (image: PreviewImage) => void
+}
+
+export default function ImageNameButton({
+  name,
+  filePath,
+  onPreview,
+  onAddPreview
+}: ImageNameButtonProps) {
+  const { data, loading, error, run } = useRequest(
+    async () => FileManager.downloadToURL(filePath),
+    {
+      refreshDeps: [filePath],
+      manual: true,
+      refreshDepsAction: () => {
+        const ext = path.extname(filePath).toLowerCase()
+        if (!filePath || !imageExts.includes(ext)) {
+          return
+        }
+        run()
+      }
+    }
+  )
+  useEffect(() => {
+    if (data) {
+      onAddPreview({
+        key: name,
+        src: data,
+        alt: name
+      })
+    }
+  }, [data, name, onAddPreview])
+
+  useEffect(() => {
+    if (filePath) {
+      run()
+    }
+  }, [])
+
+  return (
+    <Button
+      variant="light"
+      className="text-left justify-start"
+      onPress={onPreview}
+      startContent={
+        error ? (
+          <FileIcon name={name} isDirectory={false} />
+        ) : loading || !data ? (
+          <Spinner size="sm" />
+        ) : (
+          <Image
+            src={data}
+            alt={name}
+            className="w-8 h-8 flex-shrink-0"
+            classNames={{
+              wrapper: 'w-8 h-8 flex-shrink-0'
+            }}
+            radius="sm"
+          />
+        )
+      }
+    >
+      {name}
+    </Button>
+  )
+}

napcat.webui/src/components/file_manage/move_modal.tsx

@@ -86,13 +86,13 @@ function DirectoryTree({
         onPress={handleClick}
         className="py-1 px-2 text-left justify-start min-w-0 min-h-0 h-auto text-sm rounded-md"
         size="sm"
-        color="danger"
+        color="primary"
         variant={variant}
         startContent={
           <div
             className={clsx(
               'rounded-md',
-              isSeleted ? 'bg-danger-600' : 'bg-danger-50'
+              isSeleted ? 'bg-primary-600' : 'bg-primary-50'
             )}
           >
             {expanded ? <IoRemove /> : <IoAdd />}
@@ -105,7 +105,7 @@ function DirectoryTree({
         <div>
           {loading ? (
             <div className="flex py-1 px-8">
-              <Spinner size="sm" color="danger" />
+              <Spinner size="sm" color="primary" />
             </div>
           ) : (
             dirs.map((dirName) => {
@@ -155,10 +155,10 @@ export default function MoveModal({
           <p className="text-sm text-default-500">移动项：{selectionInfo}</p>
         </ModalBody>
         <ModalFooter>
-          <Button color="danger" variant="flat" onPress={onClose}>
+          <Button color="primary" variant="flat" onPress={onClose}>
             取消
           </Button>
-          <Button color="danger" onPress={onMove}>
+          <Button color="primary" onPress={onMove}>
             确定
           </Button>
         </ModalFooter>

napcat.webui/src/components/file_manage/rename_modal.tsx

@@ -31,10 +31,10 @@ export default function RenameModal({
           <Input label="新名称" value={newFileName} onChange={onNameChange} />
         </ModalBody>
         <ModalFooter>
-          <Button color="danger" variant="flat" onPress={onClose}>
+          <Button color="primary" variant="flat" onPress={onClose}>
             取消
           </Button>
-          <Button color="danger" onPress={onRename}>
+          <Button color="primary" onPress={onRename}>
             确定
           </Button>
         </ModalFooter>

napcat.webui/src/components/hitokoto.tsx

@@ -33,10 +33,10 @@ export default function Hitokoto() {
       <div className="relative">
         {loading && <PageLoading />}
         {error ? (
-          <div className="text-danger-400">一言加载失败：{error.message}</div>
+          <div className="text-primary-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}
@@ -52,7 +52,7 @@ export default function Hitokoto() {
             isLoading={loading}
             isIconOnly
             radius="full"
-            color="danger"
+            color="primary"
             variant="flat"
           >
             <IoRefresh />

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-primary-600 text-default-100 bg-opacity-80">
       NapCat
     </div>
   ),

napcat.webui/src/components/input/file_input.tsx

@@ -0,0 +1,69 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { useRef, useState } from 'react'
+
+export interface FileInputProps {
+  onChange: (file: File) => Promise<void> | void
+  onDelete?: () => Promise<void> | void
+  label?: string
+  accept?: string
+}
+
+const FileInput: React.FC<FileInputProps> = ({
+  onChange,
+  onDelete,
+  label,
+  accept
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  return (
+    <div className="flex items-end gap-2">
+      <div className="flex-grow">
+        <Input
+          isDisabled={isLoading}
+          ref={inputRef}
+          label={label}
+          type="file"
+          placeholder="选择文件"
+          accept={accept}
+          onChange={async (e) => {
+            try {
+              setIsLoading(true)
+              const file = e.target.files?.[0]
+              if (file) {
+                await onChange(file)
+              }
+            } catch (error) {
+              console.error(error)
+            } finally {
+              setIsLoading(false)
+              if (inputRef.current) inputRef.current.value = ''
+            }
+          }}
+        />
+      </div>
+      <Button
+        isDisabled={isLoading}
+        onPress={async () => {
+          try {
+            setIsLoading(true)
+            if (onDelete) await onDelete()
+          } catch (error) {
+            console.error(error)
+          } finally {
+            setIsLoading(false)
+            if (inputRef.current) inputRef.current.value = ''
+          }
+        }}
+        color="primary"
+        variant="flat"
+        size="sm"
+      >
+        删除
+      </Button>
+    </div>
+  )
+}
+
+export default FileInput

napcat.webui/src/components/input/image_input.tsx

@@ -43,7 +43,7 @@ const ImageInput: React.FC<ImageInputProps> = ({ onChange, value, label }) => {
           onChange('')
           if (inputRef.current) inputRef.current.value = ''
         }}
-        color="danger"
+        color="primary"
         variant="flat"
         size="sm"
       >

napcat.webui/src/components/log_com/log_level_select.tsx

@@ -16,13 +16,13 @@ const logLevelColor: {
     | 'secondary'
     | 'success'
     | 'warning'
-    | 'danger'
+    | 'primary'
 } = {
   [LogLevel.DEBUG]: 'default',
   [LogLevel.INFO]: 'primary',
   [LogLevel.WARN]: 'warning',
-  [LogLevel.ERROR]: 'danger',
-  [LogLevel.FATAL]: 'danger'
+  [LogLevel.ERROR]: 'primary',
+  [LogLevel.FATAL]: 'primary'
 }
 const LogLevelSelect = (props: LogLevelSelectProps) => {
   const { selectedKeys, onSelectionChange } = props

napcat.webui/src/components/modal.tsx

@@ -65,7 +65,7 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
             <ModalFooter>
               {showCancel && (
                 <Button
-                  color="danger"
+                  color="primary"
                   variant="light"
                   onPress={() => {
                     onCancel?.()
@@ -76,7 +76,7 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
                 </Button>
               )}
               <Button
-                color="danger"
+                color="primary"
                 onPress={() => {
                   onConfirm?.()
                   nativeClose()

napcat.webui/src/components/napcat_repo_info.tsx

@@ -28,7 +28,7 @@ import type {
 
 function displayData(data: number, loading: boolean, error?: Error) {
   if (error) {
-    return <MdError className="text-danger-400" />
+    return <MdError className="text-primary-400" />
   }
 
   if (loading) {
@@ -175,7 +175,7 @@ export default function NapCatRepoInfo() {
         className="group h-auto py-3"
         endContent={
           releaseError ? (
-            <MdError className="text-danger-400" />
+            <MdError className="text-primary-400" />
           ) : releaseLoading ? (
             <Spinner size="sm" />
           ) : (
@@ -229,7 +229,7 @@ export default function NapCatRepoInfo() {
           </span>
         }
         startContent={
-          <IconWrapper className="bg-danger/10 text-danger dark:text-danger-500">
+          <IconWrapper className="bg-primary/10 text-primary dark:text-primary-500">
             <BookIcon />
           </IconWrapper>
         }

napcat.webui/src/components/network_edit/generic_form.tsx

@@ -150,7 +150,7 @@ const GenericForm = <T extends keyof NetworkConfigType>({
       </ModalBody>
       <ModalFooter>
         <Button
-          color="danger"
+          color="primary"
           isDisabled={formState.isSubmitting}
           variant="light"
           onPress={onClose}

napcat.webui/src/components/network_edit/ws_server.tsx

@@ -20,7 +20,7 @@ const WebsocketServerForm: React.FC<WebsocketServerFormProps> = ({
     enable: false,
     name: '',
     host: '0.0.0.0',
-    port: 3000,
+    port: 3001,
     reportSelfMessage: false,
     enableForcePushEvent: true,
     messagePostFormat: 'array',

napcat.webui/src/components/onebot/api/debug.tsx

@@ -91,7 +91,7 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
 
   return (
     <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">
+      <h1 className="text-2xl font-bold mb-4 flex items-center gap-1 text-primary-400">
         <PiCatDuotone />
         {data.description}
       </h1>
@@ -125,7 +125,7 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
         />
         <Button
           onPress={sendRequest}
-          color="danger"
+          color="primary"
           size="lg"
           radius="full"
           isIconOnly
@@ -136,9 +136,9 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
       </div>
       <Card
         shadow="sm"
-        className="my-4 bg-opacity-50 backdrop-blur-md overflow-visible z-20"
+        className="my-4 bg-opacity-50 backdrop-blur-md overflow-visible"
       >
-        <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"

napcat.webui/src/components/onebot/api/display_struct.tsx

@@ -27,7 +27,7 @@ const SchemaType = ({
       name = '固定值'
       break
   }
-  let chipColor: 'primary' | 'success' | 'danger' | 'warning' | 'secondary' =
+  let chipColor: 'primary' | 'success' | 'primary' | 'warning' | 'secondary' =
     'primary'
   switch (type) {
     case 'enum':
@@ -37,7 +37,7 @@ const SchemaType = ({
       chipColor = 'secondary'
       break
     case 'array':
-      chipColor = 'danger'
+      chipColor = 'primary'
       break
     case 'object':
       chipColor = 'success'

napcat.webui/src/components/onebot/api/nav_list.tsx

@@ -33,11 +33,11 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
     >
       <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"
+          className="sticky top-0 z-10 text-primary-600"
           classNames={{
             inputWrapper:
-              'bg-opacity-30 bg-danger-50 backdrop-blur-sm border border-danger-300 mb-2',
-            input: 'bg-transparent !text-danger-400 !placeholder-danger-400'
+              'bg-opacity-30 bg-primary-50 backdrop-blur-sm border border-primary-300 mb-2',
+            input: 'bg-transparent !text-primary-400 !placeholder-primary-400'
           }}
           radius="full"
           placeholder="搜索 API"
@@ -51,7 +51,7 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
             key={apiName}
             shadow="none"
             className={clsx(
-              'w-full border border-danger-100 rounded-lg mb-1 bg-opacity-30 backdrop-blur-sm text-danger-400',
+              'w-full border border-primary-100 rounded-lg mb-1 bg-opacity-30 backdrop-blur-sm text-primary-400',
               {
                 hidden: !(
                   apiName.includes(searchValue) ||
@@ -59,7 +59,7 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
                 )
               },
               {
-                '!bg-opacity-40 border border-danger-400 bg-danger-50 text-danger-600':
+                '!bg-opacity-40 border border-primary-400 bg-primary-50 text-primary-600':
                   apiName === selectedApi
               }
             )}
@@ -67,10 +67,10 @@ 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
+                className={clsx('text-sm text-primary-200', {
+                  '!text-primary-400': apiName === selectedApi
                 })}
               >
                 {apiName}

napcat.webui/src/components/onebot/display_card/render.tsx

@@ -109,7 +109,7 @@ const OneBotItemRender = ({ data, index, style }: OneBotItemRenderProps) => {
                 <PopoverTrigger>
                   <Button
                     size="sm"
-                    color="danger"
+                    color="primary"
                     variant="flat"
                     radius="full"
                     isIconOnly

napcat.webui/src/components/onebot/display_card/response.tsx

@@ -30,7 +30,7 @@ const OneBotDisplayResponse: React.FC<OneBotDisplayResponseProps> = ({
           <PopoverTrigger>
             <Button
               size="sm"
-              color="danger"
+              color="primary"
               variant="flat"
               radius="full"
               className="text-medium"

napcat.webui/src/components/onebot/send_modal.tsx

@@ -43,7 +43,7 @@ const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
 
   return (
     <>
-      <Button onPress={onOpen} color="danger" radius="full" variant="flat">
+      <Button onPress={onOpen} color="primary" radius="full" variant="flat">
         构造请求
       </Button>
       <Modal
@@ -75,11 +75,11 @@ const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
               <ModalFooter>
                 <ChatInputModal />
 
-                <Button color="danger" variant="flat" onPress={onClose}>
+                <Button color="primary" variant="flat" onPress={onClose}>
                   取消
                 </Button>
                 <Button
-                  color="danger"
+                  color="primary"
                   onPress={() => handleSendMessage(onClose)}
                 >
                   发送

napcat.webui/src/components/onebot/ws_status.tsx

@@ -10,7 +10,7 @@ function StatusTag({
   color
 }: {
   title: string
-  color: 'success' | 'danger' | 'warning'
+  color: 'success' | 'primary' | 'warning'
 }) {
   const textClassName = `text-${color} text-sm`
   const bgClassName = `bg-${color}`
@@ -27,7 +27,7 @@ export default function WSStatus({ state }: WSStatusProps) {
     return <StatusTag title="已连接" color="success" />
   }
   if (state === ReadyState.CLOSED) {
-    return <StatusTag title="已关闭" color="danger" />
+    return <StatusTag title="已关闭" color="primary" />
   }
   if (state === ReadyState.CONNECTING) {
     return <StatusTag title="连接中" color="warning" />

napcat.webui/src/components/qq_info_card.tsx

@@ -16,23 +16,21 @@ export interface QQInfoCardProps {
 const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
   return (
     <Card
-      className="relative bg-danger-100 bg-opacity-60 overflow-hidden flex-shrink-0 shadow-md shadow-danger-300 dark:shadow-danger-50"
+      className="relative bg-primary-100 bg-opacity-60 overflow-hidden flex-shrink-0 shadow-md shadow-primary-300 dark:shadow-primary-50"
       shadow="none"
       radius="lg"
     >
       <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>
         </CardBody>
       ) : (
         <CardBody className="flex-row items-center gap-2 overflow-hidden relative">
-          <div className="absolute right-0 bottom-0 text-5xl text-danger-400">
+          <div className="absolute right-0 bottom-0 text-5xl text-primary-400">
             <BsTencentQq />
           </div>
           <div className="relative flex-shrink-0 z-10">
@@ -45,16 +43,14 @@ const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
             />
             <div
               className={clsx(
-                'w-4 h-4 rounded-full absolute right-0.5 bottom-0 border-2 border-danger-100 z-10',
+                'w-4 h-4 rounded-full absolute right-0.5 bottom-0 border-2 border-primary-100 z-10',
                 data?.online ? 'bg-green-500' : 'bg-gray-500'
               )}
             ></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-primary-500 text-sm">{data?.uin}</div>
           </div>
         </CardBody>
       )}

napcat.webui/src/components/qr_code_login.tsx

@@ -11,7 +11,7 @@ const QrCodeLogin: React.FC<QrCodeLoginProps> = ({ qrcode }) => {
       <div className="bg-white p-2 rounded-md w-fit mx-auto relative overflow-hidden">
         {!qrcode && (
           <div className="absolute left-2 top-2 right-2 bottom-2 bg-white bg-opacity-50 backdrop-blur flex items-center justify-center">
-            <Spinner color="danger" />
+            <Spinner color="primary" />
           </div>
         )}
         <QRCodeSVG size={180} value={qrcode} />

napcat.webui/src/components/rotating_text.tsx

@@ -0,0 +1,265 @@
+import {
+  AnimatePresence,
+  HTMLMotionProps,
+  TargetAndTransition,
+  Transition,
+  motion
+} from 'motion/react'
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState
+} from 'react'
+
+function cn(...classes: (string | undefined | null | boolean)[]): string {
+  return classes.filter(Boolean).join(' ')
+}
+
+export interface RotatingTextRef {
+  next: () => void
+  previous: () => void
+  jumpTo: (index: number) => void
+  reset: () => void
+}
+
+export interface RotatingTextProps
+  extends Omit<
+    HTMLMotionProps<'span'>,
+    'children' | 'transition' | 'initial' | 'animate' | 'exit'
+  > {
+  texts: string[]
+  transition?: Transition
+  initial?: TargetAndTransition
+  animate?: TargetAndTransition
+  exit?: TargetAndTransition
+  animatePresenceMode?: 'sync' | 'wait'
+  animatePresenceInitial?: boolean
+  rotationInterval?: number
+  staggerDuration?: number
+  staggerFrom?: 'first' | 'last' | 'center' | 'random' | number
+  loop?: boolean
+  auto?: boolean
+  splitBy?: string
+  onNext?: (index: number) => void
+  mainClassName?: string
+  splitLevelClassName?: string
+  elementLevelClassName?: string
+}
+
+const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
+  (
+    {
+      texts,
+      transition = { type: 'spring', damping: 25, stiffness: 300 },
+      initial = { y: '100%', opacity: 0 },
+      animate = { y: 0, opacity: 1 },
+      exit = { y: '-120%', opacity: 0 },
+      animatePresenceMode = 'wait',
+      animatePresenceInitial = false,
+      rotationInterval = 2000,
+      staggerDuration = 0,
+      staggerFrom = 'first',
+      loop = true,
+      auto = true,
+      splitBy = 'characters',
+      onNext,
+      mainClassName,
+      splitLevelClassName,
+      elementLevelClassName,
+      ...rest
+    },
+    ref
+  ) => {
+    const [currentTextIndex, setCurrentTextIndex] = useState<number>(0)
+
+    const splitIntoCharacters = (text: string): string[] => {
+      return Array.from(text)
+    }
+
+    const elements = useMemo(() => {
+      const currentText: string = texts[currentTextIndex]
+      if (splitBy === 'characters') {
+        const words = currentText.split(' ')
+        return words.map((word, i) => ({
+          characters: splitIntoCharacters(word),
+          needsSpace: i !== words.length - 1
+        }))
+      }
+      if (splitBy === 'words') {
+        return currentText.split(' ').map((word, i, arr) => ({
+          characters: [word],
+          needsSpace: i !== arr.length - 1
+        }))
+      }
+      if (splitBy === 'lines') {
+        return currentText.split('\n').map((line, i, arr) => ({
+          characters: [line],
+          needsSpace: i !== arr.length - 1
+        }))
+      }
+
+      return currentText.split(splitBy).map((part, i, arr) => ({
+        characters: [part],
+        needsSpace: i !== arr.length - 1
+      }))
+    }, [texts, currentTextIndex, splitBy])
+
+    const getStaggerDelay = useCallback(
+      (index: number, totalChars: number): number => {
+        const total = totalChars
+        if (staggerFrom === 'first') return index * staggerDuration
+        if (staggerFrom === 'last') return (total - 1 - index) * staggerDuration
+        if (staggerFrom === 'center') {
+          const center = Math.floor(total / 2)
+          return Math.abs(center - index) * staggerDuration
+        }
+        if (staggerFrom === 'random') {
+          const randomIndex = Math.floor(Math.random() * total)
+          return Math.abs(randomIndex - index) * staggerDuration
+        }
+        return Math.abs((staggerFrom as number) - index) * staggerDuration
+      },
+      [staggerFrom, staggerDuration]
+    )
+
+    const handleIndexChange = useCallback(
+      (newIndex: number) => {
+        setCurrentTextIndex(newIndex)
+        if (onNext) onNext(newIndex)
+      },
+      [onNext]
+    )
+
+    const next = useCallback(() => {
+      const nextIndex =
+        currentTextIndex === texts.length - 1
+          ? loop
+            ? 0
+            : currentTextIndex
+          : currentTextIndex + 1
+      if (nextIndex !== currentTextIndex) {
+        handleIndexChange(nextIndex)
+      }
+    }, [currentTextIndex, texts.length, loop, handleIndexChange])
+
+    const previous = useCallback(() => {
+      const prevIndex =
+        currentTextIndex === 0
+          ? loop
+            ? texts.length - 1
+            : currentTextIndex
+          : currentTextIndex - 1
+      if (prevIndex !== currentTextIndex) {
+        handleIndexChange(prevIndex)
+      }
+    }, [currentTextIndex, texts.length, loop, handleIndexChange])
+
+    const jumpTo = useCallback(
+      (index: number) => {
+        const validIndex = Math.max(0, Math.min(index, texts.length - 1))
+        if (validIndex !== currentTextIndex) {
+          handleIndexChange(validIndex)
+        }
+      },
+      [texts.length, currentTextIndex, handleIndexChange]
+    )
+
+    const reset = useCallback(() => {
+      if (currentTextIndex !== 0) {
+        handleIndexChange(0)
+      }
+    }, [currentTextIndex, handleIndexChange])
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        next,
+        previous,
+        jumpTo,
+        reset
+      }),
+      [next, previous, jumpTo, reset]
+    )
+
+    useEffect(() => {
+      if (!auto) return
+      const intervalId = setInterval(next, rotationInterval)
+      return () => clearInterval(intervalId)
+    }, [next, rotationInterval, auto])
+
+    return (
+      <motion.span
+        className={cn(
+          'flex flex-wrap whitespace-pre-wrap relative',
+          mainClassName
+        )}
+        {...rest}
+        layout
+        transition={transition}
+      >
+        <span className="sr-only">{texts[currentTextIndex]}</span>
+        <AnimatePresence
+          mode={animatePresenceMode}
+          initial={animatePresenceInitial}
+        >
+          <motion.div
+            key={currentTextIndex}
+            className={cn(
+              splitBy === 'lines'
+                ? 'flex flex-col w-full'
+                : 'flex flex-wrap whitespace-pre-wrap relative'
+            )}
+            layout
+            aria-hidden="true"
+            initial={initial as HTMLMotionProps<'div'>['initial']}
+            animate={animate as HTMLMotionProps<'div'>['animate']}
+            exit={exit as HTMLMotionProps<'div'>['exit']}
+          >
+            {elements.map((wordObj, wordIndex, array) => {
+              const previousCharsCount = array
+                .slice(0, wordIndex)
+                .reduce((sum, word) => sum + word.characters.length, 0)
+              return (
+                <span
+                  key={wordIndex}
+                  className={cn('inline-flex', splitLevelClassName)}
+                >
+                  {wordObj.characters.map((char, charIndex) => (
+                    <motion.span
+                      key={charIndex}
+                      initial={initial as HTMLMotionProps<'span'>['initial']}
+                      animate={animate as HTMLMotionProps<'span'>['animate']}
+                      exit={exit as HTMLMotionProps<'span'>['exit']}
+                      transition={{
+                        ...transition,
+                        delay: getStaggerDelay(
+                          previousCharsCount + charIndex,
+                          array.reduce(
+                            (sum, word) => sum + word.characters.length,
+                            0
+                          )
+                        )
+                      }}
+                      className={cn('inline-block', elementLevelClassName)}
+                    >
+                      {char}
+                    </motion.span>
+                  ))}
+                  {wordObj.needsSpace && (
+                    <span className="whitespace-pre"> </span>
+                  )}
+                </span>
+              )
+            })}
+          </motion.div>
+        </AnimatePresence>
+      </motion.span>
+    )
+  }
+)
+
+RotatingText.displayName = 'RotatingText'
+export default RotatingText

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'
             )}
           >
@@ -63,7 +63,7 @@ const SideBar: React.FC<SideBarProps> = (props) => {
           <div className="mt-auto mb-10 md:mb-0">
             <Button
               className="w-full"
-              color="danger"
+              color="primary"
               radius="full"
               variant="light"
               onPress={toggleTheme}
@@ -75,7 +75,7 @@ const SideBar: React.FC<SideBarProps> = (props) => {
             </Button>
             <Button
               className="w-full mb-2"
-              color="danger"
+              color="primary"
               radius="full"
               variant="light"
               onPress={onRevokeAuth}

napcat.webui/src/components/sidebar/menus.tsx

@@ -55,15 +55,16 @@ const renderItems = (items: MenuItem[], children = false) => {
             isActive && 'bg-opacity-60',
             b64img && 'backdrop-blur-md text-white'
           )}
-          color="danger"
+          color="primary"
           endContent={
             canOpen ? (
-              // div实现箭头V效果
               <div
                 className={clsx(
                   'ml-auto relative w-3 h-3 transition-transform',
                   open && 'transform rotate-180',
-                  isActive ? 'text-danger-500' : 'text-red-300 dark:text-white',
+                  isActive
+                    ? 'text-primary-500'
+                    : 'text-primary-200 dark:text-white',
                   'before:rounded-full',
                   'before:content-[""]',
                   'before:block',
@@ -95,8 +96,8 @@ const renderItems = (items: MenuItem[], children = false) => {
                 className={clsx(
                   'w-3 h-1.5 rounded-full ml-auto shadow-lg',
                   isActive
-                    ? 'bg-danger-500 animate-spinner-ease-spin'
-                    : 'bg-red-300 dark:bg-white'
+                    ? 'bg-primary-500 animate-spinner-ease-spin'
+                    : 'bg-primary-200 dark:bg-white'
                 )}
               />
             )

napcat.webui/src/components/system_info.tsx

@@ -4,6 +4,8 @@ import { Chip } from '@heroui/chip'
 import { Spinner } from '@heroui/spinner'
 import { Tooltip } from '@heroui/tooltip'
 import { useRequest } from 'ahooks'
+import { useEffect } from 'react'
+import { BsStars } from 'react-icons/bs'
 import { FaCircleInfo, FaInfo, FaQq } from 'react-icons/fa6'
 import { IoLogoChrome, IoLogoOctocat } from 'react-icons/io'
 import { RiMacFill } from 'react-icons/ri'
@@ -16,7 +18,6 @@ import { compareVersion } from '@/utils/version'
 import WebUIManager from '@/controllers/webui_manager'
 import { GithubRelease } from '@/types/github'
 
-import packageJson from '../../package.json'
 import TailwindMarkdown from './tailwind_markdown'
 
 export interface SystemInfoItemProps {
@@ -33,10 +34,10 @@ const SystemInfoItem: React.FC<SystemInfoItemProps> = ({
   endContent
 }) => {
   return (
-    <div className="flex text-sm gap-1 p-2 items-center shadow-sm shadow-danger-50 dark:shadow-danger-100 rounded text-danger-400">
+    <div className="flex text-sm gap-1 p-2 items-center shadow-sm shadow-primary-100 dark:shadow-primary-100 rounded text-primary-400">
       {icon}
       <div className="w-24">{title}</div>
-      <div className="text-danger-200">{value}</div>
+      <div className="text-primary-200">{value}</div>
       <div className="ml-auto">{endContent}</div>
     </div>
   )
@@ -61,7 +62,7 @@ const NewVersionTip = (props: NewVersionTipProps) => {
         <Button
           isIconOnly
           radius="full"
-          color="danger"
+          color="primary"
           variant="shadow"
           className="!w-5 !h-5 !min-w-0 text-small shadow-md"
           onPress={() => {
@@ -98,12 +99,48 @@ const NewVersionTip = (props: NewVersionTipProps) => {
     }
   }
 
+  const AISummaryComponent = () => {
+    const {
+      data: aiSummaryData,
+      loading: aiSummaryLoading,
+      error: aiSummaryError,
+      run: runAiSummary
+    } = useRequest(
+      (version) =>
+        request.get<ServerResponse<string | null>>(
+          `https://release.nc.152710.xyz/?version=${version}`,
+          {
+            timeout: 30000
+          }
+        ),
+      {
+        manual: true
+      }
+    )
+
+    useEffect(() => {
+      runAiSummary(currentVersion)
+    }, [currentVersion, runAiSummary])
+
+    if (aiSummaryLoading) {
+      return (
+        <div className="flex justify-center py-1">
+          <Spinner size="sm" />
+        </div>
+      )
+    }
+    if (aiSummaryError) {
+      return <div className="text-center text-primary-500">AI 摘要获取失败</div>
+    }
+    return <span className="text-default-700">{aiSummaryData?.data.data}</span>
+  }
+
   return (
     <Tooltip content="有新版本可用">
       <Button
         isIconOnly
         radius="full"
-        color="danger"
+        color="primary"
         variant="shadow"
         className="!w-5 !h-5 !min-w-0 text-small shadow-md"
         onPress={() => {
@@ -121,6 +158,13 @@ const NewVersionTip = (props: NewVersionTipProps) => {
                   <span>最新版本</span>
                   <Chip color="primary">{latestVersion}</Chip>
                 </div>
+                <div className="p-2 rounded-md bg-content2 text-sm">
+                  <div className="text-primary-400 font-bold flex items-center gap-1 mb-1">
+                    <BsStars />
+                    <span>AI总结</span>
+                  </div>
+                  {<AISummaryComponent />}
+                </div>
                 <div className="text-sm space-y-2 !mt-4">
                   {middleVersions.map((versionInfo) => (
                     <div
@@ -190,19 +234,14 @@ const SystemInfo: React.FC<SystemInfoProps> = (props) => {
     error: qqVersionError
   } = useRequest(WebUIManager.getQQVersion)
   return (
-    <Card className="bg-opacity-60 shadow-sm shadow-danger-50 dark:shadow-danger-100 overflow-visible flex-1">
-      <CardHeader className="pb-0 items-center gap-1 text-danger-500 font-extrabold">
+    <Card className="bg-opacity-60 shadow-sm shadow-primary-100 dark:shadow-primary-100 overflow-visible flex-1">
+      <CardHeader className="pb-0 items-center gap-1 text-primary-500 font-extrabold">
         <FaCircleInfo className="text-lg" />
         <span>系统信息</span>
       </CardHeader>
       <CardBody className="flex-1">
         <div className="flex flex-col justify-between h-full">
           <NapCatVersion />
-          <SystemInfoItem
-            title="WebUI 版本"
-            icon={<IoLogoChrome className="text-xl" />}
-            value={packageJson.version}
-          />
           <SystemInfoItem
             title="QQ 版本"
             icon={<FaQq className="text-lg" />}
@@ -216,6 +255,11 @@ const SystemInfo: React.FC<SystemInfoProps> = (props) => {
               )
             }
           />
+          <SystemInfoItem
+            title="WebUI 版本"
+            icon={<IoLogoChrome className="text-xl" />}
+            value="Next"
+          />
           <SystemInfoItem
             title="系统版本"
             icon={<RiMacFill className="text-xl" />}

napcat.webui/src/components/system_status_display.tsx

@@ -24,7 +24,7 @@ const SystemStatusItem: React.FC<SystemStatusItemProps> = ({
   return (
     <div
       className={clsx(
-        'shadow-sm p-2 rounded-md text-sm bg-content1 bg-opacity-30',
+        'shadow-sm shadow-primary-100 p-2 rounded-md text-sm bg-content1 bg-opacity-30',
         size === 'lg' ? 'col-span-2' : 'col-span-1 flex justify-between'
       )}
     >
@@ -55,7 +55,7 @@ const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
   }
 
   return (
-    <Card className="bg-opacity-60 shadow-sm shadow-danger-50 dark:shadow-danger-100 col-span-1 lg:col-span-2 relative overflow-hidden">
+    <Card className="bg-opacity-60 shadow-sm shadow-primary-100 col-span-1 lg:col-span-2 relative overflow-hidden">
       <div className="absolute h-full right-0 top-0">
         <Image
           src={bkg}
@@ -69,7 +69,7 @@ const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
       </div>
       <CardBody className="overflow-visible md:flex-row gap-4 items-center justify-stretch z-10">
         <div className="flex-1 w-full md:max-w-96">
-          <h2 className="text-lg font-semibold flex items-center gap-1 text-danger-400">
+          <h2 className="text-lg font-semibold flex items-center gap-1 text-primary-400">
             <GiCpu className="text-xl" />
             <span>CPU</span>
           </h2>
@@ -88,7 +88,7 @@ const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
               unit="%"
             />
           </div>
-          <h2 className="text-lg font-semibold flex items-center gap-1 text-danger-400 mt-2">
+          <h2 className="text-lg font-semibold flex items-center gap-1 text-primary-400 mt-2">
             <BiSolidMemoryCard className="text-xl" />
             <span>内存</span>
           </h2>

napcat.webui/src/components/tabs/index.tsx

@@ -62,7 +62,7 @@ export const Tab = forwardRef<HTMLDivElement, TabProps>(
         className={clsx(
           'px-2 py-1 flex items-center gap-1 text-sm font-medium border-b-2 transition-colors',
           isSelected
-            ? 'border-danger text-danger'
+            ? 'border-primary text-primary'
             : 'border-transparent hover:border-default',
           className
         )}

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"
+    />
+  )
 }

napcat.webui/src/components/xterm.tsx

@@ -1,6 +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 { WebglAddon } from '@xterm/addon-webgl'
 import { Terminal } from '@xterm/xterm'
 import '@xterm/xterm/css/xterm.css'
 import clsx from 'clsx'
@@ -8,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']>
@@ -20,53 +19,44 @@ 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: '"Fira Code", "Harmony", "Noto Serif SC", monospace',
+      fontFamily:
+        '"JetBrains Mono", "Aa偷吃可爱长大的", "Noto Serif SC", monospace',
       cursorInactiveStyle: 'outline',
-      drawBoldTextInBrightColors: false
+      drawBoldTextInBrightColors: false,
+      fontSize: 14,
+      lineHeight: 1.2
     })
     terminalRef.current = terminal
     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.loadAddon(new WebglAddon())
-    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: '#ffffff',
+          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
     }),
     []
   )

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 />

napcat.webui/src/const/themes.ts

@@ -0,0 +1,6 @@
+import heroui from './themes/heroui'
+import nc_pink from './themes/nc_pink'
+
+const themes: ThemeInfo[] = [nc_pink, heroui]
+
+export default themes

napcat.webui/src/const/themes/heroui.ts

@@ -0,0 +1,256 @@
+const theme: ThemeConfig = {
+  dark: {
+    '--heroui-background': '0 0% 0%',
+    '--heroui-foreground-50': '240 5.88% 10%',
+    '--heroui-foreground-100': '240 3.7% 15.88%',
+    '--heroui-foreground-200': '240 5.26% 26.08%',
+    '--heroui-foreground-300': '240 5.2% 33.92%',
+    '--heroui-foreground-400': '240 3.83% 46.08%',
+    '--heroui-foreground-500': '240 5.03% 64.9%',
+    '--heroui-foreground-600': '240 4.88% 83.92%',
+    '--heroui-foreground-700': '240 5.88% 90%',
+    '--heroui-foreground-800': '240 4.76% 95.88%',
+    '--heroui-foreground-900': '0 0% 98.04%',
+    '--heroui-foreground': '210 5.56% 92.94%',
+    '--heroui-focus': '212.01999999999998 100% 46.67%',
+    '--heroui-overlay': '0 0% 0%',
+    '--heroui-divider': '0 0% 100%',
+    '--heroui-divider-opacity': '0.15',
+    '--heroui-content1': '240 5.88% 10%',
+    '--heroui-content1-foreground': '0 0% 98.04%',
+    '--heroui-content2': '240 3.7% 15.88%',
+    '--heroui-content2-foreground': '240 4.76% 95.88%',
+    '--heroui-content3': '240 5.26% 26.08%',
+    '--heroui-content3-foreground': '240 5.88% 90%',
+    '--heroui-content4': '240 5.2% 33.92%',
+    '--heroui-content4-foreground': '240 4.88% 83.92%',
+    '--heroui-default-50': '240 5.88% 10%',
+    '--heroui-default-100': '240 3.7% 15.88%',
+    '--heroui-default-200': '240 5.26% 26.08%',
+    '--heroui-default-300': '240 5.2% 33.92%',
+    '--heroui-default-400': '240 3.83% 46.08%',
+    '--heroui-default-500': '240 5.03% 64.9%',
+    '--heroui-default-600': '240 4.88% 83.92%',
+    '--heroui-default-700': '240 5.88% 90%',
+    '--heroui-default-800': '240 4.76% 95.88%',
+    '--heroui-default-900': '0 0% 98.04%',
+    '--heroui-default-foreground': '0 0% 100%',
+    '--heroui-default': '240 5.26% 26.08%',
+    '--heroui-danger-50': '340 84.91% 10.39%',
+    '--heroui-danger-100': '339.33 86.54% 20.39%',
+    '--heroui-danger-200': '339.11 85.99% 30.78%',
+    '--heroui-danger-300': '339 86.54% 40.78%',
+    '--heroui-danger-400': '339.2 90.36% 51.18%',
+    '--heroui-danger-500': '339 90% 60.78%',
+    '--heroui-danger-600': '339.11 90.6% 70.78%',
+    '--heroui-danger-700': '339.33 90% 80.39%',
+    '--heroui-danger-800': '340 91.84% 90.39%',
+    '--heroui-danger-900': '339.13 92% 95.1%',
+    '--heroui-danger-foreground': '0 0% 100%',
+    '--heroui-danger': '339.2 90.36% 51.18%',
+    '--heroui-primary-50': '211.84 100% 9.61%',
+    '--heroui-primary-100': '211.84 100% 19.22%',
+    '--heroui-primary-200': '212.24 100% 28.82%',
+    '--heroui-primary-300': '212.14 100% 38.43%',
+    '--heroui-primary-400': '212.02 100% 46.67%',
+    '--heroui-primary-500': '212.14 92.45% 58.43%',
+    '--heroui-primary-600': '212.24 92.45% 68.82%',
+    '--heroui-primary-700': '211.84 92.45% 79.22%',
+    '--heroui-primary-800': '211.84 92.45% 89.61%',
+    '--heroui-primary-900': '212.5 92.31% 94.9%',
+    '--heroui-primary-foreground': '0 0% 100%',
+    '--heroui-primary': '212.02 100% 46.67%',
+    '--heroui-secondary-50': '270 66.67% 9.41%',
+    '--heroui-secondary-100': '270 66.67% 18.82%',
+    '--heroui-secondary-200': '270 66.67% 28.24%',
+    '--heroui-secondary-300': '270 66.67% 37.65%',
+    '--heroui-secondary-400': '270 66.67% 47.06%',
+    '--heroui-secondary-500': '270 59.26% 57.65%',
+    '--heroui-secondary-600': '270 59.26% 68.24%',
+    '--heroui-secondary-700': '270 59.26% 78.82%',
+    '--heroui-secondary-800': '270 59.26% 89.41%',
+    '--heroui-secondary-900': '270 61.54% 94.9%',
+    '--heroui-secondary-foreground': '0 0% 100%',
+    '--heroui-secondary': '270 59.26% 57.65%',
+    '--heroui-success-50': '145.71 77.78% 8.82%',
+    '--heroui-success-100': '146.2 79.78% 17.45%',
+    '--heroui-success-200': '145.79 79.26% 26.47%',
+    '--heroui-success-300': '146.01 79.89% 35.1%',
+    '--heroui-success-400': '145.96 79.46% 43.92%',
+    '--heroui-success-500': '146.01 62.45% 55.1%',
+    '--heroui-success-600': '145.79 62.57% 66.47%',
+    '--heroui-success-700': '146.2 61.74% 77.45%',
+    '--heroui-success-800': '145.71 61.4% 88.82%',
+    '--heroui-success-900': '146.67 64.29% 94.51%',
+    '--heroui-success-foreground': '0 0% 0%',
+    '--heroui-success': '145.96 79.46% 43.92%',
+    '--heroui-warning-50': '37.14 75% 10.98%',
+    '--heroui-warning-100': '37.14 75% 21.96%',
+    '--heroui-warning-200': '36.96 73.96% 33.14%',
+    '--heroui-warning-300': '37.01 74.22% 44.12%',
+    '--heroui-warning-400': '37.03 91.27% 55.1%',
+    '--heroui-warning-500': '37.01 91.26% 64.12%',
+    '--heroui-warning-600': '36.96 91.24% 73.14%',
+    '--heroui-warning-700': '37.14 91.3% 81.96%',
+    '--heroui-warning-800': '37.14 91.3% 90.98%',
+    '--heroui-warning-900': '54.55 91.67% 95.29%',
+    '--heroui-warning-foreground': '0 0% 0%',
+    '--heroui-warning': '37.03 91.27% 55.1%',
+    '--heroui-code-background': '240 5.56% 7.06%',
+    '--heroui-strong': '190.14 94.67% 44.12%',
+    '--heroui-code-mdx': '190.14 94.67% 44.12%',
+    '--heroui-divider-weight': '1px',
+    '--heroui-disabled-opacity': '.5',
+    '--heroui-font-size-tiny': '0.75rem',
+    '--heroui-font-size-small': '0.875rem',
+    '--heroui-font-size-medium': '1rem',
+    '--heroui-font-size-large': '1.125rem',
+    '--heroui-line-height-tiny': '1rem',
+    '--heroui-line-height-small': '1.25rem',
+    '--heroui-line-height-medium': '1.5rem',
+    '--heroui-line-height-large': '1.75rem',
+    '--heroui-radius-small': '8px',
+    '--heroui-radius-medium': '12px',
+    '--heroui-radius-large': '14px',
+    '--heroui-border-width-small': '1px',
+    '--heroui-border-width-medium': '2px',
+    '--heroui-border-width-large': '3px',
+    '--heroui-box-shadow-small':
+      '0px 0px 5px 0px rgba(0, 0, 0, .05), 0px 2px 10px 0px rgba(0, 0, 0, .2), inset 0px 0px 1px 0px hsla(0, 0%, 100%, .15)',
+    '--heroui-box-shadow-medium':
+      '0px 0px 15px 0px rgba(0, 0, 0, .06), 0px 2px 30px 0px rgba(0, 0, 0, .22), inset 0px 0px 1px 0px hsla(0, 0%, 100%, .15)',
+    '--heroui-box-shadow-large':
+      '0px 0px 30px 0px rgba(0, 0, 0, .07), 0px 30px 60px 0px rgba(0, 0, 0, .26), inset 0px 0px 1px 0px hsla(0, 0%, 100%, .15)',
+    '--heroui-hover-opacity': '.9'
+  },
+  light: {
+    '--heroui-background': '0 0% 100%',
+    '--heroui-foreground-50': '240 5.88% 95%',
+    '--heroui-foreground-100': '240 3.7% 90%',
+    '--heroui-foreground-200': '240 5.26% 80%',
+    '--heroui-foreground-300': '240 5.2% 70%',
+    '--heroui-foreground-400': '240 3.83% 60%',
+    '--heroui-foreground-500': '240 5.03% 50%',
+    '--heroui-foreground-600': '240 4.88% 40%',
+    '--heroui-foreground-700': '240 5.88% 30%',
+    '--heroui-foreground-800': '240 4.76% 20%',
+    '--heroui-foreground-900': '0 0% 10%',
+    '--heroui-foreground': '210 5.56% 7.06%',
+    '--heroui-focus': '212.01999999999998 100% 53.33%',
+    '--heroui-overlay': '0 0% 100%',
+    '--heroui-divider': '0 0% 0%',
+    '--heroui-divider-opacity': '0.85',
+    '--heroui-content1': '240 5.88% 95%',
+    '--heroui-content1-foreground': '0 0% 10%',
+    '--heroui-content2': '240 3.7% 90%',
+    '--heroui-content2-foreground': '240 4.76% 20%',
+    '--heroui-content3': '240 5.26% 80%',
+    '--heroui-content3-foreground': '240 5.88% 30%',
+    '--heroui-content4': '240 5.2% 70%',
+    '--heroui-content4-foreground': '240 4.88% 40%',
+    '--heroui-default-50': '240 5.88% 95%',
+    '--heroui-default-100': '240 3.7% 90%',
+    '--heroui-default-200': '240 5.26% 80%',
+    '--heroui-default-300': '240 5.2% 70%',
+    '--heroui-default-400': '240 3.83% 60%',
+    '--heroui-default-500': '240 5.03% 50%',
+    '--heroui-default-600': '240 4.88% 40%',
+    '--heroui-default-700': '240 5.88% 30%',
+    '--heroui-default-800': '240 4.76% 20%',
+    '--heroui-default-900': '0 0% 10%',
+    '--heroui-default-foreground': '0 0% 0%',
+    '--heroui-default': '240 5.26% 80%',
+    '--heroui-danger-50': '339.13 92% 95.1%',
+    '--heroui-danger-100': '340 91.84% 90.39%',
+    '--heroui-danger-200': '339.33 90% 80.39%',
+    '--heroui-danger-300': '339.11 90.6% 70.78%',
+    '--heroui-danger-400': '339 90% 60.78%',
+    '--heroui-danger-500': '339.2 90.36% 51.18%',
+    '--heroui-danger-600': '339 86.54% 40.78%',
+    '--heroui-danger-700': '339.11 85.99% 30.78%',
+    '--heroui-danger-800': '339.33 86.54% 20.39%',
+    '--heroui-danger-900': '340 84.91% 10.39%',
+    '--heroui-danger-foreground': '0 0% 100%',
+    '--heroui-danger': '339.2 90.36% 51.18%',
+    '--heroui-primary-50': '212.5 92.31% 94.9%',
+    '--heroui-primary-100': '211.84 92.45% 89.61%',
+    '--heroui-primary-200': '211.84 92.45% 79.22%',
+    '--heroui-primary-300': '212.24 92.45% 68.82%',
+    '--heroui-primary-400': '212.14 92.45% 58.43%',
+    '--heroui-primary-500': '212.02 100% 46.67%',
+    '--heroui-primary-600': '212.14 100% 38.43%',
+    '--heroui-primary-700': '212.24 100% 28.82%',
+    '--heroui-primary-800': '211.84 100% 19.22%',
+    '--heroui-primary-900': '211.84 100% 9.61%',
+    '--heroui-primary-foreground': '0 0% 100%',
+    '--heroui-primary': '212.02 100% 46.67%',
+    '--heroui-secondary-50': '270 61.54% 94.9%',
+    '--heroui-secondary-100': '270 59.26% 89.41%',
+    '--heroui-secondary-200': '270 59.26% 78.82%',
+    '--heroui-secondary-300': '270 59.26% 68.24%',
+    '--heroui-secondary-400': '270 59.26% 57.65%',
+    '--heroui-secondary-500': '270 66.67% 47.06%',
+    '--heroui-secondary-600': '270 66.67% 37.65%',
+    '--heroui-secondary-700': '270 66.67% 28.24%',
+    '--heroui-secondary-800': '270 66.67% 18.82%',
+    '--heroui-secondary-900': '270 66.67% 9.41%',
+    '--heroui-secondary-foreground': '0 0% 100%',
+    '--heroui-secondary': '270 66.67% 47.06%',
+    '--heroui-success-50': '146.67 64.29% 94.51%',
+    '--heroui-success-100': '145.71 61.4% 88.82%',
+    '--heroui-success-200': '146.2 61.74% 77.45%',
+    '--heroui-success-300': '145.79 62.57% 66.47%',
+    '--heroui-success-400': '146.01 62.45% 55.1%',
+    '--heroui-success-500': '145.96 79.46% 43.92%',
+    '--heroui-success-600': '146.01 79.89% 35.1%',
+    '--heroui-success-700': '145.79 79.26% 26.47%',
+    '--heroui-success-800': '146.2 79.78% 17.45%',
+    '--heroui-success-900': '145.71 77.78% 8.82%',
+    '--heroui-success-foreground': '0 0% 0%',
+    '--heroui-success': '145.96 79.46% 43.92%',
+    '--heroui-warning-50': '54.55 91.67% 95.29%',
+    '--heroui-warning-100': '37.14 91.3% 90.98%',
+    '--heroui-warning-200': '37.14 91.3% 81.96%',
+    '--heroui-warning-300': '36.96 91.24% 73.14%',
+    '--heroui-warning-400': '37.01 91.26% 64.12%',
+    '--heroui-warning-500': '37.03 91.27% 55.1%',
+    '--heroui-warning-600': '37.01 74.22% 44.12%',
+    '--heroui-warning-700': '36.96 73.96% 33.14%',
+    '--heroui-warning-800': '37.14 75% 21.96%',
+    '--heroui-warning-900': '37.14 75% 10.98%',
+    '--heroui-warning-foreground': '0 0% 0%',
+    '--heroui-warning': '37.03 91.27% 55.1%',
+    '--heroui-code-background': '221.25 17.39% 18.04%',
+    '--heroui-strong': '316.95 100% 65.29%',
+    '--heroui-code-mdx': '316.95 100% 65.29%',
+    '--heroui-divider-weight': '1px',
+    '--heroui-disabled-opacity': '.5',
+    '--heroui-font-size-tiny': '0.75rem',
+    '--heroui-font-size-small': '0.875rem',
+    '--heroui-font-size-medium': '1rem',
+    '--heroui-font-size-large': '1.125rem',
+    '--heroui-line-height-tiny': '1rem',
+    '--heroui-line-height-small': '1.25rem',
+    '--heroui-line-height-medium': '1.5rem',
+    '--heroui-line-height-large': '1.75rem',
+    '--heroui-radius-small': '8px',
+    '--heroui-radius-medium': '12px',
+    '--heroui-radius-large': '14px',
+    '--heroui-border-width-small': '1px',
+    '--heroui-border-width-medium': '2px',
+    '--heroui-border-width-large': '3px',
+    '--heroui-box-shadow-small':
+      '0px 0px 5px 0px rgba(0, 0, 0, .02), 0px 2px 10px 0px rgba(0, 0, 0, .06), 0px 0px 1px 0px rgba(0, 0, 0, .3)',
+    '--heroui-box-shadow-medium':
+      '0px 0px 15px 0px rgba(0, 0, 0, .03), 0px 2px 30px 0px rgba(0, 0, 0, .08), 0px 0px 1px 0px rgba(0, 0, 0, .3)',
+    '--heroui-box-shadow-large':
+      '0px 0px 30px 0px rgba(0, 0, 0, .04), 0px 30px 60px 0px rgba(0, 0, 0, .12), 0px 0px 1px 0px rgba(0, 0, 0, .3)',
+    '--heroui-hover-opacity': '.8'
+  }
+}
+export default {
+  theme,
+  author: 'HeroUI',
+  name: 'heroui',
+  description: 'HeroUI Default Theme'
+} satisfies ThemeInfo

napcat.webui/src/const/themes/nc_pink.ts

@@ -0,0 +1,256 @@
+const theme: ThemeConfig = {
+  dark: {
+    '--heroui-background': '0 0% 0%',
+    '--heroui-foreground-50': '240 5.88% 10%',
+    '--heroui-foreground-100': '240 3.7% 15.88%',
+    '--heroui-foreground-200': '240 5.26% 26.08%',
+    '--heroui-foreground-300': '240 5.2% 33.92%',
+    '--heroui-foreground-400': '240 3.83% 46.08%',
+    '--heroui-foreground-500': '240 5.03% 64.9%',
+    '--heroui-foreground-600': '240 4.88% 83.92%',
+    '--heroui-foreground-700': '240 5.88% 90%',
+    '--heroui-foreground-800': '240 4.76% 95.88%',
+    '--heroui-foreground-900': '0 0% 98.04%',
+    '--heroui-foreground': '210 5.56% 92.94%',
+    '--heroui-focus': '212.01999999999998 100% 46.67%',
+    '--heroui-overlay': '0 0% 0%',
+    '--heroui-divider': '0 0% 100%',
+    '--heroui-divider-opacity': '0.15',
+    '--heroui-content1': '240 5.88% 10%',
+    '--heroui-content1-foreground': '0 0% 98.04%',
+    '--heroui-content2': '240 3.7% 15.88%',
+    '--heroui-content2-foreground': '240 4.76% 95.88%',
+    '--heroui-content3': '240 5.26% 26.08%',
+    '--heroui-content3-foreground': '240 5.88% 90%',
+    '--heroui-content4': '240 5.2% 33.92%',
+    '--heroui-content4-foreground': '240 4.88% 83.92%',
+    '--heroui-default-50': '240 5.88% 10%',
+    '--heroui-default-100': '240 3.7% 15.88%',
+    '--heroui-default-200': '240 5.26% 26.08%',
+    '--heroui-default-300': '240 5.2% 33.92%',
+    '--heroui-default-400': '240 3.83% 46.08%',
+    '--heroui-default-500': '240 5.03% 64.9%',
+    '--heroui-default-600': '240 4.88% 83.92%',
+    '--heroui-default-700': '240 5.88% 90%',
+    '--heroui-default-800': '240 4.76% 95.88%',
+    '--heroui-default-900': '0 0% 98.04%',
+    '--heroui-default-foreground': '0 0% 100%',
+    '--heroui-default': '240 5.26% 26.08%',
+    '--heroui-danger-50': '301.89 82.61% 22.55%',
+    '--heroui-danger-100': '308.18 76.39% 28.24%',
+    '--heroui-danger-200': '313.85 70.65% 36.08%',
+    '--heroui-danger-300': '319.73 65.64% 44.51%',
+    '--heroui-danger-400': '325.82 69.62% 53.53%',
+    '--heroui-danger-500': '331.82 75% 65.49%',
+    '--heroui-danger-600': '337.84 83.46% 73.92%',
+    '--heroui-danger-700': '343.42 90.48% 83.53%',
+    '--heroui-danger-800': '350.53 90.48% 91.76%',
+    '--heroui-danger-900': '324 90.91% 95.69%',
+    '--heroui-danger-foreground': '0 0% 100%',
+    '--heroui-danger': '325.82 69.62% 53.53%',
+    '--heroui-primary-50': '340 84.91% 10.39%',
+    '--heroui-primary-100': '339.33 86.54% 20.39%',
+    '--heroui-primary-200': '339.11 85.99% 30.78%',
+    '--heroui-primary-300': '339 86.54% 40.78%',
+    '--heroui-primary-400': '339.2 90.36% 51.18%',
+    '--heroui-primary-500': '339 90% 60.78%',
+    '--heroui-primary-600': '339.11 90.6% 70.78%',
+    '--heroui-primary-700': '339.33 90% 80.39%',
+    '--heroui-primary-800': '340 91.84% 90.39%',
+    '--heroui-primary-900': '339.13 92% 95.1%',
+    '--heroui-primary-foreground': '0 0% 100%',
+    '--heroui-primary': '339.2 90.36% 51.18%',
+    '--heroui-secondary-50': '270 66.67% 9.41%',
+    '--heroui-secondary-100': '270 66.67% 18.82%',
+    '--heroui-secondary-200': '270 66.67% 28.24%',
+    '--heroui-secondary-300': '270 66.67% 37.65%',
+    '--heroui-secondary-400': '270 66.67% 47.06%',
+    '--heroui-secondary-500': '270 59.26% 57.65%',
+    '--heroui-secondary-600': '270 59.26% 68.24%',
+    '--heroui-secondary-700': '270 59.26% 78.82%',
+    '--heroui-secondary-800': '270 59.26% 89.41%',
+    '--heroui-secondary-900': '270 61.54% 94.9%',
+    '--heroui-secondary-foreground': '0 0% 100%',
+    '--heroui-secondary': '270 59.26% 57.65%',
+    '--heroui-success-50': '145.71 77.78% 8.82%',
+    '--heroui-success-100': '146.2 79.78% 17.45%',
+    '--heroui-success-200': '145.79 79.26% 26.47%',
+    '--heroui-success-300': '146.01 79.89% 35.1%',
+    '--heroui-success-400': '145.96 79.46% 43.92%',
+    '--heroui-success-500': '146.01 62.45% 55.1%',
+    '--heroui-success-600': '145.79 62.57% 66.47%',
+    '--heroui-success-700': '146.2 61.74% 77.45%',
+    '--heroui-success-800': '145.71 61.4% 88.82%',
+    '--heroui-success-900': '146.67 64.29% 94.51%',
+    '--heroui-success-foreground': '0 0% 0%',
+    '--heroui-success': '145.96 79.46% 43.92%',
+    '--heroui-warning-50': '37.14 75% 10.98%',
+    '--heroui-warning-100': '37.14 75% 21.96%',
+    '--heroui-warning-200': '36.96 73.96% 33.14%',
+    '--heroui-warning-300': '37.01 74.22% 44.12%',
+    '--heroui-warning-400': '37.03 91.27% 55.1%',
+    '--heroui-warning-500': '37.01 91.26% 64.12%',
+    '--heroui-warning-600': '36.96 91.24% 73.14%',
+    '--heroui-warning-700': '37.14 91.3% 81.96%',
+    '--heroui-warning-800': '37.14 91.3% 90.98%',
+    '--heroui-warning-900': '54.55 91.67% 95.29%',
+    '--heroui-warning-foreground': '0 0% 0%',
+    '--heroui-warning': '37.03 91.27% 55.1%',
+    '--heroui-code-background': '240 5.56% 7.06%',
+    '--heroui-strong': '190.14 94.67% 44.12%',
+    '--heroui-code-mdx': '190.14 94.67% 44.12%',
+    '--heroui-divider-weight': '1px',
+    '--heroui-disabled-opacity': '.5',
+    '--heroui-font-size-tiny': '0.75rem',
+    '--heroui-font-size-small': '0.875rem',
+    '--heroui-font-size-medium': '1rem',
+    '--heroui-font-size-large': '1.125rem',
+    '--heroui-line-height-tiny': '1rem',
+    '--heroui-line-height-small': '1.25rem',
+    '--heroui-line-height-medium': '1.5rem',
+    '--heroui-line-height-large': '1.75rem',
+    '--heroui-radius-small': '8px',
+    '--heroui-radius-medium': '12px',
+    '--heroui-radius-large': '14px',
+    '--heroui-border-width-small': '1px',
+    '--heroui-border-width-medium': '2px',
+    '--heroui-border-width-large': '3px',
+    '--heroui-box-shadow-small':
+      '0px 0px 5px 0px rgba(0, 0, 0, .05), 0px 2px 10px 0px rgba(0, 0, 0, .2), inset 0px 0px 1px 0px hsla(0, 0%, 100%, .15)',
+    '--heroui-box-shadow-medium':
+      '0px 0px 15px 0px rgba(0, 0, 0, .06), 0px 2px 30px 0px rgba(0, 0, 0, .22), inset 0px 0px 1px 0px hsla(0, 0%, 100%, .15)',
+    '--heroui-box-shadow-large':
+      '0px 0px 30px 0px rgba(0, 0, 0, .07), 0px 30px 60px 0px rgba(0, 0, 0, .26), inset 0px 0px 1px 0px hsla(0, 0%, 100%, .15)',
+    '--heroui-hover-opacity': '.9'
+  },
+  light: {
+    '--heroui-background': '0 0% 100%',
+    '--heroui-foreground-50': '240 5.88% 95%',
+    '--heroui-foreground-100': '240 3.7% 90%',
+    '--heroui-foreground-200': '240 5.26% 80%',
+    '--heroui-foreground-300': '240 5.2% 70%',
+    '--heroui-foreground-400': '240 3.83% 60%',
+    '--heroui-foreground-500': '240 5.03% 50%',
+    '--heroui-foreground-600': '240 4.88% 40%',
+    '--heroui-foreground-700': '240 5.88% 30%',
+    '--heroui-foreground-800': '240 4.76% 20%',
+    '--heroui-foreground-900': '0 0% 10%',
+    '--heroui-foreground': '210 5.56% 7.06%',
+    '--heroui-focus': '212.01999999999998 100% 53.33%',
+    '--heroui-overlay': '0 0% 100%',
+    '--heroui-divider': '0 0% 0%',
+    '--heroui-divider-opacity': '0.85',
+    '--heroui-content1': '240 5.88% 95%',
+    '--heroui-content1-foreground': '0 0% 10%',
+    '--heroui-content2': '240 3.7% 90%',
+    '--heroui-content2-foreground': '240 4.76% 20%',
+    '--heroui-content3': '240 5.26% 80%',
+    '--heroui-content3-foreground': '240 5.88% 30%',
+    '--heroui-content4': '240 5.2% 70%',
+    '--heroui-content4-foreground': '240 4.88% 40%',
+    '--heroui-default-50': '240 5.88% 95%',
+    '--heroui-default-100': '240 3.7% 90%',
+    '--heroui-default-200': '240 5.26% 80%',
+    '--heroui-default-300': '240 5.2% 70%',
+    '--heroui-default-400': '240 3.83% 60%',
+    '--heroui-default-500': '240 5.03% 50%',
+    '--heroui-default-600': '240 4.88% 40%',
+    '--heroui-default-700': '240 5.88% 30%',
+    '--heroui-default-800': '240 4.76% 20%',
+    '--heroui-default-900': '0 0% 10%',
+    '--heroui-default-foreground': '0 0% 0%',
+    '--heroui-default': '240 5.26% 80%',
+    '--heroui-danger-50': '324 90.91% 95.69%',
+    '--heroui-danger-100': '350.53 90.48% 91.76%',
+    '--heroui-danger-200': '343.42 90.48% 83.53%',
+    '--heroui-danger-300': '337.84 83.46% 73.92%',
+    '--heroui-danger-400': '331.82 75% 65.49%',
+    '--heroui-danger-500': '325.82 69.62% 53.53%',
+    '--heroui-danger-600': '319.73 65.64% 44.51%',
+    '--heroui-danger-700': '313.85 70.65% 36.08%',
+    '--heroui-danger-800': '308.18 76.39% 28.24%',
+    '--heroui-danger-900': '301.89 82.61% 22.55%',
+    '--heroui-danger-foreground': '0 0% 100%',
+    '--heroui-danger': '325.82 69.62% 53.53%',
+    '--heroui-primary-50': '339.13 92% 95.1%',
+    '--heroui-primary-100': '340 91.84% 90.39%',
+    '--heroui-primary-200': '339.33 90% 80.39%',
+    '--heroui-primary-300': '339.11 90.6% 70.78%',
+    '--heroui-primary-400': '339 90% 60.78%',
+    '--heroui-primary-500': '339.2 90.36% 51.18%',
+    '--heroui-primary-600': '339 86.54% 40.78%',
+    '--heroui-primary-700': '339.11 85.99% 30.78%',
+    '--heroui-primary-800': '339.33 86.54% 20.39%',
+    '--heroui-primary-900': '340 84.91% 10.39%',
+    '--heroui-primary-foreground': '0 0% 100%',
+    '--heroui-primary': '339.2 90.36% 51.18%',
+    '--heroui-secondary-50': '270 61.54% 94.9%',
+    '--heroui-secondary-100': '270 59.26% 89.41%',
+    '--heroui-secondary-200': '270 59.26% 78.82%',
+    '--heroui-secondary-300': '270 59.26% 68.24%',
+    '--heroui-secondary-400': '270 59.26% 57.65%',
+    '--heroui-secondary-500': '270 66.67% 47.06%',
+    '--heroui-secondary-600': '270 66.67% 37.65%',
+    '--heroui-secondary-700': '270 66.67% 28.24%',
+    '--heroui-secondary-800': '270 66.67% 18.82%',
+    '--heroui-secondary-900': '270 66.67% 9.41%',
+    '--heroui-secondary-foreground': '0 0% 100%',
+    '--heroui-secondary': '270 66.67% 47.06%',
+    '--heroui-success-50': '146.67 64.29% 94.51%',
+    '--heroui-success-100': '145.71 61.4% 88.82%',
+    '--heroui-success-200': '146.2 61.74% 77.45%',
+    '--heroui-success-300': '145.79 62.57% 66.47%',
+    '--heroui-success-400': '146.01 62.45% 55.1%',
+    '--heroui-success-500': '145.96 79.46% 43.92%',
+    '--heroui-success-600': '146.01 79.89% 35.1%',
+    '--heroui-success-700': '145.79 79.26% 26.47%',
+    '--heroui-success-800': '146.2 79.78% 17.45%',
+    '--heroui-success-900': '145.71 77.78% 8.82%',
+    '--heroui-success-foreground': '0 0% 0%',
+    '--heroui-success': '145.96 79.46% 43.92%',
+    '--heroui-warning-50': '54.55 91.67% 95.29%',
+    '--heroui-warning-100': '37.14 91.3% 90.98%',
+    '--heroui-warning-200': '37.14 91.3% 81.96%',
+    '--heroui-warning-300': '36.96 91.24% 73.14%',
+    '--heroui-warning-400': '37.01 91.26% 64.12%',
+    '--heroui-warning-500': '37.03 91.27% 55.1%',
+    '--heroui-warning-600': '37.01 74.22% 44.12%',
+    '--heroui-warning-700': '36.96 73.96% 33.14%',
+    '--heroui-warning-800': '37.14 75% 21.96%',
+    '--heroui-warning-900': '37.14 75% 10.98%',
+    '--heroui-warning-foreground': '0 0% 0%',
+    '--heroui-warning': '37.03 91.27% 55.1%',
+    '--heroui-code-background': '221.25 17.39% 18.04%',
+    '--heroui-strong': '316.95 100% 65.29%',
+    '--heroui-code-mdx': '316.95 100% 65.29%',
+    '--heroui-divider-weight': '1px',
+    '--heroui-disabled-opacity': '.5',
+    '--heroui-font-size-tiny': '0.75rem',
+    '--heroui-font-size-small': '0.875rem',
+    '--heroui-font-size-medium': '1rem',
+    '--heroui-font-size-large': '1.125rem',
+    '--heroui-line-height-tiny': '1rem',
+    '--heroui-line-height-small': '1.25rem',
+    '--heroui-line-height-medium': '1.5rem',
+    '--heroui-line-height-large': '1.75rem',
+    '--heroui-radius-small': '8px',
+    '--heroui-radius-medium': '12px',
+    '--heroui-radius-large': '14px',
+    '--heroui-border-width-small': '1px',
+    '--heroui-border-width-medium': '2px',
+    '--heroui-border-width-large': '3px',
+    '--heroui-box-shadow-small':
+      '0px 0px 5px 0px rgba(0, 0, 0, .02), 0px 2px 10px 0px rgba(0, 0, 0, .06), 0px 0px 1px 0px rgba(0, 0, 0, .3)',
+    '--heroui-box-shadow-medium':
+      '0px 0px 15px 0px rgba(0, 0, 0, .03), 0px 2px 30px 0px rgba(0, 0, 0, .08), 0px 0px 1px 0px rgba(0, 0, 0, .3)',
+    '--heroui-box-shadow-large':
+      '0px 0px 30px 0px rgba(0, 0, 0, .04), 0px 30px 60px 0px rgba(0, 0, 0, .12), 0px 0px 1px 0px rgba(0, 0, 0, .3)',
+    '--heroui-hover-opacity': '.8'
+  }
+}
+export default {
+  theme,
+  author: 'NapCat',
+  name: 'nc_pink',
+  description: 'NapCat Pink Theme'
+} satisfies ThemeInfo

napcat.webui/src/contexts/songs.tsx

@@ -35,6 +35,7 @@ const AudioProvider: React.FC<MusicProviderProps> = ({ children }) => {
   const [musicId, setMusicId] = useState<number>(0)
   const [playMode, setPlayMode] = useState<PlayMode>(PlayMode.Loop)
   const music = musicList.find((music) => music.id === musicId)
+  const [token] = useLocalStorage(key.token, '')
   const onNext = () => {
     const nextID = getNextMusic(musicList, musicId, playMode)
     setMusicId(nextID)
@@ -60,8 +61,8 @@ const AudioProvider: React.FC<MusicProviderProps> = ({ children }) => {
     setMusicId(res[0].id)
   }
   useEffect(() => {
-    fetchMusicList(listId)
-  }, [listId])
+    if (listId && token) fetchMusicList(listId)
+  }, [listId, token])
   return (
     <AudioContext.Provider
       value={{

napcat.webui/src/controllers/file_manager.ts

@@ -196,4 +196,26 @@ export default class FileManager {
     )
     return data.data
   }
+
+  public static async uploadWebUIFont(file: File) {
+    const formData = new FormData()
+    formData.append('file', file)
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/font/upload/webui',
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      }
+    )
+    return data.data
+  }
+
+  public static async deleteWebUIFont() {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/font/delete/webui'
+    )
+    return data.data
+  }
 }

napcat.webui/src/controllers/qq_manager.ts

@@ -73,4 +73,17 @@ export default class QQManager {
     )
     return data.data.data
   }
+
+  public static async getQuickLoginQQ() {
+    const { data } = await serverRequest.post<ServerResponse<string>>(
+      '/QQLogin/GetQuickLoginQQ'
+    )
+    return data.data
+  }
+
+  public static async setQuickLoginQQ(uin: string) {
+    await serverRequest.post<ServerResponse<null>>('/QQLogin/SetQuickLoginQQ', {
+      uin
+    })
+  }
 }

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

napcat.webui/src/controllers/webui_manager.ts

@@ -3,20 +3,12 @@ import { EventSourcePolyfill } from 'event-source-polyfill'
 import { LogLevel } from '@/const/enum'
 
 import { serverRequest } from '@/utils/request'
-
+import CryptoJS from "crypto-js";
 export interface Log {
   level: LogLevel
   message: string
 }
 
-export interface TerminalSession {
-  id: string
-}
-
-export interface TerminalInfo {
-  id: string
-}
-
 export default class WebUIManager {
   public static async checkWebUiLogined() {
     const { data } =
@@ -25,9 +17,10 @@ export default class WebUIManager {
   }
 
   public static async loginWithToken(token: string) {
+    const sha256 = CryptoJS.SHA256(token + '.napcat').toString();
     const { data } = await serverRequest.post<ServerResponse<AuthResponse>>(
       '/auth/login',
-      { token }
+      { hash: sha256 }
     )
     return data.data.Credential
   }
@@ -40,6 +33,13 @@ export default class WebUIManager {
     return data.data
   }
 
+  public static async checkUsingDefaultToken() {
+    const { data } = await serverRequest.get<ServerResponse<boolean>>(
+      '/auth/check_using_default_token'
+    )
+    return data.data
+  }
+
   public static async proxy<T>(url = '') {
     const data = await serverRequest.get<ServerResponse<string>>(
       '/base/proxy?url=' + encodeURIComponent(url)
@@ -60,6 +60,20 @@ export default class WebUIManager {
     return data.data
   }
 
+  public static async getThemeConfig() {
+    const { data } =
+      await serverRequest.get<ServerResponse<ThemeConfig>>('/base/Theme')
+    return data.data
+  }
+
+  public static async setThemeConfig(theme: ThemeConfig) {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/base/SetTheme',
+      { theme }
+    )
+    return data.data
+  }
+
   public static async getLogList() {
     const { data } =
       await serverRequest.get<ServerResponse<string[]>>('/Log/GetLogList')

napcat.webui/src/hooks/use-preload-images.ts

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from 'react'
+
+// 全局图片缓存
+const imageCache = new Map<string, HTMLImageElement>()
+
+export function usePreloadImages(urls: string[]) {
+  const [loadedUrls, setLoadedUrls] = useState<Record<string, boolean>>({})
+  const [isLoading, setIsLoading] = useState(true)
+  const isMounted = useRef(true)
+
+  useEffect(() => {
+    isMounted.current = true
+
+    // 检查是否所有图片都已缓存
+    const allCached = urls.every((url) => imageCache.has(url))
+    if (allCached) {
+      setLoadedUrls(urls.reduce((acc, url) => ({ ...acc, [url]: true }), {}))
+      setIsLoading(false)
+      return
+    }
+
+    setIsLoading(true)
+    const loadedImages: Record<string, boolean> = {}
+    let pendingCount = urls.length
+
+    urls.forEach((url) => {
+      // 如果已经缓存，直接标记为已加载
+      if (imageCache.has(url)) {
+        loadedImages[url] = true
+        pendingCount--
+        if (pendingCount === 0) {
+          setLoadedUrls(loadedImages)
+          setIsLoading(false)
+        }
+        return
+      }
+
+      const img = new Image()
+      img.onload = () => {
+        if (!isMounted.current) return
+        loadedImages[url] = true
+        imageCache.set(url, img)
+        pendingCount--
+
+        if (pendingCount === 0) {
+          setLoadedUrls(loadedImages)
+          setIsLoading(false)
+        }
+      }
+      img.onerror = () => {
+        if (!isMounted.current) return
+        loadedImages[url] = false
+        pendingCount--
+
+        if (pendingCount === 0) {
+          setLoadedUrls(loadedImages)
+          setIsLoading(false)
+        }
+      }
+      img.src = url
+    })
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [urls])
+
+  return { loadedUrls, isLoading }
+}

napcat.webui/src/layouts/default.tsx

@@ -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 items-stretch"
+      className="h-screen relative flex bg-primary-50 dark:bg-black items-stretch"
       style={{
         backgroundImage: `url(${b64img})`,
         backgroundSize: 'cover'
@@ -98,10 +98,10 @@ 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',
-            'dark:bg-background dark:shadow-danger-100',
+            'h-10 flex items-center font-bold text-xl backdrop-blur-lg rounded-full',
+            'dark:bg-background dark:shadow-primary-100',
             'bg-background !bg-opacity-50',
-            'shadow-sm shadow-danger-50',
+            'shadow-sm shadow-primary-50',
             'z-30 m-2 mb-0 sticky top-2 left-0'
           )}
         >

napcat.webui/src/main.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client'
+import 'react-photo-view/dist/react-photo-view.css'
 import { BrowserRouter } from 'react-router-dom'
 
 import App from '@/App.tsx'
@@ -7,6 +8,7 @@ import '@/styles/globals.css'
 
 import key from './const/key'
 import WebUIManager from './controllers/webui_manager'
+import { loadTheme } from './utils/theme'
 
 WebUIManager.checkWebUiLogined()
 
@@ -21,6 +23,8 @@ if (theme && !theme.startsWith('"')) {
   localStorage.setItem(key.theme, JSON.stringify(theme))
 }
 
+loadTheme()
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   // <React.StrictMode>
   <BrowserRouter basename="/webui/">

napcat.webui/src/pages/dashboard/about.tsx

@@ -1,12 +1,19 @@
-import { Chip } from '@heroui/chip'
+import { Card, CardBody } from '@heroui/card'
 import { Image } from '@heroui/image'
+import { Link } from '@heroui/link'
+import { Skeleton } from '@heroui/skeleton'
 import { Spinner } from '@heroui/spinner'
 import { useRequest } from 'ahooks'
-import clsx from 'clsx'
+import { useMemo } from 'react'
+import { BsTelegram, BsTencentQq } from 'react-icons/bs'
+import { IoDocument } from 'react-icons/io5'
 
 import HoverTiltedCard from '@/components/hover_titled_card'
 import NapCatRepoInfo from '@/components/napcat_repo_info'
-import { title } from '@/components/primitives'
+import RotatingText from '@/components/rotating_text'
+
+import { usePreloadImages } from '@/hooks/use-preload-images'
+import { useTheme } from '@/hooks/use-theme'
 
 import logo from '@/assets/images/logo.png'
 import WebUIManager from '@/controllers/webui_manager'
@@ -14,54 +21,177 @@ import WebUIManager from '@/controllers/webui_manager'
 function VersionInfo() {
   const { data, loading, error } = useRequest(WebUIManager.getPackageInfo)
   return (
-    <div className="flex items-center gap-2 mb-5">
-      <Chip
-        startContent={
-          <Chip color="warning" size="sm" className="-ml-0.5 select-none">
-            NapCat
-          </Chip>
-        }
-      >
+    <div className="flex items-center gap-2 text-2xl font-bold">
+      <div className="flex items-center gap-2">
+        <div className="text-primary-500 drop-shadow-md">NapCat</div>
         {error ? (
           error.message
         ) : loading ? (
           <Spinner size="sm" />
         ) : (
-          data?.version
+          <RotatingText
+            texts={['WebUI', data?.version ?? '']}
+            mainClassName="overflow-hidden flex items-center bg-primary-500 px-2 rounded-lg text-default-50 shadow-md"
+            staggerFrom={'last'}
+            initial={{ y: '100%' }}
+            animate={{ y: 0 }}
+            exit={{ y: '-120%' }}
+            staggerDuration={0.025}
+            splitLevelClassName="overflow-hidden"
+            transition={{ type: 'spring', damping: 30, stiffness: 400 }}
+            rotationInterval={2000}
+          />
         )}
-      </Chip>
+      </div>
     </div>
   )
 }
 
 export default function AboutPage() {
+  const { isDark } = useTheme()
+
+  const imageUrls = useMemo(
+    () => [
+      'https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=777721566&limit=30&image_size=auto&color_scheme=light',
+      'https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=777721566&limit=30&image_size=auto&color_scheme=dark',
+      'https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=41986369&image_size=auto&color_scheme=light',
+      'https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=41986369&image_size=auto&color_scheme=dark'
+    ],
+    []
+  )
+
+  const { loadedUrls, isLoading } = usePreloadImages(imageUrls)
+
+  const getImageUrl = useMemo(
+    () => (baseUrl: string) => {
+      const theme = isDark ? 'dark' : 'light'
+      const fullUrl = baseUrl.replace(
+        /color_scheme=(?:light|dark)/,
+        `color_scheme=${theme}`
+      )
+      return isLoading ? null : loadedUrls[fullUrl] ? fullUrl : null
+    },
+    [isDark, isLoading, loadedUrls]
+  )
+
+  const renderImage = useMemo(
+    () => (baseUrl: string, alt: string) => {
+      const imageUrl = getImageUrl(baseUrl)
+
+      if (!imageUrl) {
+        return <Skeleton className="h-16 rounded-lg" />
+      }
+
+      return (
+        <Image
+          className="flex-1 pointer-events-none select-none rounded-none"
+          src={imageUrl}
+          alt={alt}
+        />
+      )
+    },
+    [getImageUrl]
+  )
+
   return (
     <>
       <title>关于 NapCat WebUI</title>
-      <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-        <div className="max-w-full w-[1000px] px-5 flex flex-col items-center">
-          <div className="flex flex-col md:flex-row items-center mb-6">
-            <HoverTiltedCard imageSrc={logo} />
+      <section className="max-w-7xl py-8 md:py-10 px-5 mx-auto space-y-10">
+        <div className="w-full flex flex-col md:flex-row gap-4">
+          <div className="flex flex-col md:flex-row items-center">
+            <HoverTiltedCard imageSrc={logo} overlayContent="" />
           </div>
-          <VersionInfo />
-          <div className="mb-6 flex flex-col items-center gap-4">
-            <p
-              className={clsx(
-                title({
-                  color: 'cyan',
-                  shadow: true
-                }),
-                '!text-3xl'
-              )}
-            >
-              NapCat Contributors
-            </p>
-            <Image
-              className="w-[600px] max-w-full pointer-events-none select-none"
-              src="https://contrib.rocks/image?repo=bietiaop/NapCatQQ"
-              alt="Contributors"
-            />
+          <div className="flex-1 flex flex-col gap-2 py-2">
+            <VersionInfo />
+            <div className="space-y-1">
+              <p className="font-bold text-primary-400">NapCat 是什么?</p>
+              <p className="text-default-800">
+                基于TypeScript构建的Bot框架,通过相应的启动器或者框架,主动调用QQ
+                Node模块提供给客户端的接口,实现Bot的功能.
+              </p>
+              <p className="font-bold text-primary-400">魔法版介绍</p>
+              <p className="text-default-800">
+                猫猫框架通过魔法的手段获得了 QQ 的发送消息、接收消息等接口。
+                为了方便使用，猫猫框架将通过一种名为 OneBot 的约定将你的 HTTP /
+                WebSocket 请求按照规范读取，
+                再去调用猫猫框架所获得的QQ发送接口之类的接口。
+              </p>
+            </div>
           </div>
+        </div>
+        <div className="flex flex-row gap-2 flex-wrap justify-around">
+          <Card
+            as={Link}
+            shadow="sm"
+            isPressable
+            isExternal
+            href="https://qm.qq.com/q/F9cgs1N3Mc"
+          >
+            <CardBody className="flex-row items-center gap-2">
+              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+                <BsTencentQq size={16} />
+              </span>
+              <span>官方社群1</span>
+            </CardBody>
+          </Card>
+
+          <Card
+            as={Link}
+            shadow="sm"
+            isPressable
+            isExternal
+            href="https://qm.qq.com/q/hSt0u9PVn"
+          >
+            <CardBody className="flex-row items-center gap-2">
+              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+                <BsTencentQq size={16} />
+              </span>
+              <span>官方社群2</span>
+            </CardBody>
+          </Card>
+
+          <Card
+            as={Link}
+            shadow="sm"
+            isPressable
+            isExternal
+            href="https://t.me/MelodicMoonlight"
+          >
+            <CardBody className="flex-row items-center gap-2">
+              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+                <BsTelegram size={16} />
+              </span>
+              <span>Telegram</span>
+            </CardBody>
+          </Card>
+
+          <Card
+            as={Link}
+            shadow="sm"
+            isPressable
+            isExternal
+            href="https://napcat.napneko.icu/"
+          >
+            <CardBody className="flex-row items-center gap-2">
+              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+                <IoDocument size={16} />
+              </span>
+              <span>使用文档</span>
+            </CardBody>
+          </Card>
+        </div>
+        <div className="flex flex-col md:flex-row md:items-start gap-4">
+          <div className="w-full flex flex-col gap-4">
+            {renderImage(
+              'https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=777721566&limit=30&image_size=auto&color_scheme=light',
+              'Contributors'
+            )}
+            {renderImage(
+              'https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=41986369&image_size=auto&color_scheme=light',
+              'Activity Trends'
+            )}
+          </div>
+
           <NapCatRepoInfo />
         </div>
       </section>