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>
This commit is contained in:
@@ -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 }}
|
||||
|
||||
Reference in New Issue
Block a user