From 3977e72c9e2d683c219845d5694e7f905737e7dd Mon Sep 17 00:00:00 2001
From: WanWanYun <wanwanyun@example.com>
Date: Sat, 15 Nov 2025 22:32:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E9=97=AE=E9=A2=98=E5=92=8C=E6=8B=96=E6=94=BE?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0UI=E9=87=8D=E5=A4=8D=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题描述:
1. 弹窗点击外部关闭时,选择文本拖动鼠标到窗口外会误触关闭
2. 拖放文件上传的提示UI重复显示了两次

修复内容:

【弹窗交互优化】
- 将所有模态框的 @click 事件改为 @mousedown.self + @mouseup.self 组合
- 新增 handleModalMouseDown 和 handleModalMouseUp 方法
- 只有在同一个overlay元素上按下和释放鼠标时才关闭弹窗
- 解决了选择文本时拖动鼠标导致弹窗意外关闭的问题
- 受影响的弹窗:
  * 重命名文件弹窗
  * 分享所有文件弹窗
  * 分享单个文件弹窗
  * 忘记密码弹窗
  * 文件审查弹窗
  * 编辑存储权限弹窗

【拖放UI修复】
- 删除了重复的拖放上传提示层(原第670-677行)
- 保留文件列表区域内的拖放提示层(第711-718行)
- 现在拖放上传提示只显示一次

技术改进:
- mousedown.self: 只在overlay本身被按下时触发
- mouseup.self: 只在overlay本身被释放时触发
- 记录mousedown的目标,只有目标一致才执行关闭
- 提升了用户体验,避免误操作

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app.html | 20 ++++++--------------
 frontend/app.js   | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/app.html b/frontend/app.html
index 16cae41..6de58f6 100644
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -667,14 +667,6 @@
           <div style="display: flex; gap: 10px;">
             <!-- 本地存储：显示网页上传按钮 -->
             <button v-if="storageType === 'local'" class="btn btn-primary" @click="$refs.fileUploadInput.click()">
-          <!-- 拖拽提示层 -->
-          <div v-if="isDragging && storageType === 'local'" class="drag-drop-overlay">
-            <div class="drag-drop-content">
-              <i class="fas fa-cloud-upload-alt" style="font-size: 64px; color: #667eea; margin-bottom: 20px;"></i>
-              <div style="font-size: 24px; font-weight: 600; color: #333; margin-bottom: 10px;">拖放文件到这里上传</div>
-              <div style="font-size: 14px; color: #666;">松开鼠标即可开始上传</div>
-            </div>
-          </div>
               <i class="fas fa-upload"></i> 上传文件
             </button>
             <!-- SFTP存储：显示下载上传工具按钮 -->
@@ -801,7 +793,7 @@
 
 
     <!-- 重命名模态框 -->
-    <div v-if="showRenameModal" class="modal-overlay" @click="showRenameModal = false">
+    <div v-if="showRenameModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showRenameModal')">
       <div class="modal-content" @click.stop>
         <h3 style="margin-bottom: 20px;">重命名文件</h3>
         <div class="form-group">
@@ -820,7 +812,7 @@
     </div>
 
     <!-- 分享所有文件模态框 -->
-    <div v-if="showShareAllModal" class="modal-overlay" @click="showShareAllModal = false">
+    <div v-if="showShareAllModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showShareAllModal')">
       <div class="modal-content" @click.stop>
         <h3 style="margin-bottom: 20px;">分享所有文件</h3>
         <div class="form-group">
@@ -864,7 +856,7 @@
     </div>
 
     <!-- 分享单个文件模态框 -->
-    <div v-if="showShareFileModal" class="modal-overlay" @click="showShareFileModal = false">
+    <div v-if="showShareFileModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showShareFileModal')">
       <div class="modal-content" @click.stop>
         <h3 style="margin-bottom: 20px;">分享文件</h3>
         <p style="color: #666; margin-bottom: 15px;">文件: <strong>{{ shareFileForm.fileName }}</strong></p>
@@ -1494,7 +1486,7 @@
     </div>
 
     <!-- 忘记密码模态框 -->
-    <div v-if="showForgotPasswordModal" class="modal-overlay" @click="showForgotPasswordModal = false">
+    <div v-if="showForgotPasswordModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showForgotPasswordModal')">
       <div class="modal-content" @click.stop>
         <h3 style="margin-bottom: 20px;">忘记密码 - 提交重置请求</h3>
         <p style="color: #666; margin-bottom: 15px; font-size: 14px;">
@@ -1520,7 +1512,7 @@
     </div>
 
     <!-- 文件审查模态框 -->
-    <div v-if="showFileInspectionModal" class="modal-overlay" @click="showFileInspectionModal = false">
+    <div v-if="showFileInspectionModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showFileInspectionModal')">
       <div class="modal-content" @click.stop style="max-width: 900px; max-height: 80vh; overflow-y: auto;">
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
           <h3 style="margin: 0;">
@@ -1697,7 +1689,7 @@
       </div>
     </div>
     <!-- 管理员：编辑用户存储权限模态框 -->
-    <div v-if="showEditStorageModal" class="modal-overlay" @click="showEditStorageModal = false">
+    <div v-if="showEditStorageModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showEditStorageModal')">
       <div class="modal-content" @click.stop>
         <h3 style="margin-bottom: 20px;">
           <i class="fas fa-database"></i> 存储权限设置 - {{ editStorageForm.username }}
diff --git a/frontend/app.js b/frontend/app.js
index 66556e9..34dc57d 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -86,6 +86,7 @@ createApp({
       totalBytes: 0,
       uploadingFileName: '',
       isDragging: false,
+      modalMouseDownTarget: null, // 模态框鼠标按下的目标
 
       // 上传工具下载
       downloadingTool: false,
@@ -211,6 +212,23 @@ createApp({
   },
 
   methods: {
+    // 模态框点击外部关闭优化 - 防止拖动选择文本时误关闭
+    modalMouseDownTarget: null,
+    handleModalMouseDown(e) {
+      // 记录鼠标按下时的目标
+      this.modalMouseDownTarget = e.target;
+    },
+    handleModalMouseUp(modalName) {
+      // 只有在同一个overlay元素上按下和释放鼠标时才关闭
+      return (e) => {
+        if (e.target === this.modalMouseDownTarget) {
+          this[modalName] = false;
+          this.shareResult = null; // 重置分享结果
+        }
+        this.modalMouseDownTarget = null;
+      };
+    },
+
     // 格式化文件大小
     formatFileSize(bytes) {
       if (bytes === 0) return '0 B';