From 0870bae3f2b75ae2c05ef123f02239fa5eca1c74 Mon Sep 17 00:00:00 2001
From: yuyx <237899745@qq.com>
Date: Wed, 18 Feb 2026 22:48:31 +0800
Subject: [PATCH] fix(frontend): replace share delete confirm with in-app modal

---
 frontend/app.html | 27 ++++++++++++--
 frontend/app.js   | 90 ++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 110 insertions(+), 7 deletions(-)

diff --git a/frontend/app.html b/frontend/app.html
index 6e8c273..9c7064f 100644
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -2364,6 +2364,27 @@
       </div>
     </div>
 
+    <!-- 删除确认模态框（替代浏览器 confirm，避免误删） -->
+    <div v-if="showDeleteConfirmModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showDeleteConfirmModal', $event)">
+      <div class="modal-content" @click.stop style="max-width: 440px;">
+        <h3 style="margin-bottom: 12px; color: #ef4444;">
+          <i class="fas fa-triangle-exclamation"></i> {{ deleteConfirm.title || '确认删除' }}
+        </h3>
+        <p style="margin: 0; color: var(--text-secondary); line-height: 1.7;">
+          {{ deleteConfirm.message || '确认执行删除操作？' }}
+        </p>
+        <div style="display: flex; gap: 10px; margin-top: 20px;">
+          <button class="btn btn-secondary" @click="closeDeleteConfirmModal()" :disabled="deleteConfirm.loading" style="flex: 1;">
+            <i class="fas fa-times"></i> 取消
+          </button>
+          <button class="btn" style="background: #ef4444; color: white; flex: 1;" @click="confirmDeleteAction()" :disabled="deleteConfirm.loading">
+            <i class="fas" :class="deleteConfirm.loading ? 'fa-spinner fa-spin' : 'fa-trash'"></i>
+            {{ deleteConfirm.loading ? '删除中...' : '确定删除' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
     <!-- OSS 配置引导弹窗 -->
     <div v-if="showOssGuideModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showOssGuideModal', $event)">
       <div class="modal-content" @click.stop style="max-width: 520px; border-radius: 16px; overflow: hidden;">
@@ -3057,7 +3078,7 @@
               <button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)">
                 <i class="fas fa-copy"></i> 复制链接
               </button>
-              <button class="btn share-card__delete-btn" style="background: #ef4444; color: white;" @click.stop="deleteShare(share.id)">
+              <button class="btn share-card__delete-btn" style="background: #ef4444; color: white;" @click.stop="requestDeleteShare(share.id, $event)">
                 <i class="fas fa-trash"></i> 删除
               </button>
             </div>
@@ -3096,7 +3117,7 @@
                   <button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)">
                     <i class="fas fa-copy"></i> 复制链接
                   </button>
-                  <button class="btn" style="background: #ef4444; color: white;" @click.stop="deleteShare(share.id)">
+                  <button class="btn" style="background: #ef4444; color: white;" @click.stop="requestDeleteShare(share.id, $event)">
                     <i class="fas fa-trash"></i> 删除
                   </button>
                 </div>
@@ -3154,7 +3175,7 @@
                     <button class="btn btn-secondary" @click.stop="copyDirectLink(link.direct_url)">
                       <i class="fas fa-copy"></i> 复制链接
                     </button>
-                    <button class="btn" style="background: #ef4444; color: white;" @click.stop="deleteDirectLink(link.id)">
+                    <button class="btn" style="background: #ef4444; color: white;" @click.stop="requestDeleteDirectLink(link.id, $event)">
                       <i class="fas fa-trash"></i> 删除
                     </button>
                   </div>
diff --git a/frontend/app.js b/frontend/app.js
index 974cbfc..8485056 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -94,6 +94,14 @@ createApp({
       shares: [],
       directLinks: [],
       directLinksLoading: false,
+      showDeleteConfirmModal: false,
+      deleteConfirm: {
+        type: '', // share | direct_link
+        id: null,
+        title: '',
+        message: '',
+        loading: false
+      },
       showShareFileModal: false,
       creatingShare: false, // 创建分享中状态
       shareFileForm: {
@@ -2965,9 +2973,29 @@ handleDragLeave(e) {
       }
     },
 
-    async deleteDirectLink(id) {
-      if (!window.confirm('确定要删除这个直链吗？')) return;
+    requestDeleteDirectLink(id, event = null) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
 
+      const linkId = parseInt(id, 10);
+      if (!Number.isFinite(linkId) || linkId <= 0) {
+        this.showToast('warning', '提示', '无效的直链ID');
+        return;
+      }
+
+      this.deleteConfirm = {
+        type: 'direct_link',
+        id: linkId,
+        title: '删除直链',
+        message: '确定要删除这个直链吗？删除后将无法继续访问。',
+        loading: false
+      };
+      this.showDeleteConfirmModal = true;
+    },
+
+    async deleteDirectLink(id) {
       try {
         const response = await axios.delete(`${this.apiBase}/api/direct-link/${id}`);
         if (response.data?.success) {
@@ -3000,9 +3028,29 @@ handleDragLeave(e) {
       }
     },
 
-    async deleteShare(id) {
-      if (!window.confirm('确定要删除这个分享吗？')) return;
+    requestDeleteShare(id, event = null) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
 
+      const shareId = parseInt(id, 10);
+      if (!Number.isFinite(shareId) || shareId <= 0) {
+        this.showToast('warning', '提示', '无效的分享ID');
+        return;
+      }
+
+      this.deleteConfirm = {
+        type: 'share',
+        id: shareId,
+        title: '删除分享',
+        message: '确定要删除这个分享吗？删除后外链将立即失效。',
+        loading: false
+      };
+      this.showDeleteConfirmModal = true;
+    },
+
+    async deleteShare(id) {
       try {
         const response = await axios.delete(`${this.apiBase}/api/share/${id}`);
 
@@ -3016,6 +3064,40 @@ handleDragLeave(e) {
       }
     },
 
+    closeDeleteConfirmModal(force = false) {
+      if (this.deleteConfirm.loading && !force) return;
+      this.showDeleteConfirmModal = false;
+      this.deleteConfirm = {
+        type: '',
+        id: null,
+        title: '',
+        message: '',
+        loading: false
+      };
+    },
+
+    async confirmDeleteAction() {
+      if (this.deleteConfirm.loading) return;
+      const { type, id } = this.deleteConfirm;
+      if (!type || !id) {
+        this.closeDeleteConfirmModal(true);
+        return;
+      }
+
+      this.deleteConfirm.loading = true;
+      try {
+        if (type === 'share') {
+          await this.deleteShare(id);
+        } else if (type === 'direct_link') {
+          await this.deleteDirectLink(id);
+        }
+        this.closeDeleteConfirmModal(true);
+      } catch (error) {
+        console.error('执行删除操作失败:', error);
+        this.deleteConfirm.loading = false;
+      }
+    },
+
     // 格式化到期时间显示
     formatExpireTime(expiresAt) {
       if (!expiresAt) return '永久有效';