@rsdoctor/components 1.0.0-beta.0 → 1.0.0-beta.1

package/dist/components/Alerts/bundle-alert.js

@@ -7,6 +7,7 @@ import { AlertCollapse } from "./collapse";
 import { CommonList } from "./list";
 import styles from "./bundle-alert.module";
 import { useState } from "react";
+import { CrossChunksAlertCollapse } from "./collapse-cross-chunks";
 const BundleAlert = ({
   title,
   dataSource,
@@ -21,6 +22,11 @@ const BundleAlert = ({
     },
     {
       key: "E1002",
+      label: "Cross Chunks Package",
+      data: []
+    },
+    {
+      key: "E1005",
       label: "Default Import Check",
       data: []
     },
@@ -75,7 +81,7 @@ const BundleAlert = ({
         children = /* @__PURE__ */ jsx(AlertCollapse, { data: td.data, extraData });
         break;
       case "E1002":
-        children = /* @__PURE__ */ jsx(CommonList, { data: td.data });
+        children = /* @__PURE__ */ jsx(CrossChunksAlertCollapse, { data: td.data, extraData });
         break;
       case "E1003":
         children = /* @__PURE__ */ jsx(CommonList, { data: td.data });
@@ -84,6 +90,9 @@ const BundleAlert = ({
         description = /* @__PURE__ */ jsx("span", { children: "No ECMA Version Check Rules were found. Please refer to 「https://rsdoctor.dev/guide/usage/rule-config」." });
         children = /* @__PURE__ */ jsx(ECMAVersionCheck, { data: td.data });
         break;
+      case "E1005":
+        children = /* @__PURE__ */ jsx(CommonList, { data: td.data });
+        break;
       default:
         children = null;
         break;

package/dist/components/Alerts/collapse-cross-chunks.d.ts

@@ -0,0 +1,6 @@
+import type { Rule } from '@rsdoctor/types';
+import type { AlertProps } from '../Alert/types';
+export declare const CrossChunksAlertCollapse: (props: {
+    data: Array<Rule.RuleStoreDataItem>;
+    extraData: Omit<AlertProps, "data">;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Alerts/collapse-cross-chunks.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Icon from "@ant-design/icons";
+import { Collapse, Space, Tag, Typography } from "antd";
+import Overview from "../Overall/overview";
+import styles from "./collapse.module";
+import TotalSizeSvg from "../../common/svg/total-size.js";
+const { Text } = Typography;
+const { innerWidth } = window;
+const LabelComponent = (props) => {
+  const { title, description, extra } = props;
+  return /* @__PURE__ */ jsxs("div", { className: styles.label, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.labelContent, children: [
+      /* @__PURE__ */ jsx("div", { children: title }),
+      /* @__PURE__ */ jsx("div", { children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: extra })
+  ] });
+};
+const CrossChunksAlertCollapse = (props) => {
+  const { data } = props;
+  const items = data.map((d) => {
+    const { package: dupPackage, chunks } = d;
+    const ChildComponent = () => {
+      return chunks.map(({ chunks: chunks2, module }) => {
+        return /* @__PURE__ */ jsx("div", { className: styles.collapseContainer, children: /* @__PURE__ */ jsx(
+          Overview,
+          {
+            style: { backgroundColor: "#fff" },
+            title: /* @__PURE__ */ jsxs(Space, { children: [
+              /* @__PURE__ */ jsx(Icon, { style: { fontSize: "18px" }, component: TotalSizeSvg }),
+              /* @__PURE__ */ jsxs(Text, { style: { width: innerWidth > 1500 ? 900 : 700 }, children: [
+                "Module:",
+                " ",
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: "rgba(28, 31, 35, 0.6)",
+                      fontWeight: 300
+                    },
+                    children: module.path
+                  }
+                )
+              ] })
+            ] }),
+            description: /* @__PURE__ */ jsx("div", { className: styles.collapseChild, children: chunks2.map((chunk) => /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.attribute, children: "Chunk" }),
+              /* @__PURE__ */ jsx("div", { className: styles.iconContainer, children: /* @__PURE__ */ jsx("span", { className: styles.data, children: chunk.name }) })
+            ] })) })
+          }
+        ) });
+      });
+    };
+    return {
+      key: d.code,
+      label: /* @__PURE__ */ jsx(
+        LabelComponent,
+        {
+          title: /* @__PURE__ */ jsx(Tag, { style: { backgroundColor: "#EAEDF1", borderRadius: "2px" }, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: styles.pkgName,
+              children: `${dupPackage.name}@${dupPackage.version}`
+            }
+          ) }),
+          description: `has duplicates bundled into multiple chunks.`
+        }
+      ),
+      children: /* @__PURE__ */ jsx(ChildComponent, {})
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    Collapse,
+    {
+      style: { width: "100%" },
+      defaultActiveKey: ["E1005"],
+      items
+    }
+  );
+};
+export {
+  CrossChunksAlertCollapse
+};

package/dist/components/Loader/Analysis/files.js

@@ -1,11 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { get, sumBy } from "lodash-es";
+import { get } from "lodash-es";
 import {
   Tag,
   Card,
   Col,
-  Descriptions,
   Divider,
   Drawer,
   Row,
@@ -89,13 +88,7 @@ const LoaderFiles = (props) => {
                     width: innerWidth < 1500 ? innerWidth * 0.3 : innerWidth * 0.5
                   },
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: styles.keywords, children: /* @__PURE__ */ jsx(
-                      Keyword,
-                      {
-                        text: basename.replace(/\[.*?\]/g, ""),
-                        keyword: props.filename
-                      }
-                    ) }),
+                    /* @__PURE__ */ jsx("div", { className: styles.keywords, children: /* @__PURE__ */ jsx(Keyword, { text: basename.replace(/\[.*?\]/g, ""), keyword: "" }) }),
                     /* @__PURE__ */ jsx("div", { className: styles.dividerDiv, children: /* @__PURE__ */ jsx(Divider, { className: styles.divider, dashed: true }) })
                   ]
                 }
@@ -171,7 +164,7 @@ const LoaderFiles = (props) => {
         );
       },
       dirTitle(_dir, defaultTitle) {
-        return /* @__PURE__ */ jsx(Keyword, { text: defaultTitle, keyword: props.filename });
+        return /* @__PURE__ */ jsx(Keyword, { text: defaultTitle, keyword: "" });
       }
     });
   }, [filteredFiles]);
@@ -311,21 +304,7 @@ const LoaderFiles = (props) => {
                         sortDirections: ["descend", "ascend"]
                       }
                     ],
-                    dataSource: tableData,
-                    footer: () => /* @__PURE__ */ jsxs(
-                      Descriptions,
-                      {
-                        title: "Total",
-                        bordered: true,
-                        layout: "vertical",
-                        size: "small",
-                        children: [
-                          /* @__PURE__ */ jsx(Descriptions.Item, { label: "loaders", children: tableData.length }),
-                          /* @__PURE__ */ jsx(Descriptions.Item, { label: "files", children: sumBy(tableData, (e) => e.files) }),
-                          /* @__PURE__ */ jsx(Descriptions.Item, { label: "duration", children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatCosts(sumBy(tableData, (e) => e.costs)) }) })
-                        ]
-                      }
-                    )
+                    dataSource: tableData
                   }
                 )
               }

package/dist/components/Loader/Analysis/style_module.css

@@ -23,7 +23,7 @@
 }
 
 .textBox_85b73 {
-  max-width: 220px;
+  max-width: 320px;
   color: rgba(0, 0, 0, 0.85);
   height: 22px;
   border: 1px #d9d9d9 solid;

package/dist/pages/BundleSize/components/asset.js

@@ -330,7 +330,7 @@ const AssetDetail = ({
         );
         return /* @__PURE__ */ jsxs("div", { className: styles["bundle-tree"], children: [
           /* @__PURE__ */ jsxs("div", { className: styles.box, children: [
-            /* @__PURE__ */ jsx("div", { className: styles.keywords, children: /* @__PURE__ */ jsx(Keyword, { ellipsis: true, text: basename, keyword: moduleKeyword }) }),
+            /* @__PURE__ */ jsx("div", { className: styles.keywords, children: /* @__PURE__ */ jsx(Keyword, { ellipsis: true, text: basename, keyword: "" }) }),
             /* @__PURE__ */ jsx("div", { className: styles.dividerDiv, children: /* @__PURE__ */ jsx(Divider, { className: styles.divider, dashed: true }) })
           ] }),
           /* @__PURE__ */ jsxs(Space, { children: [
@@ -444,7 +444,7 @@ const AssetDetail = ({
         {
           className: styles.bundle,
           title: `Modules of "${asset.path}"`,
-          bodyStyle: { overflow: "scroll", height },
+          bodyStyle: { minHeight: height },
           size: "small",
           children: [
             includeModules.length ? /* @__PURE__ */ jsxs(Row, { children: [
@@ -486,7 +486,8 @@ const AssetDetail = ({
                   defaultExpandedKeys: expandedModulesKeys?.length ? expandedModulesKeys : fileStructures.length === 1 ? [fileStructures[0].key] : [],
                   treeData: fileStructures,
                   rootStyle: {
-                    minHeight: "800px",
+                    maxHeight: "500px",
+                    overflow: "auto",
                     border: "1px solid rgba(235, 237, 241)",
                     padding: "14px 20px"
                   }

package/dist/pages/BundleSize/components/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   CodepenCircleOutlined,
   DeploymentUnitOutlined,
@@ -21,6 +21,7 @@ import {
 } from "antd";
 import { debounce, includes, sumBy } from "lodash-es";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { SearchModal } from "./search-modal";
 import { ServerAPIProvider, withServerAPI } from "../../../components/Manifest";
 import { Badge as Bdg } from "../../../components/Badge";
 import { FileTree } from "../../../components/FileTree";
@@ -34,7 +35,7 @@ import { AssetDetail } from "./asset";
 import "./index.css";
 import styles from "./index.module";
 const { Option } = Select;
-const cardBodyHeight = 410;
+const cardBodyHeight = 600;
 const largeCardBodyHeight = 800;
 const tabList = [
   {
@@ -177,14 +178,7 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints }) => {
               setAssetPath(path);
             },
             children: [
-              /* @__PURE__ */ jsx(
-                Keyword,
-                {
-                  text: basename,
-                  keyword: inputAssetName,
-                  className: styles.fileText
-                }
-              ),
+              /* @__PURE__ */ jsx(Keyword, { text: basename, keyword: "", className: styles.fileText }),
               /* @__PURE__ */ jsxs(Space, { size: "small", className: styles.assetsTag, children: [
                 /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
                 /* @__PURE__ */ jsx(Typography.Text, { style: { color: "#4FD233" }, children: formatSize(size) }),
@@ -211,7 +205,7 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints }) => {
     setAssetName(value);
     setDefaultExpandAll(false);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "bundle-size-card", children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "bundle-size-card", children: [
     /* @__PURE__ */ jsx(BundleCards, { cwd, errors, summary }),
     /* @__PURE__ */ jsxs(
       Card,
@@ -226,28 +220,35 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints }) => {
         },
         children: [
           /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Typography.Text, { code: true, children: "From: webpack-bundle-analyzer" }) }),
-          /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetTileReportHtml, body: {}, children: (data) => {
-            if (data && graphType === "tile") {
-              return /* @__PURE__ */ jsx(
-                "iframe",
-                {
-                  srcDoc: data,
-                  width: "100%",
-                  height: largeCardBodyHeight,
-                  style: { border: "none" }
+          /* @__PURE__ */ jsx(
+            ServerAPIProvider,
+            {
+              api: SDK.ServerAPI.API.GetTileReportHtml,
+              body: {},
+              children: (data) => {
+                if (data && graphType === "tile") {
+                  return /* @__PURE__ */ jsx(
+                    "iframe",
+                    {
+                      srcDoc: data,
+                      width: "100%",
+                      height: largeCardBodyHeight,
+                      style: { border: "none" }
+                    }
+                  );
                 }
-              );
-            }
-            return /* @__PURE__ */ jsx(
-              Empty,
-              {
-                description: /* @__PURE__ */ jsxs("div", { children: [
-                  "Tile graph is disabled,",
-                  /* @__PURE__ */ jsx("a", { href: "https://rsdoctor.dev/config/options/options#generatetilegraph", children: "see the documentation to learn how to enable." })
-                ] })
+                return /* @__PURE__ */ jsx(
+                  Empty,
+                  {
+                    description: /* @__PURE__ */ jsxs("div", { children: [
+                      "Tile graph is disabled,",
+                      /* @__PURE__ */ jsx("a", { href: "https://rsdoctor.dev/config/options/options#generatetilegraph", children: "see the documentation to learn how to enable." })
+                    ] })
+                  }
+                );
               }
-            );
-          } })
+            }
+          )
         ]
       }
     ),
@@ -261,89 +262,114 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints }) => {
         tabProps: {
           size: "middle"
         },
-        children: /* @__PURE__ */ jsxs(Row, { align: "middle", gutter: [Size.BasePadding, Size.BasePadding], children: [
-          entryPoints && entryPoints.length ? /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
-            Select,
-            {
-              mode: "multiple",
-              value: selectedEntryPoints.map((e) => e.name),
-              style: { minWidth: 230, width: "auto", maxWidth: 300 },
-              placeholder: "filter assets by entry point",
-              onChange: (name) => {
-                setEntryPoints(
-                  name.map((e) => entryPoints.find((ep) => ep.name === e)).filter(Boolean)
-                );
-              },
-              allowClear: true,
-              onClear: () => {
-                setEntryPoints([]);
-              },
-              children: entryPoints.map((e) => {
-                return /* @__PURE__ */ jsx(Select.Option, { value: e.name, children: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(
-                  Bdg,
-                  {
-                    label: e.name,
-                    value: formatSize(e.size),
-                    tooltip: e.name
-                  }
-                ) }) }, e.name);
-              })
-            }
-          ) }) : null,
-          /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
-            KeywordInput,
-            {
-              placeholder: "search asset by keyword",
-              onChange: onSearch
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Col, { span: 7, children: /* @__PURE__ */ jsx(
-            InputNumber,
-            {
-              min: 0,
-              style: { width: "95%" },
-              addonBefore: /* @__PURE__ */ jsxs(Space, { children: [
-                /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 14, color: "inherit" }, children: "Asset Size" }),
-                /* @__PURE__ */ jsx(
-                  Tooltip,
-                  {
-                    title: t(
-                      "filter the output assets which size is greater than the input value"
-                    ),
-                    style: { marginLeft: 3 },
-                    children: /* @__PURE__ */ jsx(InfoCircleOutlined, { style: { color: "rgba(0,0,0,.45)" } })
-                  }
-                )
-              ] }),
-              onChange: (value) => onChangeAsset(Number(value)),
-              addonAfter: selectAfter("chunk")
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Col, { span: 7, children: /* @__PURE__ */ jsx(
-            InputNumber,
-            {
-              min: 0,
-              style: { width: "95%" },
-              addonBefore: /* @__PURE__ */ jsxs(Space, { children: [
-                /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 14, color: "inherit" }, children: "Module Size" }),
-                /* @__PURE__ */ jsx(
-                  Tooltip,
-                  {
-                    title: t(
-                      "filter the modules which size is greater than the input value"
-                    ),
-                    style: { marginLeft: 3 },
-                    children: /* @__PURE__ */ jsx(InfoCircleOutlined, { style: { color: "rgba(0,0,0,.45)" } })
-                  }
-                )
-              ] }),
-              onChange: (value) => {
-                onChangeModule(Number(value));
-              },
-              addonAfter: selectAfter("module")
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Col, { span: 24, children: filteredAssets.length ? /* @__PURE__ */ jsxs(Row, { gutter: Size.BasePadding, children: [
+        children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+          /* @__PURE__ */ jsxs(Row, { align: "middle", gutter: [Size.BasePadding, Size.BasePadding], children: [
+            entryPoints && entryPoints.length ? /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                mode: "multiple",
+                value: selectedEntryPoints.map((e) => e.name),
+                style: { minWidth: 230, width: "auto", maxWidth: 300 },
+                placeholder: "filter assets by entry point",
+                onChange: (name) => {
+                  setEntryPoints(
+                    name.map((e) => entryPoints.find((ep) => ep.name === e)).filter(Boolean)
+                  );
+                },
+                allowClear: true,
+                onClear: () => {
+                  setEntryPoints([]);
+                },
+                children: entryPoints.map((e) => {
+                  return /* @__PURE__ */ jsx(Select.Option, { value: e.name, children: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(
+                    Bdg,
+                    {
+                      label: e.name,
+                      value: formatSize(e.size),
+                      tooltip: e.name
+                    }
+                  ) }) }, e.name);
+                })
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
+              KeywordInput,
+              {
+                placeholder: "search asset by keyword",
+                onChange: onSearch
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Col, { span: 6, children: /* @__PURE__ */ jsx(
+              InputNumber,
+              {
+                min: 0,
+                style: { width: "95%" },
+                addonBefore: /* @__PURE__ */ jsxs(Space, { children: [
+                  /* @__PURE__ */ jsx(
+                    Typography.Text,
+                    {
+                      style: { fontSize: 14, color: "inherit" },
+                      children: "Asset Size"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      title: t(
+                        "filter the output assets which size is greater than the input value"
+                      ),
+                      style: { marginLeft: 3 },
+                      children: /* @__PURE__ */ jsx(
+                        InfoCircleOutlined,
+                        {
+                          style: { color: "rgba(0,0,0,.45)" }
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                onChange: (value) => onChangeAsset(Number(value)),
+                addonAfter: selectAfter("chunk")
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Col, { span: 6, children: /* @__PURE__ */ jsx(
+              InputNumber,
+              {
+                min: 0,
+                style: { width: "95%" },
+                addonBefore: /* @__PURE__ */ jsxs(Space, { children: [
+                  /* @__PURE__ */ jsx(
+                    Typography.Text,
+                    {
+                      style: { fontSize: 14, color: "inherit" },
+                      children: "Module Size"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      title: t(
+                        "filter the modules which size is greater than the input value"
+                      ),
+                      style: { marginLeft: 3 },
+                      children: /* @__PURE__ */ jsx(
+                        InfoCircleOutlined,
+                        {
+                          style: { color: "rgba(0,0,0,.45)" }
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                onChange: (value) => {
+                  onChangeModule(Number(value));
+                },
+                addonAfter: selectAfter("module")
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(SearchModal, {}) }),
+          /* @__PURE__ */ jsx(Row, { align: "middle", gutter: [Size.BasePadding, Size.BasePadding], children: /* @__PURE__ */ jsx(Col, { span: 24, children: filteredAssets.length ? /* @__PURE__ */ jsxs(Row, { gutter: Size.BasePadding, children: [
             /* @__PURE__ */ jsx(Col, { span: 6, children: /* @__PURE__ */ jsx(
               Card,
               {
@@ -426,11 +452,11 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints }) => {
                 )
               }
             ) })
-          ] }) : /* @__PURE__ */ jsx(Empty, {}) })
+          ] }) : /* @__PURE__ */ jsx(Empty, {}) }) })
         ] })
       }
     )
-  ] });
+  ] }) });
 };
 const WebpackModulesOverall = withServerAPI({
   api: SDK.ServerAPI.API.GetProjectInfo,

package/dist/pages/BundleSize/components/index.module.js

@@ -1,5 +1,5 @@
 import "./index_module.css";
-var index_module_default = { "assets": "assets_0b14c", "assetBox": "assetBox_0b14c", "fileText": "fileText_0b14c", "bundle-tree": "bundle-tree_0b14c", "box": "box_0b14c", "keyword": "keyword_0b14c", "divider": "divider_0b14c", "dividerDiv": "dividerDiv_0b14c", "assetsTag": "assetsTag_0b14c", "bundle": "bundle_0b14c", "bundle-size-card": "bundle-size-card_0b14c", "ant-tabs-tab": "ant-tabs-tab_0b14c" };
+var index_module_default = { "assets": "assets_0b14c", "assetBox": "assetBox_0b14c", "fileText": "fileText_0b14c", "bundle-tree": "bundle-tree_0b14c", "box": "box_0b14c", "keyword": "keyword_0b14c", "divider": "divider_0b14c", "dividerDiv": "dividerDiv_0b14c", "assetsTag": "assetsTag_0b14c", "bundle": "bundle_0b14c", "bundle-size-card": "bundle-size-card_0b14c", "ant-tabs-tab": "ant-tabs-tab_0b14c", "modal": "modal_0b14c", "search-btn": "search-btn_0b14c", "search-modal-list": "search-modal-list_0b14c" };
 export {
   index_module_default as default
 };

package/dist/pages/BundleSize/components/index_module.css

@@ -79,4 +79,33 @@
 
 .bundle-size-card_0b14c .ant-tabs-tab_0b14c {
   margin-right: 20px;
+}
+
+.modal_0b14c .ant-input-affix-wrapper {
+  padding: 4px 5px;
+  width: 490px;
+}
+
+.search-btn_0b14c {
+  color: white;
+}
+.search-btn_0b14c > span {
+  position: relative;
+}
+.search-btn_0b14c::before {
+  content: "";
+  background: linear-gradient(135deg, #6253e1, #04befe);
+  position: absolute;
+  inset: -1px;
+  opacity: 1;
+  transition: all 0.3s;
+  border-radius: inherit;
+}
+.search-btn_0b14c:hover::before {
+  opacity: 0;
+}
+
+.search-modal-list_0b14c .ant-spin-container {
+  overflow: auto;
+  max-height: 30rem;
 }

package/dist/pages/BundleSize/components/search-modal.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SearchModal: React.FC;

package/dist/pages/BundleSize/components/search-modal.js

@@ -0,0 +1,141 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import {
+  Button,
+  Modal,
+  Input,
+  Tabs,
+  List,
+  Skeleton,
+  Typography,
+  Empty
+} from "antd";
+import { ServerAPIProvider } from "../../../components";
+import { SDK } from "@rsdoctor/types";
+import styles from "./index.module";
+const { Search } = Input;
+const SearchModal = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [searchModule, setSearchModule] = useState("");
+  const [searchChunk, setSearchChunk] = useState("");
+  const onSearch = useCallback(
+    (...args) => {
+      const [value, _event] = args;
+      setSearchModule(value);
+    },
+    []
+  );
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { className: styles["search-btn"], color: "cyan", onClick: showModal, children: "Search Module" }),
+    /* @__PURE__ */ jsx(
+      ServerAPIProvider,
+      {
+        api: SDK.ServerAPI.API.GetSearchModules,
+        body: { moduleName: String(searchModule) },
+        children: (assetsChunksList) => {
+          const defaultChunkId = Object.keys(assetsChunksList)[0];
+          return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+            Modal,
+            {
+              className: styles.modal,
+              title: "Search Modules",
+              onOk: handleOk,
+              onCancel: handleCancel,
+              open: isModalOpen,
+              width: "65rem",
+              footer: "",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Search,
+                  {
+                    placeholder: "input search module name",
+                    allowClear: true,
+                    onSearch,
+                    style: { width: 500 }
+                  }
+                ),
+                defaultChunkId ? /* @__PURE__ */ jsx(
+                  Tabs,
+                  {
+                    defaultActiveKey: defaultChunkId,
+                    tabPosition: "top",
+                    onChange: (value) => setSearchChunk(value),
+                    items: Object.keys(assetsChunksList).map((chunk, _i) => {
+                      const id = chunk;
+                      return {
+                        label: assetsChunksList[chunk],
+                        key: id,
+                        children: ModulesModal(
+                          searchModule,
+                          searchChunk || defaultChunkId
+                        )
+                      };
+                    })
+                  }
+                ) : /* @__PURE__ */ jsx(Empty, { description: "No modules found." })
+              ]
+            }
+          ) });
+        }
+      }
+    )
+  ] });
+};
+const ModulesModal = (searchModule, chunk) => {
+  return /* @__PURE__ */ jsx(
+    ServerAPIProvider,
+    {
+      api: SDK.ServerAPI.API.GetSearchModuleInChunk,
+      body: { moduleName: String(searchModule), chunk },
+      children: (modules) => /* @__PURE__ */ jsx(Fragment, { children: modules?.length !== 0 ? /* @__PURE__ */ jsx(
+        List,
+        {
+          className: styles["search-modal-list"],
+          loading: !modules.length,
+          itemLayout: "horizontal",
+          pagination: { position: "bottom", align: "center" },
+          dataSource: modules,
+          renderItem: (item) => {
+            const itemPathArr = item.relativePath.split(searchModule);
+            return /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(Skeleton, { avatar: true, title: false, loading: !item.path, active: true, children: /* @__PURE__ */ jsx(
+              List.Item.Meta,
+              {
+                description: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Typography.Text, { code: true, children: "Module:" }),
+                  itemPathArr.map((cur, index) => {
+                    if (index < itemPathArr.length - 1) {
+                      return /* @__PURE__ */ jsxs(Typography.Text, { style: { fontWeight: 200 }, children: [
+                        cur,
+                        /* @__PURE__ */ jsx(
+                          Typography.Text,
+                          {
+                            strong: true,
+                            style: { fontWeight: 600 },
+                            children: searchModule
+                          }
+                        )
+                      ] });
+                    }
+                    return /* @__PURE__ */ jsx(Typography.Text, { style: { fontWeight: 200 }, children: cur });
+                  })
+                ] })
+              }
+            ) }) });
+          }
+        }
+      ) : /* @__PURE__ */ jsx(Empty, {}) })
+    }
+  );
+};
+export {
+  SearchModal
+};

package/dist/pages/Overall/index.js

@@ -14,7 +14,7 @@ import style from "./index.module";
 const Component = ({ project }) => {
   const { summary, configs, root: cwd, envinfo, errors } = project;
   return /* @__PURE__ */ jsx("div", { className: style.overall, children: /* @__PURE__ */ jsxs(Flex, { style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { flex: 3, marginRight: "16px" }, children: /* @__PURE__ */ jsxs(ResponsiveLayout, { children: [
+    /* @__PURE__ */ jsx("div", { style: { flex: 3, marginRight: "16px", maxWidth: "75%" }, children: /* @__PURE__ */ jsxs(ResponsiveLayout, { children: [
       /* @__PURE__ */ jsx(
         ProjectOverall,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/components",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "main": "./dist/index.js",
   "license": "MIT",
   "module": "dist/index.js",
@@ -40,9 +40,9 @@
     }
   },
   "devDependencies": {
-    "@ant-design/icons": "5.6.0",
-    "@rsbuild/plugin-check-syntax": "1.2.1",
-    "@monaco-editor/react": "4.6.0",
+    "@ant-design/icons": "5.6.1",
+    "@rsbuild/plugin-check-syntax": "1.2.2",
+    "@monaco-editor/react": "4.7.0",
     "@types/lodash-es": "4.17.12",
     "@types/node": "^16",
     "@types/path-browserify": "1.0.3",
@@ -71,9 +71,9 @@
     "socket.io-client": "4.6.1",
     "typescript": "^5.2.2",
     "url-parse": "1.5.10",
-    "@rsdoctor/graph": "1.0.0-beta.0",
-    "@rsdoctor/types": "1.0.0-beta.0",
-    "@rsdoctor/utils": "1.0.0-beta.0"
+    "@rsdoctor/graph": "1.0.0-beta.1",
+    "@rsdoctor/types": "1.0.0-beta.1",
+    "@rsdoctor/utils": "1.0.0-beta.1"
   },
   "publishConfig": {
     "access": "public",