From a8b24b62af87b06240854c978ad0ee27fb30fa82 Mon Sep 17 00:00:00 2001
From: zhouyun <zhouyun1@xiaomi.com>
Date: Thu, 7 Nov 2024 21:34:02 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=20(#3036)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: 优化组件文档文案

* docs: 修改生成HiUI知识库的脚本

* chore: 去掉.changeset-pending中的临时文件

* chore(scrollbar): 修改类型问题

* chore(scrollbar): 优化Scrollbar Sticky的代码和示例
---
 .changeset-pending/sixty-elephants-join.md    |  6 --
 packages/ui/alert/stories/size.stories.tsx    |  3 +-
 packages/ui/avatar/hi-docs.config.mdx         |  4 +-
 packages/ui/check-cascader/hi-docs.config.mdx |  4 +-
 packages/ui/check-select/hi-docs.config.mdx   |  4 +-
 .../ui/check-tree-select/hi-docs.config.mdx   |  4 +-
 .../stories/custom-render.stories.tsx         | 34 +++++-----
 .../stories/need-confirm.stories.tsx          |  1 +
 packages/ui/descriptions/hi-docs.config.mdx   |  4 +-
 .../ui/ellipsis-tooltip/hi-docs.config.mdx    |  2 +-
 packages/ui/empty-state/hi-docs.config.mdx    |  4 +-
 packages/ui/file-select/hi-docs.config.mdx    |  4 +-
 packages/ui/highlighter/hi-docs.config.mdx    |  4 +-
 packages/ui/hiui/hi-docs.config.mdx           |  4 +-
 packages/ui/icon-button/hi-docs.config.mdx    |  4 +-
 packages/ui/list/hi-docs.config.mdx           |  2 +-
 packages/ui/loading/hi-docs.config.mdx        |  2 +-
 packages/ui/locale-context/hi-docs.config.mdx |  4 +-
 packages/ui/menu/hi-docs.config.mdx           |  2 +-
 packages/ui/message/hi-docs.config.mdx        |  2 +-
 .../ui/message/stories/custom.stories.tsx     | 46 ++++++++------
 packages/ui/modal/hi-docs.config.mdx          |  2 +-
 packages/ui/notification/hi-docs.config.mdx   |  2 +-
 .../notification/stories/custom.stories.tsx   |  2 +-
 packages/ui/number-input/hi-docs.config.mdx   |  2 +-
 packages/ui/pagination/hi-docs.config.mdx     |  2 +-
 packages/ui/picker/hi-docs.config.mdx         |  4 +-
 packages/ui/pop-confirm/hi-docs.config.mdx    |  4 +-
 .../stories/gutter-gap.stories.tsx            |  3 +-
 packages/ui/popover/hi-docs.config.mdx        |  2 +-
 .../ui/popover/stories/gutter-gap.stories.tsx |  3 +-
 .../ui/popover/stories/with-api.stories.tsx   | 14 ++---
 packages/ui/popper/hi-docs.config.mdx         |  4 +-
 packages/ui/portal/hi-docs.config.mdx         |  4 +-
 packages/ui/preview/hi-docs.config.mdx        |  2 +-
 packages/ui/progress/hi-docs.config.mdx       |  2 +-
 packages/ui/provider/hi-docs.config.mdx       |  4 +-
 packages/ui/radio/hi-docs.config.mdx          |  2 +-
 packages/ui/rating/hi-docs.config.mdx         |  2 +-
 packages/ui/resize-box/hi-docs.config.mdx     |  2 +-
 packages/ui/scrollbar/hi-docs.config.mdx      | 11 +++-
 packages/ui/scrollbar/src/Scrollbar.tsx       |  4 +-
 packages/ui/scrollbar/src/types.ts            | 10 +--
 .../ui/scrollbar/stories/axes.stories.tsx     |  4 +-
 .../ui/scrollbar/stories/fixed.stories.tsx    | 63 -------------------
 .../ui/scrollbar/stories/index.stories.tsx    |  2 +-
 .../ui/scrollbar/stories/sticky.stories.tsx   | 63 +++++++++++++++++++
 packages/ui/search/hi-docs.config.mdx         |  2 +-
 packages/ui/slider/hi-docs.config.mdx         |  2 +-
 packages/ui/spinner/hi-docs.config.mdx        |  4 +-
 packages/ui/stepper/hi-docs.config.mdx        |  2 +-
 packages/ui/svg-icon/hi-docs.config.mdx       |  4 +-
 packages/ui/switch/hi-docs.config.mdx         |  2 +-
 packages/ui/table/hi-docs.config.mdx          |  2 +-
 .../ui/table/stories/scrollbar.stories.tsx    | 20 ++++--
 packages/ui/tag-input/hi-docs.config.mdx      |  4 +-
 packages/ui/tag/hi-docs.config.mdx            |  2 +-
 packages/ui/time-picker/hi-docs.config.mdx    |  2 +
 packages/ui/timeline/hi-docs.config.mdx       |  2 +-
 packages/ui/toast/hi-docs.config.mdx          |  4 +-
 packages/ui/tooltip/hi-docs.config.mdx        |  2 +-
 .../ui/tooltip/stories/gutter-gap.stories.tsx |  3 +-
 packages/ui/transfer/hi-docs.config.mdx       |  2 +-
 packages/ui/tree-select/hi-docs.config.mdx    |  2 +-
 packages/ui/tree/hi-docs.config.mdx           |  2 +-
 packages/ui/upload/hi-docs.config.mdx         |  2 +-
 packages/ui/watermark/hi-docs.config.mdx      |  2 +-
 packages/ui/zen-mode/hi-docs.config.mdx       |  4 +-
 patches/perfect-scrollbar+1.5.5.patch         |  6 +-
 scripts/hi-docs/src/merge-docs.mjs            |  9 ++-
 70 files changed, 240 insertions(+), 209 deletions(-)
 delete mode 100644 .changeset-pending/sixty-elephants-join.md
 delete mode 100644 packages/ui/scrollbar/stories/fixed.stories.tsx
 create mode 100644 packages/ui/scrollbar/stories/sticky.stories.tsx

diff --git a/.changeset-pending/sixty-elephants-join.md b/.changeset-pending/sixty-elephants-join.md
deleted file mode 100644
index cb29c087f..000000000
--- a/.changeset-pending/sixty-elephants-join.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@hi-ui/hiui": minor
-"@hi-ui/resize-box": minor
----
-
-feat: 增加 ResizeBox 组件
diff --git a/packages/ui/alert/stories/size.stories.tsx b/packages/ui/alert/stories/size.stories.tsx
index d023d2feb..a03df856a 100644
--- a/packages/ui/alert/stories/size.stories.tsx
+++ b/packages/ui/alert/stories/size.stories.tsx
@@ -3,8 +3,7 @@ import Alert from '../src'
 import Button from '@hi-ui/button'
 
 /**
- * @title 基础用法
- * @desc 根据用户的操作进行页面级或模块、区块级的提示
+ * @title 不同尺寸
  */
 export const Size = () => {
   return (
diff --git a/packages/ui/avatar/hi-docs.config.mdx b/packages/ui/avatar/hi-docs.config.mdx
index b753a7721..c86a67146 100644
--- a/packages/ui/avatar/hi-docs.config.mdx
+++ b/packages/ui/avatar/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# Avatar 组件中文名
+# Avatar 头像
 
-组件中文介绍
+用来代表用户或事物，支持图片、图标或字符展示。
 
 ## 何时使用
 
diff --git a/packages/ui/check-cascader/hi-docs.config.mdx b/packages/ui/check-cascader/hi-docs.config.mdx
index 1d4777c0a..87ecabc53 100644
--- a/packages/ui/check-cascader/hi-docs.config.mdx
+++ b/packages/ui/check-cascader/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# CheckCascader 组件中文名
+# CheckCascader 多项级联选择器
 
-组件中文介绍
+通过采用多级分类的方式将选项进行分隔，便于用户完成多项选择，在不同类型之间切换。
 
 ## 何时使用
 
diff --git a/packages/ui/check-select/hi-docs.config.mdx b/packages/ui/check-select/hi-docs.config.mdx
index 29d956fa2..6c8399fe7 100644
--- a/packages/ui/check-select/hi-docs.config.mdx
+++ b/packages/ui/check-select/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# CheckSelect 组件中文名
+# CheckSelect 多项选择器
 
-组件中文介绍
+弹出一个下拉菜单给用户进行部分选项选择的操作。
 
 ## 何时使用
 
diff --git a/packages/ui/check-tree-select/hi-docs.config.mdx b/packages/ui/check-tree-select/hi-docs.config.mdx
index c1da10559..0d429defe 100644
--- a/packages/ui/check-tree-select/hi-docs.config.mdx
+++ b/packages/ui/check-tree-select/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# CheckTreeSelect 组件中文名
+# CheckTreeSelect 多选树形选择器
 
-组件中文介绍
+一种接收树形数据结构的多项选择器，为用户提供复杂数据展示的能力。
 
 ## 何时使用
 
diff --git a/packages/ui/date-picker/stories/custom-render.stories.tsx b/packages/ui/date-picker/stories/custom-render.stories.tsx
index c2d62756e..408e0ac50 100644
--- a/packages/ui/date-picker/stories/custom-render.stories.tsx
+++ b/packages/ui/date-picker/stories/custom-render.stories.tsx
@@ -8,48 +8,48 @@ import Input from '@hi-ui/input'
 export const CustomRender = () => {
   return (
     <>
-      <h1>日期</h1>
+      <h1>自定义触发器</h1>
       <div className="date-picker-custom-render__wrap">
-        <h2>基础</h2>
+        <h2>日期</h2>
         <DatePicker
           style={{ width: 240 }}
+          defaultValue={new Date()}
           onChange={(date, dateStr) => {
             console.log('onChange', date, dateStr)
           }}
           onSelect={console.log}
           customRender={(data) => {
-            return <Input value={data[0]} readOnly placeholder="请选择" />
+            const date = new Date(data[0] ?? new Date())
+            const year = date.getFullYear()
+            const month = (date.getMonth() + 1).toString().padStart(2, '0')
+            const day = date.getDate().toString().padStart(2, '0')
+            const formattedDate = `${year}-${month}-${day}`
+            return <Input value={formattedDate} readOnly placeholder="请选择" />
           }}
         />
-        <h2>日期时间范围</h2>
+        <h2>日期范围</h2>
         <DatePicker
-          style={{ width: 420 }}
+          style={{ width: 240 }}
           type="daterange"
-          showTime
           onChange={(date, dateStr) => {
             console.log('onChange', date, dateStr)
           }}
           defaultValue={[new Date(), new Date()]}
           customRender={(data) => {
-            const date1 = new Date(data[0])
-            const date2 = new Date(data[1])
+            const date1 = new Date(data[0] ?? new Date())
+            const date2 = new Date(data[1] ?? new Date())
             const year1 = date1.getFullYear()
             const year2 = date2.getFullYear()
             const month1 = (date1.getMonth() + 1).toString().padStart(2, '0')
             const month2 = (date2.getMonth() + 1).toString().padStart(2, '0')
             const day1 = date1.getDate().toString().padStart(2, '0')
             const day2 = date2.getDate().toString().padStart(2, '0')
-            const hours1 = date1.getHours().toString().padStart(2, '0')
-            const hours2 = date2.getHours().toString().padStart(2, '0')
-            const minutes1 = date1.getMinutes().toString().padStart(2, '0')
-            const minutes2 = date2.getMinutes().toString().padStart(2, '0')
-            const seconds1 = date1.getSeconds().toString().padStart(2, '0')
-            const seconds2 = date2.getSeconds().toString().padStart(2, '0')
-            const formattedDateTime1 = `${year1}-${month1}-${day1} ${hours1}:${minutes1}:${seconds1}`
-            const formattedDateTime2 = `${year2}-${month2}-${day2} ${hours2}:${minutes2}:${seconds2}`
+            const formattedDateTime1 = `${year1}-${month1}-${day1}`
+            const formattedDateTime2 = `${year2}-${month2}-${day2}`
+
             return (
               <Input
-                value={`${formattedDateTime1}  ~  ${formattedDateTime2}`}
+                value={`${formattedDateTime1} - ${formattedDateTime2}`}
                 readOnly
                 placeholder="请选择"
               />
diff --git a/packages/ui/date-picker/stories/need-confirm.stories.tsx b/packages/ui/date-picker/stories/need-confirm.stories.tsx
index f26a1f252..16d273fa4 100644
--- a/packages/ui/date-picker/stories/need-confirm.stories.tsx
+++ b/packages/ui/date-picker/stories/need-confirm.stories.tsx
@@ -20,6 +20,7 @@ export const NeedConfirm = () => {
         />
         <h2>日期时间选择</h2>
         <DatePicker
+          style={{ width: 240 }}
           defaultValue={new Date()}
           showTime
           needConfirm
diff --git a/packages/ui/descriptions/hi-docs.config.mdx b/packages/ui/descriptions/hi-docs.config.mdx
index a6f3a1c7e..dcba11476 100644
--- a/packages/ui/descriptions/hi-docs.config.mdx
+++ b/packages/ui/descriptions/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# Descriptions 组件中文名
+# Descriptions 描述列表
 
-组件中文介绍
+展示只读性字段，一般用于详情页的信息展示。
 
 ## 何时使用
 
diff --git a/packages/ui/ellipsis-tooltip/hi-docs.config.mdx b/packages/ui/ellipsis-tooltip/hi-docs.config.mdx
index a08e140a4..e1ffcb7dc 100644
--- a/packages/ui/ellipsis-tooltip/hi-docs.config.mdx
+++ b/packages/ui/ellipsis-tooltip/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # EllipsisTooltip 文字超出提示
 
-组件中文介绍
+文字个数超出后展示省略号，鼠标悬停时出现全部描述。
 
 ## 何时使用
 
diff --git a/packages/ui/empty-state/hi-docs.config.mdx b/packages/ui/empty-state/hi-docs.config.mdx
index 38b680e09..df0212e0f 100644
--- a/packages/ui/empty-state/hi-docs.config.mdx
+++ b/packages/ui/empty-state/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# EmptyState 组件中文名
+# EmptyState 空状态
 
-组件中文介绍
+指当前场景没有对应的数据内容，呈现出的一种状态。
 
 ## 何时使用
 
diff --git a/packages/ui/file-select/hi-docs.config.mdx b/packages/ui/file-select/hi-docs.config.mdx
index a49213a10..bfd7ad10d 100644
--- a/packages/ui/file-select/hi-docs.config.mdx
+++ b/packages/ui/file-select/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# FileSelect 组件中文名
+# FileSelect 文件选择器
 
-组件中文介绍
+用于选择文件。
 
 ## 何时使用
 
diff --git a/packages/ui/highlighter/hi-docs.config.mdx b/packages/ui/highlighter/hi-docs.config.mdx
index e06d3f803..73b7f99f3 100644
--- a/packages/ui/highlighter/hi-docs.config.mdx
+++ b/packages/ui/highlighter/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# Highlighter 组件中文名
+# Highlighter 文本高亮
 
-组件中文介绍
+用于文本关键字高亮展示，实现快速结果匹配。
 
 ## 何时使用
 
diff --git a/packages/ui/hiui/hi-docs.config.mdx b/packages/ui/hiui/hi-docs.config.mdx
index ffab0a43c..fcdeecd73 100644
--- a/packages/ui/hiui/hi-docs.config.mdx
+++ b/packages/ui/hiui/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# Hiui 组件中文名
+# HiUI
 
-组件中文介绍
+组件汇总
 
 ## 何时使用
 
diff --git a/packages/ui/icon-button/hi-docs.config.mdx b/packages/ui/icon-button/hi-docs.config.mdx
index 1adfa6b4d..c238f5c92 100644
--- a/packages/ui/icon-button/hi-docs.config.mdx
+++ b/packages/ui/icon-button/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# IconButton 组件中文名
+# IconButton 图标按钮
 
-组件中文介绍
+带有图标的按钮。
 
 ## 何时使用
 
diff --git a/packages/ui/list/hi-docs.config.mdx b/packages/ui/list/hi-docs.config.mdx
index 8edb5a215..73f60b556 100644
--- a/packages/ui/list/hi-docs.config.mdx
+++ b/packages/ui/list/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # List 列表
 
-通用列表
+通用列表。
 
 ## 何时使用
 
diff --git a/packages/ui/loading/hi-docs.config.mdx b/packages/ui/loading/hi-docs.config.mdx
index e54469ab1..80e0797a1 100644
--- a/packages/ui/loading/hi-docs.config.mdx
+++ b/packages/ui/loading/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Loading 动效加载
 
-用于请求和数据加载成功的中间状态，缓冲用户的等待焦虑
+用于请求和数据加载成功的中间状态，缓冲用户的等待焦虑。
 
 ## 何时使用
 
diff --git a/packages/ui/locale-context/hi-docs.config.mdx b/packages/ui/locale-context/hi-docs.config.mdx
index c3b173470..3924b5884 100644
--- a/packages/ui/locale-context/hi-docs.config.mdx
+++ b/packages/ui/locale-context/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# LocaleContext 组件中文名
+# LocaleContext 语言上下文
 
-组件中文介绍
+语言设置上下文。
 
 ## 何时使用
 
diff --git a/packages/ui/menu/hi-docs.config.mdx b/packages/ui/menu/hi-docs.config.mdx
index 084f06b08..c732ef3ea 100644
--- a/packages/ui/menu/hi-docs.config.mdx
+++ b/packages/ui/menu/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Menu 菜单
 
-用来整个网站或信息系统的信息架构，供用户快速定位到目标
+用来整个网站或信息系统的信息架构，供用户快速定位到目标。
 
 ## 何时使用
 
diff --git a/packages/ui/message/hi-docs.config.mdx b/packages/ui/message/hi-docs.config.mdx
index 35e86aaf0..dd5bd7429 100644
--- a/packages/ui/message/hi-docs.config.mdx
+++ b/packages/ui/message/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Message 消息
 
-轻量级的页面操作反馈提示
+轻量级的页面操作反馈提示。
 
 ## 何时使用
 
diff --git a/packages/ui/message/stories/custom.stories.tsx b/packages/ui/message/stories/custom.stories.tsx
index 8e39442a8..ac4528856 100644
--- a/packages/ui/message/stories/custom.stories.tsx
+++ b/packages/ui/message/stories/custom.stories.tsx
@@ -4,11 +4,11 @@ import Button from '@hi-ui/button'
 
 /**
  * @title message 属性自定义
- *
+ * @desc 支持配置 container 和 zIndex
  */
 
 export const Custom = () => {
-  const [container, setContainer] = useState<HTMLElement | null>(null)
+  const [container, setContainer] = useState<HTMLElement>()
   const message = useMemo(
     () =>
       createMessage({
@@ -23,29 +23,37 @@ export const Custom = () => {
       <div className="message-custom__wrap">
         <div
           ref={(e) => {
-            setContainer(e)
+            setContainer(e as HTMLDivElement)
           }}
-          id="ddd"
           style={{
-            width: 700,
-            height: 400,
-            background: 'rgb(245, 247, 250)',
-            zIndex: 1500,
-            // Need add it
+            width: '100%',
+            minWidth: 660,
+            height: 420,
+            marginBottom: 20,
+            background: '#f5f7fa',
+            boxShadow: '1px 2px 8px #ddd',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+
+            // Need add for it
             position: 'relative',
             overflow: 'hidden',
-          }}
-        ></div>
-        <Button
-          onClick={() => {
-            message.open({
-              title: '欢迎使用 HiUI 组件库',
-              type: 'success',
-            })
+            zIndex: 0,
           }}
         >
-          Toast
-        </Button>
+          <Button
+            type="primary"
+            onClick={() => {
+              message.open({
+                title: '欢迎使用 HiUI 组件库',
+                type: 'success',
+              })
+            }}
+          >
+            Toast
+          </Button>
+        </div>
       </div>
     </>
   )
diff --git a/packages/ui/modal/hi-docs.config.mdx b/packages/ui/modal/hi-docs.config.mdx
index 6facae84d..f7cf8750e 100644
--- a/packages/ui/modal/hi-docs.config.mdx
+++ b/packages/ui/modal/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Modal 模态框
 
-模态对话框一般会中断当前任务流，在相对无信息干扰的环境下完成微型任务
+模态对话框一般会中断当前任务流，在相对无信息干扰的环境下完成微型任务。
 
 ## 何时使用
 
diff --git a/packages/ui/notification/hi-docs.config.mdx b/packages/ui/notification/hi-docs.config.mdx
index d783d5ea2..28f70ada9 100644
--- a/packages/ui/notification/hi-docs.config.mdx
+++ b/packages/ui/notification/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Notification 通知
 
-系统发布通知、公布、公告等类型的全局信息
+系统发布通知、公布、公告等类型的全局信息。
 
 ## 何时使用
 
diff --git a/packages/ui/notification/stories/custom.stories.tsx b/packages/ui/notification/stories/custom.stories.tsx
index e3b638a28..34903866b 100644
--- a/packages/ui/notification/stories/custom.stories.tsx
+++ b/packages/ui/notification/stories/custom.stories.tsx
@@ -12,7 +12,7 @@ export const Custom = () => {
   const notification = useMemo(
     () =>
       createNotification({
-        container: container,
+        container,
         zIndex: 2000,
       }),
     [container]
diff --git a/packages/ui/number-input/hi-docs.config.mdx b/packages/ui/number-input/hi-docs.config.mdx
index f6eabe176..a7bba1fbf 100644
--- a/packages/ui/number-input/hi-docs.config.mdx
+++ b/packages/ui/number-input/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # NumberInput 数字输入框
 
-专门用于接收用户数字输入的输入框
+专门用于接收用户数字输入的输入框。
 
 ## 何时使用
 
diff --git a/packages/ui/pagination/hi-docs.config.mdx b/packages/ui/pagination/hi-docs.config.mdx
index 3cd8bc3fb..db36cc2ed 100644
--- a/packages/ui/pagination/hi-docs.config.mdx
+++ b/packages/ui/pagination/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Pagination 分页
 
-用来分隔一个长列表，每次只加载一个页面，从而可释放后端服务器加载压力
+用来分隔一个长列表，每次只加载一个页面，从而可释放后端服务器加载压力。
 
 ## 何时使用
 
diff --git a/packages/ui/picker/hi-docs.config.mdx b/packages/ui/picker/hi-docs.config.mdx
index fd553c6be..36dac456c 100644
--- a/packages/ui/picker/hi-docs.config.mdx
+++ b/packages/ui/picker/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# Picker 组件中文名
+# Picker 选择器
 
-组件中文介绍
+下拉框选择器。
 
 ## 何时使用
 
diff --git a/packages/ui/pop-confirm/hi-docs.config.mdx b/packages/ui/pop-confirm/hi-docs.config.mdx
index e2e158527..88e43a951 100644
--- a/packages/ui/pop-confirm/hi-docs.config.mdx
+++ b/packages/ui/pop-confirm/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# PopConfirm 组件中文名
+# PopConfirm 气泡确认框
 
-组件中文介绍
+气泡确认框是指点击元素，弹出气泡式的确认框。
 
 ## 何时使用
 
diff --git a/packages/ui/pop-confirm/stories/gutter-gap.stories.tsx b/packages/ui/pop-confirm/stories/gutter-gap.stories.tsx
index 66c5387d2..d440020f0 100644
--- a/packages/ui/pop-confirm/stories/gutter-gap.stories.tsx
+++ b/packages/ui/pop-confirm/stories/gutter-gap.stories.tsx
@@ -3,7 +3,8 @@ import PopConfirm from '../src'
 import Button from '@hi-ui/button'
 
 /**
- * @title 设置基于依附元素的间隙偏移量
+ * @title 设置间隙偏移量
+ * @desc 设置基于依附元素的间隙偏移量
  */
 export const GutterGap = () => {
   return (
diff --git a/packages/ui/popover/hi-docs.config.mdx b/packages/ui/popover/hi-docs.config.mdx
index 69a80d32a..70fd06868 100644
--- a/packages/ui/popover/hi-docs.config.mdx
+++ b/packages/ui/popover/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Popover 气泡卡片
 
-以气泡的样式，在响应事件的时候，以浮层的形式弹出
+以气泡的样式，在响应事件的时候，以浮层的形式弹出。
 
 ## 何时使用
 
diff --git a/packages/ui/popover/stories/gutter-gap.stories.tsx b/packages/ui/popover/stories/gutter-gap.stories.tsx
index b87d139c0..4f8d868af 100644
--- a/packages/ui/popover/stories/gutter-gap.stories.tsx
+++ b/packages/ui/popover/stories/gutter-gap.stories.tsx
@@ -3,7 +3,8 @@ import Popover from '../src'
 import Button from '@hi-ui/button'
 
 /**
- * @title 设置基于依附元素的间隙偏移量
+ * @title 设置间隙偏移量
+ * @desc 设置基于依附元素的间隙偏移量
  */
 export const GutterGap = () => {
   const title = <span>文字提示</span>
diff --git a/packages/ui/popover/stories/with-api.stories.tsx b/packages/ui/popover/stories/with-api.stories.tsx
index 1cf10f8cb..83f5d3247 100644
--- a/packages/ui/popover/stories/with-api.stories.tsx
+++ b/packages/ui/popover/stories/with-api.stories.tsx
@@ -11,9 +11,9 @@ import { IconButton } from '@hi-ui/icon-button'
  */
 export const WithApi = () => {
   const FormItem = Form.Item
-  const key1 = 'key1'
+  const key = 'my_key'
 
-  const Title = ({ title }) => {
+  const Title = ({ title }: { title: string }) => {
     return (
       <div
         style={{
@@ -24,7 +24,7 @@ export const WithApi = () => {
         }}
       >
         <span>{title}</span>
-        <IconButton effect icon={<CloseOutlined />} onClick={() => Popover.close(key1)} />
+        <IconButton effect icon={<CloseOutlined />} onClick={() => Popover.close(key)} />
       </div>
     )
   }
@@ -64,7 +64,7 @@ export const WithApi = () => {
           </Form>
         </div>
         <div style={{ display: 'flex' }}>
-          <Button style={{ flex: 1 }} onClick={() => Popover.close(key1)}>
+          <Button style={{ flex: 1 }} onClick={() => Popover.close(key)}>
             取消
           </Button>
           <Button
@@ -75,7 +75,7 @@ export const WithApi = () => {
               setLoading(true)
               setTimeout(() => {
                 setLoading(false)
-                Popover.close(key1)
+                Popover.close(key)
               }, 1000)
             }}
           >
@@ -94,7 +94,7 @@ export const WithApi = () => {
         <Button
           onClick={(e) => {
             Popover.open(e.target as HTMLElement, {
-              key: key1,
+              key: key,
               title: <Title title="文字标题" />,
               content: <Content />,
               arrow: false,
@@ -111,7 +111,7 @@ export const WithApi = () => {
         <Button
           onClick={(e) => {
             Popover.open(e.target as HTMLElement, {
-              key: key1,
+              key: key,
               title: <Title title="文字标题 2" />,
               content: <Content />,
               arrow: false,
diff --git a/packages/ui/popper/hi-docs.config.mdx b/packages/ui/popper/hi-docs.config.mdx
index 8e39e1609..742bb2b84 100644
--- a/packages/ui/popper/hi-docs.config.mdx
+++ b/packages/ui/popper/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# Popper 组件中文名
+# Popper 弹出框
 
-组件中文介绍
+弹出框组件。
 
 ## 何时使用
 
diff --git a/packages/ui/portal/hi-docs.config.mdx b/packages/ui/portal/hi-docs.config.mdx
index 3cf80b581..4de0771cd 100644
--- a/packages/ui/portal/hi-docs.config.mdx
+++ b/packages/ui/portal/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# Portal 组件中文名
+# Portal 传送门
 
-组件中文介绍
+传送门组件。
 
 ## 何时使用
 
diff --git a/packages/ui/preview/hi-docs.config.mdx b/packages/ui/preview/hi-docs.config.mdx
index 35dcc4680..bd1b44aa0 100644
--- a/packages/ui/preview/hi-docs.config.mdx
+++ b/packages/ui/preview/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Preview 图片预览
 
-预览当前图片
+预览当前图片。
 
 ## 何时使用
 
diff --git a/packages/ui/progress/hi-docs.config.mdx b/packages/ui/progress/hi-docs.config.mdx
index 4e96c9127..8cf3b0d55 100644
--- a/packages/ui/progress/hi-docs.config.mdx
+++ b/packages/ui/progress/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Progress 进度条
 
-用来展示当前任务、事件或操作的进展程度
+用来展示当前任务、事件或操作的进展程度。
 
 ## 何时使用
 
diff --git a/packages/ui/provider/hi-docs.config.mdx b/packages/ui/provider/hi-docs.config.mdx
index efe1db91d..93129ac1a 100644
--- a/packages/ui/provider/hi-docs.config.mdx
+++ b/packages/ui/provider/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# Provider 组件中文名
+# Provider provider
 
-组件中文介绍
+内容提供者。
 
 ## 何时使用
 
diff --git a/packages/ui/radio/hi-docs.config.mdx b/packages/ui/radio/hi-docs.config.mdx
index 28ca61337..de4392c71 100644
--- a/packages/ui/radio/hi-docs.config.mdx
+++ b/packages/ui/radio/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Radio 单选
 
-单选是用来在一组平铺选项中选择目标选项，每次只选一个
+单选是用来在一组平铺选项中选择目标选项，每次只选一个。
 
 ## 何时使用
 
diff --git a/packages/ui/rating/hi-docs.config.mdx b/packages/ui/rating/hi-docs.config.mdx
index 761c244c0..fdd1aa4d7 100644
--- a/packages/ui/rating/hi-docs.config.mdx
+++ b/packages/ui/rating/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Rate 评分
 
-评分是通过离散型数据来设置某一个指标优劣的组件
+评分是通过离散型数据来设置某一个指标优劣的组件。
 
 ## 何时使用
 
diff --git a/packages/ui/resize-box/hi-docs.config.mdx b/packages/ui/resize-box/hi-docs.config.mdx
index 1f1c95531..eb3b4ebad 100644
--- a/packages/ui/resize-box/hi-docs.config.mdx
+++ b/packages/ui/resize-box/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # ResizeBox 伸缩框
 
-用于可调整大小的布局
+用于可调整大小的布局。
 
 ## 使用示例
 
diff --git a/packages/ui/scrollbar/hi-docs.config.mdx b/packages/ui/scrollbar/hi-docs.config.mdx
index 0c0439d14..eb7ce0763 100644
--- a/packages/ui/scrollbar/hi-docs.config.mdx
+++ b/packages/ui/scrollbar/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Scrollbar 滚动条
 
-滚动条用于跨系统统一滚动视觉样式、行为，便捷监听滚动事件
+滚动条用于跨系统统一滚动视觉样式、行为，便捷监听滚动事件。
 
 ## 何时使用
 
@@ -13,3 +13,12 @@
 ## Props
 
 <!-- Inject Props -->
+
+## Type
+
+#### Settings
+
+| 参数                        | 说明            | 类型     | 可选值         | 默认值 |
+| -------------------------- | --------------- | ------- | ------------- | ----- |
+| scrollbarXStickToBottom    | 开启横向滚动条吸底 | boolean | true \| false | -     |
+| scrollbarXStickToBottomGap | 横向滚动条吸底间隙 | number  | -             | -     |
diff --git a/packages/ui/scrollbar/src/Scrollbar.tsx b/packages/ui/scrollbar/src/Scrollbar.tsx
index f72f2da71..33e841462 100644
--- a/packages/ui/scrollbar/src/Scrollbar.tsx
+++ b/packages/ui/scrollbar/src/Scrollbar.tsx
@@ -91,7 +91,7 @@ export const Scrollbar = forwardRef<HTMLDivElement | null, ScrollbarProps>(
       () => ({
         instance: ps,
         containerElement: containerElement || undefined,
-        updata: () => {
+        update: () => {
           ps?.update()
         },
       }),
@@ -181,7 +181,7 @@ export interface ScrollbarProps extends HiBaseHTMLProps<'div'>, ScrollbarEventPr
    * 滚动条配置
    * @default {}
    */
-  settings: Settings
+  settings?: Settings
 }
 
 if (__DEV__) {
diff --git a/packages/ui/scrollbar/src/types.ts b/packages/ui/scrollbar/src/types.ts
index 5745ad78a..a57d97f4b 100644
--- a/packages/ui/scrollbar/src/types.ts
+++ b/packages/ui/scrollbar/src/types.ts
@@ -14,7 +14,7 @@ export interface ScrollbarHelpers {
   /**
    * 更新滚动条
    */
-  updata?: () => void
+  update?: () => void
 }
 
 export type ScrollbarAxesEnum = 'both' | 'x' | 'y' | 'none'
@@ -79,11 +79,11 @@ export type ScrollbarPositionEnum =
  */
 export type Settings = PerfectScrollbar.Options & {
   /**
-   * 开启滚动条吸底
+   * 开启横向滚动条吸底
    */
-  isBottomToScreenBottom?: boolean
+  scrollbarXStickToBottom?: boolean
   /**
-   * 滚动条吸底距离
+   * 横向滚动条吸底间隙
    */
-  heightFromBottom?: number
+  scrollbarXStickToBottomGap?: number
 }
diff --git a/packages/ui/scrollbar/stories/axes.stories.tsx b/packages/ui/scrollbar/stories/axes.stories.tsx
index d3e655ae2..270776116 100644
--- a/packages/ui/scrollbar/stories/axes.stories.tsx
+++ b/packages/ui/scrollbar/stories/axes.stories.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import Scrollbar from '../src'
 
 /**
- * @title 使能坐标轴
+ * @title 使用坐标轴
  * @desc 默认 `x`、`y` 都可滚动
  */
 export const Axes = () => {
@@ -19,7 +19,7 @@ export const Axes = () => {
 
   return (
     <>
-      <h1>使能坐标轴</h1>
+      <h1>使用坐标轴</h1>
       <h2>both(default)</h2>
       <div className="scrollbar-axes__wrap" style={{ height: 320, marginBottom: 64 }}>
         <Scrollbar>{scrollContent}</Scrollbar>
diff --git a/packages/ui/scrollbar/stories/fixed.stories.tsx b/packages/ui/scrollbar/stories/fixed.stories.tsx
deleted file mode 100644
index b25dc9e39..000000000
--- a/packages/ui/scrollbar/stories/fixed.stories.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { useRef, useEffect } from 'react'
-import Scrollbar from '../src'
-
-/**
- * @title 滚动条固定到屏幕底部
- * @desc 默认不开启
- */
-export const Fixed = () => {
-  const innerRef = useRef<any>()
-  useEffect(() => {
-    document.addEventListener('scroll', () => {
-      innerRef.current?.updata()
-    })
-  }, [])
-  return (
-    <div
-      id="outer"
-      style={{
-        height: '150vh',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'flex-end',
-      }}
-    >
-      <Scrollbar
-        innerRef={innerRef}
-        keepVisible
-        style={{
-          height: 400,
-          width: 600,
-        }}
-        settings={{ isBottomToScreenBottom: true, heightFromBottom: 20 }}
-      >
-        <div style={{ height: 640, width: '200%' }}>
-          <div
-            style={{
-              height: 160,
-              background: 'linear-gradient(90deg,#03A9F433,#03A9F4cc)',
-            }}
-          />
-          <div
-            style={{
-              height: 160,
-              background: 'linear-gradient(90deg,#00968833,#009688cc)',
-            }}
-          />
-          <div
-            style={{
-              height: 160,
-              background: 'linear-gradient(90deg,#FF572233,#FF5722cc)',
-            }}
-          />
-          <div
-            style={{
-              height: 160,
-              background: 'linear-gradient(90deg,#E91E6333,#E91E63cc)',
-            }}
-          />
-        </div>
-      </Scrollbar>
-    </div>
-  )
-}
diff --git a/packages/ui/scrollbar/stories/index.stories.tsx b/packages/ui/scrollbar/stories/index.stories.tsx
index 013ee1024..8952e9b91 100644
--- a/packages/ui/scrollbar/stories/index.stories.tsx
+++ b/packages/ui/scrollbar/stories/index.stories.tsx
@@ -5,7 +5,7 @@ export * from './basic.stories'
 export * from './axes.stories'
 export * from './config.stories'
 export * from './event.stories'
-export * from './fixed.stories'
+export * from './sticky.stories'
 
 export default {
   title: 'Others/Scrollbar',
diff --git a/packages/ui/scrollbar/stories/sticky.stories.tsx b/packages/ui/scrollbar/stories/sticky.stories.tsx
new file mode 100644
index 000000000..27c6f57d3
--- /dev/null
+++ b/packages/ui/scrollbar/stories/sticky.stories.tsx
@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from 'react'
+import Scrollbar, { ScrollbarHelpers } from '../src'
+
+/**
+ * @title 滚动条吸底
+ * @desc 默认不开启，开启后默认在 Scrollbar 组件内部滚动有效，如需外部使用，需要手动调用 update 方法
+ */
+export const Fixed = () => {
+  const innerRef = useRef<ScrollbarHelpers>(null)
+  const update = () => innerRef.current?.update?.()
+
+  // 此处演示在外部使用该效果
+  useEffect(() => {
+    document.addEventListener('scroll', update)
+
+    return () => {
+      document.removeEventListener('scroll', update)
+    }
+  }, [])
+
+  return (
+    <>
+      <h1>滚动条吸底</h1>
+      <div className="scrollbar-sticky__wrap">
+        <Scrollbar
+          innerRef={innerRef}
+          keepVisible
+          style={{
+            height: 400,
+          }}
+          settings={{ scrollbarXStickToBottom: true, scrollbarXStickToBottomGap: 20 }}
+        >
+          <div style={{ height: 640, width: '200%' }}>
+            <div
+              style={{
+                height: 160,
+                background: 'linear-gradient(90deg,#03A9F433,#03A9F4cc)',
+              }}
+            />
+            <div
+              style={{
+                height: 160,
+                background: 'linear-gradient(90deg,#00968833,#009688cc)',
+              }}
+            />
+            <div
+              style={{
+                height: 160,
+                background: 'linear-gradient(90deg,#FF572233,#FF5722cc)',
+              }}
+            />
+            <div
+              style={{
+                height: 160,
+                background: 'linear-gradient(90deg,#E91E6333,#E91E63cc)',
+              }}
+            />
+          </div>
+        </Scrollbar>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/search/hi-docs.config.mdx b/packages/ui/search/hi-docs.config.mdx
index 9b850494b..c71d28966 100644
--- a/packages/ui/search/hi-docs.config.mdx
+++ b/packages/ui/search/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Search 搜索
 
-可以通过关键字从海量数据条目中检索到匹配数据，较大提升数据检索能力
+可以通过关键字从海量数据条目中检索到匹配数据，较大提升数据检索能力。
 
 ## 何时使用
 
diff --git a/packages/ui/slider/hi-docs.config.mdx b/packages/ui/slider/hi-docs.config.mdx
index f1d408e2f..a1c75c9cf 100644
--- a/packages/ui/slider/hi-docs.config.mdx
+++ b/packages/ui/slider/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Slider 滑块
 
-通过简单拖拽的交互形式实现数值的设置
+通过简单拖拽的交互形式实现数值的设置。
 
 ## 何时使用
 
diff --git a/packages/ui/spinner/hi-docs.config.mdx b/packages/ui/spinner/hi-docs.config.mdx
index c0202c474..88757f0e3 100644
--- a/packages/ui/spinner/hi-docs.config.mdx
+++ b/packages/ui/spinner/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# Spinner 组件中文名
+# Spinner 旋转动效
 
-组件中文介绍
+旋转动效组件。
 
 ## 何时使用
 
diff --git a/packages/ui/stepper/hi-docs.config.mdx b/packages/ui/stepper/hi-docs.config.mdx
index ba88d040d..216048df5 100644
--- a/packages/ui/stepper/hi-docs.config.mdx
+++ b/packages/ui/stepper/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Stepper 步骤条
 
-用来标识和组织完成一个任务时的信息
+用来标识和组织完成一个任务时的信息。
 
 ## 何时使用
 
diff --git a/packages/ui/svg-icon/hi-docs.config.mdx b/packages/ui/svg-icon/hi-docs.config.mdx
index 3aafd2bf9..06bdea48f 100644
--- a/packages/ui/svg-icon/hi-docs.config.mdx
+++ b/packages/ui/svg-icon/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# SvgIcon 组件中文名
+# SvgIcon SVG图标
 
-组件中文介绍
+用于快速生成 SVG 图标的组件。
 
 ## 何时使用
 
diff --git a/packages/ui/switch/hi-docs.config.mdx b/packages/ui/switch/hi-docs.config.mdx
index 4705022d2..f7484d2be 100644
--- a/packages/ui/switch/hi-docs.config.mdx
+++ b/packages/ui/switch/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Switch 开关
 
-一种通过开启和关闭来控制两种状态的控制器组件
+一种通过开启和关闭来控制两种状态的控制器组件。
 
 ## 何时使用
 
diff --git a/packages/ui/table/hi-docs.config.mdx b/packages/ui/table/hi-docs.config.mdx
index 6a8374d8e..6426e1456 100644
--- a/packages/ui/table/hi-docs.config.mdx
+++ b/packages/ui/table/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Table 表格
 
-可容纳多种数据类型的大型数据容器，并可支持多种数据相关和表格属性设置相关的操作，具有强大的统计功能
+可容纳多种数据类型的大型数据容器，并可支持多种数据相关和表格属性设置相关的操作，具有强大的统计功能。
 
 ## 何时使用
 
diff --git a/packages/ui/table/stories/scrollbar.stories.tsx b/packages/ui/table/stories/scrollbar.stories.tsx
index 92ff60d52..0283e86c8 100644
--- a/packages/ui/table/stories/scrollbar.stories.tsx
+++ b/packages/ui/table/stories/scrollbar.stories.tsx
@@ -354,11 +354,21 @@ export const Scrollbar = () => {
           columns={column}
           data={data}
           maxHeight={300}
-          scrollbar={{
-            keepVisible: true,
-            zIndex: 9,
-            settings: { isBottomToScreenBottom: true, heightFromBottom: 20 },
-          }}
+          scrollbar={
+            // 根据需要进行以下配置
+            {
+              // 保持滚动条始终可见
+              keepVisible: true,
+              // 设置滚动条的 z-index 值
+              zIndex: 9,
+              settings: {
+                // 垂直滑动时，让横向滚动条一直显示在容器底部
+                scrollbarXStickToBottom: true,
+                // 横向滚动条距离底部的距离
+                scrollbarXStickToBottomGap: 20,
+              },
+            }
+          }
         />
       </div>
     </>
diff --git a/packages/ui/tag-input/hi-docs.config.mdx b/packages/ui/tag-input/hi-docs.config.mdx
index f8130efa1..937fc88e6 100644
--- a/packages/ui/tag-input/hi-docs.config.mdx
+++ b/packages/ui/tag-input/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# TagInput 组件中文名
+# TagInput 标签输入框
 
-组件中文介绍
+输入框的一种标签展示形式。
 
 ## 何时使用
 
diff --git a/packages/ui/tag/hi-docs.config.mdx b/packages/ui/tag/hi-docs.config.mdx
index 597c51544..74e3f36fe 100644
--- a/packages/ui/tag/hi-docs.config.mdx
+++ b/packages/ui/tag/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Tag 标签
 
-用来标记信息的属性，用以区分信息
+用来标记信息的属性，用以区分信息。
 
 ## 何时使用
 
diff --git a/packages/ui/time-picker/hi-docs.config.mdx b/packages/ui/time-picker/hi-docs.config.mdx
index 3679d85dc..c4046a588 100644
--- a/packages/ui/time-picker/hi-docs.config.mdx
+++ b/packages/ui/time-picker/hi-docs.config.mdx
@@ -1,5 +1,7 @@
 # TimePicker 时间选择器
 
+在弹出面板上选择时间，以便捷完成时间输入的控件。
+
 ## 何时使用
 
 ## 使用示例
diff --git a/packages/ui/timeline/hi-docs.config.mdx b/packages/ui/timeline/hi-docs.config.mdx
index f901f5dd4..a411339f8 100644
--- a/packages/ui/timeline/hi-docs.config.mdx
+++ b/packages/ui/timeline/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Timeline 时间轴
 
-以时间点为维度展示垂直信息流的一种组件
+以时间点为维度展示垂直信息流的一种组件。
 
 ## 何时使用
 
diff --git a/packages/ui/toast/hi-docs.config.mdx b/packages/ui/toast/hi-docs.config.mdx
index 4c968b5fe..c7cf55b9e 100644
--- a/packages/ui/toast/hi-docs.config.mdx
+++ b/packages/ui/toast/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# Toast 组件中文名
+# Toast 弹出提示
 
-组件中文介绍
+弹出提示组件。
 
 ## 何时使用
 
diff --git a/packages/ui/tooltip/hi-docs.config.mdx b/packages/ui/tooltip/hi-docs.config.mdx
index f5b3fa100..6a1dfe6ca 100644
--- a/packages/ui/tooltip/hi-docs.config.mdx
+++ b/packages/ui/tooltip/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Tooltip 文字提示
 
-常用的文字提示组件
+常用的文字提示组件。
 
 ## 何时使用
 
diff --git a/packages/ui/tooltip/stories/gutter-gap.stories.tsx b/packages/ui/tooltip/stories/gutter-gap.stories.tsx
index bb42a441f..ea45f733d 100644
--- a/packages/ui/tooltip/stories/gutter-gap.stories.tsx
+++ b/packages/ui/tooltip/stories/gutter-gap.stories.tsx
@@ -3,7 +3,8 @@ import Tooltip from '../src'
 import Button from '@hi-ui/button'
 
 /**
- * @title 设置基于依附元素的间隙偏移量
+ * @title 设置间隙偏移量
+ * @desc 设置基于依附元素的间隙偏移量
  */
 export const GutterGap = () => {
   return (
diff --git a/packages/ui/transfer/hi-docs.config.mdx b/packages/ui/transfer/hi-docs.config.mdx
index 3261aaf0f..7c01613b2 100644
--- a/packages/ui/transfer/hi-docs.config.mdx
+++ b/packages/ui/transfer/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Transfer 穿梭框
 
-在一定展示空间里对选项进行单个或批量移动从而完成挑选的数据容器
+在一定展示空间里对选项进行单个或批量移动从而完成挑选的数据容器。
 
 ## 何时使用
 
diff --git a/packages/ui/tree-select/hi-docs.config.mdx b/packages/ui/tree-select/hi-docs.config.mdx
index 0d270ff92..a755b8257 100644
--- a/packages/ui/tree-select/hi-docs.config.mdx
+++ b/packages/ui/tree-select/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # TreeSelect 树形选择
 
-一种接收树形数据结构的选择器，为用户提供复杂数据展示的能力
+一种接收树形数据结构的选择器，为用户提供复杂数据展示的能力。
 
 ## 何时使用
 
diff --git a/packages/ui/tree/hi-docs.config.mdx b/packages/ui/tree/hi-docs.config.mdx
index a4007bf4d..c5b8a3489 100644
--- a/packages/ui/tree/hi-docs.config.mdx
+++ b/packages/ui/tree/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Tree 树形控件
 
-具备展示多层级数据结构特征的组件
+具备展示多层级数据结构特征的组件。
 
 ## 何时使用
 
diff --git a/packages/ui/upload/hi-docs.config.mdx b/packages/ui/upload/hi-docs.config.mdx
index d46836dae..0526a3dbc 100644
--- a/packages/ui/upload/hi-docs.config.mdx
+++ b/packages/ui/upload/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Upload 上传
 
-用来上传多种格式的附件
+用来上传多种格式的附件。
 
 ## 何时使用
 
diff --git a/packages/ui/watermark/hi-docs.config.mdx b/packages/ui/watermark/hi-docs.config.mdx
index 08b86cbcc..5db69845d 100644
--- a/packages/ui/watermark/hi-docs.config.mdx
+++ b/packages/ui/watermark/hi-docs.config.mdx
@@ -1,6 +1,6 @@
 # Watermark 水印
 
-用于向元素添加水印
+用于向元素添加水印。
 
 ## 何时使用
 
diff --git a/packages/ui/zen-mode/hi-docs.config.mdx b/packages/ui/zen-mode/hi-docs.config.mdx
index ed4615c43..782a36e80 100644
--- a/packages/ui/zen-mode/hi-docs.config.mdx
+++ b/packages/ui/zen-mode/hi-docs.config.mdx
@@ -1,6 +1,6 @@
-# ZenMode 组件中文名
+# ZenMode 禅模式
 
-组件中文介绍
+页面内容局部放大，快速切换为 PPT 演示模式。
 
 ## 何时使用
 
diff --git a/patches/perfect-scrollbar+1.5.5.patch b/patches/perfect-scrollbar+1.5.5.patch
index cb31b1db7..499a912b1 100644
--- a/patches/perfect-scrollbar+1.5.5.patch
+++ b/patches/perfect-scrollbar+1.5.5.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js b/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js
-index 4215b17..119e0da 100644
+index 4215b17..2edc906 100644
 --- a/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js
 +++ b/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js
 @@ -418,6 +418,16 @@ function getThumbSize(i, thumbSize) {
@@ -11,7 +11,7 @@ index 4215b17..119e0da 100644
 +  var elementTop = rect.top;
 +  var elementHeight = element.offsetHeight || element.clientHeight;
 +  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-+  viewportHeight -= (i.settings && i.settings.heightFromBottom) || 0;
++  viewportHeight -= (i.settings && i.settings.scrollbarXStickToBottomGap) || 0;
 +  var distance = viewportHeight - (elementTop + elementHeight);
 +  return distance;
 +}
@@ -24,7 +24,7 @@ index 4215b17..119e0da 100644
      xRailOffset.left = element.scrollLeft;
    }
 +  var bottomToScreenBottomDistance = 0
-+  if(i.settings.isBottomToScreenBottom){
++  if(i.settings.scrollbarXStickToBottom){
 +    bottomToScreenBottomDistance = getElementBottomToScreenBottomDistance(
 +      element,
 +      i
diff --git a/scripts/hi-docs/src/merge-docs.mjs b/scripts/hi-docs/src/merge-docs.mjs
index 1f7c6b037..b332eb24f 100644
--- a/scripts/hi-docs/src/merge-docs.mjs
+++ b/scripts/hi-docs/src/merge-docs.mjs
@@ -23,7 +23,7 @@ export async function mergeDocs(components) {
       let markdown = info.readme
       markdown = mergePropsIntoReadme(markdown, info.props)
       const markdownMd = mergeStoriesCodeIntoReadme(info.name, markdown, info.stories)
-      await writeReadmeAsync(info, markdownMd)
+      // await writeReadmeAsync(info, markdownMd)
       await appendReadmeAsync(info, markdownMd)
       markdown = transformJSX(markdown)
       markdown = mergeStoriesIntoReadme(info.name, markdown, info.stories)
@@ -122,7 +122,12 @@ async function writeReadmeAsync(info, markdown) {
 }
 
 async function appendReadmeAsync(info, markdown) {
-  markdown = '\n\n###@###\n\n' + markdown
+  markdown =
+    '\n\n###@###\n\n' +
+    markdown
+      .replace(/ {2,}|\n\s*\/\*\*[\s\S]*?\*\/|\n\s*<h1>.*?<\/h1>/g, ' ')
+      // .replace('## Props', `###@###\n\n# ${info.title}\n\n## Props`)
+      .replace(/## 何时使用[\s\S]*?## 使用示例/g, '## 使用示例')
   await Promise.all([appendFileAsync(Path.join(outputPath, 'hiui.md'), info.name, markdown)])
 }