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

Jump to bottom

fix(resultpage): 适配 V14 #2741

Open
wants to merge 9 commits into
base: feat_v3.x
Choose a base branch
from
Open

fix(resultpage): 适配 V14 #2741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
519a74d
fix(resultpage): 适配 V14
irisSong Nov 12, 2024
873a635
fix: harmony适配
irisSong Nov 12, 2024
7fd671f
chore: update doc css variables
irisSong Nov 14, 2024
9ffa71f
Merge branch '3.0' into 3.0-resultpage
irisSong Nov 18, 2024
dea7964
fix: revise
irisSong Nov 21, 2024
e161e9d
fix: modify text && delete harmony css
irisSong Nov 21, 2024
1b15d7e
Merge remote-tracking branch 'upstream/V3.0' into 3.0-resultpage
irisSong Nov 21, 2024
b8fd5d7
feat: add harmony css
irisSong Nov 21, 2024
9643012
feat: add marking
irisSong Nov 25, 2024
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
1 change: 1 addition & 0 deletions src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -768,6 +768,7 @@
"sort": 15,
"show": true,
"taro": true,
"v14": true,
"author": "songsong"
},
{
Expand Down
24 changes: 22 additions & 2 deletions src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,28 @@ exports[`should render description correctly 1`] = `
>
<div
class="nut-resultpage-icon"
style="background-image: url("https://img13.360buyimg.com/imagetools/jfs/t1/199421/5/44230/1320/66543100F23a9466e/0e9eadd5cebf07fb.png"); background-size: 100% 100%;"
/>
>
<svg
aria-labelledby="Tips"
class="nut-icon nut-icon-Tips "
color="#0073FF"
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M530.65 456.17H425.54l-21.34 55.85h74.39l-38.18 210.13a34.97 34.97 0 0 0 34.38 41.22H579.9l21.34-55.85h-74.39l38.18-210.13a34.92 34.92 0 0 0-34.38-41.22M512 384a64 64 0 1 0 0-128 64 64 0 0 0 0 128"
fill="currentColor"
fill-opacity="0.9"
/>
,
<path
d="M512 1024c282.77 0 512-229.23 512-512S794.77 0 512 0 0 229.23 0 512s229.23 512 512 512m0-85.33C276.35 938.67 85.33 747.65 85.33 512S276.35 85.33 512 85.33 938.67 276.35 938.67 512 747.65 938.67 512 938.67"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</div>
<div
class="nut-resultpage-description"
>
Expand Down
3 changes: 2 additions & 1 deletion src/packages/resultpage/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import { ScrollView, View } from '@tarojs/components'
import { useTranslate } from '@/sites/assets/locale/taro'
import { web } from '@/utils/platform-taro'
import Header from '@/sites/components/header'
import Demo1 from './demos/taro/demo1'
import Demo2 from './demos/taro/demo2'
Expand Down Expand Up @@ -35,7 +36,7 @@ const ResultPageDemo = () => {
return (
<>
<Header />
<ScrollView className="demo">
<ScrollView className={`demo ${web() ? 'web' : ''}`}>
<View className="h2">{translated.basic}</View>
<Demo1 />
<View className="h2">{translated.modifyStatus}</View>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/resultpage/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ const Demo1 = () => {
status="success"
actions={[
{
text: '次要按钮',
text: '次要操作',
},
{
text: '主要按钮',
text: '主要操作',
type: 'primary',
},
]}
Expand Down
4 changes: 2 additions & 2 deletions src/packages/resultpage/demos/h5/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ const Demo1 = () => {
status="error"
actions={[
{
text: '次要按钮',
text: '次要操作',
},
{
text: '主要按钮',
text: '主要操作',
type: 'primary',
},
]}
Expand Down
4 changes: 2 additions & 2 deletions src/packages/resultpage/demos/h5/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ const Demo1 = () => {
status="warning"
actions={[
{
text: '次要按钮',
text: '次要操作',
},
{
text: '主要按钮',
text: '主要操作',
type: 'primary',
},
]}
Expand Down
8 changes: 4 additions & 4 deletions src/packages/resultpage/demos/h5/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,25 @@ const Demo1 = () => {
<>
<Cell>
<ResultPage
title="信息补充"
title="信息反馈"
Copy link

Choose a reason for hiding this comment

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

💡 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

description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
status="info"
actions={[
{
text: '主要按钮',
text: '主要操作',
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

按钮文本不一致

根据其他 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.

Suggested change
text: '主要操作',
text: '操作按钮',

type: 'primary',
},
]}
/>
</Cell>
<Cell>
<ResultPage
title="信息补充"
title="信息反馈"
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
status="info"
actions={[
{
text: '次要按钮',
text: '次要操作',
},
]}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/resultpage/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ const Demo1 = () => {
status="success"
actions={[
{
text: '次要按钮',
text: '次要操作',
},
{
text: '主要按钮',
text: '主要操作',
type: 'primary',
},
]}
Expand Down
4 changes: 2 additions & 2 deletions src/packages/resultpage/demos/taro/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ const Demo1 = () => {
status="error"
actions={[
{
text: '次要按钮',
text: '次要操作',
},
{
text: '主要按钮',
text: '主要操作',
type: 'primary',
},
]}
Expand Down
4 changes: 2 additions & 2 deletions src/packages/resultpage/demos/taro/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ const Demo1 = () => {
status="warning"
actions={[
{
text: '次要按钮',
text: '次要操作',
},
{
text: '主要按钮',
text: '主要操作',
type: 'primary',
},
]}
Expand Down
8 changes: 4 additions & 4 deletions src/packages/resultpage/demos/taro/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,25 @@ const Demo1 = () => {
<>
<Cell>
<ResultPage
title="信息补充"
title="信息反馈"
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
status="info"
actions={[
{
text: '主要按钮',
text: '主要操作',
type: 'primary',
},
]}
/>
</Cell>
<Cell>
<ResultPage
title="信息补充"
title="信息反馈"
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
status="info"
actions={[
{
text: '次要按钮',
text: '次要操作',
},
]}
/>
Expand Down
12 changes: 6 additions & 6 deletions src/packages/resultpage/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ import { ResultPage } from '@nutui/nutui-react'

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| title | title | `ReactNode` | `-`|
| title | title | `ReactNode` | `-` |
| description | Description, up to two lines displayed | `ReactNode` | `-` |
| status | Status type | `success` \| `error` \| `warning` \| `info` \| `waiting` | `info` |
| icon | Custom `icon` | `ReactNode` | `-` |
Expand All @@ -72,13 +72,13 @@ The component provides the following CSS variables, which can be used to customi

| Name | Description | Default |
| --- | --- | --- |
| \--nutui-resultpage-width | Content area width | `247px` |
| \--nutui-resultpage-icon-size | Width and height of icon | `48px` |
| \--nutui-resultpage-icon-margin-bottom | margin-bottom value of the icon | `16px` |
| \--resultpage-title-margin-bottom | The margin-top value of the title | `9px` |
| \--nutui-resultpage-width | Content area width | `240px` |
| \--nutui-resultpage-icon-size | Width and height of icon | `36px` |
| \--nutui-resultpage-icon-margin-bottom | margin-bottom value of the icon | `12px` |
| \--resultpage-title-margin-bottom | The margin-top value of the title | `12px` |
| \--nutui-resultpage-title-font-size | The font size of the title | `$font-size-xl` |
| \---nutui-resultpage-title-color | The text color of the title | `$color-title` |
| \--nutui-resultpage-description-font-size | Describe the font size | `$font-size-base` |
| \--nutui-resultpage-description-color | Describe the text color | `$color-text` |
| \--nutui-resultpage-description-line-height | Describe the line height | `20px` |
| \--nutui-resultpage-actions-margin-topt | The margin-top value of the operation area | `21px` |
| \--nutui-resultpage-actions-margin-topt | The margin-top value of the operation area | `16px` |
12 changes: 6 additions & 6 deletions src/packages/resultpage/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ import { ResultPage } from '@nutui/nutui-react'

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 标题 | `ReactNode` | `-`|
| title | 标题 | `ReactNode` | `-` |
| description | 描述，最多展示两行 | `ReactNode` | `-` |
| status | 状态类型 | `success` \| `error` \| `warning` \| `info` \| `waiting` | `info` |
| icon | 自定义 `icon` | `ReactNode` | `-` |
Expand All @@ -72,13 +72,13 @@ import { ResultPage } from '@nutui/nutui-react'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-resultpage-width | 内容区域宽度 | `247px` |
| \--nutui-resultpage-icon-size | icon的宽高 | `48px` |
| \--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的宽高 | `36px` |
| \--nutui-resultpage-icon-margin-bottom | icon的margin-bottom值 | `12px` |
| \--resultpage-title-margin-bottom | 标题的margin-top值 | `12px` |
| \--nutui-resultpage-title-font-size | 标题的字体大小 | `$font-size-xl` |
| \---nutui-resultpage-title-color | 标题的文字颜色 | `$color-title` |
| \--nutui-resultpage-description-font-size | 描述的字体大小 | `$font-size-base` |
| \--nutui-resultpage-description-color | 描述的文字颜色 | `$color-text` |
| \--nutui-resultpage-description-line-height | 描述的行高 | `20px` |
| \--nutui-resultpage-actions-margin-topt | 操作区域的margin-top值 | `21px` |
| \--nutui-resultpage-actions-margin-topt | 操作区域的margin-top值 | `16px` |
12 changes: 6 additions & 6 deletions src/packages/resultpage/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ import { ResultPage } from '@nutui/nutui-react-taro'

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 标题 | `ReactNode` | `-`|
| title | 标题 | `ReactNode` | `-` |
| description | 描述，最多展示两行 | `ReactNode` | `-` |
| status | 状态类型 | `success` \| `error` \| `warning` \| `info` \| `waiting` | `info` |
| icon | 自定义 `icon` | `ReactNode` | `-` |
Expand All @@ -72,13 +72,13 @@ import { ResultPage } from '@nutui/nutui-react-taro'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-resultpage-width | 内容区域宽度 | `247px` |
| \--nutui-resultpage-icon-size | icon的宽高 | `48px` |
| \--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的宽高 | `36px` |
| \--nutui-resultpage-icon-margin-bottom | icon的margin-bottom值 | `12px` |
| \--resultpage-title-margin-bottom | 标题的margin-top值 | `12px` |
| \--nutui-resultpage-title-font-size | 标题的字体大小 | `$font-size-xl` |
| \---nutui-resultpage-title-color | 标题的文字颜色 | `$color-title` |
| \--nutui-resultpage-description-font-size | 描述的字体大小 | `$font-size-base` |
| \--nutui-resultpage-description-color | 描述的文字颜色 | `$color-text` |
| \--nutui-resultpage-description-line-height | 描述的行高 | `20px` |
| \--nutui-resultpage-actions-margin-topt | 操作区域的margin-top值 | `21px` |
| \--nutui-resultpage-actions-margin-top | 操作区域的margin-top值 | `16px` |
12 changes: 6 additions & 6 deletions src/packages/resultpage/doc.zh-TW.md
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

根据 ai 给的建议进行修改。

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

已修正

Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ import { ResultPage } from '@nutui/nutui-react'

| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| title | 標題 | `ReactNode` | `-`|
| title | 標題 | `ReactNode` | `-` |
| description | 描述，最多展示兩行 | `ReactNode` | `-` |
| status | 狀態類型 | `success` \| `error` \| `warning` \| `info` \| `waiting` | `info` |
| icon | 自定義 `icon` | `ReactNode` | `-` |
Expand All @@ -72,13 +72,13 @@ import { ResultPage } from '@nutui/nutui-react'

| 名稱 | 說明 | 默認值 |
| --- | --- | --- |
| \--nutui-resultpage-width | 內容區域寬度 | `247px` |
| \--nutui-resultpage-icon-size | icon的寬高 | `48px` |
| \--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的寬高 | `36px` |
| \--nutui-resultpage-icon-margin-bottom | icon的margin-bottom值 | `12px` |
| \--resultpage-title-margin-bottom | 標題的margin-top值 | `12px` |
| \--nutui-resultpage-title-font-size | 標題的字體大小 | `$font-size-xl` |
| \---nutui-resultpage-title-color | 標題的文字顏色 | `$color-title` |
| \--nutui-resultpage-description-font-size | 描述的字體大小 | `$font-size-base` |
| \--nutui-resultpage-description-color | 描述的文字顏色 | `$color-text` |
| \--nutui-resultpage-description-line-height | 描述的行高 | `20px` |
| \--nutui-resultpage-actions-margin-topt | 操作區域的margin-top值 | `21px` |
| \--nutui-resultpage-actions-margin-topt | 操作區域的margin-top值 | `16px` |
23 changes: 11 additions & 12 deletions src/packages/resultpage/resultpage.harmony.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,23 @@
margin: 0 auto;
}
.nut-resultpage-icon {
height: 48px;
width: 48px;
margin-bottom: 16px;
background-size: 100%;
display: inline-flex;
margin-bottom: 12px;
}
.nut-resultpage-icon .nut-icon {
height: 36px;
width: 36px;
}
.nut-resultpage-title {
width: 247px;
margin-bottom: 9px;
font-size: 20px;
width: 240px;
margin-bottom: 12px;
font-size: 18px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

是不是应该使用 sass 变量，包括 margin-bottom

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

这个是编译后的css文件

color: #1a1a1a;
font-weight: 600;
text-align: center;
}
.nut-resultpage-description {
width: 247px;
width: 240px;
line-height: 20px;
font-size: 14px;
color: #505259;
Expand All @@ -33,12 +35,9 @@
.nut-resultpage-actions {
display: flex;
flex-direction: row;
margin-top: 21px;
margin-top: 16px;
}
.nut-resultpage-action {
margin-left: 6px;
margin-right: 6px;
}
.nut-resultpage-action-button {
white-space: nowrap;
}
8 changes: 5 additions & 3 deletions src/packages/resultpage/resultpage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@
align-items: center;
margin: 0 auto;
&-icon {
height: $resultpage-icon-size;
width: $resultpage-icon-size;
display: inline-flex;
Copy link
Collaborator

Choose a reason for hiding this comment

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

有一种情况，如果用户使用的不是 nut icon库，会怎么样呢~

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

那就传入自定义icon

margin-bottom: $resultpage-icon-margin-bottom;
background-size: 100%;
.nut-icon {
height: $resultpage-icon-size;
width: $resultpage-icon-size;
}
Comment on lines +8 to +13
Copy link

Choose a reason for hiding this comment

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

💡 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

}
&-title {
width: $resultpage-width;
Expand Down
Loading
Loading