🌐 Handling i18n issues on popup pages #1081

Author: CodFrm

src/pages/components/layout/PopupLayout.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from "react";
+import { arcoLocale } from "@App/locales/arco";
+import i18n from "@App/locales/locales";
+import { ConfigProvider } from "@arco-design/web-react";
+
+const PopupLayout: React.FC<{
+  children: ReactNode;
+}> = ({ children }) => {
+  return (
+    <ConfigProvider locale={arcoLocale(i18n.language)}>
+      <div
+        style={{
+          borderBottom: "1px solid var(--color-neutral-3)",
+        }}
+      >
+        {children}
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default PopupLayout;

src/pages/popup/main.tsx

@@ -15,6 +15,7 @@ import { LoggerDAO } from "@App/app/repo/logger";
 import { switchLight } from "../components/layout/MainLayout";
 import App from "./App";
 import "@App/locales/locales";
+import PopupLayout from "../components/layout/PopupLayout";
 
 migrate();
 // 初始化日志组件
@@ -37,11 +38,7 @@ IoC.registerInstance(SystemConfig, new SystemConfig(con));
 switchLight(localStorage.lightMode || "auto");
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <div
-    style={{
-      borderBottom: "1px solid var(--color-neutral-3)",
-    }}
-  >
+  <PopupLayout>
     <App />
-  </div>
+  </PopupLayout>
 );