mirror of
https://github.com/fankes/komari-theme-purcarte.git
synced 2025-10-19 20:09:24 +08:00
feat: 添加磨砂玻璃效果自定义配置及相关样式支持
This commit is contained in:
@@ -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"
|
||||
|
@@ -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" />
|
||||
|
@@ -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) : "离线"}
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
);
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user