fix(platform): optimize the interaction of bundle packages

perfsee · Jan 29, 2023 · 5c06ee1 · 5c06ee1
1 parent 42fa882
commit 5c06ee1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/bundle-report/src/bundle-detail/resource-tabs/packages-table.tsx b/packages/bundle-report/src/bundle-detail/resource-tabs/packages-table.tsx
@@ -39,6 +39,7 @@ import {
   PackageLoadTypeSpan,
   PackageLoadTypeWrap,
   TraceIconWrap,
+  PackageLoadTypeTrigger,
 } from '../style'
 
 import { ImportTraceModal } from './import-trace-modal'
@@ -238,9 +239,13 @@ export const PackagesTable: FC<Props> = ({ diff }) => {
         name: 'Type',
         minWidth: 100,
         maxWidth: 200,
+        sorter: (pkg1, pkg2) => {
+          const loadType1 = Object.keys(packagesLoadTypeMap.get(pkg1.ref) ?? {}).join('/')
+          const loadType2 = Object.keys(packagesLoadTypeMap.get(pkg2.ref) ?? {}).join('/')
+          return loadType1.localeCompare(loadType2)
+        },
         onRender: (pkg) => {
           const loadType = packagesLoadTypeMap.get(pkg.ref) ?? {}
-
           return <PackageLoadType loadType={loadType} />
         },
       },
@@ -370,7 +375,7 @@ const PackageLoadType: FC<PackageLoadTypeProps> = memo(({ loadType }) => {
 
   return (
     <HoverCard type={HoverCardType.plain} plainCardProps={plainCardProps}>
-      <PackageLoadTypeSpan>{Object.keys(loadType).join('/')}</PackageLoadTypeSpan>
+      <PackageLoadTypeTrigger>{Object.keys(loadType).join('/')}</PackageLoadTypeTrigger>
     </HoverCard>
   )
 })
diff --git a/packages/bundle-report/src/bundle-detail/style.ts b/packages/bundle-report/src/bundle-detail/style.ts
@@ -211,3 +211,7 @@ export const PackageLoadTypeHead = styled.div({
 export const PackageLoadTypeSpan = styled.span({
   marginRight: '4px',
 })
+
+export const PackageLoadTypeTrigger = styled.span({
+  textDecoration: 'underline',
+})