@nutui/nutui-react-taro 4.0.0-beta.3 → 4.0.0-beta.5

package/dist/es/packages/ellipsis/ellipsis.js

@@ -23,9 +23,9 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     width: 'auto'
 });
 var classPrefix = "nut-ellipsis";
-export var Ellipsis = function(props) {
+export var Ellipsis = function Ellipsis(props) {
     var _ellipsis_current, _ellipsis_current1, _ellipsis_current2, _ellipsis_current3;
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, content = _ref.content, direction = _ref.direction, rows = _ref.rows, className = _ref.className, expandText = _ref.expandText, collapseText = _ref.collapseText, symbol = _ref.symbol, lineHeight = _ref.lineHeight, width = _ref.width, onClick = _ref.onClick, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, content = _$_object_spread.content, direction = _$_object_spread.direction, rows = _$_object_spread.rows, className = _$_object_spread.className, expandText = _$_object_spread.expandText, collapseText = _$_object_spread.collapseText, symbol = _$_object_spread.symbol, lineHeight = _$_object_spread.lineHeight, width = _$_object_spread.width, onClick = _$_object_spread.onClick, onChange = _$_object_spread.onChange, rest = _object_without_properties(_$_object_spread, [
         "children",
         "content",
         "direction",
@@ -90,7 +90,7 @@ export var Ellipsis = function(props) {
         content
     ]);
     // 获取省略号宽度
-    var getSymbolInfo = function() {
+    var getSymbolInfo = function getSymbolInfo() {
         return _async_to_generator(function() {
             var refe;
             return _ts_generator(this, function(_state) {
@@ -110,13 +110,13 @@ export var Ellipsis = function(props) {
             });
         })();
     };
-    var symbolText = function() {
+    var symbolText = function symbolText() {
         if (direction === 'end' || direction === 'middle') {
             return "".concat(symbol).concat(expandText);
         }
         return "".concat(symbol).concat(expandText).concat(symbol);
     };
-    var getReference = function() {
+    var getReference = function getReference() {
         return _async_to_generator(function() {
             var query;
             return _ts_generator(this, function(_state) {
@@ -157,7 +157,7 @@ export var Ellipsis = function(props) {
         })();
     };
     // 计算省略号的位置
-    var calcEllipse = function() {
+    var calcEllipse = function calcEllipse() {
         return _async_to_generator(function() {
             var refe, rowNum, end, end1, start;
             return _ts_generator(this, function(_state) {
@@ -199,7 +199,7 @@ export var Ellipsis = function(props) {
         })();
     };
     // 验证省略号
-    var verifyEllipsis = function() {
+    var verifyEllipsis = function verifyEllipsis1() {
         return _async_to_generator(function() {
             var refe, _ellipsis_current_leading, _ellipsis_current, _ellipsis_current_leading1, _ellipsis_current1, _ellipsis_current2, _ellipsis_current_tailing, _ellipsis_current3;
             return _ts_generator(this, function(_state) {
@@ -231,13 +231,13 @@ export var Ellipsis = function(props) {
             });
         })();
     };
-    var assignContent = function() {
+    var assignContent = function assignContent() {
         var _ellipsis_current, _ellipsis_current1, _ellipsis_current2, _ellipsis_current3;
         var newContent = "".concat(((_ellipsis_current = ellipsis.current) === null || _ellipsis_current === void 0 ? void 0 : _ellipsis_current.leading) || '').concat(((_ellipsis_current1 = ellipsis.current) === null || _ellipsis_current1 === void 0 ? void 0 : _ellipsis_current1.leading) ? symbol : '').concat(expandText || '').concat(((_ellipsis_current2 = ellipsis.current) === null || _ellipsis_current2 === void 0 ? void 0 : _ellipsis_current2.tailing) ? symbol : '').concat(((_ellipsis_current3 = ellipsis.current) === null || _ellipsis_current3 === void 0 ? void 0 : _ellipsis_current3.tailing) || '');
         setContentCopy(newContent);
     };
     // 计算省略号
-    var tailorContent = function(left, right) {
+    var tailorContent = function tailorContent(left, right) {
         var type = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : '';
         var threeDotWidth = symbolTextWidth.current;
         var direc = direction === 'middle' && type ? type : direction;
@@ -277,12 +277,12 @@ export var Ellipsis = function(props) {
         }
         return content.slice(cutoff, end);
     };
-    var pxToNumber = function(value) {
+    var pxToNumber = function pxToNumber(value) {
         if (!value) return 0;
         var match = value.match(/^\d*(\.\d*)?/);
         return match ? Number(match[0]) : 0;
     };
-    var clickHandle = function(type) {
+    var clickHandle = function clickHandle(type) {
         if (type === 1) {
             setExpanded(true);
             onChange && onChange('expand');
@@ -291,7 +291,7 @@ export var Ellipsis = function(props) {
             onChange && onChange('collapse');
         }
     };
-    var handleClick = function() {
+    var handleClick = function handleClick() {
         onClick && onClick();
     };
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", _object_spread({
@@ -314,7 +314,7 @@ export var Ellipsis = function(props) {
         }
     }, (_ellipsis_current = ellipsis.current) === null || _ellipsis_current === void 0 ? void 0 : _ellipsis_current.leading, ((_ellipsis_current1 = ellipsis.current) === null || _ellipsis_current1 === void 0 ? void 0 : _ellipsis_current1.leading) && symbol, expandText ? /*#__PURE__*/ React.createElement("span", {
         className: "nut-ellipsis-text",
-        onClick: function(e) {
+        onClick: function onClick(e) {
             e.stopPropagation();
             clickHandle(1);
         }
@@ -324,7 +324,7 @@ export var Ellipsis = function(props) {
         }
     }, content, expandText ? /*#__PURE__*/ React.createElement("span", {
         className: "nut-ellipsis-text",
-        onClick: function(e) {
+        onClick: function onClick(e) {
             e.stopPropagation();
             clickHandle(2);
         }

package/dist/es/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/es/packages/empty/empty.js

@@ -7,24 +7,20 @@ import classNames from "classnames";
 import { View, Image } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { Button } from "../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'
-};
+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";
-export var Empty = function(props) {
+export var Empty = function Empty(props) {
     var _$_object_spread = _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 = _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(Image, {
         style: {
             width: '100%',
@@ -51,19 +47,26 @@ export var Empty = function(props) {
     }, [
         imageSize
     ]);
-    var cls = classNames(classPrefix, className);
-    return /*#__PURE__*/ React.createElement(View, {
-        className: cls,
-        style: style
-    }, /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, "-").concat(size),
+    var cls = classNames(classPrefix, "".concat(classPrefix, "--").concat(size), className);
+    var imageBlock = /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-image"),
         style: imgStyle
-    }, imageNode), typeof title === 'string' && title ? /*#__PURE__*/ React.createElement(View, {
+    }, imageNode);
+    var titleBlock = typeof title === 'string' && title ? /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-title")
-    }, title) : title, typeof description === 'string' ? /*#__PURE__*/ React.createElement(View, {
+    }, title) : title;
+    var descriptionBlock = typeof description === 'string' ? /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-description")
-    }, description) : description, actions.length ? /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, "-actions-").concat(size)
+    }, description) : description;
+    return /*#__PURE__*/ React.createElement(View, {
+        className: cls,
+        style: style
+    }, size === 'partial' ? /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-partial-body")
+    }, imageBlock, /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-content")
+    }, titleBlock, descriptionBlock)) : /*#__PURE__*/ React.createElement(React.Fragment, null, imageBlock, titleBlock, descriptionBlock), actions.length ? /*#__PURE__*/ React.createElement(View, {
+        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

@@ -15,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/style.harmony.css

@@ -643,51 +643,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);
 }