From af18a426e5a6333db35203f85ad3e86b33bd396a Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Mon, 30 Dec 2024 13:42:20 +0800
Subject: [PATCH 1/4] feat: dialog v15 adaption

---
 migrate-from-v2.md                       | 25 ++----------
 src/config.json                          |  1 +
 src/packages/button/button.scss          |  6 +--
 src/packages/dialog/demos/taro/demo2.tsx |  2 +-
 src/packages/dialog/dialog.scss          | 49 +++++++++++++++---------
 src/packages/dialog/dialog.taro.tsx      | 39 +++++++++++++------
 src/packages/dialog/dialog.tsx           | 39 +++++++++++++------
 src/styles/variables.scss                | 30 +++++++--------
 8 files changed, 106 insertions(+), 85 deletions(-)

diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index cb1ec0b797..c6767727ad 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -152,12 +152,7 @@ plugins: [
 
 #### Button
 
-- 移除 `plain`，通过 `fill="outline"` 实现
-- 增加 `ref`，对外暴露组件内 `button` 元素
-- CSS 变量中，对 `type` 类型对应的色值的定义，不在暴露到文档中，建议使用默认值，或修改主题变量
-- 增加 `fill` 模式类型，`dashed`，修改 `fill` 默认值为 `outline`。
-- 增加 `rightIcon`，可满足同时设置左右两个icon的情况。
-- 修改 `size` 为 `large` 时的默认 `width` 为 `100%` 的值，如果使用通栏的 `button`，可搭配 `block` 来使用。
+- 去掉一些样式变量。如 `$button-default-font-weight` `$button-large-font-weight` 等。
 
 #### Cell
 
@@ -550,21 +545,9 @@ plugins: [
 
 #### Dialog
 
-- `okText` 重命名为 `confirmText`，规范命名。
-- `mask` 重命名为 `overlay`，组件库中统一使用 Overlay 组件作为遮罩层，并使用 overlay 作为是否展示遮罩层的属性值。
-- `closeOnClickOverlay` 重命名为 `closeOnOverlayClick`，组件库统一到该属性。
-- `noOkBtn` 重命名为 `hideConfirmButton`，初始值不变，依然表示是否隐藏确认按钮，主要是为了语义化更强。
-- `noCancelBtn` 重命名为 `hideCancelButton`，初始值不变，依然表示是否隐藏取消按钮，主要是为了语义化更强。
-- `okBtnDisabled` 重命名为 `disableConfirmButton`，初始值不变，依然表示是否禁用确认按钮，主要是为了语义化更强。
-- 移除 `noFooter`，使用 footer 统一处理，当 footer 为空时，及可替代该值。目前 noFooter 也需要手动声明是否为 noFooter；修改后需手动指出 footer={null}
-- 移除 `textAlign`，改用样式变量 `--nutui-dialog-content-text-align` 或 SCSS 变量 `$dialog-content-text-align` 控制，默认值为 center。
-- 移除 `cancelAutoClose`，改为 `beforeCancel` 和 `beforeClose` 来实现，在点击关闭或取消时，可先触发这两个方法，以确定是否要关闭弹框，如返回true，则关闭；否则不关闭。
-- `onOk` 重命名为 `onConfirm`，规范命名。
-- `onClosed` 重命名为 `onClose`，规范命名，关闭时触发。
-- `onClickSelf` 重命名为 `onClick`，语义不变，仍表示点击弹框自身时触发事件。
-- 增加 `overlayStyle` 和 `overlayClassName`，用来配置 Overlay 组件样式。
-- 增加 `onOverlayClick`，支持点击overlay时，触发事件。
-- `onCancel` 回调不会自动关闭弹层，需主动调用 `Dialog.close(xx)`
+- 修改了操作按钮上下布局的样式；
+- 当只有一个主操作按钮时，主操作按钮样式撑开；
+- 增加了底部icon的大小设置的样式变量；修改右侧按钮的默认值为 16 px；
 
 #### Drag
 
diff --git a/src/config.json b/src/config.json
index 30e85c3ff1..438707038c 100644
--- a/src/config.json
+++ b/src/config.json
@@ -760,6 +760,7 @@
           "sort": 12,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "yangjinjun3"
         },
         {
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index dc39cbfee2..5792e1a66b 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -17,7 +17,7 @@
   padding: 0;
   height: $button-default-height;
   font-size: $button-default-font-size;
-  font-weight: $button-default-font-weight;
+  font-weight: $font-weight;
   text-align: center;
   cursor: pointer;
   transition: $button-transition;
@@ -155,7 +155,6 @@
     height: $button-xlarge-height;
     padding: $button-xlarge-padding;
     font-size: $button-xlarge-font-size;
-    font-weight: $button-large-font-weight;
     border-radius: $radius-base;
 
     .nut-button-text {
@@ -172,7 +171,6 @@
     }
     &-children {
       font-size: $button-xlarge-font-size;
-      font-weight: $button-large-font-weight;
     }
   }
 
@@ -180,7 +178,6 @@
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
-    font-weight: $button-large-font-weight;
     border-radius: $radius-s;
 
     .nut-button-text {
@@ -198,7 +195,6 @@
 
     &-children {
       font-size: $button-large-font-size;
-      font-weight: $button-large-font-weight;
     }
   }
 
diff --git a/src/packages/dialog/demos/taro/demo2.tsx b/src/packages/dialog/demos/taro/demo2.tsx
index d4c162c862..bfae016cde 100644
--- a/src/packages/dialog/demos/taro/demo2.tsx
+++ b/src/packages/dialog/demos/taro/demo2.tsx
@@ -19,7 +19,7 @@ const Demo2 = () => {
 
       <Cell title="提示弹框" onClick={() => setVisible2(true)} />
       <Dialog
-        title="提示弹框"
+        title="标题"
         visible={visible2}
         confirmText="确认"
         hideCancelButton
diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss
index 1cb463ebaf..0c03e9da18 100644
--- a/src/packages/dialog/dialog.scss
+++ b/src/packages/dialog/dialog.scss
@@ -7,7 +7,8 @@
   flex-direction: column;
   align-items: center;
   width: $dialog-width;
-  // max-height: 67%;
+  min-width: $dialog-min-width;
+  max-height: 67%;
   min-height: $dialog-min-height;
   padding: $dialog-padding;
   box-sizing: border-box;
@@ -60,11 +61,17 @@
     }
 
     &-bottom {
-      bottom: -56px;
+      bottom: -64px;
+      width: $dialog-bottom-close-icon-size;
+      height: $dialog-bottom-close-icon-size;
       left: 50%;
-      transform: translateY(-50%);
+      transform: translateX(-50%);
       .nut-icon {
-        color: $dialog-close-color;
+        color: $color-text-disabled;
+        background-color: $color-mask-part;
+        border-radius: 50%;
+        width: $dialog-bottom-close-icon-size;
+        height: $dialog-bottom-close-icon-size;
       }
     }
 
@@ -88,7 +95,7 @@
     max-height: $dialog-content-max-height;
     line-height: $dialog-content-line-height;
     font-size: $font-size-base;
-    color: $color-text;
+    color: $color-title;
     word-wrap: break-word;
     word-break: break-all;
     white-space: pre-wrap;
@@ -107,20 +114,20 @@
 
       .nut-button {
         min-width: 100%;
-        margin: 0;
+      }
 
-        &.nut-dialog-footer-ok {
-          order: 1;
-        }
-
-        &.nut-dialog-footer-cancel {
-          border: 0;
-          color: $color-text;
-          order: 2;
-          display: flex;
-          align-items: flex-end;
-          margin-top: $dialog-vertical-footer-ok-margin-top;
-        }
+      .nut-dialog-footer-ok {
+        order: 1;
+      }
+
+      .nut-dialog-footer-cancel {
+        margin: 0;
+        color: $color-text;
+        font-size: $font-size-base;
+        order: 2;
+        display: flex;
+        justify-content: center;
+        margin-top: $dialog-vertical-footer-ok-margin-top;
       }
     }
 
@@ -134,6 +141,12 @@
 
     &-ok {
       max-width: $dialog-footer-ok-max-width;
+      font-weight: $font-weight-bold;
+    }
+    &-block {
+      &.nut-button {
+        min-width: 100%;
+      }
     }
   }
 }
diff --git a/src/packages/dialog/dialog.taro.tsx b/src/packages/dialog/dialog.taro.tsx
index 69ba389562..0749e4a401 100644
--- a/src/packages/dialog/dialog.taro.tsx
+++ b/src/packages/dialog/dialog.taro.tsx
@@ -3,7 +3,7 @@ import type { MouseEvent } from 'react'
 import classNames from 'classnames'
 import { CSSTransition } from 'react-transition-group'
 import { View } from '@tarojs/components'
-import { Close } from '@nutui/icons-react-taro'
+import { Failure, Close } from '@nutui/icons-react-taro'
 import Button from '@/packages/button/index.taro'
 import { DialogBasicProps } from './config'
 import { Content } from './content.taro'
@@ -115,22 +115,36 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
       }
     }
 
+    const btnClass =
+      hideCancelButton || hideConfirmButton ? `${classPrefix}-footer-block` : ''
+
     return (
       footer || (
         <>
-          {!hideCancelButton && (
-            <Button
-              type="default"
-              className={`${classPrefix}-footer-cancel`}
-              onClick={(e) => handleCancel(e)}
-            >
-              {cancelText || locale.cancel}
-            </Button>
-          )}
+          {!hideCancelButton &&
+            (footerDirection === 'vertical' ? (
+              <View
+                className={`${classPrefix}-footer-cancel ${btnClass}`}
+                onClick={(e) => handleCancel(e)}
+              >
+                {cancelText || locale.cancel}
+              </View>
+            ) : (
+              <Button
+                type="default"
+                size="large"
+                className={`${classPrefix}-footer-cancel ${btnClass}`}
+                onClick={(e) => handleCancel(e)}
+              >
+                {cancelText || locale.cancel}
+              </Button>
+            ))}
+
           {!hideConfirmButton && (
             <Button
+              size="large"
               type="primary"
-              className={classNames(`${classPrefix}-footer-ok`, {
+              className={classNames(`${classPrefix}-footer-ok ${btnClass}`, {
                 disabled: disableConfirmButton,
               })}
               disabled={disableConfirmButton}
@@ -157,9 +171,10 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
       [`${classPrefix}-close`]: true,
       [`${classPrefix}-close-${closeIconPosition}`]: true,
     })
+    const systomIcon = closeIconPosition !== 'bottom' ? <Close /> : <Failure />
     return (
       <View className={closeClasses} onClick={handleCancel}>
-        {React.isValidElement(closeIcon) ? closeIcon : <Close />}
+        {React.isValidElement(closeIcon) ? closeIcon : systomIcon}
       </View>
     )
   }
diff --git a/src/packages/dialog/dialog.tsx b/src/packages/dialog/dialog.tsx
index e4436486d5..62149fea13 100644
--- a/src/packages/dialog/dialog.tsx
+++ b/src/packages/dialog/dialog.tsx
@@ -1,7 +1,7 @@
 import React, { ForwardRefRenderFunction, forwardRef, useState } from 'react'
 import type { MouseEvent } from 'react'
 import classNames from 'classnames'
-import { Close } from '@nutui/icons-react'
+import { Failure, Close } from '@nutui/icons-react'
 import Button from '@/packages/button'
 import confirm from './confirm'
 import { DialogWrap } from './dialogwrap'
@@ -50,6 +50,7 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<DialogProps>> = (
     cancelText,
     closeIconPosition,
     closeIcon,
+    footerDirection,
     onClose,
     onCancel,
     onConfirm,
@@ -83,22 +84,35 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<DialogProps>> = (
       }
     }
 
+    const btnClass =
+      hideCancelButton || hideConfirmButton ? `${classPrefix}-footer-block` : ''
+
     return (
       footer || (
         <>
-          {!hideCancelButton && (
-            <Button
-              type="default"
-              className={`${classPrefix}-footer-cancel`}
-              onClick={(e) => handleCancel(e)}
-            >
-              {cancelText || locale.cancel}
-            </Button>
-          )}
+          {!hideCancelButton &&
+            (footerDirection === 'vertical' ? (
+              <div
+                className={`${classPrefix}-footer-cancel ${btnClass}`}
+                onClick={(e) => handleCancel(e)}
+              >
+                {cancelText || locale.cancel}
+              </div>
+            ) : (
+              <Button
+                type="default"
+                size="large"
+                className={`${classPrefix}-footer-cancel ${btnClass}`}
+                onClick={(e) => handleCancel(e)}
+              >
+                {cancelText || locale.cancel}
+              </Button>
+            ))}
           {!hideConfirmButton && (
             <Button
               type="primary"
-              className={classNames(`${classPrefix}-footer-ok`, {
+              size="large"
+              className={classNames(`${classPrefix}-footer-ok ${btnClass}`, {
                 disabled: disableConfirmButton,
               })}
               disabled={disableConfirmButton}
@@ -125,9 +139,10 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<DialogProps>> = (
       [`${classPrefix}-close`]: true,
       [`${classPrefix}-close-${closeIconPosition}`]: true,
     })
+    const systomIcon = closeIconPosition !== 'bottom' ? <Close /> : <Failure />
     return (
       <div className={closeClasses} onClick={handleCancel}>
-        {React.isValidElement(closeIcon) ? closeIcon : <Close />}
+        {React.isValidElement(closeIcon) ? closeIcon : systomIcon}
       </div>
     )
   }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a1ff1f1bc0..0d31454834 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -173,7 +173,7 @@ $button-square-border-radius: var(
   0
 ) !default;
 $button-border-radius: var(--nutui-button-border-radius, $radius-s) !default;
-$button-border-width: var(--nutui-button-border-width, 1px) !default;
+$button-border-width: var(--nutui-button-border-width, 0.5px) !default;
 $button-normal-padding: var(--nutui-button-normal-padding, 0px 12px) !default;
 $button-default-height: var(--nutui-button-default-height, 32px) !default;
 $button-default-color: var(--nutui-button-default-color, $color-title) !default;
@@ -183,7 +183,7 @@ $button-default-background-color: var(
 ) !default;
 $button-default-border-color: var(
   --nutui-button-default-border-color,
-  $color-text
+  $color-text-disabled
 ) !default;
 $button-default-disabled: var(
   --nutui-button-default-disabled,
@@ -198,10 +198,6 @@ $button-default-font-size: var(
   --nutui-button-default-font-size,
   $font-size-base
 ) !default;
-$button-default-font-weight: var(
-  --nutui-button-default-font-weight,
-  $font-weight
-) !default;
 
 $button-xlarge-height: var(--nutui-button-xlarge-height, 48px) !default;
 $button-xlarge-padding: var(--nutui-button-xlarge-padding, 0px 24px) !default;
@@ -224,10 +220,6 @@ $button-large-font-size: var(
   --nutui-button-large-font-size,
   $font-size-l
 ) !default;
-$button-large-font-weight: var(
-  --nutui-button-large-font-weight,
-  $font-weight-bold
-) !default;
 $button-large-border-radius: var(
   --nutui-button-large-border-radius,
   $radius-s
@@ -1305,17 +1297,19 @@ $steps-dot-head-margin: var(--nutui-steps-dot-head-margin, 10px 0) !default;
 
 // dialog（✅）
 $dialog-z-index: var(--nutui-dialog-z-index, $mask-content-z-index) !default;
+$dialog-min-width: var(--nutui-dialog-min-width, 240px) !default;
 $dialog-width: var(--nutui-dialog-width, 295px) !default;
 $dialog-padding: var(--nutui-dialog-padding, 24px) !default;
+$dialog-max-height: var(--nutui-dialog-max-height, 420px) !default;
 $dialog-min-height: var(--nutui-dialog-min-height, 124px) !default;
-$dialog-border-radius: var(--nutui-dialog-border-radius, 16px) !default;
+$dialog-border-radius: var(--nutui-dialog-border-radius, $radius-xl) !default;
 $dialog-footer-justify-content: var(
   --nutui-dialog-footer-justify-content,
   space-around
 ) !default;
 $dialog-content-margin: var(
   --nutui-dialog-content-margin,
-  5px 0 24px 0
+  12px 0 16px 0
 ) !default;
 $dialog-content-max-height: var(
   --nutui-dialog-content-max-height,
@@ -1347,15 +1341,19 @@ $dialog-header-font-size: var(
 ) !default;
 $dialog-header-font-weight: var(
   --nutui-dialog-header-font-weight,
-  normal
+  $font-weight-bold
 ) !default;
 $dialog-vertical-footer-ok-margin-top: var(
   --nutui-dialog-vertical-footer-ok-margin-top,
-  5px
+  16px
 ) !default;
 $dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default;
-$dialog-close-width: var(--nutui-dialog-close-width, 18px) !default;
-$dialog-close-height: var(--nutui-dialog-close-height, 18px) !default;
+$dialog-close-width: var(--nutui-dialog-close-width, 16px) !default;
+$dialog-close-height: var(--nutui-dialog-close-height, 16px) !default;
+$dialog-bottom-close-icon-size: var(
+  --nutui-dialog-bottom-close-icon-size,
+  24px
+) !default;
 $dialog-close-top: var(--nutui-dialog-close-top, 16px) !default;
 $dialog-close-left: var(--nutui-dialog-close-left, 16px) !default;
 $dialog-close-right: var(--nutui-dialog-close-right, 16px) !default;

From 29d5f5c86009d825da17a848ef69837fd66cef24 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Mon, 30 Dec 2024 13:55:12 +0800
Subject: [PATCH 2/4] docs: fixed

---
 src/packages/button/doc.en-US.md |  1 -
 src/packages/button/doc.md       |  1 -
 src/packages/button/doc.taro.md  |  1 -
 src/packages/button/doc.zh-TW.md |  1 -
 src/packages/dialog/doc.en-US.md | 18 ++++++++++--------
 src/packages/dialog/doc.md       | 18 ++++++++++--------
 src/packages/dialog/doc.taro.md  | 18 ++++++++++--------
 src/packages/dialog/doc.zh-TW.md | 20 +++++++++++---------
 src/styles/variables.scss        |  4 ----
 9 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/packages/button/doc.en-US.md b/src/packages/button/doc.en-US.md
index 56e42adc88..5228a54ed1 100644
--- a/src/packages/button/doc.en-US.md
+++ b/src/packages/button/doc.en-US.md
@@ -136,7 +136,6 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-button-default-disabled-color | Disabled text color for buttons of type default | `$color-text-help` |
 | \--nutui-button-default-padding | Padding for buttons of type default | `0 12px` |
 | \--nutui-button-default-font-size | The font size of the button with type default | `$font-size-s` |
-| \--nutui-button-default-font-weight | The font weight of the button with type default | `$font-weight` |
 | \--nutui-button-large-height | The height of the button with size large | `40px` |
 | \--nutui-button-large-font-size | The font size of the button with size large | `$font-size-base` |
 | \--nutui-button-large-border-radius | Rounded corners for buttons with size large | `12px` |
diff --git a/src/packages/button/doc.md b/src/packages/button/doc.md
index 932b840d50..8593e5cc01 100644
--- a/src/packages/button/doc.md
+++ b/src/packages/button/doc.md
@@ -135,7 +135,6 @@ import { Button } from '@nutui/nutui-react'
 | \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
 | \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 12px` |
 | \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-s` |
-| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight` |
 | \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
 | \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
 | \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `12px` |
diff --git a/src/packages/button/doc.taro.md b/src/packages/button/doc.taro.md
index bf86abe76f..bb6bd7603a 100644
--- a/src/packages/button/doc.taro.md
+++ b/src/packages/button/doc.taro.md
@@ -148,7 +148,6 @@ import { Button } from '@nutui/nutui-react-taro'
 | \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
 | \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 12px` |
 | \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-s` |
-| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight` |
 | \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
 | \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
 | \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `12px` |
diff --git a/src/packages/button/doc.zh-TW.md b/src/packages/button/doc.zh-TW.md
index 9bfe6d2105..72226ca296 100644
--- a/src/packages/button/doc.zh-TW.md
+++ b/src/packages/button/doc.zh-TW.md
@@ -136,7 +136,6 @@ import { Button } from '@nutui/nutui-react'
 | \--nutui-button-default-disabled-color | type 為 default 的按鈕的停用文字色 | `$color-text-help` |
 | \--nutui-button-default-padding | type 為 default 的按鈕的內邊距 | `0 12px` |
 | \--nutui-button-default-font-size | type 為 default 的按鈕的字號 | `$font-size-s` |
-| \--nutui-button-default-font-weight | type 為 default 的按鈕的字重 | `$font-weight` |
 | \--nutui-button-large-height | size 為 large 的按鈕的高度 | `40px` |
 | \--nutui-button-large-font-size | size 為 large 的按鈕的字號 | `$font-size-base` |
 | \--nutui-button-large-border-radius | size 為 large 的按鈕的圓角 | `12px` |
diff --git a/src/packages/dialog/doc.en-US.md b/src/packages/dialog/doc.en-US.md
index 9e068c4aa3..ea0c40abd3 100644
--- a/src/packages/dialog/doc.en-US.md
+++ b/src/packages/dialog/doc.en-US.md
@@ -147,23 +147,25 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | \--nutui-dialog-z-index | dialog z index | `$mask-content-z-index` |
 | \--nutui-dialog-width | dialog width | `295px` |
+| \--nutui-dialog-min-width | dialog min width | `240px` |
 | \--nutui-dialog-padding | dialog padding | `24px` |
-| \--nutui-dialog-min-height | dialog min height | `156px` |
+| \--nutui-dialog-max-height | dialog max height | `420px` |
+| \--nutui-dialog-min-height | dialog min height | `124px` |
 | \--nutui-dialog-border-radius | dialog border radius | `16px` |
-| \--nutui-dialog-content-margin | dialog content margin | `5px 0 24px 0` |
+| \--nutui-dialog-content-margin | dialog content margin | `12px 0 16px 0` |
 | \--nutui-dialog-content-max-height | dialog content max height | `268px` |
 | \--nutui-dialog-content-line-height | dialog content line height | `20px` |
 | \--nutui-dialog-content-text-align | dialog content text align | `left` |
 | \--nutui-dialog-header-font-size | dialog header font size | `$font-size-l` |
-| \--nutui-dialog-header-font-weight | dialog header font weight | `normal` |
-| \--nutui-dialog-footer-justify-content | dialog footer justify content | `space-around` |
+| \--nutui-dialog-header-font-weight | dialog header font weight | `600` |
 | \--nutui-dialog-footer-button-min-width | dialog footer button min width | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | dialog footer cancel button's margin right | `12px` |
 | \--nutui-dialog-footer-ok-max-width | dialog footer confirm button's max width | `128px` |
-| \--nutui-dialog-vertical-footer-ok-margin-top | dialog vertical footer confirm button margin top | `5px` |
-| \--nutui-dialog-close-width | dialog close the width of the button | `18px` |
-| \--nutui-dialog-close-height | dialog close the coloe of the button | `18px` |
-| \--nutui-dialog-close-color | dialog close button color | `#888B94` |
+| \--nutui-dialog-vertical-footer-ok-margin-top | dialog vertical footer confirm button margin top | `16px` |
+| \--nutui-dialog-close-width | dialog close the width of the button | `16px` |
+| \--nutui-dialog-close-height | dialog close the coloe of the button | `16px` |
+| \--nutui-dialog-bottom-close-icon-size | dialog bottom close icon | `24px` |
+| \--nutui-dialog-close-color | dialog close button color | `#FFFFFF` |
 | \--nutui-dialog-close-top | dialog Closes the top value of the button | `16px` |
 | \--nutui-dialog-close-left | dialog Closes the left value of the button | `16px` |
 | \--nutui-dialog-close-right | dialog Closes the right value of the button | `16px` |
diff --git a/src/packages/dialog/doc.md b/src/packages/dialog/doc.md
index 7c9d64f66e..e2491e58df 100644
--- a/src/packages/dialog/doc.md
+++ b/src/packages/dialog/doc.md
@@ -147,23 +147,25 @@ export default function App() {
 | --- | --- | --- |
 | \--nutui-dialog-z-index | 对话框的z-index | `$mask-content-z-index` |
 | \--nutui-dialog-width | 对话框宽度 | `295px` |
+| \--nutui-dialog-min-width | 对话框最小宽度 | `240px` |
 | \--nutui-dialog-padding | 对话框padding | `24px` |
-| \--nutui-dialog-min-height | 对话框最小高度 | `156px` |
+| \--nutui-dialog-max-height | 对话框最大高度 | `420px` |
+| \--nutui-dialog-min-height | 对话框最小高度 | `124px` |
 | \--nutui-dialog-border-radius | 对话框圆角 | `16px` |
-| \--nutui-dialog-content-margin | 对话框内容 margin | `5px 0 24px 0` |
+| \--nutui-dialog-content-margin | 对话框内容 margin | `12px 0 16px 0` |
 | \--nutui-dialog-content-max-height | 对话框内容最大高度 | `268px` |
 | \--nutui-dialog-content-line-height | 对话框内容行高 | `20px` |
 | \--nutui-dialog-content-text-align | 对话框内容文本对齐方式 | `left` |
 | \--nutui-dialog-header-font-size | 对话框标题字体大小 | `$font-size-l` |
-| \--nutui-dialog-header-font-weight | 对话框标题字重 | `normal` |
-| \--nutui-dialog-footer-justify-content | 对话框底部按钮排布 | `space-around` |
+| \--nutui-dialog-header-font-weight | 对话框标题字重 | `600` |
 | \--nutui-dialog-footer-button-min-width | 对话框底部按钮最小宽度 | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | 对话框取消按钮的margin-right | `12px` |
 | \--nutui-dialog-footer-ok-max-width | 对话框确认按钮的最大宽度 | `128px` |
-| \--nutui-dialog-vertical-footer-ok-margin-top | 对话框底部按钮纵向排布时的margin值 | `5px` |
-| \--nutui-dialog-close-width | 对话框关闭按钮的宽度 | `18px` |
-| \--nutui-dialog-close-height | 对话框关闭按钮的高度 | `18px` |
-| \--nutui-dialog-close-color | 对话框关闭按钮的颜色 | `#888B94` |
+| \--nutui-dialog-vertical-footer-ok-margin-top | 对话框底部按钮纵向排布时的margin值 | `16px` |
+| \--nutui-dialog-close-width | 对话框关闭按钮的宽度 | `16px` |
+| \--nutui-dialog-close-height | 对话框关闭按钮的高度 | `16px` |
+| \--nutui-dialog-bottom-close-icon-size | 对话框底部关闭按钮的宽高 | `24px` |
+| \--nutui-dialog-close-color | 对话框关闭按钮的颜色 | `#FFFFFF` |
 | \--nutui-dialog-close-top | 对话框关闭按钮的top值 | `16px` |
 | \--nutui-dialog-close-left | 对话框关闭按钮的left值 | `16px` |
 | \--nutui-dialog-close-right | 对话框关闭按钮的right值 | `16px` |
diff --git a/src/packages/dialog/doc.taro.md b/src/packages/dialog/doc.taro.md
index a272435ed8..ef32c52a3f 100644
--- a/src/packages/dialog/doc.taro.md
+++ b/src/packages/dialog/doc.taro.md
@@ -127,23 +127,25 @@ DialogOptions 是 DialogProps 的子集，包含如下属性：title, content, f
 | --- | --- | --- |
 | \--nutui-dialog-z-index | 对话框的z-index | `$mask-content-z-index` |
 | \--nutui-dialog-width | 对话框宽度 | `295px` |
+| \--nutui-dialog-min-width | 对话框最小宽度 | `240px` |
 | \--nutui-dialog-padding | 对话框padding | `24px` |
-| \--nutui-dialog-min-height | 对话框最小高度 | `156px` |
+| \--nutui-dialog-max-height | 对话框最大高度 | `420px` |
+| \--nutui-dialog-min-height | 对话框最小高度 | `124px` |
 | \--nutui-dialog-border-radius | 对话框圆角 | `16px` |
-| \--nutui-dialog-content-margin | 对话框内容 margin | `5px 0 24px 0` |
+| \--nutui-dialog-content-margin | 对话框内容 margin | `12px 0 16px 0` |
 | \--nutui-dialog-content-max-height | 对话框内容最大高度 | `268px` |
 | \--nutui-dialog-content-line-height | 对话框内容行高 | `20px` |
 | \--nutui-dialog-content-text-align | 对话框内容文本对齐方式 | `left` |
 | \--nutui-dialog-header-font-size | 对话框标题字体大小 | `$font-size-l` |
-| \--nutui-dialog-header-font-weight | 对话框标题字重 | `normal` |
-| \--nutui-dialog-footer-justify-content | 对话框底部按钮排布 | `space-around` |
+| \--nutui-dialog-header-font-weight | 对话框标题字重 | `600` |
 | \--nutui-dialog-footer-button-min-width | 对话框底部按钮最小宽度 | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | 对话框取消按钮的margin-right | `12px` |
 | \--nutui-dialog-footer-ok-max-width | 对话框确认按钮的最大宽度 | `128px` |
-| \--nutui-dialog-vertical-footer-ok-margin-top | 对话框底部按钮纵向排布时的margin值 | `5px` |
-| \--nutui-dialog-close-width | 对话框关闭按钮的宽度 | `18px` |
-| \--nutui-dialog-close-height | 对话框关闭按钮的高度 | `18px` |
-| \--nutui-dialog-close-color | 对话框关闭按钮的颜色 | `#888B94` |
+| \--nutui-dialog-vertical-footer-ok-margin-top | 对话框底部按钮纵向排布时的margin值 | `16px` |
+| \--nutui-dialog-close-width | 对话框关闭按钮的宽度 | `16px` |
+| \--nutui-dialog-close-height | 对话框关闭按钮的高度 | `16px` |
+| \--nutui-dialog-bottom-close-icon-size | 对话框底部关闭按钮的宽高 | `24px` |
+| \--nutui-dialog-close-color | 对话框关闭按钮的颜色 | `#FFFFFF` |
 | \--nutui-dialog-close-top | 对话框关闭按钮的top值 | `16px` |
 | \--nutui-dialog-close-left | 对话框关闭按钮的left值 | `16px` |
 | \--nutui-dialog-close-right | 对话框关闭按钮的right值 | `16px` |
diff --git a/src/packages/dialog/doc.zh-TW.md b/src/packages/dialog/doc.zh-TW.md
index 45a5c5809a..3b9fdda61d 100644
--- a/src/packages/dialog/doc.zh-TW.md
+++ b/src/packages/dialog/doc.zh-TW.md
@@ -145,25 +145,27 @@ export default function App() {
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-dialog-z-index | 對話框的z-index | `$mask-content-z-index` |
+| 在這裡輸入要轉換的內容 | \--nutui-dialog-z-index | 對話框的z-index | `$mask-content-z-index` |
 | \--nutui-dialog-width | 對話框寬度 | `295px` |
+| \--nutui-dialog-min-width | 對話框最小寬度 | `240px` |
 | \--nutui-dialog-padding | 對話框padding | `24px` |
-| \--nutui-dialog-min-height | 對話框最小高度 | `156px` |
+| \--nutui-dialog-max-height | 對話框最大高度 | `420px` |
+| \--nutui-dialog-min-height | 對話框最小高度 | `124px` |
 | \--nutui-dialog-border-radius | 對話框圓角 | `16px` |
-| \--nutui-dialog-content-margin | 對話框內容 margin | `5px 0 24px 0` |
+| \--nutui-dialog-content-margin | 對話框內容 margin | `12px 0 16px 0` |
 | \--nutui-dialog-content-max-height | 對話框內容最大高度 | `268px` |
 | \--nutui-dialog-content-line-height | 對話框內容行高 | `20px` |
 | \--nutui-dialog-content-text-align | 對話框內容文本對齊方式 | `left` |
 | \--nutui-dialog-header-font-size | 對話框標題字體大小 | `$font-size-l` |
-| \--nutui-dialog-header-font-weight | 對話框標題字重 | `normal` |
-| \--nutui-dialog-footer-justify-content | 對話框底部按鈕排布 | `space-around` |
+| \--nutui-dialog-header-font-weight | 對話框標題字重 | `600` |
 | \--nutui-dialog-footer-button-min-width | 對話框底部按鈕最小寬度 | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | 對話框取消按鈕的margin-right | `12px` |
 | \--nutui-dialog-footer-ok-max-width | 對話框確認按鈕的最大寬度 | `128px` |
-| \--nutui-dialog-vertical-footer-ok-margin-top | 對話框底部按鈕縱向排布時的margin值 | `5px` |
-| \--nutui-dialog-close-width | 對話框關閉按鈕的寬度 | `18px` |
-| \--nutui-dialog-close-height | 對話框關閉按鈕的高度 | `18px` |
-| \--nutui-dialog-close-color | 對話框關閉按鈕的顏色 | `#888B94` |
+| \--nutui-dialog-vertical-footer-ok-margin-top | 對話框底部按鈕縱向排佈時的margin值 | `16px` |
+| \--nutui-dialog-close-width | 對話框關閉按鈕的寬度 | `16px` |
+| \--nutui-dialog-close-height | 對話框關閉按鈕的高度 | `16px` |
+| \--nutui-dialog-bottom-close-icon-size | 對話框底部關閉按鈕的寬高 | `24px` |
+| \--nutui-dialog-close-color | 對話框關閉按鈕的顏色 | `#FFFFFF` |
 | \--nutui-dialog-close-top | 對話框關閉按鈕的top值 | `16px` |
 | \--nutui-dialog-close-left | 對話框關閉按鈕的left值 | `16px` |
 | \--nutui-dialog-close-right | 對話框關閉按鈕的right值 | `16px` |
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 0d31454834..82923fdf7a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1303,10 +1303,6 @@ $dialog-padding: var(--nutui-dialog-padding, 24px) !default;
 $dialog-max-height: var(--nutui-dialog-max-height, 420px) !default;
 $dialog-min-height: var(--nutui-dialog-min-height, 124px) !default;
 $dialog-border-radius: var(--nutui-dialog-border-radius, $radius-xl) !default;
-$dialog-footer-justify-content: var(
-  --nutui-dialog-footer-justify-content,
-  space-around
-) !default;
 $dialog-content-margin: var(
   --nutui-dialog-content-margin,
   12px 0 16px 0

From 4cf26335fb0330c92244c7f2e99c98f83e8fa695 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Mon, 30 Dec 2024 14:19:49 +0800
Subject: [PATCH 3/4] fix: docs

---
 src/packages/dialog/doc.zh-TW.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/dialog/doc.zh-TW.md b/src/packages/dialog/doc.zh-TW.md
index 3b9fdda61d..fbde368995 100644
--- a/src/packages/dialog/doc.zh-TW.md
+++ b/src/packages/dialog/doc.zh-TW.md
@@ -145,7 +145,7 @@ export default function App() {
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| 在這裡輸入要轉換的內容 | \--nutui-dialog-z-index | 對話框的z-index | `$mask-content-z-index` |
+| \--nutui-dialog-z-index | 對話框的z-index | `$mask-content-z-index` |
 | \--nutui-dialog-width | 對話框寬度 | `295px` |
 | \--nutui-dialog-min-width | 對話框最小寬度 | `240px` |
 | \--nutui-dialog-padding | 對話框padding | `24px` |

From 0ceeef0c660d867e5cab503f6e091937471af43e Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Mon, 30 Dec 2024 14:29:10 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E4=BF=AE=E8=AE=A2=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/dialog/dialog.taro.tsx | 2 +-
 src/packages/dialog/dialog.tsx      | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/packages/dialog/dialog.taro.tsx b/src/packages/dialog/dialog.taro.tsx
index 0749e4a401..ad4acddda8 100644
--- a/src/packages/dialog/dialog.taro.tsx
+++ b/src/packages/dialog/dialog.taro.tsx
@@ -125,7 +125,7 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
             (footerDirection === 'vertical' ? (
               <View
                 className={`${classPrefix}-footer-cancel ${btnClass}`}
-                onClick={(e) => handleCancel(e)}
+                onClick={(e) => handleCancel(e as any)}
               >
                 {cancelText || locale.cancel}
               </View>
diff --git a/src/packages/dialog/dialog.tsx b/src/packages/dialog/dialog.tsx
index 62149fea13..b6af7e73fc 100644
--- a/src/packages/dialog/dialog.tsx
+++ b/src/packages/dialog/dialog.tsx
@@ -64,7 +64,9 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<DialogProps>> = (
   const renderFooter = () => {
     if (footer === null) return ''
 
-    const handleCancel = (e: MouseEvent<HTMLButtonElement>) => {
+    const handleCancel = (
+      e: MouseEvent<HTMLButtonElement | HTMLDivElement>
+    ) => {
       e.stopPropagation()
       if (!beforeCancel?.()) return
       if (!beforeClose?.()) return