feat(header): site name

src/components/Header.tsx

@@ -1,7 +1,7 @@
 import { ModeToggle } from "@/components/ThemeSwitcher";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
-import { fetchLoginUser } from "@/lib/nezha-api";
+import { fetchLoginUser, fetchSetting } from "@/lib/nezha-api";
 import { useQuery } from "@tanstack/react-query";
 import { DateTime } from "luxon";
 import { useEffect, useRef, useState } from "react";
@@ -12,6 +12,16 @@ import { useNavigate } from "react-router-dom";
 function Header() {
   const { t } = useTranslation();
   const navigate = useNavigate();
+
+  const { data: settingData,isLoading } = useQuery({
+    queryKey: ["setting"],
+    queryFn: () => fetchSetting(),
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+  });
+
+  const siteName = settingData?.data?.site_name;
+
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">
@@ -28,7 +38,11 @@ function Header() {
               className="relative m-0! border-2 border-transparent h-6 w-6 object-cover object-top p-0!"
             />
           </div>
-          {"NEZHA"}
+          {isLoading ? (
+            <Skeleton className="h-6 w-20 rounded-[5px] bg-muted-foreground/10 animate-none" />
+          ) : (
+            siteName || "NEZHA"
+          )}
           <Separator
             orientation="vertical"
             className="mx-2 hidden h-4 w-[1px] md:block"

src/lib/nezha-api.ts

@@ -3,6 +3,7 @@ import {
   MonitorResponse,
   ServerGroupResponse,
   ServiceResponse,
+  SettingResponse,
 } from "@/types/nezha-api";
 
 export const fetchServerGroup = async (): Promise<ServerGroupResponse> => {
@@ -42,3 +43,12 @@ export const fetchService = async (): Promise<ServiceResponse> => {
   }
   return data;
 };
+
+export const fetchSetting = async (): Promise<SettingResponse> => {
+  const response = await fetch("/api/v1/setting");
+  const data = await response.json();
+  if (data.error) {
+    throw new Error(data.error);
+  }
+  return data;
+};

src/types/nezha-api.ts

@@ -149,3 +149,13 @@ export interface CycleTransferData {
     [key: string]: string;
   };
 }
+
+
+export interface SettingResponse {
+  success: boolean;
+  data: {
+    language: string;
+    site_name: string;
+    custom_code: string;
+  };
+}