root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: detail page loading Skeleton

Browse Source
This commit is contained in:
hamster1963 2024-10-20 13:03:14 +08:00
parent f8032070db
commit 7bed9cf4ba
4 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@ -8,25 +8,25 @@
| 一键部署到 Vercel-推荐 | Docker部署 | Cloudflare部署 | 如何更新？ | | 一键部署到 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) | | [部署简易教程](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 | | NezhaBaseUrl | nezha 面板地址 | http://120.x.x.x:8008 |
| NezhaAuth | nezha 面板 API Token | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi | | NezhaAuth | nezha 面板 API Token | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi |
| DefaultLocale | 面板默认显示语言 | **默认**：en [简中:zh 繁中:zh-t 英语:en 日语:ja] | | DefaultLocale | 面板默认显示语言 | **默认**：en [简中:zh 繁中:zh-t 英语:en 日语:ja] |
| ForceShowAllServers | 是否强制显示所有服务器 | **默认**：false | | ForceShowAllServers | 是否强制显示所有服务器 | **默认**：false |
| NEXT_PUBLIC_NezhaFetchInterval | 获取数据间隔（毫秒） | **默认**：2000 | | NEXT_PUBLIC_NezhaFetchInterval | 获取数据间隔（毫秒） | **默认**：2000 |
| NEXT_PUBLIC_ShowFlag | 是否显示旗帜 | **默认**：false | | NEXT_PUBLIC_ShowFlag | 是否显示旗帜 | **默认**：false |
| NEXT_PUBLIC_DisableCartoon | 是否禁用卡通人物 | **默认**：false | | NEXT_PUBLIC_DisableCartoon | 是否禁用卡通人物 | **默认**：false |
| NEXT_PUBLIC_ShowTag | 是否显示标签 | **默认**：false | | NEXT_PUBLIC_ShowTag | 是否显示标签 | **默认**：false |
| NEXT_PUBLIC_ShowNetTransfer | 是否显示流量信息 | **默认**：false | | NEXT_PUBLIC_ShowNetTransfer | 是否显示流量信息 | **默认**：false |
| NEXT_PUBLIC_ForceUseSvgFlag | 是否强制使用SVG旗帜 | **默认**：false | | NEXT_PUBLIC_ForceUseSvgFlag | 是否强制使用SVG旗帜 | **默认**：false |
| NEXT_PUBLIC_CustomLogo | 自定义Logo | **示例**：https://nezha-cf.buycoffee.top/apple-touch-icon.png | | NEXT_PUBLIC_CustomLogo | 自定义Logo | **示例**：https://nezha-cf.buycoffee.top/apple-touch-icon.png |
| NEXT_PUBLIC_CustomTitle | 自定义标题 | | | NEXT_PUBLIC_CustomTitle | 自定义标题 | |
| NEXT_PUBLIC_CustomDescription | 自定义描述(无多语言支持) | | | NEXT_PUBLIC_CustomDescription | 自定义描述(无多语言支持) | |
![screen](/.github/shot-1.png) ![screen](/.github/shot-1.png)
![screen](/.github/shot-2.png) ![screen](/.github/shot-2.png)

6
app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx
View File

@ -1,5 +1,7 @@
"use client"; "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 AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { ChartConfig, ChartContainer } from "@/components/ui/chart"; import { ChartConfig, ChartContainer } from "@/components/ui/chart";
@ -18,8 +20,6 @@ import {
} from "recharts"; } from "recharts";
import useSWR from "swr"; import useSWR from "swr";
import { NezhaAPISafe } from "../../types/nezha-api";
type cpuChartData = { type cpuChartData = {
timeStamp: string; timeStamp: string;
cpu: number; cpu: number;
@ -83,7 +83,7 @@ export default function ServerDetailChartClient({
</> </>
); );
} }
if (!data) return null; if (!data) return <ServerDetailChartLoading />;
return ( return (
<section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3"> <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">

3
app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx
View File

@ -1,5 +1,6 @@
"use client"; "use client";
import { ServerDetailLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api"; import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
import { BackIcon } from "@/components/Icon"; import { BackIcon } from "@/components/Icon";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
@ -10,8 +11,6 @@ import { useLocale, useTranslations } from "next-intl";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import useSWR from "swr"; import useSWR from "swr";
import ServerDetailLoading from "./ServerDetailLoading";
export default function ServerDetailClient({ export default function ServerDetailClient({
server_id, server_id,
}: { }: {

36
app/[locale]/(main)/ClientComponents/ServerDetailLoading.tsx
View File

@ -1,25 +1,11 @@
import { BackIcon } from "@/components/Icon"; import { BackIcon } from "@/components/Icon";
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { useLocale } from "next-intl"; import { useLocale } from "next-intl";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
export default function ServerDetailLoading() { export function ServerDetailChartLoading() {
const router = useRouter();
const locale = useLocale();
return ( return (
<div> <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"> <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>
<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> </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>
</>
);
}