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.

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(resultpage): 适配 V14 #2741

Open
wants to merge 3 commits into
base: V3.0
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ const Demo1 = () => {
status="error"
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.

💡 Codebase verification

按钮文案需要统一规范

发现 src/packages/resultpage/demos/h5/demo4.tsx 中存在不一致的按钮文案:

  • 一个按钮使用 "主要操作"
  • 另一个按钮使用 "操作按钮"

建议将所有按钮文案统一修改为 "操作按钮",以保持整体设计规范的一致性。

🔗 Analysis chain

按钮文案修改符合规范!

按钮文案从"次要按钮"和"主要按钮"统一更新为"操作按钮"的修改符合V14版本的设计规范。

运行以下脚本验证其他demo文件中的按钮文案是否已统一更新:

Also applies to: 16-16

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述:验证所有ResultPage demo文件中的按钮文案更新情况

# 搜索所有demo文件中的按钮文案
rg -U "text: '[^']*'" "src/packages/resultpage/demos"

Length of output: 1190

},
{
text: '主要按钮',
text: '操作按钮',
type: 'primary',
},
]}
Expand Down
4 changes: 2 additions & 2 deletions src/packages/resultpage/demos/h5/demo3.tsx
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
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
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ const Demo1 = () => {
status="warning"
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.

💡 Codebase verification

按钮文案需要进一步统一

在检查结果中发现,大部分demo文件已经统一使用了"操作按钮"作为按钮文案,但是在 src/packages/resultpage/demos/h5/demo4.tsx 中仍然存在一处使用"主要操作"的情况,这与其他demo文件的统一标准不一致。

  • src/packages/resultpage/demos/h5/demo4.tsx: 需要将"主要操作"修改为"操作按钮"以保持一致性
🔗 Analysis chain

按钮文案统一更新已完成

按钮文案的统一更新符合V14版本的规范要求,使用"操作按钮"替换原有的"次要按钮"和"主要按钮",提升了用户界面的一致性。

运行以下脚本验证其他demo文件中的按钮文案是否已统一更新:

Also applies to: 15-15

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述:检查所有demo文件中的按钮文案是否已统一更新

# 搜索所有demo文件中的按钮文案
rg -g "src/packages/resultpage/demos/**/*.tsx" "text: '[^']*'"

Length of output: 1201

},
{
text: '主要按钮',
text: '操作按钮',
type: 'primary',
},
]}
Expand Down
8 changes: 4 additions & 4 deletions src/packages/resultpage/demos/taro/demo4.tsx
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
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
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
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-topt | 操作区域的margin-top值 | `16px` |
12 changes: 6 additions & 6 deletions src/packages/resultpage/doc.zh-TW.md
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的寬高 | `36x` |
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

修正图标尺寸单位的笔误

单位值写错了,"36x" 应该为 "36px"。

-| \--nutui-resultpage-icon-size | icon的寬高 | `36x` |
+| \--nutui-resultpage-icon-size | icon的寬高 | `36px` |
📝 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
| \--nutui-resultpage-icon-size | icon的寬高 | `36x` |
| \--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
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;
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
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;
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