@module-federation/devtools 0.22.1 → 0.23.0

package/dist/es/component/DependencyGraph/index_module.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 16px;
   min-height: 340px;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .header_5e584 {
@@ -12,7 +12,7 @@
   align-items: flex-start;
   gap: 18px;
   padding: 0 6px 6px;
-  border-bottom: 1px solid rgba(96, 165, 250, 0.3);
+  border-bottom: 1px solid var(--color-border-2, rgba(96, 165, 250, 0.3));
 }
 
 .titleBlock_5e584 {
@@ -24,12 +24,12 @@
 .title_5e584 {
   font-size: 16px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .subtitle_5e584 {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
   max-width: 260px;
   line-height: 1.5;
 }
@@ -38,21 +38,21 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  background: rgba(228, 228, 231, 0.5);
+  background: var(--color-bg-2, rgba(228, 228, 231, 0.5));
   padding: 4px 12px;
   border-radius: 999px;
-  border: 1px solid rgba(96, 165, 250, 0.3);
+  border: 1px solid var(--color-border-2, rgba(96, 165, 250, 0.3));
 }
 
 .metaBadge_5e584 {
   font-size: 16px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .metaLabel_5e584 {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 
 .filterBlock_5e584 {
@@ -65,19 +65,19 @@
   flex: 1 1;
   padding: 12px;
   border-radius: 16px;
-  border: 1px solid rgba(96, 165, 250, 0.3);
-  background: rgba(228, 228, 231, 0.5);
+  border: 1px solid var(--color-border-1, rgba(96, 165, 250, 0.3));
+  background: var(--color-bg-2, rgba(228, 228, 231, 0.5));
   backdrop-filter: blur(4px);
 }
 .canvas_5e584 .react-flow__handle {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  border: 2px solid rgba(96, 165, 250, 0.3);
-  background: rgba(243, 244, 246, 0.9);
+  border: 2px solid var(--color-border-1, rgba(96, 165, 250, 0.3));
+  background: var(--color-bg-1, rgba(243, 244, 246, 0.9));
 }
 .canvas_5e584 .react-flow__controls-button:hover {
-  background: rgba(243, 244, 246, 0.9);
+  background: var(--color-bg-1, rgba(243, 244, 246, 0.9));
 }
 
 .graph_5e584 {
@@ -88,10 +88,13 @@
 }
 
 .controls_5e584 .react-flow__controls-button {
-  background: rgba(243, 244, 246, 0.3);
-  border-color: rgba(96, 165, 250, 0.3);
-  color: #1f2937;
+  background: var(--color-bg-2, rgba(243, 244, 246, 0.3));
+  border-color: var(--color-border-1, rgba(96, 165, 250, 0.3));
+  color: var(--color-text-1, #1f2937);
 }
 .controls_5e584 .react-flow__controls-button:hover {
-  background: rgb(255, 255, 255);
+  background: var(--color-bg-1, #ffffff);
+}
+.arco-theme-dark .controls_5e584 .react-flow__controls-button {
+  background: var(--color-bg-white);
 }

package/dist/es/component/DependencyGraphItem/index.js

@@ -1,11 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Handle, Position } from "reactflow";
+import { useTranslation } from "react-i18next";
 import styles from "./index.module";
 import "reactflow/dist/style.css";
 const GraphItem = (props) => {
   const [shareds, setShareds] = useState([]);
   const [exposes, setExposes] = useState([]);
+  const { t } = useTranslation();
   let name;
   let version;
   const { info = "", color, remote } = props.data;
@@ -56,19 +58,19 @@ const GraphItem = (props) => {
       /* @__PURE__ */ jsx("div", { className: styles.group, children: /* @__PURE__ */ jsx("div", { className: styles.name, children: name }) }),
       version && /* @__PURE__ */ jsxs("div", { className: styles.info, children: [
         exposes.length > 0 ? /* @__PURE__ */ jsxs("div", { className: styles["expose-container"], children: [
-          /* @__PURE__ */ jsx("span", { className: styles.type, children: "Expose" }),
+          /* @__PURE__ */ jsx("span", { className: styles.type, children: t("graphItem.expose") }),
           /* @__PURE__ */ jsx("div", { children: exposes.map((expose, index) => {
             return /* @__PURE__ */ jsx("span", { className: styles.item, children: expose }, index);
           }) })
         ] }) : null,
         shareds.length > 0 ? /* @__PURE__ */ jsxs("div", { className: styles["expose-container"], children: [
-          /* @__PURE__ */ jsx("span", { className: styles.type, children: "Shared" }),
+          /* @__PURE__ */ jsx("span", { className: styles.type, children: t("graphItem.shared") }),
           /* @__PURE__ */ jsx("div", { children: shareds.map((shared, index) => {
             return /* @__PURE__ */ jsx("span", { className: styles.item, children: shared }, index);
           }) })
         ] }) : null,
         /* @__PURE__ */ jsxs("div", { className: styles.message, children: [
-          /* @__PURE__ */ jsx("span", { className: styles.type, children: isEntryType ? "Entry" : "Version" }),
+          /* @__PURE__ */ jsx("span", { className: styles.type, children: isEntryType ? t("graphItem.entry") : t("graphItem.version") }),
           /* @__PURE__ */ jsx("span", { className: styles.item, children: version })
         ] })
       ] })

package/dist/es/component/DependencyGraphItem/index_module.css

@@ -2,11 +2,11 @@
   display: flex;
   width: 320px;
   border-radius: 18px;
-  border: 1px solid rgba(96, 165, 250, 0.3);
+  border: 1px solid var(--color-border-1, rgba(96, 165, 250, 0.3));
   overflow: hidden;
   box-shadow: 0 18px 32px rgba(8, 11, 25, 0.35);
-  background: linear-gradient(140deg, var(--mf-accent, rgba(243, 244, 246, 0.9)) 0%, rgba(229, 231, 235, 0.7) 45%, rgba(255, 255, 255, 0.95) 100%), rgba(255, 255, 255, 0.9);
-  color: #1f2937;
+  background: linear-gradient(140deg, var(--mf-accent, rgba(243, 244, 246, 0.9)) 0%, rgba(229, 231, 235, 0.7) 45%, rgba(255, 255, 255, 0.95) 100%), var(--color-bg-2, rgba(255, 255, 255, 0.9));
+  color: var(--color-text-1, #1f2937);
   backdrop-filter: blur(4px);
 }
 .Wrapper_d8079 .react-flow__handle {
@@ -62,7 +62,7 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .Wrapper_d8079 .item_d8079 {
   display: inline-flex;
@@ -70,7 +70,7 @@
   padding: 4px 8px;
   border-radius: 999px;
   background: rgba(243, 244, 246, 0.6);
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
   font-size: 10px;
   font-weight: 500;
   margin-right: 6px;
@@ -85,11 +85,11 @@
   align-items: center;
   gap: 6px;
   font-size: 11px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .Wrapper_d8079 .message_d8079 .item_d8079 {
   margin-right: 0;
   padding: 4px 10px;
   background: rgba(243, 244, 246, 0.6);
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }

package/dist/es/component/Form/index.js

@@ -30,6 +30,7 @@ import {
   Select,
   Switch
 } from "@arco-design/web-react";
+import { useTranslation } from "react-i18next";
 import {
   IconDelete,
   IconPlus,
@@ -64,6 +65,7 @@ const FormComponent = (props) => {
     enableClip,
     onClipChange
   } = props;
+  const { t } = useTranslation();
   const federation = window.__FEDERATION__ || {
     moduleInfo: {},
     originModuleInfo: {}
@@ -71,8 +73,8 @@ const FormComponent = (props) => {
   const { moduleInfo } = federation;
   let { producer } = separateType(moduleInfo);
   const filterDupMap = /* @__PURE__ */ new Map();
-  producer = producer.filter((t) => {
-    const [typeOrName, name] = t.split(":");
+  producer = producer.filter((tItem) => {
+    const [typeOrName, name] = tItem.split(":");
     const marked = filterDupMap.get(name || typeOrName);
     filterDupMap.set(name || typeOrName, true);
     return !marked;
@@ -129,7 +131,7 @@ const FormComponent = (props) => {
     setTimeout(() => {
       setFormStatus(statusSet);
     }, 0);
-    return callback("Module name can not be empty");
+    return callback(t("form.validation.moduleNameRequired"));
   };
   const validateValue = (value, callback, index) => {
     const status = getCheckStatus(index);
@@ -155,9 +157,7 @@ const FormComponent = (props) => {
     setTimeout(() => {
       setFormStatus(statusSet);
     }, 0);
-    return callback(
-      "The module information format is incorrect, check the format in the upper left corner"
-    );
+    return callback(t("form.validation.moduleInfoInvalid"));
   };
   const onAdd = (add) => {
     add(defaultDataItem);
@@ -189,14 +189,8 @@ const FormComponent = (props) => {
     /* @__PURE__ */ jsxs("div", { className: styles.sectionHeader, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.heading, children: [
         /* @__PURE__ */ jsxs("div", { className: styles.titleRow, children: [
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              content: /* @__PURE__ */ jsx("div", { children: "Example: Customise the remote module address ending with 「.json」. For instance key: @module-federation/button, value: http://localhost:3000/mf-manifest.json" }),
-              children: /* @__PURE__ */ jsx(IconInfoCircle, {})
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: styles.title, children: "Proxy Overrides" }),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx("div", { children: t("form.tooltip.proxyExample") }), children: /* @__PURE__ */ jsx(IconInfoCircle, {}) }),
+          /* @__PURE__ */ jsx("span", { className: styles.title, children: t("form.title") }),
           /* @__PURE__ */ jsxs(
             "span",
             {
@@ -209,7 +203,7 @@ const FormComponent = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("span", { className: styles.subtitle, children: "Point consumers to specific remote bundles or manifests for quicker validation." })
+        /* @__PURE__ */ jsx("span", { className: styles.subtitle, children: t("form.subtitle") })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: styles.headerActions, children: [
         /* @__PURE__ */ jsxs("span", { className: styles.hmrArea, children: [
@@ -218,13 +212,13 @@ const FormComponent = (props) => {
             Switch,
             {
               checked: enableClip,
-              checkedText: "Enable Clip",
-              uncheckedText: "Disable Clip",
+              checkedText: t("form.clip.enable"),
+              uncheckedText: t("form.clip.disable"),
               onChange: handleSwitchChange,
               className: styles.switch
             }
           ),
-          /* @__PURE__ */ jsx(Tooltip, { content: "After enabling data clipping, snapshot modules and shared information will be removed, affecting preloading logic.", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Tooltip, { content: t("form.clip.tooltip"), children: /* @__PURE__ */ jsx(
             IconQuestionCircle,
             {
               style: { marginLeft: 5, cursor: "pointer" }
@@ -235,8 +229,8 @@ const FormComponent = (props) => {
             Switch,
             {
               checked: enableHMR === "enable",
-              checkedText: "Enable HMR",
-              uncheckedText: "Disable HMR",
+              checkedText: t("form.hmr.enable"),
+              uncheckedText: t("form.hmr.disable"),
               onChange: hmrChange,
               className: styles.switch
             }
@@ -249,8 +243,7 @@ const FormComponent = (props) => {
             shape: "circle",
             className: styles.add,
             onClick: () => onAdd(add),
-            "data-set-e2e": "e2eAdd",
-            type: "primary"
+            "data-set-e2e": "e2eAdd"
           }
         )
       ] })
@@ -293,7 +286,7 @@ const FormComponent = (props) => {
                       validateKey(value, () => {
                       }, index);
                     } else {
-                      cb("Module name can not be empty");
+                      cb(t("form.validation.moduleNameRequired"));
                       validateKey(value, () => {
                       }, index);
                     }
@@ -305,12 +298,12 @@ const FormComponent = (props) => {
                 Select,
                 {
                   "data-set-e2e": "e2eProxyKey",
-                  placeholder: "Module Name",
+                  placeholder: t("form.fields.moduleName.placeholder"),
                   onChange: (key) => onKeyChange(key, index),
                   allowClear: true,
                   showSearch: true,
                   dropdownMenuClassName: styles.dropdown,
-                  children: formatProducer.map((item2) => /* @__PURE__ */ jsx(Option, { value: item2.value, children: item2.label }, item2.value))
+                  children: formatProducer.map((option) => /* @__PURE__ */ jsx(Option, { value: option.value, children: option.label }, option.value))
                 }
               )
             }
@@ -328,9 +321,7 @@ const FormComponent = (props) => {
                       validateValue(value, () => {
                       }, index);
                     } else {
-                      cb(
-                        "The module information format is incorrect, check the format in the upper left corner"
-                      );
+                      cb(t("form.validation.moduleInfoInvalid"));
                       validateValue(value, () => {
                       }, index);
                     }
@@ -342,7 +333,9 @@ const FormComponent = (props) => {
                 Select,
                 {
                   "data-set-e2e": "e2eProxyValue",
-                  placeholder: "Custom Manifest URL",
+                  placeholder: t(
+                    "form.fields.customManifest.placeholder"
+                  ),
                   allowClear: true,
                   showSearch: true,
                   allowCreate: true,
@@ -357,11 +350,11 @@ const FormComponent = (props) => {
     }) }) : /* @__PURE__ */ jsx("div", { className: styles.emptyWrapper, children: /* @__PURE__ */ jsx(
       Empty,
       {
-        description: "Add your first override to begin redirecting remotes.",
+        description: t("form.empty.description"),
         className: styles.empty
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: styles.footerHint, children: "Changes persist per domain and refresh the inspected tab when valid." })
+    /* @__PURE__ */ jsx("div", { className: styles.footerHint, children: t("form.footer.hint") })
   ] }) });
 };
 var Form_default = FormComponent;

package/dist/es/component/Form/index.module.js

@@ -1,5 +1,5 @@
 import "./index_module.css";
-var index_module_default = { "wrapper": "wrapper_20b79", "sectionHeader": "sectionHeader_20b79", "heading": "heading_20b79", "titleRow": "titleRow_20b79", "title": "title_20b79", "subtitle": "subtitle_20b79", "headerActions": "headerActions_20b79", "add": "add_20b79", "badge": "badge_20b79", "statusMessage": "statusMessage_20b79", "divider": "divider_20b79", "hmrArea": "hmrArea_20b79", "switch": "switch_20b79", "rules": "rules_20b79", "ruleCard": "ruleCard_20b79", "ruleHeader": "ruleHeader_20b79", "toggle": "toggle_20b79", "inputs": "inputs_20b79", "field": "field_20b79", "dropdown": "dropdown_20b79", "delete": "delete_20b79", "emptyWrapper": "emptyWrapper_20b79", "empty": "empty_20b79", "footerHint": "footerHint_20b79" };
+var index_module_default = { "wrapper": "wrapper_20b79", "sectionHeader": "sectionHeader_20b79", "heading": "heading_20b79", "titleRow": "titleRow_20b79", "title": "title_20b79", "subtitle": "subtitle_20b79", "headerActions": "headerActions_20b79", "badge": "badge_20b79", "statusMessage": "statusMessage_20b79", "divider": "divider_20b79", "hmrArea": "hmrArea_20b79", "switch": "switch_20b79", "rules": "rules_20b79", "ruleCard": "ruleCard_20b79", "ruleHeader": "ruleHeader_20b79", "toggle": "toggle_20b79", "inputs": "inputs_20b79", "field": "field_20b79", "dropdown": "dropdown_20b79", "delete": "delete_20b79", "emptyWrapper": "emptyWrapper_20b79", "empty": "empty_20b79", "footerHint": "footerHint_20b79" };
 export {
   index_module_default as default
 };

package/dist/es/component/Form/index_module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 18px;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .sectionHeader_20b79 {
@@ -11,7 +11,7 @@
   justify-content: space-between;
   gap: 18px;
   padding: 12px 16px;
-  background: rgba(228, 228, 231, 0.5);
+  background: rgba(228, 228, 231, 0.1);
   border: 1px solid rgba(228, 228, 231, 0.5);
 }
 
@@ -28,7 +28,7 @@
   gap: 10px;
   font-size: 16px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 .titleRow_20b79 .arco-icon {
   color: rgba(23, 75, 180, 0.9);
@@ -41,7 +41,7 @@
 
 .subtitle_20b79 {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
   line-height: 1.5;
 }
 
@@ -51,9 +51,6 @@
   gap: 12px;
   flex-wrap: wrap;
 }
-.headerActions_20b79 .add_20b79 {
-  box-shadow: 0 8px 16px rgba(243, 244, 246, 0.9);
-}
 
 .badge_20b79 {
   transform: scale(1.4);
@@ -62,7 +59,7 @@
 
 .statusMessage_20b79 {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
   max-width: 260px;
   line-height: 1.4;
 }
@@ -78,16 +75,16 @@
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 
 .switch_20b79 .arco-switch {
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.9));
   border-color: rgba(96, 165, 250, 0.35);
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .switch_20b79 .arco-switch-checked {
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.9));
   border-color: rgba(96, 165, 250, 0.35);
 }
 
@@ -104,7 +101,7 @@
   padding: 18px;
   border-radius: 18px;
   border: 1px solid rgba(228, 228, 231, 0.5);
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
   box-shadow: 0 15px 32px rgba(8, 11, 25, 0.45);
 }
 
@@ -120,10 +117,10 @@
 .toggle_20b79 .arco-checkbox-icon {
   border-radius: 6px;
   border-color: rgba(228, 228, 231, 0.5);
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
 }
 .toggle_20b79 .arco-checkbox-checked .arco-checkbox-icon {
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
   border-color: rgba(228, 228, 231, 0.5);
 }
 
@@ -145,31 +142,31 @@
   width: 100%;
 }
 .field_20b79 .arco-select-view {
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
   border: 1px solid rgba(228, 228, 231, 0.5);
   border-radius: 14px;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
   min-height: 42px;
   padding: 6px 12px;
 }
 .field_20b79 .arco-select-view-input {
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .field_20b79 .arco-select-view-placeholder {
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 
 .dropdown_20b79 {
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
   border: 1px solid rgba(228, 228, 231, 0.5);
   box-shadow: 0 16px 30px rgba(8, 11, 25, 0.45);
 }
 .dropdown_20b79 .arco-select-option {
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .dropdown_20b79 .arco-select-option:hover,
 .dropdown_20b79 .arco-select-option.arco-select-option-selected {
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
 }
 
 .delete_20b79 {
@@ -180,18 +177,18 @@
   border-radius: 16px;
   border: 1px dashed rgba(228, 228, 231, 0.5);
   padding: 28px 16px;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
   display: flex;
   justify-content: center;
 }
 
 .empty_20b79 .arco-empty-description {
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 
 .footerHint_20b79 {
   font-size: 11px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
   text-align: right;
   letter-spacing: 0.04em;
   text-transform: uppercase;

package/dist/es/component/LanguageSwitch.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { Button, Dropdown, Menu } from "@arco-design/web-react";
+import { IconLanguage } from "@arco-design/web-react/icon";
+import { useTranslation } from "react-i18next";
+import { LANGUAGE_STORAGE_KEY } from "../i18n";
+import styles from "./ThemeToggle.module";
+const LANGUAGE_OPTIONS = [
+  { value: "zh-CN", label: "中文" },
+  { value: "en", label: "English" }
+];
+const persistLanguage = (lang) => {
+  var _a;
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage.setItem(LANGUAGE_STORAGE_KEY, lang);
+    } catch (e) {
+    }
+    const { chrome } = window;
+    const storage = (_a = chrome == null ? void 0 : chrome.storage) == null ? void 0 : _a.local;
+    if (storage && typeof storage.set === "function") {
+      try {
+        storage.set({ [LANGUAGE_STORAGE_KEY]: lang });
+      } catch (e) {
+      }
+    }
+  }
+};
+const LanguageSwitch = () => {
+  var _a;
+  const { i18n } = useTranslation();
+  const current = ((_a = i18n.language) == null ? void 0 : _a.toLowerCase()) || "zh-cn";
+  const value = current.startsWith("en") ? "en" : "zh-CN";
+  const handleChange = (next) => {
+    i18n.changeLanguage(next);
+    persistLanguage(next);
+  };
+  const droplist = /* @__PURE__ */ jsx(Menu, { onClickMenuItem: handleChange, selectedKeys: [value], children: LANGUAGE_OPTIONS.map((option) => /* @__PURE__ */ jsx(Menu.Item, { children: option.label }, option.value)) });
+  return /* @__PURE__ */ jsx(Dropdown, { droplist, trigger: "click", position: "br", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: /* @__PURE__ */ jsx(IconLanguage, {}),
+      size: "default",
+      className: styles.themeToggle
+    }
+  ) });
+};
+var LanguageSwitch_default = LanguageSwitch;
+export {
+  LanguageSwitch_default as default
+};

package/dist/es/component/Layout/index.js

@@ -41,6 +41,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState, useRef } from "react";
 import { useDebounceFn, useUpdateEffect } from "ahooks";
 import { Form } from "@arco-design/web-react";
+import { useTranslation } from "react-i18next";
 import {
   MODULE_DEVTOOL_IDENTIFIER
 } from "@module-federation/sdk";
@@ -98,6 +99,7 @@ const Layout = (props) => {
     onModuleInfoReset,
     tabId
   } = props;
+  const { t } = useTranslation();
   const { producer } = separateType(moduleInfo);
   const producerKey = useMemo(() => producer.join("|"), [producer]);
   const [condition, setCondition] = useState(statusInfo.processing);
@@ -422,17 +424,11 @@ const Layout = (props) => {
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.summaryCard, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.summaryHeader, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.summaryTitle, children: "Remotes in scope" }),
-        /* @__PURE__ */ jsx("span", { className: styles.summaryHint, children: "Override manifests to verify integration without redeploying." })
+        /* @__PURE__ */ jsx("span", { className: styles.summaryTitle, children: t("layout.summary.title") }),
+        /* @__PURE__ */ jsx("span", { className: styles.summaryHint, children: t("layout.summary.hint") })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.chipGroup, children: [
-        previewList.length ? previewList.map((name) => /* @__PURE__ */ jsx("span", { className: styles.chip, children: name }, name)) : /* @__PURE__ */ jsx("span", { className: styles.chipPlaceholder, children: "Waiting for module map" }),
-        extraCount > 0 && /* @__PURE__ */ jsxs("span", { className: styles.moreChip, children: [
-          "+",
-          extraCount,
-          " more"
-        ] })
-      ] })
+      previewList.length ? previewList.map((name) => /* @__PURE__ */ jsx("span", { className: styles.chip, children: name }, name)) : /* @__PURE__ */ jsx("span", { className: styles.chipPlaceholder, children: t("layout.summary.placeholder") }),
+      extraCount > 0 && /* @__PURE__ */ jsx("span", { className: styles.moreChip, children: t("layout.summary.more", { count: extraCount }) })
     ] }),
     /* @__PURE__ */ jsx("section", { className: styles.formSection, children: /* @__PURE__ */ jsx(
       Form,

package/dist/es/component/Layout/index_module.css

@@ -23,12 +23,12 @@
 .summaryTitle_084ab {
   font-size: 16px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .summaryHint_084ab {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 
 .chipGroup_084ab {
@@ -44,16 +44,16 @@
   padding: 6px 10px;
   border-radius: 12px;
   border: 1px solid rgba(228, 228, 231, 0.5);
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
   font-size: 12px;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
   letter-spacing: 0.02em;
 }
 
 .chipPlaceholder_084ab {
   border-style: dashed;
-  color: #4b5563;
-  background: rgba(255, 255, 255, 0.9);
+  color: var(--color-text-2, #4b5563);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
 }
 
 .moreChip_084ab {
@@ -64,5 +64,5 @@
 .formSection_084ab {
   padding: 22px 24px;
   border: 1px solid rgba(228, 228, 231, 0.5);
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
 }