optimize(client): optimize ui (#71)

optimize(client): optimize ui optimize(client): optimize ui
web-infra-dev · Dec 27, 2023 · ca92633 · ca92633
1 parent 98b44eb
commit ca92633
Show file tree

Hide file tree

Showing 14 changed files with 93 additions and 196 deletions.
diff --git a/.changeset/eighty-pears-promise.md b/.changeset/eighty-pears-promise.md
@@ -0,0 +1,6 @@
+---
+'@rsdoctor/components': patch
+'@rsdoctor/client': patch
+---
+
+Optimize(client): optimize ui client
diff --git a/packages/client/src/main.tsx b/packages/client/src/main.tsx
diff --git a/packages/components/src/components/Alert/change.tsx b/packages/components/src/components/Alert/change.tsx
@@ -100,7 +100,7 @@ export const CodeChangeAlert: React.FC<CodeChangeAlertProps> = ({ data, cwd }) =
         </Space>
       }
       description={Description}
-      type={isFixed ? 'success' : level === 'warn' ? 'warning' : level}
+      type={isFixed ? 'success' : level === 'warn' ? 'info' : level}
       action={
         <Space>
           <TextDrawer

diff --git a/packages/components/src/components/Alert/file-relation.tsx b/packages/components/src/components/Alert/file-relation.tsx
@@ -4,5 +4,5 @@ import { FileRelationAlertProps } from './types';
 
 export const FileRelationAlert: React.FC<FileRelationAlertProps> = ({ data }) => {
   const { description = '', level } = data;
-  return <Alert type={level === 'warn' ? 'warning' : level} description={description}></Alert>;
+  return <Alert type={level === 'warn' ? 'info' : level} description={description}></Alert>;
 };
diff --git a/packages/components/src/components/Alert/link.tsx b/packages/components/src/components/Alert/link.tsx
@@ -20,7 +20,7 @@ export const LinkRuleAlert: React.FC<LinkAlertProps> = ({ data }) => {
         </Space>
       }
       description={<div dangerouslySetInnerHTML={{ __html: description }} />}
-      type={level === 'warn' ? 'warning' : level}
+      type={level === 'warn' ? 'info' : level}
       action={
         <Button type="link" onClick={navigate} size="small">
           More

diff --git a/packages/components/src/components/Alert/package-relation.tsx b/packages/components/src/components/Alert/package-relation.tsx
@@ -4,7 +4,7 @@ import { Space, Alert, Button, Typography, Divider, Tabs, Row, Col, Timeline, Ca
 import { sumBy } from 'lodash-es';
 import { Rule, SDK } from '@rsdoctor/types';
 import { ExpandAltOutlined, InfoCircleOutlined } from '@ant-design/icons';
-import { useRuleIndexNavigate, formatSize, useI18n } from '../../utils';
+import { useRuleIndexNavigate, formatSize, useI18n, useWindowWidth } from '../../utils';
 import { TextDrawer } from '../TextDrawer';
 import { Title } from '../Title';
 import { Size, Color } from '../../constants';
@@ -99,7 +99,7 @@ export const PackageRelationAlert: React.FC<PackageRelationAlertProps> = ({
   const navigate = useRuleIndexNavigate(code, data.link);
   const totalSize = sumBy(packages, (e) => e.targetSize.sourceSize);
   const totalSizeStr = formatSize(totalSize);
-
+  const windowWith = useWindowWidth();
   const { name } = packages.find((e) => !!e.target.name)!.target;
 
   const versions = packages.map((item) => item.target.version);
@@ -160,7 +160,7 @@ export const PackageRelationAlert: React.FC<PackageRelationAlertProps> = ({
 
                 <Divider type="vertical" />
                 <Typography.Paragraph
-                  style={{ marginBottom: 0, width: '40vw' }}
+                  style={{ marginBottom: 0, width: windowWith > 1500 ? '50vw' : windowWith > 1200 ? '40vw' : '30vw' }}
                   copyable={{ text: el.root }}
                   ellipsis={{ rows: 1, expandable: true, symbol: <ExpandAltOutlined />, tooltip: el.root }}
                   code
@@ -172,7 +172,7 @@ export const PackageRelationAlert: React.FC<PackageRelationAlertProps> = ({
           })}
         </Space>
       }
-      type={level === 'warn' ? 'warning' : level}
+      type={level === 'warn' ? 'info' : level}
       action={
         <React.Fragment>
           {packages && packages.length > 0 ? (

diff --git a/packages/components/src/components/Alert/view.tsx b/packages/components/src/components/Alert/view.tsx
@@ -62,7 +62,7 @@ export const CodeViewAlert: React.FC<CodeViewAlertProps> = ({ data, cwd }) => {
         </Space>
       }
       description={Description}
-      type={level === 'warn' ? 'warning' : level}
+      type={level === 'warn' ? 'info' : level}
       action={
         <Space>
           <TextDrawer text={'Show Source Code'} buttonProps={{ size: 'small' }}>

diff --git a/packages/components/src/components/Alerts/bundle.tsx b/packages/components/src/components/Alerts/bundle.tsx
@@ -5,6 +5,7 @@ import { CommonAlertsContainer } from './common';
 import { withServerAPI } from '../Manifest';
 import { ViewMode } from '../../constants';
 import { PackageRelationReasonsWithServer } from '../Alert/package-relation';
+import { ConfigProvider } from 'antd';
 
 interface BundleAlertsProps {
   filter?(alert: Rule.RuleStoreDataItem): boolean;
@@ -30,19 +31,30 @@ export const BundleAlertsBase: React.FC<BundleAlertsProps> = ({ filter, project
   }, []);
 
   return (
-    <CommonAlertsContainer
-      title="Bundle Alerts"
-      dataSource={dataSource}
-      extraData={{
-        cwd,
-        getPackageRelationContentComponent: (res) => (
-          <PackageRelationReasonsWithServer body={{ id: res.data.id, target: res.package.target }} cwd={cwd} />
-        ),
+    <ConfigProvider
+      theme={{
+        components: {
+          Alert: {
+            colorInfoBg: '#e6f4ff57',
+            colorInfoBorder: 'none',
+          }
+        }
       }}
-      viewMode={viewMode.bundleAlerts}
-      setViewMode={setBundleAlertsViewMode}
-      cwd={cwd}
-    />
+    >
+      <CommonAlertsContainer
+        title="Bundle Alerts"
+        dataSource={dataSource}
+        extraData={{
+          cwd,
+          getPackageRelationContentComponent: (res) => (
+            <PackageRelationReasonsWithServer body={{ id: res.data.id, target: res.package.target }} cwd={cwd} />
+          ),
+        }}
+        viewMode={viewMode.bundleAlerts}
+        setViewMode={setBundleAlertsViewMode}
+        cwd={cwd}
+      />
+    </ConfigProvider>
   );
 };
 

diff --git a/packages/components/src/components/Charts/loader.tsx b/packages/components/src/components/Charts/loader.tsx
@@ -16,7 +16,8 @@ export const LoaderExecutionsChart: React.FC<ChartProps> = ({ loaders, cwd }) =>
   const ref = useRef(null);
 
   const groupByLoader = useMemo(() => groupBy(loaders, (e) => e.loader), [loaders]);
-
+  console.log('Loader Data:', groupByLoader);
+
   const formatterForLoader =  useCallback((raw: any) => {
     const { name, data } = raw;
     const loaderName = name.replace(' total', '');
@@ -30,24 +31,14 @@ export const LoaderExecutionsChart: React.FC<ChartProps> = ({ loaders, cwd }) =>
   const data = useMemo(() => {
     return Object.keys(groupByLoader).map<DurationMetric>((loaderName) => {
       const list = groupByLoader[loaderName] || [];
-      if (list.length === 1) {
-        const { startAt, endAt } = list[0];
-        return {
-          p: loaderName,
-          n: loaderName,
-          s: startAt,
-          e: endAt,
-        };
-      }
-
       const { start, end } = findLoaderTotalTiming(list);
 
       return {
         p: loaderName,
         n: loaderName,
         s: start,
         e: end,
-        c: list.map<any>((e) => {
+        c: list.map((e) => {
           return {
             p: loaderName,
             // n: loaderName,
@@ -60,6 +51,7 @@ export const LoaderExecutionsChart: React.FC<ChartProps> = ({ loaders, cwd }) =>
       };
     });
   }, [groupByLoader]);
+  console.log('Loader Transformed Data:', data);
 
   if (!data.length) return <Empty />;
 

diff --git a/packages/components/src/components/FileTree/index.tsx b/packages/components/src/components/FileTree/index.tsx
@@ -1,15 +1,21 @@
 import React from 'react';
-import { Space } from 'antd';
+import { Space, theme } from 'antd';
 import { FileOutlined, FolderOpenOutlined, FolderOutlined, RightOutlined } from '@ant-design/icons';
 import Tree, { TreeProps } from 'rc-tree';
 import { Size } from '../../constants';
 
 import './index.sass';
 import { useTheme } from '../../utils';
 
+const { useToken } = theme;
+
 export const FileTree: React.FC<Partial<TreeProps>> = (props) => {
   const { isDark } = useTheme();
-  const color = isDark ? '#fff' : '#000';
+
+  const { token } = useToken();
+  const color = isDark ? token.colorWhite : token.colorPrimaryText;
+  const style = { fontSize: token.fontSize };
+
   return (
     <Tree
       checkable={false}
@@ -19,13 +25,14 @@ export const FileTree: React.FC<Partial<TreeProps>> = (props) => {
           return (
             <Space style={{ color }}>
               <RightOutlined
+                twoToneColor={color}
                 className={`file-tree-switcher-arrow ${expanded ? 'file-tree-switcher-arrow-expand' : ''}`}
-                style={{ fontSize: 10, color }}
+                style={style}
               />
               {expanded ? (
-                <FolderOpenOutlined style={{ fontSize: 14, color }} />
+                <FolderOpenOutlined twoToneColor={color} style={style} />
               ) : (
-                <FolderOutlined style={{ fontSize: 14, color }} />
+                <FolderOutlined twoToneColor={color} style={style} />
               )}
             </Space>
           );