@rsdoctor/components 1.6.0 → 1.6.2-beta.0

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

@@ -92,8 +92,10 @@ const BundleAlert = ({ title, dataSource, extraData })=>{
         const LabelComponent = ()=>/*#__PURE__*/ jsx(Overview, {
                 style: {
                     backgroundColor: 'transparent',
-                    paddingLeft: 0,
-                    paddingRight: 0,
+                    border: 'none',
+                    borderRadius: 0,
+                    minHeight: 'auto',
+                    padding: '8px 0',
                     width: '100%'
                 },
                 title: /*#__PURE__*/ jsx("span", {

package/dist/components/Alerts/bundle-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Alerts/bundle-alert.mjs","sources":["../../../src/components/Alerts/bundle-alert.tsx"],"sourcesContent":["import { Tabs, Empty, Tag } from 'antd';\nimport { useEffect, useState } from 'react';\n\nimport { Card } from '../Card';\nimport { ECMAVersionCheck } from '../Alert/ecma-version-check';\nimport { Overview } from '../Overall/overview';\nimport { AlertCollapse } from './collapse';\nimport { CommonList } from './list';\nimport { ViewMode } from '../../constants';\nimport { useThemeToken } from '../../utils';\n\nimport type { AlertProps } from '../Alert/types';\nimport type { CSSProperties } from 'react';\nimport type { Rule } from '@rsdoctor/types';\n\nimport styles from './bundle-alert.module.scss';\nimport utilStyles from './index.module.scss';\nimport { CrossChunksAlertCollapse } from './collapse-cross-chunks';\nimport { ModuleMixedChunksAlertCollapse } from './collapse-module-mixed-chunks';\nimport { SideEffectsOnlyImportsAlertCollapse } from './collapse-side-effects-only-imports';\nimport { CjsRequireAlertCollapse } from './collapse-cjs-require';\nimport { EsmResolvedToCjsAlertCollapse } from './collapse-esm-cjs';\n\ninterface BundleAlertProps {\n  title: string;\n  cwd: string;\n  dataSource: Rule.RuleStoreDataItem[];\n  extraData: Omit<AlertProps, 'data'>;\n  viewMode: ViewMode;\n  setViewMode(mode: ViewMode): void;\n  extraCom?: React.JSX.Element | undefined;\n}\n\nconst BUILTIN_RULE_TABS = [\n  {\n    key: 'E1001',\n    label: 'Duplicate Packages',\n  },\n  {\n    key: 'E1002',\n    label: 'Cross Chunks Package',\n  },\n  {\n    key: 'E1003',\n    label: 'Loader Performance Optimization',\n  },\n  {\n    key: 'E1004',\n    label: 'ECMA Version Check',\n  },\n  {\n    key: 'E1005',\n    label: 'Default Import Check',\n  },\n  {\n    key: 'E1006',\n    label: 'Module Mixed Chunks',\n  },\n  {\n    key: 'E1007',\n    label: 'Tree Shaking Side Effects Only',\n  },\n  {\n    key: 'E1008',\n    label: 'CJS Require Cannot Tree-Shake',\n  },\n  {\n    key: 'E1009',\n    label: 'ESM Import Resolved to CJS',\n  },\n];\n\nexport const BundleAlert: React.FC<BundleAlertProps> = ({\n  title,\n  dataSource,\n  extraData,\n}) => {\n  const themeToken = useThemeToken();\n  const tabData: Array<{\n    key: string;\n    label: string;\n    data: Array<Rule.RuleStoreDataItem>;\n    tag: string;\n  }> = BUILTIN_RULE_TABS.map((tab) => ({ ...tab, data: [], tag: tab.key }));\n  const customRulesData: Array<Rule.RuleStoreDataItem> = [];\n\n  dataSource.forEach((data) => {\n    const target = tabData.find((td) => td.key === data.code);\n    if (target) {\n      target.data.push(data);\n    } else {\n      customRulesData.push(data);\n    }\n  });\n\n  if (customRulesData.length) {\n    tabData.push({\n      key: 'CUSTOM_RULES',\n      label: 'Custom Rules',\n      data: customRulesData,\n      tag: 'Custom',\n    });\n  }\n\n  tabData.sort(\n    (a, b) => (b.data.length > 0 ? 1 : 0) - (a.data.length > 0 ? 1 : 0),\n  );\n\n  const defaultActiveKey = tabData[0]?.key ?? 'E1001';\n  const [activeKey, setActiveKey] = useState(defaultActiveKey);\n  const activeTab = tabData.find((tab) => tab.key === activeKey);\n  const resolvedActiveKey =\n    activeTab && (activeTab.data.length > 0 || dataSource.length === 0)\n      ? activeKey\n      : defaultActiveKey;\n\n  useEffect(() => {\n    setActiveKey(defaultActiveKey);\n  }, [defaultActiveKey]);\n\n  const tabItems = tabData.map((td) => {\n    const tagStyle =\n      resolvedActiveKey === td.key\n        ? ({\n            border: `1px solid ${themeToken.colorPrimaryBorder}`,\n            backgroundColor: themeToken.colorPrimaryBg,\n          } as CSSProperties)\n        : {};\n\n    const tagTextStyle =\n      resolvedActiveKey === td.key\n        ? {\n            color: themeToken.colorPrimary,\n          }\n        : {};\n\n    const LabelComponent = () => (\n      <Overview\n        style={{\n          backgroundColor: 'transparent',\n          paddingLeft: 0,\n          paddingRight: 0,\n          width: '100%',\n        }}\n        title={<span className={styles.labelTitle}>{td.label}</span>}\n        description={\n          <div className={styles.labelDescription}>\n            <span>{td.data.length}</span>\n            <Tag\n              style={{ fontFamily: 'Menlo', borderRadius: '2px', ...tagStyle }}\n            >\n              <span style={{ ...tagTextStyle }}>{td.tag}</span>\n            </Tag>\n          </div>\n        }\n      />\n    );\n\n    let children, description;\n    switch (td.key) {\n      case 'E1001':\n        children = <AlertCollapse data={td.data} extraData={extraData} />;\n        break;\n      case 'E1002':\n        children = (\n          <CrossChunksAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'E1003':\n        children = <CommonList data={td.data} />;\n        break;\n      case 'E1004':\n        description = (\n          <span>\n            No ECMA Version Check Rules were found. Please refer to\n            「https://rsdoctor.rs/guide/usage/rule-config」.\n          </span>\n        );\n        children = <ECMAVersionCheck data={td.data} />;\n        break;\n      case 'E1005':\n        children = <CommonList data={td.data} />;\n        break;\n      case 'E1006':\n        children = (\n          <ModuleMixedChunksAlertCollapse\n            data={td.data}\n            extraData={extraData}\n          />\n        );\n        break;\n      case 'E1007':\n        children = (\n          <SideEffectsOnlyImportsAlertCollapse\n            data={td.data}\n            extraData={extraData}\n          />\n        );\n        break;\n      case 'E1008':\n        children = (\n          <CjsRequireAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'E1009':\n        children = (\n          <EsmResolvedToCjsAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'CUSTOM_RULES':\n        children = <CommonList data={td.data} showCode />;\n        break;\n      default:\n        children = null;\n        break;\n    }\n\n    if (!td.data.length) {\n      children = (\n        <Empty description={description} image={Empty.PRESENTED_IMAGE_SIMPLE} />\n      );\n    }\n\n    return {\n      key: td.key,\n      label: <LabelComponent />,\n      children: (\n        <Card\n          className={styles.card}\n          type=\"inner\"\n          title={\n            <>\n              <Tag\n                className={utilStyles.tag}\n                style={{\n                  fontFamily: 'Menlo',\n                  fontWeight: '700',\n                  fontSize: '13px',\n                }}\n              >\n                {td.tag}\n              </Tag>\n              <span>{td.label}</span>\n            </>\n          }\n        >\n          {children}\n        </Card>\n      ),\n    };\n  });\n\n  return (\n    <Card style={{ width: '100%', borderRadius: '12px' }}>\n      <div className={styles.container}>\n        <div className={styles.title}>{title}</div>\n        {!dataSource.length ? (\n          <div\n            style={{\n              minHeight: '480px',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}\n          >\n            <Empty\n              description={'No Bundle Alerts Data'}\n              image={Empty.PRESENTED_IMAGE_SIMPLE}\n            />\n          </div>\n        ) : (\n          <Tabs\n            onChange={setActiveKey}\n            tabBarGutter={10}\n            type=\"card\"\n            activeKey={resolvedActiveKey}\n            items={tabItems}\n          />\n        )}\n      </div>\n    </Card>\n  );\n};\n"],"names":["BUILTIN_RULE_TABS","BundleAlert","title","dataSource","extraData","themeToken","useThemeToken","tabData","tab","customRulesData","data","target","td","a","b","defaultActiveKey","activeKey","setActiveKey","useState","activeTab","resolvedActiveKey","useEffect","tabItems","tagStyle","tagTextStyle","LabelComponent","Overview","styles","Tag","children","description","AlertCollapse","CrossChunksAlertCollapse","CommonList","ECMAVersionCheck","ModuleMixedChunksAlertCollapse","SideEffectsOnlyImportsAlertCollapse","CjsRequireAlertCollapse","EsmResolvedToCjsAlertCollapse","Empty","Card","utilStyles","Tabs"],"mappings":";;;;;;;;;;;;;;;;AAiCA,MAAMA,oBAAoB;IACxB;QACE,KAAK;QACL,OAAO;IACT;IACA;QACE,KAAK;QACL,OAAO;IACT;IACA;QACE,KAAK;QACL,OAAO;IACT;IACA;QACE,KAAK;QACL,OAAO;IACT;IACA;QACE,KAAK;QACL,OAAO;IACT;IACA;QACE,KAAK;QACL,OAAO;IACT;IACA;QACE,KAAK;QACL,OAAO;IACT;IACA;QACE,KAAK;QACL,OAAO;IACT;IACA;QACE,KAAK;QACL,OAAO;IACT;CACD;AAEM,MAAMC,cAA0C,CAAC,EACtDC,KAAK,EACLC,UAAU,EACVC,SAAS,EACV;IACC,MAAMC,aAAaC;IACnB,MAAMC,UAKDP,kBAAkB,GAAG,CAAC,CAACQ,MAAS;YAAE,GAAGA,GAAG;YAAE,MAAM,EAAE;YAAE,KAAKA,IAAI,GAAG;QAAC;IACtE,MAAMC,kBAAiD,EAAE;IAEzDN,WAAW,OAAO,CAAC,CAACO;QAClB,MAAMC,SAASJ,QAAQ,IAAI,CAAC,CAACK,KAAOA,GAAG,GAAG,KAAKF,KAAK,IAAI;QACxD,IAAIC,QACFA,OAAO,IAAI,CAAC,IAAI,CAACD;aAEjBD,gBAAgB,IAAI,CAACC;IAEzB;IAEA,IAAID,gBAAgB,MAAM,EACxBF,QAAQ,IAAI,CAAC;QACX,KAAK;QACL,OAAO;QACP,MAAME;QACN,KAAK;IACP;IAGFF,QAAQ,IAAI,CACV,CAACM,GAAGC,IAAOA,AAAAA,CAAAA,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,KAAMD,CAAAA,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI;IAGnE,MAAME,mBAAmBR,OAAO,CAAC,EAAE,EAAE,OAAO;IAC5C,MAAM,CAACS,WAAWC,aAAa,GAAGC,SAASH;IAC3C,MAAMI,YAAYZ,QAAQ,IAAI,CAAC,CAACC,MAAQA,IAAI,GAAG,KAAKQ;IACpD,MAAMI,oBACJD,aAAcA,CAAAA,UAAU,IAAI,CAAC,MAAM,GAAG,KAAKhB,AAAsB,MAAtBA,WAAW,MAAM,AAAK,IAC7Da,YACAD;IAENM,UAAU;QACRJ,aAAaF;IACf,GAAG;QAACA;KAAiB;IAErB,MAAMO,WAAWf,QAAQ,GAAG,CAAC,CAACK;QAC5B,MAAMW,WACJH,sBAAsBR,GAAG,GAAG,GACvB;YACC,QAAQ,CAAC,UAAU,EAAEP,WAAW,kBAAkB,EAAE;YACpD,iBAAiBA,WAAW,cAAc;QAC5C,IACA,CAAC;QAEP,MAAMmB,eACJJ,sBAAsBR,GAAG,GAAG,GACxB;YACE,OAAOP,WAAW,YAAY;QAChC,IACA,CAAC;QAEP,MAAMoB,iBAAiB,kBACrB,IAACC,UAAQA;gBACP,OAAO;oBACL,iBAAiB;oBACjB,aAAa;oBACb,cAAc;oBACd,OAAO;gBACT;gBACA,qBAAO,IAAC;oBAAK,WAAWC,oBAAAA,UAAiB;8BAAGf,GAAG,KAAK;;gBACpD,2BACE,KAAC;oBAAI,WAAWe,oBAAAA,gBAAuB;;sCACrC,IAAC;sCAAMf,GAAG,IAAI,CAAC,MAAM;;sCACrB,IAACgB,KAAGA;4BACF,OAAO;gCAAE,YAAY;gCAAS,cAAc;gCAAO,GAAGL,QAAQ;4BAAC;sCAE/D,kBAAC;gCAAK,OAAO;oCAAE,GAAGC,YAAY;gCAAC;0CAAIZ,GAAG,GAAG;;;;;;QAOnD,IAAIiB,UAAUC;QACd,OAAQlB,GAAG,GAAG;YACZ,KAAK;gBACHiB,WAAW,WAAXA,GAAW,IAACE,eAAaA;oBAAC,MAAMnB,GAAG,IAAI;oBAAE,WAAWR;;gBACpD;YACF,KAAK;gBACHyB,WAAW,WAAXA,GACE,IAACG,0BAAwBA;oBAAC,MAAMpB,GAAG,IAAI;oBAAE,WAAWR;;gBAEtD;YACF,KAAK;gBACHyB,WAAW,WAAXA,GAAW,IAACI,YAAUA;oBAAC,MAAMrB,GAAG,IAAI;;gBACpC;YACF,KAAK;gBACHkB,cAAc,WAAdA,GACE,IAAC;8BAAK;;gBAKRD,WAAW,WAAXA,GAAW,IAACK,kBAAgBA;oBAAC,MAAMtB,GAAG,IAAI;;gBAC1C;YACF,KAAK;gBACHiB,WAAW,WAAXA,GAAW,IAACI,YAAUA;oBAAC,MAAMrB,GAAG,IAAI;;gBACpC;YACF,KAAK;gBACHiB,WAAW,WAAXA,GACE,IAACM,gCAA8BA;oBAC7B,MAAMvB,GAAG,IAAI;oBACb,WAAWR;;gBAGf;YACF,KAAK;gBACHyB,WAAW,WAAXA,GACE,IAACO,qCAAmCA;oBAClC,MAAMxB,GAAG,IAAI;oBACb,WAAWR;;gBAGf;YACF,KAAK;gBACHyB,WAAW,WAAXA,GACE,IAACQ,yBAAuBA;oBAAC,MAAMzB,GAAG,IAAI;oBAAE,WAAWR;;gBAErD;YACF,KAAK;gBACHyB,WAAW,WAAXA,GACE,IAACS,+BAA6BA;oBAAC,MAAM1B,GAAG,IAAI;oBAAE,WAAWR;;gBAE3D;YACF,KAAK;gBACHyB,WAAW,WAAXA,GAAW,IAACI,YAAUA;oBAAC,MAAMrB,GAAG,IAAI;oBAAE,UAAQ;;gBAC9C;YACF;gBACEiB,WAAW;gBACX;QACJ;QAEA,IAAI,CAACjB,GAAG,IAAI,CAAC,MAAM,EACjBiB,WAAW,WAAXA,GACE,IAACU,OAAKA;YAAC,aAAaT;YAAa,OAAOS,MAAM,sBAAsB;;QAIxE,OAAO;YACL,KAAK3B,GAAG,GAAG;YACX,OAAO,WAAP,GAAO,IAACa,gBAAAA,CAAAA;YACR,UAAU,WAAV,GACE,IAACe,MAAIA;gBACH,WAAWb,oBAAAA,IAAW;gBACtB,MAAK;gBACL,qBACE;;sCACE,IAACC,KAAGA;4BACF,WAAWa,aAAAA,GAAc;4BACzB,OAAO;gCACL,YAAY;gCACZ,YAAY;gCACZ,UAAU;4BACZ;sCAEC7B,GAAG,GAAG;;sCAET,IAAC;sCAAMA,GAAG,KAAK;;;;0BAIlBiB;;QAGP;IACF;IAEA,OAAO,WAAP,GACE,IAACW,MAAIA;QAAC,OAAO;YAAE,OAAO;YAAQ,cAAc;QAAO;kBACjD,mBAAC;YAAI,WAAWb,oBAAAA,SAAgB;;8BAC9B,IAAC;oBAAI,WAAWA,oBAAAA,KAAY;8BAAGzB;;gBAC7BC,WAAW,MAAM,G,cAejB,IAACuC,MAAIA;oBACH,UAAUzB;oBACV,cAAc;oBACd,MAAK;oBACL,WAAWG;oBACX,OAAOE;qBApBW,WAAH,GACjB,IAAC;oBACC,OAAO;wBACL,WAAW;wBACX,SAAS;wBACT,gBAAgB;wBAChB,YAAY;oBACd;8BAEA,kBAACiB,OAAKA;wBACJ,aAAa;wBACb,OAAOA,MAAM,sBAAsB;;;;;;AAejD"}
+{"version":3,"file":"components/Alerts/bundle-alert.mjs","sources":["../../../src/components/Alerts/bundle-alert.tsx"],"sourcesContent":["import { Tabs, Empty, Tag } from 'antd';\nimport { useEffect, useState } from 'react';\n\nimport { Card } from '../Card';\nimport { ECMAVersionCheck } from '../Alert/ecma-version-check';\nimport { Overview } from '../Overall/overview';\nimport { AlertCollapse } from './collapse';\nimport { CommonList } from './list';\nimport { ViewMode } from '../../constants';\nimport { useThemeToken } from '../../utils';\n\nimport type { AlertProps } from '../Alert/types';\nimport type { CSSProperties } from 'react';\nimport type { Rule } from '@rsdoctor/types';\n\nimport styles from './bundle-alert.module.scss';\nimport utilStyles from './index.module.scss';\nimport { CrossChunksAlertCollapse } from './collapse-cross-chunks';\nimport { ModuleMixedChunksAlertCollapse } from './collapse-module-mixed-chunks';\nimport { SideEffectsOnlyImportsAlertCollapse } from './collapse-side-effects-only-imports';\nimport { CjsRequireAlertCollapse } from './collapse-cjs-require';\nimport { EsmResolvedToCjsAlertCollapse } from './collapse-esm-cjs';\n\ninterface BundleAlertProps {\n  title: string;\n  cwd: string;\n  dataSource: Rule.RuleStoreDataItem[];\n  extraData: Omit<AlertProps, 'data'>;\n  viewMode: ViewMode;\n  setViewMode(mode: ViewMode): void;\n  extraCom?: React.JSX.Element | undefined;\n}\n\nconst BUILTIN_RULE_TABS = [\n  {\n    key: 'E1001',\n    label: 'Duplicate Packages',\n  },\n  {\n    key: 'E1002',\n    label: 'Cross Chunks Package',\n  },\n  {\n    key: 'E1003',\n    label: 'Loader Performance Optimization',\n  },\n  {\n    key: 'E1004',\n    label: 'ECMA Version Check',\n  },\n  {\n    key: 'E1005',\n    label: 'Default Import Check',\n  },\n  {\n    key: 'E1006',\n    label: 'Module Mixed Chunks',\n  },\n  {\n    key: 'E1007',\n    label: 'Tree Shaking Side Effects Only',\n  },\n  {\n    key: 'E1008',\n    label: 'CJS Require Cannot Tree-Shake',\n  },\n  {\n    key: 'E1009',\n    label: 'ESM Import Resolved to CJS',\n  },\n];\n\nexport const BundleAlert: React.FC<BundleAlertProps> = ({\n  title,\n  dataSource,\n  extraData,\n}) => {\n  const themeToken = useThemeToken();\n  const tabData: Array<{\n    key: string;\n    label: string;\n    data: Array<Rule.RuleStoreDataItem>;\n    tag: string;\n  }> = BUILTIN_RULE_TABS.map((tab) => ({ ...tab, data: [], tag: tab.key }));\n  const customRulesData: Array<Rule.RuleStoreDataItem> = [];\n\n  dataSource.forEach((data) => {\n    const target = tabData.find((td) => td.key === data.code);\n    if (target) {\n      target.data.push(data);\n    } else {\n      customRulesData.push(data);\n    }\n  });\n\n  if (customRulesData.length) {\n    tabData.push({\n      key: 'CUSTOM_RULES',\n      label: 'Custom Rules',\n      data: customRulesData,\n      tag: 'Custom',\n    });\n  }\n\n  tabData.sort(\n    (a, b) => (b.data.length > 0 ? 1 : 0) - (a.data.length > 0 ? 1 : 0),\n  );\n\n  const defaultActiveKey = tabData[0]?.key ?? 'E1001';\n  const [activeKey, setActiveKey] = useState(defaultActiveKey);\n  const activeTab = tabData.find((tab) => tab.key === activeKey);\n  const resolvedActiveKey =\n    activeTab && (activeTab.data.length > 0 || dataSource.length === 0)\n      ? activeKey\n      : defaultActiveKey;\n\n  useEffect(() => {\n    setActiveKey(defaultActiveKey);\n  }, [defaultActiveKey]);\n\n  const tabItems = tabData.map((td) => {\n    const tagStyle =\n      resolvedActiveKey === td.key\n        ? ({\n            border: `1px solid ${themeToken.colorPrimaryBorder}`,\n            backgroundColor: themeToken.colorPrimaryBg,\n          } as CSSProperties)\n        : {};\n\n    const tagTextStyle =\n      resolvedActiveKey === td.key\n        ? {\n            color: themeToken.colorPrimary,\n          }\n        : {};\n\n    const LabelComponent = () => (\n      <Overview\n        style={{\n          backgroundColor: 'transparent',\n          border: 'none',\n          borderRadius: 0,\n          minHeight: 'auto',\n          padding: '8px 0',\n          width: '100%',\n        }}\n        title={<span className={styles.labelTitle}>{td.label}</span>}\n        description={\n          <div className={styles.labelDescription}>\n            <span>{td.data.length}</span>\n            <Tag\n              style={{ fontFamily: 'Menlo', borderRadius: '2px', ...tagStyle }}\n            >\n              <span style={{ ...tagTextStyle }}>{td.tag}</span>\n            </Tag>\n          </div>\n        }\n      />\n    );\n\n    let children, description;\n    switch (td.key) {\n      case 'E1001':\n        children = <AlertCollapse data={td.data} extraData={extraData} />;\n        break;\n      case 'E1002':\n        children = (\n          <CrossChunksAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'E1003':\n        children = <CommonList data={td.data} />;\n        break;\n      case 'E1004':\n        description = (\n          <span>\n            No ECMA Version Check Rules were found. Please refer to\n            「https://rsdoctor.rs/guide/usage/rule-config」.\n          </span>\n        );\n        children = <ECMAVersionCheck data={td.data} />;\n        break;\n      case 'E1005':\n        children = <CommonList data={td.data} />;\n        break;\n      case 'E1006':\n        children = (\n          <ModuleMixedChunksAlertCollapse\n            data={td.data}\n            extraData={extraData}\n          />\n        );\n        break;\n      case 'E1007':\n        children = (\n          <SideEffectsOnlyImportsAlertCollapse\n            data={td.data}\n            extraData={extraData}\n          />\n        );\n        break;\n      case 'E1008':\n        children = (\n          <CjsRequireAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'E1009':\n        children = (\n          <EsmResolvedToCjsAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'CUSTOM_RULES':\n        children = <CommonList data={td.data} showCode />;\n        break;\n      default:\n        children = null;\n        break;\n    }\n\n    if (!td.data.length) {\n      children = (\n        <Empty description={description} image={Empty.PRESENTED_IMAGE_SIMPLE} />\n      );\n    }\n\n    return {\n      key: td.key,\n      label: <LabelComponent />,\n      children: (\n        <Card\n          className={styles.card}\n          type=\"inner\"\n          title={\n            <>\n              <Tag\n                className={utilStyles.tag}\n                style={{\n                  fontFamily: 'Menlo',\n                  fontWeight: '700',\n                  fontSize: '13px',\n                }}\n              >\n                {td.tag}\n              </Tag>\n              <span>{td.label}</span>\n            </>\n          }\n        >\n          {children}\n        </Card>\n      ),\n    };\n  });\n\n  return (\n    <Card style={{ width: '100%', borderRadius: '12px' }}>\n      <div className={styles.container}>\n        <div className={styles.title}>{title}</div>\n        {!dataSource.length ? (\n          <div\n            style={{\n              minHeight: '480px',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}\n          >\n            <Empty\n              description={'No Bundle Alerts Data'}\n              image={Empty.PRESENTED_IMAGE_SIMPLE}\n            />\n          </div>\n        ) : (\n          <Tabs\n            onChange={setActiveKey}\n            tabBarGutter={10}\n            type=\"card\"\n            activeKey={resolvedActiveKey}\n            items={tabItems}\n          />\n        )}\n      </div>\n    </Card>\n  );\n};\n"],"names":["BUILTIN_RULE_TABS","BundleAlert","title","dataSource","extraData","themeToken","useThemeToken","tabData","tab","customRulesData","data","target","td","a","b","defaultActiveKey","activeKey","setActiveKey","useState","activeTab","resolvedActiveKey","useEffect","tabItems","tagStyle","tagTextStyle","LabelComponent","Overview","styles","Tag","children","description","AlertCollapse","CrossChunksAlertCollapse","CommonList","ECMAVersionCheck","ModuleMixedChunksAlertCollapse","SideEffectsOnlyImportsAlertCollapse","CjsRequireAlertCollapse","EsmResolvedToCjsAlertCollapse","Empty","Card","utilStyles","Tabs"],"mappings":"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"}

package/dist/components/Alerts/bundle.mjs

@@ -22,8 +22,8 @@ const BundleAlertsBase = ({ filter, project })=>{
         theme: {
             components: {
                 Alert: {
-                    colorInfoBg: '#e6f4ff57',
-                    colorInfoBorder: 'none'
+                    colorInfoBg: 'var(--color-accent-subtle)',
+                    colorInfoBorder: 'transparent'
                 }
             },
             token: {

package/dist/components/Alerts/bundle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Alerts/bundle.mjs","sources":["../../../src/components/Alerts/bundle.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Rule, SDK } from '@rsdoctor/types';\nimport { hasViewModeFromStorage, useViewMode, useI18n } from '../../utils';\nimport { BundleAlert } from './bundle-alert';\nimport { withServerAPI } from '../Manifest';\nimport { ViewMode } from '../../constants';\nimport { PackageRelationReasonsWithServer } from '../Alert/package-relation';\nimport { ConfigProvider } from 'antd';\n\ninterface BundleAlertsProps {\n  filter?(alert: Rule.RuleStoreDataItem): boolean;\n  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;\n}\n\nexport const BundleAlertsBase: React.FC<BundleAlertsProps> = ({\n  filter,\n  project,\n}) => {\n  const { errors, root: cwd } = project;\n  const bundleAlerts = errors;\n  const { setBundleAlertsViewMode, viewMode, setViewMode } = useViewMode();\n  const { t } = useI18n();\n\n  const dataSource = filter ? bundleAlerts.filter(filter) : bundleAlerts;\n\n  useEffect(() => {\n    if (!hasViewModeFromStorage()) {\n      setViewMode(\n        {\n          bundleAlerts:\n            bundleAlerts.length >= 5 ? ViewMode.Group : ViewMode.List,\n        },\n        false,\n      );\n    }\n  }, []);\n\n  return (\n    <ConfigProvider\n      theme={{\n        components: {\n          Alert: {\n            colorInfoBg: '#e6f4ff57',\n            colorInfoBorder: 'none',\n          },\n        },\n        token: {\n          padding: 16,\n        },\n      }}\n    >\n      <BundleAlert\n        title={t('Bundle Alerts')}\n        dataSource={dataSource}\n        extraData={{\n          cwd,\n          getPackageRelationContentComponent: (res) => (\n            <PackageRelationReasonsWithServer\n              body={{ id: res.data.id, target: res.package.target }}\n              cwd={cwd}\n            />\n          ),\n        }}\n        viewMode={viewMode.bundleAlerts}\n        setViewMode={setBundleAlertsViewMode}\n        cwd={cwd}\n      />\n    </ConfigProvider>\n  );\n};\n\nexport const BundleAlerts = withServerAPI({\n  api: SDK.ServerAPI.API.GetProjectInfo,\n  responsePropName: 'project',\n  Component: BundleAlertsBase,\n});\n"],"names":["BundleAlertsBase","filter","project","errors","cwd","bundleAlerts","setBundleAlertsViewMode","viewMode","setViewMode","useViewMode","t","useI18n","dataSource","useEffect","hasViewModeFromStorage","ViewMode","ConfigProvider","BundleAlert","res","PackageRelationReasonsWithServer","BundleAlerts","withServerAPI","SDK"],"mappings":";;;;;;;;;AAcO,MAAMA,mBAAgD,CAAC,EAC5DC,MAAM,EACNC,OAAO,EACR;IACC,MAAM,EAAEC,MAAM,EAAE,MAAMC,GAAG,EAAE,GAAGF;IAC9B,MAAMG,eAAeF;IACrB,MAAM,EAAEG,uBAAuB,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGC;IAC3D,MAAM,EAAEC,CAAC,EAAE,GAAGC;IAEd,MAAMC,aAAaX,SAASI,aAAa,MAAM,CAACJ,UAAUI;IAE1DQ,UAAU;QACR,IAAI,CAACC,0BACHN,YACE;YACE,cACEH,aAAa,MAAM,IAAI,IAAIU,SAAS,KAAK,GAAGA,SAAS,IAAI;QAC7D,GACA;IAGN,GAAG,EAAE;IAEL,OAAO,WAAP,GACE,IAACC,gBAAcA;QACb,OAAO;YACL,YAAY;gBACV,OAAO;oBACL,aAAa;oBACb,iBAAiB;gBACnB;YACF;YACA,OAAO;gBACL,SAAS;YACX;QACF;kBAEA,kBAACC,aAAWA;YACV,OAAOP,EAAE;YACT,YAAYE;YACZ,WAAW;gBACTR;gBACA,oCAAoC,CAACc,MAAAA,WAAAA,GACnC,IAACC,kCAAgCA;wBAC/B,MAAM;4BAAE,IAAID,IAAI,IAAI,CAAC,EAAE;4BAAE,QAAQA,IAAI,OAAO,CAAC,MAAM;wBAAC;wBACpD,KAAKd;;YAGX;YACA,UAAUG,SAAS,YAAY;YAC/B,aAAaD;YACb,KAAKF;;;AAIb;AAEO,MAAMgB,eAAeC,cAAc;IACxC,KAAKC,IAAI,SAAS,CAAC,GAAG,CAAC,cAAc;IACrC,kBAAkB;IAClB,WAAWtB;AACb"}
+{"version":3,"file":"components/Alerts/bundle.mjs","sources":["../../../src/components/Alerts/bundle.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Rule, SDK } from '@rsdoctor/types';\nimport { hasViewModeFromStorage, useViewMode, useI18n } from '../../utils';\nimport { BundleAlert } from './bundle-alert';\nimport { withServerAPI } from '../Manifest';\nimport { ViewMode } from '../../constants';\nimport { PackageRelationReasonsWithServer } from '../Alert/package-relation';\nimport { ConfigProvider } from 'antd';\n\ninterface BundleAlertsProps {\n  filter?(alert: Rule.RuleStoreDataItem): boolean;\n  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;\n}\n\nexport const BundleAlertsBase: React.FC<BundleAlertsProps> = ({\n  filter,\n  project,\n}) => {\n  const { errors, root: cwd } = project;\n  const bundleAlerts = errors;\n  const { setBundleAlertsViewMode, viewMode, setViewMode } = useViewMode();\n  const { t } = useI18n();\n\n  const dataSource = filter ? bundleAlerts.filter(filter) : bundleAlerts;\n\n  useEffect(() => {\n    if (!hasViewModeFromStorage()) {\n      setViewMode(\n        {\n          bundleAlerts:\n            bundleAlerts.length >= 5 ? ViewMode.Group : ViewMode.List,\n        },\n        false,\n      );\n    }\n  }, []);\n\n  return (\n    <ConfigProvider\n      theme={{\n        components: {\n          Alert: {\n            colorInfoBg: 'var(--color-accent-subtle)',\n            colorInfoBorder: 'transparent',\n          },\n        },\n        token: {\n          padding: 16,\n        },\n      }}\n    >\n      <BundleAlert\n        title={t('Bundle Alerts')}\n        dataSource={dataSource}\n        extraData={{\n          cwd,\n          getPackageRelationContentComponent: (res) => (\n            <PackageRelationReasonsWithServer\n              body={{ id: res.data.id, target: res.package.target }}\n              cwd={cwd}\n            />\n          ),\n        }}\n        viewMode={viewMode.bundleAlerts}\n        setViewMode={setBundleAlertsViewMode}\n        cwd={cwd}\n      />\n    </ConfigProvider>\n  );\n};\n\nexport const BundleAlerts = withServerAPI({\n  api: SDK.ServerAPI.API.GetProjectInfo,\n  responsePropName: 'project',\n  Component: BundleAlertsBase,\n});\n"],"names":["BundleAlertsBase","filter","project","errors","cwd","bundleAlerts","setBundleAlertsViewMode","viewMode","setViewMode","useViewMode","t","useI18n","dataSource","useEffect","hasViewModeFromStorage","ViewMode","ConfigProvider","BundleAlert","res","PackageRelationReasonsWithServer","BundleAlerts","withServerAPI","SDK"],"mappings":";;;;;;;;;AAcO,MAAMA,mBAAgD,CAAC,EAC5DC,MAAM,EACNC,OAAO,EACR;IACC,MAAM,EAAEC,MAAM,EAAE,MAAMC,GAAG,EAAE,GAAGF;IAC9B,MAAMG,eAAeF;IACrB,MAAM,EAAEG,uBAAuB,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGC;IAC3D,MAAM,EAAEC,CAAC,EAAE,GAAGC;IAEd,MAAMC,aAAaX,SAASI,aAAa,MAAM,CAACJ,UAAUI;IAE1DQ,UAAU;QACR,IAAI,CAACC,0BACHN,YACE;YACE,cACEH,aAAa,MAAM,IAAI,IAAIU,SAAS,KAAK,GAAGA,SAAS,IAAI;QAC7D,GACA;IAGN,GAAG,EAAE;IAEL,OAAO,WAAP,GACE,IAACC,gBAAcA;QACb,OAAO;YACL,YAAY;gBACV,OAAO;oBACL,aAAa;oBACb,iBAAiB;gBACnB;YACF;YACA,OAAO;gBACL,SAAS;YACX;QACF;kBAEA,kBAACC,aAAWA;YACV,OAAOP,EAAE;YACT,YAAYE;YACZ,WAAW;gBACTR;gBACA,oCAAoC,CAACc,MAAAA,WAAAA,GACnC,IAACC,kCAAgCA;wBAC/B,MAAM;4BAAE,IAAID,IAAI,IAAI,CAAC,EAAE;4BAAE,QAAQA,IAAI,OAAO,CAAC,MAAM;wBAAC;wBACpD,KAAKd;;YAGX;YACA,UAAUG,SAAS,YAAY;YAC/B,aAAaD;YACb,KAAKF;;;AAIb;AAEO,MAAMgB,eAAeC,cAAc;IACxC,KAAKC,IAAI,SAAS,CAAC,GAAG,CAAC,cAAc;IACrC,kBAAkB;IAClB,WAAWtB;AACb"}

package/dist/components/Card/size.d.ts

@@ -3,6 +3,7 @@ export interface SizeCardProps {
     files: {
         path: string;
         size: number;
+        gzipSize?: number;
     }[];
     /**
      * total size for origin files

package/dist/components/Card/size.mjs

@@ -16,6 +16,10 @@ const SizeCard = ({ files, total, showProgress = false, type })=>{
     const sum = useMemo(()=>sumBy(files, (e)=>e.size), [
         files
     ]);
+    const gzipSum = useMemo(()=>sumBy(files, (e)=>e.gzipSize ?? 0), [
+        files
+    ]);
+    const hasGzipSize = files.some((file)=>void 0 !== file.gzipSize);
     return /*#__PURE__*/ jsx(ServerAPIProvider, {
         api: SDK.ServerAPI.API.GetAssetsSummary,
         body: {
@@ -66,15 +70,33 @@ const SizeCard = ({ files, total, showProgress = false, type })=>{
                         },
                         children: [
                             /*#__PURE__*/ jsxs("div", {
-                                className: size_module.dataContainer,
+                                className: size_module.sizeMetrics,
                                 children: [
-                                    /*#__PURE__*/ jsx("div", {
-                                        className: size_module.title,
-                                        children: "Size"
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: size_module.dataContainer,
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: size_module.title,
+                                                children: "Size"
+                                            }),
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: size_module.description,
+                                                children: formatSize(sum)
+                                            })
+                                        ]
                                     }),
-                                    /*#__PURE__*/ jsx("div", {
-                                        className: size_module.description,
-                                        children: formatSize(sum)
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: size_module.dataContainer,
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: size_module.title,
+                                                children: "Gzipped"
+                                            }),
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: size_module.description,
+                                                children: hasGzipSize ? formatSize(gzipSum) : 'N/A'
+                                            })
+                                        ]
                                     })
                                 ]
                             }),

package/dist/components/Card/size.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Card/size.mjs","sources":["../../../src/components/Card/size.tsx"],"sourcesContent":["import { Empty, Progress, Space, Tree } from 'antd';\nimport { sumBy } from 'es-toolkit/compat';\nimport React, { useMemo } from 'react';\nimport { RightOutlined } from '@ant-design/icons';\n\nimport { formatSize } from 'src/utils';\nimport { TextDrawer } from '../TextDrawer';\nimport { getFiles } from '../Overall';\nimport { ServerAPIProvider } from '../Manifest';\n\nimport { SDK, Client } from '@rsdoctor/types';\n\nimport styles from './size.module.scss';\n\nconst { DirectoryTree } = Tree;\nconst height = 100;\n\nexport interface SizeCardProps {\n  files: {\n    path: string;\n    size: number;\n  }[];\n  /**\n   * total size for origin files\n   */\n  total: number;\n  /**\n   * @default false\n   */\n  showProgress?: boolean;\n  tagBgColor: string;\n  type: string;\n}\nexport interface bgColorType {\n  bgColor: string;\n  tagBgColor: string;\n}\n\nexport const SizeCard: React.FC<SizeCardProps> = ({\n  files,\n  total,\n  showProgress = false,\n  type,\n}) => {\n  const fileType =\n    type.toLocaleLowerCase() as keyof Client.RsdoctorClientAssetsSummary;\n  const sum = useMemo(() => {\n    return sumBy(files, (e) => e.size);\n  }, [files]);\n\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetAssetsSummary}\n      body={{ withFileContent: false }}\n    >\n      {(res) => {\n        const type = fileType.includes('image') ? 'imgs' : fileType;\n        const { treeData } = getFiles(res[type].total);\n        return (\n          <Space style={{ height }} align=\"center\">\n            <Progress\n              type=\"circle\"\n              percent={+((sum / total) * 100).toFixed(2)}\n              strokeColor={{ '0%': '#108ee9', '100%': '#108ee9' }}\n              strokeWidth={12}\n              format={(percent) => (\n                <div className={styles.percentContainer}>\n                  <span style={{ marginTop: '10px' }}>{percent}%</span>\n                  <span className={styles.percentDescription}>\n                    total {type}\n                  </span>\n                </div>\n              )}\n            />\n            <div style={{ marginLeft: '10px' }}>\n              <div className={styles.dataContainer}>\n                <div className={styles.title}>Size</div>\n                <div className={styles.description}>{formatSize(sum)}</div>\n              </div>\n              <TextDrawer\n                buttonProps={{\n                  size: 'small',\n                }}\n                buttonStyle={{\n                  fontSize: 'inherit',\n                }}\n                drawerProps={{\n                  title: 'Files',\n                }}\n                text={\n                  <Space\n                    style={{ textAlign: showProgress ? 'left' : 'center' }}\n                    align=\"end\"\n                  >\n                    <Space direction=\"vertical\">\n                      <div className={styles.dataContainer}>\n                        <div className={styles.title}>\n                          <span style={{ marginRight: '5px' }}>Files</span>\n                          <RightOutlined />\n                        </div>\n                      </div>\n                    </Space>\n                  </Space>\n                }\n              >\n                {treeData.length ? (\n                  <DirectoryTree\n                    defaultExpandAll\n                    selectable={false}\n                    treeData={treeData}\n                    rootStyle={{\n                      minHeight: '800px',\n                      border: '1px solid rgba(235, 237, 241)',\n                    }}\n                  />\n                ) : (\n                  <div\n                    style={{\n                      position: 'relative',\n                      top: '50%',\n                      transform: 'translateY(-50%)',\n                    }}\n                  >\n                    <Empty style={{ height: '100%' }} />\n                  </div>\n                )}\n              </TextDrawer>\n              <div className={styles.description}>{files.length}</div>\n            </div>\n          </Space>\n        );\n      }}\n    </ServerAPIProvider>\n  );\n};\n"],"names":["DirectoryTree","Tree","height","SizeCard","files","total","showProgress","type","fileType","sum","useMemo","sumBy","e","ServerAPIProvider","SDK","res","treeData","getFiles","Space","Progress","percent","styles","formatSize","TextDrawer","RightOutlined","Empty"],"mappings":";;;;;;;;;;;AAcA,MAAM,EAAEA,eAAAA,aAAa,EAAE,GAAGC;AAC1B,MAAMC,SAAS;AAuBR,MAAMC,WAAoC,CAAC,EAChDC,KAAK,EACLC,KAAK,EACLC,eAAe,KAAK,EACpBC,IAAI,EACL;IACC,MAAMC,WACJD,KAAK,iBAAiB;IACxB,MAAME,MAAMC,QAAQ,IACXC,MAAMP,OAAO,CAACQ,IAAMA,EAAE,IAAI,GAChC;QAACR;KAAM;IAEV,OAAO,WAAP,GACE,IAACS,mBAAiBA;QAChB,KAAKC,IAAI,SAAS,CAAC,GAAG,CAAC,gBAAgB;QACvC,MAAM;YAAE,iBAAiB;QAAM;kBAE9B,CAACC;YACA,MAAMR,OAAOC,SAAS,QAAQ,CAAC,WAAW,SAASA;YACnD,MAAM,EAAEQ,QAAQ,EAAE,GAAGC,SAASF,GAAG,CAACR,KAAK,CAAC,KAAK;YAC7C,OAAO,WAAP,GACE,KAACW,OAAKA;gBAAC,OAAO;oBAAEhB,QAAAA;gBAAO;gBAAG,OAAM;;kCAC9B,IAACiB,UAAQA;wBACP,MAAK;wBACL,SAAS,CAAE,AAACV,CAAAA,MAAMJ,QAAS,GAAE,EAAG,OAAO,CAAC;wBACxC,aAAa;4BAAE,MAAM;4BAAW,QAAQ;wBAAU;wBAClD,aAAa;wBACb,QAAQ,CAACe,UAAAA,WAAAA,GACP,KAAC;gCAAI,WAAWC,YAAAA,gBAAuB;;kDACrC,KAAC;wCAAK,OAAO;4CAAE,WAAW;wCAAO;;4CAAID;4CAAQ;;;kDAC7C,KAAC;wCAAK,WAAWC,YAAAA,kBAAyB;;4CAAE;4CACnCd;;;;;;kCAKf,KAAC;wBAAI,OAAO;4BAAE,YAAY;wBAAO;;0CAC/B,KAAC;gCAAI,WAAWc,YAAAA,aAAoB;;kDAClC,IAAC;wCAAI,WAAWA,YAAAA,KAAY;kDAAE;;kDAC9B,IAAC;wCAAI,WAAWA,YAAAA,WAAkB;kDAAGC,WAAWb;;;;0CAElD,IAACc,YAAUA;gCACT,aAAa;oCACX,MAAM;gCACR;gCACA,aAAa;oCACX,UAAU;gCACZ;gCACA,aAAa;oCACX,OAAO;gCACT;gCACA,oBACE,IAACL,OAAKA;oCACJ,OAAO;wCAAE,WAAWZ,eAAe,SAAS;oCAAS;oCACrD,OAAM;8CAEN,kBAACY,OAAKA;wCAAC,WAAU;kDACf,kBAAC;4CAAI,WAAWG,YAAAA,aAAoB;sDAClC,mBAAC;gDAAI,WAAWA,YAAAA,KAAY;;kEAC1B,IAAC;wDAAK,OAAO;4DAAE,aAAa;wDAAM;kEAAG;;kEACrC,IAACG,eAAaA,CAAAA;;;;;;0CAOvBR,SAAS,MAAM,GAAG,WAAH,GACd,IAAChB,eAAaA;oCACZ,kBAAgB;oCAChB,YAAY;oCACZ,UAAUgB;oCACV,WAAW;wCACT,WAAW;wCACX,QAAQ;oCACV;mDAGF,IAAC;oCACC,OAAO;wCACL,UAAU;wCACV,KAAK;wCACL,WAAW;oCACb;8CAEA,kBAACS,OAAKA;wCAAC,OAAO;4CAAE,QAAQ;wCAAO;;;;0CAIrC,IAAC;gCAAI,WAAWJ,YAAAA,WAAkB;0CAAGjB,MAAM,MAAM;;;;;;QAIzD;;AAGN"}
+{"version":3,"file":"components/Card/size.mjs","sources":["../../../src/components/Card/size.tsx"],"sourcesContent":["import { Empty, Progress, Space, Tree } from 'antd';\nimport { sumBy } from 'es-toolkit/compat';\nimport React, { useMemo } from 'react';\nimport { RightOutlined } from '@ant-design/icons';\n\nimport { formatSize } from 'src/utils';\nimport { TextDrawer } from '../TextDrawer';\nimport { getFiles } from '../Overall';\nimport { ServerAPIProvider } from '../Manifest';\n\nimport { SDK, Client } from '@rsdoctor/types';\n\nimport styles from './size.module.scss';\n\nconst { DirectoryTree } = Tree;\nconst height = 100;\n\nexport interface SizeCardProps {\n  files: {\n    path: string;\n    size: number;\n    gzipSize?: number;\n  }[];\n  /**\n   * total size for origin files\n   */\n  total: number;\n  /**\n   * @default false\n   */\n  showProgress?: boolean;\n  tagBgColor: string;\n  type: string;\n}\nexport interface bgColorType {\n  bgColor: string;\n  tagBgColor: string;\n}\n\nexport const SizeCard: React.FC<SizeCardProps> = ({\n  files,\n  total,\n  showProgress = false,\n  type,\n}) => {\n  const fileType =\n    type.toLocaleLowerCase() as keyof Client.RsdoctorClientAssetsSummary;\n  const sum = useMemo(() => {\n    return sumBy(files, (e) => e.size);\n  }, [files]);\n  const gzipSum = useMemo(() => {\n    return sumBy(files, (e) => e.gzipSize ?? 0);\n  }, [files]);\n  const hasGzipSize = files.some((file) => file.gzipSize !== undefined);\n\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetAssetsSummary}\n      body={{ withFileContent: false }}\n    >\n      {(res) => {\n        const type = fileType.includes('image') ? 'imgs' : fileType;\n        const { treeData } = getFiles(res[type].total);\n        return (\n          <Space style={{ height }} align=\"center\">\n            <Progress\n              type=\"circle\"\n              percent={+((sum / total) * 100).toFixed(2)}\n              strokeColor={{ '0%': '#108ee9', '100%': '#108ee9' }}\n              strokeWidth={12}\n              format={(percent) => (\n                <div className={styles.percentContainer}>\n                  <span style={{ marginTop: '10px' }}>{percent}%</span>\n                  <span className={styles.percentDescription}>\n                    total {type}\n                  </span>\n                </div>\n              )}\n            />\n            <div style={{ marginLeft: '10px' }}>\n              <div className={styles.sizeMetrics}>\n                <div className={styles.dataContainer}>\n                  <div className={styles.title}>Size</div>\n                  <div className={styles.description}>{formatSize(sum)}</div>\n                </div>\n                <div className={styles.dataContainer}>\n                  <div className={styles.title}>Gzipped</div>\n                  <div className={styles.description}>\n                    {hasGzipSize ? formatSize(gzipSum) : 'N/A'}\n                  </div>\n                </div>\n              </div>\n              <TextDrawer\n                buttonProps={{\n                  size: 'small',\n                }}\n                buttonStyle={{\n                  fontSize: 'inherit',\n                }}\n                drawerProps={{\n                  title: 'Files',\n                }}\n                text={\n                  <Space\n                    style={{ textAlign: showProgress ? 'left' : 'center' }}\n                    align=\"end\"\n                  >\n                    <Space direction=\"vertical\">\n                      <div className={styles.dataContainer}>\n                        <div className={styles.title}>\n                          <span style={{ marginRight: '5px' }}>Files</span>\n                          <RightOutlined />\n                        </div>\n                      </div>\n                    </Space>\n                  </Space>\n                }\n              >\n                {treeData.length ? (\n                  <DirectoryTree\n                    defaultExpandAll\n                    selectable={false}\n                    treeData={treeData}\n                    rootStyle={{\n                      minHeight: '800px',\n                      border: '1px solid rgba(235, 237, 241)',\n                    }}\n                  />\n                ) : (\n                  <div\n                    style={{\n                      position: 'relative',\n                      top: '50%',\n                      transform: 'translateY(-50%)',\n                    }}\n                  >\n                    <Empty style={{ height: '100%' }} />\n                  </div>\n                )}\n              </TextDrawer>\n              <div className={styles.description}>{files.length}</div>\n            </div>\n          </Space>\n        );\n      }}\n    </ServerAPIProvider>\n  );\n};\n"],"names":["DirectoryTree","Tree","height","SizeCard","files","total","showProgress","type","fileType","sum","useMemo","sumBy","e","gzipSum","hasGzipSize","file","undefined","ServerAPIProvider","SDK","res","treeData","getFiles","Space","Progress","percent","styles","formatSize","TextDrawer","RightOutlined","Empty"],"mappings":"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"}

package/dist/components/Card/size.module.mjs

@@ -2,6 +2,7 @@ import "./size_module.css";
 const size_module = {
     dataContainer: "dataContainer-lJ0PuO",
     title: "title-Gj8JxL",
+    sizeMetrics: "sizeMetrics-P0U17b",
     description: "description-miJCbD",
     percentContainer: "percentContainer-VJxs6L",
     percentDescription: "percentDescription-ymSkb_"

package/dist/components/Card/size.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Card/size.module.mjs","sources":["../../../src/components/Card/size.module.scss"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./size_module.css\"\nexport default {\"dataContainer\":\"dataContainer-lJ0PuO\",\"title\":\"title-Gj8JxL\",\"description\":\"description-miJCbD\",\"percentContainer\":\"percentContainer-VJxs6L\",\"percentDescription\":\"percentDescription-ymSkb_\"};"],"names":[],"mappings":";AAEA,oBAAe;IAAC,eAAgB;IAAuB,OAAQ;IAAe,aAAc;IAAqB,kBAAmB;IAA0B,oBAAqB;AAA2B"}
+{"version":3,"file":"components/Card/size.module.mjs","sources":["../../../src/components/Card/size.module.scss"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./size_module.css\"\nexport default {\"dataContainer\":\"dataContainer-lJ0PuO\",\"title\":\"title-Gj8JxL\",\"sizeMetrics\":\"sizeMetrics-P0U17b\",\"description\":\"description-miJCbD\",\"percentContainer\":\"percentContainer-VJxs6L\",\"percentDescription\":\"percentDescription-ymSkb_\"};"],"names":[],"mappings":";AAEA,oBAAe;IAAC,eAAgB;IAAuB,OAAQ;IAAe,aAAc;IAAqB,aAAc;IAAqB,kBAAmB;IAA0B,oBAAqB;AAA2B"}

package/dist/components/Card/size_module.css

@@ -10,6 +10,11 @@
   line-height: 20px;
 }
 
+.sizeMetrics-P0U17b {
+  gap: 20px;
+  display: flex;
+}
+
 .description-miJCbD {
   font-size: 18px;
   font-weight: 500;

package/dist/components/Card/size_module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/components/Card/size.module.scss"],"names":[],"mappings":"AAAA;EACE,sBAAsB;EACtB,aAAa;AACf;;AAHkD;EAMhD,kBAAkB;EAClB,eAAe;EACf,gBAAgB;EAChB,iBAAiB;AACnB;;AAV0I;EAaxI,eAAe;EACf,gBAAgB;EAChB,iBAAiB;AACnB;;AAhBuM;EAA0B;IAoB7N,eAAe;EACjB;AACF;;AAtB8P;EAyB5P,sBAAsB;EACtB,eAAe;EACf,aAAa;AACf;;AA5BkU;EA+BhU,eAAe;EACf,gBAAgB;EAChB,iBAAiB;AACnB","sourcesContent":[".dataContainer{display:flex;flex-direction:column}.dataContainer .title{font-size:12px;font-weight:400;line-height:20px;margin-bottom:2px}.description{font-size:18px;font-weight:500;line-height:28px}@media(max-width: 1500px){.description{font-size:14px}}.percentContainer{display:flex;flex-direction:column;font-size:20px}.percentContainer .percentDescription{font-size:12px;font-weight:400;line-height:20px}"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/components/Card/size.module.scss"],"names":[],"mappings":"AAAA;EACE,sBAAsB;EACtB,aAAa;AACf;;AAHkD;EAMhD,kBAAkB;EAClB,eAAe;EACf,gBAAgB;EAChB,iBAAiB;AACnB;;AAV0I;EAaxI,SAAS;EACT,aAAa;AACf;;AAf6K;EAkB3K,eAAe;EACf,gBAAgB;EAChB,iBAAiB;AACnB;;AArB0O;EAA0B;IAyBhQ,eAAe;EACjB;AACF;;AA3BiS;EA8B/R,sBAAsB;EACtB,eAAe;EACf,aAAa;AACf;;AAjCqW;EAoCnW,eAAe;EACf,gBAAgB;EAChB,iBAAiB;AACnB","sourcesContent":[".dataContainer{display:flex;flex-direction:column}.dataContainer .title{font-size:12px;font-weight:400;line-height:20px;margin-bottom:2px}.sizeMetrics{display:flex;gap:20px}.description{font-size:18px;font-weight:500;line-height:28px}@media(max-width: 1500px){.description{font-size:14px}}.percentContainer{display:flex;flex-direction:column;font-size:20px}.percentContainer .percentDescription{font-size:12px;font-weight:400;line-height:20px}"],"sourceRoot":""}

package/dist/components/Charts/TimelineCharts/index.mjs

@@ -7,115 +7,97 @@ import { DataZoomComponent, GridComponent, TooltipComponent } from "echarts/comp
 import { CanvasRenderer } from "echarts/renderers";
 import dayjs from "dayjs";
 import { groupBy } from "es-toolkit/compat";
-import { ChartTypes, PALETTE_COLORS } from "../constants.mjs";
-import { useTheme, useThemeToken } from "../../../utils/index.mjs";
-const LINE_HEIGHT = 60;
-const DARK_MODE_LOADER_BAR_OPACITY = 0.6;
-function buildTimelineData(loaderData, pluginsData) {
-    const data = [];
-    const categories = [];
-    if (loaderData) {
-        const loaderCategories = [];
-        loaderData.forEach((_l)=>{
-            loaderCategories.unshift(_l.n + ' total');
-            loaderCategories.unshift(_l.n);
-        });
-        loaderData.forEach((_loaderData)=>{
-            data.push({
-                name: _loaderData.n + ' total',
-                value: [
-                    loaderCategories.indexOf(_loaderData.n + ' total'),
-                    _loaderData.s,
-                    _loaderData.e,
-                    _loaderData.e - _loaderData.s
-                ],
-                itemStyle: {
-                    normal: {
-                        color: PALETTE_COLORS[Math.floor(27 * Math.random())],
-                        opacity: 0.25
-                    }
-                }
-            });
-            if (!_loaderData?.c) return;
-            for(let l = 0; l < _loaderData.c.length; l++)data.push({
-                name: _loaderData.n,
-                value: [
-                    loaderCategories.indexOf(_loaderData.n),
-                    _loaderData.c[l].s,
-                    _loaderData.c[l].e,
-                    _loaderData.c[l].e - _loaderData.c[l].s
-                ],
-                itemStyle: {
-                    normal: {
-                        color: PALETTE_COLORS[Math.floor(27 * Math.random())],
-                        opacity: 0.25
-                    }
-                },
-                ext: _loaderData.c[l].ext
+import { ChartTypes, TIMELINE_PALETTE_COLORS } from "../constants.mjs";
+import { useThemeToken } from "../../../utils/index.mjs";
+const LINE_HEIGHT = 46;
+__rspack_external_echarts_core_d2845954.use([
+    CustomChart,
+    TooltipComponent,
+    GridComponent,
+    DataZoomComponent,
+    CanvasRenderer
+]);
+const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn, chartType = ChartTypes.Normal, exts = null })=>{
+    const [optionsData, setOptionsData] = useState({});
+    const themeToken = useThemeToken();
+    const { data, categories } = useMemo(()=>{
+        const chartData = [];
+        const categoryLabels = [];
+        if (loaderData) {
+            loaderData.forEach((loader)=>{
+                categoryLabels.unshift(loader.n + ' total');
+                categoryLabels.unshift(loader.n);
             });
-        });
-        categories.push(...loaderCategories.map((val, i)=>i % 2 !== 0 ? val.replace(' total', '') : ''));
-    }
-    if (pluginsData) {
-        const plugins = groupBy(pluginsData, (e)=>e.pid);
-        Object.keys(plugins).reverse().forEach((key, i)=>{
-            plugins[key].forEach((_plugin)=>{
-                data.push({
-                    name: String(_plugin.pid),
+            loaderData.forEach((loader, loaderIndex)=>{
+                const totalColor = TIMELINE_PALETTE_COLORS[loaderIndex % TIMELINE_PALETTE_COLORS.length];
+                chartData.push({
+                    name: loader.n + ' total',
                     value: [
-                        i,
-                        _plugin.args.s,
-                        _plugin.args.e,
-                        _plugin.args.e - _plugin.args.s
+                        categoryLabels.indexOf(loader.n + ' total'),
+                        loader.s,
+                        loader.e,
+                        loader.e - loader.s
                     ],
                     itemStyle: {
                         normal: {
-                            color: PALETTE_COLORS[Math.floor(27 * Math.random())],
-                            opacity: 0.25
+                            color: totalColor,
+                            opacity: 0.34
                         }
-                    },
-                    ext: _plugin
+                    }
+                });
+                loader.c?.forEach((child, childIndex)=>{
+                    chartData.push({
+                        name: loader.n,
+                        value: [
+                            categoryLabels.indexOf(loader.n),
+                            child.s,
+                            child.e,
+                            child.e - child.s
+                        ],
+                        itemStyle: {
+                            normal: {
+                                color: TIMELINE_PALETTE_COLORS[(loaderIndex + childIndex) % TIMELINE_PALETTE_COLORS.length],
+                                opacity: 0.78
+                            }
+                        },
+                        ext: child.ext
+                    });
                 });
             });
-            categories.push(String(key.charAt(0).toUpperCase() + key.slice(1)));
-        });
-    }
-    return {
-        data,
-        categories
-    };
-}
-const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn, chartType = ChartTypes.Normal, exts = null })=>{
-    const [optionsData, setOptionsData] = useState({});
-    const { isDark } = useTheme();
-    const themeToken = useThemeToken();
-    const { data, categories } = useMemo(()=>buildTimelineData(loaderData, pluginsData), [
+            for(let index = 0; index < categoryLabels.length; index++)categoryLabels[index] = index % 2 !== 0 ? categoryLabels[index].replace(' total', '') : '';
+        }
+        if (pluginsData) {
+            const groupedPlugins = groupBy(pluginsData, (event)=>event.pid);
+            Object.keys(groupedPlugins).reverse().forEach((key, groupIndex)=>{
+                groupedPlugins[key].forEach((plugin, pluginIndex)=>{
+                    chartData.push({
+                        name: String(plugin.pid),
+                        value: [
+                            groupIndex,
+                            plugin.args.s,
+                            plugin.args.e,
+                            plugin.args.e - plugin.args.s
+                        ],
+                        itemStyle: {
+                            normal: {
+                                color: TIMELINE_PALETTE_COLORS[(groupIndex + pluginIndex) % TIMELINE_PALETTE_COLORS.length],
+                                opacity: 0.78
+                            }
+                        },
+                        ext: plugin
+                    });
+                });
+                categoryLabels.push(String(key.charAt(0).toUpperCase() + key.slice(1)));
+            });
+        }
+        return {
+            data: chartData,
+            categories: categoryLabels
+        };
+    }, [
         loaderData,
         pluginsData
     ]);
-    const themedData = useMemo(()=>{
-        if (!isDark || chartType !== ChartTypes.Loader) return data;
-        return data.map((item)=>({
-                ...item,
-                itemStyle: {
-                    normal: {
-                        ...item.itemStyle.normal,
-                        opacity: DARK_MODE_LOADER_BAR_OPACITY
-                    }
-                }
-            }));
-    }, [
-        chartType,
-        data,
-        isDark
-    ]);
-    __rspack_external_echarts_core_d2845954.use([
-        CustomChart,
-        TooltipComponent,
-        GridComponent,
-        DataZoomComponent,
-        CanvasRenderer
-    ]);
     useEffect(()=>{
         function renderItem(params, api) {
             const categoryIndex = api.value(0);
@@ -127,7 +109,7 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                 api.value(2),
                 categoryIndex
             ]);
-            const height = 0.3 * api.size([
+            const height = 0.36 * api.size([
                 0,
                 1
             ])[1];
@@ -166,7 +148,15 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                     type: 'slider',
                     filterMode: 'weakFilter',
                     showDataShadow: false,
-                    top: -10
+                    top: -8,
+                    height: 14,
+                    borderColor: themeToken.colorBorderSecondary,
+                    backgroundColor: themeToken.colorFillQuaternary,
+                    fillerColor: themeToken.colorPrimaryBg,
+                    handleStyle: {
+                        color: themeToken.colorTextSecondary,
+                        borderColor: themeToken.colorBorder
+                    }
                 },
                 {
                     type: 'inside',
@@ -174,10 +164,10 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                 }
             ],
             grid: {
-                top: 10,
-                left: 0,
-                bottom: 10,
-                right: 0,
+                top: 18,
+                left: 12,
+                bottom: 12,
+                right: 16,
                 height: categories.length > (chartType === ChartTypes.Loader ? 6 : 3) ? 'auto' : categories.length * LINE_HEIGHT,
                 containLabel: true
             },
@@ -185,13 +175,20 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                 interval: exts?.endTimestamp && exts?.startTimestamp ? Math.floor((exts.endTimestamp - exts.startTimestamp) / 8) : null,
                 position: 'top',
                 splitLine: {
-                    show: true
+                    show: true,
+                    lineStyle: {
+                        color: themeToken.colorBorderSecondary,
+                        width: 1
+                    }
                 },
                 scale: true,
                 axisLine: {
                     show: false
                 },
                 axisLabel: {
+                    color: themeToken.colorTextSecondary,
+                    fontSize: 11,
+                    margin: 10,
                     formatter (val) {
                         return dayjs(val).format('HH:mm:ss:SSS');
                     }
@@ -203,12 +200,14 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                     show: false
                 },
                 axisLabel: {
-                    inside: true,
+                    inside: false,
                     lineHeight: 20,
-                    width: 100,
+                    width: chartType === ChartTypes.Loader ? 220 : 140,
+                    overflow: 'truncate',
+                    margin: 16,
                     fontSize: 12,
-                    color: themeToken.colorText,
-                    verticalAlign: 'bottom'
+                    color: themeToken.colorTextSecondary,
+                    verticalAlign: 'middle'
                 },
                 axisLine: {
                     show: false
@@ -223,7 +222,7 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                     type: 'custom',
                     renderItem,
                     itemStyle: {
-                        opacity: 0.8
+                        opacity: 1
                     },
                     encode: {
                         x: [
@@ -232,26 +231,27 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                         ],
                         y: 0
                     },
-                    data: themedData
+                    data
                 }
             ]
         };
         setOptionsData(option);
     }, [
+        categories,
         chartType,
+        data,
         exts,
         formatterFn,
-        themeToken,
-        categories,
-        themedData
+        themeToken
     ]);
+    const categoryCount = loaderData ? 2 * loaderData.length : new Set(pluginsData?.map((item)=>item.pid)).size;
+    const chartHeight = chartType === ChartTypes.Minify ? 100 : chartType === ChartTypes.Loader ? Math.min(Math.max(categoryCount * LINE_HEIGHT + 80, 300), 1000) : Math.min(Math.max(categoryCount * LINE_HEIGHT + 70, 200), 1000);
     return /*#__PURE__*/ jsx(core, {
         option: optionsData,
         echarts: __rspack_external_echarts_core_d2845954,
         style: {
             width: '100%',
-            minHeight: chartType === ChartTypes.Loader ? '500px' : chartType === ChartTypes.Minify ? '100px' : '200px',
-            maxHeight: chartType === ChartTypes.Minify ? '100px' : '1000px',
+            height: `${chartHeight}px`,
             border: '1px solid var(--color-border)',
             borderRadius: '10px'
         }