refactor(ui):使用模态框代替系统自带提示消息

web/tenant/src/components/common/ConfirmDialog.vue

@@ -0,0 +1,27 @@
+<template>
+  <BaseModal
+    :show="visible"
+    :title="options.title || '确认操作'"
+    width="narrow"
+    @close="handleCancel"
+  >
+    <p class="text-sm text-gray-600">{{ options.message }}</p>
+
+    <template #footer>
+      <button @click="handleCancel" class="btn btn-secondary">{{ options.cancelText || '取消' }}</button>
+      <button
+        @click="handleConfirm"
+        :class="options.danger ? 'btn btn-danger' : 'btn btn-primary'"
+      >
+        {{ options.confirmText || '确认' }}
+      </button>
+    </template>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import BaseModal from './BaseModal.vue'
+import { useConfirm } from '@/composables/useConfirm'
+
+const { visible, options, handleConfirm, handleCancel } = useConfirm()
+</script>

web/tenant/src/composables/useConfirm.ts

@@ -0,0 +1,37 @@
+import { ref } from 'vue'
+
+interface ConfirmOptions {
+  title?: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  danger?: boolean
+}
+
+const visible = ref(false)
+const options = ref<ConfirmOptions>({ message: '' })
+let resolvePromise: ((value: boolean) => void) | null = null
+
+export function useConfirm() {
+  function confirm(opts: ConfirmOptions | string): Promise<boolean> {
+    options.value = typeof opts === 'string' ? { message: opts } : opts
+    visible.value = true
+    return new Promise((resolve) => {
+      resolvePromise = resolve
+    })
+  }
+
+  function handleConfirm() {
+    visible.value = false
+    resolvePromise?.(true)
+    resolvePromise = null
+  }
+
+  function handleCancel() {
+    visible.value = false
+    resolvePromise?.(false)
+    resolvePromise = null
+  }
+
+  return { visible, options, confirm, handleConfirm, handleCancel }
+}