From 1c846c4408013e9bd24e796c3e4d7a0465808b4a Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Mon, 2 Sep 2024 11:02:38 +0800
Subject: [PATCH 1/7] feat(blockheader): supprt large size and change some
 props name

---
 .../__snapshots__/blockHeader.test.tsx.snap   | 18 ++----
 .../__tests__/blockHeader.test.tsx            | 47 ++++++++--------
 src/blockHeader/demos/addonAfter.tsx          | 14 +++++
 .../demos/{customIcon.tsx => addonBefore.tsx} |  4 +-
 src/blockHeader/demos/basic.tsx               | 48 ++++++++++++++--
 src/blockHeader/demos/extraInfo.tsx           | 12 ----
 src/blockHeader/demos/size.tsx                | 19 -------
 src/blockHeader/index.md                      | 36 ++++++------
 src/blockHeader/index.tsx                     | 42 ++++++++------
 src/blockHeader/style.scss                    | 56 ++++++++++++-------
 10 files changed, 164 insertions(+), 132 deletions(-)
 create mode 100644 src/blockHeader/demos/addonAfter.tsx
 rename src/blockHeader/demos/{customIcon.tsx => addonBefore.tsx} (79%)
 delete mode 100644 src/blockHeader/demos/extraInfo.tsx
 delete mode 100644 src/blockHeader/demos/size.tsx

diff --git a/src/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap b/src/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap
index 1e4d81f03..e35fae0b6 100644
--- a/src/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap
+++ b/src/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap
@@ -9,16 +9,16 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
         class="dtc-block-header"
       >
         <div
-          class="dtc-block-header-title-row dtc-block-header-title-row-middle dtc-block-header-title-row-background"
+          class="dtc-block-header-title-row dtc-block-header-title-row--middle dtc-block-header-title-row-background"
         >
           <div
             class="dtc-block-header-title-box"
           >
             <div
-              class="dtc-block-header-before-title"
+              class="dtc-block-header-addon-before"
             >
               <div
-                class="dtc-block-header__beforeTitle-middle"
+                class="dtc-block-header-addon-before--middle"
               />
             </div>
             <div
@@ -28,9 +28,6 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
             </div>
           </div>
         </div>
-        <div
-          class="dtc-block-header-content "
-        />
       </div>
     </div>
   </body>,
@@ -39,16 +36,16 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
       class="dtc-block-header"
     >
       <div
-        class="dtc-block-header-title-row dtc-block-header-title-row-middle dtc-block-header-title-row-background"
+        class="dtc-block-header-title-row dtc-block-header-title-row--middle dtc-block-header-title-row-background"
       >
         <div
           class="dtc-block-header-title-box"
         >
           <div
-            class="dtc-block-header-before-title"
+            class="dtc-block-header-addon-before"
           >
             <div
-              class="dtc-block-header__beforeTitle-middle"
+              class="dtc-block-header-addon-before--middle"
             />
           </div>
           <div
@@ -58,9 +55,6 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
           </div>
         </div>
       </div>
-      <div
-        class="dtc-block-header-content "
-      />
     </div>
   </div>,
   "debug": [Function],
diff --git a/src/blockHeader/__tests__/blockHeader.test.tsx b/src/blockHeader/__tests__/blockHeader.test.tsx
index f41e04386..3c2d5a894 100644
--- a/src/blockHeader/__tests__/blockHeader.test.tsx
+++ b/src/blockHeader/__tests__/blockHeader.test.tsx
@@ -2,28 +2,28 @@ import React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import BlockHeader, { SizeType } from '../index';
+import BlockHeader, { IBlockHeaderProps, SizeType } from '../index';
 
-const props = {
+const props: IBlockHeaderProps = {
     title: '标题1',
 };
-const props2 = {
+const props2: IBlockHeaderProps = {
     title: '标题2',
-    beforeTitle: <span>Icon</span>,
-    afterTitle: '说明文字',
+    addonBefore: <span>Icon</span>,
+    description: '说明文字',
     addonAfter: <div className="test-button-after">新增按钮</div>,
     size: 'small' as SizeType,
     titleRowClassName: 'test-row-className',
     titleClassName: 'test-title-className',
 };
-const props3 = {
+const props3: IBlockHeaderProps = {
     title: 'hover',
     tooltip: 'hover 展示',
 };
-const props4 = {
+const props4: IBlockHeaderProps = {
     title: 'hover',
     tooltip: 'hover 展示',
-    afterTitle: '我的优先级更高',
+    description: '说明文字',
 };
 const prefixCls = 'dtc-block-header';
 
@@ -42,19 +42,18 @@ describe('test BlockHeader render', () => {
         expect(getByText('标题2')).toBeTruthy();
     });
     test('should render BlockHeader props default in BlockHeader', () => {
-        const { container } = render(<BlockHeader title="测试" showBackground />);
+        const { container } = render(<BlockHeader title="测试" background />);
         const wrap = container.firstChild;
-        expect(wrap!.firstChild!.firstChild!.firstChild).toHaveClass(`${prefixCls}-before-title`);
+        expect(wrap!.firstChild!.firstChild!.firstChild).toHaveClass(`${prefixCls}-addon-before`);
         fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
     });
     test('should render BlockHeader with different props', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild;
         expect(wrap).toHaveClass(`${prefixCls}`);
-        expect(wrap!.lastChild).toHaveClass(`${prefixCls}-content`);
         expect(wrap!.firstChild).toHaveClass(`test-row-className`);
         expect(getByText('标题2')).toHaveClass('test-title-className');
-        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
+        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-description`);
         expect(getByText('新增按钮')).toHaveClass(`test-button-after`);
         expect(getByText('Icon')).toBeTruthy();
     });
@@ -84,14 +83,13 @@ describe('test BlockHeader render', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild;
         expect(wrap).toHaveClass(`${prefixCls}`);
-        expect(wrap!.lastChild).toHaveClass(`${prefixCls}-content`);
         expect(wrap!.firstChild).toHaveClass(`test-row-className`);
         expect(getByText('标题2')).toHaveClass('test-title-className');
-        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
+        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-description`);
         expect(getByText('Icon')).toBeTruthy();
     });
-    test('should render BlockHeader className when isSmall is small', () => {
-        const props = { title: '测试1', showBackground: false };
+    test('should render BlockHeader background success', () => {
+        const props = { title: '测试1', background: false };
         const { container } = render(<BlockHeader {...props} />);
         const wrap = container.firstChild;
         expect(wrap!.firstChild).not.toHaveClass(`background`);
@@ -100,10 +98,9 @@ describe('test BlockHeader render', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild!;
         expect(wrap).toHaveClass(`${prefixCls}`);
-        expect(wrap.lastChild).toHaveClass(`${prefixCls}-content`);
         expect(wrap.firstChild).toHaveClass(`test-row-className`);
         expect(getByText('标题2')).toHaveClass('test-title-className');
-        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
+        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-description`);
         expect(getByText('Icon')).toBeTruthy();
     });
 
@@ -114,32 +111,32 @@ describe('test BlockHeader render', () => {
         expect(afterTitleWrap!.firstChild).toHaveClass('anticon-question-circle');
     });
 
-    test('should render BlockHeader tooltip and afterTitle success', () => {
+    test('should render BlockHeader tooltip and desc success', () => {
         const { container } = render(<BlockHeader {...props4} />);
         const wrap = container.firstChild!;
         const afterTitleWrap = wrap.firstChild!.firstChild!.lastChild;
-        expect(afterTitleWrap).toHaveTextContent('我的优先级更高');
+        expect(afterTitleWrap).toHaveTextContent('说明文字');
     });
     test('should render BlockHeader correct dom length', () => {
-        const { container } = render(<BlockHeader title="分类级别" beforeTitle="" />);
+        const { container } = render(<BlockHeader title="分类级别" addonBefore="" />);
         const titleBoxWrap = container.firstChild!.firstChild!.firstChild;
         expect(titleBoxWrap!.childNodes.length).toEqual(1);
 
         const { container: container1 } = render(
-            <BlockHeader title="分类级别" afterTitle="测试" />
+            <BlockHeader title="分类级别" description="测试" />
         );
         const titleBoxWrap1 = container1.firstChild!.firstChild!.firstChild;
         expect(titleBoxWrap1!.childNodes.length).toEqual(3);
     });
     test('should render BlockHeader correct margin-bottom', () => {
-        const { container: noStyle } = render(<BlockHeader title="分类级别" beforeTitle="" />);
+        const { container: noStyle } = render(<BlockHeader title="分类级别" addonBefore="" />);
         expect(noStyle.querySelector('.dtc-block-header')).not.toHaveAttribute('style');
         const { container: defaultBottom } = render(
-            <BlockHeader title="分类级别" beforeTitle="" />
+            <BlockHeader title="分类级别" addonBefore="" />
         );
         expect(defaultBottom.querySelector('.dtc-block-header')).toHaveStyle({ marginBottom: 16 });
         const { container: customizeBottom } = render(
-            <BlockHeader title="分类级别" beforeTitle="" hasBottom spaceBottom={10} />
+            <BlockHeader title="分类级别" addonBefore="" hasBottom spaceBottom={10} />
         );
         expect(customizeBottom.querySelector('.dtc-block-header')).toHaveStyle({
             marginBottom: 10,
diff --git a/src/blockHeader/demos/addonAfter.tsx b/src/blockHeader/demos/addonAfter.tsx
new file mode 100644
index 000000000..ccd1c534b
--- /dev/null
+++ b/src/blockHeader/demos/addonAfter.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Input, Space } from 'antd';
+import { BlockHeader } from 'dt-react-component';
+
+export default () => (
+    <Space size={12} direction="vertical" style={{ width: '100%' }}>
+        <BlockHeader title="分类标题" addonAfter="这是 addonAfter 内容" />
+        <BlockHeader
+            background={false}
+            title="分类标题"
+            addonAfter={<Input placeholder="请输入" />}
+        />
+    </Space>
+);
diff --git a/src/blockHeader/demos/customIcon.tsx b/src/blockHeader/demos/addonBefore.tsx
similarity index 79%
rename from src/blockHeader/demos/customIcon.tsx
rename to src/blockHeader/demos/addonBefore.tsx
index acad3fefb..5aa1e62a3 100644
--- a/src/blockHeader/demos/customIcon.tsx
+++ b/src/blockHeader/demos/addonBefore.tsx
@@ -9,12 +9,12 @@ export default () => {
             <br />
             <BlockHeader
                 title="分类标题"
-                beforeTitle={<PieChartOutlined style={{ fontSize: '14px' }} />}
+                addonBefore={<PieChartOutlined style={{ fontSize: '14px' }} />}
             />
             <br />
             <BlockHeader
                 title="分类标题"
-                beforeTitle={<PauseCircleOutlined style={{ fontSize: '14px' }} />}
+                addonBefore={<PauseCircleOutlined style={{ fontSize: '14px' }} />}
             />
         </>
     );
diff --git a/src/blockHeader/demos/basic.tsx b/src/blockHeader/demos/basic.tsx
index 3205e8800..ed0b983f2 100644
--- a/src/blockHeader/demos/basic.tsx
+++ b/src/blockHeader/demos/basic.tsx
@@ -1,16 +1,52 @@
 import React, { useState } from 'react';
-import { Switch } from 'antd';
+import { Radio, Space, Switch } from 'antd';
 import { BlockHeader } from 'dt-react-component';
+import { SizeType } from 'dt-react-component/blockHeader';
 
 export default () => {
+    const [size, setSize] = useState<SizeType>('middle');
     const [showBackground, setShowBackground] = useState(true);
+    const [tooltip, setTooltip] = useState(true);
+    const [description, setDescription] = useState(true);
+
     return (
-        <>
-            背景：
-            <Switch defaultChecked onChange={setShowBackground} />
+        <div>
+            <Space direction="vertical" size={12}>
+                <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
+                    <Radio.Button value="small">Small</Radio.Button>
+                    <Radio.Button value="middle">Middle</Radio.Button>
+                    <Radio.Button value="large">Large</Radio.Button>
+                </Radio.Group>
+                <Space direction="horizontal" size={12}>
+                    <Switch
+                        defaultChecked
+                        onChange={setShowBackground}
+                        checkedChildren="带背景"
+                        unCheckedChildren="不带背景"
+                    />
+                    <Switch
+                        defaultChecked
+                        onChange={setTooltip}
+                        checkedChildren="展示 tooltip"
+                        unCheckedChildren="不展示 tooltip"
+                    />
+                    <Switch
+                        defaultChecked
+                        onChange={setDescription}
+                        checkedChildren="展示说明文字"
+                        unCheckedChildren="不展示说明文字"
+                    />
+                </Space>
+            </Space>
             <br />
             <br />
-            <BlockHeader title="分类标题" showBackground={showBackground} />
-        </>
+            <BlockHeader
+                size={size}
+                title="分类标题"
+                background={showBackground}
+                tooltip={tooltip && '这里展示问号提示'}
+                description={description && '提示说明文字'}
+            />
+        </div>
     );
 };
diff --git a/src/blockHeader/demos/extraInfo.tsx b/src/blockHeader/demos/extraInfo.tsx
deleted file mode 100644
index a097f6d26..000000000
--- a/src/blockHeader/demos/extraInfo.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { BlockHeader } from 'dt-react-component';
-
-export default () => {
-    return (
-        <>
-            <BlockHeader title="分类标题" afterTitle="说明文字" />
-            <br />
-            <BlockHeader title="分类标题" tooltip="hover展示更多" />
-        </>
-    );
-};
diff --git a/src/blockHeader/demos/size.tsx b/src/blockHeader/demos/size.tsx
deleted file mode 100644
index f3fd4be83..000000000
--- a/src/blockHeader/demos/size.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { useState } from 'react';
-import { Radio } from 'antd';
-import { BlockHeader } from 'dt-react-component';
-import { SizeType } from 'dt-react-component/esm/blockHeader';
-
-export default () => {
-    const [size, setSize] = useState<SizeType>('middle');
-    return (
-        <>
-            <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
-                <Radio.Button value="middle">Default</Radio.Button>
-                <Radio.Button value="small">Small</Radio.Button>
-            </Radio.Group>
-            <br />
-            <br />
-            <BlockHeader title="分类标题" size={size} />
-        </>
-    );
-};
diff --git a/src/blockHeader/index.md b/src/blockHeader/index.md
index 13bf79aef..d494968cf 100644
--- a/src/blockHeader/index.md
+++ b/src/blockHeader/index.md
@@ -16,29 +16,29 @@ demo:
 
 ## 示例
 
-<code src="./demos/basic.tsx" description="通过设置 `showBackground={false}` 去除标题背景，默认为 `true`">基础使用</code>
-<code src="./demos/size.tsx" description="标题有中、小两种尺寸，默认为中尺寸，通过设置 `size='small'` 把标题设置为小尺寸">标题尺寸</code>
-<code src="./demos/extraInfo.tsx" description="通过设置 `afterTitle` 和 `tooltip` 可以增加两种不同形式的提示信息，同时存在时仅 `afterTitle` 生效">带提示信息的标题</code>
-<code src="./demos/customIcon.tsx" description="通过设置 `beforeTitle` 可以自定义标题icon，不设置时默认是一个色块">自定义 icon</code>
+<code src="./demos/basic.tsx" description="配置大小、tooltip、描述">基础使用</code>
+<code src="./demos/addonBefore.tsx" description="通过 `addonBefore` 可以设置标题前的图标，不设置时默认是一个色块">自定义 icon</code>
+<code src="./demos/addonAfter.tsx" description="通过 `addonAfter` 可以设置后缀自定义内容块">带提示信息的标题</code>
 <code src="./demos/expand.tsx" description="若存在 `children` 则支持展开">展开/收起内容</code>
 
 ## API
 
 ### BlockHeader
 
-| 参数              | 说明                                      | 类型                        | 默认值  |
-| ----------------- | ----------------------------------------- | --------------------------- | ------- |
-| title             | 标题                                      | `string`                    | -       |
-| beforeTitle       | 标题前的图标，默认是一个色块              | `React.ReactNode`           | -       |
-| afterTitle        | 标题后的提示图标或文案                    | `React.ReactNode`           | -       |
-| tooltip           | 默认展示问号提示(优先级低于 `afterTitle`) | `React.ReactNode`           | -       |
-| isSmall           | 大标题、小标题，默认为大标题              | `boolean`                   | `false` |
-| titleRowClassName | 标题一行的样式类名                        | `string`                    | -       |
-| titleClassName    | 标题的样式类名                            | `string`                    | -       |
-| showBackground    | 是否显示背景                              | `boolean`                   | `true`  |
-| defaultExpand     | 是否默认展开内容                          | `boolean`                   | `true`  |
+| 参数              | 说明                               | 类型                        | 默认值   |
+| ----------------- | ---------------------------------- | --------------------------- | -------- |
+| title             | 标题                               | `string`                    | -        |
+| addonBefore       | 标题前的图标，默认是一个色块       | `React.ReactNode`           | -        |
+| description       | 标题提示文案                       | `React.ReactNode`           | -        |
+| tooltip           | 默认展示问号提示                   | `React.ReactNode`           | -        |
+| addonAfter        | 标题后的内容                       | `React.ReactNode`           | -        |
+| size              | 小标题、中标题，默认为中标题       | `small \| middle \| large`  | `middle` |
+| titleRowClassName | 标题一行的样式类名                 | `string`                    | -        |
+| titleClassName    | 标题的样式类名                     | `string`                    | -        |
+| background        | 是否显示背景                       | `boolean`                   | `true`   |
 | expand            | 当前展开状态                              | `boolean`                   |         |
-| hasBottom         | 是否有默认下边距 16px                     | `boolean`                   | `false` |
-| spaceBottom       | 自定义下边距，优先级高于 hasBottom        | `number`                    | `0`     |
-| children          | 展开/收起的内容                           | `React.ReactNode`           | -       |
+| defaultExpand     | 是否默认展开内容                   | `boolean`                   | `true`   |
+| hasBottom         | 是否有默认下边距 16px              | `boolean`                   | `false`  |
+| spaceBottom       | 自定义下边距，优先级高于 hasBottom | `number`                    | `0`      |
+| children          | 展开/收起的内容                    | `React.ReactNode`           | -        |
 | onExpand          | 展开/收起时的回调                         | `(expand: boolean) => void` | -       |
diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
index 81a4ec567..833e4222f 100644
--- a/src/blockHeader/index.tsx
+++ b/src/blockHeader/index.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import './style.scss';
 
-export declare type SizeType = 'small' | 'middle' | undefined;
+export declare type SizeType = 'small' | 'middle' | 'large';
 
 function isControlled(props: IBlockHeaderProps) {
     return props.expand !== undefined;
@@ -15,9 +15,9 @@ export interface IBlockHeaderProps {
     /** 标题 */
     title: string;
     /** 标题前的图标，默认是一个色块 */
-    beforeTitle?: ReactNode;
-    /** 标题后的提示图标或文案 */
-    afterTitle?: ReactNode;
+    addonBefore?: ReactNode;
+    /** 标题后的提示说明文字 */
+    description?: ReactNode;
     /** 默认展示为问号的tooltip */
     tooltip?: ReactNode;
     /** 后缀自定义内容块 */
@@ -25,6 +25,7 @@ export interface IBlockHeaderProps {
     /**
      * 小标题 font-size: 12px; line-height: 32px
      * 中标题 font-size: 14px; line-height: 40px
+     * 大标题 font-size: 16px; line-height: 40px
      * 默认 中标题
      */
     size?: SizeType;
@@ -37,7 +38,7 @@ export interface IBlockHeaderProps {
     /** 标题的样式类名 */
     titleClassName?: string;
     /** 是否显示背景, 默认 true */
-    showBackground?: boolean;
+    background?: boolean;
     /** 当前展开状态 */
     expand?: boolean;
     /** 是否默认展开内容, 默认 true */
@@ -51,19 +52,19 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
     const prefixCls = 'dtc-block-header';
     const {
         title,
-        afterTitle = '',
+        description = '',
         tooltip = '',
         size = 'middle',
         hasBottom = false,
         spaceBottom = 0,
         titleRowClassName = '',
         titleClassName = '',
-        showBackground = true,
+        background = true,
         defaultExpand = true,
         addonAfter,
         expand,
         children = '',
-        beforeTitle = <div className={`${prefixCls}__beforeTitle-${size}`}></div>,
+        addonBefore = <div className={`${prefixCls}-addon-before--${size}`} />,
         onExpand,
     } = props;
 
@@ -75,10 +76,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const questionTooltip = tooltip && (
         <Tooltip title={tooltip}>
-            <QuestionCircleOutlined className={`${prefixCls}-after-title-icon`} />
+            <QuestionCircleOutlined />
         </Tooltip>
     );
-    const newAfterTitle = afterTitle || questionTooltip;
     let bottomStyle;
     if (hasBottom) bottomStyle = { marginBottom: 16 };
     if (spaceBottom) bottomStyle = { marginBottom: spaceBottom };
@@ -94,22 +94,25 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
             <div
                 className={classNames(
                     preTitleRowCls,
-                    `${preTitleRowCls}-${size}`,
+                    `${preTitleRowCls}--${size}`,
                     titleRowClassName,
                     {
-                        [`${preTitleRowCls}-background`]: showBackground,
+                        [`${preTitleRowCls}-background`]: background,
                         [`${preTitleRowCls}-pointer`]: children,
                     }
                 )}
                 onClick={() => handleExpand(!currentExpand)}
             >
                 <div className={`${prefixCls}-title-box`}>
-                    {beforeTitle ? (
-                        <div className={`${prefixCls}-before-title`}>{beforeTitle}</div>
+                    {addonBefore ? (
+                        <div className={`${prefixCls}-addon-before`}>{addonBefore}</div>
                     ) : null}
                     <div className={`${prefixCls}-title ${titleClassName}`}>{title}</div>
-                    {newAfterTitle ? (
-                        <div className={`${prefixCls}-after-title`}>{newAfterTitle}</div>
+                    {questionTooltip ? (
+                        <div className={`${prefixCls}-tooltip`}>{questionTooltip}</div>
+                    ) : null}
+                    {description ? (
+                        <div className={`${prefixCls}-description`}>{description}</div>
                     ) : null}
                 </div>
                 {addonAfter && <div className={`${prefixCls}-addonAfter-box`}>{addonAfter}</div>}
@@ -120,8 +123,11 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
                     </div>
                 )}
             </div>
-
-            <div className={`${prefixCls}-content ${currentExpand ? '' : 'hide'}`}>{children}</div>
+            {children && (
+                <div className={`${prefixCls}-content ${currentExpand ? '' : 'hide'}`}>
+                    {children}
+                </div>
+            )}
         </div>
     );
 };
diff --git a/src/blockHeader/style.scss b/src/blockHeader/style.scss
index a872a457e..e5f136f8a 100644
--- a/src/blockHeader/style.scss
+++ b/src/blockHeader/style.scss
@@ -6,7 +6,15 @@ $card_prefix: "dtc-block-header";
         display: flex;
         align-items: center;
         justify-content: space-between;
-        &-middle {
+        &--large {
+            .#{$card_prefix}-title-box {
+                line-height: 24px;
+                .#{$card_prefix}-title {
+                    font-size: 16px;
+                }
+            }
+        }
+        &--middle {
             .#{$card_prefix}-title-box {
                 line-height: 22px;
                 .#{$card_prefix}-title {
@@ -14,7 +22,7 @@ $card_prefix: "dtc-block-header";
                 }
             }
         }
-        &-small {
+        &--small {
             .#{$card_prefix}-title-box {
                 line-height: 20px;
                 .#{$card_prefix}-title {
@@ -26,10 +34,11 @@ $card_prefix: "dtc-block-header";
             padding: 0 12px;
             background-color: #F9F9FA;
             &.#{$card_prefix}-title-row {
-                &-middle {
+                &--middle,
+                &--large {
                     height: 40px;
                 }
-                &-small {
+                &--small {
                     height: 32px;
                 }
             }
@@ -42,25 +51,42 @@ $card_prefix: "dtc-block-header";
             flex: 1;
             display: flex;
             align-items: center;
-            .#{$card_prefix}-before-title {
+            .#{$card_prefix}-addon-before {
                 margin-right: 8px;
+                color: #1D78FF;
+                &--middle,
+                &--small {
+                    width: 4px;
+                    height: 16px;
+                    background-color: #1D78FF;
+                }
+                &--large {
+                    width: 4px;
+                    height: 20px;
+                    background-color: #1D78FF;
+                }
+            }
+            .#{$card_prefix}-tooltip {
+                display: flex;
+                margin-right: 4px;
+                font-size: 16px;
+                color: #B1B4C5;
             }
             .#{$card_prefix}-title {
                 color: #3D446E;
                 font-weight: 500;
                 margin-right: 4px;
             }
-            .#{$card_prefix}-after-title {
+            .#{$card_prefix}-description {
                 display: flex;
                 align-items: center;
                 color: #8B8FA8;
                 font-size: 12px;
-                &-icon {
-                    font-size: 16px;
-                    color: #B1B4C5;
-                }
             }
         }
+        .#{$card_prefix}-addonAfter-box {
+            color: #8B8FA8;
+        }
 
         .#{$card_prefix}-collapse-box {
             color: #8B8FA8;
@@ -89,14 +115,4 @@ $card_prefix: "dtc-block-header";
             display: none;
         }
     }
-    &__beforeTitle {
-        &-middle {
-            width: 4px;
-            height: 16px;
-            background-color: #1D78FF;
-        }
-        &-small {
-            @extend .#{$card_prefix}__beforeTitle-middle;
-        }
-    }
 }

From 1324ce1106ff6f35902d42f9611c997e72c5120a Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Tue, 3 Sep 2024 15:30:44 +0800
Subject: [PATCH 2/7] feat(blockheader): supprt padding for blockheader
 children

---
 src/blockHeader/index.tsx  |  4 +---
 src/blockHeader/style.scss | 10 ++++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
index 833e4222f..14928b2e2 100644
--- a/src/blockHeader/index.tsx
+++ b/src/blockHeader/index.tsx
@@ -124,9 +124,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
                 )}
             </div>
             {children && (
-                <div className={`${prefixCls}-content ${currentExpand ? '' : 'hide'}`}>
-                    {children}
-                </div>
+                <div className={`${prefixCls}-content ${currentExpand ? 'active' : ''}`}>{children}</div>
             )}
         </div>
     );
diff --git a/src/blockHeader/style.scss b/src/blockHeader/style.scss
index e5f136f8a..602d412e2 100644
--- a/src/blockHeader/style.scss
+++ b/src/blockHeader/style.scss
@@ -111,8 +111,14 @@ $card_prefix: "dtc-block-header";
         }
     }
     &-content {
-        &.hide {
-            display: none;
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+        transition: opacity 0.5s ease, height 0.5s ease;
+        &.active {
+            opacity: 1;
+            padding: 16px 24px;
+            height: auto;
         }
     }
 }

From c6e4d7bca60b612b412938eaf1a7bd60173a8659 Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Tue, 3 Sep 2024 20:21:01 +0800
Subject: [PATCH 3/7] feat(blockheader): change tooltip to TooltipProps and use
 toTooltipProps

---
 src/blockHeader/demos/addonAfter.tsx |  1 +
 src/blockHeader/index.md             |  2 +-
 src/blockHeader/index.tsx            | 26 +++++++++++++++++++++-----
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/blockHeader/demos/addonAfter.tsx b/src/blockHeader/demos/addonAfter.tsx
index ccd1c534b..01f89f594 100644
--- a/src/blockHeader/demos/addonAfter.tsx
+++ b/src/blockHeader/demos/addonAfter.tsx
@@ -9,6 +9,7 @@ export default () => (
             background={false}
             title="分类标题"
             addonAfter={<Input placeholder="请输入" />}
+            tooltip={{ title: '这里展示问号提示' }}
         />
     </Space>
 );
diff --git a/src/blockHeader/index.md b/src/blockHeader/index.md
index d494968cf..5ee40e5c6 100644
--- a/src/blockHeader/index.md
+++ b/src/blockHeader/index.md
@@ -30,7 +30,7 @@ demo:
 | title             | 标题                               | `string`                    | -        |
 | addonBefore       | 标题前的图标，默认是一个色块       | `React.ReactNode`           | -        |
 | description       | 标题提示文案                       | `React.ReactNode`           | -        |
-| tooltip           | 默认展示问号提示                   | `React.ReactNode`           | -        |
+| tooltip           | 默认展示问号提示                   | `TooltipProps \| React.ReactNode` | -        |
 | addonAfter        | 标题后的内容                       | `React.ReactNode`           | -        |
 | size              | 小标题、中标题，默认为中标题       | `small \| middle \| large`  | `middle` |
 | titleRowClassName | 标题一行的样式类名                 | `string`                    | -        |
diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
index 14928b2e2..85724f516 100644
--- a/src/blockHeader/index.tsx
+++ b/src/blockHeader/index.tsx
@@ -1,10 +1,24 @@
 import React, { ReactNode, useState } from 'react';
 import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
+import { Tooltip, TooltipProps } from 'antd';
 import classNames from 'classnames';
 
 import './style.scss';
 
+function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null {
+    if (!tooltip) {
+        return null;
+    }
+    if (typeof tooltip === 'object' && !React.isValidElement(tooltip)) {
+        return tooltip as TooltipProps;
+    }
+    return {
+        title: tooltip,
+    };
+}
+
+export type LabelTooltipType = TooltipProps | React.ReactNode;
+
 export declare type SizeType = 'small' | 'middle' | 'large';
 
 function isControlled(props: IBlockHeaderProps) {
@@ -19,8 +33,8 @@ export interface IBlockHeaderProps {
     /** 标题后的提示说明文字 */
     description?: ReactNode;
     /** 默认展示为问号的tooltip */
-    tooltip?: ReactNode;
-    /** 后缀自定义内容块 */
+    tooltip?: LabelTooltipType;
+    // 后缀自定义内容块
     addonAfter?: ReactNode;
     /**
      * 小标题 font-size: 12px; line-height: 32px
@@ -74,8 +88,10 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const preTitleRowCls = `${prefixCls}-title-row`;
 
-    const questionTooltip = tooltip && (
-        <Tooltip title={tooltip}>
+    const tooltipProps = toTooltipProps(tooltip);
+
+    const questionTooltip = tooltipProps && (
+        <Tooltip {...tooltipProps}>
             <QuestionCircleOutlined />
         </Tooltip>
     );

From 953f6b721e4364acc9f63990dcd27768a5c3352e Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Fri, 6 Sep 2024 11:48:53 +0800
Subject: [PATCH 4/7] feat(blockheader): change classname to use BEM

---
 src/blockHeader/index.tsx  | 34 +++++++++---------
 src/blockHeader/style.scss | 70 +++++++++++++++++++-------------------
 2 files changed, 51 insertions(+), 53 deletions(-)

diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
index 85724f516..23313970f 100644
--- a/src/blockHeader/index.tsx
+++ b/src/blockHeader/index.tsx
@@ -78,7 +78,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
         addonAfter,
         expand,
         children = '',
-        addonBefore = <div className={`${prefixCls}-addon-before--${size}`} />,
+        addonBefore = <div className={`title__addon-before--${size}`} />,
         onExpand,
     } = props;
 
@@ -86,7 +86,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const currentExpand = isControlled(props) ? expand : internalExpand;
 
-    const preTitleRowCls = `${prefixCls}-title-row`;
+    const preTitleRowCls = `${prefixCls}__title`;
 
     const tooltipProps = toTooltipProps(tooltip);
 
@@ -113,34 +113,32 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
                     `${preTitleRowCls}--${size}`,
                     titleRowClassName,
                     {
-                        [`${preTitleRowCls}-background`]: background,
-                        [`${preTitleRowCls}-pointer`]: children,
+                        [`${preTitleRowCls}--background`]: background,
+                        [`${preTitleRowCls}--pointer`]: children,
                     }
                 )}
                 onClick={() => handleExpand(!currentExpand)}
             >
-                <div className={`${prefixCls}-title-box`}>
-                    {addonBefore ? (
-                        <div className={`${prefixCls}-addon-before`}>{addonBefore}</div>
-                    ) : null}
-                    <div className={`${prefixCls}-title ${titleClassName}`}>{title}</div>
+                <div className="title__box">
+                    {addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}
+                    <div className={`title__text ${titleClassName}`}>{title}</div>
                     {questionTooltip ? (
-                        <div className={`${prefixCls}-tooltip`}>{questionTooltip}</div>
-                    ) : null}
-                    {description ? (
-                        <div className={`${prefixCls}-description`}>{description}</div>
+                        <div className={`title__tooltip`}>{questionTooltip}</div>
                     ) : null}
+                    {description ? <div className={`title__description`}>{description}</div> : null}
                 </div>
-                {addonAfter && <div className={`${prefixCls}-addonAfter-box`}>{addonAfter}</div>}
+                {addonAfter && <div className={`title__addon-after`}>{addonAfter}</div>}
                 {children && (
-                    <div className={`${prefixCls}-collapse-box`}>
-                        <div className="text">{currentExpand ? '收起' : '展开'}</div>
-                        <UpOutlined className={`icon ${currentExpand ? 'up' : 'down'}`} />
+                    <div className={`title__collapse`}>
+                        <div className="text">{expand ? '收起' : '展开'}</div>
+                        <UpOutlined className={`icon ${expand ? 'up' : 'down'}`} />
                     </div>
                 )}
             </div>
             {children && (
-                <div className={`${prefixCls}-content ${currentExpand ? 'active' : ''}`}>{children}</div>
+                <div className={`${prefixCls}__content ${currentExpand ? 'active' : ''}`}>
+                    {children}
+                </div>
             )}
         </div>
     );
diff --git a/src/blockHeader/style.scss b/src/blockHeader/style.scss
index 602d412e2..9cda431f0 100644
--- a/src/blockHeader/style.scss
+++ b/src/blockHeader/style.scss
@@ -1,7 +1,7 @@
 $card_prefix: "dtc-block-header";
 
 .#{$card_prefix} {
-    &-title-row {
+    &__title {
         border-radius: 4px;
         display: flex;
         align-items: center;
@@ -30,10 +30,10 @@ $card_prefix: "dtc-block-header";
                 }
             }
         }
-        &-background {
+        &--background {
             padding: 0 12px;
             background-color: #F9F9FA;
-            &.#{$card_prefix}-title-row {
+            &.#{$card_prefix}__title {
                 &--middle,
                 &--large {
                     height: 40px;
@@ -43,15 +43,16 @@ $card_prefix: "dtc-block-header";
                 }
             }
         }
-        &-pointer {
+        &--pointer {
             cursor: pointer;
         }
-
-        .#{$card_prefix}-title-box {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            .#{$card_prefix}-addon-before {
+        .title {
+            &__box {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
+            &__addon-before {
                 margin-right: 8px;
                 color: #1D78FF;
                 &--middle,
@@ -66,51 +67,50 @@ $card_prefix: "dtc-block-header";
                     background-color: #1D78FF;
                 }
             }
-            .#{$card_prefix}-tooltip {
+            &__tooltip {
                 display: flex;
                 margin-right: 4px;
                 font-size: 16px;
                 color: #B1B4C5;
             }
-            .#{$card_prefix}-title {
+            &__text {
                 color: #3D446E;
                 font-weight: 500;
                 margin-right: 4px;
             }
-            .#{$card_prefix}-description {
+            &__description {
                 display: flex;
                 align-items: center;
                 color: #8B8FA8;
                 font-size: 12px;
             }
-        }
-        .#{$card_prefix}-addonAfter-box {
-            color: #8B8FA8;
-        }
-
-        .#{$card_prefix}-collapse-box {
-            color: #8B8FA8;
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            user-select: none;
-            .text {
-                font-size: 12px;
-                margin: 0 4px;
+            &__addon-after {
+                color: #8B8FA8;
             }
-            .icon {
-                font-size: 16px;
-                transition: transform 0.4s;
-                &.down {
-                    transform: rotate(-180deg);
+            &__collapse {
+                color: #8B8FA8;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                user-select: none;
+                .text {
+                    font-size: 12px;
+                    margin: 0 4px;
                 }
-                &.up {
-                    transform: rotate(0deg);
+                .icon {
+                    font-size: 16px;
+                    transition: transform 0.4s;
+                    &.down {
+                        transform: rotate(-180deg);
+                    }
+                    &.up {
+                        transform: rotate(0deg);
+                    }
                 }
             }
         }
     }
-    &-content {
+    &__content {
         opacity: 0;
         height: 0;
         overflow: hidden;

From 934eee6703fe32fa95ab642f01fd0fdeb220583a Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Fri, 6 Sep 2024 16:07:32 +0800
Subject: [PATCH 5/7] feat(blockheader): change classname and add style

---
 .../__snapshots__/blockHeader.test.tsx.snap   | 20 +++++-----
 .../__tests__/blockHeader.test.tsx            | 38 +++++++------------
 src/blockHeader/index.tsx                     | 28 ++++++--------
 3 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/src/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap b/src/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap
index e35fae0b6..21fbdb5b0 100644
--- a/src/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap
+++ b/src/blockHeader/__tests__/__snapshots__/blockHeader.test.tsx.snap
@@ -9,20 +9,20 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
         class="dtc-block-header"
       >
         <div
-          class="dtc-block-header-title-row dtc-block-header-title-row--middle dtc-block-header-title-row-background"
+          class="dtc-block-header__title dtc-block-header__title--middle dtc-block-header__title--background"
         >
           <div
-            class="dtc-block-header-title-box"
+            class="title__box"
           >
             <div
-              class="dtc-block-header-addon-before"
+              class="title__addon-before"
             >
               <div
-                class="dtc-block-header-addon-before--middle"
+                class="title__addon-before--middle"
               />
             </div>
             <div
-              class="dtc-block-header-title "
+              class="title__text"
             >
               标题1
             </div>
@@ -36,20 +36,20 @@ exports[`test BlockHeader render should render BlockHeader success render 1`] =
       class="dtc-block-header"
     >
       <div
-        class="dtc-block-header-title-row dtc-block-header-title-row--middle dtc-block-header-title-row-background"
+        class="dtc-block-header__title dtc-block-header__title--middle dtc-block-header__title--background"
       >
         <div
-          class="dtc-block-header-title-box"
+          class="title__box"
         >
           <div
-            class="dtc-block-header-addon-before"
+            class="title__addon-before"
           >
             <div
-              class="dtc-block-header-addon-before--middle"
+              class="title__addon-before--middle"
             />
           </div>
           <div
-            class="dtc-block-header-title "
+            class="title__text"
           >
             标题1
           </div>
diff --git a/src/blockHeader/__tests__/blockHeader.test.tsx b/src/blockHeader/__tests__/blockHeader.test.tsx
index 3c2d5a894..6f082db81 100644
--- a/src/blockHeader/__tests__/blockHeader.test.tsx
+++ b/src/blockHeader/__tests__/blockHeader.test.tsx
@@ -13,8 +13,9 @@ const props2: IBlockHeaderProps = {
     description: '说明文字',
     addonAfter: <div className="test-button-after">新增按钮</div>,
     size: 'small' as SizeType,
-    titleRowClassName: 'test-row-className',
-    titleClassName: 'test-title-className',
+    className: 'test__className',
+    style: { height: '100px' },
+    hasBottom: true,
 };
 const props3: IBlockHeaderProps = {
     title: 'hover',
@@ -44,18 +45,8 @@ describe('test BlockHeader render', () => {
     test('should render BlockHeader props default in BlockHeader', () => {
         const { container } = render(<BlockHeader title="测试" background />);
         const wrap = container.firstChild;
-        expect(wrap!.firstChild!.firstChild!.firstChild).toHaveClass(`${prefixCls}-addon-before`);
-        fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
-    });
-    test('should render BlockHeader with different props', () => {
-        const { container, getByText } = render(<BlockHeader {...props2} />);
-        const wrap = container.firstChild;
-        expect(wrap).toHaveClass(`${prefixCls}`);
-        expect(wrap!.firstChild).toHaveClass(`test-row-className`);
-        expect(getByText('标题2')).toHaveClass('test-title-className');
-        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-description`);
-        expect(getByText('新增按钮')).toHaveClass(`test-button-after`);
-        expect(getByText('Icon')).toBeTruthy();
+        expect(wrap!.firstChild!.firstChild!.firstChild).toHaveClass('title__addon-before');
+        fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
     });
     test('should render BlockHeader test click event', () => {
         const onChange = jest.fn();
@@ -65,7 +56,7 @@ describe('test BlockHeader render', () => {
             </BlockHeader>
         );
         expect(getByText('收起')).toBeTruthy();
-        fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
+        fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
         expect(getByText('展开')).toBeTruthy();
         expect(onChange).toHaveBeenCalledTimes(1);
     });
@@ -76,16 +67,16 @@ describe('test BlockHeader render', () => {
             </BlockHeader>
         );
         expect(getByText('收起')).toBeTruthy();
-        fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
+        fireEvent.click(document.getElementsByClassName(`${prefixCls}__title`)[0]);
         expect(getByText('展开')).toBeTruthy();
     });
     test('should render BlockHeader with different props', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild;
-        expect(wrap).toHaveClass(`${prefixCls}`);
-        expect(wrap!.firstChild).toHaveClass(`test-row-className`);
-        expect(getByText('标题2')).toHaveClass('test-title-className');
-        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-description`);
+        expect(wrap).toHaveClass(`${prefixCls} test__className`);
+        expect(wrap).toHaveStyle({ height: '100px', marginBottom: '16px' });
+        expect(getByText('标题2')).toHaveClass('title__text');
+        expect(getByText('说明文字')).toHaveClass('title__description');
         expect(getByText('Icon')).toBeTruthy();
     });
     test('should render BlockHeader background success', () => {
@@ -97,10 +88,9 @@ describe('test BlockHeader render', () => {
     test('should render BlockHeader className when isSmall is small', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild!;
-        expect(wrap).toHaveClass(`${prefixCls}`);
-        expect(wrap.firstChild).toHaveClass(`test-row-className`);
-        expect(getByText('标题2')).toHaveClass('test-title-className');
-        expect(getByText('说明文字')).toHaveClass(`${prefixCls}-description`);
+        expect(wrap).toHaveClass(`${prefixCls} test__className`);
+        expect(getByText('标题2')).toHaveClass('title__text');
+        expect(getByText('说明文字')).toHaveClass('title__description');
         expect(getByText('Icon')).toBeTruthy();
     });
 
diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
index 23313970f..a31f7e38b 100644
--- a/src/blockHeader/index.tsx
+++ b/src/blockHeader/index.tsx
@@ -48,9 +48,9 @@ export interface IBlockHeaderProps {
     /** 自定义 Bottom 值 */
     spaceBottom?: number;
     /** 标题一行的样式类名 */
-    titleRowClassName?: string;
+    className?: string;
     /** 标题的样式类名 */
-    titleClassName?: string;
+    style?: React.CSSProperties;
     /** 是否显示背景, 默认 true */
     background?: boolean;
     /** 当前展开状态 */
@@ -71,8 +71,8 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
         size = 'middle',
         hasBottom = false,
         spaceBottom = 0,
-        titleRowClassName = '',
-        titleClassName = '',
+        className = '',
+        style = {},
         background = true,
         defaultExpand = true,
         addonAfter,
@@ -95,6 +95,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
             <QuestionCircleOutlined />
         </Tooltip>
     );
+
     let bottomStyle;
     if (hasBottom) bottomStyle = { marginBottom: 16 };
     if (spaceBottom) bottomStyle = { marginBottom: spaceBottom };
@@ -106,22 +107,17 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
     };
 
     return (
-        <div className={`${prefixCls}`} style={bottomStyle}>
+        <div className={classNames(`${prefixCls}`, className)} style={{ ...bottomStyle, ...style }}>
             <div
-                className={classNames(
-                    preTitleRowCls,
-                    `${preTitleRowCls}--${size}`,
-                    titleRowClassName,
-                    {
-                        [`${preTitleRowCls}--background`]: background,
-                        [`${preTitleRowCls}--pointer`]: children,
-                    }
-                )}
-                onClick={() => handleExpand(!currentExpand)}
+                className={classNames(preTitleRowCls, `${preTitleRowCls}--${size}`, {
+                    [`${preTitleRowCls}--background`]: background,
+                    [`${preTitleRowCls}--pointer`]: children,
+                })}
+                onClick={() => handleExpand(!expand)}
             >
                 <div className="title__box">
                     {addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}
-                    <div className={`title__text ${titleClassName}`}>{title}</div>
+                    <div className="title__text">{title}</div>
                     {questionTooltip ? (
                         <div className={`title__tooltip`}>{questionTooltip}</div>
                     ) : null}

From b275b5e835c02506460742f586d96389a593aee8 Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Fri, 6 Sep 2024 16:50:04 +0800
Subject: [PATCH 6/7] feat(blockheader): change doc and ts

---
 src/blockHeader/index.md  | 6 +++---
 src/blockHeader/index.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/blockHeader/index.md b/src/blockHeader/index.md
index 5ee40e5c6..19e3b083b 100644
--- a/src/blockHeader/index.md
+++ b/src/blockHeader/index.md
@@ -30,11 +30,11 @@ demo:
 | title             | 标题                               | `string`                    | -        |
 | addonBefore       | 标题前的图标，默认是一个色块       | `React.ReactNode`           | -        |
 | description       | 标题提示文案                       | `React.ReactNode`           | -        |
-| tooltip           | 默认展示问号提示                   | `TooltipProps \| React.ReactNode` | -        |
+| tooltip           | 默认展示问号提示                   | `TooltipProps \| TooltipProps['title']` | -        |
 | addonAfter        | 标题后的内容                       | `React.ReactNode`           | -        |
 | size              | 小标题、中标题，默认为中标题       | `small \| middle \| large`  | `middle` |
-| titleRowClassName | 标题一行的样式类名                 | `string`                    | -        |
-| titleClassName    | 标题的样式类名                     | `string`                    | -        |
+| className     | 标题一行的样式类名                 | `string`                                | -        |
+| style         | 标题的样式                         | `React.CSSProperties`                   | -        |
 | background        | 是否显示背景                       | `boolean`                   | `true`   |
 | expand            | 当前展开状态                              | `boolean`                   |         |
 | defaultExpand     | 是否默认展开内容                   | `boolean`                   | `true`   |
diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
index a31f7e38b..3a6e245eb 100644
--- a/src/blockHeader/index.tsx
+++ b/src/blockHeader/index.tsx
@@ -17,7 +17,7 @@ function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null {
     };
 }
 
-export type LabelTooltipType = TooltipProps | React.ReactNode;
+export type LabelTooltipType = TooltipProps | TooltipProps['title'];
 
 export declare type SizeType = 'small' | 'middle' | 'large';
 

From 7ed1a52e497cba46f8b1474e08f1365e6f56229d Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Mon, 9 Sep 2024 15:46:41 +0800
Subject: [PATCH 7/7] feat(blockheader): use utils toTooltipProps and use BEM
 style

---
 src/blockHeader/index.tsx  | 59 +++++++++++++++++---------------------
 src/blockHeader/style.scss | 27 +++++++++--------
 src/copy/demos/basic.tsx   | 10 ++-----
 3 files changed, 45 insertions(+), 51 deletions(-)

diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
index 3a6e245eb..67117aee8 100644
--- a/src/blockHeader/index.tsx
+++ b/src/blockHeader/index.tsx
@@ -1,24 +1,11 @@
 import React, { ReactNode, useState } from 'react';
 import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
-import { Tooltip, TooltipProps } from 'antd';
+import { Tooltip } from 'antd';
 import classNames from 'classnames';
 
+import { LabelTooltipType, toTooltipProps } from '../utils';
 import './style.scss';
 
-function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null {
-    if (!tooltip) {
-        return null;
-    }
-    if (typeof tooltip === 'object' && !React.isValidElement(tooltip)) {
-        return tooltip as TooltipProps;
-    }
-    return {
-        title: tooltip,
-    };
-}
-
-export type LabelTooltipType = TooltipProps | TooltipProps['title'];
-
 export declare type SizeType = 'small' | 'middle' | 'large';
 
 function isControlled(props: IBlockHeaderProps) {
@@ -34,7 +21,7 @@ export interface IBlockHeaderProps {
     description?: ReactNode;
     /** 默认展示为问号的tooltip */
     tooltip?: LabelTooltipType;
-    // 后缀自定义内容块
+    /**  后缀自定义内容块 */
     addonAfter?: ReactNode;
     /**
      * 小标题 font-size: 12px; line-height: 32px
@@ -62,12 +49,15 @@ export interface IBlockHeaderProps {
     /** 展开/收起时的回调 */
     onExpand?: (expand: boolean) => void;
 }
+
+const prefixCls = 'dtc-block-header';
+const preTitleRowCls = `${prefixCls}__title`;
+
 const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
-    const prefixCls = 'dtc-block-header';
     const {
         title,
         description = '',
-        tooltip = '',
+        tooltip,
         size = 'middle',
         hasBottom = false,
         spaceBottom = 0,
@@ -86,16 +76,8 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const currentExpand = isControlled(props) ? expand : internalExpand;
 
-    const preTitleRowCls = `${prefixCls}__title`;
-
     const tooltipProps = toTooltipProps(tooltip);
 
-    const questionTooltip = tooltipProps && (
-        <Tooltip {...tooltipProps}>
-            <QuestionCircleOutlined />
-        </Tooltip>
-    );
-
     let bottomStyle;
     if (hasBottom) bottomStyle = { marginBottom: 16 };
     if (spaceBottom) bottomStyle = { marginBottom: spaceBottom };
@@ -113,26 +95,39 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
                     [`${preTitleRowCls}--background`]: background,
                     [`${preTitleRowCls}--pointer`]: children,
                 })}
-                onClick={() => handleExpand(!expand)}
+                onClick={() => handleExpand(!currentExpand)}
             >
                 <div className="title__box">
                     {addonBefore ? <div className="title__addon-before">{addonBefore}</div> : null}
                     <div className="title__text">{title}</div>
-                    {questionTooltip ? (
-                        <div className={`title__tooltip`}>{questionTooltip}</div>
+                    {tooltipProps?.title ? (
+                        <div className={`title__tooltip`}>
+                            <Tooltip {...tooltipProps}>
+                                <QuestionCircleOutlined />
+                            </Tooltip>
+                        </div>
                     ) : null}
                     {description ? <div className={`title__description`}>{description}</div> : null}
                 </div>
                 {addonAfter && <div className={`title__addon-after`}>{addonAfter}</div>}
                 {children && (
                     <div className={`title__collapse`}>
-                        <div className="text">{expand ? '收起' : '展开'}</div>
-                        <UpOutlined className={`icon ${expand ? 'up' : 'down'}`} />
+                        <div className="collapse__text">{currentExpand ? '收起' : '展开'}</div>
+                        <UpOutlined
+                            className={classNames('collapse__icon', {
+                                'collapse__icon--up': currentExpand,
+                                'collapse__icon--down': !currentExpand,
+                            })}
+                        />
                     </div>
                 )}
             </div>
             {children && (
-                <div className={`${prefixCls}__content ${currentExpand ? 'active' : ''}`}>
+                <div
+                    className={classNames(`${prefixCls}__content`, {
+                        [`${prefixCls}__content--active`]: currentExpand,
+                    })}
+                >
                     {children}
                 </div>
             )}
diff --git a/src/blockHeader/style.scss b/src/blockHeader/style.scss
index 9cda431f0..31285a51a 100644
--- a/src/blockHeader/style.scss
+++ b/src/blockHeader/style.scss
@@ -72,6 +72,7 @@ $card_prefix: "dtc-block-header";
                 margin-right: 4px;
                 font-size: 16px;
                 color: #B1B4C5;
+                cursor: pointer;
             }
             &__text {
                 color: #3D446E;
@@ -93,18 +94,20 @@ $card_prefix: "dtc-block-header";
                 align-items: center;
                 cursor: pointer;
                 user-select: none;
-                .text {
-                    font-size: 12px;
-                    margin: 0 4px;
-                }
-                .icon {
-                    font-size: 16px;
-                    transition: transform 0.4s;
-                    &.down {
-                        transform: rotate(-180deg);
+                .collapse {
+                    &__text {
+                        font-size: 12px;
+                        margin: 0 4px;
                     }
-                    &.up {
-                        transform: rotate(0deg);
+                    &__icon {
+                        font-size: 16px;
+                        transition: transform 0.4s;
+                        &--down {
+                            transform: rotate(-180deg);
+                        }
+                        &--up {
+                            transform: rotate(0deg);
+                        }
                     }
                 }
             }
@@ -115,7 +118,7 @@ $card_prefix: "dtc-block-header";
         height: 0;
         overflow: hidden;
         transition: opacity 0.5s ease, height 0.5s ease;
-        &.active {
+        &--active {
             opacity: 1;
             padding: 16px 24px;
             height: auto;
diff --git a/src/copy/demos/basic.tsx b/src/copy/demos/basic.tsx
index 31c1ba58b..78aa047a5 100644
--- a/src/copy/demos/basic.tsx
+++ b/src/copy/demos/basic.tsx
@@ -9,21 +9,17 @@ export default () => {
     return (
         <Space direction="vertical">
             <div>
-                <BlockHeader title="使用 tooltip 对象" showBackground={false} size="small" />
+                <BlockHeader title="使用 tooltip 对象" background={false} size="small" />
                 <Copy text={text} tooltip={{ title: '使用 tooltip 对象，复制该文本' }} />
                 <p>{text}</p>
             </div>
             <div>
-                <BlockHeader title="使用 React.ReactNode" showBackground={false} size="small" />
+                <BlockHeader title="使用 React.ReactNode" background={false} size="small" />
                 <Copy text={text} tooltip="使用 React.ReactNode，复制该文本" />
                 <p>{text}</p>
             </div>
             <div>
-                <BlockHeader
-                    title={`使用 ()=>React.ReactNode`}
-                    showBackground={false}
-                    size="small"
-                />
+                <BlockHeader title={`使用 ()=>React.ReactNode`} background={false} size="small" />
                 <Copy text={text} tooltip={() => `使用 ()=>React.ReactNode，复制该文本`} />
                 <p>{text}</p>
             </div>