feat: Add x-data-grid component localization (#2925)

thx

src/components/layout/use-custom-theme.ts

@@ -4,14 +4,33 @@ import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { useSetThemeMode, useThemeMode } from "@/services/states";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
 import { useVerge } from "@/hooks/use-verge";
-import { useTheme } from "@mui/material/styles";
+import {
+  zhCN as zhXDataGrid,
+  enUS as enXDataGrid,
+  ruRU as ruXDataGrid,
+  faIR as faXDataGrid,
+  arSD as arXDataGrid,
+} from "@mui/x-data-grid/locales";
+import { useTranslation } from "react-i18next";
 const appWindow = getCurrentWebviewWindow();
 
+const languagePackMap: Record<string, any> = {
+  zh: { ...zhXDataGrid },
+  fa: { ...faXDataGrid },
+  ru: { ...ruXDataGrid },
+  ar: { ...arXDataGrid },
+  en: { ...enXDataGrid },
+};
+
+const getLanguagePackMap = (key: string) =>
+  languagePackMap[key] || languagePackMap.en;
+
 /**
  * custom theme
  */
 export const useCustomTheme = () => {
   const { verge } = useVerge();
+  const { i18n } = useTranslation();
   const { theme_mode, theme_setting } = verge ?? {};
   const mode = useThemeMode();
   const setMode = useSetThemeMode();
@@ -41,7 +60,8 @@ export const useCustomTheme = () => {
     let theme: Theme;
 
     try {
-      theme = createTheme({
+      theme = createTheme(
+        {
           breakpoints: {
             values: { xs: 0, sm: 650, md: 900, lg: 1200, xl: 1536 },
           },
@@ -68,7 +88,9 @@ export const useCustomTheme = () => {
               ? `${setting.font_family}, ${dt.font_family}`
               : dt.font_family,
           },
-      });
+        },
+        getLanguagePackMap(i18n.language),
+      );
     } catch {
       // fix #294
       theme = createTheme({
@@ -133,7 +155,7 @@ export const useCustomTheme = () => {
     }, 0);
 
     return theme;
-  }, [mode, theme_setting]);
+  }, [mode, theme_setting, i18n.language]);
 
   return { theme };
 };