diff --git a/.dumi/theme/locales/en.json b/.dumi/theme/locales/en.json
index 976e6861..ad8ef3c1 100644
--- a/.dumi/theme/locales/en.json
+++ b/.dumi/theme/locales/en.json
@@ -272,16 +272,16 @@
   "经历了海量数据场景下的严苛考验，蚂蚁集团自研了数据库、云原生、隐私计算、图计算为代表的数字化“根技术”": "Having experienced the severe test under the massive data scenario, Ant Group has self-developed the digital “root technology” represented by database, cloud native, privacy computing and graph computing.",
   "丰富图表，选用自如": "Rich Chart, Choose Freely",
   "数据驱动，高度易用，可扩展的可视化图形语法": "Data-driven, highly easy to use, extensible visual graphics syntax",
-  "开箱即用的多维可视分析表格": "Multi-dimensional visual analysis form out of the box",
-  "便捷的关系数据可视化引擎与图分析工具": "Convenient relational data visualization engine and graph analysis tool",
+  "开箱即用的多维可视分析表格": "Multi-dimensional visual analysis form out of the box.",
+  "便捷的关系数据可视化引擎与图分析工具": "Convenient relational data visualization engine and graph analysis tool.",
   "散点图 (3D图表)": "Scatter Plot (3D Chart)",
-  "高性能/高渲染质量的地理空间数据可视化框架": "High performance/high render quality geospatial data visualization framework",
+  "高性能/高渲染质量的地理空间数据可视化框架": "High performance/high render quality geospatial data visualization framework.",
   "统计图表 (移动端)": "Statistical Charts (Mobile)",
-  "专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境": "Focus on mobile visualization solutions, compatible with H5/Mini Program/Weex and other multi-terminal environments",
+  "专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境": "Focus on mobile visualization solutions, compatible with H5/Mini Program/Weex and other multi-terminal environments.",
   "树形图表 (移动端)": "Tree Chart (Mobile)",
   "思维导图": "Mind Map",
-  "一款可以快速、流畅运行于移动设备中的图可视化引擎": "A graphical visualization engine that runs fast and smoothly on mobile devices",
-  "极易定制、开箱即用、数据驱动的图编辑引擎": "Easy to customize, out of the box, data-driven graph editing engine",
+  "一款可以快速、流畅运行于移动设备中的图可视化引擎": "A graphical visualization engine that runs fast and smoothly on mobile devices.",
+  "极易定制、开箱即用、数据驱动的图编辑引擎": "Easy to customize, out of the box, data-driven graph editing engine.",
   "树形图表": "Tree Chart",
   "地图 (3D图表)": "Map (3D Chart)",
   "矩形式树图 (移动端)": "Heat Tree Map (Mobile)",
@@ -311,7 +311,7 @@
   "让普通应用低成本享受 Serverless 体验，帮助企业降本增效！": "Let common applications enjoy Serverless experience at low cost to help enterprises reduce costs and increase efficiency!",
   "产品首页": "HomePage",
   "使用文档": "Docs",
-  "伊利诺伊大学计算机科学客座教授H2O.ai 首席科学家，G2 项目顾问": "Visiting Professor of Computer Science at the University of Illinois, Principal Scientist at H2O.ai and Advisor to the G2 project",
+  "伊利诺伊大学计算机科学客座教授H2O.ai 首席科学家，G2 项目顾问": "Visiting Professor of Computer Science at the University of Illinois, Principal Scientist at H2O.ai and Advisor to the G2 project.",
   "在多年可视化设计与开发的基础上，蚂蚁金服推出了 AntV 产品，这是工业界基础可视化语法与实践方面发出的最强声音，也是工业界与学术界一道推进可视化研发进展的最佳利器。": "Building on years of visualization design and development, Ant Financial launched AntV, the industry's strongest voice in basic visualization grammar and practice, and the best tool for industry to work with academia to advance visualization research and development.",
   "设计，让数据美而简单，让可视化更普惠。好策略、好资产助力好报表、好产品。": "Design, make the data beautiful and simple, make the visualization more inclusive. Good strategy, good assets help good reports, good products.",
   "用户总量": "Total",
diff --git a/site/components/Banner/Banner.module.less b/site/components/Banner/Banner.module.less
index 2a4ebfbd..7e454c21 100644
--- a/site/components/Banner/Banner.module.less
+++ b/site/components/Banner/Banner.module.less
@@ -13,7 +13,7 @@
   .header {
     height: 618px;
     position: relative;
-    font-family:  PingFangSC;
+    font-family: PingFangSC;
   }
 
   .top {
@@ -23,12 +23,12 @@
     right: 0;
     top: 0;
     bottom: 0;
-    font-family:  AlibabaPuHuiTiR;
+    font-family: AlibabaPuHuiTiR;
   }
 
   .mainTitle {
-    font-size: 48px;
-    font-weight: 800;
+    font-size: 64px;
+    font-weight: 900;
     color: #000;
     text-align: center;
     margin-top: 112px;
@@ -65,10 +65,11 @@
       &:extend(.commonFlexConfig);
       height: 54px;
       width: 166px;
-      border-radius: 6px;
+      border-radius: 12px;
       font-size: 18px;
+      font-weight: bold;
       cursor: pointer;
-      box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.20);
+      box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.10);
       margin: 0 11.5px;
 
       >img {
@@ -110,6 +111,7 @@
       max-width: 381px;
       background-color: #FFFFFF;
       border: 1px solid #E5E8EF;
+      transition: all .2s;
       padding: 16px;
       box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
       border-radius: 16px;
@@ -119,16 +121,16 @@
       .messageTitle {
         &:extend(.commonFlexConfig);
         font-weight: 500;
-        font-size: 20px;
+        font-size: 18px;
         color: #1D2129;
         margin-bottom: 8px;
         text-align: center;
-        text-indent: 1.6em;
+        text-indent: 2em;
         position: relative;
 
         > img {
           position: absolute;
-          top: 4px;
+          top: 2px;
           left: 4px;
         }
       }
@@ -140,7 +142,8 @@
       }
 
       &:hover {
-        box-shadow: 0 12px 32px 0 rgba(0,0,0,0.10);
+        transform: translateY(-8px);
+        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.10);
 
         .messageTitle {
           color: rgba(105, 30, 255, 1);
diff --git a/site/components/ComplexCharts/index.module.less b/site/components/ComplexCharts/index.module.less
index d7578849..db374d59 100644
--- a/site/components/ComplexCharts/index.module.less
+++ b/site/components/ComplexCharts/index.module.less
@@ -33,7 +33,7 @@
       border-radius: 8px;
       margin-right: 20px;
       line-height: 52px;
-      font-size: 20px;
+      font-size: 18px;
 
       >img {
         margin-right: 8px;
diff --git a/site/components/FamousPersons/index.module.less b/site/components/FamousPersons/index.module.less
index 3ef42e93..7c3656cb 100644
--- a/site/components/FamousPersons/index.module.less
+++ b/site/components/FamousPersons/index.module.less
@@ -20,14 +20,14 @@
       &:extend(.commonFlexConfig);
       flex-direction: column;
       justify-content: space-between;
-      height: 373px;
+      height: 377px;
       width: 279px;
-      padding: 29px 12px 12px;
+      padding: 29px 20px 20px;
       position: relative;
       margin: 0 14px;
       letter-spacing: 0;
       transition: all .2s;
-      background-color: #F6F8FD;
+      background-color: #fff;
       border: 1px solid #E5E8EF;
       box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
       border-radius: 16px;
@@ -56,15 +56,16 @@
       }
 
       .name {
+        margin: 4px 0;
         font-size: 24px;
         color: #1D2129;
-        font-family: AlibabaPuHuiTiB;
+        font-weight: 500;
+        font-family: PingFangSC;
       }
 
       .text {
-        position: relative;
-        top: -10px;
-        padding: 0 11px;
+        line-height: 28px;
+        height: 56px;
         font-size: 14px;
         color: #424E66;
         overflow: hidden;
@@ -74,17 +75,16 @@
         -webkit-box-orient: vertical;
       }
 
+      .hr {
+        width: 100%;
+        border-top: 1px solid #f5f5f5;
+        margin: 14px 0;
+      }
+
       .msg {
-        line-height: 25px;
-        padding: 8px 12px;
-        height: 164px;
-        background-color: #FFFFFF;
-        border-radius: 12px;
+        color: #86909C;
+        flex: 1;
         overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 6;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
       }
     }
   }
diff --git a/site/components/FamousPersons/index.tsx b/site/components/FamousPersons/index.tsx
index 96d954ab..a6de35fc 100644
--- a/site/components/FamousPersons/index.tsx
+++ b/site/components/FamousPersons/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'dumi';
-import { ModuleTitle as Title } from '../common';
+import { ModuleTitle as Title, OverflowedText } from '../common';
 import FAMOUS_PERSONS_DATAS from '../../data/famous-persons.json';
 
 import styles from './index.module.less';
@@ -32,8 +32,13 @@ export function FamousPersons() {
                 />
               </div>
               <div className={styles.name}>{useT(data.name)}</div>
-              <div className={styles.text}>{useT(data.text)}</div>
-              <div className={styles.msg}>{useT(data.msg)}</div>
+              <div className={styles.text}>
+                <OverflowedText text={useT(data.text)} maxHeight={56} maxWidth={237} style={{ fontSize: 14, lineHeight: 1.9 }}  />
+                </div>
+              <div className={styles.hr} />
+              <div className={styles.msg}>
+                <OverflowedText text={useT(data.msg)} maxHeight={143} maxWidth={237} style={{ fontSize: 14, lineHeight: 1.9 }}  />
+              </div>
             </div>
           })
         }
diff --git a/site/components/LinkCharts/index.module.less b/site/components/LinkCharts/index.module.less
index b3972d46..f7462bf9 100644
--- a/site/components/LinkCharts/index.module.less
+++ b/site/components/LinkCharts/index.module.less
@@ -44,7 +44,7 @@
         letter-spacing: 0;
         position: relative;
         margin: 0 14px;
-        transition: all 1s;
+        transition: all .2s;
         cursor: pointer;
 
         &:hover {
@@ -62,7 +62,6 @@
         }
 
         .subTitle {
-          height: 44px;
           font-size: 14px;
           color: #424E66;
           line-height: 22px;
@@ -82,8 +81,9 @@
           font-size: 14px;
           top: 0;
           right: 0;
-          border-radius: 0 16px 0 16px;
+          border-radius: 0 8px 0 8px;
           color: #fff;
+
         }
 
         .image {
@@ -94,6 +94,7 @@
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
+          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
         }
       }
     }
@@ -117,5 +118,9 @@
         background-color: #E5E8EF;
       }
     }
+
+    > .left {
+      transform: rotate(180deg);
+    }
   }
 }
\ No newline at end of file
diff --git a/site/components/LinkCharts/index.tsx b/site/components/LinkCharts/index.tsx
index 7c75428b..24241b79 100644
--- a/site/components/LinkCharts/index.tsx
+++ b/site/components/LinkCharts/index.tsx
@@ -1,9 +1,8 @@
 import classNames from 'classnames';
 import { useLocale, useIntl } from 'dumi';
-import React, { useCallback, useEffect, useState } from 'react';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import React, { useCallback, useState } from 'react';
 import { useChinaMirrorHost } from '@antv/dumi-theme-antv/dist/slots/hooks';
-import { ModuleTitle as Title } from '../common';
+import { ModuleTitle as Title, OverflowedText } from '../common';
 import { transformUrl } from '../Products/getProducts';
 import CHARTS_DATAS from '../../data/link-charts.json';
 
@@ -60,7 +59,9 @@ export function LinkCharts() {
             data.map((data) => {
               return <a className={styles.chart} href={transformUrl({ url: data.link, language, isChinaMirrorHost })} target='_black' >
                 <div className={styles.title}>{useT(data.title)}</div>
-                <div className={styles.subTitle}>{useT(data.subTitle)}</div>
+                <div className={styles.subTitle}>
+                  <OverflowedText text={useT(data.subTitle)} maxWidth={341} />
+                </div>
                 <div className={styles.antv} style={{ background: data.color }} >{data.antv}</div>
                 <div className={styles.image} style={{ backgroundImage: `url(${data.image})` }} />
               </a>
@@ -69,8 +70,8 @@ export function LinkCharts() {
         </div>
       </div>
       <div className={styles.buttons}>
-        <div className={styles.left} onClick={() => onClick('left')} ><LeftOutlined /></div>
-        <div className={styles.right} onClick={() => onClick('right')}><RightOutlined /></div>
+        <div className={styles.left} onClick={() => onClick('left')} ><img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Q4WbQ5DCXEAAAAAAAAAAAAAADmJ7AQ/original' /></div>
+        <div className={styles.right} onClick={() => onClick('right')}><img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Q4WbQ5DCXEAAAAAAAAAAAAAADmJ7AQ/original' /></div>
       </div>
     </div>
   );
diff --git a/site/components/ProjectCard/index.module.less b/site/components/ProjectCard/index.module.less
index ead41613..a6ecb007 100644
--- a/site/components/ProjectCard/index.module.less
+++ b/site/components/ProjectCard/index.module.less
@@ -8,7 +8,7 @@
   &:extend(.commonFlexConfig);
   padding: 80px 0 40px;
   flex-direction: column;
-  height: 768px;
+  height: 782px;
   overflow: hidden;
   font-family:  PingFangSC;
 
diff --git a/site/components/ThemeCharts/Charts/Column/index.tsx b/site/components/ThemeCharts/Charts/Column/index.tsx
index 52928dc8..23d274d7 100644
--- a/site/components/ThemeCharts/Charts/Column/index.tsx
+++ b/site/components/ThemeCharts/Charts/Column/index.tsx
@@ -10,6 +10,7 @@ export const DARK_THEME_CONFIG = {
         fill: '#fff',
       },
     },
+    radio: false,
   },
   yAxis: {
     tickCount: 4,
@@ -42,7 +43,7 @@ export const DARK_THEME_CONFIG = {
       },
     },
   },
-};
+} as any;
 
 export const LIGHT_THEME_CONFIG = {
   legend: {
@@ -51,6 +52,7 @@ export const LIGHT_THEME_CONFIG = {
         fill: '#424E66',
       },
     },
+    radio: false,
   },
   yAxis: {
     tickCount: 4,
@@ -83,7 +85,7 @@ export const LIGHT_THEME_CONFIG = {
       },
     },
   },
-}
+} as any;
 
 type ColumnProps = {
   theme?: any;
diff --git a/site/components/ThemeCharts/Charts/Gauge/index.tsx b/site/components/ThemeCharts/Charts/Gauge/index.tsx
index aeb96934..4f3e5dc9 100644
--- a/site/components/ThemeCharts/Charts/Gauge/index.tsx
+++ b/site/components/ThemeCharts/Charts/Gauge/index.tsx
@@ -32,12 +32,13 @@ export function GaugeChart(props: GaugeProps) {
         },
         statistic: {
           content: {
-            offsetY: -30,
+            offsetY: -80,
             customHtml: () => {
               return `
                 <div>
+                  <img style="width: 36px; height: 36px;margin-bottom: 12px;" src="${isDark ? 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hINPQYnKaIAAAAAAAAAAAAAADmJ7AQ/original' : 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BjKVTp2kKSQAAAAAAAAAAAAADmJ7AQ/original'}" />
                   <div style="font-size: 12px;color: ${isDark ? 'rgba(255,255,255,0.65)' : '#424E66'};" >${useT('用户总量')}</div>
-                  <div style="font-size: 32px;color: ${isDark ? '#fff' : '#1D2129'}; line-height: 45px;" >1,320</div>
+                  <div style="font-size: 32px;color: ${isDark ? '#fff' : '#1D2129'}; line-height: 45px;font-family: AlibabaPuHuiTiB;" >1,320</div>
                 </div>
               `;
             },
diff --git a/site/components/ThemeCharts/Charts/Pie/index.tsx b/site/components/ThemeCharts/Charts/Pie/index.tsx
index 2ea100db..95dbcb03 100644
--- a/site/components/ThemeCharts/Charts/Pie/index.tsx
+++ b/site/components/ThemeCharts/Charts/Pie/index.tsx
@@ -53,7 +53,7 @@ export function PieChart(props: PieProps) {
             offsetY: -2,
             content: '3,200',
             style: {
-              fontFamily: 'PingFangSC',
+              fontFamily: 'AlibabaPuHuiTiB',
               fontSize: '20px',
               color: isDark ? '#fff' : '#1D2129'
             },
diff --git a/site/components/ThemeCharts/Charts/index.module.less b/site/components/ThemeCharts/Charts/index.module.less
index 7706416a..8fb46aa4 100644
--- a/site/components/ThemeCharts/Charts/index.module.less
+++ b/site/components/ThemeCharts/Charts/index.module.less
@@ -5,5 +5,6 @@
   >div {
     width: 100%;
     height: 100%;
+
   }
 }
\ No newline at end of file
diff --git a/site/components/ThemeCharts/index.module.less b/site/components/ThemeCharts/index.module.less
index 6334d61f..1165cae6 100644
--- a/site/components/ThemeCharts/index.module.less
+++ b/site/components/ThemeCharts/index.module.less
@@ -29,7 +29,7 @@
       height: 52px;
       width: 160px;
       cursor: pointer;
-      font-size: 20px;
+      font-size: 18px;
       background-color: #FFFFFF;
       border: 2px solid #E5E8EF;
       border-radius: 8px;
@@ -56,14 +56,14 @@
   }
 
   .themeChart {
-    height: 515px;
+    height: 600px;
     width: 1200px;
     background-color: #FAFBFC;
     border: 1px solid #E5E8EF;
     box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
     border-radius: 16px;
     box-sizing: border-box;
-    padding: 18px 20px 5px 18px;
+    padding: 24px;
     margin-bottom: 36px;
 
     .msg {
@@ -90,11 +90,11 @@
 
     .charts {
       .chart {
-        height: 208px;
-        width: 375px;
+        height: 243px;
+        width: 374px;
         background: #fff;
         box-sizing: border-box;
-        padding: 14px 20px;
+        padding: 18px;
         float: left;
         margin-bottom: 15px;
         margin-right: 14px;
@@ -111,7 +111,7 @@
         }
 
         .content {
-          height: 149px;
+          height: 183px;
         }
       }
 
@@ -124,16 +124,23 @@
   .acquire {
     &:extend(.commonFlexConfig);
 
-    .download,
-    .copy {
+    .download {
       font-size: 16px;
       color: #424E66;
       letter-spacing: 0;
       line-height: 24px;
       cursor: pointer;
+      overflow: hidden;
+      position: relative;
 
       &:hover {
         color: #691EFF;
+
+        >img {
+          position: relative;
+          left: -80px;
+          filter: drop-shadow(#691EFF 80px 0);
+        }
       }
     }
   }
@@ -146,7 +153,6 @@
   }
 
   &.dark {
-    background: rgba(0, 0, 0, 0.9);
 
     .title {
       color: #fff;
@@ -199,8 +205,13 @@
 
     .acquire {
 
-      .download,
-      .copy {
+      .download {
+        img {
+          position: relative;
+          left: -80px;
+          filter: drop-shadow(#fff 80px 0);
+        }
+
         color: #fff;
         opacity: 0.8;
 
@@ -222,7 +233,13 @@
   height: 25px;
 
   .color {
-    width: 25px;
-    height: 25px;
+    border-radius: 2px;
+    margin-right: 2px;
+    width: 23px;
+    height: 23px;
+  }
+
+  :last-child {
+    margin-right: 0px;
   }
 }
\ No newline at end of file
diff --git a/site/components/ThemeCharts/index.tsx b/site/components/ThemeCharts/index.tsx
index af6092c0..76f474d8 100644
--- a/site/components/ThemeCharts/index.tsx
+++ b/site/components/ThemeCharts/index.tsx
@@ -1,7 +1,6 @@
 import { useIntl } from 'dumi';
 import classNames from 'classnames';
 import { ColorPicker } from 'antd';
-import { DownloadOutlined } from '@ant-design/icons';
 import React, { useCallback, useMemo, useState } from 'react';
 import { GaugeChart, ColumnChart, LineChart, GraphChart, StackedColumnChart, PieChart } from './Charts';
 import { pick } from '../../utils';
@@ -183,7 +182,7 @@ export function ThemeCharts() {
         </div>
       </div>
       <div className={styles.acquire}>
-        <div className={styles.download} onClick={onDownload}><DownloadOutlined /> {useT("规范下载")}</div>
+        <div className={styles.download} onClick={onDownload}><img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*coOuTKR_NDMAAAAAAAAAAAAADmJ7AQ/original' /> {useT("规范下载")}</div>
       </div>
     </div>
   )
diff --git a/site/components/common/ModuleTitle/index.module.less b/site/components/common/ModuleTitle/index.module.less
index 36e2e276..e94c0c5b 100644
--- a/site/components/common/ModuleTitle/index.module.less
+++ b/site/components/common/ModuleTitle/index.module.less
@@ -13,12 +13,11 @@
   }
 
   .subTitle {
-    height: 24px;
     font-family: PingFangSC;
     color: #424E66;
     letter-spacing: 0;
     line-height: 24px;
-    margin-bottom: 40px;
+    margin-bottom: 32px;
     max-width: 800px;
   }
 }
\ No newline at end of file
diff --git a/site/components/common/OverflowedText/index.less b/site/components/common/OverflowedText/index.less
new file mode 100644
index 00000000..d60b0949
--- /dev/null
+++ b/site/components/common/OverflowedText/index.less
@@ -0,0 +1,12 @@
+@import './mixins.less';
+
+.component-overflowed-text {
+  max-width: 100px;
+  .text-overflow();
+
+  &.max-height-text {
+    white-space: normal;
+    max-width: none;
+    word-break: break-all;
+  }
+}
diff --git a/site/components/common/OverflowedText/index.tsx b/site/components/common/OverflowedText/index.tsx
new file mode 100644
index 00000000..132ff806
--- /dev/null
+++ b/site/components/common/OverflowedText/index.tsx
@@ -0,0 +1,96 @@
+import React, { PureComponent } from 'react';
+import cx from 'classnames';
+import { Tooltip, ConfigProvider } from 'antd';
+import PropTypes from 'prop-types';
+import { isNumber, isString, toNumber, omit } from 'lodash';
+
+import './index.less';
+
+type Props = {
+  className: string;
+  text: string;
+  maxWidth: string | number;
+  maxHeight?: string | number;
+  style?: Record<string, any>;
+}
+
+const getPixel = (value: string | number) => {
+  if (isNumber(value)) return `${value}px`;
+  return value;
+}
+
+const getNumber = (value: string | number) => {
+  if (isString(value)) return toNumber(value.replace(/[^0-9]+/, ''));
+  return value;
+}
+
+export class OverflowedText extends PureComponent<Props> {
+  static propTypes = {
+    className: PropTypes.string,
+    text: PropTypes.string,
+    maxWidth: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+    text: 'overflowed text',
+    maxWidth: '100px',
+    style: {},
+  }
+
+  state = {
+    isOverflow: false,
+  };
+
+  componentDidUpdate(prevProps: Props) {
+    if (
+      prevProps.text !== this.props.text ||
+      prevProps.maxWidth !== this.props.maxWidth ||
+      prevProps.maxHeight !== this.props.maxHeight ||
+      prevProps.style !== this.props.style
+    ) {
+      // @ts-ignore
+      this.init(this.$text);
+    }
+  }
+
+  init = (node: HTMLDivElement) => {
+    // @ts-ignore
+    this.$text = node;
+    if (!node) return;
+    const { maxHeight } = this.props;
+    this.setState({ isOverflow: maxHeight ? node.scrollHeight > node.offsetHeight : node.scrollWidth > node.offsetWidth });
+  };
+
+  render() {
+    const { text, className, maxWidth, maxHeight, style = {} } = this.props;
+    const { fontSize, lineHeight } = style;
+    const props = omit(this.props, ['className', 'text', 'maxWidth', 'maxHeight', 'style', 'width']);
+    const cls = cx('component-overflowed-text', className, maxHeight && 'max-height-text');
+
+    let textStyle: Record<string, string> = { maxWidth: getPixel(maxWidth), ...style };
+    // 最大高度 转化为 行数， 需要  fontSize, lineHeight 属性
+    if (maxHeight && fontSize && lineHeight) {
+      const lineHeightSize = getNumber(fontSize) * lineHeight;
+      textStyle = {
+        ...textStyle,
+        maxWidth: 'none',
+        display: '-webkit-box',
+        '-webkitBoxOrient': 'vertical',
+        '-webkitLineClamp': (Math.max(getNumber(maxHeight), lineHeightSize) / lineHeightSize).toFixed(0),
+      };
+    }
+
+    return <div className={cls} style={textStyle} ref={this.init}>
+      {this.state.isOverflow ? (
+        <ConfigProvider prefixCls="antd5">
+          <Tooltip title={text} placement="topLeft" overlayStyle={{ maxWidth: '50vw' }} {...props}>
+            {text}
+          </Tooltip>
+        </ConfigProvider>
+      ) : (
+        text
+      )}
+    </div>
+  }
+}
diff --git a/site/components/common/OverflowedText/mixins.less b/site/components/common/OverflowedText/mixins.less
new file mode 100644
index 00000000..5e1b8245
--- /dev/null
+++ b/site/components/common/OverflowedText/mixins.less
@@ -0,0 +1,44 @@
+.text-overflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.transition-fast() {
+  transition: all 0.1s;
+}
+
+.transition() {
+  transition: all 0.2s;
+}
+
+.scroll-y() {
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.childMiddle() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.di-tooltip-inner() {
+  .ant-tooltip-inner {
+    max-height: 200px;
+    padding: 8px;
+    overflow-y: auto;
+    color: rgba(0, 0, 0, 0.65);
+    background: #fff;
+    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
+  }
+  .ant-tooltip-arrow {
+    border-top-color: #fff;
+  }
+}
+
+.icon-extra () {
+  position: absolute;
+  top: -6px;
+  right: -8px;
+}
diff --git a/site/components/common/index.tsx b/site/components/common/index.tsx
index e77025e3..a440a693 100644
--- a/site/components/common/index.tsx
+++ b/site/components/common/index.tsx
@@ -1,7 +1,9 @@
 import ActiveIcon from './ActiveIcon';
 import ModuleTitle from './ModuleTitle';
+import { OverflowedText } from './OverflowedText';
 
 export {
   ActiveIcon,
   ModuleTitle,
+  OverflowedText,
 };