feat: ✨ StatusTip缺省提示组件提供图片内容插槽(#538)

[jiaoxueyan]

✅ Closes: #538

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

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

🔗 相关 Issue

#538

💡 需求背景和解决方案

1. 提供image插槽用于自定义图片内容。

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

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

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

Summary by CodeRabbit

• 新功能
  • 更新了 wd-status-tip 组件，允许用户通过 image 插槽自定义图像内容。
  • 在 Index.vue 中新增了演示区块，展示如何使用插槽替换默认图像。
• 文档
  • 更新了 wd-status-tip 组件的文档，增加了关于 image 插槽的详细说明和示例。

[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 20, 2024 2:44am

[netlify]

✅ Deploy Preview for wot-design-uni ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9b47a44
🔍 Latest deploy log	https://app.netlify.com/sites/wot-design-uni/deploys/66ece150ea6dfe00085b44db
😎 Deploy Preview	https://deploy-preview-615--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]

Walkthrough

此次更改主要是对wd-status-tip组件的文档和实现进行更新，增加了一个名为image的插槽，允许用户自定义图像内容。文档中提供了如何使用该插槽的示例，展示了如何用wd-icon组件替代默认图像。此外，更新了Index.vue文件以演示插槽的用法，并在wd-status-tip.vue组件中实现了条件渲染逻辑，以支持插槽的优先级。

Changes

文件路径	更改摘要
docs/component/status-tip.md	更新文档，增加image插槽的描述和示例。
src/pages/statusTip/Index.vue	在Index.vue中增加演示块，展示自定义图像插槽的用法。
src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue	修改组件逻辑，增加插槽优先于imgUrl的条件渲染。

Assessment against linked issues

Objective	Addressed	Explanation
开发者可以自定义icon，比如使用iconfont等第三方的icon ( #538 )	✅
期望的API支持插槽使用 ( #538 )	✅

Possibly related PRs

• feat(drop-menu): 支持自定义图标以及覆盖默认点击事件 #479: 此PR涉及为下拉菜单添加可自定义图标和点击事件处理，概念上与本PR增强wd-status-tip组件以支持通过插槽自定义图像内容相似。

Poem

🐰 在草地上跳跃，心中欢喜，
新插槽来临，图像自如替，
自定义图标，灵活多变，
状态小提示，真是太美妙！
让开发者欢笑，代码如歌，
一起庆祝这变化，兔子乐呵呵！ 🎉

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between a7fc229 and 9b47a44.

Files selected for processing (3)

• docs/component/status-tip.md (2 hunks)
• src/pages/statusTip/Index.vue (1 hunks)
• src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue (1 hunks)

Additional context used

LanguageTool

docs/component/status-tip.md

[uncategorized] ~57-~57: “片”不能与“内容”搭配，可改为：""图篇"内容"
Context: ...s/panda.jpg" tip="查看我的头像" /> ## 自定义图片内容 使用插槽 `image` 可以自定义图片内容。 html <wd...

(wa5)

---

[uncategorized] ~59-~59: “片”不能与“内容”搭配，可改为：""图篇"内容"
Context: ..." /> ## 自定义图片内容 使用插槽 `image` 可以自定义图片内容。 html <wd-status-tip tip="自定义图片内容...

(wa5)

---

[uncategorized] ~90-~90: “片”不能与“内容”搭配，可改为：""图篇"内容"
Context: ...-------------- | -------- | | image | 图片内容 | $LOWEST_VERSION$ |...

(wa5)

Additional comments not posted (5)

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

45-52: 代码变更看起来不错！

新增的示例代码清晰地展示了如何使用插槽自定义图片内容，并通过使用 wd-icon 组件来演示插槽的灵活性。这项改进增强了 StatusTip 组件的可用性和适应性，使开发人员能够根据需要定义自己的图标。

以下是一些额外的建议：

1. 考虑添加更多的示例代码，展示如何使用其他类型的自定义内容，如图片或 SVG。
2. 确保在文档中详细说明新插槽的用法，并提供相关示例。
3. 如果可能的话，添加单元测试以覆盖新插槽的功能。

总的来说，这是一个很好的改进，可以提升组件的灵活性和可用性。干得漂亮！

src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue (2)

12-12: 看起来不错！

通过有条件地渲染 "image" 插槽，这个改动允许开发者自定义 StatusTip 组件中的图标。这增强了组件的灵活性，同时保留了原有的功能作为后备。代码逻辑和语法都没有明显的问题。

---

13-13: 保留了原有的图片渲染功能，很好！

通过使用 v-else-if 指令检查 "image" 插槽是否未定义且 imgUrl 存在，这段代码保留了使用 wd-img 组件显示图片的原有功能。这提供了一种后备机制，在未通过插槽提供自定义图标时，根据 imgUrl prop 显示图片。代码逻辑和语法都没有明显的问题。

docs/component/status-tip.md (2)

57-68: 很好的文档更新！

新增的"自定义图片内容"部分清晰地解释了如何使用新的 image 插槽来自定义图片内容。提供的示例代码很好地演示了在插槽中使用自定义组件（如 wd-icon）的灵活性。

Tools

LanguageTool

[uncategorized] ~57-~57: “片”不能与“内容”搭配，可改为：""图篇"内容"
Context: ...s/panda.jpg" tip="查看我的头像" /> ## 自定义图片内容 使用插槽 `image` 可以自定义图片内容。 html <wd...

(wa5)

---

[uncategorized] ~59-~59: “片”不能与“内容”搭配，可改为：""图篇"内容"
Context: ..." /> ## 自定义图片内容 使用插槽 `image` 可以自定义图片内容。 html <wd-status-tip tip="自定义图片内容...

(wa5)

---

85-90: 插槽文档很完善！

在专门的"Slot"部分中记录新的 image 插槽，遵循了现有的文档结构，对开发人员很有帮助。指定最低支持版本也是重要信息。

Tools

LanguageTool

[uncategorized] ~90-~90: “片”不能与“内容”搭配，可改为：""图篇"内容"
Context: ...-------------- | -------- | | image | 图片内容 | $LOWEST_VERSION$ |...

(wa5)

---

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>, please review it.
  -- 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  -- @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.