Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(empty): 修复 harmonycpp 部分未适配问题 #2676

Merged
merged 1 commit into from
Oct 30, 2024
Merged

fix(empty): 修复 harmonycpp 部分未适配问题 #2676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/packages/empty/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react'
import { Empty } from '@nutui/nutui-react-taro'
import pxTransform from '@/utils/px-transform'

const Demo1 = () => {
return (
Expand All @@ -12,9 +13,9 @@ const Demo1 = () => {
<Empty
description="无数据"
actions={[{ text: '操作按钮' }]}
style={{ marginTop: '10px' }}
style={{ marginTop: pxTransform(10) }}
/>
<Empty description="无数据" style={{ marginTop: '10px' }} />
<Empty description="无数据" style={{ marginTop: pxTransform(10) }} />
</>
)
}
Expand Down
3 changes: 2 additions & 1 deletion src/packages/empty/demos/taro/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react'
import { Empty } from '@nutui/nutui-react-taro'
import pxTransform from '@/utils/px-transform'

const Demo3 = () => {
return <Empty description="无数据" imageSize={80} />
return <Empty description="无数据" imageSize={pxTransform(80)} />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

需要统一 Empty 组件的像素值处理方式

经过验证，发现在 Taro 环境下的 Empty 组件使用存在不一致：

  • demo3.tsx 中正确使用了 pxTransform(80)
  • demo1.tsx 中的 marginTop 使用了 pxTransform(10)
  • 其他 demo 文件中未发现对 imageSize 的设置

同时在 H5 环境下：

  • demo3.tsx 中直接使用了硬编码值 imageSize={80}
  • demo1.tsx 中直接使用了硬编码值 marginTop: '10px'

建议：

  • 在 Taro 环境下的所有像素值都应该使用 pxTransform 进行转换
  • 需要统一 H5 和 Taro 环境下的像素值处理策略
🔗 Analysis chain

建议验证其他 Empty 组件的一致性

使用 pxTransform 替换硬编码像素值的修改是正确的，这将提高组件的适配性。建议验证其他 Empty 组件是否都进行了类似的适配。

Let me gather more information about Empty component usage across the codebase.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：检查其他 Empty 组件是否也使用了 pxTransform
# 预期：所有 Empty 组件都应该使用 pxTransform 进行像素转换

echo "检查 Empty 组件中的像素值使用情况..."
rg -l "Empty" src/packages/empty/demos/taro/ | xargs rg "imageSize=\{[^}]*\}"

Length of output: 239

Script:

#!/bin/bash
# 检查所有 Empty 组件的使用情况，包括可能的像素值设置
rg -A 2 -B 2 "<Empty" src/packages/empty/

# 检查是否有其他 demo 文件
fd "demo.*\.(tsx|jsx)" src/packages/empty/

Length of output: 10061

}
export default Demo3
3 changes: 2 additions & 1 deletion src/packages/empty/demos/taro/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from 'react'
import { Empty, Button } from '@nutui/nutui-react-taro'
import { View } from '@tarojs/components'
import pxTransform from '@/utils/px-transform'

const Demo6 = () => {
return (
<Empty status="error" description="加载失败">
<View style={{ marginTop: '10px' }}>
<View style={{ marginTop: pxTransform(10) }}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

需要统一 H5 和 Taro 端的样式单位处理

根据搜索结果，发现在同一组件的不同端（H5和Taro）中存在不一致的样式单位使用方式：

  • Taro 端正确使用了 pxTransform(10) 进行响应式适配
  • H5 端仍在使用固定像素值 '10px'

建议：

  • 在 H5 端的 demo1.tsx 和 demo6.tsx 中也采用响应式的单位处理方案
  • 或者在项目文档中明确说明不同端的样式单位使用规范
🔗 Analysis chain

样式修改符合响应式设计要求！

使用 pxTransform(10) 替换固定像素值 '10px' 的修改很好，这样能确保在不同设备上都能正确适配显示。

验证其他文件中的一致性：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：检查其他 Empty 组件相关文件中的 pxTransform 使用情况
rg -g '*.tsx' -g '*.ts' "marginTop.*px" "src/packages/empty"

Length of output: 610

Script:

#!/bin/bash
# 检查 Empty 组件的配置文件，了解是否有关于样式单位的规范说明
fd -e md -e tsx -e ts "config|readme|style" "src/packages/empty" -x cat {}

Length of output: 76

<Button type="primary" size="small">
重试
</Button>
Expand Down