From 8697061a90f2bf744bf7016419e4882eca939c67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?= Date: Mon, 22 Dec 2025 10:38:23 +0800 Subject: [PATCH] Refactor UI styles for improved consistency and clarity Unified card backgrounds, borders, and shadows across components for a more consistent look. Enhanced table, tab, and button styles for clarity and accessibility. Improved layout and modal structure in OneBot API debug, added modal for struct display, and optimized WebSocket debug connection logic. Updated file manager, logs, network, and terminal pages for visual consistency. Refactored interface definitions for stricter typing and readability. --- .../src/components/display_card/container.tsx | 22 +- .../src/components/display_network_item.tsx | 33 +- .../src/components/file_manage/file_table.tsx | 64 ++-- .../src/components/hitokoto.tsx | 24 +- .../src/components/onebot/api/debug.tsx | 322 ++++++++++-------- .../components/onebot/api/display_struct.tsx | 16 +- .../src/components/onebot/api/nav_list.tsx | 26 +- .../components/onebot/display_card/render.tsx | 10 +- .../src/components/qq_info_card.tsx | 34 +- .../src/components/system_info.tsx | 16 +- .../src/components/system_status_display.tsx | 28 +- .../src/hooks/use-websocket-debug.ts | 23 +- .../src/layouts/default.tsx | 4 +- .../pages/dashboard/debug/websocket/index.tsx | 34 +- .../src/pages/dashboard/file_manager.tsx | 8 +- .../src/pages/dashboard/index.tsx | 2 +- .../src/pages/dashboard/logs.tsx | 4 +- .../src/pages/dashboard/network.tsx | 4 +- .../src/pages/dashboard/terminal.tsx | 2 +- 19 files changed, 380 insertions(+), 296 deletions(-) diff --git a/packages/napcat-webui-frontend/src/components/display_card/container.tsx b/packages/napcat-webui-frontend/src/components/display_card/container.tsx index 845759bc..c96c9f8a 100644 --- a/packages/napcat-webui-frontend/src/components/display_card/container.tsx +++ b/packages/napcat-webui-frontend/src/components/display_card/container.tsx @@ -4,19 +4,19 @@ import clsx from 'clsx'; import { title } from '../primitives'; export interface ContainerProps { - title: string - tag?: React.ReactNode - action: React.ReactNode - enableSwitch: React.ReactNode - children: React.ReactNode + title: string; + tag?: React.ReactNode; + action: React.ReactNode; + enableSwitch: React.ReactNode; + children: React.ReactNode; } export interface DisplayCardProps { - showType?: boolean - onEdit: () => void - onEnable: () => Promise - onDelete: () => Promise - onEnableDebug: () => Promise + showType?: boolean; + onEdit: () => void; + onEnable: () => Promise; + onDelete: () => Promise; + onEnableDebug: () => Promise; } const DisplayCardContainer: React.FC = ({ @@ -27,7 +27,7 @@ const DisplayCardContainer: React.FC = ({ children, }) => { return ( - + {tag && (
diff --git a/packages/napcat-webui-frontend/src/components/display_network_item.tsx b/packages/napcat-webui-frontend/src/components/display_network_item.tsx index 39563b90..322977b3 100644 --- a/packages/napcat-webui-frontend/src/components/display_network_item.tsx +++ b/packages/napcat-webui-frontend/src/components/display_network_item.tsx @@ -1,12 +1,12 @@ import { Card, CardBody } from '@heroui/card'; import clsx from 'clsx'; -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 = ({ @@ -17,35 +17,26 @@ const NetworkItemDisplay: React.FC = ({ return (
{count}
{label} diff --git a/packages/napcat-webui-frontend/src/components/file_manage/file_table.tsx b/packages/napcat-webui-frontend/src/components/file_manage/file_table.tsx index b0e0b2d2..d0538adc 100644 --- a/packages/napcat-webui-frontend/src/components/file_manage/file_table.tsx +++ b/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={ -
+
setPage(page)} + classNames={{ + cursor: 'bg-primary shadow-lg', + }} />
} + 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', + }} > @@ -180,7 +188,7 @@ export default function FileTable ({ name={file.name} isDirectory={file.isDirectory} /> - } + } > {file.name} @@ -194,43 +202,43 @@ export default function FileTable ({ {new Date(file.mtime).toLocaleString()} - + diff --git a/packages/napcat-webui-frontend/src/components/onebot/api/debug.tsx b/packages/napcat-webui-frontend/src/components/onebot/api/debug.tsx index 7e7cf94f..d7785a5e 100644 --- a/packages/napcat-webui-frontend/src/components/onebot/api/debug.tsx +++ b/packages/napcat-webui-frontend/src/components/onebot/api/debug.tsx @@ -2,11 +2,12 @@ import { Button } from '@heroui/button'; import { Card, CardBody, CardHeader } from '@heroui/card'; import { Input } from '@heroui/input'; import { Snippet } from '@heroui/snippet'; +import { Modal, ModalBody, ModalContent, ModalHeader } from '@heroui/modal'; +import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'; import { useLocalStorage } from '@uidotdev/usehooks'; -import { motion } from 'motion/react'; import { useEffect, useRef, useState } from 'react'; import toast from 'react-hot-toast'; -import { IoLink, IoSend } from 'react-icons/io5'; +import { IoLink, IoSend, IoSettingsSharp } from 'react-icons/io5'; import { PiCatDuotone } from 'react-icons/pi'; import key from '@/const/key'; @@ -38,9 +39,8 @@ const OneBotApiDebug: React.FC = (props) => { }); const [requestBody, setRequestBody] = useState('{}'); const [responseContent, setResponseContent] = useState(''); - const [isCodeEditorOpen, setIsCodeEditorOpen] = useState(false); - const [isResponseOpen, setIsResponseOpen] = useState(false); const [isFetching, setIsFetching] = useState(false); + const [isStructOpen, setIsStructOpen] = useState(false); const responseRef = useRef(null); const parsedRequest = parse(data.request); const parsedResponse = parse(data.response); @@ -70,7 +70,6 @@ const OneBotApiDebug: React.FC = (props) => { }) .finally(() => { setIsFetching(false); - setIsResponseOpen(true); responseRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start', @@ -90,149 +89,202 @@ const OneBotApiDebug: React.FC = (props) => { }, [path]); return ( -
-

- - {data.description} -

-

- } - tooltipProps={{ - content: '点击复制地址', - }} - > - {path} - -

-
- - setHttpConfig({ ...httpConfig, url: e.target.value })} - /> - - setHttpConfig({ ...httpConfig, token: e.target.value })} - /> - -
- - - 请求体 +
+
+
+

+ + {data.description} +

+ } + tooltipProps={{ content: '点击复制地址' }} + > + {path} + - - - - setRequestBody(value ?? '')} - language='json' - height='400px' - /> +
-
+
+ + + + + +
+

请求配置

+ setHttpConfig({ ...httpConfig, url: e.target.value })} + variant='bordered' + labelPlacement='outside' + classNames={{ + inputWrapper: 'bg-default-100/50 backdrop-blur-sm border-default-200/50', + }} + /> + setHttpConfig({ ...httpConfig, token: e.target.value })} + variant='bordered' + labelPlacement='outside' + classNames={{ + inputWrapper: 'bg-default-100/50 backdrop-blur-sm border-default-200/50', + }} + /> +
+ + + + +
+
+ +
+ {/* Request Column */} + + +
+ + 请求体 (Request) +
+
- - - - - - - 响应 - - - - - - 
-              
-                {responseContent || (
-                  
暂无响应

-                )}
-              
-
- - - -
-

请求体结构

- -

响应体结构

- + + +
+ setRequestBody(value ?? '')} + language='json' + options={{ + minimap: { enabled: false }, + fontSize: 13, + padding: { top: 10, bottom: 10 }, + scrollBeyondLastLine: false, + }} + /> +
+ + + + {/* Response Column */} + + + +
+ + 响应 (Response) +
+ + + +
+ 
+                {responseContent || 等待请求响应...}
+
+
+ +
+ + {/* Struct Display - maybe put in a modal or separate tab? + For now, putting it in a collapsed/compact area at bottom is tricky with "h-[calc(100vh)]". + User wants "Thorough optimization". + I will make Struct Display a Drawer or Modal, OR put it below if we want scrolling. + But I set height to fixed full screen. + Let's put Struct Display in a Tab or Toggle at Top? + Or just let the main container scroll and remove fixed height? + Layout choice: Fixed height editors are good for workflow. Structure is reference. + I will leave Struct Display OUT of the fixed view, or add a toggle to show it. + Let's add a "View Structure" button in header that opens a Modal. + Yes, that's cleaner. + */} + + + {() => ( + <> + + API 数据结构定义 + + +
+
+

请求体结构 (Request)

+ +
+
+

响应体结构 (Response)

+ +
+
+ + + )} + +
+ ); }; diff --git a/packages/napcat-webui-frontend/src/components/onebot/api/display_struct.tsx b/packages/napcat-webui-frontend/src/components/onebot/api/display_struct.tsx index 1cb42064..b1acda21 100644 --- a/packages/napcat-webui-frontend/src/components/onebot/api/display_struct.tsx +++ b/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 ( @@ -193,7 +193,7 @@ const RenderSchema: React.FC<{ schema: ParsedSchema }> = ({ schema }) => { const DisplayStruct: React.FC = ({ schema }) => { return ( -
+
{Array.isArray(schema) ? ( schema.map((s, i) => ) diff --git a/packages/napcat-webui-frontend/src/components/onebot/api/nav_list.tsx b/packages/napcat-webui-frontend/src/components/onebot/api/nav_list.tsx index f035a831..71f1cc91 100644 --- a/packages/napcat-webui-frontend/src/components/onebot/api/nav_list.tsx +++ b/packages/napcat-webui-frontend/src/components/onebot/api/nav_list.tsx @@ -7,10 +7,10 @@ import { useState } from 'react'; import type { OneBotHttpApi, OneBotHttpApiPath } from '@/const/ob_api'; export interface OneBotApiNavListProps { - data: OneBotHttpApi - selectedApi: OneBotHttpApiPath - onSelect: (apiName: OneBotHttpApiPath) => void - openSideBar: boolean + data: OneBotHttpApi; + selectedApi: OneBotHttpApiPath; + onSelect: (apiName: OneBotHttpApiPath) => void; + openSideBar: boolean; } const OneBotApiNavList: React.FC = (props) => { @@ -19,8 +19,8 @@ const OneBotApiNavList: React.FC = (props) => { return ( = (props) => { >
= (props) => { 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', + 'w-full border border-transparent rounded-xl mb-1 bg-transparent hover:bg-white/40 dark:hover:bg-white/10 transition-all text-default-600 dark:text-gray-300', { hidden: !( apiName.includes(searchValue) || @@ -59,7 +59,7 @@ const OneBotApiNavList: React.FC = (props) => { ), }, { - '!bg-opacity-40 border border-primary-400 bg-primary-50 text-primary-600': + '!bg-white/60 dark:!bg-white/10 !border-white/20 shadow-sm !text-primary font-medium': apiName === selectedApi, } )} @@ -69,8 +69,8 @@ const OneBotApiNavList: React.FC = (props) => {

{api.description}

{apiName} diff --git a/packages/napcat-webui-frontend/src/components/onebot/display_card/render.tsx b/packages/napcat-webui-frontend/src/components/onebot/display_card/render.tsx index eb03ea71..06156c83 100644 --- a/packages/napcat-webui-frontend/src/components/onebot/display_card/render.tsx +++ b/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
Request消息，暂未适配
; } 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' > - +
{isEvent ? getEventName(msg.post_type) : '请求响应'} diff --git a/packages/napcat-webui-frontend/src/components/qq_info_card.tsx b/packages/napcat-webui-frontend/src/components/qq_info_card.tsx index 36b35846..eb5e2bd2 100644 --- a/packages/napcat-webui-frontend/src/components/qq_info_card.tsx +++ b/packages/napcat-webui-frontend/src/components/qq_info_card.tsx @@ -8,15 +8,15 @@ 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 = ({ data, error, loading }) => { return ( @@ -31,28 +31,32 @@ const QQInfoCard: React.FC = ({ data, error, loading }) => { ) : ( - -
+ +
-
-
{data?.nick}
-
{data?.uin}
+
+
+ {data?.nick || '未知用户'} +
+
+ {data?.uin || 'Unknown'} +
)} diff --git a/packages/napcat-webui-frontend/src/components/system_info.tsx b/packages/napcat-webui-frontend/src/components/system_info.tsx index a5535b27..7608867b 100644 --- a/packages/napcat-webui-frontend/src/components/system_info.tsx +++ b/packages/napcat-webui-frontend/src/components/system_info.tsx @@ -30,10 +30,10 @@ const SystemInfoItem: React.FC = ({ endContent, }) => { return ( -
- {icon} -
{title}
-
{value}
+
+
{icon}
+
{title}
+
{value}
{endContent}
); @@ -303,13 +303,13 @@ const SystemInfo: React.FC = (props) => { error: qqVersionError, } = useRequest(WebUIManager.getQQVersion); return ( - - - + + + 系统信息 -
+
= ({ @@ -24,21 +24,21 @@ const SystemStatusItem: React.FC = ({ return (
-
{title}
-
+
{title}
+
{value} - {unit} + {unit && {unit}}
); }; export interface SystemStatusDisplayProps { - data?: SystemStatus + data?: SystemStatus; } const SystemStatusDisplay: React.FC = ({ data }) => { @@ -55,7 +55,7 @@ const SystemStatusDisplay: React.FC = ({ data }) => { } return ( - +
= ({ data }) => {
-

- +

+ CPU

@@ -88,8 +88,8 @@ const SystemStatusDisplay: React.FC = ({ data }) => { unit='%' />
-

- +

+ 内存

diff --git a/packages/napcat-webui-frontend/src/hooks/use-websocket-debug.ts b/packages/napcat-webui-frontend/src/hooks/use-websocket-debug.ts index 4d20954a..87bb0939 100644 --- a/packages/napcat-webui-frontend/src/hooks/use-websocket-debug.ts +++ b/packages/napcat-webui-frontend/src/hooks/use-websocket-debug.ts @@ -1,5 +1,4 @@ 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'; @@ -11,8 +10,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) { - const messageHistory = useReactive([]); +export function useWebSocketDebug (url: string, token: string, connectOnMount: boolean = true) { + const [messageHistory, setMessageHistory] = useState([]); const [filterTypes, setFilterTypes] = useState('all'); const filteredMessages = messageHistory.filter((msg) => { @@ -22,11 +21,18 @@ export function useWebSocketDebug (url: string, token: string) { return false; }); - const { sendMessage, readyState } = useWebSocket(url, { + const { sendMessage, readyState } = useWebSocket(connectOnMount ? url : null, { + share: false, onMessage: useCallback((event: WebSocketEventMap['message']) => { try { const data = JSON.parse(event.data); - messageHistory.unshift(data); + setMessageHistory((prev) => { + const newHistory = [data, ...prev]; + if (newHistory.length > 500) { + return newHistory.slice(0, 500); + } + return newHistory; + }); } catch (_error) { toast.error('WebSocket 消息解析失败'); } @@ -39,7 +45,7 @@ export function useWebSocketDebug (url: string, token: string) { console.error('WebSocket error:', event); }, onOpen: () => { - messageHistory.splice(0, messageHistory.length); + setMessageHistory([]); }, }); @@ -50,6 +56,10 @@ export function useWebSocketDebug (url: string, token: string) { sendMessage(msg); }; + const clearMessages = useCallback(() => { + setMessageHistory([]); + }, []); + const FilterMessagesType = renderFilterMessageType( filterTypes, setFilterTypes @@ -63,5 +73,6 @@ export function useWebSocketDebug (url: string, token: string) { filterTypes, setFilterTypes, FilterMessagesType, + clearMessages, }; } diff --git a/packages/napcat-webui-frontend/src/layouts/default.tsx b/packages/napcat-webui-frontend/src/layouts/default.tsx index f1a65905..21b3cc4b 100644 --- a/packages/napcat-webui-frontend/src/layouts/default.tsx +++ b/packages/napcat-webui-frontend/src/layouts/default.tsx @@ -99,10 +99,8 @@ const Layout: React.FC<{ children: React.ReactNode; }> = ({ children }) => { transition={{ duration: 0.4 }} className={clsx( 'flex-1 overflow-y-auto', - 'bg-white/60 dark:bg-black/40 backdrop-blur-xl', - 'shadow-[0_8px_32px_0_rgba(31,38,135,0.07)]', 'transition-all duration-300 ease-in-out', - openSideBar ? 'm-3 ml-0 rounded-3xl border border-white/40 dark:border-white/10' : 'm-0 rounded-none', + openSideBar ? 'ml-0' : 'ml-0', 'pb-10 md:pb-0' )} > diff --git a/packages/napcat-webui-frontend/src/pages/dashboard/debug/websocket/index.tsx b/packages/napcat-webui-frontend/src/pages/dashboard/debug/websocket/index.tsx index a1bac1fb..f75c53ea 100644 --- a/packages/napcat-webui-frontend/src/pages/dashboard/debug/websocket/index.tsx +++ b/packages/napcat-webui-frontend/src/pages/dashboard/debug/websocket/index.tsx @@ -24,9 +24,10 @@ export default function WSDebug () { }); const [inputUrl, setInputUrl] = useState(socketConfig.url); const [inputToken, setInputToken] = useState(socketConfig.token); + const [shouldConnect, setShouldConnect] = useState(false); - const { sendMessage, readyState, FilterMessagesType, filteredMessages } = - useWebSocketDebug(socketConfig.url, socketConfig.token); + const { sendMessage, readyState, FilterMessagesType, filteredMessages, clearMessages } = + useWebSocketDebug(socketConfig.url, socketConfig.token, shouldConnect); const handleConnect = useCallback(() => { if (!inputUrl.startsWith('ws://') && !inputUrl.startsWith('wss://')) { @@ -37,13 +38,18 @@ export default function WSDebug () { url: inputUrl, token: inputToken, }); - }, [inputUrl, inputToken]); + setShouldConnect(true); + }, [inputUrl, inputToken, setSocketConfig]); + + const handleDisconnect = useCallback(() => { + setShouldConnect(false); + }, []); return ( <> Websocket调试 - NapCat WebUI
- +
-
+
{FilterMessagesType}
- +
+ + +
diff --git a/packages/napcat-webui-frontend/src/pages/dashboard/file_manager.tsx b/packages/napcat-webui-frontend/src/pages/dashboard/file_manager.tsx index ffab3a29..7461854f 100644 --- a/packages/napcat-webui-frontend/src/pages/dashboard/file_manager.tsx +++ b/packages/napcat-webui-frontend/src/pages/dashboard/file_manager.tsx @@ -329,8 +329,8 @@ export default function FileManagerPage () { }); return ( -
-
+
+
- + diff --git a/packages/napcat-webui-frontend/src/pages/dashboard/logs.tsx b/packages/napcat-webui-frontend/src/pages/dashboard/logs.tsx index a6150483..cafb5dcf 100644 --- a/packages/napcat-webui-frontend/src/pages/dashboard/logs.tsx +++ b/packages/napcat-webui-frontend/src/pages/dashboard/logs.tsx @@ -53,8 +53,8 @@ export default function LogsPage () { classNames={{ panel: 'w-full flex-1 h-full py-0 flex flex-col gap-4', base: 'flex-shrink-0 !h-fit', - tabList: 'bg-opacity-50 backdrop-blur-sm', - cursor: 'bg-opacity-60 backdrop-blur-sm', + tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md', + cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm', }} > diff --git a/packages/napcat-webui-frontend/src/pages/dashboard/network.tsx b/packages/napcat-webui-frontend/src/pages/dashboard/network.tsx index 8c15619c..5aa4ea93 100644 --- a/packages/napcat-webui-frontend/src/pages/dashboard/network.tsx +++ b/packages/napcat-webui-frontend/src/pages/dashboard/network.tsx @@ -388,8 +388,8 @@ export default function NetworkPage () { className='max-w-full' items={tabs} classNames={{ - tabList: 'bg-opacity-50 backdrop-blur-sm', - cursor: 'bg-opacity-60 backdrop-blur-sm', + tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md', + cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm', }} > {(item) => ( diff --git a/packages/napcat-webui-frontend/src/pages/dashboard/terminal.tsx b/packages/napcat-webui-frontend/src/pages/dashboard/terminal.tsx index 9484d310..152943d9 100644 --- a/packages/napcat-webui-frontend/src/pages/dashboard/terminal.tsx +++ b/packages/napcat-webui-frontend/src/pages/dashboard/terminal.tsx @@ -112,7 +112,7 @@ export default function TerminalPage () { className='h-full overflow-hidden' >
- +