fix(blockheader): add min-width for title (#533)

* fix(blockheader): add min-width for title

* fix: remove sass_binary_site

Author: LuckyFBB

.yarnrc

@@ -1,3 +1,2 @@
 registry "https://registry.yarnpkg.com"
 
-sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"

src/components/blockHeader/style.scss

@@ -40,6 +40,7 @@ $card_prefix: "dtc-block-header";
             flex: 1;
             display: flex;
             align-items: center;
+            min-width: 0;
             .#{$card_prefix}-before-title {
                 margin-right: 8px;
                 .default {
@@ -55,6 +56,8 @@ $card_prefix: "dtc-block-header";
                 color: #3D446E;
                 font-weight: 500;
                 margin-right: 4px;
+                flex: 1;
+                min-width: 0;
             }
             .#{$card_prefix}-after-title {
                 display: flex;

src/stories/components/blockHeader/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { PieChartOutlined } from '@ant-design/icons';
 import BlockHeader from '../../../components/blockHeader';
 import EllipsisText from '../../../components/ellipsisText';
+import { Button } from 'antd';
 
 export default function BlockHeaderRender() {
     const style = {
@@ -30,7 +31,27 @@ export default function BlockHeaderRender() {
                 Hello World!
             </BlockHeader>
             <p style={style}>7、标题超长</p>
-            <BlockHeader title={<EllipsisText maxWidth={400} value="标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长" />} />
+            <BlockHeader
+                title={
+                    <EllipsisText
+                        maxWidth={400}
+                        value="标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长"
+                    />
+                }
+            />
+            <p style={style}>8、标题超长且有 afterTitle</p>
+            <div style={{ width: '50%' }}>
+                <BlockHeader
+                    title={
+                        <EllipsisText
+                            maxWidth={'100%'}
+                            value="标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长"
+                        />
+                    }
+                    afterTitle="这是 afterTitle"
+                    addonAfter={<Button size="small">选择</Button>}
+                />
+            </div>
             <br />
 
             <h3>大标题 + 无背景</h3>