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

Merged
merged 11 commits into from
Nov 29, 2024
Merged

fix(resultpage): 适配 V14 #2741

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
11 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
c8bef3a
chore: 合并3.x
irisSong Nov 29, 2024
eae8c4d
chore: 移除css文件
irisSong Nov 29, 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
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: '操作按钮',
Copy link
Collaborator

Choose a reason for hiding this comment

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

次要和主要，主要是搭配着 按钮的语义来写的~可以保留

Copy link
Collaborator

Choose a reason for hiding this comment

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

都统一改成 主要操作、次要操作、信息反馈 这些文案吧

},
{
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: '操作按钮',
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
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: '操作按钮',
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
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
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
31 changes: 13 additions & 18 deletions src/packages/resultpage/resultpage.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { FunctionComponent, ReactNode, useState } from 'react'
import React, { FunctionComponent, ReactNode } from 'react'
import classNames from 'classnames'
import { View, Text, Image } from '@tarojs/components'
import { Tips, Warning, Failure, Ask, Success } from '@nutui/icons-react-taro'
import { View, Text } from '@tarojs/components'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import {
Button,
Expand All @@ -18,6 +19,7 @@ export type ResultPageAction = {
disabled?: boolean
onClick?: () => () => void
}

export interface ResultPageProps extends BasicComponent {
title: ReactNode
description: ReactNode
Expand Down Expand Up @@ -54,24 +56,17 @@ export const ResultPage: FunctionComponent<
const cls = classNames(classPrefix, className)

const defaultStatus: ResultPageStatusOptions = {
success:
'https://img11.360buyimg.com/imagetools/jfs/t1/233690/33/17768/1251/66543101F2589003b/f5dcaea8e29c23aa.png',
error:
'https://img14.360buyimg.com/imagetools/jfs/t1/224715/38/17932/1426/66543101F1dbc50e8/eaffdb926b00584b.png',
warning:
'https://img13.360buyimg.com/imagetools/jfs/t1/200545/24/43507/1219/66543101Fe58cfbe4/c29054555f3bcb4b.png',
info: 'https://img13.360buyimg.com/imagetools/jfs/t1/199421/5/44230/1320/66543100F23a9466e/0e9eadd5cebf07fb.png',
waiting:
'https://img11.360buyimg.com/imagetools/jfs/t1/226266/21/17859/1428/66543101F2dc4c3f3/44e2ae2b51c6e0ed.png',
success: <Success color="#00D900" />,
error: <Failure color="#FF0F23" />,
warning: <Warning color="#FFBF00" />,
info: <Tips color="#0073FF" />,
waiting: <Ask color="#0073FF" />,
}
const [iconSrc] = useState<any>(
`${typeof icon === 'string' && icon ? icon : defaultStatus[status]}`
)
return (
<View className={cls} style={style}>
{typeof icon === 'string' ? (
<Image src={iconSrc} className={`${classPrefix}-icon`} />
) : null}
<View className={`${classPrefix}-icon`}>
{icon || defaultStatus[status]}
</View>
Copy link
Collaborator

Choose a reason for hiding this comment

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

icon 这个可以参考一下 pagination 的处理~ 我觉得那个方法还不错

{typeof title === 'string' && title ? (
<View className={`${classPrefix}-title`}>{title}</View>
) : (
Expand All @@ -90,7 +85,7 @@ export const ResultPage: FunctionComponent<
const { text, ...rest } = action
return (
<View className={`${classPrefix}-action`} key={index}>
<Button {...rest} size="small">
<Button {...rest} size="large">
{action?.text}
</Button>
</View>
Expand Down
33 changes: 13 additions & 20 deletions src/packages/resultpage/resultpage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { FunctionComponent, ReactNode, useState } from 'react'
import React, { FunctionComponent, ReactNode } from 'react'
import classNames from 'classnames'
import { Tips, Warning, Failure, Ask, Success } from '@nutui/icons-react'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import { Button, ButtonFill, ButtonSize, ButtonType } from '../button/button'
import { ResultPageStatus, ResultPageStatusOptions } from './types'
Expand Down Expand Up @@ -49,27 +50,17 @@
const cls = classNames(classPrefix, className)

const defaultStatus: ResultPageStatusOptions = {
success:
'https://img11.360buyimg.com/imagetools/jfs/t1/233690/33/17768/1251/66543101F2589003b/f5dcaea8e29c23aa.png',
error:
'https://img14.360buyimg.com/imagetools/jfs/t1/224715/38/17932/1426/66543101F1dbc50e8/eaffdb926b00584b.png',
warning:
'https://img13.360buyimg.com/imagetools/jfs/t1/200545/24/43507/1219/66543101Fe58cfbe4/c29054555f3bcb4b.png',
info: 'https://img13.360buyimg.com/imagetools/jfs/t1/199421/5/44230/1320/66543100F23a9466e/0e9eadd5cebf07fb.png',
waiting:
'https://img11.360buyimg.com/imagetools/jfs/t1/226266/21/17859/1428/66543101F2dc4c3f3/44e2ae2b51c6e0ed.png',
success: <Success color="#00D900" />,
error: <Failure color="#FF0F23" />,
warning: <Warning color="#FFBF00" />,
info: <Tips color="#0073FF" />,
waiting: <Ask color="#0073FF" />,
Comment on lines +53 to +57
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

建议将图标颜色提取为主题变量

当前的颜色值是硬编码的，建议将这些颜色值提取到主题配置中，以便统一管理和维护：

const defaultStatus: ResultPageStatusOptions = {
-  success: <Success color="#00D900" />,
-  error: <Failure color="#FF0F23" />,
-  warning: <Warning color="#FFBF00" />,
-  info: <Tips color="#0073FF" />,
-  waiting: <Ask color="#0073FF" />,
+  success: <Success color={theme.colors.success} />,
+  error: <Failure color={theme.colors.error} />,
+  warning: <Warning color={theme.colors.warning} />,
+  info: <Tips color={theme.colors.info} />,
+  waiting: <Ask color={theme.colors.info} />,
}

Committable suggestion skipped: line range outside the PR's diff.

}
const [imgStyle] = useState<any>({
backgroundImage: `url(${typeof icon === 'string' && icon ? icon : defaultStatus[status]})`,
backgroundSize: '100% 100%',
})
return (
<div className={cls} style={style}>
{typeof icon === 'string' ? (
<div className={`${classPrefix}-icon`} style={imgStyle} />
) : (
icon
)}
<div className={`${classPrefix}-icon`}>
{icon || defaultStatus[status]}
</div>
{typeof title === 'string' && title ? (
<div className={`${classPrefix}-title`}>{title}</div>
) : (
Expand All @@ -86,7 +77,9 @@
const { text, ...rest } = action
return (
<div className={`${classPrefix}-action`} key={index}>
<Button {...rest}>{action?.text}</Button>
<Button {...rest} size="large">
{action?.text}

Check warning on line 81 in src/packages/resultpage/resultpage.tsx

View check run for this annotation

Codecov / codecov/patch

src/packages/resultpage/resultpage.tsx#L81 

Added line #L81 was not covered by tests
</Button>
Comment on lines +80 to +82
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

需要补充按钮尺寸的测试用例

根据代码分析，ResultPage 组件的测试文件中缺少对按钮尺寸属性的测试覆盖。建议在 src/packages/resultpage/__test__/resultpage.spec.tsx 中添加以下测试场景：

  • 验证按钮默认渲染为 large 尺寸
  • 验证传入不同 size 属性时的按钮表现
  • 验证多个操作按钮时的尺寸一致性

具体测试点：

  • 在 should render actions correctly 测试用例中增加对 size="large" 属性的断言
  • 添加新的测试用例验证按钮尺寸的正确性
🔗 Analysis chain

按钮尺寸标准化需要补充测试

统一使用 "large" 尺寸的更改是合理的，但缺少测试覆盖。建议添加相关测试用例。

需要验证按钮在不同场景下的表现：

是否需要我帮助编写测试用例？

Let me check the test coverage for this specific component and its button size usage.

Let me check the content of the existing test file to see what's already covered.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查其他组件是否也使用了固定的 large 尺寸
rg -l "size=\"large\"" src/packages/

Length of output: 845

Script:

#!/bin/bash
# Check if there are existing tests for resultpage component
fd "resultpage" -e spec.tsx -e test.tsx src/packages/resultpage/

# Check the content of any existing test files
rg -A 5 "Button.*size" src/packages/resultpage/__tests__/ || echo "No test files found with Button size tests"

# Check the actual implementation to understand the button usage context
rg -A 5 "Button.*size" src/packages/resultpage/resultpage.tsx

Length of output: 567

Script:

#!/bin/bash
# Check content of the existing test file
cat src/packages/resultpage/__test__/resultpage.spec.tsx

# Also check if there are any button size related tests in button component
rg -A 5 "size.*large" src/packages/button/__tests__/

Length of output: 1531

🧰 Tools
🪛 GitHub Check: codecov/patch

[warning] 81-81: src/packages/resultpage/resultpage.tsx#L81
Added line #L81 was not covered by tests

</div>
)
})}
Expand Down
2 changes: 1 addition & 1 deletion src/packages/resultpage/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export type ResultPageStatusOptions = {
[key: string]: string
[key: string]: React.ReactNode
}

export type ResultPageStatus =
Expand Down
10 changes: 5 additions & 5 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2399,15 +2399,15 @@ $loading-color: var(--nutui-loading-color, $color-text-help) !default;
$loading-font-size: var(--nutui-loading-font-size, $font-size-s) !default;

// ResultPage
$resultpage-width: var(--nutui-resultpage-width, 247px) !default;
$resultpage-icon-size: var(--nutui-resultpage-icon-size, 48px) !default;
$resultpage-width: var(--nutui-resultpage-width, 240px) !default;
$resultpage-icon-size: var(--nutui-resultpage-icon-size, 36px) !default;
$resultpage-icon-margin-bottom: var(
--nutui-resultpage-icon-margin-bottom,
16px
12px
) !default;
$resultpage-title-margin-bottom: var(
--nutui-resultpage-title-margin-bottom,
9px
12px
) !default;
$resultpage-title-font-size: var(
--nutui-resultpage-title-font-size,
Expand All @@ -2431,5 +2431,5 @@ $resultpage-description-line-height: var(
) !default;
$resultpage-actions-margin-top: var(
--nutui-resultpage-actions-margin-top,
21px
16px
) !default;
Loading