feat: i18n

www/components/frps/server_create_dialog.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { initServer } from '@/api/server'
@@ -15,8 +17,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog'
+import { useTranslation } from 'react-i18next'
 
 export const CreateServerDialog = ({refetchTrigger}: {refetchTrigger?: (randStr: string) => void}) => {
+  const { t } = useTranslation()
   const [serverID, setServerID] = useState<string | undefined>()
   const [serverIP, setServerIP] = useState<string | undefined>()
   const newServer = useMutation({
@@ -25,17 +29,17 @@ export const CreateServerDialog = ({refetchTrigger}: {refetchTrigger?: (randStr:
   const { toast } = useToast()
 
   const handleNewServer = async () => {
-    toast({ title: '已提交创建请求' })
+    toast({ title: t('server.create.submitting') })
     try {
       let resp = await newServer.mutateAsync({ serverId: serverID, serverIp: serverIP })
       if (resp.status?.code !== RespCode.SUCCESS) {
-        toast({ title: '创建服务端失败' })
+        toast({ title: t('server.create.error') })
         return
       }
-      toast({ title: '创建服务端成功' })
+      toast({ title: t('server.create.success') })
       refetchTrigger && refetchTrigger(JSON.stringify(Math.random()))
     } catch (error) {
-      toast({ title: '创建服务端失败' })
+      toast({ title: t('server.create.error') })
     }
   }
 
@@ -43,21 +47,21 @@ export const CreateServerDialog = ({refetchTrigger}: {refetchTrigger?: (randStr:
     <Dialog>
       <DialogTrigger asChild>
         <Button variant="outline" size={'sm'}>
-          新建
+          {t('server.create.button')}
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>新建服务端</DialogTitle>
-          <DialogDescription>创建新的服务端用于提供服务，服务端ID必须唯一</DialogDescription>
+          <DialogTitle>{t('server.create.title')}</DialogTitle>
+          <DialogDescription>{t('server.create.description')}</DialogDescription>
         </DialogHeader>
 
-        <Label>服务端ID</Label>
+        <Label>{t('server.create.id')}</Label>
         <Input className="mt-2" value={serverID} onChange={(e) => setServerID(e.target.value)} />
-        <Label>IP地址/域名</Label>
+        <Label>{t('server.create.ip')}</Label>
         <Input className="mt-2" value={serverIP} onChange={(e) => setServerIP(e.target.value)} />
         <DialogFooter>
-          <Button onClick={handleNewServer}>创建</Button>
+          <Button onClick={handleNewServer}>{t('server.create.submit')}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>