feat: i18n supports

src/pages/_layout.tsx

@@ -1,5 +1,7 @@
+import i18next from "i18next";
 import useSWR, { SWRConfig, useSWRConfig } from "swr";
 import { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { Route, Routes } from "react-router-dom";
 import { alpha, createTheme, List, Paper, ThemeProvider } from "@mui/material";
 import { listen } from "@tauri-apps/api/event";
@@ -16,6 +18,7 @@ import UpdateButton from "../components/layout/update-button";
 const isMacos = navigator.userAgent.includes("Mac OS X");
 
 const Layout = () => {
+  const { t } = useTranslation();
   const { mutate } = useSWRConfig();
   const { data } = useSWR("getVergeConfig", getVergeConfig);
 
@@ -37,6 +40,12 @@ const Layout = () => {
     });
   }, []);
 
+  useEffect(() => {
+    if (data?.language) {
+      i18next.changeLanguage(data.language);
+    }
+  }, [data?.language]);
+
   const theme = useMemo(() => {
     // const background = mode === "light" ? "#f5f5f5" : "#000";
     const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
@@ -87,7 +96,7 @@ const Layout = () => {
             <List className="the-menu" data-windrag>
               {routers.map((router) => (
                 <LayoutItem key={router.label} to={router.link}>
-                  {router.label}
+                  {t(router.label)}
                 </LayoutItem>
               ))}
             </List>