feat(Empty): V14 #2760
feat(Empty): V14 #2760
Conversation
Walkthrough本次更改主要涉及多个组件的样式和文档更新。 Changes
Suggested labels
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (12)
src/packages/empty/demos/h5/demo3.tsx (1)
5-5: 建议优化描述文本内容当前描述文本"内容描述内容描述"显得重复且不够实际。建议修改为更有意义的示例文本，以便更好地展示组件在实际应用中的效果。例如："暂无相关数据"或"未找到搜索结果"等更贴近实际使用场景的文本。
- return <Empty description="内容描述内容描述" imageSize={80} /> + return <Empty description="暂无相关数据" imageSize={80} />src/packages/empty/demos/taro/demo2.tsx (1)
7-9: 建议优化描述文本的表达方式当前的描述文本 "内容描述内容描述内容描述" 显得比较重复，建议修改为更有意义的示例文本。
建议修改为：
- description="内容描述内容描述内容描述" + description="这里是空状态的详细描述信息"src/packages/empty/demos/h5/demo6.tsx (1)
12-13: 建议保留刷新图标以提升用户体验考虑到这是错误状态的展示，建议同时使用图标和文字来增强交互反馈。图标可以帮助用户快速识别按钮的功能。
建议修改如下：
- <Button type="primary" size="small"> - 刷新重试 + <Button type="primary" size="small" icon="refresh"> + 刷新重试src/packages/empty/demos/h5/demo1.tsx (3)
8-9: 建议优化描述文本的表达方式描述文本重复使用相同的词句显得不够专业。建议修改为更具体和有意义的描述文本，以便更好地展示组件的实际使用场景。
建议修改为：
title="全屏缺省标题" - description="内容描述内容描述内容描述" + description="暂无相关内容，请稍后再试"
13-13: 保持描述文本的一致性为了保持组件展示的一致性，建议这里的描述文本也做相应的优化。
建议修改为：
- description="内容描述内容描述内容描述" + description="暂无相关数据"
17-20: 样式设置合理，建议优化描述文本边距设置合理，展示了无按钮的基础用法。但描述文本仍需优化。
建议修改为：
- description="内容描述内容描述内容描述" + description="暂无相关结果"src/packages/empty/demos/taro/demo1.tsx (1)
9-21: 建议优化描述文本的可配置性考虑将重复使用的描述文本抽取为常量或配置项，这样可以更容易地统一管理和修改文本内容。
建议添加以下代码：
import React from 'react' import { Empty } from '@nutui/nutui-react-taro' import pxTransform from '@/utils/px-transform' +const DEFAULT_DESCRIPTION = '内容描述内容描述内容描述' + const Demo1 = () => { return ( <> <Empty title="全屏缺省标题" - description="内容描述内容描述内容描述" + description={DEFAULT_DESCRIPTION} actions={[{ text: '操作按钮' }, { text: '操作按钮', type: 'primary' }]} /> <Empty - description="内容描述内容描述内容描述" + description={DEFAULT_DESCRIPTION} actions={[{ text: '操作按钮' }]} style={{ marginTop: pxTransform(10) }} /> <Empty - description="内容描述内容描述内容描述" + description={DEFAULT_DESCRIPTION} style={{ marginTop: pxTransform(10) }} /> </> ) }src/packages/empty/demos/taro/demo4.tsx (1)
Line range hint
8-24: 建议清理未使用的注释代码代码中包含大量被注释的 Tabs 相关代码。如果这些代码不再需要，建议将其删除以提高代码可读性。如果这些代码后续可能会用到，建议添加 TODO 注释说明保留原因。
src/packages/empty/empty.scss (1)
47-56: 操作按钮布局优化建议新增的操作按钮布局分类合理，但建议统一间距规范。目前基础布局使用16px间距，而小型布局使用24px间距，这种差异可能导致视觉不一致。
建议统一使用相同的间距值：
&-actions-base { display: flex; flex-direction: row; - margin-top: 16px; + margin-top: 24px; }src/packages/empty/empty.tsx (1)
Line range hint
121-131: 样式类名更新符合预期！类名更新与样式表的变更保持一致，支持不同尺寸的空状态组件样式定制。
不过有一处小的优化建议：
action?.text中的可选链操作符是多余的，因为在EmptyAction接口中text是必需属性。建议修改如下：
- <Button {...rest}>{action?.text}</Button> + <Button {...rest}>{action.text}</Button>src/packages/calendarcard/calendarcard.scss (1)
118-118: 样式更改符合预期且增强了可访问性！为禁用状态（
.prev、.next和.disabled）添加cursor: not-allowed样式是一个很好的改进。这样可以：
- 为用户提供更清晰的视觉反馈
- 提高组件的可访问性
- 与常见的UI模式保持一致
建议考虑在组件文档中添加对这些状态的说明，以帮助开发者更好地理解和使用这些交互状态。
src/styles/variables.scss (1)
1965-1965: 描述文本行高调整将描述文本的行高从 1.2 调整为 1，使描述文本更加紧凑。建议评估此改动对多行文本的可读性是否有影响。
考虑使用稍大的行高值（如 1.1）来平衡紧凑性和可读性：
-$empty-description-line-height: var(--nutui-empty-description-line-height, 1) !default; +$empty-description-line-height: var(--nutui-empty-description-line-height, 1.1) !default;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (18)
src/packages/calendarcard/calendarcard.scss(1 hunks)src/packages/empty/demos/h5/demo1.tsx(1 hunks)src/packages/empty/demos/h5/demo2.tsx(1 hunks)src/packages/empty/demos/h5/demo3.tsx(1 hunks)src/packages/empty/demos/h5/demo4.tsx(1 hunks)src/packages/empty/demos/h5/demo6.tsx(1 hunks)src/packages/empty/demos/taro/demo1.tsx(1 hunks)src/packages/empty/demos/taro/demo2.tsx(1 hunks)src/packages/empty/demos/taro/demo3.tsx(1 hunks)src/packages/empty/demos/taro/demo4.tsx(1 hunks)src/packages/empty/demos/taro/demo6.tsx(1 hunks)src/packages/empty/empty.scss(1 hunks)src/packages/empty/empty.taro.tsx(1 hunks)src/packages/empty/empty.tsx(1 hunks)src/styles/variables-jmapp.scss(1 hunks)src/styles/variables-jrkf.scss(1 hunks)src/styles/variables.scss(1 hunks)vite.config.ts(0 hunks)
💤 Files with no reviewable changes (1)
- vite.config.ts
✅ Files skipped from review due to trivial changes (1)
- src/packages/empty/demos/taro/demo6.tsx
🔇 Additional comments (19)
src/packages/empty/demos/h5/demo3.tsx (1)
Line range hint 1-8: 组件结构正确
组件的整体结构简洁明了，属性使用正确，代码质量良好。
src/packages/empty/demos/h5/demo2.tsx (2)
5-11: 代码格式规范，结构清晰！
JSX 代码格式化得当，props 分行展示提高了可读性。
7-9: Empty 组件配置合理
- title 和 description 的文案描述清晰，符合半屏展示场景
- 使用 size="small" 适合半屏展示
验证 Empty 组件的 size 属性是否在文档中有明确定义：
✅ Verification successful
Empty 组件的 size 属性配置正确
从代码验证结果可以看到：
- Empty 组件确实支持 'small' | 'base' 两种 size 属性值
- 在半屏展示场景下使用 size="small" 是合理的配置
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 Empty 组件的 size 属性文档
rg -A 5 "size.*prop" src/packages/empty/
Length of output: 42
Script:
#!/bin/bash
# 搜索 Empty 组件的 size 属性定义
ast-grep --pattern 'interface $_Props {
$$$
size?: $_
$$$
}'
# 搜索 Empty 组件的 size 属性使用
rg -A 2 "size[=:]" src/packages/empty/
# 搜索 Empty 组件的文档说明
fd README.md src/packages/empty/ --exec cat {}
Length of output: 2188
src/packages/empty/demos/taro/demo2.tsx (2)
5-11: 代码格式优化，提高了可读性！
JSX 代码格式调整合理，多行展示使得属性配置更加清晰。
7-10: 验证 Empty 组件的 size 属性值
请确认 size="small" 是否为该组件支持的有效值。
✅ Verification successful
Let me gather more information about the Empty component's implementation and type definitions.
Empty 组件的 size 属性值设置正确
根据组件类型定义，Empty 组件的 size 属性支持 'small' | 'base' 两个值，当前使用的 size="small" 是有效的属性值。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 Empty 组件的 size 属性支持的值
# 搜索 Empty 组件的类型定义
ast-grep --pattern 'interface EmptyProps {
$$$
}'
# 搜索 size 属性的使用示例
rg -A 2 'size=' src/packages/empty/
Length of output: 782
Script:
#!/bin/bash
# 查找 Empty 组件的类型定义和实现
fd -e ts -e tsx Empty src/packages/empty/ --exec cat {}
# 查找 Empty 组件的文档
fd README.md src/packages/empty/ --exec cat {}
Length of output: 110
Script:
#!/bin/bash
# 使用不同的搜索策略查找 Empty 组件的定义
rg -A 10 'interface EmptyProps' src/packages/empty/
# 查找 Empty 组件的源文件
rg -l 'export.*Empty' src/packages/empty/
# 查找包含 size 属性定义的相关代码
rg -A 5 'size.*=' src/packages/empty/
Length of output: 3568
src/packages/empty/demos/taro/demo1.tsx (1)
9-10: 描述文本统一且清晰
三个 Empty 组件使用了相同的描述文本，保持了良好的一致性。标题和描述的内容更加具体和清晰，有助于用户理解组件的用途。
Also applies to: 14-14, 19-19
src/packages/empty/demos/h5/demo4.tsx (2)
14-15: 文案修改符合预期！
TabPane 和 Empty 组件的标题保持一致，都更新为"通用空状态"，体现了良好的 UI 文案一致性。
20-21: 文案更新合理，建议确认国际化文案
将"无网络"更新为"网络异常"更准确地描述了该状态。
运行以下脚本检查相关的国际化文案是否同步更新：
✅ Verification successful
Let me search for more specific information about the internationalization strings.
Let me search for more specific information about the Empty component and its internationalization strings.
Let me try another search to find any internationalization related files.
文案已同步更新，无需额外修改
从搜索结果可以看到，Empty 组件在 H5 和 Taro 版本中的 demo4 文件里都已经同步使用了"网络异常"这个文案。组件本身使用的是 status="network" 这个状态值，不涉及国际化文案配置，因此这个更改是合理且完整的。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查空状态相关的国际化文案
# 搜索可能包含国际化配置的文件
rg -g '*.{ts,tsx,json}' -l "network.*empty|empty.*network"
# 检查 locale 文件夹中的翻译文件
fd -g '*locale*.ts' -x cat {}
Length of output: 1277
Script:
#!/bin/bash
# Search for network-related empty state strings in the component files
rg -A 5 "network.*empty|empty.*network" src/packages/empty/empty.tsx src/packages/empty/empty.taro.tsx
# Check the properties file that might contain translations
cat scripts/properties.json
Length of output: 176001
Script:
#!/bin/bash
# Search for Empty component implementation and its translations
rg -A 10 "status.*network" src/packages/empty/empty.tsx
rg -A 10 "network" src/packages/empty/locale/
Length of output: 374
Script:
#!/bin/bash
# Search for any locale or i18n related files and network status text
rg -g "*.{ts,tsx,json}" -l "i18n|locale"
rg -g "*.{ts,tsx,json}" -B 2 -A 2 "网络异常|无网络"
Length of output: 9507
src/packages/empty/demos/taro/demo4.tsx (1)
26-28: 文案修改符合规范
Empty 组件的状态文案修改统一且清晰：
- empty 状态：使用"通用空状态"
- error 状态：使用"加载失败/错误"
- network 状态：使用"网络异常"
建议验证这些文案更改是否与设计规范一致。
✅ Verification successful
Empty 组件文案已统一且符合规范
根据代码搜索结果，Empty 组件在 H5 和 Taro 的演示文件中都保持了一致的状态文案：
- empty 状态：统一使用"通用空状态"
- error 状态：统一使用"加载失败/错误"
- network 状态：统一使用"网络异常"
这些文案在不同平台的实现中保持了一致性，符合组件规范要求。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他 Empty 组件的文案是否保持一致
# 搜索所有包含 Empty 组件的文件
rg --type tsx "status=(\"|\')?(empty|error|network)" -l | while read -r file; do
echo "=== Checking $file ==="
rg "title=" "$file"
done
Length of output: 186
Script:
#!/bin/bash
# 搜索包含 Empty 组件的文件
rg -t tsx "<Empty.*status.*title" -A 1
# 另外搜索可能的变体
rg -t tsx "<Empty.*title.*status" -A 1
Length of output: 137
Script:
#!/bin/bash
# 搜索所有文件中的 Empty 组件使用情况
rg "<Empty.*?(status|title)" --type ts --type tsx --type jsx --type js -A 1
Length of output: 105
Script:
#!/bin/bash
# 使用 fd 查找所有可能的源文件，然后用 rg 搜索
fd -e ts -e tsx -e jsx -e js | xargs rg "<Empty.*?(status|title)" -A 1
Length of output: 1979
src/packages/empty/empty.scss (2)
35-35: 标题样式调整增强了视觉层次
标题样式的更改通过增加字重和字号，提高了空状态组件的视觉层次感，使标题更加醒目。这些改动符合设计规范。
Also applies to: 38-38
43-43: 描述文本颜色调整提升了可读性
将描述文本颜色从辅助文本色改为正文色，提高了文本的可读性，使内容更清晰。
src/packages/empty/empty.taro.tsx (1)
127-127: 类名更改提升了组件的一致性
将动作容器的类名从固定的 ${classPrefix}-actions 改为基于尺寸的 ${classPrefix}-actions-${size}，这个改动与组件的整体设计保持一致，使动作按钮区域能够根据不同尺寸应用相应的样式。
运行以下脚本验证相关的样式类是否已定义：
✅ Verification successful
样式类已正确定义，变更合理有效
empty.scss 文件中已经定义了 nut-empty-actions-base 和 nut-empty-actions-small 样式类，它们分别为不同尺寸的动作容器提供了合适的样式。这个类名更改与现有样式完全匹配，保证了组件的正常展示。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 empty.scss 中是否包含新的基于尺寸的动作容器样式类
rg -g "*.scss" "nut-empty-actions-(base|small)"
Length of output: 49
Script:
#!/bin/bash
# 搜索 empty 相关的样式文件
fd -e scss empty
# 查看样式文件内容
fd -e scss empty --exec cat {}
Length of output: 1210
src/styles/variables.scss (2)
1953-1953: 标题下边距调整优化
将空状态组件标题的下边距从 8px 增加到 12px，可以在视觉上更好地区分标题和内容，提升了组件的整体层次感。
1957-1957: 标题行高优化
将标题行高从基础字号调整为大号字号，这样的调整提升了标题文本的可读性，同时与设计系统的字体比例保持一致。
src/styles/variables-jmapp.scss (2)
1980-1980: 标题下边距调整合理
将空状态组件标题的下边距设置为12px，这个间距值符合设计规范，可以在视觉上提供更好的层次感。
1984-1984: 标题行高调整需要验证
将空状态组件标题的行高从基础字号调整为大号字号($font-size-l)，这个改动可能会影响文本的垂直对齐。
✅ Verification successful
行高调整验证完成，无需担心对齐问题
根据代码分析，Empty组件的标题行高调整是安全的：
- Empty组件的标题是单行文本，从示例代码可以看到都是简单的状态描述文本
- 组件样式中已经做了完善的垂直居中处理：
- 整体使用flex布局并垂直居中对齐
- 标题具有合理的上下margin间距
- 文档中明确定义了标题样式变量，便于统一管理和调整
因此将标题字号从基础字号调整为大号字号($font-size-l)是合理的改动，不会影响组件的视觉呈现。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查Empty组件中是否有多行标题的使用场景
rg -l "title.*[\n\r].*title" --type tsx
Length of output: 69
Script:
#!/bin/bash
# 搜索包含Empty组件和title属性的文件
rg -l "Empty.*title"
# 搜索Empty组件的定义和使用
ast-grep --pattern 'const Empty = $_'
Length of output: 235
Script:
#!/bin/bash
# 查看Empty组件的具体实现和title的使用方式
cat src/packages/empty/empty.tsx
# 查看示例代码中title的使用场景
cat src/packages/empty/demos/h5/demo4.tsx
cat src/packages/empty/demos/taro/demo4.tsx
Length of output: 4955
Script:
#!/bin/bash
# 检查Empty组件的样式定义
cat src/packages/empty/empty.scss
# 检查是否有其他使用Empty组件的场景
rg "title.*Empty" -A 2 -B 2
Length of output: 4182
src/styles/variables-jrkf.scss (3)
2004-2004: 标题底部边距调整
将空状态组件标题的底部边距从 8px 增加到 12px，这样可以在标题和描述文本之间提供更好的视觉间隔。
2008-2008: 标题行高优化
将标题行高设置为与大号字体大小 ($font-size-l) 保持一致，这样可以确保标题文本有适当的垂直间距。
2016-2016: 描述文本行高调整
将描述文本的行高从 1.2 调整为 1，使文本更加紧凑。建议验证这个改动在多行文本场景下的表现。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2760 +/- ##
==========================================
Coverage 83.98% 83.98%
==========================================
Files 220 220
Lines 17882 17882
Branches 2676 2675 -1
==========================================
Hits 15019 15019
Misses 2858 2858
Partials 5 5 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/packages/empty/__test__/empty.spec.tsx (1)
34-37: 建议补充不同尺寸的测试用例当前的测试用例只覆盖了基础样式，建议添加新的测试用例来验证
size属性对应的不同尺寸样式（如.nut-empty-actions-small）。+test('should render small size actions correctly', () => { + const { container } = render( + <Empty + size="small" + actions={[{ text: '操作1' }, { text: '操作2' }]} + /> + ) + expect(container.querySelector('.nut-empty-actions-small')).toBeTruthy() +})
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/config.json(1 hunks)src/packages/empty/__test__/empty.spec.tsx(1 hunks)
🔇 Additional comments (1)
src/packages/empty/__test__/empty.spec.tsx (1)
34-34: 类名更新正确反映了组件实现的变化
类名从 .nut-empty-actions 更新为 .nut-empty-actions-base 的修改与组件实现保持一致。
Also applies to: 36-36
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
src/packages/empty/doc.md (1)
91-91: 建议优化行高以提升可读性当前
--nutui-empty-description-line-height的值设置为1可能会影响文本的可读性。为了获得更好的阅读体验，建议使用 1.4-1.6 之间的行高值。-| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1` | +| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1.5` |src/packages/empty/doc.zh-TW.md (1)
83-83: 建议保持繁体中文文档的一致性在繁体中文（zh-TW）文档中，建议使用 "說明" 而不是 "説明"，以保持与繁体中文的书写习惯一致。
-| 名稱 | 説明 | 默認值 | +| 名稱 | 說明 | 默認值 |src/packages/empty/doc.en-US.md (1)
89-91: 建议为数值添加单位以保持一致性为了保持文档的一致性和清晰度，建议：
- 为
--nutui-empty-title-line-height的值添加单位- 为
--nutui-empty-description-line-height的值添加单位这样可以让开发者更清楚地理解这些值的使用方式。
建议修改如下：
- | \--nutui-empty-title-line-height | Empty component image title line height | `$font-size-l` | + | \--nutui-empty-title-line-height | Empty component image title line height | `$font-size-l px` | - | \--nutui-empty-description-line-height | Empty component image description line height | `1` | + | \--nutui-empty-description-line-height | Empty component image description line height | `1em` |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/packages/empty/doc.en-US.md(1 hunks)src/packages/empty/doc.md(1 hunks)src/packages/empty/doc.taro.md(1 hunks)src/packages/empty/doc.zh-TW.md(1 hunks)
🔇 Additional comments (2)
src/packages/empty/doc.zh-TW.md (1)
87-91: 请确认CSS变量的默认值一致性
根据AI摘要，一些CSS变量的默认值与其他文档文件（doc.en-US.md、doc.md、doc.taro.md）不一致：
--nutui-empty-title-margin-top在其他文档中为8px，此处为0px- 其他变量值的更新（如 line-height 的变化）需要确保与设计规范一致
src/packages/empty/doc.taro.md (1)
89-89: 请验证文本间距的视觉效果
行高的调整可能会影响文本的可读性：
- 标题行高增加到
$font-size-l，会使标题文本更加宽松 - 描述文本行高减少到
1，可能会使文本显得过于紧凑
建议：
- 在不同设备尺寸下测试这些新的行高值
- 确保长文本在这些新的行高设置下仍然清晰可读
Also applies to: 91-91
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (2)
src/styles/theme-jmapp.scss (1)
96-97: 建议在变量定义中添加!default以保持一致性在行96-97，变量
$font-weight和$font-weight-bold的定义缺少!default，这可能导致这些变量无法被后续代码重写。为与其他变量定义保持一致性，建议添加!default。修改后的代码：
- $font-weight: var(--nutui-font-weight); - $font-weight-bold: var(--nutui-font-weight-bold); + $font-weight: var(--nutui-font-weight) !default; + $font-weight-bold: var(--nutui-font-weight-bold) !default;src/styles/theme-jrkf.scss (1)
184-190: 为多单词字体名称添加引号在第 185-189 行中，
$font-family包含了带空格的字体名称，如PingFang SC、Microsoft YaHei和Hiragino Sans GB。为避免解析错误，建议对这些字体名称添加引号，例如"PingFang SC"。
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
样式
文档