Merge pull request #21 from dr-forget/add-class

feat: 添加部分节点语义化class

src/components/Footer.tsx

@@ -14,9 +14,9 @@ const Footer: React.FC = () => {
   })
 
   return (
-    <footer className="mx-auto w-full max-w-5xl px-4 lg:px-0 pb-4">
+    <footer className="mx-auto w-full max-w-5xl px-4 lg:px-0 pb-4 server-footer">
       <section className="flex flex-col">
-        <section className="mt-1 flex items-center sm:flex-row flex-col justify-between gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
+        <section className="mt-1 flex items-center sm:flex-row flex-col justify-between gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50 server-footer-name">
           <div className="flex items-center gap-1">
             &copy;2020-{new Date().getFullYear()}{" "}
             <a href={"https://github.com/naiba/nezha"} target="_blank">
@@ -24,7 +24,7 @@ const Footer: React.FC = () => {
             </a>
             <p>{settingData?.data?.version || ""}</p>
           </div>
-          <p>
+          <p className="server-footer-theme">
             {t("footer.themeBy")}
             <a href={"https://github.com/hamster1963/nezha-dash"} target="_blank">
               nezha-dash

src/components/Header.tsx

@@ -58,9 +58,9 @@ function Header() {
 
   return (
     <div className="mx-auto w-full max-w-5xl">
-      <section className="flex items-center justify-between">
+      <section className="flex items-center justify-between header-top">
         <section onClick={() => navigate("/")} className="cursor-pointer flex items-center sm:text-base text-sm font-medium">
-          <div className="mr-1 flex flex-row items-center justify-start">
+          <div className="mr-1 flex flex-row items-center justify-start header-logo">
             <img
               width={40}
               height={40}
@@ -73,7 +73,7 @@ function Header() {
           <Separator orientation="vertical" className="mx-2 hidden h-4 w-[1px] md:block" />
           <p className="hidden text-sm font-medium opacity-40 md:block">{customDesc}</p>
         </section>
-        <section className="flex items-center gap-2">
+        <section className="flex items-center gap-2 header-handles">
           <div className="hidden sm:flex items-center gap-2">
             <Links />
             <DashboardLink />
@@ -189,7 +189,7 @@ function Overview() {
     setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption))
   }, 1000)
   return (
-    <section className={"mt-10 flex flex-col md:mt-16"}>
+    <section className={"mt-10 flex flex-col md:mt-16 header-timer"}>
       <p className="text-base font-semibold">👋 {t("overview")}</p>
       <div className="flex items-center gap-1.5">
         <p className="text-sm font-medium opacity-50">{t("whereTheTimeIs")}</p>

src/components/ServerDetailChart.tsx

@@ -72,7 +72,7 @@ export default function ServerDetailChart({ server_id }: { server_id: string })
   const gpuList = server.host.gpu || []
 
   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 server-charts">
       <CpuChart now={nezhaWsData.now} data={server} />
       {gpuStats.length >= 1 && gpuList.length === gpuStats.length ? (
         gpuList.map((gpu, index) => <GpuChart now={nezhaWsData.now} gpuStat={gpuStats[index]} gpuName={gpu} key={index} />)

src/components/ServerDetailOverview.tsx

@@ -67,7 +67,7 @@ export default function ServerDetailOverview({ server_id }: { server_id: string
     >
       <div
         onClick={() => navigate("/")}
-        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-1 text-xl"
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-1 text-xl server-name"
       >
         <BackIcon />
         {name}

src/components/ServerOverview.tsx

@@ -31,7 +31,7 @@ export default function ServerOverview({ online, offline, total, up, down, upSpe
 
   return (
     <>
-      <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <section className="grid grid-cols-2 gap-4 lg:grid-cols-4 server-overview">
         <Card
           onClick={() => {
             setStatus("all")

src/components/TabSwitch.tsx

@@ -8,7 +8,7 @@ export default function TabSwitch({ tabs, currentTab, setCurrentTab }: { tabs: s
     // @ts-expect-error CustomBackgroundImage is a global variable
     (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
   return (
-    <div className="z-50 flex flex-col items-start rounded-[50px]">
+    <div className="z-50 flex flex-col items-start rounded-[50px] server-info-tab">
       <div
         className={cn("flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800", {
           "bg-stone-100/70 dark:bg-stone-800/70": customBackgroundImage,

src/pages/Server.tsx

@@ -190,7 +190,7 @@ export default function Servers() {
         upSpeed={upSpeed}
         downSpeed={downSpeed}
       />
-      <div className="flex mt-6 items-center justify-between gap-2">
+      <div className="flex mt-6 items-center justify-between gap-2 server-overview-controls">
         <section className="flex items-center gap-2 w-full overflow-hidden">
           <button
             onClick={() => {
@@ -315,14 +315,14 @@ export default function Servers() {
       {showMap === "1" && <GlobalMap now={nezhaWsData.now} serverList={nezhaWsData?.servers || []} />}
       {showServices === "1" && <ServiceTracker />}
       {inline === "1" && (
-        <section className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6">
+        <section className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6 server-inline-list">
           {filteredServers.map((serverInfo) => (
             <ServerCardInline now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
           ))}
         </section>
       )}
       {inline === "0" && (
-        <section className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6">
+        <section className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6 server-card-list">
           {filteredServers.map((serverInfo) => (
             <ServerCard now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
           ))}

src/pages/ServerDetail.tsx

@@ -24,7 +24,7 @@ export default function ServerDetail() {
   }
 
   return (
-    <div className="mx-auto w-full max-w-5xl px-0 flex flex-col gap-4">
+    <div className="mx-auto w-full max-w-5xl px-0 flex flex-col gap-4 server-info">
       <ServerDetailOverview server_id={server_id} />
       <section className="flex items-center my-2 w-full">
         <Separator className="flex-1" />