diff --git a/packages/components/src/common/svg/file-css.svg b/packages/components/src/common/svg/file-css.svg new file mode 100644 index 00000000..c21e8446 --- /dev/null +++ b/packages/components/src/common/svg/file-css.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/components/src/common/svg/file-html.svg b/packages/components/src/common/svg/file-html.svg new file mode 100644 index 00000000..076a6899 --- /dev/null +++ b/packages/components/src/common/svg/file-html.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/components/src/common/svg/file-image.svg b/packages/components/src/common/svg/file-image.svg new file mode 100644 index 00000000..eadd6847 --- /dev/null +++ b/packages/components/src/common/svg/file-image.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/components/src/common/svg/file-js.svg b/packages/components/src/common/svg/file-js.svg new file mode 100644 index 00000000..f4b44673 --- /dev/null +++ b/packages/components/src/common/svg/file-js.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/components/src/common/svg/file-unknown.svg b/packages/components/src/common/svg/file-unknown.svg new file mode 100644 index 00000000..347c59f1 --- /dev/null +++ b/packages/components/src/common/svg/file-unknown.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/components/src/components/Alert/package-relation.module.scss b/packages/components/src/components/Alert/package-relation.module.scss index 1b27ea75..50bef7ba 100644 --- a/packages/components/src/components/Alert/package-relation.module.scss +++ b/packages/components/src/components/Alert/package-relation.module.scss @@ -16,6 +16,8 @@ .arrow { position: relative; + top: 8px; left: 50%; transform: translateX(-50%) rotate(90deg); + color: #2994ff; } diff --git a/packages/components/src/components/Alert/package-relation.tsx b/packages/components/src/components/Alert/package-relation.tsx index a7046a15..c5a7f273 100644 --- a/packages/components/src/components/Alert/package-relation.tsx +++ b/packages/components/src/components/Alert/package-relation.tsx @@ -40,8 +40,6 @@ export const PackageRelationReasons: React.FC<{ data: SDK.ServerAPI.InferResponseType; cwd: string; }> = ({ data }) => { - const [index, setIndex] = useState(0); - return ( diff --git a/packages/components/src/components/Alerts/bundle-alert.tsx b/packages/components/src/components/Alerts/bundle-alert.tsx index e59ff50b..9ee43b83 100644 --- a/packages/components/src/components/Alerts/bundle-alert.tsx +++ b/packages/components/src/components/Alerts/bundle-alert.tsx @@ -1,4 +1,4 @@ -import { Typography, Tabs } from 'antd'; +import { Typography, Tabs, Empty } from 'antd'; import { Rule } from '@rsdoctor/types'; import { Card } from '../Card'; @@ -90,6 +90,10 @@ export const BundleAlert: React.FC = ({ break; } + if (!td.data.length) { + children = ; + } + return { key: td.key, label: , diff --git a/packages/components/src/components/Alerts/list.tsx b/packages/components/src/components/Alerts/list.tsx index bc7dc7a0..c932e985 100644 --- a/packages/components/src/components/Alerts/list.tsx +++ b/packages/components/src/components/Alerts/list.tsx @@ -9,28 +9,22 @@ import styles from './list.module.scss'; export const CommonList = (props: { data: Array }) => { const { data } = props; - return data.length ? ( - data.map((d) => { - const { code, link, description } = d; - const navigate = useRuleIndexNavigate(code, link); + return data.map((d) => { + const { code, link, description } = d; + const navigate = useRuleIndexNavigate(code, link); - return ( - {description} - } - icon={ - - } - /> - ); - }) - ) : ( - - ); + return ( + {description}} + icon={ + + } + /> + ); + }); }; diff --git a/packages/components/src/components/Alerts/overlay.tsx b/packages/components/src/components/Alerts/overlay.tsx index 753875a0..d4a2acd4 100644 --- a/packages/components/src/components/Alerts/overlay.tsx +++ b/packages/components/src/components/Alerts/overlay.tsx @@ -192,8 +192,8 @@ export const OverlayAlertsButton: React.FC<{ const [open, setOpen] = useState(false); return ( -
- +
+ setOpen(!open)} /> { - const fileStructures = useMemo(() => { - if (!data.files.length) return []; - return createFileStructures({ - files: data.files.map((e) => e.path), - fileTitle(file, basename) { - const { size, initial } = data.files.find((e) => e.path === file)!; - return ( - - {basename} - - {formatSize(size)} + let files: Array<{ + fileName: string; + defaultDir: string; + size: number; + initial: boolean; + }> = []; + if (data.files.length) { + files = data.files.map((fileMessage) => { + const filePath = fileMessage.path; + const pathArray = filePath.split('/'); + const fileName = pathArray.pop()!; + const defaultDir = pathArray.join('/') || 'output'; + + return { + fileName, + defaultDir, + size: fileMessage.size, + initial: fileMessage.initial, + }; + }); + } + + const iconMap = { + js: , + css: , + image: , + html: , + unknown: , + }; + const treeData: TreeDataNode[] = []; + files.forEach((file) => { + const target = treeData.find((data) => data.title === file.defaultDir); + const parent: TreeDataNode = target || { + title: file.defaultDir, + key: file.defaultDir, + icon: , + children: [], + }; + if (!target) { + treeData.push(parent); + } + parent.children!.push({ + title: ( +
+
{file.fileName}
+
+ + {formatSize(file.size)} + + {file.initial ? ( + + initial - {initial ? Initial : null} - - ); - }, + ) : null} +
+ ), + key: file.fileName, + isLeaf: true, + icon: iconMap[fileType], }); - }, [data.files]); + }); return ( <> @@ -57,9 +108,20 @@ const getFilesWithDrawer = ( buttonStyle={{ fontSize: 'inherit', }} + drawerProps={{ + title: 'Files', + }} text={{data.count}} > - + ) : ( data.count @@ -81,7 +143,7 @@ const BundleDescriptions = ({ label: 'JS files', children: ( - {getFilesWithDrawer(res.js.total)} + {getFilesWithDrawer(res.js.total, 'js')} ), }, @@ -90,7 +152,7 @@ const BundleDescriptions = ({ label: 'CSS files', children: ( - {getFilesWithDrawer(res.css.total)} + {getFilesWithDrawer(res.css.total, 'css')} ), }, @@ -99,7 +161,7 @@ const BundleDescriptions = ({ label: 'Font files', children: ( - {getFilesWithDrawer(res.fonts.total)} + {getFilesWithDrawer(res.fonts.total, 'unknown')} ), }, @@ -108,7 +170,7 @@ const BundleDescriptions = ({ label: 'HTML files', children: ( - {getFilesWithDrawer(res.html.total)} + {getFilesWithDrawer(res.html.total, 'html')} ), }, @@ -117,7 +179,7 @@ const BundleDescriptions = ({ label: 'Image files', children: ( - {getFilesWithDrawer(res.imgs.total)} + {getFilesWithDrawer(res.imgs.total, 'image')} ), }, @@ -126,7 +188,7 @@ const BundleDescriptions = ({ label: 'Media files', children: ( - {getFilesWithDrawer(res.media.total)} + {getFilesWithDrawer(res.media.total, 'unknown')} ), }, diff --git a/packages/components/src/components/Overall/help-center.module.scss b/packages/components/src/components/Overall/help-center.module.scss index c68bbdce..16432f97 100644 --- a/packages/components/src/components/Overall/help-center.module.scss +++ b/packages/components/src/components/Overall/help-center.module.scss @@ -4,11 +4,15 @@ } .container { + cursor: pointer; display: flex; justify-content: space-around; flex-wrap: wrap; .content { + font-size: 16px; width: 48%; + margin-bottom: 13px; + padding: 0 10px; } } diff --git a/packages/components/src/components/Overall/help-center.tsx b/packages/components/src/components/Overall/help-center.tsx index bc8a389a..f3ef6c5b 100644 --- a/packages/components/src/components/Overall/help-center.tsx +++ b/packages/components/src/components/Overall/help-center.tsx @@ -24,7 +24,12 @@ export const HelpCenter = (props: HelpCenterProps) => { title={
{t('Help Center')} -
@@ -33,8 +38,11 @@ export const HelpCenter = (props: HelpCenterProps) => {
{data.map(({ title, link }) => { return ( -
navigate(link)}> - {title} +
window.open(link, '_blank')} + > + {t(title)}
); })} diff --git a/packages/components/src/components/TextDrawer/index.tsx b/packages/components/src/components/TextDrawer/index.tsx index 47be2ec6..656741dd 100644 --- a/packages/components/src/components/TextDrawer/index.tsx +++ b/packages/components/src/components/TextDrawer/index.tsx @@ -32,7 +32,7 @@ export const TextDrawer = ( setVisible(false)} diff --git a/packages/components/src/pages/Overall/index.tsx b/packages/components/src/pages/Overall/index.tsx index 61ab45c4..f75ba75c 100644 --- a/packages/components/src/pages/Overall/index.tsx +++ b/packages/components/src/pages/Overall/index.tsx @@ -17,6 +17,48 @@ interface Props { project: SDK.ServerAPI.InferResponseType; } +const helpCenterData = [ + { + title: 'FAQ', + link: 'https://rsdoctor.dev/guide/more/faq', + }, + { + title: 'Introduction', + link: 'https://rsdoctor.dev/guide/start/intro', + }, + { + title: 'Bundle Alerts', + link: 'https://rsdoctor.dev/guide/usage/bundle-alerts', + }, + { + title: 'Bundle Overall', + link: 'https://rsdoctor.dev/guide/usage/bundle-overall', + }, + { + title: 'Bundle Analysis', + link: 'https://rsdoctor.dev/guide/usage/bundle-size', + }, + { + title: 'Compilation Alerts', + link: 'https://rsdoctor.dev/guide/usage/compile-alerts', + }, + { + title: 'Compile Overall', + link: 'https://rsdoctor.dev/guide/usage/compile-overall', + }, + { + title: 'Loaders Analysis', + link: 'https://rsdoctor.dev/guide/usage/loaders-analysis', + }, + { + title: 'Loaders Timeline', + link: 'https://rsdoctor.dev/guide/usage/loaders-timeline', + }, + { + title: 'Plugin Analysis', + link: 'https://rsdoctor.dev/guide/usage/plugins-analysis', + }, +]; const Component: React.FC = ({ project }) => { const { summary, configs, root: cwd, envinfo, errors } = project; @@ -38,36 +80,7 @@ const Component: React.FC = ({ project }) => { - {/* TODO Change this component */} - - +
diff --git a/packages/components/src/utils/i18n/cn.ts b/packages/components/src/utils/i18n/cn.ts index 10e05b3e..76bb9e93 100644 --- a/packages/components/src/utils/i18n/cn.ts +++ b/packages/components/src/utils/i18n/cn.ts @@ -3,8 +3,11 @@ import en from './en'; const cn: typeof en = { Overall: '概览', 'Compile Analysis': '编译分析', - 'Bundle Alerts': '产物告警', + 'Bundle Alerts': '编译预警', 'Help Center': '帮助中心', + Introduction: '介绍', + 'Compilation Alerts': '编译预警', + 'Plugin Analysis': 'Plugins 分析', LoadersAnalysis: 'Loaders 分析', 'Loaders Timeline': 'Loaders 概览', 'Loaders Analysis': 'Loaders 分析', diff --git a/packages/components/src/utils/i18n/en.ts b/packages/components/src/utils/i18n/en.ts index afffffab..6648245f 100644 --- a/packages/components/src/utils/i18n/en.ts +++ b/packages/components/src/utils/i18n/en.ts @@ -7,6 +7,9 @@ const en = { LoadersAnalysis: 'Loaders Analysis', 'Loaders Timeline': 'Loaders Timeline', 'Loaders Analysis': 'Loaders Analysis', + Introduction: 'Introduction', + 'Compilation Alerts': 'Compilation Alerts', + 'Plugin Analysis': 'Plugin Analysis', PluginsAnalysis: 'Plugins Analysis', ModuleResolve: 'Module Resolve', 'Bundle Analysis': 'Bundle Analysis',