fix(resultpage): 适配 V14 (#2741)

jdf2e · Nov 29, 2024 · 763dd27 · 763dd27
1 parent 15de77e
commit 763dd27
Show file tree

Hide file tree

Showing 20 changed files with 106 additions and 94 deletions.
diff --git a/src/config.json b/src/config.json
@@ -768,6 +768,7 @@
           "sort": 15,
           "show": true,
           "taro": true,
+          "v14": true,
           "author": "songsong"
         },
         {

diff --git a/src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap b/src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap
@@ -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"
     >

diff --git a/src/packages/resultpage/demo.taro.tsx b/src/packages/resultpage/demo.taro.tsx
@@ -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'
@@ -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>

diff --git a/src/packages/resultpage/demos/h5/demo1.tsx b/src/packages/resultpage/demos/h5/demo1.tsx
@@ -10,10 +10,10 @@ const Demo1 = () => {
         status="success"
         actions={[
           {
-            text: '次要按钮',
+            text: '次要操作',
           },
           {
-            text: '主要按钮',
+            text: '主要操作',
             type: 'primary',
           },
         ]}

diff --git a/src/packages/resultpage/demos/h5/demo2.tsx b/src/packages/resultpage/demos/h5/demo2.tsx
@@ -10,10 +10,10 @@ const Demo1 = () => {
         status="error"
         actions={[
           {
-            text: '次要按钮',
+            text: '次要操作',
           },
           {
-            text: '主要按钮',
+            text: '主要操作',
             type: 'primary',
           },
         ]}

diff --git a/src/packages/resultpage/demos/h5/demo3.tsx b/src/packages/resultpage/demos/h5/demo3.tsx
@@ -9,10 +9,10 @@ const Demo1 = () => {
         status="warning"
         actions={[
           {
-            text: '次要按钮',
+            text: '次要操作',
           },
           {
-            text: '主要按钮',
+            text: '主要操作',
             type: 'primary',
           },
         ]}

diff --git a/src/packages/resultpage/demos/h5/demo4.tsx b/src/packages/resultpage/demos/h5/demo4.tsx
@@ -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: '次要操作',
             },
           ]}
         />

diff --git a/src/packages/resultpage/demos/taro/demo1.tsx b/src/packages/resultpage/demos/taro/demo1.tsx
@@ -10,10 +10,10 @@ const Demo1 = () => {
         status="success"
         actions={[
           {
-            text: '次要按钮',
+            text: '次要操作',
           },
           {
-            text: '主要按钮',
+            text: '主要操作',
             type: 'primary',
           },
         ]}

diff --git a/src/packages/resultpage/demos/taro/demo2.tsx b/src/packages/resultpage/demos/taro/demo2.tsx
@@ -10,10 +10,10 @@ const Demo1 = () => {
         status="error"
         actions={[
           {
-            text: '次要按钮',
+            text: '次要操作',
           },
           {
-            text: '主要按钮',
+            text: '主要操作',
             type: 'primary',
           },
         ]}

diff --git a/src/packages/resultpage/demos/taro/demo3.tsx b/src/packages/resultpage/demos/taro/demo3.tsx
@@ -9,10 +9,10 @@ const Demo1 = () => {
         status="warning"
         actions={[
           {
-            text: '次要按钮',
+            text: '次要操作',
           },
           {
-            text: '主要按钮',
+            text: '主要操作',
             type: 'primary',
           },
         ]}

diff --git a/src/packages/resultpage/demos/taro/demo4.tsx b/src/packages/resultpage/demos/taro/demo4.tsx
@@ -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: '次要操作',
             },
           ]}
         />

diff --git a/src/packages/resultpage/doc.en-US.md b/src/packages/resultpage/doc.en-US.md
@@ -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` | `-` |
@@ -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` |
diff --git a/src/packages/resultpage/doc.md b/src/packages/resultpage/doc.md
@@ -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` | `-` |
@@ -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` |
diff --git a/src/packages/resultpage/doc.taro.md b/src/packages/resultpage/doc.taro.md
@@ -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` | `-` |
@@ -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` |
diff --git a/src/packages/resultpage/doc.zh-TW.md b/src/packages/resultpage/doc.zh-TW.md
@@ -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` | `-` |
@@ -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` |
diff --git a/src/packages/resultpage/resultpage.scss b/src/packages/resultpage/resultpage.scss
@@ -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;
+    }
   }
   &-title {
     width: $resultpage-width;

diff --git a/src/packages/resultpage/resultpage.taro.tsx b/src/packages/resultpage/resultpage.taro.tsx
@@ -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,
@@ -18,6 +19,7 @@ export type ResultPageAction = {
   disabled?: boolean
   onClick?: () => () => void
 }
+
 export interface ResultPageProps extends BasicComponent {
   title: ReactNode
   description: ReactNode
@@ -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>
       {typeof title === 'string' && title ? (
         <View className={`${classPrefix}-title`}>{title}</View>
       ) : (
@@ -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>