mirror of
https://github.com/hamster1963/nezha-dash.git
synced 2025-04-24 21:10:45 +08:00
fix: detail page loading Skeleton
This commit is contained in:
hamster1963
parent
f8032070db
commit
7bed9cf4ba
32
README.md
32
README.md
@ -8,25 +8,25 @@
|
||||
| 一键部署到 Vercel-推荐 | Docker部署 | Cloudflare部署 | 如何更新？ |
|
||||
| ----------------------------------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------- |
|
||||
| [部署简易教程](https://buycoffee.top/blog/tech/nezha) | [Docker 部署教程](https://buycoffee.top/blog/tech/nezha-docker) | [Cloudflare 部署教程](https://buycoffee.top/blog/tech/nezha-cloudflare) | [更新教程](https://buycoffee.top/blog/tech/nezha-upgrade) |
|
||||
| [Vercel-demo](https://nezha-vercel.buycoffee.top) | [Docker-demo](https://nezha-docker.buycoffee.tech) | [Cloudflare-demo](https://nezha-cloudflare.buycoffee.tech) |
|
||||
| [Vercel-demo](https://nezha-vercel.buycoffee.top) | [Docker-demo](https://nezha-docker.buycoffee.tech) | [Cloudflare-demo](https://nezha-cloudflare.buycoffee.tech) |
|
||||
|
||||
#### 环境变量
|
||||
|
||||
| 变量名 | 含义 | 示例 |
|
||||
| ------------------------------ | -------------------------------- | ------------------------------------------------------------- |
|
||||
| NezhaBaseUrl | nezha 面板地址 | http://120.x.x.x:8008 |
|
||||
| NezhaAuth | nezha 面板 API Token | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi |
|
||||
| DefaultLocale | 面板默认显示语言 | **默认**：en [简中:zh 繁中:zh-t 英语:en 日语:ja] |
|
||||
| ForceShowAllServers | 是否强制显示所有服务器 | **默认**：false |
|
||||
| NEXT_PUBLIC_NezhaFetchInterval | 获取数据间隔（毫秒） | **默认**：2000 |
|
||||
| NEXT_PUBLIC_ShowFlag | 是否显示旗帜 | **默认**：false |
|
||||
| NEXT_PUBLIC_DisableCartoon | 是否禁用卡通人物 | **默认**：false |
|
||||
| NEXT_PUBLIC_ShowTag | 是否显示标签 | **默认**：false |
|
||||
| NEXT_PUBLIC_ShowNetTransfer | 是否显示流量信息 | **默认**：false |
|
||||
| NEXT_PUBLIC_ForceUseSvgFlag | 是否强制使用SVG旗帜 | **默认**：false |
|
||||
| NEXT_PUBLIC_CustomLogo | 自定义Logo | **示例**：https://nezha-cf.buycoffee.top/apple-touch-icon.png |
|
||||
| NEXT_PUBLIC_CustomTitle | 自定义标题 | |
|
||||
| NEXT_PUBLIC_CustomDescription | 自定义描述(无多语言支持) | |
|
||||
| 变量名 | 含义 | 示例 |
|
||||
| ------------------------------ | ------------------------ | ------------------------------------------------------------- |
|
||||
| NezhaBaseUrl | nezha 面板地址 | http://120.x.x.x:8008 |
|
||||
| NezhaAuth | nezha 面板 API Token | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi |
|
||||
| DefaultLocale | 面板默认显示语言 | **默认**：en [简中:zh 繁中:zh-t 英语:en 日语:ja] |
|
||||
| ForceShowAllServers | 是否强制显示所有服务器 | **默认**：false |
|
||||
| NEXT_PUBLIC_NezhaFetchInterval | 获取数据间隔（毫秒） | **默认**：2000 |
|
||||
| NEXT_PUBLIC_ShowFlag | 是否显示旗帜 | **默认**：false |
|
||||
| NEXT_PUBLIC_DisableCartoon | 是否禁用卡通人物 | **默认**：false |
|
||||
| NEXT_PUBLIC_ShowTag | 是否显示标签 | **默认**：false |
|
||||
| NEXT_PUBLIC_ShowNetTransfer | 是否显示流量信息 | **默认**：false |
|
||||
| NEXT_PUBLIC_ForceUseSvgFlag | 是否强制使用SVG旗帜 | **默认**：false |
|
||||
| NEXT_PUBLIC_CustomLogo | 自定义Logo | **示例**：https://nezha-cf.buycoffee.top/apple-touch-icon.png |
|
||||
| NEXT_PUBLIC_CustomTitle | 自定义标题 | |
|
||||
| NEXT_PUBLIC_CustomDescription | 自定义描述(无多语言支持) | |
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { ServerDetailChartLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
|
||||
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
|
||||
import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { ChartConfig, ChartContainer } from "@/components/ui/chart";
|
||||
@ -18,8 +20,6 @@ import {
|
||||
} from "recharts";
|
||||
import useSWR from "swr";
|
||||
|
||||
import { NezhaAPISafe } from "../../types/nezha-api";
|
||||
|
||||
type cpuChartData = {
|
||||
timeStamp: string;
|
||||
cpu: number;
|
||||
@ -83,7 +83,7 @@ export default function ServerDetailChartClient({
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (!data) return null;
|
||||
if (!data) return <ServerDetailChartLoading />;
|
||||
|
||||
return (
|
||||
<section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { ServerDetailLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
|
||||
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
|
||||
import { BackIcon } from "@/components/Icon";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
@ -10,8 +11,6 @@ import { useLocale, useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
|
||||
import ServerDetailLoading from "./ServerDetailLoading";
|
||||
|
||||
export default function ServerDetailClient({
|
||||
server_id,
|
||||
}: {
|
||||
|
||||
@ -1,25 +1,11 @@
|
||||
import { BackIcon } from "@/components/Icon";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useLocale } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function ServerDetailLoading() {
|
||||
const router = useRouter();
|
||||
const locale = useLocale();
|
||||
export function ServerDetailChartLoading() {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
onClick={() => {
|
||||
router.push(`/${locale}/`);
|
||||
}}
|
||||
className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
|
||||
>
|
||||
<BackIcon />
|
||||
<Skeleton className="h-[20px] w-24 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
</div>
|
||||
<Skeleton className="flex flex-wrap gap-2 h-[100px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
<Separator className="my-4" />
|
||||
<section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
|
||||
<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
@ -31,3 +17,23 @@ export default function ServerDetailLoading() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ServerDetailLoading() {
|
||||
const router = useRouter();
|
||||
const locale = useLocale();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
onClick={() => {
|
||||
router.push(`/${locale}/`);
|
||||
}}
|
||||
className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
|
||||
>
|
||||
<BackIcon />
|
||||
<Skeleton className="h-[20px] w-24 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
</div>
|
||||
<Skeleton className="flex flex-wrap gap-2 h-[81px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user