@nutui/nutui-react 4.0.0-beta.2 → 4.0.0-beta.4

package/dist/es/packages/countdown/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-countdown {
   display: var(--nutui-countdown-display, flex);
   flex-direction: row;
@@ -57,7 +53,7 @@ page {
 }
 .nut-countdown-number-primary {
   background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff0f23));
-  color: var(--nutui-countdown-number-primary-color, #ffffff);
+  color: var(--nutui-countdown-number-primary-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-countdown-number-primary::after {
   border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23));

package/dist/es/packages/countup/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-countup-list {
   /* #ifdef dynamic*/
   display: flex;

package/dist/es/packages/datepicker/style/style.css

@@ -6,9 +6,4 @@ page {
   --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
   --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
-}
-
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
+}

package/dist/es/packages/datepickerview/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-datepickerview {
   display: flex;
   width: 100%;

package/dist/es/packages/dialog/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-dialog {
   display: flex;
   flex-direction: column;
@@ -72,7 +68,7 @@ page {
   transform: translateX(-50%);
 }
 .nut-dialog-close-bottom .nut-icon {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-color-text-disabled, #b4b8bf);
   background-color: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4));
   border-radius: 50%;
   width: var(--nutui-dialog-bottom-close-icon-size, var(--nutui-font-size-xxl, calc(24px * var(--nut-scale-font, var(--nut-scale-f, 1)))));

package/dist/es/packages/divider/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-divider {
   display: flex;
   align-items: center;

package/dist/es/packages/drag/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-drag {
   position: fixed;
   z-index: 9997 !important;

package/dist/es/packages/elevator/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-elevator {
   position: relative;
   display: flex;
@@ -90,7 +86,7 @@ page {
   width: var(--nutui-elevator-list-item-code-current-width, calc(45px * var(--nut-scale-f, 1)));
   height: var(--nutui-elevator-list-item-code-current-height, calc(45px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%);
-  background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc));
+  background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #b4b8bf));
   box-shadow: 0 calc(3px * var(--nut-scale-f, 1)) calc(3px * var(--nut-scale-f, 1)) calc(1px * var(--nut-scale-f, 1)) rgb(240, 240, 240);
   color: var(--nutui-elevator-list-item-code-current-color, #ffffff);
 }

package/dist/es/packages/ellipsis/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-ellipsis {
   display: flex;
 }

package/dist/es/packages/empty/empty.d.ts

@@ -1,21 +1,14 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
-import { UIType, UISize, UIFill } from "../../types/base/atoms";
-export interface EmptyAction {
-    text: React.ReactNode;
-    type?: UIType;
-    size?: UISize;
-    fill?: UIFill;
-    disabled?: boolean;
-    onClick?: () => () => void;
-}
+import { type EmptyAction, type EmptySize, type EmptyStatus } from "../../types";
+export type { EmptyAction, EmptySize, EmptyStatus } from "../../types";
 export interface EmptyProps extends BasicComponent {
     image?: ReactNode;
     imageSize: number | string;
     title: ReactNode;
     description: ReactNode;
-    size: 'small' | 'base';
-    status: 'empty' | 'error' | 'network';
+    size: EmptySize;
+    status: EmptyStatus;
     actions: Array<EmptyAction>;
 }
 export declare const Empty: FunctionComponent<Partial<EmptyProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>>;

package/dist/es/packages/empty/empty.js

@@ -6,17 +6,13 @@ import React, { useEffect, useState } from "react";
 import classNames from "classnames";
 import { ComponentDefaults } from "../../utils/typings";
 import Button from "../button";
-var defaultStatus = {
-    empty: 'https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png',
-    error: 'https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png',
-    network: 'https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png'
-};
+import { getEmptyStatusImage } from "../../types";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     title: '',
     description: '',
     imageSize: '',
-    size: 'base',
-    status: 'empty',
+    size: 'half',
+    status: 'network',
     actions: []
 });
 var classPrefix = "nut-empty";
@@ -34,7 +30,7 @@ export var Empty = function(props) {
         "style"
     ]);
     var _useState = _sliced_to_array(useState({}), 2), imgStyle = _useState[0], setImgStyle = _useState[1];
-    var imageUrl = image || defaultStatus[status];
+    var imageUrl = image || getEmptyStatusImage(status);
     var imageNode = typeof imageUrl === 'string' ? /*#__PURE__*/ React.createElement("img", {
         style: {
             width: '100%',
@@ -62,18 +58,26 @@ export var Empty = function(props) {
     }, [
         imageSize
     ]);
-    var cls = classNames(classPrefix, className);
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
-        className: cls
-    }, rest), /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, "-").concat(size),
+    var cls = classNames(classPrefix, "".concat(classPrefix, "--").concat(size), className);
+    var imageBlock = /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-image"),
         style: imgStyle
-    }, imageNode), typeof title === 'string' && title ? /*#__PURE__*/ React.createElement("div", {
+    }, imageNode);
+    var titleBlock = typeof title === 'string' && title ? /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-title")
-    }, title) : title, typeof description === 'string' ? /*#__PURE__*/ React.createElement("div", {
+    }, title) : title;
+    var descriptionBlock = typeof description === 'string' ? /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-description")
-    }, description) : description, actions.length ? /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, "-actions-").concat(size)
+    }, description) : description;
+    return /*#__PURE__*/ React.createElement("div", _object_spread({
+        className: cls,
+        style: style
+    }, rest), size === 'partial' ? /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-partial-body")
+    }, imageBlock, /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-content")
+    }, titleBlock, descriptionBlock)) : /*#__PURE__*/ React.createElement(React.Fragment, null, imageBlock, titleBlock, descriptionBlock), actions.length ? /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-actions")
     }, actions.map(function(action, index) {
         var text = action.text, rest = _object_without_properties(action, [
             "text"

package/dist/es/packages/empty/index.d.ts

@@ -1,3 +1,3 @@
 import { Empty } from './empty';
-export type { EmptyProps } from './empty';
+export type { EmptyAction, EmptyProps, EmptySize, EmptyStatus } from './empty';
 export default Empty;

package/dist/es/packages/empty/style/empty.scss

@@ -6,23 +6,8 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-  background-color: $empty-background-color;
-
-  &-base {
-    width: $empty-image-size;
-    height: $empty-image-size;
-
-    img,
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &-small {
-    width: $empty-image-small-size;
-    height: $empty-image-small-size;
 
+  &-image {
     img,
     image {
       width: 100%;
@@ -31,32 +16,113 @@
   }
 
   &-title {
-    margin-top: $empty-title-margin-top;
+    text-align: center;
+    color: $empty-title-color;
     font-weight: $font-weight-bold;
-    margin-bottom: $empty-title-margin-bottom;
-    color: $color-title;
-    font-size: $font-size-l;
-    line-height: $empty-title-line-height;
   }
 
   &-description {
-    color: $color-text;
-    font-size: $font-size-s;
-    line-height: $empty-description-line-height;
-  }
-  &-actions-base {
-    display: flex;
-    flex-direction: row;
-    margin-top: scale-px(24px);
+    text-align: center;
+    color: $empty-description-color;
+    font-weight: $font-weight;
   }
-  &-actions-small {
+
+  &-actions {
     display: flex;
     flex-direction: row;
-    margin-top: scale-px(16px);
+    justify-content: center;
   }
 
   &-action {
     margin-right: scale-px(6px);
     margin-left: scale-px(6px);
   }
+
+  &-partial-body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  &-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // 全屏型：整页无数据
+  &--full {
+    padding-top: $empty-full-padding-top;
+
+    .nut-empty-image {
+      width: $empty-full-image-size;
+      height: $empty-full-image-size;
+    }
+
+    .nut-empty-title {
+      font-size: $empty-full-title-font-size;
+      line-height: $empty-full-title-line-height;
+    }
+
+    .nut-empty-description {
+      font-size: $empty-full-description-font-size;
+      line-height: $empty-full-description-line-height;
+    }
+
+    .nut-empty-actions {
+      margin-top: $empty-full-actions-margin-top;
+    }
+  }
+
+  // 半屏型：模块、弹层等区域
+  &--half {
+    .nut-empty-image {
+      width: $empty-half-image-size;
+      height: $empty-half-image-size;
+    }
+
+    .nut-empty-title {
+      font-size: $empty-half-title-font-size;
+      line-height: $empty-half-title-line-height;
+    }
+
+    .nut-empty-description {
+      font-size: $empty-half-description-font-size;
+      line-height: $empty-half-description-line-height;
+    }
+
+    .nut-empty-actions {
+      margin-top: $empty-half-actions-margin-top;
+    }
+  }
+
+  // 局部型：横向图文
+  &--partial {
+    padding: $empty-partial-padding;
+
+    .nut-empty-partial-body {
+      gap: $empty-partial-content-gap;
+    }
+
+    .nut-empty-image {
+      width: $empty-partial-image-size;
+      height: $empty-partial-image-size;
+    }
+
+    .nut-empty-title {
+      text-align: left;
+      font-size: $empty-partial-description-font-size;
+      line-height: $empty-partial-description-line-height;
+      color: $empty-title-color;
+      font-weight: $font-weight;
+    }
+
+    .nut-empty-description {
+      text-align: left;
+      font-size: $empty-partial-description-font-size;
+      line-height: $empty-partial-description-line-height;
+      color: $empty-description-color;
+      font-weight: $font-weight;
+    }
+  }
 }

package/dist/es/packages/empty/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-empty {
   box-sizing: border-box;
   width: 100%;
@@ -19,51 +15,96 @@ page {
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding: var(--nutui-empty-padding, calc(32px * var(--nut-scale-f, 1)) calc(40px * var(--nut-scale-f, 1)));
-  background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff));
+  padding: var(--nutui-empty-padding, calc(20px * var(--nut-scale-f, 1)));
 }
-.nut-empty-base {
-  width: var(--nutui-empty-image-size, calc(160px * var(--nut-scale-f, 1)));
-  height: var(--nutui-empty-image-size, calc(160px * var(--nut-scale-f, 1)));
-}
-.nut-empty-base img,
-.nut-empty-base image {
-  width: 100%;
-  height: 100%;
-}
-.nut-empty-small {
-  width: var(--nutui-empty-image-small-size, calc(120px * var(--nut-scale-f, 1)));
-  height: var(--nutui-empty-image-small-size, calc(120px * var(--nut-scale-f, 1)));
-}
-.nut-empty-small img,
-.nut-empty-small image {
+.nut-empty-image img,
+.nut-empty-image image {
   width: 100%;
   height: 100%;
 }
 .nut-empty-title {
-  margin-top: var(--nutui-empty-title-margin-top, 0px);
+  text-align: center;
+  color: var(--nutui-empty-title-color, var(--nutui-color-title, #1a1a1a));
   font-weight: var(--nutui-font-weight-bold, 600);
-  margin-bottom: var(--nutui-empty-title-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
-  color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-empty-description {
-  color: var(--nutui-color-text, #505259);
-  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  line-height: var(--nutui-empty-description-line-height, 1);
-}
-.nut-empty-actions-base {
-  display: flex;
-  flex-direction: row;
-  margin-top: calc(24px * var(--nut-scale-f, 1));
+  text-align: center;
+  color: var(--nutui-empty-description-color, var(--nutui-color-text-help, #888b94));
+  font-weight: var(--nutui-font-weight, 400);
 }
-.nut-empty-actions-small {
+.nut-empty-actions {
   display: flex;
   flex-direction: row;
-  margin-top: calc(16px * var(--nut-scale-f, 1));
+  justify-content: center;
 }
 .nut-empty-action {
   margin-right: calc(6px * var(--nut-scale-f, 1));
   margin-left: calc(6px * var(--nut-scale-f, 1));
+}
+.nut-empty-partial-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+}
+.nut-empty-content {
+  flex: 1;
+  min-width: 0;
+}
+.nut-empty--full {
+  padding-top: var(--nutui-empty-full-padding-top, calc(160px * var(--nut-scale-f, 1)));
+}
+.nut-empty--full .nut-empty-image {
+  width: var(--nutui-empty-full-image-size, calc(160px * var(--nut-scale-f, 1)));
+  height: var(--nutui-empty-full-image-size, calc(160px * var(--nut-scale-f, 1)));
+}
+.nut-empty--full .nut-empty-title {
+  font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-xxl, calc(24px * var(--nut-scale-font, var(--nut-scale-f, 1))))));
+}
+.nut-empty--full .nut-empty-description {
+  font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-full-description-line-height, calc(22px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+}
+.nut-empty--full .nut-empty-actions {
+  margin-top: var(--nutui-empty-full-actions-margin-top, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-empty--half .nut-empty-image {
+  width: var(--nutui-empty-half-image-size, calc(80px * var(--nut-scale-f, 1)));
+  height: var(--nutui-empty-half-image-size, calc(80px * var(--nut-scale-f, 1)));
+}
+.nut-empty--half .nut-empty-title {
+  font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-half-title-line-height, calc(22px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+}
+.nut-empty--half .nut-empty-description {
+  font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1))))));
+}
+.nut-empty--half .nut-empty-actions {
+  margin-top: var(--nutui-empty-half-actions-margin-top, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-empty--partial {
+  padding: var(--nutui-empty-partial-padding, calc(0px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)));
+}
+.nut-empty--partial .nut-empty-partial-body {
+  gap: var(--nutui-empty-partial-content-gap, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-empty--partial .nut-empty-image {
+  width: var(--nutui-empty-partial-image-size, calc(32px * var(--nut-scale-f, 1)));
+  height: var(--nutui-empty-partial-image-size, calc(32px * var(--nut-scale-f, 1)));
+}
+.nut-empty--partial .nut-empty-title {
+  text-align: left;
+  font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-partial-description-line-height, calc(32px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  color: var(--nutui-empty-title-color, var(--nutui-color-title, #1a1a1a));
+  font-weight: var(--nutui-font-weight, 400);
+}
+.nut-empty--partial .nut-empty-description {
+  text-align: left;
+  font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-partial-description-line-height, calc(32px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  color: var(--nutui-empty-description-color, var(--nutui-color-text-help, #888b94));
+  font-weight: var(--nutui-font-weight, 400);
 }

package/dist/es/packages/empty/style-jmapp/empty.scss

@@ -6,23 +6,8 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-  background-color: $empty-background-color;
-
-  &-base {
-    width: $empty-image-size;
-    height: $empty-image-size;
-
-    img,
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &-small {
-    width: $empty-image-small-size;
-    height: $empty-image-small-size;
 
+  &-image {
     img,
     image {
       width: 100%;
@@ -31,32 +16,113 @@
   }
 
   &-title {
-    margin-top: $empty-title-margin-top;
+    text-align: center;
+    color: $empty-title-color;
     font-weight: $font-weight-bold;
-    margin-bottom: $empty-title-margin-bottom;
-    color: $color-title;
-    font-size: $font-size-l;
-    line-height: $empty-title-line-height;
   }
 
   &-description {
-    color: $color-text;
-    font-size: $font-size-s;
-    line-height: $empty-description-line-height;
-  }
-  &-actions-base {
-    display: flex;
-    flex-direction: row;
-    margin-top: scale-px(24px);
+    text-align: center;
+    color: $empty-description-color;
+    font-weight: $font-weight;
   }
-  &-actions-small {
+
+  &-actions {
     display: flex;
     flex-direction: row;
-    margin-top: scale-px(16px);
+    justify-content: center;
   }
 
   &-action {
     margin-right: scale-px(6px);
     margin-left: scale-px(6px);
   }
+
+  &-partial-body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  &-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // 全屏型：整页无数据
+  &--full {
+    padding-top: $empty-full-padding-top;
+
+    .nut-empty-image {
+      width: $empty-full-image-size;
+      height: $empty-full-image-size;
+    }
+
+    .nut-empty-title {
+      font-size: $empty-full-title-font-size;
+      line-height: $empty-full-title-line-height;
+    }
+
+    .nut-empty-description {
+      font-size: $empty-full-description-font-size;
+      line-height: $empty-full-description-line-height;
+    }
+
+    .nut-empty-actions {
+      margin-top: $empty-full-actions-margin-top;
+    }
+  }
+
+  // 半屏型：模块、弹层等区域
+  &--half {
+    .nut-empty-image {
+      width: $empty-half-image-size;
+      height: $empty-half-image-size;
+    }
+
+    .nut-empty-title {
+      font-size: $empty-half-title-font-size;
+      line-height: $empty-half-title-line-height;
+    }
+
+    .nut-empty-description {
+      font-size: $empty-half-description-font-size;
+      line-height: $empty-half-description-line-height;
+    }
+
+    .nut-empty-actions {
+      margin-top: $empty-half-actions-margin-top;
+    }
+  }
+
+  // 局部型：横向图文
+  &--partial {
+    padding: $empty-partial-padding;
+
+    .nut-empty-partial-body {
+      gap: $empty-partial-content-gap;
+    }
+
+    .nut-empty-image {
+      width: $empty-partial-image-size;
+      height: $empty-partial-image-size;
+    }
+
+    .nut-empty-title {
+      text-align: left;
+      font-size: $empty-partial-description-font-size;
+      line-height: $empty-partial-description-line-height;
+      color: $empty-title-color;
+      font-weight: $font-weight;
+    }
+
+    .nut-empty-description {
+      text-align: left;
+      font-size: $empty-partial-description-font-size;
+      line-height: $empty-partial-description-line-height;
+      color: $empty-description-color;
+      font-weight: $font-weight;
+    }
+  }
 }