fix: upload组件beforePreview新增file参数, 方便用户在预览前根据文件信息判断

[chenzeqin]

🤔 这个 PR 的性质是？(至少选择一个)

• 日常 bug 修复
• 新特性提交
• 站点、文档改进
• 演示代码改进
• 组件样式/交互改进
• TypeScript 定义更新
• CI/CD 改进
• 包体积优化
• 性能优化
• 功能增强
• 国际化改进
• 代码重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他改动（是关于什么的改动？）

🔗 相关 Issue

文档示例代码也写了file属性, 实际上没有这个属性

💡 需求背景和解决方案

需要根据文件信息处理预览逻辑, beforePreview新增file参数

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充

Summary by CodeRabbit

• 新功能

  • 在上传组件的预览功能中新增了 file 参数，增强了对文件预览的控制和信息获取。
  • 更新了 beforePreview 函数，允许开发者在预览过程中访问特定文件的信息。

• 文档

  • 更新了上传组件的文档，以反映 before-preview 函数参数的变化，确保信息一致性。

• 样式

  • 修复了 wd-loadmore 组件中错误信息文本的格式问题。

[coderabbitai]

Walkthrough

此次更改主要集中在上传组件的文档和实现中，新增了一个名为 file 的参数到 before-preview 函数。这一变化使得开发者在预览过程中能够获取更多关于正在处理文件的信息。此外，相关组件的类型定义和函数调用也进行了相应的调整，以支持这一新参数。

Changes

文件路径	更改摘要
docs/component/upload.md	更新 before-preview 函数的参数列表，新增 file 参数，并更新文档中的钩子表格以反映此更改。
src/pages/upload/Index.vue	修改 beforePreview 函数的签名，新增 file 参数以增强函数的能力。
src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue	修复 <text> 元素关闭标签的格式问题，删除多余空格，未影响功能。
src/uni_modules/wot-design-uni/components/wd-upload/types.ts	在 UploadBeforePreviewOption 类型中新增 file 属性，类型为 UploadFileItem。
src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue	在多个预览处理函数中新增 file 参数，以便在调用 beforePreview 回调时传递文件信息。

Possibly related PRs

• #481 feat: upload组件增强：手动上传，双向绑定file-list，自定义上传函数 #483: 此PR通过引入新的 file 参数增强了上传组件，与主PR中对 beforePreview 函数的更改直接相关。
• 修复wd-upload 在小程序中关闭图片偏移的情况 #576: 此PR修改了文档中的 handleChange 函数，以标准化参数命名为 fileList，与主PR中更新的 before-preview 钩子文档保持一致。

🐰 兔子欢快跳跃，
文件预览更精彩，
新参数助力飞跃，
开发者乐开怀。
代码更新真奇妙，
让我们一起欢呼吧！ 🎉

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wot-design-uni	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2024 1:05pm

[netlify]

✅ Deploy Preview for wot-design-uni ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	c92c275
🔍 Latest deploy log	https://app.netlify.com/sites/wot-design-uni/deploys/66e2e6b34804960008df9277
😎 Deploy Preview	https://deploy-preview-598--wot-design-uni.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[coderabbitai]

Actionable comments posted: 0

Outside diff range and nitpick comments (1)

src/pages/upload/Index.vue (1)

Line range hint 129-138: 修改看起来不错,但是建议充分利用file参数或者移除它。

beforePreview函数的修改与PR的目标一致,为用户在预览阶段根据文件信息做出决策提供了可能。函数的逻辑是正确的,实现也是准确的。

然而,新添加的file参数在函数体内并没有被使用。如果这个参数是为了支持未来的功能增强而添加的,那么建议在函数体内适当地利用它。如果目前不需要这个参数,那么建议移除它,保持函数签名的简洁。这样还可以为将来真正需要使用file参数时,再引入它,从而使代码的演进更加清晰。

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between cae2e56 and c92c275.

Files selected for processing (5)

• docs/component/upload.md (2 hunks)
• src/pages/upload/Index.vue (1 hunks)
• src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue (1 hunks)
• src/uni_modules/wot-design-uni/components/wd-upload/types.ts (1 hunks)
• src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue (4 hunks)

Files skipped from review due to trivial changes (1)

• src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue

Additional comments not posted (7)

src/uni_modules/wot-design-uni/components/wd-upload/types.ts (1)

67-67: LGTM！

添加 file 属性到 UploadBeforePreviewOption 类型，允许在预览前访问文件信息，这与 PR 的目标一致。类型定义正确，变更集中且不引入任何破坏性变更或类型不一致。

src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue (4)

567-568: 代码修改看起来不错！

在 beforePreview 回调中添加 file 参数是一个很好的改进。它提供了有关正在预览的特定文件的更多上下文信息，这对于在实际预览之前根据文件的属性执行额外的操作或检查非常有用。

---

624-625: 代码修改看起来不错！

与之前的函数类似，在 onPreviewImage 的 beforePreview 回调中添加 file 参数是一个很好的改进。它允许在实际预览之前根据正在预览的特定文件执行额外的操作或检查。

---

649-650: 代码修改看起来不错！

在 onPreviewVideo 的 beforePreview 回调中添加 file 参数与对图像预览函数所做的更改是一致的。它提供了有关正在预览的特定视频文件的更多上下文信息，这对于在实际预览之前执行额外的操作或检查非常有用。

---

669-670: 代码修改看起来不错！

在 onPreviewFile 的 beforePreview 回调中添加 file 参数遵循与对图像和视频预览函数所做更改相同的模式。它提供了有关正在预览的特定文件的更多上下文信息，这对于在实际预览之前执行额外的操作或检查非常有用。

docs/component/upload.md (2)

102-102: 文档更新正确！

新增的file参数的描述准确，能够帮助用户更好地理解before-preview函数的使用。

---

591-591: 属性表格更新正确！

before-preview行更新后的参数列表与代码示例和说明保持一致，文档内容前后呼应。