Merge branch 'main' into cloudflare

README.md

@@ -8,34 +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-dash-ruddy.vercel.app)    | [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                                                  |
+| 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  | 自定义描述(无多语言支持) |                                                               |
-
-#### 多语言支持
-
-| 语言     | 代码 | 是否完成翻译 |
-| -------- | ---- | ------------ |
-| 简体中文 | zh   | 是           |
-| 繁体中文 | zh-t | 是           |
-| 英语     | en   | 是           |
-| 日语     | ja   | 是           |
 
 ![screen](/.github/shot-1.png)
 ![screen](/.github/shot-2.png)

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

@@ -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">

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

@@ -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,
 }: {

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

@@ -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() {
+export function ServerDetailChartLoading() {
-  const router = useRouter();
-  const locale = useLocale();
   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>
+    </>
+  );
+}

app/[locale]/(main)/header.tsx

@@ -3,6 +3,7 @@
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { ModeToggle } from "@/components/ThemeSwitcher";
 import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
 import getEnv from "@/lib/env-entry";
 import { DateTime } from "luxon";
 import { useTranslations } from "next-intl";
@@ -62,7 +63,7 @@ function Header() {
 
 // https://github.com/streamich/react-use/blob/master/src/useInterval.ts
 const useInterval = (callback: Function, delay?: number | null) => {
-  const savedCallback = useRef<Function>(() => {});
+  const savedCallback = useRef<Function>(() => { });
   useEffect(() => {
     savedCallback.current = callback;
   });
@@ -95,9 +96,9 @@ function Overview() {
         <p className="text-sm font-medium opacity-50">
           {t("p_2390-2457_wherethetimeis")}
         </p>
-        {mouted && (
+        {mouted ? (
           <p className="opacity-1 text-sm font-medium">{timeString}</p>
-        )}
+        ) : <Skeleton className="h-[20px] w-[50px] rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>}
       </div>
     </section>
   );