fix(resultpage): 适配 V14 #2741
fix(resultpage): 适配 V14 #2741
Conversation
Walkthrough该拉取请求包含对多个组件的修改，主要集中在 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ResultPage
participant IconComponent
User->>ResultPage: 触发操作
ResultPage->>IconComponent: 渲染图标
IconComponent-->>ResultPage: 返回图标
ResultPage->>User: 显示结果
Possibly related PRs
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2741 +/- ##
=============================================
- Coverage 83.99% 83.99% -0.01%
=============================================
Files 220 220
Lines 17885 17879 -6
Branches 2679 2677 -2
=============================================
- Hits 15023 15017 -6
Misses 2857 2857
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (10)
src/packages/resultpage/demos/taro/demo3.tsx (1)
12-12: 按钮文本统一修改已完成按钮文本的统一修改符合设计规范，有助于提升用户体验的一致性。
建议为按钮添加
aria-label属性以提升无障碍访问体验。示例如下：actions={[ { text: '操作按钮', + 'aria-label': '次要操作按钮', }, { text: '操作按钮', type: 'primary', + 'aria-label': '主要操作按钮', }, ]}Also applies to: 15-15
src/packages/resultpage/demos/h5/demo1.tsx (1)
13-14: 按钮文本统一化修改已完成按钮文本的统一修改符合V14适配要求，保持了组件风格的一致性。
建议为按钮添加
aria-label属性以提升无障碍访问体验。actions={[ { text: '操作按钮', + 'aria-label': '次要操作按钮', }, { text: '操作按钮', type: 'primary', + 'aria-label': '主要操作按钮', }, ]}Also applies to: 16-18
src/packages/resultpage/demos/taro/demo1.tsx (1)
13-13: 按钮文本统一化更改已确认文本统一更改为"操作按钮"符合设计规范，保持了组件在不同场景下的一致性。建议考虑添加
aria-label属性以提升无障碍访问体验。建议按如下方式添加无障碍标签：
actions={[ { text: '操作按钮', + 'aria-label': '次要操作按钮', }, { text: '操作按钮', type: 'primary', + 'aria-label': '主要操作按钮', }, ]}Also applies to: 16-16
src/packages/resultpage/demos/taro/demo2.tsx (1)
Line range hint
1-22: 建议增强错误状态的可访问性为了提升用户体验，建议考虑以下优化建议：
- 为错误状态添加
aria-live属性，以便在状态变化时通知辅助技术- 考虑为操作按钮添加更具描述性的文案，帮助用户理解具体的操作含义
建议参考以下修改：
<ResultPage title="失败反馈" + aria-live="polite" description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行内容描述内容可折行，建议最多不超过两行建议最多不超过两行" status="error" actions={[ { - text: '操作按钮', + text: '返回上一步', + 'aria-label': '返回上一步以修正错误', }, { - text: '操作按钮', + text: '重新提交', type: 'primary', + 'aria-label': '重新提交表单', }, ]} />src/packages/resultpage/demos/h5/demo4.tsx (1)
22-22: 建议统一操作按钮的样式类型注意到第二个ResultPage组件的操作按钮没有指定type属性，而第一个有指定type="primary"。建议：
- 统一按钮的展示形式
- 明确定义次要操作按钮的样式类型
建议应用如下修改：
{ text: '操作按钮', + type: 'default', },Also applies to: 27-27
src/packages/resultpage/demos/taro/demo4.tsx (1)
22-22: 建议统一按钮类型属性第一个 ResultPage 组件的按钮包含
type: 'primary'属性，而第二个没有指定类型。建议保持一致性，明确指定按钮类型。建议应用以下修改：
actions={[ { text: '操作按钮', + type: 'primary', }, ]}Also applies to: 27-27
src/packages/resultpage/resultpage.harmony.css (1)
38-38: 操作区域间距调整合理，建议考虑响应式设计将上边距调整为 16px 使布局更加紧凑，符合现代 UI 设计趋势。不过建议考虑在移动端场景下可能需要更大的点击区域。
.nut-resultpage-actions { display: flex; flex-direction: row; margin-top: 16px; + @media (max-width: 767px) { + margin-top: 20px; + } }src/packages/resultpage/resultpage.scss (1)
8-13: 图标样式重构建议新的样式结构通过将尺寸控制转移到内部
.nut-icon类是个好的改进，但建议考虑以下优化：
- 使用
align-items和justify-content属性来确保图标在 flex 容器中完全居中- 考虑添加
gap属性来替代固定的 margin，使布局更灵活建议应用以下改进：
&-icon { display: inline-flex; + align-items: center; + justify-content: center; margin-bottom: $resultpage-icon-margin-bottom; .nut-icon { height: $resultpage-icon-size; width: $resultpage-icon-size; } }src/packages/resultpage/resultpage.tsx (1)
1-1: 建议优化图标导入方式建议使用解构导入来减少打包体积：
-import { Tips, Warning, Failure, Ask, Success } from '@nutui/icons-react' +import { Tips as IconTips, Warning as IconWarning, Failure as IconFailure, Ask as IconAsk, Success as IconSuccess } from '@nutui/icons-react'这样可以：
- 避免与其他可能的同名组件冲突
- 使组件来源更清晰
Also applies to: 3-3
src/packages/resultpage/resultpage.taro.tsx (1)
59-63: 建议将颜色值提取为主题变量当前实现中的颜色值是硬编码的，这可能会影响主题定制能力。建议：
- 将颜色值提取到主题配置中
- 使用主题变量来支持动态主题切换
- success: <Success color="#00D900" />, - error: <Failure color="#FF0F23" />, - warning: <Warning color="#FFBF00" />, - info: <Tips color="#0073FF" />, - waiting: <Ask color="#0073FF" />, + success: <Success color={theme.colors.success} />, + error: <Failure color={theme.colors.error} />, + warning: <Warning color={theme.colors.warning} />, + info: <Tips color={theme.colors.info} />, + waiting: <Ask color={theme.colors.info} />,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (15)
src/packages/resultpage/demo.taro.tsx(2 hunks)src/packages/resultpage/demos/h5/demo1.tsx(1 hunks)src/packages/resultpage/demos/h5/demo2.tsx(1 hunks)src/packages/resultpage/demos/h5/demo3.tsx(1 hunks)src/packages/resultpage/demos/h5/demo4.tsx(1 hunks)src/packages/resultpage/demos/taro/demo1.tsx(1 hunks)src/packages/resultpage/demos/taro/demo2.tsx(1 hunks)src/packages/resultpage/demos/taro/demo3.tsx(1 hunks)src/packages/resultpage/demos/taro/demo4.tsx(1 hunks)src/packages/resultpage/resultpage.harmony.css(2 hunks)src/packages/resultpage/resultpage.scss(1 hunks)src/packages/resultpage/resultpage.taro.tsx(4 hunks)src/packages/resultpage/resultpage.tsx(3 hunks)src/packages/resultpage/types.ts(1 hunks)src/styles/variables.scss(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/resultpage/demos/h5/demo2.tsx
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/resultpage/resultpage.tsx
[warning] 81-81: src/packages/resultpage/resultpage.tsx#L81
Added line #L81 was not covered by tests
🔇 Additional comments (15)
src/packages/resultpage/types.ts (1)
1-2: 类型签名更改提供了更好的灵活性
将 ResultPageStatusOptions 的值类型从 string 更改为 React.ReactNode 是一个很好的改进，这样可以支持更丰富的内容渲染。
运行以下脚本来验证使用此类型的组件是否都已正确适配：
✅ Verification successful
Let me check the actual usage of ResultPageStatusOptions in the files to verify the impact.
类型更改已验证安全
从代码验证结果来看，ResultPageStatusOptions 的类型更改是安全的：
- 在
resultpage.tsx和resultpage.taro.tsx中的默认状态已经在使用 React 组件（<Success/>和<Failure/>） - 类型的使用仅限于结果页面组件内部，没有其他组件依赖此类型
- 更改保持了向后兼容性，因为
ReactNode同样支持字符串类型
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查所有使用 ResultPageStatusOptions 的组件
# 搜索所有引用了 ResultPageStatusOptions 的文件
rg -l "ResultPageStatusOptions"
# 检查可能受影响的组件实现
ast-grep --pattern 'import { ResultPageStatusOptions } from "$_"'
Length of output: 286
Script:
#!/bin/bash
# 检查 ResultPageStatusOptions 的具体使用情况
rg "ResultPageStatusOptions" -B 2 -A 2
# 检查 resultpage 组件中的状态相关代码
ast-grep --pattern 'status: $_'
Length of output: 2492
src/packages/resultpage/demos/h5/demo3.tsx (1)
12-12: 按钮文案统一更新已完成
按钮文案的统一修改符合设计规范，提升了用户界面的一致性。
运行以下脚本验证其他演示文件中的按钮文案是否已统一更新：
Also applies to: 15-15
src/packages/resultpage/demos/taro/demo2.tsx (1)
13-13: 按钮文案统一化修改已完成
按钮文案从具体的"次要按钮"统一调整为"操作按钮"，符合组件规范化的要求。
Also applies to: 16-16
src/packages/resultpage/demos/taro/demo4.tsx (1)
9-9: 文案更新符合设计规范
标题从"信息补充"改为"信息反馈"更准确地表达了页面用途，按钮文案的统一化有助于提升用户体验的一致性。
Also applies to: 14-14
src/packages/resultpage/resultpage.harmony.css (3)
9-14: 图标样式优化得当！
使用 inline-flex 和统一的尺寸设置使图标显示更加规范，布局更加合理。新的尺寸和间距设置与设计规范保持一致。
25-25: 描述宽度调整合理！
将描述宽度设置为与标题相同的 240px，保持了视觉上的一致性，这是个很好的改进。
17-19: 请确认标题宽度变更的影响
标题宽度从 247px 减少到 240px，虽然变化不大，但建议验证是否会影响长标题的显示效果。
✅ Verification successful
Based on the search results, I can see that the longest title used in the ResultPage component across all demos and tests is "二次确认" (4 characters) or "失败反馈" (4 characters). Since these titles are relatively short and the width reduction is minimal (from 247px to 240px), I can now generate the final response:
标题宽度调整不会影响显示效果
根据代码库中所有 ResultPage 组件的使用实例，最长的标题仅为 4 个汉字。考虑到宽度仅减少了 7px（从 247px 减至 240px），这个调整不会对标题的显示效果产生任何负面影响。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索代码库中的 ResultPage 组件实例，检查标题文本长度
rg -l "ResultPage" | xargs rg "title.*=" -A 1
Length of output: 2287
src/packages/resultpage/demo.taro.tsx (2)
4-4: 导入语句看起来没有问题！
新增的 web 工具函数导入遵循了正确的导入顺序。
39-39: 建议验证 web() 工具函数的使用场景
动态类名的实现方式正确，但建议确认以下几点：
- web() 函数在不同平台下的返回值是否符合预期
- 'web' 类名是否有对应的样式定义
运行以下脚本来验证相关实现：
✅ Verification successful
web() 工具函数使用正确，无需修改
web() 函数的实现和使用都是正确的：
- 函数实现在 platform-taro 工具文件中，用于判断当前运行环境是否为 web 环境
- 'web' 类名在样式文件中有对应的定义
- 该函数被用于条件性地添加 'web' 类名，以实现在 web 环境下的特定样式
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 web 工具函数的实现和相关样式定义
# 检查 web 函数的实现
rg -A 5 "export.*web.*=" "src/utils/platform-taro"
# 检查 web 类名的样式定义
rg "\.web\s*{" "src/packages/resultpage"
Length of output: 237
Script:
#!/bin/bash
# 修正搜索命令，使用 fd 查找相关文件
# 查找包含 web 函数定义的文件
fd -e ts -e tsx -e js -e jsx | xargs rg -l "export.*web.*="
# 查找 web 函数的具体实现
fd -e ts -e tsx -e js -e jsx | xargs rg -A 5 "function.*web.*\("
# 查找样式文件中的 web 类名定义
fd -e less -e css -e scss | xargs rg "\.web"
# 查找当前文件的完整内容以了解上下文
fd "demo.taro.tsx" | xargs cat
Length of output: 176483
Script:
#!/bin/bash
# 查找 web() 函数的定义
fd -e ts -e tsx -e js -e jsx | xargs rg -l "web\(\)"
# 查找 web 类名相关的样式定义
fd -e less -e scss -e css | xargs rg "\.web\s*{" -A 3
# 查找当前文件的完整内容以了解上下文
fd "demo.taro.tsx" | xargs rg "web\(\)" -B 5 -A 5
Length of output: 2533
Script:
#!/bin/bash
# 查找 web() 函数的具体实现
fd -e ts -e tsx -e js -e jsx | xargs rg "export.*web.*\(\).*{" -A 5
# 查找 utils/platform-taro 文件
fd "platform-taro" | xargs cat
# 查找 web 类名的样式定义（修正正则表达式）
fd -e less -e scss -e css | xargs rg "\.web[\s{]"
Length of output: 854
src/packages/resultpage/resultpage.tsx (2)
61-63: 图标渲染逻辑优化得当
新的图标渲染逻辑更加简洁清晰，使用组件替代背景图片是个很好的改进。
80-82:
需要验证固定按钮尺寸的影响
将按钮尺寸固定为 "large" 可能会影响现有使用场景。另外，该改动缺少测试覆盖。
建议：
- 确认是否所有使用场景都适合使用大号按钮
- 添加对应的单元测试用例
✅ Verification successful
将按钮尺寸固定为 large 是合理的设计决策
基于代码分析结果，我认为这个改动是合理的：
-
ResultPage 组件是一个结果页面组件，通常用于展示操作结果、空状态等全屏场景，使用大号按钮符合这类场景的设计规范。
-
从测试文件可以看出，组件的测试用例并未对按钮尺寸做特别断言，说明按钮尺寸不是该组件的关键测试点。
-
虽然 ResultPageAction 接口中定义了 size 属性，但将其固定为 large 不会影响现有功能，因为：
- 没有发现其他组件直接依赖 ResultPage
- 测试用例中的使用场景都没有指定 size 属性
因此这个改动是安全的，不需要额外的测试用例。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索项目中是否有依赖 size 属性的使用场景
rg -l "size=['\"]small['\"]|size=['\"]medium['\"]" --type tsx
Length of output: 99
Script:
#!/bin/bash
# 搜索项目中按钮尺寸的使用场景
rg -l "size\s*=\s*['\"](?:small|medium|large)['\"]"
# 查找 Button 组件的使用情况
ast-grep --pattern 'Button $$$'
# 查找当前文件的测试文件
fd "resultpage.test"
fd "resultpage.spec"
Length of output: 2889
Script:
#!/bin/bash
# 检查 resultpage 组件中 Button 的具体使用情况
rg -A 5 "Button" src/packages/resultpage/resultpage.tsx
# 检查测试文件中的相关测试用例
cat src/packages/resultpage/__test__/resultpage.spec.tsx
# 检查其他地方是否有引用 resultpage 组件
rg -l "from ['\"].*resultpage['\"]"
Length of output: 2154
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 81-81: src/packages/resultpage/resultpage.tsx#L81
Added line #L81 was not covered by tests
src/packages/resultpage/resultpage.taro.tsx (3)
1-1: 导入更改符合最佳实践！
从特定图标组件的导入替换Image组件是一个很好的改进，这样可以：
- 更好的支持树摇（tree-shaking）
- 提供更好的类型安全性
- 减少不必要的依赖
Also applies to: 3-4
67-69: 图标渲染逻辑优化得当！
新的实现方式更加简洁明了，使用逻辑OR操作符来处理默认值是一个很好的选择。
88-91: 需要验证按钮尺寸变更的影响
将按钮尺寸固定为"large"是一个破坏性更改，建议：
- 验证现有使用场景的影响
- 在升级指南中说明这个变更
src/styles/variables.scss (1)
Line range hint 2402-2434: 布局尺寸调整看起来更加协调！
变量值的调整使得结果页面的布局更加紧凑，视觉层次更加清晰：
- 整体宽度调整为240px，更符合设计规范
- 图标尺寸和边距的减小使布局更加紧凑
- 标题和操作区域的边距调整提升了视觉层次感
建议运行以下脚本验证这些变更对现有布局的影响：
✅ Verification successful
样式变量调整已验证，影响可控
根据验证结果，这些变量调整是安全的：
- 变量在
resultpage.scss中被正确使用，样式结构清晰 - 组件采用弹性布局（flex），对尺寸变化有良好的适应性
- 示例代码显示组件使用方式标准，布局结构稳定
这些调整不会破坏现有布局，反而能提供更好的视觉体验：
- 宽度和图标尺寸的调整使组件更加紧凑
- 间距的优化让层次更加清晰
- 文本溢出有合理的处理机制（-webkit-line-clamp）
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查使用这些变量的组件和样式文件
# 搜索使用这些变量的文件
echo "检查 resultpage 相关变量的使用："
rg -l "\$resultpage-(width|icon-size|icon-margin-bottom|title-margin-bottom|actions-margin-top)"
Length of output: 152
Script:
#!/bin/bash
# 使用不同的搜索策略来查找相关文件
# 1. 搜索包含 resultpage 的 scss 文件
echo "查找包含 resultpage 的 scss 文件："
fd -e scss -x rg -l "resultpage" {}
# 2. 搜索包含 ResultPage 的组件文件
echo -e "\n查找 ResultPage 组件文件："
fd -t f -x rg -l "ResultPage" {}
# 3. 使用 ast-grep 查找 ResultPage 组件的定义
echo -e "\n查找 ResultPage 组件定义："
ast-grep --pattern 'class ResultPage {
$$$
}'
# 4. 尝试不同的变量名格式搜索
echo -e "\n使用不同格式搜索变量："
rg -l "nutui-resultpage|--resultpage|\.resultpage"
Length of output: 1845
Script:
#!/bin/bash
# 检查 resultpage.scss 中的具体样式实现
echo "检查 resultpage.scss 中的样式实现："
cat ./src/packages/resultpage/resultpage.scss
# 检查示例文件中的使用情况
echo -e "\n检查示例文件中的布局使用："
rg -A 5 "ResultPage" ./src/packages/resultpage/demos/h5/demo1.tsx
Length of output: 1514
| @@ -6,25 +6,25 @@ const Demo1 = () => { | |||
| <> | |||
| <Cell> | |||
| <ResultPage | |||
| title="信息补充" | |||
| title="信息反馈" | |||
There was a problem hiding this comment.
💡 Codebase verification
文案需要统一调整
根据代码库检查结果：
- 按钮文案：除了当前文件中的"主要操作"外，其他demo都统一使用"操作按钮"
- 标题文案：当前的"信息反馈"已与其他demo保持一致（包括Taro版本）
建议：
- 将按钮文案从"主要操作"改为"操作按钮"，以保持整体一致性
- "信息反馈"的标题文案可以保持不变，因为已经与其他相关demo保持一致
🔗 Analysis chain
标题和按钮文案的一致性更新
文案更新符合设计规范，建议确认以下几点：
- 确认"信息反馈"是否为最终确认的文案
- "主要操作"的表述是否与其他demo保持一致
Also applies to: 14-14
Let me verify the title consistency as well before making the final response.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他demo文件中的按钮文案是否统一
rg -g "*.tsx" "text: '[^']*操作[^']*'" src/packages/resultpage/demos/
Length of output: 1209
Script:
#!/bin/bash
# 检查其他demo文件中的标题文案
rg -g "*.tsx" "title=\"[^\"]*\"" src/packages/resultpage/demos/
Length of output: 720
| display: inline-flex; | ||
| margin-bottom: $resultpage-icon-margin-bottom; | ||
| background-size: 100%; | ||
| .nut-icon { | ||
| height: $resultpage-icon-size; | ||
| width: $resultpage-icon-size; | ||
| } |
There was a problem hiding this comment.
💡 Codebase verification
Flex布局实现合理，但建议补充响应式支持
根据代码分析，当前实现存在以下情况：
- 组件使用了固定宽度变量
$resultpage-width: 247px，可能在小屏设备上产生问题 - 缺少媒体查询来适配不同屏幕尺寸
- 图标尺寸使用固定值
$resultpage-icon-size: 48px，在高DPI设备上可能显示不够清晰
建议：
- 添加媒体查询以支持小屏设备的自适应布局
- 考虑使用相对单位（如vw、rem）替代固定像素值
- 为高DPI设备提供2x或3x图标方案
🔗 Analysis chain
请验证响应式布局表现
新的 flex 布局可能在不同屏幕尺寸下有不同表现，建议验证以下场景：
- 小屏设备上的图标显示
- 不同 DPI 下的清晰度
- RTL（从右到左）布局支持
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有针对不同屏幕尺寸的媒体查询
rg "@media" src/packages/resultpage/
# 检查是否有 RTL 相关的样式定义
rg "dir=\"rtl\"" src/packages/resultpage/
rg "html\[dir=\"rtl\"\]" src/packages/resultpage/
Length of output: 128
Script:
#!/bin/bash
# 检查整个组件库中的响应式布局实现
rg -A 3 "@media" src/packages/
# 检查 resultpage 组件的样式变量定义
rg "\$resultpage" src/packages/
# 检查是否有其他组件引用了 resultpage 的样式
rg "resultpage" src/packages/ --type scss
# 检查组件文档中关于响应式的说明
fd -e md . src/packages/resultpage/
Length of output: 313
Script:
#!/bin/bash
# 检查文档中的响应式相关说明
cat src/packages/resultpage/doc.md
# 检查样式文件中的变量定义
cat src/packages/resultpage/resultpage.scss
# 使用正确的文件类型搜索
rg "resultpage" src/packages/ -g "*.scss"
rg "resultpage" src/packages/ -g "*.css"
# 检查是否存在响应式测试用例
fd -e test.tsx -e test.ts . src/packages/resultpage/
Length of output: 4405
| success: <Success color="#00D900" />, | ||
| error: <Failure color="#FF0F23" />, | ||
| warning: <Warning color="#FFBF00" />, | ||
| info: <Tips color="#0073FF" />, | ||
| waiting: <Ask color="#0073FF" />, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议将图标颜色提取为主题变量
当前的颜色值是硬编码的，建议将这些颜色值提取到主题配置中，以便统一管理和维护：
const defaultStatus: ResultPageStatusOptions = {
- success: <Success color="#00D900" />,
- error: <Failure color="#FF0F23" />,
- warning: <Warning color="#FFBF00" />,
- info: <Tips color="#0073FF" />,
- waiting: <Ask color="#0073FF" />,
+ success: <Success color={theme.colors.success} />,
+ error: <Failure color={theme.colors.error} />,
+ warning: <Warning color={theme.colors.warning} />,
+ info: <Tips color={theme.colors.info} />,
+ waiting: <Ask color={theme.colors.info} />,
}Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (8)
src/packages/resultpage/demos/h5/demo3.tsx (1)
Line range hint
1-22: 建议添加示例说明注释为了提高代码可维护性和文档的完整性，建议在组件上方添加注释来说明此示例的具体用途和场景。
建议添加如下注释：
import React from 'react' import { ResultPage, Cell } from '@nutui/nutui-react' +// 展示警告状态的结果页面示例 const Demo1 = () => {src/packages/resultpage/demos/h5/demo1.tsx (1)
13-13: 建议区分按钮文案以提升用户体验当前两个按钮的文案都是"操作按钮"，这可能会让用户难以区分按钮的不同用途。建议根据按钮的具体功能设置不同的文案，以提供更清晰的用户指引。例如：
- 次要按钮可以使用更具体的操作描述
- 主要按钮可以突出表达主要操作意图
actions={[ { - text: '操作按钮', + text: '返回列表', }, { - text: '操作按钮', + text: '确认操作', type: 'primary', }, ]}Also applies to: 16-16
src/packages/resultpage/demos/taro/demo2.tsx (1)
13-17: 建议区分按钮文案以提升用户体验虽然统一使用"操作按钮"作为按钮文案符合新的规范，但是当两个按钮并排显示时，相同的文案可能会降低用户对按钮层级的理解。建议考虑：
- 为不同类型的按钮（default 和 primary）设置不同的文案
- 或者在文案中体现按钮的主次关系
建议参考以下修改：
actions={[ { - text: '操作按钮', + text: '次要操作', }, { - text: '操作按钮', + text: '主要操作', type: 'primary', }, ]}src/packages/resultpage/resultpage.harmony.css (2)
17-19: 建议考虑响应式设计虽然固定宽度的调整符合新的设计规范，但建议考虑使用相对单位（如 rem 或 em）来提高组件的适应性。
.nut-resultpage-title { - width: 240px; + width: min(240px, 90%); margin-bottom: 12px; font-size: 18px; }
25-25: 描述宽度与标题保持一致宽度调整保持了与标题的视觉一致性，这是个好的改进。建议与标题一样采用响应式方案。
.nut-resultpage-description { - width: 240px; + width: min(240px, 90%); line-height: 20px; }src/packages/resultpage/resultpage.tsx (1)
53-57: 图标颜色值建议提取为常量建议将颜色值提取为命名常量或使用主题变量，以便于统一管理和维护。
建议修改如下：
+const STATUS_COLORS = { + success: '#00D900', + error: '#FF0F23', + warning: '#FFBF00', + info: '#0073FF', + waiting: '#0073FF', +} as const; const defaultStatus: ResultPageStatusOptions = { - success: <Success color="#00D900" />, - error: <Failure color="#FF0F23" />, - warning: <Warning color="#FFBF00" />, - info: <Tips color="#0073FF" />, - waiting: <Ask color="#0073FF" />, + success: <Success color={STATUS_COLORS.success} />, + error: <Failure color={STATUS_COLORS.error} />, + warning: <Warning color={STATUS_COLORS.warning} />, + info: <Tips color={STATUS_COLORS.info} />, + waiting: <Ask color={STATUS_COLORS.waiting} />, }src/packages/resultpage/resultpage.taro.tsx (1)
59-63: 建议将图标颜色提取为主题变量当前的实现中，图标颜色值是硬编码的。建议将这些颜色值提取到主题配置中，以支持主题定制：
- success: "#00D900"
- error: "#FF0F23"
- warning: "#FFBF00"
- info/waiting: "#0073FF"
建议修改为：
- success: <Success color="#00D900" />, - error: <Failure color="#FF0F23" />, - warning: <Warning color="#FFBF00" />, - info: <Tips color="#0073FF" />, - waiting: <Ask color="#0073FF" />, + success: <Success color={theme.colors.success} />, + error: <Failure color={theme.colors.error} />, + warning: <Warning color={theme.colors.warning} />, + info: <Tips color={theme.colors.info} />, + waiting: <Ask color={theme.colors.info} />,src/styles/variables.scss (1)
2406-2406: 建议补充设计变更说明边距值的调整（图标底部边距、标题底部边距和操作区顶部边距）都遵循了4px的设计规范，这很好。不过建议在代码注释中说明这些数值调整的设计理由，以便其他开发者理解。
建议添加类似以下的注释：
// ResultPage variables + // V14版本设计规范调整： + // 1. 统一使用4px的设计节奏 + // 2. 优化组件的紧凑度和层级关系 $resultpage-width: var(--nutui-resultpage-width, 240px) !default;Also applies to: 2410-2410, 2434-2434
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (15)
src/packages/resultpage/demo.taro.tsx(2 hunks)src/packages/resultpage/demos/h5/demo1.tsx(1 hunks)src/packages/resultpage/demos/h5/demo2.tsx(1 hunks)src/packages/resultpage/demos/h5/demo3.tsx(1 hunks)src/packages/resultpage/demos/h5/demo4.tsx(1 hunks)src/packages/resultpage/demos/taro/demo1.tsx(1 hunks)src/packages/resultpage/demos/taro/demo2.tsx(1 hunks)src/packages/resultpage/demos/taro/demo3.tsx(1 hunks)src/packages/resultpage/demos/taro/demo4.tsx(1 hunks)src/packages/resultpage/resultpage.harmony.css(2 hunks)src/packages/resultpage/resultpage.scss(1 hunks)src/packages/resultpage/resultpage.taro.tsx(4 hunks)src/packages/resultpage/resultpage.tsx(3 hunks)src/packages/resultpage/types.ts(1 hunks)src/styles/variables.scss(2 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/resultpage/resultpage.tsx
[warning] 81-81: src/packages/resultpage/resultpage.tsx#L81
Added line #L81 was not covered by tests
🔇 Additional comments (19)
src/packages/resultpage/types.ts (1)
2-2: 类型更新增强了组件的灵活性！
将 ResultPageStatusOptions 的值类型从 string 更新为 React.ReactNode 是一个很好的改进：
- 支持更丰富的内容展示，包括 React 组件、JSX 元素等
- 与现代 React 开发实践更加匹配
- 保持了向后兼容性，原有的字符串值仍然可以使用
运行以下脚本来验证这个类型更改的影响范围：
✅ Verification successful
类型更新验证完成，改动安全且合理！
通过代码分析，我们发现：
- 该类型仅在 ResultPage 组件及其相关文件中使用
- 默认实现
defaultStatus已经在使用 React 组件作为值（如<Success/>,<Failure/>等） - 没有发现使用字符串值的遗留代码
- Web 和 Taro 版本都已适配新类型
这个改动是完全向后兼容的，且已经在组件实现中得到了正确使用，不会造成任何破坏性影响。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 ResultPageStatusOptions 的使用情况
# 搜索所有使用这个类型的地方
rg -l "ResultPageStatusOptions"
# 检查可能受影响的组件实现
ast-grep --pattern 'const $_ = {
$$$
} as ResultPageStatusOptions'
Length of output: 289
Script:
#!/bin/bash
# 检查 ResultPageStatusOptions 的具体使用情况
rg "ResultPageStatusOptions" -A 5 -B 5
# 检查是否有直接赋值字符串的情况
ast-grep --pattern 'const $_: ResultPageStatusOptions = {
$_: "$_"
}'
# 检查是否已经在使用 React 组件作为值
ast-grep --pattern 'const $_: ResultPageStatusOptions = {
$_: <$_/>
}'
Length of output: 4564
src/packages/resultpage/demos/h5/demo3.tsx (1)
12-17: 按钮文案统一更新已确认
按钮文案从"次要按钮"和"主要按钮"统一更新为"操作按钮"的修改符合V14版本的规范要求。
src/packages/resultpage/demos/h5/demo1.tsx (1)
13-18: 实现符合 V14 规范要求
代码变更正确实现了 V14 版本的适配要求，保持了按钮类型的区分（primary vs default），并与其他 demo 文件保持一致。
src/packages/resultpage/demos/taro/demo1.tsx (1)
13-13: 建议确认按钮文案的可用性设计
两个按钮使用相同的文案"操作按钮"可能会影响用户体验，建议：
- 确认这是否符合 V14 的设计规范
- 考虑通过文案来区分按钮的主次关系，帮助用户理解不同按钮的作用
运行以下脚本来验证其他示例文件中的按钮文案是否保持一致：
Also applies to: 16-16
✅ Verification successful
使用相同的"操作按钮"文案符合设计规范
根据代码库搜索结果，这种按钮文案的使用方式是有意为之的：
- 在所有 ResultPage 和 Empty 组件的示例中都统一使用了"操作按钮"文案
- 通过
type="primary"属性来区分按钮的主次关系，而不是依赖文案区分 - 这种处理方式在 V14 版本的多个组件示例中保持一致
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查其他示例文件中的按钮文案
# 搜索所有 ResultPage 示例文件中的按钮文案
rg -A 2 "text: '操作按钮'" "src/packages/resultpage/demos"
Length of output: 2967
Script:
#!/bin/bash
# 检查 V14 相关的设计规范文档
fd -e md -e mdx . | xargs rg -i "v14.*button|button.*v14|按钮.*v14|v14.*按钮"
# 检查组件文档中关于按钮文案的说明
fd "result.*md|result.*mdx" . | xargs rg -i "button.*text|按钮.*文案|操作按钮"
Length of output: 9766
src/packages/resultpage/demos/h5/demo4.tsx (1)
22-29: 修改符合预期
标题更新为"信息反馈"以及按钮文本更新为"操作按钮"的改动符合 V14 适配要求。
src/packages/resultpage/demos/taro/demo4.tsx (2)
9-14: 更改符合设计规范！
标题和按钮文本的修改与 V14 版本的设计规范保持一致。
22-27: 请确认按钮类型设置
第二个 ResultPage 实例中的按钮没有设置 type 属性。请确认是否有意为之，因为这可能会影响按钮的视觉样式。
建议添加 type 属性以明确按钮类型：
{
text: '操作按钮',
+ type: 'default',
},src/packages/resultpage/resultpage.harmony.css (2)
9-14: 图标样式调整符合设计规范
图标布局和尺寸的调整与 V14 设计规范保持一致，使用 inline-flex 确保了更好的对齐效果。
38-38: 操作区域间距调整合理
将上边距从 21px 调整为 16px 使整体间距更加协调，符合 V14 的设计规范。
src/packages/resultpage/resultpage.scss (2)
8-9: 布局更改看起来不错！
将显示属性更改为 inline-flex 可以提供更好的布局灵活性，同时使用变量控制边距也有助于保持一致性。
10-13: 验证图标尺寸变量的定义
新增的 .nut-icon 嵌套类使用了 $resultpage-icon-size 变量，需要确保该变量在 variables.scss 中正确定义。
✅ Verification successful
变量 $resultpage-icon-size 已正确定义，可以安全使用
变量 $resultpage-icon-size 已在以下文件中定义：
src/styles/variables.scss: 默认值为 36pxsrc/styles/variables-jmapp.scss: 默认值为 48pxsrc/styles/variables-jrkf.scss: 默认值为 48px
所有定义都使用了 CSS 变量 --nutui-resultpage-icon-size 作为回退值，符合设计规范。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查图标尺寸变量的定义
# 在样式文件中查找变量定义
rg -g '*.scss' '\$resultpage-icon-size'
Length of output: 502
src/packages/resultpage/demo.taro.tsx (2)
4-4: 导入语句看起来没有问题！
新增的 web 工具函数导入遵循了现有的导入组织模式。
39-39: ScrollView 的类名修改实现合理，建议验证跨平台兼容性。
条件类名的添加方式符合 React 最佳实践。不过建议验证在不同平台下的表现是否符合预期。
✅ Verification successful
ScrollView 的 web 平台适配实现已得到验证，可以确认其兼容性
代码库中发现了多处类似的平台适配实现：
- 在
toast、progress和countdown等组件中都使用了相同的web()条件判断 - 在样式文件中也发现了对应的
.web类名定义，特别是在packages/nutui-taro-demo/src/app.scss和index.scss中
这表明该适配方案是组件库中普遍采用且经过验证的跨平台实现方式。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证其他组件是否使用了类似的平台适配方案
# 检查其他文件中是否有类似的 web() 条件判断用法
rg "web\(\).+?className" --type tsx
# 检查是否有相关的样式定义
rg "\.web\s*{" --type css --type scss
Length of output: 187
Script:
#!/bin/bash
# 搜索使用 web() 函数的相关代码
rg "web\(\)"
# 搜索包含 .web 类名的样式定义
rg "\.web\s+"
# 查找所有可能的 web 平台适配相关文件
fd -e scss -e css -e less
Length of output: 11140
src/packages/resultpage/resultpage.tsx (2)
1-1: 导入声明更新符合最佳实践
从 @nutui/icons-react 导入图标组件替代原有的图片 URL 方案，这样的改进提高了代码的可维护性和性能。
Also applies to: 3-3
61-63: 图标渲染逻辑优化合理
简化后的图标渲染逻辑更加清晰，同时保持了自定义图标的灵活性。
src/packages/resultpage/resultpage.taro.tsx (3)
1-1: 从图片 URL 迁移到图标组件的改进
使用 @nutui/icons-react-taro 的图标组件替代原有的图片 URL 方案是一个很好的改进：
- 减少了网络请求
- 支持更灵活的样式定制
- 有利于打包优化
Also applies to: 3-4
67-69: 图标渲染逻辑优化得当
新的图标渲染实现更加简洁清晰，使用短路运算符的方式很恰当。
88-88: 按钮尺寸变更可能影响现有实现
将按钮尺寸从 "small" 改为 "large" 是一个破坏性更改，可能会影响到现有的页面布局。
建议运行以下脚本来检查使用情况：
src/styles/variables.scss (1)
2402-2403: 布局尺寸调整合理
宽度和图标尺寸的调整保持了4px的设计节奏，有助于维持视觉的一致性。
| @@ -9,10 +9,10 @@ const Demo1 = () => { | |||
| status="warning" | |||
| actions={[ | |||
| { | |||
| text: '次要按钮', | |||
| text: '操作按钮', | |||
There was a problem hiding this comment.
💡 Codebase verification
按钮文案需要进一步统一
在检查结果中发现，大部分demo文件已经统一使用了"操作按钮"作为按钮文案，但是在 src/packages/resultpage/demos/h5/demo4.tsx 中仍然存在一处使用"主要操作"的情况，这与其他demo文件的统一标准不一致。
src/packages/resultpage/demos/h5/demo4.tsx: 需要将"主要操作"修改为"操作按钮"以保持一致性
🔗 Analysis chain
按钮文案统一更新已完成
按钮文案的统一更新符合V14版本的规范要求，使用"操作按钮"替换原有的"次要按钮"和"主要按钮"，提升了用户界面的一致性。
运行以下脚本验证其他demo文件中的按钮文案是否已统一更新：
Also applies to: 15-15
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查所有demo文件中的按钮文案是否已统一更新
# 搜索所有demo文件中的按钮文案
rg -g "src/packages/resultpage/demos/**/*.tsx" "text: '[^']*'"
Length of output: 1201
| @@ -10,10 +10,10 @@ const Demo1 = () => { | |||
| status="error" | |||
| actions={[ | |||
| { | |||
| text: '次要按钮', | |||
| text: '操作按钮', | |||
There was a problem hiding this comment.
💡 Codebase verification
按钮文案需要统一规范
发现 src/packages/resultpage/demos/h5/demo4.tsx 中存在不一致的按钮文案：
- 一个按钮使用 "主要操作"
- 另一个按钮使用 "操作按钮"
建议将所有按钮文案统一修改为 "操作按钮"，以保持整体设计规范的一致性。
🔗 Analysis chain
按钮文案修改符合规范！
按钮文案从"次要按钮"和"主要按钮"统一更新为"操作按钮"的修改符合V14版本的设计规范。
运行以下脚本验证其他demo文件中的按钮文案是否已统一更新：
Also applies to: 16-16
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证所有ResultPage demo文件中的按钮文案更新情况
# 搜索所有demo文件中的按钮文案
rg -U "text: '[^']*'" "src/packages/resultpage/demos"
Length of output: 1190
| description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行" | ||
| status="info" | ||
| actions={[ | ||
| { | ||
| text: '主要按钮', | ||
| text: '主要操作', |
There was a problem hiding this comment.
按钮文本不一致
根据其他 demo 文件的修改，此处的按钮文本应该使用"操作按钮"而不是"主要操作"，以保持整体一致性。
建议修改如下：
- text: '主要操作',
+ text: '操作按钮',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| text: '主要操作', | |
| text: '操作按钮', |
| <Button {...rest} size="large"> | ||
| {action?.text} | ||
| </Button> |
There was a problem hiding this comment.
💡 Codebase verification
需要补充按钮尺寸的测试用例
根据代码分析，ResultPage 组件的测试文件中缺少对按钮尺寸属性的测试覆盖。建议在 src/packages/resultpage/__test__/resultpage.spec.tsx 中添加以下测试场景：
- 验证按钮默认渲染为 large 尺寸
- 验证传入不同 size 属性时的按钮表现
- 验证多个操作按钮时的尺寸一致性
具体测试点：
- 在
should render actions correctly测试用例中增加对 size="large" 属性的断言 - 添加新的测试用例验证按钮尺寸的正确性
🔗 Analysis chain
按钮尺寸标准化需要补充测试
统一使用 "large" 尺寸的更改是合理的，但缺少测试覆盖。建议添加相关测试用例。
需要验证按钮在不同场景下的表现：
是否需要我帮助编写测试用例？
Let me check the test coverage for this specific component and its button size usage.
Let me check the content of the existing test file to see what's already covered.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他组件是否也使用了固定的 large 尺寸
rg -l "size=\"large\"" src/packages/
Length of output: 845
Script:
#!/bin/bash
# Check if there are existing tests for resultpage component
fd "resultpage" -e spec.tsx -e test.tsx src/packages/resultpage/
# Check the content of any existing test files
rg -A 5 "Button.*size" src/packages/resultpage/__tests__/ || echo "No test files found with Button size tests"
# Check the actual implementation to understand the button usage context
rg -A 5 "Button.*size" src/packages/resultpage/resultpage.tsx
Length of output: 567
Script:
#!/bin/bash
# Check content of the existing test file
cat src/packages/resultpage/__test__/resultpage.spec.tsx
# Also check if there are any button size related tests in button component
rg -A 5 "size.*large" src/packages/button/__tests__/
Length of output: 1531
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 81-81: src/packages/resultpage/resultpage.tsx#L81
Added line #L81 was not covered by tests
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (3)
src/packages/resultpage/doc.md (1)
75-77: CSS 变量默认值的调整符合设计规范以下调整优化了组件的视觉呈现：
- 内容区域宽度调整为 240px，更符合移动端布局
- 图标尺寸调整为 36px，视觉层级更合理
- 间距值的优化使布局更加紧凑美观
建议在文档中补充这些调整的设计理由，以便开发者更好地理解。
建议在文档中添加如下说明：
| 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-resultpage-width | 内容区域宽度 | `240px` | +| \--nutui-resultpage-width | 内容区域宽度（适配移动端） | `240px` |Also applies to: 78-78, 84-84
src/packages/resultpage/doc.taro.md (1)
84-84: 变量名称存在拼写错误
--nutui-resultpage-actions-margin-topt中的 "topt" 应该修改为 "top"。建议修改为：
-| \--nutui-resultpage-actions-margin-topt | 操作区域的margin-top值 | `16px` | +| \--nutui-resultpage-actions-margin-top | 操作区域的margin-top值 | `16px` |src/packages/resultpage/doc.en-US.md (1)
75-77: 建议补充设计变更说明CSS 变量的调整显示出向更紧凑的设计过渡：
- 内容区域宽度从 247px 减少到 240px
- 图标尺寸从 48px 缩小到 36px
- 间距值统一进行了调整
建议在文档中补充说明这些设计调整的原因，以帮助使用者理解 V14 版本的设计理念变化。
+ ## Design Changes in V14 + + The ResultPage component has been redesigned with a more compact layout: + - Reduced content width for better mobile adaptation + - Smaller icon size for improved visual hierarchy + - Optimized spacing for better content densityAlso applies to: 78-78, 84-84
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/packages/resultpage/doc.en-US.md(2 hunks)src/packages/resultpage/doc.md(2 hunks)src/packages/resultpage/doc.taro.md(2 hunks)src/packages/resultpage/doc.zh-TW.md(2 hunks)
🔇 Additional comments (4)
src/packages/resultpage/doc.md (1)
61-61: 表格格式规范，内容准确！
表格中 title 属性的描述清晰，格式统一。
src/packages/resultpage/doc.taro.md (2)
61-61: 格式调整正确！
Props 表格中的格式调整提高了文档的可读性。
75-77: CSS 变量默认值更新合理！
默认值的调整符合 V14 的设计规范，保持了组件样式的一致性。
Also applies to: 78-78, 84-84
src/packages/resultpage/doc.en-US.md (1)
61-61: 文档保持一致性
属性定义保持不变，符合组件规范。
| | \--nutui-resultpage-actions-margin-topt | 操作區域的margin-top值 | `16px` | |
There was a problem hiding this comment.
修正 CSS 变量名称中的笔误
变量名中有拼写错误，"margin-topt" 应该为 "margin-top"。
-| \--nutui-resultpage-actions-margin-topt | 操作區域的margin-top值 | `16px` |
+| \--nutui-resultpage-actions-margin-top | 操作區域的margin-top值 | `16px` |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | \--nutui-resultpage-actions-margin-topt | 操作區域的margin-top值 | `16px` | | |
| | \--nutui-resultpage-actions-margin-top | 操作區域的margin-top值 | `16px` | |
src/packages/resultpage/doc.zh-TW.md
Outdated
| | \--nutui-resultpage-icon-margin-bottom | icon的margin-bottom值 | `16px` | | ||
| | \--resultpage-title-margin-bottom | 標題的margin-top值 | `9px` | | ||
| | \--nutui-resultpage-width | 內容區域寬度 | `240px` | | ||
| | \--nutui-resultpage-icon-size | icon的寬高 | `36x` | |
There was a problem hiding this comment.
修正图标尺寸单位的笔误
单位值写错了，"36x" 应该为 "36px"。
-| \--nutui-resultpage-icon-size | icon的寬高 | `36x` |
+| \--nutui-resultpage-icon-size | icon的寬高 | `36px` |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | \--nutui-resultpage-icon-size | icon的寬高 | `36x` | | |
| | \--nutui-resultpage-icon-size | icon的寬高 | `36px` | |
| font-size: 20px; | ||
| width: 240px; | ||
| margin-bottom: 12px; | ||
| font-size: 18px; |
There was a problem hiding this comment.
是不是应该使用 sass 变量，包括 margin-bottom
| @@ -10,10 +10,10 @@ const Demo1 = () => { | |||
| status="success" | |||
| actions={[ | |||
| { | |||
| text: '次要按钮', | |||
| text: '操作按钮', | |||
There was a problem hiding this comment.
次要和主要，主要是搭配着 按钮的语义来写的~可以保留
There was a problem hiding this comment.
都统一改成 主要操作、次要操作、信息反馈 这些文案吧
| @@ -5,10 +5,12 @@ | |||
| align-items: center; | |||
| margin: 0 auto; | |||
| &-icon { | |||
| height: $resultpage-icon-size; | |||
| width: $resultpage-icon-size; | |||
| display: inline-flex; | |||
There was a problem hiding this comment.
有一种情况，如果用户使用的不是 nut icon库，会怎么样呢~
| <Image src={iconSrc} className={`${classPrefix}-icon`} /> | ||
| ) : null} | ||
| <View className={`${classPrefix}-icon`}> | ||
| {icon || defaultStatus[status]} |
There was a problem hiding this comment.
icon 这个可以参考一下 pagination 的处理~ 我觉得那个方法还不错
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/config.json (1)
Line range hint
1-1000: 建议：考虑版本管理策略目前只有 ResultPage 和 Pagination 组件标记了 v14 适配。建议：
- 建立明确的版本升级指南
- 考虑在配置中添加
deprecatedVersion字段，用于标记将在未来版本中移除的特性- 添加版本迁移文档，帮助用户从 v13 升级到 v14
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/config.json(1 hunks)
🔇 Additional comments (1)
src/config.json (1)
771-771: 确认 ResultPage 组件的 v14 适配更改
组件标记为 v14 适配，请确保：
- 相关的样式和功能更改已完成
- 文档已更新以反映 v14 的变化
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
AnimatingNumbers、AvatarGroup和SwiperItem，扩展了组件库。ResultPage和Pagination组件的版本标识。样式调整