fix(Attachments): 修复拖拽上传遮罩显示问题 & fix(FilesCard): 修复预览图片原图、缩略图逻辑问题

[ToWaitForTheWind]

fix(Attachments): 修复拖拽上传遮罩显示问题 & fix(FilesCard): 修复预览图片原图、缩略图逻辑问题

🔗 相关 Issue

无

📝 变更类型

• 🚀 feat: 新增功能
• [✅] 🐛 fix: 修复缺陷
• 📚 docs: 文档更新
• 💄 style: 代码格式（不影响逻辑）
• ♻️ refactor: 代码重构
• ⚡ perf: 性能优化
• ✅ test: 测试相关
• 📦 build: 构建相关
• 👷 ci: CI 配置
• 🔧 chore: 其他修改
• ⏪ revert: 回退代码
• 💥 breaking: 破坏性变更

📋 变更说明

设置 hideUpload 后，默认上传按钮会隐藏，但拖拽文件到组件区域（或 dragTarget 指定区域）时，仍会出现「在此处拖放文件上传」遮罩，并可能触发 uploadDrop 事件。

在 FilesCard 组件中，当同时传入 thumbUrl（缩略图）和 url（原图）时，点击预览查看大图仍显示缩略图，无法看到原图。

🧪 测试计划

• 已添加单元测试
• 已添加集成测试
• [✅] 已手动测试

✅ Checklist

• 遵循项目的代码规范（commitlint）
• 已进行自我代码审查
• 代码已通过 lint 检查
• 已更新相关文档
• 变更不会产生新的警告
• 已添加必要的测试
• 所有测试通过

📦 Changeset

无

Changeset 类型

无

修改文档

hideUpload-drag-fix.md
thumbUrl-preview-fix.md

Summary by CodeRabbit

• Bug Fixes
  • Drag-and-drop upload behavior now correctly respects hidden upload settings, preventing unintended drop areas and upload actions from appearing.
  • Image previews now use the best available image source more reliably, improving preview consistency for uploaded files.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 679e213c-9db3-41d7-8881-e6cb141ce757

📥 Commits

Reviewing files that changed from the base of the PR and between c3e0177 and 487e771.

📒 Files selected for processing (2)

• packages/core/src/components/Attachments/index.vue
• packages/core/src/components/FilesCard/index.vue

---

📝 Walkthrough

Walkthrough

Attachments component now guards drag-and-drop event handlers, listener wiring, and drop-area rendering behind a hideUpload prop check, refactoring listener add/remove into helper functions. FilesCard computes a unified _displayImgUrl and _previewSrcList replacing _previewImgUrl for image preview logic across mask hover, template bindings, and slot visibility.

Changes

Attachments hideUpload support

Layer / File(s)	Summary
Drag event guards packages/core/src/components/Attachments/index.vue	targetDragEnter, targetDropLeave, and targetDrop early-return when hideUpload is true.
Listener lifecycle refactor packages/core/src/components/Attachments/index.vue	targetDragOver is guarded, listener add/remove is centralized into helper functions, onMounted calls addDragListeners, and a watcher on dragTarget/hideUpload rebinds listeners.
Drop area render condition packages/core/src/components/Attachments/index.vue	Teleported drop-area template only renders when hideUpload is false.

FilesCard preview URL refactor

Layer / File(s)	Summary
Display URL computed packages/core/src/components/FilesCard/index.vue	_displayImgUrl and _previewSrcList computeds replace _previewImgUrl, prioritizing thumbUrl then url then local preview.
Usage updates packages/core/src/components/FilesCard/index.vue	handlePreviewAction, el-image template bindings, and preview-actions slot visibility now use _displayImgUrl/_previewSrcList.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant AttachmentsComponent
  participant DOMTarget

  User->>AttachmentsComponent: drag enter/over/drop
  AttachmentsComponent->>AttachmentsComponent: check props.hideUpload
  alt hideUpload is true
    AttachmentsComponent-->AttachmentsComponent: early return, no style/emit
  else hideUpload is false
    AttachmentsComponent->>DOMTarget: preventDefault, toggle drag style
    AttachmentsComponent->>User: emit drop/upload event
  end

Loading

Poem

A rabbit hops through drag-and-drop,
Hides the upload when told to stop.
Thumbnails first, then url shown,
One clear preview URL, all its own.
🐇✨ hop, refactor, done!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes both main fixes: Attachments drag overlay behavior and FilesCard preview image selection.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/core/src/components/Attachments/index.vue

Parsing error: Unexpected token <

packages/core/src/components/FilesCard/index.vue

Parsing error: Unexpected token <

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}