From 7e6035d98bbd82385f95876382c2b16eeb86c5b8 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 13:34:59 +0800 Subject: [PATCH] Refactor UI components for consistent styling Unified card and component styles across the frontend by removing background image logic and related conditional classes. Updated color schemes, shadows, and spacing for a more consistent appearance. Improved error handling and response structure in the backend update handler. --- .../src/api/UpdateNapCat.ts | 17 ++++- .../src/components/qq_info_card.tsx | 53 +++++---------- .../src/components/system_info.tsx | 52 ++++----------- .../src/components/system_status_display.tsx | 65 +++++-------------- .../src/layouts/default.tsx | 4 +- .../src/pages/dashboard/index.tsx | 11 +--- 6 files changed, 65 insertions(+), 137 deletions(-) diff --git a/packages/napcat-webui-backend/src/api/UpdateNapCat.ts b/packages/napcat-webui-backend/src/api/UpdateNapCat.ts index 24f4d192..1fc76720 100644 --- a/packages/napcat-webui-backend/src/api/UpdateNapCat.ts +++ b/packages/napcat-webui-backend/src/api/UpdateNapCat.ts @@ -188,10 +188,20 @@ export const UpdateNapCatHandler: RequestHandler = async (_req, res) => { try { // 获取最新release信息 const latestRelease = await getLatestRelease() as Release; + + // 验证 release 响应 + if (!latestRelease || !latestRelease.tag_name) { + throw new Error('无法获取最新版本信息，请稍后重试'); + } + + if (!latestRelease.assets || !Array.isArray(latestRelease.assets)) { + throw new Error('无法获取下载资源列表，可能是 GitHub API 请求限制，请稍后重试'); + } + 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}文件`); + throw new Error(`未找到${ReleaseName}文件，可用的资源: ${latestRelease.assets.map(a => a.name).join(', ')}`); } // 创建临时目录 @@ -279,12 +289,13 @@ export const UpdateNapCatHandler: RequestHandler = async (_req, res) => { // 发送成功响应 const message = failedFiles.length > 0 ? `更新完成，重启应用以应用剩余${failedFiles.length}个文件的更新` - : '更新完成'; + : '更新完成，请重启 NapCat 以应用更新'; sendSuccess(res, { status: 'completed', message, newVersion: latestRelease.tag_name, - failedFilesCount: failedFiles.length + failedFilesCount: failedFiles.length, + needRestart: true }); } catch (error) { 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 3bb53cd6..36b35846 100644 --- a/packages/napcat-webui-frontend/src/components/qq_info_card.tsx +++ b/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 = ({ data, error, loading }) => { - const [backgroundImage] = useLocalStorage(key.backgroundImage, ''); - const hasBackground = !!backgroundImage; return ( @@ -38,40 +31,28 @@ const QQInfoCard: React.FC = ({ data, error, loading }) => { ) : ( - - {!hasBackground && ( -
- -
- )} + +
+ +
-
-
- {data?.nick || '未知用户'} -
-
- {data?.uin || 'Unknown'} -
+
+
{data?.nick}
+
{data?.uin}
)} diff --git a/packages/napcat-webui-frontend/src/components/system_info.tsx b/packages/napcat-webui-frontend/src/components/system_info.tsx index 9f1e325a..a5535b27 100644 --- a/packages/napcat-webui-frontend/src/components/system_info.tsx +++ b/packages/napcat-webui-frontend/src/components/system_info.tsx @@ -3,16 +3,15 @@ import { Button } from '@heroui/button'; 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, FaInfo, FaQq } from 'react-icons/fa6'; import { IoLogoChrome, IoLogoOctocat } from 'react-icons/io'; import { RiMacFill } from 'react-icons/ri'; import { useState } from 'react'; import toast from 'react-hot-toast'; -import key from '@/const/key'; + + import WebUIManager from '@/controllers/webui_manager'; import useDialog from '@/hooks/use-dialog'; @@ -22,7 +21,6 @@ export interface SystemInfoItemProps { icon?: React.ReactNode; value?: React.ReactNode; endContent?: React.ReactNode; - hasBackground?: boolean; } const SystemInfoItem: React.FC = ({ @@ -30,21 +28,12 @@ const SystemInfoItem: React.FC = ({ value = '--', icon, endContent, - hasBackground = false, }) => { return ( -
-
{icon}
-
{title}
-
{value}
+
+ {icon} +
{title}
+
{value}
{endContent}
); @@ -272,11 +261,7 @@ const NewVersionTip = (props: NewVersionTipProps) => { ); }; -interface NapCatVersionProps { - hasBackground?: boolean; -} - -const NapCatVersion: React.FC = ({ hasBackground = false }) => { +const NapCatVersion = () => { const { data: packageData, loading: packageLoading, @@ -289,7 +274,6 @@ const NapCatVersion: React.FC = ({ hasBackground = false }) } - hasBackground={hasBackground} value={ packageError ? ( @@ -318,28 +302,18 @@ const SystemInfo: React.FC = (props) => { loading: qqVersionLoading, error: qqVersionError, } = useRequest(WebUIManager.getQQVersion); - const [backgroundImage] = useLocalStorage(key.backgroundImage, ''); - const hasBackground = !!backgroundImage; - return ( - - - + + + 系统信息 -
- +
+ } - hasBackground={hasBackground} value={ qqVersionError ? ( @@ -358,13 +332,11 @@ const SystemInfo: React.FC = (props) => { title='WebUI 版本' icon={} value='Next' - hasBackground={hasBackground} /> } value={archInfo} - hasBackground={hasBackground} />
diff --git a/packages/napcat-webui-frontend/src/components/system_status_display.tsx b/packages/napcat-webui-frontend/src/components/system_status_display.tsx index 037b1886..1f5d86c2 100644 --- a/packages/napcat-webui-frontend/src/components/system_status_display.tsx +++ b/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 = ({ @@ -23,35 +20,25 @@ const SystemStatusItem: React.FC = ({ value = '-', size = 'md', unit, - hasBackground = false, }) => { return (
-
{title}
-
+
{title}
+
{value} - {unit && {unit}} + {unit}
); }; export interface SystemStatusDisplayProps { - data?: SystemStatus; + data?: SystemStatus } const SystemStatusDisplay: React.FC = ({ data }) => { @@ -66,14 +53,9 @@ const SystemStatusDisplay: React.FC = ({ data }) => { memoryUsage.system = (systemUsage / system) * 100; memoryUsage.qq = (qqUsage / system) * 100; } - const [backgroundImage] = useLocalStorage(key.backgroundImage, ''); - const hasBackground = !!backgroundImage; return ( - +
= ({ data }) => {
-

- +

+ CPU

- - - + + +
-

- +

+ 内存

@@ -124,19 +98,16 @@ const SystemStatusDisplay: React.FC = ({ data }) => { value={data?.memory.total} size='lg' unit='MB' - hasBackground={hasBackground} />

diff --git a/packages/napcat-webui-frontend/src/layouts/default.tsx b/packages/napcat-webui-frontend/src/layouts/default.tsx index 21b3cc4b..f1a65905 100644 --- a/packages/napcat-webui-frontend/src/layouts/default.tsx +++ b/packages/napcat-webui-frontend/src/layouts/default.tsx @@ -99,8 +99,10 @@ 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 ? 'ml-0' : 'ml-0', + openSideBar ? 'm-3 ml-0 rounded-3xl border border-white/40 dark:border-white/10' : 'm-0 rounded-none', 'pb-10 md:pb-0' )} > diff --git a/packages/napcat-webui-frontend/src/pages/dashboard/index.tsx b/packages/napcat-webui-frontend/src/pages/dashboard/index.tsx index a95ae617..3cd0db8e 100644 --- a/packages/napcat-webui-frontend/src/pages/dashboard/index.tsx +++ b/packages/napcat-webui-frontend/src/pages/dashboard/index.tsx @@ -1,9 +1,6 @@ import { Card, CardBody } from '@heroui/card'; -import { useLocalStorage } from '@uidotdev/usehooks'; import { useRequest } from 'ahooks'; -import clsx from 'clsx'; import { useCallback, useEffect, useState, useRef } from 'react'; -import key from '@/const/key'; import toast from 'react-hot-toast'; @@ -95,9 +92,6 @@ const SystemStatusCard: React.FC = ({ setArchInfo }) => { const DashboardIndexPage: React.FC = () => { const [archInfo, setArchInfo] = useState(); - // @ts-ignore - const [backgroundImage] = useLocalStorage(key.backgroundImage, ''); - const hasBackground = !!backgroundImage; return ( <> @@ -111,10 +105,7 @@ const DashboardIndexPage: React.FC = () => {
- +