feat: add internationalization support with next-intl

app/components/profile/webhook-config.tsx

@@ -2,6 +2,7 @@
 "use client"
 
 import { useState, useEffect } from "react"
+import { useTranslations } from "next-intl"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -16,6 +17,10 @@ import {
 } from "@/components/ui/tooltip"
 
 export function WebhookConfig() {
+  const t = useTranslations("profile.webhook")
+  const tCommon = useTranslations("common.actions")
+  const tMessages = useTranslations("emails.messages")
+  const tApiKey = useTranslations("profile.apiKey")
   const [enabled, setEnabled] = useState(false)
   const [url, setUrl] = useState("")
   const [loading, setLoading] = useState(false)
@@ -42,7 +47,7 @@ export function WebhookConfig() {
           <Loader2 className="w-6 h-6 text-primary animate-spin" />
         </div>
         <div>
-          <p className="text-sm text-muted-foreground">加载中...</p>
+          <p className="text-sm text-muted-foreground">{tMessages("loading")}</p>
         </div>
       </div>
     )
@@ -60,16 +65,16 @@ export function WebhookConfig() {
         body: JSON.stringify({ url, enabled })
       })
 
-      if (!res.ok) throw new Error("Failed to save")
+      if (!res.ok) throw new Error(t("saveFailed"))
 
       toast({
-        title: "保存成功",
-        description: "Webhook 配置已更新"
+        title: t("saveSuccess"),
+        description: t("saveSuccess")
       })
     } catch (_error) {
       toast({
-        title: "保存失败",
-        description: "请稍后重试",
+        title: t("saveFailed"),
+        description: t("saveFailed"),
         variant: "destructive"
       })
     } finally {
@@ -88,16 +93,16 @@ export function WebhookConfig() {
         body: JSON.stringify({ url })
       })
 
-      if (!res.ok) throw new Error("测试失败")
+      if (!res.ok) throw new Error(t("testFailed"))
 
       toast({
-        title: "测试成功",
-        description: "Webhook 调用成功,请检查目标服务器是否收到请求"
+        title: t("testSuccess"),
+        description: t("testSuccess")
       })
     } catch (_error) {
       toast({
-        title: "测试失败",
-        description: "请检查 URL 是否正确且可访问",
+        title: t("testFailed"),
+        description: t("testFailed"),
         variant: "destructive"
       })
     } finally {
@@ -109,9 +114,9 @@ export function WebhookConfig() {
     <form onSubmit={handleSubmit} className="space-y-4">
       <div className="flex items-center justify-between">
         <div className="space-y-0.5">
-          <Label>启用 Webhook</Label>
+          <Label>{t("enable")}</Label>
           <div className="text-sm text-muted-foreground">
-            当收到新邮件时通知指定的 URL
+            {t("description")}
           </div>
         </div>
         <Switch
@@ -123,11 +128,11 @@ export function WebhookConfig() {
       {enabled && (
         <div className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="webhook-url">Webhook URL</Label>
+            <Label htmlFor="webhook-url">{t("url")}</Label>
             <div className="flex gap-2">
               <Input
                 id="webhook-url"
-                placeholder="https://example.com/webhook"
+                placeholder={t("urlPlaceholder")}
                 value={url}
                 onChange={(e) => setUrl(e.target.value)}
                 type="url"
@@ -137,7 +142,7 @@ export function WebhookConfig() {
                 {loading ? (
                   <Loader2 className="w-4 h-4 animate-spin" />
                 ) : (
-                  "保存"
+                  tCommon("save")
                 )}
               </Button>
               <TooltipProvider>
@@ -157,13 +162,13 @@ export function WebhookConfig() {
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p>发送测试消息到此 Webhook</p>
+                    <p>{t("test")}</p>
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
             </div>
             <p className="text-xs text-muted-foreground">
-              我们会向此 URL 发送 POST 请求,包含新邮件的相关信息
+              {t("description2")}
             </p>
           </div>
 
@@ -174,26 +179,26 @@ export function WebhookConfig() {
               onClick={() => setShowDocs(!showDocs)}
             >
               {showDocs ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
-              查看数据格式说明
+              {t("description3")}
             </button>
 
             {showDocs && (
               <div className="rounded-md bg-muted p-4 text-sm space-y-3">
-                <p>当收到新邮件时，我们会向配置的 URL 发送 POST 请求，请求头包含:</p>
+                <p>{t("docs.intro")}</p>
                 <pre className="bg-background p-2 rounded text-xs">
                   Content-Type: application/json{'\n'}
                   X-Webhook-Event: new_message
                 </pre>
 
-                <p>请求体示例:</p>
+                <p>{t("docs.exampleBody")}</p>
                 <pre className="bg-background p-2 rounded text-xs overflow-auto">
                   {`{
   "emailId": "email-uuid",
   "messageId": "message-uuid",
   "fromAddress": "sender@example.com",
-  "subject": "邮件主题",
-  "content": "邮件文本内容",
-  "html": "邮件HTML内容",
+  "subject": "${t("docs.subject")}",
+  "content": "${t("docs.content")}",
+  "html": "${t("docs.html")}",
   "receivedAt": "2024-01-01T12:00:00.000Z",
   "toAddress": "your-email@${window.location.host}"
 }`}