README.md

@@ -43,7 +43,7 @@ _Modern protocol-side framework implemented based on NTQQ._
 
 **首次使用**请务必查看如下文档看使用教程
 
-> 项目非盈利，涉及 对接问题/基础问题/下层框架问题 请自行搜索解决，本项目社区不提供此类解答。
+> 项目非盈利，对接问题/基础问题/下层框架问题 请自行搜索解决，本项目社区不提供此类解答。
 
 ## Link
 

packages/napcat-common/src/helper.ts

@@ -2,7 +2,6 @@ import path from 'node:path';
 import fs from 'fs';
 import os from 'node:os';
 import { QQVersionConfigType, QQLevel } from './types';
-import { RequestUtil } from './request';
 
 export async function solveProblem<T extends (...arg: any[]) => any> (func: T, ...args: Parameters<T>): Promise<ReturnType<T> | undefined> {
   return new Promise<ReturnType<T> | undefined>((resolve) => {
@@ -212,81 +211,3 @@ export function parseAppidFromMajor (nodeMajor: string): string | undefined {
 
   return undefined;
 }
-
-const baseUrl = 'https://github.com/NapNeko/NapCatQQ.git/info/refs?service=git-upload-pack';
-const urls = [
-  'https://j.1win.ggff.net/' + baseUrl,
-  'https://git.yylx.win/' + baseUrl,
-  'https://ghfile.geekertao.top/' + baseUrl,
-  'https://gh-proxy.net/' + baseUrl,
-  'https://ghm.078465.xyz/' + baseUrl,
-  'https://gitproxy.127731.xyz/' + baseUrl,
-  'https://jiashu.1win.eu.org/' + baseUrl,
-  baseUrl,
-];
-
-async function testUrl (url: string): Promise<boolean> {
-  try {
-    await PromiseTimer(RequestUtil.HttpGetText(url), 5000);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-async function findAvailableUrl (): Promise<string | null> {
-  for (const url of urls) {
-    if (await testUrl(url)) {
-      return url;
-    }
-  }
-  return null;
-}
-
-export async function getAllTags (): Promise<string[]> {
-  const availableUrl = await findAvailableUrl();
-  if (!availableUrl) {
-    throw new Error('No available URL for fetching tags');
-  }
-  const raw = await RequestUtil.HttpGetText(availableUrl);
-  return raw
-    .split('\n')
-    .map(line => {
-      const match = line.match(/refs\/tags\/(.+)$/);
-      return match ? match[1] : null;
-    })
-    .filter(tag => tag !== null && !tag!.endsWith('^{}')) as string[];
-}
-
-
-export async function getLatestTag (): Promise<string> {
-  const tags = await getAllTags();
-
-  tags.sort((a, b) => compareVersion(a, b));
-
-  const latest = tags.at(-1);
-  if (!latest) {
-    throw new Error('No tags found');
-  }
-  // 去掉开头的 v
-  return latest.replace(/^v/, '');
-}
-
-
-function compareVersion (a: string, b: string): number {
-  const normalize = (v: string) =>
-    v.replace(/^v/, '') // 去掉开头的 v
-      .split('.')
-      .map(n => parseInt(n) || 0);
-
-  const pa = normalize(a);
-  const pb = normalize(b);
-  const len = Math.max(pa.length, pb.length);
-
-  for (let i = 0; i < len; i++) {
-    const na = pa[i] || 0;
-    const nb = pb[i] || 0;
-    if (na !== nb) return na - nb;
-  }
-  return 0;
-}

packages/napcat-core/adapters/NodeIDependsAdapter.ts

@@ -5,7 +5,7 @@ export class NodeIDependsAdapter {
 
   }
 
-  onMSFSsoError (_code: number, _desc: string) {
+  onMSFSsoError (_args: unknown) {
 
   }
 

packages/napcat-core/external/appid.json

@@ -466,37 +466,5 @@
   "6.9.85-42086": {
     "appid": 537320237,
     "qua": "V1_MAC_NQ_6.9.85_42086_GW_B"
-  },
-  "9.9.23-42430": {
-    "appid": 537320212,
-    "qua": "V1_WIN_NQ_9.9.23_42430_GW_B"
-  },
-  "9.9.25-42744": {
-    "appid": 537328470,
-    "qua": "V1_WIN_NQ_9.9.23_42744_GW_B"
-  },
-  "6.9.86-42744": {
-    "appid": 537328495,
-    "qua": "V1_MAC_NQ_6.9.85_42744_GW_B"
-  },
-  "9.9.25-42905": {
-    "appid": 537328521,
-    "qua": "V1_WIN_NQ_9.9.25_42905_GW_B"
-  },
-  "6.9.86-42905": {
-    "appid": 537328546,
-    "qua": "V1_MAC_NQ_6.9.86_42905_GW_B"
-  },
-  "3.2.22-42941": {
-    "appid": 537328659,
-    "qua": "V1_LNX_NQ_3.2.22_42941_GW_B"
-  },
-  "9.9.25-42941": {
-    "appid": 537328623,
-    "qua": "V1_WIN_NQ_9.9.25_42941_GW_B"
-  },
-  "6.9.86-42941": {
-    "appid": 537328648,
-    "qua": "V1_MAC_NQ_6.9.86_42941_GW_B"
   }
 }

packages/napcat-core/external/napi2native.json

@@ -90,41 +90,5 @@
   "3.2.21-42086-x64": {
     "send": "5B42CF0",
     "recv": "2FDA6F0"
-  },
-  "9.9.23-42430-x64": {
-    "send": "0A01A34",
-    "recv": "1D1CFF9"
-  },
-  "9.9.25-42744-x64": {
-    "send": "0A0D104",
-    "recv": "1D3E7F9"
-  },
-  "6.9.85-42744-arm64": {
-    "send": "23DFEF0",
-    "recv": "095FD80"
-  },
-  "9.9.25-42905-x64": {
-    "send": "0A12E74",
-    "recv": "1D450FD"
-  },
-  "6.9.86-42905-arm64": {
-    "send": "2342408",
-    "recv": "09639B8"
-  },
-  "3.2.22-42941-x64": {
-    "send": "5BC1630",
-    "recv": "3011E00"
-  },
-  "3.2.22-42941-arm64": {
-    "send": "3DC90AC",
-    "recv": "1497A70"
-  },
-  "9.9.25-42941-x64": {
-    "send": "0A131D4",
-    "recv": "1D4547D"
-  },
-  "6.9.86-42941-arm64": {
-    "send": "2346108",
-    "recv": "09675F0"
   }
 }

packages/napcat-core/external/packet.json

@@ -602,41 +602,5 @@
   "3.2.21-42086-arm64": {
     "send": "6B13038",
     "recv": "6B169C8"
-  },
-  "9.9.23-42430-x64": {
-    "send": "2C9A4A0",
-    "recv": "2C9DA20"
-  },
-  "9.9.25-42744-x64": {
-    "send": "2CD8E40",
-    "recv": "2CDC3C0"
-  },
-  "6.9.86-42744-arm64": {
-    "send": "3DCC840",
-    "recv": "3DCF150"
-  },
-  "9.9.25-42905-x64": {
-    "send": "2CE46A0",
-    "recv": "2CE7C20"
-  },
-  "6.9.86-42905-arm64": {
-    "send": "3DD6098",
-    "recv": "3DD89A8"
-  },
-  "3.2.22-42941-x64": {
-    "send": "A8AD8A0",
-    "recv": "A8B1320"
-  },
-  "9.9.25-42941-x64": {
-    "send": "2CE4DA0",
-    "recv": "2CE8320"
-  },
-  "3.2.22-42941-arm64": {
-    "send": "6BC95E8",
-    "recv": "6BCCF78"
-  },
-  "6.9.86-42941-arm64": {
-    "send": "3DDDAD0",
-    "recv": "3DE03E0"
   }
 }

packages/napcat-core/index.ts

@@ -126,7 +126,7 @@ export class NapCatCore {
     container.bind(TypedEventEmitter).toConstantValue(this.event);
     ReceiverServiceRegistry.forEach((ServiceClass, serviceName) => {
       container.bind(ServiceClass).toSelf();
-      //console.log(`Registering service handler for: ${serviceName}`);
+      console.log(`Registering service handler for: ${serviceName}`);
       this.context.packetHandler.onCmd(serviceName, ({ seq, hex_data }) => {
         const serviceInstance = container.get(ServiceClass);
         return serviceInstance.handler(seq, hex_data);

packages/napcat-core/listeners/NodeIKernelStorageCleanListener.ts

@@ -3,7 +3,7 @@ export class NodeIKernelStorageCleanListener {
 
   }
 
-  onScanCacheProgressChanged (_current_progress: number, _total_progress: number): any {
+  onScanCacheProgressChanged (_args: unknown): any {
 
   }
 
@@ -11,7 +11,7 @@ export class NodeIKernelStorageCleanListener {
 
   }
 
-  onFinishScan (_sizes: Array<`${number}`>): any {
+  onFinishScan (_args: unknown): any {
 
   }
 

packages/napcat-core/services/NodeIKernelStorageCleanService.ts

@@ -3,56 +3,39 @@ import { GeneralCallResult } from './common';
 
 export interface NodeIKernelStorageCleanService {
 
-  addKernelStorageCleanListener (listener: NodeIKernelStorageCleanListener): number;
+  addKernelStorageCleanListener(listener: NodeIKernelStorageCleanListener): number;
 
-  removeKernelStorageCleanListener (listenerId: number): void;
-  // [
-  // "hotUpdate",
-  // [
-  //   "C:\\Users\\nanaeo\\AppData\\Roaming\\QQ\\packages"
-  // ]
-  // ],
-  // [
-  // "tmp",
-  // [
-  //   "C:\\Users\\nanaeo\\AppData\\Roaming\\QQ\\tmp"
-  // ]
-  // ],
-  // [
-  // "SilentCacheappSessionPartation9212",
-  // [
-  //   "C:\\Users\\nanaeo\\AppData\\Roaming\\QQ\\Partitions\\qqnt_9212"
-  // ]
-  // ]
-  addCacheScanedPaths (paths: Map<`tmp` | `SilentCacheappSessionPartation9212` | `hotUpdate`, unknown>): unknown;
+  removeKernelStorageCleanListener(listenerId: number): void;
 
-  addFilesScanedPaths (arg: unknown): unknown;
+  addCacheScanedPaths(arg: unknown): unknown;
 
-  scanCache (): Promise<GeneralCallResult & {
-    size: string[];
+  addFilesScanedPaths(arg: unknown): unknown;
+
+  scanCache(): Promise<GeneralCallResult & {
+    size: string[]
   }>;
 
-  addReportData (arg: unknown): unknown;
+  addReportData(arg: unknown): unknown;
 
-  reportData (): unknown;
+  reportData(): unknown;
 
-  getChatCacheInfo (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown): unknown;
+  getChatCacheInfo(arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown): unknown;
 
-  getFileCacheInfo (arg1: unknown, arg2: unknown, arg3: unknown, arg44: unknown, args5: unknown): unknown;
+  getFileCacheInfo(arg1: unknown, arg2: unknown, arg3: unknown, arg44: unknown, args5: unknown): unknown;
 
-  clearChatCacheInfo (arg1: unknown, arg2: unknown): unknown;
+  clearChatCacheInfo(arg1: unknown, arg2: unknown): unknown;
 
-  clearCacheDataByKeys (keys: Array<string>): Promise<GeneralCallResult>;
+  clearCacheDataByKeys(arg: unknown): unknown;
 
-  setSilentScan (is_silent: boolean): unknown;
+  setSilentScan(arg: unknown): unknown;
 
-  closeCleanWindow (): unknown;
+  closeCleanWindow(): unknown;
 
-  clearAllChatCacheInfo (): unknown;
+  clearAllChatCacheInfo(): unknown;
 
-  endScan (arg: unknown): unknown;
+  endScan(arg: unknown): unknown;
 
-  addNewDownloadOrUploadFile (arg: unknown): unknown;
+  addNewDownloadOrUploadFile(arg: unknown): unknown;
 
-  isNull (): boolean;
+  isNull(): boolean;
 }

packages/napcat-framework/napcat.ts

@@ -8,8 +8,6 @@ import { QQBasicInfoWrapper } from '@/napcat-core/helper/qq-basic-info';
 import { InstanceContext, loadQQWrapper, NapCatCore, NapCatCoreWorkingEnv, NodeIKernelLoginListener, NodeIKernelLoginService, NodeIQQNTWrapperSession, SelfInfo, WrapperNodeApi } from '@/napcat-core';
 import { proxiedListenerOf } from '@/napcat-core/helper/proxy-handler';
 import { statusHelperSubscription } from '@/napcat-core/helper/status';
-import { applyPendingUpdates } from '@/napcat-webui-backend/src/api/UpdateNapCat';
-import { WebUiDataRuntime } from '@/napcat-webui-backend/src/helper/Data';
 
 // Framework ES入口文件
 export async function getWebUiUrl () {
@@ -34,7 +32,6 @@ export async function NCoreInitFramework (
   });
 
   const pathWrapper = new NapCatPathWrapper();
-  await applyPendingUpdates(pathWrapper);
   const logger = new LogWrapper(pathWrapper.logsPath);
   const basicInfoWrapper = new QQBasicInfoWrapper({ logger });
   const wrapper = loadQQWrapper(basicInfoWrapper.getFullQQVersion());
@@ -76,13 +73,9 @@ export async function NCoreInitFramework (
   await loaderObject.core.initCore();
 
   // 启动WebUi
-  WebUiDataRuntime.setWorkingEnv(NapCatCoreWorkingEnv.Framework);
   InitWebUi(logger, pathWrapper, logSubscription, statusHelperSubscription).then().catch(e => logger.logError(e));
   // 初始化LLNC的Onebot实现
-  const oneBotAdapter = new NapCatOneBot11Adapter(loaderObject.core, loaderObject.context, pathWrapper);
-  // 注册到 WebUiDataRuntime，供调试功能使用
-  WebUiDataRuntime.setOneBotContext(oneBotAdapter);
-  await oneBotAdapter.InitOneBot();
+  await new NapCatOneBot11Adapter(loaderObject.core, loaderObject.context, pathWrapper).InitOneBot();
 }
 
 export class NapCatFramework {

packages/napcat-onebot/action/extends/ShareContact.ts

@@ -6,23 +6,23 @@ import { Static, Type } from '@sinclair/typebox';
 const SchemaData = Type.Object({
   user_id: Type.Optional(Type.Union([Type.Number(), Type.String()])),
   group_id: Type.Optional(Type.Union([Type.Number(), Type.String()])),
-  phone_number: Type.String({ default: '' }),
+  phoneNumber: Type.String({ default: '' }),
 });
 
 type Payload = Static<typeof SchemaData>;
 
-export class SharePeerBase extends OneBotAction<Payload, GeneralCallResult & {
+export class SharePeer extends OneBotAction<Payload, GeneralCallResult & {
   arkMsg?: string;
   arkJson?: string;
 }> {
-
+  override actionName = ActionName.SharePeer;
   override payloadSchema = SchemaData;
 
   async _handle (payload: Payload) {
     if (payload.group_id) {
       return await this.core.apis.GroupApi.getGroupRecommendContactArkJson(payload.group_id.toString());
     } else if (payload.user_id) {
-      return await this.core.apis.UserApi.getBuddyRecommendContactArkJson(payload.user_id.toString(), payload.phone_number);
+      return await this.core.apis.UserApi.getBuddyRecommendContactArkJson(payload.user_id.toString(), payload.phoneNumber);
     }
     throw new Error('group_id or user_id is required');
   }
@@ -31,25 +31,14 @@ export class SharePeerBase extends OneBotAction<Payload, GeneralCallResult & {
 const SchemaDataGroupEx = Type.Object({
   group_id: Type.Union([Type.Number(), Type.String()]),
 });
-export class SharePeer extends SharePeerBase {
-  override actionName = ActionName.SharePeer;
-}
+
 type PayloadGroupEx = Static<typeof SchemaDataGroupEx>;
 
-export class ShareGroupExBase extends OneBotAction<PayloadGroupEx, string> {
+export class ShareGroupEx extends OneBotAction<PayloadGroupEx, string> {
+  override actionName = ActionName.ShareGroupEx;
   override payloadSchema = SchemaDataGroupEx;
 
   async _handle (payload: PayloadGroupEx) {
     return await this.core.apis.GroupApi.getArkJsonGroupShare(payload.group_id.toString());
   }
 }
-export class ShareGroupEx extends ShareGroupExBase {
-  override actionName = ActionName.ShareGroupEx;
-}
-export class SendGroupArkShare extends ShareGroupExBase {
-  override actionName = ActionName.SendGroupArkShare;
-}
-
-export class SendArkShare extends SharePeerBase {
-  override actionName = ActionName.SendArkShare;
-}

packages/napcat-onebot/action/go-cqhttp/GetFriendMsgHistory.ts

@@ -14,11 +14,10 @@ const SchemaData = Type.Object({
   user_id: Type.String(),
   message_seq: Type.Optional(Type.String()),
   count: Type.Number({ default: 20 }),
-  reverse_order: Type.Boolean({ default: false }),
+  reverseOrder: Type.Boolean({ default: false }),
   disable_get_url: Type.Boolean({ default: false }),
   parse_mult_msg: Type.Boolean({ default: true }),
   quick_reply: Type.Boolean({ default: false }),
-  reverseOrder: Type.Boolean({ default: false }),// @deprecated 兼容旧版本
 });
 
 type Payload = Static<typeof SchemaData>;
@@ -36,7 +35,7 @@ export default class GetFriendMsgHistory extends OneBotAction<Payload, Response>
     const hasMessageSeq = !payload.message_seq ? !!payload.message_seq : !(payload.message_seq?.toString() === '' || payload.message_seq?.toString() === '0');
     const startMsgId = hasMessageSeq ? (MessageUnique.getMsgIdAndPeerByShortId(+payload.message_seq!)?.MsgId ?? payload.message_seq!.toString()) : '0';
     const msgList = hasMessageSeq
-      ? (await this.core.apis.MsgApi.getMsgHistory(peer, startMsgId, +payload.count, payload.reverse_order || payload.reverseOrder)).msgList
+      ? (await this.core.apis.MsgApi.getMsgHistory(peer, startMsgId, +payload.count, payload.reverseOrder)).msgList
       : (await this.core.apis.MsgApi.getAioFirstViewLatestMsgs(peer, +payload.count)).msgList;
     if (msgList.length === 0) throw new Error(`消息${payload.message_seq}不存在`);
     // 转换序号

packages/napcat-onebot/action/go-cqhttp/GetGroupMsgHistory.ts

@@ -14,11 +14,10 @@ const SchemaData = Type.Object({
   group_id: Type.String(),
   message_seq: Type.Optional(Type.String()),
   count: Type.Number({ default: 20 }),
-  reverse_order: Type.Boolean({ default: false }),
+  reverseOrder: Type.Boolean({ default: false }),
   disable_get_url: Type.Boolean({ default: false }),
   parse_mult_msg: Type.Boolean({ default: true }),
   quick_reply: Type.Boolean({ default: false }),
-  reverseOrder: Type.Boolean({ default: false }),// @deprecated 兼容旧版本
 });
 
 type Payload = Static<typeof SchemaData>;
@@ -33,7 +32,7 @@ export default class GoCQHTTPGetGroupMsgHistory extends OneBotAction<Payload, Re
     // 拉取消息
     const startMsgId = hasMessageSeq ? (MessageUnique.getMsgIdAndPeerByShortId(+payload.message_seq!)?.MsgId ?? payload.message_seq!.toString()) : '0';
     const msgList = hasMessageSeq
-      ? (await this.core.apis.MsgApi.getMsgHistory(peer, startMsgId, +payload.count, payload.reverse_order || payload.reverseOrder)).msgList
+      ? (await this.core.apis.MsgApi.getMsgHistory(peer, startMsgId, +payload.count, payload.reverseOrder)).msgList
       : (await this.core.apis.MsgApi.getAioFirstViewLatestMsgs(peer, +payload.count)).msgList;
     if (msgList.length === 0) throw new Error(`消息${payload.message_seq}不存在`);
     // 转换序号

packages/napcat-onebot/action/index.ts

@@ -54,7 +54,7 @@ import { GetOnlineClient } from './go-cqhttp/GetOnlineClient';
 import { IOCRImage, OCRImage } from './extends/OCRImage';
 import { TranslateEnWordToZn } from './extends/TranslateEnWordToZn';
 import { SetQQProfile } from './go-cqhttp/SetQQProfile';
-import { SendArkShare, SendGroupArkShare, ShareGroupEx, SharePeer } from './extends/ShareContact';
+import { ShareGroupEx, SharePeer } from './extends/ShareContact';
 import { CreateCollection } from './extends/CreateCollection';
 import { SetLongNick } from './extends/SetLongNick';
 import DelEssenceMsg from './group/DelEssenceMsg';
@@ -170,8 +170,6 @@ export function createActionMap (obContext: NapCatOneBot11Adapter, core: NapCatC
     new SetQQProfile(obContext, core),
     new ShareGroupEx(obContext, core),
     new SharePeer(obContext, core),
-    new SendGroupArkShare(obContext, core),
-    new SendArkShare(obContext, core),
     new CreateCollection(obContext, core),
     new SetLongNick(obContext, core),
     new ForwardFriendSingleMsg(obContext, core),

packages/napcat-onebot/action/router.ts

@@ -125,11 +125,8 @@ export const ActionName = {
   // 以下为扩展napcat扩展
   Unknown: 'unknown',
   SetDiyOnlineStatus: 'set_diy_online_status',
-  SharePeer: 'ArkSharePeer',// @deprecated
-  ShareGroupEx: 'ArkShareGroup',// @deprecated
-  // 标准化接口
-  SendGroupArkShare: 'send_group_ark_share',
-  SendArkShare: 'send_ark_share',
+  SharePeer: 'ArkSharePeer',
+  ShareGroupEx: 'ArkShareGroup',
   // RebootNormal : 'reboot_normal', //无快速登录重新启动
   GetRobotUinRange: 'get_robot_uin_range',
   SetOnlineStatus: 'set_online_status',

packages/napcat-onebot/api/group.ts

@@ -174,6 +174,7 @@ export class OneBotGroupApi {
 
   async registerParseGroupReactEventByCore () {
     this.core.event.on('event:emoji_like', async (data) => {
+      console.log('Received emoji_like event from core:', data);
       const event = await this.createGroupEmojiLikeEvent(
         data.groupId,
         data.senderUin,

packages/napcat-pty/unixTerminal.ts

@@ -12,17 +12,7 @@ import { ArgvOrCommandLine } from '@homebridge/node-pty-prebuilt-multiarch/src/t
 import { assign } from '@homebridge/node-pty-prebuilt-multiarch/src/utils';
 import { pty_loader } from './prebuild-loader';
 import { fileURLToPath } from 'url';
-
-// 懒加载pty，避免在模块导入时立即执行pty_loader()
-let _pty: any;
-export const pty: any = new Proxy({}, {
-  get (_target, prop) {
-    if (!_pty) {
-      _pty = pty_loader();
-    }
-    return _pty[prop];
-  }
-});
+export const pty = pty_loader();
 
 let helperPath: string;
 helperPath = '../build/Release/spawn-helper';

packages/napcat-shell/base.ts

@@ -35,7 +35,6 @@ import { logSubscription, LogWrapper } from '@/napcat-core/helper/log';
 import { proxiedListenerOf } from '@/napcat-core/helper/proxy-handler';
 import { QQBasicInfoWrapper } from '@/napcat-core/helper/qq-basic-info';
 import { statusHelperSubscription } from '@/napcat-core/helper/status';
-import { applyPendingUpdates } from '@/napcat-webui-backend/src/api/UpdateNapCat';
 // NapCat Shell App ES 入口文件
 async function handleUncaughtExceptions (logger: LogWrapper) {
   process.on('uncaughtException', (err) => {
@@ -319,7 +318,6 @@ export async function NCoreInitShell () {
   const pathWrapper = new NapCatPathWrapper();
   const logger = new LogWrapper(pathWrapper.logsPath);
   handleUncaughtExceptions(logger);
-  await applyPendingUpdates(pathWrapper);
 
   // 初始化 FFmpeg 服务
   await FFmpegService.init(pathWrapper.binaryPath, logger);
@@ -340,8 +338,8 @@ export async function NCoreInitShell () {
   o3Service.addO3MiscListener(new NodeIO3MiscListener());
 
   logger.log('[NapCat] [Core] NapCat.Core Version: ' + napCatVersion);
-  WebUiDataRuntime.setWorkingEnv(NapCatCoreWorkingEnv.Shell);
   InitWebUi(logger, pathWrapper, logSubscription, statusHelperSubscription).then().catch(e => logger.logError(e));
+
   const engine = wrapper.NodeIQQNTWrapperEngine.get();
   const loginService = wrapper.NodeIKernelLoginService.get();
   let session: NodeIQQNTWrapperSession;
@@ -455,11 +453,7 @@ export class NapCatShell {
 
   async InitNapCat () {
     await this.core.initCore();
-    const oneBotAdapter = new NapCatOneBot11Adapter(this.core, this.context, this.context.pathWrapper);
-    // 注册到 WebUiDataRuntime，供调试功能使用
-    WebUiDataRuntime.setOneBotContext(oneBotAdapter);
-    oneBotAdapter.InitOneBot()
+    new NapCatOneBot11Adapter(this.core, this.context, this.context.pathWrapper).InitOneBot()
       .catch(e => this.context.logger.logError('初始化OneBot失败', e));
   }
 }
-

packages/napcat-shell/vite.config.ts

@@ -27,7 +27,6 @@ const ShellBaseConfigPlugin: PluginOption[] = [
     targets: [
       { src: '../napcat-native/', dest: 'dist/native', flatten: false },
       { src: '../napcat-webui-frontend/dist/', dest: 'dist/static/', flatten: false },
-      { src: '../napcat-webui-backend/src/assets/sw_template.js', dest: 'dist/static/' },
       { src: '../napcat-core/external/napcat.json', dest: 'dist/config/' },
       { src: '../../package.json', dest: 'dist' },
       { src: '../napcat-shell-loader', dest: 'dist' },

packages/napcat-vite/vite-plugin-version.js

@@ -26,7 +26,7 @@ export default function vitePluginNapcatVersion () {
         const data = JSON.parse(fs.readFileSync(cacheFile, 'utf8'));
         if (data?.tag) return data.tag;
       }
-    } catch { }
+    } catch {}
     return null;
   }
 
@@ -36,7 +36,7 @@ export default function vitePluginNapcatVersion () {
         cacheFile,
         JSON.stringify({ tag, time: new Date().toISOString() }, null, 2)
       );
-    } catch { }
+    } catch {}
   }
 
   async function fetchLatestTag () {
@@ -58,7 +58,7 @@ export default function vitePluginNapcatVersion () {
             try {
               const json = JSON.parse(data);
               if (Array.isArray(json) && json[0]?.name) {
-                resolve(json[0].name.replace(/^v/, ''));
+                resolve(json[0].name);
               } else reject(new Error('Invalid GitHub tag response'));
             } catch (e) {
               reject(e);
@@ -79,7 +79,7 @@ export default function vitePluginNapcatVersion () {
       return tag;
     } catch (e) {
       console.warn('[vite-plugin-napcat-version] Failed to fetch tag:', e.message);
-      return cached ?? '0.0.0';
+      return cached ?? 'v0.0.0';
     }
   }
 
@@ -110,7 +110,7 @@ export default function vitePluginNapcatVersion () {
             lastTag = tag;
             ctx.server?.ws.send({ type: 'full-reload' });
           }
-        } catch { }
+        } catch {}
       }
     },
   };

packages/napcat-webui-backend/index.ts

@@ -22,14 +22,6 @@ import { existsSync, readFileSync } from 'node:fs'; // 引入multer用于错误
 import { ILogWrapper } from 'napcat-common/src/log-interface';
 import { ISubscription } from 'napcat-common/src/subscription-interface';
 import { IStatusHelperSubscription } from '@/napcat-common/src/status-interface';
-import { handleDebugWebSocket } from '@/napcat-webui-backend/src/api/Debug';
-import compression from 'compression';
-import { napCatVersion } from 'napcat-common/src/version';
-import { fileURLToPath } from 'node:url';
-import { dirname, resolve } from 'node:path';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
 // 实例化Express
 const app = express();
 /**
@@ -103,13 +95,7 @@ export async function InitWebUi (logger: ILogWrapper, pathWrapper: NapCatPathWra
   WebUiConfig = new WebUiConfigWrapper();
   let config = await WebUiConfig.GetWebUIConfig();
 
-  // 检查是否禁用WebUI（若禁用则不进行密码检测）
-  if (config.disableWebUI) {
-    logger.log('[NapCat] [WebUi] WebUI is disabled by configuration.');
-    return;
-  }
-
-  // 检查并更新默认密码（仅在启用WebUI时）
+  // 检查并更新默认密码 - 最高优先级
   if (config.token === 'napcat' || !config.token) {
     const randomToken = process.env['NAPCAT_WEBUI_SECRET_KEY'] || getRandomToken(8);
     await WebUiConfig.UpdateWebUIConfig({ token: randomToken });
@@ -126,6 +112,12 @@ export async function InitWebUi (logger: ILogWrapper, pathWrapper: NapCatPathWra
   // 存储启动时的初始token用于鉴权
   setInitialWebUiToken(config.token);
 
+  // 检查是否禁用WebUI
+  if (config.disableWebUI) {
+    logger.log('[NapCat] [WebUi] WebUI is disabled by configuration.');
+    return;
+  }
+
   const [host, port, token] = await InitPort(config);
   webUiRuntimePort = port;
   if (port === 0) {
@@ -150,31 +142,18 @@ export async function InitWebUi (logger: ILogWrapper, pathWrapper: NapCatPathWra
   // ------------注册中间件------------
   // 使用express的json中间件
   app.use(express.json());
-  // 启用gzip压缩（对所有响应启用，阈值1KB）
-  app.use(compression({
-    level: 6, // 压缩级别 1-9，6 是性能和压缩率的平衡点
-    threshold: 1024, // 只压缩大于 1KB 的响应
-    filter: (req, res) => {
-      // 不压缩 SSE 和 WebSocket 升级请求
-      if (req.headers['accept'] === 'text/event-stream') {
-        return false;
-      }
-      // 使用默认过滤器
-      return compression.filter(req, res);
-    },
-  }));
 
   // CORS中间件
   // TODO:
   app.use(cors);
 
-  // 自定义字体文件路由 - 返回用户上传的字体文件
-  app.use('/webui/fonts/CustomFont.woff', async (_req, res) => {
-    const fontPath = await WebUiConfig.GetWebUIFontPath();
-    if (fontPath) {
-      res.sendFile(fontPath);
+  // 如果是webui字体文件，挂载字体文件
+  app.use('/webui/fonts/AaCute.woff', async (_req, res, next) => {
+    const isFontExist = await WebUiConfig.CheckWebUIFontExist();
+    if (isFontExist) {
+      res.sendFile(WebUiConfig.GetWebUIFontPath());
     } else {
-      res.status(404).send('Custom font not found');
+      next();
     }
   });
 
@@ -196,32 +175,6 @@ export async function InitWebUi (logger: ILogWrapper, pathWrapper: NapCatPathWra
     res.send(css);
   });
 
-  // 动态生成 sw.js
-  app.get('/webui/sw.js', async (_req, res) => {
-    try {
-      // 读取模板文件
-      let templatePath = resolve(__dirname, 'static', 'sw_template.js');
-      if (!existsSync(templatePath)) {
-        templatePath = resolve(__dirname, 'src', 'assets', 'sw_template.js');
-      }
-
-      let swContent = readFileSync(templatePath, 'utf-8');
-
-      // 替换版本号
-      // 使用 napCatVersion，如果为 alpha 则尝试加上时间戳或其他标识以避免缓存冲突，或者直接使用
-      // 用户要求控制 sw.js 版本，napCatVersion 是核心控制点
-      swContent = swContent.replace('{{VERSION}}', napCatVersion);
-
-      res.header('Content-Type', 'application/javascript');
-      res.header('Service-Worker-Allowed', '/webui/');
-      res.header('Cache-Control', 'no-cache, no-store, must-revalidate');
-      res.send(swContent);
-    } catch (error) {
-      console.error('[NapCat] [WebUi] Error generating sw.js', error);
-      res.status(500).send('Error generating service worker');
-    }
-  });
-
   // ------------中间件结束------------
 
   // ------------挂载路由------------
@@ -234,15 +187,7 @@ export async function InitWebUi (logger: ILogWrapper, pathWrapper: NapCatPathWra
   const isHttps = !!sslCerts;
   const server = isHttps && sslCerts ? createHttpsServer(sslCerts, app) : createServer(app);
   server.on('upgrade', (request, socket, head) => {
-    const url = new URL(request.url || '', `http://${request.headers.host}`);
-
-    // 检查是否是调试 WebSocket 连接
-    if (url.pathname.startsWith('/api/Debug/ws')) {
-      handleDebugWebSocket(request, socket, head);
-    } else {
-      // 默认为终端 WebSocket
-      terminalManager.initialize(request, socket, head, logger);
-    }
+    terminalManager.initialize(request, socket, head, logger);
   });
   // 挂载API接口
   app.use('/api', ALLRouter);

packages/napcat-webui-backend/package.json

@@ -16,11 +16,9 @@
     }
   },
   "dependencies": {
-    "@simplewebauthn/server": "^13.2.2",
     "@sinclair/typebox": "^0.34.38",
     "ajv": "^8.13.0",
     "compressing": "^1.10.3",
-    "compression": "^1.8.1",
     "express": "^5.0.0",
     "express-rate-limit": "^7.5.0",
     "json5": "^2.2.3",
@@ -30,7 +28,6 @@
     "ws": "^8.18.3"
   },
   "devDependencies": {
-    "@types/compression": "^1.8.1",
     "@types/express": "^5.0.0",
     "@types/multer": "^1.4.12",
     "@types/node": "^22.0.1",

packages/napcat-webui-backend/src/api/Auth.ts

@@ -1,6 +1,5 @@
 import { RequestHandler } from 'express';
 import { AuthHelper } from '@/napcat-webui-backend/src/helper/SignToken';
-import { PasskeyHelper } from '@/napcat-webui-backend/src/helper/PasskeyHelper';
 import { WebUiDataRuntime } from '@/napcat-webui-backend/src/helper/Data';
 import { sendSuccess, sendError } from '@/napcat-webui-backend/src/utils/response';
 import { isEmpty } from '@/napcat-webui-backend/src/utils/check';
@@ -149,115 +148,3 @@ export const UpdateTokenHandler: RequestHandler = async (req, res) => {
     return sendError(res, `Failed to update token: ${e.message}`);
   }
 };
-
-// 生成Passkey注册选项
-export const GeneratePasskeyRegistrationOptionsHandler: RequestHandler = async (_req, res) => {
-  try {
-    // 使用固定用户ID，因为WebUI只有一个用户
-    const userId = 'napcat-user';
-    const userName = 'NapCat User';
-
-    // 从请求头获取host来确定RP_ID
-    const host = _req.get('host') || 'localhost';
-    const hostname = host.split(':')[0] || 'localhost'; // 移除端口
-    // 对于本地开发，使用localhost而不是IP地址
-    const rpId = (hostname === '127.0.0.1' || hostname === 'localhost') ? 'localhost' : hostname;
-
-    const options = await PasskeyHelper.generateRegistrationOptions(userId, userName, rpId);
-    return sendSuccess(res, options);
-  } catch (error) {
-    return sendError(res, `Failed to generate registration options: ${(error as Error).message}`);
-  }
-};
-
-// 验证Passkey注册
-export const VerifyPasskeyRegistrationHandler: RequestHandler = async (req, res) => {
-  try {
-    const { response } = req.body;
-    if (!response) {
-      return sendError(res, 'Response is required');
-    }
-
-    const origin = req.get('origin') || req.protocol + '://' + req.get('host');
-    const host = req.get('host') || 'localhost';
-    const hostname = host.split(':')[0] || 'localhost'; // 移除端口
-    // 对于本地开发，使用localhost而不是IP地址
-    const rpId = (hostname === '127.0.0.1' || hostname === 'localhost') ? 'localhost' : hostname;
-    const userId = 'napcat-user';
-    const verification = await PasskeyHelper.verifyRegistration(userId, response, origin, rpId);
-
-    if (verification.verified) {
-      return sendSuccess(res, { verified: true });
-    } else {
-      return sendError(res, 'Registration failed');
-    }
-  } catch (error) {
-    return sendError(res, `Registration verification failed: ${(error as Error).message}`);
-  }
-};
-
-// 生成Passkey认证选项
-export const GeneratePasskeyAuthenticationOptionsHandler: RequestHandler = async (_req, res) => {
-  try {
-    const userId = 'napcat-user';
-
-    if (!(await PasskeyHelper.hasPasskeys(userId))) {
-      return sendError(res, 'No passkeys registered');
-    }
-
-    // 从请求头获取host来确定RP_ID
-    const host = _req.get('host') || 'localhost';
-    const hostname = host.split(':')[0] || 'localhost'; // 移除端口
-    // 对于本地开发，使用localhost而不是IP地址
-    const rpId = (hostname === '127.0.0.1' || hostname === 'localhost') ? 'localhost' : hostname;
-
-    const options = await PasskeyHelper.generateAuthenticationOptions(userId, rpId);
-    return sendSuccess(res, options);
-  } catch (error) {
-    return sendError(res, `Failed to generate authentication options: ${(error as Error).message}`);
-  }
-};
-
-// 验证Passkey认证
-export const VerifyPasskeyAuthenticationHandler: RequestHandler = async (req, res) => {
-  try {
-    const { response } = req.body;
-    if (!response) {
-      return sendError(res, 'Response is required');
-    }
-
-    // 获取WebUI配置用于限速检查
-    const WebUiConfigData = await WebUiConfig.GetWebUIConfig();
-    // 获取客户端IP
-    const clientIP = req.ip || req.socket.remoteAddress || '';
-
-    // 检查登录频率
-    if (!WebUiDataRuntime.checkLoginRate(clientIP, WebUiConfigData.loginRate)) {
-      return sendError(res, 'login rate limit');
-    }
-
-    const origin = req.get('origin') || req.protocol + '://' + req.get('host');
-    const host = req.get('host') || 'localhost';
-    const hostname = host.split(':')[0] || 'localhost'; // 移除端口
-    // 对于本地开发，使用localhost而不是IP地址
-    const rpId = (hostname === '127.0.0.1' || hostname === 'localhost') ? 'localhost' : hostname;
-    const userId = 'napcat-user';
-    const verification = await PasskeyHelper.verifyAuthentication(userId, response, origin, rpId);
-
-    if (verification.verified) {
-      // 使用与普通登录相同的凭证签发
-      const initialToken = getInitialWebUiToken();
-      if (!initialToken) {
-        return sendError(res, 'Server token not initialized');
-      }
-      const signCredential = Buffer.from(JSON.stringify(AuthHelper.signCredential(AuthHelper.generatePasswordHash(initialToken)))).toString('base64');
-      return sendSuccess(res, {
-        Credential: signCredential,
-      });
-    } else {
-      return sendError(res, 'Authentication failed');
-    }
-  } catch (error) {
-    return sendError(res, `Authentication verification failed: ${(error as Error).message}`);
-  }
-};

packages/napcat-webui-backend/src/api/BaseInfo.ts

@@ -3,22 +3,12 @@ import { WebUiDataRuntime } from '@/napcat-webui-backend/src/helper/Data';
 
 import { sendSuccess } from '@/napcat-webui-backend/src/utils/response';
 import { WebUiConfig } from '@/napcat-webui-backend/index';
-import { getLatestTag } from 'napcat-common/src/helper';
 
 export const GetNapCatVersion: RequestHandler = (_, res) => {
   const data = WebUiDataRuntime.GetNapCatVersion();
   sendSuccess(res, { version: data });
 };
 
-export const getLatestTagHandler: RequestHandler = async (_, res) => {
-  try {
-    const latestTag = await getLatestTag();
-    sendSuccess(res, latestTag);
-  } catch (error) {
-    res.status(500).json({ error: 'Failed to fetch latest tag' });
-  }
-};
-
 export const QQVersionHandler: RequestHandler = (_, res) => {
   const data = WebUiDataRuntime.getQQVersion();
   sendSuccess(res, data);

packages/napcat-webui-backend/src/api/Debug.ts

@@ -1,406 +0,0 @@
-import { Router, Request, Response } from 'express';
-import { WebSocket, WebSocketServer } from 'ws';
-import { sendError, sendSuccess } from '@/napcat-webui-backend/src/utils/response';
-import { WebUiDataRuntime } from '@/napcat-webui-backend/src/helper/Data';
-import { IncomingMessage } from 'http';
-import { OB11Response } from '@/napcat-onebot/action/OneBotAction';
-import { ActionName } from '@/napcat-onebot/action/router';
-import { OB11LifeCycleEvent, LifeCycleSubType } from '@/napcat-onebot/event/meta/OB11LifeCycleEvent';
-
-const router = Router();
-const DEFAULT_ADAPTER_NAME = 'debug-primary';
-
-/**
- * 统一的调试适配器
- * 用于注入到 OneBot NetworkManager，接收所有事件并转发给 WebSocket 客户端
- */
-class DebugAdapter {
-  name: string;
-  isEnable: boolean = true;
-  // 安全令牌
-  readonly token: string;
-
-  // 添加 config 属性，模拟 PluginConfig 结构
-  config: {
-    enable: boolean;
-    name: string;
-    messagePostFormat?: string;
-    reportSelfMessage?: boolean;
-    debug?: boolean;
-    token?: string;
-    heartInterval?: number;
-  };
-  wsClients: Set<WebSocket> = new Set();
-  lastActivityTime: number = Date.now();
-  inactivityTimer: NodeJS.Timeout | null = null;
-  readonly INACTIVITY_TIMEOUT = 5 * 60 * 1000; // 5分钟不活跃
-
-  constructor (sessionId: string) {
-    this.name = `debug-${sessionId}`;
-    // 生成简单的随机 token
-    this.token = Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2);
-
-    this.config = {
-      enable: true,
-      name: this.name,
-      messagePostFormat: 'array',
-      reportSelfMessage: true,
-      debug: true,
-      token: this.token,
-      heartInterval: 30000
-    };
-    this.startInactivityCheck();
-  }
-
-  // 实现 IOB11NetworkAdapter 接口所需的抽象方法
-  async open (): Promise<void> { }
-  async close (): Promise<void> { this.cleanup(); }
-  async reload (_config: any): Promise<any> { return 0; }
-
-  /**
-   * OneBot 事件回调 - 转发给所有 WebSocket 客户端 (原始流)
-   */
-  async onEvent (event: any) {
-    this.updateActivity();
-
-    const payload = JSON.stringify(event);
-
-    if (this.wsClients.size === 0) {
-      return;
-    }
-
-    this.wsClients.forEach((client) => {
-      if (client.readyState === WebSocket.OPEN) {
-        try {
-          client.send(payload);
-        } catch (error) {
-          console.error('[Debug] 发送事件到 WebSocket 失败:', error);
-        }
-      }
-    });
-  }
-
-  /**
-   * 调用 OneBot API (HTTP 接口使用)
-   */
-  async callApi (actionName: string, params: any): Promise<any> {
-    this.updateActivity();
-
-    const oneBotContext = WebUiDataRuntime.getOneBotContext();
-    if (!oneBotContext) {
-      throw new Error('OneBot 未初始化');
-    }
-
-    const action = oneBotContext.actions.get(actionName);
-    if (!action) {
-      throw new Error(`不支持的 API: ${actionName}`);
-    }
-
-    return await action.handle(params, this.name, {
-      name: this.name,
-      enable: true,
-      messagePostFormat: 'array',
-      reportSelfMessage: true,
-      debug: true,
-    });
-  }
-
-  /**
-   * 处理 WebSocket 消息 (OneBot 标准)
-   */
-  async handleWsMessage (ws: WebSocket, message: string | Buffer) {
-    this.updateActivity();
-    let receiveData: { action: typeof ActionName[keyof typeof ActionName], params?: any, echo?: any; } = { action: ActionName.Unknown, params: {} };
-    let echo;
-
-    try {
-      receiveData = JSON.parse(message.toString());
-      echo = receiveData.echo;
-    } catch {
-      this.sendWsResponse(ws, OB11Response.error('json解析失败,请检查数据格式', 1400, echo));
-      return;
-    }
-
-    receiveData.params = (receiveData?.params) ? receiveData.params : {};
-
-    // 兼容 WebUI 之前可能的一些非标准格式 (如果用户是旧前端)
-    // 但既然用户说要"原始流"，我们优先支持标准格式
-
-    const oneBotContext = WebUiDataRuntime.getOneBotContext();
-    if (!oneBotContext) {
-      this.sendWsResponse(ws, OB11Response.error('OneBot 未初始化', 1404, echo));
-      return;
-    }
-
-    const action = oneBotContext.actions.get(receiveData.action as any);
-    if (!action) {
-      this.sendWsResponse(ws, OB11Response.error('不支持的API ' + receiveData.action, 1404, echo));
-      return;
-    }
-
-    try {
-      const retdata = await action.websocketHandle(receiveData.params, echo ?? '', this.name, this.config, {
-        send: async (data: object) => {
-          this.sendWsResponse(ws, OB11Response.ok(data, echo ?? '', true));
-        },
-      });
-      this.sendWsResponse(ws, retdata);
-    } catch (e: any) {
-      this.sendWsResponse(ws, OB11Response.error(e.message || '内部错误', 1200, echo));
-    }
-  }
-
-  sendWsResponse (ws: WebSocket, data: any) {
-    if (ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify(data));
-    }
-  }
-
-  /**
-   * 添加 WebSocket 客户端
-   */
-  addWsClient (ws: WebSocket) {
-    this.wsClients.add(ws);
-    this.updateActivity();
-
-    // 发送生命周期事件 (Connect)
-    const oneBotContext = WebUiDataRuntime.getOneBotContext();
-    if (oneBotContext && oneBotContext.core) {
-      try {
-        const event = new OB11LifeCycleEvent(oneBotContext.core, LifeCycleSubType.CONNECT);
-        ws.send(JSON.stringify(event));
-      } catch (e) {
-        console.error('[Debug] 发送生命周期事件失败', e);
-      }
-    }
-  }
-
-  /**
-   * 移除 WebSocket 客户端
-   */
-  removeWsClient (ws: WebSocket) {
-    this.wsClients.delete(ws);
-  }
-
-  updateActivity () {
-    this.lastActivityTime = Date.now();
-  }
-
-  startInactivityCheck () {
-    this.inactivityTimer = setInterval(() => {
-      const inactive = Date.now() - this.lastActivityTime;
-      // 如果没有 WebSocket 连接且超时，则自动清理
-      if (inactive > this.INACTIVITY_TIMEOUT && this.wsClients.size === 0) {
-        console.log(`[Debug] Adapter ${this.name} 不活跃，自动关闭`);
-        this.cleanup();
-      }
-    }, 30000);
-  }
-
-  cleanup () {
-    if (this.inactivityTimer) {
-      clearInterval(this.inactivityTimer);
-      this.inactivityTimer = null;
-    }
-
-    // 关闭所有 WebSocket 连接
-    this.wsClients.forEach((client) => {
-      try {
-        client.close();
-      } catch (error) {
-        // ignore
-      }
-    });
-    this.wsClients.clear();
-
-    // 从 OneBot NetworkManager 移除
-    const oneBotContext = WebUiDataRuntime.getOneBotContext();
-    if (oneBotContext) {
-      oneBotContext.networkManager.adapters.delete(this.name);
-    }
-
-    // 从管理器中移除
-    debugAdapterManager.removeAdapter(this.name);
-  }
-
-  /**
-   * 验证 Token
-   */
-  validateToken (inputToken: string): boolean {
-    return this.token === inputToken;
-  }
-}
-
-/**
- * 调试适配器管理器（单例管理）
- */
-class DebugAdapterManager {
-  private currentAdapter: DebugAdapter | null = null;
-
-  getOrCreateAdapter (): DebugAdapter {
-    // 如果已存在且活跃，直接返回
-    if (this.currentAdapter) {
-      this.currentAdapter.updateActivity();
-      return this.currentAdapter;
-    }
-
-    // 创建新实例
-    const adapter = new DebugAdapter('primary');
-    this.currentAdapter = adapter;
-
-    // 注册到 OneBot NetworkManager
-    const oneBotContext = WebUiDataRuntime.getOneBotContext();
-    if (oneBotContext) {
-      oneBotContext.networkManager.adapters.set(adapter.name, adapter as any);
-    } else {
-      console.warn('[Debug] OneBot 未初始化，无法注册适配器');
-    }
-
-    return adapter;
-  }
-
-  getAdapter (name: string): DebugAdapter | undefined {
-    if (this.currentAdapter && this.currentAdapter.name === name) {
-      return this.currentAdapter;
-    }
-    return undefined;
-  }
-
-  removeAdapter (name: string) {
-    if (this.currentAdapter && this.currentAdapter.name === name) {
-      this.currentAdapter = null;
-    }
-  }
-}
-
-const debugAdapterManager = new DebugAdapterManager();
-
-/**
- * 获取或创建调试会话
- */
-router.post('/create', async (_req: Request, res: Response) => {
-  try {
-    const adapter = debugAdapterManager.getOrCreateAdapter();
-    sendSuccess(res, {
-      adapterName: adapter.name,
-      token: adapter.token,
-      message: '调试适配器已就绪',
-    });
-  } catch (error: any) {
-    sendError(res, error.message);
-  }
-});
-
-/**
- * HTTP 调用 OneBot API (支持默认 adapter)
- */
-const handleCallApi = async (req: Request, res: Response) => {
-  try {
-    let adapterName = req.params['adapterName'] || req.body.adapterName || DEFAULT_ADAPTER_NAME;
-
-    let adapter = debugAdapterManager.getAdapter(adapterName);
-
-    // 如果是默认 adapter 且不存在，尝试创建
-    if (!adapter && adapterName === DEFAULT_ADAPTER_NAME) {
-      adapter = debugAdapterManager.getOrCreateAdapter();
-    }
-
-    if (!adapter) {
-      return sendError(res, '调试适配器不存在');
-    }
-
-    const { action, params } = req.body;
-    const result = await adapter.callApi(action, params || {});
-    sendSuccess(res, result);
-  } catch (error: any) {
-    sendError(res, error.message);
-  }
-};
-
-router.post('/call/:adapterName', handleCallApi);
-router.post('/call', handleCallApi);
-
-/**
- * 关闭调试适配器
- */
-router.post('/close/:adapterName', async (req: Request, res: Response) => {
-  try {
-    const { adapterName } = req.params;
-    if (!adapterName) {
-      return sendError(res, '缺少 adapterName 参数');
-    }
-    debugAdapterManager.removeAdapter(adapterName);
-    sendSuccess(res, { message: '调试适配器已关闭' });
-  } catch (error: any) {
-    sendError(res, error.message);
-  }
-});
-
-/**
- * WebSocket 连接处理
- * 路径: /api/Debug/ws?adapterName=xxx&token=xxx
- */
-export function handleDebugWebSocket (request: IncomingMessage, socket: any, head: any) {
-  const url = new URL(request.url || '', `http://${request.headers.host}`);
-  let adapterName = url.searchParams.get('adapterName');
-  const token = url.searchParams.get('token') || url.searchParams.get('access_token');
-
-  // 默认 adapterName
-  if (!adapterName) {
-    adapterName = DEFAULT_ADAPTER_NAME;
-  }
-
-  // Debug session should provide token
-  if (!token) {
-    console.log('[Debug] WebSocket 连接被拒绝: 缺少 Token');
-    socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
-    socket.destroy();
-    return;
-  }
-
-  let adapter = debugAdapterManager.getAdapter(adapterName);
-
-  // 如果是默认 adapter 且不存在，尝试创建
-  if (!adapter && adapterName === DEFAULT_ADAPTER_NAME) {
-    adapter = debugAdapterManager.getOrCreateAdapter();
-  }
-
-  if (!adapter) {
-    console.log('[Debug] WebSocket 连接被拒绝: 适配器不存在');
-    socket.write('HTTP/1.1 404 Not Found\r\n\r\n');
-    socket.destroy();
-    return;
-  }
-
-  if (!adapter.validateToken(token)) {
-    console.log('[Debug] WebSocket 连接被拒绝: Token 无效');
-    socket.write('HTTP/1.1 403 Forbidden\r\n\r\n');
-    socket.destroy();
-    return;
-  }
-
-  // 创建 WebSocket 服务器
-  const wsServer = new WebSocketServer({ noServer: true });
-
-  wsServer.handleUpgrade(request, socket, head, (ws) => {
-    adapter.addWsClient(ws);
-
-    ws.on('message', async (data) => {
-      try {
-        await adapter.handleWsMessage(ws, data as any);
-      } catch (error: any) {
-        console.error('[Debug] handleWsMessage error', error);
-      }
-    });
-
-    ws.on('close', () => {
-      adapter.removeWsClient(ws);
-    });
-
-    ws.on('error', () => {
-      adapter.removeWsClient(ws);
-    });
-  });
-}
-
-export default router;

packages/napcat-webui-backend/src/api/File.ts

@@ -640,10 +640,10 @@ export const UploadWebUIFontHandler: RequestHandler = async (req, res) => {
 // 删除WebUI字体文件处理方法
 export const DeleteWebUIFontHandler: RequestHandler = async (_req, res) => {
   try {
-    const fontPath = await WebUiConfig.GetWebUIFontPath();
+    const fontPath = WebUiConfig.GetWebUIFontPath();
     const exists = await WebUiConfig.CheckWebUIFontExist();
 
-    if (!exists || !fontPath) {
+    if (!exists) {
       return sendSuccess(res, true);
     }
 

packages/napcat-webui-backend/src/api/UpdateNapCat.ts

@@ -1,388 +0,0 @@
-import { RequestHandler } from 'express';
-import { sendSuccess, sendError } from '@/napcat-webui-backend/src/utils/response';
-import * as fs from 'fs';
-import * as path from 'path';
-import * as https from 'https';
-import compressing from 'compressing';
-import { webUiPathWrapper } from '../../index';
-import { NapCatPathWrapper } from '@/napcat-common/src/path';
-import { WebUiDataRuntime } from '@/napcat-webui-backend/src/helper/Data';
-import { NapCatCoreWorkingEnv } from '@/napcat-webui-backend/src/types';
-
-interface Release {
-  tag_name: string;
-  assets: Array<{
-    name: string;
-    browser_download_url: string;
-  }>;
-  body?: string;
-}
-
-// 更新配置文件接口
-interface UpdateConfig {
-  version: string;
-  updateTime: string;
-  files: Array<{
-    sourcePath: string;
-    targetPath: string;
-    backupPath?: string;
-  }>;
-  changelog?: string;
-}
-
-// 需要跳过更新的文件
-const SKIP_UPDATE_FILES = [
-  'NapCatWinBootMain.exe',
-  'NapCatWinBootHook.dll'
-];
-
-/**
- * 递归扫描目录中的所有文件
- */
-function scanFilesRecursively (dirPath: string, basePath: string = dirPath): Array<{
-  sourcePath: string;
-  relativePath: string;
-}> {
-  const files: Array<{
-    sourcePath: string;
-    relativePath: string;
-  }> = [];
-
-  const items = fs.readdirSync(dirPath);
-
-  for (const item of items) {
-    const fullPath = path.join(dirPath, item);
-    const relativePath = path.relative(basePath, fullPath);
-    const stat = fs.statSync(fullPath);
-
-    if (stat.isDirectory()) {
-      // 递归扫描子目录
-      files.push(...scanFilesRecursively(fullPath, basePath));
-    } else if (stat.isFile()) {
-      files.push({
-        sourcePath: fullPath,
-        relativePath: relativePath
-      });
-    }
-  }
-
-  return files;
-}
-
-// 镜像源列表（参考ffmpeg下载实现）
-const mirrorUrls = [
-  'https://j.1win.ggff.net/',
-  'https://git.yylx.win/',
-  'https://ghfile.geekertao.top/',
-  'https://gh-proxy.net/',
-  'https://ghm.078465.xyz/',
-  'https://gitproxy.127731.xyz/',
-  'https://jiashu.1win.eu.org/',
-  '', // 原始URL
-];
-
-/**
- * 测试URL是否可用
- */
-async function testUrl (url: string): Promise<boolean> {
-  return new Promise<boolean>((resolve) => {
-    const req = https.get(url, { timeout: 5000 }, (res) => {
-      const statusCode = res.statusCode || 0;
-      if (statusCode >= 200 && statusCode < 300) {
-        req.destroy();
-        resolve(true);
-      } else {
-        req.destroy();
-        resolve(false);
-      }
-    });
-
-    req.on('error', () => resolve(false));
-    req.on('timeout', () => {
-      req.destroy();
-      resolve(false);
-    });
-  });
-}
-
-/**
- * 构建镜像URL
- */
-function buildMirrorUrl (originalUrl: string, mirror: string): string {
-  if (!mirror) return originalUrl;
-  return mirror + originalUrl;
-}
-
-/**
- * 查找可用的下载URL
- */
-async function findAvailableUrl (originalUrl: string): Promise<string> {
-  console.log('Testing download URLs...');
-
-  // 先测试原始URL
-  if (await testUrl(originalUrl)) {
-    console.log('Using original URL:', originalUrl);
-    return originalUrl;
-  }
-
-  // 测试镜像源
-  for (const mirror of mirrorUrls) {
-    const mirrorUrl = buildMirrorUrl(originalUrl, mirror);
-    console.log('Testing mirror:', mirrorUrl);
-    if (await testUrl(mirrorUrl)) {
-      console.log('Using mirror URL:', mirrorUrl);
-      return mirrorUrl;
-    }
-  }
-
-  throw new Error('所有下载源都不可用');
-}
-
-/**
- * 下载文件（带进度和重试）
- */
-async function downloadFile (url: string, dest: string): Promise<void> {
-  console.log('Starting download from:', url);
-  const file = fs.createWriteStream(dest);
-
-  return new Promise((resolve, reject) => {
-    const request = https.get(url, {
-      headers: { 'User-Agent': 'NapCat-WebUI' }
-    }, (res) => {
-      console.log('Response status:', res.statusCode);
-      console.log('Content-Type:', res.headers['content-type']);
-
-      if (res.statusCode === 302 || res.statusCode === 301) {
-        console.log('Following redirect to:', res.headers.location);
-        file.close();
-        fs.unlinkSync(dest);
-        downloadFile(res.headers.location!, dest).then(resolve).catch(reject);
-        return;
-      }
-
-      if (res.statusCode !== 200) {
-        file.close();
-        fs.unlinkSync(dest);
-        reject(new Error(`HTTP ${res.statusCode}: ${res.statusMessage}`));
-        return;
-      }
-
-      res.pipe(file);
-      file.on('finish', () => {
-        file.close();
-        console.log('Download completed');
-        resolve();
-      });
-    });
-
-    request.on('error', (err) => {
-      console.error('Download error:', err);
-      file.close();
-      fs.unlink(dest, () => { });
-      reject(err);
-    });
-  });
-}
-
-export const UpdateNapCatHandler: RequestHandler = async (_req, res) => {
-  try {
-    // 获取最新release信息
-    const latestRelease = await getLatestRelease() as Release;
-    const ReleaseName = WebUiDataRuntime.getWorkingEnv() === NapCatCoreWorkingEnv.Framework ? 'NapCat.Framework.zip' : 'NapCat.Shell.zip';
-    const shellZipAsset = latestRelease.assets.find(asset => asset.name === ReleaseName);
-    if (!shellZipAsset) {
-      throw new Error(`未找到${ReleaseName}文件`);
-    }
-
-    // 创建临时目录
-    const tempDir = path.join(webUiPathWrapper.binaryPath, './temp');
-    if (!fs.existsSync(tempDir)) {
-      fs.mkdirSync(tempDir, { recursive: true });
-    }
-
-    // 查找可用的下载URL
-    const downloadUrl = await findAvailableUrl(shellZipAsset.browser_download_url);
-
-    // 下载zip
-    const zipPath = path.join(tempDir, 'napcat-latest.zip');
-    console.log('[NapCat Update] Saving to:', zipPath);
-    await downloadFile(downloadUrl, zipPath);
-
-    // 检查文件大小
-    const stats = fs.statSync(zipPath);
-    console.log('[NapCat Update] Downloaded file size:', stats.size, 'bytes');
-
-    // 解压到临时目录
-    const extractPath = path.join(tempDir, 'napcat-extract');
-    console.log('[NapCat Update] Extracting to:', extractPath);
-    await compressing.zip.uncompress(zipPath, extractPath);
-
-    // 获取解压后的实际内容目录（NapCat.Shell.zip直接包含文件，无额外根目录）
-    const sourcePath = extractPath;
-
-    // 执行更新操作
-    try {
-      // 扫描需要更新的文件
-      const allFiles = scanFilesRecursively(sourcePath);
-      const failedFiles: Array<{
-        sourcePath: string;
-        targetPath: string;
-      }> = [];
-
-      // 先尝试直接替换文件
-      for (const fileInfo of allFiles) {
-        const targetFilePath = path.join(webUiPathWrapper.binaryPath, fileInfo.relativePath);
-
-        // 跳过指定的文件
-        if (SKIP_UPDATE_FILES.includes(path.basename(fileInfo.relativePath))) {
-          console.log(`[NapCat Update] Skipping update for ${fileInfo.relativePath}`);
-          continue;
-        }
-
-        try {
-          // 确保目标目录存在
-          const targetDir = path.dirname(targetFilePath);
-          if (!fs.existsSync(targetDir)) {
-            fs.mkdirSync(targetDir, { recursive: true });
-          }
-
-          // 尝试直接替换文件
-          if (fs.existsSync(targetFilePath)) {
-            fs.unlinkSync(targetFilePath); // 删除旧文件
-          }
-          fs.copyFileSync(fileInfo.sourcePath, targetFilePath);
-        } catch (error) {
-          // 如果替换失败，添加到失败列表
-          console.log(`[NapCat Update] Failed to update ${targetFilePath}, will retry on next startup:`, error);
-          failedFiles.push({
-            sourcePath: fileInfo.sourcePath,
-            targetPath: targetFilePath
-          });
-        }
-      }
-
-      // 如果有替换失败的文件，创建更新配置文件
-      if (failedFiles.length > 0) {
-        const updateConfig: UpdateConfig = {
-          version: latestRelease.tag_name,
-          updateTime: new Date().toISOString(),
-          files: failedFiles,
-          changelog: latestRelease.body || ''
-        };
-
-        // 保存更新配置文件
-        const configPath = path.join(webUiPathWrapper.configPath, 'napcat-update.json');
-        fs.writeFileSync(configPath, JSON.stringify(updateConfig, null, 2));
-        console.log(`[NapCat Update] Update config saved for ${failedFiles.length} failed files: ${configPath}`);
-      }
-
-      // 发送成功响应
-      const message = failedFiles.length > 0
-        ? `更新完成，重启应用以应用剩余${failedFiles.length}个文件的更新`
-        : '更新完成';
-      sendSuccess(res, {
-        status: 'completed',
-        message,
-        newVersion: latestRelease.tag_name,
-        failedFilesCount: failedFiles.length
-      });
-
-    } catch (error) {
-      console.error('更新失败:', error);
-      sendError(res, '更新失败: ' + (error instanceof Error ? error.message : '未知错误'));
-    }
-
-  } catch (error: any) {
-    console.error('更新失败:', error);
-    sendError(res, '更新失败: ' + error.message);
-  }
-};
-
-async function getLatestRelease (): Promise<Release> {
-  return new Promise((resolve, reject) => {
-    https.get('https://api.github.com/repos/NapNeko/NapCatQQ/releases/latest', {
-      headers: { 'User-Agent': 'NapCat-WebUI' }
-    }, (res) => {
-      let data = '';
-      res.on('data', chunk => data += chunk);
-      res.on('end', () => {
-        try {
-          const release = JSON.parse(data) as Release;
-          console.log('Release info:', {
-            tag_name: release.tag_name,
-            assets: release.assets?.map(a => ({ name: a.name, url: a.browser_download_url }))
-          });
-          resolve(release);
-        } catch (e) {
-          reject(e);
-        }
-      });
-    }).on('error', reject);
-  });
-}
-
-/**
- * 应用待处理的更新（在应用启动时调用）
- */
-export async function applyPendingUpdates (webUiPathWrapper: NapCatPathWrapper): Promise<void> {
-  const configPath = path.join(webUiPathWrapper.configPath, 'napcat-update.json');
-
-  if (!fs.existsSync(configPath)) {
-    console.log('No pending updates found');
-    return;
-  }
-
-  try {
-    console.log('[NapCat Update] Applying pending updates...');
-    const updateConfig: UpdateConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
-
-    const remainingFiles: Array<{
-      sourcePath: string;
-      targetPath: string;
-    }> = [];
-
-    for (const file of updateConfig.files) {
-      try {
-        // 检查源文件是否存在
-        if (!fs.existsSync(file.sourcePath)) {
-          console.warn(`[NapCat Update] Source file not found: ${file.sourcePath}`);
-          continue;
-        }
-
-        // 确保目标目录存在
-        const targetDir = path.dirname(file.targetPath);
-        if (!fs.existsSync(targetDir)) {
-          fs.mkdirSync(targetDir, { recursive: true });
-        }
-
-        // 尝试替换文件
-        if (fs.existsSync(file.targetPath)) {
-          fs.unlinkSync(file.targetPath); // 删除旧文件
-        }
-        fs.copyFileSync(file.sourcePath, file.targetPath);
-        console.log(`[NapCat Update] Updated ${path.basename(file.targetPath)} on startup`);
-
-      } catch (error) {
-        console.error(`[NapCat Update] Failed to update ${file.targetPath} on startup:`, error);
-        // 如果仍然失败，保留在列表中
-        remainingFiles.push(file);
-      }
-    }
-
-    // 如果还有失败的文件，更新配置文件
-    if (remainingFiles.length > 0) {
-      const updatedConfig: UpdateConfig = {
-        ...updateConfig,
-        files: remainingFiles
-      };
-      fs.writeFileSync(configPath, JSON.stringify(updatedConfig, null, 2));
-      console.log(`${remainingFiles.length} files still pending update`);
-    } else {
-      // 所有文件都成功更新，删除配置文件
-      fs.unlinkSync(configPath);
-      console.log('[NapCat Update] All pending updates applied successfully');
-    }
-  } catch (error) {
-    console.error('[NapCat Update] Failed to apply pending updates:', error);
-  }
-}

packages/napcat-webui-backend/src/assets/sw_template.js

@@ -1,132 +0,0 @@
-const CACHE_NAME = 'napcat-webui-v{{VERSION}}';
-const ASSETS_TO_CACHE = [
-  '/webui/'
-];
-
-// 安装阶段：预缓存核心文件
-self.addEventListener('install', (event) => {
-  self.skipWaiting(); // 强制立即接管
-  event.waitUntil(
-    caches.open(CACHE_NAME).then((cache) => {
-      // 这里的资源如果加载失败不应该阻断 SW 安装
-      return cache.addAll(ASSETS_TO_CACHE).catch(err => console.warn('Failed to cache core assets', err));
-    })
-  );
-});
-
-// 激活阶段：清理旧缓存
-self.addEventListener('activate', (event) => {
-  event.waitUntil(
-    caches.keys().then((cacheNames) => {
-      return Promise.all(
-        cacheNames.map((cacheName) => {
-          if (cacheName.startsWith('napcat-webui-') && cacheName !== CACHE_NAME) {
-            console.log('[SW] Deleting old cache:', cacheName);
-            return caches.delete(cacheName);
-          }
-        })
-      );
-    })
-  );
-  self.clients.claim(); // 立即控制所有客户端
-});
-
-// 拦截请求
-self.addEventListener('fetch', (event) => {
-  const url = new URL(event.request.url);
-
-  // 1. API 请求：仅网络 (Network Only)
-  if (url.pathname.startsWith('/api/') || url.pathname.includes('/socket')) {
-    return;
-  }
-
-  // 2. 强缓存策略 (Cache First)
-  // - 外部 QQ 头像 (q1.qlogo.cn)
-  // - 静态资源 (assets, fonts)
-  // - 常见静态文件后缀
-  const isQLogo = url.hostname === 'q1.qlogo.cn';
-  const isCustomFont = url.pathname.includes('CustomFont.woff'); // 用户自定义字体，不强缓存
-  const isThemeCss = url.pathname.includes('files/theme.css'); // 主题 CSS，不强缓存
-  const isStaticAsset = url.pathname.includes('/webui/assets/') ||
-    url.pathname.includes('/webui/fonts/');
-  const isStaticFile = /\.(js|css|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|ico)$/i.test(url.pathname);
-
-  if (!isCustomFont && !isThemeCss && (isQLogo || isStaticAsset || isStaticFile)) {
-    event.respondWith(
-      caches.match(event.request).then((response) => {
-        if (response) {
-          return response;
-        }
-
-        // 跨域请求 (qlogo) 需要 mode: 'no-cors' 才能缓存 opaque response，
-        // 但 fetch(event.request) 默认会继承 request 的 mode。
-        // 如果是 img标签发起的请求，通常 mode 是 no-cors 或 cors。
-        // 对于 opaque response (status 0), cache API 允许缓存。
-        return fetch(event.request).then((response) => {
-          // 对 qlogo 允许 status 0 (opaque)
-          // 对其他资源要求 status 200
-          const isValidResponse = response && (
-            response.status === 200 ||
-            response.type === 'basic' ||
-            (isQLogo && response.type === 'opaque')
-          );
-
-          if (!isValidResponse) {
-            return response;
-          }
-
-          const responseToCache = response.clone();
-          caches.open(CACHE_NAME).then((cache) => {
-            cache.put(event.request, responseToCache);
-          });
-          return response;
-        });
-      })
-    );
-    return;
-  }
-
-  // 3. HTML 页面 / 导航请求 -> 网络优先 (Network First)
-  if (event.request.mode === 'navigate') {
-    event.respondWith(
-      fetch(event.request)
-        .then((response) => {
-          const responseToCache = response.clone();
-          caches.open(CACHE_NAME).then((cache) => {
-            cache.put(event.request, responseToCache);
-          });
-          return response;
-        })
-        .catch(() => {
-          return caches.match(event.request);
-        })
-    );
-    return;
-  }
-
-  // 4. 其他 Same-Origin 请求 -> Stale-While-Revalidate
-  // 优先返回缓存，同时后台更新缓存，保证下次访问是新的
-  if (url.origin === self.location.origin) {
-    event.respondWith(
-      caches.match(event.request).then((cachedResponse) => {
-        const fetchPromise = fetch(event.request).then((networkResponse) => {
-          if (networkResponse && networkResponse.status === 200) {
-            const responseToCache = networkResponse.clone();
-            caches.open(CACHE_NAME).then((cache) => {
-              cache.put(event.request, responseToCache);
-            });
-          }
-          return networkResponse;
-        });
-        // 如果有缓存，返回缓存；否则等待网络
-        return cachedResponse || fetchPromise;
-      })
-    );
-    return;
-  }
-
-  // 默认：网络优先
-  event.respondWith(
-    fetch(event.request).catch(() => caches.match(event.request))
-  );
-});

packages/napcat-webui-backend/src/helper/Data.ts

@@ -1,9 +1,8 @@
 import store from 'napcat-common/src/store';
 import { napCatVersion } from 'napcat-common/src/version';
-import { NapCatCoreWorkingEnv, type LoginRuntimeType } from '../types';
+import type { LoginRuntimeType } from '../types';
 
 const LoginRuntime: LoginRuntimeType = {
-  workingEnv: NapCatCoreWorkingEnv.Unknown,
   LoginCurrentTime: Date.now(),
   LoginCurrentRate: 0,
   QQLoginStatus: false, // 已实现 但太傻了 得去那边注册个回调刷新
@@ -15,7 +14,6 @@ const LoginRuntime: LoginRuntimeType = {
     nick: '',
   },
   QQVersion: 'unknown',
-  OneBotContext: null,
   onQQLoginStatusChange: async (status: boolean) => {
     LoginRuntime.QQLoginStatus = status;
   },
@@ -38,12 +36,6 @@ const LoginRuntime: LoginRuntimeType = {
   },
 };
 export const WebUiDataRuntime = {
-  setWorkingEnv (env: NapCatCoreWorkingEnv): void {
-    LoginRuntime.workingEnv = env;
-  },
-  getWorkingEnv (): NapCatCoreWorkingEnv {
-    return LoginRuntime.workingEnv;
-  },
   setWebUiTokenChangeCallback (func: (token: string) => Promise<void>): void {
     LoginRuntime.onWebUiTokenChange = func;
   },
@@ -155,12 +147,4 @@ export const WebUiDataRuntime = {
   runWebUiConfigQuickFunction: async function () {
     await LoginRuntime.WebUiConfigQuickFunction();
   },
-
-  setOneBotContext (context: any): void {
-    LoginRuntime.OneBotContext = context;
-  },
-
-  getOneBotContext (): any | null {
-    return LoginRuntime.OneBotContext;
-  },
 };

packages/napcat-webui-backend/src/helper/PasskeyHelper.ts

@@ -1,206 +0,0 @@
-import {
-  generateRegistrationOptions,
-  verifyRegistrationResponse,
-  generateAuthenticationOptions,
-  verifyAuthenticationResponse,
-  type AuthenticatorTransportFuture,
-} from '@simplewebauthn/server';
-import { isoBase64URL } from '@simplewebauthn/server/helpers';
-import { promises as fs } from 'fs';
-import path from 'path';
-import { webUiPathWrapper } from '../../index';
-
-interface PasskeyCredential {
-  id: string;
-  publicKey: string;
-  counter: number;
-  transports?: AuthenticatorTransportFuture[];
-}
-
-const RP_NAME = 'NapCat WebUI';
-
-export class PasskeyHelper {
-  private static getPasskeyFilePath (): string {
-    return path.join(webUiPathWrapper.configPath, 'passkey.json');
-  }
-
-  // 内存中存储临时挑战数据
-  private static challenges: Map<string, string> = new Map();
-  private static async ensurePasskeyFile (): Promise<void> {
-    try {
-      // 确保配置文件目录存在
-      const passkeyFile = this.getPasskeyFilePath();
-      await fs.mkdir(path.dirname(passkeyFile), { recursive: true });
-      // 检查文件是否存在，如果不存在创建空文件
-      try {
-        await fs.access(passkeyFile);
-      } catch {
-        await fs.writeFile(passkeyFile, JSON.stringify({}, null, 2));
-      }
-    } catch (error) {
-      // Directory or file already exists or other error
-    }
-  }
-
-  private static async getAllPasskeys (): Promise<Record<string, PasskeyCredential[]>> {
-    await this.ensurePasskeyFile();
-    try {
-      const passkeyFile = this.getPasskeyFilePath();
-      const data = await fs.readFile(passkeyFile, 'utf-8');
-      const passkeys = JSON.parse(data);
-      return typeof passkeys === 'object' && passkeys !== null ? passkeys : {};
-    } catch (error) {
-      return {};
-    }
-  }
-
-  private static async saveAllPasskeys (allPasskeys: Record<string, PasskeyCredential[]>): Promise<void> {
-    await this.ensurePasskeyFile();
-    const passkeyFile = this.getPasskeyFilePath();
-    await fs.writeFile(passkeyFile, JSON.stringify(allPasskeys, null, 2));
-  }
-
-  private static async getUserPasskeys (userId: string): Promise<PasskeyCredential[]> {
-    const allPasskeys = await this.getAllPasskeys();
-    return allPasskeys[userId] || [];
-  }
-
-  // 持久性存储用户的passkey到统一配置文件
-  private static async setUserPasskeys (userId: string, passkeys: PasskeyCredential[]): Promise<void> {
-    const allPasskeys = await this.getAllPasskeys();
-    if (passkeys.length > 0) {
-      allPasskeys[userId] = passkeys;
-    } else {
-      delete allPasskeys[userId];
-    }
-    await this.saveAllPasskeys(allPasskeys);
-  }
-
-  static async generateRegistrationOptions (userId: string, userName: string, rpId: string) {
-    const userPasskeys = await this.getUserPasskeys(userId);
-
-    const options = await generateRegistrationOptions({
-      rpName: RP_NAME,
-      rpID: rpId,
-      userID: new TextEncoder().encode(userId),
-      userName: userName,
-      attestationType: 'none',
-      excludeCredentials: userPasskeys.map(passkey => ({
-        id: passkey.id,
-        type: 'public-key' as const,
-        transports: passkey.transports,
-      })),
-      // Temporarily simplify authenticatorSelection - remove residentKey to avoid conflicts
-      authenticatorSelection: {
-        userVerification: 'preferred',
-      },
-    });
-
-    // Store challenge temporarily in memory
-    this.challenges.set(`reg_${userId}`, options.challenge);
-    // Auto cleanup after 5 minutes
-    setTimeout(() => {
-      this.challenges.delete(`reg_${userId}`);
-    }, 300000);
-
-    return options;
-  }
-
-  static async verifyRegistration (userId: string, response: any, origin: string, rpId: string) {
-    const expectedChallenge = this.challenges.get(`reg_${userId}`);
-    if (!expectedChallenge) {
-      throw new Error('Challenge not found or expired');
-    }
-
-    const verification = await verifyRegistrationResponse({
-      response,
-      expectedChallenge,
-      expectedOrigin: origin,
-      expectedRPID: rpId,
-    });
-
-    if (verification.verified && verification.registrationInfo) {
-      const { registrationInfo } = verification;
-
-      const newPasskey: PasskeyCredential = {
-        id: registrationInfo.credential.id,
-        publicKey: isoBase64URL.fromBuffer(registrationInfo.credential.publicKey),
-        counter: registrationInfo.credential.counter || 0,
-        transports: response.response.transports,
-      };
-
-      const userPasskeys = await this.getUserPasskeys(userId);
-      userPasskeys.push(newPasskey);
-      await this.setUserPasskeys(userId, userPasskeys);
-
-      // Clean up challenge
-      this.challenges.delete(`reg_${userId}`);
-    }
-
-    return verification;
-  }
-
-  static async generateAuthenticationOptions (userId: string, rpId: string) {
-    const userPasskeys = await this.getUserPasskeys(userId);
-
-    const options = await generateAuthenticationOptions({
-      rpID: rpId,
-      allowCredentials: userPasskeys.map(passkey => ({
-        id: passkey.id,
-        type: 'public-key' as const,
-        transports: passkey.transports,
-      })),
-      userVerification: 'preferred',
-    });
-
-    // Store challenge temporarily in memory
-    this.challenges.set(`auth_${userId}`, options.challenge);
-    // Auto cleanup after 5 minutes
-    setTimeout(() => {
-      this.challenges.delete(`auth_${userId}`);
-    }, 300000);
-
-    return options;
-  }
-
-  static async verifyAuthentication (userId: string, response: any, origin: string, rpId: string) {
-    const expectedChallenge = this.challenges.get(`auth_${userId}`);
-    if (!expectedChallenge) {
-      throw new Error('Challenge not found or expired');
-    }
-
-    const userPasskeys = await this.getUserPasskeys(userId);
-    const passkey = userPasskeys.find(p => p.id === response.id);
-    if (!passkey) {
-      throw new Error('Passkey not found');
-    }
-
-    const verification = await verifyAuthenticationResponse({
-      response,
-      expectedChallenge,
-      expectedOrigin: origin,
-      expectedRPID: rpId,
-      credential: {
-        id: passkey.id,
-        publicKey: isoBase64URL.toBuffer(passkey.publicKey),
-        counter: passkey.counter,
-      },
-    });
-
-    if (verification.verified && verification.authenticationInfo) {
-      // Update counter
-      passkey.counter = verification.authenticationInfo.newCounter;
-      await this.setUserPasskeys(userId, userPasskeys);
-
-      // Clean up challenge
-      this.challenges.delete(`auth_${userId}`);
-    }
-
-    return verification;
-  }
-
-  static async hasPasskeys (userId: string): Promise<boolean> {
-    const userPasskeys = await this.getUserPasskeys(userId);
-    return userPasskeys.length > 0;
-  }
-}

packages/napcat-webui-backend/src/helper/config.ts

@@ -176,35 +176,17 @@ export class WebUiConfigWrapper {
     return [];
   }
 
-  // 判断字体是否存在（支持多种格式）
+  // 判断字体是否存在（webui.woff）
   async CheckWebUIFontExist (): Promise<boolean> {
-    const fontPath = await this.GetWebUIFontPath();
-    if (!fontPath) return false;
+    const fontsPath = resolve(webUiPathWrapper.configPath, './fonts');
     return await fs
-      .access(fontPath, constants.F_OK)
+      .access(resolve(fontsPath, './webui.woff'), constants.F_OK)
       .then(() => true)
       .catch(() => false);
   }
 
-  // 获取webui字体文件路径（支持多种格式）
-  async GetWebUIFontPath (): Promise<string | null> {
-    const fontsPath = resolve(webUiPathWrapper.configPath, './fonts');
-    const extensions = ['.woff', '.woff2', '.ttf', '.otf'];
-    for (const ext of extensions) {
-      const fontPath = resolve(fontsPath, `webui${ext}`);
-      const exists = await fs
-        .access(fontPath, constants.F_OK)
-        .then(() => true)
-        .catch(() => false);
-      if (exists) {
-        return fontPath;
-      }
-    }
-    return null;
-  }
-
-  // 同步版本，用于 multer 配置
-  GetWebUIFontPathSync (): string {
+  // 获取webui字体文件路径
+  GetWebUIFontPath (): string {
     return resolve(webUiPathWrapper.configPath, './fonts/webui.woff');
   }
 

packages/napcat-webui-backend/src/middleware/auth.ts

@@ -12,12 +12,6 @@ export async function auth (req: Request, res: Response, next: NextFunction) {
   if (req.url === '/auth/login') {
     return next();
   }
-  if (req.url === '/auth/passkey/generate-authentication-options' ||
-    req.url === '/auth/passkey/verify-authentication') {
-    return next();
-  }
-
-
 
   // 判断是否有Authorization头
   if (req.headers?.authorization) {

packages/napcat-webui-backend/src/router/Base.ts

@@ -1,5 +1,5 @@
 import { Router } from 'express';
-import { GetThemeConfigHandler, GetNapCatVersion, QQVersionHandler, SetThemeConfigHandler, getLatestTagHandler } from '../api/BaseInfo';
+import { GetThemeConfigHandler, GetNapCatVersion, QQVersionHandler, SetThemeConfigHandler } from '../api/BaseInfo';
 import { StatusRealTimeHandler } from '@/napcat-webui-backend/src/api/Status';
 import { GetProxyHandler } from '../api/Proxy';
 
@@ -7,7 +7,6 @@ const router = Router();
 // router: 获取nc的package.json信息
 router.get('/QQVersion', QQVersionHandler);
 router.get('/GetNapCatVersion', GetNapCatVersion);
-router.get('/getLatestTag', getLatestTagHandler);
 router.get('/GetSysStatusRealTime', StatusRealTimeHandler);
 router.get('/proxy', GetProxyHandler);
 router.get('/Theme', GetThemeConfigHandler);

packages/napcat-webui-backend/src/router/UpdateNapCat.ts

@@ -1,13 +0,0 @@
-/**
- * @file UpdateNapCat路由
- */
-
-import { Router } from 'express';
-import { UpdateNapCatHandler } from '@/napcat-webui-backend/src/api/UpdateNapCat';
-
-const router = Router();
-
-// POST /api/UpdateNapCat/update - 更新NapCat
-router.post('/update', UpdateNapCatHandler);
-
-export { router as UpdateNapCatRouter };

packages/napcat-webui-backend/src/router/auth.ts

@@ -5,10 +5,6 @@ import {
   LoginHandler,
   LogoutHandler,
   UpdateTokenHandler,
-  GeneratePasskeyRegistrationOptionsHandler,
-  VerifyPasskeyRegistrationHandler,
-  GeneratePasskeyAuthenticationOptionsHandler,
-  VerifyPasskeyAuthenticationHandler,
 } from '@/napcat-webui-backend/src/api/Auth';
 
 const router = Router();
@@ -20,13 +16,5 @@ router.post('/check', checkHandler);
 router.post('/logout', LogoutHandler);
 // router:更新token
 router.post('/update_token', UpdateTokenHandler);
-// router:生成Passkey注册选项
-router.post('/passkey/generate-registration-options', GeneratePasskeyRegistrationOptionsHandler);
-// router:验证Passkey注册
-router.post('/passkey/verify-registration', VerifyPasskeyRegistrationHandler);
-// router:生成Passkey认证选项
-router.post('/passkey/generate-authentication-options', GeneratePasskeyAuthenticationOptionsHandler);
-// router:验证Passkey认证
-router.post('/passkey/verify-authentication', VerifyPasskeyAuthenticationHandler);
 
 export { router as AuthRouter };

packages/napcat-webui-backend/src/router/index.ts

@@ -14,8 +14,6 @@ import { LogRouter } from '@/napcat-webui-backend/src/router/Log';
 import { BaseRouter } from '@/napcat-webui-backend/src/router/Base';
 import { FileRouter } from './File';
 import { WebUIConfigRouter } from './WebUIConfig';
-import { UpdateNapCatRouter } from './UpdateNapCat';
-import DebugRouter from '@/napcat-webui-backend/src/api/Debug';
 
 const router = Router();
 
@@ -40,9 +38,5 @@ router.use('/Log', LogRouter);
 router.use('/File', FileRouter);
 // router:WebUI配置相关路由
 router.use('/WebUIConfig', WebUIConfigRouter);
-// router:更新NapCat相关路由
-router.use('/UpdateNapCat', UpdateNapCatRouter);
-// router:调试相关路由
-router.use('/Debug', DebugRouter);
 
 export { router as ALLRouter };

packages/napcat-webui-backend/src/types/index.ts

@@ -30,13 +30,8 @@ export interface WebUiCredentialJson {
   Data: WebUiCredentialInnerJson;
   Hmac: string;
 }
-export enum NapCatCoreWorkingEnv {
-  Unknown = 0,
-  Shell = 1,
-  Framework = 2,
-}
+
 export interface LoginRuntimeType {
-  workingEnv: NapCatCoreWorkingEnv;
   LoginCurrentTime: number;
   LoginCurrentRate: number;
   QQLoginStatus: boolean;
@@ -47,7 +42,6 @@ export interface LoginRuntimeType {
   onQQLoginStatusChange: (status: boolean) => Promise<void>;
   onWebUiTokenChange: (token: string) => Promise<void>;
   WebUiConfigQuickFunction: () => Promise<void>;
-  OneBotContext: any | null; // OneBot 上下文，用于调试功能
   NapCatHelper: {
     onQuickLoginRequested: (uin: string) => Promise<{ result: boolean; message: string; }>;
     onOB11ConfigChanged: (ob11: OneBotConfig) => Promise<void>;

packages/napcat-webui-backend/src/types/theme.ts

@@ -4,11 +4,9 @@ export const themeType = Type.Object(
   {
     dark: Type.Record(Type.String(), Type.String()),
     light: Type.Record(Type.String(), Type.String()),
-    fontMode: Type.String({ default: 'system' }),
   },
   {
     default: {
-      fontMode: 'system',
       dark: {
         '--heroui-background': '0 0% 0%',
         '--heroui-foreground-50': '240 5.88% 10%',
@@ -126,11 +124,11 @@ export const themeType = Type.Object(
         '--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)',
+                    '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)',
+                    '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)',
+                    '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: {
@@ -250,11 +248,11 @@ export const themeType = Type.Object(
         '--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)',
+                    '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)',
+                    '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)',
+                    '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',
       },
     },

packages/napcat-webui-backend/src/uploader/webui_font.ts

@@ -4,51 +4,30 @@ import fs from 'fs';
 import type { Request, Response } from 'express';
 import { WebUiConfig } from '@/napcat-webui-backend/index';
 
-// 支持的字体格式
-const SUPPORTED_FONT_EXTENSIONS = ['.woff', '.woff2', '.ttf', '.otf'];
-
-// 清理旧的字体文件
-const cleanOldFontFiles = (fontsPath: string) => {
-  for (const ext of SUPPORTED_FONT_EXTENSIONS) {
-    const fontPath = path.join(fontsPath, `webui${ext}`);
-    try {
-      if (fs.existsSync(fontPath)) {
-        fs.unlinkSync(fontPath);
-      }
-    } catch {
-      // 忽略删除失败
-    }
-  }
-};
-
 export const webUIFontStorage = multer.diskStorage({
   destination: (_, __, cb) => {
     try {
-      const fontsPath = path.dirname(WebUiConfig.GetWebUIFontPathSync());
+      const fontsPath = path.dirname(WebUiConfig.GetWebUIFontPath());
       // 确保字体目录存在
       fs.mkdirSync(fontsPath, { recursive: true });
-      // 清理旧的字体文件
-      cleanOldFontFiles(fontsPath);
       cb(null, fontsPath);
     } catch (error) {
       // 确保错误信息被正确传递
       cb(new Error(`创建字体目录失败：${(error as Error).message}`), '');
     }
   },
-  filename: (_, file, cb) => {
-    // 保留原始扩展名，统一文件名为 webui
-    const ext = path.extname(file.originalname).toLowerCase();
-    cb(null, `webui${ext}`);
+  filename: (_, __, cb) => {
+    // 统一保存为webui.woff
+    cb(null, 'webui.woff');
   },
 });
 
 export const webUIFontUpload = multer({
   storage: webUIFontStorage,
   fileFilter: (_, file, cb) => {
-    // 验证文件类型
-    const ext = path.extname(file.originalname).toLowerCase();
-    if (!SUPPORTED_FONT_EXTENSIONS.includes(ext)) {
-      cb(new Error('只支持 WOFF/WOFF2/TTF/OTF 格式的字体文件'));
+    // 再次验证文件类型
+    if (!file.originalname.toLowerCase().endsWith('.woff')) {
+      cb(new Error('只支持WOFF格式的字体文件'));
       return;
     }
     cb(null, true);
@@ -62,6 +41,8 @@ const webUIFontUploader = (req: Request, res: Response) => {
   return new Promise((resolve, reject) => {
     webUIFontUpload(req, res, (error) => {
       if (error) {
+        // 错误处理
+        // sendError(res, error.message, true);
         return reject(error);
       }
       return resolve(true);

packages/napcat-webui-frontend/.gitignore

@@ -26,5 +26,7 @@ dist-ssr
 # NPM LOCK files
 package-lock.json
 yarn.lock
+pnpm-lock.yaml
+
 
 dist.zip

packages/napcat-webui-frontend/package.json

@@ -5,19 +5,12 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host=0.0.0.0",
-    "build": "vite build",
-    "build:full": "tsc && vite build",
-    "fontmin": "node scripts/fontmin.cjs",
+    "build": "tsc && vite build",
     "typecheck": "tsc --noEmit",
     "lint": "eslint -c eslint.config.mjs ./src/**/**/*.{ts,tsx} --fix",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/lang-javascript": "^6.2.4",
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.39.6",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -29,7 +22,6 @@
     "@heroui/checkbox": "2.3.9",
     "@heroui/chip": "2.2.7",
     "@heroui/code": "2.2.7",
-    "@heroui/divider": "^2.2.21",
     "@heroui/dropdown": "2.3.10",
     "@heroui/form": "2.1.9",
     "@heroui/image": "2.2.6",
@@ -53,10 +45,10 @@
     "@heroui/theme": "2.4.6",
     "@heroui/tooltip": "2.2.8",
     "@monaco-editor/loader": "^1.4.0",
+    "@monaco-editor/react": "4.7.0-rc.0",
     "@react-aria/visually-hidden": "^3.8.19",
     "@reduxjs/toolkit": "^2.5.1",
     "@uidotdev/usehooks": "^2.4.1",
-    "@uiw/react-codemirror": "^4.25.4",
     "@xterm/addon-canvas": "^0.7.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",
@@ -65,7 +57,10 @@
     "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",
+    "monaco-editor": "^0.52.2",
     "motion": "^12.0.6",
     "path-browserify": "^1.0.1",
     "qface": "^1.4.1",
@@ -82,6 +77,7 @@
     "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",
     "react-use-websocket": "^4.11.1",
     "react-window": "^1.8.11",
@@ -109,15 +105,10 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "5.2.3",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "fontmin": "^0.9.9",
-    "glob": "^10.3.10",
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "sharp": "^0.34.5",
     "typescript": "^5.7.3",
     "vite": "^6.0.5",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-image-optimizer": "^2.0.3",
     "vite-plugin-static-copy": "^2.2.0",
     "vite-tsconfig-paths": "^5.1.4"
   },
@@ -131,4 +122,4 @@
       "react-dom": "$react-dom"
     }
   }
-}
+}

packages/napcat-webui-frontend/scripts/fontmin.cjs

@@ -1,137 +0,0 @@
-/**
- * Fontmin Script - 动态裁剪字体
- * 扫描 src 目录中所有中文字符，生成字体子集
- */
-const Fontmin = require('fontmin');
-const fs = require('fs');
-const path = require('path');
-const glob = require('glob');
-
-// 配置
-const SOURCE_FONT = path.resolve(__dirname, '../src/assets/fonts/AaCute-full.ttf');
-const SOURCE_TTF_ORIGINAL = path.resolve(__dirname, '../src/assets/fonts/AaCute.ttf');
-const OUTPUT_DIR = path.resolve(__dirname, '../public/fonts');
-const OUTPUT_NAME = 'AaCute.woff';
-const SRC_DIR = path.resolve(__dirname, '../src');
-
-// 基础字符集（常用汉字 + 标点 + 数字 + 字母）
-const BASE_CHARS = `
-  0123456789
-  abcdefghijklmnopqrstuvwxyz
-  ABCDEFGHIJKLMNOPQRSTUVWXYZ
-  ，。！？、；：""''（）【】《》…—·
-  ,.:;!?'"()[]<>-_+=*/\\|@#$%^&~\`
-  基础信息系统版本网络配置服务器客户端终端日志调试关于设置主题
-  登录退出确定取消保存删除编辑新建刷新加载更新下载上传
-  成功失败错误警告提示信息状态在线离线连接断开
-  用户名密码账号验证码记住自动
-  文件管理打开关闭复制粘贴剪切重命名移动
-  发送消息输入内容搜索查找筛选排序
-  帮助文档教程反馈问题建议
-  开启关闭启用禁用显示隐藏展开收起
-  返回前进上一步下一步完成跳过
-  今天昨天明天时间日期年月日时分秒
-  总量使用占用剩余内存内核主频型号
-  有新版本可用当前最新立即稍后
-`;
-
-/**
- * 从源码文件中提取所有中文字符
- */
-function extractCharsFromSource () {
-  const chars = new Set(BASE_CHARS.replace(/\s/g, ''));
-
-  // 匹配所有 .tsx, .ts, .jsx, .js, .css 文件
-  const files = glob.sync(`${SRC_DIR}/**/*.{tsx,ts,jsx,js,css}`, {
-    ignore: ['**/node_modules/**']
-  });
-
-  // 中文字符正则
-  const chineseRegex = /[\u4e00-\u9fa5]/g;
-
-  files.forEach(file => {
-    try {
-      const content = fs.readFileSync(file, 'utf-8');
-      const matches = content.match(chineseRegex);
-      if (matches) {
-        matches.forEach(char => chars.add(char));
-      }
-    } catch (e) {
-      console.warn(`Warning: Could not read file ${file}`);
-    }
-  });
-
-  return Array.from(chars).join('');
-}
-
-/**
- * 运行 fontmin
- */
-async function run () {
-  console.log('🔍 Scanning source files for Chinese characters...');
-  const text = extractCharsFromSource();
-  console.log(`📝 Found ${text.length} unique characters`);
-
-  // 检查源字体是否存在
-  let sourceFont = SOURCE_FONT;
-  if (!fs.existsSync(SOURCE_FONT)) {
-    // 尝试查找原始 TTF 并复制（不重命名，保留原始）
-    if (fs.existsSync(SOURCE_TTF_ORIGINAL)) {
-      console.log('📦 Copying original font to AaCute-full.ttf...');
-      fs.copyFileSync(SOURCE_TTF_ORIGINAL, SOURCE_FONT);
-    } else {
-      console.error(`❌ Source font not found: ${SOURCE_FONT}`);
-      console.log('💡 Please ensure AaCute.ttf exists in src/assets/fonts/');
-      process.exit(1);
-    }
-  }
-
-  console.log('✂️  Subsetting font...');
-
-  // 确保输出目录存在
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
-  }
-
-  const fontmin = new Fontmin()
-    .src(sourceFont)
-    .use(Fontmin.glyph({ text }))
-    .use(Fontmin.ttf2woff())
-    .dest(OUTPUT_DIR);
-
-  return new Promise((resolve, reject) => {
-    fontmin.run((err, files) => {
-      if (err) {
-        console.error('❌ Fontmin error:', err);
-        reject(err);
-      } else {
-        // 重命名输出文件
-        const generatedWoff = path.join(OUTPUT_DIR, 'AaCute-full.woff');
-        const targetFile = path.join(OUTPUT_DIR, OUTPUT_NAME);
-
-        if (fs.existsSync(generatedWoff)) {
-          // 如果目标文件存在，先删除
-          if (fs.existsSync(targetFile)) {
-            fs.unlinkSync(targetFile);
-          }
-          fs.renameSync(generatedWoff, targetFile);
-        }
-
-        // 清理生成的 TTF 文件
-        const generatedTtf = path.join(OUTPUT_DIR, 'AaCute-full.ttf');
-        if (fs.existsSync(generatedTtf)) {
-          fs.unlinkSync(generatedTtf);
-        }
-
-        if (fs.existsSync(targetFile)) {
-          const stats = fs.statSync(targetFile);
-          const sizeKB = (stats.size / 1024).toFixed(2);
-          console.log(`✅ Font subset created: ${targetFile} (${sizeKB} KB)`);
-        }
-        resolve();
-      }
-    });
-  });
-}
-
-run().catch(console.error);

packages/napcat-webui-frontend/src/App.tsx

@@ -7,6 +7,7 @@ import PageLoading from '@/components/page_loading';
 import Toaster from '@/components/toaster';
 
 import DialogProvider from '@/contexts/dialog';
+import AudioProvider from '@/contexts/songs';
 
 import useAuth from '@/hooks/auth';
 
@@ -32,11 +33,13 @@ function App () {
       <Provider store={store}>
         <PageBackground />
         <Toaster />
-        <Suspense fallback={<PageLoading />}>
-          <AuthChecker>
-            <AppRoutes />
-          </AuthChecker>
-        </Suspense>
+        <AudioProvider>
+          <Suspense fallback={<PageLoading />}>
+            <AuthChecker>
+              <AppRoutes />
+            </AuthChecker>
+          </Suspense>
+        </AudioProvider>
       </Provider>
     </DialogProvider>
   );

packages/napcat-webui-frontend/src/components/audio_player.tsx

@@ -0,0 +1,425 @@
+import { Button } from '@heroui/button';
+import { Card, CardBody, CardHeader } from '@heroui/card';
+import { Image } from '@heroui/image';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Slider } from '@heroui/slider';
+import { Tooltip } from '@heroui/tooltip';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
+import {
+  BiSolidSkipNextCircle,
+  BiSolidSkipPreviousCircle,
+} from 'react-icons/bi';
+import {
+  FaPause,
+  FaPlay,
+  FaRegHandPointRight,
+  FaRepeat,
+  FaShuffle,
+} from 'react-icons/fa6';
+import { TbRepeatOnce } from 'react-icons/tb';
+import { useMediaQuery } from 'react-responsive';
+
+import { PlayMode } from '@/const/enum';
+import key from '@/const/key';
+
+import { VolumeHighIcon, VolumeLowIcon } from './icons';
+
+export interface AudioPlayerProps
+  extends React.AudioHTMLAttributes<HTMLAudioElement> {
+  src: string
+  title?: string
+  artist?: string
+  cover?: string
+  pressNext?: () => void
+  pressPrevious?: () => void
+  onPlayEnd?: () => void
+  onChangeMode?: (mode: PlayMode) => void
+  mode?: PlayMode
+}
+
+export default function AudioPlayer (props: AudioPlayerProps) {
+  const {
+    src,
+    pressNext,
+    pressPrevious,
+    cover = 'https://nextui.org/images/album-cover.png',
+    title = '未知',
+    artist = '未知',
+    onTimeUpdate,
+    onLoadedData,
+    onPlay,
+    onPause,
+    onPlayEnd,
+    onChangeMode,
+    autoPlay,
+    mode = PlayMode.Loop,
+    ...rest
+  } = props;
+
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(100);
+  const [isCollapsed, setIsCollapsed] = useLocalStorage(
+    key.isCollapsedMusicPlayer,
+    false
+  );
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const startY = useRef(0);
+  const startX = useRef(0);
+  const [translateY, setTranslateY] = useState(0);
+  const [translateX, setTranslateX] = useState(0);
+  const isSmallScreen = useMediaQuery({ maxWidth: 767 });
+  const isMediumUp = useMediaQuery({ minWidth: 768 });
+  const shouldAdd = useRef(false);
+  const currentProgress = (currentTime / duration) * 100;
+  const [storageAutoPlay, setStorageAutoPlay] = useLocalStorage(
+    key.autoPlay,
+    true
+  );
+
+  const handleTimeUpdate = (event: React.SyntheticEvent<HTMLAudioElement>) => {
+    const audio = event.target as HTMLAudioElement;
+    setCurrentTime(audio.currentTime);
+    onTimeUpdate?.(event);
+  };
+
+  const handleLoadedData = (event: React.SyntheticEvent<HTMLAudioElement>) => {
+    const audio = event.target as HTMLAudioElement;
+    setDuration(audio.duration);
+    onLoadedData?.(event);
+  };
+
+  const handlePlay = (e: React.SyntheticEvent<HTMLAudioElement>) => {
+    setIsPlaying(true);
+    setStorageAutoPlay(true);
+    onPlay?.(e);
+  };
+
+  const handlePause = (e: React.SyntheticEvent<HTMLAudioElement>) => {
+    setIsPlaying(false);
+    onPause?.(e);
+  };
+
+  const changeMode = () => {
+    const modes = [PlayMode.Loop, PlayMode.Random, PlayMode.Single];
+    const currentIndex = modes.findIndex((_mode) => _mode === mode);
+    const nextIndex = currentIndex + 1;
+    const nextMode = modes[nextIndex] || modes[0];
+    onChangeMode?.(nextMode);
+  };
+
+  const volumeChange = (value: number) => {
+    setVolume(value);
+  };
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.volume = volume / 100;
+    }
+  }, [volume]);
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    startY.current = e.touches[0].clientY;
+    startX.current = e.touches[0].clientX;
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    const deltaY = e.touches[0].clientY - startY.current;
+    const deltaX = e.touches[0].clientX - startX.current;
+    const container = cardRef.current;
+    const header = cardRef.current?.querySelector('[data-header]');
+    const headerHeight = header?.clientHeight || 20;
+    const addHeight = (container?.clientHeight || headerHeight) - headerHeight;
+    const _shouldAdd = isCollapsed && deltaY < 0;
+    if (isSmallScreen) {
+      shouldAdd.current = _shouldAdd;
+      setTranslateY(_shouldAdd ? deltaY + addHeight : deltaY);
+    } else {
+      setTranslateX(deltaX);
+    }
+  };
+
+  const handleTouchEnd = () => {
+    if (isSmallScreen) {
+      const container = cardRef.current;
+      const header = cardRef.current?.querySelector('[data-header]');
+      const headerHeight = header?.clientHeight || 20;
+      const addHeight = (container?.clientHeight || headerHeight) - headerHeight;
+      const _translateY = translateY - (shouldAdd.current ? addHeight : 0);
+      if (_translateY > 100) {
+        setIsCollapsed(true);
+      } else if (_translateY < -100) {
+        setIsCollapsed(false);
+      }
+      setTranslateY(0);
+    } else {
+      if (translateX > 100) {
+        setIsCollapsed(true);
+      } else if (translateX < -100) {
+        setIsCollapsed(false);
+      }
+      setTranslateX(0);
+    }
+  };
+
+  const dragTranslate = isSmallScreen
+    ? translateY
+      ? `translateY(${translateY}px)`
+      : ''
+    : translateX
+      ? `translateX(${translateX}px)`
+      : '';
+  const collapsedTranslate = isCollapsed
+    ? isSmallScreen
+      ? 'translateY(90%)'
+      : 'translateX(96%)'
+    : '';
+
+  const translateStyle = dragTranslate || collapsedTranslate;
+
+  if (!src) return null;
+
+  return (
+    <div
+      className={clsx(
+        'fixed right-0 bottom-0 z-[52] w-full md:w-96',
+        !translateX && !translateY && 'transition-transform',
+        isCollapsed && 'md:hover:!translate-x-80'
+      )}
+      style={{
+        transform: translateStyle,
+      }}
+    >
+      <audio
+        src={src}
+        onLoadedData={handleLoadedData}
+        onTimeUpdate={handleTimeUpdate}
+        onPlay={handlePlay}
+        onPause={handlePause}
+        onEnded={onPlayEnd}
+        autoPlay={autoPlay ?? storageAutoPlay}
+        {...rest}
+        controls={false}
+        hidden
+        ref={audioRef}
+      />
+
+      <Card
+        ref={cardRef}
+        className={clsx(
+          'border-none bg-background/60 dark:bg-default-300/50 w-full max-w-full transform transition-transform backdrop-blur-md duration-300 overflow-visible',
+          isSmallScreen ? 'rounded-t-3xl' : 'md:rounded-l-xl'
+        )}
+        classNames={{
+          body: 'p-0',
+        }}
+        shadow='sm'
+        radius='none'
+      >
+        {isMediumUp && (
+          <Button
+            isIconOnly
+            className={clsx(
+              'absolute data-[hover]:bg-foreground/10 text-lg z-50',
+              isCollapsed
+                ? 'top-0 left-0 w-full h-full rounded-xl bg-opacity-0 hover:bg-opacity-30'
+                : 'top-3 -left-8 rounded-l-full bg-opacity-50 backdrop-blur-md'
+            )}
+            variant='solid'
+            color='primary'
+            size='sm'
+            onPress={() => setIsCollapsed(!isCollapsed)}
+          >
+            <FaRegHandPointRight />
+          </Button>
+        )}
+        {isSmallScreen && (
+          <CardHeader
+            data-header
+            className='flex-row justify-center pt-4'
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            <div className='w-24 h-2 rounded-full bg-content2-foreground shadow-sm' />
+          </CardHeader>
+        )}
+        <CardBody>
+          <div className='grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center overflow-hidden p-6 md:p-2 m-0'>
+            <div className='relative col-span-6 md:col-span-4 flex justify-center'>
+              <Image
+                alt='Album cover'
+                className='object-cover'
+                classNames={{
+                  wrapper: 'w-36 aspect-square md:w-24 flex',
+                  img: 'block w-full h-full',
+                }}
+                shadow='md'
+                src={cover}
+                width='100%'
+              />
+            </div>
+
+            <div className='flex flex-col col-span-6 md:col-span-8'>
+              <div className='flex flex-col gap-0'>
+                <h1 className='font-medium truncate'>{title}</h1>
+                <p className='text-xs text-foreground/80 truncate'>{artist}</p>
+              </div>
+
+              <div className='flex flex-col'>
+                <Slider
+                  aria-label='Music progress'
+                  classNames={{
+                    track: 'bg-default-500/30 border-none',
+                    thumb: 'w-2 h-2 after:w-1.5 after:h-1.5',
+                    filler: 'rounded-full',
+                  }}
+                  color='foreground'
+                  value={currentProgress || 0}
+                  defaultValue={0}
+                  size='sm'
+                  onChange={(value) => {
+                    value = Array.isArray(value) ? value[0] : value;
+                    const audio = audioRef.current;
+                    if (audio) {
+                      audio.currentTime = (value / 100) * duration;
+                    }
+                  }}
+                />
+                <div className='flex justify-between h-3'>
+                  <p className='text-xs'>
+                    {Math.floor(currentTime / 60)}:
+                    {Math.floor(currentTime % 60)
+                      .toString()
+                      .padStart(2, '0')}
+                  </p>
+                  <p className='text-xs text-foreground/50'>
+                    {Math.floor(duration / 60)}:
+                    {Math.floor(duration % 60)
+                      .toString()
+                      .padStart(2, '0')}
+                  </p>
+                </div>
+              </div>
+
+              <div className='flex w-full items-center justify-center'>
+                <Tooltip
+                  content={
+                    mode === PlayMode.Loop
+                      ? '列表循环'
+                      : mode === PlayMode.Random
+                        ? '随机播放'
+                        : '单曲循环'
+                  }
+                >
+                  <Button
+                    isIconOnly
+                    className='data-[hover]:bg-foreground/10 text-lg md:text-medium'
+                    radius='full'
+                    variant='light'
+                    size='md'
+                    onPress={changeMode}
+                  >
+                    {mode === PlayMode.Loop && (
+                      <FaRepeat className='text-foreground/80' />
+                    )}
+                    {mode === PlayMode.Random && (
+                      <FaShuffle className='text-foreground/80' />
+                    )}
+                    {mode === PlayMode.Single && (
+                      <TbRepeatOnce className='text-foreground/80 text-xl' />
+                    )}
+                  </Button>
+                </Tooltip>
+                <Tooltip content='上一首'>
+                  <Button
+                    isIconOnly
+                    className='data-[hover]:bg-foreground/10 text-2xl md:text-xl'
+                    radius='full'
+                    variant='light'
+                    size='md'
+                    onPress={pressPrevious}
+                  >
+                    <BiSolidSkipPreviousCircle />
+                  </Button>
+                </Tooltip>
+                <Tooltip content={isPlaying ? '暂停' : '播放'}>
+                  <Button
+                    isIconOnly
+                    className='data-[hover]:bg-foreground/10 text-3xl md:text-3xl'
+                    radius='full'
+                    variant='light'
+                    size='lg'
+                    onPress={() => {
+                      if (isPlaying) {
+                        audioRef.current?.pause();
+                        setStorageAutoPlay(false);
+                      } else {
+                        audioRef.current?.play();
+                      }
+                    }}
+                  >
+                    {isPlaying ? <FaPause /> : <FaPlay className='ml-1' />}
+                  </Button>
+                </Tooltip>
+                <Tooltip content='下一首'>
+                  <Button
+                    isIconOnly
+                    className='data-[hover]:bg-foreground/10 text-2xl md:text-xl'
+                    radius='full'
+                    variant='light'
+                    size='md'
+                    onPress={pressNext}
+                  >
+                    <BiSolidSkipNextCircle />
+                  </Button>
+                </Tooltip>
+                <Popover
+                  placement='top'
+                  classNames={{
+                    content: 'bg-opacity-30 backdrop-blur-md',
+                  }}
+                >
+                  <PopoverTrigger>
+                    <Button
+                      isIconOnly
+                      className='data-[hover]:bg-foreground/10 text-xl md:text-xl'
+                      radius='full'
+                      variant='light'
+                      size='md'
+                    >
+                      <VolumeHighIcon />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <Slider
+                      orientation='vertical'
+                      showTooltip
+                      aria-label='Volume'
+                      className='h-40'
+                      color='primary'
+                      defaultValue={volume}
+                      onChange={(value) => {
+                        value = Array.isArray(value) ? value[0] : value;
+                        volumeChange(value);
+                      }}
+                      startContent={<VolumeHighIcon className='text-2xl' />}
+                      size='sm'
+                      endContent={<VolumeLowIcon className='text-2xl' />}
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}

packages/napcat-webui-frontend/src/components/button/add_button.tsx

@@ -18,7 +18,7 @@ import {
 } from '../icons';
 
 export interface AddButtonProps {
-  onOpen: (key: keyof OneBotConfig['network']) => void;
+  onOpen: (key: keyof OneBotConfig['network']) => void
 }
 
 const AddButton: React.FC<AddButtonProps> = (props) => {
@@ -33,7 +33,7 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
     >
       <DropdownTrigger>
         <Button
-          className="bg-default-100/50 hover:bg-default-200/50 text-default-700 backdrop-blur-md"
+          color='primary'
           startContent={<IoAddCircleOutline className='text-2xl' />}
         >
           新建
@@ -41,7 +41,7 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
       </DropdownTrigger>
       <DropdownMenu
         aria-label='Create Network Config'
-        color='default'
+        color='primary'
         variant='flat'
         onAction={(key) => {
           onOpen(key as keyof OneBotConfig['network']);

packages/napcat-webui-frontend/src/components/button/save_buttons.tsx

@@ -4,11 +4,11 @@ import toast from 'react-hot-toast';
 import { IoMdRefresh } from 'react-icons/io';
 
 export interface SaveButtonsProps {
-  onSubmit: () => void;
-  reset: () => void;
-  refresh?: () => void;
-  isSubmitting: boolean;
-  className?: string;
+  onSubmit: () => void
+  reset: () => void
+  refresh?: () => void
+  isSubmitting: boolean
+  className?: string
 }
 
 const SaveButtons: React.FC<SaveButtonsProps> = ({
@@ -20,15 +20,13 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
 }) => (
   <div
     className={clsx(
-      'w-full flex flex-col justify-center gap-3',
+      '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
-        radius="full"
-        variant="flat"
-        className="font-medium bg-default-100 text-default-600 dark:bg-default-50/50"
+        color='default'
         onPress={() => {
           reset();
           toast.success('重置成功');
@@ -38,8 +36,6 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
       </Button>
       <Button
         color='primary'
-        radius="full"
-        className="font-medium shadow-md shadow-primary/20"
         isLoading={isSubmitting}
         onPress={() => onSubmit()}
       >
@@ -48,12 +44,12 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
       {refresh && (
         <Button
           isIconOnly
+          color='secondary'
           radius='full'
           variant='flat'
-          className="text-default-500 bg-default-100 dark:bg-default-50/50"
           onPress={() => refresh()}
         >
-          <IoMdRefresh size={20} />
+          <IoMdRefresh size={24} />
         </Button>
       )}
     </div>

packages/napcat-webui-frontend/src/components/chat_input/modal.tsx

@@ -10,27 +10,14 @@ import {
 
 import ChatInput from '.';
 
-interface ChatInputModalProps {
-  children?: (onOpen: () => void) => React.ReactNode;
-}
-
-export default function ChatInputModal ({ children }: ChatInputModalProps) {
+export default function ChatInputModal () {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
   return (
     <>
-      {children ? children(onOpen) : (
-        <Button
-          onPress={onOpen}
-          color='primary'
-          radius='full'
-          variant='flat'
-          size='sm'
-          className="bg-primary/10 text-primary"
-        >
-          构造消息
-        </Button>
-      )}
+      <Button onPress={onOpen} color='primary' radius='full' variant='flat'>
+        构造聊天消息
+      </Button>
       <Modal
         size='4xl'
         scrollBehavior='inside'

packages/napcat-webui-frontend/src/components/code_editor.tsx

@@ -1,126 +1,55 @@
-import React, { useImperativeHandle, useEffect, useState } from 'react';
-import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
-import { json } from '@codemirror/lang-json';
-import { oneDark } from '@codemirror/theme-one-dark';
+import Editor, { OnMount, loader } from '@monaco-editor/react';
+
+import React from 'react';
+
 import { useTheme } from '@/hooks/use-theme';
-import { EditorView } from '@codemirror/view';
-import clsx from 'clsx';
 
-const getLanguageExtension = (lang?: string) => {
-  switch (lang) {
-    case 'json': return json();
-    default: return [];
-  }
-};
+import monaco from '@/monaco';
 
-export interface CodeEditorProps {
-  value?: string;
-  defaultValue?: string;
-  language?: string;
-  defaultLanguage?: string;
-  onChange?: (value: string | undefined) => void;
-  height?: string;
-  options?: any;
-  onMount?: any;
-}
-
-export interface CodeEditorRef {
-  getValue: () => string;
-}
-
-const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>((props, ref) => {
-  const { isDark } = useTheme();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [val, setVal] = useState(props.value || props.defaultValue || '');
-  const internalRef = React.useRef<ReactCodeMirrorRef>(null);
-
-  useEffect(() => {
-    if (props.value !== undefined) {
-      setVal(props.value);
-    }
-  }, [props.value]);
-
-  useImperativeHandle(ref, () => ({
-    getValue: () => {
-      // Prefer getting dynamic value from view, fallback to state
-      return internalRef.current?.view?.state.doc.toString() || val;
-    }
-  }));
-
-  const customTheme = EditorView.theme({
-    "&": {
-      fontSize: "14px",
-      height: "100% !important",
-    },
-    ".cm-scroller": {
-      fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, monospace",
-      lineHeight: "1.6",
-      overflow: "auto !important",
-      height: "100% !important",
-    },
-    ".cm-gutters": {
-      backgroundColor: "transparent",
-      borderRight: "none",
-      color: isDark ? "#ffffff50" : "#00000040",
-    },
-    ".cm-gutterElement": {
-      paddingLeft: "12px",
-      paddingRight: "12px",
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "transparent",
-      color: isDark ? "#fff" : "#000",
-    },
-    ".cm-content": {
-      caretColor: isDark ? "#fff" : "#000",
-      paddingTop: "12px",
-      paddingBottom: "12px",
-    },
-    ".cm-activeLine": {
-      backgroundColor: isDark ? "#ffffff10" : "#00000008",
-    },
-    ".cm-selectionMatch": {
-      backgroundColor: isDark ? "#ffffff20" : "#00000010",
-    },
-  });
-
-  const extensions = [
-    customTheme,
-    getLanguageExtension(props.language || props.defaultLanguage),
-    props.options?.wordWrap === 'on' ? EditorView.lineWrapping : [],
-    props.options?.readOnly ? EditorView.editable.of(false) : [],
-  ].flat();
-
-  return (
-    <div
-      style={{ fontSize: props.options?.fontSize || 14, height: props.height || '100%', display: 'flex', flexDirection: 'column' }}
-      className={clsx(
-        'rounded-xl border overflow-hidden transition-colors',
-        isDark
-          ? 'border-white/10 bg-[#282c34]'
-          : 'border-default-200 bg-white'
-      )}
-    >
-      <CodeMirror
-        ref={internalRef}
-        value={props.value ?? props.defaultValue}
-        height="100%"
-        className="h-full w-full"
-        theme={isDark ? oneDark : 'light'}
-        extensions={extensions}
-        onChange={(value) => {
-          setVal(value);
-          props.onChange?.(value);
-        }}
-        readOnly={props.options?.readOnly}
-        basicSetup={{
-          lineNumbers: props.options?.lineNumbers !== 'off',
-          foldGutter: props.options?.folding !== false,
-          highlightActiveLine: props.options?.renderLineHighlight !== 'none',
-        }}
-      />
-    </div>
-  );
+loader.config({
+  monaco,
+  paths: {
+    vs: '/webui/monaco-editor/min/vs',
+  },
 });
 
+loader.config({
+  'vs/nls': {
+    availableLanguages: { '*': 'zh-cn' },
+  },
+});
+
+export interface CodeEditorProps extends React.ComponentProps<typeof Editor> {
+  test?: string
+}
+
+export type CodeEditorRef = monaco.editor.IStandaloneCodeEditor;
+
+const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>(
+  (props, ref) => {
+    const { isDark } = useTheme();
+
+    const handleEditorDidMount: OnMount = (editor, monaco) => {
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(editor);
+        } else {
+          (ref as React.RefObject<CodeEditorRef>).current = editor;
+        }
+      }
+      if (props.onMount) {
+        props.onMount(editor, monaco);
+      }
+    };
+
+    return (
+      <Editor
+        {...props}
+        onMount={handleEditorDidMount}
+        theme={isDark ? 'vs-dark' : 'light'}
+      />
+    );
+  }
+);
+
 export default CodeEditor;

packages/napcat-webui-frontend/src/components/display_card/common_card.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@heroui/button';
+import { Button, ButtonGroup } from '@heroui/button';
 import { Switch } from '@heroui/switch';
-import clsx from 'clsx';
 import { useState } from 'react';
 import { CgDebug } from 'react-icons/cg';
 import { FiEdit3 } from 'react-icons/fi';
@@ -11,26 +10,27 @@ import DisplayCardContainer from './container';
 type NetworkType = OneBotConfig['network'];
 
 export type NetworkDisplayCardFields<T extends keyof NetworkType> = Array<{
-  label: string;
-  value: NetworkType[T][0][keyof NetworkType[T][0]];
+  label: string
+  value: NetworkType[T][0][keyof NetworkType[T][0]]
   render?: (
     value: NetworkType[T][0][keyof NetworkType[T][0]]
-  ) => React.ReactNode;
+  ) => React.ReactNode
 }>;
 
 export interface NetworkDisplayCardProps<T extends keyof NetworkType> {
-  data: NetworkType[T][0];
-  typeLabel: string;
-  fields: NetworkDisplayCardFields<T>;
-  onEdit: () => void;
-  onEnable: () => Promise<void>;
-  onDelete: () => Promise<void>;
-  onEnableDebug: () => Promise<void>;
-  showType?: boolean;
+  data: NetworkType[T][0]
+  showType?: boolean
+  typeLabel: string
+  fields: NetworkDisplayCardFields<T>
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
 }
 
-const NetworkDisplayCard = <T extends keyof NetworkType> ({
+const NetworkDisplayCard = <T extends keyof NetworkType>({
   data,
+  showType,
   typeLabel,
   fields,
   onEdit,
@@ -56,146 +56,79 @@ const NetworkDisplayCard = <T extends keyof NetworkType> ({
     onEnableDebug().finally(() => setEditing(false));
   };
 
-  const isFullWidthField = (label: string) => ['URL', 'Token', 'AccessToken'].includes(label);
-
   return (
     <DisplayCardContainer
-      className="w-full max-w-[420px]"
       action={
-        <div className="flex gap-2 w-full">
+        <ButtonGroup
+          fullWidth
+          isDisabled={editing}
+          radius='sm'
+          size='sm'
+          variant='flat'
+        >
           <Button
-            fullWidth
-            radius='full'
-            size='sm'
-            variant='flat'
-            className="flex-1 bg-default-100 dark:bg-default-50 text-default-600 font-medium hover:bg-warning/20 hover:text-warning transition-colors"
+            color='warning'
             startContent={<FiEdit3 size={16} />}
             onPress={onEdit}
-            isDisabled={editing}
           >
             编辑
           </Button>
 
           <Button
-            fullWidth
-            radius='full'
-            size='sm'
+            color={debug ? 'secondary' : 'success'}
             variant='flat'
-            className={clsx(
-              "flex-1 bg-default-100 dark:bg-default-50 text-default-600 font-medium transition-colors",
-              debug
-                ? "hover:bg-secondary/20 hover:text-secondary data-[hover=true]:text-secondary"
-                : "hover:bg-success/20 hover:text-success data-[hover=true]:text-success"
-            )}
-            startContent={<CgDebug size={16} />}
+            startContent={
+              <CgDebug
+                style={{
+                  width: '16px',
+                  height: '16px',
+                  minWidth: '16px',
+                  minHeight: '16px',
+                }}
+              />
+            }
             onPress={handleEnableDebug}
-            isDisabled={editing}
           >
             {debug ? '关闭调试' : '开启调试'}
           </Button>
           <Button
-            fullWidth
-            radius='full'
-            size='sm'
+            className='bg-danger/20 text-danger hover:bg-danger/30 transition-colors'
             variant='flat'
-            className='flex-1 bg-default-100 dark:bg-default-50 text-default-600 font-medium hover:bg-danger/20 hover:text-danger transition-colors'
             startContent={<MdDeleteForever size={16} />}
             onPress={handleDelete}
-            isDisabled={editing}
           >
             删除
           </Button>
-        </div>
+        </ButtonGroup>
       }
       enableSwitch={
         <Switch
           isDisabled={editing}
           isSelected={enable}
           onChange={handleEnable}
-          classNames={{
-            wrapper: "group-data-[selected=true]:bg-primary-400",
-          }}
         />
       }
-      title={typeLabel}
+      tag={showType && typeLabel}
+      title={name}
     >
-      <div className='grid grid-cols-2 gap-3'>
-        {(() => {
-          const targetFullField = fields.find(f => isFullWidthField(f.label));
-
-          if (targetFullField) {
-            // 模式1：存在全宽字段（如URL），布局为：
-            // Row 1: 名称 (全宽)
-            // Row 2: 全宽字段 (全宽)
-            return (
-              <>
-                <div
-                  className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors col-span-2'
-                >
-                  <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>名称</span>
-                  <div className="text-sm font-medium text-default-700 dark:text-white/90 truncate">
-                    {name}
-                  </div>
-                </div>
-                <div
-                  className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors col-span-2'
-                >
-                  <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>{targetFullField.label}</span>
-                  <div className="text-sm font-medium text-default-700 dark:text-white/90 truncate">
-                    {targetFullField.render
-                      ? targetFullField.render(targetFullField.value)
-                      : (
-                        <span className={clsx(
-                          typeof targetFullField.value === 'string' && (targetFullField.value.startsWith('http') || targetFullField.value.includes('.') || targetFullField.value.includes(':')) ? 'font-mono' : ''
-                        )}>
-                          {String(targetFullField.value)}
-                        </span>
-                      )}
-                  </div>
-                </div>
-              </>
-            );
-          } else {
-            // 模式2：无全宽字段，布局为 4 个小块 (2行 x 2列)
-            // Row 1: 名称 | Field 0
-            // Row 2: Field 1 | Field 2
-            const displayFields = fields.slice(0, 3);
-            return (
-              <>
-                <div
-                  className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors'
-                >
-                  <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>名称</span>
-                  <div className="text-sm font-medium text-default-700 dark:text-white/90 truncate">
-                    {name}
-                  </div>
-                </div>
-                {displayFields.map((field, index) => (
-                  <div
-                    key={index}
-                    className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors'
-                  >
-                    <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>{field.label}</span>
-                    <div className="text-sm font-medium text-default-700 dark:text-white/90 truncate">
-                      {field.render
-                        ? (
-                          field.render(field.value)
-                        )
-                        : (
-                          <span className={clsx(
-                            typeof field.value === 'string' && (field.value.startsWith('http') || field.value.includes('.') || field.value.includes(':')) ? 'font-mono' : ''
-                          )}>
-                            {String(field.value)}
-                          </span>
-                        )}
-                    </div>
-                  </div>
-                ))}
-                {/* 如果字段不足3个，可以补充空白块占位吗？或者是让它空着？用户说要高度一致。只要是grid，通常高度会被撑开。目前这样应该能保证最多2行。 */}
-              </>
-            );
-          }
-        })()}
+      <div className='grid grid-cols-2 gap-1'>
+        {fields.map((field, index) => (
+          <div
+            key={index}
+            className={`flex items-center gap-2 ${
+              field.label === 'URL' ? 'col-span-2' : ''
+            }`}
+          >
+            <span className='text-default-400'>{field.label}</span>
+            {field.render
+              ? (
+                field.render(field.value)
+              )
+              : (
+                <span>{field.value}</span>
+              )}
+          </div>
+        ))}
       </div>
     </DisplayCardContainer>
   );

packages/napcat-webui-frontend/src/components/display_card/container.tsx

@@ -1,24 +1,22 @@
 import { Card, CardBody, CardFooter, CardHeader } from '@heroui/card';
-import { useLocalStorage } from '@uidotdev/usehooks';
 import clsx from 'clsx';
-import key from '@/const/key';
 
+import { title } from '../primitives';
 
 export interface ContainerProps {
-  title: string;
-  tag?: React.ReactNode;
-  action: React.ReactNode;
-  enableSwitch: React.ReactNode;
-  children: React.ReactNode;
-  className?: string; // Add className prop
+  title: string
+  tag?: React.ReactNode
+  action: React.ReactNode
+  enableSwitch: React.ReactNode
+  children: React.ReactNode
 }
 
 export interface DisplayCardProps {
-  showType?: boolean;
-  onEdit: () => void;
-  onEnable: () => Promise<void>;
-  onDelete: () => Promise<void>;
-  onEnableDebug: () => Promise<void>;
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
 }
 
 const DisplayCardContainer: React.FC<ContainerProps> = ({
@@ -27,35 +25,31 @@ const DisplayCardContainer: React.FC<ContainerProps> = ({
   tag,
   enableSwitch,
   children,
-  className,
 }) => {
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
-
   return (
-    <Card className={clsx(
-      'backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm rounded-2xl overflow-hidden transition-all',
-      hasBackground ? 'bg-white/20 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40',
-      className
-    )}
-    >
-      <CardHeader className='p-4 pb-2 flex items-center justify-between gap-3'>
+    <Card className='bg-opacity-50 backdrop-blur-sm'>
+      <CardHeader className='pb-0 flex items-center'>
         {tag && (
-          <div className='text-center text-default-500 font-medium mb-1 absolute top-0 left-1/2 -translate-x-1/2 text-xs pointer-events-none bg-default-200/50 dark:bg-default-100/50 backdrop-blur-sm px-3 py-0.5 rounded-b-lg shadow-sm z-10'>
+          <div className='text-center text-default-400 mb-1 absolute top-0 left-1/2 -translate-x-1/2 text-sm pointer-events-none bg-warning-100 dark:bg-warning-50 px-2 rounded-b'>
             {tag}
           </div>
         )}
-        <div className='flex-1 min-w-0 mr-2'>
-          <div className='inline-flex items-center px-3 py-1 rounded-lg bg-default-100/50 dark:bg-white/10 border border-transparent dark:border-white/5'>
-            <span className='font-bold text-default-600 dark:text-white/90 text-sm truncate select-text'>
-              {_title}
-            </span>
-          </div>
-        </div>
-        <div className='flex-shrink-0'>{enableSwitch}</div>
+        <h2
+          className={clsx(
+            title({
+              color: 'foreground',
+              size: 'xs',
+              shadow: true,
+            }),
+            'truncate'
+          )}
+        >
+          {_title}
+        </h2>
+        <div className='ml-auto'>{enableSwitch}</div>
       </CardHeader>
-      <CardBody className='px-4 py-2 text-sm text-default-600'>{children}</CardBody>
-      <CardFooter className='px-4 pb-4 pt-2'>{action}</CardFooter>
+      <CardBody className='text-sm'>{children}</CardBody>
+      <CardFooter>{action}</CardFooter>
     </Card>
   );
 };

packages/napcat-webui-frontend/src/components/display_card/http_client.tsx

@@ -4,12 +4,12 @@ import NetworkDisplayCard from './common_card';
 import type { NetworkDisplayCardFields } from './common_card';
 
 interface HTTPClientDisplayCardProps {
-  data: OneBotConfig['network']['httpClients'][0];
-  showType?: boolean;
-  onEdit: () => void;
-  onEnable: () => Promise<void>;
-  onDelete: () => Promise<void>;
-  onEnableDebug: () => Promise<void>;
+  data: OneBotConfig['network']['httpClients'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
 }
 
 const HTTPClientDisplayCard: React.FC<HTTPClientDisplayCardProps> = (props) => {

packages/napcat-webui-frontend/src/components/display_card/http_server.tsx

@@ -4,12 +4,12 @@ import NetworkDisplayCard from './common_card';
 import type { NetworkDisplayCardFields } from './common_card';
 
 interface HTTPServerDisplayCardProps {
-  data: OneBotConfig['network']['httpServers'][0];
-  showType?: boolean;
-  onEdit: () => void;
-  onEnable: () => Promise<void>;
-  onDelete: () => Promise<void>;
-  onEnableDebug: () => Promise<void>;
+  data: OneBotConfig['network']['httpServers'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
 }
 
 const HTTPServerDisplayCard: React.FC<HTTPServerDisplayCardProps> = (props) => {

packages/napcat-webui-frontend/src/components/display_card/http_sse_server.tsx

@@ -4,12 +4,12 @@ import NetworkDisplayCard from './common_card';
 import type { NetworkDisplayCardFields } from './common_card';
 
 interface HTTPSSEServerDisplayCardProps {
-  data: OneBotConfig['network']['httpSseServers'][0];
-  showType?: boolean;
-  onEdit: () => void;
-  onEnable: () => Promise<void>;
-  onDelete: () => Promise<void>;
-  onEnableDebug: () => Promise<void>;
+  data: OneBotConfig['network']['httpSseServers'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
 }
 
 const HTTPSSEServerDisplayCard: React.FC<HTTPSSEServerDisplayCardProps> = (

packages/napcat-webui-frontend/src/components/display_card/ws_client.tsx

@@ -4,12 +4,12 @@ import NetworkDisplayCard from './common_card';
 import type { NetworkDisplayCardFields } from './common_card';
 
 interface WebsocketClientDisplayCardProps {
-  data: OneBotConfig['network']['websocketClients'][0];
-  showType?: boolean;
-  onEdit: () => void;
-  onEnable: () => Promise<void>;
-  onDelete: () => Promise<void>;
-  onEnableDebug: () => Promise<void>;
+  data: OneBotConfig['network']['websocketClients'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
 }
 
 const WebsocketClientDisplayCard: React.FC<WebsocketClientDisplayCardProps> = (

packages/napcat-webui-frontend/src/components/display_card/ws_server.tsx

@@ -4,12 +4,12 @@ import NetworkDisplayCard from './common_card';
 import type { NetworkDisplayCardFields } from './common_card';
 
 interface WebsocketServerDisplayCardProps {
-  data: OneBotConfig['network']['websocketServers'][0];
-  showType?: boolean;
-  onEdit: () => void;
-  onEnable: () => Promise<void>;
-  onDelete: () => Promise<void>;
-  onEnableDebug: () => Promise<void>;
+  data: OneBotConfig['network']['websocketServers'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
 }
 
 const WebsocketServerDisplayCard: React.FC<WebsocketServerDisplayCardProps> = (

packages/napcat-webui-frontend/src/components/display_network_item.tsx

@@ -1,14 +1,12 @@
 import { Card, CardBody } from '@heroui/card';
-import { useLocalStorage } from '@uidotdev/usehooks';
 import clsx from 'clsx';
-import key from '@/const/key';
-
 
+import { title } from '@/components/primitives';
 
 export interface NetworkItemDisplayProps {
-  count: number;
-  label: string;
-  size?: 'sm' | 'md';
+  count: number
+  label: string
+  size?: 'sm' | 'md'
 }
 
 const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
@@ -16,37 +14,38 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
   label,
   size = 'md',
 }) => {
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
-
   return (
     <Card
       className={clsx(
-        'backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm transition-all',
-        hasBackground
-          ? 'bg-white/10 dark:bg-black/10 hover:bg-white/20 dark:hover:bg-black/20'
-          : 'bg-white/60 dark:bg-black/40 hover:bg-white/70 dark:hover:bg-black/30',
+        'bg-opacity-60 shadow-sm md:rounded-3xl',
         size === 'md'
-          ? 'col-span-8 md:col-span-2'
-          : 'col-span-2 md:col-span-1'
+          ? '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='none'
+      shadow='sm'
     >
       <CardBody className='items-center md:gap-1 p-1 md:p-2'>
         <div
           className={clsx(
-            'flex-1 font-mono font-bold',
-            size === 'md' ? 'text-4xl md:text-5xl' : 'text-2xl md:text-3xl',
-            hasBackground ? 'text-white drop-shadow-sm' : 'text-default-700 dark:text-gray-200'
+            'flex-1',
+            size === 'md' ? 'text-2xl md:text-3xl' : 'text-xl md:text-2xl',
+            title({
+              color: size === 'md' ? 'pink' : 'yellow',
+              size,
+            })
           )}
         >
           {count}
         </div>
         <div
           className={clsx(
-            'whitespace-nowrap text-nowrap flex-shrink-0 font-medium',
-            size === 'md' ? 'text-sm' : 'text-xs',
-            hasBackground ? 'text-white/80' : 'text-default-500'
+            'whitespace-nowrap text-nowrap flex-shrink-0',
+            size === 'md' ? 'text-sm md:text-base' : 'text-xs md:text-sm',
+            title({
+              color: size === 'md' ? 'pink' : 'yellow',
+              shadow: true,
+              size: 'xxs',
+            })
           )}
         >
           {label}

packages/napcat-webui-frontend/src/components/effect_card.tsx

@@ -94,7 +94,7 @@ const HoverEffectCard: React.FC<HoverEffectCardProps> = (props) => {
         ref={lightRef}
         className={clsx(
           isShowLight ? 'opacity-100' : 'opacity-0',
-          'absolute rounded-full blur-[100px] filter transition-opacity duration-300 bg-gradient-to-r from-primary-400 to-secondary-400 w-[150px] h-[150px]',
+          'absolute rounded-full blur-[150px] filter transition-opacity duration-300 dark:bg-[#2850ff] bg-[#ff4132] w-[100px] h-[100px]',
           lightClassName
         )}
         style={{

packages/napcat-webui-frontend/src/components/file_manage/file_edit_modal.tsx

@@ -11,11 +11,11 @@ import {
 import CodeEditor from '@/components/code_editor';
 
 interface FileEditModalProps {
-  isOpen: boolean;
-  file: { path: string; content: string; } | null;
-  onClose: () => void;
-  onSave: () => void;
-  onContentChange: (newContent?: string) => void;
+  isOpen: boolean
+  file: { path: string; content: string } | null
+  onClose: () => void
+  onSave: () => void
+  onContentChange: (newContent?: string) => void
 }
 
 export default function FileEditModal ({
@@ -65,20 +65,12 @@ export default function FileEditModal ({
   return (
     <Modal size='full' isOpen={isOpen} onClose={onClose}>
       <ModalContent>
-        <ModalHeader className='flex items-center gap-2 border-b border-default-200/50'>
+        <ModalHeader className='flex items-center gap-2 bg-content2 bg-opacity-50'>
           <span>编辑文件</span>
           <Code className='text-xs'>{file?.path}</Code>
-          <div className="ml-auto text-xs text-default-400 font-normal px-2">
-            按 <span className="px-1 py-0.5 rounded border border-default-300 bg-default-100">Ctrl/Cmd + S</span> 保存
-          </div>
         </ModalHeader>
-        <ModalBody className='p-4 bg-content2/50'>
-          <div className='h-full' onKeyDown={(e) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === 's') {
-              e.preventDefault();
-              onSave();
-            }
-          }}>
+        <ModalBody className='p-0'>
+          <div className='h-full'>
             <CodeEditor
               height='100%'
               value={file?.content || ''}
@@ -88,7 +80,7 @@ export default function FileEditModal ({
             />
           </div>
         </ModalBody>
-        <ModalFooter className="border-t border-default-200/50">
+        <ModalFooter>
           <Button color='primary' variant='flat' onPress={onClose}>
             取消
           </Button>

packages/napcat-webui-frontend/src/components/file_manage/file_table.tsx

@@ -25,21 +25,21 @@ import { supportedPreviewExts } from './file_preview_modal';
 import ImageNameButton, { PreviewImage, imageExts } from './image_name_button';
 
 export interface FileTableProps {
-  files: FileInfo[];
-  currentPath: string;
-  loading: boolean;
-  sortDescriptor: SortDescriptor;
-  onSortChange: (descriptor: SortDescriptor) => void;
-  selectedFiles: Selection;
-  onSelectionChange: (selected: Selection) => void;
-  onDirectoryClick: (dirPath: string) => void;
-  onEdit: (filePath: string) => void;
-  onPreview: (filePath: string) => void;
-  onRenameRequest: (name: string) => void;
-  onMoveRequest: (name: string) => void;
-  onCopyPath: (fileName: string) => void;
-  onDelete: (filePath: string) => void;
-  onDownload: (filePath: string) => void;
+  files: FileInfo[]
+  currentPath: string
+  loading: boolean
+  sortDescriptor: SortDescriptor
+  onSortChange: (descriptor: SortDescriptor) => void
+  selectedFiles: Selection
+  onSelectionChange: (selected: Selection) => void
+  onDirectoryClick: (dirPath: string) => void
+  onEdit: (filePath: string) => void
+  onPreview: (filePath: string) => void
+  onRenameRequest: (name: string) => void
+  onMoveRequest: (name: string) => void
+  onCopyPath: (fileName: string) => void
+  onDelete: (filePath: string) => void
+  onDownload: (filePath: string) => void
 }
 
 const PAGE_SIZE = 20;
@@ -112,7 +112,7 @@ export default function FileTable ({
         selectedKeys={selectedFiles}
         selectionMode='multiple'
         bottomContent={
-          <div className='flex w-full justify-center p-2 border-t border-white/10'>
+          <div className='flex w-full justify-center'>
             <Pagination
               isCompact
               showControls
@@ -121,29 +121,21 @@ export default function FileTable ({
               page={page}
               total={pages}
               onChange={(page) => setPage(page)}
-              classNames={{
-                cursor: 'bg-primary shadow-lg',
-              }}
             />
           </div>
         }
-        classNames={{
-          wrapper: 'bg-white/60 dark:bg-black/40 backdrop-blur-xl border border-white/40 dark:border-white/10 shadow-sm p-0',
-          th: 'bg-white/40 dark:bg-white/5 backdrop-blur-md text-default-600',
-          td: 'group-data-[first=true]:first:before:rounded-none group-data-[first=true]:last:before:rounded-none',
-        }}
       >
         <TableHeader>
           <TableColumn key='name' allowsSorting>
             名称
           </TableColumn>
-          <TableColumn key='type' allowsSorting className='hidden md:table-cell'>
+          <TableColumn key='type' allowsSorting>
             类型
           </TableColumn>
-          <TableColumn key='size' allowsSorting className='hidden md:table-cell'>
+          <TableColumn key='size' allowsSorting>
             大小
           </TableColumn>
-          <TableColumn key='mtime' allowsSorting className='hidden md:table-cell'>
+          <TableColumn key='mtime' allowsSorting>
             修改时间
           </TableColumn>
           <TableColumn key='actions'>操作</TableColumn>
@@ -188,57 +180,57 @@ export default function FileTable ({
                             name={file.name}
                             isDirectory={file.isDirectory}
                           />
-                        }
+                      }
                       >
                         {file.name}
                       </Button>
                     )}
                 </TableCell>
-                <TableCell className='hidden md:table-cell'>{file.isDirectory ? '目录' : '文件'}</TableCell>
-                <TableCell className='hidden md:table-cell'>
+                <TableCell>{file.isDirectory ? '目录' : '文件'}</TableCell>
+                <TableCell>
                   {isNaN(file.size) || file.isDirectory
                     ? '-'
                     : `${file.size} 字节`}
                 </TableCell>
-                <TableCell className='hidden md:table-cell'>{new Date(file.mtime).toLocaleString()}</TableCell>
+                <TableCell>{new Date(file.mtime).toLocaleString()}</TableCell>
                 <TableCell>
-                  <ButtonGroup size='sm' variant='light'>
+                  <ButtonGroup size='sm'>
                     <Button
                       isIconOnly
-                      color='default'
-                      className='text-default-500 hover:text-primary'
+                      color='primary'
+                      variant='flat'
                       onPress={() => onRenameRequest(file.name)}
                     >
                       <BiRename />
                     </Button>
                     <Button
                       isIconOnly
-                      color='default'
-                      className='text-default-500 hover:text-primary'
+                      color='primary'
+                      variant='flat'
                       onPress={() => onMoveRequest(file.name)}
                     >
                       <FiMove />
                     </Button>
                     <Button
                       isIconOnly
-                      color='default'
-                      className='text-default-500 hover:text-primary'
+                      color='primary'
+                      variant='flat'
                       onPress={() => onCopyPath(file.name)}
                     >
                       <FiCopy />
                     </Button>
                     <Button
                       isIconOnly
-                      color='default'
-                      className='text-default-500 hover:text-primary'
+                      color='primary'
+                      variant='flat'
                       onPress={() => onDownload(filePath)}
                     >
                       <FiDownload />
                     </Button>
                     <Button
                       isIconOnly
-                      color='danger'
-                      className='text-danger hover:bg-danger/10'
+                      color='primary'
+                      variant='flat'
                       onPress={() => onDelete(filePath)}
                     >
                       <FiTrash2 />

packages/napcat-webui-frontend/src/components/hitokoto.tsx

@@ -1,13 +1,9 @@
 import { Button } from '@heroui/button';
 import { Tooltip } from '@heroui/tooltip';
-import { useLocalStorage } from '@uidotdev/usehooks';
 import { useRequest } from 'ahooks';
-import clsx from 'clsx';
 import toast from 'react-hot-toast';
-import { IoMdQuote } from 'react-icons/io';
 import { IoCopy, IoRefresh } from 'react-icons/io5';
 
-import key from '@/const/key';
 import { request } from '@/utils/request';
 
 import PageLoading from './page_loading';
@@ -19,17 +15,10 @@ export default function Hitokoto () {
     loading,
     run,
   } = useRequest(() => request.get<IHitokoto>('https://hitokoto.152710.xyz/'), {
+    pollingInterval: 10000,
     throttleWait: 1000,
   });
-  const backupData = {
-    hitokoto: '凡是过往，皆为序章。',
-    from: '暴风雨',
-    from_who: '莎士比亚',
-  };
-  const data = dataOri?.data || (error ? backupData : undefined);
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
-
+  const data = dataOri?.data;
   const onCopy = () => {
     try {
       const text = `${data?.hitokoto} —— ${data?.from} ${data?.from_who}`;
@@ -41,61 +30,44 @@ export default function Hitokoto () {
   };
   return (
     <div>
-      <div className='relative flex flex-col items-center justify-center p-6 min-h-[120px]'>
-        {loading && !data && <PageLoading />}
-        {data && (
-          <>
-            <IoMdQuote className={clsx(
-              "text-4xl mb-4",
-              hasBackground ? "text-white/30" : "text-primary/20"
-            )} />
-            <div className={clsx(
-              "text-xl font-medium tracking-wide leading-relaxed italic",
-              hasBackground ? "text-white drop-shadow-sm" : "text-default-700 dark:text-gray-200"
-            )}>
-              " {data?.hitokoto} "
-            </div>
-            <div className='mt-4 flex flex-col items-center text-sm'>
-              <span className={clsx(
-                'font-bold',
-                hasBackground ? 'text-white/90' : 'text-primary-500/80'
-              )}>—— {data?.from}</span>
-              {data?.from_who && <span className={clsx(
-                "text-xs mt-1",
-                hasBackground ? "text-white/70" : "text-default-400"
-              )}>{data?.from_who}</span>}
-            </div>
-          </>
-        )}
+      <div className='relative'>
+        {loading && <PageLoading />}
+        {error
+          ? (
+            <div className='text-primary-400'>一言加载失败：{error.message}</div>
+          )
+          : (
+            <>
+              <div>{data?.hitokoto}</div>
+              <div className='text-right'>
+                —— <span className='text-default-400'>{data?.from}</span>{' '}
+                {data?.from_who}
+              </div>
+            </>
+          )}
       </div>
       <div className='flex gap-2'>
         <Tooltip content='刷新' placement='top'>
           <Button
-            className={clsx(
-              "transition-colors",
-              hasBackground ? "text-white/60 hover:text-white" : "text-default-400 hover:text-primary"
-            )}
             onPress={run}
             size='sm'
             isLoading={loading}
             isIconOnly
             radius='full'
-            variant='light'
+            color='primary'
+            variant='flat'
           >
             <IoRefresh />
           </Button>
         </Tooltip>
         <Tooltip content='复制' placement='top'>
           <Button
-            className={clsx(
-              "transition-colors",
-              hasBackground ? "text-white/60 hover:text-white" : "text-default-400 hover:text-success"
-            )}
             onPress={onCopy}
             size='sm'
             isIconOnly
             radius='full'
-            variant='light'
+            color='success'
+            variant='flat'
           >
             <IoCopy />
           </Button>

packages/napcat-webui-frontend/src/components/input/file_input.tsx

@@ -7,7 +7,6 @@ export interface FileInputProps {
   onDelete?: () => Promise<void> | void;
   label?: string;
   accept?: string;
-  placeholder?: string;
 }
 
 const FileInput: React.FC<FileInputProps> = ({
@@ -15,7 +14,6 @@ const FileInput: React.FC<FileInputProps> = ({
   onDelete,
   label,
   accept,
-  placeholder,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -27,13 +25,8 @@ const FileInput: React.FC<FileInputProps> = ({
           ref={inputRef}
           label={label}
           type='file'
-          placeholder={placeholder || '选择文件'}
+          placeholder='选择文件'
           accept={accept}
-          classNames={{
-            inputWrapper:
-              'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
-            input: 'bg-transparent text-default-700 placeholder:text-default-400',
-          }}
           onChange={async (e) => {
             try {
               setIsLoading(true);

packages/napcat-webui-frontend/src/components/input/image_input.tsx

@@ -4,9 +4,9 @@ import { Input } from '@heroui/input';
 import { useRef } from 'react';
 
 export interface ImageInputProps {
-  onChange: (base64: string) => void;
-  value: string;
-  label?: string;
+  onChange: (base64: string) => void
+  value: string
+  label?: string
 }
 
 const ImageInput: React.FC<ImageInputProps> = ({ onChange, value, label }) => {
@@ -26,11 +26,6 @@ const ImageInput: React.FC<ImageInputProps> = ({ onChange, value, label }) => {
         type='file'
         placeholder='选择图片'
         accept='image/*'
-        classNames={{
-          inputWrapper:
-            'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
-          input: 'bg-transparent text-default-700 placeholder:text-default-400',
-        }}
         onChange={async (e) => {
           const file = e.target.files?.[0];
           if (file) {

packages/napcat-webui-frontend/src/components/log_com/history.tsx

@@ -2,11 +2,8 @@ import { Button } from '@heroui/button';
 import { Card, CardBody, CardHeader } from '@heroui/card';
 import { Select, SelectItem } from '@heroui/select';
 import type { Selection } from '@react-types/shared';
-import { useLocalStorage } from '@uidotdev/usehooks';
-import clsx from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 
-import key from '@/const/key';
 import { colorizeLogLevel } from '@/utils/terminal';
 
 import PageLoading from '../page_loading';
@@ -15,15 +12,15 @@ import type { XTermRef } from '../xterm';
 import LogLevelSelect from './log_level_select';
 
 export interface HistoryLogsProps {
-  list: string[];
-  onSelect: (name: string) => void;
-  selectedLog?: string;
-  refreshList: () => void;
-  refreshLog: () => void;
-  listLoading?: boolean;
-  logLoading?: boolean;
-  listError?: Error;
-  logContent?: string;
+  list: string[]
+  onSelect: (name: string) => void
+  selectedLog?: string
+  refreshList: () => void
+  refreshLog: () => void
+  listLoading?: boolean
+  logLoading?: boolean
+  listError?: Error
+  logContent?: string
 }
 const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
   const {
@@ -42,8 +39,6 @@ const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
   const [logLevel, setLogLevel] = useState<Selection>(
     new Set(['info', 'warn', 'error'])
   );
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
 
   const logToColored = (log: string) => {
     const logs = log
@@ -88,10 +83,7 @@ const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
   return (
     <>
       <title>历史日志 - NapCat WebUI</title>
-      <Card className={clsx(
-        'max-w-full h-full backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm',
-        hasBackground ? 'bg-white/20 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40'
-      )}>
+      <Card className='max-w-full h-full bg-opacity-50 backdrop-blur-sm'>
         <CardHeader className='flex-row justify-start gap-3'>
           <Select
             label='选择日志'
@@ -100,7 +92,7 @@ const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
             errorMessage={listError?.message}
             classNames={{
               trigger:
-                'bg-default-100/50 backdrop-blur-sm hover:!bg-default-200/50',
+                'hover:!bg-content3 bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60',
             }}
             placeholder='选择日志'
             onChange={(e) => {
@@ -126,13 +118,11 @@ const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
             selectedKeys={logLevel}
             onSelectionChange={setLogLevel}
           />
-          <div className='flex gap-2 ml-auto'>
-            <Button className='flex-shrink-0' onPress={onDownloadLog} size='sm' variant='flat' color='primary'>
-              下载日志
-            </Button>
-            <Button onPress={refreshList} size='sm' variant='flat'>刷新列表</Button>
-            <Button onPress={refreshLog} size='sm' variant='flat'>刷新日志</Button>
-          </div>
+          <Button className='flex-shrink-0' onPress={onDownloadLog}>
+            下载日志
+          </Button>
+          <Button onPress={refreshList}>刷新列表</Button>
+          <Button onPress={refreshLog}>刷新日志</Button>
         </CardHeader>
         <CardBody className='relative'>
           <PageLoading loading={logLoading} />

packages/napcat-webui-frontend/src/components/log_com/log_level_select.tsx

@@ -6,17 +6,17 @@ import type { Selection } from '@react-types/shared';
 import { LogLevel } from '@/const/enum';
 
 export interface LogLevelSelectProps {
-  selectedKeys: Selection;
-  onSelectionChange: (keys: SharedSelection) => void;
+  selectedKeys: Selection
+  onSelectionChange: (keys: SharedSelection) => void
 }
 const logLevelColor: {
   [key in LogLevel]:
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'primary'
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'warning'
+    | 'primary'
 } = {
   [LogLevel.DEBUG]: 'default',
   [LogLevel.INFO]: 'primary',
@@ -40,7 +40,7 @@ const LogLevelSelect = (props: LogLevelSelectProps) => {
       aria-label='Log Level'
       classNames={{
         label: 'mb-2',
-        trigger: 'bg-default-100/50 backdrop-blur-sm hover:!bg-default-200/50',
+        trigger: 'bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60',
         popoverContent: 'bg-opacity-50 backdrop-blur-sm',
       }}
       size='sm'

packages/napcat-webui-frontend/src/components/log_com/realtime.tsx

@@ -1,12 +1,9 @@
 import { Button } from '@heroui/button';
 import type { Selection } from '@react-types/shared';
-import { useLocalStorage } from '@uidotdev/usehooks';
-import clsx from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import { IoDownloadOutline } from 'react-icons/io5';
 
-import key from '@/const/key';
 import { colorizeLogLevelWithTag } from '@/utils/terminal';
 
 import WebUIManager, { Log } from '@/controllers/webui_manager';
@@ -21,8 +18,6 @@ const RealTimeLogs = () => {
     new Set(['info', 'warn', 'error'])
   );
   const [dataArr, setDataArr] = useState<Log[]>([]);
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
 
   const onDownloadLog = () => {
     const logContent = dataArr
@@ -96,10 +91,7 @@ const RealTimeLogs = () => {
   return (
     <>
       <title>实时日志 - NapCat WebUI</title>
-      <div className={clsx(
-        'flex items-center gap-2 p-2 rounded-2xl border backdrop-blur-sm transition-all shadow-sm mb-4',
-        hasBackground ? 'bg-white/20 dark:bg-black/10 border-white/40 dark:border-white/10' : 'bg-white/60 dark:bg-black/40 border-white/40 dark:border-white/10'
-      )}>
+      <div className='flex items-center gap-2'>
         <LogLevelSelect
           selectedKeys={logLevel}
           onSelectionChange={setLogLevel}
@@ -108,8 +100,6 @@ const RealTimeLogs = () => {
           className='flex-shrink-0'
           onPress={onDownloadLog}
           startContent={<IoDownloadOutline className='text-lg' />}
-          color='primary'
-          variant='flat'
         >
           下载日志
         </Button>

packages/napcat-webui-frontend/src/components/network_edit/generic_form.tsx

@@ -109,11 +109,6 @@ const GenericForm = <T extends keyof NetworkConfigType> ({
                           isDisabled={field.isDisabled}
                           label={field.label}
                           placeholder={field.placeholder}
-                          classNames={{
-                            inputWrapper:
-                              'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
-                            input: 'bg-transparent text-default-700 placeholder:text-default-400',
-                          }}
                         />
                       );
                     case 'select':
@@ -126,10 +121,6 @@ const GenericForm = <T extends keyof NetworkConfigType> ({
                           placeholder={field.placeholder}
                           selectedKeys={[controllerField.value as string]}
                           value={controllerField.value.toString()}
-                          classNames={{
-                            trigger: 'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
-                            value: 'text-default-700',
-                          }}
                         >
                           {field.options?.map((option) => (
                             <SelectItem key={option.key} value={option.value}>

packages/napcat-webui-frontend/src/components/onebot/api/debug.tsx

@@ -1,15 +1,13 @@
 import { Button } from '@heroui/button';
+import { Card, CardBody, CardHeader } from '@heroui/card';
 import { Input } from '@heroui/input';
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import { Tooltip } from '@heroui/tooltip';
-import { Tab, Tabs } from '@heroui/tabs';
-import { Chip } from '@heroui/chip';
+import { Snippet } from '@heroui/snippet';
 import { useLocalStorage } from '@uidotdev/usehooks';
-import clsx from 'clsx';
-import { useEffect, useState, useCallback } from 'react';
+import { motion } from 'motion/react';
+import { useEffect, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
-import { IoChevronDown, IoSend, IoSettingsSharp, IoCopy } from 'react-icons/io5';
-import { TbCode, TbMessageCode } from 'react-icons/tb';
+import { IoLink, IoSend } from 'react-icons/io5';
+import { PiCatDuotone } from 'react-icons/pi';
 
 import key from '@/const/key';
 import { OneBotHttpApiContent, OneBotHttpApiPath } from '@/const/ob_api';
@@ -19,7 +17,7 @@ import CodeEditor from '@/components/code_editor';
 import PageLoading from '@/components/page_loading';
 
 import { request } from '@/utils/request';
-
+import { parseAxiosResponse } from '@/utils/url';
 import { generateDefaultJson, parse } from '@/utils/zod';
 
 import DisplayStruct from './display_struct';
@@ -27,11 +25,10 @@ import DisplayStruct from './display_struct';
 export interface OneBotApiDebugProps {
   path: OneBotHttpApiPath;
   data: OneBotHttpApiContent;
-  adapterName?: string;
 }
 
 const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
-  const { path, data, adapterName } = props;
+  const { path, data } = props;
   const currentURL = new URL(window.location.origin);
   currentURL.port = '3000';
   const defaultHttpUrl = currentURL.href;
@@ -39,61 +36,21 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
     url: defaultHttpUrl,
     token: '',
   });
-
   const [requestBody, setRequestBody] = useState('{}');
   const [responseContent, setResponseContent] = useState('');
+  const [isCodeEditorOpen, setIsCodeEditorOpen] = useState(false);
+  const [isResponseOpen, setIsResponseOpen] = useState(false);
   const [isFetching, setIsFetching] = useState(false);
-  const [activeTab, setActiveTab] = useState<any>('request');
-  const [responseExpanded, setResponseExpanded] = useState(true);
-  const [responseStatus, setResponseStatus] = useState<{ code: number; text: string; } | null>(null);
-  const [responseHeight, setResponseHeight] = useLocalStorage('napcat_debug_response_height', 240); // 默认高度
-
+  const responseRef = useRef<HTMLDivElement>(null);
   const parsedRequest = parse(data.request);
   const parsedResponse = parse(data.response);
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
 
   const sendRequest = async () => {
     if (isFetching) return;
     setIsFetching(true);
-    setResponseStatus(null);
     const r = toast.loading('正在发送请求...');
-
     try {
       const parsedRequestBody = JSON.parse(requestBody);
-
-      // 如果有 adapterName，走后端转发
-      if (adapterName) {
-        request.post(`/api/Debug/call/${adapterName}`, {
-          action: path.replace(/^\//, ''), // 去掉开头的 /
-          params: parsedRequestBody
-        }, {
-          headers: {
-            Authorization: `Bearer ${localStorage.getItem('token')}`
-          }
-        }).then((res) => {
-          if (res.data.code === 0) {
-            setResponseContent(JSON.stringify(res.data.data, null, 2));
-            setResponseStatus({ code: 200, text: 'OK' });
-          } else {
-            setResponseContent(JSON.stringify(res.data, null, 2));
-            setResponseStatus({ code: 500, text: res.data.message });
-          }
-          setResponseExpanded(true);
-          toast.success('请求成功');
-        }).catch((err) => {
-          toast.error('请求失败：' + err.message);
-          setResponseContent(JSON.stringify({ error: err.message }, null, 2));
-          setResponseStatus({ code: 500, text: 'Error' });
-          setResponseExpanded(true);
-        }).finally(() => {
-          setIsFetching(false);
-          toast.dismiss(r);
-        });
-        return;
-      }
-
-      // 回退到旧逻辑 (直接请求)
       const requestURL = new URL(httpConfig.url);
       requestURL.pathname = path;
       request
@@ -101,23 +58,23 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
           headers: {
             Authorization: `Bearer ${httpConfig.token}`,
           },
-        }) // 移除 responseType: 'text'，以便 axios 自动解析 JSON
+          responseType: 'text',
+        })
         .then((res) => {
-          setResponseContent(JSON.stringify(res.data, null, 2));
-          setResponseStatus({ code: res.status, text: res.statusText });
-          setResponseExpanded(true);
-          toast.success('请求成功');
+          setResponseContent(parseAxiosResponse(res));
+          toast.success('请求发送完成，请查看响应');
         })
         .catch((err) => {
-          toast.error('请求失败：' + err.message);
-          setResponseContent(JSON.stringify(err.response?.data || { error: err.message }, null, 2));
-          if (err.response) {
-            setResponseStatus({ code: err.response.status, text: err.response.statusText });
-          }
-          setResponseExpanded(true);
+          toast.error('请求发送失败：' + err.message);
+          setResponseContent(parseAxiosResponse(err.response));
         })
         .finally(() => {
           setIsFetching(false);
+          setIsResponseOpen(true);
+          responseRef.current?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+          });
           toast.dismiss(r);
         });
     } catch (_error) {
@@ -130,249 +87,150 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
   useEffect(() => {
     setRequestBody(generateDefaultJson(data.request));
     setResponseContent('');
-    setResponseStatus(null);
   }, [path]);
 
-  // Height Resizing Logic
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    const startY = e.clientY;
-    const startHeight = responseHeight;
-
-    const handleMouseMove = (mv: MouseEvent) => {
-      const delta = startY - mv.clientY;
-      // 向上拖动 -> 增加高度
-      setResponseHeight(Math.max(100, Math.min(window.innerHeight - 200, startHeight + delta)));
-    };
-
-    const handleMouseUp = () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-  }, [responseHeight, setResponseHeight]);
-
-  const handleTouchStart = useCallback((e: React.TouchEvent) => {
-    // 阻止默认滚动行为可能需要谨慎，这里尽量只阻止 handle 上的
-    // e.preventDefault(); 
-    const touch = e.touches[0];
-    const startY = touch.clientY;
-    const startHeight = responseHeight;
-
-    const handleTouchMove = (mv: TouchEvent) => {
-      const mvTouch = mv.touches[0];
-      const delta = startY - mvTouch.clientY;
-      setResponseHeight(Math.max(100, Math.min(window.innerHeight - 200, startHeight + delta)));
-    };
-
-    const handleTouchEnd = () => {
-      document.removeEventListener('touchmove', handleTouchMove);
-      document.removeEventListener('touchend', handleTouchEnd);
-    };
-
-    document.addEventListener('touchmove', handleTouchMove);
-    document.addEventListener('touchend', handleTouchEnd);
-  }, [responseHeight, setResponseHeight]);
-
-
   return (
-    <section className='h-full flex flex-col overflow-hidden bg-transparent'>
-      {/* URL Bar */}
-      <div className='flex flex-wrap md:flex-nowrap items-center gap-2 p-2 md:p-4 pb-2 flex-shrink-0'>
-        <div className={clsx(
-          'flex-grow flex items-center gap-2 px-3 md:px-4 h-10 rounded-xl transition-all w-full md:w-auto',
-          hasBackground ? 'bg-white/5' : 'bg-black/5 dark:bg-white/5'
-        )}>
-          <Chip size="sm" variant="shadow" color="primary" className="font-bold text-[10px] h-5 min-w-[40px]">POST</Chip>
-          <span className={clsx(
-            'text-xs font-mono truncate select-all flex-1 opacity-50',
-            hasBackground ? 'text-white' : 'text-default-600'
-          )}>{path}</span>
-        </div>
-
-        <div className='flex items-center gap-2 flex-shrink-0 ml-auto'>
-          <Popover placement='bottom-end' backdrop='blur'>
-            <PopoverTrigger>
-              <Button size='sm' variant='light' radius='full' isIconOnly className='h-10 w-10 opacity-40 hover:opacity-100'>
-                <IoSettingsSharp className="text-lg" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className='w-[260px] p-3 rounded-xl border border-white/10 shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur-xl'>
-              <div className='flex flex-col gap-2'>
-                <p className='text-[10px] font-bold opacity-30 uppercase tracking-widest'>Debug Setup</p>
-                <Input label='Base URL' value={httpConfig.url} onChange={(e) => setHttpConfig({ ...httpConfig, url: e.target.value })} size='sm' variant='flat' />
-                <Input label='Token' value={httpConfig.token} onChange={(e) => setHttpConfig({ ...httpConfig, token: e.target.value })} size='sm' variant='flat' />
-              </div>
-            </PopoverContent>
-          </Popover>
-
-          <Button
-            onPress={sendRequest}
-            color='primary'
-            radius='full'
-            size='sm'
-            className='h-10 px-6 font-bold shadow-md shadow-primary/20 hover:scale-[1.02] active:scale-[0.98]'
-            isLoading={isFetching}
-            startContent={!isFetching && <IoSend className="text-xs" />}
-          >
-            发送
-          </Button>
-        </div>
+    <section className='p-4 pt-14 rounded-lg shadow-md'>
+      <h1 className='text-2xl font-bold mb-4 flex items-center gap-1 text-primary-400'>
+        <PiCatDuotone />
+        {data.description}
+      </h1>
+      <h1 className='text-lg font-bold mb-4'>
+        <Snippet
+          className='bg-default-50 bg-opacity-50 backdrop-blur-md'
+          symbol={<IoLink size={18} className='inline-block mr-1' />}
+          tooltipProps={{
+            content: '点击复制地址',
+          }}
+        >
+          {path}
+        </Snippet>
+      </h1>
+      <div className='flex gap-2 items-center'>
+        <Input
+          label='HTTP URL'
+          placeholder='输入 HTTP URL'
+          value={httpConfig.url}
+          onChange={(e) =>
+            setHttpConfig({ ...httpConfig, url: e.target.value })}
+        />
+        <Input
+          label='Token'
+          placeholder='输入 Token'
+          value={httpConfig.token}
+          onChange={(e) =>
+            setHttpConfig({ ...httpConfig, token: e.target.value })}
+        />
+        <Button
+          onPress={sendRequest}
+          color='primary'
+          size='lg'
+          radius='full'
+          isIconOnly
+          isDisabled={isFetching}
+        >
+          <IoSend />
+        </Button>
       </div>
-
-      <div className='flex-1 flex flex-col min-h-0 bg-transparent'>
-        <div className='px-4 flex flex-wrap items-center justify-between flex-shrink-0 min-h-[36px] gap-2 py-1'>
-          <Tabs
-            size="sm"
-            variant="underlined"
-            selectedKey={activeTab}
-            onSelectionChange={setActiveTab}
-            classNames={{
-              cursor: 'bg-primary h-0.5',
-              tab: 'px-0 mr-5 h-8',
-              tabList: 'p-0 border-none',
-              tabContent: 'text-[11px] font-bold opacity-30 group-data-[selected=true]:opacity-80 transition-opacity'
+      <Card
+        shadow='sm'
+        className='my-4 bg-opacity-50 backdrop-blur-md overflow-visible'
+      >
+        <CardHeader className='font-bold text-lg gap-1 pb-0'>
+          <span className='mr-2'>请求体</span>
+          <Button
+            color='warning'
+            variant='flat'
+            onPress={() => setIsCodeEditorOpen(!isCodeEditorOpen)}
+            size='sm'
+            radius='full'
+          >
+            {isCodeEditorOpen ? '收起' : '展开'}
+          </Button>
+        </CardHeader>
+        <CardBody>
+          <motion.div
+            ref={responseRef}
+            initial={{ opacity: 0, height: 0 }}
+            animate={{
+              opacity: isCodeEditorOpen ? 1 : 0,
+              height: isCodeEditorOpen ? 'auto' : 0,
             }}
           >
-            <Tab key="request" title="请求参数" />
-            <Tab key="docs" title="接口定义" />
-          </Tabs>
-          <div className='flex items-center gap-1 ml-auto'>
-            <ChatInputModal>
-              {(onOpen) => (
-                <Tooltip content="构造消息 (CQ码)" closeDelay={0}>
-                  <Button
-                    isIconOnly
-                    size='sm'
-                    variant='light'
-                    radius='full'
-                    className='h-7 w-7 text-primary/80 bg-primary/10 hover:bg-primary/20'
-                    onPress={onOpen}
-                  >
-                    <TbMessageCode size={16} />
-                  </Button>
-                </Tooltip>
-              )}
-            </ChatInputModal>
+            <CodeEditor
+              value={requestBody}
+              onChange={(value) => setRequestBody(value ?? '')}
+              language='json'
+              height='400px'
+            />
 
-            <Tooltip content="生成示例参数" closeDelay={0}>
+            <div className='flex justify-end gap-1'>
+              <ChatInputModal />
               <Button
-                isIconOnly
-                size='sm'
-                variant='light'
-                radius='full'
-                className='h-7 w-7 text-default-400 hover:text-primary hover:bg-default-100/50'
-                onPress={() => setRequestBody(generateDefaultJson(data.request))}
+                color='primary'
+                variant='flat'
+                onPress={() =>
+                  setRequestBody(generateDefaultJson(data.request))}
               >
-                <TbCode size={16} />
+                填充示例请求体
               </Button>
-            </Tooltip>
-          </div>
-        </div>
-
-        <div className='flex-1 min-h-0 relative px-3 pb-2 mt-1'>
-          <div className={clsx(
-            'h-full transition-all',
-            activeTab !== 'request' && 'rounded-xl overflow-y-auto no-scrollbar',
-            hasBackground ? 'bg-transparent' : (activeTab !== 'request' && 'bg-white/10 dark:bg-black/10')
-          )}>
-            {activeTab === 'request' ? (
-              <CodeEditor
-                value={requestBody}
-                onChange={(value) => setRequestBody(value ?? '')}
-                language='json'
-                options={{
-                  minimap: { enabled: false },
-                  fontSize: 12,
-                  scrollBeyondLastLine: false,
-                  wordWrap: 'on',
-                  padding: { top: 12 },
-                  lineNumbersMinChars: 3
-                }}
-              />
-            ) : (
-              <div className='p-6 space-y-10'>
-                <section>
-                  <h3 className='text-[10px] font-bold opacity-20 uppercase tracking-[0.2em] mb-4'>Request - 请求数据结构</h3>
-                  <DisplayStruct schema={parsedRequest} />
-                </section>
-                <div className='h-px bg-white/5 w-full' />
-                <section>
-                  <h3 className='text-[10px] font-bold opacity-20 uppercase tracking-[0.2em] mb-4'>Response - 返回数据结构</h3>
-                  <DisplayStruct schema={parsedResponse} />
-                </section>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Response Area */}
-      <div className='flex-shrink-0 px-3 pb-3'>
-        <div
-          className={clsx(
-            'rounded-xl transition-all overflow-hidden border border-white/5 flex flex-col',
-            hasBackground ? 'bg-white/5' : 'bg-white/5 dark:bg-black/5'
-          )}
-        >
-          {/* Header & Resize Handle */}
-          <div
-            className='flex items-center justify-between px-4 py-2 cursor-pointer hover:bg-white/5 transition-all select-none relative group'
-            onClick={() => setResponseExpanded(!responseExpanded)}
+            </div>
+          </motion.div>
+        </CardBody>
+      </Card>
+      <Card
+        shadow='sm'
+        className='my-4 relative bg-opacity-50 backdrop-blur-md'
+      >
+        <PageLoading loading={isFetching} />
+        <CardHeader className='font-bold text-lg gap-1 pb-0'>
+          <span className='mr-2'>响应</span>
+          <Button
+            color='warning'
+            variant='flat'
+            onPress={() => setIsResponseOpen(!isResponseOpen)}
+            size='sm'
+            radius='full'
           >
-            {/* Invisble Resize Area that becomes visible/active */}
-            {responseExpanded && (
-              <div
-                className="absolute -top-1 left-0 w-full h-3 cursor-ns-resize z-50 flex items-center justify-center opacity-0 hover:opacity-100 group-hover:opacity-100 transition-opacity"
-                onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e); }}
-                onTouchStart={(e) => { e.stopPropagation(); handleTouchStart(e); }}
-                onClick={(e) => e.stopPropagation()}
-              >
-                <div className="w-12 h-1 bg-white/20 rounded-full" />
-              </div>
-            )}
-
-            <div className='flex items-center gap-2'>
-              <IoChevronDown className={clsx('text-[10px] transition-transform duration-300 opacity-20', !responseExpanded && '-rotate-90')} />
-              <span className='text-[10px] font-semibold tracking-wide opacity-30 uppercase'>Response</span>
-            </div>
-            <div className='flex items-center gap-2'>
-              {responseStatus && (
-                <Chip size="sm" variant="flat" color={responseStatus.code >= 200 && responseStatus.code < 300 ? 'success' : 'danger'} className="h-4 text-[9px] font-mono px-1.5 opacity-50">
-                  {responseStatus.code}
-                </Chip>
-              )}
-              <Button size='sm' variant='light' isIconOnly radius='full' className='h-6 w-6 opacity-20 hover:opacity-80 transition-opacity' onClick={(e) => { e.stopPropagation(); navigator.clipboard.writeText(responseContent); toast.success('已复制'); }}>
-                <IoCopy size={10} />
-              </Button>
-            </div>
-          </div>
-
-          {/* Response Content - Code Editor */}
-          {responseExpanded && (
-            <div style={{ height: responseHeight }} className="relative bg-transparent">
-              <PageLoading loading={isFetching} />
-              <CodeEditor
-                value={responseContent || '// Waiting for response...'}
-                language='json'
-                options={{
-                  minimap: { enabled: false },
-                  fontSize: 11,
-                  lineNumbers: 'off',
-                  scrollBeyondLastLine: false,
-                  wordWrap: 'on',
-                  readOnly: true,
-                  folding: true,
-                  padding: { top: 8, bottom: 8 },
-                  renderLineHighlight: 'none',
-                  automaticLayout: true
-                }}
-              />
-            </div>
-          )}
-        </div>
+            {isResponseOpen ? '收起' : '展开'}
+          </Button>
+          <Button
+            color='success'
+            variant='flat'
+            onPress={() => {
+              navigator.clipboard.writeText(responseContent);
+              toast.success('响应内容已复制到剪贴板');
+            }}
+            size='sm'
+            radius='full'
+          >
+            复制
+          </Button>
+        </CardHeader>
+        <CardBody>
+          <motion.div
+            className='overflow-y-auto text-sm'
+            initial={{ opacity: 0, height: 0 }}
+            animate={{
+              opacity: isResponseOpen ? 1 : 0,
+              height: isResponseOpen ? 300 : 0,
+            }}
+          >
+            <pre>
+              <code>
+                {responseContent || (
+                  <div className='text-gray-400'>暂无响应</div>
+                )}
+              </code>
+            </pre>
+          </motion.div>
+        </CardBody>
+      </Card>
+      <div className='p-2 md:p-4 border border-default-50 dark:border-default-200 rounded-lg backdrop-blur-sm'>
+        <h2 className='text-xl font-semibold mb-2'>请求体结构</h2>
+        <DisplayStruct schema={parsedRequest} />
+        <h2 className='text-xl font-semibold mt-4 mb-2'>响应体结构</h2>
+        <DisplayStruct schema={parsedResponse} />
       </div>
     </section>
   );

packages/napcat-webui-frontend/src/components/onebot/api/display_struct.tsx

@@ -8,15 +8,15 @@ import { TbSquareRoundedChevronRightFilled } from 'react-icons/tb';
 import type { LiteralValue, ParsedSchema } from '@/utils/zod';
 
 interface DisplayStructProps {
-  schema: ParsedSchema | ParsedSchema[];
+  schema: ParsedSchema | ParsedSchema[]
 }
 
 const SchemaType = ({
   type,
   value,
 }: {
-  type: string;
-  value?: LiteralValue;
+  type: string
+  value?: LiteralValue
 }) => {
   let name = type;
   switch (type) {
@@ -57,7 +57,7 @@ const SchemaType = ({
 };
 
 const SchemaLabel: React.FC<{
-  schema: ParsedSchema;
+  schema: ParsedSchema
 }> = ({ schema }) => (
   <>
     {Array.isArray(schema.type)
@@ -81,8 +81,8 @@ const SchemaLabel: React.FC<{
 );
 
 const SchemaContainer: React.FC<{
-  schema: ParsedSchema;
-  children: React.ReactNode;
+  schema: ParsedSchema
+  children: React.ReactNode
 }> = ({ schema, children }) => {
   const [expanded, setExpanded] = useState(false);
 
@@ -126,7 +126,7 @@ const SchemaContainer: React.FC<{
   );
 };
 
-const RenderSchema: React.FC<{ schema: ParsedSchema; }> = ({ schema }) => {
+const RenderSchema: React.FC<{ schema: ParsedSchema }> = ({ schema }) => {
   if (schema.type === 'object') {
     return (
       <SchemaContainer schema={schema}>
@@ -193,7 +193,7 @@ const RenderSchema: React.FC<{ schema: ParsedSchema; }> = ({ schema }) => {
 
 const DisplayStruct: React.FC<DisplayStructProps> = ({ schema }) => {
   return (
-    <div className=''>
+    <div className='p-4 bg-content2 rounded-lg bg-opacity-50'>
       {Array.isArray(schema)
         ? (
           schema.map((s, i) => <RenderSchema key={s.name || i} schema={s} />)

packages/napcat-webui-frontend/src/components/onebot/api/nav_list.tsx

@@ -1,179 +1,85 @@
+import { Card, CardBody } from '@heroui/card';
 import { Input } from '@heroui/input';
-import { useLocalStorage } from '@uidotdev/usehooks';
 import clsx from 'clsx';
-import { AnimatePresence, motion } from 'motion/react';
-import { useMemo, useState } from 'react';
-import { TbChevronRight, TbFolder, TbSearch } from 'react-icons/tb';
+import { motion } from 'motion/react';
+import { useState } from 'react';
 
-import key from '@/const/key';
-import oneBotHttpApiGroup from '@/const/ob_api/group';
-import oneBotHttpApiMessage from '@/const/ob_api/message';
-import oneBotHttpApiSystem from '@/const/ob_api/system';
-import oneBotHttpApiUser from '@/const/ob_api/user';
 import type { OneBotHttpApi, OneBotHttpApiPath } from '@/const/ob_api';
 
 export interface OneBotApiNavListProps {
-  data: OneBotHttpApi;
-  selectedApi: OneBotHttpApiPath;
-  onSelect: (apiName: OneBotHttpApiPath) => void;
-  openSideBar: boolean;
-  onToggle?: (isOpen: boolean) => void;
+  data: OneBotHttpApi
+  selectedApi: OneBotHttpApiPath
+  onSelect: (apiName: OneBotHttpApiPath) => void
+  openSideBar: boolean
 }
 
 const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
-  const { data, selectedApi, onSelect, openSideBar, onToggle } = props;
+  const { data, selectedApi, onSelect, openSideBar } = props;
   const [searchValue, setSearchValue] = useState('');
-  const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
-
-  const groups = useMemo(() => {
-    const rawGroups = [
-      { id: 'user', label: '账号相关', keys: Object.keys(oneBotHttpApiUser) },
-      { id: 'message', label: '消息相关', keys: Object.keys(oneBotHttpApiMessage) },
-      { id: 'group', label: '群聊相关', keys: Object.keys(oneBotHttpApiGroup) },
-      { id: 'system', label: '系统操作', keys: Object.keys(oneBotHttpApiSystem) },
-    ];
-
-    return rawGroups.map(g => {
-      const apis = g.keys
-        .filter(k => k in data)
-        .map(k => ({ path: k as OneBotHttpApiPath, ...data[k as OneBotHttpApiPath] }))
-        .filter(api =>
-          api.path.toLowerCase().includes(searchValue.toLowerCase()) ||
-          api.description?.toLowerCase().includes(searchValue.toLowerCase())
-        );
-      return { ...g, apis };
-    }).filter(g => g.apis.length > 0);
-  }, [data, searchValue]);
-
-  const toggleGroup = (id: string) => {
-    setExpandedGroups(prev =>
-      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
-    );
-  };
-
   return (
-    <>
-      {/* Mobile backdrop overlay - below header (z-40) */}
-      <AnimatePresence>
-        {openSideBar && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="absolute inset-0 bg-black/50 backdrop-blur-[2px] z-30 md:hidden"
-            onClick={() => onToggle?.(false)}
-          />
-        )}
-      </AnimatePresence>
-
-      <motion.div
-        className={clsx(
-          'h-full z-40 flex-shrink-0 border-r border-white/10 dark:border-white/5 overflow-hidden transition-all',
-          // Mobile: absolute position, drawer style
-          // Desktop: relative position, pushing content
-          'absolute md:relative left-0 top-0',
-          hasBackground
-            ? 'bg-white/10 dark:bg-black/40 backdrop-blur-xl md:bg-transparent md:backdrop-blur-none'
-            : 'bg-white/80 dark:bg-black/40 backdrop-blur-xl md:bg-transparent md:backdrop-blur-none'
-        )}
-        initial={false}
-        animate={{
-          width: openSideBar ? 260 : 0,
-          opacity: openSideBar ? 1 : 0,
-          x: (window.innerWidth < 768 && !openSideBar) ? -260 : 0  // Optional: slide out completely on mobile
-        }}
-        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
-      >
-        <div className='w-[260px] h-full flex flex-col'>
-          <div className='p-3'>
-            <Input
-              classNames={{
-                inputWrapper:
-                  'bg-white/5 dark:bg-white/5 border border-white/10 hover:bg-white/10 transition-all shadow-none',
-                input: 'bg-transparent text-xs placeholder:opacity-30',
-              }}
-              isClearable
-              radius='lg'
-              placeholder='搜索接口...'
-              startContent={<TbSearch size={14} className="opacity-30" />}
-              value={searchValue}
-              onChange={(e) => setSearchValue(e.target.value)}
-              onClear={() => setSearchValue('')}
-              size="sm"
-            />
-          </div>
-
-          <div className='flex-1 px-2 pb-4 flex flex-col gap-1 overflow-y-auto no-scrollbar'>
-            {groups.map((group) => {
-              const isOpen = expandedGroups.includes(group.id) || searchValue.length > 0;
-              return (
-                <div key={group.id} className="flex flex-col">
-                  {/* Group Header */}
-                  <div
-                    className="flex items-center gap-2 px-2 py-2 rounded-lg cursor-pointer hover:bg-white/5 transition-all group/header"
-                    onClick={() => toggleGroup(group.id)}
-                  >
-                    <TbChevronRight
-                      size={12}
-                      className={clsx(
-                        'transition-transform duration-200 opacity-20 group-hover/header:opacity-50',
-                        isOpen && 'rotate-90'
-                      )}
-                    />
-                    <TbFolder className="text-primary/60" size={16} />
-                    <span className="text-[13px] font-medium opacity-70 flex-1">{group.label}</span>
-                    <span className="text-[11px] opacity-20 font-mono tracking-tighter">({group.apis.length})</span>
-                  </div>
-
-                  {/* Group Content */}
-                  <AnimatePresence initial={false}>
-                    {isOpen && (
-                      <motion.div
-                        initial={{ height: 0, opacity: 0 }}
-                        animate={{ height: 'auto', opacity: 1 }}
-                        exit={{ height: 0, opacity: 0 }}
-                        className="overflow-hidden flex flex-col gap-1 ml-4 border-l border-white/5 pl-2 my-1"
-                      >
-                        {group.apis.map((api) => {
-                          const isSelected = api.path === selectedApi;
-                          return (
-                            <div
-                              key={api.path}
-                              onClick={() => onSelect(api.path)}
-                              className={clsx(
-                                'flex flex-col gap-0.5 px-3 py-2 rounded-lg cursor-pointer transition-all border border-transparent select-none',
-                                isSelected
-                                  ? (hasBackground ? '' : 'bg-primary/20 border-primary/20 shadow-sm')
-                                  : 'hover:bg-white/5'
-                              )}
-                            >
-                              <span className={clsx(
-                                'text-[12px] font-medium transition-colors truncate',
-                                isSelected ? 'text-primary' : 'opacity-60'
-                              )}>
-                                {api.description}
-                              </span>
-                              <span className={clsx(
-                                'text-[10px] font-mono truncate transition-all',
-                                isSelected ? 'text-primary/60' : 'opacity-20'
-                              )}>
-                                {api.path}
-                              </span>
-                            </div>
-                          );
-                        })}
-                      </motion.div>
-                    )}
-                  </AnimatePresence>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </motion.div>
-    </>
+    <motion.div
+      className={clsx(
+        'h-[calc(100vh-3.5rem)] left-0 !overflow-hidden md:w-auto z-20 top-[3.3rem] md:top-[3rem] absolute md:sticky md:float-start',
+        openSideBar && 'bg-background bg-opacity-20 backdrop-blur-md'
+      )}
+      initial={{ width: 0 }}
+      transition={{
+        type: openSideBar ? 'spring' : 'tween',
+        stiffness: 150,
+        damping: 15,
+      }}
+      animate={{ width: openSideBar ? '16rem' : '0rem' }}
+      style={{ overflowY: openSideBar ? 'auto' : 'hidden' }}
+    >
+      <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-primary-600'
+          classNames={{
+            inputWrapper:
+              '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'
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          isClearable
+          onClear={() => setSearchValue('')}
+        />
+        {Object.entries(data).map(([apiName, api]) => (
+          <Card
+            key={apiName}
+            shadow='none'
+            className={clsx(
+              'w-full border border-primary-100 rounded-lg mb-1 bg-opacity-30 backdrop-blur-sm text-primary-400',
+              {
+                hidden: !(
+                  apiName.includes(searchValue) ||
+                  api.description?.includes(searchValue)
+                ),
+              },
+              {
+                '!bg-opacity-40 border border-primary-400 bg-primary-50 text-primary-600':
+                  apiName === selectedApi,
+              }
+            )}
+            isPressable
+            onPress={() => onSelect(apiName as OneBotHttpApiPath)}
+          >
+            <CardBody>
+              <h2 className='font-bold'>{api.description}</h2>
+              <div
+                className={clsx('text-sm text-primary-200', {
+                  '!text-primary-400': apiName === selectedApi,
+                })}
+              >
+                {apiName}
+              </div>
+            </CardBody>
+          </Card>
+        ))}
+      </div>
+    </motion.div>
   );
 };
 

packages/napcat-webui-frontend/src/components/onebot/display_card/render.tsx

@@ -30,14 +30,14 @@ const itemVariants = {
   },
 };
 
-function RequestComponent ({ data: _ }: { data: OB11Request; }) {
+function RequestComponent ({ data: _ }: { data: OB11Request }) {
   return <div>Request消息，暂未适配</div>;
 }
 
 export interface OneBotItemRenderProps {
-  data: AllOB11WsResponse[];
-  index: number;
-  style: React.CSSProperties;
+  data: AllOB11WsResponse[]
+  index: number
+  style: React.CSSProperties
 }
 
 export const getItemSize = (event: OB11AllEvent['post_type']) => {
@@ -90,7 +90,7 @@ const OneBotItemRender = ({ data, index, style }: OneBotItemRenderProps) => {
         animate='visible'
         className='h-full px-2'
       >
-        <Card className='w-full h-full py-2 bg-white/60 dark:bg-black/40 backdrop-blur-xl border border-white/40 dark:border-white/10 shadow-sm'>
+        <Card className='w-full h-full py-2 bg-opacity-50 backdrop-blur-sm'>
           <CardHeader className='py-0 text-default-500 flex-row gap-2'>
             <div className='font-bold'>
               {isEvent ? getEventName(msg.post_type) : '请求响应'}

packages/napcat-webui-frontend/src/components/onebot/filter_message_type.tsx

@@ -3,8 +3,8 @@ import { SharedSelection } from '@heroui/system';
 import type { Selection } from '@react-types/shared';
 
 export interface FilterMessageTypeProps {
-  filterTypes: Selection;
-  onSelectionChange: (keys: SharedSelection) => void;
+  filterTypes: Selection
+  onSelectionChange: (keys: SharedSelection) => void
 }
 const items = [
   { label: '元事件', value: 'meta_event' },
@@ -26,7 +26,6 @@ const FilterMessageType: React.FC<FilterMessageTypeProps> = (props) => {
       }}
       label='筛选消息类型'
       selectionMode='multiple'
-      className='w-full'
       items={items}
       renderValue={(value) => {
         if (value.length === items.length) {

packages/napcat-webui-frontend/src/components/onebot/send_modal.tsx

@@ -43,7 +43,7 @@ const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
 
   return (
     <>
-      <Button onPress={onOpen} color='primary' radius='full' variant='flat' size='sm' className="font-medium">
+      <Button onPress={onOpen} color='primary' radius='full' variant='flat'>
         构造请求
       </Button>
       <Modal
@@ -61,7 +61,7 @@ const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
                 构造请求
               </ModalHeader>
               <ModalBody>
-                <div className='h-96'>
+                <div className='h-96 dark:bg-[rgb(30,30,30)] p-2 rounded-md border border-default-100'>
                   <CodeEditor
                     height='100%'
                     defaultLanguage='json'

packages/napcat-webui-frontend/src/components/page_background.tsx

@@ -1,18 +1,23 @@
+import { Image } from '@heroui/image';
+
+import bkg_color from '@/assets/images/bkg-color.png';
 
 const PageBackground = () => {
   return (
-    <div className='fixed inset-0 w-full h-full -z-10 overflow-hidden bg-gradient-to-br from-indigo-50 via-white to-pink-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900'>
-      {/* 静态光斑 - ACG风格 */}
-      <div
-        className='absolute top-[-10%] left-[-10%] w-[500px] h-[500px] rounded-full bg-primary-200/40 blur-[100px]'
-      />
-      <div
-        className='absolute top-[20%] right-[-10%] w-[400px] h-[400px] rounded-full bg-secondary-200/40 blur-[90px]'
-      />
-      <div
-        className='absolute bottom-[-10%] left-[20%] w-[600px] h-[600px] rounded-full bg-pink-200/30 blur-[110px]'
-      />
-    </div>
+    <>
+      <div className='fixed w-full h-full -z-[0] flex justify-end opacity-80'>
+        <Image
+          className='overflow-hidden object-contain -top-42 h-[160%] -right-[30%] -rotate-45 pointer-events-none select-none -z-10 relative'
+          src={bkg_color}
+        />
+      </div>
+      <div className='fixed w-full h-full overflow-hidden -z-[0] hue-rotate-90 flex justify-start opacity-80'>
+        <Image
+          className='relative -top-92 h-[180%] object-contain pointer-events-none rotate-90 select-none -z-10 top-44'
+          src={bkg_color}
+        />
+      </div>
+    </>
   );
 };
 

packages/napcat-webui-frontend/src/components/page_loading.tsx

@@ -2,13 +2,13 @@ import { Spinner } from '@heroui/spinner';
 import clsx from 'clsx';
 
 export interface PageLoadingProps {
-  loading?: boolean;
+  loading?: boolean
 }
 const PageLoading: React.FC<PageLoadingProps> = ({ loading }) => {
   return (
     <div
       className={clsx(
-        'absolute top-0 left-0 w-full h-full bg-zinc-500 bg-opacity-10 z-30 flex justify-center items-center backdrop-blur',
+        'absolute top-0 left-0 w-full h-full bg-zinc-500 bg-opacity-10 z-50 flex justify-center items-center backdrop-blur',
         {
           hidden: !loading,
         }

packages/napcat-webui-frontend/src/components/qq_info_card.tsx

@@ -1,29 +1,22 @@
 import { Card, CardBody } from '@heroui/card';
 import { Image } from '@heroui/image';
-import { useLocalStorage } from '@uidotdev/usehooks';
 import clsx from 'clsx';
 import { BsTencentQq } from 'react-icons/bs';
 
-import key from '@/const/key';
 import { SelfInfo } from '@/types/user';
 
 import PageLoading from './page_loading';
 
 export interface QQInfoCardProps {
-  data?: SelfInfo;
-  error?: Error;
-  loading?: boolean;
+  data?: SelfInfo
+  error?: Error
+  loading?: boolean
 }
 
 const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
   return (
     <Card
-      className={clsx(
-        'relative backdrop-blur-sm border border-white/40 dark:border-white/10 overflow-hidden flex-shrink-0 shadow-sm',
-        hasBackground ? 'bg-white/10 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40'
-      )}
+      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'
     >
@@ -38,40 +31,28 @@ const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
           </CardBody>
         )
         : (
-          <CardBody className='flex-row items-center gap-4 overflow-hidden relative p-4'>
-            {!hasBackground && (
-              <div className='absolute right-[-10px] bottom-[-10px] text-7xl text-default-400/10 rotate-12 pointer-events-none dark:hidden'>
-                <BsTencentQq />
-              </div>
-            )}
+          <CardBody className='flex-row items-center gap-2 overflow-hidden relative'>
+            <div className='absolute right-0 bottom-0 text-5xl text-primary-400'>
+              <BsTencentQq />
+            </div>
             <div className='relative flex-shrink-0 z-10'>
               <Image
                 src={
-                  data?.avatarUrl ??
-                  `https://q1.qlogo.cn/g?b=qq&nk=${data?.uin}&s=1`
-                }
-                className='shadow-sm rounded-full w-14 aspect-square ring-2 ring-white/50 dark:ring-white/10'
+                data?.avatarUrl ??
+                `https://q1.qlogo.cn/g?b=qq&nk=${data?.uin}&s=1`
+              }
+                className='shadow-md rounded-full w-12 aspect-square'
               />
               <div
                 className={clsx(
-                  'w-3.5 h-3.5 rounded-full absolute right-0.5 bottom-0.5 border-2 border-white dark:border-zinc-900 z-10',
-                  data?.online ? 'bg-success-500' : 'bg-default-400'
+                  '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 className='flex-col justify-center z-10'>
-              <div className={clsx(
-                'text-xl font-bold truncate mb-0.5',
-                hasBackground ? 'text-white drop-shadow-sm' : 'text-default-800 dark:text-gray-100'
-              )}>
-                {data?.nick || '未知用户'}
-              </div>
-              <div className={clsx(
-                'font-mono text-xs tracking-wider',
-                hasBackground ? 'text-white/80' : 'text-default-500 opacity-80'
-              )}>
-                {data?.uin || 'Unknown'}
-              </div>
+            <div className='flex-col justify-center'>
+              <div className='text-lg truncate'>{data?.nick}</div>
+              <div className='text-primary-500 text-sm'>{data?.uin}</div>
             </div>
           </CardBody>
         )}

packages/napcat-webui-frontend/src/components/sidebar/index.tsx

@@ -1,33 +1,30 @@
 import { Button } from '@heroui/button';
-import { useLocalStorage } from '@uidotdev/usehooks';
+import { Image } from '@heroui/image';
 import clsx from 'clsx';
-import { AnimatePresence, motion } from 'motion/react';
+import { motion } from 'motion/react';
 import React from 'react';
 import { IoMdLogOut } from 'react-icons/io';
 import { MdDarkMode, MdLightMode } from 'react-icons/md';
 
-import key from '@/const/key';
 import useAuth from '@/hooks/auth';
 import useDialog from '@/hooks/use-dialog';
 import { useTheme } from '@/hooks/use-theme';
+
+import logo from '@/assets/images/logo.png';
 import type { MenuItem } from '@/config/site';
 
 import Menus from './menus';
 
 interface SideBarProps {
-  open: boolean;
-  items: MenuItem[];
-  onClose?: () => void;
+  open: boolean
+  items: MenuItem[]
 }
 
 const SideBar: React.FC<SideBarProps> = (props) => {
-  const { open, items, onClose } = props;
+  const { open, items } = props;
   const { toggleTheme, isDark } = useTheme();
   const { revokeAuth } = useAuth();
   const dialog = useDialog();
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
-
   const onRevokeAuth = () => {
     dialog.confirm({
       title: '退出登录',
@@ -36,72 +33,60 @@ const SideBar: React.FC<SideBarProps> = (props) => {
     });
   };
   return (
-    <>
-      <AnimatePresence initial={false}>
-        {open && (
-          <motion.div
-            className='fixed inset-y-0 left-64 right-0 bg-black/20 backdrop-blur-[1px] z-40 md:hidden'
-            aria-hidden='true'
-            onClick={onClose}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0, transition: { duration: 0.15 } }}
-            transition={{ duration: 0.2, delay: 0.15 }}
-          />
-        )}
-      </AnimatePresence>
-      <motion.div
-        className={clsx(
-          'overflow-hidden fixed top-0 left-0 h-full z-50 md:static md:shadow-none rounded-r-2xl md:rounded-none',
-          hasBackground
-            ? 'bg-transparent backdrop-blur-md'
-            : 'bg-content1/70 backdrop-blur-xl backdrop-saturate-150 shadow-xl',
-          'md:bg-transparent md:backdrop-blur-none md:backdrop-saturate-100 md:shadow-none'
-        )}
-        initial={{ width: 0 }}
-        animate={{ width: open ? '16rem' : 0 }}
-        transition={{
-          type: open ? 'spring' : 'tween',
-          stiffness: 150,
-          damping: open ? 15 : 10,
-        }}
-        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 p-4'>
-          <div className='flex items-center justify-start gap-3 px-2 my-8 ml-2'>
-            <div className="h-5 w-1 bg-primary rounded-full shadow-sm" />
-            <div className="text-xl font-bold text-default-900 dark:text-white tracking-wide select-none">
-              NapCat
-            </div>
+    <motion.div
+      className={clsx(
+        'overflow-hidden fixed top-0 left-0 h-full z-50 bg-background md:bg-transparent md:static shadow-md md:shadow-none rounded-r-md md:rounded-none'
+      )}
+      initial={{ width: 0 }}
+      animate={{ width: open ? '16rem' : 0 }}
+      transition={{
+        type: open ? 'spring' : 'tween',
+        stiffness: 150,
+        damping: open ? 15 : 10,
+      }}
+      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 my-2 gap-2'>
+          <Image radius='none' height={40} src={logo} className='mb-2' />
+          <div
+            className={clsx(
+              'flex items-center font-bold',
+              '!text-2xl shiny-text'
+            )}
+          >
+            NapCat
           </div>
-          <div className='overflow-y-auto flex flex-col flex-1 px-2'>
-            <Menus items={items} />
-            <div className='mt-auto mb-10 md:mb-0 space-y-3 px-2'>
-              <Button
-                className='w-full bg-primary-50/50 hover:bg-primary-100/80 text-primary-600 font-medium shadow-sm hover:shadow-md transition-all duration-300 backdrop-blur-sm'
-                radius='full'
-                variant='flat'
-                onPress={toggleTheme}
-                startContent={
-                  !isDark ? <MdLightMode size={18} /> : <MdDarkMode size={18} />
-                }
-              >
-                切换主题
-              </Button>
-              <Button
-                className='w-full mb-2 bg-danger-50/50 hover:bg-danger-100/80 text-danger-500 font-medium shadow-sm hover:shadow-md transition-all duration-300 backdrop-blur-sm'
-                radius='full'
-                variant='flat'
-                onPress={onRevokeAuth}
-                startContent={<IoMdLogOut size={18} />}
-              >
-                退出登录
-              </Button>
-            </div>
+        </div>
+        <div className='overflow-y-auto flex flex-col flex-1 px-4'>
+          <Menus items={items} />
+          <div className='mt-auto mb-10 md:mb-0'>
+            <Button
+              className='w-full'
+              color='primary'
+              radius='full'
+              variant='light'
+              onPress={toggleTheme}
+              startContent={
+                !isDark ? <MdLightMode size={16} /> : <MdDarkMode size={16} />
+              }
+            >
+              切换主题
+            </Button>
+            <Button
+              className='w-full mb-2'
+              color='primary'
+              radius='full'
+              variant='light'
+              onPress={onRevokeAuth}
+              startContent={<IoMdLogOut size={16} />}
+            >
+              退出登录
+            </Button>
           </div>
-        </motion.div>
+        </div>
       </motion.div>
-    </>
+    </motion.div>
   );
 };
 

packages/napcat-webui-frontend/src/components/sidebar/menus.tsx

@@ -50,13 +50,12 @@ const renderItems = (items: MenuItem[], children = false) => {
       <div key={item.href + item.label}>
         <Button
           className={clsx(
-            'flex items-center w-full text-left justify-start dark:text-white transition-all duration-300',
-            isActive
-              ? 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-400 shadow-none font-semibold translate-x-1'
-              : 'hover:bg-default-100 hover:translate-x-1',
+            'flex items-center w-full text-left justify-start dark:text-white',
+            // children && 'rounded-l-lg',
+            isActive && 'bg-opacity-60',
             b64img && 'backdrop-blur-md text-white'
           )}
-          color={isActive ? 'primary' : 'default'}
+          color='primary'
           endContent={
             canOpen
               ? (
@@ -97,15 +96,15 @@ const renderItems = (items: MenuItem[], children = false) => {
               : (
                 <div
                   className={clsx(
-                    'w-3 h-1.5 rounded-full ml-auto',
+                    'w-3 h-1.5 rounded-full ml-auto shadow-lg',
                     isActive
-                      ? 'bg-primary-500 animate-nav-spin'
-                      : 'bg-primary-200 dark:bg-white shadow-lg'
+                      ? 'bg-primary-500 animate-spinner-ease-spin'
+                      : 'bg-primary-200 dark:bg-white'
                   )}
-                  aria-hidden="true"
                 />
               )
           }
+          radius='full'
           startContent={
             customIcons[item.label]
               ? (
@@ -148,7 +147,7 @@ const renderItems = (items: MenuItem[], children = false) => {
 };
 
 interface MenusProps {
-  items: MenuItem[];
+  items: MenuItem[]
 }
 const Menus: React.FC<MenusProps> = (props) => {
   const { items } = props;

packages/napcat-webui-frontend/src/components/switch_card.tsx

@@ -3,14 +3,14 @@ import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 
 export interface SwitchCardProps {
-  label?: string;
-  description?: string;
-  value?: boolean;
-  onValueChange?: (value: boolean) => void;
-  name?: string;
-  onBlur?: React.FocusEventHandler;
-  disabled?: boolean;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  label?: string
+  description?: string
+  value?: boolean
+  onValueChange?: (value: boolean) => void
+  name?: string
+  onBlur?: React.FocusEventHandler
+  disabled?: boolean
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
 }
 
 const SwitchCard = forwardRef<HTMLInputElement, SwitchCardProps>(
@@ -22,9 +22,9 @@ const SwitchCard = forwardRef<HTMLInputElement, SwitchCardProps>(
       <Switch
         classNames={{
           base: clsx(
-            'inline-flex flex-row-reverse w-full max-w-full bg-default-100/50 dark:bg-white/5 hover:bg-default-200/50 dark:hover:bg-white/10 items-center',
-            'justify-between cursor-pointer rounded-xl gap-2 p-4 border border-transparent transition-all duration-200',
-            'data-[selected=true]:border-primary/50 data-[selected=true]:bg-primary/5 backdrop-blur-md'
+            'inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center',
+            'justify-between cursor-pointer rounded-lg gap-2 p-3 border-2 border-transparent',
+            'data-[selected=true]:border-primary bg-opacity-50 backdrop-blur-sm'
           ),
         }}
         {...props}

packages/napcat-webui-frontend/src/components/system_info.tsx

@@ -1,27 +1,30 @@
+import { Button } from '@heroui/button';
 import { Card, CardBody, CardHeader } from '@heroui/card';
-
 import { Chip } from '@heroui/chip';
 import { Spinner } from '@heroui/spinner';
 import { Tooltip } from '@heroui/tooltip';
-import { useLocalStorage } from '@uidotdev/usehooks';
 import { useRequest } from 'ahooks';
-import clsx from 'clsx';
-import { FaCircleInfo, FaQq } from 'react-icons/fa6';
+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';
-import { useState } from 'react';
 
-import key from '@/const/key';
-import WebUIManager from '@/controllers/webui_manager';
 import useDialog from '@/hooks/use-dialog';
 
+import { request } from '@/utils/request';
+import { compareVersion } from '@/utils/version';
+
+import WebUIManager from '@/controllers/webui_manager';
+import { GithubRelease } from '@/types/github';
+
+import TailwindMarkdown from './tailwind_markdown';
 
 export interface SystemInfoItemProps {
-  title: string;
-  icon?: React.ReactNode;
-  value?: React.ReactNode;
-  endContent?: React.ReactNode;
-  hasBackground?: boolean;
+  title: string
+  icon?: React.ReactNode
+  value?: React.ReactNode
+  endContent?: React.ReactNode
 }
 
 const SystemInfoItem: React.FC<SystemInfoItemProps> = ({
@@ -29,371 +32,176 @@ const SystemInfoItem: React.FC<SystemInfoItemProps> = ({
   value = '--',
   icon,
   endContent,
-  hasBackground = false,
 }) => {
   return (
-    <div className={clsx(
-      'flex text-sm gap-3 py-2 items-center transition-colors',
-      hasBackground
-        ? 'text-white/90'
-        : 'text-default-600 dark:text-gray-300'
-    )}>
-      <div className="text-lg opacity-70">{icon}</div>
-      <div className='w-24 font-medium'>{title}</div>
-      <div className={clsx(
-        'text-xs font-mono flex-1',
-        hasBackground ? 'text-white/80' : 'text-default-500'
-      )}>{value}</div>
-      <div>{endContent}</div>
+    <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-primary-200'>{value}</div>
+      <div className='ml-auto'>{endContent}</div>
     </div>
   );
 };
 
 export interface NewVersionTipProps {
-  currentVersion?: string;
+  currentVersion?: string
 }
 
-// const NewVersionTip = (props: NewVersionTipProps) => {
-//   const { currentVersion } = props;
-//   const dialog = useDialog();
-//   const { data: releaseData, error } = useRequest(() =>
-//     request.get<GithubRelease[]>(
-//       'https://api.github.com/repos/NapNeko/NapCatQQ/releases'
-//     )
-//   );
-
-//   if (error) {
-//     return (
-//       <Tooltip content='检查新版本失败'>
-//         <Button
-//           isIconOnly
-//           radius='full'
-//           color='primary'
-//           variant='shadow'
-//           className='!w-5 !h-5 !min-w-0 text-small shadow-md'
-//           onPress={() => {
-//             dialog.alert({
-//               title: '检查新版本失败',
-//               content: error.message,
-//             });
-//           }}
-//         >
-//           <FaInfo />
-//         </Button>
-//       </Tooltip>
-//     );
-//   }
-
-//   const latestVersion = releaseData?.data?.[0]?.tag_name;
-
-//   if (!latestVersion || !currentVersion) {
-//     return null;
-//   }
-
-//   if (compareVersion(latestVersion, currentVersion) <= 0) {
-//     return null;
-//   }
-
-//   const middleVersions: GithubRelease[] = [];
-
-//   for (let i = 0; i < releaseData.data.length; i++) {
-//     const versionInfo = releaseData.data[i];
-//     if (compareVersion(versionInfo.tag_name, currentVersion) > 0) {
-//       middleVersions.push(versionInfo);
-//     } else {
-//       break;
-//     }
-//   }
-
-//   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='primary'
-//         variant='shadow'
-//         className='!w-5 !h-5 !min-w-0 text-small shadow-md'
-//         onPress={() => {
-//           dialog.confirm({
-//             title: '有新版本可用',
-//             content: (
-//               <div className='space-y-2'>
-//                 <div className='text-sm space-x-2'>
-//                   <span>当前版本</span>
-//                   <Chip color='primary' variant='flat'>
-//                     v{currentVersion}
-//                   </Chip>
-//                 </div>
-//                 <div className='text-sm space-x-2'>
-//                   <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
-//                       key={versionInfo.tag_name}
-//                       className='p-4 bg-content1 rounded-md shadow-small'
-//                     >
-//                       <TailwindMarkdown content={versionInfo.body} />
-//                     </div>
-//                   ))}
-//                 </div>
-//               </div>
-//             ),
-//             scrollBehavior: 'inside',
-//             size: '3xl',
-//             confirmText: '前往下载',
-//             onConfirm () {
-//               window.open(
-//                 'https://github.com/NapNeko/NapCatQQ/releases',
-//                 '_blank',
-//                 'noopener'
-//               );
-//             },
-//           });
-//         }}
-//       >
-//         <FaInfo />
-//       </Button>
-//     </Tooltip>
-//   );
-// };
-
-// 更新状态类型
-type UpdateStatus = 'idle' | 'updating' | 'success' | 'error';
-
-// 更新对话框内容组件
-const UpdateDialogContent: React.FC<{
-  currentVersion: string;
-  latestVersion: string;
-  status: UpdateStatus;
-  errorMessage?: string;
-}> = ({ currentVersion, latestVersion, status, errorMessage }) => {
-  return (
-    <div className='space-y-4'>
-      {/* 版本信息 */}
-      <div className='space-y-2'>
-        <div className='text-sm space-x-2'>
-          <span>当前版本</span>
-          <Chip color='primary' variant='flat'>
-            v{currentVersion}
-          </Chip>
-        </div>
-        <div className='text-sm space-x-2'>
-          <span>最新版本</span>
-          <Chip color='primary'>v{latestVersion}</Chip>
-        </div>
-      </div>
-
-      {/* 更新状态显示 */}
-      {status === 'updating' && (
-        <div className='flex flex-col items-center justify-center gap-3 py-4 px-4 rounded-lg bg-primary-50/50 dark:bg-primary-900/20 border border-primary-200/50 dark:border-primary-700/30'>
-          <Spinner size='md' color='primary' />
-          <div className='text-center'>
-            <p className='text-sm font-medium text-primary-600 dark:text-primary-400'>
-              正在更新中...
-            </p>
-            <p className='text-xs text-default-500 mt-1'>
-              请耐心等待，更新可能需要几分钟
-            </p>
-          </div>
-        </div>
-      )}
-
-      {status === 'success' && (
-        <div className='flex flex-col items-center justify-center gap-3 py-4 px-4 rounded-lg bg-success-50/50 dark:bg-success-900/20 border border-success-200/50 dark:border-success-700/30'>
-          <div className='w-12 h-12 rounded-full bg-success-100 dark:bg-success-900/40 flex items-center justify-center'>
-            <svg className='w-6 h-6 text-success-600 dark:text-success-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 13l4 4L19 7' />
-            </svg>
-          </div>
-          <div className='text-center'>
-            <p className='text-sm font-medium text-success-600 dark:text-success-400'>
-              更新完成
-            </p>
-            <p className='text-xs text-default-500 mt-1'>
-              请重启 NapCat 以应用新版本
-            </p>
-          </div>
-          <div className='mt-2 p-3 rounded-lg bg-warning-50/50 dark:bg-warning-900/20 border border-warning-200/50 dark:border-warning-700/30'>
-            <p className='text-xs text-warning-700 dark:text-warning-400 flex items-center gap-1'>
-              <svg className='w-4 h-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z' />
-              </svg>
-              <span>请手动重启 NapCat，更新才会生效</span>
-            </p>
-          </div>
-        </div>
-      )}
-
-      {status === 'error' && (
-        <div className='flex flex-col items-center justify-center gap-3 py-4 px-4 rounded-lg bg-danger-50/50 dark:bg-danger-900/20 border border-danger-200/50 dark:border-danger-700/30'>
-          <div className='w-12 h-12 rounded-full bg-danger-100 dark:bg-danger-900/40 flex items-center justify-center'>
-            <svg className='w-6 h-6 text-danger-600 dark:text-danger-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-            </svg>
-          </div>
-          <div className='text-center'>
-            <p className='text-sm font-medium text-danger-600 dark:text-danger-400'>
-              更新失败
-            </p>
-            <p className='text-xs text-default-500 mt-1'>
-              {errorMessage || '请稍后重试或手动更新'}
-            </p>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
 const NewVersionTip = (props: NewVersionTipProps) => {
   const { currentVersion } = props;
   const dialog = useDialog();
-  const { data: latestVersion, error } = useRequest(WebUIManager.getLatestTag, {
-    cacheKey: 'napcat-latest-tag',
-    staleTime: 10 * 60 * 1000,
-    cacheTime: 30 * 60 * 1000,
-  });
-  const [updateStatus, setUpdateStatus] = useState<UpdateStatus>('idle');
+  const { data: releaseData, error } = useRequest(() =>
+    request.get<GithubRelease[]>(
+      'https://api.github.com/repos/NapNeko/NapCatQQ/releases'
+    )
+  );
 
-  if (error || !latestVersion || !currentVersion || latestVersion === currentVersion) {
+  if (error) {
+    return (
+      <Tooltip content='检查新版本失败'>
+        <Button
+          isIconOnly
+          radius='full'
+          color='primary'
+          variant='shadow'
+          className='!w-5 !h-5 !min-w-0 text-small shadow-md'
+          onPress={() => {
+            dialog.alert({
+              title: '检查新版本失败',
+              content: error.message,
+            });
+          }}
+        >
+          <FaInfo />
+        </Button>
+      </Tooltip>
+    );
+  }
+
+  const latestVersion = releaseData?.data?.[0]?.tag_name;
+
+  if (!latestVersion || !currentVersion) {
     return null;
   }
 
-  const handleUpdate = async () => {
-    setUpdateStatus('updating');
+  if (compareVersion(latestVersion, currentVersion) <= 0) {
+    return null;
+  }
 
-    try {
-      await WebUIManager.UpdateNapCat();
-      setUpdateStatus('success');
-      // 显示更新成功对话框
-      dialog.alert({
-        title: '更新完成',
-        content: (
-          <UpdateDialogContent
-            currentVersion={currentVersion}
-            latestVersion={latestVersion}
-            status='success'
-          />
-        ),
-        confirmText: '我知道了',
-        size: 'md',
-      });
-    } catch (err) {
-      console.error('Update failed:', err);
-      const errMessage = err instanceof Error ? err.message : '未知错误';
-      setUpdateStatus('error');
-      // 显示更新失败对话框
-      dialog.alert({
-        title: '更新失败',
-        content: (
-          <UpdateDialogContent
-            currentVersion={currentVersion}
-            latestVersion={latestVersion}
-            status='error'
-            errorMessage={errMessage}
-          />
-        ),
-        confirmText: '确定',
-        size: 'md',
-      });
+  const middleVersions: GithubRelease[] = [];
+
+  for (let i = 0; i < releaseData.data.length; i++) {
+    const versionInfo = releaseData.data[i];
+    if (compareVersion(versionInfo.tag_name, currentVersion) > 0) {
+      middleVersions.push(versionInfo);
+    } else {
+      break;
     }
-  };
+  }
 
-  const showUpdateDialog = () => {
-    dialog.confirm({
-      title: '发现新版本',
-      content: (
-        <UpdateDialogContent
-          currentVersion={currentVersion}
-          latestVersion={latestVersion}
-          status='idle'
-        />
-      ),
-      confirmText: '立即更新',
-      cancelText: '稍后更新',
-      size: 'md',
-      onConfirm: handleUpdate,
-    });
+  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='有新版本可用'>
-      <div className="cursor-pointer" onClick={updateStatus === 'updating' ? undefined : showUpdateDialog}>
-        <Chip
-          size="sm"
-          color="danger"
-          variant="flat"
-          classNames={{
-            content: "font-bold text-[10px] px-1",
-            base: "h-5 min-h-5"
-          }}
-        >
-          {updateStatus === 'updating' ? <Spinner size="sm" color="danger" /> : 'New'}
-        </Chip>
-      </div>
+      <Button
+        isIconOnly
+        radius='full'
+        color='primary'
+        variant='shadow'
+        className='!w-5 !h-5 !min-w-0 text-small shadow-md'
+        onPress={() => {
+          dialog.confirm({
+            title: '有新版本可用',
+            content: (
+              <div className='space-y-2'>
+                <div className='text-sm space-x-2'>
+                  <span>当前版本</span>
+                  <Chip color='primary' variant='flat'>
+                    v{currentVersion}
+                  </Chip>
+                </div>
+                <div className='text-sm space-x-2'>
+                  <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
+                      key={versionInfo.tag_name}
+                      className='p-4 bg-content1 rounded-md shadow-small'
+                    >
+                      <TailwindMarkdown content={versionInfo.body} />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ),
+            scrollBehavior: 'inside',
+            size: '3xl',
+            confirmText: '前往下载',
+            onConfirm () {
+              window.open(
+                'https://github.com/NapNeko/NapCatQQ/releases',
+                '_blank',
+                'noopener'
+              );
+            },
+          });
+        }}
+      >
+        <FaInfo />
+      </Button>
     </Tooltip>
   );
 };
 
-interface NapCatVersionProps {
-  hasBackground?: boolean;
-}
-
-const NapCatVersion: React.FC<NapCatVersionProps> = ({ hasBackground = false }) => {
+const NapCatVersion = () => {
   const {
     data: packageData,
     loading: packageLoading,
     error: packageError,
-  } = useRequest(WebUIManager.GetNapCatVersion, {
-    cacheKey: 'napcat-version',
-    staleTime: 60 * 60 * 1000,
-    cacheTime: 24 * 60 * 60 * 1000,
-  });
+  } = useRequest(WebUIManager.GetNapCatVersion);
 
   const currentVersion = packageData?.version;
 
@@ -401,11 +209,10 @@ const NapCatVersion: React.FC<NapCatVersionProps> = ({ hasBackground = false })
     <SystemInfoItem
       title='NapCat 版本'
       icon={<IoLogoOctocat className='text-xl' />}
-      hasBackground={hasBackground}
       value={
         packageError
           ? (
-            `错误：${packageError.message}`
+          `错误：${packageError.message}`
           )
           : packageLoading
             ? (
@@ -421,7 +228,7 @@ const NapCatVersion: React.FC<NapCatVersionProps> = ({ hasBackground = false })
 };
 
 export interface SystemInfoProps {
-  archInfo?: string;
+  archInfo?: string
 }
 const SystemInfo: React.FC<SystemInfoProps> = (props) => {
   const { archInfo } = props;
@@ -429,37 +236,23 @@ const SystemInfo: React.FC<SystemInfoProps> = (props) => {
     data: qqVersionData,
     loading: qqVersionLoading,
     error: qqVersionError,
-  } = useRequest(WebUIManager.getQQVersion, {
-    cacheKey: 'qq-version',
-    staleTime: 60 * 60 * 1000,
-    cacheTime: 24 * 60 * 60 * 1000,
-  });
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
-
+  } = useRequest(WebUIManager.getQQVersion);
   return (
-    <Card className={clsx(
-      'backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm overflow-visible flex-1',
-      hasBackground ? 'bg-white/10 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40'
-    )}>
-      <CardHeader className={clsx(
-        'pb-0 items-center gap-2 font-bold px-4 pt-4',
-        hasBackground ? 'text-white drop-shadow-sm' : 'text-default-700 dark:text-white'
-      )}>
-        <FaCircleInfo className='text-lg opacity-80' />
+    <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 gap-2 justify-between h-full'>
-          <NapCatVersion hasBackground={hasBackground} />
+        <div className='flex flex-col justify-between h-full'>
+          <NapCatVersion />
           <SystemInfoItem
             title='QQ 版本'
             icon={<FaQq className='text-lg' />}
-            hasBackground={hasBackground}
             value={
               qqVersionError
                 ? (
-                  `错误：${qqVersionError.message}`
+                `错误：${qqVersionError.message}`
                 )
                 : qqVersionLoading
                   ? (
@@ -474,13 +267,11 @@ const SystemInfo: React.FC<SystemInfoProps> = (props) => {
             title='WebUI 版本'
             icon={<IoLogoChrome className='text-xl' />}
             value='Next'
-            hasBackground={hasBackground}
           />
           <SystemInfoItem
             title='系统版本'
             icon={<RiMacFill className='text-xl' />}
             value={archInfo}
-            hasBackground={hasBackground}
           />
         </div>
       </CardBody>

packages/napcat-webui-frontend/src/components/system_status_display.tsx

@@ -1,21 +1,18 @@
 import { Card, CardBody } from '@heroui/card';
 import { Image } from '@heroui/image';
-import { useLocalStorage } from '@uidotdev/usehooks';
 import clsx from 'clsx';
 import { BiSolidMemoryCard } from 'react-icons/bi';
 import { GiCpu } from 'react-icons/gi';
 
 import bkg from '@/assets/images/bg/1AD934174C0107F14BAD8776D29C5F90.png';
-import key from '@/const/key';
 
 import UsagePie from './usage_pie';
 
 export interface SystemStatusItemProps {
-  title: string;
-  value?: string | number;
-  size?: 'md' | 'lg';
-  unit?: string;
-  hasBackground?: boolean;
+  title: string
+  value?: string | number
+  size?: 'md' | 'lg'
+  unit?: string
 }
 
 const SystemStatusItem: React.FC<SystemStatusItemProps> = ({
@@ -23,32 +20,25 @@ const SystemStatusItem: React.FC<SystemStatusItemProps> = ({
   value = '-',
   size = 'md',
   unit,
-  hasBackground = false,
 }) => {
   return (
     <div
       className={clsx(
-        'py-1.5 text-sm transition-colors',
-        size === 'lg' ? 'col-span-2' : 'col-span-1 flex justify-between',
+        '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'
       )}
     >
-      <div className={clsx(
-        'w-24 font-medium',
-        hasBackground ? 'text-white/90' : 'text-default-600 dark:text-gray-300'
-      )}>{title}</div>
-      <div className={clsx(
-        'font-mono text-xs',
-        hasBackground ? 'text-white/80' : 'text-default-500'
-      )}>
+      <div className='w-24'>{title}</div>
+      <div className='text-default-400'>
         {value}
-        {unit && <span className="ml-0.5 opacity-70">{unit}</span>}
+        {unit}
       </div>
     </div>
   );
 };
 
 export interface SystemStatusDisplayProps {
-  data?: SystemStatus;
+  data?: SystemStatus
 }
 
 const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
@@ -63,14 +53,9 @@ const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
     memoryUsage.system = (systemUsage / system) * 100;
     memoryUsage.qq = (qqUsage / system) * 100;
   }
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
 
   return (
-    <Card className={clsx(
-      'backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm col-span-1 lg:col-span-2 relative overflow-hidden',
-      hasBackground ? 'bg-white/10 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40'
-    )}>
+    <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}
@@ -84,35 +69,27 @@ 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={clsx(
-            'text-lg font-semibold flex items-center gap-2 mb-2',
-            hasBackground ? 'text-white drop-shadow-sm' : 'text-default-700 dark:text-gray-200'
-          )}>
-            <GiCpu className='text-xl opacity-80' />
+          <h2 className='text-lg font-semibold flex items-center gap-1 text-primary-400'>
+            <GiCpu className='text-xl' />
             <span>CPU</span>
           </h2>
           <div className='grid grid-cols-2 gap-2'>
-            <SystemStatusItem title='型号' value={data?.cpu.model} size='lg' hasBackground={hasBackground} />
-            <SystemStatusItem title='内核数' value={data?.cpu.core} hasBackground={hasBackground} />
-            <SystemStatusItem title='主频' value={data?.cpu.speed} unit='GHz' hasBackground={hasBackground} />
+            <SystemStatusItem title='型号' value={data?.cpu.model} size='lg' />
+            <SystemStatusItem title='内核数' value={data?.cpu.core} />
+            <SystemStatusItem title='主频' value={data?.cpu.speed} unit='GHz' />
             <SystemStatusItem
               title='使用率'
               value={data?.cpu.usage.system}
               unit='%'
-              hasBackground={hasBackground}
             />
             <SystemStatusItem
               title='QQ主线程'
               value={data?.cpu.usage.qq}
               unit='%'
-              hasBackground={hasBackground}
             />
           </div>
-          <h2 className={clsx(
-            'text-lg font-semibold flex items-center gap-2 mb-2 mt-4',
-            hasBackground ? 'text-white drop-shadow-sm' : 'text-default-700 dark:text-gray-200'
-          )}>
-            <BiSolidMemoryCard className='text-xl opacity-80' />
+          <h2 className='text-lg font-semibold flex items-center gap-1 text-primary-400 mt-2'>
+            <BiSolidMemoryCard className='text-xl' />
             <span>内存</span>
           </h2>
           <div className='grid grid-cols-2 gap-2'>
@@ -121,19 +98,16 @@ const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
               value={data?.memory.total}
               size='lg'
               unit='MB'
-              hasBackground={hasBackground}
             />
             <SystemStatusItem
               title='使用量'
               value={data?.memory.usage.system}
               unit='MB'
-              hasBackground={hasBackground}
             />
             <SystemStatusItem
               title='QQ主线程'
               value={data?.memory.usage.qq}
               unit='MB'
-              hasBackground={hasBackground}
             />
           </div>
         </div>
@@ -142,13 +116,11 @@ const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
             systemUsage={Number(data?.cpu.usage.system) || 0}
             processUsage={Number(data?.cpu.usage.qq) || 0}
             title='CPU占用'
-            hasBackground={hasBackground}
           />
           <UsagePie
             systemUsage={memoryUsage.system}
             processUsage={memoryUsage.qq}
             title='内存占用'
-            hasBackground={hasBackground}
           />
         </div>
       </CardBody>

packages/napcat-webui-frontend/src/components/usage_pie.tsx

@@ -1,121 +1,143 @@
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
+import * as echarts from 'echarts';
+import React, { useEffect, useRef } from 'react';
 
 import { useTheme } from '@/hooks/use-theme';
 
 interface UsagePieProps {
-  systemUsage: number;
-  processUsage: number;
-  title?: string;
-  hasBackground?: boolean;
+  systemUsage: number
+  processUsage: number
+  title?: string
 }
 
+const defaultOption: echarts.EChartsOption = {
+  tooltip: {
+    trigger: 'item',
+    formatter: '<center>{b}<br/><b>{d}%</b></center>',
+    borderRadius: 10,
+    extraCssText: 'backdrop-filter: blur(10px);',
+  },
+  series: [
+    {
+      name: '系统占用',
+      type: 'pie',
+      radius: ['70%', '90%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: true,
+        position: 'center',
+        formatter: '系统占用',
+        fontSize: 14,
+      },
+      itemStyle: {
+        borderWidth: 1,
+        borderRadius: 10,
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        {
+          value: 100,
+          name: '系统总量',
+        },
+      ],
+    },
+  ],
+};
+
 const UsagePie: React.FC<UsagePieProps> = ({
   systemUsage,
   processUsage,
   title,
-  hasBackground,
 }) => {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstance = useRef<echarts.ECharts | null>(null);
   const { theme } = useTheme();
 
-  // Ensure values are clean
-  const cleanSystem = Math.min(Math.max(systemUsage || 0, 0), 100);
-  const cleanProcess = Math.min(Math.max(processUsage || 0, 0), cleanSystem);
+  useEffect(() => {
+    if (chartRef.current) {
+      chartInstance.current = echarts.init(chartRef.current);
+      const option = defaultOption;
+      chartInstance.current.setOption(option);
+      const observer = new ResizeObserver(() => {
+        chartInstance.current?.resize();
+      });
+      observer.observe(chartRef.current);
+      return () => {
+        chartInstance.current?.dispose();
+        observer.disconnect();
+      };
+    }
+  }, []);
 
-  // SVG Config
-  const size = 100;
-  const strokeWidth = 10;
-  const radius = (size - strokeWidth) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const center = size / 2;
+  useEffect(() => {
+    if (chartInstance.current) {
+      chartInstance.current.setOption({
+        series: [
+          {
+            label: {
+              formatter: title,
+            },
+          },
+        ],
+      });
+    }
+  }, [title]);
 
-  // Colors
-  const colors = {
-    qq: '#D33FF0',
-    other: theme === 'dark' ? '#EF8664' : '#EA7D9B',
-    track: theme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)',
-  };
+  useEffect(() => {
+    if (chartInstance.current) {
+      chartInstance.current.setOption({
+        darkMode: theme === 'dark',
+        tooltip: {
+          backgroundColor:
+            theme === 'dark'
+              ? 'rgba(0, 0, 0, 0.8)'
+              : 'rgba(255, 255, 255, 0.8)',
+          textStyle: {
+            color: theme === 'dark' ? '#fff' : '#333',
+          },
+        },
+        color:
+          theme === 'dark'
+            ? ['#D33FF0', '#EF8664', '#E25180']
+            : ['#D33FF0', '#EA7D9B', '#FFC107'],
+        series: [
+          {
+            itemStyle: {
+              borderColor: theme === 'dark' ? '#333' : '#F0A9A7',
+            },
+          },
+        ],
+      });
+    }
+  }, [theme]);
 
-  // Dash Arrays
-  // 1. Total System Usage (QQ + Others)
-  const systemDash = useMemo(() => {
-    return `${(cleanSystem / 100) * circumference} ${circumference}`;
-  }, [cleanSystem, circumference]);
+  useEffect(() => {
+    if (chartInstance.current) {
+      chartInstance.current.setOption({
+        series: [
+          {
+            data: [
+              {
+                value: processUsage,
+                name: 'QQ占用',
+              },
+              {
+                value: systemUsage - processUsage,
+                name: '其他进程占用',
+              },
+              {
+                value: 100 - systemUsage,
+                name: '剩余系统总量',
+              },
+            ],
+          },
+        ],
+      });
+    }
+  }, [systemUsage, processUsage]);
 
-  // 2. QQ Usage (Subset of System)
-  const processDash = useMemo(() => {
-    return `${(cleanProcess / 100) * circumference} ${circumference}`;
-  }, [cleanProcess, circumference]);
-
-  return (
-    <div className="relative w-36 h-36 flex items-center justify-center">
-      <svg
-        className="w-full h-full -rotate-90"
-        viewBox={`0 0 ${size} ${size}`}
-      >
-        {/* Track / Free Space */}
-        <circle
-          cx={center}
-          cy={center}
-          r={radius}
-          fill="none"
-          stroke={colors.track}
-          strokeWidth={strokeWidth}
-          strokeLinecap="round"
-        />
-
-        {/* System Usage (Background for QQ) - effectively "Others" + "QQ" */}
-        <circle
-          cx={center}
-          cy={center}
-          r={radius}
-          fill="none"
-          stroke={colors.other}
-          strokeWidth={strokeWidth}
-          strokeLinecap="round"
-          strokeDasharray={systemDash}
-          className="transition-all duration-700 ease-out"
-        />
-
-        {/* QQ Usage - Layered on top */}
-        <circle
-          cx={center}
-          cy={center}
-          r={radius}
-          fill="none"
-          stroke={colors.qq}
-          strokeWidth={strokeWidth}
-          strokeLinecap="round"
-          strokeDasharray={processDash}
-          className="transition-all duration-700 ease-out"
-        />
-      </svg>
-
-      {/* Center Content */}
-      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none select-none">
-        {title && (
-          <span className={clsx(
-            "text-[10px] font-medium mb-0.5 opacity-80 uppercase tracking-widest scale-90",
-            hasBackground ? 'text-white/80' : 'text-default-500 dark:text-default-400'
-          )}>
-            {title}
-          </span>
-        )}
-        <div className="flex items-baseline gap-0.5">
-          <span className={clsx(
-            "text-2xl font-bold font-mono tracking-tight",
-            hasBackground ? 'text-white' : 'text-default-900 dark:text-white'
-          )}>
-            {Math.round(cleanSystem)}
-          </span>
-          <span className={clsx(
-            "text-xs font-bold",
-            hasBackground ? 'text-white/60' : 'text-default-400 dark:text-default-500'
-          )}>%</span>
-        </div>
-      </div>
-    </div>
-  );
+  return <div ref={chartRef} className='w-36 h-36 flex-shrink-0' />;
 };
 
 export default UsagePie;

packages/napcat-webui-frontend/src/components/xterm.tsx

@@ -12,21 +12,21 @@ import { useTheme } from '@/hooks/use-theme';
 export type XTermRef = {
   write: (
     ...args: Parameters<Terminal['write']>
-  ) => ReturnType<Terminal['write']>;
-  writeAsync: (data: Parameters<Terminal['write']>[0]) => Promise<void>;
+  ) => ReturnType<Terminal['write']>
+  writeAsync: (data: Parameters<Terminal['write']>[0]) => Promise<void>
   writeln: (
     ...args: Parameters<Terminal['writeln']>
-  ) => ReturnType<Terminal['writeln']>;
-  writelnAsync: (data: Parameters<Terminal['writeln']>[0]) => Promise<void>;
-  clear: () => void;
-  terminalRef: React.RefObject<Terminal | null>;
+  ) => 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' | 'onResize'> {
-  onInput?: (data: string) => void;
-  onKey?: (key: string, event: KeyboardEvent) => void;
-  onResize?: (cols: number, rows: number) => void; // 新增属性
+  onInput?: (data: string) => void
+  onKey?: (key: string, event: KeyboardEvent) => void
+  onResize?: (cols: number, rows: number) => void // 新增属性
 }
 
 const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
@@ -35,27 +35,13 @@ const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
   const { className, onInput, onKey, onResize, ...rest } = props;
   const { theme } = useTheme();
   useEffect(() => {
-    // 根据屏幕宽度决定字体大小，手机端使用更小的字体
-    const width = window.innerWidth;
-    // 按屏幕宽度自适应字体大小
-    let fontSize = 16;
-    if (width < 400) {
-      fontSize = 4;
-    } else if (width < 600) {
-      fontSize = 5;
-    } else if (width < 900) {
-      fontSize = 6;
-    } else if (width < 1280) {
-      fontSize = 12;
-    } // ≥1280: 16
-
     const terminal = new Terminal({
       allowTransparency: true,
       fontFamily:
-        'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "JetBrains Mono", monospace',
+        '"JetBrains Mono", "Aa偷吃可爱长大的", "Noto Serif SC", monospace',
       cursorInactiveStyle: 'outline',
       drawBoldTextInBrightColors: false,
-      fontSize: fontSize,
+      fontSize: 14,
       lineHeight: 1.2,
     });
     terminalRef.current = terminal;
@@ -70,7 +56,6 @@ const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
     terminal.loadAddon(fitAddon);
     terminal.open(domRef.current!);
 
-    // 所有端都使用 Canvas 渲染器（包括手机端）
     terminal.loadAddon(new CanvasAddon());
     terminal.onData((data) => {
       if (onInput) {

packages/napcat-webui-frontend/src/config/site.tsx

@@ -1,72 +1,107 @@
 import {
-  LuActivity,
-  LuFileText,
-  LuFolderOpen,
-  LuInfo,
-  LuLayoutDashboard,
-  LuSettings,
-  LuSignal,
-  LuTerminal,
-  LuZap,
-} from 'react-icons/lu';
+  BugIcon2,
+  FileIcon,
+  InfoIcon,
+  LogIcon,
+  RouteIcon,
+  SettingsIcon,
+  SignalTowerIcon,
+  TerminalIcon,
+} from '@/components/icons';
 
 export type SiteConfig = typeof siteConfig;
 export interface MenuItem {
-  label: string;
-  icon?: React.ReactNode;
-  autoOpen?: boolean;
-  href?: string;
-  items?: MenuItem[];
-  customIcon?: string;
+  label: string
+  icon?: React.ReactNode
+  autoOpen?: boolean
+  href?: string
+  items?: MenuItem[]
+  customIcon?: string
 }
 
 export const siteConfig = {
-  name: 'NapCat',
+  name: 'NapCat WebUI',
   description: 'NapCat WebUI.',
   navItems: [
     {
       label: '基础信息',
-      icon: <LuLayoutDashboard className='w-5 h-5' />,
+      icon: (
+        <div className='w-5 h-5'>
+          <RouteIcon />
+        </div>
+      ),
       href: '/',
     },
     {
       label: '网络配置',
-      icon: <LuSignal className='w-5 h-5' />,
+      icon: (
+        <div className='w-5 h-5'>
+          <SignalTowerIcon />
+        </div>
+      ),
       href: '/network',
     },
     {
       label: '其他配置',
-      icon: <LuSettings className='w-5 h-5' />,
+      icon: (
+        <div className='w-5 h-5'>
+          <SettingsIcon />
+        </div>
+      ),
       href: '/config',
     },
     {
       label: '猫猫日志',
-      icon: <LuFileText className='w-5 h-5' />,
+      icon: (
+        <div className='w-5 h-5'>
+          <LogIcon />
+        </div>
+      ),
       href: '/logs',
     },
     {
       label: '接口调试',
-      icon: <LuActivity className='w-5 h-5' />,
-      href: '/debug/http',
-    },
-    {
-      label: '实时调试',
-      icon: <LuZap className='w-5 h-5' />,
-      href: '/debug/ws',
+      icon: (
+        <div className='w-5 h-5'>
+          <BugIcon2 />
+        </div>
+      ),
+      items: [
+        {
+          label: 'HTTP',
+          href: '/debug/http',
+        },
+        {
+          label: 'Websocket',
+          href: '/debug/ws',
+        },
+      ],
     },
     {
       label: '文件管理',
-      icon: <LuFolderOpen className='w-5 h-5' />,
+      icon: (
+        <div className='w-5 h-5'>
+          <FileIcon />
+        </div>
+      ),
       href: '/file_manager',
     },
     {
       label: '系统终端',
-      icon: <LuTerminal className='w-5 h-5' />,
+      icon: (
+        <div className='w-5 h-5'>
+          <TerminalIcon />
+        </div>
+      ),
       href: '/terminal',
     },
     {
       label: '关于我们',
-      icon: <LuInfo className='w-5 h-5' />,
+      icon: (
+        <div className='w-5 h-5'>
+          <InfoIcon />
+        </div>
+      ),
       href: '/about',
     },
   ] as MenuItem[],

packages/napcat-webui-frontend/src/const/ob_api/message/index.ts

@@ -141,7 +141,7 @@ const oneBotHttpApiMessage = {
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       message_seq: z.union([z.string(), z.number()]).describe('消息序号'),
       count: z.number().int().positive().describe('获取数量'),
-      reverse_order: z.boolean().describe('是否倒序'),
+      reverseOrder: z.boolean().describe('是否倒序'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
@@ -166,7 +166,7 @@ const oneBotHttpApiMessage = {
       user_id: z.union([z.string(), z.number()]).describe('用户QQ号'),
       message_seq: z.union([z.string(), z.number()]).describe('消息序号'),
       count: z.number().int().positive().describe('获取数量'),
-      reverse_order: z.boolean().describe('是否倒序'),
+      reverseOrder: z.boolean().describe('是否倒序'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({

packages/napcat-webui-frontend/src/const/ob_api/user.ts

@@ -15,7 +15,7 @@ const oneBotHttpApiUser = {
       data: commonResponseDataSchema,
     }),
   },
-  '/send_ark_share': {
+  '/ArkSharePeer': {
     description: '获取推荐好友/群聊卡片',
     request: z
       .object({
@@ -27,7 +27,7 @@ const oneBotHttpApiUser = {
           .union([z.string(), z.number()])
           .optional()
           .describe('用户ID，与 group_id 二选一'),
-        phone_number: z.string().optional().describe('对方手机号码'),
+        phoneNumber: z.string().optional().describe('对方手机号码'),
       })
       .refine(
         (data) =>
@@ -45,7 +45,7 @@ const oneBotHttpApiUser = {
       }),
     }),
   },
-  '/send_group_ark_share': {
+  '/ArkShareGroup': {
     description: '获取推荐群聊卡片',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群聊ID'),

packages/napcat-webui-frontend/src/contexts/dialog.tsx

@@ -6,30 +6,30 @@ import type { ModalProps } from '@/components/modal';
 
 export interface AlertProps
   extends Omit<ModalProps, 'onCancel' | 'showCancel' | 'cancelText'> {
-  onConfirm?: () => void;
+  onConfirm?: () => void
 }
 
 export interface ConfirmProps extends ModalProps {
-  onConfirm?: () => void;
-  onCancel?: () => void;
+  onConfirm?: () => void
+  onCancel?: () => void
 }
 
 export interface ModalItem extends ModalProps {
-  id: number;
+  id: number
 }
 
 export interface DialogContextProps {
-  alert: (config: AlertProps) => void;
-  confirm: (config: ConfirmProps) => void;
+  alert: (config: AlertProps) => void
+  confirm: (config: ConfirmProps) => void
 }
 
 export interface DialogProviderProps {
-  children: React.ReactNode;
+  children: React.ReactNode
 }
 
 export const DialogContext = React.createContext<DialogContextProps>({
-  alert: () => { },
-  confirm: () => { },
+  alert: () => {},
+  confirm: () => {},
 });
 
 const DialogProvider: React.FC<DialogProviderProps> = ({ children }) => {

packages/napcat-webui-frontend/src/contexts/songs.tsx

@@ -0,0 +1,91 @@
+// Songs Context
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { createContext, useEffect, useState } from 'react';
+
+import { PlayMode } from '@/const/enum';
+import key from '@/const/key';
+
+import AudioPlayer from '@/components/audio_player';
+
+import { get163MusicListSongs, getNextMusic } from '@/utils/music';
+
+import type { FinalMusic } from '@/types/music';
+
+export interface MusicContextProps {
+  setListId: (id: string) => void
+  listId: string
+  onNext: () => void
+  onPrevious: () => void
+}
+
+export interface MusicProviderProps {
+  children: React.ReactNode
+}
+
+export const AudioContext = createContext<MusicContextProps>({
+  setListId: () => {},
+  listId: '5438670983',
+  onNext: () => {},
+  onPrevious: () => {},
+});
+
+const AudioProvider: React.FC<MusicProviderProps> = ({ children }) => {
+  const [listId, setListId] = useLocalStorage(key.musicID, '5438670983');
+  const [musicList, setMusicList] = useState<FinalMusic[]>([]);
+  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);
+  };
+  const onPrevious = () => {
+    const index = musicList.findIndex((music) => music.id === musicId);
+    if (index === 0) {
+      setMusicId(musicList[musicList.length - 1].id);
+    } else {
+      setMusicId(musicList[index - 1].id);
+    }
+  };
+  const onPlayEnd = () => {
+    const nextID = getNextMusic(musicList, musicId, playMode);
+    setMusicId(nextID);
+  };
+  const changeMode = (mode: PlayMode) => {
+    setPlayMode(mode);
+  };
+  const fetchMusicList = async (id: string) => {
+    const res = await get163MusicListSongs(id);
+    setMusicList(res);
+    setMusicId(res[0].id);
+  };
+  useEffect(() => {
+    if (listId && token) fetchMusicList(listId);
+  }, [listId, token]);
+  return (
+    <AudioContext.Provider
+      value={{
+        setListId,
+        listId,
+        onNext,
+        onPrevious,
+      }}
+    >
+      <AudioPlayer
+        title={music?.title}
+        src={music?.url || ''}
+        artist={music?.artist}
+        cover={music?.cover}
+        mode={playMode}
+        pressNext={onNext}
+        pressPrevious={onPrevious}
+        onPlayEnd={onPlayEnd}
+        onChangeMode={changeMode}
+      />
+      {children}
+    </AudioContext.Provider>
+  );
+};
+
+export default AudioProvider;

packages/napcat-webui-frontend/src/controllers/webui_manager.ts

@@ -48,21 +48,6 @@ export default class WebUIManager {
     return data.data;
   }
 
-  public static async getLatestTag () {
-    const { data } =
-      await serverRequest.get<ServerResponse<string>>('/base/getLatestTag');
-    return data.data;
-  }
-
-  public static async UpdateNapCat () {
-    const { data } = await serverRequest.post<ServerResponse<any>>(
-      '/UpdateNapCat/update',
-      {},
-      { timeout: 60000 } // 1分钟超时
-    );
-    return data;
-  }
-
   public static async getQQVersion () {
     const { data } =
       await serverRequest.get<ServerResponse<string>>('/base/QQVersion');
@@ -212,35 +197,4 @@ export default class WebUIManager {
     );
     return data.data;
   }
-
-  // Passkey相关方法
-  public static async generatePasskeyRegistrationOptions () {
-    const { data } = await serverRequest.post<ServerResponse<any>>(
-      '/auth/passkey/generate-registration-options'
-    );
-    return data.data;
-  }
-
-  public static async verifyPasskeyRegistration (response: any) {
-    const { data } = await serverRequest.post<ServerResponse<any>>(
-      '/auth/passkey/verify-registration',
-      { response }
-    );
-    return data.data;
-  }
-
-  public static async generatePasskeyAuthenticationOptions () {
-    const { data } = await serverRequest.post<ServerResponse<any>>(
-      '/auth/passkey/generate-authentication-options'
-    );
-    return data.data;
-  }
-
-  public static async verifyPasskeyAuthentication (response: any) {
-    const { data } = await serverRequest.post<ServerResponse<any>>(
-      '/auth/passkey/verify-authentication',
-      { response }
-    );
-    return data.data;
-  }
 }

packages/napcat-webui-frontend/src/hooks/use-music.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { AudioContext } from '@/contexts/songs';
+
+const useMusic = () => {
+  const music = React.useContext(AudioContext);
+
+  return music;
+};
+
+export default useMusic;

packages/napcat-webui-frontend/src/hooks/use-websocket-debug.ts

@@ -1,4 +1,5 @@
 import type { Selection } from '@react-types/shared';
+import { useReactive } from 'ahooks';
 import { useCallback, useState } from 'react';
 import toast from 'react-hot-toast';
 import useWebSocket, { ReadyState } from 'react-use-websocket';
@@ -10,8 +11,8 @@ import { isOB11Event, isOB11RequestResponse } from '@/utils/onebot';
 import type { AllOB11WsResponse } from '@/types/onebot';
 
 export { ReadyState } from 'react-use-websocket';
-export function useWebSocketDebug (url: string, token: string, connectOnMount: boolean = true) {
-  const [messageHistory, setMessageHistory] = useState<AllOB11WsResponse[]>([]);
+export function useWebSocketDebug (url: string, token: string) {
+  const messageHistory = useReactive<AllOB11WsResponse[]>([]);
   const [filterTypes, setFilterTypes] = useState<Selection>('all');
 
   const filteredMessages = messageHistory.filter((msg) => {
@@ -21,18 +22,11 @@ export function useWebSocketDebug (url: string, token: string, connectOnMount: b
     return false;
   });
 
-  const { sendMessage, readyState } = useWebSocket(connectOnMount ? url : null, {
-    share: false,
+  const { sendMessage, readyState } = useWebSocket(url, {
     onMessage: useCallback((event: WebSocketEventMap['message']) => {
       try {
         const data = JSON.parse(event.data);
-        setMessageHistory((prev) => {
-          const newHistory = [data, ...prev];
-          if (newHistory.length > 500) {
-            return newHistory.slice(0, 500);
-          }
-          return newHistory;
-        });
+        messageHistory.unshift(data);
       } catch (_error) {
         toast.error('WebSocket 消息解析失败');
       }
@@ -45,7 +39,7 @@ export function useWebSocketDebug (url: string, token: string, connectOnMount: b
       console.error('WebSocket error:', event);
     },
     onOpen: () => {
-      setMessageHistory([]);
+      messageHistory.splice(0, messageHistory.length);
     },
   });
 
@@ -56,10 +50,6 @@ export function useWebSocketDebug (url: string, token: string, connectOnMount: b
     sendMessage(msg);
   };
 
-  const clearMessages = useCallback(() => {
-    setMessageHistory([]);
-  }, []);
-
   const FilterMessagesType = renderFilterMessageType(
     filterTypes,
     setFilterTypes
@@ -73,6 +63,5 @@ export function useWebSocketDebug (url: string, token: string, connectOnMount: b
     filterTypes,
     setFilterTypes,
     FilterMessagesType,
-    clearMessages,
   };
 }

packages/napcat-webui-frontend/src/layouts/default.tsx

@@ -79,29 +79,21 @@ const Layout: React.FC<{ children: React.ReactNode; }> = ({ children }) => {
   }, [location.pathname]);
   return (
     <div
-      className='h-screen relative flex items-stretch overflow-hidden'
+      className='h-screen relative flex bg-primary-50 dark:bg-black items-stretch'
       style={{
-        backgroundImage: b64img ? `url(${b64img})` : undefined,
+        backgroundImage: `url(${b64img})`,
         backgroundSize: 'cover',
-        backgroundPosition: 'center',
       }}
     >
-      <SideBar
-        items={menus}
-        open={openSideBar}
-        onClose={() => setOpenSideBar(false)}
-      />
-      <motion.div
-        layout
+      <SideBar items={menus} open={openSideBar} />
+      <div
         ref={contentRef}
-        initial={{ opacity: 0, scale: 0.98 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 0.4 }}
         className={clsx(
-          'flex-1 overflow-y-auto',
-          'transition-all duration-300 ease-in-out',
-          openSideBar ? 'ml-0' : 'ml-0',
-          'pb-10 md:pb-0'
+          'overflow-y-auto flex-1 rounded-md m-1 bg-content1 pb-10 md:pb-0',
+          openSideBar ? 'ml-0' : 'ml-1',
+          !b64img && 'shadow-inner',
+          b64img && '!bg-opacity-50 backdrop-blur-none dark:bg-background',
+          'overflow-x-hidden'
         )}
       >
         <div
@@ -113,12 +105,15 @@ const Layout: React.FC<{ children: React.ReactNode; }> = ({ children }) => {
             'z-30 m-2 mb-0 sticky top-2 left-0'
           )}
         >
-          <div
+          <motion.div
             className={clsx(
-              'mr-1 ease-in-out ml-0 md:relative z-50 md:z-auto',
-              openSideBar && 'pl-2',
+              'mr-1 ease-in-out ml-0 md:relative',
+              openSideBar && 'pl-2 absolute',
               'md:!ml-0 md:pl-0'
             )}
+            transition={{ type: 'spring', stiffness: 150, damping: 15 }}
+            initial={{ marginLeft: 0 }}
+            animate={{ marginLeft: openSideBar ? '15rem' : 0 }}
           >
             <Button
               isIconOnly
@@ -128,7 +123,7 @@ const Layout: React.FC<{ children: React.ReactNode; }> = ({ children }) => {
             >
               {openSideBar ? <MdMenuOpen size={24} /> : <MdMenu size={24} />}
             </Button>
-          </div>
+          </motion.div>
           <Breadcrumbs isDisabled size='lg'>
             {title?.map((item, index) => (
               <BreadcrumbItem key={index}>
@@ -150,7 +145,7 @@ const Layout: React.FC<{ children: React.ReactNode; }> = ({ children }) => {
         <ErrorBoundary fallbackRender={errorFallbackRender}>
           {children}
         </ErrorBoundary>
-      </motion.div>
+      </div>
     </div>
   );
 };

packages/napcat-webui-frontend/src/main.tsx

@@ -8,7 +8,7 @@ import '@/styles/globals.css';
 
 import key from './const/key';
 import WebUIManager from './controllers/webui_manager';
-import { initFont, loadTheme } from './utils/theme';
+import { loadTheme } from './utils/theme';
 
 WebUIManager.checkWebUiLogined();
 
@@ -24,7 +24,6 @@ if (theme && !theme.startsWith('"')) {
 }
 
 loadTheme();
-initFont();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   // <React.StrictMode>
@@ -35,19 +34,3 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   </BrowserRouter>
   // </React.StrictMode>
 );
-
-if (!import.meta.env.DEV) {
-  if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-      const baseUrl = import.meta.env.BASE_URL;
-      const swUrl = `${baseUrl}sw.js`;
-      navigator.serviceWorker.register(swUrl, { scope: baseUrl })
-        .then((registration) => {
-          console.log('SW registered: ', registration);
-        })
-        .catch((registrationError) => {
-          console.log('SW registration failed: ', registrationError);
-        });
-    });
-  }
-}

packages/napcat-webui-frontend/src/monaco.ts

@@ -0,0 +1,33 @@
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+self.MonacoEnvironment = {
+  getWorker (_: unknown, label: string) {
+    if (label === 'json') {
+      // eslint-disable-next-line new-cap
+      return new jsonWorker();
+    }
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      // eslint-disable-next-line new-cap
+      return new cssWorker();
+    }
+    if (label === 'html' || label === 'handlebars' || label === 'razor') {
+      // eslint-disable-next-line new-cap
+      return new htmlWorker();
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      // eslint-disable-next-line new-cap
+      return new tsWorker();
+    }
+    // eslint-disable-next-line new-cap
+    return new editorWorker();
+  },
+};
+
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+
+export default monaco;

packages/napcat-webui-frontend/src/pages/dashboard/about.tsx

@@ -1,190 +1,204 @@
-import { Card, CardBody, CardHeader } from '@heroui/card';
-import { Chip } from '@heroui/chip';
-import { Divider } from '@heroui/divider';
+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 {
-  BsCodeSlash,
-  BsCpu,
-  BsGithub,
-  BsGlobe,
-  BsPlugin,
-  BsTelegram,
-  BsTencentQq
-} from 'react-icons/bs';
-import { IoDocument, IoRocketSharp } from 'react-icons/io5';
+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 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';
 
 function VersionInfo () {
   const { data, loading, error } = useRequest(WebUIManager.GetNapCatVersion);
-
   return (
-    <div className='flex items-center gap-2'>
-      {error ? (
-        <Chip color="danger" variant="flat" size="sm">{error.message}</Chip>
-      ) : loading ? (
-        <Spinner size='sm' color="default" />
-      ) : (
-        <div className="flex items-center gap-2">
-          <Chip size="sm" color="default" variant="flat" className="text-default-500">WebUI v0.0.6</Chip>
-          <Chip size="sm" color="primary" variant="flat">Core {data?.version}</Chip>
-        </div>
-      )}
+    <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' />
+            )
+            : (
+              <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}
+              />
+            )}
+      </div>
     </div>
   );
 }
 
 export default function AboutPage () {
-  const features = [
-    {
-      icon: <IoRocketSharp size={20} />,
-      title: '高性能架构',
-      desc: 'Node.js + Native 混合架构，资源占用低，响应速度快。',
-      className: 'bg-primary-50 text-primary'
-    },
-    {
-      icon: <BsGlobe size={20} />,
-      title: '全平台支持',
-      desc: '适配 Windows、Linux 及 Docker 环境。',
-      className: 'bg-success-50 text-success'
-    },
-    {
-      icon: <BsCodeSlash size={20} />,
-      title: 'OneBot 11',
-      desc: '深度集成标准协议，兼容现有生态。',
-      className: 'bg-warning-50 text-warning'
-    },
-    {
-      icon: <BsPlugin size={20} />,
-      title: '极易扩展',
-      desc: '提供丰富的 API 接口与 WebHook 支持。',
-      className: 'bg-secondary-50 text-secondary'
-    }
-  ];
+  const { isDark } = useTheme();
 
-  const links = [
-    { icon: <BsGithub />, name: 'GitHub', href: 'https://github.com/NapNeko/NapCatQQ' },
-    { icon: <BsTelegram />, name: 'Telegram', href: 'https://t.me/napcatqq' },
-    { icon: <BsTencentQq />, name: 'QQ 群 1', href: 'https://qm.qq.com/q/F9cgs1N3Mc' },
-    { icon: <BsTencentQq />, name: 'QQ 群 2', href: 'https://qm.qq.com/q/hSt0u9PVn' },
-    { icon: <IoDocument />, name: '文档', href: 'https://napcat.napneko.icu/' },
-  ];
+  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 cardStyle = "bg-default/40 backdrop-blur-lg border-none shadow-none";
+  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 (
-    <div className='flex flex-col h-full w-full gap-6 p-2 md:p-6'>
-      <title>关于 - NapCat WebUI</title>
-
-      {/* 头部标题区 */}
-      <div className="flex flex-col gap-2">
-        <h1 className="text-2xl font-bold flex items-center gap-3 text-default-900">
-          <Image src={logo} alt="NapCat Logo" width={32} height={32} />
-          关于 NapCat
-        </h1>
-        <div className="flex items-center gap-4 text-small text-default-500">
-          <p>现代化、轻量级的 QQ 机器人框架</p>
-          <Divider orientation="vertical" className="h-4" />
-          <VersionInfo />
-        </div>
-      </div>
-
-      <Divider className="opacity-50" />
-
-      {/* 主内容区：双栏布局 */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-grow">
-
-        {/* 左侧：介绍与特性 */}
-        <div className="lg:col-span-2 space-y-6">
-          <Card shadow="sm" className={cardStyle}>
-            <CardHeader className="pb-0 pt-4 px-4 flex-col items-start">
-              <h2 className="text-lg font-bold">项目简介</h2>
-            </CardHeader>
-            <CardBody className="py-4 text-default-600 leading-relaxed space-y-2">
-              <p>
-                NapCat (瞌睡猫) 是一个致力于打破 QQ 机器人开发壁垒的开源项目。我们利用 NTQQ 的底层能力，
-                构建了一个无需 GUI 即可在服务器端稳定运行的 Headless 框架。
+    <>
+      <title>关于 NapCat WebUI</title>
+      <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>
+          <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>
-                无论是个人开发者还是企业用户，NapCat 都能提供开箱即用的 OneBot 11 协议支持，
-                助您快速将创意转化为现实。
+              <p className='font-bold text-primary-400'>魔法版介绍</p>
+              <p className='text-default-800'>
+                猫猫框架通过魔法的手段获得了 QQ 的发送消息、接收消息等接口。
+                为了方便使用，猫猫框架将通过一种名为 OneBot 的约定将你的 HTTP /
+                WebSocket 请求按照规范读取，
+                再去调用猫猫框架所获得的QQ发送接口之类的接口。
               </p>
-            </CardBody>
-          </Card>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {features.map((item, index) => (
-              <Card key={index} shadow="sm" className={cardStyle}>
-                <CardBody className="flex flex-row items-start gap-4 p-4">
-                  <div className={`p-3 rounded-lg ${item.className}`}>
-                    {item.icon}
-                  </div>
-                  <div>
-                    <h3 className="font-semibold text-default-900">{item.title}</h3>
-                    <p className="text-small text-default-500 mt-1">{item.desc}</p>
-                  </div>
-                </CardBody>
-              </Card>
-            ))}
+            </div>
           </div>
         </div>
-
-        {/* 右侧：信息与链接 */}
-        <div className="space-y-6">
-          <Card shadow="sm" className={cardStyle}>
-            <CardHeader className="pb-0 pt-4 px-4">
-              <h2 className="text-lg font-bold">相关资源</h2>
-            </CardHeader>
-            <CardBody className="py-4">
-              <div className="flex flex-col gap-2">
-                {links.map((link, idx) => (
-                  <Link
-                    key={idx}
-                    isExternal
-                    href={link.href}
-                    className="flex items-center justify-between p-3 rounded-xl hover:bg-default-100/50 transition-colors text-default-600"
-                  >
-                    <span className="flex items-center gap-3">
-                      {link.icon}
-                      {link.name}
-                    </span>
-                    <span className="text-tiny text-default-400">跳转 &rarr;</span>
-                  </Link>
-                ))}
-              </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 shadow="sm" className={cardStyle}>
-            <CardHeader className="pb-0 pt-4 px-4">
-              <h2 className="text-lg font-bold flex items-center gap-2">
-                <BsCpu /> 技术栈
-              </h2>
-            </CardHeader>
-            <CardBody className="py-4">
-              <div className="flex flex-wrap gap-2">
-                {['TypeScript', 'React', 'Vite', 'Node.js', 'Electron', 'HeroUI'].map((tech) => (
-                  <Chip key={tech} size="sm" variant="flat" className="bg-default-100/50 text-default-600">
-                    {tech}
-                  </Chip>
-                ))}
-              </div>
+          <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/napcatqq'
+          >
+            <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>
+        <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>
 
-      {/* 底部版权 - 移出 grid 布局 */}
-      <div className="w-full text-center text-tiny text-default-400 py-4 mt-auto flex flex-col items-center gap-1">
-        <p className="flex items-center justify-center gap-1">
-          Made with <span className="text-danger">❤️</span> by NapCat Team
-        </p>
-        <p>MIT License © {new Date().getFullYear()}</p>
-      </div>
-    </div>
+          <NapCatRepoInfo />
+        </div>
+      </section>
+    </>
   );
-}
+}

packages/napcat-webui-frontend/src/pages/dashboard/config/index.tsx

@@ -1,11 +1,9 @@
 import { Card, CardBody } from '@heroui/card';
 import { Tab, Tabs } from '@heroui/tabs';
-import { useLocalStorage } from '@uidotdev/usehooks';
 import clsx from 'clsx';
+import { useMediaQuery } from 'react-responsive';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
-import key from '@/const/key';
-
 import ChangePasswordCard from './change_password';
 import LoginConfigCard from './login';
 import OneBotConfigCard from './onebot';
@@ -14,29 +12,24 @@ import ThemeConfigCard from './theme';
 import WebUIConfigCard from './webui';
 
 export interface ConfigPageProps {
-  children?: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg';
+  children?: React.ReactNode
+  size?: 'sm' | 'md' | 'lg'
 }
 
-const ConfigPageItem: React.FC<ConfigPageProps> = ({
+const ConfingPageItem: React.FC<ConfigPageProps> = ({
   children,
   size = 'md',
 }) => {
-  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
-  const hasBackground = !!backgroundImage;
-
   return (
-    <Card className={clsx(
-      'w-full mx-auto backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm rounded-2xl transition-all',
-      hasBackground ? 'bg-white/20 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40',
-      {
-        'max-w-xl': size === 'sm',
-        'max-w-3xl': size === 'md',
-        'max-w-6xl': size === 'lg',
-      }
-    )}>
-      <CardBody className='py-6 px-4 md:py-8 md:px-12'>
-        <div className='w-full flex flex-col gap-5'>
+    <Card className='bg-opacity-50 backdrop-blur-sm'>
+      <CardBody className='items-center py-5'>
+        <div
+          className={clsx('max-w-full flex flex-col gap-2', {
+            'w-72': size === 'sm',
+            'w-96': size === 'md',
+            'w-[32rem]': size === 'lg',
+          })}
+        >
           {children}
         </div>
       </CardBody>
@@ -45,6 +38,7 @@ const ConfigPageItem: React.FC<ConfigPageProps> = ({
 };
 
 export default function ConfigPage () {
+  const isMediumUp = useMediaQuery({ minWidth: 768 });
   const navigate = useNavigate();
   const search = useSearchParams({
     tab: 'onebot',
@@ -52,55 +46,53 @@ export default function ConfigPage () {
   const tab = search.get('tab') ?? 'onebot';
 
   return (
-    <section className='w-full max-w-[1200px] mx-auto py-4 md:py-8 px-2 md:px-6 relative'>
-      <title>其它配置 - NapCat WebUI</title>
+    <section className='w-[1000px] max-w-full md:mx-auto gap-4 py-8 px-2 md:py-10'>
       <Tabs
         aria-label='config tab'
-        fullWidth={false}
+        fullWidth
         className='w-full'
+        isVertical={isMediumUp}
         selectedKey={tab}
         onSelectionChange={(key) => {
           navigate(`/config?tab=${key}`);
         }}
         classNames={{
-          base: 'w-full flex-col items-center',
-          tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md rounded-2xl p-1.5 shadow-sm border border-white/20 dark:border-white/5 mb-4 md:mb-8 w-full md:w-fit mx-auto overflow-x-auto hide-scrollbar',
-          cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm rounded-xl',
-          tab: 'h-9 px-4 md:px-6',
-          tabContent: 'text-default-600 dark:text-default-300 font-medium group-data-[selected=true]:text-primary',
-          panel: 'w-full relative p-0',
+          tabList: 'sticky flex top-14 bg-opacity-50 backdrop-blur-sm',
+          panel: 'w-full relative',
+          base: 'md:!w-auto flex-grow-0 flex-shrink-0 mr-0',
+          cursor: 'bg-opacity-60 backdrop-blur-sm',
         }}
       >
         <Tab title='OneBot配置' key='onebot'>
-          <ConfigPageItem>
+          <ConfingPageItem>
             <OneBotConfigCard />
-          </ConfigPageItem>
+          </ConfingPageItem>
         </Tab>
         <Tab title='服务器配置' key='server'>
-          <ConfigPageItem>
+          <ConfingPageItem>
             <ServerConfigCard />
-          </ConfigPageItem>
+          </ConfingPageItem>
         </Tab>
         <Tab title='WebUI配置' key='webui'>
-          <ConfigPageItem>
+          <ConfingPageItem>
             <WebUIConfigCard />
-          </ConfigPageItem>
+          </ConfingPageItem>
         </Tab>
         <Tab title='登录配置' key='login'>
-          <ConfigPageItem>
+          <ConfingPageItem>
             <LoginConfigCard />
-          </ConfigPageItem>
+          </ConfingPageItem>
         </Tab>
         <Tab title='修改密码' key='token'>
-          <ConfigPageItem size='sm'>
+          <ConfingPageItem>
             <ChangePasswordCard />
-          </ConfigPageItem>
+          </ConfingPageItem>
         </Tab>
 
         <Tab title='主题配置' key='theme'>
-          <ConfigPageItem size='lg'>
+          <ConfingPageItem size='lg'>
             <ThemeConfigCard />
-          </ConfigPageItem>
+          </ConfingPageItem>
         </Tab>
       </Tabs>
     </section>

packages/napcat-webui-frontend/src/pages/dashboard/config/onebot.tsx

@@ -74,11 +74,6 @@ const OneBotConfigCard = () => {
             {...field}
             label='音乐签名地址'
             placeholder='请输入音乐签名地址'
-            classNames={{
-              inputWrapper:
-                'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
-              input: 'bg-transparent text-default-700 placeholder:text-default-400',
-            }}
           />
         )}
       />