Skip to content

fix: popover 无法关闭的问题,删除无用代码和无用的样式变量 #3129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 23 commits into from
Apr 2, 2025

Conversation

xiaoyatong
Copy link
Collaborator

@xiaoyatong xiaoyatong commented Mar 27, 2025

🤔 这个变动的性质是?

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

🔗 相关 Issue

💡 需求背景和解决方案

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

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

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • fork仓库代码是否为最新避免文件冲突
  • Files changed 没有 package.json lock 等无关文件

Summary by CodeRabbit

  • New Features

    • Popover 组件的默认位置调整为顶部,内容区域现支持更灵活的布局扩展。
    • 更新了 Popover 组件的主题属性,支持暗黑模式。
  • Style

    • 调整和统一了组件的视觉样式与动画效果,优化了间距、图标对齐及整体外观。
    • 移除了与 Popover 组件相关的多个 CSS 变量,简化了样式定制选项。
    • 更新了 Popover 组件的 CSS 类名,以提高一致性。
  • Documentation

    • 更新了样式定制文档,精简了部分选项以更好地反映最新视觉设计。
    • 修改了 Popover 组件位置标识符的命名,以提升一致性和可读性。
    • 添加了关于位置属性类型变更的说明,确保用户了解新命名约定。

Copy link

coderabbitai bot commented Mar 27, 2025

Walkthrough

此次 PR 修改主要聚焦于 Popover 组件的样式和部分逻辑更新。变更包括:移除部分 CSS 自定义属性和相关变量以调整边框和 hover 状态样式;在部分 Demo 组件中添加 flex: 1 样式以改善自适应布局,以及将默认状态值从空字符串更新为 'top';文档中也相应删除了 CSS 变量说明;此外,对 Popover 组件的类名进行了重命名、更新了事件回调调用方式(使用可选链)以及对 Popup 动画状态类名和全局样式变量进行了调整。

Changes

文件路径 变更概要
src/packages/popover/demo.scss 移除 .custom-color 中的 CSS 自定义属性 --nutui-popover-border-color
src/packages/popover/demos/h5/demo3.tsx
src/packages/popover/demos/taro/demo3.tsx
Demo3 组件中 selfContentItem 样式对象新增 flex: 1 属性,改善布局。
src/packages/popover/demos/h5/demo4-1.tsx
src/packages/popover/demos/taro/demo4-1.tsx
curPostion 状态变量的默认值由 '' 更新为 'top',确定初始弹出位置。
src/packages/popover/doc.en-US.md
src/packages/popover/doc.md
src/packages/popover/doc.taro.md
src/packages/popover/doc.zh-TW.md
移除与 Popover 样式相关的 CSS 变量(如 hover 背景色、hover 文本色、边框颜色)。
src/packages/popover/popover.scss
src/packages/popover/popover.taro.tsx
src/packages/popover/popover.tsx
重命名 CSS 类(如 .nut-popover-menu-item.nut-popover-item 等),移除 popover.taro.tsxdefaultPropsclassName,并采用可选链简化事件回调调用。
src/packages/popup/popup.scss 更新动画状态的类名,将 &-default-enter-active&-default-exit-active&-default-exit-done 分别修改为 &-none-enter-active&-none-exit-active&-none-exit-done
src/styles/variables.scss 移除多个旧的 Popover 变量(边框色、hover 背景色、hover 文本色、菜单内边距、菜单宽度),新增 $popover-padding$popover-item-width 变量。

Sequence Diagram(s)

sequenceDiagram
    participant U as 用户
    participant P as Popover组件
    participant C as 回调函数
    U->>P: 点击 Popover 项目
    P->>P: 处理点击事件(内部状态更新)
    alt 回调函数存在
        P->>C: 使用可选链调用 onSelect/onClick/onClose
    else 无回调函数
        P-->>P: 无操作执行
    end
Loading

Possibly related PRs

Suggested reviewers

  • oasis-cloud

Poem

嗨,我是一只小兔子,跳跃在代码间,
看着样式焕然一新,心中充满欢颜。
边框与颜色的变动,让页面更灵动,
每一行代码跳跃着旋律,仿佛月夜醉人。
踏着斑斓的节拍,兔子我来庆贺更新🎉
快乐编程,快乐兔,愿代码永远春光无限!


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 285da6e and a7cdf6b.

📒 Files selected for processing (8)
  • src/config.json (1 hunks)
  • src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md (1 hunks)
  • src/sites/sites-react/doc/docs/react/migrate-from-v2.md (1 hunks)
  • src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md (1 hunks)
  • src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (1 hunks)
  • src/styles/variables-jmapp.scss (1 hunks)
  • src/styles/variables-jrkf.scss (1 hunks)
  • src/styles/variables.scss (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (8)
  • src/config.json
  • src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
  • src/styles/variables-jmapp.scss
  • src/styles/variables-jrkf.scss
  • src/sites/sites-react/doc/docs/react/migrate-from-v2.md
  • src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
  • src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
  • src/styles/variables.scss
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: test

🪧 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 generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai plan to trigger planning for file edits and PR creation.
  • @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.

@github-actions github-actions bot added action:review This PR needs more reviews (less than 2 approvals) 3.x Target branch 3.x labels Mar 27, 2025
@oasis-cloud
Copy link
Collaborator

image 叠起来了

@oasis-cloud oasis-cloud self-requested a review March 27, 2025 10:17
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (4)
src/packages/popover/doc.en-US.md (2)

41-42: 添加了关于类型变更的重要注释

添加了关于位置属性类型从 3.x 版本变更的提示,这对升级用户很重要。注意:此处缺少一个"the"词,应为"...in the types file"。

语法修正:

-> Attention, the type of location is changed from 3.x, take a look at the `FullPosition` type in types file .
+> Attention, the type of location is changed from 3.x, take a look at the `FullPosition` type in the types file.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~41-~41: You might be missing the article “the” here.
Context: ...ke a look at the FullPosition type in types file . ``` top # Top middle ...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)


43-43: 代码块缺少语言指定

Markdown 代码块应该指定语言以启用语法高亮。

-```
+```text
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

43-43: Fenced code blocks should have a language specified
null

(MD040, fenced-code-language)

src/packages/popover/doc.zh-TW.md (1)

43-56: 建议为代码块添加语言标识

代码块应该指定一个语言标识,以便启用适当的语法高亮。

-```
+```text
 top           # 頂部中間位置
 left          # 左側中間位置
 right         # 右側中間位置
 bottom        # 底部中間位置
 top-left      # 頂部左側位置
 top-right     # 頂部右側位置
 left-top      # 左側上方位置
 left-bottom   # 左側下方位置
 right-top     # 右側上方位置
 right-bottom  # 右側下方位置
 bottom-left   # 底部左側位置
 bottom-right  # 底部右側位置
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

43-43: Fenced code blocks should have a language specified
null

(MD040, fenced-code-language)

src/packages/popover/doc.md (1)

43-56: 建议为代码块添加语言标识

代码块应该指定一个语言标识,以便启用适当的语法高亮。

-```
+```text
 top           # 顶部中间位置
 left          # 左侧中间位置
 right         # 右侧中间位置
 bottom        # 底部中间位置
 top-left      # 顶部左侧位置
 top-right     # 顶部右侧位置
 left-top      # 左侧上方位置
 left-bottom   # 左侧下方位置
 right-top     # 右侧上方位置
 right-bottom  # 右侧下方位置
 bottom-left   # 底部左侧位置
 bottom-right  # 底部右侧位置
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

43-43: Fenced code blocks should have a language specified
null

(MD040, fenced-code-language)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eb8bb4a and ecac846.

📒 Files selected for processing (26)
  • src/packages/popover/demo.scss (0 hunks)
  • src/packages/popover/demo.taro.tsx (2 hunks)
  • src/packages/popover/demo.tsx (2 hunks)
  • src/packages/popover/demos/h5/demo1.tsx (2 hunks)
  • src/packages/popover/demos/h5/demo2.tsx (3 hunks)
  • src/packages/popover/demos/h5/demo3.tsx (2 hunks)
  • src/packages/popover/demos/h5/demo4-1.tsx (4 hunks)
  • src/packages/popover/demos/h5/demo4.tsx (3 hunks)
  • src/packages/popover/demos/h5/demo5.tsx (2 hunks)
  • src/packages/popover/demos/h5/demo6.tsx (0 hunks)
  • src/packages/popover/demos/h5/demo7.tsx (2 hunks)
  • src/packages/popover/demos/h5/demo8.tsx (2 hunks)
  • src/packages/popover/demos/taro/demo1.tsx (3 hunks)
  • src/packages/popover/demos/taro/demo2.tsx (2 hunks)
  • src/packages/popover/demos/taro/demo3.tsx (2 hunks)
  • src/packages/popover/demos/taro/demo4-1.tsx (4 hunks)
  • src/packages/popover/demos/taro/demo4.tsx (3 hunks)
  • src/packages/popover/demos/taro/demo5.tsx (2 hunks)
  • src/packages/popover/demos/taro/demo6.tsx (0 hunks)
  • src/packages/popover/doc.en-US.md (2 hunks)
  • src/packages/popover/doc.md (4 hunks)
  • src/packages/popover/doc.taro.md (3 hunks)
  • src/packages/popover/doc.zh-TW.md (3 hunks)
  • src/packages/popover/popover.scss (9 hunks)
  • src/packages/popover/popover.taro.tsx (7 hunks)
  • src/packages/popover/popover.tsx (9 hunks)
💤 Files with no reviewable changes (3)
  • src/packages/popover/demo.scss
  • src/packages/popover/demos/taro/demo6.tsx
  • src/packages/popover/demos/h5/demo6.tsx
🚧 Files skipped from review as they are similar to previous changes (8)
  • src/packages/popover/demos/h5/demo1.tsx
  • src/packages/popover/demos/h5/demo2.tsx
  • src/packages/popover/popover.taro.tsx
  • src/packages/popover/doc.taro.md
  • src/packages/popover/demos/taro/demo3.tsx
  • src/packages/popover/demos/taro/demo4-1.tsx
  • src/packages/popover/demos/h5/demo4.tsx
  • src/packages/popover/popover.tsx
🧰 Additional context used
🧬 Code Definitions (2)
src/packages/popover/demos/h5/demo7.tsx (2)
src/packages/popover/popover.taro.tsx (1)
  • Popover (46-333)
src/packages/popover/popover.tsx (1)
  • Popover (41-336)
src/packages/popover/demos/taro/demo2.tsx (2)
src/packages/popover/popover.taro.tsx (1)
  • Popover (46-333)
src/packages/popover/popover.tsx (1)
  • Popover (41-336)
🪛 LanguageTool
src/packages/popover/doc.en-US.md

[uncategorized] ~41-~41: You might be missing the article “the” here.
Context: ...ke a look at the FullPosition type in types file . ``` top # Top middle ...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)

🪛 markdownlint-cli2 (0.17.2)
src/packages/popover/doc.en-US.md

43-43: Fenced code blocks should have a language specified
null

(MD040, fenced-code-language)

src/packages/popover/doc.md

43-43: Fenced code blocks should have a language specified
null

(MD040, fenced-code-language)

src/packages/popover/doc.zh-TW.md

43-43: Fenced code blocks should have a language specified
null

(MD040, fenced-code-language)

⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: test
🔇 Additional comments (64)
src/packages/popover/popover.scss (9)

35-45: 类名重命名更加清晰直观

nut-popover-arrow-left-startnut-popover-arrow-left-end 重命名为 nut-popover-arrow-left-topnut-popover-arrow-left-bottom,使类名更加直观,与箭头的实际位置相符。


56-66: 保持一致的命名模式

将右侧箭头定位类也相应地从 -start-end 更新为 -top-bottom,与左侧箭头保持一致的命名模式。


80-82: 使用变量优化内边距

为内容组添加统一的内边距变量 $popover-padding,提高了样式的可维护性。


84-90: 简化类名结构

.nut-popover-menu-item 简化为 .nut-popover-item,并更新相应的宽度变量,使类名更加简洁清晰。


97-109: 统一图标样式定义

&-icon&-action-icon 的共用样式合并定义,并统一使用 $font-size-s 变量控制尺寸,提高了代码复用性和一致性。


112-114: 优化图标边距

为图标添加合理的边距间隔,左侧图标添加右边距 $spacing-xxs,右侧操作图标添加左边距 $spacing-base,改善了视觉布局。

Also applies to: 122-125


127-135: 保持命名一致性

.nut-popover-menu-disabled.nut-popover-menu-taroitem 重命名为 .nut-popover-item-disabled.nut-popover-taroitem,与上面的类名变更保持一致。


145-161: 位置类名更新

将定位类名从 -start-end 改为更直观的 -right-left,使命名与实际显示位置的关系更加清晰。

Also applies to: 170-184


186-200: 新增明确的位置类

为左侧和右侧位置变体添加了明确的定位类,使样式结构更加完整,定位更加精确。

src/packages/popover/demos/h5/demo8.tsx (3)

6-11: 简化列表内容

简化了列表项,只保留了一个必要的选项,并使用更真实的长文本内容进行展示,使示例更加清晰。


22-28: 更新组件属性

添加 theme="dark" 属性并将 location="top-start" 更新为 location="top-right",使组件属性与更新后的样式类名保持一致。


34-35: 简化按钮属性

移除了 Button 组件的 shape="square" 属性,简化了按钮配置。

src/packages/popover/demos/h5/demo5.tsx (4)

3-4: 简化图标导入

只导入必要的 Home 图标,移除了未使用的图标导入,优化了代码。


7-13: 精简图标列表

将图标列表简化为只包含 Home 图标的一个选项,减少了不必要的代码,使示例更加聚焦。


20-26: 更新 Popover 属性

使用 theme="dark" 替代原来的 className 方式,并更新 location 值为 "top-left",使属性名称与样式类名保持一致。


30-32: 简化按钮配置

移除了 Button 组件的 shape="square" 属性,使按钮样式更加简洁。

src/packages/popover/demos/taro/demo5.tsx (4)

3-4: 简化 Taro 图标导入

只导入必要的 Home 图标,与 H5 版本保持一致,优化了代码。


7-13: 精简 Taro 图标列表

同步 H5 版本的更改,简化图标列表,保持 Taro 和 H5 版本的一致性。


20-26: 更新 Taro Popover 属性

添加 theme="dark" 属性并更新 location 值,与 H5 版本保持一致的属性配置。


30-32: 简化 Taro 按钮配置

移除了按钮的 shape 属性,与 H5 版本的修改保持一致。

src/packages/popover/demos/h5/demo7.tsx (4)

9-9: 文本内容变得更具描述性

之前的"option1"名称更改为更具描述性的"主要文案内容主要文案内容",使示例更加清晰直观。


21-21: 样式值类型标准化

高度值从字符串'100px'更改为数字100,保持了代码风格的一致性。

Also applies to: 37-37


24-24: Popover属性更新

添加了theme="dark"主题并将location从"top-start"更改为"top-left",使得定位术语更加明确,同时为用户提供了暗色主题的视觉效果。

Also applies to: 27-27


33-33: Button属性简化

移除了shape="square"属性,仅保留type="primary",简化了按钮配置。

src/packages/popover/demo.taro.tsx (2)

19-19: 更新标题描述,包含颜色信息

将标题描述从"自定义内容"更新为"自定义内容+颜色"(以及对应的英文和繁体中文版本),更准确地反映了组件的功能。

Also applies to: 27-27, 35-35


50-50: 简化内容展示逻辑

移除了单独的contentcontentColor翻译字符串,直接使用translated.title2,简化了代码结构并减少了重复内容。

src/packages/popover/demos/h5/demo3.tsx (5)

6-7: 状态变量命名优化

将状态变量从customized更改为更直观的visible,并将selfContent数组重命名为list,提高了代码可读性和一致性。


24-38: 样式对象命名优化及布局改进

样式对象重命名更加简洁明了:

  • selfContentStylecontStyle(宽度从195px减少到155px)
  • selfContentItemitemStyle(添加了flex: 1以改善布局)
  • selfContentDescdescStyle(宽度从60px减少到50px)

这些变更提高了代码可读性并改善了弹出框内容的布局和响应式设计。


43-47: 使用CSS变量自定义颜色

添加了内联样式,使用CSS变量定制弹出框的文本颜色和背景色,增强了组件的可定制性。


48-51: Popover属性和位置更新

visible属性绑定到状态变量,并在点击事件中切换状态。将location从"top-start"更改为"right",使定位更加直观。


53-65: 内容渲染逻辑优化

按钮文本更新为包含"+颜色",并使用条件渲染基于visible状态显示内容,同时应用了新的样式变量名称。这提高了代码的一致性和可维护性。

src/packages/popover/demo.tsx (2)

19-19: 更新标题描述,包含颜色信息

将标题描述从"自定义内容"更新为"自定义内容+颜色"(以及对应的英文和繁体中文版本),更准确地反映了组件的功能。这与Taro版本的更改保持一致。

Also applies to: 29-29, 39-39


56-56: 简化内容展示逻辑

移除了单独的contentcontentColor翻译字符串,直接使用translated.title2,简化了代码结构并减少了重复内容。

src/packages/popover/demos/taro/demo2.tsx (6)

18-19: Icon 组件样式简化,提高了代码可维护性

将图标实例的颜色属性移除,使用默认颜色,简化了代码并使其更容易维护。这种做法符合一致性原则。

Also applies to: 21-21


32-32: 统一文案内容,提高了用户体验一致性

将选项名称统一更改为"主要文案内容",使示例更加一致和清晰。

Also applies to: 37-37


44-44: 使用 Space 组件优化布局

使用 Space 组件包装 Popover 组件,提供了更好的间距控制和布局管理。这是一个很好的改进。

Also applies to: 68-68


47-48: 更新了位置属性命名并添加了主题

将 location 从 "bottom-start" 更改为 "bottom-left",并添加了 theme="dark"。这与文档中描述的 API 变更保持一致。


54-54: 按钮标签更新,提高了语义化

按钮标签从"展示图标"更改为"图标选项",使标签更准确地描述按钮的功能。

Also applies to: 66-66


58-58: 为第二个 Popover 添加了暗色主题

为一致性考虑,在第二个 Popover 组件也添加了 theme="dark" 属性。

src/packages/popover/doc.en-US.md (2)

29-29: 更新了标题以反映扩展功能

将标题从"Custom Content"更改为"Custom Content and Color",更准确地反映了此部分的内容。


48-55: 更新了位置值命名约定

位置值从使用 -start/-end 后缀更改为更直观的 -left/-right/-top/-bottom 后缀,提高了可读性和一致性。

src/packages/popover/demos/taro/demo4.tsx (5)

8-8: 引入并使用 FullPosition 类型增强了类型安全性

添加了 FullPosition 类型导入,并将 curPostion 的类型从 string 更改为 FullPosition,同时初始值从空字符串更改为 'top'。这提高了类型安全性,并为状态提供了有效的初始值。

Also applies to: 15-15


20-21: 更新了位置选项以匹配新的命名约定

将 columns 数组中的位置值从 -start/-end 后缀更改为 -left/-right/-top/-bottom 后缀,与文档中描述的 API 变更保持一致。

Also applies to: 23-24, 26-27, 29-30


36-36: 统一了选项名称

将选项名称从 'option1' 更改为 '主要文案内容',与其他演示文件保持一致。


67-67: 更新了类型转换以使用 FullPosition 类型

将类型转换从简单的 string 更新为使用 FullPosition 类型,确保类型安全。


81-81: 添加了暗色主题

为 Popover 组件添加了 theme="dark" 属性,使其风格与其他演示一致。

src/packages/popover/demos/taro/demo1.tsx (5)

8-8: 添加索引状态以跟踪活动弹出框

添加了 index 状态变量来跟踪当前活动的弹出框,并在点击处理程序中设置相应的值。这允许在动作图标点击时有条件地关闭特定的弹出框,增强了用户体验。

Also applies to: 18-19, 32-32, 50-50


12-12: 更新了选项名称

将选项名称从 'option1' 更改为 '主要文案内容',保持了与其他演示文件的一致性。


29-29: 更新了位置属性

将 location 从 "bottom-start" 更改为 "bottom-left",与文档中描述的 API 变更保持一致。

Also applies to: 47-47


41-41: 简化了按钮属性

移除了按钮的 shape="square" 属性,使代码更简洁,同时保持功能不变。

Also applies to: 53-53


5-5:

❓ Verification inconclusive

组件重命名为 Demo

将组件从 Demo1 重命名为 Demo,并更新了默认导出。请确保所有引用此组件的地方都已更新。

Also applies to: 59-59


🏁 Script executed:

#!/bin/bash
# 检查是否有其他文件引用了 Demo1
rg "Demo1" --type tsx --type ts src/packages/popover

Length of output: 80


组件重命名核查
已将组件从 Demo1 重命名为 Demo 并更新了默认导出。请确保项目中所有引用原 Demo1 的位置也已同步更新。目前原始自动验证命令因未识别 tsx 文件类型而出错,建议手动验证或使用以下新命令进行确认:

rg "Demo1" -g "*.tsx" src/packages/popover
rg "Demo1" -g "*.ts" src/packages/popover

如果这两条命令均无输出,则说明所有引用均已更新。

src/packages/popover/doc.zh-TW.md (3)

29-29: 更新的章节标题能更好地反映内容

将章节标题从"自定義內容"更新为"自定義內容+顏色",更准确地表达了此部分同时包含自定义内容和颜色相关配置的内容。


41-42: 版本变更说明有助于用户理解

添加关于3.x版本变更的说明很有必要,帮助用户理解参考FullPosition类型的必要性。这种透明的文档更新可以减少用户在版本升级过程中的困惑。


48-55: 位置值命名更直观

更新后的位置值(如从top-starttop-left)命名更加直观,能够更清晰地表达位置关系,有助于开发者理解和使用该组件。

src/packages/popover/doc.md (4)

29-29: 标题更新反映内容的双重功能

将章节标题从"自定义内容"更新为"自定义内容+颜色",更好地表明该部分包含了自定义内容和颜色的功能,使文档结构更加清晰。


41-42: 版本更新说明提供了必要的上下文

添加关于3.x版本变更的说明,有助于开发者理解API变化,特别是位置属性从字符串变成了特定类型。这种明确的文档对于平滑升级很重要。

Also applies to: 68-68


48-55: 位置标识符更新为更直观的命名

将位置标识符从如top-start更新为top-left等,使命名更具描述性和直观性,有助于开发者理解每个位置选项的实际效果。


108-108: 类型更新增强了类型安全性

location属性的类型从string更新为FullPosition,增强了类型安全性,有助于开发者在编码时获得更好的类型检查和自动完成功能。

src/packages/popover/demos/h5/demo4-1.tsx (6)

8-8: 导入FullPosition类型增强类型安全

明确导入FullPosition类型,配合后续的类型注解,增强了代码的类型安全性。


12-12: 组件名称简化更符合规范

将组件名从Demo41改为Demo更加简洁明了,同时也符合单文件单组件的命名规范。

Also applies to: 98-98


16-16: 状态变量初始化更合理

使用useState<FullPosition>('top')替代原来的空字符串初始化,避免了默认情况下可能出现的未定义行为,同时增加了类型安全性。


21-31: 位置选项更新为新的命名约定

更新了columns数组中的位置值,使用更直观的命名约定(如top-left替代top-start),并添加了更多位置选项,使组件更加灵活。


75-75: 类型转换更准确

将类型转换从string更新为FullPosition,确保了类型的一致性和准确性,有助于避免运行时错误。


88-88: 使用主题属性替代类名

使用theme="dark"属性替代自定义类名来设置样式,符合组件的设计模式,使用更简洁明了。

Comment on lines +2 to +3
import { Popover, Button, Space } from '@nutui/nutui-react-taro'
import { Home, Check } from '@nutui/icons-react-taro'
Copy link

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

引入组件变更合理,但请检查移除的图标是否会影响其他功能

导入语句变更合理,添加了 Space 组件,删除了 Cart 和 Location 图标。确保这些图标在代码中其他地方没有被使用。


🏁 Script executed:

#!/bin/bash
# 检查是否在其他地方使用了 Cart 和 Location 图标
rg -l "Cart|Location" --type tsx src/packages/popover/demos

Length of output: 89


请检查移除的 Cart 和 Location 图标在 demos 下的 tsx 文件中是否有其它引用

  • 之前使用的 rg --type tsx 参数导致了错误,现在建议使用 -g '*.tsx' 参数重新搜索。
  • 执行上面新命令后,请确认输出为空,确保这些图标在其他地方未被引用,否则可能会影响其他功能。

🏁 Script executed:

#!/bin/bash
# 由于 ripgrep 不识别 "--type tsx",修改搜索命令以匹配 tsx 文件
rg -l "Cart|Location" -g '*.tsx' src/packages/popover/demos

Length of output: 143


请注意:在 demo3 文件中仍然引用了 Cart 和 Location 图标

  • src/packages/popover/demos/taro/demo3.tsxsrc/packages/popover/demos/h5/demo3.tsx 中检测到关于 Cart 或 Location 的引用。
  • 请核实这些文件中是否还需要使用这两个图标:
    • 如果不需要,请同步删除这些引用,确保所有相关 demo 文件保持一致。
    • 如果仍有使用需求,请补充缺失的图标导入,保证功能完整性。

@Ryan-CW-Code
Copy link
Contributor

赞,希望尽快合并,popover无法关闭确实无解

Copy link

codecov bot commented Apr 2, 2025

Codecov Report

Attention: Patch coverage is 85.29412% with 10 lines in your changes missing coverage. Please review.

Project coverage is 87.10%. Comparing base (f1acf0e) to head (a7cdf6b).
Report is 1 commits behind head on feat_v3.x.

Files with missing lines Patch % Lines
src/packages/popover/popover.tsx 85.29% 10 Missing ⚠️
Additional details and impacted files
@@              Coverage Diff              @@
##           feat_v3.x    #3129      +/-   ##
=============================================
- Coverage      87.12%   87.10%   -0.03%     
=============================================
  Files            280      280              
  Lines          18530    18530              
  Branches        2814     2815       +1     
=============================================
- Hits           16144    16140       -4     
- Misses          2381     2385       +4     
  Partials           5        5              

☔ 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.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (2)
src/utils/lru.ts (1)

1-36: 实现了一个简单高效的 LRU 缓存 - 良好的性能优化

这个 LRU 缓存实现非常优雅精简,利用 Map 数据结构的特性(保持插入顺序)来维护缓存项的访问顺序。代码结构清晰,功能完善,包含了必要的 get、set 和 has 方法。通过在获取元素时将其移至"最近使用"位置,并在容量满时删除"最久未用"的元素,有效实现了 LRU 策略。

这种实现对于优化频繁但重复的计算操作(如获取元素尺寸)非常有用,可以显著提高应用性能。

不过有两点小的建议:

  1. 考虑为泛型类型参数提供更具体的类型(而不是 any),以提高类型安全性:
-export default class MiniLru {
-  private cache: Map<any, any>
+export default class MiniLru<K = any, V = any> {
+  private cache: Map<K, V>

-  get(key: any): any | null {
+  get(key: K): V | null {

-  set(key: any, value: any): void {
+  set(key: K, value: V): void {

-  has(key: any): boolean {
+  has(key: K): boolean {
  1. 可以考虑为类添加更多实用方法,如 clear()delete(key)size(),以提供更完整的缓存管理功能。
src/utils/get-rect-by-taro.ts (1)

29-55: 建议在整个 getRectByTaro 函数中统一错误处理策略

当前实现在缓存命中时直接 resolve,但在查询执行时没有处理可能出现的错误情况。建议添加 catch 处理,以保持一致的错误处理策略。

export const getRectByTaro = async (
  element: any,
  harmonyId = ''
): Promise<Rect> => {
  if (element) {
    if (inBrowser) {
      return Promise.resolve(getRect(element))
    }
    // 小程序下的逻辑
    return new Promise((resolve, reject) => {
      if (lru.has(element)) {
        resolve(lru.get(element) as Rect)
        return
      }
      createSelectorQuery()
        .select(`#${harmonyId || element.uid}`)
        .boundingClientRect()
        .exec(([rects]) => {
          if (rects) {
            lru.set(element, rects)
          }
          resolve(rects)
        })
+       .catch((error) => {
+         console.error('Failed to get element rect:', error)
+         reject(error)
+       })
    })
  }
  return Promise.resolve(makeRect(0, 0))
}
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 14493ae and a7c611c.

📒 Files selected for processing (24)
  • packages/nutui-taro-demo/src/app.ts (1 hunks)
  • src/config.json (1 hunks)
  • src/hooks/use-taro-rect.ts (1 hunks)
  • src/packages/picker/picker.taro.tsx (0 hunks)
  • src/packages/popover/__tests__/popover.spec.tsx (5 hunks)
  • src/packages/popover/demo.taro.tsx (2 hunks)
  • src/packages/popover/demos/taro/demo1.tsx (3 hunks)
  • src/packages/popover/popover.scss (9 hunks)
  • src/packages/popover/popover.taro.tsx (8 hunks)
  • src/packages/tour/__test__/tour.spec.tsx (5 hunks)
  • src/packages/tour/demo.taro.tsx (3 hunks)
  • src/packages/tour/demos/h5/demo1.tsx (1 hunks)
  • src/packages/tour/demos/h5/demo2.tsx (1 hunks)
  • src/packages/tour/demos/h5/demo3.tsx (1 hunks)
  • src/packages/tour/demos/h5/demo4.tsx (1 hunks)
  • src/packages/tour/demos/h5/demo5.tsx (3 hunks)
  • src/packages/tour/demos/taro/demo1.tsx (1 hunks)
  • src/packages/tour/demos/taro/demo2.tsx (1 hunks)
  • src/packages/tour/demos/taro/demo3.tsx (1 hunks)
  • src/packages/tour/demos/taro/demo4.tsx (1 hunks)
  • src/packages/tour/demos/taro/demo5.tsx (3 hunks)
  • src/packages/tour/tour.taro.tsx (1 hunks)
  • src/utils/get-rect-by-taro.ts (2 hunks)
  • src/utils/lru.ts (1 hunks)
💤 Files with no reviewable changes (1)
  • src/packages/picker/picker.taro.tsx
✅ Files skipped from review due to trivial changes (8)
  • src/packages/tour/demos/h5/demo4.tsx
  • src/packages/tour/demos/taro/demo1.tsx
  • src/packages/tour/demos/taro/demo3.tsx
  • src/packages/tour/demos/h5/demo1.tsx
  • src/packages/tour/demos/taro/demo2.tsx
  • src/hooks/use-taro-rect.ts
  • packages/nutui-taro-demo/src/app.ts
  • src/packages/tour/demos/taro/demo4.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
  • src/packages/popover/demo.taro.tsx
  • src/packages/popover/popover.taro.tsx
  • src/packages/popover/tests/popover.spec.tsx
  • src/packages/popover/popover.scss
🧰 Additional context used
🧬 Code Definitions (2)
src/utils/get-rect-by-taro.ts (1)
src/utils/lru.ts (1)
  • MiniLru (1-36)
src/packages/popover/demos/taro/demo1.tsx (2)
src/packages/popover/popover.taro.tsx (1)
  • Popover (46-319)
src/packages/popover/popover.tsx (1)
  • Popover (41-336)
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: test
🔇 Additional comments (36)
src/config.json (1)

963-965: 更新 Popover 组件配置属性
此处将 Popover 组件的 "v15" 属性从原来的 10 调整为 1,同时将 "dd" 属性从 false 改为 true。这可能是为了解决 popover 无法关闭的问题。请确认此变更与组件内部用于控制关闭行为的逻辑保持一致,并检查相关文档和演示是否也进行了相应更新。此外,建议验证该配置变更对其他依赖此属性的组件是否有影响。

src/packages/popover/demos/taro/demo1.tsx (8)

5-8: 组件更名和状态管理优化

将组件从 Demo1 更名为 Demo,更符合命名规范。同时添加了 index 状态变量来跟踪当前选中的气泡卡片,这是一个很好的改进,使状态管理更加精确。


12-12: 更新文案内容

将选项名称从 'option1' 更改为 '主要文案内容',使示例更加清晰明了。


16-20: 修复气泡卡片无法关闭的问题

添加了基于 index 状态的条件逻辑,确保点击关闭图标时能正确关闭对应的气泡卡片。这解决了 PR 中提到的"popover 无法关闭"的问题。


29-33: 位置属性更新和状态跟踪

location 属性从 "bottom-start" 更改为 "bottom-left",使命名更语义化。同时添加了 setIndex(0) 来跟踪第一个气泡卡片被选中,配合关闭逻辑使用。


41-41: 简化按钮元素

移除了 shape="square" 属性,简化了按钮元素配置,使用默认形状。


47-51: 第二个气泡卡片的位置更新和状态跟踪

将第二个气泡卡片的 location 属性从 "bottom-start" 更改为 "right",使两个示例展示不同的弹出位置。添加 setIndex(1) 来跟踪第二个气泡卡片被选中。


53-53: 简化第二个按钮元素

与第一个按钮一样,移除了 shape="square" 属性,保持一致性。


59-59: 更新导出语句

将导出语句更新为导出 Demo 而非 Demo1,与组件名称变更保持一致。

src/packages/tour/demos/h5/demo3.tsx (1)

51-51: 位置属性命名更改为更直观的形式

location 属性从 "bottom-end" 更改为 "bottom-right",使命名更加直观和一致。这是一个很好的改进,提高了代码可读性。

src/packages/tour/demos/h5/demo2.tsx (1)

37-37: 位置属性值更新为更清晰的命名

location 属性从 "bottom-start" 更改为 "bottom-right",使定位更加直观。这个改变与组件其他示例保持一致,增强了代码的一致性。

src/packages/tour/demo.taro.tsx (2)

3-3: 导入组件变更

@tarojs/components 导入 View 组件替代原来的 ScrollView。这个变更移除了不必要的滚动功能。


34-47: 替换滚动视图为普通视图

ScrollView 组件替换为 View 组件,简化了组件结构。这可能与修复 popover 无法关闭的问题有关,因为滚动容器有时会导致 popover 定位和事件处理出现问题。

src/packages/tour/demos/taro/demo5.tsx (2)

15-15: 统一更新位置属性值

location 属性从 "top-start" 或 "top-end" 更改为更直观的 "top-left" 或 "top-right"。这种命名方式更符合直觉,使代码更易于理解和维护。

Also applies to: 20-20, 25-25, 30-30


53-53: Tour 组件位置属性更新

将 Tour 组件的 location 默认属性从 "top-start" 更改为 "top-left",与各步骤的位置设置保持一致。这种一致性有助于维护代码并避免不必要的混淆。

src/packages/tour/demos/h5/demo5.tsx (4)

5-5: 状态初始化改进

showTour 的初始状态从 true 改为 false 是很好的改进,这样能确保 Tour 组件默认不会自动显示,用户需要通过点击才能触发展示。


23-24: 位置属性命名规范化

location 属性从 top-end 更改为 top-right 使命名更加直观,符合新的位置命名规范。


28-29: 位置属性命名规范化

location 属性从 top-end 更改为 top-right 使命名更加直观,符合新的位置命名规范。


51-52: 位置属性命名规范化

location 属性从 top-start 更改为 top-left 使命名更加直观,符合新的位置命名规范,这样的修改提高了代码可读性和一致性。

src/packages/tour/tour.taro.tsx (3)

163-164: 增加动态 ID 标识

通过将静态 ID nut-tour-popid 修改为动态 ID nut-tour-popid${index},每个 mask 元素现在有了唯一的标识符。这解决了可能存在的 DOM 元素 ID 冲突问题,提高了组件的健壮性。


170-171: 优化 Popover 目标元素绑定

targetId 从静态值改为动态条件表达式 nut-tour-popid${index === active ? index : ''},确保 Popover 组件只会绑定到当前活动步骤的目标元素上。这有助于解决 popover 无法正确关闭的问题,因为现在每个 popover 都正确地关联到其对应的目标元素。


172-173: 调整默认偏移量

将默认偏移量从 [0, 12] 调整为 [0, 8],使 popover 的位置更加贴近目标元素,提升了视觉上的连贯性。

src/packages/tour/__test__/tour.spec.tsx (10)

34-35: 更新测试用例位置属性

添加 location: 'top-left' 属性,使测试用例与组件实现保持一致。这确保了测试覆盖了新的位置命名规范。


39-40: 更新测试用例位置属性

添加 location: 'top-left' 属性,使测试用例与组件实现保持一致。这确保了测试覆盖了新的位置命名规范。


44-45: 位置属性命名规范化

location: 'top-end' 更改为 location: 'top-right',使测试用例与新的位置命名规范保持一致。


49-50: 位置属性命名规范化

location: 'top-end' 更改为 location: 'top-right',使测试用例与新的位置命名规范保持一致。


57-58: 位置属性命名规范化

location="bottom-end" 更改为 location="bottom-right",使测试用例与新的位置命名规范保持一致。


60-63: 更新测试选择器

将 CSS 选择器从 .nut-popover-content-bottom-end 更新为 .nut-popover-content-bottom-right,确保测试断言与组件实现保持同步。


73-74: 位置属性命名规范化

location="bottom-end" 更改为 location="bottom-right",使测试用例与新的位置命名规范保持一致。


98-99: 位置属性命名规范化

location="bottom-end" 更改为 location="bottom-right",使测试用例与新的位置命名规范保持一致。


119-120: 位置属性命名规范化

location="bottom-end" 更改为 location="bottom-right",使测试用例与新的位置命名规范保持一致。


142-143: 位置属性命名规范化

location="bottom-end" 更改为 location="bottom-right",使测试用例与新的位置命名规范保持一致。

src/utils/get-rect-by-taro.ts (4)

2-2: 优雅地引入缓存机制 - 良好的性能优化

引入 MiniLru 缓存并实例化一个容量为 10 的缓存实例,这是一个不错的性能优化策略。

Also applies to: 5-5


39-42: 有效利用缓存提高性能

在执行选择器查询前检查缓存是否存在元素尺寸数据,如果存在则直接返回,避免了重复计算,这是一个很好的性能优化。


47-49: 缓存查询结果以供后续使用

在获取元素尺寸后将结果存入缓存,完成了缓存机制的闭环。检查 rects 是否存在的条件判断很重要,可以避免缓存无效数据。


29-55:

❓ Verification inconclusive

考虑使用 LRU 缓存的键

当前实现使用 element 对象作为缓存键。如果 element 是复杂对象,可能导致内存泄漏或难以预测的缓存行为。考虑使用更稳定的标识符(如 ID)作为缓存键。


🏁 Script executed:

#!/bin/bash
# 检查 element 对象在项目中的结构和用法

# 查找 element 参数在代码中的定义和使用
echo "### 查找 element 参数在代码中的定义"
rg -t ts -t tsx "getRectByTaro.*?\(" --context 2

Length of output: 137


下面是一个新的验证脚本,请运行下面的脚本以进一步确认 getRectByTaro 函数的定义以及 element 参数在项目里的具体使用情况,从而帮助评估是否需要使用更稳定的缓存键。

#!/bin/bash
echo "【步骤1】查找项目中有关 getRectByTaro 函数的定义及调用上下文:"
rg -g '*.ts' -g '*.tsx' "getRectByTaro" --context 3

echo "【步骤2】检查 src/utils/get-rect-by-taro.ts 文件中 element 参数的相关使用情况:"
rg -n "element" src/utils/get-rect-by-taro.ts

请运行该脚本后提供输出,以便我进一步确认并给出最终的修改建议。

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/packages/popover/popover.taro.tsx (1)

150-179: 使用新的状态变量名称更新了位置计算

更新了位置计算代码以使用新的状态变量名称(popWidth/popHeight),并使用pxTransform进行单位转换,使代码更加规范化。考虑添加对极端情况的处理,例如当目标元素非常接近视口边缘时的位置调整。

 const getPopoverPosition = () => {
   const styles: CSSProperties = {}
   if (!wrapperPosition) {
     styles.visibility = 'hidden'
     return styles
   }
   const { width, height, left, top, right } = wrapperPosition
   const direction = location.split('-')[0]
   const skew = location.split('-')[1]
   let cross = 0
   let parallel = 0
   if (Array.isArray(offset) && offset.length === 2) {
     const rtloffset = rtl ? -offset[0] : offset[0]
     cross += +offset[1]
     parallel += +rtloffset
   }
   if (width) {
     const dir = rtl ? 'right' : 'left'
     if (['bottom', 'top'].includes(direction)) {
       const h = direction === 'bottom' ? height + cross : -(popHeight + cross)
       styles.top = pxTransform(top + h)

       if (!skew) {
         styles[dir] = pxTransform(
           -(popWidth - width) / 2 + wrapperPosition[dir] + parallel
         )
       }
       if (skew === 'left') {
         styles.left = pxTransform(left + parallel)
       }
       if (skew === 'right') {
         styles.left = pxTransform(right + parallel)
       }
+      // 检查是否超出视口边界并调整位置
+      if (typeof window !== 'undefined') {
+        const viewportWidth = window.innerWidth
+        if (styles.left && parseInt(styles.left) < 10) {
+          styles.left = pxTransform(10)
+        } else if (styles.left && parseInt(styles.left) + popWidth > viewportWidth - 10) {
+          styles.left = pxTransform(viewportWidth - popWidth - 10)
+        }
+      }
     }
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 75449c2 and 28c07fd.

📒 Files selected for processing (1)
  • src/packages/popover/popover.taro.tsx (8 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/packages/popover/popover.taro.tsx (2)
src/types/spec/popover/base.ts (1)
  • WrapperPosition (14-20)
src/utils/get-rect-by-taro.ts (1)
  • getRectByTaro (29-55)
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: test
🔇 Additional comments (11)
src/packages/popover/popover.taro.tsx (11)

9-10: 导入更新提高了组件的可维护性

这些导入更新(nextTick, Text, WrapperPosition, pxTransform, useUuid)使组件功能更完整,特别是添加了nextTick来确保DOM更新后再进行位置计算,同时引入useUuid为组件提供唯一标识符,有利于避免ID冲突。

Also applies to: 16-18


72-74: 状态变量命名更加清晰

将状态变量从elWidth/elHeight重命名为popWidth/popHeight,同时更新rootPositionwrapperPosition,命名更加直观,反映了它们在组件中的实际用途。


82-83: 使用UUID生成器增强了组件实例隔离性

使用useUuid钩子为每个Popover实例生成唯一ID是一个很好的实践,确保了在同一页面上有多个Popover组件时不会发生ID冲突。


85-97: 位置计算函数重构提高了代码质量

函数从getContentWidth重命名为getWrapperPosition,逻辑更清晰,并且增加了RTL布局支持。使用nextTick确保DOM更新后再获取元素位置,避免了定位不准确的问题。


103-107: 使用nextTick优化了内容宽度计算

在获取popover内容宽度时使用nextTick,确保了在DOM渲染完成后再获取尺寸,提高了测量的准确性。


112-113: 使用可选链提高了回调安全性

clickAway函数中使用可选链调用onClickonClose回调,避免了在未提供回调函数时可能出现的错误,提高了代码的健壮性。


127-128: 箭头方向逻辑优化

简化了popover箭头方向的类名生成逻辑,通过location.split('-')[0]提取主方向,代码更加简洁清晰。


131-138: 位置计算函数重命名更符合实际功能

getRootPosition重命名为getPopoverPosition,并更新了相关状态变量引用,使函数名更准确地反映其功能。


183-183: 可见性条件优化

根据popWidth值控制组件可见性是一个巧妙的解决方案,确保了内容宽度计算完成前Popover不可见,避免了布局抖动。


272-274: 类名更新提高了一致性

将类名从nut-popover-menu-item更新为nut-popover-item,保持了组件内部类名的一致性,使样式结构更加清晰。同时,将内容文本包裹在Text组件中而不是View中,更符合语义化标签的使用原则。

Also applies to: 281-281, 283-286


238-238: 使用生成的UUID为DOM元素分配ID

将生成的UUID用作popover包装元素的ID,确保了在多个实例存在时,每个元素都有唯一的ID标识符,有助于避免潜在的DOM操作冲突。

Comment on lines +85 to 100
const getWrapperPosition = async () => {
nextTick(async () => {
const rect = targetId
? await getRectByTaro(document.querySelector(`#${targetId}`), targetId)
: await getRectByTaro(popoverRef.current, popoverId)
const { width, height, right, left, top } = rect
setWrapperPosition({
width,
height,
left: rtl ? right : left,
top,
right: rtl ? left : right,
})
.exec()
setTimeout(() => {
getPopoverContentW()
}, 300)
}

const getRectTaro = async (targetId: any): Promise<any> => {
return new Promise((resolve) => {
createSelectorQuery()
.select(`#${targetId}`)
.boundingClientRect()
.exec((res: any) => {
resolve(res[0])
})
})
}
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

异步函数缺少错误处理

getWrapperPositiongetPopoverContentW这两个异步函数中,没有对可能发生的错误进行处理。建议添加try/catch块来捕获异常,防止在获取元素位置失败时影响用户体验。

 const getWrapperPosition = async () => {
   nextTick(async () => {
+    try {
       const rect = targetId
         ? await getRectByTaro(document.querySelector(`#${targetId}`), targetId)
         : await getRectByTaro(popoverRef.current, popoverId)
       const { width, height, right, left, top } = rect
       setWrapperPosition({
         width,
         height,
         left: rtl ? right : left,
         top,
         right: rtl ? left : right,
       })
       getPopoverContentW()
+    } catch (error) {
+      console.error('Failed to get wrapper position:', error)
+    }
   })
 }

 const getPopoverContentW = async () => {
   nextTick(async () => {
+    try {
       const rectContent = await getRectByTaro(popoverContentRef.current)
       setPopWidth(rectContent.width)
       setPopHeight(rectContent.height)
+    } catch (error) {
+      console.error('Failed to get popover content dimensions:', error)
+    }
   })
 }

Also applies to: 103-107

Copy link
Collaborator

@oasis-cloud oasis-cloud left a comment

Choose a reason for hiding this comment

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

升级文档需要更新一份

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (3)
src/packages/popover/doc.taro.md (1)

43-43: 代码块缺少语言标识

代码块应该指定语言以启用适当的语法高亮。

-```
+```shell
 top           # 顶部中间位置
 left          # 左侧中间位置
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

43-43: Fenced code blocks should have a language specified
null

(MD040, fenced-code-language)

src/packages/popover/doc.en-US.md (1)

41-41: 添加类型变更说明,但语法需要修正

为用户添加了关于3.x版本中location属性类型变更的重要提示,但句子结尾处缺少语法准确性。

-> Attention, the type of location is changed from 3.x, take a look at the `FullPosition` type in types file .
+> Attention, the type of location is changed from 3.x, take a look at the `FullPosition` type in the types file.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~41-~41: You might be missing the article “the” here.
Context: ...ke a look at the FullPosition type in types file . ``` top # Top middle ...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)

src/packages/popover/doc.md (1)

43-43: 代码块缺少语言标识

代码块应该指定语言以启用适当的语法高亮。

-```
+```shell
 top           # 顶部中间位置
 left          # 左侧中间位置
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

43-43: Fenced code blocks should have a language specified
null

(MD040, fenced-code-language)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 28c07fd and 285da6e.

📒 Files selected for processing (13)
  • src/packages/popover/doc.en-US.md (3 hunks)
  • src/packages/popover/doc.md (5 hunks)
  • src/packages/popover/doc.taro.md (4 hunks)
  • src/packages/popover/doc.zh-TW.md (4 hunks)
  • src/packages/tour/__test__/tour.spec.tsx (5 hunks)
  • src/packages/tour/demos/h5/demo2.tsx (1 hunks)
  • src/packages/tour/demos/h5/demo3.tsx (1 hunks)
  • src/packages/tour/demos/taro/demo2.tsx (1 hunks)
  • src/packages/tour/demos/taro/demo3.tsx (1 hunks)
  • src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md (1 hunks)
  • src/sites/sites-react/doc/docs/react/migrate-from-v2.md (1 hunks)
  • src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md (1 hunks)
  • src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
  • src/packages/tour/demos/taro/demo3.tsx
  • src/packages/tour/demos/taro/demo2.tsx
  • src/packages/tour/demos/h5/demo2.tsx
  • src/packages/tour/demos/h5/demo3.tsx
  • src/packages/popover/doc.zh-TW.md
🧰 Additional context used
🪛 LanguageTool
src/packages/popover/doc.en-US.md

[uncategorized] ~41-~41: You might be missing the article “the” here.
Context: ...ke a look at the FullPosition type in types file . ``` top # Top middle ...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)

🪛 markdownlint-cli2 (0.17.2)
src/packages/popover/doc.taro.md

43-43: Fenced code blocks should have a language specified
null

(MD040, fenced-code-language)

src/packages/popover/doc.md

43-43: Fenced code blocks should have a language specified
null

(MD040, fenced-code-language)

⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: test
🔇 Additional comments (20)
src/packages/popover/doc.taro.md (5)

29-29: 标题更新更加清晰

将标题从"自定义内容"更新为"自定义内容+颜色"更好地反映了该部分内容的实际功能和示例。


41-42: 添加了版本变更说明

为用户添加了关于3.x版本中location属性类型变化的重要提示,指引用户参考FullPosition类型,这有助于用户适应新的API变化。


48-55: 位置命名约定更新

将位置值从 *-start/*-end 格式更改为更直观的 *-left/*-right 格式,这种命名更符合直觉,有助于提高开发者体验。


66-66: 简化了描述并添加了注释

简化了位置自定义描述,并添加了关于版本变更的重要提示,使文档更加清晰。

Also applies to: 68-68


142-143: CSS变量名称更新

变量名称从 --nutui-popover-menu-item-padding--nutui-popover-menu-item-width 更改为 --nutui-popover-padding--nutui-popover-item-width,简化了命名并保持了一致性。

src/packages/popover/doc.en-US.md (3)

29-29: 标题更新更加全面

将标题从"Custom Content"更新为"Custom Content and Color",更好地描述了该部分内容的实际功能。


48-55: 位置名称标准化

将位置值从 *-start/*-end 格式更改为更直观的 *-left/*-right 格式,提高了API的一致性和可用性。


147-148: CSS变量名称规范化

变量名称从特定组件前缀(menu-item)更改为更通用的名称(paddingitem-width),使命名更简洁。

src/packages/tour/__test__/tour.spec.tsx (2)

34-34: 更新测试用例中的位置值与组件API变更保持一致

将测试步骤中的位置值从旧的命名规则(如top-end)更新为新的命名规则(如top-right),并添加了新的测试位置top-left,确保测试用例与组件API变更保持一致。

Also applies to: 39-40, 44-45, 49-50


57-58: 更新Tour组件的位置属性和选择器

Tour组件中的location属性从bottom-end更新为bottom-right,并相应地更新了CSS选择器,使测试与组件API变更保持一致。

Also applies to: 61-62, 73-74, 97-98, 117-118, 139-140

src/packages/popover/doc.md (6)

29-29: 标题更新更加清晰

将标题从"自定义内容"更新为"自定义内容+颜色"更好地反映了该部分内容的范围。


41-42: 添加了版本变更说明

为用户添加了关于3.x版本中location属性类型变化的重要提示,指引用户参考FullPosition类型,有助于用户适应API变化。


48-55: 位置命名约定更新

将位置值从 *-start/*-end 格式更改为更直观的 *-left/*-right 格式,使命名更符合直觉和一致性。


66-66: 简化描述并添加提示

简化了位置自定义的描述,并添加了关于版本变更的重要提示,使文档更加清晰和用户友好。

Also applies to: 68-69


108-108: 更新API类型声明

location属性的类型从string更新为更具体的FullPosition类型,提高了类型安全性和API文档的准确性。


151-152: CSS变量名称规范化

变量名称从--nutui-popover-menu-item-padding--nutui-popover-menu-item-width更改为更简洁的--nutui-popover-padding--nutui-popover-item-width,保持命名一致性。

src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (1)

277-283: 更新 Popover 部分的文档说明
在该部分中,文档对 Popover 组件的样式变量和类型进行了更新,主要包括:

  • 删除废弃的样式变量:--nutui-popover-hover-background-color--nutui-popover-hover-text-color--nutui-popover-border-color
  • 将样式变量 --nutui-popover-menu-item-padding 重命名为 --nutui-popover-padding,以及将 --nutui-popover-menu-item-width 重命名为 --nutui-popover-item-width
  • 修改 location 数据类型,更新为统一的 FullPosition 类型

建议检查这些文档更新与代码库中相关的变更是否保持一致,确保示例和说明的准确性。

src/sites/sites-react/doc/docs/react/migrate-from-v2.md (1)

275-278: 更新 React 版迁移文档中的 Popover 说明
此处新增 Popover 部分,删除了文档中的废弃变量并更新了样式变量名称,同时将 location 的类型调整为 FullPosition。文档说明逻辑清晰,建议检查与其他版本文档(例如 Taro 版)的一致性。

src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md (1)

264-269: Update to Popover Component Documentation (英文版)
该部分英文文档更新了 Popover 组件的说明:删除了废弃的样式变量、对样式变量进行了重命名(例如将 --nutui-popover-menu-item-padding 更改为 --nutui-popover-padding),同时将 location 的类型修订为了 FullPosition。建议进一步核对此部分描述与代码库内其他文档的统一性。

src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md (1)

263-266: Update to Taro Migration Documentation for Popover (英文版)
在该文档中,Popover 组件的更新内容已明确列出,内容包括:

  • 废弃已有的 CSS 变量
  • 更新样式变量名称(如 --nutui-popover-menu-item-padding 改为 --nutui-popover-padding 等)
  • 修正 location 属性类型,更新为 FullPosition

建议确认此更改与其它平台(React/Taro)的文档描述保持一致。

@xiaoyatong xiaoyatong requested review from irisSong and Miles-hxy April 2, 2025 09:22
Copy link
Collaborator

@irisSong irisSong left a comment

Choose a reason for hiding this comment

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

1、taro版本 点击按钮展示气泡,再点击相邻按钮第二个气泡未弹出,需要再次点击

@oasis-cloud oasis-cloud merged commit 706dae6 into jdf2e:feat_v3.x Apr 2, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3.x Target branch 3.x action:review This PR needs more reviews (less than 2 approvals) size/XXL
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants