From 8e8d21dc062506ee0781188ce53b25de0ea3aa7a Mon Sep 17 00:00:00 2001
From: James-9696 <hujm969696@163.com>
Date: Fri, 5 Dec 2025 00:57:11 -0800
Subject: [PATCH] fix(modal): New attributes (cancel control, confirm control)

---
 packages/demos/app/modal/custom-btn.vue       | 20 +++++++++
 packages/demos/app/modal/status.vue           | 15 +++++++
 packages/demos/app/modal/webdoc/modal.js      | 42 +++++++++++++++++--
 .../mobile/components/modal/src/mobile.vue    | 30 +++++++++++--
 packages/theme-mobile/src/modal/index.less    |  8 ++--
 packages/theme-mobile/src/modal/vars.less     |  1 +
 6 files changed, 104 insertions(+), 12 deletions(-)
 create mode 100644 packages/demos/app/modal/custom-btn.vue

diff --git a/packages/demos/app/modal/custom-btn.vue b/packages/demos/app/modal/custom-btn.vue
new file mode 100644
index 0000000..15090c8
--- /dev/null
+++ b/packages/demos/app/modal/custom-btn.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="content">
+    <tiny-button @click="value1 = !value1" :reset-time="0">自定义底部按钮内容</tiny-button>
+    <tiny-modal 
+      v-model="value1" 
+      type="confirm" 
+      show-footer
+      :confirm-content="'OK'"
+      :cancel-content="'你好'"
+    >
+    </tiny-modal>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
+
+const value1 = ref(false)
+</script>
diff --git a/packages/demos/app/modal/status.vue b/packages/demos/app/modal/status.vue
index 2b6542e..cf955b7 100644
--- a/packages/demos/app/modal/status.vue
+++ b/packages/demos/app/modal/status.vue
@@ -6,11 +6,26 @@
     <tiny-button @click="errorClick" :reset-time="0">错误提示图标</tiny-button>
     <tiny-button @click="loadingClick" :reset-time="0">加载提示图标</tiny-button>
   </div>
+  <div class="content">
+    <p>标签提示图标</p>
+    <tiny-button @click="value1 = !value1" :reset-time="0">点击~</tiny-button>
+    <tiny-modal 
+      v-model="value1" 
+      type="confirm" 
+      show-footer
+      status="success"
+    >
+      自定义内容
+    </tiny-modal>
+  </div>
 </template>
 
 <script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
+const value1 = ref(false)
+
 function baseClick() {
   TinyModal.message({ message: '基本提示图标', status: 'info' })
 }
diff --git a/packages/demos/app/modal/webdoc/modal.js b/packages/demos/app/modal/webdoc/modal.js
index f8bf1e3..971b5ab 100644
--- a/packages/demos/app/modal/webdoc/modal.js
+++ b/packages/demos/app/modal/webdoc/modal.js
@@ -26,6 +26,26 @@ export default {
           },
           demoId: 'mask-closable'
         },
+        {
+          name: 'confirm-content',
+          type: 'string',
+          defaultValue: "'确认'",
+          desc: {
+            'zh-CN': '自定义确认按钮内容',
+            'en-US': 'Customize confirmation button content'
+          },
+          demoId: 'custom-btn'
+        },
+        {
+          name: 'cancel-content',
+          type: 'string',
+          defaultValue: "'取消'",
+          desc: {
+            'zh-CN': '自定义取消按钮内容',
+            'en-US': 'Customize cancel button content'
+          },
+           demoId: 'custom-btn'
+        },
         {
           name: 'fullscreen',
           type: 'boolean',
@@ -580,11 +600,11 @@ export default {
       demoId: 'status',
       name: {
         'zh-CN': '模态框提示图标',
-        'en-US': 'button type'
+        'en-US': 'Modal prompt icon'
       },
       desc: {
-        'zh-CN': '<p>模态框提示图标</p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN': '<p>通过<code>status</code>设置模态框提示图标</p>',
+        'en-US': '<p>Set the modal prompt icon through <code>status</code></p>'
       },
       codeFiles: ['status.vue']
     },
@@ -600,6 +620,22 @@ export default {
       },
       codeFiles: ['title.vue']
     },
+    {
+      demoId: 'custom-btn',
+      name: {
+        'zh-CN': '自定义底部按钮内容',
+        'en-US': 'Custom bottom button content'
+      },
+      desc: {
+        'zh-CN': `
+          通过<code>confirm-content</code>属性，修改确认按钮文字；<code>cancel-content</code>属性，修改取消按钮文字。<br>
+        `,
+        'en-US': ` 
+          Modify the confirmation button text by using the <code>confirm-content</code> property; The <code> cancer-content </code> property modifies the cancel button text. <br>
+        `
+      },
+      codeFiles: ['custom-btn.vue']
+    },
     {
       demoId: 'top',
       name: {
diff --git a/packages/mobile/components/modal/src/mobile.vue b/packages/mobile/components/modal/src/mobile.vue
index 0e79a77..8fba703 100644
--- a/packages/mobile/components/modal/src/mobile.vue
+++ b/packages/mobile/components/modal/src/mobile.vue
@@ -40,9 +40,12 @@ export default defineComponent({
   render() {
     let { state, scopedSlots, vSize, type, resize, animat, showHeader,_constants: constants, status } = this
     let { showFooter, title, message, lockScroll, lockView, mask, t } = this
+    let { confirmContent, cancelContent, confirmBtnProps, cancelBtnProps } = this
     let { zoomLocat, visible, contentVisible, modalTop, isMsg } = state
     let defaultSlot = scopedSlots.default
     let footerSlot = scopedSlots.footer
+    const confirmButtonText = confirmContent ?? confirmBtnProps.text ?? t('ui.button.confirm')
+    const cancelButtonText = cancelContent ?? cancelBtnProps.text ?? t('ui.button.cancel')
 
     const STATUS_MAPPING_COMPINENT = {
       QUESTION: iconHelpSolid(),
@@ -98,6 +101,23 @@ export default defineComponent({
                     }
                   },
                   [
+                    status
+                      ? h(
+                          'div',
+                          {
+                            class: ['tiny-mobile-modal__status-wrapper']
+                          },
+                          [
+                            typeof status === 'string'
+                              ? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
+                                  class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]]
+                                })
+                              : h(status, {
+                                  class: ['tiny-modal__status-icon']
+                                })
+                          ]
+                        )
+                    : null,
                     h(
                       'span',
                       {
@@ -170,13 +190,14 @@ export default defineComponent({
                               Button,
                               {
                                 props: {
-                                  class: ['tiny-mobile-button', 'tiny-mobile-button--default']
+                                  type: 'secondary',
+                                  size: 'small',
                                 },
                                 on: {
                                   click: this.cancelEvent
                                 }
                               },
-                              t('ui.button.cancel')
+                              cancelButtonText
                             )
                           : null,
                         h(
@@ -184,13 +205,14 @@ export default defineComponent({
                           {
                             props: {
                               type: 'primary',
-                              class: ['tiny-mobile-button', type !== 'confirm' ? 'tiny-mobile-button__single' : '']
+                              size: 'small',
+                              class: [type !== 'confirm' ? 'tiny-mobile-button__single' : '']
                             },
                             on: {
                               click: this.confirmEvent
                             }
                           },
-                          t('ui.button.confirm')
+                          confirmButtonText
                         )
                       ]
                 )
diff --git a/packages/theme-mobile/src/modal/index.less b/packages/theme-mobile/src/modal/index.less
index 227c129..2a771db 100644
--- a/packages/theme-mobile/src/modal/index.less
+++ b/packages/theme-mobile/src/modal/index.less
@@ -389,14 +389,12 @@
 
   &__footer {
     flex-shrink: 0;
-    text-align: center;
     padding: 24px 32px 32px;
+    display: flex;
+    justify-content: center;
 
     .@{button-prefix-cls} {
-      border-radius: 18px;
-      width: var(--tvm-Modal-btn-width);
-      height: var(--tvm-Modal-btn-height);
-      line-height: var(--tvm-Modal-btn-height);
+      margin-left: var(--tvm-Modal-btn-space);
 
       &__single {
         width: var(--tvm-Modal-single-btn-width);
diff --git a/packages/theme-mobile/src/modal/vars.less b/packages/theme-mobile/src/modal/vars.less
index 25cb7b8..3e4d3fc 100644
--- a/packages/theme-mobile/src/modal/vars.less
+++ b/packages/theme-mobile/src/modal/vars.less
@@ -24,4 +24,5 @@
   --tvm-Modal-single-btn-width: 144px;
   --tvm-Modal-btn-height: 36px;
   --tvm-Modal-cancel-btn-bg-color: var(--tvm-color-bg-gray-1, #f5f5f5);
+  --tvm-Modal-btn-space: var(--tvm-space-md);
 }