refactor(ui): migrate remaining ElMessageBox.confirm calls to mcConfirm

mateclaw-ui/src/views/AcpEndpoints.vue

@@ -154,7 +154,8 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import { acpApi } from '@/api/index'
 
 interface AcpEndpoint {
@@ -267,10 +268,12 @@ async function saveEndpoint() {
 }
 
 async function removeEndpoint(ep: AcpEndpoint) {
-  try {
+  const ok = await mcConfirm({
-    await ElMessageBox.confirm(t('acp.deleteConfirm', { name: ep.name }),
+    title: t('acp.deleteTitle'),
-        t('acp.deleteTitle'), { type: 'warning' })
+    message: t('acp.deleteConfirm', { name: ep.name }),
-  } catch { return }
+    tone: 'danger',
+  })
+  if (!ok) return
   try {
     await acpApi.delete(ep.id)
     await loadEndpoints()

mateclaw-ui/src/views/AgentContext.vue

@@ -205,7 +205,8 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import { agentApi, agentContextApi } from '@/api/index'
 import type { Agent, WorkspaceFile } from '@/types/index'
 import { useMarkdownRenderer } from '@/composables/useMarkdownRenderer'
@@ -392,13 +393,12 @@ async function toggleFileEnabled(file: WorkspaceFile) {
 async function confirmDeleteFile() {
   if (!selectedFile.value) return
   const name = selectedFile.value.filename
-  try {
+  const ok = await mcConfirm({
-    await ElMessageBox.confirm(
+    title: t('common.delete'),
-      t('agentContext.deleteConfirm', { name }),
+    message: t('agentContext.deleteConfirm', { name }),
-      t('common.delete'),
+    tone: 'danger',
-      { type: 'warning' }
+  })
-    )
+  if (!ok) return
-  } catch { return }
 
   try {
     await agentContextApi.deleteFile(selectedAgentId.value, name)

mateclaw-ui/src/views/Agents.vue

@@ -340,7 +340,8 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import { agentApi, agentBindingApi, modelApi, skillApi, toolApi, templateApi } from '@/api/index'
 import type { Agent } from '@/types/index'
 import SkillIcon from '@/components/common/SkillIcon.vue'
@@ -590,11 +591,12 @@ async function saveAgent() {
 }
 
 async function deleteAgent(agent: Agent) {
-  try {
+  const ok = await mcConfirm({
-    await ElMessageBox.confirm(t('agents.messages.deleteConfirm'), t('agents.actions.delete'), { type: 'warning' })
+    title: t('agents.actions.delete'),
-  } catch {
+    message: t('agents.messages.deleteConfirm'),
-    return
+    tone: 'danger',
-  }
+  })
+  if (!ok) return
   try {
     await agentApi.delete(agent.id)
     ElMessage.success(t('agents.messages.deleteSuccess'))

mateclaw-ui/src/views/Channels.vue

@@ -170,7 +170,8 @@
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import { channelApi, agentApi } from '@/api'
 import type { Channel, Agent } from '@/types'
 
@@ -473,11 +474,12 @@ async function handleSave(payload: Partial<Channel>) {
 // ==================== Toggle / delete ====================
 
 async function deleteChannel(id: string | number) {
-  try {
+  const ok = await mcConfirm({
-    await ElMessageBox.confirm(t('channels.messages.deleteConfirm'), t('channels.messages.deleteTitle'), { type: 'warning' })
+    title: t('channels.messages.deleteTitle'),
-  } catch {
+    message: t('channels.messages.deleteConfirm'),
-    return
+    tone: 'danger',
-  }
+  })
+  if (!ok) return
   try {
     await channelApi.delete(id)
     await loadChannels()

mateclaw-ui/src/views/CronJobs.vue

@@ -315,7 +315,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import { useCronJobStore } from '@/stores/useCronJobStore'
 import { useAgentStore } from '@/stores/useAgentStore'
 import type { CronJob } from '@/types/index'
@@ -438,12 +439,12 @@ async function saveJob() {
 }
 
 async function handleDelete(job: CronJob) {
-  try {
+  const ok = await mcConfirm({
-    await ElMessageBox.confirm(
+    title: t('common.delete'),
-      t('cronJobs.messages.deleteConfirm', { name: job.name }),
+    message: t('cronJobs.messages.deleteConfirm', { name: job.name }),
-      { type: 'warning' },
+    tone: 'danger',
-    )
+  })
-  } catch { return }
+  if (!ok) return
   try {
     await store.deleteJob(job.id)
     ElMessage.success(t('cronJobs.messages.deleteSuccess'))

mateclaw-ui/src/views/Datasources.vue

@@ -235,7 +235,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import {
   ArrowDown,
   CircleCheckFilled,
@@ -410,7 +411,12 @@ async function testInModal() {
 }
 
 async function deleteDs(id: string | number) {
-  try { await ElMessageBox.confirm(t('datasources.messages.deleteConfirm'), t('datasources.messages.deleteTitle'), { type: 'warning' }) } catch { return }
+  const ok = await mcConfirm({
+    title: t('datasources.messages.deleteTitle'),
+    message: t('datasources.messages.deleteConfirm'),
+    tone: 'danger',
+  })
+  if (!ok) return
   try {
     await datasourceApi.delete(id)
     await loadDatasources()

mateclaw-ui/src/views/McpServers.vue

@@ -275,7 +275,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import { mcpApi } from '@/api/index'
 
 const { t } = useI18n()
@@ -413,13 +414,12 @@ async function saveServer() {
 }
 
 async function deleteServer(server: McpServer) {
-  try {
+  const ok = await mcConfirm({
-    await ElMessageBox.confirm(
+    title: t('common.delete'),
-      t('mcp.messages.deleteConfirm', { name: server.name }),
+    message: t('mcp.messages.deleteConfirm', { name: server.name }),
-      t('common.delete'),
+    tone: 'danger',
-      { type: 'warning' }
+  })
-    )
+  if (!ok) return
-  } catch { return }
   try {
     await mcpApi.delete(server.id)
     ElMessage.success(t('mcp.messages.deleteSuccess'))

mateclaw-ui/src/views/Sessions.vue

@@ -93,7 +93,8 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import { conversationApi } from '@/api/index'
 import { channelIconUrl, sourceLabel } from '@/utils/channelSource'
 import type { Conversation } from '@/types/index'
@@ -127,7 +128,12 @@ function viewSession(session: Conversation) {
 }
 
 async function deleteSession(conversationId: string) {
-  try { await ElMessageBox.confirm(t('sessions.deleteConfirm'), t('sessions.deleteTitle'), { type: 'warning' }) } catch { return }
+  const ok = await mcConfirm({
+    title: t('sessions.deleteTitle'),
+    message: t('sessions.deleteConfirm'),
+    tone: 'danger',
+  })
+  if (!ok) return
   try {
     await conversationApi.delete(conversationId)
     await loadSessions()

mateclaw-ui/src/views/Settings/Models/composables/useProviderForm.ts

@@ -1,6 +1,7 @@
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import { modelApi } from '@/api'
 import type { ProviderInfo } from '@/types'
 import { safeParseJson } from '@/utils/safeJson'
@@ -228,19 +229,13 @@ export function useProviderForm(deps: ListDeps) {
   }
 
   async function deleteProvider(provider: ProviderInfo) {
-    try {
+    const ok = await mcConfirm({
-      await ElMessageBox.confirm(
+      title: t('common.confirm'),
-        t('settings.model.deleteConfirm', { name: provider.name }),
+      message: t('settings.model.deleteConfirm', { name: provider.name }),
-        t('common.confirm'),
+      confirmText: t('common.delete'),
-        {
+      tone: 'danger',
-          type: 'warning',
+    })
-          confirmButtonText: t('common.delete'),
+    if (!ok) return false
-          cancelButtonText: t('common.cancel'),
-        },
-      )
-    } catch {
-      return false
-    }
     await modelApi.deleteCustomProvider(provider.id)
     await deps.loadProviders()
     return true

mateclaw-ui/src/views/Settings/Models/index.vue

@@ -178,7 +178,8 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import { useRoute, useRouter } from 'vue-router'
 import type { ProviderInfo, ProviderModelInfo } from '@/types'
 import { useProviders } from './useProviders'
@@ -299,20 +300,13 @@ onMounted(async () => {
 })
 
 async function onDisableProvider(provider: ProviderInfo) {
-  // ElMessageBox throws on cancel — that's our cancel branch.
+  const ok = await mcConfirm({
-  try {
+    title: t('common.confirm'),
-    await ElMessageBox.confirm(
+    message: t('settings.model.disableConfirm', { name: provider.name }),
-      t('settings.model.disableConfirm', { name: provider.name }),
+    confirmText: t('settings.model.disable'),
-      t('common.confirm'),
+    tone: 'danger',
-      {
+  })
-        type: 'warning',
+  if (!ok) return
-        confirmButtonText: t('settings.model.disable'),
-        cancelButtonText: t('common.cancel'),
-      },
-    )
-  } catch {
-    return
-  }
   await disableProvider(provider.id)
 }
 

mateclaw-ui/src/views/Tools.vue

@@ -130,7 +130,8 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { mcConfirm } from '@/components/common/useConfirm'
 import { toolApi } from '@/api/index'
 import type { Tool } from '@/types/index'
 
@@ -186,7 +187,12 @@ async function saveTool() {
 }
 
 async function deleteTool(id: string | number) {
-  try { await ElMessageBox.confirm(t('tools.messages.deleteConfirm'), t('tools.messages.deleteTitle'), { type: 'warning' }) } catch { return }
+  const ok = await mcConfirm({
+    title: t('tools.messages.deleteTitle'),
+    message: t('tools.messages.deleteConfirm'),
+    tone: 'danger',
+  })
+  if (!ok) return
   try {
     await toolApi.delete(id)
     await loadTools()