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

web/tenant/src/App.vue

@@ -1,8 +1,10 @@
 <template>
   <router-view />
   <Toast />
+  <ConfirmDialog />
 </template>
 
 <script setup lang="ts">
 import Toast from '@/components/common/Toast.vue'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 </script>

web/tenant/src/views/open/OpenAppsPage.vue

@@ -2,6 +2,9 @@
 import { ref, reactive, onMounted } from 'vue'
 import request from '@/utils/request'
 import Icon from '@/components/common/Icon.vue'
+import { useConfirm } from '@/composables/useConfirm'
+
+const { confirm } = useConfirm()
 
 interface OpenApp {
   id: number
@@ -126,7 +129,7 @@ async function handleSave() {
 }
 
 async function handleDelete(id: number) {
-  if (!confirm('确定要删除此应用吗？此操作不可恢复。')) return
+  if (!await confirm({ message: '确定要删除此应用吗？此操作不可恢复。', confirmText: '确认删除', danger: true })) return
   try {
     const res = await request.delete(`/tenant/open/apps/${id}`)
     if (res.data?.code === 0) {
@@ -138,7 +141,7 @@ async function handleDelete(id: number) {
 }
 
 async function handleResetSecret(id: number) {
-  if (!confirm('确定要重置密钥吗？旧密钥将立即失效。')) return
+  if (!await confirm({ message: '确定要重置密钥吗？旧密钥将立即失效。', confirmText: '确认重置', danger: true })) return
   try {
     const res = await request.post(`/tenant/open/apps/${id}/reset-secret`)
     if (res.data?.code === 0) {

web/tenant/src/views/open/WebhooksPage.vue

@@ -2,6 +2,9 @@
 import { ref, reactive, onMounted } from 'vue'
 import request from '@/utils/request'
 import Icon from '@/components/common/Icon.vue'
+import { useConfirm } from '@/composables/useConfirm'
+
+const { confirm } = useConfirm()
 
 interface WebhookConfig {
   id: number
@@ -128,7 +131,7 @@ async function handleSave() {
 }
 
 async function handleDelete(id: number) {
-  if (!confirm('确定要删除此 Webhook 配置吗？')) return
+  if (!await confirm({ message: '确定要删除此 Webhook 配置吗？', confirmText: '确认删除', danger: true })) return
   try {
     const res = await request.delete(`/tenant/open/webhooks/${id}`)
     if (res.data?.code === 0) await loadConfigs()

web/tenant/src/views/service/ApiKeysPage.vue

@@ -5,6 +5,9 @@ import Icon from '@/components/common/Icon.vue'
 import request from '@/utils/request'
 import { toast } from '@/utils/toast'
 import { useExport } from '@/composables/useExport'
+import { useConfirm } from '@/composables/useConfirm'
+
+const { confirm } = useConfirm()
 
 interface ApiKey {
 	id: number
@@ -115,11 +118,12 @@ function copyKey() {
 	})
 }
 
-async function deleteKey(keyId: number) {
-	if (!confirm('确定禁用该 API Key？禁用后将无法使用。')) return
+async function disableKey(keyId: number) {
+	if (!await confirm({ message: '确定禁用该 API Key？禁用后将无法使用。', confirmText: '确认禁用', danger: true })) return
 	try {
 		await request.delete(`/tenant/api-keys/${keyId}`)
-		keys.value = keys.value.filter((k) => k.id !== keyId)
+		const key = keys.value.find((k) => k.id === keyId)
+		if (key) key.status = 'disabled'
 	} catch {
 	}
 }
@@ -198,7 +202,7 @@ onMounted(fetchKeys)
 							<td class="text-right">
 								<button
 									v-if="key.status === 'active'"
-									@click="deleteKey(key.id)"
+									@click="disableKey(key.id)"
 									class="btn btn-ghost btn-sm text-red-600 hover:bg-red-50"
 								>
 									<Icon name="trash" size="xs" />

web/tenant/src/views/team/ProjectDetailPage.vue

@@ -5,6 +5,9 @@ import BaseModal from '@/components/common/BaseModal.vue'
 import Icon from '@/components/common/Icon.vue'
 import request from '@/utils/request'
 import { toast } from '@/utils/toast'
+import { useConfirm } from '@/composables/useConfirm'
+
+const { confirm } = useConfirm()
 
 const route = useRoute()
 const router = useRouter()
@@ -209,7 +212,7 @@ function copyKey() {
 }
 
 async function deleteKey(keyId: number) {
-	if (!confirm('确定禁用该密钥？')) return
+	if (!await confirm({ message: '确定禁用该密钥？', confirmText: '确认禁用', danger: true })) return
 	try {
 		await request.delete(`/tenant/projects/${projectId.value}/api-keys/${keyId}`)
 		fetchKeys()

web/tenant/src/views/team/ProjectsPage.vue

@@ -4,6 +4,9 @@ import { useRouter } from 'vue-router'
 import Icon from '@/components/common/Icon.vue'
 import BaseModal from '@/components/common/BaseModal.vue'
 import request from '@/utils/request'
+import { useConfirm } from '@/composables/useConfirm'
+
+const { confirm } = useConfirm()
 
 const router = useRouter()
 const loading = ref(false)
@@ -61,7 +64,7 @@ async function handleSubmit() {
 }
 
 async function handleArchive(item: any) {
-	if (!confirm(`确定归档项目「${item.name}」？归档后所有 API Key 将失效。`)) return
+	if (!await confirm({ message: `确定归档项目「${item.name}」？归档后所有 API Key 将失效。`, confirmText: '确认归档', danger: true })) return
 	try {
 		await request.post(`/tenant/projects/${item.id}/archive`)
 		await fetchProjects()