diff --git a/packages/components/src/components/CodeViewer/viewer.tsx b/packages/components/src/components/CodeViewer/viewer.tsx index b662c269..a7309c99 100644 --- a/packages/components/src/components/CodeViewer/viewer.tsx +++ b/packages/components/src/components/CodeViewer/viewer.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { SDK } from '@rsdoctor/types'; import Editor, { OnMount } from '@monaco-editor/react'; import { isNumber } from 'lodash-es'; -import { CodepenOutlined } from '@ant-design/icons'; +import { CodepenCircleOutlined } from '@ant-design/icons'; import type { editor } from 'monaco-editor'; import { getOriginalLanguage, getSelectionRange } from '../../utils'; import { DefaultEditorConfig } from './config'; @@ -55,7 +55,7 @@ export const CodeViewerWithDrawer: React.FC = (props) => { text="" buttonProps={{ size: 'small', - icon: , + icon: , type: 'default', }} buttonStyle={{ padding: `0 4px` }} diff --git a/packages/components/src/pages/BundleSize/components/asset.tsx b/packages/components/src/pages/BundleSize/components/asset.tsx index d90e48d9..1ee9a531 100644 --- a/packages/components/src/pages/BundleSize/components/asset.tsx +++ b/packages/components/src/pages/BundleSize/components/asset.tsx @@ -1,4 +1,4 @@ -import { CodepenOutlined, ColumnHeightOutlined, DeploymentUnitOutlined, InfoCircleOutlined } from '@ant-design/icons'; +import { CodepenCircleOutlined, ColumnHeightOutlined, DeploymentUnitOutlined, InfoCircleOutlined } from '@ant-design/icons'; import Editor from '@monaco-editor/react'; import { SDK } from '@rsdoctor/types'; import { Button, Card, Col, Divider, Drawer, Empty, Popover, Row, Space, Tag, Tooltip, Typography } from 'antd'; @@ -25,7 +25,8 @@ const TAB_MAP = { }; const tagStyle = { - 'margin': 'none' + 'margin': 'none', + 'marginInlineEnd': 0, }; export const ModuleCodeViewer: React.FC<{ data: SDK.ModuleData }> = ({ data }) => { @@ -46,7 +47,7 @@ export const ModuleCodeViewer: React.FC<{ data: SDK.ModuleData }> = ({ data }) = text="" buttonProps={{ size: 'small', - icon: , + icon: , type: 'default', }} buttonStyle={{ padding: `0 4px` }} @@ -384,7 +385,7 @@ export const AssetDetail: React.FC<{ {defaultTitle} {parsedSize > 0 ? ( - {'Parsed:' + formatSize(parsedSize)} + {'Parsed:' + formatSize(parsedSize)} ) : null} ); diff --git a/packages/components/src/pages/BundleSize/components/index.tsx b/packages/components/src/pages/BundleSize/components/index.tsx index 07524b8c..eff0fd99 100644 --- a/packages/components/src/pages/BundleSize/components/index.tsx +++ b/packages/components/src/pages/BundleSize/components/index.tsx @@ -1,4 +1,4 @@ -import { ColumnHeightOutlined, InfoCircleOutlined, VerticalAlignMiddleOutlined } from '@ant-design/icons'; +import { CodepenCircleOutlined, ColumnHeightOutlined, DeploymentUnitOutlined, InfoCircleOutlined, VerticalAlignMiddleOutlined } from '@ant-design/icons'; import { Client, SDK } from '@rsdoctor/types'; import { Button, @@ -205,8 +205,62 @@ export const WebpackModulesOverallBase: React.FC = ( <Tooltip - title={t('filter the modules which size is greater than the input value')} - style={{ marginLeft: 3 }} + color={'white'} + title={ + <Space direction='vertical' color='white'> + <Row> + <Col> + <Tag color="cyan" style={{ margin: 0 }}> + initial + </Tag> + <Typography.Text>: Indignify whether the chunk is the initial chunk.</Typography.Text> + </Col> + </Row> + <Row> + <Col> + <Tag color="green">concatenated</Tag> + <Typography.Text>: Indignify whether the module is the concatenated module. </Typography.Text> + <br /> + <Typography.Text strong>Concatenated Module:</Typography.Text> + <Typography.Text>A series module is to lift or series multiple modules into a closure when packaging. </Typography.Text> + </Col> + </Row> + <Row> + <Col> + <Button + size="small" + icon={<CodepenCircleOutlined />} + /> + <Typography.Text>: Open the code.</Typography.Text> + </Col> + </Row> + <Row> + <Col> + <Button + size="small" + icon={<DeploymentUnitOutlined />} + /> + <Typography.Text>: View the module dependency, that is, module reasons in stats.json.</Typography.Text> + </Col> + </Row> + <Row> + <Col> + <Tag color={'purple'} >{'Parsed: 15.77 KB'}</Tag> + <Typography.Text strong>Parsed Size</Typography.Text> + <Typography.Text>The size of the code which bundled. That is, after bundle and tree-shaking.</Typography.Text> + </Col> + </Row> + <Row> + <Col> + <Tag color={'orange'} >{'Source: 15.77 KB'}</Tag> + <Typography.Text strong>Source Size</Typography.Text> + <Typography.Text>The size of the code which before bundle and transform.</Typography.Text> + </Col> + </Row> + </Space> + + } + style={{ marginLeft: 3, }} > <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} /> </Tooltip>