From b4c186dce775e60cb88c3353762e8e6d2975efaf Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Mon, 2 Dec 2024 16:32:32 +0800
Subject: [PATCH 01/14] =?UTF-8?q?feat:=20hoverbutton=20=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=20v14?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/hoverbutton/demo.scss            |  0
 src/packages/hoverbutton/hoverbutton.taro.tsx | 10 ++++------
 src/packages/hoverbutton/hoverbutton.tsx      | 10 ++++------
 src/styles/variables.scss                     | 14 +++++++-------
 4 files changed, 15 insertions(+), 19 deletions(-)
 delete mode 100644 src/packages/hoverbutton/demo.scss

diff --git a/src/packages/hoverbutton/demo.scss b/src/packages/hoverbutton/demo.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/packages/hoverbutton/hoverbutton.taro.tsx b/src/packages/hoverbutton/hoverbutton.taro.tsx
index 6ea440138a..be3e2be850 100644
--- a/src/packages/hoverbutton/hoverbutton.taro.tsx
+++ b/src/packages/hoverbutton/hoverbutton.taro.tsx
@@ -4,9 +4,7 @@ import { View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '@/packages/configprovider/index.taro'
-import HoverButtonItem, {
-  HoverButtonItemProps,
-} from '@/packages/hoverbuttonitem/index.taro'
+import HoverButtonItem, { HoverButtonItemProps } from '@/packages/hoverbuttonitem/index.taro'
 import SafeArea from '@/packages/safearea/index.taro'
 import pxTransform from '@/utils/px-transform'
 
@@ -23,7 +21,7 @@ const classPrefix = 'nut-hoverbutton'
 
 export const HoverButton: FunctionComponent<
   Partial<HoverButtonProps> &
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
 > & {
   Item: typeof HoverButtonItem
 } = (props) => {
@@ -37,7 +35,7 @@ export const HoverButton: FunctionComponent<
   const baseStyle = { ...style }
 
   if (tabbarHeight) {
-    baseStyle.bottom = pxTransform(tabbarHeight + 16)
+    baseStyle.bottom = pxTransform(tabbarHeight + 60)
   }
 
   if (typeof zIndex !== 'undefined') {
@@ -56,7 +54,7 @@ export const HoverButton: FunctionComponent<
         {children ||
           (icon && <HoverButtonItem icon={icon} onClick={onClick} />)}
       </View>
-      <SafeArea position="bottom" />
+      <SafeArea position='bottom' />
     </View>
   )
 }
diff --git a/src/packages/hoverbutton/hoverbutton.tsx b/src/packages/hoverbutton/hoverbutton.tsx
index a044f70fdb..f25f68fbea 100644
--- a/src/packages/hoverbutton/hoverbutton.tsx
+++ b/src/packages/hoverbutton/hoverbutton.tsx
@@ -2,9 +2,7 @@ import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '@/packages/configprovider/index'
-import HoverButtonItem, {
-  HoverButtonItemProps,
-} from '@/packages/hoverbuttonitem/index'
+import HoverButtonItem, { HoverButtonItemProps } from '@/packages/hoverbuttonitem/index'
 import SafeArea from '@/packages/safearea/index'
 
 export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps {
@@ -20,7 +18,7 @@ const classPrefix = 'nut-hoverbutton'
 
 export const HoverButton: FunctionComponent<
   Partial<HoverButtonProps> &
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
 > & {
   Item: typeof HoverButtonItem
 } = (props) => {
@@ -34,7 +32,7 @@ export const HoverButton: FunctionComponent<
   const baseStyle = { ...style }
 
   if (tabbarHeight) {
-    const bottom = tabbarHeight + 16
+    const bottom = tabbarHeight + 60
     baseStyle.bottom = `${bottom}px`
   }
 
@@ -53,7 +51,7 @@ export const HoverButton: FunctionComponent<
         {children ||
           (icon && <HoverButtonItem icon={icon} onClick={onClick} />)}
       </div>
-      <SafeArea position="bottom" />
+      <SafeArea position='bottom' />
     </div>
   )
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 14c4db7ab1..e8f948f16f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1000,15 +1000,15 @@ $calendar-day-active-border-radius: var(
 //hoverbutton
 $hoverbutton-spacing: var(
   --nutui-hoverbutton-spacing,
-  var(--nutui-spacing-16, 16px)
+    $spacing-base
 ) !default;
 $hoverbutton-position-bottom: var(
   --nutui-hoverbutton-position-bottom,
-  48px
+  60px
 ) !default;
 $hoverbutton-position-right: var(
   --nutui-hoverbutton-position-right,
-  var(--nutui-spacing-16, 16px)
+    $spacing-base
 ) !default;
 $hoverbutton-item-border-color: var(
   --nutui-hoverbutton-item-border-color,
@@ -1016,19 +1016,19 @@ $hoverbutton-item-border-color: var(
 ) !default;
 $hoverbutton-item-background: var(
   --nutui-hoverbutton-item-background,
-  var(--nutui-gray-1, #ffffff)
+  var(--nutui-white-12)
 ) !default;
 $hoverbutton-item-background-active: var(
   --nutui-hoverbutton-item-background-active,
-  var(--nutui-gray-3, #f6f6f6)
+  rgba(247,248,252, 0.9)
 ) !default;
 $hoverbutton-item-icon-color: var(
   --nutui-hoverbutton-item-icon-color,
-  var(--nutui-gray-7, #1a1a1a)
+    $color-title
 ) !default;
 $hoverbutton-item-icon-color-active: var(
   --nutui-hoverbutton-item-icon-color-active,
-  var(--nutui-gray-6, #595959)
+    $color-title
 ) !default;
 
 //overlay（✅）

From a8996d007c0681e19b7a2d9c0096a5800652c877 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 3 Dec 2024 14:33:39 +0800
Subject: [PATCH 02/14] feat: add demo, docs; update css

---
 src/packages/hoverbutton/demo.taro.tsx        | 13 ++++
 src/packages/hoverbutton/demo.tsx             | 15 +++-
 src/packages/hoverbutton/demos/h5/demo6.tsx   | 68 ++++++++++++++++++
 src/packages/hoverbutton/demos/taro/demo6.tsx | 70 +++++++++++++++++++
 src/packages/hoverbutton/doc.en-US.md         | 10 ++-
 src/packages/hoverbutton/doc.md               | 18 ++++-
 src/packages/hoverbutton/doc.taro.md          | 10 ++-
 src/packages/hoverbutton/doc.zh-TW.md         | 18 ++++-
 src/packages/hoverbutton/hoverbutton.taro.tsx |  8 ++-
 src/packages/hoverbutton/hoverbutton.tsx      |  8 ++-
 src/styles/variables.scss                     | 15 ++--
 11 files changed, 233 insertions(+), 20 deletions(-)
 create mode 100644 src/packages/hoverbutton/demos/h5/demo6.tsx
 create mode 100644 src/packages/hoverbutton/demos/taro/demo6.tsx

diff --git a/src/packages/hoverbutton/demo.taro.tsx b/src/packages/hoverbutton/demo.taro.tsx
index c94eddc4e5..c04f682db8 100644
--- a/src/packages/hoverbutton/demo.taro.tsx
+++ b/src/packages/hoverbutton/demo.taro.tsx
@@ -8,6 +8,7 @@ import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
+import Demo6 from './demos/taro/demo6'
 import { harmonyAndRn } from '@/utils/platform-taro'
 // import Demo5 from './demos/taro/demo5'
 
@@ -18,6 +19,7 @@ const HoverDemo = () => {
     'zh-CN': {
       show: '展示',
       basic: '基础用法',
+      customNode: '按钮和文字',
       multiButtons: '多个按钮',
       hasTabbar: '有底部导航栏的情况',
       customZIndex: '自定义层级',
@@ -26,6 +28,7 @@ const HoverDemo = () => {
     'zh-TW': {
       show: '展示',
       basic: '基礎用法',
+      customNode: '按鈕和文字',
       multiButtons: '多個按鈕',
       hasTabbar: '有底部導航欄的情況',
       customZIndex: '自定義層級',
@@ -34,6 +37,7 @@ const HoverDemo = () => {
     'en-US': {
       show: 'Show ',
       basic: 'Basic Usage',
+      customNode: 'Icon And Text',
       multiButtons: 'Multiple Buttons',
       hasTabbar: 'With Tabbar',
       customZIndex: 'Custom Z-Index',
@@ -57,6 +61,14 @@ const HoverDemo = () => {
           }}
         />
 
+        <View className="h2">{translated.customNode}</View>
+        <Cell
+          title={`${translated.show}${translated.customNode}`}
+          onClick={() => {
+            setCurDemo('customNode')
+          }}
+        />
+
         <View className="h2">{translated.multiButtons}</View>
         <Cell
           title={`${translated.show}${translated.multiButtons}`}
@@ -94,6 +106,7 @@ const HoverDemo = () => {
       </ScrollView>
 
       {curDemo === 'basic' && <Demo1 />}
+      {curDemo === 'customNode' && <Demo6 />}
       {curDemo === 'multiButtons' && <Demo2 />}
       {curDemo === 'hasTabbar' && <Demo3 />}
       {curDemo === 'customZIndex' && <Demo4 />}
diff --git a/src/packages/hoverbutton/demo.tsx b/src/packages/hoverbutton/demo.tsx
index 31d52fe1f8..bff93d91db 100644
--- a/src/packages/hoverbutton/demo.tsx
+++ b/src/packages/hoverbutton/demo.tsx
@@ -6,12 +6,14 @@ import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
 
 const HoverButtonDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       show: '展示',
       basic: '基础用法',
+      customNode: '按钮和文字',
       multiButtons: '多个按钮',
       hasTabbar: '有底部导航栏的情况',
       customZIndex: '自定义层级',
@@ -20,6 +22,7 @@ const HoverButtonDemo = () => {
     'zh-TW': {
       show: '展示',
       basic: '基礎用法',
+      customNode: '按鈕和文字',
       multiButtons: '多個按鈕',
       hasTabbar: '有底部導航欄的情況',
       customZIndex: '自定義層級',
@@ -28,13 +31,14 @@ const HoverButtonDemo = () => {
     'en-US': {
       show: 'Show ',
       basic: 'Basic Usage',
+      customNode: 'Icon And Text',
       multiButtons: 'Multiple Buttons',
       hasTabbar: 'With Tabbar',
       customZIndex: 'Custom Z-Index',
       customSpacing: 'Custom Spacing',
     },
   })
-  const [curDemo, setCurDemo] = useState('basic')
+  const [curDemo, setCurDemo] = useState('customNode')
 
   return (
     <>
@@ -48,6 +52,15 @@ const HoverButtonDemo = () => {
         />
         {curDemo === 'basic' && <Demo1 />}
 
+        <h2>{translated.customNode}</h2>
+        <Cell
+          title={`${translated.show}${translated.customNode}`}
+          onClick={() => {
+            setCurDemo('customNode')
+          }}
+        />
+        {curDemo === 'customNode' && <Demo6 />}
+
         <h2>{translated.multiButtons}</h2>
         <Cell
           title={`${translated.show}${translated.multiButtons}`}
diff --git a/src/packages/hoverbutton/demos/h5/demo6.tsx b/src/packages/hoverbutton/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..057fb42e2f
--- /dev/null
+++ b/src/packages/hoverbutton/demos/h5/demo6.tsx
@@ -0,0 +1,68 @@
+/**
+ * 基础用法
+ */
+import React from 'react'
+import { HoverButton } from '@nutui/nutui-react'
+import { Cart } from '@nutui/icons-react'
+
+const Demo1 = () => {
+  return (
+    <>
+      <HoverButton>
+        <div
+          className="nut-hoverbutton-item-container"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <span
+            style={{
+              fontSize: 12,
+              fontWeight: 700,
+              lineHeight: 1,
+              marginTop: 5,
+              fontFamily: 'JD',
+            }}
+          >
+            3
+          </span>
+          <div
+            style={{
+              height: 1,
+              width: 20,
+              background: '#1A1A1A',
+              marginTop: 3,
+              marginBottom: 3,
+            }}
+          />
+          <div
+            style={{
+              fontSize: 10,
+              lineHeight: '9px',
+              fontFamily: 'JD',
+            }}
+          >
+            238
+          </div>
+        </div>
+        <div
+          className="nut-hoverbutton-item-container"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            paddingTop: 5,
+          }}
+        >
+          <Cart style={{ width: 14, height: 14 }} />
+          <div style={{ fontSize: 10, marginTop: 5, lineHeight: '9px' }}>
+            购物
+          </div>
+        </div>
+      </HoverButton>
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/hoverbutton/demos/taro/demo6.tsx b/src/packages/hoverbutton/demos/taro/demo6.tsx
new file mode 100644
index 0000000000..f9355e22fb
--- /dev/null
+++ b/src/packages/hoverbutton/demos/taro/demo6.tsx
@@ -0,0 +1,70 @@
+/**
+ * 基础用法
+ */
+import React from 'react'
+import { HoverButton } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
+import { Cart } from '@nutui/icons-react-taro'
+
+const Demo1 = () => {
+  return (
+    <>
+      <HoverButton>
+        <View
+          className="nut-hoverbutton-item-container"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <View
+            style={{
+              fontSize: 12,
+              fontWeight: 700,
+              lineHeight: 1,
+              marginTop: 5,
+              fontFamily: 'JD',
+            }}
+          >
+            3
+          </View>
+          <View
+            style={{
+              height: 1,
+              width: 20,
+              background: '#1A1A1A',
+              marginTop: 3,
+              marginBottom: 3,
+            }}
+          />
+          <View
+            style={{
+              fontSize: 10,
+              lineHeight: '9px',
+              fontFamily: 'JD',
+            }}
+          >
+            238
+          </View>
+        </View>
+
+        <View
+          className="nut-hoverbutton-item-container"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            paddingTop: 5,
+          }}
+        >
+          <Cart style={{ width: 14, height: 14 }} />
+          <View style={{ fontSize: 10, marginTop: 5, lineHeight: '9px' }}>
+            购物
+          </View>
+        </View>
+      </HoverButton>
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/hoverbutton/doc.en-US.md b/src/packages/hoverbutton/doc.en-US.md
index 1f2b5b347e..10c30c0873 100644
--- a/src/packages/hoverbutton/doc.en-US.md
+++ b/src/packages/hoverbutton/doc.en-US.md
@@ -20,6 +20,14 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### Icon And Text
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### Multiple Buttons
 
 :::demo
@@ -79,4 +87,4 @@ The component provides the following CSS variables that can be used for custom s
 | \--nutui-hoverbutton-item-background | Button normal background color | `#FFFFFF` |
 | \--nutui-hoverbutton-item-background-active | Button active background color | `#F6F6F6` |
 | \--nutui-hoverbutton-item-icon-color | Icon normal color | `#1A1A1A` |
-| \--nutui-hoverbutton-item-icon-color-active | Icon active color | `#595959` |
\ No newline at end of file
+| \--nutui-hoverbutton-item-icon-color-active | Icon active color | `#595959` |
diff --git a/src/packages/hoverbutton/doc.md b/src/packages/hoverbutton/doc.md
index 031165c128..f57d415925 100644
--- a/src/packages/hoverbutton/doc.md
+++ b/src/packages/hoverbutton/doc.md
@@ -20,6 +20,14 @@ import { HoverButton } from '@nutui/nutui-react'
 
 :::
 
+### 按钮和文字
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### 多个按钮
 
 :::demo
@@ -44,6 +52,14 @@ import { HoverButton } from '@nutui/nutui-react'
 
 :::
 
+### 自定义间距
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
@@ -79,4 +95,4 @@ import { HoverButton } from '@nutui/nutui-react'
 | \--nutui-hoverbutton-item-background | 按钮背景色-正常态 | `#FFFFFF` |
 | \--nutui-hoverbutton-item-background-active | 按钮背景色-点击态 | `#F6F6F6` |
 | \--nutui-hoverbutton-item-icon-color | 图标色-正常态 | `#1A1A1A` |
-| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` |
\ No newline at end of file
+| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` |
diff --git a/src/packages/hoverbutton/doc.taro.md b/src/packages/hoverbutton/doc.taro.md
index f0a86c4794..7a0499ca6f 100644
--- a/src/packages/hoverbutton/doc.taro.md
+++ b/src/packages/hoverbutton/doc.taro.md
@@ -20,6 +20,14 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### 按钮和文字
+
+:::demo
+
+<CodeBlock src='taro/demo6.tsx'></CodeBlock>
+
+:::
+
 ### 多个按钮
 
 :::demo
@@ -79,4 +87,4 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 | \--nutui-hoverbutton-item-background | 按钮背景色-正常态 | `#FFFFFF` |
 | \--nutui-hoverbutton-item-background-active | 按钮背景色-点击态 | `#F6F6F6` |
 | \--nutui-hoverbutton-item-icon-color | 图标色-正常态 | `#1A1A1A` |
-| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` |
\ No newline at end of file
+| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` |
diff --git a/src/packages/hoverbutton/doc.zh-TW.md b/src/packages/hoverbutton/doc.zh-TW.md
index 54d4ecd65c..a702481353 100644
--- a/src/packages/hoverbutton/doc.zh-TW.md
+++ b/src/packages/hoverbutton/doc.zh-TW.md
@@ -20,6 +20,14 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### 按鈕和文字
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### 多個按鈕
 
 :::demo
@@ -44,6 +52,14 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### 自訂間距
+
+:::demo
+
+<CodeBlock src='taro/demo5.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
@@ -79,4 +95,4 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 | \--nutui-hoverbutton-item-background | 按鈕背景色-正常態 | `#FFFFFF` |
 | \--nutui-hoverbutton-item-background-active | 按鈕背景色-點擊態 | `#F6F6F6` |
 | \--nutui-hoverbutton-item-icon-color | 圖標色-正常態 | `#1A1A1A` |
-| \--nutui-hoverbutton-item-icon-color-active | 圖標色-點擊態 | `#595959` |
\ No newline at end of file
+| \--nutui-hoverbutton-item-icon-color-active | 圖標色-點擊態 | `#595959` |
diff --git a/src/packages/hoverbutton/hoverbutton.taro.tsx b/src/packages/hoverbutton/hoverbutton.taro.tsx
index be3e2be850..8b291384e1 100644
--- a/src/packages/hoverbutton/hoverbutton.taro.tsx
+++ b/src/packages/hoverbutton/hoverbutton.taro.tsx
@@ -4,7 +4,9 @@ import { View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '@/packages/configprovider/index.taro'
-import HoverButtonItem, { HoverButtonItemProps } from '@/packages/hoverbuttonitem/index.taro'
+import HoverButtonItem, {
+  HoverButtonItemProps,
+} from '@/packages/hoverbuttonitem/index.taro'
 import SafeArea from '@/packages/safearea/index.taro'
 import pxTransform from '@/utils/px-transform'
 
@@ -21,7 +23,7 @@ const classPrefix = 'nut-hoverbutton'
 
 export const HoverButton: FunctionComponent<
   Partial<HoverButtonProps> &
-  Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
 > & {
   Item: typeof HoverButtonItem
 } = (props) => {
@@ -54,7 +56,7 @@ export const HoverButton: FunctionComponent<
         {children ||
           (icon && <HoverButtonItem icon={icon} onClick={onClick} />)}
       </View>
-      <SafeArea position='bottom' />
+      <SafeArea position="bottom" />
     </View>
   )
 }
diff --git a/src/packages/hoverbutton/hoverbutton.tsx b/src/packages/hoverbutton/hoverbutton.tsx
index f25f68fbea..86ca799607 100644
--- a/src/packages/hoverbutton/hoverbutton.tsx
+++ b/src/packages/hoverbutton/hoverbutton.tsx
@@ -2,7 +2,9 @@ import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '@/packages/configprovider/index'
-import HoverButtonItem, { HoverButtonItemProps } from '@/packages/hoverbuttonitem/index'
+import HoverButtonItem, {
+  HoverButtonItemProps,
+} from '@/packages/hoverbuttonitem/index'
 import SafeArea from '@/packages/safearea/index'
 
 export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps {
@@ -18,7 +20,7 @@ const classPrefix = 'nut-hoverbutton'
 
 export const HoverButton: FunctionComponent<
   Partial<HoverButtonProps> &
-  Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
 > & {
   Item: typeof HoverButtonItem
 } = (props) => {
@@ -51,7 +53,7 @@ export const HoverButton: FunctionComponent<
         {children ||
           (icon && <HoverButtonItem icon={icon} onClick={onClick} />)}
       </div>
-      <SafeArea position='bottom' />
+      <SafeArea position="bottom" />
     </div>
   )
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index e8f948f16f..5a9c33ed12 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -998,21 +998,18 @@ $calendar-day-active-border-radius: var(
 ) !default;
 
 //hoverbutton
-$hoverbutton-spacing: var(
-  --nutui-hoverbutton-spacing,
-    $spacing-base
-) !default;
+$hoverbutton-spacing: var(--nutui-hoverbutton-spacing, $spacing-base) !default;
 $hoverbutton-position-bottom: var(
   --nutui-hoverbutton-position-bottom,
   60px
 ) !default;
 $hoverbutton-position-right: var(
   --nutui-hoverbutton-position-right,
-    $spacing-base
+  $spacing-base
 ) !default;
 $hoverbutton-item-border-color: var(
   --nutui-hoverbutton-item-border-color,
-  var(--nutui-black-3, rgba(0, 0, 0, 0.06))
+  rgba(0, 0, 0, 0.12)
 ) !default;
 $hoverbutton-item-background: var(
   --nutui-hoverbutton-item-background,
@@ -1020,15 +1017,15 @@ $hoverbutton-item-background: var(
 ) !default;
 $hoverbutton-item-background-active: var(
   --nutui-hoverbutton-item-background-active,
-  rgba(247,248,252, 0.9)
+  rgba(247, 248, 252, 0.9)
 ) !default;
 $hoverbutton-item-icon-color: var(
   --nutui-hoverbutton-item-icon-color,
-    $color-title
+  $color-title
 ) !default;
 $hoverbutton-item-icon-color-active: var(
   --nutui-hoverbutton-item-icon-color-active,
-    $color-title
+  $color-title
 ) !default;
 
 //overlay（✅）

From ffde486f68d9c957c79b8a87e48de36260d4d675 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 3 Dec 2024 14:40:58 +0800
Subject: [PATCH 03/14] feat: add demo, docs; update css

---
 src/packages/hoverbutton/demos/h5/demo6.tsx   | 3 +--
 src/packages/hoverbutton/demos/taro/demo6.tsx | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/packages/hoverbutton/demos/h5/demo6.tsx b/src/packages/hoverbutton/demos/h5/demo6.tsx
index 057fb42e2f..13422cc805 100644
--- a/src/packages/hoverbutton/demos/h5/demo6.tsx
+++ b/src/packages/hoverbutton/demos/h5/demo6.tsx
@@ -53,10 +53,9 @@ const Demo1 = () => {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
-            paddingTop: 5,
           }}
         >
-          <Cart style={{ width: 14, height: 14 }} />
+          <Cart style={{ width: 14, height: 14, marginTop: 5 }} />
           <div style={{ fontSize: 10, marginTop: 5, lineHeight: '9px' }}>
             购物
           </div>
diff --git a/src/packages/hoverbutton/demos/taro/demo6.tsx b/src/packages/hoverbutton/demos/taro/demo6.tsx
index f9355e22fb..68084219ca 100644
--- a/src/packages/hoverbutton/demos/taro/demo6.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo6.tsx
@@ -55,10 +55,9 @@ const Demo1 = () => {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
-            paddingTop: 5,
           }}
         >
-          <Cart style={{ width: 14, height: 14 }} />
+          <Cart style={{ width: 14, height: 14, marginTop: 5 }} />
           <View style={{ fontSize: 10, marginTop: 5, lineHeight: '9px' }}>
             购物
           </View>

From c979752d662966e363e33549c1540ed6cbeb4b84 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 3 Dec 2024 15:02:32 +0800
Subject: [PATCH 04/14] feat: harmony doesn't support gap, so use margin-bottom
 instead

---
 src/packages/hoverbutton/demos/taro/demo6.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/packages/hoverbutton/demos/taro/demo6.tsx b/src/packages/hoverbutton/demos/taro/demo6.tsx
index 68084219ca..537d46bff2 100644
--- a/src/packages/hoverbutton/demos/taro/demo6.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo6.tsx
@@ -5,17 +5,19 @@ import React from 'react'
 import { HoverButton } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 import { Cart } from '@nutui/icons-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo1 = () => {
   return (
     <>
       <HoverButton>
         <View
-          className="nut-hoverbutton-item-container"
+          className="nut-hoverbutton-item nut-hoverbutton-item-container"
           style={{
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
+            marginBottom: 8,
           }}
         >
           <View
@@ -41,7 +43,7 @@ const Demo1 = () => {
           <View
             style={{
               fontSize: 10,
-              lineHeight: '9px',
+              lineHeight: pxTransform(9),
               fontFamily: 'JD',
             }}
           >
@@ -58,7 +60,9 @@ const Demo1 = () => {
           }}
         >
           <Cart style={{ width: 14, height: 14, marginTop: 5 }} />
-          <View style={{ fontSize: 10, marginTop: 5, lineHeight: '9px' }}>
+          <View
+            style={{ fontSize: 10, marginTop: 5, lineHeight: pxTransform(9) }}
+          >
             购物
           </View>
         </View>

From 7cf51a76eda5a7d5e3578e32a819d3f42d7a82c6 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 3 Dec 2024 15:08:35 +0800
Subject: [PATCH 05/14] test: update case and snap

---
 .../__test__/__snapshots__/hoverbutton.spec.tsx.snap            | 2 +-
 src/packages/hoverbutton/__test__/hoverbutton.spec.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap b/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap
index 203949b55d..e1470c3bce 100644
--- a/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap
+++ b/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap
@@ -120,7 +120,7 @@ exports[`tabbar height 1`] = `
 <div>
   <div
     class="nut-hoverbutton-container"
-    style="bottom: 64px;"
+    style="bottom: 108px;"
   >
     <div
       class="nut-hoverbutton"
diff --git a/src/packages/hoverbutton/__test__/hoverbutton.spec.tsx b/src/packages/hoverbutton/__test__/hoverbutton.spec.tsx
index 45717d6dc7..4039ba1c6c 100644
--- a/src/packages/hoverbutton/__test__/hoverbutton.spec.tsx
+++ b/src/packages/hoverbutton/__test__/hoverbutton.spec.tsx
@@ -34,7 +34,7 @@ test('tabbar height', () => {
 
   expect(container.querySelector('.nut-hoverbutton-container')).toHaveAttribute(
     'style',
-    'bottom: 64px;'
+    'bottom: 108px;'
   )
   expect(container).toMatchSnapshot()
 })

From 89906af84d390ed18f2ba314a86874e5218408bb Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 4 Dec 2024 13:41:25 +0800
Subject: [PATCH 06/14] fix: extracting constants

---
 src/packages/hoverbutton/hoverbutton.taro.tsx | 4 +++-
 src/packages/hoverbutton/hoverbutton.tsx      | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/packages/hoverbutton/hoverbutton.taro.tsx b/src/packages/hoverbutton/hoverbutton.taro.tsx
index 8b291384e1..72bc990a3a 100644
--- a/src/packages/hoverbutton/hoverbutton.taro.tsx
+++ b/src/packages/hoverbutton/hoverbutton.taro.tsx
@@ -36,8 +36,10 @@ export const HoverButton: FunctionComponent<
 
   const baseStyle = { ...style }
 
+  const UI_GUIDE = 60
+
   if (tabbarHeight) {
-    baseStyle.bottom = pxTransform(tabbarHeight + 60)
+    baseStyle.bottom = pxTransform(tabbarHeight + UI_GUIDE)
   }
 
   if (typeof zIndex !== 'undefined') {
diff --git a/src/packages/hoverbutton/hoverbutton.tsx b/src/packages/hoverbutton/hoverbutton.tsx
index 86ca799607..9dce88fd2f 100644
--- a/src/packages/hoverbutton/hoverbutton.tsx
+++ b/src/packages/hoverbutton/hoverbutton.tsx
@@ -33,8 +33,10 @@ export const HoverButton: FunctionComponent<
 
   const baseStyle = { ...style }
 
+  const UI_GUIDE = 60
+
   if (tabbarHeight) {
-    const bottom = tabbarHeight + 60
+    const bottom = tabbarHeight + UI_GUIDE
     baseStyle.bottom = `${bottom}px`
   }
 

From 10c862506a98b3b6e520c70b392c021b28a61251 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 4 Dec 2024 14:12:57 +0800
Subject: [PATCH 07/14] =?UTF-8?q?fix:=20update=20demo=E2=80=99s=20order?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/hoverbutton/demo.taro.tsx        | 18 +++----
 src/packages/hoverbutton/demo.tsx             | 22 ++++----
 src/packages/hoverbutton/demos/h5/demo2.tsx   |  3 ++
 src/packages/hoverbutton/demos/h5/demo6.tsx   | 14 -----
 src/packages/hoverbutton/demos/taro/demo2.tsx |  3 ++
 src/packages/hoverbutton/demos/taro/demo6.tsx | 17 ------
 src/packages/hoverbutton/doc.en-US.md         | 16 +++---
 src/packages/hoverbutton/doc.md               | 16 +++---
 src/packages/hoverbutton/doc.taro.md          | 16 +++---
 src/packages/hoverbutton/doc.zh-TW.md         | 16 +++---
 .../hoverbuttonitem/hoverbuttonitem.scss      | 17 ++++++
 .../hoverbuttonitem/hoverbuttonitem.taro.tsx  | 51 ++++++++++++++----
 .../hoverbuttonitem/hoverbuttonitem.tsx       | 53 +++++++++++++++----
 13 files changed, 159 insertions(+), 103 deletions(-)

diff --git a/src/packages/hoverbutton/demo.taro.tsx b/src/packages/hoverbutton/demo.taro.tsx
index c04f682db8..af954cca2e 100644
--- a/src/packages/hoverbutton/demo.taro.tsx
+++ b/src/packages/hoverbutton/demo.taro.tsx
@@ -19,7 +19,7 @@ const HoverDemo = () => {
     'zh-CN': {
       show: '展示',
       basic: '基础用法',
-      customNode: '按钮和文字',
+      customNode: '自定义内容',
       multiButtons: '多个按钮',
       hasTabbar: '有底部导航栏的情况',
       customZIndex: '自定义层级',
@@ -61,14 +61,6 @@ const HoverDemo = () => {
           }}
         />
 
-        <View className="h2">{translated.customNode}</View>
-        <Cell
-          title={`${translated.show}${translated.customNode}`}
-          onClick={() => {
-            setCurDemo('customNode')
-          }}
-        />
-
         <View className="h2">{translated.multiButtons}</View>
         <Cell
           title={`${translated.show}${translated.multiButtons}`}
@@ -103,6 +95,14 @@ const HoverDemo = () => {
             }}
           />
         )} */}
+
+        <View className="h2">{translated.customNode}</View>
+        <Cell
+          title={`${translated.show}${translated.customNode}`}
+          onClick={() => {
+            setCurDemo('customNode')
+          }}
+        />
       </ScrollView>
 
       {curDemo === 'basic' && <Demo1 />}
diff --git a/src/packages/hoverbutton/demo.tsx b/src/packages/hoverbutton/demo.tsx
index bff93d91db..41ac0261d7 100644
--- a/src/packages/hoverbutton/demo.tsx
+++ b/src/packages/hoverbutton/demo.tsx
@@ -22,7 +22,7 @@ const HoverButtonDemo = () => {
     'zh-TW': {
       show: '展示',
       basic: '基礎用法',
-      customNode: '按鈕和文字',
+      customNode: '自定義內容',
       multiButtons: '多個按鈕',
       hasTabbar: '有底部導航欄的情況',
       customZIndex: '自定義層級',
@@ -31,7 +31,7 @@ const HoverButtonDemo = () => {
     'en-US': {
       show: 'Show ',
       basic: 'Basic Usage',
-      customNode: 'Icon And Text',
+      customNode: 'Custom Node',
       multiButtons: 'Multiple Buttons',
       hasTabbar: 'With Tabbar',
       customZIndex: 'Custom Z-Index',
@@ -52,15 +52,6 @@ const HoverButtonDemo = () => {
         />
         {curDemo === 'basic' && <Demo1 />}
 
-        <h2>{translated.customNode}</h2>
-        <Cell
-          title={`${translated.show}${translated.customNode}`}
-          onClick={() => {
-            setCurDemo('customNode')
-          }}
-        />
-        {curDemo === 'customNode' && <Demo6 />}
-
         <h2>{translated.multiButtons}</h2>
         <Cell
           title={`${translated.show}${translated.multiButtons}`}
@@ -97,6 +88,15 @@ const HoverButtonDemo = () => {
         />
         {curDemo === 'customSpacing' && <Demo5 />}
       </div>
+
+      <h2>{translated.customNode}</h2>
+      <Cell
+        title={`${translated.show}${translated.customNode}`}
+        onClick={() => {
+          setCurDemo('customNode')
+        }}
+      />
+      {curDemo === 'customNode' && <Demo6 />}
     </>
   )
 }
diff --git a/src/packages/hoverbutton/demos/h5/demo2.tsx b/src/packages/hoverbutton/demos/h5/demo2.tsx
index cb7f5a5317..c0910819ac 100644
--- a/src/packages/hoverbutton/demos/h5/demo2.tsx
+++ b/src/packages/hoverbutton/demos/h5/demo2.tsx
@@ -30,6 +30,9 @@ const Demo2 = () => {
       <HoverButton.Item icon={<Cart />} onClick={testClick1} />
       <HoverButton.Item icon={<Cart />} onClick={testClick2} />
       <HoverButton.Item icon={<Cart />} onClick={testClick3} />
+      <HoverButton.Item icon={<Cart />} onClick={testClick3}>
+        购物
+      </HoverButton.Item>
     </HoverButton>
   )
 }
diff --git a/src/packages/hoverbutton/demos/h5/demo6.tsx b/src/packages/hoverbutton/demos/h5/demo6.tsx
index 13422cc805..3d0e1eae8b 100644
--- a/src/packages/hoverbutton/demos/h5/demo6.tsx
+++ b/src/packages/hoverbutton/demos/h5/demo6.tsx
@@ -3,7 +3,6 @@
  */
 import React from 'react'
 import { HoverButton } from '@nutui/nutui-react'
-import { Cart } from '@nutui/icons-react'
 
 const Demo1 = () => {
   return (
@@ -47,19 +46,6 @@ const Demo1 = () => {
             238
           </div>
         </div>
-        <div
-          className="nut-hoverbutton-item-container"
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          }}
-        >
-          <Cart style={{ width: 14, height: 14, marginTop: 5 }} />
-          <div style={{ fontSize: 10, marginTop: 5, lineHeight: '9px' }}>
-            购物
-          </div>
-        </div>
       </HoverButton>
     </>
   )
diff --git a/src/packages/hoverbutton/demos/taro/demo2.tsx b/src/packages/hoverbutton/demos/taro/demo2.tsx
index 5dff2bfb99..9b33e60d82 100644
--- a/src/packages/hoverbutton/demos/taro/demo2.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo2.tsx
@@ -21,6 +21,9 @@ const Demo2 = () => {
       <HoverButton.Item icon={<Cart />} onClick={testClick1} />
       <HoverButton.Item icon={<Cart />} onClick={testClick2} />
       <HoverButton.Item icon={<Cart />} onClick={testClick3} />
+      <HoverButton.Item icon={<Cart />} onClick={testClick3}>
+        购物
+      </HoverButton.Item>
     </HoverButton>
   )
 }
diff --git a/src/packages/hoverbutton/demos/taro/demo6.tsx b/src/packages/hoverbutton/demos/taro/demo6.tsx
index 537d46bff2..3104f48b84 100644
--- a/src/packages/hoverbutton/demos/taro/demo6.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo6.tsx
@@ -4,7 +4,6 @@
 import React from 'react'
 import { HoverButton } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
-import { Cart } from '@nutui/icons-react-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo1 = () => {
@@ -50,22 +49,6 @@ const Demo1 = () => {
             238
           </View>
         </View>
-
-        <View
-          className="nut-hoverbutton-item-container"
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          }}
-        >
-          <Cart style={{ width: 14, height: 14, marginTop: 5 }} />
-          <View
-            style={{ fontSize: 10, marginTop: 5, lineHeight: pxTransform(9) }}
-          >
-            购物
-          </View>
-        </View>
       </HoverButton>
     </>
   )
diff --git a/src/packages/hoverbutton/doc.en-US.md b/src/packages/hoverbutton/doc.en-US.md
index 10c30c0873..82e65aeb18 100644
--- a/src/packages/hoverbutton/doc.en-US.md
+++ b/src/packages/hoverbutton/doc.en-US.md
@@ -20,14 +20,6 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
-### Icon And Text
-
-:::demo
-
-<CodeBlock src='h5/demo6.tsx'></CodeBlock>
-
-:::
-
 ### Multiple Buttons
 
 :::demo
@@ -52,6 +44,14 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### Custom Node
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
diff --git a/src/packages/hoverbutton/doc.md b/src/packages/hoverbutton/doc.md
index f57d415925..3cc9374aaa 100644
--- a/src/packages/hoverbutton/doc.md
+++ b/src/packages/hoverbutton/doc.md
@@ -20,14 +20,6 @@ import { HoverButton } from '@nutui/nutui-react'
 
 :::
 
-### 按钮和文字
-
-:::demo
-
-<CodeBlock src='h5/demo6.tsx'></CodeBlock>
-
-:::
-
 ### 多个按钮
 
 :::demo
@@ -60,6 +52,14 @@ import { HoverButton } from '@nutui/nutui-react'
 
 :::
 
+### 自定义内容
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
diff --git a/src/packages/hoverbutton/doc.taro.md b/src/packages/hoverbutton/doc.taro.md
index 7a0499ca6f..f91cbb9ef5 100644
--- a/src/packages/hoverbutton/doc.taro.md
+++ b/src/packages/hoverbutton/doc.taro.md
@@ -20,14 +20,6 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
-### 按钮和文字
-
-:::demo
-
-<CodeBlock src='taro/demo6.tsx'></CodeBlock>
-
-:::
-
 ### 多个按钮
 
 :::demo
@@ -52,6 +44,14 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### 自定义内容
+
+:::demo
+
+<CodeBlock src='taro/demo6.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
diff --git a/src/packages/hoverbutton/doc.zh-TW.md b/src/packages/hoverbutton/doc.zh-TW.md
index a702481353..96cdd00313 100644
--- a/src/packages/hoverbutton/doc.zh-TW.md
+++ b/src/packages/hoverbutton/doc.zh-TW.md
@@ -20,14 +20,6 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
-### 按鈕和文字
-
-:::demo
-
-<CodeBlock src='h5/demo6.tsx'></CodeBlock>
-
-:::
-
 ### 多個按鈕
 
 :::demo
@@ -60,6 +52,14 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### 自定義內容
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
index c0ab4d9bb3..c85b2f492a 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
@@ -18,6 +18,12 @@
         margin-bottom: 0;
       }
     }
+
+    &-icontext {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
   }
 
   &-icon {
@@ -38,4 +44,15 @@
     color: $hoverbutton-item-icon-color-active;
     fill: $hoverbutton-item-icon-color-active;
   }
+
+  &-text-icon {
+    width: 14px;
+    height: 5px;
+  }
+
+  &-text {
+    font-size: 10px;
+    margin-top: 5px;
+    line-height: 9px;
+  }
 }
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx b/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx
index 846ee42180..707f27ea38 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import classNames from 'classnames'
-import { ITouchEvent, View, BaseEventOrig } from '@tarojs/components'
+import { BaseEventOrig, ITouchEvent, View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { harmony, harmonyAndRn } from '@/utils/platform-taro'
 
@@ -24,7 +24,7 @@ const isHarmony = harmony()
 const isNative = harmonyAndRn()
 
 export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
-  const { className, style, icon, onClick } = {
+  const { className, style, icon, onClick, children } = {
     ...defaultProps,
     ...props,
   } as any
@@ -49,11 +49,48 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
     isNative && setTouchStart(false)
   }
 
+  const renderBody = () => {
+    if (icon && !children)
+      return (
+        <View className={`${classPrefix}-icon`}>
+          {React.cloneElement(icon, {
+            className: 'nut-icon',
+            size: 20,
+            ...nativeProps,
+          })}
+        </View>
+      )
+    if (icon && children) {
+      return (
+        <>
+          <View
+            className={classNames({
+              [`${classPrefix}-text-icon`]: true,
+            })}
+          />
+          {React.cloneElement(icon, {
+            className: 'nut-icon',
+            size: 14,
+            ...nativeProps,
+          })}
+          <View
+            className={classNames({
+              [`${classPrefix}-text`]: true,
+            })}
+          >
+            {children}
+          </View>
+        </>
+      )
+    }
+  }
+
   return (
     <View
       className={classNames([`${classPrefix}-container`, className], {
         [`${classPrefix}-container-active`]: isNative && isTouchStart,
         [`${classPrefix}-container-harmony`]: isHarmony,
+        [`${classPrefix}-container-icontext`]: icon && children,
       })}
       style={style}
       onTouchStart={handleActiveStart}
@@ -61,13 +98,7 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
       onTouchCancel={handleActiveEnd}
       onClick={handleClick}
     >
-      <View className={`${classPrefix}-icon`}>
-        {React.cloneElement(icon, {
-          className: 'nut-icon',
-          size: 20,
-          ...nativeProps,
-        })}
-      </View>
+      {renderBody()}
     </View>
   )
 }
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.tsx b/src/packages/hoverbuttonitem/hoverbuttonitem.tsx
index 357938595a..ccccfcea11 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.tsx
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.tsx
@@ -18,7 +18,7 @@ const defaultProps = {
 const classPrefix = 'nut-hoverbutton-item'
 
 export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
-  const { className, style, icon, onClick } = {
+  const { className, children, style, icon, onClick } = {
     ...defaultProps,
     ...props,
   }
@@ -29,20 +29,53 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
     }
   }
 
+  const renderBody = () => {
+    if (icon && !children)
+      return (
+        <div className={`${classPrefix}-icon`}>
+          {React.isValidElement(icon)
+            ? React.cloneElement(icon, {
+                // @ts-ignore
+                size: 20,
+              })
+            : icon}
+        </div>
+      )
+    if (icon && children) {
+      return (
+        <>
+          <div
+            className={classNames({
+              [`${classPrefix}-text-icon`]: true,
+            })}
+          />
+          {React.isValidElement(icon)
+            ? React.cloneElement(icon, {
+                // @ts-ignore
+                size: 14,
+              })
+            : icon}
+          <div
+            className={classNames({
+              [`${classPrefix}-text`]: true,
+            })}
+          >
+            {children}
+          </div>
+        </>
+      )
+    }
+  }
+
   return (
     <div
-      className={classNames([`${classPrefix}-container`, className])}
+      className={classNames([`${classPrefix}-container`, className], {
+        [`${classPrefix}-container-icontext`]: icon && children,
+      })}
       style={style}
       onClick={handleClick}
     >
-      <div className={`${classPrefix}-icon`}>
-        {React.isValidElement(icon)
-          ? React.cloneElement(icon, {
-              // @ts-ignore
-              size: 20,
-            })
-          : icon}
-      </div>
+      {renderBody()}
     </div>
   )
 }

From d16bb67bba5552de715563fad62d7cc107faf830 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 4 Dec 2024 15:35:50 +0800
Subject: [PATCH 08/14] fix: add constant

---
 src/packages/hoverbutton/constant.ts          | 1 +
 src/packages/hoverbutton/hoverbutton.taro.tsx | 5 ++---
 src/packages/hoverbutton/hoverbutton.tsx      | 5 ++---
 3 files changed, 5 insertions(+), 6 deletions(-)
 create mode 100644 src/packages/hoverbutton/constant.ts

diff --git a/src/packages/hoverbutton/constant.ts b/src/packages/hoverbutton/constant.ts
new file mode 100644
index 0000000000..d3b3791a16
--- /dev/null
+++ b/src/packages/hoverbutton/constant.ts
@@ -0,0 +1 @@
+export const UI_BOTTOM_DISTANCE = 60
diff --git a/src/packages/hoverbutton/hoverbutton.taro.tsx b/src/packages/hoverbutton/hoverbutton.taro.tsx
index 72bc990a3a..62fecfe629 100644
--- a/src/packages/hoverbutton/hoverbutton.taro.tsx
+++ b/src/packages/hoverbutton/hoverbutton.taro.tsx
@@ -9,6 +9,7 @@ import HoverButtonItem, {
 } from '@/packages/hoverbuttonitem/index.taro'
 import SafeArea from '@/packages/safearea/index.taro'
 import pxTransform from '@/utils/px-transform'
+import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/constant'
 
 export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps {
   zIndex: number
@@ -36,10 +37,8 @@ export const HoverButton: FunctionComponent<
 
   const baseStyle = { ...style }
 
-  const UI_GUIDE = 60
-
   if (tabbarHeight) {
-    baseStyle.bottom = pxTransform(tabbarHeight + UI_GUIDE)
+    baseStyle.bottom = pxTransform(tabbarHeight + UI_BOTTOM_DISTANCE)
   }
 
   if (typeof zIndex !== 'undefined') {
diff --git a/src/packages/hoverbutton/hoverbutton.tsx b/src/packages/hoverbutton/hoverbutton.tsx
index 9dce88fd2f..01fb3ad026 100644
--- a/src/packages/hoverbutton/hoverbutton.tsx
+++ b/src/packages/hoverbutton/hoverbutton.tsx
@@ -6,6 +6,7 @@ import HoverButtonItem, {
   HoverButtonItemProps,
 } from '@/packages/hoverbuttonitem/index'
 import SafeArea from '@/packages/safearea/index'
+import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/constant'
 
 export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps {
   zIndex: number
@@ -33,10 +34,8 @@ export const HoverButton: FunctionComponent<
 
   const baseStyle = { ...style }
 
-  const UI_GUIDE = 60
-
   if (tabbarHeight) {
-    const bottom = tabbarHeight + UI_GUIDE
+    const bottom = tabbarHeight + UI_BOTTOM_DISTANCE
     baseStyle.bottom = `${bottom}px`
   }
 

From 9a10f483d028fe19532c831b36998ab30d79a0d3 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 4 Dec 2024 18:58:24 +0800
Subject: [PATCH 09/14] chore: extract function

---
 .../hoverbuttonitem/hoverbuttonitem.scss      |  8 ++++++++
 .../hoverbuttonitem/hoverbuttonitem.taro.tsx  | 17 +++--------------
 .../hoverbuttonitem/hoverbuttonitem.tsx       | 19 +++----------------
 src/packages/hoverbuttonitem/utils.ts         | 10 ++++++++++
 4 files changed, 24 insertions(+), 30 deletions(-)
 create mode 100644 src/packages/hoverbuttonitem/utils.ts

diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
index c85b2f492a..5f9ad95c88 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
@@ -23,6 +23,13 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+
+      .nut-icon {
+        display: block;
+        width: 14px;
+        height: 14px;
+        font-size: 14px;
+      }
     }
   }
 
@@ -37,6 +44,7 @@
       display: block;
       width: 20px;
       height: 20px;
+      font-size: 20px;
     }
   }
 
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx b/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx
index 707f27ea38..bf6010de3d 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { BaseEventOrig, ITouchEvent, View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { harmony, harmonyAndRn } from '@/utils/platform-taro'
+import { getIcon } from '@/packages/hoverbuttonitem/utils'
 
 export interface HoverButtonItemProps extends BasicComponent {
   icon?: React.ReactNode
@@ -51,15 +52,7 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
 
   const renderBody = () => {
     if (icon && !children)
-      return (
-        <View className={`${classPrefix}-icon`}>
-          {React.cloneElement(icon, {
-            className: 'nut-icon',
-            size: 20,
-            ...nativeProps,
-          })}
-        </View>
-      )
+      return <View className={`${classPrefix}-icon`}>{getIcon(icon)}</View>
     if (icon && children) {
       return (
         <>
@@ -68,11 +61,7 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
               [`${classPrefix}-text-icon`]: true,
             })}
           />
-          {React.cloneElement(icon, {
-            className: 'nut-icon',
-            size: 14,
-            ...nativeProps,
-          })}
+          {getIcon(icon)}
           <View
             className={classNames({
               [`${classPrefix}-text`]: true,
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.tsx b/src/packages/hoverbuttonitem/hoverbuttonitem.tsx
index ccccfcea11..3195c99392 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.tsx
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { getIcon } from '@/packages/hoverbuttonitem/utils'
 
 export interface HoverButtonItemProps extends BasicComponent {
   className?: string
@@ -31,16 +32,7 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
 
   const renderBody = () => {
     if (icon && !children)
-      return (
-        <div className={`${classPrefix}-icon`}>
-          {React.isValidElement(icon)
-            ? React.cloneElement(icon, {
-                // @ts-ignore
-                size: 20,
-              })
-            : icon}
-        </div>
-      )
+      return <div className={`${classPrefix}-icon`}>{getIcon(icon)}</div>
     if (icon && children) {
       return (
         <>
@@ -49,12 +41,7 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
               [`${classPrefix}-text-icon`]: true,
             })}
           />
-          {React.isValidElement(icon)
-            ? React.cloneElement(icon, {
-                // @ts-ignore
-                size: 14,
-              })
-            : icon}
+          {getIcon(icon)}
           <div
             className={classNames({
               [`${classPrefix}-text`]: true,
diff --git a/src/packages/hoverbuttonitem/utils.ts b/src/packages/hoverbuttonitem/utils.ts
new file mode 100644
index 0000000000..2309823be4
--- /dev/null
+++ b/src/packages/hoverbuttonitem/utils.ts
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const getIcon = (icon: React.ReactNode) => {
+  return React.isValidElement(icon)
+    ? React.cloneElement(icon, {
+        // @ts-ignore
+        className: 'nut-icon',
+      })
+    : icon
+}

From d5e39c4b2efe0155d64bcba3d654f1c52f4cea8d Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 4 Dec 2024 19:06:05 +0800
Subject: [PATCH 10/14] chore: test

---
 src/packages/configprovider/types.ts                   |  7 +------
 .../__test__/__snapshots__/hoverbutton.spec.tsx.snap   | 10 +++++-----
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
index a2997f2636..4954e8181a 100644
--- a/src/packages/configprovider/types.ts
+++ b/src/packages/configprovider/types.ts
@@ -333,19 +333,13 @@ export type NutCSSVariables =
   | 'nutuiCalendarDayFontWeight'
   | 'nutuiCalendarDayActiveBorderRadius'
   | 'nutuiHoverbuttonSpacing'
-  | 'nutuiSpacing16'
   | 'nutuiHoverbuttonPositionBottom'
   | 'nutuiHoverbuttonPositionRight'
   | 'nutuiHoverbuttonItemBorderColor'
-  | 'nutuiBlack3'
   | 'nutuiHoverbuttonItemBackground'
-  | 'nutuiGray1'
   | 'nutuiHoverbuttonItemBackgroundActive'
-  | 'nutuiGray3'
   | 'nutuiHoverbuttonItemIconColor'
-  | 'nutuiGray7'
   | 'nutuiHoverbuttonItemIconColorActive'
-  | 'nutuiGray6'
   | 'nutuiOverlayBgColor'
   | 'nutuiOverlayZIndex'
   | 'nutuiOverlayContentBgColor'
@@ -816,4 +810,5 @@ export type NutCSSVariables =
   | 'nutuiResultpageDescriptionLineHeight'
   | 'nutuiResultpageActionsMarginTop'
   | 'nutuiSafeAreaMultiple'
+  | 'nutuiBlack3'
   | 'nutuiBlack1'
diff --git a/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap b/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap
index e1470c3bce..708b0c6a47 100644
--- a/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap
+++ b/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`child element count 1`] = `
         >
           <svg
             aria-labelledby="Cart"
-            class="nut-icon nut-icon-Cart "
+            class="nut-icon nut-icon-Cart nut-icon"
             role="presentation"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +37,7 @@ exports[`child element count 1`] = `
         >
           <svg
             aria-labelledby="Cart"
-            class="nut-icon nut-icon-Cart "
+            class="nut-icon nut-icon-Cart nut-icon"
             role="presentation"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"
@@ -58,7 +58,7 @@ exports[`child element count 1`] = `
         >
           <svg
             aria-labelledby="Cart"
-            class="nut-icon nut-icon-Cart "
+            class="nut-icon nut-icon-Cart nut-icon"
             role="presentation"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"
@@ -95,7 +95,7 @@ exports[`emit click event 1`] = `
         >
           <svg
             aria-labelledby="Cart"
-            class="nut-icon nut-icon-Cart "
+            class="nut-icon nut-icon-Cart nut-icon"
             role="presentation"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"
@@ -133,7 +133,7 @@ exports[`tabbar height 1`] = `
         >
           <svg
             aria-labelledby="Cart"
-            class="nut-icon nut-icon-Cart "
+            class="nut-icon nut-icon-Cart nut-icon"
             role="presentation"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"

From d596e964a6c8b072e3326b67315ee7008739b7bc Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 4 Dec 2024 19:10:55 +0800
Subject: [PATCH 11/14] chore: test

---
 .../__snapshots__/hoverbutton.spec.tsx.snap   | 25 +++++++++++++++++++
 .../hoverbutton/__test__/hoverbutton.spec.tsx |  3 ++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap b/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap
index 708b0c6a47..628e966c95 100644
--- a/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap
+++ b/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap
@@ -71,6 +71,31 @@ exports[`child element count 1`] = `
           </svg>
         </div>
       </div>
+      <div
+        class="nut-hoverbutton-item-container nut-hoverbutton-item-container-icontext"
+      >
+        <div
+          class="nut-hoverbutton-item-text-icon"
+        />
+        <svg
+          aria-labelledby="Cart"
+          class="nut-icon nut-icon-Cart nut-icon"
+          role="presentation"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 65.17c0-24.21 19.37-43.84 43.24-43.84h51.14c70.46 0 128.85 55.4 133.55 126.68l.74 11.12h661.46c81.45 0 144 73.15 132.48 154.9l-33.02 234.45c-14.63 103.94-97.49 184.23-200.58 194.35l-467.47 45.86C246.4 796.07 180.12 739 175.1 662.63l-30.03-456.32v-.76l-3.42-51.69c-1.66-25.24-22.34-44.84-47.27-44.85H43.24C19.35 109.01 0 89.38 0 65.17m234.45 181.66 26.95 409.98c1.77 27.03 25.22 47.21 51.82 44.59l467.47-45.87c63.36-6.19 114.28-55.55 123.29-119.44L937 301.63c4.1-28.93-18.05-54.83-46.87-54.82h-655.7zm64.22 670.5a85.33 85.33 0 1 1-170.67 0 85.33 85.33 0 0 1 170.67 0M896 1002.67A85.33 85.33 0 1 0 896 832a85.33 85.33 0 0 0 0 170.67"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+        <div
+          class="nut-hoverbutton-item-text"
+        >
+          购物
+        </div>
+      </div>
     </div>
     <div
       class="nut-safe-area nut-safe-area-position-bottom"
diff --git a/src/packages/hoverbutton/__test__/hoverbutton.spec.tsx b/src/packages/hoverbutton/__test__/hoverbutton.spec.tsx
index 4039ba1c6c..a7c832ec87 100644
--- a/src/packages/hoverbutton/__test__/hoverbutton.spec.tsx
+++ b/src/packages/hoverbutton/__test__/hoverbutton.spec.tsx
@@ -21,9 +21,10 @@ test('child element count', () => {
       <HoverButton.Item icon={<Cart />} />
       <HoverButton.Item icon={<Cart />} />
       <HoverButton.Item icon={<Cart />} />
+      <HoverButton.Item icon={<Cart />}>购物</HoverButton.Item>
     </HoverButton>
   )
-  expect(container.querySelector('.nut-hoverbutton')?.childElementCount).toBe(3)
+  expect(container.querySelector('.nut-hoverbutton')?.childElementCount).toBe(4)
   expect(container).toMatchSnapshot()
 })
 

From 4b68760c81e982a52c8b84a4e040d03fac651cd0 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 4 Dec 2024 19:19:02 +0800
Subject: [PATCH 12/14] chore: build

---
 scripts/build-taro.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs
index ae4f270888..7432ddce4c 100644
--- a/scripts/build-taro.mjs
+++ b/scripts/build-taro.mjs
@@ -70,6 +70,7 @@ async function buildES(p) {
       'src/packages/**/types.ts',
       'src/packages/**/context.ts',
       'src/packages/**/utils.ts',
+      'src/packages/**/constant.ts',
       'src/utils/**/*.{ts,tsx}',
       'src/locales/*.ts',
     ],

From 76e8f49246a9c9d33c35d974a020040713f0fd62 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 4 Dec 2024 19:20:58 +0800
Subject: [PATCH 13/14] chore: build

---
 scripts/build-taro.mjs                             | 1 -
 src/packages/hoverbutton/hoverbutton.taro.tsx      | 2 +-
 src/packages/hoverbutton/hoverbutton.tsx           | 2 +-
 src/packages/hoverbutton/{constant.ts => utils.ts} | 0
 4 files changed, 2 insertions(+), 3 deletions(-)
 rename src/packages/hoverbutton/{constant.ts => utils.ts} (100%)

diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs
index 7432ddce4c..ae4f270888 100644
--- a/scripts/build-taro.mjs
+++ b/scripts/build-taro.mjs
@@ -70,7 +70,6 @@ async function buildES(p) {
       'src/packages/**/types.ts',
       'src/packages/**/context.ts',
       'src/packages/**/utils.ts',
-      'src/packages/**/constant.ts',
       'src/utils/**/*.{ts,tsx}',
       'src/locales/*.ts',
     ],
diff --git a/src/packages/hoverbutton/hoverbutton.taro.tsx b/src/packages/hoverbutton/hoverbutton.taro.tsx
index 62fecfe629..983cf02ada 100644
--- a/src/packages/hoverbutton/hoverbutton.taro.tsx
+++ b/src/packages/hoverbutton/hoverbutton.taro.tsx
@@ -9,7 +9,7 @@ import HoverButtonItem, {
 } from '@/packages/hoverbuttonitem/index.taro'
 import SafeArea from '@/packages/safearea/index.taro'
 import pxTransform from '@/utils/px-transform'
-import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/constant'
+import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/utils'
 
 export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps {
   zIndex: number
diff --git a/src/packages/hoverbutton/hoverbutton.tsx b/src/packages/hoverbutton/hoverbutton.tsx
index 01fb3ad026..16d5dabc0b 100644
--- a/src/packages/hoverbutton/hoverbutton.tsx
+++ b/src/packages/hoverbutton/hoverbutton.tsx
@@ -6,7 +6,7 @@ import HoverButtonItem, {
   HoverButtonItemProps,
 } from '@/packages/hoverbuttonitem/index'
 import SafeArea from '@/packages/safearea/index'
-import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/constant'
+import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/utils'
 
 export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps {
   zIndex: number
diff --git a/src/packages/hoverbutton/constant.ts b/src/packages/hoverbutton/utils.ts
similarity index 100%
rename from src/packages/hoverbutton/constant.ts
rename to src/packages/hoverbutton/utils.ts

From 58b3240425424278982ef1d86e5f2849970ec797 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 5 Dec 2024 12:10:36 +0800
Subject: [PATCH 14/14] =?UTF-8?q?fix:=20=E4=BF=AE=E8=AE=A2demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/hoverbutton/demo.taro.tsx        | 24 +++++++++----------
 src/packages/hoverbutton/demo.tsx             | 19 +++++++--------
 src/packages/hoverbutton/demos/h5/demo2.tsx   |  1 -
 src/packages/hoverbutton/demos/taro/demo2.tsx |  1 -
 4 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/packages/hoverbutton/demo.taro.tsx b/src/packages/hoverbutton/demo.taro.tsx
index af954cca2e..71f9f29d29 100644
--- a/src/packages/hoverbutton/demo.taro.tsx
+++ b/src/packages/hoverbutton/demo.taro.tsx
@@ -10,7 +10,7 @@ import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo6 from './demos/taro/demo6'
 import { harmonyAndRn } from '@/utils/platform-taro'
-// import Demo5 from './demos/taro/demo5'
+import Demo5 from './demos/taro/demo5'
 
 const isNative = harmonyAndRn()
 
@@ -28,7 +28,7 @@ const HoverDemo = () => {
     'zh-TW': {
       show: '展示',
       basic: '基礎用法',
-      customNode: '按鈕和文字',
+      customNode: '自定义内容',
       multiButtons: '多個按鈕',
       hasTabbar: '有底部導航欄的情況',
       customZIndex: '自定義層級',
@@ -37,7 +37,7 @@ const HoverDemo = () => {
     'en-US': {
       show: 'Show ',
       basic: 'Basic Usage',
-      customNode: 'Icon And Text',
+      customNode: 'Custom Node',
       multiButtons: 'Multiple Buttons',
       hasTabbar: 'With Tabbar',
       customZIndex: 'Custom Z-Index',
@@ -86,15 +86,13 @@ const HoverDemo = () => {
         />
 
         {/* @TODO RN、鸿蒙端暂不支持 ConfigProvider */}
-        {/* {!isNative && <View className="h2">{translated.customSpacing}</View>}
-        {!isNative && (
-          <Cell
-            title={`${translated.show}${translated.customSpacing}`}
-            onClick={() => {
-              setCurDemo('customSpacing')
-            }}
-          />
-        )} */}
+        <View className="h2">{translated.customSpacing}</View>
+        <Cell
+          title={`${translated.show}${translated.customSpacing}`}
+          onClick={() => {
+            setCurDemo('customSpacing')
+          }}
+        />
 
         <View className="h2">{translated.customNode}</View>
         <Cell
@@ -110,7 +108,7 @@ const HoverDemo = () => {
       {curDemo === 'multiButtons' && <Demo2 />}
       {curDemo === 'hasTabbar' && <Demo3 />}
       {curDemo === 'customZIndex' && <Demo4 />}
-      {/* {curDemo === 'customSpacing' && <Demo5 />} */}
+      {curDemo === 'customSpacing' && <Demo5 />}
     </View>
   )
 }
diff --git a/src/packages/hoverbutton/demo.tsx b/src/packages/hoverbutton/demo.tsx
index 41ac0261d7..0e24c8e4c0 100644
--- a/src/packages/hoverbutton/demo.tsx
+++ b/src/packages/hoverbutton/demo.tsx
@@ -13,7 +13,7 @@ const HoverButtonDemo = () => {
     'zh-CN': {
       show: '展示',
       basic: '基础用法',
-      customNode: '按钮和文字',
+      customNode: '自定义内容',
       multiButtons: '多个按钮',
       hasTabbar: '有底部导航栏的情况',
       customZIndex: '自定义层级',
@@ -87,16 +87,15 @@ const HoverButtonDemo = () => {
           }}
         />
         {curDemo === 'customSpacing' && <Demo5 />}
+        <h2>{translated.customNode}</h2>
+        <Cell
+          title={`${translated.show}${translated.customNode}`}
+          onClick={() => {
+            setCurDemo('customNode')
+          }}
+        />
+        {curDemo === 'customNode' && <Demo6 />}
       </div>
-
-      <h2>{translated.customNode}</h2>
-      <Cell
-        title={`${translated.show}${translated.customNode}`}
-        onClick={() => {
-          setCurDemo('customNode')
-        }}
-      />
-      {curDemo === 'customNode' && <Demo6 />}
     </>
   )
 }
diff --git a/src/packages/hoverbutton/demos/h5/demo2.tsx b/src/packages/hoverbutton/demos/h5/demo2.tsx
index c0910819ac..0131d06d6d 100644
--- a/src/packages/hoverbutton/demos/h5/demo2.tsx
+++ b/src/packages/hoverbutton/demos/h5/demo2.tsx
@@ -29,7 +29,6 @@ const Demo2 = () => {
     <HoverButton>
       <HoverButton.Item icon={<Cart />} onClick={testClick1} />
       <HoverButton.Item icon={<Cart />} onClick={testClick2} />
-      <HoverButton.Item icon={<Cart />} onClick={testClick3} />
       <HoverButton.Item icon={<Cart />} onClick={testClick3}>
         购物
       </HoverButton.Item>
diff --git a/src/packages/hoverbutton/demos/taro/demo2.tsx b/src/packages/hoverbutton/demos/taro/demo2.tsx
index 9b33e60d82..c0e0a23e60 100644
--- a/src/packages/hoverbutton/demos/taro/demo2.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo2.tsx
@@ -20,7 +20,6 @@ const Demo2 = () => {
     <HoverButton>
       <HoverButton.Item icon={<Cart />} onClick={testClick1} />
       <HoverButton.Item icon={<Cart />} onClick={testClick2} />
-      <HoverButton.Item icon={<Cart />} onClick={testClick3} />
       <HoverButton.Item icon={<Cart />} onClick={testClick3}>
         购物
       </HoverButton.Item>