-
Notifications
You must be signed in to change notification settings - Fork 280
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
Conversation
Walkthrough此次 PR 修改主要聚焦于 Popover 组件的样式和部分逻辑更新。变更包括:移除部分 CSS 自定义属性和相关变量以调整边框和 hover 状态样式;在部分 Demo 组件中添加 Changes
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
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (8)
🚧 Files skipped from review as they are similar to previous changes (8)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this 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 theFullPosition
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
📒 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-start
和nut-popover-arrow-left-end
重命名为nut-popover-arrow-left-top
和nut-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
: 简化内容展示逻辑移除了单独的
content
和contentColor
翻译字符串,直接使用translated.title2
,简化了代码结构并减少了重复内容。src/packages/popover/demos/h5/demo3.tsx (5)
6-7
: 状态变量命名优化将状态变量从
customized
更改为更直观的visible
,并将selfContent
数组重命名为list
,提高了代码可读性和一致性。
24-38
: 样式对象命名优化及布局改进样式对象重命名更加简洁明了:
selfContentStyle
→contStyle
(宽度从195px减少到155px)selfContentItem
→itemStyle
(添加了flex: 1
以改善布局)selfContentDesc
→descStyle
(宽度从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
: 简化内容展示逻辑移除了单独的
content
和contentColor
翻译字符串,直接使用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/popoverLength 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-start
到top-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"
属性替代自定义类名来设置样式,符合组件的设计模式,使用更简洁明了。
import { Popover, Button, Space } from '@nutui/nutui-react-taro' | ||
import { Home, Check } from '@nutui/icons-react-taro' |
There was a problem hiding this comment.
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.tsx
和src/packages/popover/demos/h5/demo3.tsx
中检测到关于 Cart 或 Location 的引用。 - 请核实这些文件中是否还需要使用这两个图标:
- 如果不需要,请同步删除这些引用,确保所有相关 demo 文件保持一致。
- 如果仍有使用需求,请补充缺失的图标导入,保证功能完整性。
赞,希望尽快合并,popover无法关闭确实无解 |
Codecov ReportAttention: Patch coverage is
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. 🚀 New features to boost your workflow:
|
There was a problem hiding this 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 策略。
这种实现对于优化频繁但重复的计算操作(如获取元素尺寸)非常有用,可以显著提高应用性能。
不过有两点小的建议:
- 考虑为泛型类型参数提供更具体的类型(而不是
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 {
- 可以考虑为类添加更多实用方法,如
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
📒 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
修改为动态 IDnut-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 2Length 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请运行该脚本后提供输出,以便我进一步确认并给出最终的修改建议。
There was a problem hiding this 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
📒 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
,同时更新rootPosition
为wrapperPosition
,命名更加直观,反映了它们在组件中的实际用途。
82-83
: 使用UUID生成器增强了组件实例隔离性使用
useUuid
钩子为每个Popover实例生成唯一ID是一个很好的实践,确保了在同一页面上有多个Popover组件时不会发生ID冲突。
85-97
: 位置计算函数重构提高了代码质量函数从
getContentWidth
重命名为getWrapperPosition
,逻辑更清晰,并且增加了RTL布局支持。使用nextTick确保DOM更新后再获取元素位置,避免了定位不准确的问题。
103-107
: 使用nextTick优化了内容宽度计算在获取popover内容宽度时使用
nextTick
,确保了在DOM渲染完成后再获取尺寸,提高了测量的准确性。
112-113
: 使用可选链提高了回调安全性在
clickAway
函数中使用可选链调用onClick
和onClose
回调,避免了在未提供回调函数时可能出现的错误,提高了代码的健壮性。
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操作冲突。
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]) | ||
}) | ||
}) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
异步函数缺少错误处理
在getWrapperPosition
和getPopoverContentW
这两个异步函数中,没有对可能发生的错误进行处理。建议添加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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
升级文档需要更新一份
There was a problem hiding this 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 theFullPosition
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
📒 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
)更改为更通用的名称(padding
和item-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)的文档描述保持一致。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
1、taro版本 点击按钮展示气泡,再点击相邻按钮第二个气泡未弹出,需要再次点击
🤔 这个变动的性质是?
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
New Features
Style
Documentation