Skip to content

fix: 🐛 修复NumberKeyboard组件使用 title 插槽未传入关闭文本时不展示头部的问题 - #1060

Merged
Moonofweisheng merged 1 commit into
masterfrom
fix/number-keyboard-showheader-error
May 18, 2025
Merged

Moonofweisheng merged 1 commit into
masterfrom
fix/number-keyboard-showheader-error

Conversation

@Moonofweisheng

@Moonofweisheng Moonofweisheng commented May 18, 2025

Copy link
Copy Markdown
Owner

Closes: #760

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

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

🔗 相关 Issue

#760

💡 需求背景和解决方案

修复NumberKeyboard组件使用 title 插槽未传入关闭文本时不展示头部的问题

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

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

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

Summary by CodeRabbit

  • 文档

    • 在数字键盘组件文档中新增了显著的弃用警告,提示该功能已迁移至 KeyBoard 组件,并建议尽快迁移,1.10 版本起将不再维护。
  • 新特性

    • 数字键盘和键盘组件的头部渲染逻辑优化:现在仅在存在标题或关闭按钮时显示头部,标题内容仅在实际提供时显示,提升了组件的灵活性和一致性。

@netlify

netlify Bot commented May 18, 2025

Copy link
Copy Markdown

Deploy Preview for wot-design-uni ready!

Name Link
🔨 Latest commit 8e1100c
🔍 Latest deploy log https://app.netlify.com/projects/wot-design-uni/deploys/6829db5266ccd60008c93730
😎 Deploy Preview https://deploy-preview-1060--wot-design-uni.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@coderabbitai

coderabbitai Bot commented May 18, 2025

Copy link
Copy Markdown

Walkthrough

本次变更主要优化了虚拟数字键盘及通用键盘组件的头部渲染逻辑,修复了仅使用 title 插槽时内容不显示的问题,并在文档中新增了关于组件迁移和废弃的警告提示。涉及的变更均为逻辑和文档调整,无新增 API。

Changes

文件/路径 变更摘要
docs/component/number-keyboard.md
docs/en-US/component/number-keyboard.md
文档开头新增废弃警告,提示功能已迁移到 KeyBoard 组件。
src/uni_modules/wot-design-uni/components/wd-keyboard/wd-keyboard.vue
src/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue
优化头部(header)与标题(title)插槽渲染逻辑,修复仅用 title 插槽时不显示的问题,增加对插槽检测。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant NumberKeyboard
    participant Slots

    User->>NumberKeyboard: 传入 title 属性或 title 插槽
    NumberKeyboard->>Slots: 检查 title 插槽是否存在
    alt 存在 title 属性或 title 插槽
        NumberKeyboard->>User: 渲染 header 并显示 title 内容
    else 存在 close 按钮
        NumberKeyboard->>User: 渲染 header 并显示关闭按钮
    else
        NumberKeyboard->>User: 不渲染 header
    end
Loading

Assessment against linked issues

Objective Addressed Explanation
修复仅使用 title 插槽不设置 closeText 时 title 插槽内容不显示的问题(#760
新增 radius 属性(#760 代码中未见 radius 属性相关实现
新增 header 插槽(#760 代码中未见 header 插槽相关实现
文档补充组件迁移和废弃说明(#760

Poem

小兔子敲敲键盘头,
插槽标题终于能露头。
文档提示快迁移,
旧键盘即将 say goodbye。
代码清晰逻辑新,
🐰欢快跳跃庆更新!

Note

⚡️ AI Code Reviews for VS Code, Cursor, Windsurf

CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
Learn more here.


Note

⚡️ Faster reviews with caching

CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.
Enjoy the performance boost—your workflow just got faster.


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between f1ad2fa and 8e1100c.

📒 Files selected for processing (4)
  • docs/component/number-keyboard.md (1 hunks)
  • docs/en-US/component/number-keyboard.md (1 hunks)
  • src/uni_modules/wot-design-uni/components/wd-keyboard/wd-keyboard.vue (4 hunks)
  • src/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue (3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: Test Components (wd-number-keyboard)
  • GitHub Check: Test Components (wd-keyboard)
  • GitHub Check: Cloudflare Pages
🔇 Additional comments (12)
docs/component/number-keyboard.md (1)

5-7: 明确标记组件即将废弃的警告信息,引导用户迁移

添加了清晰的警告提示,告知用户虚拟数字键盘功能已迁移至 KeyBoard 组件,并明确了 NumberKeyboard 组件将在 1.10 版本废弃。这种前瞻性的提示有助于用户及时进行代码迁移,减少后续升级时的兼容性问题。

docs/en-US/component/number-keyboard.md (1)

5-7: 清晰标记组件废弃信息,保持多语言文档一致性

英文文档添加了与中文文档相匹配的警告提示,保持了文档的国际化一致性。及时告知英语用户 NumberKeyboard 组件将在 1.10 版本废弃,引导用户迁移至 KeyBoard 组件,体现了良好的国际化维护实践。

src/uni_modules/wot-design-uni/components/wd-keyboard/wd-keyboard.vue (5)

13-14: 优化了头部渲染逻辑,提高组件灵活性

修改了头部显示的条件判断,使用 showHeader 计算属性控制整个头部区域的显示,使用 showTitle 计算属性控制标题插槽的显示。这种分离关注点的方式,使得头部区域的渲染逻辑更加清晰和灵活。


54-54: 添加 useSlots API 以支持插槽检测

引入 Vue 的 useSlots 函数,为组件提供了检测插槽是否存在的能力,这是后续优化标题插槽检测逻辑的基础。


63-63: 使用 useSlots 获取插槽信息

通过 useSlots() 获取组件的插槽信息,为后续计算属性中检测 title 插槽是否被使用提供了必要的数据。


80-82: 改进 showTitle 计算逻辑,支持插槽检测

优化了 showTitle 计算属性,不仅检查 title 属性是否存在,还检查 title 插槽是否被使用。这样即使没有设置 title 属性但提供了 title 插槽内容时,标题区域也能正确显示。


84-86: 新增 showHeader 计算属性,统一控制头部显示逻辑

添加了 showHeader 计算属性,用于统一控制整个头部区域的显示条件,当需要显示标题或关闭按钮时显示头部区域。这种抽象使得模板代码更加清晰,也更符合关注点分离的原则。

src/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue (5)

13-14: 修复了标题插槽问题,优化头部渲染逻辑

修改了头部区域的条件渲染逻辑,使用 showHeader 计算属性控制整个头部区域的显示,使用 showTitle 计算属性控制标题插槽的显示。这一修改解决了 PR 中提到的"使用 title 插槽未传入关闭文本时不展示头部"的问题。


46-46: 引入 useSlots API 支持插槽检测

引入 Vue 的 useSlots 函数,为组件提供了检测插槽是否存在的能力,这是实现标题插槽功能改进的关键依赖。


53-53: 使用 useSlots 获取插槽信息

通过 useSlots() 获取组件的插槽信息,使得组件能够检测 title 插槽是否被使用,为修复问题奠定基础。


69-70: 优化 showTitle 计算逻辑,正确检测插槽

改进了 showTitle 计算属性的实现,同时检查 title 属性和 title 插槽是否存在。这一修改确保了即使没有设置 title 属性但提供了 title 插槽内容时,标题区域仍能正确显示,直接解决了 PR 描述中提到的问题。


72-74: 新增 showHeader 计算属性,统一头部显示控制

添加了 showHeader 计算属性来统一控制整个头部区域的显示逻辑,当需要显示标题或关闭按钮时才显示头部。这种设计使得头部区域的渲染逻辑更加清晰,也更符合组件设计的最佳实践。


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
🪧 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.
    • Explain this complex logic.
    • 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 explain this code block.
    • @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 explain its main purpose.
    • @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this 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

vercel Bot commented May 18, 2025

Copy link
Copy Markdown

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 May 18, 2025 1:06pm

@petercat-assistant

Copy link
Copy Markdown

概要

此PR修复了在NumberKeyboard组件中使用title插槽时未传入关闭文本导致不展示头部的问题。通过引入showHeader计算属性,确保在有标题或关闭按钮时显示头部。

变更

文件 概要
docs/component/number-keyboard.md, docs/en-US/component/number-keyboard.md 添加了关于虚拟数字键盘功能迁移至KeyBoard组件的警告信息。
src/uni_modules/wot-design-uni/components/wd-keyboard/wd-keyboard.vue, src/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue 修改了头部显示逻辑,使用showHeader计算属性来决定是否显示头部。

return !!props.title || !!slots.title
})

const showHeader = computed(() => {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

确保showHeader计算属性在所有可能的情况下正确计算头部显示逻辑,以避免在某些情况下头部不显示的问题。

return !!props.title || !!slots.title
})

const showHeader = computed(() => {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

确保showHeader计算属性在所有可能的情况下正确计算头部显示逻辑,以避免在某些情况下头部不显示的问题。

@codecov-commenter

Copy link
Copy Markdown

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 89.92%. Comparing base (0d7ed81) to head (8e1100c).
Report is 5 commits behind head on master.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@             Coverage Diff             @@
##           master    #1060       +/-   ##
===========================================
+ Coverage   73.62%   89.92%   +16.30%     
===========================================
  Files           3       19       +16     
  Lines         254      844      +590     
  Branches       41      126       +85     
===========================================
+ Hits          187      759      +572     
- Misses         67       85       +18     
Flag Coverage Δ
h5 89.92% <100.00%> (+16.30%) ⬆️
wd-keyboard 89.76% <100.00%> (?)
wd-number-keyboard 84.79% <100.00%> (?)
wd-slider ?

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions

Copy link
Copy Markdown

组件测试摘要 (H5 平台)

测试时间: Sun May 18 13:08:24 UTC 2025

测试结果

组件 状态 覆盖率
wd-keyboard ✅ 通过 89.61%
wd-number-keyboard ✅ 通过 84.61%

@Moonofweisheng
Moonofweisheng merged commit 875e072 into master May 18, 2025
@Moonofweisheng
Moonofweisheng deleted the fix/number-keyboard-showheader-error branch May 18, 2025 14:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants