feat(ui): bundle size page

web-infra-dev · Jan 9, 2025 · 02b69c0 · 02b69c0
1 parent 71a0aeb
commit 02b69c0
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 167 deletions.
diff --git a/packages/components/src/components/FileTree/index.scss b/packages/components/src/components/FileTree/index.scss
@@ -19,7 +19,7 @@ $treeNodePrefixCls: '#{$treePrefixCls}-treenode';
       height: 24px;
       margin: 0;
       padding: 0 4px;
-      font-size: 12px;
+      font-size: 14px;
       font-weight: 400;
       color: rgba(0, 0, 0, 0.85);
       box-sizing: border-box;
@@ -76,5 +76,5 @@ $treeNodePrefixCls: '#{$treePrefixCls}-treenode';
 .file-icon {
   display: inline-block;
   padding: 2px 0;
-  margin-left: 7px;
+  margin-left: 8px;
 }
diff --git a/packages/components/src/components/Form/keyword.tsx b/packages/components/src/components/Form/keyword.tsx
@@ -58,9 +58,9 @@ export const KeywordInput: React.FC<KeywordProps> = ({
         style={{ width: width ? width - labelWidth : 250 }}
         placeholder={placeholder}
         onChange={(e) => {
-          clearTimeout(timer);
+          if (timer) clearTimeout(timer);
           const v = e.target.value.trim();
-          setTimeout(() => {
+          timer = setTimeout(() => {
             setFilename(v);
           }, delay);
         }}

diff --git a/packages/components/src/components/Keyword/style.module.scss b/packages/components/src/components/Keyword/style.module.scss
@@ -1,4 +1,5 @@
 .text {
+  font-size: 14px;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.85);
 }
diff --git a/packages/components/src/pages/BundleSize/components/asset.tsx b/packages/components/src/pages/BundleSize/components/asset.tsx
@@ -21,13 +21,12 @@ import {
   Typography,
 } from 'antd';
 import { omitBy, sumBy } from 'lodash-es';
+import { DataNode as AntdDataNode } from 'antd/es/tree';
 import { dirname, relative } from 'path';
-import { Key } from 'rc-tree/lib/interface';
 import React, { useEffect, useMemo, useState } from 'react';
 import { ServerAPIProvider } from '../../../components/Manifest';
 import { ModuleAnalyzeComponent } from '../../ModuleAnalyze';
 import { Badge as Bdg } from '../../../components/Badge';
-import { FileTree } from '../../../components/FileTree';
 import { KeywordInput } from '../../../components/Form/keyword';
 import { Keyword } from '../../../components/Keyword';
 import { TextDrawer } from '../../../components/TextDrawer';
@@ -42,8 +41,11 @@ import {
 } from '../../../utils';
 import { ModuleGraphListContext } from '../config';
 import styles from './index.module.scss';
+import { Tree } from 'antd';
 
-let expandedModulesKeys: Key[] = [];
+const { DirectoryTree } = Tree;
+
+let expandedModulesKeys: React.Key[] = [];
 const TAB_MAP = {
   source: 'source code',
   transformed: 'Transformed Code (After compile)',
@@ -394,9 +396,8 @@ export const AssetDetail: React.FC<{
           );
 
         return (
-          <div style={{ display: 'flex' }}>
-            <div className={styles.box} style={{ width: 700 }}>
-              {/* <div style={{width: 700}}> */}
+          <div className={styles['bundle-tree']}>
+            <div className={styles.box}>
               <div className={styles.keywords}>
                 <Keyword ellipsis text={basename} keyword={moduleKeyword} />
               </div>
@@ -499,9 +500,7 @@ export const AssetDetail: React.FC<{
                 </Tooltip>
               ) : null}
               <Popover content="Open the Module Graph Box">
-                <Button
-                  size="small"
-                  icon={<DeploymentUnitOutlined />}
+                <DeploymentUnitOutlined
                   onClick={() => {
                     setModuleJumpList([mod.id]);
                     setShow(true);
@@ -544,6 +543,7 @@ export const AssetDetail: React.FC<{
 
         return defaultTitle;
       },
+      page: 'bundle',
     });
     return res;
   }, [filteredModules]);
@@ -589,19 +589,20 @@ export const AssetDetail: React.FC<{
                   onClick={() => setDefaultExpandAll(true)}
                   size="small"
                   icon={<ColumnHeightOutlined />}
-                >
-                  expand all
-                </Button>
+                />
               </Space>
             </Col>
             <Col span={24} style={{ marginTop: Size.BasePadding }}>
               {filteredModules.length ? (
-                <FileTree
+                <DirectoryTree
+                  key={`tree_${moduleKeyword}_${defaultExpandAll}_${asset.path}`}
+                  selectable={false}
+                  defaultExpandAll={
+                    defaultExpandAll || filteredModules.length <= 20
+                  }
                   onExpand={(expandedKeys) => {
                     expandedModulesKeys = expandedKeys;
                   }}
-                  treeData={fileStructures}
-                  autoExpandParent
                   defaultExpandParent
                   defaultExpandedKeys={
                     expandedModulesKeys?.length
@@ -610,10 +611,12 @@ export const AssetDetail: React.FC<{
                         ? [fileStructures[0].key]
                         : []
                   }
-                  key={`tree_${moduleKeyword}_${defaultExpandAll}_${asset.path}`}
-                  defaultExpandAll={
-                    defaultExpandAll || filteredModules.length <= 20
-                  }
+                  treeData={fileStructures as AntdDataNode[]}
+                  rootStyle={{
+                    minHeight: '800px',
+                    border: '1px solid rgba(235, 237, 241)',
+                    padding: '14px 20px',
+                  }}
                 />
               ) : (
                 <Empty

diff --git a/packages/components/src/pages/BundleSize/components/index.module.scss b/packages/components/src/pages/BundleSize/components/index.module.scss
@@ -11,10 +11,11 @@
       }
 
       .rc-tree-node-content-wrapper {
-        // width: 60%;
+        font-size: 14px;
       }
     }
   }
+
   .assetBox {
     display: flex;
     flex-direction: column;
@@ -23,9 +24,21 @@
   }
 }
 
+.bundle-tree {
+  display: flex;
+
+  :global {
+    span.ant-tag {
+      margin: none;
+      margin-inline-end: 0px;
+    }
+  }
+}
+
 .box {
   display: flex;
-  height: 40px;
+  height: 30px;
+  width: 100%;
 
   .keyword {
     flex: 0 0 auto;
@@ -41,7 +54,9 @@
 
 .dividerDiv {
   flex-grow: 1;
-  margin-left: 10px;
+  margin: 0 10px;
+  bottom: 10%;
+  position: relative;
 }
 
 .assetsTag {
@@ -61,7 +76,14 @@
     font-size: 14px;
 
     .rc-tree-node-content-wrapper {
-      width: 100%;
+      // width: 100%;
+      font-size: 14px;
     }
   }
 }
+
+.bundle-size-card {
+  .ant-tabs-tab {
+    margin-right: 20px;
+  }
+}