From 92617038f0aeda44c4ef8d8b8f4ebf32c4e30313 Mon Sep 17 00:00:00 2001
From: YiZixuan <sqkkyzx@qq.com>
Date: Sat, 16 Aug 2025 15:59:00 +0800
Subject: [PATCH] refactor(i18n): Improve multilingual support

---
 .../services/add-service/ServiceBasicFields.tsx        |  6 ++++--
 .../services/add-service/ServiceConfigFields.tsx       |  2 ++
 .../components/services/add-service/ServiceForm.tsx    | 10 ++++++----
 application/src/translations/de/services.ts            |  1 +
 application/src/translations/en/services.ts            |  1 +
 application/src/translations/ja/services.ts            |  1 +
 application/src/translations/km/services.ts            |  1 +
 application/src/translations/types/services.ts         |  1 +
 application/src/translations/zhcn/services.ts          |  1 +
 9 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/application/src/components/services/add-service/ServiceBasicFields.tsx b/application/src/components/services/add-service/ServiceBasicFields.tsx
index e729b73..5eda597 100644
--- a/application/src/components/services/add-service/ServiceBasicFields.tsx
+++ b/application/src/components/services/add-service/ServiceBasicFields.tsx
@@ -3,22 +3,24 @@ import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/comp
 import { Input } from "@/components/ui/input";
 import { UseFormReturn } from "react-hook-form";
 import { ServiceFormData } from "./types";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceBasicFieldsProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceBasicFields({ form }: ServiceBasicFieldsProps) {
+  const { t } = useLanguage();
   return (
     <FormField
       control={form.control}
       name="name"
       render={({ field }) => (
         <FormItem>
-          <FormLabel>Service Name</FormLabel>
+          <FormLabel>{t('serviceName')}</FormLabel>
           <FormControl>
             <Input 
-              placeholder="Enter a descriptive name for your service" 
+              placeholder={t('serviceNameDesc')}
               {...field} 
             />
           </FormControl>
diff --git a/application/src/components/services/add-service/ServiceConfigFields.tsx b/application/src/components/services/add-service/ServiceConfigFields.tsx
index 7145df3..a98c4bb 100644
--- a/application/src/components/services/add-service/ServiceConfigFields.tsx
+++ b/application/src/components/services/add-service/ServiceConfigFields.tsx
@@ -6,12 +6,14 @@ import { UseFormReturn } from "react-hook-form";
 import { ServiceFormData } from "./types";
 import { ServiceUrlField } from "./ServiceUrlField";
 import { useState } from "react";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceConfigFieldsProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
+  const { t } = useLanguage();
   const [isCustomInterval, setIsCustomInterval] = useState(false);
   const intervalValue = form.watch("interval");
 
diff --git a/application/src/components/services/add-service/ServiceForm.tsx b/application/src/components/services/add-service/ServiceForm.tsx
index a888b11..e9a3fd9 100644
--- a/application/src/components/services/add-service/ServiceForm.tsx
+++ b/application/src/components/services/add-service/ServiceForm.tsx
@@ -14,6 +14,7 @@ import { Service } from "@/types/service.types";
 import { ServiceRegionalFields } from "./ServiceRegionalFields";
 import { getServiceFormDefaults, mapServiceToFormData, mapFormDataToServiceData } from "./serviceFormUtils";
 import { useQueryClient } from "@tanstack/react-query";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceFormProps {
   onSuccess: () => void;
@@ -30,6 +31,7 @@ export function ServiceForm({
   isEdit = false,
   onSubmitStart
 }: ServiceFormProps) {
+  const { t } = useLanguage();
   const { toast } = useToast();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const queryClient = useQueryClient();
@@ -124,23 +126,23 @@ export function ServiceForm({
       <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6 pb-6">
         <div className="space-y-6">
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Basic Information</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('basicInformation')}</h3>
             <ServiceBasicFields form={form} />
             <ServiceTypeField form={form} />
           </div>
           
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Configuration</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('configuration')}</h3>
             <ServiceConfigFields form={form} />
           </div>
 
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Regional Monitoring</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('regionalMonitoring')}</h3>
             <ServiceRegionalFields form={form} />
           </div>
           
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Notifications</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('notifications')}</h3>
             <ServiceNotificationFields form={form} />
           </div>
         </div>
diff --git a/application/src/translations/de/services.ts b/application/src/translations/de/services.ts
index 16524f3..424d57e 100644
--- a/application/src/translations/de/services.ts
+++ b/application/src/translations/de/services.ts
@@ -4,6 +4,7 @@ import { ServicesTranslations } from '../types/services';
 export const servicesTranslations: ServicesTranslations = {
 // Dienst-Tabelle
   serviceName: "Dienstname",
+  serviceNameDesc: "Geben Sie einen aussagekräftigen Namen für Ihren Service ein",
   serviceType: "Diensttyp",
   serviceStatus: "Dienststatus",
   responseTime: "Antwortzeit",
diff --git a/application/src/translations/en/services.ts b/application/src/translations/en/services.ts
index c431c74..02e851e 100644
--- a/application/src/translations/en/services.ts
+++ b/application/src/translations/en/services.ts
@@ -3,6 +3,7 @@ import { ServicesTranslations } from '../types/services';
 
 export const servicesTranslations: ServicesTranslations = {
   serviceName: "Service Name",
+  serviceNameDesc: "Enter a descriptive name for your service",
   serviceType: "Service Type",
   serviceStatus: "Service Status",
   responseTime: "Response Time",
diff --git a/application/src/translations/ja/services.ts b/application/src/translations/ja/services.ts
index 51dc764..bb64ae0 100644
--- a/application/src/translations/ja/services.ts
+++ b/application/src/translations/ja/services.ts
@@ -2,6 +2,7 @@ import { ServicesTranslations } from '../types/services';
 
 export const servicesTranslations: ServicesTranslations = {
   serviceName: "サービス名",
+  serviceNameDesc: "サービスのわかりやすい名前を入力してください",
   serviceType: "サービスタイプ",
   serviceStatus: "サービスステータス",
   responseTime: "応答時間",
diff --git a/application/src/translations/km/services.ts b/application/src/translations/km/services.ts
index a3d6c21..9cab3fc 100644
--- a/application/src/translations/km/services.ts
+++ b/application/src/translations/km/services.ts
@@ -3,6 +3,7 @@ import { ServicesTranslations } from '../types/services';
 
 export const servicesTranslations: ServicesTranslations = {
   serviceName: "ឈ្មោះសេវាកម្ម",
+  serviceNameDesc: "បញ្ចូលឈ្មោះពិពណ៌នាសម្រាប់សេវាកម្មរបស់អ្នក",
   serviceType: "ប្រភេទសេវាកម្ម",
   serviceStatus: "ស្ថានភាពសេវាកម្ម",
   responseTime: "ពេលវេលាឆ្លើយតប",
diff --git a/application/src/translations/types/services.ts b/application/src/translations/types/services.ts
index 9b9750f..06d87c8 100644
--- a/application/src/translations/types/services.ts
+++ b/application/src/translations/types/services.ts
@@ -1,6 +1,7 @@
 
 export interface ServicesTranslations {
   serviceName: string;
+  serviceNameDesc: string;
   serviceType: string;
   serviceStatus: string;
   responseTime: string;
diff --git a/application/src/translations/zhcn/services.ts b/application/src/translations/zhcn/services.ts
index 8d531d2..07b4659 100644
--- a/application/src/translations/zhcn/services.ts
+++ b/application/src/translations/zhcn/services.ts
@@ -3,6 +3,7 @@ import { ServicesTranslations } from '../types/services';
 
 export const servicesTranslations: ServicesTranslations = {
   serviceName: "服务名称",
+  serviceNameDesc: "为你的服务输入一个描述性名称",
   serviceType: "服务类型",
   serviceStatus: "服务状态",
   responseTime: "响应时间",