web-infra-dev · easy1090 · Dec 29, 2023 · Dec 29, 2023
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "dev": "rsbuild dev",
-    "start": "rsbuild dev",
+    "start": "rsbuild build -w",
     "build": "rsbuild build",
     "build:analysis": "ENABLE_DEVTOOLS_PLUGIN=true DEVTOOLS_DEV=true rsbuild build",
     "preview": "rsbuild preview"

diff --git a/packages/components/src/components/Card/size.tsx b/packages/components/src/components/Card/size.tsx
@@ -1,12 +1,13 @@
 import { ExceptionOutlined } from '@ant-design/icons';
-import { Progress, Space, Tag, Tooltip, Typography } from 'antd';
+import { Empty, Progress, Space, Tag, Tooltip, Typography, theme } from 'antd';
 import { sumBy } from 'lodash-es';
 import React, { useMemo } from 'react';
 import { createFileStructures, formatSize } from 'src/utils';
 import { FileTree } from '../FileTree';
 import { TextDrawer } from '../TextDrawer';
 
 const height = 100;
+const { useToken } = theme;
 
 export interface SizeCardProps {
   files: {
@@ -21,9 +22,15 @@ export interface SizeCardProps {
    * @default false
    */
   showProgress?: boolean;
+  tagBgColor: string;
+}
+export interface bgColorType {
+  bgColor: string;
+  tagBgColor: string;
 }
 
-export const SizeCard: React.FC<SizeCardProps> = ({ files, total, showProgress = false }) => {
+export const SizeCard: React.FC<SizeCardProps> = ({ files, total, showProgress = false, tagBgColor }) => {
+  const { token } = useToken()
   const sum = useMemo(() => {
     return sumBy(files, (e) => e.size);
   }, [files]);
@@ -46,14 +53,22 @@ export const SizeCard: React.FC<SizeCardProps> = ({ files, total, showProgress =
   if (fileStructures.length === 0) {
     return (
       <Space style={{ height, fontSize: 24 }} align="center">
-        0
+        <Tag bordered={false} color={tagBgColor}>
+          <Typography.Text style={{ fontSize: 14, color: token.colorWhite }}>
+              <Typography.Text style={{ color: token.colorWhite  }}> {0}</Typography.Text>
+              {` Files`}
+          </Typography.Text>
+        </Tag>
       </Space>
     );
   }
 
   return (
     <Space style={{ height }} align="center">
       {showProgress ? (
+        sum === 0 ?
+        <Empty />
+        :
         <Progress
           type="dashboard"
           percent={+((sum / total) * 100).toFixed(2)}
@@ -66,10 +81,12 @@ export const SizeCard: React.FC<SizeCardProps> = ({ files, total, showProgress =
           <Tooltip title="Click to show the total files">
             <Space style={{ textAlign: showProgress ? 'left' : 'center' }} align="end">
               <Space direction="vertical">
-                <Typography.Text style={{ fontSize: 14 }}>
-                  Count:
-                  <Typography.Text strong> {files.length}</Typography.Text>
-                </Typography.Text>
+                <Tag bordered={false} color={tagBgColor}>
+                  <Typography.Text style={{ fontSize: 14, color: token.colorWhite }}>
+                      <Typography.Text style={{ color: token.colorWhite  }}> {files.length}</Typography.Text>
+                      {` Files`}
+                  </Typography.Text>
+                </Tag>
                 <Typography.Text style={{ fontSize: 20 }}>{formatSize(sum)}</Typography.Text>
               </Space>
               <ExceptionOutlined style={{ transform: 'translateY(-3.5px)' }} />

diff --git a/packages/components/src/components/Card/statistic.tsx b/packages/components/src/components/Card/statistic.tsx
@@ -8,13 +8,14 @@ export interface StatisticCardProps {
   title: string | React.ReactNode;
   value: string | React.ReactNode;
   statisticProps?: StatisticProps;
+  boxProps?: { style?: React.CSSProperties; }
 }
 
-export const StatisticCard: React.FC<StatisticCardProps> = ({ title, value, statisticProps }) => {
+export const StatisticCard: React.FC<StatisticCardProps> = ({ title, value, statisticProps, boxProps }) => {
   const { theme } = useTheme();
 
   return (
-    <div className={['statistic-card', `statistic-card-${theme}`].join(' ')}>
+    <div className={['statistic-card', `statistic-card-${theme}`].join(' ')} {...boxProps}>
       <Statistic
         title={<div className="statistic-card-title">{title}</div>}
         valueRender={() => value}

diff --git a/packages/components/src/pages/BundleSize/components/cards.tsx b/packages/components/src/pages/BundleSize/components/cards.tsx
@@ -1,27 +1,32 @@
 /* eslint-disable react/jsx-key */
 import React, { useState } from 'react';
-import { Col, Row, Segmented } from 'antd';
+import { Col, Row, Segmented, theme } from 'antd';
 import { Client, SDK } from '@rsdoctor/types';
-import { useDuplicatePackagesByErrors } from '../../../utils';
+import { useDuplicatePackagesByErrors, useWindowWidth } from '../../../utils';
 import { Size } from '../../../constants';
 import { StatisticCard } from '../../../components/Card/statistic';
 import { DuplicatePackageDrawerWithServer } from '../../../components/TextDrawer';
-import { SizeCard } from '../../../components/Card/size';
+import { SizeCard, bgColorType } from '../../../components/Card/size';
 
+const { useToken } = theme;
 const height = 100;
 
 interface CardProps {
   showProgress?: boolean;
   data: Client.DoctorClientAssetsSummary['all']['total'];
   total: number;
+  tagBgColor?: string;
 }
 
-const AssetCard: React.FC<CardProps> = ({ showProgress = false, data, total }) => {
-  return <SizeCard files={data.files} total={total} showProgress={showProgress} />;
+const AssetCard: React.FC<CardProps> = ({ showProgress = false, data, total, tagBgColor }) => {
+  const { token } = useToken();
+  const _tagBgColor = tagBgColor || token.colorPrimaryBorderHover;
+  return (<SizeCard files={data.files} total={total} showProgress={showProgress} tagBgColor={_tagBgColor } />);
 };
 
-const AssetCardContainer: React.FC<{ titles: string[]; datas: CardProps[] }> = ({ titles, datas }) => {
+const AssetCardContainer: React.FC<{ titles: string[]; datas: CardProps[]; bgColor?: bgColorType }> = ({ titles, datas, bgColor }) => {
   const [idx, setIdx] = useState(0);
+  const { token } = useToken();
 
   return (
     <StatisticCard
@@ -41,7 +46,10 @@ const AssetCardContainer: React.FC<{ titles: string[]; datas: CardProps[] }> = (
           titles[idx]
         )
       }
-      value={datas.map((e, i) => <AssetCard {...e} key={i} />)[idx]}
+      value={datas.map((e, i) => <AssetCard {...e} key={i}  tagBgColor={bgColor?.tagBgColor} />)[idx]}
+      boxProps={{
+        style: { backgroundColor: bgColor?.bgColor || token.colorPrimaryBg}
+      }}
     />
   );
 };
@@ -51,7 +59,9 @@ export const BundleCards: React.FC<{
   errors: SDK.ErrorsData;
   summary: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetAssetsSummary>;
 }> = ({ cwd, errors, summary }) => {
+  const windowWith = useWindowWidth();
   const duplicatePackages = useDuplicatePackagesByErrors(errors);
+  const { token } = useToken();
 
   const arr = [
     <AssetCardContainer
@@ -60,6 +70,7 @@ export const BundleCards: React.FC<{
         {
           data: summary.all.total,
           total: summary.all.total.size,
+          showProgress: true,
         },
       ]}
     />,
@@ -77,6 +88,10 @@ export const BundleCards: React.FC<{
           showProgress: true,
         },
       ]}
+      bgColor={{
+        bgColor: token.colorSuccessBg,
+        tagBgColor: token.colorSuccessBorderHover
+      }}
     />,
     <AssetCardContainer
       titles={['Total CSS', 'Initial CSS']}
@@ -90,8 +105,13 @@ export const BundleCards: React.FC<{
           data: summary.css.initial,
           total: summary.all.total.size,
           showProgress: true,
+
         },
       ]}
+      bgColor={{
+        bgColor: token.colorWarningBg,
+        tagBgColor: token.colorWarningBorderHover
+      }}
     />,
     <AssetCardContainer
       titles={['Images', 'Fonts', 'Media']}
@@ -122,19 +142,28 @@ export const BundleCards: React.FC<{
           showProgress: true,
         },
       ]}
+      bgColor={{
+        bgColor: token.colorSuccessBg,
+        tagBgColor: token.colorSuccessBorderHover
+      }}
     />,
     <StatisticCard
       title={'Duplicate Packages'}
       value={
         <DuplicatePackageDrawerWithServer buttonStyle={{ height }} duplicatePackages={duplicatePackages} cwd={cwd} />
       }
+      boxProps={{
+        style: {
+          backgroundColor: token.colorWarningBg 
+        }
+      }}
     />,
   ];
 
   return (
-    <Row gutter={[Size.BasePadding, Size.BasePadding]} wrap style={{ marginBottom: Size.BasePadding }}>
+    <Row gutter={ windowWith > 1200 && windowWith < 1400 ? [Size.BasePadding * 2, Size.BasePadding] : [Size.BasePadding, Size.BasePadding]} wrap style={{ marginBottom: Size.BasePadding }}>
       {arr.map((e, i) => (
-        <Col key={i} style={{ minWidth: 300 }}>
+        <Col key={i} span={windowWith > 1400 ? 4 : windowWith > 1200 ? 8 : 8}>
           {e}
         </Col>
       ))}

diff --git a/packages/components/src/pages/BundleSize/components/index.tsx b/packages/components/src/pages/BundleSize/components/index.tsx
@@ -65,7 +65,6 @@ export const WebpackModulesOverallBase: React.FC<WebpackModulesOverallProps> = (
   const { t } = useI18n();
 
   const assets = summary.all.total.files;
-  const avgAssetSize = summary.all.total.size / assets.length;
 
   const handleChange = useCallback(
     (type: string) => (value: string) => {
@@ -142,9 +141,12 @@ export const WebpackModulesOverallBase: React.FC<WebpackModulesOverallProps> = (
             }}
           >
             <Keyword text={basename} keyword={inputAssetName} />
-            <Bdg label={'size'} value={formatSize(size)} type={size >= avgAssetSize ? 'error' : 'default'} />
+            <Tag color={'success'} style={{ margin: 0 }}>
+              {formatSize(size)}
+            </Tag>
+
             {initial ? (
-              <Tag color="cyan" style={{ marginRight: 0 }}>
+              <Tag color="cyan" style={{ margin: 0 }}>
                 initial
               </Tag>
             ) : null}