fix: 修复弹窗交互问题和拖放上传UI重复显示

问题描述:
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

@@ -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 }}

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';