docs: 优化组件文档

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 (

packages/ui/avatar/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# Avatar 组件中文名
+# Avatar 头像
 
-组件中文介绍
+用来代表用户或事物，支持图片、图标或字符展示。
 
 ## 何时使用
 

packages/ui/check-cascader/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# CheckCascader 组件中文名
+# CheckCascader 多项级联选择器
 
-组件中文介绍
+通过采用多级分类的方式将选项进行分隔，便于用户完成多项选择，在不同类型之间切换。
 
 ## 何时使用
 

packages/ui/check-select/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# CheckSelect 组件中文名
+# CheckSelect 多项选择器
 
-组件中文介绍
+弹出一个下拉菜单给用户进行部分选项选择的操作。
 
 ## 何时使用
 

packages/ui/check-tree-select/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# CheckTreeSelect 组件中文名
+# CheckTreeSelect 多选树形选择器
 
-组件中文介绍
+一种接收树形数据结构的多项选择器，为用户提供复杂数据展示的能力。
 
 ## 何时使用
 

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="请选择"
               />

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

packages/ui/descriptions/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# Descriptions 组件中文名
+# Descriptions 描述列表
 
-组件中文介绍
+展示只读性字段，一般用于详情页的信息展示。
 
 ## 何时使用
 

packages/ui/ellipsis-tooltip/hi-docs.config.mdx

@@ -1,6 +1,6 @@
 # EllipsisTooltip 文字超出提示
 
-组件中文介绍
+文字个数超出后展示省略号，鼠标悬停时出现全部描述。
 
 ## 何时使用
 

packages/ui/empty-state/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# EmptyState 组件中文名
+# EmptyState 空状态
 
-组件中文介绍
+指当前场景没有对应的数据内容，呈现出的一种状态。
 
 ## 何时使用
 

packages/ui/file-select/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# FileSelect 组件中文名
+# FileSelect 文件选择器
 
-组件中文介绍
+用于选择文件。
 
 ## 何时使用
 

packages/ui/highlighter/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# Highlighter 组件中文名
+# Highlighter 文本高亮
 
-组件中文介绍
+用于文本关键字高亮展示，实现快速结果匹配。
 
 ## 何时使用
 

packages/ui/hiui/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# Hiui 组件中文名
+# HiUI
 
-组件中文介绍
+组件汇总
 
 ## 何时使用
 

packages/ui/icon-button/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# IconButton 组件中文名
+# IconButton 图标按钮
 
-组件中文介绍
+带有图标的按钮。
 
 ## 何时使用
 

packages/ui/list/hi-docs.config.mdx

@@ -1,6 +1,6 @@
 # List 列表
 
-通用列表
+通用列表。
 
 ## 何时使用
 

packages/ui/loading/hi-docs.config.mdx

@@ -1,6 +1,6 @@
 # Loading 动效加载
 
-用于请求和数据加载成功的中间状态，缓冲用户的等待焦虑
+用于请求和数据加载成功的中间状态，缓冲用户的等待焦虑。
 
 ## 何时使用
 

packages/ui/locale-context/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# LocaleContext 组件中文名
+# LocaleContext 语言上下文
 
-组件中文介绍
+语言设置上下文。
 
 ## 何时使用
 

packages/ui/menu/hi-docs.config.mdx

@@ -1,6 +1,6 @@
 # Menu 菜单
 
-用来整个网站或信息系统的信息架构，供用户快速定位到目标
+用来整个网站或信息系统的信息架构，供用户快速定位到目标。
 
 ## 何时使用
 

packages/ui/message/hi-docs.config.mdx

@@ -1,6 +1,6 @@
 # Message 消息
 
-轻量级的页面操作反馈提示
+轻量级的页面操作反馈提示。
 
 ## 何时使用
 

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>
     </>
   )

packages/ui/modal/hi-docs.config.mdx

@@ -1,6 +1,6 @@
 # Modal 模态框
 
-模态对话框一般会中断当前任务流，在相对无信息干扰的环境下完成微型任务
+模态对话框一般会中断当前任务流，在相对无信息干扰的环境下完成微型任务。
 
 ## 何时使用
 

packages/ui/notification/hi-docs.config.mdx

@@ -1,6 +1,6 @@
 # Notification 通知
 
-系统发布通知、公布、公告等类型的全局信息
+系统发布通知、公布、公告等类型的全局信息。
 
 ## 何时使用
 

packages/ui/notification/stories/custom.stories.tsx

@@ -12,7 +12,7 @@ export const Custom = () => {
   const notification = useMemo(
     () =>
       createNotification({
-        container: container,
+        container,
         zIndex: 2000,
       }),
     [container]

packages/ui/number-input/hi-docs.config.mdx

@@ -1,6 +1,6 @@
 # NumberInput 数字输入框
 
-专门用于接收用户数字输入的输入框
+专门用于接收用户数字输入的输入框。
 
 ## 何时使用
 

packages/ui/pagination/hi-docs.config.mdx

@@ -1,6 +1,6 @@
 # Pagination 分页
 
-用来分隔一个长列表，每次只加载一个页面，从而可释放后端服务器加载压力
+用来分隔一个长列表，每次只加载一个页面，从而可释放后端服务器加载压力。
 
 ## 何时使用
 

packages/ui/picker/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# Picker 组件中文名
+# Picker 选择器
 
-组件中文介绍
+下拉框选择器。
 
 ## 何时使用
 

packages/ui/pop-confirm/hi-docs.config.mdx

@@ -1,6 +1,6 @@
-# PopConfirm 组件中文名
+# PopConfirm 气泡确认框
 
-组件中文介绍
+气泡确认框是指点击元素，弹出气泡式的确认框。
 
 ## 何时使用
 

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 (

packages/ui/popover/hi-docs.config.mdx

@@ -1,6 +1,6 @@
 # Popover 气泡卡片
 
-以气泡的样式，在响应事件的时候，以浮层的形式弹出
+以气泡的样式，在响应事件的时候，以浮层的形式弹出。
 
 ## 何时使用
 

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>