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:
WanWanYun
2025-11-15 22:32:50 +08:00
parent eed2533f29
commit 3977e72c9e
2 changed files with 24 additions and 14 deletions

View File

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