@module-federation/devtools 0.22.1 → 0.24.0

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

@@ -1,3 +1,34 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -27,7 +58,8 @@ import {
   Package2,
   Repeat,
   Search,
-  Server
+  Server,
+  Info
 } from "lucide-react";
 import {
   Card,
@@ -37,8 +69,10 @@ import {
   Select,
   Collapse,
   Popover,
-  Button
+  Button,
+  Tooltip
 } from "@arco-design/web-react";
+import { useTranslation } from "react-i18next";
 import {
   normalizeShareData,
   computeShareStats,
@@ -49,24 +83,36 @@ import {
 import FocusResultDisplay from "./FocusResultDisplay";
 import styles from "./index.module";
 const ALL_VALUE = "__all__";
-function loadedStatusLabel(status) {
-  if (status === "loaded") {
-    return "Loaded";
-  }
-  if (status === "loading") {
-    return "Loading";
-  }
-  return "Not Loaded";
+function HoverTag(_a) {
+  var _b = _a, { tooltip, children } = _b, tagProps = __objRest(_b, ["tooltip", "children"]);
+  return /* @__PURE__ */ jsx(Popover, { trigger: "hover", position: "top", content: tooltip != null ? tooltip : children, children: /* @__PURE__ */ jsx(Tag, __spreadProps(__spreadValues({}, tagProps), { children })) });
 }
 function SharedDepsExplorer({
   shareData: shareDataProp
 }) {
+  const { t } = useTranslation();
   const [normalized, setNormalized] = useState([]);
   const [loadingState, setLoadingState] = useState("idle");
   const [errorMessage, setErrorMessage] = useState(null);
+  const loadedStatusLabelLocal = (status) => {
+    if (status === "loaded") {
+      return t("sharedDeps.status.loaded");
+    }
+    if (status === "loading") {
+      return t("sharedDeps.status.loading");
+    }
+    if (status === "t-loaded") {
+      return t("sharedDeps.status.tLoaded");
+    }
+    if (status === "t-loading") {
+      return t("sharedDeps.status.tLoading");
+    }
+    return t("sharedDeps.status.notLoaded");
+  };
   const [selectedProvider, setSelectedProvider] = useState("");
   const [selectedPackage, setSelectedPackage] = useState("");
   const [selectedVersion, setSelectedVersion] = useState("");
+  const [selectedMode, setSelectedMode] = useState("");
   const [searchText, setSearchText] = useState("");
   const [chartScope, setChartScope] = useState("default");
   const [focusPackage, setFocusPackage] = useState("react");
@@ -125,6 +171,9 @@ function SharedDepsExplorer({
       if (selectedVersion && v.version !== selectedVersion) {
         return false;
       }
+      if (selectedMode && v.treeShakingMode !== selectedMode) {
+        return false;
+      }
       if (keyword && !v.packageName.toLowerCase().includes(keyword)) {
         return false;
       }
@@ -135,6 +184,7 @@ function SharedDepsExplorer({
     selectedProvider,
     selectedPackage,
     selectedVersion,
+    selectedMode,
     searchText
   ]);
   const tree = useMemo(
@@ -153,6 +203,18 @@ function SharedDepsExplorer({
     });
     return Array.from(set).sort();
   }, [normalized, selectedPackage]);
+  const modesForSelectedPackage = useMemo(() => {
+    if (!selectedPackage) {
+      return [];
+    }
+    const set = /* @__PURE__ */ new Set();
+    normalized.forEach((v) => {
+      if (v.packageName === selectedPackage && v.treeShakingMode) {
+        set.add(v.treeShakingMode);
+      }
+    });
+    return Array.from(set).sort();
+  }, [normalized, selectedPackage]);
   const focusVersionsForPackage = useMemo(() => {
     if (!focusPackage) {
       return [];
@@ -178,7 +240,7 @@ function SharedDepsExplorer({
   const hasData = normalized.length > 0;
   const columns = [
     {
-      title: "Package / Version",
+      title: t("sharedDeps.table.columns.packageVersion"),
       width: "28%",
       render: (_, item) => /* @__PURE__ */ jsxs("div", { className: styles.cellCol, children: [
         /* @__PURE__ */ jsx("div", { className: styles.packageName, children: item.packageName }),
@@ -189,44 +251,74 @@ function SharedDepsExplorer({
       ] })
     },
     {
-      title: "Provider / Scope",
+      title: t("sharedDeps.table.columns.providerScope"),
       width: "20%",
       render: (_, item) => /* @__PURE__ */ jsxs("div", { className: styles.cellColGap, children: [
-        /* @__PURE__ */ jsxs("span", { className: styles.truncate, title: item.from, children: [
-          "Provider: ",
-          item.from
-        ] }),
-        /* @__PURE__ */ jsxs("span", { className: styles.scopeText, children: [
-          "scope: ",
-          item.scope
-        ] })
+        /* @__PURE__ */ jsx("span", { className: styles.truncate, title: item.from, children: t("sharedDeps.table.providerPrefix", { name: item.from }) }),
+        /* @__PURE__ */ jsx("span", { className: styles.scopeText, children: t("sharedDeps.table.scopePrefix", { scope: item.scope }) })
       ] })
     },
     {
-      title: "Status",
+      title: t("sharedDeps.table.columns.status"),
       width: "22%",
       render: (_, item) => /* @__PURE__ */ jsxs("div", { className: styles.cellColGap, children: [
-        ["loaded", "loading"].includes(item.loadedStatus) ? /* @__PURE__ */ jsx(
-          Tag,
+        ["loaded", "loading", "t-loaded", "t-loading"].includes(
+          item.loadedStatus
+        ) ? /* @__PURE__ */ jsx(
+          HoverTag,
           {
             size: "small",
             className: `${styles.tagContainer} loaded-status-tag`,
-            children: loadedStatusLabel(item.loadedStatus)
+            tooltip: loadedStatusLabelLocal(item.loadedStatus),
+            children: loadedStatusLabelLocal(item.loadedStatus)
+          }
+        ) : null,
+        item.treeShakingMode ? /* @__PURE__ */ jsx(
+          HoverTag,
+          {
+            size: "small",
+            className: styles.tagContainer,
+            tooltip: item.treeShakingMode,
+            children: item.treeShakingMode
           }
         ) : null,
         /* @__PURE__ */ jsxs("div", { className: styles.configTags, children: [
-          item.shareConfig.singleton && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "singleton" }),
-          item.shareConfig.eager && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "eager" }),
-          item.shareConfig.strictVersion && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "strictVersion" }),
-          item.shareConfig.requiredVersion && /* @__PURE__ */ jsxs(Tag, { size: "small", className: styles.scale90, children: [
-            "req: ",
-            item.shareConfig.requiredVersion
-          ] })
+          item.shareConfig.singleton && /* @__PURE__ */ jsx(
+            HoverTag,
+            {
+              size: "small",
+              className: styles.scale90,
+              tooltip: "singleton",
+              children: "singleton"
+            }
+          ),
+          item.shareConfig.eager && /* @__PURE__ */ jsx(HoverTag, { size: "small", className: styles.scale90, tooltip: "eager", children: "eager" }),
+          item.shareConfig.strictVersion && /* @__PURE__ */ jsx(
+            HoverTag,
+            {
+              size: "small",
+              className: styles.scale90,
+              tooltip: "strictVersion",
+              children: "strictVersion"
+            }
+          ),
+          item.shareConfig.requiredVersion && /* @__PURE__ */ jsxs(
+            HoverTag,
+            {
+              size: "small",
+              className: styles.scale90,
+              tooltip: `requiredVersion: ${item.shareConfig.requiredVersion}`,
+              children: [
+                "requiredVersion: ",
+                item.shareConfig.requiredVersion
+              ]
+            }
+          )
         ] })
       ] })
     },
     {
-      title: "Consumers",
+      title: t("sharedDeps.table.columns.consumers"),
       width: "18%",
       render: (_, item) => /* @__PURE__ */ jsx(
         Popover,
@@ -234,86 +326,101 @@ function SharedDepsExplorer({
           trigger: "click",
           position: "right",
           content: /* @__PURE__ */ jsxs("div", { className: styles.popoverContent, children: [
-            /* @__PURE__ */ jsx("div", { className: styles.popoverTitle, children: "Consumer List" }),
-            item.useIn.length === 0 ? /* @__PURE__ */ jsx("p", { className: styles.scopeText, children: "No applications are consuming this shared dependency version." }) : /* @__PURE__ */ jsx("ul", { className: styles.consumerList, children: item.useIn.map((c) => /* @__PURE__ */ jsxs("li", { className: styles.consumerItem, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.popoverTitle, children: t("sharedDeps.consumersPopover.title") }),
+            item.useIn.length === 0 ? /* @__PURE__ */ jsx("p", { className: styles.scopeText, children: t("sharedDeps.consumersPopover.empty") }) : /* @__PURE__ */ jsx("ul", { className: styles.consumerList, children: item.useIn.map((c) => /* @__PURE__ */ jsxs("li", { className: styles.consumerItem, children: [
               /* @__PURE__ */ jsx("span", { className: styles.dot }),
               /* @__PURE__ */ jsx("span", { className: styles.packageName, children: c })
             ] }, c)) })
           ] }),
           children: /* @__PURE__ */ jsx(Button, { size: "mini", type: "secondary", children: /* @__PURE__ */ jsxs("div", { className: styles.btnContent, children: [
             /* @__PURE__ */ jsx(Network, { className: styles.mr1, size: 12 }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              item.useIn.length || 0,
-              " Apps"
-            ] })
+            /* @__PURE__ */ jsx("span", { children: t("sharedDeps.consumersPopover.button", {
+              count: item.useIn.length || 0
+            }) })
           ] }) })
         }
       )
     },
     {
-      title: "Strategy",
+      title: t("sharedDeps.table.columns.strategy"),
       width: "12%",
       render: (_, item) => {
         var _a;
-        return /* @__PURE__ */ jsx(Tag, { size: "small", color: "gray", children: (_a = item.strategy) != null ? _a : "-" });
+        return /* @__PURE__ */ jsx(HoverTag, { size: "small", color: "gray", children: (_a = item.strategy) != null ? _a : t("sharedDeps.table.strategyFallback") });
       }
     }
   ];
   return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxs("section", { className: styles.heroSection, children: [
-      /* @__PURE__ */ jsx("p", { className: styles.heroSubtitle, children: "Module Federation · Shared Dependencies" }),
-      /* @__PURE__ */ jsx("h1", { className: styles.heroTitle, children: "Overview of Shared Dependencies Usage" })
+      /* @__PURE__ */ jsx("p", { className: styles.heroSubtitle, children: t("sharedDeps.hero.subtitle") }),
+      /* @__PURE__ */ jsx("h1", { className: styles.heroTitle, children: t("sharedDeps.hero.title") })
     ] }),
     /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", { className: styles.statsGrid, children: [
       /* @__PURE__ */ jsxs(Card, { className: styles.cardWithPadding, children: [
         /* @__PURE__ */ jsx("div", { className: styles.cardHeader, children: /* @__PURE__ */ jsxs("div", { className: styles.statSpace, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: "Number of Providers" }),
+          /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: t("sharedDeps.stats.providers.title") }),
           /* @__PURE__ */ jsxs("div", { className: styles.statValue, children: [
             /* @__PURE__ */ jsx(Server, { className: styles.icon }),
             /* @__PURE__ */ jsx("span", { children: stats.totalProviders })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx("p", { className: styles.statDescription, children: "Number of applications/build versions exposing shared dependencies." })
+        /* @__PURE__ */ jsx("p", { className: styles.statDescription, children: t("sharedDeps.stats.providers.description") })
       ] }),
       /* @__PURE__ */ jsxs(Card, { className: styles.cardWithPadding, children: [
         /* @__PURE__ */ jsx("div", { className: styles.cardHeader, children: /* @__PURE__ */ jsxs("div", { className: styles.statSpace, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: "Share Scope / Package" }),
+          /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: t("sharedDeps.stats.scopes.title") }),
           /* @__PURE__ */ jsxs("div", { className: styles.statValue, children: [
             /* @__PURE__ */ jsx(Layers, { className: styles.icon }),
             /* @__PURE__ */ jsx("span", { children: stats.totalScopes }),
-            /* @__PURE__ */ jsx("span", { className: styles.statSubtext, children: "scope" })
+            /* @__PURE__ */ jsx("span", { className: styles.statSubtext, children: t("sharedDeps.stats.scopes.badge") })
           ] })
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: styles.cardFooter, children: [
-          /* @__PURE__ */ jsx("span", { className: `${styles.truncate} ${styles.mr2}`, children: "Shared spaces under Scope dimension." }),
+          /* @__PURE__ */ jsx("span", { className: `${styles.truncate} ${styles.mr2}`, children: t("sharedDeps.stats.scopes.description") }),
           /* @__PURE__ */ jsxs("span", { className: styles.badgeGroup, children: [
             /* @__PURE__ */ jsx(Box, { className: styles.iconSmall }),
             /* @__PURE__ */ jsxs("span", { children: [
               stats.totalPackages,
-              " packages"
+              t("sharedDeps.stats.scopes.packagesBadge", {
+                count: stats.totalPackages
+              })
             ] })
           ] })
         ] })
       ] }),
       /* @__PURE__ */ jsxs(Card, { className: styles.cardWithPadding, children: [
         /* @__PURE__ */ jsx("div", { className: styles.cardHeader, children: /* @__PURE__ */ jsxs("div", { className: styles.statSpace, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: "Version Loading & Reuse" }),
+          /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: t("sharedDeps.stats.versions.title") }),
           /* @__PURE__ */ jsxs("div", { className: styles.statValue, children: [
             /* @__PURE__ */ jsx(Package2, { className: styles.icon }),
             /* @__PURE__ */ jsx("span", { children: stats.totalVersions })
           ] })
         ] }) }),
         /* @__PURE__ */ jsx("div", { className: styles.statusTags, children: /* @__PURE__ */ jsxs("div", { className: styles.tagRow, children: [
-          /* @__PURE__ */ jsx(Tag, { className: `${styles.tagContent} loaded-status-tag`, children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
-            /* @__PURE__ */ jsx(Network, { className: `${styles.iconSmall} ${styles.mr1}` }),
-            /* @__PURE__ */ jsx("span", { children: "Loaded" }),
-            /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.loadedCount })
-          ] }) }),
-          /* @__PURE__ */ jsx(Tag, { className: `${styles.tagContent} reused-status-tag`, children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
-            /* @__PURE__ */ jsx(Repeat, { className: `${styles.iconSmall} ${styles.mr1}` }),
-            /* @__PURE__ */ jsx("span", { children: "Reused" }),
-            /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.reusedCount })
-          ] }) })
+          /* @__PURE__ */ jsx(
+            HoverTag,
+            {
+              className: `${styles.tagContent} loaded-status-tag`,
+              tooltip: `Loaded: ${stats.loadedCount}`,
+              children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
+                /* @__PURE__ */ jsx(Network, { className: `${styles.iconSmall} ${styles.mr1}` }),
+                /* @__PURE__ */ jsx("span", { children: t("sharedDeps.stats.versions.loadedLabel") }),
+                /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.loadedCount })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HoverTag,
+            {
+              className: `${styles.tagContent} reused-status-tag`,
+              tooltip: `Reused: ${stats.reusedCount}`,
+              children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
+                /* @__PURE__ */ jsx(Repeat, { className: `${styles.iconSmall} ${styles.mr1}` }),
+                /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { children: t("sharedDeps.stats.versions.reusedLabel") }) }),
+                /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.reusedCount })
+              ] })
+            }
+          )
         ] }) })
       ] })
     ] }) }),
@@ -323,14 +430,12 @@ function SharedDepsExplorer({
         className: styles.card,
         title: /* @__PURE__ */ jsxs("div", { className: styles.cardTitle, children: [
           /* @__PURE__ */ jsx(Box, { className: styles.iconMedium }),
-          "Who provides the current shared: '",
-          focusPackage,
-          "'?"
+          t("sharedDeps.focusPanel.title", { package: focusPackage })
         ] }),
         children: [
           /* @__PURE__ */ jsxs("div", { className: styles.controlsGrid, children: [
             /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
-              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Package Name" }),
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: t("sharedDeps.focusPanel.packageLabel") }),
               /* @__PURE__ */ jsx(
                 Select,
                 {
@@ -340,24 +445,24 @@ function SharedDepsExplorer({
                     setFocusPackage(value);
                     setFocusVersion("");
                   },
-                  placeholder: "Select Shared Dependency Package Name",
+                  placeholder: t("sharedDeps.focusPanel.packagePlaceholder"),
                   className: styles.fullWidth,
                   children: filterOptions.packages.map((name) => /* @__PURE__ */ jsx(Select.Option, { value: name, children: name }, name))
                 }
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
-              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Version (Optional, inferred if empty)" }),
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: t("sharedDeps.focusPanel.versionLabel") }),
               /* @__PURE__ */ jsxs(
                 Select,
                 {
                   showSearch: true,
                   value: focusVersion || ALL_VALUE,
                   onChange: (value) => setFocusVersion(value === ALL_VALUE ? "" : value),
-                  placeholder: "All Versions",
+                  placeholder: t("sharedDeps.focusPanel.versionPlaceholder"),
                   className: styles.fullWidth,
                   children: [
-                    /* @__PURE__ */ jsx(Select.Option, { value: ALL_VALUE, children: "All Versions" }),
+                    /* @__PURE__ */ jsx(Select.Option, { value: ALL_VALUE, children: t("sharedDeps.focusPanel.versionAllOption") }),
                     focusVersionsForPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
                   ]
                 }
@@ -369,7 +474,7 @@ function SharedDepsExplorer({
             {
               focusResult,
               hasData,
-              loadedStatusLabel
+              loadedStatusLabel: loadedStatusLabelLocal
             }
           ) })
         ]
@@ -381,18 +486,18 @@ function SharedDepsExplorer({
         className: styles.card,
         title: /* @__PURE__ */ jsxs("div", { className: styles.cardTitle, children: [
           /* @__PURE__ */ jsx(Search, { className: styles.iconMedium }),
-          "Filter / Search"
+          t("sharedDeps.filters.cardTitle")
         ] }),
         children: [
           /* @__PURE__ */ jsxs("div", { className: styles.filterGrid, children: [
             /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
-              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Provider" }),
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: t("sharedDeps.filters.providerLabel") }),
               /* @__PURE__ */ jsx(
                 Select,
                 {
                   value: selectedProvider || void 0,
                   onChange: (value) => setSelectedProvider(value === ALL_VALUE ? "" : value),
-                  placeholder: "All Providers",
+                  placeholder: t("sharedDeps.filters.providerPlaceholder"),
                   className: styles.fullWidth,
                   allowClear: true,
                   children: filterOptions.providers.map((p) => /* @__PURE__ */ jsx(Select.Option, { value: p, children: p }, p))
@@ -400,13 +505,13 @@ function SharedDepsExplorer({
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
-              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Package Name" }),
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: t("sharedDeps.filters.packageLabel") }),
               /* @__PURE__ */ jsx(
                 Select,
                 {
                   value: selectedPackage || void 0,
                   onChange: (value) => setSelectedPackage(value === ALL_VALUE ? "" : value),
-                  placeholder: "All Packages",
+                  placeholder: t("sharedDeps.filters.packagePlaceholder"),
                   className: styles.fullWidth,
                   allowClear: true,
                   children: filterOptions.packages.map((name) => /* @__PURE__ */ jsx(Select.Option, { value: name, children: name }, name))
@@ -414,47 +519,74 @@ function SharedDepsExplorer({
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
-              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Version" }),
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: t("sharedDeps.filters.versionLabel") }),
               /* @__PURE__ */ jsx(
                 Select,
                 {
                   value: selectedVersion || void 0,
                   onChange: (value) => setSelectedVersion(value === ALL_VALUE ? "" : value),
-                  placeholder: "All Versions",
+                  placeholder: t("sharedDeps.filters.versionPlaceholder"),
                   className: styles.fullWidth,
                   disabled: !selectedPackage,
                   allowClear: true,
                   children: versionsForSelectedPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
                 }
               )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles.inputLabel,
+                  style: { display: "flex", alignItems: "center", gap: 4 },
+                  children: [
+                    "Mode",
+                    /* @__PURE__ */ jsx(Tooltip, { content: "Shared Tree Shaking Mode, options: server-calc | runtime-infer", children: /* @__PURE__ */ jsx(
+                      Info,
+                      {
+                        size: 14,
+                        style: { cursor: "help", color: "#86909c" }
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: selectedMode || void 0,
+                  onChange: (value) => setSelectedMode(value === ALL_VALUE ? "" : value),
+                  placeholder: "All Modes",
+                  className: styles.fullWidth,
+                  disabled: !selectedPackage || modesForSelectedPackage.length === 0,
+                  allowClear: true,
+                  children: modesForSelectedPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
+                }
+              )
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: styles.searchGrid, children: [
             /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
-              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Package Name Keyword (Fuzzy Match)" }),
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: t("sharedDeps.filters.keywordLabel") }),
               /* @__PURE__ */ jsx(
                 Input,
                 {
                   prefix: /* @__PURE__ */ jsx(Search, { className: styles.iconMedium }),
                   className: styles.searchInput,
-                  placeholder: "e.g., react / axios",
+                  placeholder: t("sharedDeps.filters.keywordPlaceholder"),
                   value: searchText,
                   onChange: (val) => setSearchText(val)
                 }
               )
             ] }),
             /* @__PURE__ */ jsx("div", { className: styles.matchCount, children: /* @__PURE__ */ jsxs("span", { children: [
-              "Currently Matched Versions:",
+              t("sharedDeps.filters.matchCountLabel"),
               /* @__PURE__ */ jsx("span", { className: styles.matchValue, children: filteredVersions.length })
             ] }) })
           ] }),
-          !hasData && loadingState === "loading" && /* @__PURE__ */ jsx("div", { className: styles.loadingText, children: "Parsing shared dependency data..." }),
-          loadingState === "error" && /* @__PURE__ */ jsxs("div", { className: styles.errorText, children: [
-            "Failed to load shared dependency data:",
-            " ",
-            errorMessage != null ? errorMessage : "Unknown Error"
-          ] }),
-          hasData && Object.keys(tree).length === 0 && /* @__PURE__ */ jsx("div", { className: styles.noMatchText, children: "No matching shared dependency versions under current filter conditions, try relaxing the filter conditions." }),
+          !hasData && loadingState === "loading" && /* @__PURE__ */ jsx("div", { className: styles.loadingText, children: t("sharedDeps.messages.loading") }),
+          loadingState === "error" && /* @__PURE__ */ jsx("div", { className: styles.errorText, children: errorMessage ? t("sharedDeps.messages.error", { message: errorMessage }) : t("sharedDeps.messages.errorUnknown") }),
+          hasData && Object.keys(tree).length === 0 && /* @__PURE__ */ jsx("div", { className: styles.noMatchText, children: t("sharedDeps.messages.noMatch") }),
           hasData && Object.keys(tree).length > 0 && /* @__PURE__ */ jsx("div", { className: styles.treeContainer, children: /* @__PURE__ */ jsx("div", { className: styles.collapseWrapper, children: /* @__PURE__ */ jsx(Collapse, { children: Object.entries(tree).map(([provider, scopes]) => /* @__PURE__ */ jsx(
             Collapse.Item,
             {
@@ -464,20 +596,18 @@ function SharedDepsExplorer({
                   /* @__PURE__ */ jsx(Server, { className: styles.iconMedium }),
                   /* @__PURE__ */ jsx("span", { children: provider })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: styles.providerMeta, children: /* @__PURE__ */ jsxs("span", { children: [
-                  "Scope Count: ",
-                  Object.keys(scopes).length
-                ] }) })
+                /* @__PURE__ */ jsx("div", { className: styles.providerMeta, children: /* @__PURE__ */ jsx("span", { children: t("sharedDeps.filters.scopeCount", {
+                  count: Object.keys(scopes).length
+                }) }) })
               ] }),
               children: /* @__PURE__ */ jsx("div", { className: styles.scopeList, children: Object.entries(scopes).map(([scopeName, packages]) => {
                 const list = Object.values(packages).flat();
                 return /* @__PURE__ */ jsxs("div", { className: styles.scopeItem, children: [
                   /* @__PURE__ */ jsxs("div", { className: styles.scopeHeader, children: [
                     /* @__PURE__ */ jsx(Layers, { className: styles.iconSmall }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      "Scope: ",
-                      scopeName
-                    ] })
+                    /* @__PURE__ */ jsx("span", { children: t("sharedDeps.filters.scopePrefix", {
+                      name: scopeName
+                    }) })
                   ] }),
                   /* @__PURE__ */ jsx("div", { className: styles.tableContainer, children: /* @__PURE__ */ jsx(
                     Table,

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

@@ -227,7 +227,7 @@
 .resultBox_967de {
   border-radius: 6px;
   border: 1px dashed #e4e4e7;
-  background-color: #f9fafb;
+  background-color: var(--color-bg-1, #f9fafb) !important;
   padding: 8px 12px;
   font-size: 12px;
 }
@@ -366,6 +366,16 @@
   border: 1px solid #e4e4e7;
   background-color: rgba(249, 250, 251, 0.4);
 }
+.tableContainer_967de .arco-table-hover .arco-table-tr:not(.arco-table-empty-row):hover .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) {
+  background-color: var(--color-fill-2, #f2f3f5) !important;
+}
+.arco-theme-dark .tableContainer_967de .arco-table-hover
+        .arco-table-tr:not(.arco-table-empty-row):hover
+        .arco-table-td:not(.arco-table-col-fixed-left):not(
+          .arco-table-col-fixed-right
+        ) {
+  background-color: var(--color-bg-4) !important;
+}
 
 .cellCol_967de {
   display: flex;
@@ -376,7 +386,7 @@
   word-break: break-all;
   font-family: monospace;
   font-size: 11px;
-  color: #27272a;
+  color: var(--color-neutral-10, #27272a) !important;
 }
 
 .version_967de {