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 01/11] =?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 - -/** 站内容器的 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 02/11] =?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` | 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` | 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` | 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` | 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 03/11] =?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 04/11] =?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 05/11] =?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 06/11] =?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`] = `
empty
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( + + ) + expect(getByText('网络连接已断开')).toHaveClass('nut-empty-title') +}) + +test('should use default half size and network status image', () => { + const { container } = render() + 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() - // 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() - // 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() + expect(container.querySelector('.nut-empty-image img')).toHaveAttribute( + 'src', + EMPTY_STATUS_IMAGES.search + ) }) + +test('should render full size modifier class', () => { + const { container } = render( + + ) + 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( + + ) + 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( { 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( { 'https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png' ) }) + +test('should render children correctly', () => { + const { getByTestId } = render( + + + + ) + 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 = () => { {translated.c38a08ee} - {translated.c38a08ef} + {translated.c38a08ed} {translated.b840c88f} + {translated.c38a08ef} + {translated.a74a1fd4} {translated['8dab2f66']} 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 = () => {

{translated.c38a08ee}

-

{translated.c38a08ef}

+

{translated.c38a08ed}

{translated.b840c88f}

+

{translated.c38a08ef}

+

{translated.a74a1fd4}

{translated['8dab2f66']}

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 ( - <> - - - - + 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 ( 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 + return } 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('0') @@ -11,15 +54,16 @@ const Demo4 = () => { setTabvalue(paneKey) }} > - - - - - - - - - + {statusList.map((item, index) => ( + + + + ))} ) } 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 ( - +
+ ) + + const titleBlock = + typeof title === 'string' && title ? ( +
{title}
+ ) : ( + title + ) + + const descriptionBlock = + typeof description === 'string' ? ( +
{description}
+ ) : ( + description + ) return ( -
-
- {imageNode} -
- {typeof title === 'string' && title ? ( -
{title}
- ) : ( - title - )} - {typeof description === 'string' ? ( -
{description}
+
+ {size === 'partial' ? ( +
+ {imageBlock} +
+ {titleBlock} + {descriptionBlock} +
+
) : ( - description + <> + {imageBlock} + {titleBlock} + {descriptionBlock} + )} {actions.length ? ( -
+
{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 = { + 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 - status: EmptyState + size: EmptySize + status: EmptyStatus actions: Array } 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 07/11] =?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 ( - Toast.show('正在刷新...'), - }, - ]} - /> + + Toast.show('正在刷新...'), + }, + ]} + /> + ) } 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 ( - Toast.show('逛逛秒杀'), - }, - { - text: '看看关注', - type: 'primary', - onClick: () => Toast.show('看看关注'), - }, - ]} - /> + + Toast.show('逛逛秒杀'), + }, + { + text: '看看关注', + type: 'primary', + onClick: () => Toast.show('看看关注'), + }, + ]} + /> + ) } 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 + return ( + + + + ) } 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 ( - - } - /> + + + } + /> + ) } 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 ( - -
- -
- + + +
+ +
+ + ) } 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 + return ( + + + + ) } 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 ( <> - - Toast.show('empty-demo1', { title: '正在刷新...', icon: 'none' }), - }, - ]} - /> + + + Toast.show('empty-demo1', { + title: '正在刷新...', + icon: 'none', + }), + }, + ]} + /> + ) 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 ( <> - - Toast.show('empty-demo2', { title: '逛逛秒杀', icon: 'none' }), - }, - { - text: '看看关注', - type: 'primary', - onClick: () => - Toast.show('empty-demo2', { title: '看看关注', icon: 'none' }), - }, - ]} - /> + + + Toast.show('empty-demo2', { title: '逛逛秒杀', icon: 'none' }), + }, + { + text: '看看关注', + type: 'primary', + onClick: () => + Toast.show('empty-demo2', { title: '看看关注', icon: 'none' }), + }, + ]} + /> + ) 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 + return ( + + + + ) } 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 ( - - } - /> + + + } + /> + ) } 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 ( - - - - - + + + + + + + ) } 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 + return ( + + + + ) } 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. - 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` 使用上表对应变量。 - 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` 使用上表对应变量。 - 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` 使用上表對應變量。 - 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 08/11] =?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 ( - + ) } From 8cd485f621f0cada8bf5edac0521b68f56b2bd81 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 23 Jun 2026 18:03:12 +0800 Subject: [PATCH 09/11] =?UTF-8?q?refactor(popover):=20v16=E9=80=82?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- pnpm-lock.yaml | 193 ++++++++++++++---- src/packages/configprovider/types.ts | 12 ++ .../popover/__tests__/popover.spec.tsx | 72 +++++-- src/packages/popover/demo.taro.tsx | 6 +- src/packages/popover/demo.tsx | 6 +- src/packages/popover/demos/h5/demo1.tsx | 66 ++++-- src/packages/popover/demos/h5/demo2.tsx | 2 - src/packages/popover/demos/h5/demo3.tsx | 2 +- src/packages/popover/demos/h5/demo4-1.tsx | 1 - src/packages/popover/demos/h5/demo4.tsx | 6 +- src/packages/popover/demos/h5/demo5.tsx | 1 - src/packages/popover/demos/h5/demo7.tsx | 1 - src/packages/popover/demos/h5/demo8.tsx | 1 - src/packages/popover/demos/taro/demo1.tsx | 68 ++++-- src/packages/popover/demos/taro/demo2.tsx | 2 - src/packages/popover/demos/taro/demo3.tsx | 2 +- src/packages/popover/demos/taro/demo4-1.tsx | 1 - src/packages/popover/demos/taro/demo4.tsx | 6 +- src/packages/popover/demos/taro/demo5.tsx | 1 - src/packages/popover/doc.en-US.md | 40 ++-- src/packages/popover/doc.md | 36 +++- src/packages/popover/doc.taro.md | 45 ++-- src/packages/popover/doc.zh-TW.md | 38 +++- src/packages/popover/popover.scss | 135 +++++++----- src/packages/popover/popover.taro.tsx | 72 ++++--- src/packages/popover/popover.tsx | 70 ++++--- .../doc/docs/react/migrate-from-v3.en-US.md | 26 +++ .../doc/docs/react/migrate-from-v3.md | 26 +++ .../doc/docs/taro/migrate-from-v3.en-US.md | 26 +++ .../doc/docs/taro/migrate-from-v3.md | 26 +++ src/sites/theme/components/header/header.scss | 2 +- src/styles/variables-daojia.scss | 48 ++++- src/styles/variables-jmapp.scss | 39 +++- src/styles/variables-jrkf.scss | 39 +++- src/styles/variables.scss | 58 +++++- src/types/spec/popover/base.ts | 5 + 37 files changed, 877 insertions(+), 307 deletions(-) diff --git a/package.json b/package.json index 944ce775c4..a8e0e842fe 100644 --- a/package.json +++ b/package.json @@ -107,8 +107,8 @@ }, "dependencies": { "@babel/runtime": "^7.23.9", - "@nutui/icons-react": "^3.0.2-beta.5", - "@nutui/icons-react-taro": "^3.0.2-beta.3", + "@nutui/icons-react": "^3.0.2-beta.6", + "@nutui/icons-react-taro": "3.0.2-beta.6", "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2", "@nutui/lottie-miniprogram": "^1.0.2", "@nutui/touch-emulator": "^1.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index adb373abe7..52f4b10f7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,11 +21,11 @@ importers: specifier: ^7.23.9 version: 7.29.7 '@nutui/icons-react': - specifier: ^3.0.2-beta.5 - version: 3.0.2-beta.5 + specifier: ^3.0.2-beta.6 + version: 3.0.2-beta.6 '@nutui/icons-react-taro': - specifier: ^3.0.2-beta.3 - version: 3.0.2-cpp.3.beta.9 + specifier: 3.0.2-beta.6 + version: 3.0.2-beta.6 '@nutui/jdesign-icons-react-taro': specifier: 1.0.6-beta.2 version: 1.0.6-beta.2 @@ -116,22 +116,22 @@ importers: version: 1.15.40(@swc/helpers@0.5.23) '@tarojs/components': specifier: 4.2.0 - version: 4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) + version: 4.2.0(@tarojs/helper@4.2.0(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) '@tarojs/plugin-platform-alipay': specifier: 4.2.0 - version: 4.2.0(@tarojs/service@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0) + version: 4.2.0(@tarojs/service@4.2.0(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0) '@tarojs/plugin-platform-jd': specifier: 4.2.0 - version: 4.2.0(@tarojs/service@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0) + version: 4.2.0(@tarojs/service@4.2.0(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0) '@tarojs/plugin-platform-weapp': specifier: 4.2.0 - version: 4.2.0(@tarojs/service@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0) + version: 4.2.0(@tarojs/service@4.2.0(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0) '@tarojs/react': specifier: 4.2.0 version: 4.2.0(react@18.3.1) '@tarojs/taro': specifier: 4.2.0 - version: 4.2.0(@tarojs/components@4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) + version: 4.2.0(@tarojs/components@4.2.0(@tarojs/helper@4.2.0(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(@tarojs/helper@4.2.0(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) '@testing-library/jest-dom': specifier: ^6.4.2 version: 6.9.1 @@ -2560,14 +2560,14 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} - '@nutui/icons-react-taro@3.0.2-cpp.3.beta.9': - resolution: {integrity: sha512-YuFl5YwfgatCGBTCBmQhi4uv8gDLh8Fs4dCjTyb7TWRaeljRR9Suo9v5OZAPi1mdHfF21hu3WSWczJhvwYJJ6Q==} + '@nutui/icons-react-taro@3.0.2-beta.6': + resolution: {integrity: sha512-h05EJjjgn8HuEWVAgXUkXfnUWuiRQvmhdmay1walkAKfm1OsJHpxWBaWe9wjxQew/MKVrkU4tw+YlSHs0eaWcQ==} '@nutui/icons-react@1.0.5': resolution: {integrity: sha512-0TYl3Fk+sVz95DKqn/7isYAvaK5YGnaBwMMib4rqYLoqi9GGFwgU9rp2hYXu/X5IYdWgshj0xiuGMK75/vUYbQ==} - '@nutui/icons-react@3.0.2-beta.5': - resolution: {integrity: sha512-V822q4Q2Refx/PvyBA+W8lZWXhwl+ZpNbqtorckqS7FZaKi5yKY94bd8iwO/U+Q60pUdHPzjScrGMpmZPGTeFQ==} + '@nutui/icons-react@3.0.2-beta.6': + resolution: {integrity: sha512-zSp+qxzXcwrdkGI2ZRCjcGHOrJmiB4y/lTeG8QjI+O4XN6OeRUJ/rz9qz0VsWTFCmwP/bjVckmSjcgR850ak3g==} '@nutui/jdesign-icons-react-taro@1.0.6-beta.2': resolution: {integrity: sha512-2Scz5c9o14gA7Mw5JdiEkc/KEbNlNWMcJMuqVyFVipYeeYN/118N/fvHVpocmJviN0Gc4P+u3ZB3dIQSA2j4Fw==} @@ -2691,48 +2691,56 @@ packages: engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] + libc: [glibc] '@oxc-parser/binding-linux-arm64-musl@0.125.0': resolution: {integrity: sha512-eIXyzpA12/+maKjMSsXdHfpzwQcoRfzokT+/ZhVEo6u/9RcXQrZZmZ70MmmJqwVcLez6U4ScjB/eiYlsEs7p0g==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] + libc: [musl] '@oxc-parser/binding-linux-ppc64-gnu@0.125.0': resolution: {integrity: sha512-w7ir5OuqSJUKLadmsSAWwTNso/ZGem2bPT/1LSU7l+ecmKPyegIvU+wzY0ADhZ/t/goaedqyp24SDRxyLxO9zg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] + libc: [glibc] '@oxc-parser/binding-linux-riscv64-gnu@0.125.0': resolution: {integrity: sha512-2KPTfWorcW8RNE8aEMHKbPSjHDBjFVYqg8nSLRBp7pe7VBqHsmkO9jpK8YmaYA5d5GcUy+J++5O4EgxkrQBEtw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] + libc: [glibc] '@oxc-parser/binding-linux-riscv64-musl@0.125.0': resolution: {integrity: sha512-Vsl8dmQdKtDsQiDPHP5VFjXOuVGcZQcziYMkU/yPnlaKHMqoX/q+bxt7K+BwResi9Cc8pnZ6oYGTgPcjAtt5QQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] + libc: [musl] '@oxc-parser/binding-linux-s390x-gnu@0.125.0': resolution: {integrity: sha512-HwY5kuM818r/kHdHG2TZqzqxyF7fz90prPg85R/2VmgRWk8cMyGZo+8BNZDQAMJ6aGSTRvn2sdGXv3sZ5bsUWw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] + libc: [glibc] '@oxc-parser/binding-linux-x64-gnu@0.125.0': resolution: {integrity: sha512-o7k6+xAI2pIkjBsCqM0elI4q+qY/3TexH6cpIlGm+nJze1tvx7QEHCKdiy6wnRacFvUYmySEZ5hWFBc9MbxrIA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] + libc: [glibc] '@oxc-parser/binding-linux-x64-musl@0.125.0': resolution: {integrity: sha512-vksRynFD6vytE1sDZCaeIk6y6rCsq0a18T4kcXbfGHBq2q/qSyDogWLk3A3S3hl/ikNfse7yrEwAuQ8ldIJeAg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] + libc: [musl] '@oxc-parser/binding-openharmony-arm64@0.125.0': resolution: {integrity: sha512-AAtg4pnKvrKsay2ldZZRY98ALFBOgbyy3Gyxo658z6aecM0Zr5mI9BOHRCchSVKUHqMqmjhCA4wIdZvz02VrAw==} @@ -3006,66 +3014,79 @@ packages: resolution: {integrity: sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.60.4': resolution: {integrity: sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.60.4': resolution: {integrity: sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.60.4': resolution: {integrity: sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-loong64-gnu@4.60.4': resolution: {integrity: sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-loong64-musl@4.60.4': resolution: {integrity: sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw==} cpu: [loong64] os: [linux] + libc: [musl] '@rollup/rollup-linux-ppc64-gnu@4.60.4': resolution: {integrity: sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-ppc64-musl@4.60.4': resolution: {integrity: sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A==} cpu: [ppc64] os: [linux] + libc: [musl] '@rollup/rollup-linux-riscv64-gnu@4.60.4': resolution: {integrity: sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-musl@4.60.4': resolution: {integrity: sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw==} cpu: [riscv64] os: [linux] + libc: [musl] '@rollup/rollup-linux-s390x-gnu@4.60.4': resolution: {integrity: sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.60.4': resolution: {integrity: sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.60.4': resolution: {integrity: sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-openbsd-x64@4.60.4': resolution: {integrity: sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA==} @@ -3254,60 +3275,70 @@ packages: engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [glibc] '@swc/core-linux-arm64-gnu@1.3.96': resolution: {integrity: sha512-c/IiJ0s1y3Ymm2BTpyC/xr6gOvoqAVETrivVXHq68xgNms95luSpbYQ28rqaZC8bQC8M5zdXpSc0T8DJu8RJGw==} engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [glibc] '@swc/core-linux-arm64-musl@1.15.40': resolution: {integrity: sha512-4z0MgHU+7M0pZDqBN1El7mFXDI1SBwinfcUkAyA4v8QrhOIUOZltySt2aStQLZGrdXVXM4Y4ylfiTC04ED+MoQ==} engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [musl] '@swc/core-linux-arm64-musl@1.3.96': resolution: {integrity: sha512-i5/UTUwmJLri7zhtF6SAo/4QDQJDH2fhYJaBIUhrICmIkRO/ltURmpejqxsM/ye9Jqv5zG7VszMC0v/GYn/7BQ==} engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [musl] '@swc/core-linux-ppc64-gnu@1.15.40': resolution: {integrity: sha512-fLI4iUgeSZu0eRWUXwe6YzPFx9gHbFiPkl8Rp3mJfP8OpNR3nTQCGPvHdDh9xniW7mVvgMY4ni7A4VzqI1KrpA==} engines: {node: '>=10'} cpu: [ppc64] os: [linux] + libc: [glibc] '@swc/core-linux-s390x-gnu@1.15.40': resolution: {integrity: sha512-YqeKMAb7d4nQSGMJQ454IlaCENpzcDqhvBE9+CPfdnYpnUXxd+BSrB6Xk0YjW8UyoEhUj4p6quATCxbsp6J3jg==} engines: {node: '>=10'} cpu: [s390x] os: [linux] + libc: [glibc] '@swc/core-linux-x64-gnu@1.15.40': resolution: {integrity: sha512-7HOuS1iGcme/j/TuL1TfmmLGiMQrjv/GmjyZeydl00FKPtpGXEldwqfI56xgd1YzrzoB2svWjxbGGyQ0TEASxg==} engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [glibc] '@swc/core-linux-x64-gnu@1.3.96': resolution: {integrity: sha512-USdaZu8lTIkm4Yf9cogct/j5eqtdZqTgcTib4I+NloUW0E/hySou3eSyp3V2UAA1qyuC72ld1otXuyKBna0YKQ==} engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [glibc] '@swc/core-linux-x64-musl@1.15.40': resolution: {integrity: sha512-h4kZYHc7dpc9P9u4brRJaS8Pl7tPVHAeiLSzw7T5RfIJgAoSdaCMKzI/2Uay9gFhaw8uyCDl0L5q37r0EpAfIA==} engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [musl] '@swc/core-linux-x64-musl@1.3.96': resolution: {integrity: sha512-QYErutd+G2SNaCinUVobfL7jWWjGTI0QEoQ6hqTp7PxCJS/dmKmj3C5ZkvxRYcq7XcZt7ovrYCTwPTHzt6lZBg==} engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [musl] '@swc/core-win32-arm64-msvc@1.15.40': resolution: {integrity: sha512-+mQgKZXSj6mV38Zh05QaxSjUDmGP/R2JWlXZTDLSPkDzHU6p3GxN9eeSf5dfyDVU86946fmCvSzyl/ucImx8+A==} @@ -3437,6 +3468,7 @@ packages: engines: {node: ^20 || ^22} cpu: [x64] os: [linux] + libc: [glibc] '@tarojs/binding-win32-x64-msvc@4.1.3': resolution: {integrity: sha512-5MO5k+LMP2oEhmvxK1HsDmcNwa33clIO517cpXoev0rj/chGizuJ/lCUVsvIxAW+wRPsigJjyD16hf3F/vt68w==} @@ -3474,6 +3506,10 @@ packages: resolution: {integrity: sha512-ReLy90gUHWS2u2lN2Xl3xO2oD5Q4K190sxiwkOCqTc5+lcfPAgNOOQ/hdVBORjT8ZDdclXSEjqsCDNwMJieAgQ==} engines: {node: ^20 || ^22} + '@tarojs/helper@4.2.0': + resolution: {integrity: sha512-F8D5EbwS/d0Kkh4PWFHhXoM1l1Iy2ZxjsWmXEkUratiq+CktogjQDa87pY+lyPLFsArA8oAd01p7rsQmVSDfoA==} + engines: {node: '>= 18'} + '@tarojs/parse-css-to-stylesheet-android-arm-eabi@0.0.69': resolution: {integrity: sha512-xfn55ehFWjbIzDTu+0QwMkCf8icC7jwAiDm2S7Cv5Og83gSzMUCb76KzEAwgTSTe0wiLrDai2HAhBftpE4V1Qw==} engines: {node: '>= 10'} @@ -3514,24 +3550,28 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [glibc] '@tarojs/parse-css-to-stylesheet-linux-arm64-musl@0.0.69': resolution: {integrity: sha512-bYODGCEx1Ni4EMNuZU95IUPqVZAXsY9gIc5CPSfKQ2j167Vbeo/gskQk/uNVjmnYJ69PplgJ9npylINgLIPIrA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [musl] '@tarojs/parse-css-to-stylesheet-linux-x64-gnu@0.0.69': resolution: {integrity: sha512-89f03s+txGJ1c8Zc6Ib4qTAP4YhfFbVFq29XExqbC7eGvpQl5DeOtwonO5DBwMc7lA+LG4b1Q4CMXE3qodn2eA==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [glibc] '@tarojs/parse-css-to-stylesheet-linux-x64-musl@0.0.69': resolution: {integrity: sha512-vyewIf1KysXYNIJdkzc9JSPguTG9zD65Belk3H186mLR18KtsvrqNqlWnP8kKfduF4ixh6qt0F2PkKbeI9PZvg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [musl] '@tarojs/parse-css-to-stylesheet-win32-x64-msvc@0.0.69': resolution: {integrity: sha512-CHKlVjAiSAZTFNV8GkfXV88Jy9yyFSvKBAO3++l2KSQUBUWmPX775FbH+god2BOLf5SfAXRPd0HVAEK9qNeHXQ==} @@ -3571,24 +3611,28 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [glibc] '@tarojs/plugin-doctor-linux-arm64-musl@0.0.13': resolution: {integrity: sha512-V1HnFITOLgHVyQ+OCa1oPFKOtGFRtP91vlbUGfOwMA4GeOVw9g28W/hfTyucTCkfZWlrssLehgW6L2AGAMXh2w==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [musl] '@tarojs/plugin-doctor-linux-x64-gnu@0.0.13': resolution: {integrity: sha512-oetfzBW60uenPBBF4/NE6Mf0Iwkw1YGqIIBiN++aVQynbWrmMzWBsW8kleZ5vN1npxI9aud9EfRU1uM37DrG2A==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [glibc] '@tarojs/plugin-doctor-linux-x64-musl@0.0.13': resolution: {integrity: sha512-OdIF/kFwwM0kQPDnpkanhvfWRaAI6EtDmpM9rQA/Lu2QcJq86w5d7X/WSN0U2xF1nialAUrfl79NyIaEzp4Fcw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [musl] '@tarojs/plugin-doctor-win32-ia32-msvc@0.0.13': resolution: {integrity: sha512-nIbG2SliRhRwACLa1kNMskcfjsihp+3tZQMAxl+LoYUq6JRaWgP3vH2nHkDyZHTCheBTDtAaupqXWrYF3w+U6g==} @@ -3740,6 +3784,10 @@ packages: resolution: {integrity: sha512-GKQ/oMAGuUSXbn79yO48AkYW7mmQJ5YQm/QU2Tsn0cOZbcH9JMR54GnoqQk/LywbrrMzr3ojdGvxxJ3nN16RRw==} engines: {node: ^20 || ^22} + '@tarojs/runner-utils@4.2.0': + resolution: {integrity: sha512-M79iDSKjO3FNBBWfNiFlaihLsHGSQaXjSCglH0d9G1a/YWx2hfKtZaT67ca86YkfR/glz6ZBtIY5PTNQlED8AA==} + engines: {node: '>= 18'} + '@tarojs/runtime@4.1.3': resolution: {integrity: sha512-fJ0Jgi2243HrlFwAczufDgkD5+nCJpoQeCm4+0qnPCU7t+q+CFL7MG2PTfYdBOL3QbQwtB4NBeDcMt5E886ubQ==} engines: {node: ^20 || ^22} @@ -3752,6 +3800,10 @@ packages: resolution: {integrity: sha512-MYGj/H9TXh/v+ult/N/oNlXokD/QqNTl1UzTOpt+KyeDsXlmkOfunqE7v85Y2VYJVmraosCjqGrs2qyl8yctyA==} engines: {node: ^20 || ^22} + '@tarojs/service@4.2.0': + resolution: {integrity: sha512-shUXAkxUNjrlgucU5yP4S1ZZnKFQmAvlnpDiignCF1dUvsDB+7Q8I+XTwI6JuK39HcCXxs3xIgYeIsBEHrIbZw==} + engines: {node: '>= 18'} + '@tarojs/shared@4.1.3': resolution: {integrity: sha512-OWLojvDJGX7+Jd6UIllCZMr5ogOFKgWeI7g5QH0Ebv0c6BNoX5q2zY7zNPMbl3mqHlFnsmoHbB5PPTFCWJhnGw==} engines: {node: ^20 || ^22} @@ -4413,51 +4465,61 @@ packages: resolution: {integrity: sha512-zJc0H99FEPoFfSrNpa91HYfxzfAJCr502oxNK1cfdC9hlaFI43RT+JFCann9JUgZmLzzntChHyn13Sgn9ljHNg==} cpu: [arm64] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-arm64-musl@1.12.2': resolution: {integrity: sha512-KQ3Lki6l+Pz1k/eBipN41ES+YUK30beLGb9YqcB1O542cyLCNE6GaxrfcY3T6EezmGGk84wb5XyO9loTM9tkcA==} cpu: [arm64] os: [linux] + libc: [musl] '@unrs/resolver-binding-linux-loong64-gnu@1.12.2': resolution: {integrity: sha512-3SJGEh1DborhG6pyxvhPzCT4bbSIVihsvgJc13P1bHG7KLdNDaF9T3gsTwFc7Jw/5Y5/iWOjkEx7Zy0NvCGX3Q==} cpu: [loong64] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-loong64-musl@1.12.2': resolution: {integrity: sha512-jiuG/Obbel7uw1PwHNFfrkiKhLAF6mnyZ6aWlOAVN9WqKm8v0OFGnciJIHu8+CMvXLQ8AD51LPzAoUfT21D5Ew==} cpu: [loong64] os: [linux] + libc: [musl] '@unrs/resolver-binding-linux-ppc64-gnu@1.12.2': resolution: {integrity: sha512-q7xRvVpmcfeL+LlZg8Pbbo6QaTZwDU5BaGZbwfhkEsXJn3Was8xYfE0RBH266xZt0rM6B7i8xAYIvjthuUIWHg==} cpu: [ppc64] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-riscv64-gnu@1.12.2': resolution: {integrity: sha512-0CVdx6lcnT3Q9inOH8tsMIOJ6ImndllMjqJHg8RLVdB7Vq4SfkEXl9mCSsVNuNA4MCYycRicCUxPCabVHJRr6A==} cpu: [riscv64] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-riscv64-musl@1.12.2': resolution: {integrity: sha512-iOwlRo9vnp6R6ohHQS11n0NnfdXx/omhkocmIfaPRpQhKZ+3BDMkkdRVh53qjkFkpPddf+FETA28NwGN7l5l+w==} cpu: [riscv64] os: [linux] + libc: [musl] '@unrs/resolver-binding-linux-s390x-gnu@1.12.2': resolution: {integrity: sha512-HYJtLfXq94q8iZNFT1lknx258wlkkWhZeUXJRqzKBBUJ00CvZ+N33zgbCqimLjsyw5Va6uUxhVa12mI+kaveEw==} cpu: [s390x] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-x64-gnu@1.12.2': resolution: {integrity: sha512-mPsUhunKKDih5O96Y6enDQyHc1SqBPlY1E/SfMWDM3EdJ95Z9CArPeCVwCCqbP45ljvivdEk8Fxn+SIb1rDAJQ==} cpu: [x64] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-x64-musl@1.12.2': resolution: {integrity: sha512-azrt6+5ydLd8Vt210AAFis/lZevSfPw93EJRIJG+xPu4WCJ8K0kppCTpMyLPcKT7H15M4Jnt2tMp5bOvCkRC6A==} cpu: [x64] os: [linux] + libc: [musl] '@unrs/resolver-binding-openharmony-arm64@1.12.2': resolution: {integrity: sha512-YZ9hP4O0X9PQb8eO980qmLNGH4zT3I9+SZTdt0Pr0YyuGQhYKoOZkV02VzrzyOZJ5xIJ3UFIenKkUkGg8GjgWQ==} @@ -8986,24 +9048,28 @@ packages: engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [glibc] lightningcss-linux-arm64-musl@1.32.0: resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [musl] lightningcss-linux-x64-gnu@1.32.0: resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [glibc] lightningcss-linux-x64-musl@1.32.0: resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [musl] lightningcss-win32-arm64-msvc@1.32.0: resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==} @@ -15454,11 +15520,11 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.20.1 - '@nutui/icons-react-taro@3.0.2-cpp.3.beta.9': {} + '@nutui/icons-react-taro@3.0.2-beta.6': {} '@nutui/icons-react@1.0.5': {} - '@nutui/icons-react@3.0.2-beta.5': {} + '@nutui/icons-react@3.0.2-beta.6': {} '@nutui/jdesign-icons-react-taro@1.0.6-beta.2': {} @@ -16321,12 +16387,12 @@ snapshots: - webpack-chain - webpack-dev-server - '@tarojs/components@4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15))': + '@tarojs/components@4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15))': dependencies: '@stencil/core': 2.22.3 '@tarojs/runtime': 4.2.0 '@tarojs/shared': 4.2.0 - '@tarojs/taro': 4.2.0(@tarojs/components@4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) + '@tarojs/taro': 4.2.0(@tarojs/components@4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) classnames: 2.5.1 hammerjs: 2.0.8 hls.js: 1.6.16 @@ -16344,12 +16410,12 @@ snapshots: - webpack-chain - webpack-dev-server - '@tarojs/components@4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15))': + '@tarojs/components@4.2.0(@tarojs/helper@4.2.0(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15))': dependencies: '@stencil/core': 2.22.3 '@tarojs/runtime': 4.2.0 '@tarojs/shared': 4.2.0 - '@tarojs/taro': 4.2.0(@tarojs/components@4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) + '@tarojs/taro': 4.2.0(@tarojs/components@4.2.0(@tarojs/helper@4.2.0(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(@tarojs/helper@4.2.0(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) classnames: 2.5.1 hammerjs: 2.0.8 hls.js: 1.6.16 @@ -16394,6 +16460,33 @@ snapshots: - '@swc/helpers' - supports-color + '@tarojs/helper@4.2.0(@swc/helpers@0.5.23)': + dependencies: + '@babel/core': 7.29.7 + '@babel/generator': 7.29.7 + '@babel/parser': 7.29.7 + '@babel/traverse': 7.29.7 + '@babel/types': 7.29.7 + '@swc/core': 1.3.96(@swc/helpers@0.5.23) + '@swc/register': 0.1.10(@swc/core@1.3.96(@swc/helpers@0.5.23)) + ansi-escapes: 4.3.2 + chalk: 4.1.2 + chokidar: 3.6.0 + cross-spawn: 7.0.6 + debug: 4.4.3(supports-color@8.1.1) + dotenv: 16.6.1 + dotenv-expand: 11.0.7 + esbuild: 0.21.5 + find-yarn-workspace-root: 2.0.0 + fs-extra: 11.3.5 + lodash: 4.18.1 + require-from-string: 2.0.2 + resolve: 1.22.12 + supports-hyperlinks: 3.2.0 + transitivePeerDependencies: + - '@swc/helpers' + - supports-color + '@tarojs/parse-css-to-stylesheet-android-arm-eabi@0.0.69': optional: true @@ -16516,9 +16609,9 @@ snapshots: '@tarojs/service': 4.1.3(@swc/helpers@0.5.23) '@tarojs/shared': 4.1.3 - '@tarojs/plugin-platform-alipay@4.2.0(@tarojs/service@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)': + '@tarojs/plugin-platform-alipay@4.2.0(@tarojs/service@4.2.0(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)': dependencies: - '@tarojs/service': 4.1.3(@swc/helpers@0.5.23) + '@tarojs/service': 4.2.0(@swc/helpers@0.5.23) '@tarojs/shared': 4.2.0 '@tarojs/plugin-platform-h5@4.1.3(61616c2ed6adcfead3c5df5cc362031d)': @@ -16591,9 +16684,9 @@ snapshots: '@tarojs/service': 4.1.3(@swc/helpers@0.5.23) '@tarojs/shared': 4.1.3 - '@tarojs/plugin-platform-jd@4.2.0(@tarojs/service@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)': + '@tarojs/plugin-platform-jd@4.2.0(@tarojs/service@4.2.0(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)': dependencies: - '@tarojs/service': 4.1.3(@swc/helpers@0.5.23) + '@tarojs/service': 4.2.0(@swc/helpers@0.5.23) '@tarojs/shared': 4.2.0 '@tarojs/plugin-platform-qq@4.1.3(@tarojs/plugin-platform-weapp@4.1.3(@tarojs/service@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.1.3))(@tarojs/shared@4.1.3)': @@ -16617,9 +16710,9 @@ snapshots: '@tarojs/service': 4.1.3(@swc/helpers@0.5.23) '@tarojs/shared': 4.1.3 - '@tarojs/plugin-platform-weapp@4.2.0(@tarojs/service@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)': + '@tarojs/plugin-platform-weapp@4.2.0(@tarojs/service@4.2.0(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)': dependencies: - '@tarojs/service': 4.1.3(@swc/helpers@0.5.23) + '@tarojs/service': 4.2.0(@swc/helpers@0.5.23) '@tarojs/shared': 4.2.0 '@tarojs/react@4.1.3(react@18.3.1)': @@ -16657,6 +16750,15 @@ snapshots: - '@swc/helpers' - supports-color + '@tarojs/runner-utils@4.2.0(@swc/helpers@0.5.23)': + dependencies: + '@tarojs/helper': 4.2.0(@swc/helpers@0.5.23) + rollup: 3.30.0 + scss-bundle: 3.1.2 + transitivePeerDependencies: + - '@swc/helpers' + - supports-color + '@tarojs/runtime@4.1.3': dependencies: '@tarojs/shared': 4.1.3 @@ -16682,6 +16784,21 @@ snapshots: - '@swc/helpers' - supports-color + '@tarojs/service@4.2.0(@swc/helpers@0.5.23)': + dependencies: + '@tarojs/helper': 4.2.0(@swc/helpers@0.5.23) + '@tarojs/runner-utils': 4.2.0(@swc/helpers@0.5.23) + '@tarojs/shared': 4.2.0 + joi: 17.13.3 + lodash: 4.18.1 + ora: 5.4.1 + resolve: 1.22.12 + tapable: 2.3.3 + webpack-merge: 5.10.0 + transitivePeerDependencies: + - '@swc/helpers' + - supports-color + '@tarojs/shared@4.1.3': {} '@tarojs/shared@4.2.0': {} @@ -16732,10 +16849,10 @@ snapshots: webpack-chain: 6.5.1 webpack-dev-server: 4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) - '@tarojs/taro@4.2.0(@tarojs/components@4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15))': + '@tarojs/taro@4.2.0(@tarojs/components@4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15))': dependencies: '@tarojs/api': 4.2.0(@tarojs/runtime@4.2.0)(@tarojs/shared@4.2.0) - '@tarojs/components': 4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) + '@tarojs/components': 4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) '@tarojs/helper': 4.1.3(@swc/helpers@0.5.23) '@tarojs/runtime': 4.2.0 '@tarojs/shared': 4.2.0 @@ -16743,28 +16860,28 @@ snapshots: postcss: 8.5.15 optionalDependencies: '@types/react': 18.3.29 - html-webpack-plugin: 5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) - rollup: 4.60.4 - webpack: 5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15) + html-webpack-plugin: 5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) + rollup: 3.30.0 + webpack: 5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15) webpack-chain: 6.5.1 - webpack-dev-server: 4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) + webpack-dev-server: 4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) - '@tarojs/taro@4.2.0(@tarojs/components@4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15))': + '@tarojs/taro@4.2.0(@tarojs/components@4.2.0(@tarojs/helper@4.2.0(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(@tarojs/helper@4.2.0(@swc/helpers@0.5.23))(@tarojs/shared@4.2.0)(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15))': dependencies: '@tarojs/api': 4.2.0(@tarojs/runtime@4.2.0)(@tarojs/shared@4.2.0) - '@tarojs/components': 4.2.0(@tarojs/helper@4.1.3(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@3.30.0)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) - '@tarojs/helper': 4.1.3(@swc/helpers@0.5.23) + '@tarojs/components': 4.2.0(@tarojs/helper@4.2.0(@swc/helpers@0.5.23))(@types/react@18.3.29)(html-webpack-plugin@5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(postcss@8.5.15)(rollup@4.60.4)(webpack-chain@6.5.1)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) + '@tarojs/helper': 4.2.0(@swc/helpers@0.5.23) '@tarojs/runtime': 4.2.0 '@tarojs/shared': 4.2.0 '@types/postcss-url': 10.0.4 postcss: 8.5.15 optionalDependencies: '@types/react': 18.3.29 - html-webpack-plugin: 5.6.7(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) - rollup: 3.30.0 - webpack: 5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15) + html-webpack-plugin: 5.6.7(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) + rollup: 4.60.4 + webpack: 5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15) webpack-chain: 6.5.1 - webpack-dev-server: 4.15.2(webpack@5.91.0(@swc/core@1.3.96(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) + webpack-dev-server: 4.15.2(webpack@5.91.0(@swc/core@1.15.40(@swc/helpers@0.5.23))(lightningcss@1.32.0)(postcss@8.5.15)) '@tarojs/vite-runner@4.1.3(@swc/helpers@0.5.23)(@tarojs/runtime@4.1.3)(@types/babel__core@7.20.5)(jiti@2.7.0)(postcss@8.5.15)(rollup@3.30.0)(terser@5.48.0)(tsx@4.22.4)(typescript@5.9.3)(vite@5.4.21(@types/node@22.19.19)(less@3.13.1)(lightningcss@1.32.0)(sass@1.77.6)(stylus@0.64.0)(terser@5.48.0))': dependencies: diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts index 73bfd07a94..708113da95 100644 --- a/src/packages/configprovider/types.ts +++ b/src/packages/configprovider/types.ts @@ -647,6 +647,18 @@ export type NutCSSVariables = | 'nutuiPopoverTextColor' | 'nutuiPopoverDisableColor' | 'nutuiPopoverDividerColor' + | 'nutuiPopoverPaddingHorizontal' + | 'nutuiPopoverPaddingVertical' + | 'nutuiPopoverHeight' + | 'nutuiPopoverIconSize' + | 'nutuiPopoverIconColor' + | 'nutuiPopoverStatusMaxWidth' + | 'nutuiPopoverDescriptionMaxWidth' + | 'nutuiPopoverActionHotspotSize' + | 'nutuiPopoverLightContentBackgroundColor' + | 'nutuiPopoverLightTextColor' + | 'nutuiPopoverLightIconColor' + | 'nutuiPopoverLightDividerColor' | 'nutuiPopoverPadding' | 'nutuiPopoverItemWidth' | 'nutuiProgressHeight' diff --git a/src/packages/popover/__tests__/popover.spec.tsx b/src/packages/popover/__tests__/popover.spec.tsx index e59417ec2d..3cdab85284 100644 --- a/src/packages/popover/__tests__/popover.spec.tsx +++ b/src/packages/popover/__tests__/popover.spec.tsx @@ -67,12 +67,12 @@ test('render popover content', async () => { test('render popover content dark', async () => { const { container } = render( - + ) const content = document.querySelectorAll('.nut-popover')[0] - expect(content.className).toContain('nut-popover-dark') + expect(content.className).toContain('nut-popover--status') expect(container).toMatchSnapshot() }) @@ -95,30 +95,37 @@ test('render popover position with arrowOffset', async () => { ) - const checkArrowStyles = (location: FullPosition, expectedStyles: string) => { + const checkArrowStyles = ( + location: FullPosition, + expectedStyles: string | null + ) => { rerender( ) content = document.querySelectorAll('.nut-popover-arrow')[0] - expect(content).toHaveAttribute('style', expectedStyles) + if (expectedStyles === null) { + expect(content.getAttribute('style')).toBeNull() + } else { + expect(content).toHaveAttribute('style', expectedStyles) + } } let content = document.querySelectorAll('.nut-popover-arrow')[0] - expect(content).toHaveAttribute('style', 'left: 36px;') - - checkArrowStyles('bottom', 'left: calc(50% + 20px);') - checkArrowStyles('bottom-right', 'right: -4px;') - checkArrowStyles('left', 'top: calc(50% - 20px);') - checkArrowStyles('left-bottom', 'bottom: 36px;') - checkArrowStyles('left-top', 'top: -4px;') - checkArrowStyles('right', 'top: calc(50% - 20px);') - checkArrowStyles('right-bottom', 'bottom: 36px;') - checkArrowStyles('right-top', 'top: -4px;') - checkArrowStyles('top-right', 'right: -4px;') - checkArrowStyles('top-left', 'left: 36px;') - checkArrowStyles('top', 'left: calc(50% + 20px);') + expect(content).toHaveAttribute('style', 'left: 20px;') + + checkArrowStyles('bottom', null) + checkArrowStyles('bottom-right', 'right: 20px;') + checkArrowStyles('left', null) + checkArrowStyles('left-bottom', null) + checkArrowStyles('left-top', null) + checkArrowStyles('right', null) + checkArrowStyles('right-bottom', null) + checkArrowStyles('right-top', null) + checkArrowStyles('top-right', 'right: 20px;') + checkArrowStyles('top-left', 'left: 20px;') + checkArrowStyles('top', null) }) test('render position fixed ', async () => { @@ -187,6 +194,37 @@ test('should not emit select event when the action is disabled', async () => { await waitFor(() => expect(choose).not.toBeCalled()) }) +test('should auto show on mount when autoShow is true', () => { + const open = vi.fn() + render( + + + + ) + expect(open).toBeCalled() +}) + +test('should auto close after duration', () => { + vi.useFakeTimers() + const close = vi.fn() + const click = vi.fn() + render( + + + + ) + vi.advanceTimersByTime(5000) + expect(close).toBeCalled() + expect(click).toBeCalled() + vi.useRealTimers() +}) + test('click event', async () => { const close = vi.fn() const close1 = vi.fn() diff --git a/src/packages/popover/demo.taro.tsx b/src/packages/popover/demo.taro.tsx index 564759f87d..92fdda694b 100644 --- a/src/packages/popover/demo.taro.tsx +++ b/src/packages/popover/demo.taro.tsx @@ -14,7 +14,7 @@ import Demo5 from './demos/taro/demo5' const PopoverDemo = () => { const [translated] = useTranslate({ 'zh-CN': { - title: '基础用法', + title: '气泡类型', title1: '选项配置', title2: '自定义内容+颜色', title3: '位置自定义：多条数据', @@ -22,7 +22,7 @@ const PopoverDemo = () => { title4: '自定义目标元素', }, 'en-US': { - title: 'Basic Usage', + title: 'Bubble Types', title1: 'Option Configuration', title2: 'Custom Content and Color', title3: 'Custom Location: multi datas', @@ -30,7 +30,7 @@ const PopoverDemo = () => { title4: 'Custom Target Element', }, 'zh-TW': { - title: '基礎用法', + title: '氣泡類型', title1: '選項配置', title2: '自定義內容+顏色', title3: '位置自定義：多條資料', diff --git a/src/packages/popover/demo.tsx b/src/packages/popover/demo.tsx index 45ff39609a..00e58bcf59 100644 --- a/src/packages/popover/demo.tsx +++ b/src/packages/popover/demo.tsx @@ -14,7 +14,7 @@ import Demo8 from './demos/h5/demo8' const PopoverDemo = () => { const [translated] = useTranslate({ 'zh-CN': { - title: '基础用法', + title: '气泡类型', title1: '选项配置', title2: '自定义内容+颜色', title3: '位置自定义：多条数据', @@ -24,7 +24,7 @@ const PopoverDemo = () => { fixed: '容器设置 position: fixed', }, 'en-US': { - title: 'Basic Usage', + title: 'Bubble Types', title1: 'Option Configuration', title2: 'Custom Content and Color', title3: 'Custom Location: multi datas', @@ -34,7 +34,7 @@ const PopoverDemo = () => { fixed: 'position: fixed', }, 'zh-TW': { - title: '基礎用法', + title: '氣泡類型', title1: '選項配置', title2: '自定義內容+顏色', title3: '位置自定義：多條資料', diff --git a/src/packages/popover/demos/h5/demo1.tsx b/src/packages/popover/demos/h5/demo1.tsx index eaaecb6c68..2bfeb5afca 100644 --- a/src/packages/popover/demos/h5/demo1.tsx +++ b/src/packages/popover/demos/h5/demo1.tsx @@ -3,10 +3,11 @@ import { Popover, Button, Space } from '@nutui/nutui-react' import { Tips, Close } from '@nutui/icons-react' const Demo = () => { - const [basic, setBasic] = useState(false) - const [dark, setDark] = useState(false) - const [index, setIndex] = useState(0) - const itemList = [ + const [statusVisible, setStatusVisible] = useState(false) + const [descriptionVisible, setDescriptionVisible] = useState(false) + const [lightVisible, setLightVisible] = useState(false) + const [autoVisible, setAutoVisible] = useState(false) + const statusList = [ { key: 'key1', name: '主要文案内容', @@ -15,21 +16,26 @@ const Demo = () => { icon: , onClick: (e: any) => { e.stopPropagation() - index === 0 && basic && setBasic(false) - index === 1 && dark && setDark(false) + setStatusVisible(false) }, }, }, ] + const descriptionList = [ + { + key: 'key1', + name: '主要文案内容', + }, + ] return ( { - basic ? setBasic(false) : setBasic(true) - setIndex(0) + statusVisible ? setStatusVisible(false) : setStatusVisible(true) }} onOpen={() => { console.log('打开菜单时触发') @@ -37,20 +43,48 @@ const Demo = () => { onClose={() => { console.log('关闭菜单时触发') }} + > + + + { + descriptionVisible + ? setDescriptionVisible(false) + : setDescriptionVisible(true) + }} + > + + + { + lightVisible ? setLightVisible(false) : setLightVisible(true) + }} > setAutoVisible(true)} + onClose={() => setAutoVisible(false)} onClick={() => { - dark ? setDark(false) : setDark(true) - setIndex(1) + autoVisible ? setAutoVisible(false) : setAutoVisible(true) }} > - + ) diff --git a/src/packages/popover/demos/h5/demo2.tsx b/src/packages/popover/demos/h5/demo2.tsx index 000dc72386..d0f2fb6286 100644 --- a/src/packages/popover/demos/h5/demo2.tsx +++ b/src/packages/popover/demos/h5/demo2.tsx @@ -44,7 +44,6 @@ const Demo2 = () => { { showIcon ? setShowIcon(false) : setShowIcon(true) @@ -55,7 +54,6 @@ const Demo2 = () => { { disableAction ? setDisableAction(false) : setDisableAction(true) }} diff --git a/src/packages/popover/demos/h5/demo3.tsx b/src/packages/popover/demos/h5/demo3.tsx index 83b6af4f12..ac46718b20 100644 --- a/src/packages/popover/demos/h5/demo3.tsx +++ b/src/packages/popover/demos/h5/demo3.tsx @@ -26,7 +26,7 @@ const Demo3 = () => { display: 'flex', } as any const itemStyle = { - marginTop: '10px', + margin: '10px 0', display: 'flex', alignItems: 'center', flexDirection: 'column', diff --git a/src/packages/popover/demos/h5/demo4-1.tsx b/src/packages/popover/demos/h5/demo4-1.tsx index e3e52d1d27..6d499075ee 100644 --- a/src/packages/popover/demos/h5/demo4-1.tsx +++ b/src/packages/popover/demos/h5/demo4-1.tsx @@ -85,7 +85,6 @@ const Demo = () => {
{ key: 'key1', name: '主要文案内容', }, + { + key: 'key2', + name: '主要文案内容', + }, ] const handlePicker = () => { @@ -76,9 +80,9 @@ const Demo4 = () => {
diff --git a/src/packages/popover/demos/h5/demo5.tsx b/src/packages/popover/demos/h5/demo5.tsx index 13e766531b..54c47ef79b 100644 --- a/src/packages/popover/demos/h5/demo5.tsx +++ b/src/packages/popover/demos/h5/demo5.tsx @@ -18,7 +18,6 @@ const Demo5 = () => { return ( <> {
{ className="demo-popover" visible={visible} list={list} - theme="dark" location="top-right" style={{ marginInlineEnd: '30px' }} closeOnOutsideClick={false} diff --git a/src/packages/popover/demos/taro/demo1.tsx b/src/packages/popover/demos/taro/demo1.tsx index 5aee27e346..f1c4ba4ac8 100644 --- a/src/packages/popover/demos/taro/demo1.tsx +++ b/src/packages/popover/demos/taro/demo1.tsx @@ -3,10 +3,11 @@ import { Popover, Button, Space } from '@nutui/nutui-react-taro' import { Tips, Close } from '@nutui/icons-react-taro' const Demo = () => { - const [basic, setBasic] = useState(false) - const [dark, setDark] = useState(false) - const [index, setIndex] = useState(0) - const itemList = [ + const [statusVisible, setStatusVisible] = useState(false) + const [descriptionVisible, setDescriptionVisible] = useState(false) + const [lightVisible, setLightVisible] = useState(false) + const [autoVisible, setAutoVisible] = useState(false) + const statusList = [ { key: 'key1', name: '主要文案内容', @@ -15,21 +16,26 @@ const Demo = () => { icon: , onClick: (e: any) => { e.stopPropagation() - index === 0 && basic && setBasic(false) - index === 1 && dark && setDark(false) + setStatusVisible(false) }, }, }, ] + const descriptionList = [ + { + key: 'key1', + name: '主要文案内容', + }, + ] return ( { - basic ? setBasic(false) : setBasic(true) - setIndex(0) + statusVisible ? setStatusVisible(false) : setStatusVisible(true) }} onOpen={() => { console.log('打开菜单时触发') @@ -37,20 +43,48 @@ const Demo = () => { onClose={() => { console.log('关闭菜单时触发') }} + > + + + { + descriptionVisible + ? setDescriptionVisible(false) + : setDescriptionVisible(true) + }} + > + + + { + lightVisible ? setLightVisible(false) : setLightVisible(true) + }} > setAutoVisible(true)} + onClose={() => setAutoVisible(false)} onClick={() => { - dark ? setDark(false) : setDark(true) - setIndex(1) + autoVisible ? setAutoVisible(false) : setAutoVisible(true) }} > - + ) diff --git a/src/packages/popover/demos/taro/demo2.tsx b/src/packages/popover/demos/taro/demo2.tsx index 20875b7229..15a4a72bc7 100644 --- a/src/packages/popover/demos/taro/demo2.tsx +++ b/src/packages/popover/demos/taro/demo2.tsx @@ -44,7 +44,6 @@ const Demo2 = () => { { showIcon ? setShowIcon(false) : setShowIcon(true) @@ -55,7 +54,6 @@ const Demo2 = () => { { disableAction ? setDisableAction(false) : setDisableAction(true) }} diff --git a/src/packages/popover/demos/taro/demo3.tsx b/src/packages/popover/demos/taro/demo3.tsx index 0142bde214..e37f6acf11 100644 --- a/src/packages/popover/demos/taro/demo3.tsx +++ b/src/packages/popover/demos/taro/demo3.tsx @@ -28,7 +28,7 @@ const Demo3 = () => { display: 'flex', } as any const itemStyle = { - marginTop: '10px', + margin: '10px 0', display: 'flex', alignItems: 'center', flexDirection: 'column', diff --git a/src/packages/popover/demos/taro/demo4-1.tsx b/src/packages/popover/demos/taro/demo4-1.tsx index 9c36f465e6..3831681cf4 100644 --- a/src/packages/popover/demos/taro/demo4-1.tsx +++ b/src/packages/popover/demos/taro/demo4-1.tsx @@ -88,7 +88,6 @@ const Demo = () => { { key: 'key1', name: '主要文案内容', }, + { + key: 'key2', + name: '主要文案内容', + }, ] const handlePicker = () => { @@ -78,8 +82,8 @@ const Demo4 = () => { diff --git a/src/packages/popover/demos/taro/demo5.tsx b/src/packages/popover/demos/taro/demo5.tsx index 0c22966b87..622c16cbe7 100644 --- a/src/packages/popover/demos/taro/demo5.tsx +++ b/src/packages/popover/demos/taro/demo5.tsx @@ -19,7 +19,6 @@ const Demo5 = () => { <> void` | `() => {}` | | onSelect | Fired when an option is clicked | `(item: PopoverList, index: number) => void` | `(item, index) => {}` | @@ -138,13 +142,25 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-popover-border-radius | The rounded corner value of the border of the popover content area | `8px` | -| \--nutui-popover-font-size | The font-size value of the popover content area | `12px` | -| \--nutui-popover-text-color | Text color of options area | `$color-title` | -| \--nutui-popover-content-background-color | The background color of the options area | `$white` | -| \--nutui-popover-divider-color | The bottom border color of the options area | `$color-border` | -| \--nutui-popover-disable-color | Option Disabled Colors | `$color-text-disabled` | -| \--nutui-popover-padding | The padding value of each item in the option area menu | `8px` | -| \--nutui-popover-item-width | The width value of each item in the options | `160px` | +| \--nutui-popover-border-radius | Border radius of popover content | `6px` | +| \--nutui-popover-font-size | Font size of popover content | `12px` | +| \--nutui-popover-text-color | Text color | `$color-primary-text` | +| \--nutui-popover-content-background-color | Background color | `$color-mask` | +| \--nutui-popover-divider-color | Divider color between items | `rgba(255, 255, 255, 0.12)` | +| \--nutui-popover-disable-color | Disabled option color | `$color-text-disabled` | +| \--nutui-popover-padding-horizontal | Horizontal padding | `8px` | +| \--nutui-popover-padding-vertical | Vertical padding | `6px` | +| \--nutui-popover-height | Bubble height | `28px` | +| \--nutui-popover-icon-size | Icon size | `12px` | +| \--nutui-popover-icon-color | Icon color (80% opacity) | `rgba(255, 255, 255, 0.8)` | +| \--nutui-popover-status-max-width | Max width for status type | `240px` | +| \--nutui-popover-description-max-width | Max width for description type | `208px` | +| \--nutui-popover-action-hotspot-size | Close button touch hotspot size | `36px` | +| \--nutui-popover-light-content-background-color | Light theme background color | `#ffffff` | +| \--nutui-popover-light-text-color | Light theme text color | `$color-mask` | +| \--nutui-popover-light-icon-color | Light theme icon color (80% opacity) | `rgba(17, 20, 26, 0.8)` | +| \--nutui-popover-light-divider-color | Light theme divider color | `$color-border` | +| \--nutui-popover-padding | Legacy horizontal padding alias | `8px` | +| \--nutui-popover-item-width | Legacy item width alias (same as status max width) | `240px` | diff --git a/src/packages/popover/doc.md b/src/packages/popover/doc.md index dc2b55f3b6..b42a2f5a14 100644 --- a/src/packages/popover/doc.md +++ b/src/packages/popover/doc.md @@ -10,7 +10,7 @@ import { Popover } from '@nutui/nutui-react' ## 示例代码 -### 基础用法 +### 气泡类型 :::demo @@ -103,14 +103,18 @@ bottom-right # 底部右侧位置 | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | +| type | 气泡类型，`status` 状态型（图标+文案+关闭），`description` 说明型（仅文案） | `status` \| `description` | `status` | | list | 选项列表 | `PopoverList[]` | `[]` | | visible | 是否展示气泡弹出层 | `boolean` | `false` | +| theme | 主题风格，默认 `dark` 为设计规范深色气泡；`light` 为明亮风格（白底深字） | `light` \| `dark` | `dark` | | location | 弹出位置，里面具体的参数值可以参考上面的位置自定义例子 | `FullPosition` | `bottom` | -| offset | 出现位置的偏移量 | `string[]` \| `number[]` | `[0, 12]` | -| arrowOffset | 小箭头的偏移量 | `number` | `0` | +| offset | 出现位置的偏移量 | `string[]` \| `number[]` | `[0, 8]` | +| arrowOffset | 小箭头的偏移量 | `number` | `20` | | showArrow | 是否显示小箭头 | `boolean` | `true` | | closeOnActionClick | 是否在点击选项后关闭 | `boolean` | `true` | | closeOnOutsideClick | 是否在点击外部元素后关闭菜单 | `boolean` | `true` | +| autoShow | 是否自动弹出，需配合 `onOpen` 更新 `visible` | `boolean` | `false` | +| duration | 自动关闭时长（ms），`0` 表示不自动关闭 | `number` | `0` | | targetId | 自定义目标元素 id | `string` | `-` | | onClick | 点击切换 popover 展示状态 | `() => void` | `() => {}` | | onSelect | 点击选项时触发 | `(item: PopoverList, index: number) => void` | `(item, index) => {}` | @@ -142,13 +146,25 @@ PopoverList 属性是一个由对象构成的数组，数组中的每个对象 | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-popover-border-radius | popover 内容区的 border 的圆角值 | `8px` | -| \--nutui-popover-font-size | popover 内容区的 font-size 值 | `12px` | -| \--nutui-popover-text-color | 选项区的文字颜色 | `$color-title` | -| \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` | -| \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | +| \--nutui-popover-border-radius | popover 内容区的圆角 | `6px` | +| \--nutui-popover-font-size | popover 内容区的字号 | `12px` | +| \--nutui-popover-text-color | 文案颜色 | `$color-primary-text` | +| \--nutui-popover-content-background-color | 内容区背景色 | `$color-mask` | +| \--nutui-popover-divider-color | 多选项之间的分割线颜色 | `rgba(255, 255, 255, 0.12)` | | \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` | -| \--nutui-popover-padding | 选项区菜单每一项的 padding 值 | `8px` | -| \--nutui-popover-item-width | 选项区菜单每一项宽度值，超过宽度值后，会折行展示，保障信息的完整性 | `160px` | +| \--nutui-popover-padding-horizontal | 内容区水平内边距 | `8px` | +| \--nutui-popover-padding-vertical | 内容区垂直内边距 | `6px` | +| \--nutui-popover-height | 气泡高度 | `28px` | +| \--nutui-popover-icon-size | 图标尺寸 | `12px` | +| \--nutui-popover-icon-color | 图标颜色（80% 透明度） | `rgba(255, 255, 255, 0.8)` | +| \--nutui-popover-status-max-width | 状态型最大宽度 | `240px` | +| \--nutui-popover-description-max-width | 说明型最大宽度 | `208px` | +| \--nutui-popover-action-hotspot-size | 关闭按钮触控热区尺寸 | `36px` | +| \--nutui-popover-light-content-background-color | 明亮风格背景色 | `#ffffff` | +| \--nutui-popover-light-text-color | 明亮风格文案颜色 | `$color-mask` | +| \--nutui-popover-light-icon-color | 明亮风格图标颜色（80% 透明度） | `rgba(17, 20, 26, 0.8)` | +| \--nutui-popover-light-divider-color | 明亮风格分割线颜色 | `$color-border` | +| \--nutui-popover-padding | 兼容旧版水平内边距变量 | `8px` | +| \--nutui-popover-item-width | 兼容旧版选项宽度，等同状态型最大宽度 | `240px` | diff --git a/src/packages/popover/doc.taro.md b/src/packages/popover/doc.taro.md index 8830338658..f62c6423d6 100644 --- a/src/packages/popover/doc.taro.md +++ b/src/packages/popover/doc.taro.md @@ -10,7 +10,7 @@ import { Popover } from '@nutui/nutui-react-taro' ## 示例代码 -### 基础用法 +### 气泡类型 :::demo @@ -81,27 +81,24 @@ bottom-right # 底部右侧位置 ::: -### 自定义目标元素 - -:::demo - - - -::: - ## Popover ### Props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | +| type | 气泡类型，`status` 状态型（图标+文案+关闭），`description` 说明型（仅文案） | `status` \| `description` | `status` | | list | 选项列表 | `PopoverList[]` | `[]` | | visible | 是否展示气泡弹出层 | `boolean` | `false` | -| location | 弹出位置，里面具体的参数值可以参考上面的位置自定义例子 | `string` | `bottom` | -| offset | 出现位置的偏移量 | `string[]` \| `number[]` | `[0, 12]` | +| theme | 主题风格，默认 `dark` 为设计规范深色气泡；`light` 为明亮风格（白底深字） | `light` \| `dark` | `dark` | +| location | 弹出位置，里面具体的参数值可以参考上面的位置自定义例子 | `FullPosition` | `bottom` | +| offset | 出现位置的偏移量 | `string[]` \| `number[]` | `[0, 8]` | +| arrowOffset | 小箭头的偏移量 | `number` | `20` | | showArrow | 是否显示小箭头 | `boolean` | `true` | | closeOnActionClick | 是否在点击选项后关闭 | `boolean` | `true` | | closeOnOutsideClick | 是否在点击外部元素后关闭菜单 | `boolean` | `true` | +| autoShow | 是否自动弹出，需配合 `onOpen` 更新 `visible` | `boolean` | `false` | +| duration | 自动关闭时长（ms），`0` 表示不自动关闭 | `number` | `0` | | targetId | 自定义目标元素 id | `string` | `-` | | onClick | 点击切换 popover 展示状态 | `() => void` | `() => {}` | | onSelect | 点击选项时触发 | `(item: PopoverList, index: number) => void` | `(item, index) => {}` | @@ -133,13 +130,25 @@ PopoverList 属性是一个由对象构成的数组，数组中的每个对象 | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-popover-border-radius | popover 内容区的 border 的圆角值 | `8px` | -| \--nutui-popover-font-size | popover 内容区的 font-size 值 | `12px` | -| \--nutui-popover-text-color | 选项区的文字颜色 | `$color-title` | -| \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` | -| \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | +| \--nutui-popover-border-radius | popover 内容区的圆角 | `6px` | +| \--nutui-popover-font-size | popover 内容区的字号 | `12px` | +| \--nutui-popover-text-color | 文案颜色 | `$color-primary-text` | +| \--nutui-popover-content-background-color | 内容区背景色 | `$color-mask` | +| \--nutui-popover-divider-color | 多选项之间的分割线颜色 | `rgba(255, 255, 255, 0.12)` | | \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` | -| \--nutui-popover-padding | 选项区菜单每一项的 padding 值 | `8px` | -| \--nutui-popover-item-width | 选项区菜单每一项宽度值，超过宽度值后，会折行展示，保障信息的完整性 | `160px` | +| \--nutui-popover-padding-horizontal | 内容区水平内边距 | `8px` | +| \--nutui-popover-padding-vertical | 内容区垂直内边距 | `6px` | +| \--nutui-popover-height | 气泡高度 | `28px` | +| \--nutui-popover-icon-size | 图标尺寸 | `12px` | +| \--nutui-popover-icon-color | 图标颜色（80% 透明度） | `rgba(255, 255, 255, 0.8)` | +| \--nutui-popover-status-max-width | 状态型最大宽度 | `240px` | +| \--nutui-popover-description-max-width | 说明型最大宽度 | `208px` | +| \--nutui-popover-action-hotspot-size | 关闭按钮触控热区尺寸 | `36px` | +| \--nutui-popover-light-content-background-color | 明亮风格背景色 | `#ffffff` | +| \--nutui-popover-light-text-color | 明亮风格文案颜色 | `$color-mask` | +| \--nutui-popover-light-icon-color | 明亮风格图标颜色（80% 透明度） | `rgba(17, 20, 26, 0.8)` | +| \--nutui-popover-light-divider-color | 明亮风格分割线颜色 | `$color-border` | +| \--nutui-popover-padding | 兼容旧版水平内边距变量 | `8px` | +| \--nutui-popover-item-width | 兼容旧版选项宽度，等同状态型最大宽度 | `240px` | diff --git a/src/packages/popover/doc.zh-TW.md b/src/packages/popover/doc.zh-TW.md index ce90611f8c..103613dca3 100644 --- a/src/packages/popover/doc.zh-TW.md +++ b/src/packages/popover/doc.zh-TW.md @@ -10,7 +10,7 @@ import { Popover } from '@nutui/nutui-react' ## 示例代碼 -### 基礎用法 +### 氣泡類型 :::demo @@ -103,14 +103,18 @@ bottom-right # 底部右側位置 | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | +| type | 氣泡類型，`status` 狀態型（圖標+文案+關閉），`description` 說明型（僅文案） | `status` \| `description` | `status` | | list | 選項列表 | `PopoverList[]` | `[]` | | visible | 是否展示氣泡彈出層 | `boolean` | `false` | -| location | 彈出位置，裏面具體的參數值可以參考上面的位置自定義例子 | `string` | `bottom` | -| offset | 出現位置的偏移量 | `string[]` \| `number[]` | `[0, 12]` | -| arrowOffset | 小箭頭的偏移量 | `number` | `0` | +| theme | 主題風格，默認 `dark` 為設計規範深色氣泡；`light` 為明亮風格（白底深字） | `light` \| `dark` | `dark` | +| location | 彈出位置，裏面具體的參數值可以參考上面的位置自定義例子 | `FullPosition` | `bottom` | +| offset | 出現位置的偏移量 | `string[]` \| `number[]` | `[0, 8]` | +| arrowOffset | 小箭頭的偏移量 | `number` | `20` | | showArrow | 是否顯示小箭頭 | `boolean` | `true` | | closeOnActionClick | 是否在點擊選項後關閉 | `boolean` | `true` | | closeOnOutsideClick | 是否在點擊外部元素後關閉菜單 | `boolean` | `true` | +| autoShow | 是否自動彈出，需配合 `onOpen` 更新 `visible` | `boolean` | `false` | +| duration | 自動關閉時長（ms），`0` 表示不自動關閉 | `number` | `0` | | targetId | 自定義目標元素 id | `string` | `-` | | onClick | 點擊切換 popover 展示狀態 | `() => void` | `() => {}` | | onSelect | 點擊選項時觸發 | `(item: PopoverList, index: number) => void` | `(item, index) => {}` | @@ -142,13 +146,25 @@ PopoverList 屬性是一個由對象構成的數組，數組中的每個對象 | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-popover-border-radius | popover 內容區的 border 的圓角值 | `8px` | -| \--nutui-popover-font-size | popover 內容區的 font-size 值 | `12px` | -| \--nutui-popover-text-color | 選項區的文字顏色 | `$color-title` | -| \--nutui-popover-content-background-color | 選項區的背景顏色 | `$white` | -| \--nutui-popover-divider-color | 選項區的底部 border 顏色 | `$color-border` | +| \--nutui-popover-border-radius | popover 內容區的圓角 | `6px` | +| \--nutui-popover-font-size | popover 內容區的字號 | `12px` | +| \--nutui-popover-text-color | 文案顏色 | `$color-primary-text` | +| \--nutui-popover-content-background-color | 內容區背景色 | `$color-mask` | +| \--nutui-popover-divider-color | 多選項之間的分割線顏色 | `rgba(255, 255, 255, 0.12)` | | \--nutui-popover-disable-color | 選項禁用的顏色 | `$color-text-disabled` | -| \--nutui-popover-padding | 選項區菜單每一項的 padding 值 | `8px` | -| \--nutui-popover-item-width | 選項區菜單每一項寬度值，超過寬度值後，會折行展示，保障信息的完整性 | `160px` | +| \--nutui-popover-padding-horizontal | 內容區水平內邊距 | `8px` | +| \--nutui-popover-padding-vertical | 內容區垂直內邊距 | `6px` | +| \--nutui-popover-height | 氣泡高度 | `28px` | +| \--nutui-popover-icon-size | 圖標尺寸 | `12px` | +| \--nutui-popover-icon-color | 圖標顏色（80% 透明度） | `rgba(255, 255, 255, 0.8)` | +| \--nutui-popover-status-max-width | 狀態型最大寬度 | `240px` | +| \--nutui-popover-description-max-width | 說明型最大寬度 | `208px` | +| \--nutui-popover-action-hotspot-size | 關閉按鈕觸控熱區尺寸 | `36px` | +| \--nutui-popover-light-content-background-color | 明亮風格背景色 | `#ffffff` | +| \--nutui-popover-light-text-color | 明亮風格文案顏色 | `$color-mask` | +| \--nutui-popover-light-icon-color | 明亮風格圖標顏色（80% 透明度） | `rgba(17, 20, 26, 0.8)` | +| \--nutui-popover-light-divider-color | 明亮風格分割線顏色 | `$color-border` | +| \--nutui-popover-padding | 兼容舊版水平內邊距變量 | `8px` | +| \--nutui-popover-item-width | 兼容舊版選項寬度，等同狀態型最大寬度 | `240px` | diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index 20081f9612..e3635cd149 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -7,25 +7,25 @@ &-arrow { position: absolute; width: 8px; - height: 4px; + height: 8px; .nut-icon-ArrowRadius { position: absolute; color: $popover-content-background-color; width: 8px; - height: 4px; + height: 8px; } &-top { - bottom: -4px; + bottom: -8px; } &-bottom { - top: -4px; + top: -8px; } &-left { - right: -6px; + right: -8px; transform-origin: center top; &.nut-popover-arrow-left { @@ -34,15 +34,12 @@ } &.nut-popover-arrow-left-top { - top: 16px; - right: -8px; + right: -12px; transform: rotate(90deg) translateY(0%); } &.nut-popover-arrow-left-bottom { - top: auto; - bottom: 16px; - right: -8px; + right: -12px; transform: rotate(90deg) translateY(0%); } } @@ -51,19 +48,17 @@ transform-origin: center top; &.nut-popover-arrow-right { top: 50%; - left: -6px; + left: -8px; transform: rotate(-90deg) translateY(-50%); } &.nut-popover-arrow-right-top { - top: 16px; - left: -8px; + left: -12px; transform: rotate(-90deg) translateY(0%); } &.nut-popover-arrow-right-bottom { - bottom: 16px; - left: -8px; + left: -12px; transform: rotate(-90deg) translateY(0%); } } @@ -75,41 +70,57 @@ border-radius: $popover-border-radius; font-size: $popover-font-size; color: $popover-text-color; - line-height: 28px; /* #ifndef dynamic*/ max-height: initial; overflow-y: initial; /* #endif */ &-group { - padding: 0 $popover-padding; + padding: 0 $popover-padding-horizontal; + overflow: visible; } .nut-popover-item { + box-sizing: border-box; display: flex; align-items: center; justify-content: center; + min-height: $popover-height; + padding: $popover-padding-vertical 0; border-bottom: 1px solid $popover-divider-color; - max-width: $popover-item-width; word-wrap: break-word; &:last-child { - margin-bottom: 0px; + margin-bottom: 0; border-bottom: none; } &-icon, &-action-icon { + position: relative; display: flex; justify-content: center; align-items: center; - width: $font-size-s; - height: $font-size-s; - font-size: $font-size-s; + flex-shrink: 0; + align-self: stretch; + width: $popover-icon-size; + color: $popover-icon-color; + + &::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: $popover-action-hotspot-size; + transform: translateX(-50%); + } + .nut-icon { - width: $font-size-s; - height: $font-size-s; - font-size: $font-size-s; + position: relative; + z-index: 1; + width: $popover-icon-size; + height: $popover-icon-size; } } @@ -118,14 +129,17 @@ } &-name { - width: calc(100% - 34px); word-break: keep-all; flex: 1; + min-width: 0; + text-align: center; + line-height: calc( + #{$popover-height} - #{$popover-padding-vertical} * 2 + ); } &-action-icon { - color: $color-text; - margin-left: $spacing-base; + margin-left: $spacing-xxs; } &.nut-popover-item-disabled { @@ -149,18 +163,16 @@ &-top-right { right: 0; .nut-popover-arrow-top-right { - right: 16px; - bottom: -3.5px; - transform: rotate(180deg) translateX(0%); + transform-origin: center right; + transform: rotate(180deg) translateX(50%); } } &-top-left { left: 0; .nut-popover-arrow-top-left { - left: 16px; - bottom: -3.5px; - transform: rotate(180deg) translateX(0%); + transform-origin: center left; + transform: rotate(180deg) translateX(-50%); } } @@ -174,16 +186,14 @@ &-bottom-right { right: 0; .nut-popover-arrow-bottom-right { - right: 16px; - transform: translateX(0%); + transform: translateX(50%); } } &-bottom-left { left: 0; .nut-popover-arrow-bottom-left { - left: 16px; - transform: translateX(0%); + transform: translateX(-50%); } } @@ -203,24 +213,42 @@ top: 0; } } -} -.nut-popover-dark { - background: $popover-text-color; - color: $popover-content-background-color; + &--status { + .nut-popover-content .nut-popover-item { + max-width: $popover-status-max-width; + } + } + &--description { + .nut-popover-content .nut-popover-item { + max-width: $popover-description-max-width; + } + } +} + +.nut-popover-light { .nut-popover-arrow { - .nut-icon-ArrowRadius { - color: $popover-text-color; + .nut-icon-ArrowRadius, + .nut-popover-arrow-svg { + color: $popover-light-content-background-color; } } .nut-popover-content { - background: $popover-text-color !important; - color: $popover-content-background-color !important; + background: $popover-light-content-background-color !important; + color: $popover-light-text-color !important; + .nut-popover-item { + border-bottom-color: $popover-light-divider-color; + + &-icon, &-action-icon { - color: rgba(255, 255, 255, 0.8); + color: $popover-light-icon-color; + + .nut-icon { + color: $popover-light-icon-color; + } } } } @@ -230,13 +258,14 @@ .nut-rtl .nut-popover { .nut-popover-content { .nut-popover-item { - &-name { - margin-left: 0; - margin-right: 4px; + &-icon { + margin-right: 0; + margin-left: $spacing-xxs; } &-action-icon { - right: auto; + margin-left: 0; + margin-right: $spacing-xxs; } } &-top { @@ -252,7 +281,6 @@ .nut-popover-arrow-top-right { right: auto; - left: 16px; } } @@ -262,7 +290,6 @@ .nut-popover-arrow-top-left { left: auto; - right: 16px; } } @@ -280,7 +307,6 @@ .nut-popover-arrow-bottom-right { right: auto; - left: 16px; } } @@ -290,7 +316,6 @@ .nut-popover-arrow-bottom-left { left: auto; - right: 16px; } } } diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 0a26fdb272..5615c500fb 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -20,15 +20,18 @@ import { useUuid } from '@/hooks/use-uuid' const defaultProps = { ...ComponentDefaults, list: [], - theme: 'light', + type: 'status', + theme: 'dark', location: 'bottom', visible: false, offset: [0, 8], - arrowOffset: 0, + arrowOffset: 20, targetId: '', showArrow: true, closeOnOutsideClick: true, closeOnActionClick: true, + autoShow: false, + duration: 0, overlay: false, onClick: () => {}, onOpen: () => {}, @@ -44,6 +47,7 @@ export const Popover: FunctionComponent< const { children, list, + type, theme, location, visible, @@ -53,6 +57,8 @@ export const Popover: FunctionComponent< overlay, closeOnOutsideClick, closeOnActionClick, + autoShow, + duration, className, showArrow, style, @@ -79,6 +85,22 @@ export const Popover: FunctionComponent< } }, [visible]) + useEffect(() => { + if (autoShow) { + onOpen?.() + } + }, []) + + useEffect(() => { + if (visible && duration > 0) { + const timer = setTimeout(() => { + onClick?.() + onClose?.() + }, duration) + return () => clearTimeout(timer) + } + }, [visible, duration, onClick, onClose]) + const uid = useUuid() const popoverId = `popover-${uid}` @@ -121,8 +143,9 @@ export const Popover: FunctionComponent< const classes = classNames( classPrefix, + `${classPrefix}--${type}`, { - [`${classPrefix}-${theme}`]: theme === 'dark', + [`${classPrefix}-light`]: theme === 'light', }, className ) @@ -151,6 +174,7 @@ export const Popover: FunctionComponent< } if (width) { const dir = rtl ? 'right' : 'left' + const edgeOffset = arrowOffset if (['bottom', 'top'].includes(direction)) { const h = direction === 'bottom' ? height + cross : -(popHeight + cross) styles.top = pxTransform(top + h) @@ -161,10 +185,10 @@ export const Popover: FunctionComponent< ) } if (skew === 'left') { - styles.left = pxTransform(left + parallel) + styles.left = pxTransform(left + width / 2 - edgeOffset + parallel) } if (skew === 'right') { - styles.left = pxTransform(right + parallel) + styles.left = pxTransform(left + width / 2 + edgeOffset + parallel) } } if (['left', 'right'].includes(direction)) { @@ -172,9 +196,7 @@ export const Popover: FunctionComponent< direction === 'left' ? -(popWidth + cross) : width + cross styles.left = pxTransform(left + contentW) if (!skew) { - styles.top = pxTransform( - top - popHeight / 2 + height / 2 - 4 + parallel - ) + styles.top = pxTransform(top - popHeight / 2 + height / 2 + parallel) } if (skew === 'top') { styles.top = pxTransform(top + parallel) @@ -193,35 +215,19 @@ export const Popover: FunctionComponent< const styles: CSSProperties = {} const direction = location.split('-')[0] const skew = location.split('-')[1] - const base = 16 + const dir = rtl ? 'right' : 'left' + const dir2 = rtl ? 'left' : 'right' + const edgeOffset = arrowOffset - if (arrowOffset !== 0) { - const dir = rtl ? 'right' : 'left' - const dir2 = rtl ? 'left' : 'right' - if (['bottom', 'top'].includes(direction)) { - if (!skew) { - styles[dir] = `calc(50% + ${arrowOffset}px)` - } - if (skew === 'left') { - styles[dir] = `${base + arrowOffset}px` - } - if (skew === 'right') { - styles[dir2] = `${base - arrowOffset}px` - } + if (['bottom', 'top'].includes(direction)) { + if (skew === 'left') { + styles[dir] = `${edgeOffset}px` } - - if (['left', 'right'].includes(direction)) { - if (!skew) { - styles.top = `calc(50% - ${arrowOffset}px)` - } - if (skew === 'top') { - styles.top = `${base - arrowOffset}px` - } - if (skew === 'bottom') { - styles.bottom = `${base + arrowOffset}px` - } + if (skew === 'right') { + styles[dir2] = `${edgeOffset}px` } } + return styles } diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx index e95789ec6c..aff43a7afc 100644 --- a/src/packages/popover/popover.tsx +++ b/src/packages/popover/popover.tsx @@ -22,15 +22,18 @@ import { WebPopoverProps, PopoverList, WrapperPosition } from '@/types' const defaultProps = { ...ComponentDefaults, list: [], - theme: 'light', + type: 'status', + theme: 'dark', location: 'bottom', visible: false, offset: [0, 8], - arrowOffset: 0, + arrowOffset: 20, targetId: '', showArrow: true, closeOnOutsideClick: true, closeOnActionClick: true, + autoShow: false, + duration: 0, overlay: false, onClick: () => {}, onOpen: () => {}, @@ -46,6 +49,7 @@ export const Popover: FunctionComponent< const { children, list, + type, theme, location, visible, @@ -55,6 +59,8 @@ export const Popover: FunctionComponent< overlay, closeOnOutsideClick, closeOnActionClick, + autoShow, + duration, className, showArrow, style, @@ -81,6 +87,22 @@ export const Popover: FunctionComponent< } }, [visible, location]) + useEffect(() => { + if (autoShow) { + onOpen?.() + } + }, []) + + useEffect(() => { + if (visible && duration > 0) { + const timer = setTimeout(() => { + onClick?.() + onClose?.() + }, duration) + return () => clearTimeout(timer) + } + }, [visible, duration, onClick, onClose]) + const update = useRef((e: any) => { getWrapperPosition() }) @@ -141,8 +163,9 @@ export const Popover: FunctionComponent< const classes = classNames( classPrefix, + `${classPrefix}--${type}`, { - [`${classPrefix}-${theme}`]: theme === 'dark', + [`${classPrefix}-light`]: theme === 'light', }, className ) @@ -175,6 +198,7 @@ export const Popover: FunctionComponent< } if (width) { const dir = rtl ? 'right' : 'left' + const edgeOffset = arrowOffset if (['bottom', 'top'].includes(direction)) { const h = direction === 'bottom' ? height + cross : -(popHeight + cross) styles.top = `${top + h}px` @@ -184,10 +208,10 @@ export const Popover: FunctionComponent< `${-(popWidth - width) / 2 + wrapperPosition[dir] + parallel}px` } if (skew === 'left') { - styles.left = `${left + parallel}px` + styles.left = `${left + width / 2 - edgeOffset + parallel}px` } if (skew === 'right') { - styles.left = `${right + parallel}px` + styles.left = `${left + width / 2 + edgeOffset + parallel}px` } } if (['left', 'right'].includes(direction)) { @@ -195,7 +219,7 @@ export const Popover: FunctionComponent< direction === 'left' ? -(popWidth + cross) : width + cross styles.left = `${left + contentW}px` if (!skew) { - styles.top = `${top - popHeight / 2 + height / 2 - 4 + parallel}px` + styles.top = `${top - popHeight / 2 + height / 2 + parallel}px` } if (skew === 'top') { styles.top = `${top + parallel}px` @@ -213,35 +237,19 @@ export const Popover: FunctionComponent< const styles: CSSProperties = {} const direction = location.split('-')[0] const skew = location.split('-')[1] - const base = 16 + const dir = rtl ? 'right' : 'left' + const dir2 = rtl ? 'left' : 'right' + const edgeOffset = arrowOffset - if (arrowOffset !== 0) { - const dir = rtl ? 'right' : 'left' - const dir2 = rtl ? 'left' : 'right' - if (['bottom', 'top'].includes(direction)) { - if (!skew) { - styles[dir] = `calc(50% + ${arrowOffset}px)` - } - if (skew === 'left') { - styles[dir] = `${base + arrowOffset}px` - } - if (skew === 'right') { - styles[dir2] = `${base - arrowOffset}px` - } + if (['bottom', 'top'].includes(direction)) { + if (skew === 'left') { + styles[dir] = `${edgeOffset}px` } - - if (['left', 'right'].includes(direction)) { - if (!skew) { - styles.top = `calc(50% - ${arrowOffset}px)` - } - if (skew === 'top') { - styles.top = `${base - arrowOffset}px` - } - if (skew === 'bottom') { - styles.bottom = `${base + arrowOffset}px` - } + if (skew === 'right') { + styles[dir2] = `${edgeOffset}px` } } + return styles } 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 47e8cd2b8e..2cbf1ed8f7 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 @@ -78,3 +78,29 @@ npm install @nutui/nutui-react-taro - `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. + +### Popover + +> **No v3 compatibility in v4**: no prop aliases and no `.nut-popover-dark` class fallback. Migrate manually using the table below. + +- **New `type` bubble variant (breaking default behavior)**: + - Added `type`: `status` (icon + text + close) or `description` (text only). + - Default `status`; max width 240px for status, 208px for description. +- **`theme` default changed (breaking)**: + - Default changed from `light` to `dark` (design-spec dark bubble). + - **Light style is preserved**: set `theme="light"` for the bright white-background style. + - Recommended migration: + - v3 default bright style → set `theme="light"` explicitly + - v3 `theme="dark"` → can remove the prop in v4 (already the default look) +- **Visual spec updates**: + - **Common**: height 28px, font 12px, background `$color-mask`, text `$color-primary-text`, padding 6px vertical / 8px horizontal. + - **Status**: icon/close 12×12 at 80% opacity; close button touch hotspot at least 36×36px. + - **Description**: text only, 8px horizontal padding. +- **CSS class name breaking changes**: + - Removed `.nut-popover-dark`; default styles match the design-spec dark bubble. + - Bright style uses `.nut-popover-light` (`theme="light"`). + - Added `.nut-popover--status` / `.nut-popover--description`. +- **Theme variable updates**: + - Added `--nutui-popover-padding-horizontal`, `--nutui-popover-padding-vertical`, `--nutui-popover-height`, `--nutui-popover-icon-size`, `--nutui-popover-icon-color`, `--nutui-popover-status-max-width`, `--nutui-popover-description-max-width`, `--nutui-popover-action-hotspot-size`. + - `--nutui-popover-content-background-color` default changed from `#ffffff` to `$color-mask`; `--nutui-popover-text-color` from `$color-mask` to `$color-primary-text`. + - `--nutui-popover-item-width` default changed from `160px` to `240px` (same as status max width). 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 c942fe3ad1..3c8d132482 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 @@ -78,3 +78,29 @@ npm install @nutui/nutui-react-taro - `status="empty"` → `status="search"`（通用空态）或按场景选用上表枚举 - `status="error"` → `status="network"` 或通过 `image` 传入自定义插图 - 插图通过 CDN URL 运行时加载，映射表见 `src/types/spec/empty/base.ts`。 + +### Popover (反馈类) + +> **v4 不提供 v3 兼容**：无 Props 别名、无 `.nut-popover-dark` 类名回退。请按下表手动迁移。 + +- **新增 `type` 气泡类型（不兼容默认值行为）**： + - 新增 `type` 属性，枚举 `status`（状态型：图标 + 文案 + 关闭）/ `description`（说明型：仅文案）。 + - 默认值 `status`；说明型最大宽度 208px，状态型最大宽度 240px。 +- **`theme` 默认值变更（不兼容）**： + - 默认值由 `light` 调整为 `dark`（对齐设计规范深色气泡）。 + - **明亮风格保留**：设置 `theme="light"` 即可使用白底深字的明亮风格。 + - 推荐迁移映射： + - v3 默认明亮风格 → 显式设置 `theme="light"` + - v3 `theme="dark"` → v4 可移除该属性（已是默认外观） +- **视觉规格对齐设计稿**： + - **通用**：高度 28px，字号 12px，背景 `$color-mask`，文案 `$color-primary-text`，垂直内边距 6px、水平内边距 8px。 + - **状态型**：图标/关闭 12×12、80% 透明度，关闭按钮触控热区不低于 36×36px。 + - **说明型**：仅文案，左右内边距各 8px。 +- **CSS 类名变更（不兼容）**： + - 移除 `.nut-popover-dark`；默认样式即为设计规范深色气泡。 + - 明亮风格改用 `.nut-popover-light`（`theme="light"`）。 + - 新增类型修饰类：`.nut-popover--status` / `.nut-popover--description`。 +- **主题变量调整**： + - 新增 `--nutui-popover-padding-horizontal`、`--nutui-popover-padding-vertical`、`--nutui-popover-height`、`--nutui-popover-icon-size`、`--nutui-popover-icon-color`、`--nutui-popover-status-max-width`、`--nutui-popover-description-max-width`、`--nutui-popover-action-hotspot-size`。 + - `--nutui-popover-content-background-color` 默认值由 `#ffffff` 改为 `$color-mask`；`--nutui-popover-text-color` 由 `$color-mask` 改为 `$color-primary-text`。 + - `--nutui-popover-item-width` 默认值由 `160px` 改为 `240px`（等同状态型最大宽度）。 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 47e8cd2b8e..2cbf1ed8f7 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 @@ -78,3 +78,29 @@ npm install @nutui/nutui-react-taro - `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. + +### Popover + +> **No v3 compatibility in v4**: no prop aliases and no `.nut-popover-dark` class fallback. Migrate manually using the table below. + +- **New `type` bubble variant (breaking default behavior)**: + - Added `type`: `status` (icon + text + close) or `description` (text only). + - Default `status`; max width 240px for status, 208px for description. +- **`theme` default changed (breaking)**: + - Default changed from `light` to `dark` (design-spec dark bubble). + - **Light style is preserved**: set `theme="light"` for the bright white-background style. + - Recommended migration: + - v3 default bright style → set `theme="light"` explicitly + - v3 `theme="dark"` → can remove the prop in v4 (already the default look) +- **Visual spec updates**: + - **Common**: height 28px, font 12px, background `$color-mask`, text `$color-primary-text`, padding 6px vertical / 8px horizontal. + - **Status**: icon/close 12×12 at 80% opacity; close button touch hotspot at least 36×36px. + - **Description**: text only, 8px horizontal padding. +- **CSS class name breaking changes**: + - Removed `.nut-popover-dark`; default styles match the design-spec dark bubble. + - Bright style uses `.nut-popover-light` (`theme="light"`). + - Added `.nut-popover--status` / `.nut-popover--description`. +- **Theme variable updates**: + - Added `--nutui-popover-padding-horizontal`, `--nutui-popover-padding-vertical`, `--nutui-popover-height`, `--nutui-popover-icon-size`, `--nutui-popover-icon-color`, `--nutui-popover-status-max-width`, `--nutui-popover-description-max-width`, `--nutui-popover-action-hotspot-size`. + - `--nutui-popover-content-background-color` default changed from `#ffffff` to `$color-mask`; `--nutui-popover-text-color` from `$color-mask` to `$color-primary-text`. + - `--nutui-popover-item-width` default changed from `160px` to `240px` (same as status max width). 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 c942fe3ad1..3c8d132482 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 @@ -78,3 +78,29 @@ npm install @nutui/nutui-react-taro - `status="empty"` → `status="search"`（通用空态）或按场景选用上表枚举 - `status="error"` → `status="network"` 或通过 `image` 传入自定义插图 - 插图通过 CDN URL 运行时加载，映射表见 `src/types/spec/empty/base.ts`。 + +### Popover (反馈类) + +> **v4 不提供 v3 兼容**：无 Props 别名、无 `.nut-popover-dark` 类名回退。请按下表手动迁移。 + +- **新增 `type` 气泡类型（不兼容默认值行为）**： + - 新增 `type` 属性，枚举 `status`（状态型：图标 + 文案 + 关闭）/ `description`（说明型：仅文案）。 + - 默认值 `status`；说明型最大宽度 208px，状态型最大宽度 240px。 +- **`theme` 默认值变更（不兼容）**： + - 默认值由 `light` 调整为 `dark`（对齐设计规范深色气泡）。 + - **明亮风格保留**：设置 `theme="light"` 即可使用白底深字的明亮风格。 + - 推荐迁移映射： + - v3 默认明亮风格 → 显式设置 `theme="light"` + - v3 `theme="dark"` → v4 可移除该属性（已是默认外观） +- **视觉规格对齐设计稿**： + - **通用**：高度 28px，字号 12px，背景 `$color-mask`，文案 `$color-primary-text`，垂直内边距 6px、水平内边距 8px。 + - **状态型**：图标/关闭 12×12、80% 透明度，关闭按钮触控热区不低于 36×36px。 + - **说明型**：仅文案，左右内边距各 8px。 +- **CSS 类名变更（不兼容）**： + - 移除 `.nut-popover-dark`；默认样式即为设计规范深色气泡。 + - 明亮风格改用 `.nut-popover-light`（`theme="light"`）。 + - 新增类型修饰类：`.nut-popover--status` / `.nut-popover--description`。 +- **主题变量调整**： + - 新增 `--nutui-popover-padding-horizontal`、`--nutui-popover-padding-vertical`、`--nutui-popover-height`、`--nutui-popover-icon-size`、`--nutui-popover-icon-color`、`--nutui-popover-status-max-width`、`--nutui-popover-description-max-width`、`--nutui-popover-action-hotspot-size`。 + - `--nutui-popover-content-background-color` 默认值由 `#ffffff` 改为 `$color-mask`；`--nutui-popover-text-color` 由 `$color-mask` 改为 `$color-primary-text`。 + - `--nutui-popover-item-width` 默认值由 `160px` 改为 `240px`（等同状态型最大宽度）。 diff --git a/src/sites/theme/components/header/header.scss b/src/sites/theme/components/header/header.scss index b1ae250808..9b51f26776 100644 --- a/src/sites/theme/components/header/header.scss +++ b/src/sites/theme/components/header/header.scss @@ -411,7 +411,7 @@ width: 150px; cursor: pointer; - .nut-popover--dark { + .nut-popover { width: 100%; margin-right: 0; background: transparent; diff --git a/src/styles/variables-daojia.scss b/src/styles/variables-daojia.scss index 982b6bada4..23b576edd2 100644 --- a/src/styles/variables-daojia.scss +++ b/src/styles/variables-daojia.scss @@ -1166,15 +1166,45 @@ $badge-outline-border: var(--nutui-badge-outline-border, //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, $radius-xs) !default; $popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default; -$popover-content-background-color: var(--nutui-popover-content-background-color, - #ffffff) !default; -$popover-text-color: var(--nutui-popover-text-color, $color-mask) !default; -$popover-disable-color: var(--nutui-popover-disable-color, - $color-text-disabled) !default; -$popover-divider-color: var(--nutui-popover-divider-color, - $color-border) !default; -$popover-padding: var(--nutui-popover-padding, 8px) !default; -$popover-item-width: var(--nutui-popover-item-width, 160px) !default; +$popover-content-background-color: var( + --nutui-popover-content-background-color, + $color-mask +) !default; +$popover-text-color: var(--nutui-popover-text-color, $color-primary-text) !default; +$popover-disable-color: var( + --nutui-popover-disable-color, + $color-text-disabled +) !default; +$popover-divider-color: var( + --nutui-popover-divider-color, + rgba(255, 255, 255, 0.12) +) !default; +$popover-padding-horizontal: var(--nutui-popover-padding-horizontal, 8px) !default; +$popover-padding-vertical: var(--nutui-popover-padding-vertical, 6px) !default; +$popover-height: var(--nutui-popover-height, 28px) !default; +$popover-icon-size: var(--nutui-popover-icon-size, 12px) !default; +$popover-icon-color: var(--nutui-popover-icon-color, rgba(255, 255, 255, 0.8)) !default; +$popover-status-max-width: var(--nutui-popover-status-max-width, 240px) !default; +$popover-description-max-width: var( + --nutui-popover-description-max-width, + 208px +) !default; +$popover-action-hotspot-size: var(--nutui-popover-action-hotspot-size, 36px) !default; +$popover-light-content-background-color: var( + --nutui-popover-light-content-background-color, + #ffffff +) !default; +$popover-light-text-color: var(--nutui-popover-light-text-color, $color-mask) !default; +$popover-light-icon-color: var( + --nutui-popover-light-icon-color, + rgba(17, 20, 26, 0.8) +) !default; +$popover-light-divider-color: var( + --nutui-popover-light-divider-color, + $color-border +) !default; +$popover-padding: var(--nutui-popover-padding, $popover-padding-horizontal) !default; +$popover-item-width: var(--nutui-popover-item-width, $popover-status-max-width) !default; //progress（✅） $progress-height: var(--nutui-progress-height, 10px) !default; diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss index 699c9d6666..b6d98f2b42 100644 --- a/src/styles/variables-jmapp.scss +++ b/src/styles/variables-jmapp.scss @@ -1971,19 +1971,46 @@ $badge-outline-border: var( //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, $radius-s) !default; -$popover-font-size: var(--nutui-popover-font-size, $font-size-base) !default; +$popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default; $popover-content-background-color: var( --nutui-popover-content-background-color, - #ffffff + $color-mask ) !default; -$popover-text-color: var(--nutui-popover-text-color, $color-text) !default; +$popover-text-color: var(--nutui-popover-text-color, $color-primary-text) !default; $popover-disable-color: var( --nutui-popover-disable-color, $color-text-disabled ) !default; -$popover-divider-color: var(--nutui-popover-divider-color, none) !default; -$popover-padding: var(--nutui-popover-padding, $spacing-xl) !default; -$popover-item-width: var(--nutui-popover-item-width, 160px) !default; +$popover-divider-color: var( + --nutui-popover-divider-color, + rgba(255, 255, 255, 0.12) +) !default; +$popover-padding-horizontal: var(--nutui-popover-padding-horizontal, 8px) !default; +$popover-padding-vertical: var(--nutui-popover-padding-vertical, 6px) !default; +$popover-height: var(--nutui-popover-height, 28px) !default; +$popover-icon-size: var(--nutui-popover-icon-size, 12px) !default; +$popover-icon-color: var(--nutui-popover-icon-color, rgba(255, 255, 255, 0.8)) !default; +$popover-status-max-width: var(--nutui-popover-status-max-width, 240px) !default; +$popover-description-max-width: var( + --nutui-popover-description-max-width, + 208px +) !default; +$popover-action-hotspot-size: var(--nutui-popover-action-hotspot-size, 36px) !default; +$popover-light-content-background-color: var( + --nutui-popover-light-content-background-color, + #ffffff +) !default; +$popover-light-text-color: var(--nutui-popover-light-text-color, $color-mask) !default; +$popover-light-icon-color: var( + --nutui-popover-light-icon-color, + rgba(17, 20, 26, 0.8) +) !default; +$popover-light-divider-color: var( + --nutui-popover-light-divider-color, + $color-border +) !default; +$popover-padding: var(--nutui-popover-padding, $popover-padding-horizontal) !default; +$popover-item-width: var(--nutui-popover-item-width, $popover-status-max-width) !default; //progress（✅） $progress-height: var(--nutui-progress-height, 10px) !default; diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss index a39df2f708..cb138a15a5 100644 --- a/src/styles/variables-jrkf.scss +++ b/src/styles/variables-jrkf.scss @@ -2078,19 +2078,46 @@ $badge-outline-border: var( //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, $radius-s) !default; -$popover-font-size: var(--nutui-popover-font-size, $font-size-base) !default; +$popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default; $popover-content-background-color: var( --nutui-popover-content-background-color, - #ffffff + $color-mask ) !default; -$popover-text-color: var(--nutui-popover-text-color, $color-text) !default; +$popover-text-color: var(--nutui-popover-text-color, $color-primary-text) !default; $popover-disable-color: var( --nutui-popover-disable-color, $color-text-disabled ) !default; -$popover-divider-color: var(--nutui-popover-divider-color, none) !default; -$popover-padding: var(--nutui-popover-padding, $spacing-xl) !default; -$popover-item-width: var(--nutui-popover-item-width, 160px) !default; +$popover-divider-color: var( + --nutui-popover-divider-color, + rgba(255, 255, 255, 0.12) +) !default; +$popover-padding-horizontal: var(--nutui-popover-padding-horizontal, 8px) !default; +$popover-padding-vertical: var(--nutui-popover-padding-vertical, 6px) !default; +$popover-height: var(--nutui-popover-height, 28px) !default; +$popover-icon-size: var(--nutui-popover-icon-size, 12px) !default; +$popover-icon-color: var(--nutui-popover-icon-color, rgba(255, 255, 255, 0.8)) !default; +$popover-status-max-width: var(--nutui-popover-status-max-width, 240px) !default; +$popover-description-max-width: var( + --nutui-popover-description-max-width, + 208px +) !default; +$popover-action-hotspot-size: var(--nutui-popover-action-hotspot-size, 36px) !default; +$popover-light-content-background-color: var( + --nutui-popover-light-content-background-color, + #ffffff +) !default; +$popover-light-text-color: var(--nutui-popover-light-text-color, $color-mask) !default; +$popover-light-icon-color: var( + --nutui-popover-light-icon-color, + rgba(17, 20, 26, 0.8) +) !default; +$popover-light-divider-color: var( + --nutui-popover-light-divider-color, + $color-border +) !default; +$popover-padding: var(--nutui-popover-padding, $popover-padding-horizontal) !default; +$popover-item-width: var(--nutui-popover-item-width, $popover-status-max-width) !default; //progress（✅） $progress-height: var(--nutui-progress-height, 10px) !default; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index fecc48c7b4..1f51923b2e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1882,23 +1882,71 @@ $badge-outline-border: var( ); //popover（✅） -$popover-border-radius: var(--nutui-popover-border-radius, $radius-xs) !default; +$popover-border-radius: var(--nutui-popover-border-radius, $radius-s) !default; $popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default; $popover-content-background-color: var( --nutui-popover-content-background-color, - #ffffff + $color-mask ) !default; -$popover-text-color: var(--nutui-popover-text-color, $color-mask) !default; +$popover-text-color: var(--nutui-popover-text-color, $color-primary-text) !default; $popover-disable-color: var( --nutui-popover-disable-color, $color-text-disabled ) !default; $popover-divider-color: var( --nutui-popover-divider-color, + rgba(255, 255, 255, 0.12) +) !default; +$popover-padding-horizontal: var( + --nutui-popover-padding-horizontal, + scale-px(8px) +) !default; +$popover-padding-vertical: var( + --nutui-popover-padding-vertical, + scale-px(6px) +) !default; +$popover-height: var(--nutui-popover-height, scale-px(28px)) !default; +$popover-icon-size: var(--nutui-popover-icon-size, scale-px(12px)) !default; +$popover-icon-color: var( + --nutui-popover-icon-color, + rgba(255, 255, 255, 0.8) +) !default; +$popover-status-max-width: var( + --nutui-popover-status-max-width, + scale-px(240px) +) !default; +$popover-description-max-width: var( + --nutui-popover-description-max-width, + scale-px(208px) +) !default; +$popover-action-hotspot-size: var( + --nutui-popover-action-hotspot-size, + scale-px(36px) +) !default; +$popover-light-content-background-color: var( + --nutui-popover-light-content-background-color, + #ffffff +) !default; +$popover-light-text-color: var( + --nutui-popover-light-text-color, + $color-mask +) !default; +$popover-light-icon-color: var( + --nutui-popover-light-icon-color, + rgba(17, 20, 26, 0.8) +) !default; +$popover-light-divider-color: var( + --nutui-popover-light-divider-color, $color-border ) !default; -$popover-padding: var(--nutui-popover-padding, scale-px(8px)) !default; -$popover-item-width: var(--nutui-popover-item-width, scale-px(160px)) !default; +$popover-padding: var( + --nutui-popover-padding, + $popover-padding-horizontal +) !default; +$popover-item-width: var( + --nutui-popover-item-width, + $popover-status-max-width +) !default; //progress（✅） $progress-height: var(--nutui-progress-height, scale-px(10px)) !default; diff --git a/src/types/spec/popover/base.ts b/src/types/spec/popover/base.ts index 816ceab984..77e5e6ec2a 100644 --- a/src/types/spec/popover/base.ts +++ b/src/types/spec/popover/base.ts @@ -2,6 +2,8 @@ import { ReactNode } from 'react' import { BaseProps } from '../../base/props' import { FullPosition, SimpleValues, UITheme } from '../../base/atoms' +export type PopoverType = 'status' | 'description' + export interface PopoverList { key?: string name: string @@ -21,6 +23,7 @@ export interface WrapperPosition { export type BasePopover = POPUP_PROPS & BaseProps & { + type: PopoverType theme: UITheme location: FullPosition list: PopoverList[] @@ -31,6 +34,8 @@ export type BasePopover = POPUP_PROPS & showArrow: boolean closeOnOutsideClick: boolean closeOnActionClick: boolean + autoShow: boolean + duration: number children?: ReactNode onClick: () => void onOpen: () => void From 9476baf64b1f2fd0df4b84282e5350baf8bf4ef7 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 23 Jun 2026 18:18:20 +0800 Subject: [PATCH 10/11] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=E6=89=93?= =?UTF-8?q?=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config.json b/src/config.json index 4bc24265de..2ede3e7c71 100644 --- a/src/config.json +++ b/src/config.json @@ -1033,7 +1033,7 @@ "v15": 1, "author": "lzz", "dd": true, - "v16": false + "v16": true }, { "version": "3.0.0", From 8e1951c0b256ddb41481b0087dd9bfc7a997c66b Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 24 Jun 2026 11:13:52 +0800 Subject: [PATCH 11/11] =?UTF-8?q?fix:=20=E5=90=8C=E6=AD=A5=E4=BF=AE?= =?UTF-8?q?=E6=94=B9tour?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/button/button.taro.tsx | 4 +--- src/packages/tour/__test__/tour.spec.tsx | 2 +- src/packages/tour/demos/h5/demo3.tsx | 3 +-- src/packages/tour/demos/taro/demo3.tsx | 3 +-- src/packages/tour/tour.taro.tsx | 2 +- src/packages/tour/tour.tsx | 2 +- 6 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx index f8bb724138..ec9e6288c9 100644 --- a/src/packages/button/button.taro.tsx +++ b/src/packages/button/button.taro.tsx @@ -147,9 +147,7 @@ export const Button = React.forwardRef< onClick={(e) => handleClick(e as any)} > - {loading && ( - - )} + {loading &&