fix(ui): detail fixed (#674)

web-infra-dev · Jan 7, 2025 · 1e9c2e2 · 1e9c2e2
1 parent 372f497
commit 1e9c2e2
Show file tree

Hide file tree

Showing 36 changed files with 556 additions and 389 deletions.
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -121,6 +121,7 @@ const App: React.FC = (): React.ReactElement => {
                   token: {
                     padding: 16,
                     colorText: 'rgba(0, 0, 0, 0.85)',
+                    fontFamily: 'var(--font-family-code)',
                   },
                 }}
               >

diff --git a/packages/components/src/components/Alert/ecma-version-check.module.scss b/packages/components/src/components/Alert/ecma-version-check.module.scss
@@ -3,7 +3,6 @@
   justify-content: space-between;
   align-items: center;
   padding: 10px 20px;
-  font-family: var(--font-family-code);
 
   .box {
     width: 300px;

diff --git a/packages/components/src/components/Alerts/bundle-alert.module.scss b/packages/components/src/components/Alerts/bundle-alert.module.scss
@@ -14,3 +14,25 @@
     }
   }
 }
+
+.title {
+  height: 32px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  text-align: left;
+}
+
+.labelTitle {
+  font-family: PingFang SC;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: left;
+}
+
+.labelDescription {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git 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, Empty } from 'antd';
+import { Tabs, Empty, Tag } from 'antd';
 
 import { Card } from '../Card';
 import { ECMAVersionCheck } from '../Alert/ecma-version-check';
@@ -12,6 +12,7 @@ import { AlertProps } from '../Alert/types';
 import type { Rule } from '@rsdoctor/types';
 
 import styles from './bundle-alert.module.scss';
+import { CSSProperties, useState } from 'react';
 
 interface BundleAlertProps {
   title: string;
@@ -28,6 +29,7 @@ export const BundleAlert: React.FC<BundleAlertProps> = ({
   dataSource,
   extraData,
 }) => {
+  const [activekey, setActiveKey] = useState('E1001');
   const tabData: Array<{
     key: string;
     label: string;
@@ -61,11 +63,40 @@ export const BundleAlert: React.FC<BundleAlertProps> = ({
   });
 
   const tabItems = tabData.map((td) => {
+    const tagStyle =
+      activekey === td.key
+        ? ({
+            border: '1px solid #91D5FF',
+            backgroundColor: '#E6F7FF',
+          } as CSSProperties)
+        : {};
+
+    const tagTextStyle =
+      activekey === td.key
+        ? {
+            color: '#1890FF',
+          }
+        : {};
+
     const LabelComponent = () => (
       <Overview
-        title={td.label}
-        description={td.data.length}
-        icon={<Typography.Text code>{td.key}</Typography.Text>}
+        style={{
+          backgroundColor: 'transparent',
+          paddingLeft: 0,
+          paddingRight: 0,
+          width: '100%',
+        }}
+        title={<span className={styles.labelTitle}>{td.label}</span>}
+        description={
+          <div className={styles.labelDescription}>
+            <span>{td.data.length}</span>
+            <Tag
+              style={{ fontFamily: 'Menlo', borderRadius: '2px', ...tagStyle }}
+            >
+              <span style={{ ...tagTextStyle }}>{td.key}</span>
+            </Tag>
+          </div>
+        }
       />
     );
 
@@ -104,23 +135,51 @@ export const BundleAlert: React.FC<BundleAlertProps> = ({
       key: td.key,
       label: <LabelComponent />,
       children: (
-        <Card className={styles.card} type="inner" title={td.label}>
+        <Card
+          className={styles.card}
+          type="inner"
+          title={
+            <>
+              <Tag
+                style={{
+                  fontFamily: 'Menlo',
+                  fontWeight: '700',
+                  fontSize: '13px',
+                  backgroundColor: '#EAEDF1',
+                  borderRadius: '2px',
+                }}
+              >
+                {td.key}
+              </Tag>
+              <span>{td.label}</span>
+            </>
+          }
+        >
           {children}
         </Card>
       ),
     };
   });
 
   return (
-    <Card title={title} style={{ width: '100%' }}>
-      {!dataSource.length ? (
-        <Empty
-          description={'No Bundle Alerts Data'}
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-        />
-      ) : (
-        <Tabs defaultActiveKey="E1001" items={tabItems} />
-      )}
+    <Card style={{ width: '100%', borderRadius: '12px' }}>
+      <div style={{ marginTop: '-4px' }}>
+        <div className={styles.title}>{title}</div>
+        {!dataSource.length ? (
+          <Empty
+            description={'No Bundle Alerts Data'}
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+          />
+        ) : (
+          <Tabs
+            onChange={setActiveKey}
+            tabBarGutter={10}
+            type="card"
+            defaultActiveKey="E1001"
+            items={tabItems}
+          />
+        )}
+      </div>
     </Card>
   );
 };
diff --git a/packages/components/src/components/Alerts/collapse.module.scss b/packages/components/src/components/Alerts/collapse.module.scss
@@ -20,7 +20,6 @@
 .collapseContainer {
   .collapseChild {
     display: flex;
-    font-family: var(--font-family-code);
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
@@ -31,7 +30,6 @@
     }
 
     .attribute {
-      font-family: var(--font-family-code);
       font-size: 12px;
       font-weight: 400;
       line-height: 16px;
@@ -55,7 +53,6 @@
   align-items: center;
 
   .drawerLabelSize {
-    font-family: var(--font-family-code);
     font-size: 12px;
     font-weight: 400;
   }
@@ -76,3 +73,11 @@
     margin-left: 5px;
   }
 }
+
+.pkgName {
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 20px;
+  text-align: left;
+  font-family: Menlo;
+}
diff --git a/packages/components/src/components/Alerts/collapse.tsx b/packages/components/src/components/Alerts/collapse.tsx
@@ -22,7 +22,7 @@ import styles from './collapse.module.scss';
 const { Paragraph } = Typography;
 
 const LabelComponent = (props: {
-  title: string;
+  title: string | ReactNode;
   description: string;
   extra: ReactNode;
 }) => {
@@ -124,8 +124,12 @@ export const AlertCollapse = (props: {
       key: d.code,
       label: (
         <LabelComponent
-          title={name}
-          description={`${data.length} versions was found`}
+          title={
+            <Tag style={{ backgroundColor: '#EAEDF1', borderRadius: '2px' }}>
+              <span className={styles.pkgName}>{name}</span>
+            </Tag>
+          }
+          description={`${packages.length} versions was found`}
           extra={
             <div className={styles.extraContainer}>
               <div className={styles.iconContainer}>

diff --git a/packages/components/src/components/Alerts/list.module.scss b/packages/components/src/components/Alerts/list.module.scss
@@ -1,5 +1,4 @@
 .description {
-  font-family: var(--font-family-code);
   font-size: 14px;
   font-weight: 400;
   line-height: 16px;

diff --git a/packages/components/src/components/Card/index.tsx b/packages/components/src/components/Card/index.tsx
@@ -24,6 +24,7 @@ export const Card: React.FC<CardProps> = ({
   if (title && collapsable) {
     return (
       <C
+        style={{ borderRadius: '12px' }}
         {...rest}
         title={
           <Space style={{ fontSize: 'inherit' }}>
@@ -59,7 +60,7 @@ export const Card: React.FC<CardProps> = ({
     );
   }
   return (
-    <C title={title} {...rest}>
+    <C style={{ borderRadius: '12px' }} title={title} {...rest}>
       {children}
     </C>
   );

diff --git a/packages/components/src/components/Card/size.module.scss b/packages/components/src/components/Card/size.module.scss
@@ -1,5 +1,4 @@
 .dataContainer {
-  font-family: var(--font-family-code);
   display: flex;
   flex-direction: column;
 
@@ -23,7 +22,6 @@
   display: flex;
   flex-direction: column;
   .percentDescription {
-    font-family: var(--font-family-code);
     font-size: 12px;
     font-weight: 400;
     line-height: 20px;

diff --git a/packages/components/src/components/Card/size.tsx b/packages/components/src/components/Card/size.tsx
@@ -73,7 +73,8 @@ export const SizeCard: React.FC<SizeCardProps> = ({
       body={{ withFileContent: false }}
     >
       {(res) => {
-        const { treeData } = getFiles(res[fileType].total, fileType);
+        const type = fileType.includes('image') ? 'imgs' : fileType;
+        const { treeData } = getFiles(res[type].total, type);
         return (
           <Space style={{ height }} align="center">
             {showProgress ? (
@@ -88,7 +89,9 @@ export const SizeCard: React.FC<SizeCardProps> = ({
                   format={(percent) => (
                     <div className={styles.percentContainer}>
                       <span style={{ marginTop: '10px' }}>{percent}%</span>
-                      <span className={styles.percentDescription}>{type}</span>
+                      <span className={styles.percentDescription}>
+                        total {type}
+                      </span>
                     </div>
                   )}
                 />

diff --git a/packages/components/src/components/Card/statistic.scss b/packages/components/src/components/Card/statistic.scss
diff --git a/packages/components/src/components/Charts/bootstrap.tsx b/packages/components/src/components/Charts/bootstrap.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Space } from 'antd';
-import { BarChartOutlined } from '@ant-design/icons';
 import { SDK } from '@rsdoctor/types';
 import { TextDrawer } from '../TextDrawer';
 
@@ -44,12 +43,7 @@ export const BootstrapChartContainer: React.FC<CommonChartProps> = ({
     <TextDrawer
       containerProps={{ style: { display: 'inline' } }}
       drawerProps={{ title: 'Chart of the "Bootstrap -> BeforeCompile" stage' }}
-      text={
-        <Space>
-          detail
-          <BarChartOutlined />
-        </Space>
-      }
+      text={<Space>detail</Space>}
     >
       <ServerAPIProvider api={SDK.ServerAPI.API.GetPluginData} body={{ hooks }}>
         {(res) =>

diff --git a/packages/components/src/components/Charts/done.tsx b/packages/components/src/components/Charts/done.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Divider, Space } from 'antd';
-import { BarChartOutlined } from '@ant-design/icons';
 import { SDK } from '@rsdoctor/types';
 import { Summary } from '@rsdoctor/utils/common';
 import { TextDrawer } from '../TextDrawer';
@@ -42,12 +41,7 @@ export const DoneChartContainer: React.FC<CommonChartProps> = ({
     <TextDrawer
       containerProps={{ style: { display: 'inline' } }}
       drawerProps={{ title: `Details ${suffix}` }}
-      text={
-        <Space>
-          detail
-          <BarChartOutlined />
-        </Space>
-      }
+      text={<Space>detail</Space>}
     >
       <ServerAPIProvider api={SDK.ServerAPI.API.GetPluginData} body={{ hooks }}>
         {(res) =>

diff --git a/packages/components/src/components/Configuration/builder.module.scss b/packages/components/src/components/Configuration/builder.module.scss
@@ -0,0 +1,6 @@
+.title {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 22px;
+  text-align: right;
+}
diff --git a/packages/components/src/components/Configuration/builder.tsx b/packages/components/src/components/Configuration/builder.tsx
@@ -1,5 +1,6 @@
 import { SDK } from '@rsdoctor/types';
 import { Divider, Row, Select, Space, Typography } from 'antd';
+import { RightOutlined } from '@ant-design/icons';
 import { pick } from 'lodash-es';
 import React, { useState } from 'react';
 import ReactJson from 'react-json-view';
@@ -8,6 +9,8 @@ import { withServerAPI } from '../Manifest';
 import { TextDrawer } from '../TextDrawer';
 import { Title } from '../Title';
 
+import styles from './builder.module.scss';
+
 interface WebpackConfigurationViewerBaseProps {
   defaultKeys?: string[];
   configs: SDK.ConfigData;
@@ -25,7 +28,16 @@ export const WebpackConfigurationViewerBase: React.FC<
   const [selectKeys, setSelectKeys] = useState<string[]>(defaultKeys || keys);
 
   return (
-    <TextDrawer text="View Bundler Config">
+    <TextDrawer
+      text={
+        <div className={styles.title}>
+          <span style={{ marginRight: '8px', fontSize: '13px' }}>
+            View Bundler Config
+          </span>
+          <RightOutlined style={{ fontSize: '10px' }} />
+        </div>
+      }
+    >
       <Row>
         <Title text={`Bundler Config Viewer`} />
         <Divider />