From 3329762d93d1183047095574a5d688974ed4335e Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Mon, 8 Jun 2026 16:00:43 +0800
Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4jmfe=E6=A1=A5?=
 =?UTF-8?q?=E6=8E=A5=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/scale-f.ts | 67 ++++++--------------------------------------
 1 file changed, 8 insertions(+), 59 deletions(-)

diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts
index c05cfc4ee6..cd5ded36df 100644
--- a/src/utils/scale-f.ts
+++ b/src/utils/scale-f.ts
@@ -1,36 +1,11 @@
 /**
- * 响应式缩放系数（--nut-scale-f）：结合京东站内原生桥与站外视口规则，
+ * 响应式缩放系数（--nut-scale-f）：按视口宽度计算，
  * 写入根节点 CSS 变量（--nut-scale-f / --nut-scale-font / --nut-scale-icon），
  * 供布局/字号/icon 等按比例换算（见 calcByProfile）。H5 与 Taro WebView 共用此实现。
  */
 import { canUseDom } from './can-use-dom'
 
-/** 原生 DongScreenAdapterPlugin.getScale 的典型返回结构 */
-type NativeScaleResponse = {
-  status?: string
-  data?: {
-    scale?: number | string
-  }
-}
-
-/** jmfe 通用 callNative 签名 */
-type NativeCaller = (
-  plugin: string,
-  method: string,
-  params: string,
-  extra: string
-) => Promise<NativeScaleResponse>
-
-/** 站内容器的 jmfe 桥接方法（可选） */
-declare global {
-  interface Window {
-    jmfe?: {
-      callNative?: NativeCaller
-    }
-  }
-}
-
-/** 当前基准缩放（来自原生或视口计算） */
+/** 当前基准缩放（来自视口计算） */
 let scale = 1
 
 /** 字体档位：标准、大字、老年 */
@@ -113,7 +88,7 @@ function roundByScaleRule(
   return Math.round(value)
 }
 
-/** 无原生桥时按屏宽推算 scale（含平板与 375 基准窄屏区间） */
+/** 按屏宽推算 scale（含平板与 375 基准窄屏区间） */
 function getScaleByViewport() {
   if (!canUseDom) return 1
   const deviceWidth = window.innerWidth
@@ -132,34 +107,8 @@ function getScaleByViewport() {
   return 1
 }
 
-/** 通过 jmfe.callNative 拉取 DongScreenAdapterPlugin；失败返回 null */
-async function getScaleByNative() {
-  if (!canUseDom || !window.jmfe?.callNative) return null
-
-  try {
-    const res = await window.jmfe.callNative(
-      'DongScreenAdapterPlugin',
-      'getScale',
-      JSON.stringify({}),
-      ''
-    )
-    if (res?.status === '0' && res.data?.scale !== undefined) {
-      const parsed = Number(res.data.scale)
-      if (Number.isFinite(parsed) && parsed > 0) {
-        return parsed
-      }
-    }
-  } catch {
-    /* 原生异常时由 getScaleF 回退到视口规则 */
-  }
-
-  return null
-}
-
-/** 统一获取缩放：站内原生优先，失败则用视口规则 */
-async function getScaleF() {
-  const nativeScale = await getScaleByNative()
-  if (nativeScale) return nativeScale
+/** 统一获取缩放：按视口规则计算 */
+function getScaleF() {
   return getScaleByViewport()
 }
 
@@ -171,12 +120,12 @@ function setScaleF(nextScale: number) {
   return scale
 }
 
-/** 重新拉取缩放；可选同时切换 profile，避免与当前值相同时重复写 DOM */
-async function refreshScaleF(nextProfile?: ScaleProfile) {
+/** 重新计算缩放；可选同时切换 profile，避免与当前值相同时重复写 DOM */
+function refreshScaleF(nextProfile?: ScaleProfile) {
   if (nextProfile) {
     setScaleProfile(nextProfile)
   }
-  const nextScale = await getScaleF()
+  const nextScale = getScaleF()
   if (!scale || nextScale !== scale) {
     setScaleF(nextScale)
   }

From da24c2c04b53a61ffc9be4324eea53ea55ef03e2 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Thu, 11 Jun 2026 20:40:10 +0800
Subject: [PATCH 2/8] =?UTF-8?q?feat(switch):=20=E9=80=82=E9=85=8D=20v16?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/switch/doc.en-US.md | 17 +++++++++--------
 src/packages/switch/doc.md       | 17 +++++++++--------
 src/packages/switch/doc.taro.md  | 17 +++++++++--------
 src/packages/switch/doc.zh-TW.md | 17 +++++++++--------
 src/packages/switch/switch.scss  | 28 ++++++++++++++--------------
 src/styles/theme-dark.scss       |  2 +-
 src/styles/theme-default.scss    |  2 +-
 src/styles/variables.scss        | 31 +++++++++++--------------------
 8 files changed, 63 insertions(+), 68 deletions(-)

diff --git a/src/packages/switch/doc.en-US.md b/src/packages/switch/doc.en-US.md
index 3495efdb10..cb66e27fa0 100644
--- a/src/packages/switch/doc.en-US.md
+++ b/src/packages/switch/doc.en-US.md
@@ -101,17 +101,18 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-switch-active-background-color | Switch on status background color | `$color-primary` |
 | \--nutui-switch-inactive-background-color | Switch off status background color | `$color-text-disabled` |
 | \--nutui-switch-active-disabled-background-color | Switch toggle on the background color disabled | `$color-primary-disabled-special` |
-| \--nutui-switch-inactive-disabled-background-color | Turn off the background color disabled | `$color-background` |
-| \--nutui-switch-inactive-line-bg-color | Switch Off Internal Button Line Color | `#ffffff` |
-| \--nutui-switch-width | Switch Width | `46px` |
-| \--nutui-switch-height | Switch height | `28px` |
-| \--nutui-switch-line-height | Switch line height | `28px` |
+| \--nutui-switch-inactive-disabled-background-color | Turn off the background color disabled | `var(--nutui-color-background-component)` |
+| \--nutui-switch-inactive-line-background-color | Switch Off Internal Button Line Color | `$color-primary-text` |
+| \--nutui-switch-width | Switch Width | `56px` |
+| \--nutui-switch-height | Switch height | `24px` |
+| \--nutui-switch-inside-width | Switch internal button width | `32px` |
+| \--nutui-switch-inside-height | Switch internal button height | `20px` |
 | \--nutui-switch-border-radius | Switch rounded corner size | `$radius-circle` |
 | \--nutui-switch-border-width | Switch border width | `2px` |
-| \--nutui-switch-inside-border-radius | Switch internal button rounded corner size | `$radius-full` |
-| \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-inside-border-radius | Switch internal button rounded corner size | `$radius-circle` |
+| \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
 | \--nutui-switch-label-text-color | Switch internal text color | `$color-primary-text` |
-| \--nutui-switch-label-font-size | Switch internal text size | `$font-size-s` |
+| \--nutui-switch-label-font-size | Switch internal text size | `$font-size-xs` |
 | \--nutui-switch-inactive-disabled-label-text-color | Turn off and disable internal text color | `$color-text-disabled` |
 
 <Contribution name="Switch" />
diff --git a/src/packages/switch/doc.md b/src/packages/switch/doc.md
index 3a9e7b2afc..5bb44a9b91 100644
--- a/src/packages/switch/doc.md
+++ b/src/packages/switch/doc.md
@@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react'
 | \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
 | \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
 | \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
-| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
-| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
-| \--nutui-switch-width | 开关宽度 | `46px` |
-| \--nutui-switch-height | 开关高度 | `28px` |
-| \--nutui-switch-line-height | 开关行高 | `28px` |
+| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `var(--nutui-color-background-component)` |
+| \--nutui-switch-inactive-line-background-color | 开关关闭状态内部按钮线条颜色 | `$color-primary-text` |
+| \--nutui-switch-width | 开关宽度 | `56px` |
+| \--nutui-switch-height | 开关高度 | `24px` |
+| \--nutui-switch-inside-width | 开关内部按钮宽度 | `32px` |
+| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
 | \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
 | \--nutui-switch-border-width | 开关边框宽度 | `2px` |
-| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
-| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-circle` |
+| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
 | \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
-| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
+| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-xs` |
 | \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
 
 <Contribution name="Switch" />
diff --git a/src/packages/switch/doc.taro.md b/src/packages/switch/doc.taro.md
index c11f5a5581..2a701b6bc9 100644
--- a/src/packages/switch/doc.taro.md
+++ b/src/packages/switch/doc.taro.md
@@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react-taro'
 | \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
 | \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
 | \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
-| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
-| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
-| \--nutui-switch-width | 开关宽度 | `46px` |
-| \--nutui-switch-height | 开关高度 | `28px` |
-| \--nutui-switch-line-height | 开关行高 | `28px` |
+| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `var(--nutui-color-background-component)` |
+| \--nutui-switch-inactive-line-background-color | 开关关闭状态内部按钮线条颜色 | `$color-primary-text` |
+| \--nutui-switch-width | 开关宽度 | `56px` |
+| \--nutui-switch-height | 开关高度 | `24px` |
+| \--nutui-switch-inside-width | 开关内部按钮宽度 | `32px` |
+| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
 | \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
 | \--nutui-switch-border-width | 开关边框宽度 | `2px` |
-| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
-| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-circle` |
+| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
 | \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
-| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
+| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-xs` |
 | \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
 
 <Contribution name="Switch" />
diff --git a/src/packages/switch/doc.zh-TW.md b/src/packages/switch/doc.zh-TW.md
index e392e58924..0ef7446960 100644
--- a/src/packages/switch/doc.zh-TW.md
+++ b/src/packages/switch/doc.zh-TW.md
@@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react'
 | \--nutui-switch-active-background-color | 開關打開狀態背景顏色 | `$color-primary` |
 | \--nutui-switch-inactive-background-color | 開關關閉狀態背景顏色 | `$color-text-disabled` |
 | \--nutui-switch-active-disabled-background-color | 開關打開狀態禁用的背景顏色 | `$color-primary-disabled-special` |
-| \--nutui-switch-inactive-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `$color-background` |
-| \--nutui-switch-inactive-line-bg-color | 開關關閉狀態內部按鈕線條顏色 | `#ffffff` |
-| \--nutui-switch-width | 開關寬度 | `46px` |
-| \--nutui-switch-height | 開關高度 | `28px` |
-| \--nutui-switch-line-height | 開關行高 | `28px` |
+| \--nutui-switch-inactive-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `var(--nutui-color-background-component)` |
+| \--nutui-switch-inactive-line-background-color | 開關關閉狀態內部按鈕線條顏色 | `$color-primary-text` |
+| \--nutui-switch-width | 開關寬度 | `56px` |
+| \--nutui-switch-height | 開關高度 | `24px` |
+| \--nutui-switch-inside-width | 開關內部按鈕寬度 | `32px` |
+| \--nutui-switch-inside-height | 開關內部按鈕高度 | `20px` |
 | \--nutui-switch-border-radius | 開關圓角大小 | `$radius-circle` |
 | \--nutui-switch-border-width | 開關邊框寬度 | `2px` |
-| \--nutui-switch-inside-border-radius | 開關內部按鈕圓角大小 | `$radius-full` |
-| \--nutui-switch-inside-box-shadow | 開關內部按鈕陰影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-inside-border-radius | 開關內部按鈕圓角大小 | `$radius-circle` |
+| \--nutui-switch-inside-box-shadow | 開關內部按鈕陰影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
 | \--nutui-switch-label-text-color | 開關內部文字顏色 | `$color-primary-text` |
-| \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-s` |
+| \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-xs` |
 | \--nutui-switch-inactive-disabled-label-text-color | 開關關閉禁用內部文字顏色 | `$color-text-disabled` |
 
 <Contribution name="Switch" />
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 089f6688ca..885f5a00d9 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -11,7 +11,6 @@
   align-items: center;
   min-width: $switch-width;
   height: $switch-height;
-  line-height: $switch-line-height;
   background-color: $switch-active-background-color;
   border-radius: $switch-border-radius;
   background-size: 100% 100%;
@@ -27,14 +26,14 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    height: calc($switch-height - $switch-border-width * 2);
-    width: calc($switch-height - $switch-border-width * 2);
+    height: $switch-inside-height;
+    width: $switch-inside-width;
     border-radius: $switch-inside-border-radius;
     background: $color-primary-text;
     transition: left 0.3s linear;
     box-shadow: $switch-inside-box-shadow;
     &-open {
-      left: calc(100% - $switch-height + $switch-border-width);
+      left: calc(100% - $switch-inside-width - $switch-border-width);
       &-rtl {
         left: $switch-border-width;
       }
@@ -42,14 +41,9 @@
     &-close {
       left: $switch-border-width;
       &-rtl {
-        left: calc(100% - $switch-height + $switch-border-width);
+        left: calc(100% - $switch-inside-width - $switch-border-width);
       }
     }
-    .nut-icon {
-      width: calc(($switch-height - $switch-border-width * 2) / 2);
-      height: calc(($switch-height - $switch-border-width * 2) / 2);
-      color: $switch-active-disabled-background-color;
-    }
   }
 
   &-close {
@@ -62,6 +56,12 @@
     }
   }
 
+  .nut-icon {
+    width: calc($switch-height / 2);
+    height: calc($switch-height / 2);
+    color: $switch-active-disabled-background-color;
+  }
+
   &-label {
     /* #ifdef dynamic*/
     display: flex;
@@ -78,16 +78,16 @@
       color: $switch-label-text-color;
     }
     &-open {
-      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
+      margin: 0 calc($switch-inside-width + $switch-border-width + 3px) 0 7px;
       &-rtl {
-        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
+        margin: 0 7px 0 calc($switch-inside-width + $switch-border-width + 3px);
       }
     }
 
     &-close {
-      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
+      margin: 0 7px 0 calc($switch-inside-width + $switch-border-width + 3px);
       &-rtl {
-        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
+        margin: 0 calc($switch-inside-width + $switch-border-width + 3px) 0 7px;
       }
     }
 
diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss
index 8e0d9928e2..21e8b5a315 100644
--- a/src/styles/theme-dark.scss
+++ b/src/styles/theme-dark.scss
@@ -133,7 +133,7 @@ page,
   // 品牌渐变色右端
   --nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
   // 品牌主色调或其他深色背景下的文字
-  --nutui-color-primary-text: var(--nutui-gray-1);
+  --nutui-color-primary-text: var(--nutui-white-13);
   // 品牌主色调点击态，背景、边框、镂空状态下的文字
   --nutui-color-primary-pressed: var(--nutui-red-7);
   // 品牌主色调禁用态，背景、边框、镂空状态下的文字
diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss
index 4445e08a24..f3d86d9ef4 100644
--- a/src/styles/theme-default.scss
+++ b/src/styles/theme-default.scss
@@ -132,7 +132,7 @@ page {
   // 品牌渐变色右端
   --nutui-color-primary-stop-2: var(--nutui-brand-stop-2); // TODO 删掉
   // 品牌主色调或其他深色背景下的文字
-  --nutui-color-primary-text: var(--nutui-gray-1);// TODO white
+  --nutui-color-primary-text: var(--nutui-white-13);
   // 品牌主色调点击态，背景、边框、镂空状态下的文字
   --nutui-color-primary-pressed: var(--nutui-red-7);
   // 品牌主色调禁用态，背景、边框、镂空状态下的文字
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index dcb34659c2..49359af1f8 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -151,7 +151,7 @@ $color-border-disabled: var(--nutui-color-border-disabled, #c2c4cc) !default;
 $color-title: var(--nutui-color-title, #1a1a1a) !default;
 $color-text: var(--nutui-color-text, #505259) !default;
 $color-text-help: var(--nutui-color-text-help, #888b94) !default;
-$color-text-disabled: var(--nutui-color-text-disabled, #c2c4cc) !default;
+$color-text-disabled: var(--nutui-color-text-disabled, #b4b8bf) !default;
 $color-text-dark: var(
   --nutui-color-text-dark,
   rgba(255, 255, 255, 0.9)
@@ -159,7 +159,7 @@ $color-text-dark: var(
 $color-text-link: var(--nutui-color-text-link, #0c82f7) !default;
 
 // 与品牌色一起使用，默认为白色，不区分暗黑与明亮模式。
-$color-primary-text: #ffffff !default;
+$color-primary-text: var(--nutui-color-primary-text, #ffffff) !default;
 $white: #ffffff !default;
 $black: #000000 !default;
 
@@ -1040,15 +1040,16 @@ $switch-active-disabled-background-color: var(
 ) !default;
 $switch-inactive-disabled-background-color: var(
   --nutui-switch-inactive-disabled-background-color,
-  $color-background
+  var(--nutui-color-background-component)
 ) !default;
 $switch-inactive-line-background-color: var(
   --nutui-switch-inactive-line-background-color,
-  #ffffff
+  $color-primary-text
 ) !default;
-$switch-width: var(--nutui-switch-width, scale-px(46px)) !default;
-$switch-height: var(--nutui-switch-height, scale-px(28px)) !default;
-$switch-line-height: var(--nutui-switch-line-height, scale-px(28px)) !default;
+$switch-width: var(--nutui-switch-width, scale-px(56px)) !default;
+$switch-height: var(--nutui-switch-height, scale-px(24px)) !default;
+$switch-inside-width: var(--nutui-switch-inside-width, scale-px(32px)) !default;
+$switch-inside-height: var(--nutui-switch-inside-height, scale-px(20px)) !default;
 $switch-border-radius: var(
   --nutui-switch-border-radius,
   $radius-circle
@@ -1056,29 +1057,19 @@ $switch-border-radius: var(
 $switch-border-width: var(--nutui-switch-border-width, scale-px(2px)) !default;
 $switch-inside-border-radius: var(
   --nutui-switch-inside-border-radius,
-  $radius-full
-) !default;
-/* #ifdef harmony */
-$switch-inside-box-shadow: var(
-  --nutui-switch-inside-box-shadow,
-  0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1)
+  $radius-circle
 ) !default;
-/* #endif */
-/* #ifndef harmony */
 $switch-inside-box-shadow: var(
   --nutui-switch-inside-box-shadow,
-  0px scale-px(2px) scale-px(1px) 0px rgba(0, 0, 0, 0.06),
-  0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1),
-  0px 0px 0px scale-px(1px) rgba(0, 0, 0, 0.02)
+  0px scale-px(4px) scale-px(8px) 0px rgba(0, 0, 0, 0.12)
 ) !default;
-/* #endif */
 $switch-label-text-color: var(
   --nutui-switch-label-text-color,
   $color-primary-text
 ) !default;
 $switch-label-font-size: var(
   --nutui-switch-label-font-size,
-  $font-size-s
+  $font-size-xs
 ) !default;
 $switch-inactive-disabled-label-text-color: var(
   --nutui-switch-inactive-disabled-label-text-color,

From 033f713d82c3ec83b1a5b8b0203199565d5678ef Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Fri, 12 Jun 2026 10:51:53 +0800
Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96wcsc=20=E5=AF=B9?=
 =?UTF-8?q?=E5=B5=8C=E5=A5=97=20calc=20+=20var=20=E8=A7=A3=E6=9E=90?=
 =?UTF-8?q?=E6=88=90=E6=9C=AC=E9=AB=98=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/switch/switch.scss | 37 ++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 885f5a00d9..5ebd9e6b1d 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -1,4 +1,11 @@
 .nut-switch {
+  --nut-switch-height: #{$switch-height};
+  --nut-switch-inside-width: #{$switch-inside-width};
+  --nut-switch-border-width: #{$switch-border-width};
+  --nut-switch-label-margin-offset: calc(
+    var(--nut-switch-inside-width) + var(--nut-switch-border-width) + 3px
+  );
+
   cursor: pointer;
   position: relative;
   /* #ifdef dynamic*/
@@ -16,7 +23,7 @@
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
-  flex: 0 0 auto; // 防止被压缩
+  flex: 0 0 auto;
 
   &-button {
     position: absolute;
@@ -33,15 +40,19 @@
     transition: left 0.3s linear;
     box-shadow: $switch-inside-box-shadow;
     &-open {
-      left: calc(100% - $switch-inside-width - $switch-border-width);
+      left: calc(
+        100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width)
+      );
       &-rtl {
-        left: $switch-border-width;
+        left: var(--nut-switch-border-width);
       }
     }
     &-close {
-      left: $switch-border-width;
+      left: var(--nut-switch-border-width);
       &-rtl {
-        left: calc(100% - $switch-inside-width - $switch-border-width);
+        left: calc(
+          100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width)
+        );
       }
     }
   }
@@ -49,7 +60,9 @@
   &-close {
     background-color: $switch-inactive-background-color;
     &-line {
-      width: calc(($switch-height - $switch-border-width * 2) / 2);
+      width: calc(
+        (var(--nut-switch-height) - var(--nut-switch-border-width) * 2) * 0.5
+      );
       height: 2px;
       background: $switch-inactive-line-background-color;
       border-radius: 2px;
@@ -57,8 +70,8 @@
   }
 
   .nut-icon {
-    width: calc($switch-height / 2);
-    height: calc($switch-height / 2);
+    width: calc(var(--nut-switch-height) * 0.5);
+    height: calc(var(--nut-switch-height) * 0.5);
     color: $switch-active-disabled-background-color;
   }
 
@@ -78,16 +91,16 @@
       color: $switch-label-text-color;
     }
     &-open {
-      margin: 0 calc($switch-inside-width + $switch-border-width + 3px) 0 7px;
+      margin: 0 var(--nut-switch-label-margin-offset) 0 7px;
       &-rtl {
-        margin: 0 7px 0 calc($switch-inside-width + $switch-border-width + 3px);
+        margin: 0 7px 0 var(--nut-switch-label-margin-offset);
       }
     }
 
     &-close {
-      margin: 0 7px 0 calc($switch-inside-width + $switch-border-width + 3px);
+      margin: 0 7px 0 var(--nut-switch-label-margin-offset);
       &-rtl {
-        margin: 0 calc($switch-inside-width + $switch-border-width + 3px) 0 7px;
+        margin: 0 var(--nut-switch-label-margin-offset) 0 7px;
       }
     }
 

From e893795b18e11bf68013d097a74024dc7cdc5788 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Fri, 12 Jun 2026 14:43:28 +0800
Subject: [PATCH 4/8] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E5=8F=98=E9=87=8F=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/configprovider/types.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
index baa2d926a6..26cfe9850b 100644
--- a/src/packages/configprovider/types.ts
+++ b/src/packages/configprovider/types.ts
@@ -56,6 +56,7 @@ export type NutCSSVariables =
   | 'nutuiColorTextDisabled'
   | 'nutuiColorTextDark'
   | 'nutuiColorTextLink'
+  | 'nutuiColorPrimaryText'
   | 'nutuiFontSizeXxxs'
   | 'nutuiFontSizeXxs'
   | 'nutuiFontSizeXs'
@@ -360,7 +361,8 @@ export type NutCSSVariables =
   | 'nutuiSwitchInactiveLineBackgroundColor'
   | 'nutuiSwitchWidth'
   | 'nutuiSwitchHeight'
-  | 'nutuiSwitchLineHeight'
+  | 'nutuiSwitchInsideWidth'
+  | 'nutuiSwitchInsideHeight'
   | 'nutuiSwitchBorderRadius'
   | 'nutuiSwitchBorderWidth'
   | 'nutuiSwitchInsideBorderRadius'

From 127014512c306b2596c0489880518fb83eb5ed81 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Fri, 12 Jun 2026 15:12:45 +0800
Subject: [PATCH 5/8] =?UTF-8?q?style:=20theme-dark=20=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/theme-dark.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss
index 57b25d02b0..df66b6eb15 100644
--- a/src/styles/theme-dark.scss
+++ b/src/styles/theme-dark.scss
@@ -123,7 +123,7 @@ page,
   // --nutui-white-10: rgba(255, 255, 255, 0.7);
   // --nutui-white-11: rgba(255, 255, 255, 0.8);
   --nutui-white-12: rgba(31, 31, 31, 0.9);
-  // --nutui-white-13: rgba(255, 255, 255, 1);
+  --nutui-white-13: rgba(255, 255, 255, 1);
 
   // 品牌颜色语义化
   // 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等

From dcd6aef410fdaf8957761f6135ef5c584e7de3b6 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 16 Jun 2026 16:21:36 +0800
Subject: [PATCH 6/8] =?UTF-8?q?refactor(Empty):=20v16=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   4 +
 src/packages/configprovider/types.ts          |  26 +++-
 .../__snapshots__/empty.spec.tsx.snap         |   6 +-
 src/packages/empty/__test__/empty.spec.tsx    |  84 ++++++++++--
 src/packages/empty/demo.taro.tsx              |  38 +++---
 src/packages/empty/demo.tsx                   |  38 +++---
 src/packages/empty/demos/h5/demo1.tsx         |  31 ++---
 src/packages/empty/demos/h5/demo2.tsx         |  20 ++-
 src/packages/empty/demos/h5/demo3.tsx         |   2 +-
 src/packages/empty/demos/h5/demo4.tsx         |  62 +++++++--
 src/packages/empty/demos/h5/demo6.tsx         |   6 +-
 src/packages/empty/demos/h5/demo7.tsx         |   7 +
 src/packages/empty/demos/taro/demo1.tsx       |  27 ++--
 src/packages/empty/demos/taro/demo2.tsx       |  29 +++-
 src/packages/empty/demos/taro/demo3.tsx       |   4 +-
 src/packages/empty/demos/taro/demo4.tsx       |  84 ++++++++----
 src/packages/empty/demos/taro/demo6.tsx       |   2 +-
 src/packages/empty/demos/taro/demo7.tsx       |   7 +
 src/packages/empty/doc.en-US.md               |  72 ++++++++--
 src/packages/empty/doc.md                     |  72 ++++++++--
 src/packages/empty/doc.taro.md                |  72 ++++++++--
 src/packages/empty/doc.zh-TW.md               |  72 ++++++++--
 src/packages/empty/empty.scss                 | 129 ++++++++++++++----
 src/packages/empty/empty.taro.tsx             |  86 ++++++------
 src/packages/empty/empty.tsx                  |  88 ++++++------
 src/packages/empty/index.taro.ts              |   7 +-
 src/packages/empty/index.ts                   |   2 +-
 .../doc/docs/react/migrate-from-v3.en-US.md   |  30 ++++
 .../doc/docs/react/migrate-from-v3.md         |  30 ++++
 .../doc/docs/taro/migrate-from-v3.en-US.md    |  30 ++++
 .../doc/docs/taro/migrate-from-v3.md          |  30 ++++
 src/styles/variables-daojia.scss              |  34 +++--
 src/styles/variables-jmapp.scss               |  59 +++++---
 src/styles/variables-jrkf.scss                |  44 +++---
 src/styles/variables.scss                     |  75 ++++++++--
 src/types/spec/empty/base.ts                  |  48 +++++--
 36 files changed, 1080 insertions(+), 377 deletions(-)
 create mode 100644 src/packages/empty/demos/h5/demo7.tsx
 create mode 100644 src/packages/empty/demos/taro/demo7.tsx

diff --git a/.gitignore b/.gitignore
index 1b026b304e..7c87415936 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,5 +58,9 @@ pnpm-lock.*.yaml
 # vitest
 /html
 
+# local v4 upgrade workflow (personal, not for commit)
+.cursor/skills/nutui-component-v4-upgrade/
+.claude/commands/nutui-v4-upgrade.md
+
 # Harmony CSS files
 src/packages/**/*.harmony.css
\ No newline at end of file
diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
index cb8829f00f..98e44a4d0b 100644
--- a/src/packages/configprovider/types.ts
+++ b/src/packages/configprovider/types.ts
@@ -772,13 +772,27 @@ export type NutCSSVariables =
   | 'nutuiSegmentedActiveBackground'
   | 'nutuiSegmentedIconMarginRight'
   | 'nutuiEmptyPadding'
-  | 'nutuiEmptyImageSize'
-  | 'nutuiEmptyImageSmallSize'
-  | 'nutuiEmptyTitleMarginTop'
   | 'nutuiEmptyBackgroundColor'
-  | 'nutuiEmptyTitleMarginBottom'
-  | 'nutuiEmptyTitleLineHeight'
-  | 'nutuiEmptyDescriptionLineHeight'
+  | 'nutuiEmptyTitleColor'
+  | 'nutuiEmptyDescriptionColor'
+  | 'nutuiEmptyFullPaddingTop'
+  | 'nutuiEmptyFullImageSize'
+  | 'nutuiEmptyFullTitleFontSize'
+  | 'nutuiEmptyFullTitleLineHeight'
+  | 'nutuiEmptyFullDescriptionFontSize'
+  | 'nutuiEmptyFullDescriptionLineHeight'
+  | 'nutuiEmptyFullActionsMarginTop'
+  | 'nutuiEmptyHalfImageSize'
+  | 'nutuiEmptyHalfTitleFontSize'
+  | 'nutuiEmptyHalfTitleLineHeight'
+  | 'nutuiEmptyHalfDescriptionFontSize'
+  | 'nutuiEmptyHalfDescriptionLineHeight'
+  | 'nutuiEmptyHalfActionsMarginTop'
+  | 'nutuiEmptyPartialPadding'
+  | 'nutuiEmptyPartialImageSize'
+  | 'nutuiEmptyPartialContentGap'
+  | 'nutuiEmptyPartialDescriptionFontSize'
+  | 'nutuiEmptyPartialDescriptionLineHeight'
   | 'nutuiCascaderFontSize'
   | 'nutuiCascaderPaneHeight'
   | 'nutuiCascaderPanePaddingTop'
diff --git a/src/packages/empty/__test__/__snapshots__/empty.spec.tsx.snap b/src/packages/empty/__test__/__snapshots__/empty.spec.tsx.snap
index 93e53ef345..c5c2f03107 100644
--- a/src/packages/empty/__test__/__snapshots__/empty.spec.tsx.snap
+++ b/src/packages/empty/__test__/__snapshots__/empty.spec.tsx.snap
@@ -3,14 +3,14 @@
 exports[`should render description correctly 1`] = `
 <div>
   <div
-    class="nut-empty"
+    class="nut-empty nut-empty--half"
   >
     <div
-      class="nut-empty-base"
+      class="nut-empty-image"
     >
       <img
         alt="empty"
-        src="https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png"
+        src="https://img10.360buyimg.com/imagetools/jfs/t1/449411/36/15729/19102/6a30e810F36720c83/03e61e01e08ab731.png"
         style="width: 100%; height: 100%;"
       />
     </div>
diff --git a/src/packages/empty/__test__/empty.spec.tsx b/src/packages/empty/__test__/empty.spec.tsx
index 3f27c2685d..d82138c524 100644
--- a/src/packages/empty/__test__/empty.spec.tsx
+++ b/src/packages/empty/__test__/empty.spec.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
-import { render } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
+import { EMPTY_STATUS_IMAGES } from '@/types'
 import { Empty } from '../empty'
 
 test('should render description correctly', () => {
@@ -9,21 +10,64 @@ test('should render description correctly', () => {
   expect(getByText('暂无数据')).toBeTruthy()
   expect(container).toMatchSnapshot()
 })
-test('should render imageSize correctly', () => {
+
+test('should render title correctly', () => {
+  const { getByText } = render(
+    <Empty title="网络连接已断开" description="请检查网络设置" />
+  )
+  expect(getByText('网络连接已断开')).toHaveClass('nut-empty-title')
+})
+
+test('should use default half size and network status image', () => {
+  const { container } = render(<Empty description="暂无数据" />)
+  expect(container.querySelector('.nut-empty')).toHaveClass('nut-empty--half')
+  expect(container.querySelector('.nut-empty-image img')).toHaveAttribute(
+    'src',
+    EMPTY_STATUS_IMAGES.network
+  )
+})
+
+test('should render imageSize correctly', async () => {
   const { container } = render(<Empty description="暂无数据" imageSize={100} />)
-  // expect(container.querySelector('.nut-empty-image')).toHaveStyle({
-  //   width: '100px',
-  // })
+  await waitFor(() => {
+    expect(container.querySelector('.nut-empty-image')).toHaveStyle({
+      width: '100px',
+      height: '100px',
+    })
+  })
 })
-test('should render image props correctly', () => {
-  const { container } = render(<Empty status="empty" />)
-  // expect(container.querySelector('.img')).toHaveAttribute(
-  //   'src',
-  //   'https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png'
-  // )
+
+test('should render status image correctly', () => {
+  const { container } = render(<Empty status="search" />)
+  expect(container.querySelector('.nut-empty-image img')).toHaveAttribute(
+    'src',
+    EMPTY_STATUS_IMAGES.search
+  )
 })
+
+test('should render full size modifier class', () => {
+  const { container } = render(
+    <Empty size="full" title="标题" description="描述" />
+  )
+  expect(container.querySelector('.nut-empty')).toHaveClass('nut-empty--full')
+  expect(
+    container.querySelector('.nut-empty-partial-body')
+  ).not.toBeInTheDocument()
+})
+
+test('should render partial layout structure', () => {
+  const { container } = render(
+    <Empty size="partial" status="search" description="没有更多商品咯" />
+  )
+  expect(container.querySelector('.nut-empty')).toHaveClass(
+    'nut-empty--partial'
+  )
+  expect(container.querySelector('.nut-empty-partial-body')).toBeInTheDocument()
+  expect(container.querySelector('.nut-empty-content')).toBeInTheDocument()
+})
+
 test('should render actions correctly', () => {
-  const { container, getByTestId } = render(
+  const { container } = render(
     <Empty
       data-testid="testEmpty"
       title="标题"
@@ -31,11 +75,12 @@ test('should render actions correctly', () => {
       actions={[{ text: '操作1' }, { text: '操作2' }]}
     />
   )
-  expect(container.querySelector('.nut-empty-actions-base')).toBeTruthy()
+  expect(container.querySelector('.nut-empty-actions')).toBeTruthy()
   expect(
-    container.querySelectorAll('.nut-empty-actions-base .nut-button').length
+    container.querySelectorAll('.nut-empty-actions .nut-button').length
   ).toEqual(2)
 })
+
 test('should render custom image correctly', () => {
   const { getByTestId } = render(
     <Empty
@@ -54,3 +99,14 @@ test('should render custom image correctly', () => {
     'https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png'
   )
 })
+
+test('should render children correctly', () => {
+  const { getByTestId } = render(
+    <Empty description="暂无数据">
+      <button type="button" data-testid="custom-child">
+        自定义按钮
+      </button>
+    </Empty>
+  )
+  expect(getByTestId('custom-child')).toBeInTheDocument()
+})
diff --git a/src/packages/empty/demo.taro.tsx b/src/packages/empty/demo.taro.tsx
index eaffb8054f..ea4c84dfb6 100644
--- a/src/packages/empty/demo.taro.tsx
+++ b/src/packages/empty/demo.taro.tsx
@@ -9,32 +9,36 @@ import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
 
 const EmptyDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      ce5c5446: '基础用法',
-      c38a08ee: 'Size 为 small 时，可用于半屏',
-      c38a08ef: '自定义内容大小',
-      b840c88f: '图片类型，内置3个',
+      ce5c5446: '全屏 full',
+      c38a08ee: '半屏 half',
+      c38a08ed: '局部 partial',
+      c38a08ef: '自定义图片大小',
+      b840c88f: '图片类型，内置8个',
       a74a1fd4: '自定义图片',
-      '8dab2f66': '底部内容',
+      '8dab2f66': '自定义底部按钮',
     },
     'zh-TW': {
-      ce5c5446: '基礎用法',
-      c38a08ee: 'Size 为 small 时，可用于半屏',
-      c38a08ef: '自定義內容大小',
-      b840c88f: '圖片類型，內置3個',
+      ce5c5446: '全屏 full',
+      c38a08ee: '半屏 half',
+      c38a08ed: '局部 partial',
+      c38a08ef: '自定義圖片大小',
+      b840c88f: '圖片類型，內置8個',
       a74a1fd4: '自定義圖片',
-      '8dab2f66': '底部內容',
+      '8dab2f66': '自定義底部按鈕',
     },
     'en-US': {
-      ce5c5446: 'Basic usage',
-      c38a08ee: 'Size is small',
-      c38a08ef: 'Custom content size',
-      b840c88f: 'Picture type, built-in 3',
+      ce5c5446: 'Full',
+      c38a08ee: 'Half',
+      c38a08ed: 'Partial',
+      c38a08ef: 'Custom image size',
+      b840c88f: 'Picture type, built-in 8',
       a74a1fd4: 'Custom image',
-      '8dab2f66': 'Bottom content',
+      '8dab2f66': 'Custom bottom buttons',
     },
   })
 
@@ -46,10 +50,12 @@ const EmptyDemo = () => {
         <Demo1 />
         <View className="h2">{translated.c38a08ee}</View>
         <Demo2 />
-        <View className="h2">{translated.c38a08ef}</View>
+        <View className="h2">{translated.c38a08ed}</View>
         <Demo3 />
         <View className="h2">{translated.b840c88f}</View>
         <Demo4 />
+        <View className="h2">{translated.c38a08ef}</View>
+        <Demo7 />
         <View className="h2">{translated.a74a1fd4}</View>
         <Demo5 />
         <View className="h2">{translated['8dab2f66']}</View>
diff --git a/src/packages/empty/demo.tsx b/src/packages/empty/demo.tsx
index 56ea6d42b9..029b17f8d2 100644
--- a/src/packages/empty/demo.tsx
+++ b/src/packages/empty/demo.tsx
@@ -6,32 +6,36 @@ import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
+import Demo7 from './demos/h5/demo7'
 
 const EmptyDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      ce5c5446: '基础用法',
-      c38a08ee: 'Size 为 small 时，可用于半屏',
-      c38a08ef: '自定义内容大小',
-      b840c88f: '图片类型，内置3个',
+      ce5c5446: '全屏 full',
+      c38a08ee: '半屏 half',
+      c38a08ed: '局部 partial',
+      c38a08ef: '自定义图片大小',
+      b840c88f: '图片类型，内置8个',
       a74a1fd4: '自定义图片',
-      '8dab2f66': '底部内容',
+      '8dab2f66': '自定义底部按钮',
     },
     'zh-TW': {
-      ce5c5446: '基礎用法',
-      c38a08ee: 'Size 为 small 时，可用于半屏',
-      c38a08ef: '自定義內容大小',
-      b840c88f: '圖片類型，內置3個',
+      ce5c5446: '全屏 full',
+      c38a08ee: '半屏 half',
+      c38a08ed: '局部 partial',
+      c38a08ef: '自定義圖片大小',
+      b840c88f: '圖片類型，內置8個',
       a74a1fd4: '自定義圖片',
-      '8dab2f66': '底部內容',
+      '8dab2f66': '自定義底部按鈕',
     },
     'en-US': {
-      ce5c5446: 'Basic usage',
-      c38a08ee: 'Size is small',
-      c38a08ef: 'Custom content size',
-      b840c88f: 'Picture type, built-in 3',
+      ce5c5446: 'Full',
+      c38a08ee: 'Half',
+      c38a08ed: 'Partial',
+      c38a08ef: 'Custom image size',
+      b840c88f: 'Picture type, built-in 8',
       a74a1fd4: 'Custom image',
-      '8dab2f66': 'Bottom content',
+      '8dab2f66': 'Custom bottom buttons',
     },
   })
 
@@ -41,10 +45,12 @@ const EmptyDemo = () => {
       <Demo1 />
       <h2>{translated.c38a08ee}</h2>
       <Demo2 />
-      <h2>{translated.c38a08ef}</h2>
+      <h2>{translated.c38a08ed}</h2>
       <Demo3 />
       <h2>{translated.b840c88f}</h2>
       <Demo4 />
+      <h2>{translated.c38a08ef}</h2>
+      <Demo7 />
       <h2>{translated.a74a1fd4}</h2>
       <Demo5 />
       <h2>{translated['8dab2f66']}</h2>
diff --git a/src/packages/empty/demos/h5/demo1.tsx b/src/packages/empty/demos/h5/demo1.tsx
index 8aec3ada54..34c9bfc649 100644
--- a/src/packages/empty/demos/h5/demo1.tsx
+++ b/src/packages/empty/demos/h5/demo1.tsx
@@ -1,24 +1,21 @@
 import React from 'react'
-import { Empty } from '@nutui/nutui-react'
+import { Empty, Toast } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <>
-      <Empty
-        title="全屏缺省标题"
-        description="内容描述内容描述内容描述"
-        actions={[{ text: '次要操作' }, { text: '主要操作', type: 'primary' }]}
-      />
-      <Empty
-        description="内容描述内容描述内容描述"
-        actions={[{ text: '操作按钮' }]}
-        style={{ marginTop: '10px' }}
-      />
-      <Empty
-        description="内容描述内容描述内容描述"
-        style={{ marginTop: '10px' }}
-      />
-    </>
+    <Empty
+      size="full"
+      status="network"
+      title="网络连接已断开"
+      description="请检查网络设置或刷新页面"
+      actions={[
+        {
+          text: '刷新',
+          type: 'primary',
+          onClick: () => Toast.show('正在刷新...'),
+        },
+      ]}
+    />
   )
 }
 export default Demo1
diff --git a/src/packages/empty/demos/h5/demo2.tsx b/src/packages/empty/demos/h5/demo2.tsx
index b33f413281..0d4ea59474 100644
--- a/src/packages/empty/demos/h5/demo2.tsx
+++ b/src/packages/empty/demos/h5/demo2.tsx
@@ -1,12 +1,24 @@
 import React from 'react'
-import { Empty } from '@nutui/nutui-react'
+import { Empty, Toast } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
     <Empty
-      title="半屏缺省标题"
-      description="内容描述内容描述内容描述"
-      size="small"
+      size="half"
+      status="cart"
+      title="小购物车大容量"
+      description="把喜欢的商品都加进来吧"
+      actions={[
+        {
+          text: '逛逛秒杀',
+          onClick: () => Toast.show('逛逛秒杀'),
+        },
+        {
+          text: '看看关注',
+          type: 'primary',
+          onClick: () => Toast.show('看看关注'),
+        },
+      ]}
     />
   )
 }
diff --git a/src/packages/empty/demos/h5/demo3.tsx b/src/packages/empty/demos/h5/demo3.tsx
index b32231b793..dad7f1c538 100644
--- 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 size="partial" status="search" description="没有更多商品咯" />
 }
 export default Demo3
diff --git a/src/packages/empty/demos/h5/demo4.tsx b/src/packages/empty/demos/h5/demo4.tsx
index 31dbd568d0..79e18812f1 100644
--- a/src/packages/empty/demos/h5/demo4.tsx
+++ b/src/packages/empty/demos/h5/demo4.tsx
@@ -1,6 +1,49 @@
 import React, { useState } from 'react'
 import { Tabs, TabPane, Empty } from '@nutui/nutui-react'
 
+const statusList = [
+  {
+    status: 'network' as const,
+    title: '网络连接已断开',
+    description: '请检查网络设置或刷新页面',
+  },
+  {
+    status: 'comment' as const,
+    title: '暂无评价',
+    description: '快来发表第一条评价吧',
+  },
+  {
+    status: 'search' as const,
+    title: '暂无搜索结果',
+    description: '换个关键词试试吧',
+  },
+  {
+    status: 'shop' as const,
+    title: '暂无店铺',
+    description: '去看看其他店铺吧',
+  },
+  {
+    status: 'address' as const,
+    title: '暂无收货地址',
+    description: '添加地址，享受便捷购物',
+  },
+  {
+    status: 'order' as const,
+    title: '暂无订单',
+    description: '快去挑选心仪的商品吧',
+  },
+  {
+    status: 'favor' as const,
+    title: '暂无收藏',
+    description: '收藏喜欢的商品，方便下次查看',
+  },
+  {
+    status: 'cart' as const,
+    title: '小购物车大容量',
+    description: '把喜欢的商品都加进来吧',
+  },
+]
+
 const Demo4 = () => {
   const [tabvalue, setTabvalue] = useState<string | number>('0')
 
@@ -11,15 +54,16 @@ const Demo4 = () => {
         setTabvalue(paneKey)
       }}
     >
-      <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>
+      {statusList.map((item, index) => (
+        <TabPane key={item.status} title={item.status} value={String(index)}>
+          <Empty
+            size="half"
+            status={item.status}
+            title={item.title}
+            description={item.description}
+          />
+        </TabPane>
+      ))}
     </Tabs>
   )
 }
diff --git a/src/packages/empty/demos/h5/demo6.tsx b/src/packages/empty/demos/h5/demo6.tsx
index b160f4a3b4..77c61d1dc7 100644
--- a/src/packages/empty/demos/h5/demo6.tsx
+++ b/src/packages/empty/demos/h5/demo6.tsx
@@ -3,11 +3,7 @@ import { Empty, Button } from '@nutui/nutui-react'
 
 const Demo6 = () => {
   return (
-    <Empty
-      status="error"
-      description="加载失败"
-      style={{ marginBottom: '20px' }}
-    >
+    <Empty description="加载失败">
       <div style={{ marginTop: '10px' }}>
         <Button type="primary" size="small">
           刷新重试
diff --git a/src/packages/empty/demos/h5/demo7.tsx b/src/packages/empty/demos/h5/demo7.tsx
new file mode 100644
index 0000000000..5cf9feda3f
--- /dev/null
+++ b/src/packages/empty/demos/h5/demo7.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { Empty } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+  return <Empty description="内容描述内容描述" imageSize={100} />
+}
+export default Demo7
diff --git a/src/packages/empty/demos/taro/demo1.tsx b/src/packages/empty/demos/taro/demo1.tsx
index a741fd8ea9..605284e9fe 100644
--- a/src/packages/empty/demos/taro/demo1.tsx
+++ b/src/packages/empty/demos/taro/demo1.tsx
@@ -1,23 +1,24 @@
 import React from 'react'
-import { Empty, pxTransform } from '@nutui/nutui-react-taro'
+import { Empty, Toast } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
     <>
       <Empty
-        title="全屏缺省标题"
-        description="内容描述内容描述内容描述"
-        actions={[{ text: '次要操作' }, { text: '主要操作', type: 'primary' }]}
-      />
-      <Empty
-        description="内容描述内容描述内容描述"
-        actions={[{ text: '操作按钮' }]}
-        style={{ marginTop: pxTransform(10) }}
-      />
-      <Empty
-        description="内容描述内容描述内容描述"
-        style={{ marginTop: pxTransform(10) }}
+        size="full"
+        status="network"
+        title="网络连接已断开"
+        description="请检查网络设置或刷新页面"
+        actions={[
+          {
+            text: '刷新',
+            type: 'primary',
+            onClick: () =>
+              Toast.show('empty-demo1', { title: '正在刷新...', icon: 'none' }),
+          },
+        ]}
       />
+      <Toast id="empty-demo1" />
     </>
   )
 }
diff --git a/src/packages/empty/demos/taro/demo2.tsx b/src/packages/empty/demos/taro/demo2.tsx
index ce26362696..5a25567dfb 100644
--- a/src/packages/empty/demos/taro/demo2.tsx
+++ b/src/packages/empty/demos/taro/demo2.tsx
@@ -1,13 +1,30 @@
 import React from 'react'
-import { Empty } from '@nutui/nutui-react-taro'
+import { Empty, Toast } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   return (
-    <Empty
-      title="半屏缺省标题"
-      description="内容描述内容描述内容描述"
-      size="small"
-    />
+    <>
+      <Empty
+        size="half"
+        status="cart"
+        title="小购物车大容量"
+        description="把喜欢的商品都加进来吧"
+        actions={[
+          {
+            text: '逛逛秒杀',
+            onClick: () =>
+              Toast.show('empty-demo2', { title: '逛逛秒杀', icon: 'none' }),
+          },
+          {
+            text: '看看关注',
+            type: 'primary',
+            onClick: () =>
+              Toast.show('empty-demo2', { title: '看看关注', icon: 'none' }),
+          },
+        ]}
+      />
+      <Toast id="empty-demo2" />
+    </>
   )
 }
 export default Demo2
diff --git a/src/packages/empty/demos/taro/demo3.tsx b/src/packages/empty/demos/taro/demo3.tsx
index ba9510f9ce..aa216a89db 100644
--- a/src/packages/empty/demos/taro/demo3.tsx
+++ b/src/packages/empty/demos/taro/demo3.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { Empty, pxTransform } from '@nutui/nutui-react-taro'
+import { Empty } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  return <Empty description="内容描述内容描述" imageSize={pxTransform(80)} />
+  return <Empty size="partial" status="search" description="没有更多商品咯" />
 }
 export default Demo3
diff --git a/src/packages/empty/demos/taro/demo4.tsx b/src/packages/empty/demos/taro/demo4.tsx
index 94190f6411..b511a85195 100644
--- a/src/packages/empty/demos/taro/demo4.tsx
+++ b/src/packages/empty/demos/taro/demo4.tsx
@@ -1,32 +1,70 @@
 import React, { useState } from 'react'
-// import { Tabs, TabPane, Empty } from '@nutui/nutui-react-taro'
-import { Empty } from '@nutui/nutui-react-taro'
+import { Tabs, TabPane, Empty } from '@nutui/nutui-react-taro'
+
+const statusList = [
+  {
+    status: 'network' as const,
+    title: '网络连接已断开',
+    description: '请检查网络设置或刷新页面',
+  },
+  {
+    status: 'comment' as const,
+    title: '暂无评价',
+    description: '快来发表第一条评价吧',
+  },
+  {
+    status: 'search' as const,
+    title: '暂无搜索结果',
+    description: '换个关键词试试吧',
+  },
+  {
+    status: 'shop' as const,
+    title: '暂无店铺',
+    description: '去看看其他店铺吧',
+  },
+  {
+    status: 'address' as const,
+    title: '暂无收货地址',
+    description: '添加地址，享受便捷购物',
+  },
+  {
+    status: 'order' as const,
+    title: '暂无订单',
+    description: '快去挑选心仪的商品吧',
+  },
+  {
+    status: 'favor' as const,
+    title: '暂无收藏',
+    description: '收藏喜欢的商品，方便下次查看',
+  },
+  {
+    status: 'cart' as const,
+    title: '小购物车大容量',
+    description: '把喜欢的商品都加进来吧',
+  },
+]
 
 const Demo4 = () => {
   const [tabvalue, setTabvalue] = useState<string | number>('0')
 
   return (
-    // <Tabs
-    //   value={tabvalue}
-    //   onChange={(paneKey) => {
-    //     setTabvalue(paneKey)
-    //   }}
-    // >
-    //   <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>
-    // </Tabs>
-    <>
-      <Empty status="empty" title="通用空状态" />
-      <Empty status="error" title="加载失败/错误" />
-      <Empty status="network" title="网络异常" />
-    </>
+    <Tabs
+      value={tabvalue}
+      onChange={(paneKey) => {
+        setTabvalue(paneKey)
+      }}
+    >
+      {statusList.map((item, index) => (
+        <TabPane key={item.status} title={item.status} value={String(index)}>
+          <Empty
+            size="half"
+            status={item.status}
+            title={item.title}
+            description={item.description}
+          />
+        </TabPane>
+      ))}
+    </Tabs>
   )
 }
 export default Demo4
diff --git a/src/packages/empty/demos/taro/demo6.tsx b/src/packages/empty/demos/taro/demo6.tsx
index 316ecc978b..008ea16793 100644
--- a/src/packages/empty/demos/taro/demo6.tsx
+++ b/src/packages/empty/demos/taro/demo6.tsx
@@ -4,7 +4,7 @@ import { View } from '@tarojs/components'
 
 const Demo6 = () => {
   return (
-    <Empty status="error" description="加载失败">
+    <Empty description="加载失败">
       <View style={{ marginTop: pxTransform(10) }}>
         <Button type="primary" size="small">
           刷新重试
diff --git a/src/packages/empty/demos/taro/demo7.tsx b/src/packages/empty/demos/taro/demo7.tsx
new file mode 100644
index 0000000000..cb8ad5abe4
--- /dev/null
+++ b/src/packages/empty/demos/taro/demo7.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { Empty, pxTransform } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+  return <Empty description="内容描述内容描述" imageSize={pxTransform(80)} />
+}
+export default Demo7
diff --git a/src/packages/empty/doc.en-US.md b/src/packages/empty/doc.en-US.md
index aa6eeebc66..7ed617b169 100644
--- a/src/packages/empty/doc.en-US.md
+++ b/src/packages/empty/doc.en-US.md
@@ -10,7 +10,7 @@ import { Empty } from '@nutui/nutui-react'
 
 ## Demo
 
-### Basic usage
+### Full
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### Size is small
+### Half
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### Custom content size
+### Partial
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### Picture type, 3 built-in
+### Picture type, 8 built-in
 
 :::demo
 
@@ -42,6 +42,14 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
+### Custom image size
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ### Custom image
 
 > If you are inner user in JD, you can get the image links from us for default types.
@@ -52,7 +60,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### Bottom content
+### Custom bottom buttons
 
 :::demo
 
@@ -70,9 +78,9 @@ import { Empty } from '@nutui/nutui-react'
 | imageSize | Image size, the unit of number type is px | `number` \| `string` | `-` |
 | title | Title below the image | `ReactNode` | `-` |
 | description | Description below the image | `ReactNode` | `-` |
-| size | Size of component,used by full screen or half screen | `small` \| `base` | `base` |
-| status | The Default error type | `empty` \| `error` \| `network` | `empty` |
-| actions | Actions of operation | `Array` | `[]` |
+| size | Component size per JD APP V11.0 empty-state spec | `full` \| `half` \| `partial` | `half` |
+| status | Built-in illustration type mapped to design scenarios | `network` \| `comment` \| `search` \| `shop` \| `address` \| `order` \| `favor` \| `cart` | `network` |
+| actions | Actions list; fields align with Button, including `onClick` | `EmptyAction[]` | `[]` |
 
 ## Theming
 
@@ -80,14 +88,48 @@ import { Empty } from '@nutui/nutui-react'
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
+**Common**
+
+| Name | Description | Default |
+| --- | --- | --- |
+| \--nutui-empty-padding | Component padding | `20px` |
+| \--nutui-empty-background-color | Background color | `$color-background-overlay` |
+| \--nutui-empty-title-color | Title color | `$color-title` (`#11141A`) |
+| \--nutui-empty-description-color | Description color | `$color-text-help` (`#8D9199`) |
+
+**`full`**
+
+| Name | Description | Default |
+| --- | --- | --- |
+| \--nutui-empty-full-padding-top | Top spacing | `160px` |
+| \--nutui-empty-full-image-size | Image size | `160px` |
+| \--nutui-empty-full-title-font-size | Title font size | `$font-size-md` |
+| \--nutui-empty-full-title-line-height | Title line height | `$line-height-xxl` |
+| \--nutui-empty-full-description-font-size | Description font size | `$font-size-base` |
+| \--nutui-empty-full-description-line-height | Description line height | `22px` |
+| \--nutui-empty-full-actions-margin-top | Actions margin top | `8px` |
+
+**`half`**
+
 | Name | Description | Default |
 | --- | --- | --- |
-| \--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 | 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-line-height | Empty component image description line height | `1` |
-| \--nutui-empty-background-color | Empty component background color | `#fff` |
+| \--nutui-empty-half-image-size | Image size | `80px` |
+| \--nutui-empty-half-title-font-size | Title font size | `$font-size-s` |
+| \--nutui-empty-half-title-line-height | Title line height | `22px` |
+| \--nutui-empty-half-description-font-size | Description font size | `$font-size-m` |
+| \--nutui-empty-half-description-line-height | Description line height | `$line-height-2xl` |
+| \--nutui-empty-half-actions-margin-top | Actions margin top | `8px` |
+
+**`partial`**
+
+| Name | Description | Default |
+| --- | --- | --- |
+| \--nutui-empty-partial-padding | Container padding | `0 16px` |
+| \--nutui-empty-partial-image-size | Image size | `32px` |
+| \--nutui-empty-partial-content-gap | Gap between image and text | `8px` |
+| \--nutui-empty-partial-description-font-size | Text font size | `$font-size-m` |
+| \--nutui-empty-partial-description-line-height | Text line height | `32px` |
+
+> v4 removed legacy variables such as `--nutui-empty-image-size` and `--nutui-empty-image-small-size`. Use the per-size variables above.
 
 <Contribution name="Empty" />
diff --git a/src/packages/empty/doc.md b/src/packages/empty/doc.md
index 76a90bc1ab..d1f2620298 100644
--- a/src/packages/empty/doc.md
+++ b/src/packages/empty/doc.md
@@ -10,7 +10,7 @@ import { Empty } from '@nutui/nutui-react'
 
 ## 示例代码
 
-### 基础用法
+### 全屏 full
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### Size 为 small 时，可用于半屏
+### 半屏 half
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### 自定义内容大小
+### 局部 partial
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### 图片类型，内置 3 个
+### 图片类型，内置 8 个
 
 :::demo
 
@@ -42,6 +42,14 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
+### 自定义图片大小
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ### 自定义图片
 
 > 如果您是京东站内相关项目的开发，我们特意为您提供了一系列的缺省状态的图片链接，您可通过内部群获取。
@@ -52,7 +60,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### 底部内容
+### 自定义底部按钮
 
 :::demo
 
@@ -70,9 +78,9 @@ import { Empty } from '@nutui/nutui-react'
 | imageSize | 图片大小，number 类型单位为 px | `number` \| `string` | `-` |
 | title | 图片下方的标题 | `ReactNode` | `-` |
 | description | 图片下方的描述文字 | `ReactNode` | `-` |
-| size | 组件整体大小，适配于全屏或半屏 | `small` \| `base` | `base` |
-| status | 默认图片错误类型 | `empty` \| `error` \| `network` | `empty` |
-| actions | 可用于处理操作的一组数据 | `Array` | `[]` |
+| size | 组件尺寸，对齐 JD APP V11.0 缺省状态规范 | `full` \| `half` \| `partial` | `half` |
+| status | 内置缺省插图类型，与设计稿业务场景一一对应 | `network` \| `comment` \| `search` \| `shop` \| `address` \| `order` \| `favor` \| `cart` | `network` |
+| actions | 操作按钮列表，项内字段同 Button，支持 `onClick` | `EmptyAction[]` | `[]` |
 
 ## 主题定制
 
@@ -80,14 +88,48 @@ import { Empty } from '@nutui/nutui-react'
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
+**通用**
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-empty-padding | 组件内边距 | `20px` |
+| \--nutui-empty-background-color | 背景色 | `$color-background-overlay` |
+| \--nutui-empty-title-color | 标题颜色 | `$color-title`（`#11141A`） |
+| \--nutui-empty-description-color | 描述颜色 | `$color-text-help`（`#8D9199`） |
+
+**全屏 `full`**
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-empty-full-padding-top | 顶部间距 | `160px` |
+| \--nutui-empty-full-image-size | 插图尺寸 | `160px` |
+| \--nutui-empty-full-title-font-size | 标题字号 | `$font-size-md` |
+| \--nutui-empty-full-title-line-height | 标题行高 | `$line-height-xxl` |
+| \--nutui-empty-full-description-font-size | 描述字号 | `$font-size-base` |
+| \--nutui-empty-full-description-line-height | 描述行高 | `22px` |
+| \--nutui-empty-full-actions-margin-top | 操作区上边距 | `8px` |
+
+**半屏 `half`**
+
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-empty-padding | Empty组件图片的padding值 | `32px 40px` |
-| \--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-line-height | Empty组件图片标题行高 | `$font-size-l` |
-| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1` |
-| \--nutui-empty-background-color | Empty组件背景色 | `#fff` |
+| \--nutui-empty-half-image-size | 插图尺寸 | `80px` |
+| \--nutui-empty-half-title-font-size | 标题字号 | `$font-size-s` |
+| \--nutui-empty-half-title-line-height | 标题行高 | `22px` |
+| \--nutui-empty-half-description-font-size | 描述字号 | `$font-size-m` |
+| \--nutui-empty-half-description-line-height | 描述行高 | `$line-height-2xl` |
+| \--nutui-empty-half-actions-margin-top | 操作区上边距 | `8px` |
+
+**局部 `partial`**
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-empty-partial-padding | 容器内边距 | `0 16px` |
+| \--nutui-empty-partial-image-size | 插图尺寸 | `32px` |
+| \--nutui-empty-partial-content-gap | 图与文案间距 | `8px` |
+| \--nutui-empty-partial-description-font-size | 文案字号 | `$font-size-m` |
+| \--nutui-empty-partial-description-line-height | 文案行高 | `32px` |
+
+> v4 已移除 `--nutui-empty-image-size`、`--nutui-empty-image-small-size` 等 v3 变量，请按 `size` 使用上表对应变量。
 
 <Contribution name="Empty" />
diff --git a/src/packages/empty/doc.taro.md b/src/packages/empty/doc.taro.md
index cb738c583f..a561efc656 100644
--- a/src/packages/empty/doc.taro.md
+++ b/src/packages/empty/doc.taro.md
@@ -10,7 +10,7 @@ import { Empty } from '@nutui/nutui-react-taro'
 
 ## 示例代码
 
-### 基础用法
+### 全屏 full
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Empty } from '@nutui/nutui-react-taro'
 
 :::
 
-### Size 为 small 时，可用于半屏
+### 半屏 half
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Empty } from '@nutui/nutui-react-taro'
 
 :::
 
-### 自定义内容大小
+### 局部 partial
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Empty } from '@nutui/nutui-react-taro'
 
 :::
 
-### 图片类型，内置 3 个
+### 图片类型，内置 8 个
 
 :::demo
 
@@ -42,6 +42,14 @@ import { Empty } from '@nutui/nutui-react-taro'
 
 :::
 
+### 自定义图片大小
+
+:::demo
+
+<CodeBlock src='taro/demo7.tsx'></CodeBlock>
+
+:::
+
 ### 自定义图片
 
 > 如果您是京东站内相关项目的开发，我们特意为您提供了一系列的缺省状态的图片链接，您可通过内部群获取。
@@ -52,7 +60,7 @@ import { Empty } from '@nutui/nutui-react-taro'
 
 :::
 
-### 底部内容
+### 自定义底部按钮
 
 :::demo
 
@@ -70,9 +78,9 @@ import { Empty } from '@nutui/nutui-react-taro'
 | imageSize | 图片大小，number 类型单位为 px | `number` \| `string` | `-` |
 | title | 图片下方的标题 | `ReactNode` | `-` |
 | description | 图片下方的描述文字 | `ReactNode` | `-` |
-| size | 组件整体大小，适配于全屏或半屏 | `small` \| `base` | `base` |
-| status | 默认图片错误类型 | `empty` \| `error` \| `network` | `empty` |
-| actions | 可用于处理操作的一组数据 | `Array` | `[]` |
+| size | 组件尺寸，对齐 JD APP V11.0 缺省状态规范 | `full` \| `half` \| `partial` | `half` |
+| status | 内置缺省插图类型，与设计稿业务场景一一对应 | `network` \| `comment` \| `search` \| `shop` \| `address` \| `order` \| `favor` \| `cart` | `network` |
+| actions | 操作按钮列表，项内字段同 Button，支持 `onClick` | `EmptyAction[]` | `[]` |
 
 ## 主题定制
 
@@ -80,14 +88,48 @@ import { Empty } from '@nutui/nutui-react-taro'
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
+**通用**
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-empty-padding | 组件内边距 | `20px` |
+| \--nutui-empty-background-color | 背景色 | `$color-background-overlay` |
+| \--nutui-empty-title-color | 标题颜色 | `$color-title`（`#11141A`） |
+| \--nutui-empty-description-color | 描述颜色 | `$color-text-help`（`#8D9199`） |
+
+**全屏 `full`**
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-empty-full-padding-top | 顶部间距 | `160px` |
+| \--nutui-empty-full-image-size | 插图尺寸 | `160px` |
+| \--nutui-empty-full-title-font-size | 标题字号 | `$font-size-md` |
+| \--nutui-empty-full-title-line-height | 标题行高 | `$line-height-xxl` |
+| \--nutui-empty-full-description-font-size | 描述字号 | `$font-size-base` |
+| \--nutui-empty-full-description-line-height | 描述行高 | `22px` |
+| \--nutui-empty-full-actions-margin-top | 操作区上边距 | `8px` |
+
+**半屏 `half`**
+
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-empty-padding | Empty组件图片的padding值 | `32px 40px` |
-| \--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-line-height | Empty组件图片标题行高 | `$font-size-l` |
-| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1` |
-| \--nutui-empty-background-color | Empty组件背景色 | `#fff` |
+| \--nutui-empty-half-image-size | 插图尺寸 | `80px` |
+| \--nutui-empty-half-title-font-size | 标题字号 | `$font-size-s` |
+| \--nutui-empty-half-title-line-height | 标题行高 | `22px` |
+| \--nutui-empty-half-description-font-size | 描述字号 | `$font-size-m` |
+| \--nutui-empty-half-description-line-height | 描述行高 | `$line-height-2xl` |
+| \--nutui-empty-half-actions-margin-top | 操作区上边距 | `8px` |
+
+**局部 `partial`**
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-empty-partial-padding | 容器内边距 | `0 16px` |
+| \--nutui-empty-partial-image-size | 插图尺寸 | `32px` |
+| \--nutui-empty-partial-content-gap | 图与文案间距 | `8px` |
+| \--nutui-empty-partial-description-font-size | 文案字号 | `$font-size-m` |
+| \--nutui-empty-partial-description-line-height | 文案行高 | `32px` |
+
+> v4 已移除 `--nutui-empty-image-size`、`--nutui-empty-image-small-size` 等 v3 变量，请按 `size` 使用上表对应变量。
 
 <Contribution name="Empty" />
diff --git a/src/packages/empty/doc.zh-TW.md b/src/packages/empty/doc.zh-TW.md
index 27d742e484..63d480202d 100644
--- a/src/packages/empty/doc.zh-TW.md
+++ b/src/packages/empty/doc.zh-TW.md
@@ -10,7 +10,7 @@ import { Empty } from '@nutui/nutui-react'
 
 ## 示例代碼
 
-### 基礎用法
+### 全屏 full
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### Size 為 small 時，可用於半屏
+### 半屏 half
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### 自定義內容大小
+### 局部 partial
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### 圖片類型，內置 3 個
+### 圖片類型，內置 8 個
 
 :::demo
 
@@ -42,6 +42,14 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
+### 自定義圖片大小
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ### 自定義圖片
 
 > 如果您是京東站內相關項目的開發，我們特意為您提供了一繫列的缺省狀態的圖片鏈接，您可通過內部群獲取。
@@ -52,7 +60,7 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
-### 底部內容
+### 自定義底部按鈕
 
 :::demo
 
@@ -70,9 +78,9 @@ import { Empty } from '@nutui/nutui-react'
 | imageSize | 圖片大小，number 類型單位為 px | `number` \| `string` | `-` |
 | title | 圖片下方的標題 | `ReactNode` | `-` |
 | description | 圖片下方的描述文字 | `ReactNode` | `-` |
-| size | 組件整體大小，適配於全屏或半屏 | `small` \| `base` | `base` |
-| status | 默認圖片錯誤類型 | `empty` \| `error` \| `network` | `empty` |
-| actions | 可用於處理操作的一組數據 | `Array` | `[]` |
+| size | 組件尺寸，對齊 JD APP V11.0 缺省狀態規範 | `full` \| `half` \| `partial` | `half` |
+| status | 內置缺省插圖類型，與設計稿業務場景一一對應 | `network` \| `comment` \| `search` \| `shop` \| `address` \| `order` \| `favor` \| `cart` | `network` |
+| actions | 操作按鈕列表，項內字段同 Button，支持 `onClick` | `EmptyAction[]` | `[]` |
 
 ## 主題定製
 
@@ -80,14 +88,48 @@ import { Empty } from '@nutui/nutui-react'
 
 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。
 
+**通用**
+
+| 名稱 | 説明 | 默認值 |
+| --- | --- | --- |
+| \--nutui-empty-padding | 組件內邊距 | `20px` |
+| \--nutui-empty-background-color | 背景色 | `$color-background-overlay` |
+| \--nutui-empty-title-color | 標題顏色 | `$color-title`（`#11141A`） |
+| \--nutui-empty-description-color | 描述顏色 | `$color-text-help`（`#8D9199`） |
+
+**全屏 `full`**
+
+| 名稱 | 説明 | 默認值 |
+| --- | --- | --- |
+| \--nutui-empty-full-padding-top | 頂部間距 | `160px` |
+| \--nutui-empty-full-image-size | 插圖尺寸 | `160px` |
+| \--nutui-empty-full-title-font-size | 標題字號 | `$font-size-md` |
+| \--nutui-empty-full-title-line-height | 標題行高 | `$line-height-xxl` |
+| \--nutui-empty-full-description-font-size | 描述字號 | `$font-size-base` |
+| \--nutui-empty-full-description-line-height | 描述行高 | `22px` |
+| \--nutui-empty-full-actions-margin-top | 操作區上邊距 | `8px` |
+
+**半屏 `half`**
+
 | 名稱 | 説明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-empty-padding | Empty組件圖片的padding值 | `32px 40px` |
-| \--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-line-height | Empty組件圖片標題行高 | `$font-size-l` |
-| \--nutui-empty-description-line-height | Empty組件圖片描述行高 | `1` |
-| \--nutui-empty-background-color | Empty組件背景色 | `#fff` |
+| \--nutui-empty-half-image-size | 插圖尺寸 | `80px` |
+| \--nutui-empty-half-title-font-size | 標題字號 | `$font-size-s` |
+| \--nutui-empty-half-title-line-height | 標題行高 | `22px` |
+| \--nutui-empty-half-description-font-size | 描述字號 | `$font-size-m` |
+| \--nutui-empty-half-description-line-height | 描述行高 | `$line-height-2xl` |
+| \--nutui-empty-half-actions-margin-top | 操作區上邊距 | `8px` |
+
+**局部 `partial`**
+
+| 名稱 | 説明 | 默認值 |
+| --- | --- | --- |
+| \--nutui-empty-partial-padding | 容器內邊距 | `0 16px` |
+| \--nutui-empty-partial-image-size | 插圖尺寸 | `32px` |
+| \--nutui-empty-partial-content-gap | 圖與文案間距 | `8px` |
+| \--nutui-empty-partial-description-font-size | 文案字號 | `$font-size-m` |
+| \--nutui-empty-partial-description-line-height | 文案行高 | `32px` |
+
+> v4 已移除 `--nutui-empty-image-size`、`--nutui-empty-image-small-size` 等 v3 變量，請按 `size` 使用上表對應變量。
 
 <Contribution name="Empty" />
diff --git a/src/packages/empty/empty.scss b/src/packages/empty/empty.scss
index 7ec5e472fa..7250da0277 100644
--- a/src/packages/empty/empty.scss
+++ b/src/packages/empty/empty.scss
@@ -1,4 +1,5 @@
 @import '../button/button.scss';
+
 .nut-empty {
   box-sizing: border-box;
   width: 100%;
@@ -9,55 +10,125 @@
   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 {
+    flex-shrink: 0;
 
     img,
     image {
       width: 100%;
       height: 100%;
+      display: block;
     }
   }
 
   &-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: 24px;
+    text-align: center;
+    color: $empty-description-color;
+    font-weight: $font-weight;
   }
-  &-actions-small {
+
+  &-actions {
     display: flex;
     flex-direction: row;
-    margin-top: 16px;
+    justify-content: center;
   }
 
   &-action {
     margin-right: 6px;
     margin-left: 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;
+    }
+  }
 }
diff --git a/src/packages/empty/empty.taro.tsx b/src/packages/empty/empty.taro.tsx
index 9d3795625d..d1a8921c6b 100644
--- a/src/packages/empty/empty.taro.tsx
+++ b/src/packages/empty/empty.taro.tsx
@@ -2,37 +2,23 @@ import React, { FunctionComponent, useEffect, useState, ReactNode } from 'react'
 import classNames from 'classnames'
 import { View, Image } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import { UIFill, UISize, UIType } from '@/types/base/atoms'
 import { Button } from '@/packages/button/button.taro'
+import {
+  getEmptyStatusImage,
+  type EmptyAction,
+  type EmptySize,
+  type EmptyStatus,
+} from '@/types'
 
-export interface EmptyAction {
-  text: React.ReactNode
-  type?: UIType
-  size?: UISize
-  fill?: UIFill
-  disabled?: boolean
-  onClick?: () => () => void
-}
-
-type statusOptions = {
-  [key: string]: string
-}
+export type { EmptyAction, EmptySize, EmptyStatus } from '@/types'
 
-const defaultStatus: statusOptions = {
-  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',
-}
 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>
 }
 
@@ -41,8 +27,8 @@ const defaultProps = {
   title: '',
   description: '',
   imageSize: '',
-  size: 'base',
-  status: 'empty',
+  size: 'half',
+  status: 'network',
   actions: [],
 } as EmptyProps
 
@@ -69,7 +55,7 @@ export const Empty: FunctionComponent<
 
   const [imgStyle, setImgStyle] = useState<any>({})
 
-  const imageUrl = image || defaultStatus[status]
+  const imageUrl = image || getEmptyStatusImage(status)
   const imageNode =
     typeof imageUrl === 'string' ? (
       <Image
@@ -100,25 +86,47 @@ export const Empty: FunctionComponent<
       }
     })
   }, [imageSize])
-  const cls = classNames(classPrefix, className)
+  const cls = classNames(classPrefix, `${classPrefix}--${size}`, className)
+
+  const imageBlock = (
+    <View className={`${classPrefix}-image`} style={imgStyle}>
+      {imageNode}
+    </View>
+  )
+
+  const titleBlock =
+    typeof title === 'string' && title ? (
+      <View className={`${classPrefix}-title`}>{title}</View>
+    ) : (
+      title
+    )
+
+  const descriptionBlock =
+    typeof description === 'string' ? (
+      <View className={`${classPrefix}-description`}>{description}</View>
+    ) : (
+      description
+    )
 
   return (
     <View className={cls} style={style}>
-      <View className={`${classPrefix}-${size}`} style={imgStyle}>
-        {imageNode}
-      </View>
-      {typeof title === 'string' && title ? (
-        <View className={`${classPrefix}-title`}>{title}</View>
-      ) : (
-        title
-      )}
-      {typeof description === 'string' ? (
-        <View className={`${classPrefix}-description`}>{description}</View>
+      {size === 'partial' ? (
+        <View className={`${classPrefix}-partial-body`}>
+          {imageBlock}
+          <View className={`${classPrefix}-content`}>
+            {titleBlock}
+            {descriptionBlock}
+          </View>
+        </View>
       ) : (
-        description
+        <>
+          {imageBlock}
+          {titleBlock}
+          {descriptionBlock}
+        </>
       )}
       {actions.length ? (
-        <View className={`${classPrefix}-actions-${size}`}>
+        <View className={`${classPrefix}-actions`}>
           {actions.map((action, index) => {
             const { text, ...rest } = action
             return (
diff --git a/src/packages/empty/empty.tsx b/src/packages/empty/empty.tsx
index 7ed09f1134..7377823ba0 100644
--- a/src/packages/empty/empty.tsx
+++ b/src/packages/empty/empty.tsx
@@ -3,36 +3,22 @@ import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 import Button from '../button'
-import { UIType, UISize, UIFill } from '@/types/base/atoms'
+import {
+  getEmptyStatusImage,
+  type EmptyAction,
+  type EmptySize,
+  type EmptyStatus,
+} from '@/types'
 
-export interface EmptyAction {
-  text: React.ReactNode
-  type?: UIType
-  size?: UISize
-  fill?: UIFill
-  disabled?: boolean
-  onClick?: () => () => void
-}
-
-type statusOptions = {
-  [key: string]: string
-}
+export type { EmptyAction, EmptySize, EmptyStatus } from '@/types'
 
-const defaultStatus: statusOptions = {
-  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',
-}
 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>
 }
 
@@ -41,8 +27,8 @@ const defaultProps = {
   title: '',
   description: '',
   imageSize: '',
-  size: 'base',
-  status: 'empty',
+  size: 'half',
+  status: 'network',
   actions: [],
 } as EmptyProps
 
@@ -69,7 +55,7 @@ export const Empty: FunctionComponent<
 
   const [imgStyle, setImgStyle] = useState<any>({})
 
-  const imageUrl = image || defaultStatus[status]
+  const imageUrl = image || getEmptyStatusImage(status)
   const imageNode =
     typeof imageUrl === 'string' ? (
       <img
@@ -101,25 +87,47 @@ export const Empty: FunctionComponent<
       }
     })
   }, [imageSize])
-  const cls = classNames(classPrefix, className)
+  const cls = classNames(classPrefix, `${classPrefix}--${size}`, className)
+
+  const imageBlock = (
+    <div className={`${classPrefix}-image`} style={imgStyle}>
+      {imageNode}
+    </div>
+  )
+
+  const titleBlock =
+    typeof title === 'string' && title ? (
+      <div className={`${classPrefix}-title`}>{title}</div>
+    ) : (
+      title
+    )
+
+  const descriptionBlock =
+    typeof description === 'string' ? (
+      <div className={`${classPrefix}-description`}>{description}</div>
+    ) : (
+      description
+    )
 
   return (
-    <div className={cls} {...rest}>
-      <div className={`${classPrefix}-${size}`} style={imgStyle}>
-        {imageNode}
-      </div>
-      {typeof title === 'string' && title ? (
-        <div className={`${classPrefix}-title`}>{title}</div>
-      ) : (
-        title
-      )}
-      {typeof description === 'string' ? (
-        <div className={`${classPrefix}-description`}>{description}</div>
+    <div className={cls} style={style} {...rest}>
+      {size === 'partial' ? (
+        <div className={`${classPrefix}-partial-body`}>
+          {imageBlock}
+          <div className={`${classPrefix}-content`}>
+            {titleBlock}
+            {descriptionBlock}
+          </div>
+        </div>
       ) : (
-        description
+        <>
+          {imageBlock}
+          {titleBlock}
+          {descriptionBlock}
+        </>
       )}
       {actions.length ? (
-        <div className={`${classPrefix}-actions-${size}`}>
+        <div className={`${classPrefix}-actions`}>
           {actions.map((action, index) => {
             const { text, ...rest } = action
             return (
diff --git a/src/packages/empty/index.taro.ts b/src/packages/empty/index.taro.ts
index 63e6f3f254..74b0cdd13a 100644
--- a/src/packages/empty/index.taro.ts
+++ b/src/packages/empty/index.taro.ts
@@ -1,5 +1,10 @@
 import { Empty } from './empty.taro'
 
-export type { EmptyProps } from './empty'
+export type {
+  EmptyAction,
+  EmptyProps,
+  EmptySize,
+  EmptyStatus,
+} from './empty.taro'
 
 export default Empty
diff --git a/src/packages/empty/index.ts b/src/packages/empty/index.ts
index b6e6961588..bba4fddb8d 100644
--- a/src/packages/empty/index.ts
+++ b/src/packages/empty/index.ts
@@ -1,5 +1,5 @@
 import { Empty } from './empty'
 
-export type { EmptyProps } from './empty'
+export type { EmptyAction, EmptyProps, EmptySize, EmptyStatus } from './empty'
 
 export default Empty
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md b/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md
index 74f933d091..30060a3ca9 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md
@@ -48,3 +48,33 @@ npm install @nutui/nutui-react-taro
 
 - **Dark Mode Correction**:
   - Resolved incorrect color variables/mappings under Dark Mode (`theme-dark`) for Checkbox background colors and borders.
+
+### Empty
+
+> **No v3 compatibility in v4**: no prop aliases, no runtime fallbacks, and no `EmptyState` type alias. Migrate manually using the tables below.
+
+- **`size` Enum Breaking Change**:
+  - Removed `base` / `small`. Aligned with JD APP V11.0 empty-state spec: `full` / `half` / `partial`.
+  - Default changed from `base` to `half`.
+  - Recommended migration:
+    - `size="base"` (v3 default, 160px image) → use `size="full"` for full-page states, or `size="partial"` for embedded partial areas.
+    - `size="small"` (v3, 120px image) → `size="half"` (half-screen, 80px image).
+- **Visual Spec Updates**:
+  - **`full`**: 160px image, title `$font-size-md` / line height 24px / `#11141A`, description `$font-size-base` / line height 22px / `#8D9199`, 160px top spacing.
+  - **`half`**: 80px image, title `$font-size-s` / line height 22px, description `$font-size-m` / line height 20px.
+  - **`partial`**: 32px image in horizontal layout, text `$font-size-m` / line height 32px, padding `0 16px`, 8px gap between image and text.
+- **CSS Class Name Breaking Changes**:
+  - Size modifiers: `.nut-empty-base` / `.nut-empty-small` → `.nut-empty--full` / `.nut-empty--half` / `.nut-empty--partial`.
+  - Image wrapper: `.nut-empty-base` / `.nut-empty-small` → `.nut-empty-image`.
+  - Actions: `.nut-empty-actions-base` / `.nut-empty-actions-small` → `.nut-empty-actions`.
+- **Theme Variable Updates**:
+  - Added `--nutui-empty-title-color`, `--nutui-empty-description-color`, and per-size variables (e.g. `--nutui-empty-full-image-size`).
+  - Font sizes default to `$font-size-*` theme tokens; line heights use `$line-height-*` when available (e.g. 24px, 20px), otherwise design-spec px values (e.g. 22px, 32px).
+  - Legacy `--nutui-empty-image-size` and `--nutui-empty-image-small-size` have been removed; use per-size variables instead.
+- **`status` Enum Breaking Change**:
+  - 8 built-in scenarios: `network` / `comment` / `search` / `shop` / `address` / `order` / `favor` / `cart`.
+  - Removed `empty` and `error`; default changed from `empty` to `network`.
+  - Recommended v3 → v4 mapping (code changes required; no automatic conversion):
+    - `status="empty"` → `status="search"` (generic empty) or another enum above
+    - `status="error"` → `status="network"` or a custom `image`
+  - Images load from CDN URLs at runtime; see `src/types/spec/empty/base.ts` for the mapping.
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v3.md b/src/sites/sites-react/doc/docs/react/migrate-from-v3.md
index e03d06d1b8..0aa5e3a461 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v3.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v3.md
@@ -48,3 +48,33 @@ npm install @nutui/nutui-react-taro
 
 - **暗黑模式修复与设计稿适配**：
   - 修复并适配了多选框在暗黑模式（`theme-dark`）下的背景色、勾选框边框色等异常色彩映射问题。
+
+### Empty (反馈类)
+
+> **v4 不提供 v3 兼容**：无 Props 别名、无运行时 fallback、无 `EmptyState` 类型别名。请按下表手动迁移。
+
+- **`size` 枚举值变更（不兼容）**：
+  - 移除 `base` / `small`，对齐 JD APP V11.0 缺省状态规范，改为 `full` / `half` / `partial` 三种尺寸。
+  - 默认值由 `base` 调整为 `half`。
+  - 推荐迁移映射：
+    - `size="base"`（v3 默认，插图 160px）→ 整页场景用 `size="full"`，局部内嵌场景用 `size="partial"`。
+    - `size="small"`（v3 插图 120px）→ `size="half"`（半屏型，插图 80px）。
+- **视觉规格对齐设计稿**：
+  - **全屏型 `full`**：插图 160px，标题 `$font-size-md` / 行高 24px / `#11141A`，描述 `$font-size-base` / 行高 22px / `#8D9199`，顶部间距 160px。
+  - **半屏型 `half`**：插图 80px，标题 `$font-size-s` / 行高 22px，描述 `$font-size-m` / 行高 20px。
+  - **局部型 `partial`**：插图 32px 横排，文案 `$font-size-m` / 行高 32px，容器 `padding: 0 16px`，图与文案间距 8px。
+- **CSS 类名变更（不兼容）**：
+  - 尺寸修饰类：`.nut-empty-base` / `.nut-empty-small` → `.nut-empty--full` / `.nut-empty--half` / `.nut-empty--partial`。
+  - 插图容器：`.nut-empty-base` / `.nut-empty-small` → `.nut-empty-image`。
+  - 操作区：`.nut-empty-actions-base` / `.nut-empty-actions-small` → `.nut-empty-actions`。
+- **主题变量调整**：
+  - 新增 `--nutui-empty-title-color`、`--nutui-empty-description-color` 及分尺寸变量（如 `--nutui-empty-full-image-size`）。
+  - 字号默认引用 `$font-size-*` 主题 token；行高有对应 token 时引用 `$line-height-*`（如 24px、20px），其余按设计稿 px 值（如 22px、32px）。
+  - 旧变量 `--nutui-empty-image-size`、`--nutui-empty-image-small-size` 已移除，请改用对应尺寸变量。
+- **`status` 枚举变更（不兼容）**：
+  - 内置 8 种业务场景：`network` / `comment` / `search` / `shop` / `address` / `order` / `favor` / `cart`。
+  - 移除 `empty`、`error`；默认值由 `empty` 调整为 `network`。
+  - v3 → v4 推荐映射（需改代码，组件不会自动转换）：
+    - `status="empty"` → `status="search"`（通用空态）或按场景选用上表枚举
+    - `status="error"` → `status="network"` 或通过 `image` 传入自定义插图
+  - 插图通过 CDN URL 运行时加载，映射表见 `src/types/spec/empty/base.ts`。
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md
index 74f933d091..30060a3ca9 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md
@@ -48,3 +48,33 @@ npm install @nutui/nutui-react-taro
 
 - **Dark Mode Correction**:
   - Resolved incorrect color variables/mappings under Dark Mode (`theme-dark`) for Checkbox background colors and borders.
+
+### Empty
+
+> **No v3 compatibility in v4**: no prop aliases, no runtime fallbacks, and no `EmptyState` type alias. Migrate manually using the tables below.
+
+- **`size` Enum Breaking Change**:
+  - Removed `base` / `small`. Aligned with JD APP V11.0 empty-state spec: `full` / `half` / `partial`.
+  - Default changed from `base` to `half`.
+  - Recommended migration:
+    - `size="base"` (v3 default, 160px image) → use `size="full"` for full-page states, or `size="partial"` for embedded partial areas.
+    - `size="small"` (v3, 120px image) → `size="half"` (half-screen, 80px image).
+- **Visual Spec Updates**:
+  - **`full`**: 160px image, title `$font-size-md` / line height 24px / `#11141A`, description `$font-size-base` / line height 22px / `#8D9199`, 160px top spacing.
+  - **`half`**: 80px image, title `$font-size-s` / line height 22px, description `$font-size-m` / line height 20px.
+  - **`partial`**: 32px image in horizontal layout, text `$font-size-m` / line height 32px, padding `0 16px`, 8px gap between image and text.
+- **CSS Class Name Breaking Changes**:
+  - Size modifiers: `.nut-empty-base` / `.nut-empty-small` → `.nut-empty--full` / `.nut-empty--half` / `.nut-empty--partial`.
+  - Image wrapper: `.nut-empty-base` / `.nut-empty-small` → `.nut-empty-image`.
+  - Actions: `.nut-empty-actions-base` / `.nut-empty-actions-small` → `.nut-empty-actions`.
+- **Theme Variable Updates**:
+  - Added `--nutui-empty-title-color`, `--nutui-empty-description-color`, and per-size variables (e.g. `--nutui-empty-full-image-size`).
+  - Font sizes default to `$font-size-*` theme tokens; line heights use `$line-height-*` when available (e.g. 24px, 20px), otherwise design-spec px values (e.g. 22px, 32px).
+  - Legacy `--nutui-empty-image-size` and `--nutui-empty-image-small-size` have been removed; use per-size variables instead.
+- **`status` Enum Breaking Change**:
+  - 8 built-in scenarios: `network` / `comment` / `search` / `shop` / `address` / `order` / `favor` / `cart`.
+  - Removed `empty` and `error`; default changed from `empty` to `network`.
+  - Recommended v3 → v4 mapping (code changes required; no automatic conversion):
+    - `status="empty"` → `status="search"` (generic empty) or another enum above
+    - `status="error"` → `status="network"` or a custom `image`
+  - Images load from CDN URLs at runtime; see `src/types/spec/empty/base.ts` for the mapping.
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md
index e03d06d1b8..0aa5e3a461 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md
@@ -48,3 +48,33 @@ npm install @nutui/nutui-react-taro
 
 - **暗黑模式修复与设计稿适配**：
   - 修复并适配了多选框在暗黑模式（`theme-dark`）下的背景色、勾选框边框色等异常色彩映射问题。
+
+### Empty (反馈类)
+
+> **v4 不提供 v3 兼容**：无 Props 别名、无运行时 fallback、无 `EmptyState` 类型别名。请按下表手动迁移。
+
+- **`size` 枚举值变更（不兼容）**：
+  - 移除 `base` / `small`，对齐 JD APP V11.0 缺省状态规范，改为 `full` / `half` / `partial` 三种尺寸。
+  - 默认值由 `base` 调整为 `half`。
+  - 推荐迁移映射：
+    - `size="base"`（v3 默认，插图 160px）→ 整页场景用 `size="full"`，局部内嵌场景用 `size="partial"`。
+    - `size="small"`（v3 插图 120px）→ `size="half"`（半屏型，插图 80px）。
+- **视觉规格对齐设计稿**：
+  - **全屏型 `full`**：插图 160px，标题 `$font-size-md` / 行高 24px / `#11141A`，描述 `$font-size-base` / 行高 22px / `#8D9199`，顶部间距 160px。
+  - **半屏型 `half`**：插图 80px，标题 `$font-size-s` / 行高 22px，描述 `$font-size-m` / 行高 20px。
+  - **局部型 `partial`**：插图 32px 横排，文案 `$font-size-m` / 行高 32px，容器 `padding: 0 16px`，图与文案间距 8px。
+- **CSS 类名变更（不兼容）**：
+  - 尺寸修饰类：`.nut-empty-base` / `.nut-empty-small` → `.nut-empty--full` / `.nut-empty--half` / `.nut-empty--partial`。
+  - 插图容器：`.nut-empty-base` / `.nut-empty-small` → `.nut-empty-image`。
+  - 操作区：`.nut-empty-actions-base` / `.nut-empty-actions-small` → `.nut-empty-actions`。
+- **主题变量调整**：
+  - 新增 `--nutui-empty-title-color`、`--nutui-empty-description-color` 及分尺寸变量（如 `--nutui-empty-full-image-size`）。
+  - 字号默认引用 `$font-size-*` 主题 token；行高有对应 token 时引用 `$line-height-*`（如 24px、20px），其余按设计稿 px 值（如 22px、32px）。
+  - 旧变量 `--nutui-empty-image-size`、`--nutui-empty-image-small-size` 已移除，请改用对应尺寸变量。
+- **`status` 枚举变更（不兼容）**：
+  - 内置 8 种业务场景：`network` / `comment` / `search` / `shop` / `address` / `order` / `favor` / `cart`。
+  - 移除 `empty`、`error`；默认值由 `empty` 调整为 `network`。
+  - v3 → v4 推荐映射（需改代码，组件不会自动转换）：
+    - `status="empty"` → `status="search"`（通用空态）或按场景选用上表枚举
+    - `status="error"` → `status="network"` 或通过 `image` 传入自定义插图
+  - 插图通过 CDN URL 运行时加载，映射表见 `src/types/spec/empty/base.ts`。
diff --git a/src/styles/variables-daojia.scss b/src/styles/variables-daojia.scss
index 61390c644c..5c21874000 100644
--- a/src/styles/variables-daojia.scss
+++ b/src/styles/variables-daojia.scss
@@ -1409,18 +1409,32 @@ $segmented-icon-margin-right: var(--nutui-segmented-icon-margin-right,
     $spacing-xxxs) !default;
 
 // empty（✅）
-$empty-padding: var(--nutui-empty-padding, 32px 40px) !default;
-$empty-image-size: var(--nutui-empty-image-size, 160px) !default;
-$empty-image-small-size: var(--nutui-empty-image-small-size, 120px) !default;
-$empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default;
+$empty-padding: var(--nutui-empty-padding, 20px) !default;
 $empty-background-color: var(--nutui-empty-background-color,
     $color-background-overlay) !default;
-$empty-title-margin-bottom: var(--nutui-empty-title-margin-bottom,
-    12px) !default;
-$empty-title-line-height: var(--nutui-empty-title-line-height,
-    $font-size-l) !default;
-$empty-description-line-height: var(--nutui-empty-description-line-height,
-    1) !default;
+$empty-title-color: var(--nutui-empty-title-color, $color-title) !default;
+$empty-description-color: var(--nutui-empty-description-color, $color-text-help) !default;
+$empty-full-padding-top: var(--nutui-empty-full-padding-top, 160px) !default;
+$empty-full-image-size: var(--nutui-empty-full-image-size, 160px) !default;
+$empty-full-title-font-size: var(--nutui-empty-full-title-font-size, $font-size-md) !default;
+$empty-full-title-line-height: var(--nutui-empty-full-title-line-height, $line-height-xxl) !default;
+$empty-full-description-font-size: var(--nutui-empty-full-description-font-size, $font-size-base) !default;
+$empty-full-description-line-height: var(
+  --nutui-empty-full-description-line-height,
+  22px
+) !default;
+$empty-full-actions-margin-top: var(--nutui-empty-full-actions-margin-top, 8px) !default;
+$empty-half-image-size: var(--nutui-empty-half-image-size, 80px) !default;
+$empty-half-title-font-size: var(--nutui-empty-half-title-font-size, $font-size-s) !default;
+$empty-half-title-line-height: var(--nutui-empty-half-title-line-height, 22px) !default;
+$empty-half-description-font-size: var(--nutui-empty-half-description-font-size, $font-size-m) !default;
+$empty-half-description-line-height: var(--nutui-empty-half-description-line-height, $line-height-2xl) !default;
+$empty-half-actions-margin-top: var(--nutui-empty-half-actions-margin-top, 8px) !default;
+$empty-partial-padding: var(--nutui-empty-partial-padding, 0px 16px) !default;
+$empty-partial-image-size: var(--nutui-empty-partial-image-size, 32px) !default;
+$empty-partial-content-gap: var(--nutui-empty-partial-content-gap, 8px) !default;
+$empty-partial-description-font-size: var(--nutui-empty-partial-description-font-size, $font-size-m) !default;
+$empty-partial-description-line-height: var(--nutui-empty-partial-description-line-height, 32px) !default;
 
 // cascader（✅）
 $cascader-font-size: var(--nutui-cascader-font-size, $font-size-base) !default;
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index 4b505b8824..3737e8a0d7 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -2364,26 +2364,51 @@ $segmented-icon-margin-right: var(
 
 // empty（✅）
 
-$empty-padding: var(--nutui-empty-padding, 32px 40px) !default;
-$empty-image-size: var(--nutui-empty-image-size, 160px) !default;
-$empty-image-small-size: var(--nutui-empty-image-small-size, 120px) !default;
-$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
-) !default;
-$empty-title-line-height: var(
-  --nutui-empty-title-line-height,
+$empty-padding: var(--nutui-empty-padding, 20px) !default;
+$empty-background-color: var(--nutui-empty-background-color, $color-background-overlay) !default;
+$empty-title-color: var(--nutui-empty-title-color, $color-title) !default;
+$empty-description-color: var(--nutui-empty-description-color, $color-text-help) !default;
+
+// 全屏型
+$empty-full-padding-top: var(--nutui-empty-full-padding-top, 160px) !default;
+$empty-full-image-size: var(--nutui-empty-full-image-size, 160px) !default;
+$empty-full-title-font-size: var(--nutui-empty-full-title-font-size, $font-size-md) !default;
+$empty-full-title-line-height: var(--nutui-empty-full-title-line-height, $line-height-xxl) !default;
+$empty-full-description-font-size: var(
+  --nutui-empty-full-description-font-size,
   $font-size-base
 ) !default;
-$empty-description-margin-top: var(
-  --nutui-empty-description-margin-top,
-  0px
+$empty-full-description-line-height: var(
+  --nutui-empty-full-description-line-height,
+  22px
+) !default;
+$empty-full-actions-margin-top: var(--nutui-empty-full-actions-margin-top, 8px) !default;
+
+// 半屏型
+$empty-half-image-size: var(--nutui-empty-half-image-size, 80px) !default;
+$empty-half-title-font-size: var(--nutui-empty-half-title-font-size, $font-size-s) !default;
+$empty-half-title-line-height: var(--nutui-empty-half-title-line-height, 22px) !default;
+$empty-half-description-font-size: var(
+  --nutui-empty-half-description-font-size,
+  $font-size-m
+) !default;
+$empty-half-description-line-height: var(
+  --nutui-empty-half-description-line-height,
+  $line-height-2xl
 ) !default;
-$empty-description-line-height: var(
-  --nutui-empty-description-line-height,
-  1.2
+$empty-half-actions-margin-top: var(--nutui-empty-half-actions-margin-top, 8px) !default;
+
+// 局部型
+$empty-partial-padding: var(--nutui-empty-partial-padding, 0px 16px) !default;
+$empty-partial-image-size: var(--nutui-empty-partial-image-size, 32px) !default;
+$empty-partial-content-gap: var(--nutui-empty-partial-content-gap, 8px) !default;
+$empty-partial-description-font-size: var(
+  --nutui-empty-partial-description-font-size,
+  $font-size-m
+) !default;
+$empty-partial-description-line-height: var(
+  --nutui-empty-partial-description-line-height,
+  32px
 ) !default;
 
 // cascader（✅）
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index c82688e2f5..8fcf690253 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -2439,27 +2439,31 @@ $searchbar-input-text-align: var(
 
 // empty（✅）
 
-$empty-padding: var(--nutui-empty-padding, 32px 40px) !default;
-$empty-image-size: var(--nutui-empty-image-size, 160px) !default;
-$empty-image-small-size: var(--nutui-empty-image-small-size, 120px) !default;
-$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
-) !default;
-$empty-title-line-height: var(
-  --nutui-empty-title-line-height,
-  $font-size-base
-) !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
+$empty-padding: var(--nutui-empty-padding, 20px) !default;
+$empty-background-color: var(--nutui-empty-background-color, $color-background-overlay) !default;
+$empty-title-color: var(--nutui-empty-title-color, $color-title) !default;
+$empty-description-color: var(--nutui-empty-description-color, $color-text-help) !default;
+$empty-full-padding-top: var(--nutui-empty-full-padding-top, 160px) !default;
+$empty-full-image-size: var(--nutui-empty-full-image-size, 160px) !default;
+$empty-full-title-font-size: var(--nutui-empty-full-title-font-size, $font-size-md) !default;
+$empty-full-title-line-height: var(--nutui-empty-full-title-line-height, $line-height-xxl) !default;
+$empty-full-description-font-size: var(--nutui-empty-full-description-font-size, $font-size-base) !default;
+$empty-full-description-line-height: var(
+  --nutui-empty-full-description-line-height,
+  22px
 ) !default;
+$empty-full-actions-margin-top: var(--nutui-empty-full-actions-margin-top, 8px) !default;
+$empty-half-image-size: var(--nutui-empty-half-image-size, 80px) !default;
+$empty-half-title-font-size: var(--nutui-empty-half-title-font-size, $font-size-s) !default;
+$empty-half-title-line-height: var(--nutui-empty-half-title-line-height, 22px) !default;
+$empty-half-description-font-size: var(--nutui-empty-half-description-font-size, $font-size-m) !default;
+$empty-half-description-line-height: var(--nutui-empty-half-description-line-height, $line-height-2xl) !default;
+$empty-half-actions-margin-top: var(--nutui-empty-half-actions-margin-top, 8px) !default;
+$empty-partial-padding: var(--nutui-empty-partial-padding, 0px 16px) !default;
+$empty-partial-image-size: var(--nutui-empty-partial-image-size, 32px) !default;
+$empty-partial-content-gap: var(--nutui-empty-partial-content-gap, 8px) !default;
+$empty-partial-description-font-size: var(--nutui-empty-partial-description-font-size, $font-size-m) !default;
+$empty-partial-description-line-height: var(--nutui-empty-partial-description-line-height, 32px) !default;
 
 // cascader（✅）
 $cascader-font-size: var(--nutui-cascader-font-size, $font-size-base) !default;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 84851b9e7e..bd52a1b7fc 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1496,7 +1496,7 @@ $steps-horizontal-item-line-padding: var(
 ) !default;
 $steps-horizontal-item-special-padding-right: var(
   --nutui-steps-horizontal-item-special-padding-right,
-  scale-px(22px)
+  scale-font-px(22px)
 ) !default;
 $steps-horizontal-item-special-3-padding-right: var(
   --nutui-steps-horizontal-item-special-3-padding-right,
@@ -2277,25 +2277,72 @@ $segmented-icon-margin-right: var(
 ) !default;
 
 // empty（✅）
-$empty-padding: var(--nutui-empty-padding, scale-px(32px) scale-px(40px)) !default;
-$empty-image-size: var(--nutui-empty-image-size, scale-px(160px)) !default;
-$empty-image-small-size: var(--nutui-empty-image-small-size, scale-px(120px)) !default;
-$empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default;
+$empty-padding: var(--nutui-empty-padding, scale-px(20px) ) !default;
 $empty-background-color: var(
   --nutui-empty-background-color,
   $color-background-overlay
 ) !default;
-$empty-title-margin-bottom: var(
-  --nutui-empty-title-margin-bottom,
-  scale-px(12px)
+$empty-title-color: var(--nutui-empty-title-color, $color-title) !default;
+$empty-description-color: var(--nutui-empty-description-color, $color-text-help) !default;
+
+// 全屏型
+$empty-full-padding-top: var(--nutui-empty-full-padding-top, scale-px(160px)) !default;
+$empty-full-image-size: var(--nutui-empty-full-image-size, scale-px(160px)) !default;
+$empty-full-title-font-size: var(
+  --nutui-empty-full-title-font-size,
+  $font-size-md
 ) !default;
-$empty-title-line-height: var(
-  --nutui-empty-title-line-height,
-  $font-size-l
+$empty-full-title-line-height: var(
+  --nutui-empty-full-title-line-height,
+  $line-height-xxl
+) !default;
+$empty-full-description-font-size: var(
+  --nutui-empty-full-description-font-size,
+  $font-size-base
+) !default;
+$empty-full-description-line-height: var(
+  --nutui-empty-full-description-line-height,
+  scale-font-px(22px)
+) !default;
+$empty-full-actions-margin-top: var(
+  --nutui-empty-full-actions-margin-top,
+  scale-px(8px)
+) !default;
+
+// 半屏型
+$empty-half-image-size: var(--nutui-empty-half-image-size, scale-px(80px)) !default;
+$empty-half-title-font-size: var(
+  --nutui-empty-half-title-font-size,
+  $font-size-s
+) !default;
+$empty-half-title-line-height: var(
+  --nutui-empty-half-title-line-height,
+  scale-font-px(22px)
+) !default;
+$empty-half-description-font-size: var(
+  --nutui-empty-half-description-font-size,
+  $font-size-m
+) !default;
+$empty-half-description-line-height: var(
+  --nutui-empty-half-description-line-height,
+  $line-height-2xl
+) !default;
+$empty-half-actions-margin-top: var(
+  --nutui-empty-half-actions-margin-top,
+  scale-px(8px)
+) !default;
+
+// 局部型
+$empty-partial-padding: var(--nutui-empty-partial-padding, scale-px(0px) scale-px(16px)) !default;
+$empty-partial-image-size: var(--nutui-empty-partial-image-size, scale-px(32px)) !default;
+$empty-partial-content-gap: var(--nutui-empty-partial-content-gap, scale-px(8px)) !default;
+$empty-partial-description-font-size: var(
+  --nutui-empty-partial-description-font-size,
+  $font-size-m
 ) !default;
-$empty-description-line-height: var(
-  --nutui-empty-description-line-height,
-  1
+$empty-partial-description-line-height: var(
+  --nutui-empty-partial-description-line-height,
+  scale-font-px(32px)
 ) !default;
 
 // cascader（✅）
diff --git a/src/types/spec/empty/base.ts b/src/types/spec/empty/base.ts
index 54880f83b1..0b94411d85 100644
--- a/src/types/spec/empty/base.ts
+++ b/src/types/spec/empty/base.ts
@@ -4,17 +4,45 @@ import { SimpleValue, UIFill, UISize, UIType } from '../../base/atoms'
 
 export interface EmptyAction {
   text: ReactNode
-  type: UIType
-  size: UISize
-  fill: UIFill
-  disabled: boolean
-  onClick: () => void
+  type?: UIType
+  size?: UISize
+  fill?: UIFill
+  disabled?: boolean
+  onClick?: () => void
 }
 
-export type EmptyState = 'empty' | 'error' | 'network'
+export type EmptyStatus =
+  | 'network'
+  | 'comment'
+  | 'search'
+  | 'shop'
+  | 'address'
+  | 'order'
+  | 'favor'
+  | 'cart'
 
-type statusOptions = {
-  [key: string]: string
+export type EmptySize = 'full' | 'half' | 'partial'
+
+/** 内置缺省插图 URL；图片本体走 CDN 运行时加载，打进包内的仅为 URL 字符串 */
+export const EMPTY_STATUS_IMAGES: Record<EmptyStatus, string> = {
+  network:
+    'https://img10.360buyimg.com/imagetools/jfs/t1/449411/36/15729/19102/6a30e810F36720c83/03e61e01e08ab731.png',
+  comment:
+    'https://img12.360buyimg.com/imagetools/jfs/t1/458866/29/4221/20560/6a30e810F02e0c676/03e61e01e02c0dab.png',
+  search:
+    'https://img12.360buyimg.com/imagetools/jfs/t1/453287/39/13487/21638/6a30e810Fc7b15ec6/03e61e01e0bf5f81.png',
+  shop: 'https://img11.360buyimg.com/imagetools/jfs/t1/447986/21/19304/24327/6a30e810F0a9c3aca/03e61e01dd8d09b1.png',
+  address:
+    'https://img12.360buyimg.com/imagetools/jfs/t1/446923/19/19328/23073/6a30e810F37ec221d/03e61e01e0e69357.png',
+  order:
+    'https://img11.360buyimg.com/imagetools/jfs/t1/455990/2/7107/24405/6a30e810Fcb5a39b1/03e61e01e0715a43.png',
+  favor:
+    'https://img12.360buyimg.com/imagetools/jfs/t1/458517/13/4983/22338/6a30e810F9d69ff57/03e61e01e092c3f9.png',
+  cart: 'https://img11.360buyimg.com/imagetools/jfs/t1/453149/9/10304/23216/6a30e810Ff6c0d230/03e61e01e0b41203.png',
+}
+
+export const getEmptyStatusImage = (status: EmptyStatus) => {
+  return EMPTY_STATUS_IMAGES[status] || EMPTY_STATUS_IMAGES.network
 }
 
 export interface BaseEmpty extends BaseProps {
@@ -22,7 +50,7 @@ export interface BaseEmpty extends BaseProps {
   imageSize: SimpleValue
   title: ReactNode
   description: ReactNode
-  size: Extract<UISize, 'small' | 'base'>
-  status: EmptyState
+  size: EmptySize
+  status: EmptyStatus
   actions: Array<EmptyAction>
 }

From 5d88bad1c478aa37ed99416dcc5ffab0ff1730b2 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 16 Jun 2026 18:40:18 +0800
Subject: [PATCH 7/8] =?UTF-8?q?refactor(Empty):=20=E6=9B=B4=E6=96=B0demo?=
 =?UTF-8?q?=E5=92=8C=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/configprovider/types.ts          |  1 -
 src/packages/empty/demos/h5/demo1.tsx         | 30 +++++----
 src/packages/empty/demos/h5/demo2.tsx         | 38 +++++------
 src/packages/empty/demos/h5/demo3.tsx         |  8 ++-
 src/packages/empty/demos/h5/demo4.tsx         |  2 +-
 src/packages/empty/demos/h5/demo5.tsx         | 22 ++++---
 src/packages/empty/demos/h5/demo6.tsx         | 18 +++---
 src/packages/empty/demos/h5/demo7.tsx         |  8 ++-
 src/packages/empty/demos/taro/demo1.tsx       | 35 +++++-----
 src/packages/empty/demos/taro/demo2.tsx       | 42 ++++++------
 src/packages/empty/demos/taro/demo3.tsx       |  8 ++-
 src/packages/empty/demos/taro/demo4.tsx       |  2 +-
 src/packages/empty/demos/taro/demo5.tsx       | 28 ++++----
 src/packages/empty/demos/taro/demo6.tsx       | 18 +++---
 src/packages/empty/demos/taro/demo7.tsx       |  8 ++-
 src/packages/empty/doc.en-US.md               |  3 -
 src/packages/empty/doc.md                     |  3 -
 src/packages/empty/doc.taro.md                |  3 -
 src/packages/empty/doc.zh-TW.md               |  3 -
 src/packages/empty/empty.scss                 |  4 --
 .../doc/docs/react/migrate-from-v3.en-US.md   |  2 +-
 .../doc/docs/react/migrate-from-v3.md         |  2 +-
 .../doc/docs/taro/migrate-from-v3.en-US.md    |  2 +-
 .../doc/docs/taro/migrate-from-v3.md          |  2 +-
 src/styles/variables-daojia.scss              |  2 -
 src/styles/variables-jmapp.scss               |  1 -
 src/styles/variables-jrkf.scss                |  1 -
 src/styles/variables.scss                     | 64 ++++---------------
 28 files changed, 167 insertions(+), 193 deletions(-)

diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
index 98e44a4d0b..73bfd07a94 100644
--- a/src/packages/configprovider/types.ts
+++ b/src/packages/configprovider/types.ts
@@ -772,7 +772,6 @@ export type NutCSSVariables =
   | 'nutuiSegmentedActiveBackground'
   | 'nutuiSegmentedIconMarginRight'
   | 'nutuiEmptyPadding'
-  | 'nutuiEmptyBackgroundColor'
   | 'nutuiEmptyTitleColor'
   | 'nutuiEmptyDescriptionColor'
   | 'nutuiEmptyFullPaddingTop'
diff --git a/src/packages/empty/demos/h5/demo1.tsx b/src/packages/empty/demos/h5/demo1.tsx
index 34c9bfc649..d912b0430c 100644
--- a/src/packages/empty/demos/h5/demo1.tsx
+++ b/src/packages/empty/demos/h5/demo1.tsx
@@ -1,21 +1,23 @@
 import React from 'react'
-import { Empty, Toast } from '@nutui/nutui-react'
+import { Cell, Empty, Toast } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <Empty
-      size="full"
-      status="network"
-      title="网络连接已断开"
-      description="请检查网络设置或刷新页面"
-      actions={[
-        {
-          text: '刷新',
-          type: 'primary',
-          onClick: () => Toast.show('正在刷新...'),
-        },
-      ]}
-    />
+    <Cell>
+      <Empty
+        size="full"
+        status="network"
+        title="网络连接已断开"
+        description="请检查网络设置或刷新页面"
+        actions={[
+          {
+            text: '刷新',
+            type: 'primary',
+            onClick: () => Toast.show('正在刷新...'),
+          },
+        ]}
+      />
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/empty/demos/h5/demo2.tsx b/src/packages/empty/demos/h5/demo2.tsx
index 0d4ea59474..fc2b50710e 100644
--- a/src/packages/empty/demos/h5/demo2.tsx
+++ b/src/packages/empty/demos/h5/demo2.tsx
@@ -1,25 +1,27 @@
 import React from 'react'
-import { Empty, Toast } from '@nutui/nutui-react'
+import { Cell, Empty, Toast } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <Empty
-      size="half"
-      status="cart"
-      title="小购物车大容量"
-      description="把喜欢的商品都加进来吧"
-      actions={[
-        {
-          text: '逛逛秒杀',
-          onClick: () => Toast.show('逛逛秒杀'),
-        },
-        {
-          text: '看看关注',
-          type: 'primary',
-          onClick: () => Toast.show('看看关注'),
-        },
-      ]}
-    />
+    <Cell>
+      <Empty
+        size="half"
+        status="cart"
+        title="小购物车大容量"
+        description="把喜欢的商品都加进来吧"
+        actions={[
+          {
+            text: '逛逛秒杀',
+            onClick: () => Toast.show('逛逛秒杀'),
+          },
+          {
+            text: '看看关注',
+            type: 'primary',
+            onClick: () => Toast.show('看看关注'),
+          },
+        ]}
+      />
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/empty/demos/h5/demo3.tsx b/src/packages/empty/demos/h5/demo3.tsx
index dad7f1c538..553082ccd6 100644
--- a/src/packages/empty/demos/h5/demo3.tsx
+++ b/src/packages/empty/demos/h5/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Empty } from '@nutui/nutui-react'
+import { Cell, Empty } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  return <Empty size="partial" status="search" description="没有更多商品咯" />
+  return (
+    <Cell>
+      <Empty size="partial" status="search" description="没有更多商品咯" />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/empty/demos/h5/demo4.tsx b/src/packages/empty/demos/h5/demo4.tsx
index 79e18812f1..7f8ad9e008 100644
--- a/src/packages/empty/demos/h5/demo4.tsx
+++ b/src/packages/empty/demos/h5/demo4.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Tabs, TabPane, Empty } from '@nutui/nutui-react'
+import { Empty, TabPane, Tabs } from '@nutui/nutui-react'
 
 const statusList = [
   {
diff --git a/src/packages/empty/demos/h5/demo5.tsx b/src/packages/empty/demos/h5/demo5.tsx
index 489649136e..575a22fea4 100644
--- a/src/packages/empty/demos/h5/demo5.tsx
+++ b/src/packages/empty/demos/h5/demo5.tsx
@@ -1,17 +1,19 @@
 import React from 'react'
-import { Empty } from '@nutui/nutui-react'
+import { Cell, Empty } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
-    <Empty
-      description="店铺为空"
-      image={
-        <img
-          src="https://storage.360buyimg.com/imgtools/44f3cc10c4-0cf9a7e0-c0ac-11ee-8375-193101bb1a46.png"
-          alt=""
-        />
-      }
-    />
+    <Cell>
+      <Empty
+        description="店铺为空"
+        image={
+          <img
+            src="https://storage.360buyimg.com/imgtools/44f3cc10c4-0cf9a7e0-c0ac-11ee-8375-193101bb1a46.png"
+            alt=""
+          />
+        }
+      />
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/empty/demos/h5/demo6.tsx b/src/packages/empty/demos/h5/demo6.tsx
index 77c61d1dc7..5318f1daab 100644
--- a/src/packages/empty/demos/h5/demo6.tsx
+++ b/src/packages/empty/demos/h5/demo6.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Empty, Button } from '@nutui/nutui-react'
+import { Button, Cell, Empty } from '@nutui/nutui-react'
 
 const Demo6 = () => {
   return (
-    <Empty description="加载失败">
-      <div style={{ marginTop: '10px' }}>
-        <Button type="primary" size="small">
-          刷新重试
-        </Button>
-      </div>
-    </Empty>
+    <Cell>
+      <Empty description="加载失败">
+        <div style={{ marginTop: '10px' }}>
+          <Button type="primary" size="small">
+            刷新重试
+          </Button>
+        </div>
+      </Empty>
+    </Cell>
   )
 }
 export default Demo6
diff --git a/src/packages/empty/demos/h5/demo7.tsx b/src/packages/empty/demos/h5/demo7.tsx
index 5cf9feda3f..8df6fbd724 100644
--- a/src/packages/empty/demos/h5/demo7.tsx
+++ b/src/packages/empty/demos/h5/demo7.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Empty } from '@nutui/nutui-react'
+import { Cell, Empty } from '@nutui/nutui-react'
 
 const Demo7 = () => {
-  return <Empty description="内容描述内容描述" imageSize={100} />
+  return (
+    <Cell>
+      <Empty description="内容描述内容描述" imageSize={100} />
+    </Cell>
+  )
 }
 export default Demo7
diff --git a/src/packages/empty/demos/taro/demo1.tsx b/src/packages/empty/demos/taro/demo1.tsx
index 605284e9fe..d83a692c67 100644
--- a/src/packages/empty/demos/taro/demo1.tsx
+++ b/src/packages/empty/demos/taro/demo1.tsx
@@ -1,23 +1,28 @@
 import React from 'react'
-import { Empty, Toast } from '@nutui/nutui-react-taro'
+import { Cell, Empty, Toast } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
     <>
-      <Empty
-        size="full"
-        status="network"
-        title="网络连接已断开"
-        description="请检查网络设置或刷新页面"
-        actions={[
-          {
-            text: '刷新',
-            type: 'primary',
-            onClick: () =>
-              Toast.show('empty-demo1', { title: '正在刷新...', icon: 'none' }),
-          },
-        ]}
-      />
+      <Cell>
+        <Empty
+          size="full"
+          status="network"
+          title="网络连接已断开"
+          description="请检查网络设置或刷新页面"
+          actions={[
+            {
+              text: '刷新',
+              type: 'primary',
+              onClick: () =>
+                Toast.show('empty-demo1', {
+                  title: '正在刷新...',
+                  icon: 'none',
+                }),
+            },
+          ]}
+        />
+      </Cell>
       <Toast id="empty-demo1" />
     </>
   )
diff --git a/src/packages/empty/demos/taro/demo2.tsx b/src/packages/empty/demos/taro/demo2.tsx
index 5a25567dfb..af5e174f01 100644
--- a/src/packages/empty/demos/taro/demo2.tsx
+++ b/src/packages/empty/demos/taro/demo2.tsx
@@ -1,28 +1,30 @@
 import React from 'react'
-import { Empty, Toast } from '@nutui/nutui-react-taro'
+import { Cell, Empty, Toast } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   return (
     <>
-      <Empty
-        size="half"
-        status="cart"
-        title="小购物车大容量"
-        description="把喜欢的商品都加进来吧"
-        actions={[
-          {
-            text: '逛逛秒杀',
-            onClick: () =>
-              Toast.show('empty-demo2', { title: '逛逛秒杀', icon: 'none' }),
-          },
-          {
-            text: '看看关注',
-            type: 'primary',
-            onClick: () =>
-              Toast.show('empty-demo2', { title: '看看关注', icon: 'none' }),
-          },
-        ]}
-      />
+      <Cell>
+        <Empty
+          size="half"
+          status="cart"
+          title="小购物车大容量"
+          description="把喜欢的商品都加进来吧"
+          actions={[
+            {
+              text: '逛逛秒杀',
+              onClick: () =>
+                Toast.show('empty-demo2', { title: '逛逛秒杀', icon: 'none' }),
+            },
+            {
+              text: '看看关注',
+              type: 'primary',
+              onClick: () =>
+                Toast.show('empty-demo2', { title: '看看关注', icon: 'none' }),
+            },
+          ]}
+        />
+      </Cell>
       <Toast id="empty-demo2" />
     </>
   )
diff --git a/src/packages/empty/demos/taro/demo3.tsx b/src/packages/empty/demos/taro/demo3.tsx
index aa216a89db..95a868bab0 100644
--- a/src/packages/empty/demos/taro/demo3.tsx
+++ b/src/packages/empty/demos/taro/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Empty } from '@nutui/nutui-react-taro'
+import { Cell, Empty } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  return <Empty size="partial" status="search" description="没有更多商品咯" />
+  return (
+    <Cell>
+      <Empty size="partial" status="search" description="没有更多商品咯" />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/empty/demos/taro/demo4.tsx b/src/packages/empty/demos/taro/demo4.tsx
index b511a85195..b4d95d951d 100644
--- a/src/packages/empty/demos/taro/demo4.tsx
+++ b/src/packages/empty/demos/taro/demo4.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Tabs, TabPane, Empty } from '@nutui/nutui-react-taro'
+import { Empty, TabPane, Tabs } from '@nutui/nutui-react-taro'
 
 const statusList = [
   {
diff --git a/src/packages/empty/demos/taro/demo5.tsx b/src/packages/empty/demos/taro/demo5.tsx
index 75465a3c43..dafe6dbe63 100644
--- a/src/packages/empty/demos/taro/demo5.tsx
+++ b/src/packages/empty/demos/taro/demo5.tsx
@@ -1,21 +1,23 @@
 import React from 'react'
-import { Empty } from '@nutui/nutui-react-taro'
+import { Cell, Empty } from '@nutui/nutui-react-taro'
 import { Image } from '@tarojs/components'
 
 const Demo5 = () => {
   return (
-    <Empty
-      description="店铺为空"
-      image={
-        <Image
-          style={{
-            width: '100%',
-            height: '100%',
-          }}
-          src="https://storage.360buyimg.com/imgtools/44f3cc10c4-0cf9a7e0-c0ac-11ee-8375-193101bb1a46.png"
-        />
-      }
-    />
+    <Cell>
+      <Empty
+        description="店铺为空"
+        image={
+          <Image
+            style={{
+              width: '100%',
+              height: '100%',
+            }}
+            src="https://storage.360buyimg.com/imgtools/44f3cc10c4-0cf9a7e0-c0ac-11ee-8375-193101bb1a46.png"
+          />
+        }
+      />
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/empty/demos/taro/demo6.tsx b/src/packages/empty/demos/taro/demo6.tsx
index 008ea16793..db282d868a 100644
--- a/src/packages/empty/demos/taro/demo6.tsx
+++ b/src/packages/empty/demos/taro/demo6.tsx
@@ -1,16 +1,18 @@
 import React from 'react'
-import { Empty, Button, pxTransform } from '@nutui/nutui-react-taro'
+import { Button, Cell, Empty, pxTransform } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 
 const Demo6 = () => {
   return (
-    <Empty description="加载失败">
-      <View style={{ marginTop: pxTransform(10) }}>
-        <Button type="primary" size="small">
-          刷新重试
-        </Button>
-      </View>
-    </Empty>
+    <Cell>
+      <Empty description="加载失败">
+        <View style={{ marginTop: pxTransform(10) }}>
+          <Button type="primary" size="small">
+            刷新重试
+          </Button>
+        </View>
+      </Empty>
+    </Cell>
   )
 }
 export default Demo6
diff --git a/src/packages/empty/demos/taro/demo7.tsx b/src/packages/empty/demos/taro/demo7.tsx
index cb8ad5abe4..043e9df802 100644
--- a/src/packages/empty/demos/taro/demo7.tsx
+++ b/src/packages/empty/demos/taro/demo7.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Empty, pxTransform } from '@nutui/nutui-react-taro'
+import { Cell, Empty, pxTransform } from '@nutui/nutui-react-taro'
 
 const Demo7 = () => {
-  return <Empty description="内容描述内容描述" imageSize={pxTransform(80)} />
+  return (
+    <Cell>
+      <Empty description="内容描述内容描述" imageSize={pxTransform(80)} />
+    </Cell>
+  )
 }
 export default Demo7
diff --git a/src/packages/empty/doc.en-US.md b/src/packages/empty/doc.en-US.md
index 7ed617b169..9bc4662d70 100644
--- a/src/packages/empty/doc.en-US.md
+++ b/src/packages/empty/doc.en-US.md
@@ -93,7 +93,6 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Description | Default |
 | --- | --- | --- |
 | \--nutui-empty-padding | Component padding | `20px` |
-| \--nutui-empty-background-color | Background color | `$color-background-overlay` |
 | \--nutui-empty-title-color | Title color | `$color-title` (`#11141A`) |
 | \--nutui-empty-description-color | Description color | `$color-text-help` (`#8D9199`) |
 
@@ -130,6 +129,4 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-empty-partial-description-font-size | Text font size | `$font-size-m` |
 | \--nutui-empty-partial-description-line-height | Text line height | `32px` |
 
-> v4 removed legacy variables such as `--nutui-empty-image-size` and `--nutui-empty-image-small-size`. Use the per-size variables above.
-
 <Contribution name="Empty" />
diff --git a/src/packages/empty/doc.md b/src/packages/empty/doc.md
index d1f2620298..09efcd7462 100644
--- a/src/packages/empty/doc.md
+++ b/src/packages/empty/doc.md
@@ -93,7 +93,6 @@ import { Empty } from '@nutui/nutui-react'
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-empty-padding | 组件内边距 | `20px` |
-| \--nutui-empty-background-color | 背景色 | `$color-background-overlay` |
 | \--nutui-empty-title-color | 标题颜色 | `$color-title`（`#11141A`） |
 | \--nutui-empty-description-color | 描述颜色 | `$color-text-help`（`#8D9199`） |
 
@@ -130,6 +129,4 @@ import { Empty } from '@nutui/nutui-react'
 | \--nutui-empty-partial-description-font-size | 文案字号 | `$font-size-m` |
 | \--nutui-empty-partial-description-line-height | 文案行高 | `32px` |
 
-> v4 已移除 `--nutui-empty-image-size`、`--nutui-empty-image-small-size` 等 v3 变量，请按 `size` 使用上表对应变量。
-
 <Contribution name="Empty" />
diff --git a/src/packages/empty/doc.taro.md b/src/packages/empty/doc.taro.md
index a561efc656..0817486f0b 100644
--- a/src/packages/empty/doc.taro.md
+++ b/src/packages/empty/doc.taro.md
@@ -93,7 +93,6 @@ import { Empty } from '@nutui/nutui-react-taro'
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-empty-padding | 组件内边距 | `20px` |
-| \--nutui-empty-background-color | 背景色 | `$color-background-overlay` |
 | \--nutui-empty-title-color | 标题颜色 | `$color-title`（`#11141A`） |
 | \--nutui-empty-description-color | 描述颜色 | `$color-text-help`（`#8D9199`） |
 
@@ -130,6 +129,4 @@ import { Empty } from '@nutui/nutui-react-taro'
 | \--nutui-empty-partial-description-font-size | 文案字号 | `$font-size-m` |
 | \--nutui-empty-partial-description-line-height | 文案行高 | `32px` |
 
-> v4 已移除 `--nutui-empty-image-size`、`--nutui-empty-image-small-size` 等 v3 变量，请按 `size` 使用上表对应变量。
-
 <Contribution name="Empty" />
diff --git a/src/packages/empty/doc.zh-TW.md b/src/packages/empty/doc.zh-TW.md
index 63d480202d..54897bea70 100644
--- a/src/packages/empty/doc.zh-TW.md
+++ b/src/packages/empty/doc.zh-TW.md
@@ -93,7 +93,6 @@ import { Empty } from '@nutui/nutui-react'
 | 名稱 | 説明 | 默認值 |
 | --- | --- | --- |
 | \--nutui-empty-padding | 組件內邊距 | `20px` |
-| \--nutui-empty-background-color | 背景色 | `$color-background-overlay` |
 | \--nutui-empty-title-color | 標題顏色 | `$color-title`（`#11141A`） |
 | \--nutui-empty-description-color | 描述顏色 | `$color-text-help`（`#8D9199`） |
 
@@ -130,6 +129,4 @@ import { Empty } from '@nutui/nutui-react'
 | \--nutui-empty-partial-description-font-size | 文案字號 | `$font-size-m` |
 | \--nutui-empty-partial-description-line-height | 文案行高 | `32px` |
 
-> v4 已移除 `--nutui-empty-image-size`、`--nutui-empty-image-small-size` 等 v3 變量，請按 `size` 使用上表對應變量。
-
 <Contribution name="Empty" />
diff --git a/src/packages/empty/empty.scss b/src/packages/empty/empty.scss
index 7250da0277..8a78783033 100644
--- a/src/packages/empty/empty.scss
+++ b/src/packages/empty/empty.scss
@@ -8,16 +8,12 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-  background-color: $empty-background-color;
 
   &-image {
-    flex-shrink: 0;
-
     img,
     image {
       width: 100%;
       height: 100%;
-      display: block;
     }
   }
 
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md b/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md
index 30060a3ca9..47e8cd2b8e 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md
@@ -70,7 +70,7 @@ npm install @nutui/nutui-react-taro
 - **Theme Variable Updates**:
   - Added `--nutui-empty-title-color`, `--nutui-empty-description-color`, and per-size variables (e.g. `--nutui-empty-full-image-size`).
   - Font sizes default to `$font-size-*` theme tokens; line heights use `$line-height-*` when available (e.g. 24px, 20px), otherwise design-spec px values (e.g. 22px, 32px).
-  - Legacy `--nutui-empty-image-size` and `--nutui-empty-image-small-size` have been removed; use per-size variables instead.
+  - Legacy `--nutui-empty-image-size`, `--nutui-empty-image-small-size`, and `--nutui-empty-background-color` have been removed; use per-size variables instead. The component itself is transparent; use an outer container (e.g. `Cell`) for display backgrounds.
 - **`status` Enum Breaking Change**:
   - 8 built-in scenarios: `network` / `comment` / `search` / `shop` / `address` / `order` / `favor` / `cart`.
   - Removed `empty` and `error`; default changed from `empty` to `network`.
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v3.md b/src/sites/sites-react/doc/docs/react/migrate-from-v3.md
index 0aa5e3a461..c942fe3ad1 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v3.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v3.md
@@ -70,7 +70,7 @@ npm install @nutui/nutui-react-taro
 - **主题变量调整**：
   - 新增 `--nutui-empty-title-color`、`--nutui-empty-description-color` 及分尺寸变量（如 `--nutui-empty-full-image-size`）。
   - 字号默认引用 `$font-size-*` 主题 token；行高有对应 token 时引用 `$line-height-*`（如 24px、20px），其余按设计稿 px 值（如 22px、32px）。
-  - 旧变量 `--nutui-empty-image-size`、`--nutui-empty-image-small-size` 已移除，请改用对应尺寸变量。
+  - 旧变量 `--nutui-empty-image-size`、`--nutui-empty-image-small-size`、`--nutui-empty-background-color` 已移除，请改用对应尺寸变量；组件本身为透明背景，展示区域背景由外层容器（如 `Cell`）控制。
 - **`status` 枚举变更（不兼容）**：
   - 内置 8 种业务场景：`network` / `comment` / `search` / `shop` / `address` / `order` / `favor` / `cart`。
   - 移除 `empty`、`error`；默认值由 `empty` 调整为 `network`。
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md
index 30060a3ca9..47e8cd2b8e 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md
@@ -70,7 +70,7 @@ npm install @nutui/nutui-react-taro
 - **Theme Variable Updates**:
   - Added `--nutui-empty-title-color`, `--nutui-empty-description-color`, and per-size variables (e.g. `--nutui-empty-full-image-size`).
   - Font sizes default to `$font-size-*` theme tokens; line heights use `$line-height-*` when available (e.g. 24px, 20px), otherwise design-spec px values (e.g. 22px, 32px).
-  - Legacy `--nutui-empty-image-size` and `--nutui-empty-image-small-size` have been removed; use per-size variables instead.
+  - Legacy `--nutui-empty-image-size`, `--nutui-empty-image-small-size`, and `--nutui-empty-background-color` have been removed; use per-size variables instead. The component itself is transparent; use an outer container (e.g. `Cell`) for display backgrounds.
 - **`status` Enum Breaking Change**:
   - 8 built-in scenarios: `network` / `comment` / `search` / `shop` / `address` / `order` / `favor` / `cart`.
   - Removed `empty` and `error`; default changed from `empty` to `network`.
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md
index 0aa5e3a461..c942fe3ad1 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v3.md
@@ -70,7 +70,7 @@ npm install @nutui/nutui-react-taro
 - **主题变量调整**：
   - 新增 `--nutui-empty-title-color`、`--nutui-empty-description-color` 及分尺寸变量（如 `--nutui-empty-full-image-size`）。
   - 字号默认引用 `$font-size-*` 主题 token；行高有对应 token 时引用 `$line-height-*`（如 24px、20px），其余按设计稿 px 值（如 22px、32px）。
-  - 旧变量 `--nutui-empty-image-size`、`--nutui-empty-image-small-size` 已移除，请改用对应尺寸变量。
+  - 旧变量 `--nutui-empty-image-size`、`--nutui-empty-image-small-size`、`--nutui-empty-background-color` 已移除，请改用对应尺寸变量；组件本身为透明背景，展示区域背景由外层容器（如 `Cell`）控制。
 - **`status` 枚举变更（不兼容）**：
   - 内置 8 种业务场景：`network` / `comment` / `search` / `shop` / `address` / `order` / `favor` / `cart`。
   - 移除 `empty`、`error`；默认值由 `empty` 调整为 `network`。
diff --git a/src/styles/variables-daojia.scss b/src/styles/variables-daojia.scss
index 5c21874000..982b6bada4 100644
--- a/src/styles/variables-daojia.scss
+++ b/src/styles/variables-daojia.scss
@@ -1410,8 +1410,6 @@ $segmented-icon-margin-right: var(--nutui-segmented-icon-margin-right,
 
 // empty（✅）
 $empty-padding: var(--nutui-empty-padding, 20px) !default;
-$empty-background-color: var(--nutui-empty-background-color,
-    $color-background-overlay) !default;
 $empty-title-color: var(--nutui-empty-title-color, $color-title) !default;
 $empty-description-color: var(--nutui-empty-description-color, $color-text-help) !default;
 $empty-full-padding-top: var(--nutui-empty-full-padding-top, 160px) !default;
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index 3737e8a0d7..699c9d6666 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -2365,7 +2365,6 @@ $segmented-icon-margin-right: var(
 // empty（✅）
 
 $empty-padding: var(--nutui-empty-padding, 20px) !default;
-$empty-background-color: var(--nutui-empty-background-color, $color-background-overlay) !default;
 $empty-title-color: var(--nutui-empty-title-color, $color-title) !default;
 $empty-description-color: var(--nutui-empty-description-color, $color-text-help) !default;
 
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index 8fcf690253..a39df2f708 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -2440,7 +2440,6 @@ $searchbar-input-text-align: var(
 // empty（✅）
 
 $empty-padding: var(--nutui-empty-padding, 20px) !default;
-$empty-background-color: var(--nutui-empty-background-color, $color-background-overlay) !default;
 $empty-title-color: var(--nutui-empty-title-color, $color-title) !default;
 $empty-description-color: var(--nutui-empty-description-color, $color-text-help) !default;
 $empty-full-padding-top: var(--nutui-empty-full-padding-top, 160px) !default;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index bd52a1b7fc..fecc48c7b4 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2278,72 +2278,32 @@ $segmented-icon-margin-right: var(
 
 // empty（✅）
 $empty-padding: var(--nutui-empty-padding, scale-px(20px) ) !default;
-$empty-background-color: var(
-  --nutui-empty-background-color,
-  $color-background-overlay
-) !default;
 $empty-title-color: var(--nutui-empty-title-color, $color-title) !default;
 $empty-description-color: var(--nutui-empty-description-color, $color-text-help) !default;
 
 // 全屏型
 $empty-full-padding-top: var(--nutui-empty-full-padding-top, scale-px(160px)) !default;
 $empty-full-image-size: var(--nutui-empty-full-image-size, scale-px(160px)) !default;
-$empty-full-title-font-size: var(
-  --nutui-empty-full-title-font-size,
-  $font-size-md
-) !default;
-$empty-full-title-line-height: var(
-  --nutui-empty-full-title-line-height,
-  $line-height-xxl
-) !default;
-$empty-full-description-font-size: var(
-  --nutui-empty-full-description-font-size,
-  $font-size-base
-) !default;
-$empty-full-description-line-height: var(
-  --nutui-empty-full-description-line-height,
-  scale-font-px(22px)
-) !default;
-$empty-full-actions-margin-top: var(
-  --nutui-empty-full-actions-margin-top,
-  scale-px(8px)
-) !default;
+$empty-full-title-font-size: var(--nutui-empty-full-title-font-size, $font-size-md) !default;
+$empty-full-title-line-height: var(--nutui-empty-full-title-line-height, $line-height-xxl) !default;
+$empty-full-description-font-size: var(--nutui-empty-full-description-font-size, $font-size-base) !default;
+$empty-full-description-line-height: var(--nutui-empty-full-description-line-height, scale-font-px(22px)) !default;
+$empty-full-actions-margin-top: var(--nutui-empty-full-actions-margin-top, scale-px(8px)) !default;
 
 // 半屏型
 $empty-half-image-size: var(--nutui-empty-half-image-size, scale-px(80px)) !default;
-$empty-half-title-font-size: var(
-  --nutui-empty-half-title-font-size,
-  $font-size-s
-) !default;
-$empty-half-title-line-height: var(
-  --nutui-empty-half-title-line-height,
-  scale-font-px(22px)
-) !default;
-$empty-half-description-font-size: var(
-  --nutui-empty-half-description-font-size,
-  $font-size-m
-) !default;
-$empty-half-description-line-height: var(
-  --nutui-empty-half-description-line-height,
-  $line-height-2xl
-) !default;
-$empty-half-actions-margin-top: var(
-  --nutui-empty-half-actions-margin-top,
-  scale-px(8px)
-) !default;
+$empty-half-title-font-size: var(--nutui-empty-half-title-font-size, $font-size-s) !default;
+$empty-half-title-line-height: var(--nutui-empty-half-title-line-height, scale-font-px(22px)) !default;
+$empty-half-description-font-size: var(--nutui-empty-half-description-font-size, $font-size-m) !default;
+$empty-half-description-line-height: var(--nutui-empty-half-description-line-height, $line-height-2xl) !default;
+$empty-half-actions-margin-top: var(--nutui-empty-half-actions-margin-top, scale-px(8px)) !default;
 
 // 局部型
 $empty-partial-padding: var(--nutui-empty-partial-padding, scale-px(0px) scale-px(16px)) !default;
 $empty-partial-image-size: var(--nutui-empty-partial-image-size, scale-px(32px)) !default;
 $empty-partial-content-gap: var(--nutui-empty-partial-content-gap, scale-px(8px)) !default;
-$empty-partial-description-font-size: var(
-  --nutui-empty-partial-description-font-size,
-  $font-size-m
-) !default;
-$empty-partial-description-line-height: var(
-  --nutui-empty-partial-description-line-height,
-  scale-font-px(32px)
-) !default;
+$empty-partial-description-font-size: var(--nutui-empty-partial-description-font-size, $font-size-m) !default;
+$empty-partial-description-line-height: var(--nutui-empty-partial-description-line-height, scale-font-px(32px)) !default;
 
 // cascader（✅）
 $cascader-font-size: var(--nutui-cascader-font-size, $font-size-base) !default;

From ec5260853044262f662da2a8a1aa661e4d5e171e Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 16 Jun 2026 19:34:27 +0800
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0demo=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/empty/demos/taro/demo7.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/empty/demos/taro/demo7.tsx b/src/packages/empty/demos/taro/demo7.tsx
index 043e9df802..b18dddfd69 100644
--- a/src/packages/empty/demos/taro/demo7.tsx
+++ b/src/packages/empty/demos/taro/demo7.tsx
@@ -4,7 +4,7 @@ import { Cell, Empty, pxTransform } from '@nutui/nutui-react-taro'
 const Demo7 = () => {
   return (
     <Cell>
-      <Empty description="内容描述内容描述" imageSize={pxTransform(80)} />
+      <Empty description="内容描述内容描述" imageSize={pxTransform(100)} />
     </Cell>
   )
 }