From 92b4a543296d3def37151c22149fac8a3b7ab49a Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Thu, 7 Nov 2024 11:30:54 +0800
Subject: [PATCH 01/10] =?UTF-8?q?fix:=20=E9=80=82=E9=85=8Dv14&=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/badge/badge.harmony.css     |  9 +++-
 src/packages/switch/demo.taro.tsx        | 14 ++++--
 src/packages/switch/demo.tsx             | 12 ++++--
 src/packages/switch/demos/h5/demo3.tsx   |  7 ++-
 src/packages/switch/demos/h5/demo4.tsx   | 15 +++----
 src/packages/switch/demos/h5/demo5.tsx   |  9 +---
 src/packages/switch/demos/h5/demo6.tsx   | 10 ++++-
 src/packages/switch/demos/h5/demo7.tsx   | 17 ++++++++
 src/packages/switch/demos/taro/demo3.tsx |  7 ++-
 src/packages/switch/demos/taro/demo4.tsx | 19 +++------
 src/packages/switch/demos/taro/demo5.tsx |  9 +---
 src/packages/switch/demos/taro/demo6.tsx | 12 +++++-
 src/packages/switch/demos/taro/demo7.tsx | 17 ++++++++
 src/packages/switch/doc.en-US.md         | 48 ++++++++++++---------
 src/packages/switch/doc.md               | 42 +++++++++++-------
 src/packages/switch/doc.taro.md          | 42 +++++++++++-------
 src/packages/switch/doc.zh-TW.md         | 48 ++++++++++++---------
 src/packages/switch/switch.harmony.css   | 54 ++++++++++++++----------
 src/packages/switch/switch.scss          | 52 +++++++++++++----------
 src/packages/switch/switch.taro.tsx      | 35 +++++++--------
 src/packages/switch/switch.tsx           | 35 +++++++--------
 src/styles/variables.scss                | 51 +++++++++++-----------
 22 files changed, 334 insertions(+), 230 deletions(-)
 create mode 100644 src/packages/switch/demos/h5/demo7.tsx
 create mode 100644 src/packages/switch/demos/taro/demo7.tsx

diff --git a/src/packages/badge/badge.harmony.css b/src/packages/badge/badge.harmony.css
index b5f2467d6f..4c2e18621b 100644
--- a/src/packages/badge/badge.harmony.css
+++ b/src/packages/badge/badge.harmony.css
@@ -7,7 +7,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
   top: -10%;
   right: -15%;
   padding: 3px;
@@ -27,7 +27,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
   color: #fff;
   padding: 0 4px;
   font-size: 10px;
@@ -54,6 +54,11 @@
   border-radius: 7px;
   padding: 0;
 }
+.nut-badge-outline .nut-badge-content {
+  background: #ffffff;
+  border: 1px solid #ff0f23;
+  color: #ff0f23;
+}
 
 [dir=rtl] .nut-badge-icon,
 .nut-rtl .nut-badge-icon {
diff --git a/src/packages/switch/demo.taro.tsx b/src/packages/switch/demo.taro.tsx
index 423b4968bb..ac961c8b0d 100644
--- a/src/packages/switch/demo.taro.tsx
+++ b/src/packages/switch/demo.taro.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ScrollView, View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
-import { useTranslate } from '@/sites/assets/locale//taro'
+import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
@@ -9,6 +9,7 @@ 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 SwitchDemo = () => {
   const [translated] = useTranslate({
@@ -18,6 +19,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定义颜色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '触发了 onChange 事件，开关状态：',
     },
     'zh-TW': {
@@ -26,6 +28,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定義顏色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '觸發了 onChange 事件，開關狀態：',
     },
     'en-US': {
@@ -34,6 +37,7 @@ const SwitchDemo = () => {
       asyncControl: 'controlled',
       customColor: 'Custom Color',
       supportText: 'Support Text',
+      supportIcon: 'Support Icon',
       eventTip: 'Emit onChange event, current state:',
     },
   })
@@ -47,12 +51,14 @@ const SwitchDemo = () => {
         <Demo2 />
         <View className="h2">{translated.disabled}</View>
         <Demo3 />
-        <View className="h2">{translated.eventTip}</View>
+        <View className="h2">{translated.supportText}</View>
         <Demo4 />
-        <View className="h2">{translated.customColor}</View>
+        <View className="h2">{translated.supportIcon}</View>
         <Demo5 />
-        <View className="h2">{translated.supportText}</View>
+        <View className="h2">{translated.eventTip}</View>
         <Demo6 />
+        <View className="h2">{translated.customColor}</View>
+        <Demo7 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/switch/demo.tsx b/src/packages/switch/demo.tsx
index 89e3addecf..7d33a634d2 100644
--- a/src/packages/switch/demo.tsx
+++ b/src/packages/switch/demo.tsx
@@ -6,6 +6,7 @@ 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 SwitchDemo = () => {
   const [translated] = useTranslate({
@@ -15,6 +16,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定义颜色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '触发了 onChange 事件，开关状态：',
     },
     'zh-TW': {
@@ -23,6 +25,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定義顏色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '觸發了 onChange 事件，開關狀態：',
     },
     'en-US': {
@@ -31,6 +34,7 @@ const SwitchDemo = () => {
       asyncControl: 'controlled',
       customColor: 'Custom Color',
       supportText: 'Support Text',
+      supportIcon: 'Support Icon',
       eventTip: 'Emit onChange event, current state:',
     },
   })
@@ -43,12 +47,14 @@ const SwitchDemo = () => {
         <Demo2 />
         <h2>{translated.disabled}</h2>
         <Demo3 />
-        <h2>{translated.eventTip}</h2>
+        <h2>{translated.supportText}</h2>
         <Demo4 />
-        <h2>{translated.customColor}</h2>
+        <h2>{translated.supportIcon}</h2>
         <Demo5 />
-        <h2>{translated.supportText}</h2>
+        <h2>{translated.eventTip}</h2>
         <Demo6 />
+        <h2>{translated.customColor}</h2>
+        <Demo7 />
       </div>
     </>
   )
diff --git a/src/packages/switch/demos/h5/demo3.tsx b/src/packages/switch/demos/h5/demo3.tsx
index 4de798d2f2..a216182953 100644
--- a/src/packages/switch/demos/h5/demo3.tsx
+++ b/src/packages/switch/demos/h5/demo3.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react'
+import { Cell, Switch, Space } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Switch defaultChecked disabled />
+      <Space>
+        <Switch defaultChecked disabled />
+        <Switch disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/h5/demo4.tsx b/src/packages/switch/demos/h5/demo4.tsx
index f646c3c033..19a80215ae 100644
--- a/src/packages/switch/demos/h5/demo4.tsx
+++ b/src/packages/switch/demos/h5/demo4.tsx
@@ -1,16 +1,15 @@
 import React from 'react'
-import { Cell, Switch, Toast } from '@nutui/nutui-react'
+import { Cell, Switch, Space } from '@nutui/nutui-react'
 
 const Demo4 = () => {
-  const onChange = (value: boolean, event: any) => {
-    Toast.show(`触发了onChange事件，开关状态：${value}`)
-  }
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        onChange={(value, event) => onChange(value, event)}
-      />
+      <Space>
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" />
+        <Switch defaultChecked activeText="开" inactiveText="关" />
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled />
+        <Switch activeText="开启" inactiveText="关闭" disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/h5/demo5.tsx b/src/packages/switch/demos/h5/demo5.tsx
index 0ff258eaea..17f96c53de 100644
--- a/src/packages/switch/demos/h5/demo5.tsx
+++ b/src/packages/switch/demos/h5/demo5.tsx
@@ -1,16 +1,11 @@
 import React from 'react'
 import { Cell, Switch } from '@nutui/nutui-react'
+import { Check, Close } from '@nutui/icons-react'
 
 const Demo5 = () => {
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        style={{
-          '--nutui-switch-open-background-color': 'blue',
-          '--nutui-switch-close-line-background-color': '#ebebeb',
-        }}
-      />
+      <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} />
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/h5/demo6.tsx b/src/packages/switch/demos/h5/demo6.tsx
index 09881801d2..0ac071af59 100644
--- a/src/packages/switch/demos/h5/demo6.tsx
+++ b/src/packages/switch/demos/h5/demo6.tsx
@@ -1,10 +1,16 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react'
+import { Cell, Switch, Toast } from '@nutui/nutui-react'
 
 const Demo6 = () => {
+  const onChange = (value: boolean, event: any) => {
+    Toast.show(`触发了onChange事件，开关状态：${value}`)
+  }
   return (
     <Cell>
-      <Switch defaultChecked activeText="开" inactiveText="关" />
+      <Switch
+        defaultChecked
+        onChange={(value, event) => onChange(value, event)}
+      />
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/h5/demo7.tsx b/src/packages/switch/demos/h5/demo7.tsx
new file mode 100644
index 0000000000..b69b3e5688
--- /dev/null
+++ b/src/packages/switch/demos/h5/demo7.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Cell, Switch } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+  return (
+    <Cell>
+      <Switch
+        defaultChecked
+        style={{
+          '--nutui-switch-open-background-color': 'blue',
+          '--nutui-switch-close-line-background-color': '#ebebeb',
+        }}
+      />
+    </Cell>
+  )
+}
+export default Demo7
diff --git a/src/packages/switch/demos/taro/demo3.tsx b/src/packages/switch/demos/taro/demo3.tsx
index 6cb94c6667..76e8d724c9 100644
--- a/src/packages/switch/demos/taro/demo3.tsx
+++ b/src/packages/switch/demos/taro/demo3.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
+import { Cell, Switch, Space } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Switch defaultChecked disabled />
+      <Space>
+        <Switch defaultChecked disabled />
+        <Switch disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/taro/demo4.tsx b/src/packages/switch/demos/taro/demo4.tsx
index c779c6f803..e01ad5d9b8 100644
--- a/src/packages/switch/demos/taro/demo4.tsx
+++ b/src/packages/switch/demos/taro/demo4.tsx
@@ -1,20 +1,15 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
+import { Cell, Switch, Space } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  const onChange = (
-    value: boolean,
-    event: React.MouseEvent<Element, MouseEvent>
-  ) => {
-    Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` })
-  }
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        onChange={(value, event) => onChange(value, event)}
-      />
+      <Space>
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" />
+        <Switch defaultChecked activeText="开" inactiveText="关" />
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled />
+        <Switch activeText="开启" inactiveText="关闭" disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/taro/demo5.tsx b/src/packages/switch/demos/taro/demo5.tsx
index 6761f71e1b..7945d3cff3 100644
--- a/src/packages/switch/demos/taro/demo5.tsx
+++ b/src/packages/switch/demos/taro/demo5.tsx
@@ -1,16 +1,11 @@
 import React from 'react'
 import { Cell, Switch } from '@nutui/nutui-react-taro'
+import { Check, Close } from '@nutui/icons-react-taro'
 
 const Demo5 = () => {
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        style={{
-          '--nutui-switch-open-background-color': 'blue',
-          '--nutui-switch-close-line-background-color': '#ebebeb',
-        }}
-      />
+      <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} />
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/taro/demo6.tsx b/src/packages/switch/demos/taro/demo6.tsx
index efee6dbb4b..c7f3d9331f 100644
--- a/src/packages/switch/demos/taro/demo6.tsx
+++ b/src/packages/switch/demos/taro/demo6.tsx
@@ -1,10 +1,20 @@
 import React from 'react'
 import { Cell, Switch } from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
 
 const Demo6 = () => {
+  const onChange = (
+    value: boolean,
+    event: React.MouseEvent<Element, MouseEvent>
+  ) => {
+    Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` })
+  }
   return (
     <Cell>
-      <Switch defaultChecked activeText="开" inactiveText="关" />
+      <Switch
+        defaultChecked
+        onChange={(value, event) => onChange(value, event)}
+      />
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/taro/demo7.tsx b/src/packages/switch/demos/taro/demo7.tsx
new file mode 100644
index 0000000000..6550d5dec7
--- /dev/null
+++ b/src/packages/switch/demos/taro/demo7.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Cell, Switch } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+  return (
+    <Cell>
+      <Switch
+        defaultChecked
+        style={{
+          '--nutui-switch-open-background-color': 'blue',
+          '--nutui-switch-close-line-background-color': '#ebebeb',
+        }}
+      />
+    </Cell>
+  )
+}
+export default Demo7
diff --git a/src/packages/switch/doc.en-US.md b/src/packages/switch/doc.en-US.md
index e653f57d4a..349568059a 100644
--- a/src/packages/switch/doc.en-US.md
+++ b/src/packages/switch/doc.en-US.md
@@ -1,7 +1,5 @@
 # Switch
 
-duction
-
 Used to open or close the options.
 
 ## Import
@@ -36,7 +34,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### onChange event
+### Support text
 
 :::demo
 
@@ -44,7 +42,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### Custom color
+### Support Icon
 
 :::demo
 
@@ -52,7 +50,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### Support text
+### onChange event
 
 :::demo
 
@@ -60,6 +58,14 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
+### Custom color
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## Switch
 
 ### Props
@@ -69,8 +75,8 @@ import { Switch } from '@nutui/nutui-react'
 | defaultChecked | Switch status, uncontrolled | `boolean` | `false` |
 | checked | Switch status, controlled | `boolean` | `false` |
 | disabled | Disabled | `boolean` | `false` |
-| activeText | Text description when opening | `string` | `-` |
-| inactiveText | Text description when closed | `string` | `-` |
+| activeText | Text description when opening | `ReactNode` | `-` |
+| inactiveText | Text description when closed | `ReactNode` | `-` |
 | onChange | Trigger when switching switches | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## Theming
@@ -81,16 +87,18 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-switch-close-background-color | Switch off state background color | `$color-text-disabled` |
-| \--nutui-switch-open-background-color | Switch on background color | `$color-primary` |
-| \--nutui-switch-close-disabled-background-color | Switch off state's disabled background color | `$color-background` |
-| \--nutui-switch-open-disabled-background-color | Switch on state's disabled background color | `$color-primary-disabled-special` |
-| \--nutui-switch-width | Switch width | `40px` |
-| \--nutui-switch-height | Switch height | `24px` |
-| \--nutui-switch-line-height | Switch line height | `24px` |
-| \--nutui-switch-border-radius | Switch border radius | `8px` |
-| \--nutui-switch-inside-width | Width of button inside switch | `20px` |
-| \--nutui-switch-inside-height | Switch internal button height | `20px` |
-| \--nutui-switch-inside-open-transform | Position of internal button in switch on state | `translateX(18px)` |
-| \--nutui-switch-inside-close-transform | Switch off state internal button position | `translateX(2px)` |
-| \--nutui-switch-close-line-bg-color | Switch off state inner button line color | `#ffffff` |
+| \--nutui-switch-open-background-color | Switch on status background color | `$color-primary` |
+| \--nutui-switch-close-background-color | Switch off status background color | `$color-text-disabled` |
+| \--nutui-switch-open-disabled-background-color | Switch toggle on the background color disabled | `$color-primary-disabled-special` |
+| \--nutui-switch-close-disabled-background-color | Turn off the background color disabled | `$color-background` |
+| \--nutui-switch-close-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-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-label-text-color | Switch internal text color | `$color-primary-text` |
+| \--nutui-switch-label-font-size | Switch internal text size | `$font-size-s` |
+| \--nutui-switch-close-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 2a9773b7da..895951a798 100644
--- a/src/packages/switch/doc.md
+++ b/src/packages/switch/doc.md
@@ -34,7 +34,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### onChange事件
+### 支持文字
 
 :::demo
 
@@ -42,7 +42,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### 自定义颜色
+### 支持 Icon
 
 :::demo
 
@@ -50,7 +50,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### 支持文字
+### onChange事件
 
 :::demo
 
@@ -58,6 +58,14 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
+### 自定义颜色
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## Switch
 
 ### Props
@@ -67,8 +75,8 @@ import { Switch } from '@nutui/nutui-react'
 | defaultChecked | 开关状态，非受控 | `boolean` | `false` |
 | checked | 开关状态，受控 | `boolean` | `false` |
 | disabled | 禁用状态 | `boolean` | `false` |
-| activeText | 打开时文字描述 | `string` | `-` |
-| inactiveText | 关闭时文字描述 | `string` | `-` |
+| activeText | 打开时文字描述 | `ReactNode` | `-` |
+| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
 | onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## 主题定制
@@ -79,16 +87,18 @@ import { Switch } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-switch-close-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
 | \--nutui-switch-open-background-color | 开关打开状态背景颜色 | `$color-primary` |
-| \--nutui-switch-close-disabled-background-color | 开关关闭时的禁用时的背景颜色 | `$color-background` |
-| \--nutui-switch-open-disabled-background-color | 开关打开时的禁用时的背景颜色 | `$color-primary-disabled-special` |
-| \--nutui-switch-width | 开关宽度 | `40px` |
-| \--nutui-switch-height | 开关高度 | `24px` |
-| \--nutui-switch-line-height | 开关行高 | `24px` |
-| \--nutui-switch-border-radius | 开关圆角大小 | `8px` |
-| \--nutui-switch-inside-width | 开关内部按钮宽度 | `20px` |
-| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
-| \--nutui-switch-inside-open-transform | 开关打开状态内部按钮位置 | `translateX(18px)` |
-| \--nutui-switch-inside-close-transform | 开关关闭状态内部按钮位置 | `translateX(2px)` |
+| \--nutui-switch-close-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
+| \--nutui-switch-open-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
+| \--nutui-switch-close-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
 | \--nutui-switch-close-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
+| \--nutui-switch-width | 开关宽度 | `46px` |
+| \--nutui-switch-height | 开关高度 | `28px` |
+| \--nutui-switch-line-height | 开关行高 | `28px` |
+| \--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-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
+| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
+| \--nutui-switch-close-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
diff --git a/src/packages/switch/doc.taro.md b/src/packages/switch/doc.taro.md
index 4f0c2a965d..96636fb2af 100644
--- a/src/packages/switch/doc.taro.md
+++ b/src/packages/switch/doc.taro.md
@@ -34,7 +34,7 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 :::
 
-### onChange事件
+### 支持文字
 
 :::demo
 
@@ -42,7 +42,7 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 :::
 
-### 自定义颜色
+### 支持 Icon
 
 :::demo
 
@@ -50,7 +50,7 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 :::
 
-### 支持文字
+### onChange事件
 
 :::demo
 
@@ -58,6 +58,14 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 :::
 
+### 自定义颜色
+
+:::demo
+
+<CodeBlock src='taro/demo7.tsx'></CodeBlock>
+
+:::
+
 ## Switch
 
 ### Props
@@ -67,8 +75,8 @@ import { Switch } from '@nutui/nutui-react-taro'
 | defaultChecked | 开关状态，非受控 | `boolean` | `false` |
 | checked | 开关状态，受控 | `boolean` | `false` |
 | disabled | 禁用状态 | `boolean` | `false` |
-| activeText | 打开时文字描述 | `string` | `-` |
-| inactiveText | 关闭时文字描述 | `string` | `-` |
+| activeText | 打开时文字描述 | `ReactNode` | `-` |
+| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
 | onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## 主题定制
@@ -79,16 +87,18 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-switch-close-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
 | \--nutui-switch-open-background-color | 开关打开状态背景颜色 | `$color-primary` |
-| \--nutui-switch-close-disabled-background-color | 开关关闭时的禁用时的背景颜色 | `$color-background` |
-| \--nutui-switch-open-disabled-background-color | 开关打开时的禁用时的背景颜色 | `$color-primary-disabled-special` |
-| \--nutui-switch-width | 开关宽度 | `40px` |
-| \--nutui-switch-height | 开关高度 | `24px` |
-| \--nutui-switch-line-height | 开关行高 | `24px` |
-| \--nutui-switch-border-radius | 开关圆角大小 | `8px` |
-| \--nutui-switch-inside-width | 开关内部按钮宽度 | `20px` |
-| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
-| \--nutui-switch-inside-open-transform | 开关打开状态内部按钮位置 | `translateX(18px)` |
-| \--nutui-switch-inside-close-transform | 开关关闭状态内部按钮位置 | `translateX(2px)` |
+| \--nutui-switch-close-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
+| \--nutui-switch-open-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
+| \--nutui-switch-close-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
 | \--nutui-switch-close-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
+| \--nutui-switch-width | 开关宽度 | `46px` |
+| \--nutui-switch-height | 开关高度 | `28px` |
+| \--nutui-switch-line-height | 开关行高 | `28px` |
+| \--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-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
+| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
+| \--nutui-switch-close-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 323c27074e..3206f8cddc 100644
--- a/src/packages/switch/doc.zh-TW.md
+++ b/src/packages/switch/doc.zh-TW.md
@@ -34,7 +34,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### onChange事件
+### 支持文字
 
 :::demo
 
@@ -42,7 +42,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### 自定義顏色
+### 支持 Icon
 
 :::demo
 
@@ -50,7 +50,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### 支持文字
+### onChange事件
 
 :::demo
 
@@ -58,18 +58,26 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
+### 自定義顏色
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## Switch
 
 ### Props
 
-| 屬性 | 說明 | 類型 | 默認值 |
+| 屬性 | 説明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
 | defaultChecked | 開關狀態，非受控 | `boolean` | `false` |
 | checked | 開關狀態，受控 | `boolean` | `false` |
 | disabled | 禁用狀態 | `boolean` | `false` |
-| activeText | 打開時文字描述 | `string` | `-` |
-| inactiveText | 關閉時文字描述 | `string` | `-` |
-| onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` |
+| activeText | 打開時文字描述 | `ReactNode` | `-` |
+| inactiveText | 關閉時文字描述 | `ReactNode` | `-` |
+| onChange | 切換開關時觸髮 | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## 主題定製
 
@@ -77,18 +85,20 @@ import { Switch } from '@nutui/nutui-react'
 
 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。
 
-| 名稱 | 說明 | 默認值 |
+| 名稱 | 説明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-switch-close-background-color | 開關關閉狀態背景顏色 | `$color-text-disabled` |
 | \--nutui-switch-open-background-color | 開關打開狀態背景顏色 | `$color-primary` |
-| \--nutui-switch-close-disabled-background-color | 開關關閉時的禁用時的背景顏色 | `$color-background` |
-| \--nutui-switch-open-disabled-background-color | 開關打開時的禁用時的背景顏色 | `$color-primary-disabled-special` |
-| \--nutui-switch-width | 開關寬度 | `40px` |
-| \--nutui-switch-height | 開關高度 | `24px` |
-| \--nutui-switch-line-height | 開關行高 | `24px` |
-| \--nutui-switch-border-radius | 開關圓角大小 | `8px` |
-| \--nutui-switch-inside-width | 開關內部按鈕寬度 | `20px` |
-| \--nutui-switch-inside-height | 開關內部按鈕高度 | `20px` |
-| \--nutui-switch-inside-open-transform | 開關打開狀態內部按鈕位置 | `translateX(18px)` |
-| \--nutui-switch-inside-close-transform | 開關關閉狀態內部按鈕位置 | `translateX(2px)` |
+| \--nutui-switch-close-background-color | 開關關閉狀態背景顏色 | `$color-text-disabled` |
+| \--nutui-switch-open-disabled-background-color | 開關打開狀態禁用的背景顏色 | `$color-primary-disabled-special` |
+| \--nutui-switch-close-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `$color-background` |
 | \--nutui-switch-close-line-bg-color | 開關關閉狀態內部按鈕線條顏色 | `#ffffff` |
+| \--nutui-switch-width | 開關寬度 | `46px` |
+| \--nutui-switch-height | 開關高度 | `28px` |
+| \--nutui-switch-line-height | 開關行高 | `28px` |
+| \--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-label-text-color | 開關內部文字顏色 | `$color-primary-text` |
+| \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-s` |
+| \--nutui-switch-close-disabled-label-text-color | 開關關閉禁用內部文字顏色 | `$color-text-disabled` |
diff --git a/src/packages/switch/switch.harmony.css b/src/packages/switch/switch.harmony.css
index 205e56d2a4..6f087ac371 100644
--- a/src/packages/switch/switch.harmony.css
+++ b/src/packages/switch/switch.harmony.css
@@ -1,39 +1,40 @@
 .nut-switch {
-  cursor: pointer;
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 40px;
-  height: 24px;
-  line-height: 24px;
+  min-width: 46px;
+  height: 28px;
+  line-height: 28px;
   background-color: #ff0f23;
-  border-radius: 8px;
+  border-radius: 50px;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
   flex: 0 0 auto;
 }
 .nut-switch-button {
+  position: absolute;
+  top: 2px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  height: 20px;
-  width: 20px;
-  transform: translateX(2px);
-  border-radius: 6px;
+  height: calc(28px - 2px * 2);
+  width: calc(28px - 2px * 2);
+  border-radius: 50%;
   background: #ffffff;
-  transition: transform 0.3s;
-  box-shadow: 0 0 transparent;
+  transition: left 0.3s;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
 }
 .nut-switch-button-open {
-  transform: translateX(18px);
+  left: calc(100% - 28px + 2px);
 }
 .nut-switch-button-open-rtl {
   transform: translateX(-18px);
 }
 .nut-switch-button-close {
-  transform: translateX(2px);
+  left: 2px;
 }
 .nut-switch-button-close-rtl {
   transform: translateX(-2px);
@@ -42,30 +43,37 @@
   background-color: #c2c4cc;
 }
 .nut-switch-close-line {
-  width: 12px;
+  width: calc((28px - 2px * 2) / 2);
   height: 2px;
-  background: #fff;
+  background: #ffffff;
   border-radius: 2px;
 }
-.nut-switch-disabled {
-  background-color: #ffadbe;
-}
-.nut-switch-disabled-close {
-  background-color: #f5f6fa;
-}
 .nut-switch-label {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
   color: #ffffff;
   font-size: 12px;
 }
 .nut-switch-label-open {
-  transform: translateX(-18px);
+  margin: 0 calc(28px - 2px + 5px) 0 7px;
 }
 .nut-switch-label-open-rtl {
   transform: translateX(18px);
 }
 .nut-switch-label-close {
-  transform: translateX(18px);
+  margin: 0 7px 0 calc(28px - 2px + 5px);
 }
 .nut-switch-label-close-rtl {
   transform: translateX(-18px);
+}
+.nut-switch-label-close-disabled {
+  color: #c2c4cc;
+}
+.nut-switch-disabled {
+  background-color: #ffadbe;
+}
+.nut-switch-disabled-close {
+  background-color: #f5f6fa;
 }
\ No newline at end of file
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 9a1e7b5b00..8becab8be7 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -1,9 +1,9 @@
 .nut-switch {
-  cursor: pointer;
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: $switch-width;
+  min-width: $switch-width;
   height: $switch-height;
   line-height: $switch-line-height;
   background-color: $switch-open-background-color;
@@ -14,25 +14,26 @@
   flex: 0 0 auto; // 防止被压缩
 
   &-button {
+    position: absolute;
+    top: $switch-border-width;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    height: $switch-inside-height;
-    width: $switch-inside-width;
-    transform: $switch-inside-close-transform;
+    height: calc($switch-height - $switch-border-width * 2);
+    width: calc($switch-height - $switch-border-width * 2);
     border-radius: $switch-inside-border-radius;
     background: $color-primary-text;
-    transition: transform 0.3s;
-    box-shadow: $switch-button-box-shadow;
+    transition: left 0.3s;
+    box-shadow: $switch-inside-box-shadow;
     &-open {
-      transform: $switch-inside-open-transform;
+      left: calc(100% - $switch-height + $switch-border-width);
       &-rtl {
         transform: var(--nutui-switch-inside-open-transform, translateX(-18px));
       }
     }
     &-close {
-      transform: $switch-inside-close-transform;
+      left: $switch-border-width;
       &-rtl {
         transform: var(--nutui-switch-inside-close-transform, translateX(-2px));
       }
@@ -42,36 +43,43 @@
   &-close {
     background-color: $switch-close-background-color;
     &-line {
-      width: 12px;
+      width: calc(($switch-height - $switch-border-width * 2) / 2);
       height: 2px;
       background: $switch-close-line-background-color;
       border-radius: 2px;
     }
   }
 
-  &-disabled {
-    background-color: $switch-open-disabled-background-color;
-    &-close {
-      background-color: $switch-close-disabled-background-color;
-    }
-  }
-
   &-label {
-    color: $color-primary-text;
-    font-size: $font-size-s;
-
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    white-space: nowrap;
+    color: $switch-label-text-color;
+    font-size: $switch-label-font-size;
     &-open {
-      transform: translateX(-18px);
+      margin: 0 calc($switch-height - $switch-border-width + 5px) 0 7px;
       &-rtl {
         transform: translateX(18px);
       }
     }
 
     &-close {
-      transform: translateX(18px);
+      margin: 0 7px 0 calc($switch-height - $switch-border-width + 5px);
       &-rtl {
         transform: translateX(-18px);
       }
     }
+
+    &-close-disabled {
+      color: $switch-close-disabled-label-text-color;
+    }
+  }
+
+  &-disabled {
+    background-color: $switch-open-disabled-background-color;
+    &-close {
+      background-color: $switch-close-disabled-background-color;
+    }
   }
 }
diff --git a/src/packages/switch/switch.taro.tsx b/src/packages/switch/switch.taro.tsx
index 01a29a3f34..64976f2005 100644
--- a/src/packages/switch/switch.taro.tsx
+++ b/src/packages/switch/switch.taro.tsx
@@ -10,8 +10,8 @@ export interface SwitchProps extends BasicComponent {
   checked: boolean
   defaultChecked: boolean
   disabled: boolean
-  activeText: string
-  inactiveText: string
+  activeText: React.ReactNode
+  inactiveText: React.ReactNode
   onChange: (
     val: boolean,
     event: React.MouseEvent<Element, MouseEvent> | ITouchEvent
@@ -90,25 +90,20 @@ export const Switch: FunctionComponent<Partial<SwitchProps>> = (props) => {
         {!value && !activeText && (
           <View className={`${classPrefix}-close-line`} />
         )}
-        {activeText && (
-          <View
-            className={classNames([
-              [`${classPrefix}-label`],
-              [
-                value
-                  ? `${classPrefix}-label-open`
-                  : `${classPrefix}-label-close`,
-              ],
-              {
-                [`${classPrefix}-label-open-rtl`]: rtl && value,
-                [`${classPrefix}-button-close-rtl`]: rtl && !value,
-              },
-            ])}
-          >
-            {value ? activeText : inactiveText}
-          </View>
-        )}
       </View>
+      {activeText && (
+        <View
+          className={classNames(`${classPrefix}-label`, {
+            [`${classPrefix}-label-open`]: value,
+            [`${classPrefix}-label-close`]: !value,
+            [`${classPrefix}-label-open-rtl`]: rtl && value,
+            [`${classPrefix}-label-close-rtl`]: rtl && !value,
+            [`${classPrefix}-label-close-disabled`]: disabled && !value,
+          })}
+        >
+          {value ? activeText : inactiveText}
+        </View>
+      )}
     </View>
   )
 }
diff --git a/src/packages/switch/switch.tsx b/src/packages/switch/switch.tsx
index 53f37bb28c..7cdda7d524 100644
--- a/src/packages/switch/switch.tsx
+++ b/src/packages/switch/switch.tsx
@@ -8,8 +8,8 @@ export interface SwitchProps extends BasicComponent {
   checked: boolean
   defaultChecked: boolean
   disabled: boolean
-  activeText: string
-  inactiveText: string
+  activeText: React.ReactNode
+  inactiveText: React.ReactNode
   onChange: (val: boolean, event: React.MouseEvent) => void
 }
 const defaultProps = {
@@ -83,25 +83,20 @@ export const Switch: FunctionComponent<Partial<SwitchProps>> = (props) => {
         {!value && !activeText && (
           <div className={`${classPrefix}-close-line`} />
         )}
-        {activeText && (
-          <div
-            className={classNames([
-              [`${classPrefix}-label`],
-              [
-                value
-                  ? `${classPrefix}-label-open`
-                  : `${classPrefix}-label-close`,
-              ],
-              {
-                [`${classPrefix}-label-open-rtl`]: rtl && value,
-                [`${classPrefix}-button-close-rtl`]: rtl && !value,
-              },
-            ])}
-          >
-            {value ? activeText : inactiveText}
-          </div>
-        )}
       </div>
+      {activeText && (
+        <div
+          className={classNames(`${classPrefix}-label`, {
+            [`${classPrefix}-label-open`]: value,
+            [`${classPrefix}-label-close`]: !value,
+            [`${classPrefix}-label-open-rtl`]: rtl && value,
+            [`${classPrefix}-label-close-rtl`]: rtl && !value,
+            [`${classPrefix}-label-close-disabled`]: disabled && !value,
+          })}
+        >
+          {value ? activeText : inactiveText}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index cf74f9beac..da0d1dbc57 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -850,47 +850,50 @@ $avatar-normal-width: var(--nutui-avatar-normal-width, 40px) !default;
 $avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default;
 
 //switch（✅）
-$switch-close-background-color: var(
-  --nutui-switch-close-background-color,
-  $color-text-disabled
-) !default;
 $switch-open-background-color: var(
   --nutui-switch-open-background-color,
   $color-primary
 ) !default;
-$switch-close-disabled-background-color: var(
-  --nutui-switch-close-disabled-background-color,
-  $color-background
+$switch-close-background-color: var(
+  --nutui-switch-close-background-color,
+  $color-text-disabled
 ) !default;
 $switch-open-disabled-background-color: var(
   --nutui-switch-open-disabled-background-color,
   $color-primary-disabled-special
 ) !default;
+$switch-close-disabled-background-color: var(
+  --nutui-switch-close-disabled-background-color,
+  $color-background
+) !default;
 $switch-close-line-background-color: var(
   --nutui-switch-close-line-background-color,
-  #fff
+  #ffffff
+) !default;
+$switch-width: var(--nutui-switch-width, 46px) !default;
+$switch-height: var(--nutui-switch-height, 28px) !default;
+$switch-line-height: var(--nutui-switch-line-height, 28px) !default;
+$switch-border-radius: var(
+  --nutui-switch-border-radius,
+  $radius-circle
 ) !default;
-$switch-width: var(--nutui-switch-width, 40px) !default;
-$switch-height: var(--nutui-switch-height, 24px) !default;
-$switch-line-height: var(--nutui-switch-line-height, 24px) !default;
-$switch-border-radius: var(--nutui-switch-border-radius, 8px) !default;
-$switch-inside-width: var(--nutui-switch-inside-width, 20px) !default;
-$switch-inside-height: var(--nutui-switch-inside-height, 20px) !default;
+$switch-border-width: var(--nutui-switch-border-width, 2px) !default;
 $switch-inside-border-radius: var(
   --nutui-switch-inside-border-radius,
-  $radius-s
+  $radius-full
 ) !default;
-$switch-inside-open-transform: var(
-  --nutui-switch-inside-open-transform,
-  translateX(18px)
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 6px 0px rgba(0, 0, 0, 0.4)
 ) !default;
-$switch-inside-close-transform: var(
-  --nutui-switch-inside-close-transform,
-  translateX(2px)
+$switch-label-text-color: var(
+  --nutui-switch-label-text-color,
+  $color-primary-text
 ) !default;
-$switch-button-box-shadow: var(
-  --nutui-switch-box-shadow,
-  0 0 transparent
+$switch-label-font-size: var(--nutui--label-font-size, $font-size-s) !default;
+$switch-close-disabled-label-text-color: var(
+  --nutui-switch-close-disabled-label-text-color,
+  $color-text-disabled
 ) !default;
 
 // toast（✅）

From 20d4f477ec77df5b5bf0faa9444cf25f9d18f49c Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Fri, 8 Nov 2024 10:41:33 +0800
Subject: [PATCH 02/10] =?UTF-8?q?fix:=20=E6=94=AF=E6=8C=81rtl?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/switch/switch.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 8becab8be7..553b1ffa3c 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -29,13 +29,13 @@
     &-open {
       left: calc(100% - $switch-height + $switch-border-width);
       &-rtl {
-        transform: var(--nutui-switch-inside-open-transform, translateX(-18px));
+        left: $switch-border-width;
       }
     }
     &-close {
       left: $switch-border-width;
       &-rtl {
-        transform: var(--nutui-switch-inside-close-transform, translateX(-2px));
+        left: calc(100% - $switch-height + $switch-border-width);
       }
     }
   }
@@ -60,14 +60,14 @@
     &-open {
       margin: 0 calc($switch-height - $switch-border-width + 5px) 0 7px;
       &-rtl {
-        transform: translateX(18px);
+        margin: 0 7px 0 calc($switch-height - $switch-border-width + 5px);
       }
     }
 
     &-close {
       margin: 0 7px 0 calc($switch-height - $switch-border-width + 5px);
       &-rtl {
-        transform: translateX(-18px);
+        margin: 0 calc($switch-height - $switch-border-width + 5px) 0 7px;
       }
     }
 

From 485a534a1baccbb40e00e81873708c0ef5e0eda1 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Fri, 8 Nov 2024 10:48:54 +0800
Subject: [PATCH 03/10] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD=E5=AE=9E=E7=8E=B0=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/switch/switch.harmony.css | 11 ++++++-----
 src/packages/switch/switch.scss        |  3 ++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/packages/switch/switch.harmony.css b/src/packages/switch/switch.harmony.css
index 6f087ac371..6e088e0fda 100644
--- a/src/packages/switch/switch.harmony.css
+++ b/src/packages/switch/switch.harmony.css
@@ -15,7 +15,8 @@
 }
 .nut-switch-button {
   position: absolute;
-  top: 2px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -31,13 +32,13 @@
   left: calc(100% - 28px + 2px);
 }
 .nut-switch-button-open-rtl {
-  transform: translateX(-18px);
+  left: 2px;
 }
 .nut-switch-button-close {
   left: 2px;
 }
 .nut-switch-button-close-rtl {
-  transform: translateX(-2px);
+  left: calc(100% - 28px + 2px);
 }
 .nut-switch-close {
   background-color: #c2c4cc;
@@ -60,13 +61,13 @@
   margin: 0 calc(28px - 2px + 5px) 0 7px;
 }
 .nut-switch-label-open-rtl {
-  transform: translateX(18px);
+  margin: 0 7px 0 calc(28px - 2px + 5px);
 }
 .nut-switch-label-close {
   margin: 0 7px 0 calc(28px - 2px + 5px);
 }
 .nut-switch-label-close-rtl {
-  transform: translateX(-18px);
+  margin: 0 calc(28px - 2px + 5px) 0 7px;
 }
 .nut-switch-label-close-disabled {
   color: #c2c4cc;
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 553b1ffa3c..2ed6d2bbe1 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -15,7 +15,8 @@
 
   &-button {
     position: absolute;
-    top: $switch-border-width;
+    top: 50%;
+    transform: translateY(-50%);
     display: flex;
     flex-direction: row;
     align-items: center;

From 915250f5e759026a01b50723acc2ae067e25ca0d Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Fri, 8 Nov 2024 15:01:02 +0800
Subject: [PATCH 04/10] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/switch/switch.harmony.css | 2 +-
 src/packages/switch/switch.scss        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/packages/switch/switch.harmony.css b/src/packages/switch/switch.harmony.css
index 6e088e0fda..cbcd932c5d 100644
--- a/src/packages/switch/switch.harmony.css
+++ b/src/packages/switch/switch.harmony.css
@@ -25,7 +25,7 @@
   width: calc(28px - 2px * 2);
   border-radius: 50%;
   background: #ffffff;
-  transition: left 0.3s;
+  transition: left 0.3s linear;
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
 }
 .nut-switch-button-open {
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 2ed6d2bbe1..2c80bc9786 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -25,7 +25,7 @@
     width: calc($switch-height - $switch-border-width * 2);
     border-radius: $switch-inside-border-radius;
     background: $color-primary-text;
-    transition: left 0.3s;
+    transition: left 0.3s linear;
     box-shadow: $switch-inside-box-shadow;
     &-open {
       left: calc(100% - $switch-height + $switch-border-width);

From 400e21452d87b9d56061ba8557bae493f7b31b36 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Mon, 18 Nov 2024 17:13:57 +0800
Subject: [PATCH 05/10] =?UTF-8?q?fix:=20=E9=80=82=E9=85=8Dv14?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/switch/demos/h5/demo5.tsx   | 17 +++++++++++++++--
 src/packages/switch/demos/taro/demo5.tsx | 17 +++++++++++++++--
 src/packages/switch/switch.scss          | 14 ++++++++++----
 src/styles/variables.scss                | 16 +++++++++++++++-
 4 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/src/packages/switch/demos/h5/demo5.tsx b/src/packages/switch/demos/h5/demo5.tsx
index 17f96c53de..d3907aa3f3 100644
--- a/src/packages/switch/demos/h5/demo5.tsx
+++ b/src/packages/switch/demos/h5/demo5.tsx
@@ -1,11 +1,24 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react'
+import { Cell, Space, Switch } from '@nutui/nutui-react'
 import { Check, Close } from '@nutui/icons-react'
 
 const Demo5 = () => {
   return (
     <Cell>
-      <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} />
+      <Space>
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+        />
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+          disabled
+        />
+        <Switch activeText={<Check />} inactiveText={<Close />} disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/taro/demo5.tsx b/src/packages/switch/demos/taro/demo5.tsx
index 7945d3cff3..f1a3a14df4 100644
--- a/src/packages/switch/demos/taro/demo5.tsx
+++ b/src/packages/switch/demos/taro/demo5.tsx
@@ -1,11 +1,24 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
+import { Cell, Space, Switch } from '@nutui/nutui-react-taro'
 import { Check, Close } from '@nutui/icons-react-taro'
 
 const Demo5 = () => {
   return (
     <Cell>
-      <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} />
+      <Space>
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+        />
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+          disabled
+        />
+        <Switch activeText={<Check />} inactiveText={<Close />} disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 2c80bc9786..9fd450f356 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -58,22 +58,28 @@
     white-space: nowrap;
     color: $switch-label-text-color;
     font-size: $switch-label-font-size;
+    .nut-icon {
+      color: $switch-label-text-color;
+    }
     &-open {
-      margin: 0 calc($switch-height - $switch-border-width + 5px) 0 7px;
+      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       &-rtl {
-        margin: 0 7px 0 calc($switch-height - $switch-border-width + 5px);
+        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       }
     }
 
     &-close {
-      margin: 0 7px 0 calc($switch-height - $switch-border-width + 5px);
+      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       &-rtl {
-        margin: 0 calc($switch-height - $switch-border-width + 5px) 0 7px;
+        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       }
     }
 
     &-close-disabled {
       color: $switch-close-disabled-label-text-color;
+      .nut-icon {
+        color: $switch-close-disabled-label-text-color;
+      }
     }
   }
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3193e6eba0..9b66a37aa5 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -882,9 +882,23 @@ $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 2px 6px 0px rgba(0, 0, 0, 0.4)
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1)
+) !default;
+/* #endif */
+/* #ifndef harmony */
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 1px 0px rgba(0, 0, 0, 0.06),
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1),
+  0px 0px 0px 1px rgba(0, 0, 0, 0.02)
+) !default;
+/* #endif */
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1)
 ) !default;
 $switch-label-text-color: var(
   --nutui-switch-label-text-color,

From 26a008c55d72f87627812e10b60cd22b6654a09f Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Mon, 25 Nov 2024 11:19:06 +0800
Subject: [PATCH 06/10] feat: add marking

---
 src/config.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/config.json b/src/config.json
index 471698fbc8..fb79b3587b 100644
--- a/src/config.json
+++ b/src/config.json
@@ -673,6 +673,7 @@
           "sort": 11,
           "show": true,
           "taro": true,
+          "v14": true,
           "author": "dsj"
         },
         {

From 975544f3240c8495349bc794eee4986f8034f70d Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Mon, 25 Nov 2024 11:31:29 +0800
Subject: [PATCH 07/10] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9cr?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/switch/switch.harmony.css | 80 --------------------------
 src/styles/variables.scss              |  9 ++-
 2 files changed, 4 insertions(+), 85 deletions(-)
 delete mode 100644 src/packages/switch/switch.harmony.css

diff --git a/src/packages/switch/switch.harmony.css b/src/packages/switch/switch.harmony.css
deleted file mode 100644
index cbcd932c5d..0000000000
--- a/src/packages/switch/switch.harmony.css
+++ /dev/null
@@ -1,80 +0,0 @@
-.nut-switch {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  min-width: 46px;
-  height: 28px;
-  line-height: 28px;
-  background-color: #ff0f23;
-  border-radius: 50px;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
-  flex: 0 0 auto;
-}
-.nut-switch-button {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  height: calc(28px - 2px * 2);
-  width: calc(28px - 2px * 2);
-  border-radius: 50%;
-  background: #ffffff;
-  transition: left 0.3s linear;
-  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
-}
-.nut-switch-button-open {
-  left: calc(100% - 28px + 2px);
-}
-.nut-switch-button-open-rtl {
-  left: 2px;
-}
-.nut-switch-button-close {
-  left: 2px;
-}
-.nut-switch-button-close-rtl {
-  left: calc(100% - 28px + 2px);
-}
-.nut-switch-close {
-  background-color: #c2c4cc;
-}
-.nut-switch-close-line {
-  width: calc((28px - 2px * 2) / 2);
-  height: 2px;
-  background: #ffffff;
-  border-radius: 2px;
-}
-.nut-switch-label {
-  display: inline-flex;
-  align-items: center;
-  height: 100%;
-  white-space: nowrap;
-  color: #ffffff;
-  font-size: 12px;
-}
-.nut-switch-label-open {
-  margin: 0 calc(28px - 2px + 5px) 0 7px;
-}
-.nut-switch-label-open-rtl {
-  margin: 0 7px 0 calc(28px - 2px + 5px);
-}
-.nut-switch-label-close {
-  margin: 0 7px 0 calc(28px - 2px + 5px);
-}
-.nut-switch-label-close-rtl {
-  margin: 0 calc(28px - 2px + 5px) 0 7px;
-}
-.nut-switch-label-close-disabled {
-  color: #c2c4cc;
-}
-.nut-switch-disabled {
-  background-color: #ffadbe;
-}
-.nut-switch-disabled-close {
-  background-color: #f5f6fa;
-}
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 9b66a37aa5..125e1dbfd5 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -896,15 +896,14 @@ $switch-inside-box-shadow: var(
   0px 0px 0px 1px rgba(0, 0, 0, 0.02)
 ) !default;
 /* #endif */
-$switch-inside-box-shadow: var(
-  --nutui-switch-inside-box-shadow,
-  0px 2px 6px 0px rgba(0, 0, 0, 0.1)
-) !default;
 $switch-label-text-color: var(
   --nutui-switch-label-text-color,
   $color-primary-text
 ) !default;
-$switch-label-font-size: var(--nutui--label-font-size, $font-size-s) !default;
+$switch-label-font-size: var(
+  --nutui-switch-label-font-size,
+  $font-size-s
+) !default;
 $switch-close-disabled-label-text-color: var(
   --nutui-switch-close-disabled-label-text-color,
   $color-text-disabled

From 05e74d118d2bfcf3e8834174b66e9a8022939600 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Mon, 2 Dec 2024 14:59:09 +0800
Subject: [PATCH 08/10] =?UTF-8?q?fix:=20=E4=BF=AE=E6=95=B4=E7=B9=81?=
 =?UTF-8?q?=E4=BD=93=E5=AD=97=E7=BF=BB=E8=AF=91=E9=94=99=E8=AF=AF+?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0cursor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/switch/doc.zh-TW.md | 2 +-
 src/packages/switch/switch.scss  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/packages/switch/doc.zh-TW.md b/src/packages/switch/doc.zh-TW.md
index 3206f8cddc..3cbaa880e5 100644
--- a/src/packages/switch/doc.zh-TW.md
+++ b/src/packages/switch/doc.zh-TW.md
@@ -77,7 +77,7 @@ import { Switch } from '@nutui/nutui-react'
 | disabled | 禁用狀態 | `boolean` | `false` |
 | activeText | 打開時文字描述 | `ReactNode` | `-` |
 | inactiveText | 關閉時文字描述 | `ReactNode` | `-` |
-| onChange | 切換開關時觸髮 | `onChange:(value: boolean, event: Event)` | `-` |
+| onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## 主題定製
 
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 9fd450f356..f990b3c76d 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -1,4 +1,5 @@
 .nut-switch {
+  cursor: pointer;
   position: relative;
   display: flex;
   flex-direction: row;

From babc359199f3198f2c62823643cdc90ae71c45da Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Mon, 2 Dec 2024 15:25:54 +0800
Subject: [PATCH 09/10] fix: modify css var

---
 src/packages/switch/__test__/switch.spec.tsx |  9 +++++---
 src/packages/switch/demos/h5/demo7.tsx       |  4 ++--
 src/packages/switch/demos/taro/demo7.tsx     |  4 ++--
 src/packages/switch/doc.en-US.md             | 12 +++++-----
 src/packages/switch/doc.md                   | 12 +++++-----
 src/packages/switch/doc.taro.md              | 12 +++++-----
 src/packages/switch/doc.zh-TW.md             | 12 +++++-----
 src/packages/switch/switch.scss              | 14 ++++++------
 src/styles/variables.scss                    | 24 ++++++++++----------
 9 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/src/packages/switch/__test__/switch.spec.tsx b/src/packages/switch/__test__/switch.spec.tsx
index e7c152cf93..37d1f0b62f 100644
--- a/src/packages/switch/__test__/switch.spec.tsx
+++ b/src/packages/switch/__test__/switch.spec.tsx
@@ -9,7 +9,10 @@ test('activeText && checked && onChange && inactiveText && className && style te
     inactiveText: '关',
     checked: false,
     className: 'switch-test',
-    style: { fontSize: '12px', '--nutui-switch-open-background-color': 'blue' },
+    style: {
+      fontSize: '12px',
+      '--nutui-switch-active-background-color': 'blue',
+    },
   }
   const { activeText, inactiveText, className, style } = state
   const testFn = vi.fn()
@@ -28,11 +31,11 @@ test('activeText && checked && onChange && inactiveText && className && style te
   if (el) {
     expect(el).toHaveAttribute(
       'class',
-      `nut-switch nut-switch-close  nut-switch-base switch-test`
+      `nut-switch nut-switch-inactive  nut-switch-base switch-test`
     )
     expect(el).toHaveAttribute(
       'style',
-      `font-size: 12px; --nutui-switch-open-background-color: blue;`
+      `font-size: 12px; --nutui-switch-active-background-color: blue;`
     )
     expect(el).toHaveTextContent(inactiveText)
     await act(() => {
diff --git a/src/packages/switch/demos/h5/demo7.tsx b/src/packages/switch/demos/h5/demo7.tsx
index b69b3e5688..093c132550 100644
--- a/src/packages/switch/demos/h5/demo7.tsx
+++ b/src/packages/switch/demos/h5/demo7.tsx
@@ -7,8 +7,8 @@ const Demo7 = () => {
       <Switch
         defaultChecked
         style={{
-          '--nutui-switch-open-background-color': 'blue',
-          '--nutui-switch-close-line-background-color': '#ebebeb',
+          '--nutui-switch-active-background-color': 'blue',
+          '--nutui-switch-inactive-line-background-color': '#ebebeb',
         }}
       />
     </Cell>
diff --git a/src/packages/switch/demos/taro/demo7.tsx b/src/packages/switch/demos/taro/demo7.tsx
index 6550d5dec7..a69915aca4 100644
--- a/src/packages/switch/demos/taro/demo7.tsx
+++ b/src/packages/switch/demos/taro/demo7.tsx
@@ -7,8 +7,8 @@ const Demo7 = () => {
       <Switch
         defaultChecked
         style={{
-          '--nutui-switch-open-background-color': 'blue',
-          '--nutui-switch-close-line-background-color': '#ebebeb',
+          '--nutui-switch-active-background-color': 'blue',
+          '--nutui-switch-inactive-line-background-color': '#ebebeb',
         }}
       />
     </Cell>
diff --git a/src/packages/switch/doc.en-US.md b/src/packages/switch/doc.en-US.md
index 349568059a..e58dc881d3 100644
--- a/src/packages/switch/doc.en-US.md
+++ b/src/packages/switch/doc.en-US.md
@@ -87,11 +87,11 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-switch-open-background-color | Switch on status background color | `$color-primary` |
-| \--nutui-switch-close-background-color | Switch off status background color | `$color-text-disabled` |
-| \--nutui-switch-open-disabled-background-color | Switch toggle on the background color disabled | `$color-primary-disabled-special` |
-| \--nutui-switch-close-disabled-background-color | Turn off the background color disabled | `$color-background` |
-| \--nutui-switch-close-line-bg-color | Switch Off Internal Button Line Color | `#ffffff` |
+| \--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` |
@@ -101,4 +101,4 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
 | \--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-close-disabled-label-text-color | Turn off and disable internal text color | `$color-text-disabled` |
+| \--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 895951a798..5afd82e0eb 100644
--- a/src/packages/switch/doc.md
+++ b/src/packages/switch/doc.md
@@ -87,11 +87,11 @@ import { Switch } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-switch-open-background-color | 开关打开状态背景颜色 | `$color-primary` |
-| \--nutui-switch-close-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
-| \--nutui-switch-open-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
-| \--nutui-switch-close-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
-| \--nutui-switch-close-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
+| \--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` |
@@ -101,4 +101,4 @@ import { Switch } from '@nutui/nutui-react'
 | \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
 | \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
 | \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
-| \--nutui-switch-close-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
+| \--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 96636fb2af..9ead4a5a25 100644
--- a/src/packages/switch/doc.taro.md
+++ b/src/packages/switch/doc.taro.md
@@ -87,11 +87,11 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-switch-open-background-color | 开关打开状态背景颜色 | `$color-primary` |
-| \--nutui-switch-close-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
-| \--nutui-switch-open-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
-| \--nutui-switch-close-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
-| \--nutui-switch-close-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
+| \--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` |
@@ -101,4 +101,4 @@ import { Switch } from '@nutui/nutui-react-taro'
 | \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
 | \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
 | \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
-| \--nutui-switch-close-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
+| \--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 3cbaa880e5..f0663524df 100644
--- a/src/packages/switch/doc.zh-TW.md
+++ b/src/packages/switch/doc.zh-TW.md
@@ -87,11 +87,11 @@ import { Switch } from '@nutui/nutui-react'
 
 | 名稱 | 説明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-switch-open-background-color | 開關打開狀態背景顏色 | `$color-primary` |
-| \--nutui-switch-close-background-color | 開關關閉狀態背景顏色 | `$color-text-disabled` |
-| \--nutui-switch-open-disabled-background-color | 開關打開狀態禁用的背景顏色 | `$color-primary-disabled-special` |
-| \--nutui-switch-close-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `$color-background` |
-| \--nutui-switch-close-line-bg-color | 開關關閉狀態內部按鈕線條顏色 | `#ffffff` |
+| \--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` |
@@ -101,4 +101,4 @@ import { Switch } from '@nutui/nutui-react'
 | \--nutui-switch-inside-box-shadow | 開關內部按鈕陰影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
 | \--nutui-switch-label-text-color | 開關內部文字顏色 | `$color-primary-text` |
 | \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-s` |
-| \--nutui-switch-close-disabled-label-text-color | 開關關閉禁用內部文字顏色 | `$color-text-disabled` |
+| \--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 f990b3c76d..2c086eb925 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -7,7 +7,7 @@
   min-width: $switch-width;
   height: $switch-height;
   line-height: $switch-line-height;
-  background-color: $switch-open-background-color;
+  background-color: $switch-active-background-color;
   border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -43,11 +43,11 @@
   }
 
   &-close {
-    background-color: $switch-close-background-color;
+    background-color: $switch-inactive-background-color;
     &-line {
       width: calc(($switch-height - $switch-border-width * 2) / 2);
       height: 2px;
-      background: $switch-close-line-background-color;
+      background: $switch-inactive-line-background-color;
       border-radius: 2px;
     }
   }
@@ -77,17 +77,17 @@
     }
 
     &-close-disabled {
-      color: $switch-close-disabled-label-text-color;
+      color: $switch-inactive-disabled-label-text-color;
       .nut-icon {
-        color: $switch-close-disabled-label-text-color;
+        color: $switch-inactive-disabled-label-text-color;
       }
     }
   }
 
   &-disabled {
-    background-color: $switch-open-disabled-background-color;
+    background-color: $switch-active-disabled-background-color;
     &-close {
-      background-color: $switch-close-disabled-background-color;
+      background-color: $switch-inactive-disabled-background-color;
     }
   }
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 55c1a79945..464f564d3b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -853,24 +853,24 @@ $avatar-normal-width: var(--nutui-avatar-normal-width, 40px) !default;
 $avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default;
 
 //switch（✅）
-$switch-open-background-color: var(
-  --nutui-switch-open-background-color,
+$switch-active-background-color: var(
+  --nutui-switch-active-background-color,
   $color-primary
 ) !default;
-$switch-close-background-color: var(
-  --nutui-switch-close-background-color,
+$switch-inactive-background-color: var(
+  --nutui-switch-inactive-background-color,
   $color-text-disabled
 ) !default;
-$switch-open-disabled-background-color: var(
-  --nutui-switch-open-disabled-background-color,
+$switch-active-disabled-background-color: var(
+  --nutui-switch-active-disabled-background-color,
   $color-primary-disabled-special
 ) !default;
-$switch-close-disabled-background-color: var(
-  --nutui-switch-close-disabled-background-color,
+$switch-inactive-disabled-background-color: var(
+  --nutui-switch-inactive-disabled-background-color,
   $color-background
 ) !default;
-$switch-close-line-background-color: var(
-  --nutui-switch-close-line-background-color,
+$switch-inactive-line-background-color: var(
+  --nutui-switch-inactive-line-background-color,
   #ffffff
 ) !default;
 $switch-width: var(--nutui-switch-width, 46px) !default;
@@ -907,8 +907,8 @@ $switch-label-font-size: var(
   --nutui-switch-label-font-size,
   $font-size-s
 ) !default;
-$switch-close-disabled-label-text-color: var(
-  --nutui-switch-close-disabled-label-text-color,
+$switch-inactive-disabled-label-text-color: var(
+  --nutui-switch-inactive-disabled-label-text-color,
   $color-text-disabled
 ) !default;
 

From e03b7f1657592cdc0158f1a8fc5cc733a624c717 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Wed, 4 Dec 2024 15:02:53 +0800
Subject: [PATCH 10/10] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9toast=E6=9D=A5?=
 =?UTF-8?q?=E6=BA=90+=E5=8D=87=E7=BA=A7=E6=96=87=E6=A1=A3=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 migrate-from-v2.md                       |  2 ++
 src/packages/switch/demos/taro/demo2.tsx | 28 +++++++++++++++-------
 src/packages/switch/demos/taro/demo6.tsx | 30 +++++++++++++++++-------
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index 5bd3f8ec5e..3174027104 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -616,6 +616,8 @@ plugins: [
 - 移除 `isAsync`，通过 `checked`实现
 - 移除 `activeColor` ，通过css变量`--nutui-switch-open-background-color`实现
 - 移除 `inactiveColor`，通过css变量`--nutui-switch-close-background-color`实现
+- `activeText 属性类型更改为 `ReactNode`
+- `inactiveText` 属性类型更改为 `ReactNode`
 
 #### Toast
 
diff --git a/src/packages/switch/demos/taro/demo2.tsx b/src/packages/switch/demos/taro/demo2.tsx
index a2f856042e..a6adf66282 100644
--- a/src/packages/switch/demos/taro/demo2.tsx
+++ b/src/packages/switch/demos/taro/demo2.tsx
@@ -1,23 +1,35 @@
 import React, { useState } from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
+import { Cell, Switch, Toast } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   const [checkedAsync, setCheckedAsync] = useState(true)
+  const [value, setValue] = useState(false)
+  const [showToast, setShowToast] = useState(false)
 
   const onChangeAsync = (value: boolean, event: any) => {
-    Taro.showToast({ title: `2秒后异步触发 ${value}` })
+    setValue(value)
+    setShowToast(true)
     setTimeout(() => {
       setCheckedAsync(value)
     }, 2000)
   }
   return (
-    <Cell>
-      <Switch
-        checked={checkedAsync}
-        onChange={(value, event) => onChangeAsync(value, event)}
+    <>
+      <Cell>
+        <Switch
+          checked={checkedAsync}
+          onChange={(value, event) => onChangeAsync(value, event)}
+        />
+      </Cell>
+      <Toast
+        type="text"
+        content={`2秒后异步触发 ${value}`}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
       />
-    </Cell>
+    </>
   )
 }
 export default Demo2
diff --git a/src/packages/switch/demos/taro/demo6.tsx b/src/packages/switch/demos/taro/demo6.tsx
index c7f3d9331f..8323f83aed 100644
--- a/src/packages/switch/demos/taro/demo6.tsx
+++ b/src/packages/switch/demos/taro/demo6.tsx
@@ -1,21 +1,33 @@
-import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
+import React, { useState } from 'react'
+import { Cell, Switch, Toast } from '@nutui/nutui-react-taro'
 
 const Demo6 = () => {
+  const [value, setValue] = useState(false)
+  const [showToast, setShowToast] = useState(false)
   const onChange = (
     value: boolean,
     event: React.MouseEvent<Element, MouseEvent>
   ) => {
-    Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` })
+    setValue(value)
+    setShowToast(true)
   }
   return (
-    <Cell>
-      <Switch
-        defaultChecked
-        onChange={(value, event) => onChange(value, event)}
+    <>
+      <Cell>
+        <Switch
+          defaultChecked
+          onChange={(value, event) => onChange(value, event)}
+        />
+      </Cell>
+      <Toast
+        type="text"
+        content={`触发了onChange事件，开关状态：${value}`}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
       />
-    </Cell>
+    </>
   )
 }
 export default Demo6