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

package/dist/cjs/packages/dialog/style/style.harmony.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-button {
   position: relative;
   display: flex;
@@ -121,20 +117,20 @@ page {
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   border-style: solid;
-  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
-  color: var(--nutui-button-primary-color, #ffffff);
-  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #b4b8bf));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-button-default-none-disabled {
   color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94));
 }
 .nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
   background: transparent;
-  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #b4b8bf));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-button-default:active:not(.nut-button-disabled):not(.nut-button-loading) {
   background: var(--nutui-button-default-pressed, var(--nutui-color-default-pressed, #e6e6e6));
@@ -278,16 +274,16 @@ page {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-primary {
-  color: var(--nutui-button-primary-color, #ffffff);
+  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-primary-background-color, var(--nutui-color-primary, #ff0f23));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-primary-children {
-  color: var(--nutui-button-primary-color, #ffffff);
+  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-primary-disabled, .nut-button-primary-solid-disabled {
-  color: var(--nutui-button-primary-color, #ffffff);
+  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ff91a5));
   border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ff91a5));
 }
@@ -347,16 +343,16 @@ page {
   background: var(--nutui-color-primary-light-pressed, #ffe8ee);
 }
 .nut-button-success {
-  color: var(--nutui-button-success-color, #ffffff);
+  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-success-background-color, var(--nutui-color-success, #0acc2a));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-success-children {
-  color: var(--nutui-button-success-color, #ffffff);
+  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-success-disabled, .nut-button-success-solid-disabled {
-  color: var(--nutui-button-success-color, #ffffff);
+  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
   border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
@@ -390,16 +386,16 @@ page {
   background: var(--nutui-button-success-pressed, var(--nutui-color-success-pressed, #00801e));
 }
 .nut-button-info {
-  color: var(--nutui-button-info-color, #ffffff);
+  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0c82f7));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-info-children {
-  color: var(--nutui-button-info-color, #ffffff);
+  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-info-disabled, .nut-button-info-solid-disabled {
-  color: var(--nutui-button-info-color, #ffffff);
+  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
   border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
 }
@@ -433,16 +429,16 @@ page {
   background: var(--nutui-button-info-pressed, var(--nutui-color-info-pressed, #496af2));
 }
 .nut-button-danger {
-  color: var(--nutui-button-danger-color, #ffffff);
+  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-danger-children {
-  color: var(--nutui-button-danger-color, #ffffff);
+  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-danger-disabled, .nut-button-danger-solid-disabled {
-  color: var(--nutui-button-danger-color, #ffffff);
+  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ff91a5)));
   border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ff91a5)));
 }
@@ -476,16 +472,16 @@ page {
   background: var(--nutui-button-danger-pressed, var(--nutui-color-danger-pressed, #ff3333));
 }
 .nut-button-warning {
-  color: var(--nutui-button-warning-color, #ffffff);
+  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffaa00));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-warning-children {
-  color: var(--nutui-button-warning-color, #ffffff);
+  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-warning-disabled, .nut-button-warning-solid-disabled {
-  color: var(--nutui-button-warning-color, #ffffff);
+  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
@@ -754,7 +750,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/cjs/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/cjs/packages/divider/style/style.harmony.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/cjs/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/cjs/packages/drag/style/style.harmony.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/cjs/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/cjs/packages/elevator/style/style.harmony.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/cjs/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/cjs/packages/ellipsis/style/style.harmony.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/cjs/packages/empty/empty.d.ts

@@ -1,21 +1,14 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
-import { UIFill, UISize, UIType } 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/cjs/packages/empty/empty.js

@@ -19,24 +19,20 @@ var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")
 var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _button = require("../button/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'
-};
+var _types = require("../../types");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     title: '',
     description: '',
     imageSize: '',
-    size: 'base',
-    status: 'empty',
+    size: 'half',
+    status: 'network',
     actions: []
 });
 var classPrefix = "nut-empty";
 var Empty = function Empty(props) {
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), image = _$_object_spread.image, imageSize = _$_object_spread.imageSize, title = _$_object_spread.title, description = _$_object_spread.description, children = _$_object_spread.children, className = _$_object_spread.className, size = _$_object_spread.size, status = _$_object_spread.status, actions = _$_object_spread.actions, style = _$_object_spread.style;
     var _useState = (0, _sliced_to_array._)((0, _react.useState)({}), 2), imgStyle = _useState[0], setImgStyle = _useState[1];
-    var imageUrl = image || defaultStatus[status];
+    var imageUrl = image || (0, _types.getEmptyStatusImage)(status);
     var imageNode = typeof imageUrl === 'string' ? /*#__PURE__*/ _react.default.createElement(_components.Image, {
         style: {
             width: '100%',
@@ -63,19 +59,26 @@ var Empty = function Empty(props) {
     }, [
         imageSize
     ]);
-    var cls = (0, _classnames.default)(classPrefix, className);
-    return /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: cls,
-        style: style
-    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-").concat(size),
+    var cls = (0, _classnames.default)(classPrefix, "".concat(classPrefix, "--").concat(size), className);
+    var imageBlock = /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-image"),
         style: imgStyle
-    }, imageNode), typeof title === 'string' && title ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+    }, imageNode);
+    var titleBlock = typeof title === 'string' && title ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-title")
-    }, title) : title, typeof description === 'string' ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+    }, title) : title;
+    var descriptionBlock = typeof description === 'string' ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-description")
-    }, description) : description, actions.length ? /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-actions-").concat(size)
+    }, description) : description;
+    return /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: cls,
+        style: style
+    }, size === 'partial' ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-partial-body")
+    }, imageBlock, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-content")
+    }, titleBlock, descriptionBlock)) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, imageBlock, titleBlock, descriptionBlock), actions.length ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-actions")
     }, actions.map(function(action, index) {
         var text = action.text, rest = (0, _object_without_properties._)(action, [
             "text"

package/dist/cjs/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/cjs/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/cjs/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);
 }