@module-federation/devtools 0.22.1 → 0.23.0

package/dist/lib/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/lib/component/DependencyGraphItem/index.js

@@ -34,11 +34,13 @@ module.exports = __toCommonJS(DependencyGraphItem_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_reactflow = require("reactflow");
+var import_react_i18next = require("react-i18next");
 var import_index = __toESM(require("./index.module"));
 var import_style = require("reactflow/dist/style.css");
 const GraphItem = (props) => {
   const [shareds, setShareds] = (0, import_react.useState)([]);
   const [exposes, setExposes] = (0, import_react.useState)([]);
+  const { t } = (0, import_react_i18next.useTranslation)();
   let name;
   let version;
   const { info = "", color, remote } = props.data;
@@ -89,19 +91,19 @@ const GraphItem = (props) => {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.group, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.name, children: name }) }),
       version && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.info, children: [
         exposes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default["expose-container"], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: "Expose" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: t("graphItem.expose") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: exposes.map((expose, index) => {
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: expose }, index);
           }) })
         ] }) : null,
         shareds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default["expose-container"], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: "Shared" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: t("graphItem.shared") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: shareds.map((shared, index) => {
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: shared }, index);
           }) })
         ] }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.message, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: isEntryType ? "Entry" : "Version" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: isEntryType ? t("graphItem.entry") : t("graphItem.version") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: version })
         ] })
       ] })

package/dist/lib/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/lib/component/Form/index.js

@@ -54,6 +54,7 @@ module.exports = __toCommonJS(Form_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_web_react = require("@arco-design/web-react");
+var import_react_i18next = require("react-i18next");
 var import_icon = require("@arco-design/web-react/icon");
 var import_constant = require("../../template/constant");
 var import_utils = require("../../utils");
@@ -77,6 +78,7 @@ const FormComponent = (props) => {
     enableClip,
     onClipChange
   } = props;
+  const { t } = (0, import_react_i18next.useTranslation)();
   const federation = window.__FEDERATION__ || {
     moduleInfo: {},
     originModuleInfo: {}
@@ -84,8 +86,8 @@ const FormComponent = (props) => {
   const { moduleInfo } = federation;
   let { producer } = (0, import_utils.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;
@@ -142,7 +144,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);
@@ -168,9 +170,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(import_constant.defaultDataItem);
@@ -202,14 +202,8 @@ const FormComponent = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.sectionHeader, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.heading, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.titleRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_web_react.Tooltip,
-            {
-              content: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_icon.IconInfoCircle, {})
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.title, children: "Proxy Overrides" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: t("form.tooltip.proxyExample") }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconInfoCircle, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.title, children: t("form.title") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "span",
             {
@@ -222,7 +216,7 @@ const FormComponent = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.subtitle, children: "Point consumers to specific remote bundles or manifests for quicker validation." })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.subtitle, children: t("form.subtitle") })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.headerActions, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: import_index.default.hmrArea, children: [
@@ -231,13 +225,13 @@ const FormComponent = (props) => {
             import_web_react.Switch,
             {
               checked: enableClip,
-              checkedText: "Enable Clip",
-              uncheckedText: "Disable Clip",
+              checkedText: t("form.clip.enable"),
+              uncheckedText: t("form.clip.disable"),
               onChange: handleSwitchChange,
               className: import_index.default.switch
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: "After enabling data clipping, snapshot modules and shared information will be removed, affecting preloading logic.", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: t("form.clip.tooltip"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_icon.IconQuestionCircle,
             {
               style: { marginLeft: 5, cursor: "pointer" }
@@ -248,8 +242,8 @@ const FormComponent = (props) => {
             import_web_react.Switch,
             {
               checked: enableHMR === "enable",
-              checkedText: "Enable HMR",
-              uncheckedText: "Disable HMR",
+              checkedText: t("form.hmr.enable"),
+              uncheckedText: t("form.hmr.disable"),
               onChange: hmrChange,
               className: import_index.default.switch
             }
@@ -262,8 +256,7 @@ const FormComponent = (props) => {
             shape: "circle",
             className: import_index.default.add,
             onClick: () => onAdd(add),
-            "data-set-e2e": "e2eAdd",
-            type: "primary"
+            "data-set-e2e": "e2eAdd"
           }
         )
       ] })
@@ -306,7 +299,7 @@ const FormComponent = (props) => {
                       validateKey(value, () => {
                       }, index);
                     } else {
-                      cb("Module name can not be empty");
+                      cb(t("form.validation.moduleNameRequired"));
                       validateKey(value, () => {
                       }, index);
                     }
@@ -318,12 +311,12 @@ const FormComponent = (props) => {
                 import_web_react.Select,
                 {
                   "data-set-e2e": "e2eProxyKey",
-                  placeholder: "Module Name",
+                  placeholder: t("form.fields.moduleName.placeholder"),
                   onChange: (key) => onKeyChange(key, index),
                   allowClear: true,
                   showSearch: true,
                   dropdownMenuClassName: import_index.default.dropdown,
-                  children: formatProducer.map((item2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: item2.value, children: item2.label }, item2.value))
+                  children: formatProducer.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: option.value, children: option.label }, option.value))
                 }
               )
             }
@@ -341,9 +334,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);
                     }
@@ -355,7 +346,9 @@ const FormComponent = (props) => {
                 import_web_react.Select,
                 {
                   "data-set-e2e": "e2eProxyValue",
-                  placeholder: "Custom Manifest URL",
+                  placeholder: t(
+                    "form.fields.customManifest.placeholder"
+                  ),
                   allowClear: true,
                   showSearch: true,
                   allowCreate: true,
@@ -370,11 +363,11 @@ const FormComponent = (props) => {
     }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.emptyWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_web_react.Empty,
       {
-        description: "Add your first override to begin redirecting remotes.",
+        description: t("form.empty.description"),
         className: import_index.default.empty
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.footerHint, children: "Changes persist per domain and refresh the inspected tab when valid." })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.footerHint, children: t("form.footer.hint") })
   ] }) });
 };
 var Form_default = FormComponent;

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

@@ -22,4 +22,4 @@ __export(index_module_exports, {
 });
 module.exports = __toCommonJS(index_module_exports);
 var import_index_module = require("./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" };

package/dist/lib/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/lib/component/LanguageSwitch.js

@@ -0,0 +1,80 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LanguageSwitch_exports = {};
+__export(LanguageSwitch_exports, {
+  default: () => LanguageSwitch_default
+});
+module.exports = __toCommonJS(LanguageSwitch_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_web_react = require("@arco-design/web-react");
+var import_icon = require("@arco-design/web-react/icon");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n");
+var import_ThemeToggle = __toESM(require("./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(import_i18n.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({ [import_i18n.LANGUAGE_STORAGE_KEY]: lang });
+      } catch (e) {
+      }
+    }
+  }
+};
+const LanguageSwitch = () => {
+  var _a;
+  const { i18n } = (0, import_react_i18next.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__ */ (0, import_jsx_runtime.jsx)(import_web_react.Menu, { onClickMenuItem: handleChange, selectedKeys: [value], children: LANGUAGE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Menu.Item, { children: option.label }, option.value)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Dropdown, { droplist, trigger: "click", position: "br", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_web_react.Button,
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconLanguage, {}),
+      size: "default",
+      className: import_ThemeToggle.default.themeToggle
+    }
+  ) });
+};
+var LanguageSwitch_default = LanguageSwitch;

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

@@ -72,6 +72,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ahooks = require("ahooks");
 var import_web_react = require("@arco-design/web-react");
+var import_react_i18next = require("react-i18next");
 var import_sdk = require("@module-federation/sdk");
 var import_Form = __toESM(require("../Form"));
 var import_utils = require("../../utils");
@@ -103,6 +104,7 @@ const Layout = (props) => {
     onModuleInfoReset,
     tabId
   } = props;
+  const { t } = (0, import_react_i18next.useTranslation)();
   const { producer } = (0, import_utils.separateType)(moduleInfo);
   const producerKey = (0, import_react.useMemo)(() => producer.join("|"), [producer]);
   const [condition, setCondition] = (0, import_react.useState)(import_constant.statusInfo.processing);
@@ -427,17 +429,11 @@ const Layout = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.wrapper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.summaryCard, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.summaryHeader, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.summaryTitle, children: "Remotes in scope" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.summaryHint, children: "Override manifests to verify integration without redeploying." })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.summaryTitle, children: t("layout.summary.title") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.summaryHint, children: t("layout.summary.hint") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.chipGroup, children: [
-        previewList.length ? previewList.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.chip, children: name }, name)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.chipPlaceholder, children: "Waiting for module map" }),
-        extraCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: import_index.default.moreChip, children: [
-          "+",
-          extraCount,
-          " more"
-        ] })
-      ] })
+      previewList.length ? previewList.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.chip, children: name }, name)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.chipPlaceholder, children: t("layout.summary.placeholder") }),
+      extraCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.moreChip, children: t("layout.summary.more", { count: extraCount }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: import_index.default.formSection, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_web_react.Form,