@module-federation/devtools 0.0.0-next-20250926024003 → 0.0.0-perf-devtools-20260106124142

package/dist/es/App.js

@@ -1,14 +1,102 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { Layout, Empty } from "@arco-design/web-react";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { Empty, Tag, Button, Tooltip } from "@arco-design/web-react";
 import "./init";
 import ProxyLayout from "./component/Layout";
-import { getGlobalModuleInfo } from "./utils";
+import Dependency from "./component/DependencyGraph";
+import ModuleInfo from "./component/ModuleInfo";
+import SharedDepsExplorer from "./component/SharedDepsExplorer";
+import {
+  getGlobalModuleInfo,
+  refreshModuleInfo,
+  separateType,
+  syncActiveTab
+} from "./utils";
+import { MESSAGE_ACTIVE_TAB_CHANGED } from "./utils/chrome/messages";
 import "@arco-design/web-react/dist/css/arco.css";
 import styles from "./App.module";
-const { Content } = Layout;
+const cloneModuleInfo = (info) => {
+  try {
+    return JSON.parse(JSON.stringify(info || {}));
+  } catch (error) {
+    console.warn("[MF Devtools] cloneModuleInfo failed", error);
+    return info || {};
+  }
+};
+const normalizeShareValue = (target, seen = /* @__PURE__ */ new WeakSet()) => {
+  if (typeof target === "function") {
+    const name = target.name ? `: ${target.name}` : "";
+    return `[Function${name}]`;
+  }
+  if (!target || typeof target !== "object") {
+    return target;
+  }
+  if (seen.has(target)) {
+    return "[Circular]";
+  }
+  seen.add(target);
+  if (target instanceof Map) {
+    const mapped = {};
+    target.forEach((value, key) => {
+      mapped[String(key)] = normalizeShareValue(value, seen);
+    });
+    return mapped;
+  }
+  if (target instanceof Set) {
+    const setItems = [];
+    target.forEach((value) => {
+      setItems.push(normalizeShareValue(value, seen));
+    });
+    return setItems;
+  }
+  if (Array.isArray(target)) {
+    return target.map((item) => normalizeShareValue(item, seen));
+  }
+  return Object.keys(target).reduce((memo, key) => {
+    memo[key] = normalizeShareValue(target[key], seen);
+    return memo;
+  }, {});
+};
+const buildShareSnapshot = (share) => {
+  const normalize = (value) => {
+    try {
+      return normalizeShareValue(value);
+    } catch (error) {
+      console.warn("[MF Devtools] normalize share snapshot failed", error);
+      return normalizeShareValue(value);
+    }
+  };
+  const scopes = normalize(share || {});
+  return scopes;
+};
+const NAV_ITEMS = [
+  { key: "moduleInfo", label: "Module info" },
+  { key: "proxy", label: "Proxy" },
+  { key: "dependency", label: "Dependency graph" },
+  { key: "share", label: "Shared" },
+  { key: "performance", label: "Performance" }
+];
 const App = (props) => {
-  var _a;
   const {
     versionList,
     setVersionList,
@@ -18,23 +106,241 @@ const App = (props) => {
     customValueValidate,
     headerSlot
   } = props;
-  const [module, setModule] = useState(((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) || {});
-  useEffect(() => {
-    getGlobalModuleInfo(setModule);
+  const [moduleInfo, setModuleInfo] = useState(
+    () => {
+      var _a;
+      return cloneModuleInfo(((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) || {});
+    }
+  );
+  const [shareInfo, setShareInfo] = useState(
+    () => {
+      var _a;
+      return buildShareSnapshot((_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__);
+    }
+  );
+  const [inspectedTab, setInspectedTab] = useState(
+    window.targetTab
+  );
+  const [activePanel, setActivePanel] = useState("proxy");
+  const [selectedModuleId, setSelectedModuleId] = useState(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const panelSyncReadyRef = useRef(false);
+  const applyModuleUpdate = useCallback((info) => {
+    var _a;
+    setModuleInfo(cloneModuleInfo(info));
+    const shareSnapshot = buildShareSnapshot(
+      (_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__
+    );
+    setShareInfo(shareSnapshot);
+    panelSyncReadyRef.current = true;
   }, []);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Layout, { className: styles.layout, children: /* @__PURE__ */ jsx(Content, { className: styles.content, children: Object.keys(module).length > 0 || process.env.NODE_ENV === "development" ? /* @__PURE__ */ jsx(
-    ProxyLayout,
-    {
-      moduleInfo: module,
-      versionList,
-      setVersionList,
-      getVersion,
-      handleSnapshot,
-      handleProxyAddress,
-      customValueValidate,
-      headerSlot
-    }
-  ) : /* @__PURE__ */ jsx(Empty, { description: "No ModuleInfo Detected" }) }) }) });
+  const { producer, consumers } = useMemo(
+    () => separateType(moduleInfo),
+    [moduleInfo]
+  );
+  const moduleKeys = useMemo(() => Object.keys(moduleInfo || {}), [moduleInfo]);
+  const moduleCount = moduleKeys.length;
+  const consumerCount = useMemo(
+    () => Object.keys(consumers || {}).length,
+    [consumers]
+  );
+  const hasModule = moduleCount > 0 || process.env.NODE_ENV === "development";
+  useEffect(() => {
+    if (!moduleKeys.length) {
+      setSelectedModuleId(null);
+      return;
+    }
+    if (!selectedModuleId || !moduleKeys.includes(selectedModuleId)) {
+      setSelectedModuleId(moduleKeys[0]);
+    }
+  }, [moduleKeys, selectedModuleId]);
+  useEffect(() => {
+    const bootstrap = () => __async(void 0, null, function* () {
+      const tab = yield syncActiveTab();
+      setInspectedTab(tab || void 0);
+      const detach = yield getGlobalModuleInfo(
+        (info) => applyModuleUpdate(info)
+      );
+      panelSyncReadyRef.current = true;
+      return detach;
+    });
+    const cleanupPromise = bootstrap();
+    return () => {
+      cleanupPromise.then((cleanup) => cleanup == null ? void 0 : cleanup());
+    };
+  }, [applyModuleUpdate]);
+  useEffect(() => {
+    const updateActiveTab = (tabId) => __async(void 0, null, function* () {
+      var _a, _b;
+      const tab = yield syncActiveTab(tabId);
+      setInspectedTab(tab || void 0);
+      if ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) {
+        applyModuleUpdate(cloneModuleInfo((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
+      }
+      yield refreshModuleInfo();
+    });
+    const onMessage = (message, _sender, _sendResponse) => {
+      if ((message == null ? void 0 : message.type) === MESSAGE_ACTIVE_TAB_CHANGED) {
+        updateActiveTab(message.tabId);
+      }
+    };
+    chrome.runtime.onMessage.addListener(onMessage);
+    const onActivated = (activeInfo) => {
+      updateActiveTab(activeInfo.tabId);
+    };
+    chrome.tabs.onActivated.addListener(onActivated);
+    return () => {
+      chrome.runtime.onMessage.removeListener(onMessage);
+      chrome.tabs.onActivated.removeListener(onActivated);
+    };
+  }, [applyModuleUpdate]);
+  const handleRefresh = () => __async(void 0, null, function* () {
+    var _a, _b;
+    if (refreshing) {
+      return;
+    }
+    setRefreshing(true);
+    try {
+      yield refreshModuleInfo();
+      if ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) {
+        applyModuleUpdate(cloneModuleInfo((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
+      }
+    } finally {
+      setRefreshing(false);
+    }
+  });
+  const resetModuleInfo = useCallback(() => {
+    var _a;
+    const origin = ((_a = window.__FEDERATION__) == null ? void 0 : _a.originModuleInfo) || {};
+    applyModuleUpdate(cloneModuleInfo(origin));
+  }, [applyModuleUpdate]);
+  useEffect(() => {
+    const shouldAutoSync = activePanel === "proxy" || activePanel === "dependency" || activePanel === "share";
+    if (!shouldAutoSync || !panelSyncReadyRef.current) {
+      return;
+    }
+    let cancelled = false;
+    const syncPanelData = () => __async(void 0, null, function* () {
+      var _a, _b;
+      yield refreshModuleInfo();
+      if (cancelled) {
+        return;
+      }
+      if ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) {
+        applyModuleUpdate(cloneModuleInfo((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
+      }
+    });
+    void syncPanelData();
+    return () => {
+      cancelled = true;
+    };
+  }, [activePanel, applyModuleUpdate]);
+  const renderContent = () => {
+    var _a;
+    switch (activePanel) {
+      case "moduleInfo":
+        return /* @__PURE__ */ jsx(
+          ModuleInfo,
+          {
+            moduleInfo,
+            selectedModuleId,
+            onSelectModule: (id) => setSelectedModuleId(id)
+          }
+        );
+      case "proxy":
+        return /* @__PURE__ */ jsx(
+          ProxyLayout,
+          {
+            moduleInfo,
+            versionList,
+            setVersionList,
+            getVersion,
+            handleSnapshot,
+            handleProxyAddress,
+            customValueValidate,
+            headerSlot,
+            onModuleInfoChange: applyModuleUpdate,
+            onModuleInfoReset: resetModuleInfo,
+            tabId: inspectedTab == null ? void 0 : inspectedTab.id
+          }
+        );
+      case "dependency":
+        return hasModule ? /* @__PURE__ */ jsx(Dependency, { snapshot: moduleInfo }) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx(
+          Empty,
+          {
+            description: "No ModuleInfo Detected",
+            className: styles.empty
+          }
+        ) });
+      case "share":
+        return /* @__PURE__ */ jsx(
+          SharedDepsExplorer,
+          {
+            shareData: JSON.parse(
+              JSON.stringify((_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__)
+            )
+          }
+        );
+      case "performance":
+        return /* @__PURE__ */ jsx("div", { className: styles.placeholder, children: "WIP..." });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.shell} ${styles.overrideArco}`, children: [
+    /* @__PURE__ */ jsx("aside", { className: styles.sidebar, children: NAV_ITEMS.map((item) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `${styles.tabItem} ${activePanel === item.key ? styles.activeTab : ""}`,
+        onClick: () => setActivePanel(item.key),
+        children: item.label
+      },
+      item.key
+    )) }),
+    /* @__PURE__ */ jsxs("section", { className: styles.panel, children: [
+      /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.headerTop, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.branding, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.logo, children: "Module Federation" }),
+            /* @__PURE__ */ jsx("span", { className: styles.subtitle, children: "DevTools Companion" })
+          ] }),
+          /* @__PURE__ */ jsx(Tooltip, { content: "重新同步当前页面的 Federation 信息", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "mini",
+              type: "primary",
+              loading: refreshing,
+              onClick: handleRefresh,
+              className: styles.refresh,
+              children: "Refresh"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.meta, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.scope, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.scopeLabel, children: "Focus Tab" }),
+            /* @__PURE__ */ jsx(Tag, { className: "common-tag", children: (inspectedTab == null ? void 0 : inspectedTab.title) || "Waiting for target" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.stats, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.statBlock, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.statValue, children: moduleCount }),
+              /* @__PURE__ */ jsx("span", { className: styles.statLabel, children: "Modules" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.statBlock, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.statValue, children: producer.length }),
+              /* @__PURE__ */ jsx("span", { className: styles.statLabel, children: "Remotes" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.statBlock, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.statValue, children: consumerCount }),
+              /* @__PURE__ */ jsx("span", { className: styles.statLabel, children: "Consumers" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.body, children: /* @__PURE__ */ jsx("div", { className: styles.content, children: renderContent() }) })
+    ] })
+  ] });
 };
 var App_default = App;
 export {

package/dist/es/App.module.js

@@ -1,5 +1,5 @@
 import "./App_module.css";
-var App_module_default = { "layout": "layout_ae2ee", "content": "content_ae2ee" };
+var App_module_default = { "shell": "shell_ae2ee", "sidebar": "sidebar_ae2ee", "tabItem": "tabItem_ae2ee", "activeTab": "activeTab_ae2ee", "panel": "panel_ae2ee", "header": "header_ae2ee", "headerTop": "headerTop_ae2ee", "branding": "branding_ae2ee", "refresh": "refresh_ae2ee", "logo": "logo_ae2ee", "subtitle": "subtitle_ae2ee", "meta": "meta_ae2ee", "scope": "scope_ae2ee", "scopeLabel": "scopeLabel_ae2ee", "stats": "stats_ae2ee", "statBlock": "statBlock_ae2ee", "statValue": "statValue_ae2ee", "statLabel": "statLabel_ae2ee", "body": "body_ae2ee", "content": "content_ae2ee", "emptyState": "emptyState_ae2ee", "empty": "empty_ae2ee", "placeholder": "placeholder_ae2ee", "overrideArco": "overrideArco_ae2ee" };
 export {
   App_module_default as default
 };

package/dist/es/App_module.css

@@ -3,17 +3,303 @@
 }
 .arco-form-layout-horizontal {
   flex: 1 1;
-  margin: 0 1vw 0 0;
+  margin: 0;
 }
 .arco-form-item-wrapper {
   width: 100%;
   flex: 1 1;
 }
+.arco-empty {
+  color: #4b5563;
+}
+.arco-select, .arco-input {
+  background: transparent;
+}
+.arco-tag-color-arcoblue {
+  background: rgba(34, 197, 94, 0.18);
+  border: 1px solid rgba(34, 197, 94, 0.35);
+  color: #4b5563;
+}
 
-.layout_ae2ee {
+.shell_ae2ee {
   width: 100%;
-  height: 100vh;
+  min-height: 100vh;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  gap: clamp(18px, 3vw, 36px);
+  padding: 28px clamp(16px, 4vw, 48px);
+  box-sizing: border-box;
+  background: radial-gradient(circle at 10% 20%, rgba(229, 231, 235, 0.8) 0%, rgba(243, 244, 246, 0.9) 55%), linear-gradient(135deg, #ffffff 0%, #f9fafb 40%, #f3f4f6 100%);
+}
+
+.sidebar_ae2ee {
+  width: clamp(160px, 18vw, 220px);
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: clamp(18px, 2.5vw, 24px) clamp(14px, 2vw, 18px);
+  border-radius: 22px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 0, 0, 0.05) inset;
+  box-sizing: border-box;
+}
+
+.tabItem_ae2ee {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: rgba(249, 250, 251, 0.8);
+  color: rgba(55, 65, 81, 0.9);
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.tabItem_ae2ee:hover {
+  border-color: rgba(37, 49, 48, 0.45);
+  color: #1e293b;
+}
+
+.activeTab_ae2ee {
+  border-color: rgba(99, 102, 241, 0.65);
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
+  color: #1e293b;
+  box-shadow: 0 12px 28px rgba(30, 64, 175, 0.25);
+}
+
+.panel_ae2ee {
+  flex: 1 1;
+  min-width: 0;
+  width: 100%;
+  max-width: 1120px;
+  min-height: calc(100vh - 56px);
+  background: rgba(255, 255, 255, 0.98);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.06), 0 2px 0 rgba(0, 0, 0, 0.04) inset;
+  border-radius: 22px;
+  padding: clamp(20px, 3vw, 32px);
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  box-sizing: border-box;
+  color: #1f2937;
+}
+
+.header_ae2ee {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.headerTop_ae2ee {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.branding_ae2ee {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.refresh_ae2ee .arco-btn-primary {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.7));
+  border-color: rgba(34, 197, 94, 0.65);
+}
+.refresh_ae2ee .arco-btn-primary:hover {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(22, 163, 74, 0.85));
+}
+
+.logo_ae2ee {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #1e293b;
+}
+
+.subtitle_ae2ee {
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(75, 85, 99, 0.8);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.meta_ae2ee {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.scope_ae2ee {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1 1 160px;
+}
+
+.scopeLabel_ae2ee {
+  font-size: 12px;
+  color: rgba(75, 85, 99, 0.85);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
-.layout_ae2ee .content_ae2ee {
-  margin: 0 0.5vw 0 2vw;
+
+.stats_ae2ee {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.statBlock_ae2ee {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 80px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: linear-gradient(140deg, rgba(243, 244, 246, 0.8) 0%, rgba(229, 231, 235, 0.6) 100%);
+  border: 1px solid rgba(203, 213, 225, 0.4);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+}
+
+.statValue_ae2ee {
+  font-size: 22px;
+  font-weight: 600;
+  color: #1e293b;
+  line-height: 1.1;
+}
+
+.statLabel_ae2ee {
+  font-size: 11px;
+  color: rgba(75, 85, 99, 0.88);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.body_ae2ee {
+  flex: 1 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.content_ae2ee {
+  flex: 1 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+  gap: 16px;
+}
+
+@media (max-width: 980px) {
+  .shell_ae2ee {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .sidebar_ae2ee {
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    overflow-x: auto;
+    padding: 16px 12px;
+    gap: 10px;
+  }
+  .tabItem_ae2ee {
+    flex: 1 0 auto;
+    justify-content: center;
+    padding: 10px 14px;
+  }
+  .panel_ae2ee {
+    max-width: none;
+    min-height: auto;
+  }
+}
+@media (max-width: 640px) {
+  .panel_ae2ee {
+    padding: 20px;
+  }
+  .meta_ae2ee {
+    gap: 12px;
+  }
+  .stats_ae2ee {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+.emptyState_ae2ee {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 18px;
+  border: 1px dashed rgba(203, 213, 225, 0.4);
+  background: rgba(255, 255, 255, 0.8);
+  padding: 32px;
+}
+
+.empty_ae2ee .arco-empty-image > svg path {
+  fill: rgba(75, 85, 99, 0.5);
+}
+
+.placeholder_ae2ee {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 18px;
+  border: 1px dashed rgba(203, 213, 225, 0.4);
+  background: rgba(255, 255, 255, 0.8);
+  color: rgba(75, 85, 99, 0.75);
+  font-size: 14px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.overrideArco_ae2ee .arco-input-inner-wrapper,
+.overrideArco_ae2ee .arco-select-view {
+  background-color: #fff !important;
+  border-color: rgba(228, 228, 231, 0.5) !important;
+}
+.overrideArco_ae2ee .arco-input-inner-wrapper:hover,
+.overrideArco_ae2ee .arco-select-view:hover {
+  background-color: #fff !important;
+  border-color: rgba(228, 228, 231, 0.5) !important;
+}
+.overrideArco_ae2ee .arco-input-inner-wrapper:focus-within,
+.overrideArco_ae2ee .arco-select-view-focus {
+  background-color: #fff !important;
+  border-color: rgba(228, 228, 231, 0.5) !important;
+}
+.overrideArco_ae2ee .arco-collapse-item .arco-collapse-item-icon-hover {
+  top: 25% !important;
+}
+.overrideArco_ae2ee .arco-tabs-content {
+  padding-top: 0px !important;
+}
+
+.arco-table-th {
+  background-color: rgb(250 250 250/var(--tw-bg-opacity)) !important;
+  border-bottom-color: rgb(228 228 231/var(--tw-border-opacity)) !important;
+}
+
+.arco-table-td {
+  border-bottom-color: rgba(228, 228, 231, 0.5) !important;
 }