feat(price): v15 #2885
feat(price): v15 #2885
Conversation
概述演练本次更新主要针对 NutUI React 从 2.x 版本迁移到 3.x 版本，涉及 Price 组件的多个方面的改进。更新包括引入新的尺寸选项（如 xlarge）、新增颜色属性、调整组件样式和文档，并对组件的渲染逻辑进行了重构。这些变更旨在提高组件的灵活性和可定制性。 变更
可能相关的 PR
建议标签
建议评审人oasis-cloud 诗歌
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 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: 5
🧹 Nitpick comments (19)
src/packages/price/demos/h5/demo8.tsx (1)
7-7: 移除了千位分隔和小数位后，默认展示与预期一致。
若需其他显示规则，建议在组件属性中显式配置。src/packages/price/types.ts (1)
5-14: 接口字段定义合理
PriceProps的各字段功能清晰，如symbol、digits、thousands、position、line等都很有针对性；price兼容 number 与 string，增强了灵活性；type结合PriceType也有助于避免拼写错误。可以进一步考虑将position也改为字面量类型来统一规范，但目前这样使用也无明显问题。src/packages/price/demos/taro/demo1.tsx (2)
2-2: 建议保留模块化导入顺序一致性
导入CellGroup后，可以考虑与现有的导入顺序保持一致，增强可读性和维护性。
14-14: 大尺寸价格展示场景
size="large"一般在强调价格场景使用，建议结合设计规范或视觉要求统一处理相关样式。src/packages/price/demos/h5/demo9.tsx (2)
4-9: 样式对象书写规范
在行内样式采用对象形式时，建议在团队内统一命名与注释规范，避免多人维护时的混淆。
10-15: 多份样式对象重复可考虑合并
如若后续还会增加相似样式，可考虑合并重复属性并通过传参方式定制差异，减少冗余。src/packages/price/demos/taro/demo9.tsx (1)
17-41: 多种价格信息展示时需警惕可维护性
一次性渲染多种样式需注意不同平台对 DOM 或组件的限制，后续若还有新增可能需要拆分成可复用的子组件。src/packages/price/demo.tsx (3)
24-24: 细化文案描述
“场域分类”可考虑补充更多示例说明，帮助用户理解该分类场景与业务的关系。
47-47: 强调“Field classification”含义
若将来组件扩展更多分类场景，可考虑单独撰写文档章节描述这些类别及其适用场景。
55-56: 在示例中优先展示新功能
将Demo9接在前面展示能强调其新增特色，但请留意用户体验，以防重要功能被埋没。src/packages/price/price.taro.tsx (2)
11-17: 默认属性新增type与修改size建议补充测试
这里为Price组件新增了type: 'primary'，且将size默认值设为normal。建议在单元测试或示例中验证这两个属性的显示效果，避免遗漏边缘场景。
59-60: 数值格式化逻辑可再封装避免重复
该处formatThousands函数部分逻辑与checkPoint存在可能重复的判断，建议提取或精简，以提升可读性与可维护性。src/packages/price/price.scss (2)
16-25:.nut-price-darkgray的嵌套写法较深，后续维护可能有风险
内层再写.nut-price-xxx会增加选择器层级，遇到多主题或其他修改时容易冲突，建议在结构及命名上保持简洁。
40-49: 新增&-xlarge与&-normal亟须与设计规范对齐
多一档尺寸时，需核对与其他字号、行高在设计系统中的适配度。建议测试多语言场景下的渲染差异。src/packages/price/doc.taro.md (1)
21-28: 新增 “场域分类” 小节合理，但篇幅可再充实
作为新增章节，简单列出原子级、模块级等分类后，最好给出可视化、示例或最佳实践，帮助使用者快速理解差异与应用场景。src/packages/price/doc.md (2)
13-28: 新增的场域分类部分需要补充说明建议为场域分类（原子级、模块级、列表级、页面级）添加具体的使用场景说明和示例，以帮助开发者更好地理解和选择合适的使用方式。
91-91: Props 表格中的新属性说明需要完善建议补充以下内容：
type属性的使用场景说明，解释每种类型的适用情况size属性中xlarge尺寸的推荐使用场景Also applies to: 97-97
src/styles/jd-font.scss (1)
1-16: 字体声明实现规范！字体声明的实现遵循了最佳实践，包括:
- 使用
font-display: swap避免 FOIT (Flash of Invisible Text)- 正确设置字重 (regular 400, bold 700)
- 使用 base64 编码避免额外的网络请求
建议考虑以下优化:
- 可以考虑使用
preload预加载关键字体- 可以考虑使用
unicode-range限制字体文件的字符范围，减小字体文件大小示例:
<link rel="preload" href="data:font/ttf;charset=utf-8;base64,..." as="font" type="font/ttf" crossorigin >src/styles/variables.scss (1)
809-828: 价格组件其他尺寸变量优化合理对 large、normal 和 small 尺寸的变量进行了优化：
- 统一了命名规范
- 调整了各部分的大小比例
- 保持了视觉层级的一致性
建议考虑添加以下变量以提高灵活性：
$price-font-family: var(--nutui-price-font-family, $font-family) !default; $price-line-height: var(--nutui-price-line-height, 1.5) !default;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/price/__test__/__snapshots__/price.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (38)
migrate-from-v2.md(1 hunks)src/packages/cell/cell.taro.tsx(1 hunks)src/packages/cell/cell.tsx(1 hunks)src/packages/cell/index.taro.ts(1 hunks)src/packages/cell/index.ts(1 hunks)src/packages/cell/types.ts(1 hunks)src/packages/price/demo.taro.tsx(3 hunks)src/packages/price/demo.tsx(2 hunks)src/packages/price/demos/h5/demo1.tsx(1 hunks)src/packages/price/demos/h5/demo2.tsx(1 hunks)src/packages/price/demos/h5/demo3.tsx(1 hunks)src/packages/price/demos/h5/demo4.tsx(1 hunks)src/packages/price/demos/h5/demo5.tsx(1 hunks)src/packages/price/demos/h5/demo6.tsx(1 hunks)src/packages/price/demos/h5/demo7.tsx(1 hunks)src/packages/price/demos/h5/demo8.tsx(1 hunks)src/packages/price/demos/h5/demo9.tsx(1 hunks)src/packages/price/demos/taro/demo1.tsx(1 hunks)src/packages/price/demos/taro/demo2.tsx(1 hunks)src/packages/price/demos/taro/demo3.tsx(1 hunks)src/packages/price/demos/taro/demo4.tsx(1 hunks)src/packages/price/demos/taro/demo5.tsx(1 hunks)src/packages/price/demos/taro/demo6.tsx(1 hunks)src/packages/price/demos/taro/demo7.tsx(1 hunks)src/packages/price/demos/taro/demo8.tsx(1 hunks)src/packages/price/demos/taro/demo9.tsx(1 hunks)src/packages/price/doc.en-US.md(3 hunks)src/packages/price/doc.md(3 hunks)src/packages/price/doc.taro.md(3 hunks)src/packages/price/doc.zh-TW.md(4 hunks)src/packages/price/index.taro.ts(1 hunks)src/packages/price/index.ts(1 hunks)src/packages/price/price.scss(3 hunks)src/packages/price/price.taro.tsx(3 hunks)src/packages/price/price.tsx(4 hunks)src/packages/price/types.ts(1 hunks)src/styles/jd-font.scss(1 hunks)src/styles/variables.scss(1 hunks)
✅ Files skipped from review due to trivial changes (4)
- src/packages/price/demos/h5/demo5.tsx
- src/packages/price/demos/h5/demo7.tsx
- src/packages/price/demos/h5/demo6.tsx
- src/packages/price/demos/taro/demo3.tsx
🧰 Additional context used
🪛 Markdownlint (0.37.0)
src/packages/price/doc.zh-TW.md
104-104: null
Link fragments should be valid
(MD051, link-fragments)
🔇 Additional comments (79)
src/packages/cell/index.ts (1)
3-3: 导出新类型用法良好
添加了 CellAlign 和 CellProps 的完整导出，便于在其他文件中统一使用。整体实现简洁清晰，可保持。
src/packages/cell/index.taro.ts (1)
3-3: 类型统一管理更具可维护性
与 index.ts 文件保持一致，将 CellProps 和 CellAlign 集中到 ./types，有助于后续维护和扩展。
src/packages/price/index.ts (1)
3-3: 新增类型有助于增强拓展性
一次性导出 PriceProps, PriceSize, PriceType，方便后续分层管理与引用，结构更清晰。
src/packages/price/index.taro.ts (1)
3-3: 类型拆分更利于组件复用
将 PriceProps、PriceSize、PriceType 从 ./types 中导出，清晰地分隔了不同功能的属性分类，推荐保留此设计。
src/packages/price/demos/taro/demo6.tsx (1)
7-7: 此处移除 size 属性后用法简洁，符合最新 API 规范。
此修改看起来没问题，可继续保持。
src/packages/price/demos/h5/demo3.tsx (1)
7-7: 使用千分位配置与新版 API 接口保持一致。
当前写法更清晰，且无多余属性，建议保留。
src/packages/price/demos/h5/demo2.tsx (1)
7-7: 修改 price 并去掉 size 属性后更符合改版需求。
功能正常，推荐保留此方式。
src/packages/price/demos/h5/demo4.tsx (1)
7-7: 保留 digits 与 thousands 属性即可满足需求，移除 size 属性后无兼容性问题。
代码简洁明了，符合设计初衷。
src/packages/price/demos/taro/demo2.tsx (1)
7-7: 请确认 digits=0 的设置是否符合业务预期。
如果您希望保留小数位，请考虑将其设置为其他值；否则，金额将被截断至整数显示。
src/packages/price/demos/taro/demo4.tsx (1)
7-7: 此处展示三位小数可提供更精确的价格信息。
如果这是您想要的精度范围，则无需进一步修改。
src/packages/price/demos/taro/demo5.tsx (1)
7-7: 请留意 Price 组件的默认小数位。
当前示例未显式声明 digits，如果需要特定的精度，可在此处添加相应配置。
src/packages/price/demos/h5/demo8.tsx (2)
6-6: 对齐方式改为 baseline 可能会影响文本与图标等元素的垂直对齐。
请确认是否满足设计需求。
9-9: 新增 type="gray" 与 size="small" 搭配划线价格线，提升样式区分度。
请确保在产品设计中，灰色和小号样式符合需求。
src/packages/price/types.ts (2)
1-2: 导入声明检查
这行导入 BasicComponent 看起来正常，但要确保其他文件中确实需要此基础类型，如果在后续实际使用中并没有依赖该类型，可考虑去除以简化依赖关系。
3-4: 类型声明命名清晰
PriceSize 和 PriceType 两个类型声明语义明确，使用字面量类型能有效限制可选值范围，提升可维护性。
src/packages/cell/types.ts (3)
1-2: 基础类型导入验证
同理，若 BasicComponent 未在本接口内用到其附加属性或方法，可后续评估是否需要去除依赖以减轻耦合。
3-4: 布局对齐方式可行
CellAlign 提供了 CSS 常见的 flex-start、center 等可选值，扩展性较好。
5-14: CellProps 的字段命名直观
title、description、extra 均采用 React.ReactNode 类型，能方便插入自定义组件；onClick 回调的类型也与常规写法保持一致。请确保业务上正确处理可点击与不可点击的逻辑。
src/packages/price/demos/taro/demo7.tsx (1)
17-17: 动态价格演示恰当
此处的 Price 使用了 digits 与 thousands 属性，能展示格式化后的价格。建议在文档中强调此示例可观察价格随时间变动，以便使用者了解组件动态刷新场景。
src/packages/price/demos/h5/demo1.tsx (6)
2-2: 新增依赖组件
引入的 CellGroup 有助于在展示多个 Cell 时保持一致的布局结构，便于排版与分组管理。
6-6: 分组标签使用
使用 <CellGroup> 包裹 <Cell> 组件，可以让布局更有层次，且与 NutUI 的设计习惯一致。
8-8: 小尺寸价格
<Price price={618.68} size="small" thousands /> 显示效果更紧凑，适合场景较小或空间有限的价格展示，逻辑上无问题。
11-11: 普通尺寸价格
size="normal" 同样简洁，符合默认用例。
14-14: 大尺寸价格
size="large" 对于重点突出价格的场景很有用。
16-19: 超大尺寸价格和布局包裹
size="xlarge" 能满足更显眼的展示需求，未来如需更灵活的字号配置，可考虑让用户完全自定义样式或扩展更多尺寸。使用 <Cell> 包裹也能保持组件一致性。
src/packages/price/demos/taro/demo1.tsx (4)
6-7: 此处使用 CellGroup 包裹 Cell 可读性更强
该结构能够使组件层次更清晰，便于后续维护和调整。
8-8: 建议确认价格来源的真实性
在示例中使用常量价格 618.68 仅用于演示，但在实际环境中应确保数值来源可靠并考虑国际化等需求。
11-11: 保持组件属性一致性
size="normal" 在说明文档中已经提及，可以与其他示例例如 xlarge 一同出现在组件使用说明里，以免用户混淆。
16-19: ** xlarge 尺寸可用性检查**
新增的 xlarge 尺寸展示丰富了组件的使用场景，但需确认当前项目无排版或样式冲突。
src/packages/price/demos/h5/demo9.tsx (3)
1-3: 导入语句简洁性
这里导入的组件较多，但都来自同一库，让人一目了然。对于日后维护来说，可读性良好。
17-41: 价格与描述信息配合展示
同一行同时展示多种价格信息，布局与样式已经较清晰，建议保持此组件在不同业务场景中的一致性。
42-42: 默认导出组件命名保持统一
export default Demo9 与文件命名保持一致，后期维护检索时更加便捷。
src/packages/price/demos/taro/demo9.tsx (4)
1-3: Taro 端组件导入合理
引入 Cell、CellGroup、Price 三者配合得当，可复用现有组件生态。
4-5: 自定义工具函数 harmony() 用法检查
对于某些平台差异化处理逻辑，需确保该函数返回值在不同环境下符合预期。
6-15: 样式对象命名规范
在统一管理样式时，推荐保持字段含义与页面或组件功能相符合，比如 exclusivePriceStyles 与业务场景对应明显。
42-46: 默认导出命名唯一性
Demo9 已与文件名对齐，有助于分辨示例组件的用途并提升调试效率。
src/packages/price/demo.tsx (5)
11-11: 新示例引入位置合适
在所有 Demo 组件后导入 Demo9，可以帮助开发者按顺序体验功能增强点。
16-16: 文案更新同步说明
标题 title1 中包含 xlarge，需同文档持续保持一致，避免文档或示例间出现不一致问题。
27-27: 繁体文案与简体文案保持同步
确保用户在不同语言环境均能看到对应的功能介绍。
35-35: 繁体标题文案的一致性
与标题 title1 字段相互呼应，避免用户在阅读文档时产生误解。
38-38: 英文文案简洁清晰
Support sizes：small、normal、large、xlarge 文案易于理解，可与中文版本通过注释或文档互相参照。
src/packages/price/demo.taro.tsx (9)
14-14: 导入 Demo9 组件值得肯定
该改动为页面新增演示模块，能有效展示新功能。
19-19: title1 中增加 “xlarge” 尺寸
此处更新了尺寸选项，确保文档和实际功能保持一致。
27-27: 新增 title9 翻译文案
为示例补充了场域分类的说明，信息更加清晰。
30-30: 繁体中文也同步增加 “xlarge”
保持多语言翻译一致性，做得很好。
38-38: 更新繁体中文场域分类文案
文本“場域分類：原子級、模塊級、列表級、頁面級”翻译准确。
41-41: title1 英文翻译中包含 “xlarge”
保持与中文翻译同步，可读性良好。
50-50: 新增英文 title9
对英文版演示场域分类提供了清晰描述。
59-59: 新增对 title9 的演示标题
为 Demo9 提供了必要的标题，方便用户理解。
60-60: 渲染 Demo9 组件
成功将 Demo9 引入演示页面，助于功能效果展示。
src/packages/cell/cell.tsx (3)
1-1: 引入 React Hooks 和 FunctionComponent
这一步为后续的组件逻辑提供了必要依赖。
3-3: 新增 ComponentDefaults
确保默认属性来源明确，可增强组件可维护性。
7-7: 使用独立类型文件中的 CellProps
减少重复声明，清晰管理类型定义。
src/packages/cell/cell.taro.tsx (3)
1-1: 引入 React、FunctionComponent 和 useContext
与主平台版本保持一致，让组件在 Taro 中具备相同功能。
4-4: 使用 ComponentDefaults
为 Taro 环境下的 Cell 组件提供统一默认属性。
9-9: 从 types 文件中引入 CellProps
集中管理类型，便于后续维护与扩展。
src/packages/price/price.tsx (8)
3-3: 引入 ComponentDefaults
为 Price 组件提供统一默认属性，避免重复定义。
5-5: 引入 PriceProps
从独立文件导入类型，提升代码的可读性和可维护性。
9-9: 新增参数 type: 'primary'
默认值为 'primary'，有助于自定义价格风格。
15-15: 修改默认 size 为 'normal'
改动与“xlarge”功能的更新相吻合，设定更灵活。
20-20: 在解构中增加 type
让组件可根据不同类型动态渲染，增强灵活度。
49-49: 格式化数字的逻辑调整
在检查小数点和处理千分位之前进行强制转换，保证安全性。
96-96: 在 className 中根据 type 动态设置样式
有效区分不同价格类型的视觉表现。
108-124: 管理小数点渲染
通过 <>{...}</> 组合展示小数点与小数区段，逻辑清晰且易扩展。
src/packages/price/price.taro.tsx (4)
2-4: 引入 Taro 组件的方式正确，但建议审视依赖层级
此处同时使用 Text、View 以及自定义组件，整体无问题。但若项目结构调整，可能需核对对应依赖路径。
6-6: 从独立文件导入 PriceProps 可提升可维护性
外部声明的 PriceProps 接口结构更清晰，引用时避免重复定义，可读性提高。
Line range hint 22-40: 结构拆分合并后建议注意同名属性覆盖顺序
通过解构 { ...defaultProps, ...props } 可覆盖默认属性，但需保持默认属性与用户传入属性间的优先级清晰，尽可能避免后续属性命名冲突。
141-158: 基于 harmony() 判断选择 Taro 原生组件的方式可行
此处通过三元运算符渲染 Text 或 View，逻辑清晰。后续若有多平台或多端需求时，可进行更系统的抽象。
src/packages/price/demos/taro/demo8.tsx (2)
7-7: Cell 使用 align="baseline" 合理，但需在不同设备上验证
在小屏、老式机型或各端口可能呈现差异，建议在示例或文档中补充兼容性说明。
8-10: Price 组件新版属性运用正确，注意小数与千位数分隔场景
price={618.68} 及 price={1080.68} 均未启用 thousands；若后续展示更大数值，最好在演示中添加千位分隔的用例，保证示例全面。
src/packages/price/price.scss (4)
11-14: 统一使用 $price-color 并指定字体有助于视觉一致性
整体统一了默认颜色为 $price-color，并强制使用 'JD' 字体，可有效减少 UI 差异，但需与设计团队确认跨平台字体可用性。
27-35: .nut-price-primary 同样采用嵌套写法，稳定性需考量
与 .nut-price-darkgray 一致，需要注意选择器串联深度，以免后续覆盖不易控制。
63-72: &-integer 尺寸变体增多，注意数值换行与折叠问题
当整数部分过长时，在小屏幕窄容器里可能出现布局问题，建议确认是否需额外的换行处理或文字缩放策略。
81-90: 为 &-decimal 引入多档尺寸，需与整数部分配合测试
小数部分若与整数部分尺寸差距过大，视觉上可能不协调。可在文档或示例展示不同尺寸搭配效果。
src/packages/price/doc.taro.md (2)
13-13: 文档强调 xlarge 新增尺寸，示例需详述适用场景
当前仅单独列举新增尺寸，建议在后续示例中加入高亮说明或对比图，以帮助开发者做出更恰当的选择。
91-96: Props 表中引入 type 与 size 的更多选项，请补充边缘用例
目前只指明用例 darkgray、gray、xlarge 等，建议在 Demo 或文档查看如何与 thousands、symbol 等属性配合使用。
migrate-from-v2.md (1)
750-751: 价格组件 API 变更说明清晰
文档清晰地说明了 Price 组件的两个重要变更：
- 新增 'xlarge' 尺寸选项
- 新增 'type' 属性用于设置价格类型
src/styles/variables.scss (2)
782-792: 价格相关的颜色变量定义合理
颜色变量的定义遵循了良好的实践：
- 使用语义化的命名
- 提供默认值和 CSS 变量支持
- 保持与设计系统的一致性
798-806: 新增 xlarge 尺寸变量定义完整
为 xlarge 尺寸定义了完整的变量集：
- 符号大小: 12px
- 整数部分: 24px
- 小数部分: 12px
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/packages/cell/cell.taro.tsx (3)
Line range hint
11-15: 建议添加接口文档注释为了提高代码的可维护性，建议为
CellTaroProps接口添加 JSDoc 文档注释，说明其用途和参数含义。建议添加如下文档：
+/** + * Taro 环境下 Cell 组件的属性接口 + * @extends CellProps 基础 Cell 组件属性 + * @property onClick 点击事件处理函数，支持 React 标准事件和 Taro 事件 + */ interface CellTaroProps extends CellProps { onClick: ( event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent ) => void }
Line range hint
17-29: 建议优化 radius 属性的处理方式当前 radius 属性使用固定值 '6px'，建议考虑以下改进：
- 支持主题配置
- 允许使用不同的单位（如 rem、em 等）
建议修改如下：
const defaultProps = { ...ComponentDefaults, title: null, description: null, extra: null, - radius: '6px', + radius: ComponentDefaults.radius || '6px', align: 'flex-start', clickable: false, isLast: false, onClick: ( event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent ) => {}, } as CellTaroProps
33-35: 建议优化组件性能组件实现基本合理，但建议考虑以下优化：
- 使用
useCallback优化handleClick函数- 使用
useMemo优化样式计算建议修改如下：
+ import React, { FunctionComponent, useContext, useCallback, useMemo } from 'react' // ... 其他代码 ... - const handleClick = ( - event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent - ) => { - onClick(event) - } + const handleClick = useCallback( + (event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent) => { + onClick(event) + }, + [onClick] + ) - const baseStyle = { - ...style, - borderRadius: pxTransform(radiusNumber), - alignItems: align, - } + const baseStyle = useMemo( + () => ({ + ...style, + borderRadius: pxTransform(radiusNumber), + alignItems: align, + }), + [style, radiusNumber, align] + )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/cell/cell.taro.tsx(2 hunks)
🔇 Additional comments (1)
src/packages/cell/cell.taro.tsx (1)
1-10: 导入声明看起来很合理！
代码结构清晰，依赖项导入合理，将 CellProps 类型定义移至单独的类型文件是个很好的重构决定。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2885 +/- ##
=============================================
+ Coverage 85.85% 85.88% +0.02%
=============================================
Files 271 271
Lines 18393 18429 +36
Branches 2721 2726 +5
=============================================
+ Hits 15791 15827 +36
Misses 2597 2597
Partials 5 5 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/price/doc.en-US.md (1)
21-27: 建议补充字段分类的详细说明当前的字段分类部分缺少对 atomic、module、list、page 这些分类的具体解释说明。建议添加：
- 每种分类的使用场景
- 各分类之间的区别
- 最佳实践建议
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/price/doc.en-US.md(3 hunks)
🔇 Additional comments (2)
src/packages/price/doc.en-US.md (2)
97-97: size 属性默认值不一致
英文文档中 size 属性的默认值为 large，而中文文档中为 normal，需要统一默认值。
建议修改为：
-| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `large` |
+| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` |108-124: CSS 变量文档结构清晰完整
新增的 CSS 变量文档：
- 命名规范统一
- 分类清晰（按类型和尺寸分组）
- 默认值设置合理
- 描述准确
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/packages/price/doc.en-US.md (1)
97-97:⚠️ Potential issue修复 size 属性默认值不一致
英文文档中 size 属性的默认值为
large，而组件实现中默认值为normal，需要保持一致。建议修改为：
-| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `large` | +| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` |
🧹 Nitpick comments (8)
src/packages/price/demos/taro/demo9.tsx (2)
6-19: 【样式定义可合并优化】
colorStyles、exclusivePriceStyles和priceStyles都是简单的样式对象，若重复使用较多，可以考虑提取出公共逻辑，减少重复定义。
46-46: 【默认导出方式注意与命名导出一致性】
组件已默认导出Demo9，若需要与其他组件形成统一风格，可在团队内部确认导出方式与命名规则的统一。src/packages/price/demos/h5/demo9.tsx (2)
4-9: 建议将内联样式拆分为可复用的类
目前通过对象合并的方式定义内联样式，若样式需求增多，可考虑使用 CSS 或者 styled 组件以便增强可维护性。
17-40: 多个<Cell>组件示例存在重复代码
同一段示例中多次展示仅尺寸与文案不同的用法，建议通过动态参数或循环生成的方式减少重复，提高可维护性。src/packages/price/types.ts (1)
5-14: 可进一步提高类型约束
目前position: string可以考虑使用'before' | 'after'等字面量类型，以保证在调用时得到更好的编译期检查。src/packages/price/doc.md (1)
21-22: 场域分类段落可添加更多示例
仅以标题概括场景分类可能比较抽象，适当增加说明或示例能让使用者更快理解。src/packages/price/price.tsx (1)
108-124: 优化小数部分的渲染逻辑当前实现将小数点和小数值分开渲染，这可能导致样式不一致。建议考虑以下优化：
- 合并小数点和小数值的渲染，减少 DOM 节点
- 确保小数点和数值的样式保持一致
建议修改为：
- {digits ? ( - <> - <div - className={`${classPrefix}-decimal ${classPrefix}-decimal-${size} ${ - line ? `${classPrefix}-line` : '' - }`} - > - . - </div> - <div - className={`${classPrefix}-decimal ${classPrefix}-decimal-${size} ${ - line ? `${classPrefix}-line` : '' - }`} - > - {formatDecimal(price)} - </div> - </> - ) : null} + {digits ? ( + <div + className={`${classPrefix}-decimal ${classPrefix}-decimal-${size} ${ + line ? `${classPrefix}-line` : '' + }`} + > + {`.${formatDecimal(price)}`} + </div> + ) : null}src/packages/price/price.taro.tsx (1)
141-158: 优化条件渲染结构当前实现存在以下可优化点：
- 外层使用了不必要的空 Fragment
- 条件渲染逻辑可以简化
建议应用以下优化：
- return ( - <> - {harmony() ? ( - <Text - className={`${classPrefix} ${classPrefix}-${color} ${className}`} - style={style} - > - {renderInner()} - </Text> - ) : ( - <View - className={`${classPrefix} ${classPrefix}-${color} ${className}`} - style={style} - > - {renderInner()} - </View> - )} - </> - ) + const Wrapper = harmony() ? Text : View + return ( + <Wrapper + className={`${classPrefix} ${classPrefix}-${color} ${className}`} + style={style} + > + {renderInner()} + </Wrapper> + )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/card/__test__/__snapshots__/card.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (14)
migrate-from-v2.md(1 hunks)src/packages/price/__test__/price.spec.tsx(1 hunks)src/packages/price/demos/h5/demo8.tsx(1 hunks)src/packages/price/demos/h5/demo9.tsx(1 hunks)src/packages/price/demos/taro/demo8.tsx(1 hunks)src/packages/price/demos/taro/demo9.tsx(1 hunks)src/packages/price/doc.en-US.md(3 hunks)src/packages/price/doc.md(3 hunks)src/packages/price/doc.zh-TW.md(4 hunks)src/packages/price/index.taro.ts(1 hunks)src/packages/price/index.ts(1 hunks)src/packages/price/price.taro.tsx(3 hunks)src/packages/price/price.tsx(4 hunks)src/packages/price/types.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/packages/price/index.ts
- src/packages/price/demos/taro/demo8.tsx
- src/packages/price/test/price.spec.tsx
- src/packages/price/demos/h5/demo8.tsx
🧰 Additional context used
🪛 Markdownlint (0.37.0)
src/packages/price/doc.zh-TW.md
104-104: null
Link fragments should be valid
(MD051, link-fragments)
🔇 Additional comments (19)
migrate-from-v2.md (1)
736-737: Price 组件的改进提升了其灵活性和可用性
这些更改增强了 Price 组件的功能：
- 新增 'xlarge' 尺寸选项，提供更多显示选择
- 新增 'color' 属性，支持自定义价格类型的样式定制
src/packages/price/demos/taro/demo9.tsx (3)
1-3: 【导入依赖合理】
文件顶部使用了 React、Cell、CellGroup 和 Price 组件，以及 Taro 的 Text 组件，方便封装和使用。敲定后续不会发生冲突时，可保持当前逻辑。
4-4: 【导入 harmony 需确认工具方法可用】
harmony 来自 @/utils/platform-taro，请确保此方法已在依赖文件中正确导出，且行为符合预期。若文件外仍需验证其正确性并避免潜在错误，可在测试用例中加入相关断言。
21-43: 【组件布局与样式】
当前使用多组 Cell 来展示不同的价格与 Text 标识，结构清晰。不过要注意以下点：
Price组件本身拥有多种size，结合Text样式时可检查排版是否一致。- 考虑到小程序端的适配，可测试在实际设备上效果是否符合期望。
src/packages/price/demos/h5/demo9.tsx (3)
1-3: 导入语句良好
导入的组件和库在这里使用合理，没有发现多余或缺失的内容。
10-15: 样式对象命名具有可读性
exclusivePriceStyles、priceStyles 等名称清晰易懂，便于快速理解用途。
42-42: 组件导出正常
默认导出 Demo9，符合预期的命名规范与用法。
src/packages/price/index.taro.ts (1)
3-3: 统一的类型导出方便维护
将多个类型从 ./types 导出，有助于保持类型定义的集中管理，便于后续拓展和维护。
src/packages/price/types.ts (1)
3-4: 类型定义简洁明了
PriceSize 与 PriceColor 使用字面量类型，能有效提示可用选项并减少输入错误。
src/packages/price/doc.md (7)
13-13: 新增尺寸小节的标题表述恰当
清晰列出可用尺寸，便于用户快速了解组件的可选项。
25-25: 新示例 Demo9 引入合理
在文档中嵌入 <CodeBlock src='h5/demo9.tsx' /> 便于读者实时查看示例。
91-91: 新增 color 属性解释到位
文档中详细说明了 primary、gray、darkgray 三种可选项，便于用户选择。
97-97: 尺寸属性更新包含 xlarge
在文档中补充 xlarge 选项，保持与代码中的定义一致，信息同步无误。
108-110: CSS 变量命名符合用途
--nutui-price-primary-color、--nutui-price-color、--nutui-price-darkgray-color 语义明确，为自定义主题提供了清晰的切入点。
113-115: 针对 xlarge 尺寸的专用变量
进一步完善了对不同字号的定义，使得 xlarge 场景下的符号和整数、小数部分更易统一管理。
122-124: small 尺寸的变量定义也已覆盖
--nutui-price-decimal-small-size 等变量使不同大小的价格显示更加灵活。
src/packages/price/doc.zh-TW.md (1)
104-104:
修复无效的文档链接
ConfigProvider 组件的链接片段无效，需要更新为正确的链接地址。
建议修改为：
-[ConfigProvider 组件](#/zh-CN/component/configprovider)
+[ConfigProvider 組件](#/zh-TW/component/configprovider)Likely invalid or redundant comment.
🧰 Tools
🪛 Markdownlint (0.37.0)
104-104: null
Link fragments should be valid
(MD051, link-fragments)
src/packages/price/price.taro.tsx (2)
106-139: 建议进一步拆分渲染逻辑
当前 renderInner 函数虽然已经将渲染逻辑独立出来，但仍然包含了多个职责。建议：
- 将符号、整数、小数部分分别拆分为独立的渲染函数
- 这样可以提高代码的可维护性和复用性
11-11: 请确认默认值的变更影响
将 size 的默认值从 'large' 改为 'normal' 可能会影响现有使用场景。建议：
- 在更新日志中标注这是一个破坏性改动
- 确保相关文档已更新
- 考虑是否需要迁移指南
运行以下脚本以检查现有使用情况：
Also applies to: 17-17
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
Demo9组件，展示价格列表，支持多种尺寸和颜色选项。Price组件，增加了xlarge尺寸选项和color属性。文档
Price组件的文档，增加了xlarge尺寸和颜色选项的说明。样式
Price组件的样式，支持新的尺寸和颜色变量。测试
Price组件添加了新测试用例，验证size和color属性的正确性。