📃 docs: 完善 messageBox 组件文档

packages/docs/src/components/message-box.md

@@ -36,15 +36,53 @@ type 字段表明消息类型，可以为success，error，info和 warning，无
 
 <ivy-button type="primary" @click="showPromptBox"> 打开一个 Prompt 消息框 </ivy-button>
 
+## 可用的 CSS 变量
+
+:::details 点击查看
+
+```css
+:host {
+  --ivy-message-box-box-shadow: var(--ivy-box-shadow);
+  --ivy-message-box-bg-color: var(--ivy-color-white);
+  --ivy-message-box-text-color: var(--ivy-text-color-regular);
+  --ivy-message-box-header-color: var(--ivy-text-color-primary);
+  --ivy-message-box-icon-close-color: var(--ivy-text-color-regular);
+  --ivy-message-box-icon-close-color-hover: var(--ivy-color-primary);
+  --ivy-message-box-border-radius: var(--ivy-border-radius-medium);
+  --ivy-message-box-width: 420px;
+}
+```
+
+:::
+
 ## API
 
 ### 属性
 
-| 名称     | 说明     | 类型   | 可选值          | 默认值 |
-| -------- | -------- | ------ | --------------- | ------ |
-| offset   | 偏移距离 | number | -               | `0`    |
-| position | 固钉位置 | string | `top \| bottom` | `top`  |
-| z-index  | z-index  | number | -               | `100`  |
+| 名称                | 说明                   | 类型     | 可选值                       | 默认值                          |
+| ------------------- | ---------------------- | -------- | ---------------------------- | ------------------------------- |
+| title               | massageBox 的标题      | string   | -                            | -                               |
+| type                | 消息类型，用于图标显示 | string   | `success/info/warning/error` | -                               |
+| message             | massageBox 的内容      | string   | -                            | -                               |
+| callback            | 指定关闭后的回调       | function | -                            | -                               |
+| show-close          | 是否显示右上角关闭按钮 | boolean  | -                            | `true`                          |
+| show-cancel-button  | 是否显示取消按钮       | boolean  | -                            | false(confirm/prompt 时为 true) |
+| show-confirm-button | 是否显示确定按钮       | boolean  | -                            | true                            |
+| cancel-button-text  | 取消按钮的文本内容     | string   | -                            | 取消                            |
+| confirm-button-text | 确定按钮的文本内容     | string   | -                            | 确定                            |
+| show-input          | 是否显示输入框         | boolean  | -                            | false（prompt 方式调用为 true） |
+| input-placeholder   | 输入框占位文本         | string   | -                            | ''                              |
+| input-type          | 输入框的类型           | string   | -                            | 'text'                          |
+| input-value         | 输入框的初始文本       | string   | -                            | ''                              |
+| input-pattern       | 输入框的校验表达式     | regexp   | -                            | -                               |
+| input-validator     | 输入框的校验函数       | regexp   | -                            | -                               |
+| input-error-message | 校验未通过时的提示文本 | string   | -                            | 输入的数据不合法!               |
+
+:::warning 注意
+input-validator：应该返回一个 boolean 或者 string， 如果返回的是一个 string 类型，那么该返回值会被赋值给 inputErrorMessage 用于向用户展示错误消息。
+
+input-pattern：优先级比 `input-validator` 低，如果同时出现以 `input-validator` 为准
+:::
 
 ### 事件
 
@@ -56,7 +94,6 @@ type 字段表明消息类型，可以为success，error，info和 warning，无
 <script setup>
 import { $ivy } from '@ivy-design/ce'
 const showMsgBox = () => {
-    console.log('click', $ivy)
     $ivy.msgBox({
         title: '提示',
         message: '这是一条提示消息',
@@ -79,17 +116,17 @@ const showConfirmBox = () => {
 const showPromptBox = () => {
     $ivy.msgBox.prompt('请输入内容', "提示", {
         inputPattern: /^[a-zA-Z0-9]+$/,
+        inputValue: '123',
         inputErrorMessage: '只能输入数字',
         inputPlaceholder: '请输入内容',
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         inputValidator: (val)=>{
             return !/^[a-zA-Z0-9]+$/.test(val)
+        },
+        callback(action,val){
+            console.log(action, val)
         }
-    }).then((value) => {
-        console.log('confirm', value)
-    }).catch(() => {
-        console.log('cancel')
     })
 }
 </script>