From f9743407a4c3f96c511b89cebf160da7679a755e Mon Sep 17 00:00:00 2001
From: YiZixuan <sqkkyzx@qq.com>
Date: Sun, 17 Aug 2025 23:21:39 +0800
Subject: [PATCH] refactor(i18n): Add internationalization support for the
 dashboard service status card - Add new translation items to multiple
 language files, including Chinese and English - Implement
 internationalization support in the StatusCards component

---
 application/src/components/dashboard/StatusCards.tsx | 11 +++++++----
 application/src/translations/en/services.ts          |  6 ++++++
 application/src/translations/types/services.ts       |  6 ++++++
 application/src/translations/zhcn/services.ts        |  6 ++++++
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/application/src/components/dashboard/StatusCards.tsx b/application/src/components/dashboard/StatusCards.tsx
index 2ee4f5d..428f8c9 100644
--- a/application/src/components/dashboard/StatusCards.tsx
+++ b/application/src/components/dashboard/StatusCards.tsx
@@ -3,12 +3,15 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ArrowUp, ArrowDown, Pause, AlertTriangle } from "lucide-react";
 import { Service } from "@/services/serviceService";
 import { useTheme } from "@/contexts/ThemeContext";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface StatusCardsProps {
   services: Service[];
 }
 
 export const StatusCards = ({ services }: StatusCardsProps) => {
+	const { t } = useLanguage();
+
   // Count services by status
   const upServices = services.filter(s => s.status === "up").length;
   const downServices = services.filter(s => s.status === "down").length;
@@ -42,7 +45,7 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
           ></div>
         </div>
         <CardHeader className="pb-2 relative z-10">
-          <CardTitle className="text-sm font-medium text-white">UP SERVICES</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">{t("upServices")}</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{upServices}</span>
@@ -74,7 +77,7 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
           ></div>
         </div>
         <CardHeader className="pb-2 relative z-10">
-          <CardTitle className="text-sm font-medium text-white">DOWN SERVICES</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">{t("downServices")}</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{downServices}</span>
@@ -106,7 +109,7 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
           ></div>
         </div>
         <CardHeader className="pb-2 relative z-10">
-          <CardTitle className="text-sm font-medium text-white">PAUSED SERVICES</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">{t("pausedServices")}</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{pausedServices}</span>
@@ -138,7 +141,7 @@ export const StatusCards = ({ services }: StatusCardsProps) => {
           ></div>
         </div>
         <CardHeader className="pb-2 relative z-10">
-          <CardTitle className="text-sm font-medium text-white">WARNING SERVICES</CardTitle>
+          <CardTitle className="text-sm font-medium text-white">{t("warningServices")}</CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-between relative z-10">
           <span className="text-5xl font-bold text-white">{warningServices}</span>
diff --git a/application/src/translations/en/services.ts b/application/src/translations/en/services.ts
index 66aaef3..3058a85 100644
--- a/application/src/translations/en/services.ts
+++ b/application/src/translations/en/services.ts
@@ -89,4 +89,10 @@ export const servicesTranslations: ServicesTranslations = {
 	serviceNameRequired: "Service name is required",
 	urlDomainHostRequired: "URL/Domain/Host is required",
 	enterValidUrlHostnameDomain: "Please enter a valid URL, hostname, or domain",
+
+	// Dashboard
+	upServices: "UP SERVICES",
+	downServices: "DOWN SERVICES",
+	pausedServices: "PAUSED SERVICES",
+	warningServices: "WARNING SERVICES",
 };
\ No newline at end of file
diff --git a/application/src/translations/types/services.ts b/application/src/translations/types/services.ts
index 11b28b4..63bd1bd 100644
--- a/application/src/translations/types/services.ts
+++ b/application/src/translations/types/services.ts
@@ -87,4 +87,10 @@ export interface ServicesTranslations {
 	serviceNameRequired: string;
 	urlDomainHostRequired: string;
 	enterValidUrlHostnameDomain: string;
+
+	// Dashboard
+	upServices: string;
+	downServices: string;
+	pausedServices: string;
+	warningServices: string;
 }
diff --git a/application/src/translations/zhcn/services.ts b/application/src/translations/zhcn/services.ts
index a94c175..4e9cc95 100644
--- a/application/src/translations/zhcn/services.ts
+++ b/application/src/translations/zhcn/services.ts
@@ -89,4 +89,10 @@ export const servicesTranslations: ServicesTranslations = {
 	serviceNameRequired: "服务名称是必填项",
 	urlDomainHostRequired: "URL/域名/主机名是必填项",
 	enterValidUrlHostnameDomain: "请输入有效的URL、主机名或域名",
+
+	// Dashboard
+	upServices: "在线服务",
+	downServices: "下线服务",
+	pausedServices: "暂停服务",
+	warningServices: "告警服务",
 };
\ No newline at end of file