fix(blockheader): support different size to show different custom icon size

src/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap

@@ -18,8 +18,12 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
               class="title__addon-before"
             >
               <div
-                class="title__addon-before--middle"
-              />
+                class="icon--middle"
+              >
+                <div
+                  class="title__addon-before--middle"
+                />
+              </div>
             </div>
             <div
               class="title__text"
@@ -45,8 +49,12 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
             class="title__addon-before"
           >
             <div
-              class="title__addon-before--middle"
-            />
+              class="icon--middle"
+            >
+              <div
+                class="title__addon-before--middle"
+              />
+            </div>
           </div>
           <div
             class="title__text"

src/blockHeader/demos/addonBefore.tsx

@@ -7,6 +7,8 @@ export default () => {
         <>
             <BlockHeader title="分类标题" />
             <br />
+            <BlockHeader title="分类标题" addonBefore={''} />
+            <br />
             <BlockHeader
                 title="分类标题"
                 addonBefore={<PieChartOutlined style={{ fontSize: '14px' }} />}

src/blockHeader/demos/basic.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { PieChartOutlined } from '@ant-design/icons';
 import { Radio, Space, Switch } from 'antd';
 import { BlockHeader } from 'dt-react-component';
 import { SizeType } from 'dt-react-component/blockHeader';
@@ -43,6 +44,7 @@ export default () => {
             <BlockHeader
                 size={size}
                 title="分类标题"
+                addonBefore={<PieChartOutlined />}
                 background={showBackground}
                 tooltip={tooltip ? '这里展示问号提示' : ''}
                 description={description ? '提示说明文字' : ''}

src/blockHeader/index.tsx

@@ -82,6 +82,14 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
     if (hasBottom) bottomStyle = { marginBottom: 16 };
     if (spaceBottom) bottomStyle = { marginBottom: spaceBottom };
 
+    const hasAddonBefore = addonBefore || addonBefore === undefined;
+    const addonBeforeIcon =
+        addonBefore === undefined ? (
+            <div className={`title__addon-before--${size}`} />
+        ) : (
+            <div className={`icon--${size}`}>{addonBefore}</div>
+        );
+
     const handleExpand = (expand: boolean) => {
         if (!children) return;
         !isControlled(props) && setInternalExpand(expand);
@@ -98,7 +106,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
                 onClick={() => handleExpand(!currentExpand)}
             >
                 <div className="title__box">
-                    {addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}
+                    {hasAddonBefore ? (
+                        <div className="title__addon-before">{addonBeforeIcon}</div>
+                    ) : null}
                     <div className="title__text">{title}</div>
                     {tooltipProps?.title ? (
                         <div className={`title__tooltip`}>

src/blockHeader/style.scss

@@ -66,6 +66,17 @@ $card_prefix: "dtc-block-header";
                     height: 20px;
                     background-color: #1D78FF;
                 }
+                .icon {
+                    &--small {
+                        font-size: 16px;
+                    }
+                    &--middle {
+                        font-size: 20px;
+                    }
+                    &--large {
+                        font-size: 25px;
+                    }
+                }
             }
             &__tooltip {
                 display: flex;