feat: 添加磨砂玻璃效果自定义配置及相关样式支持

This commit is contained in:
Montia37
2025-08-26 03:25:50 +08:00
parent 832a4dc3d9
commit 78e02f0ca2
22 changed files with 769 additions and 225 deletions

View File

@@ -2,8 +2,8 @@ import React from "react";
const Footer: React.FC = () => {
return (
<footer className="fixed shadow-inner bottom-0 left-0 right-0 p-2 text-center bg-white/10 dark:bg-gray-800/10 backdrop-blur-md border-t border-white/20 dark:border-white/10 z-50">
<p className="flex justify-center text-sm text-gray-700 dark:text-gray-200 text-shadow-lg whitespace-pre">
<footer className="fixed inset-shadow-sm bottom-0 left-0 right-0 p-2 text-center purcarte-blur z-50">
<p className="flex justify-center text-sm text-second-foreground text-shadow-lg whitespace-pre">
Powered by{" "}
<a
href="https://github.com/komari-monitor/komari"

View File

@@ -55,7 +55,7 @@ export const Header = ({
}, [sitename]);
return (
<header className="bg-background/60 backdrop-blur-[10px] border-b border-border/60 sticky top-0 flex items-center justify-center shadow-sm z-10">
<header className="purcarte-blur border-b border-border sticky top-0 flex items-center justify-center shadow-sm z-10">
<div className="w-[90%] max-w-screen-2xl px-4 py-2 flex items-center justify-between">
<div className="flex items-center text-shadow-lg text-accent-foreground">
<a href="/" className="flex items-center gap-2 text-2xl font-bold">
@@ -71,7 +71,7 @@ export const Header = ({
{isMobile ? (
<>
<div
className={`absolute top-full left-0 w-full bg-background/60 backdrop-blur-[10px] p-2 border-b border-border/60 shadow-sm z-10 transform transition-all duration-300 ease-in-out ${
className={`absolute top-full left-0 w-full purcarte-blur p-2 border-b border-border shadow-sm z-10 transform transition-all duration-300 ease-in-out ${
isSearchOpen
? "opacity-100 translate-y-0"
: "opacity-0 -translate-y-4 pointer-events-none"
@@ -106,7 +106,7 @@ export const Header = ({
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="animate-in slide-in-from-top-5 duration-300 bg-background/60 backdrop-blur-[10px] border-border/60 rounded-xl">
className="animate-in slide-in-from-top-5 duration-300 purcarte-blur border-border rounded-xl">
<DropdownMenuItem
onClick={() =>
setViewMode(viewMode === "grid" ? "table" : "grid")
@@ -216,7 +216,7 @@ export const Header = ({
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="animate-in slide-in-from-top-5 duration-300 bg-background/60 backdrop-blur-[10px] border-border/60 rounded-xl">
className="animate-in slide-in-from-top-5 duration-300 purcarte-blur border-border rounded-xl">
<DropdownMenuItem onClick={toggleTheme}>
{theme === "dark" ? (
<Sun className="size-4 mr-2 text-primary" />

View File

@@ -16,9 +16,10 @@ import { CircleProgress } from "../ui/circle-progress";
interface NodeCardProps {
node: NodeWithStatus;
enableSwap: boolean | undefined;
}
export const NodeCard = ({ node }: NodeCardProps) => {
export const NodeCard = ({ node, enableSwap }: NodeCardProps) => {
const {
stats,
isOnline,
@@ -40,7 +41,7 @@ export const NodeCard = ({ node }: NodeCardProps) => {
return (
<Card
className={`flex flex-col mx-auto bg-card backdrop-blur-xs w-full min-w-[280px] max-w-sm ${
className={`flex flex-col mx-auto purcarte-blur w-full min-w-[280px] max-w-sm ${
isOnline
? ""
: "striped-bg-red-translucent-diagonal ring-2 ring-red-500/50"
@@ -104,7 +105,7 @@ export const NodeCard = ({ node }: NodeCardProps) => {
<span className="w-12 text-right">{memUsage.toFixed(0)}%</span>
</div>
</div>
{node.swap_total > 0 ? (
{enableSwap && (
<div className="flex items-center justify-between">
<span className="text-secondary-foreground">SWAP</span>
<div className="w-3/4 flex items-center gap-2">
@@ -112,15 +113,11 @@ export const NodeCard = ({ node }: NodeCardProps) => {
value={swapUsage}
className={getProgressBarClass(swapUsage)}
/>
<span className="w-12 text-right">{swapUsage.toFixed(0)}%</span>
</div>
</div>
) : (
<div className="flex items-center justify-between">
<span className="text-secondary-foreground">SWAP</span>
<div className="w-3/4 flex items-center gap-2">
<ProgressBar value={0} />
<span className="w-12 text-right">OFF</span>
{node.swap_total > 0 ? (
<span className="w-12 text-right">{swapUsage.toFixed(0)}%</span>
) : (
<span className="w-12 text-right">OFF</span>
)}
</div>
</div>
)}
@@ -188,7 +185,7 @@ export const NodeCard = ({ node }: NodeCardProps) => {
<div className="flex items-center gap-1">{expired_at}</div>
</div>
<div className="border-l border-border/60 mx-2"></div>
<div className="flex justify-start w-full">
<div className="flex justify-end w-full">
<span className="text-secondary-foreground">线</span>
<span>
{isOnline && stats ? formatUptime(stats.uptime) : "离线"}

View File

@@ -1,10 +1,16 @@
export const NodeListHeader = () => {
interface NodeListHeaderProps {
enableSwap: boolean | undefined;
}
export const NodeListHeader = ({ enableSwap }: NodeListHeaderProps) => {
const gridCols = enableSwap ? "grid-cols-10" : "grid-cols-9";
return (
<div className="text-primary font-bold grid grid-cols-10 text-center shadow-md gap-4 p-2 items-center rounded-lg bg-card/50 transition-colors duration-200">
<div
className={`text-primary font-bold grid ${gridCols} text-center shadow-md gap-4 p-2 items-center rounded-lg bg-card transition-colors duration-200`}>
<div className="col-span-2"></div>
<div className="col-span-1">CPU</div>
<div className="col-span-1"></div>
<div className="col-span-1">SWAP</div>
{enableSwap && <div className="col-span-1">SWAP</div>}
<div className="col-span-1"></div>
<div className="col-span-1"></div>
<div className="col-span-2"></div>

View File

@@ -9,9 +9,10 @@ import { CircleProgress } from "../ui/circle-progress";
interface NodeListItemProps {
node: NodeWithStatus;
enableSwap: boolean | undefined;
}
export const NodeListItem = ({ node }: NodeListItemProps) => {
export const NodeListItem = ({ node, enableSwap }: NodeListItemProps) => {
const {
stats,
isOnline,
@@ -25,9 +26,11 @@ export const NodeListItem = ({ node }: NodeListItemProps) => {
trafficPercentage,
} = useNodeCommons(node);
const gridCols = enableSwap ? "grid-cols-10" : "grid-cols-9";
return (
<div
className={`grid grid-cols-10 text-center shadow-md gap-4 p-2 text-nowrap items-center rounded-lg ${
className={`grid ${gridCols} text-center shadow-md gap-4 p-2 text-nowrap items-center rounded-lg ${
isOnline
? ""
: "striped-bg-red-translucent-diagonal ring-2 ring-red-500/50"
@@ -39,53 +42,56 @@ export const NodeListItem = ({ node }: NodeListItemProps) => {
<div className="text-base font-bold">{node.name}</div>
<Tag className="text-xs" tags={tagList} />
<div className="flex text-xs">
<div className="flex">
<span className="text-secondary-foreground"></span>
<div className="flex items-center gap-1">{expired_at}</div>
</div>
<div className="border-l border-border/60 mx-2"></div>
<div className="flex">
<span className="text-secondary-foreground">线</span>
<span>
{isOnline && stats ? formatUptime(stats.uptime) : "离线"}
</span>
</div>
<span className="text-secondary-foreground"></span>
<div className="flex items-center gap-1">{expired_at}</div>
</div>
<div className="flex text-xs">
<span className="text-secondary-foreground">线</span>
<span>
{isOnline && stats ? formatUptime(stats.uptime) : "离线"}
</span>
</div>
</div>
</Link>
</div>
<div className="col-span-1">
<div className="gap-1 flex items-center justify-center whitespace-nowrap">
<CpuIcon className="inline-block size-4 flex-shrink-0 text-blue-600" />
{node.cpu_cores} Cores
</div>
<div className="mt-1">
{isOnline ? `${cpuUsage.toFixed(1)}%` : "N/A"}
<div className="col-span-1 flex items-center text-left">
<CpuIcon className="inline-block size-5 flex-shrink-0 text-blue-600" />
<div className="ml-1 w-full items-center justify-center">
<div>{node.cpu_cores} Cores</div>
<div>{isOnline ? `${cpuUsage.toFixed(1)}%` : "N/A"}</div>
</div>
</div>
<div className="col-span-1">
<div className="gap-1 flex items-center justify-center whitespace-nowrap">
<MemoryStickIcon className="inline-block size-4 flex-shrink-0 text-green-600" />
{formatBytes(node.mem_total)}
</div>
<div className="mt-1">
{isOnline ? `${memUsage.toFixed(1)}%` : "N/A"}
<div className="col-span-1 flex items-center text-left">
<MemoryStickIcon className="inline-block size-5 flex-shrink-0 text-green-600" />
<div className="ml-1 w-full items-center justify-center">
<div>{formatBytes(node.mem_total)}</div>
<div className="mt-1">
{isOnline ? `${memUsage.toFixed(1)}%` : "N/A"}
</div>
</div>
</div>
{node.swap_total > 0 ? (
<div className="col-span-1">
{isOnline ? `${swapUsage.toFixed(1)}%` : "N/A"}
{enableSwap && (
<div className="col-span-1 flex items-center text-left">
<MemoryStickIcon className="inline-block size-5 flex-shrink-0 text-purple-600" />
{node.swap_total > 0 ? (
<div className="ml-1 w-full items-center justify-center">
<div>{formatBytes(node.swap_total)}</div>
<div className="mt-1">
{isOnline ? `${swapUsage.toFixed(1)}%` : "N/A"}
</div>
</div>
) : (
<div className="ml-1 w-full item-center justify-center">OFF</div>
)}
</div>
) : (
<div className="col-span-1 text-secondary-foreground">OFF</div>
)}
<div className="col-span-1">
<div className="gap-1 flex items-center justify-center whitespace-nowrap">
<HardDriveIcon className="inline-block size-4 flex-shrink-0 text-red-600" />
{formatBytes(node.disk_total)}
</div>
<div className="mt-1">
{isOnline ? `${diskUsage.toFixed(1)}%` : "N/A"}
<div className="col-span-1 flex items-center text-left">
<HardDriveIcon className="inline-block size-5 flex-shrink-0 text-red-600" />
<div className="ml-1 w-full items-center justify-center">
<div>{formatBytes(node.disk_total)}</div>
<div className="mt-1">
{isOnline ? `${diskUsage.toFixed(1)}%` : "N/A"}
</div>
</div>
</div>
<div className="col-span-1">
@@ -95,7 +101,7 @@ export const NodeListItem = ({ node }: NodeListItemProps) => {
<div className="col-span-2">
<div className="flex items-center justify-around">
{node.traffic_limit !== 0 && isOnline && stats && (
<div className="flex items-center justify-center w-1/4">
<div className="flex items-center justify-center w-1/3">
<CircleProgress
value={trafficPercentage}
maxValue={100}
@@ -106,14 +112,12 @@ export const NodeListItem = ({ node }: NodeListItemProps) => {
</div>
)}
<div
className={node.traffic_limit !== 0 ? "w-3/4 text-left" : "w-full"}>
className={node.traffic_limit !== 0 ? "w-2/3 text-left" : "w-full"}>
<div>
<span>
{stats ? formatBytes(stats.network.totalUp) : "N/A"}
</span>
<span className="ml-2">
<div> {stats ? formatBytes(stats.network.totalUp) : "N/A"}</div>
<div>
{stats ? formatBytes(stats.network.totalDown) : "N/A"}
</span>
</div>
</div>
{node.traffic_limit !== 0 && isOnline && stats && (
<div>
@@ -127,7 +131,9 @@ export const NodeListItem = ({ node }: NodeListItemProps) => {
</div>
</div>
<div className="col-span-1">
<span>{load}</span>
{load.split("|").map((item, index) => (
<div key={index}>{item.trim()}</div>
))}
</div>
</div>
);

View File

@@ -149,7 +149,7 @@ export const StatsBar = ({
}
};
return (
<div className="bg-card backdrop-blur-[10px] min-w-[300px] rounded-lg box-border border text-secondary-foreground my-6 mx-4 px-4 md:text-base text-sm relative flex items-center min-h-[5rem]">
<div className="purcarte-blur min-w-[300px] rounded-lg text-secondary-foreground my-6 mx-4 px-4 box-border border border-border text-sm relative flex items-center min-h-[5rem]">
<div className="absolute top-2 right-2">
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>