feat(imagepreview): use nutui image #2793
Conversation
Walkthrough此次更改主要涉及 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/nutui-taro-demo/src/pages/index/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "taro/react" to extend from. Please check that the name of the config is correct. The config "taro/react" was referenced from the config file in "/packages/nutui-taro-demo/.eslintrc". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 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 #2793 +/- ##
=============================================
- Coverage 83.99% 83.98% -0.01%
=============================================
Files 220 220
Lines 17885 17882 -3
Branches 2679 2676 -3
=============================================
- Hits 15023 15019 -4
- Misses 2857 2858 +1
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: 0
🧹 Outside diff range and nitpick comments (1)
src/packages/imagepreview/imagepreview.scss (1)
80-86: 样式实现合理，建议添加注释说明新增的样式使用 flex 布局来实现内容居中，实现方式符合最佳实践。建议添加注释说明样式的用途，以提高代码可维护性。
建议添加如下注释：
.nut-image, .nut-video { + // 使用 flex 布局实现内容水平垂直居中 display: flex; justify-content: center; align-items: center; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/packages/imagepreview/imagepreview.scss(1 hunks)src/packages/imagepreview/imagepreview.taro.tsx(1 hunks)
🔇 Additional comments (3)
src/packages/imagepreview/imagepreview.taro.tsx (3)
Line range hint 91-157: 建议全面测试图片缩放功能
由于更换了底层 Image 组件的实现，请重点测试以下场景：
- 双指缩放手势的响应性
- 双击放大/缩小功能
- 缩放过程中的性能表现
- 边界条件下的行为（最大/最小缩放比例）
Line range hint 313-328: 图片预览实现符合预期 ✨
代码实现合理：
- 正确处理了平台特定属性（showMenuByLongpress）
- 保持了与原有功能的一致性
- 图片样式设置适当
10-10: 请验证 NutUI Image 组件 API 兼容性
从 @tarojs/components 切换到 NutUI 的 Image 组件是一个重要改动。建议：
- 确认新的 Image 组件支持所有必需的属性（mode、showMenuByLongpress 等）
- 验证在各类设备和场景下的兼容性
Also applies to: 14-14
✅ Verification successful
NutUI Image 组件 API 兼容性已确认
经过验证，NutUI Image 组件完全支持当前场景所需的功能：
- 在 imagepreview.taro.tsx 中，Image 组件仅使用了
src、mode和基础样式属性 - NutUI Image 组件（image.taro.tsx）继承了 Taro Image 的所有属性（通过
Omit<TImageProps, 'style'>） - 组件使用方式符合预期，不会影响现有功能
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 NutUI Image 组件的 API 定义
ast-grep --pattern 'interface $ImageProps {
$$$
}'
Length of output: 54
Script:
#!/bin/bash
# 搜索 Image 组件的属性定义和使用方式
rg -A 10 "type ImageProps" src/packages/image/
rg -A 10 "interface ImageProps" src/packages/image/
# 检查 ImagePreview 中 Image 组件的使用
rg -A 5 "Image" src/packages/imagepreview/imagepreview.taro.tsx
# 检查原始 Taro Image 组件的使用方式
rg -A 5 "Image.*from.*@tarojs/components"
Length of output: 11454
|
1、关闭按钮icon svg 色值不对 2、设置初始页码打开滑动在关闭，展示图片不对 |
| @@ -1,5 +1,5 @@ | |||
| import Taro from '@tarojs/taro' | |||
| import { View, Image, Text, ScrollView, Button, Input, Video } from '@tarojs/components' | |||
| import { View, Image, Swiper, SwiperItem, Text, ScrollView, Button, Input, Video } from '@tarojs/components' | |||
There was a problem hiding this comment.
💡 Codebase verification
导入了未使用的组件
Swiper 和 SwiperItem 组件虽然在导入语句中声明，但在代码实现中并未找到实际使用。建议移除这些未使用的导入以保持代码整洁。
🔗 Analysis chain
检查未使用的导入
Swiper 和 SwiperItem 组件已导入但在代码中未被使用。如果这些组件是为了图片预览功能准备的，建议添加相关实现；如果不需要，建议移除这些未使用的导入。
Let me gather more information to verify if these components are actually used in the implementation.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证Swiper和SwiperItem组件的使用情况
# 在当前文件中搜索Swiper和SwiperItem的使用
rg -l "Swiper|SwiperItem" packages/nutui-taro-demo/src/pages/index/index.tsx
Length of output: 129
Script:
#!/bin/bash
# Search for actual usage of Swiper and SwiperItem components in the file content
rg -U "(?s)<Swiper.*?>.*?</Swiper>|<SwiperItem.*?>.*?</SwiperItem>" packages/nutui-taro-demo/src/pages/index/index.tsx
# Also check for self-closing tag usage
rg "<Swiper[^>]*/?>|<SwiperItem[^>]*/?>" packages/nutui-taro-demo/src/pages/index/index.tsx
Length of output: 214
Summary by CodeRabbit
新功能
Swiper和SwiperItem组件的支持，增强了可用的 UI 组件。改进