feat(Empty): V14 (#2760)

Miles-hxy · web-flow · commit 116fbbf81fcd · 2024-12-03T11:08:04.000+08:00
diff --git a/src/config.json b/src/config.json
@@ -770,7 +770,8 @@
           "sort": 16,
           "show": true,
           "taro": true,
-          "author": "liukun"
+          "author": "liukun",
+          "v14": true
         },
         {
           "version": "3.0.0",
diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
@@ -115,12 +115,12 @@
     &.prev,
     &.next,
     &.disabled {
+      cursor: not-allowed;
       .nut-calendarcard-day-top,
       .nut-calendarcard-day-inner,
       .nut-calendarcard-day-bottom {
         color: $calendar-disable-color;
       }
-      cursor: not-allowed;
     }
   }
 }
diff --git a/src/packages/empty/__test__/empty.spec.tsx b/src/packages/empty/__test__/empty.spec.tsx
@@ -31,9 +31,9 @@ test('should render actions correctly', () => {
       actions={[{ text: '操作1' }, { text: '操作2' }]}
     />
   )
-  expect(container.querySelector('.nut-empty-actions')).toBeTruthy()
+  expect(container.querySelector('.nut-empty-actions-base')).toBeTruthy()
   expect(
-    container.querySelectorAll('.nut-empty-actions .nut-button').length
+    container.querySelectorAll('.nut-empty-actions-base .nut-button').length
   ).toEqual(2)
 })
 test('should render custom image correctly', () => {
diff --git a/src/packages/empty/demos/h5/demo1.tsx b/src/packages/empty/demos/h5/demo1.tsx
@@ -5,16 +5,19 @@ const Demo1 = () => {
   return (
     <>
       <Empty
-        title="标题"
-        description="无数据"
-        actions={[{ text: '操作按钮' }, { text: '操作按钮', type: 'primary' }]}
+        title="全屏缺省标题"
+        description="内容描述内容描述内容描述"
+        actions={[{ text: '次要操作' }, { text: '主要操作', type: 'primary' }]}
       />
       <Empty
-        description="无数据"
+        description="内容描述内容描述内容描述"
         actions={[{ text: '操作按钮' }]}
         style={{ marginTop: '10px' }}
       />
-      <Empty description="无数据" style={{ marginTop: '10px' }} />
+      <Empty
+        description="内容描述内容描述内容描述"
+        style={{ marginTop: '10px' }}
+      />
     </>
   )
 }
diff --git a/src/packages/empty/demos/h5/demo2.tsx b/src/packages/empty/demos/h5/demo2.tsx
@@ -2,6 +2,12 @@ import React from 'react'
 import { Empty } from '@nutui/nutui-react'
 
 const Demo2 = () => {
-  return <Empty description="无数据" size="small" />
+  return (
+    <Empty
+      title="半屏缺省标题"
+      description="内容描述内容描述内容描述"
+      size="small"
+    />
+  )
 }
 export default Demo2
diff --git a/src/packages/empty/demos/h5/demo3.tsx b/src/packages/empty/demos/h5/demo3.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { Empty } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  return <Empty description="无数据" imageSize={80} />
+  return <Empty description="内容描述内容描述" imageSize={80} />
 }
 export default Demo3
diff --git a/src/packages/empty/demos/h5/demo4.tsx b/src/packages/empty/demos/h5/demo4.tsx
@@ -11,14 +11,14 @@ const Demo4 = () => {
         setTabvalue(paneKey)
       }}
     >
-      <TabPane title="无内容" value="0">
-        <Empty status="empty" title="无内容" />
+      <TabPane title="通用空状态" value="0">
+        <Empty status="empty" title="通用空状态" />
       </TabPane>
       <TabPane title="加载失败/错误" value="1">
         <Empty status="error" title="加载失败/错误" />
       </TabPane>
-      <TabPane title="无网络" value="2">
-        <Empty status="network" title="无网络" />
+      <TabPane title="网络异常" value="2">
+        <Empty status="network" title="网络异常" />
       </TabPane>
     </Tabs>
   )
diff --git a/src/packages/empty/demos/h5/demo6.tsx b/src/packages/empty/demos/h5/demo6.tsx
@@ -9,8 +9,8 @@ const Demo6 = () => {
       style={{ marginBottom: '20px' }}
     >
       <div style={{ marginTop: '10px' }}>
-        <Button icon="refresh" type="primary" size="small">
-          重试
+        <Button type="primary" size="small">
+          刷新重试
         </Button>
       </div>
     </Empty>
diff --git a/src/packages/empty/demos/taro/demo1.tsx b/src/packages/empty/demos/taro/demo1.tsx
@@ -6,16 +6,19 @@ const Demo1 = () => {
   return (
     <>
       <Empty
-        title="标题"
-        description="无数据"
-        actions={[{ text: '操作按钮' }, { text: '操作按钮', type: 'primary' }]}
+        title="全屏缺省标题"
+        description="内容描述内容描述内容描述"
+        actions={[{ text: '次要操作' }, { text: '主要操作', type: 'primary' }]}
       />
       <Empty
-        description="无数据"
+        description="内容描述内容描述内容描述"
         actions={[{ text: '操作按钮' }]}
         style={{ marginTop: pxTransform(10) }}
       />
-      <Empty description="无数据" style={{ marginTop: pxTransform(10) }} />
+      <Empty
+        description="内容描述内容描述内容描述"
+        style={{ marginTop: pxTransform(10) }}
+      />
     </>
   )
 }
diff --git a/src/packages/empty/demos/taro/demo2.tsx b/src/packages/empty/demos/taro/demo2.tsx
@@ -2,6 +2,12 @@ import React from 'react'
 import { Empty } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
-  return <Empty description="无数据" size="small" />
+  return (
+    <Empty
+      title="半屏缺省标题"
+      description="内容描述内容描述内容描述"
+      size="small"
+    />
+  )
 }
 export default Demo2
diff --git a/src/packages/empty/demos/taro/demo3.tsx b/src/packages/empty/demos/taro/demo3.tsx
@@ -3,6 +3,6 @@ import { Empty } from '@nutui/nutui-react-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
-  return <Empty description="无数据" imageSize={pxTransform(80)} />
+  return <Empty description="内容描述内容描述" imageSize={pxTransform(80)} />
 }
 export default Demo3
diff --git a/src/packages/empty/demos/taro/demo4.tsx b/src/packages/empty/demos/taro/demo4.tsx
@@ -12,20 +12,20 @@ const Demo4 = () => {
     //     setTabvalue(paneKey)
     //   }}
     // >
-    //   <TabPane title="无内容" value="0">
-    //     <Empty status="empty" title="无内容" />
+    //   <TabPane title="通用空状态" value="0">
+    //     <Empty status="empty" title="通用空状态" />
     //   </TabPane>
     //   <TabPane title="加载失败/错误" value="1">
     //     <Empty status="error" title="加载失败/错误" />
     //   </TabPane>
-    //   <TabPane title="无网络" value="2">
-    //     <Empty status="network" title="无网络" />
+    //   <TabPane title="网络异常" value="2">
+    //     <Empty status="network" title="网络异常" />
     //   </TabPane>
     // </Tabs>
     <>
-      <Empty status="empty" title="无内容" />
+      <Empty status="empty" title="通用空状态" />
       <Empty status="error" title="加载失败/错误" />
-      <Empty status="network" title="无网络" />
+      <Empty status="network" title="网络异常" />
     </>
   )
 }
diff --git a/src/packages/empty/demos/taro/demo6.tsx b/src/packages/empty/demos/taro/demo6.tsx
@@ -8,7 +8,7 @@ const Demo6 = () => {
     <Empty status="error" description="加载失败">
       <View style={{ marginTop: pxTransform(10) }}>
         <Button type="primary" size="small">
-          重试
+          刷新重试
         </Button>
       </View>
     </Empty>
diff --git a/src/packages/empty/doc.en-US.md b/src/packages/empty/doc.en-US.md
@@ -84,10 +84,9 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | \--nutui-empty-padding | The padding value of the Empty component image | `32px 40px` |
 | \--nutui-empty-image-size | The size of the Empty component image | `160px` |
-| \--nutui-empty-image-small-size | The size of the Empty component image when the size is small | `120px` |
-| \--nutui-empty-title-margin-top | Empty component image title margin-top value | `0px` |
-| \--nutui-empty-title-margin-top | Empty component image title margin-top value | `8px` |
-| \--nutui-empty-title-line-height | Empty component image title row height | `$font-size-base` |
-| \--nutui-empty-description-margin-top | Empty component image description margin-top value | `4px` |
-| \--nutui-empty-description-line-height | Empty component image description row height | `1.2` |
+| \--nutui-empty-image-small-size | When size is small, the size of the Empty component image | `120px` |
+| \--nutui-empty-title-margin-top | The value of margin-top of the Empty component image title | `0px` |
+| \--nutui-empty-title-line-height | Empty component image title line height | `$font-size-l` |
+| \--nutui-empty-description-margin-top | The value of margin-top of the Empty component image description | `4px` |
+| \--nutui-empty-description-line-height | Empty component image description line height | `1` |
 | \--nutui-empty-background-color | Empty component background color | `#fff` |
diff --git a/src/packages/empty/doc.md b/src/packages/empty/doc.md
@@ -86,8 +86,7 @@ import { Empty } from '@nutui/nutui-react'
 | \--nutui-empty-image-size | Empty组件图片的尺寸大小 | `160px` |
 | \--nutui-empty-image-small-size | size 为 small 时，Empty组件图片的尺寸大小 | `120px` |
 | \--nutui-empty-title-margin-top | Empty组件图片标题margin-top的值 | `0px` |
-| \--nutui-empty-title-margin-top | Empty组件图片标题margin-top的值 | `8px` |
-| \--nutui-empty-title-line-height | Empty组件图片标题行高 | `$font-size-base` |
+| \--nutui-empty-title-line-height | Empty组件图片标题行高 | `$font-size-l` |
 | \--nutui-empty-description-margin-top | Empty组件图片描述margin-top的值 | `4px` |
-| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1.2` |
+| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1` |
 | \--nutui-empty-background-color | Empty组件背景色 | `#fff` |
diff --git a/src/packages/empty/doc.taro.md b/src/packages/empty/doc.taro.md
@@ -86,8 +86,7 @@ import { Empty } from '@nutui/nutui-react-taro'
 | \--nutui-empty-image-size | Empty组件图片的尺寸大小 | `160px` |
 | \--nutui-empty-image-small-size | size 为 small 时，Empty组件图片的尺寸大小 | `120px` |
 | \--nutui-empty-title-margin-top | Empty组件图片标题margin-top的值 | `0px` |
-| \--nutui-empty-title-margin-top | Empty组件图片标题margin-top的值 | `8px` |
-| \--nutui-empty-title-line-height | Empty组件图片标题行高 | `$font-size-base` |
+| \--nutui-empty-title-line-height | Empty组件图片标题行高 | `$font-size-l` |
 | \--nutui-empty-description-margin-top | Empty组件图片描述margin-top的值 | `4px` |
-| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1.2` |
+| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1` |
 | \--nutui-empty-background-color | Empty组件背景色 | `#fff` |
diff --git a/src/packages/empty/doc.zh-TW.md b/src/packages/empty/doc.zh-TW.md
@@ -80,13 +80,13 @@ import { Empty } from '@nutui/nutui-react'
 
 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。
 
-| 名稱 | 說明 | 默認值 |
+| 名稱 | 説明 | 默認值 |
 | --- | --- | --- |
 | \--nutui-empty-padding | Empty組件圖片的padding值 | `32px 40px` |
 | \--nutui-empty-image-size | Empty組件圖片的尺寸大小 | `160px` |
-| \--nutui-empty-image-small-size | size 為 small 時，Empty組件圖片的尺寸大小 | `120px` |
+| \--nutui-empty-image-small-size | size 爲 small 時，Empty組件圖片的尺寸大小 | `120px` |
 | \--nutui-empty-title-margin-top | Empty組件圖片標題margin-top的值 | `0px` |
-| \--nutui-empty-title-margin-top | Empty組件圖片標題margin-top的值 | `8px` |
-| \--nutui-empty-title-line-height | Empty組件圖片標題行高 | `$font-size-base` |
+| \--nutui-empty-title-line-height | Empty組件圖片標題行高 | `$font-size-l` |
 | \--nutui-empty-description-margin-top | Empty組件圖片描述margin-top的值 | `4px` |
+| \--nutui-empty-description-line-height | Empty組件圖片描述行高 | `1` |
 | \--nutui-empty-background-color | Empty組件背景色 | `#fff` |
diff --git a/src/packages/empty/empty.scss b/src/packages/empty/empty.scss
@@ -32,24 +32,28 @@
 
   &-title {
     margin-top: $empty-title-margin-top;
+    font-weight: $font-weight-bold;
     margin-bottom: $empty-title-margin-bottom;
     color: $color-title;
-    font-size: $font-size-base;
+    font-size: $font-size-l;
     line-height: $empty-title-line-height;
   }
 
   &-description {
-    margin-top: $empty-description-margin-top;
-    color: $color-text-help;
+    color: $color-text;
     font-size: $font-size-s;
     line-height: $empty-description-line-height;
   }
-
-  &-actions {
+  &-actions-base {
     display: flex;
     flex-direction: row;
     margin-top: 16px;
   }
+  &-actions-small {
+    display: flex;
+    flex-direction: row;
+    margin-top: 24px;
+  }
 
   &-action {
     margin-right: 6px;
diff --git a/src/packages/empty/empty.taro.tsx b/src/packages/empty/empty.taro.tsx
@@ -124,7 +124,7 @@ export const Empty: FunctionComponent<
         description
       )}
       {actions.length ? (
-        <View className={`${classPrefix}-actions`}>
+        <View className={`${classPrefix}-actions-${size}`}>
           {actions.map((action, index) => {
             const { text, ...rest } = action
             return (
diff --git a/src/packages/empty/empty.tsx b/src/packages/empty/empty.tsx
@@ -118,7 +118,7 @@ export const Empty: FunctionComponent<
         description
       )}
       {actions.length ? (
-        <div className={`${classPrefix}-actions`}>
+        <div className={`${classPrefix}-actions-${size}`}>
           {actions.map((action, index) => {
             const { text, ...rest } = action
             return (
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -1956,19 +1956,19 @@ $empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default;
 $empty-background-color: var(--nutui-empty-background-color, #fff) !default;
 $empty-title-margin-bottom: var(
   --nutui-empty-title-margin-bottom,
-  8px
+  12px
 ) !default;
 $empty-title-line-height: var(
   --nutui-empty-title-line-height,
-  $font-size-base
+  $font-size-l
 ) !default;
 $empty-description-margin-top: var(
   --nutui-empty-description-margin-top,
   0px
 ) !default;
 $empty-description-line-height: var(
   --nutui-empty-description-line-height,
-  1.2
+  1
 ) !default;
 
 // cascader（✅）

Original file line number	Diff line number	Diff line change
`@@ -115,12 +115,12 @@`
`115`	`115`	`&.prev,`
`116`	`116`	`&.next,`
`117`	`117`	`&.disabled {`
	`118`	`+ cursor: not-allowed;`
`118`	`119`	`.nut-calendarcard-day-top,`
`119`	`120`	`.nut-calendarcard-day-inner,`
`120`	`121`	`.nut-calendarcard-day-bottom {`
`121`	`122`	`color: $calendar-disable-color;`
`122`	`123`	`}`
`123`		`- cursor: not-allowed;`
`124`	`124`	`}`
`125`	`125`	`}`
`126`	`126`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,6 @@ import React from 'react'`
`2`	`2`	`import { Empty } from '@nutui/nutui-react'`
`3`	`3`
`4`	`4`	`const Demo3 = () => {`
`5`		`- return <Empty description="无数据" imageSize={80} />`
	`5`	`+ return <Empty description="内容描述内容描述" imageSize={80} />`
`6`	`6`	`}`
`7`	`7`	`export default Demo3`