feat: 修改对话框样式及调用方式

env/.env

@@ -10,8 +10,8 @@ VITE_APP_PUBLIC_BASE=/
 # 登录页面
 VITE_LOGIN_URL = '/pages/login/login'
 # 第一个请求地址
-VITE_SERVER_BASEURL = 'http://124.222.152.234:8101'
-# VITE_SERVER_BASEURL = 'http://192.168.0.100:8101'
+VITE_SERVER_BASEURL = 'http://192.168.0.109:8110'
+# VITE_SERVER_BASEURL = 'http://124.222.152.234:8101'
 VITE_SERVER_BASEURL_PREFIX = '/mall'
 # 是否替换第一个前缀
 VITE_SERVER_BASEURL_PREFIX_REPLACE = false
@@ -19,7 +19,7 @@ VITE_SERVER_BASEURL_PREFIX_REPLACE = false
 VITE_SERVER_BASEURL_PREFIX_REPLACE_VALUE = ''
 
 # 第二个请求地址
-VITE_API_SECONDARY_URL = 'http://124.222.152.234:8101'
+VITE_API_SECONDARY_URL = 'http://192.168.0.109:8110'
 VITE_API_SECONDARY_URL_PREFIX = '/cif'
 # 是否替换第二个前缀
 VITE_API_SECONDARY_URL_PREFIX_REPLACE = false
@@ -27,14 +27,14 @@ VITE_API_SECONDARY_URL_PREFIX_REPLACE = false
 VITE_API_SECONDARY_URL_PREFIX_REPLACE_VALUE = ''
 
 # 第三个请求地址
-VITE_API_THIRD_URL = 'http://124.222.152.234:8101'
+VITE_API_THIRD_URL = 'http://192.168.0.109:8110'
 VITE_API_THIRD_URL_PREFIX = '/operating'
 # 是否替换第三个前缀
 VITE_API_THIRD_URL_PREFIX_REPLACE = false
 # 替换后的前缀值
 VITE_API_THIRD_URL_PREFIX_REPLACE_VALUE = ''
 
-VITE_UPLOAD_BASEURL = 'http://124.222.152.234:8101/operating/file/upload'
+VITE_UPLOAD_BASEURL = 'http://192.168.0.109:8110/operating/file/upload'
 
 # 有些同学可能需要在微信小程序里面根据 develop、trial、release 分别设置上传地址，参考代码如下。
 # 下面的变量如果没有设置，会默认使用 VITE_SERVER_BASEURL or VITE_UPLOAD_BASEURL
@@ -47,5 +47,5 @@ VITE_UPLOAD_BASEURL__WEIXIN_TRIAL = 'https://ukw0y1.laf.run/upload'
 VITE_UPLOAD_BASEURL__WEIXIN_RELEASE = 'https://ukw0y1.laf.run/upload'
 
 # h5是否需要配置代理
-VITE_APP_PROXY=false
+VITE_APP_PROXY=true
 VITE_APP_PROXY_PREFIX = '/api'

package.json

@@ -4,7 +4,7 @@
   "version": "3.2.0",
   "packageManager": "pnpm@10.10.0",
   "description": "unibest - 最好的 uniapp 开发模板",
-  "update-time": "2025-06-21",
+  "update-time": "2025-08-21",
   "author": {
     "name": "feige996",
     "zhName": "菲鸽",

src/api/order.ts

@@ -67,3 +67,10 @@ export function orderDetail(data: any) {
 export function orderPink(data: any) {
   return http.get<any>(`${pre}/app/pink/orderPink`, data)
 }
+/**
+ * 取消订单
+ * @returns
+ */
+export function orderCancel(data: any) {
+  return http.post<any>(`${pre}/app/order/cancel`, data)
+}

src/components/DialogBox/DialogBox.vue

@@ -1,19 +1,25 @@
 <script lang="ts" setup>
+type DialogType = 'success' | 'error' | 'info'
+
 interface Props {
   /** 是否显示对话框 */
   show?: boolean
-  /** 按钮文本 */
-  btnText?: string
-  /** 图标名称 */
-  icon?: string
+  /** 对话框类型 */
+  type?: DialogType
+  /** 确认按钮文本 */
+  confirmText?: string
+  /** 取消按钮文本 */
+  cancelText?: string
   /** 图标大小 */
   iconSize?: string
   /** 主要消息内容 */
   message?: string
   /** 提示信息 */
   tip?: string
-  /** 是否显示按钮 */
-  showButton?: boolean
+  /** 是否显示确认按钮 */
+  showConfirm?: boolean
+  /** 是否显示取消按钮 */
+  showCancel?: boolean
   /** 是否显示提示信息 */
   showTip?: boolean
   /** 点击遮罩是否关闭 */
@@ -23,26 +29,40 @@ interface Props {
 interface Emits {
   /** 更新显示状态 */
   (e: 'update:show', value: boolean): void
-  /** 按钮点击事件 */
+  /** 确认按钮点击事件 */
   (e: 'confirm'): void
+  /** 取消按钮点击事件 */
+  (e: 'cancel'): void
   /** 对话框关闭事件 */
   (e: 'close'): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
   show: false,
-  btnText: 'Got it',
-  icon: 'info-circle',
+  type: 'info',
+  confirmText: '确认',
+  cancelText: '取消',
   iconSize: '120rpx',
   message: '',
   tip: '',
-  showButton: true,
+  showConfirm: true,
+  showCancel: false,
   showTip: false,
   closeOnClickOverlay: true,
 })
 
 const emit = defineEmits<Emits>()
 
+// 根据类型获取图标路径
+const iconSrc = computed(() => {
+  const iconMap = {
+    success: '/static/icons/icon-success.png',
+    error: '/static/icons/icon-error.png',
+    info: '/static/icons/icon-info.png',
+  }
+  return iconMap[props.type]
+})
+
 // 处理遮罩点击
 function handleOverlayClick() {
   if (props.closeOnClickOverlay) {
@@ -56,29 +76,66 @@ function handleClose() {
   emit('close')
 }
 
-// 处理按钮点击
+// 处理确认按钮点击
 function handleConfirm() {
   emit('confirm')
   handleClose()
 }
+
+// 处理取消按钮点击
+function handleCancel() {
+  emit('cancel')
+  handleClose()
+}
 </script>
 
 <template>
   <wd-overlay :show="props.show" @click="handleOverlayClick">
     <view class="wrapper">
       <view class="rounded-24rpx bg-white p-40rpx text-center" @click.stop>
-        <wd-icon :name="props.icon" :size="props.iconSize" />
+        <image
+          :src="iconSrc"
+          :style="{ width: props.iconSize, height: props.iconSize }"
+        />
         <view class="pb-58rpx pt-34rpx text-center text-32rpx">
           {{ props.message }}
         </view>
-        <wd-button
-          v-if="props.showButton"
-
-          plain block
-          @click="handleConfirm"
-        >
-          {{ props.btnText }}
-        </wd-button>
+
+        <!-- 按钮区域 -->
+        <view class="button-container">
+          <!-- 只有确认按钮时居中显示 -->
+          <wd-button
+            v-if="props.showConfirm && !props.showCancel"
+            plain
+            block
+            @click="handleConfirm"
+          >
+            {{ props.confirmText }}
+          </wd-button>
+
+          <!-- 有取消按钮时并排显示 -->
+          <template v-if="props.showConfirm && props.showCancel">
+            <wd-button
+              class="button-half"
+              plain
+              block
+              custom-class="text-#333! border-#333!"
+              @click="handleCancel"
+            >
+              {{ props.cancelText }}
+            </wd-button>
+            <wd-button
+              plain
+              block
+              class="button-half"
+              type="primary"
+              @click="handleConfirm"
+            >
+              {{ props.confirmText }}
+            </wd-button>
+          </template>
+        </view>
+
         <view v-if="props.showTip && props.tip" class="mt-20rpx text-24rpx text-gray-500">
           {{ props.tip }}
         </view>
@@ -95,4 +152,14 @@ function handleConfirm() {
   height: 100%;
   padding: 0 24rpx;
 }
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  gap: 20rpx;
+
+  .button-half {
+    flex: 1;
+  }
+}
 </style>

src/components/DialogBox/README.md

@@ -1,148 +0,0 @@
-# DialogBox 通用对话框组件
-
-一个基于 Wot Design Uni 的通用对话框组件，支持自定义图标、消息、按钮等。
-
-## 功能特性
-
-- 🎨 支持自定义图标和大小
-- 📝 支持多行消息显示
-- 🔘 可选择显示/隐藏按钮
-- 💡 可选择显示/隐藏提示信息
-- 🖱️ 支持点击遮罩关闭
-- 📱 响应式设计，适配移动端
-
-## Props
-
-| 参数 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| show | boolean | false | 是否显示对话框 |
-| btnText | string | 'Got it' | 按钮文本 |
-| icon | string | 'info-circle' | 图标名称 |
-| iconSize | string | '120rpx' | 图标大小 |
-| message | string | '' | 主要消息内容 |
-| tip | string | '' | 提示信息 |
-| showButton | boolean | true | 是否显示按钮 |
-| showTip | boolean | false | 是否显示提示信息 |
-| closeOnClickOverlay | boolean | true | 点击遮罩是否关闭 |
-
-## Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| update:show | 显示状态更新 | (value: boolean) |
-| confirm | 按钮点击事件 | - |
-| close | 对话框关闭事件 | - |
-
-## 使用示例
-
-### 基础用法
-
-```vue
-<template>
-  <DialogBox 
-    v-model:show="showDialog"
-    message="这是一个基础对话框"
-    @confirm="handleConfirm"
-  />
-</template>
-
-<script setup>
-import DialogBox from '@/components/DialogBox/DialogBox.vue'
-
-const showDialog = ref(false)
-
-const handleConfirm = () => {
-  console.log('用户点击了确认')
-}
-</script>
-```
-
-### 带提示信息
-
-```vue
-<template>
-  <DialogBox 
-    v-model:show="showDialog"
-    icon="warning"
-    message="余额不足，请充值！"
-    tip="充值享受最高5%折扣"
-    :showTip="true"
-    btnText="去充值"
-    @confirm="handleRecharge"
-  />
-</template>
-```
-
-### 仅显示消息（无按钮）
-
-```vue
-<template>
-  <DialogBox 
-    v-model:show="showDialog"
-    icon="success"
-    message="操作成功！"
-    :showButton="false"
-    :closeOnClickOverlay="true"
-  />
-</template>
-```
-
-### 自定义样式
-
-```vue
-<template>
-  <DialogBox 
-    v-model:show="showDialog"
-    icon="error"
-    iconSize="80rpx"
-    message="网络连接失败"
-    btnText="重试"
-    @confirm="handleRetry"
-  />
-</template>
-```
-
-## 工具函数
-
-组件提供了便捷的工具函数来快速创建不同类型的对话框：
-
-```vue
-<script setup>
-import DialogBox from '@/components/DialogBox'
-import { DialogUtils, createSuccessDialog } from '@/components/DialogBox/utils'
-
-const dialogConfig = ref({})
-
-// 使用工具类
-const showSuccess = () => {
-  dialogConfig.value = DialogUtils.success('操作成功！')
-}
-
-// 使用创建函数
-const showInfo = () => {
-  dialogConfig.value = createSuccessDialog('信息提示', {
-    tip: '这是一个提示信息',
-    showTip: true
-  })
-}
-</script>
-
-<template>
-  <DialogBox v-bind="dialogConfig" />
-</template>
-```
-
-### 可用的工具函数
-
-- `DialogUtils.info(message, options?)` - 信息对话框
-- `DialogUtils.success(message, options?)` - 成功对话框
-- `DialogUtils.warning(message, options?)` - 警告对话框
-- `DialogUtils.error(message, options?)` - 错误对话框
-
-## 注意事项
-
-1. 组件使用了 `v-model:show` 进行双向绑定
-2. 消息内容支持换行符 `\n`
-3. 图标名称需要符合 Wot Design Uni 的图标规范
-4. 组件已适配 UnoCSS 原子类样式
-5. 提供了 TypeScript 类型定义，支持完整的类型检查

src/components/DialogBox/index.ts

@@ -0,0 +1,6 @@
+/**
+ * DialogBox 组件导出文件
+ */
+
+export { default as DialogBox } from './DialogBox.vue'
+export * from './utils'

src/components/DialogBox/types.ts

@@ -1,78 +0,0 @@
-/**
- * DialogBox 组件相关类型定义
- */
-
-/** DialogBox 组件 Props */
-export interface DialogBoxProps {
-  /** 是否显示对话框 */
-  show?: boolean
-  /** 按钮文本 */
-  btnText?: string
-  /** 图标名称 */
-  icon?: string
-  /** 图标大小 */
-  iconSize?: string
-  /** 主要消息内容 */
-  message?: string
-  /** 提示信息 */
-  tip?: string
-  /** 是否显示按钮 */
-  showButton?: boolean
-  /** 是否显示提示信息 */
-  showTip?: boolean
-  /** 点击遮罩是否关闭 */
-  closeOnClickOverlay?: boolean
-}
-
-/** DialogBox 组件 Emits */
-export interface DialogBoxEmits {
-  /** 更新显示状态 */
-  (e: 'update:show', value: boolean): void
-  /** 按钮点击事件 */
-  (e: 'confirm'): void
-  /** 对话框关闭事件 */
-  (e: 'close'): void
-}
-
-/** 对话框类型枚举 */
-export enum DialogType {
-  /** 信息提示 */
-  INFO = 'info',
-  /** 成功提示 */
-  SUCCESS = 'success',
-  /** 警告提示 */
-  WARNING = 'warning',
-  /** 错误提示 */
-  ERROR = 'error',
-}
-
-/** 预设对话框配置 */
-export interface DialogPreset {
-  icon: string
-  iconSize?: string
-  btnText?: string
-}
-
-/** 预设对话框配置映射 */
-export const DIALOG_PRESETS: Record<DialogType, DialogPreset> = {
-  [DialogType.INFO]: {
-    icon: 'info-circle',
-    iconSize: '120rpx',
-    btnText: 'Got it',
-  },
-  [DialogType.SUCCESS]: {
-    icon: 'success',
-    iconSize: '120rpx',
-    btnText: 'OK',
-  },
-  [DialogType.WARNING]: {
-    icon: 'warning',
-    iconSize: '120rpx',
-    btnText: 'I know',
-  },
-  [DialogType.ERROR]: {
-    icon: 'error',
-    iconSize: '120rpx',
-    btnText: 'Retry',
-  },
-}

src/components/DialogBox/utils.ts

@@ -1,5 +1,36 @@
-import type { DialogBoxProps } from './types'
-import { DIALOG_PRESETS, DialogType } from './types'
+type DialogType = 'success' | 'error' | 'info'
+
+interface DialogBoxProps {
+  show?: boolean
+  type?: DialogType
+  confirmText?: string
+  cancelText?: string
+  iconSize?: string
+  message?: string
+  tip?: string
+  showConfirm?: boolean
+  showCancel?: boolean
+  showTip?: boolean
+  closeOnClickOverlay?: boolean
+}
+
+const DIALOG_PRESETS: Record<DialogType, Partial<DialogBoxProps>> = {
+  info: {
+    type: 'info',
+    iconSize: '120rpx',
+    confirmText: '知道了',
+  },
+  success: {
+    type: 'success',
+    iconSize: '120rpx',
+    confirmText: '好的',
+  },
+  error: {
+    type: 'error',
+    iconSize: '120rpx',
+    confirmText: '重试',
+  },
+}
 
 /**
  * 创建预设对话框配置
@@ -27,28 +58,21 @@ export function createDialogConfig(
  * 创建信息对话框配置
  */
 export function createInfoDialog(message: string, options?: Partial<DialogBoxProps>) {
-  return createDialogConfig(DialogType.INFO, message, options)
+  return createDialogConfig('info', message, options)
 }
 
 /**
  * 创建成功对话框配置
  */
 export function createSuccessDialog(message: string, options?: Partial<DialogBoxProps>) {
-  return createDialogConfig(DialogType.SUCCESS, message, options)
-}
-
-/**
- * 创建警告对话框配置
- */
-export function createWarningDialog(message: string, options?: Partial<DialogBoxProps>) {
-  return createDialogConfig(DialogType.WARNING, message, options)
+  return createDialogConfig('success', message, options)
 }
 
 /**
  * 创建错误对话框配置
  */
 export function createErrorDialog(message: string, options?: Partial<DialogBoxProps>) {
-  return createDialogConfig(DialogType.ERROR, message, options)
+  return createDialogConfig('error', message, options)
 }
 
 /**
@@ -69,13 +93,6 @@ export class DialogUtils {
     return createSuccessDialog(message, options)
   }
 
-  /**
-   * 显示警告对话框
-   */
-  static warning(message: string, options?: Partial<DialogBoxProps>) {
-    return createWarningDialog(message, options)
-  }
-
   /**
    * 显示错误对话框
    */

src/pages.json

@@ -44,7 +44,6 @@
       }
     ]
   },
-  "__esModule": true,
   "pages": [
     {
       "path": "pages/index/index",

src/pages/mine/myProfile.vue

@@ -73,7 +73,7 @@ async function updateAvatar() {
     console.log('uploadRes', uploadRes)
     // 解析上传结果
     const uploadData = JSON.parse(uploadRes.data)
-    if (uploadData.code !== 200) {
+    if (uploadData.code !== '200') {
       throw new Error(uploadData.message)
     }
 

src/pages/myOrders/orderDetail.vue

@@ -10,9 +10,12 @@
 
 <script lang="ts" setup>
 import { getConfigByCode } from '@/api/common'
-import { orderDetail, orderPink, orderStatusEnum } from '@/api/order'
+import { orderCancel, orderDetail, orderPink, orderStatusEnum } from '@/api/order'
+import DialogBox from '@/components/DialogBox/DialogBox.vue'
+import { DialogUtils } from '@/components/DialogBox/utils'
 import { formatNumber } from '@/utils'
 import { getPageParams } from '@/utils/page'
+import { toast } from '@/utils/toast'
 
 defineOptions({
   name: 'OrderDetail', // 订单详情
@@ -25,6 +28,10 @@ const detail = ref<any>({})
 const orderStatusEnumData = ref<any>([])
 const openRedEnvelopeRate = ref<any>()
 const joinRedEnvelopeRate = ref<any>()
+
+// DialogBox 函数式调用配置
+const dialogConfig = ref<any>({})
+
 async function getConfig(code: string) {
   try {
     const res = await getConfigByCode({ code })
@@ -88,6 +95,74 @@ onLoad(async (options) => {
 onShow(() => {
   getDetail()
 })
+
+// 显示取消订单确认对话框
+function showCancelOrderDialog() {
+  Object.assign(dialogConfig.value, DialogUtils.info(
+    'Are you sure you want to cancel this order?',
+    {
+      showCancel: true,
+      confirmText: 'Yes, Cancel',
+      cancelText: 'Keep Order',
+    },
+  ))
+}
+
+// 取消订单
+async function cancelOrder() {
+  try {
+    uni.showLoading({
+      title: 'Cancelling order...',
+    })
+
+    const res = await orderCancel({ id: id.value })
+
+    if (res.code === '200') {
+      // 显示成功提示
+      toast.success('Order cancelled successfully!')
+
+      // 刷新订单详情
+      getDetail()
+    }
+    else {
+      // 显示错误提示
+      toast.error(res.message || 'Failed to cancel order. Please try again.')
+    }
+  }
+  catch (error: any) {
+    console.error('Cancel order error:', error)
+    // 显示错误提示
+    toast.error('Network error. Please check your connection and try again.')
+  }
+  finally {
+    uni.hideLoading()
+  }
+}
+
+// 处理对话框确认事件
+function handleDialogConfirm() {
+  const config = dialogConfig.value as any
+  const { confirmText } = config
+
+  if (confirmText === 'Yes, Cancel') {
+    // 确认取消订单
+    cancelOrder()
+  }
+
+  // 关闭对话框
+  handleDialogCancel()
+}
+
+// 处理对话框取消事件
+function handleDialogCancel() {
+  // 关闭对话框
+  dialogConfig.value.show = false
+}
+
+// 处理对话框关闭事件
+function handleDialogClose() {
+  dialogConfig.value.show = false
+}
 </script>
 
 <template>
@@ -208,12 +283,25 @@ onShow(() => {
     </view>
     <template #bottom>
       <view class="flex items-center justify-end bg-white/60 px-28rpx py-30rpx backdrop-blur-20">
-        <wd-button custom-class="mr-16rpx!" plain>
+        <!-- 取消订单按钮 -->
+        <wd-button
+          custom-class="mr-16rpx!"
+          plain
+          @click="showCancelOrderDialog"
+        >
           Cancel
         </wd-button>
         <wd-button>Share Now</wd-button>
       </view>
     </template>
+
+    <!-- DialogBox 函数式调用 -->
+    <DialogBox
+      v-bind="dialogConfig"
+      @confirm="handleDialogConfirm"
+      @cancel="handleDialogCancel"
+      @close="handleDialogClose"
+    />
   </z-paging>
 </template>
 

src/pages/productDetail/checkOut.vue

@@ -74,18 +74,8 @@ const paymentMethods = ref([
 // 选中的支付方式
 const selectedPayment = ref('bandhubuy')
 
-// DialogBox 相关状态
-const dialogConfig = ref({
-  show: false,
-  icon: 'info-circle',
-  iconSize: '120rpx',
-  message: '',
-  tip: '',
-  btnText: t('checkout.dialog.gotIt'),
-  showButton: true,
-  showTip: false,
-  closeOnClickOverlay: true,
-})
+// DialogBox 函数式调用配置
+const dialogConfig = ref({})
 
 // 处理支付方式选择
 function selectPayment(methodId: string) {
@@ -97,12 +87,12 @@ function selectPayment(methodId: string) {
 
 // 显示余额不足对话框
 function showInsufficientBalanceDialog() {
-  Object.assign(dialogConfig.value, DialogUtils.warning(
+  Object.assign(dialogConfig.value, DialogUtils.info(
     t('checkout.dialog.insufficientBalance'),
     {
       tip: t('checkout.dialog.rechargeDiscount'),
       showTip: true,
-      btnText: t('checkout.dialog.rechargeNow'),
+      confirmText: t('checkout.dialog.rechargeNow'),
     },
   ))
 }
@@ -112,8 +102,8 @@ function showPaymentSuccessDialog() {
   Object.assign(dialogConfig.value, DialogUtils.success(
     t('checkout.dialog.paymentSuccess'),
     {
-      btnText: t('checkout.dialog.viewOrder'),
-      showButton: true,
+      confirmText: t('checkout.dialog.viewOrder'),
+      showConfirm: true,
     },
   ))
 }
@@ -123,7 +113,7 @@ function showPaymentFailedDialog() {
   Object.assign(dialogConfig.value, DialogUtils.error(
     t('checkout.dialog.paymentFailed'),
     {
-      btnText: t('checkout.dialog.retryPayment'),
+      confirmText: t('checkout.dialog.retryPayment'),
     },
   ))
 }
@@ -133,7 +123,7 @@ function showNetworkErrorDialog() {
   Object.assign(dialogConfig.value, DialogUtils.error(
     t('checkout.dialog.networkError'),
     {
-      btnText: t('checkout.dialog.retry'),
+      confirmText: t('checkout.dialog.retry'),
       iconSize: '100rpx',
     },
   ))
@@ -166,25 +156,30 @@ async function handlePlaceOrder() {
 
 // 处理对话框确认事件
 function handleDialogConfirm() {
-  const { icon } = dialogConfig.value
+  const config = dialogConfig.value as any
+  const { type, confirmText } = config
 
-  if (icon === 'warning') {
+  // 根据确认按钮文本判断是哪种对话框
+  if (confirmText === t('checkout.dialog.rechargeNow')) {
     // 余额不足，跳转到充值页面
     uni.navigateTo({ url: '/pages/wallet/recharge' })
   }
-  else if (icon === 'success') {
+  else if (type === 'success') {
     // 支付成功，跳转到订单页面
     uni.showToast({ title: t('checkout.toast.redirecting'), icon: 'none' })
   }
-  else if (icon === 'error') {
+  else if (type === 'error') {
     // 支付失败或网络错误，重新尝试
     uni.showToast({ title: t('checkout.toast.retrying'), icon: 'loading' })
   }
+
+  // 关闭对话框
+  dialogConfig.value = {}
 }
 
 // 处理对话框关闭事件
 function handleDialogClose() {
-  console.log('Dialog closed')
+  dialogConfig.value = {}
 }
 </script>
 
@@ -269,17 +264,9 @@ function handleDialogClose() {
       </view>
     </template>
 
-    <!-- DialogBox 组件示例 -->
+    <!-- DialogBox 函数式调用 -->
     <DialogBox
-      v-model:show="dialogConfig.show"
-      :icon="dialogConfig.icon"
-      :icon-size="dialogConfig.iconSize"
-      :message="dialogConfig.message"
-      :tip="dialogConfig.tip"
-      :btn-text="dialogConfig.btnText"
-      :show-button="dialogConfig.showButton"
-      :show-tip="dialogConfig.showTip"
-      :close-on-click-overlay="dialogConfig.closeOnClickOverlay"
+      v-bind="dialogConfig"
       @confirm="handleDialogConfirm"
       @close="handleDialogClose"
     />