From c619ffee4ecb7bb064a490365e957d8896e96920 Mon Sep 17 00:00:00 2001
From: matevip <matevip@mate.vip>
Date: Sat, 11 Apr 2026 18:06:48 +0800
Subject: [PATCH] fix(ui): prevent modals from closing on backdrop click

---
 mateclaw-ui/src/views/AgentContext.vue                        | 2 +-
 mateclaw-ui/src/views/Agents.vue                              | 4 ++--
 mateclaw-ui/src/views/Channels.vue                            | 2 +-
 mateclaw-ui/src/views/CronJobs.vue                            | 4 ++--
 mateclaw-ui/src/views/Datasources.vue                         | 4 ++--
 mateclaw-ui/src/views/Doctor/DoctorDrawer.vue                 | 2 +-
 mateclaw-ui/src/views/McpServers.vue                          | 4 ++--
 mateclaw-ui/src/views/Security/Members/index.vue              | 2 +-
 mateclaw-ui/src/views/Security/ToolGuard/index.vue            | 2 +-
 mateclaw-ui/src/views/Security/Workspaces/index.vue           | 4 ++--
 .../src/views/Settings/Models/modals/ManageModelsModal.vue    | 2 +-
 .../src/views/Settings/Models/modals/ProviderConfigModal.vue  | 2 +-
 mateclaw-ui/src/views/SkillMarket.vue                         | 2 +-
 mateclaw-ui/src/views/Tools.vue                               | 2 +-
 mateclaw-ui/src/views/Wiki/components/RawMaterialPanel.vue    | 2 +-
 mateclaw-ui/src/views/Wiki/index.vue                          | 2 +-
 16 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/mateclaw-ui/src/views/AgentContext.vue b/mateclaw-ui/src/views/AgentContext.vue
index 49c46bf1..214fcf2d 100644
--- a/mateclaw-ui/src/views/AgentContext.vue
+++ b/mateclaw-ui/src/views/AgentContext.vue
@@ -168,7 +168,7 @@
     </div>
 
     <!-- 新建文件弹窗 -->
-    <div v-if="showNewFileDialog" class="modal-overlay" @click.self="showNewFileDialog = false">
+    <div v-if="showNewFileDialog" class="modal-overlay">
       <div class="modal small-modal">
         <div class="modal-header">
           <h2>{{ t('agentContext.newFileTitle') }}</h2>
diff --git a/mateclaw-ui/src/views/Agents.vue b/mateclaw-ui/src/views/Agents.vue
index 855d7927..8b37c707 100644
--- a/mateclaw-ui/src/views/Agents.vue
+++ b/mateclaw-ui/src/views/Agents.vue
@@ -95,7 +95,7 @@
     
 
     <!-- Template Selector Modal -->
-    <div v-if="showTemplateSelector" class="modal-overlay" @click.self="showTemplateSelector = false">
+    <div v-if="showTemplateSelector" class="modal-overlay">
       <div class="modal template-modal">
         <div class="modal-header">
           <h2>{{ t('agents.templates.title') }}</h2>
@@ -138,7 +138,7 @@
     </div>
 
     <!-- Create/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h2>{{ editingAgent ? t('agents.modal.editTitle') : t('agents.modal.newTitle') }}</h2>
diff --git a/mateclaw-ui/src/views/Channels.vue b/mateclaw-ui/src/views/Channels.vue
index ce4dccd9..26bb8115 100644
--- a/mateclaw-ui/src/views/Channels.vue
+++ b/mateclaw-ui/src/views/Channels.vue
@@ -78,7 +78,7 @@
     </div>
 
     <!-- Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h2>{{ editingChannel ? t('channels.modal.editTitle') : t('channels.modal.newTitle') }}</h2>
diff --git a/mateclaw-ui/src/views/CronJobs.vue b/mateclaw-ui/src/views/CronJobs.vue
index 58ee4b3f..19dc3b14 100644
--- a/mateclaw-ui/src/views/CronJobs.vue
+++ b/mateclaw-ui/src/views/CronJobs.vue
@@ -101,7 +101,7 @@
       </div>
     </div>
 
-    <div v-if="detailJob" class="modal-overlay" @click.self="closeDetailModal">
+    <div v-if="detailJob" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h2>{{ detailJob.name }}</h2>
@@ -150,7 +150,7 @@
     </div>
 
     <!-- 新建/编辑弹窗 -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal modal-lg">
         <div class="modal-header">
           <h2>{{ editing ? t('cronJobs.editJob') : t('cronJobs.createJob') }}</h2>
diff --git a/mateclaw-ui/src/views/Datasources.vue b/mateclaw-ui/src/views/Datasources.vue
index 5a6ac98c..f1dc211d 100644
--- a/mateclaw-ui/src/views/Datasources.vue
+++ b/mateclaw-ui/src/views/Datasources.vue
@@ -92,7 +92,7 @@
       </div>
     </div>
 
-    <div v-if="detailDs" class="modal-overlay" @click.self="closeDetailModal">
+    <div v-if="detailDs" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h2>{{ detailDs.name }}</h2>
@@ -134,7 +134,7 @@
       </div>
     </div>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h2>{{ editingDs ? t('datasources.modal.editTitle') : t('datasources.modal.newTitle') }}</h2>
diff --git a/mateclaw-ui/src/views/Doctor/DoctorDrawer.vue b/mateclaw-ui/src/views/Doctor/DoctorDrawer.vue
index eede13bd..efef652c 100644
--- a/mateclaw-ui/src/views/Doctor/DoctorDrawer.vue
+++ b/mateclaw-ui/src/views/Doctor/DoctorDrawer.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <div v-if="visible" class="drawer-overlay" @click.self="emit('close')">
+    <div v-if="visible" class="drawer-overlay">
       <div class="drawer-panel">
         <div class="drawer-header">
           <h2 class="drawer-title">{{ t('doctor.title') }}</h2>
diff --git a/mateclaw-ui/src/views/McpServers.vue b/mateclaw-ui/src/views/McpServers.vue
index 865fa899..4d5d77e0 100644
--- a/mateclaw-ui/src/views/McpServers.vue
+++ b/mateclaw-ui/src/views/McpServers.vue
@@ -135,7 +135,7 @@
       </div>
     </div>
 
-    <div v-if="detailServer" class="modal-overlay" @click.self="closeDetailModal">
+    <div v-if="detailServer" class="modal-overlay">
       <div class="modal modal-wide">
         <div class="modal-header">
           <h2>{{ detailServer.name }}</h2>
@@ -202,7 +202,7 @@
       </div>
     </transition>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal modal-wide">
         <div class="modal-header">
           <h2>{{ editing ? t('mcp.modal.editTitle') : t('mcp.modal.newTitle') }}</h2>
diff --git a/mateclaw-ui/src/views/Security/Members/index.vue b/mateclaw-ui/src/views/Security/Members/index.vue
index 4b8cd571..d312494a 100644
--- a/mateclaw-ui/src/views/Security/Members/index.vue
+++ b/mateclaw-ui/src/views/Security/Members/index.vue
@@ -74,7 +74,7 @@
 
     <!-- Add Member Dialog -->
     <Teleport to="body">
-      <div v-if="showAddDialog" class="modal-overlay" @click.self="showAddDialog = false">
+      <div v-if="showAddDialog" class="modal-overlay">
         <div class="modal">
           <div class="modal-header">
             <h3>{{ t('security.members.addDialog.title') }}</h3>
diff --git a/mateclaw-ui/src/views/Security/ToolGuard/index.vue b/mateclaw-ui/src/views/Security/ToolGuard/index.vue
index 141739ed..1361f7a7 100644
--- a/mateclaw-ui/src/views/Security/ToolGuard/index.vue
+++ b/mateclaw-ui/src/views/Security/ToolGuard/index.vue
@@ -137,7 +137,7 @@
 
     <!-- Rule Modal -->
     <Teleport to="body">
-      <div v-if="showRuleModal" class="modal-overlay" @click.self="showRuleModal = false">
+      <div v-if="showRuleModal" class="modal-overlay">
         <div class="modal">
           <div class="modal-header">
             <h3>{{ editingRule ? t('security.toolGuard.editRule') : t('security.toolGuard.addRule') }}</h3>
diff --git a/mateclaw-ui/src/views/Security/Workspaces/index.vue b/mateclaw-ui/src/views/Security/Workspaces/index.vue
index 268ee50d..e13b9908 100644
--- a/mateclaw-ui/src/views/Security/Workspaces/index.vue
+++ b/mateclaw-ui/src/views/Security/Workspaces/index.vue
@@ -69,7 +69,7 @@
 
     <!-- Create / Edit Dialog -->
     <Teleport to="body">
-      <div v-if="showDialog" class="modal-overlay" @click.self="showDialog = false">
+      <div v-if="showDialog" class="modal-overlay">
         <div class="modal">
           <div class="modal-header">
             <h3>{{ editingWs ? t('security.workspaces.editDialog.title') : t('security.workspaces.createDialog.title') }}</h3>
@@ -114,7 +114,7 @@
 
     <!-- Delete Confirmation -->
     <Teleport to="body">
-      <div v-if="showDeleteConfirm" class="modal-overlay" @click.self="showDeleteConfirm = false">
+      <div v-if="showDeleteConfirm" class="modal-overlay">
         <div class="modal">
           <div class="modal-header">
             <h3>{{ t('security.workspaces.deleteDialog.title') }}</h3>
diff --git a/mateclaw-ui/src/views/Settings/Models/modals/ManageModelsModal.vue b/mateclaw-ui/src/views/Settings/Models/modals/ManageModelsModal.vue
index 47d50772..aa7b07a5 100644
--- a/mateclaw-ui/src/views/Settings/Models/modals/ManageModelsModal.vue
+++ b/mateclaw-ui/src/views/Settings/Models/modals/ManageModelsModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show && provider" class="modal-overlay" @click.self="$emit('close')">
+  <div v-if="show && provider" class="modal-overlay">
     <div class="modal modal-wide">
       <div class="modal-header">
         <h2>
diff --git a/mateclaw-ui/src/views/Settings/Models/modals/ProviderConfigModal.vue b/mateclaw-ui/src/views/Settings/Models/modals/ProviderConfigModal.vue
index ff821492..be95bd21 100644
--- a/mateclaw-ui/src/views/Settings/Models/modals/ProviderConfigModal.vue
+++ b/mateclaw-ui/src/views/Settings/Models/modals/ProviderConfigModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" class="modal-overlay" @click.self="$emit('close')">
+  <div v-if="show" class="modal-overlay">
     <div class="modal">
       <div class="modal-header">
         <h2>{{ editingProvider ? t('settings.model.editTitle') : t('settings.model.createTitle') }}</h2>
diff --git a/mateclaw-ui/src/views/SkillMarket.vue b/mateclaw-ui/src/views/SkillMarket.vue
index 5d645d3a..124824e1 100644
--- a/mateclaw-ui/src/views/SkillMarket.vue
+++ b/mateclaw-ui/src/views/SkillMarket.vue
@@ -128,7 +128,7 @@
     <ImportHubDialog v-model:visible="showImportDialog" @installed="loadAll" />
 
     <!-- Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h2>{{ editingSkill ? t('skills.modal.configureTitle') : t('skills.modal.newTitle') }}</h2>
diff --git a/mateclaw-ui/src/views/Tools.vue b/mateclaw-ui/src/views/Tools.vue
index 4d84b6e8..d38652f6 100644
--- a/mateclaw-ui/src/views/Tools.vue
+++ b/mateclaw-ui/src/views/Tools.vue
@@ -85,7 +85,7 @@
     </div>
 
     <!-- Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h2>{{ editingTool ? t('tools.modal.editTitle') : t('tools.modal.newTitle') }}</h2>
diff --git a/mateclaw-ui/src/views/Wiki/components/RawMaterialPanel.vue b/mateclaw-ui/src/views/Wiki/components/RawMaterialPanel.vue
index efc3f95b..273ad122 100644
--- a/mateclaw-ui/src/views/Wiki/components/RawMaterialPanel.vue
+++ b/mateclaw-ui/src/views/Wiki/components/RawMaterialPanel.vue
@@ -99,7 +99,7 @@
     </button>
 
     <!-- Add Text Modal -->
-    <div v-if="showAddText" class="modal-overlay" @click.self="showAddText = false">
+    <div v-if="showAddText" class="modal-overlay">
       <div class="modal-content">
         <h3 class="modal-title">{{ t('wiki.addText') }}</h3>
         <div class="form-group">
diff --git a/mateclaw-ui/src/views/Wiki/index.vue b/mateclaw-ui/src/views/Wiki/index.vue
index 4e09534f..6ef00548 100644
--- a/mateclaw-ui/src/views/Wiki/index.vue
+++ b/mateclaw-ui/src/views/Wiki/index.vue
@@ -112,7 +112,7 @@
     </div>
 
     <!-- Create KB Modal -->
-    <div v-if="showCreateKB" class="modal-overlay" @click.self="showCreateKB = false">
+    <div v-if="showCreateKB" class="modal-overlay">
       <div class="modal-content">
         <h3 class="modal-title">{{ t('wiki.createKB') }}</h3>
         <div class="form-group">