fix(card): harmony适配 #2800
fix(card): harmony适配 #2800
Conversation
Walkthrough此次更改主要涉及多个组件的版本更新和样式调整。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Card
participant Image
participant Tag
User->>Card: Request to display card
Card->>Image: Load image with HTTPS URL
Card->>Tag: Render tags using Tag component
Tag->>User: Display tags
Image->>User: Display image
Possibly related PRs
Suggested labels
Suggested reviewers
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 #2800 +/- ##
==========================================
Coverage 83.99% 83.99%
==========================================
Files 220 220
Lines 17885 17885
Branches 2679 2679
==========================================
Hits 15023 15023
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: 1
🧹 Outside diff range and nitpick comments (9)
src/packages/card/demos/taro/demo1.tsx (1)
Line range hint
15-24: 建议添加图片加载状态处理为了提供更好的用户体验，建议在 Card 组件中添加图片加载状态的处理。
建议如下修改：
<Card src={state.src} + loading="lazy" + fallback="加载中..." title={state.title} price={state.price} vipPrice={state.vipPrice} shopDescription={state.shopDescription} delivery={state.delivery} shopName={state.shopName} />src/packages/card/demos/taro/demo4.tsx (1)
Line range hint
1-31: 组件结构规范，实现清晰代码实现符合以下最佳实践：
- 使用了适当的类型和属性声明
- 组件结构清晰，便于维护
- 正确使用了Taro的View组件
建议考虑以下优化：
- 可以将state对象转换为useState hook，使组件更具响应性
- 考虑为props添加TypeScript类型定义，提高代码的可维护性
-const state = { +const [state] = React.useState({ src: 'https://img10.360buyimg.com/...', title: '【活蟹】湖塘煙雨...', // ... other properties -} +})src/packages/card/demos/taro/demo6.tsx (1)
18-26: 优化描述部分的实现使用 Taro 的 View 组件替代原生 div，并通过 pxTransform 实现响应式样式，这些改动都符合 Taro 的开发规范。建议考虑以下优化：
- 可以将样式提取到单独的样式文件中
- 考虑使用 Taro 的主题变量来管理颜色值
建议的重构方案：
+ // styles.scss + .card-description { + font-size: pxTransform(14); + padding: pxTransform(10) 0; + color: var(--nutui-gray-3, #999); + } - <View - style={{ - fontSize: pxTransform(14), - padding: `${pxTransform(10)} 0`, - color: '#999', - }} - > + <View className="card-description">src/packages/card/demos/taro/demo5.tsx (1)
4-4: 优化：使用pxTransform提升响应式设计引入并使用pxTransform工具函数来处理字体大小，这样能更好地适配不同设备，提升了组件的可用性。这个改动与harmony适配的目标相符。
建议在其他涉及像素单位的地方也统一使用pxTransform，以确保整体的一致性和适配性。
Also applies to: 27-27
src/packages/card/demos/taro/demo3.tsx (1)
17-19: 样式更新建议使用
inline-flex和pxTransform的改动是好的，但建议考虑以下优化：
- 可以将这些样式迁移到统一的样式文件中
- 考虑使用主题变量来统一间距管理
+ // 建议将样式迁移到单独的样式文件 + // styles/card.scss + .price-tag { + display: inline-flex; + margin-right: var(--nutui-spacing-2); + margin-left: var(--nutui-spacing-1); + }src/packages/card/demos/h5/demo2.tsx (1)
Line range hint
4-19: 建议为 state 对象添加类型定义为了提高代码的类型安全性和可维护性，建议添加接口定义。
建议添加如下类型定义：
interface State { src: string title: string price: string vipPrice: string shopDescription: string delivery: string shopName: string } const state: State = { // ... existing properties }src/packages/card/demos/taro/demo2.tsx (1)
38-45: 建议提取Tag样式配置使用Tag组件替代span标签提升了代码的语义化，但样式配置直接写在JSX中可能影响复用性。
建议将Tag的样式配置提取到常量中：
+const TAG_CONFIG = { + background: "#f2f2f7", + color: "#999999" +} -<Tag - background="#f2f2f7" - color="#999999" - key={item} - style={wordStyles} -> +<Tag + {...TAG_CONFIG} + key={item} + style={wordStyles} +>src/packages/card/card.scss (1)
46-48: 价格样式更新符合新版本规范新增的价格整数和小数部分样式与组件升级到 3.0.0 版本的改动保持一致，使用统一的金色突出显示价格信息。
建议考虑以下优化：
- 将颜色值
#d2a448提取为 SCSS 变量，便于统一管理和主题定制+// 在变量文件中定义 +$price-highlight-color: #d2a448; + .nut-price-integer, .nut-price-decimal { - color: #d2a448; + color: $price-highlight-color; }src/packages/card/card.taro.tsx (1)
62-62: 建议增强图片组件的属性配置当前实现仅传递了 src 属性，建议考虑添加以下配置以提升组件的健壮性：
- 添加图片加载失败的降级处理
- 考虑添加 alt 属性提升可访问性
- 可以添加 loading 属性优化加载体验
建议参考以下代码改进：
- <Image src={src} /> + <Image + src={src} + alt={title} + loading="lazy" + onError={(e) => { + console.warn('图片加载失败', e); + }} + />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (10)
src/config.json(1 hunks)src/packages/card/card.scss(1 hunks)src/packages/card/card.taro.tsx(2 hunks)src/packages/card/demos/h5/demo2.tsx(2 hunks)src/packages/card/demos/taro/demo1.tsx(1 hunks)src/packages/card/demos/taro/demo2.tsx(3 hunks)src/packages/card/demos/taro/demo3.tsx(3 hunks)src/packages/card/demos/taro/demo4.tsx(1 hunks)src/packages/card/demos/taro/demo5.tsx(2 hunks)src/packages/card/demos/taro/demo6.tsx(2 hunks)
🔇 Additional comments (14)
src/packages/card/demos/taro/demo1.tsx (1)
6-6: 安全性改进：使用 HTTPS URL
将协议相对 URL 更改为 HTTPS 绝对 URL 是一个很好的改进，这样可以确保在所有环境中都使用安全的连接加载图片。
src/packages/card/demos/taro/demo4.tsx (1)
7-7: 改进：使用了更安全的图片URL格式
将协议相对URL更改为明确的HTTPS URL是一个很好的改进，这样可以：
- 确保始终使用安全的HTTPS协议
- 避免在不同环境下可能出现的协议不一致问题
- 提高了代码的可预测性和安全性
让我们验证一下图片的可访问性：
✅ Verification successful
图片资源验证通过，URL更改是安全且有效的
验证结果显示图片资源：
- HTTP状态码为200，表示资源可正常访问
- 图片格式为JPEG，大小约13KB
- 启用了跨域访问支持（CORS）
- 设置了合理的缓存策略
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证图片URL的可访问性和响应状态
curl -I "https://img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg"
Length of output: 1040
src/packages/card/demos/taro/demo6.tsx (2)
3-4: 导入必要的 Taro 组件和工具函数
新增的导入符合 Taro 的最佳实践，使用 Taro 原生组件和工具函数可以确保更好的跨平台兼容性。
8-8: 图片链接更新为 HTTPS
将图片源从 HTTP 更新为 HTTPS 提高了安全性，这是一个很好的改进。
src/packages/card/demos/taro/demo5.tsx (1)
8-8: 安全性改进：使用HTTPS图片源
将图片URL从相对协议更新为HTTPS，增强了安全性和可靠性。
src/packages/card/demos/taro/demo3.tsx (2)
2-2: 导入变更正确！
从 @nutui/nutui-react-taro 导入 Image 组件是合理的，这与组件的使用相符。
7-7: 图片URL更新合理！
将协议相对URL更改为HTTPS绝对URL提高了安全性和可靠性。
src/packages/card/demos/h5/demo2.tsx (1)
36-43: 使用 Tag 组件替换 span 标签是个很好的改进
使用语义化的 Tag 组件替代原有的 span 标签，不仅提高了代码的可维护性，还确保了与设计系统的一致性。样式配置也很合理。
src/packages/card/demos/taro/demo2.tsx (4)
2-2: 导入变更符合组件重构要求
新增的 Tag 组件导入与代码重构方向一致，有助于提高代码的语义化和可维护性。
8-8: 图片URL更新为HTTPS协议
将图片URL从相对协议更新为HTTPS协议是一个很好的安全性改进。
18-18: 请确认样式简化的影响
样式对象被简化为只保留了marginRight，并使用了pxTransform工具函数。
请运行以下脚本检查是否有其他组件依赖被移除的样式：
✅ Verification successful
Let me check the content of both demo files to compare the styles.
样式简化是安全的
经过验证，样式简化是合理的：
- H5版本和Taro版本的
wordStyles对象都只包含marginRight属性 - 唯一的区别是H5使用'5px'而Taro使用pxTransform(5)，这是正确的平台适配
- 没有其他组件依赖这个样式对象
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索可能使用相同样式的其他组件
rg "wordStyles" src/packages/card/
Length of output: 302
Script:
#!/bin/bash
# Check content of both demo files
echo "=== Content of demo2.tsx (Taro) ==="
cat src/packages/card/demos/taro/demo2.tsx
echo -e "\n=== Content of demo2.tsx (H5) ==="
cat src/packages/card/demos/h5/demo2.tsx
Length of output: 2819
32-33: 布局变更需要验证兼容性
将display属性从inline-flex更改为flex，同时使用pxTransform统一了边距单位。
建议验证在不同设备上的显示效果：
src/packages/card/card.taro.tsx (1)
6-6: 导入更改符合跨平台适配要求！
引入自定义的 Image 组件来替代原生 img 标签是正确的做法，这样可以确保在不同平台（包括鸿蒙系统）上保持一致的图片渲染行为。
src/config.json (1)
Line range hint 1179-1187: 请验证 Card 组件的重大版本更新
Card 组件版本从 2.0.0 升级到 3.0.0 是一个重大版本更新，这可能包含破坏性更改。
运行以下脚本来验证相关文档是否已更新：
✅ Verification successful
Let me gather more information about the Card component changes.
Let me check for breaking changes in the Card component.
Let me check the actual changes in the Card component implementation and demos.
Card 组件版本更新已确认
根据代码分析，Card 组件从 2.0.0 升级到 3.0.0 的变更主要是为了适配 harmony，组件 API 和功能保持稳定，没有发现破坏性更改：
- Props 接口保持一致，包括 src、title、price、vipPrice、shopDescription 等属性
- 组件实现逻辑没有重大变化
- 示例代码的使用方式保持不变
- 迁移指南中没有列出 Card 组件的不兼容更新
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 Card 组件的文档更新
# 检查文档文件
fd -t f "card.*\.md$" docs/
# 检查 CHANGELOG
fd -t f "CHANGELOG\.md$" | xargs rg -A 5 "Card.*3\.0\.0"
# 检查是否有相关的迁移指南
fd -t f "migrate.*\.md$" | xargs rg -A 5 "Card"
Length of output: 1104
Script:
#!/bin/bash
# 检查 Card 组件的源代码变更
rg -g "!*.{json,md}" -A 5 "Card" src/
# 检查是否有测试文件的更新
fd -t f "card.*test.*" src/
# 检查组件目录结构
fd "card" -t d src/
Length of output: 81599
Script:
#!/bin/bash
# 检查 Card 组件的变更历史
rg -g "!*.{json,md}" "version.*3\.0\.0.*Card" src/
# 检查 Card 组件的 Props 变更
ast-grep --pattern 'export interface CardProps {
$$$
}'
# 检查 Card 组件的使用示例
fd -t f "demo.*\.(tsx|jsx)$" src/packages/card/
Length of output: 677
Script:
#!/bin/bash
# 检查 Card 组件的具体实现变化
rg -A 5 "export const Card" src/packages/card/
# 检查迁移指南中关于 Card 的具体说明
rg -A 10 "### Card" migrate-from-v2.md
# 检查示例代码中的变更
cat src/packages/card/demos/h5/demo1.tsx
Length of output: 1721
| @@ -23,7 +24,7 @@ const Demo5 = () => { | |||
| shopDescription={state.shopDescription} | |||
| delivery={state.delivery} | |||
| shopName={state.shopName} | |||
| extra={<View style={{ fontSize: '12px' }}>自定义</View>} | |||
| extra={<View style={{ fontSize: pxTransform(12) }}>自定义</View>} | |||
There was a problem hiding this comment.
我看现在直接写数字表现就挺好的，可以试一下
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
Card组件版本至3.0.0，并新增TrendArrow组件。Demo2和Demo3组件中引入了Tag组件，替代了之前的span元素，提升了标签的视觉表现。样式
nut-price-integer和nut-price-decimal。修复