From 9c0d39e92feae5d5f87a1bfed4a89db99dd26b7d Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Thu, 12 Jan 2023 10:10:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=84=E8=8C=83switch,=20radio,=20che?=
 =?UTF-8?q?ckbox=E5=86=99=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/checkbox.md                     |  38 +--
 packages/docs/radio.md                        |  38 +--
 packages/docs/switch.md                       |  16 +-
 .../src/components/button/OButton.vue         |   2 +-
 .../checkbox-group/OCheckboxGroup.vue         |   7 +-
 .../src/components/checkbox-group/provide.ts  |   1 +
 .../src/components/checkbox/OCheckbox.vue     |  35 ++-
 .../checkbox/__demo__/CheckboxBasic.vue       |   7 +-
 .../checkbox/__demo__/CheckboxDisabled.vue    |   7 +-
 .../checkbox/__demo__/CheckboxEvents.vue      |  34 +++
 .../checkbox/__demo__/CheckboxGroup.vue       |   6 +-
 .../checkbox/__demo__/CheckboxSlots.vue       |  11 +-
 .../checkbox/__demo__/IndexCheckbox.vue       |   8 +-
 .../src/components/checkbox/style/index.scss  |  28 +--
 .../src/components/divider/ODivider.vue       |   0
 .../opendesign/src/components/link/OLink.vue  |   2 +-
 .../components/radio-group/ORadioGroup.vue    |  13 +-
 .../src/components/radio-group/provide.ts     |   1 +
 .../src/components/radio/ORadio.vue           |  31 ++-
 .../components/radio/__demo__/IndexRadio.vue  |   8 +-
 .../components/radio/__demo__/RadioBasic.vue  |   1 +
 .../radio/__demo__/RadioDisabled.vue          |   1 +
 .../components/radio/__demo__/RadioEvents.vue |  34 +++
 .../components/radio/__demo__/RadioGroup.vue  |   7 +-
 .../components/radio/__demo__/RadioSlots.vue  |  11 +-
 .../src/components/radio/style/index.scss     |  55 ++---
 .../src/components/style/animation.scss       |   2 +-
 .../src/components/switch/OSwitch.vue         |  49 ++--
 .../switch/__demo__/IndexSwitch.vue           |   2 +
 .../__demo__/SwitchDisabledAndLoading.vue     |   8 +-
 .../{SwitchShape.vue => SwitchEvents.vue}     |  10 +-
 .../src/components/switch/style/index.scss    | 231 +++++++-----------
 32 files changed, 392 insertions(+), 312 deletions(-)
 create mode 100644 packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue
 create mode 100644 packages/opendesign/src/components/divider/ODivider.vue
 create mode 100644 packages/opendesign/src/components/radio/__demo__/RadioEvents.vue
 rename packages/opendesign/src/components/switch/__demo__/{SwitchShape.vue => SwitchEvents.vue} (52%)

diff --git a/packages/docs/checkbox.md b/packages/docs/checkbox.md
index 506cc084..96ce655c 100644
--- a/packages/docs/checkbox.md
+++ b/packages/docs/checkbox.md
@@ -2,35 +2,39 @@
 
 ## props
 
-| name                 | type                      | 默认值 | 说明        |
-| :------------------- | :------------------------ | :----- | ----------- |
-| value                | string \| number          | -      | 多选框 vale |
-| model-value(v-model) | Array<string \| number \> | [ ]    | 双向绑定值  |
-| disabled             | boolean                   | false  | 是否禁用    |
+| name                 | type                      | 默认值 | 说明              |
+| :------------------- | :------------------------ | :----- | ----------------- |
+| value                | string \| number          | -      | 必选，多选框 vale |
+| model-value(v-model) | Array<string \| number \> | [ ]    | 可选，双向绑定值  |
+| disabled             | boolean                   | false  | 可选，是否禁用    |
 
 ## event
 
-| name   | 参数                                                  | 说明           |
-| :----- | :---------------------------------------------------- | :------------- |
-| change | {value: Array<string \| number \>, checked: boolean}; | 状态切换后触发 |
+| name   | 参数                            | 说明         |
+| :----- | :------------------------------ | :----------- |
+| change | val: Array<string \| number \>; | 值改变时触发 |
 
 ## expose
 
+| name    | 说明           |
+| :------ | :------------- |
+| checked | 多选框是否选中 |
+
 ## slot
 
-| name     | 说明         |
-| :------- | :----------- |
-| checkbox | 自定义多选框 |
+| name     | 参数                               | 说明         |
+| :------- | :--------------------------------- | :----------- |
+| checkbox | checked:boolean; disabled: boolean | 自定义多选框 |
 
 # CheckboxGroup 多选框组
 
 ## props
 
-| name                 | type                      | 默认值 | 说明       |
-| :------------------- | :------------------------ | :----- | ---------- |
-| model-value(v-model) | Array<string \| number \> | -      | 双向绑定值 |
-| disabled             | boolean                   | false  | 是否禁用   |
-| direction            | CheckboxGroupDirectionT   | false  | 排列方向   |
+| name                 | type                      | 默认值 | 说明             |
+| :------------------- | :------------------------ | :----- | ---------------- |
+| model-value(v-model) | Array<string \| number \> | [ ]    | 可选，双向绑定值 |
+| disabled             | boolean                   | false  | 可选，是否禁用   |
+| direction            | CheckboxGroupDirectionT   | false  | 可选，排列方向   |
 
 ```ts
 type CheckGroupDirectionT = 'horizontal' | 'vertical';
@@ -40,7 +44,7 @@ type CheckGroupDirectionT = 'horizontal' | 'vertical';
 
 | name   | 参数                             | 说明           |
 | :----- | :------------------------------- | :------------- |
-| change | value: Array<string \| number \> | 状态切换后触发 |
+| change | val: Array<string \| number \> | 状态切换后触发 |
 
 ## expose
 
diff --git a/packages/docs/radio.md b/packages/docs/radio.md
index 186c4982..cdcfd3c1 100644
--- a/packages/docs/radio.md
+++ b/packages/docs/radio.md
@@ -2,35 +2,39 @@
 
 ## props
 
-| name                 | type                        | 默认值 | 说明        |
-| :------------------- | :-------------------------- | :----- | ----------- |
-| value                | string \| number \| boolean | -      | 单选框 vale |
-| model-value(v-model) | string \| number \| boolean | -      | 双向绑定值  |
-| disabled             | boolean                     | false  | 是否禁用    |
+| name                 | type                        | 默认值 | 说明               |
+| :------------------- | :-------------------------- | :----- | ------------------ |
+| value                | string \| number \| boolean | -      | 必选，单选框 value |
+| model-value(v-model) | string \| number \| boolean | -      | 可选，双向绑定值   |
+| disabled             | boolean                     | false  | 可选，是否禁用     |
 
 ## event
 
-| name   | 参数                                                    | 说明           |
-| :----- | :------------------------------------------------------ | :------------- |
-| change | {value: string \| number \| boolean, checked: boolean}; | 状态切换后触发 |
+| name   | 参数                             | 说明         |
+| :----- | :------------------------------- | :----------- |
+| change | val: string \| number \| boolean | 值改变时触发 |
 
 ## expose
 
+| name    | 说明           |
+| :------ | :------------- |
+| checked | 单选框是否选中 |
+
 ## slot
 
-| name  | 说明         |
-| :---- | :----------- |
-| radio | 自定义单选框 |
+| name  | 参数                               | 说明         |
+| :---- | :--------------------------------- | :----------- |
+| radio | checked:boolean; disabled: boolean | 自定义单选框 |
 
 # RadioGroup 单选框组
 
 ## props
 
-| name                 | type                        | 默认值       | 说明       |
-| :------------------- | :-------------------------- | :----------- | ---------- |
-| model-value(v-model) | string \| number \| boolean | -            | 双向绑定值 |
-| disabled             | boolean                     | false        | 是否禁用   |
-| direction            | RadioGroupDirectionT        | 'horizontal' | 排列方向   |
+| name                 | type                        | 默认值       | 说明             |
+| :------------------- | :-------------------------- | :----------- | ---------------- |
+| model-value(v-model) | string \| number \| boolean | -            | 可选，双向绑定值 |
+| disabled             | boolean                     | false        | 可选，是否禁用   |
+| direction            | RadioGroupDirectionT        | 'horizontal' | 可选，排列方向   |
 
 ```ts
 type RadioGroupDirectionT = 'horizontal' | 'vertical';
@@ -40,7 +44,7 @@ type RadioGroupDirectionT = 'horizontal' | 'vertical';
 
 | name   | 参数                               | 说明           |
 | :----- | :--------------------------------- | :------------- |
-| change | value: string \| number \| boolean | 状态切换后触发 |
+| change | val: string \| number \| boolean | 状态切换后触发 |
 
 ## expose
 
diff --git a/packages/docs/switch.md b/packages/docs/switch.md
index e76d4a83..0f8cdb84 100644
--- a/packages/docs/switch.md
+++ b/packages/docs/switch.md
@@ -2,14 +2,14 @@
 
 ## props
 
-| name         | type                                        | 默认值        | 说明                                                         |
-| :----------- | :------------------------------------------ | :------------ | ------------------------------------------------------------ |
-| model:value  | boolean                                     | false         | 开关状态                                                     |
-| shape        | ShapeT                                      | ShapeT.NORMAL | 开关形状                                                     |
-| size         | SizeT                                       | SizeT.NORMAL  | 开关尺寸                                                     |
-| disabled     | boolean                                     | false         | 是否禁用                                                     |
-| loading      | boolean                                     | false         | 加载状态                                                     |
-| beforeChange | (val: boolean): Promise\<boolean\>\|boolean | -             | return Promise.resolve(true)继续切换，resolve(false)阻止切换 |
+| name                 | type                                        | 默认值        | 说明                                                                                                                                               |
+| :------------------- | :------------------------------------------ | :------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| model-value(v-model) | boolean                                     | false         | 可选，双向绑定值                                                                                                                                   |
+| size                 | SizeT                                       | SizeT.NORMAL  | 可选，开关尺寸                                                                                                                                     |
+| shape                | ShapeT                                      | ShapeT.NORMAL | 可选，开关形状                                                                                                                                     |
+| disabled             | boolean                                     | false         | 可选，是否禁用                                                                                                                                     |
+| loading              | boolean                                     | false         | 可选，是否加载中                                                                                                                                   |
+| beforeChange         | (val: boolean): Promise\<boolean\>\|boolean | -             | 状态改变前的钩子函数，返回 true 或者返回 promise 且 resolve(true)则继续切换，返回 false 或者返回 promise 且被 reject 或 resolve(false)则阻止切换， |
 
 ## event
 
diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue
index 74885620..937d4d09 100644
--- a/packages/opendesign/src/components/button/OButton.vue
+++ b/packages/opendesign/src/components/button/OButton.vue
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<ButtonPropT>(), {
     ]"
   >
     <span v-if="$slots.icon || props.loading" class="o-btn-icon prefix" :class="{ loading: props.loading }">
-      <IconLoading v-if="props.loading" class="o-roating" />
+      <IconLoading v-if="props.loading" class="o-rotating" />
       <slot v-else-if="$slots.icon" name="icon"></slot>
     </span>
     <slot></slot>
diff --git a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
index 53055c70..fbc56297 100644
--- a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
+++ b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
@@ -25,12 +25,15 @@ const emits = defineEmits<{
 
 const { modelValue, disabled } = toRefs(props);
 
-const onChange = (val: Array<string | number>) => {
+const onModelValueUpdate = (val: Array<string | number>) => {
   emits('update:modelValue', val);
+};
+
+const onChange = (val: Array<string | number>) => {
   emits('change', val);
 };
 
-provide(checkboxGroupInjectKey, { modelValue, disabled, onChange });
+provide(checkboxGroupInjectKey, { modelValue, disabled, onModelValueUpdate, onChange });
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/checkbox-group/provide.ts b/packages/opendesign/src/components/checkbox-group/provide.ts
index dc5e158b..d5f19212 100644
--- a/packages/opendesign/src/components/checkbox-group/provide.ts
+++ b/packages/opendesign/src/components/checkbox-group/provide.ts
@@ -3,5 +3,6 @@ import { InjectionKey, Ref } from 'vue';
 export const checkboxGroupInjectKey: InjectionKey<{
   modelValue: Ref<Array<string | number>>;
   disabled: Ref<boolean>;
+  onModelValueUpdate: (val: Array<string | number>) => void;
   onChange: (val: Array<string | number>) => void;
 }> = Symbol('provide-checkbox-group');
diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
index 02043c00..1b9225d2 100644
--- a/packages/opendesign/src/components/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue
@@ -1,11 +1,20 @@
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
+import { computed, inject, nextTick } from 'vue';
 import { checkboxGroupInjectKey } from '../checkbox-group/provide';
 import { IconDone } from '../icons';
 
 interface CheckboxPropT {
+  /**
+   * 多选框value
+   */
   value: string | number;
+  /**
+   * 双向绑定值
+   */
   modelValue?: Array<string | number>;
+  /**
+   * 是否禁用
+   */
   disabled?: boolean;
 }
 const props = withDefaults(defineProps<CheckboxPropT>(), {
@@ -15,7 +24,7 @@ const props = withDefaults(defineProps<CheckboxPropT>(), {
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: Array<string | number>): void;
-  (e: 'change', rlt: { value: Array<string | number>; checked: boolean }): void;
+  (e: 'change', val: Array<string | number>): void;
 }>();
 
 const checkboxGroupInjection = inject(checkboxGroupInjectKey, null);
@@ -34,24 +43,26 @@ const onClick = (ev: Event) => {
 
 const onChange = (ev: Event) => {
   const { checked } = ev.target as HTMLInputElement;
-  let newVal: Array<string | number> = [];
+
   const set = checkboxGroupInjection ? new Set([...checkboxGroupInjection.modelValue.value]) : new Set([...props.modelValue]);
   if (checked) {
     set.add(props.value);
   } else {
     set.delete(props.value);
   }
-  newVal = Array.from(set);
-  checkboxGroupInjection?.onChange(newVal);
-  emits('update:modelValue', newVal);
+
+  const val = Array.from(set);
+  emits('update:modelValue', val);
+  checkboxGroupInjection?.onModelValueUpdate(val);
+  nextTick(() => {
+    emits('change', val);
+    checkboxGroupInjection?.onChange(val);
+  });
 };
 
-watch(
-  () => isChecked.value,
-  () => {
-    emits('change', { value: checkboxGroupInjection ? checkboxGroupInjection.modelValue.value : props.modelValue, checked: isChecked.value });
-  }
-);
+defineExpose({
+  checked: isChecked,
+});
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxBasic.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxBasic.vue
index 1bf808f6..1045649f 100644
--- a/packages/opendesign/src/components/checkbox/__demo__/CheckboxBasic.vue
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxBasic.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OCheckbox } from '../index';
-const checkboxVal = ref(['1']);
+const checkboxVal = ref([1]);
 </script>
 
 <template>
+  <h4>基础用法</h4>
   <section>
-    <OCheckbox v-model="checkboxVal" value="1">选项1</OCheckbox>
-    <OCheckbox v-model="checkboxVal" value="2">选项2</OCheckbox>
+    <OCheckbox v-model="checkboxVal" :value="1">选项1</OCheckbox>
+    <OCheckbox v-model="checkboxVal" :value="2">选项2</OCheckbox>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxDisabled.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxDisabled.vue
index bc4b94fa..c33eab46 100644
--- a/packages/opendesign/src/components/checkbox/__demo__/CheckboxDisabled.vue
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxDisabled.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OCheckbox } from '../index';
-const checkboxVal = ref(['1']);
+const checkboxVal = ref([1]);
 </script>
 
 <template>
+  <h4>禁用状态</h4>
   <section>
-    <OCheckbox v-model="checkboxVal" value="1" disabled>选项1</OCheckbox>
-    <OCheckbox v-model="checkboxVal" value="2" disabled>选项2</OCheckbox>
+    <OCheckbox v-model="checkboxVal" :value="1" disabled>选项1</OCheckbox>
+    <OCheckbox v-model="checkboxVal" :value="2" disabled>选项2</OCheckbox>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue
new file mode 100644
index 00000000..7fc04986
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OCheckbox } from '../index';
+import { OCheckboxGroup } from '../../checkbox-group';
+
+const checkboxVal1 = ref([1]);
+const checkboxRef1 = ref<InstanceType<typeof OCheckbox> | null>(null);
+const handleChange1 = () => {
+  console.log('选项1 checked: ', checkboxRef1.value?.checked);
+};
+
+const checkBoxVal2 = ref([1]);
+const checkBoxRef2 = ref<InstanceType<typeof OCheckbox> | null>(null);
+const handleChange2 = (val: Array<string | number>) => {
+  console.log('多选框model-value: ', val);
+  console.log('选项1 checked: ', checkBoxRef2.value?.checked);
+};
+</script>
+
+<template>
+  <h4>change事件</h4>
+  <section>
+    <OCheckbox ref="checkboxRef1" v-model="checkboxVal1" :value="1" @change="handleChange1">选项1</OCheckbox>
+    <OCheckbox v-model="checkboxVal1" :value="2" @change="handleChange1">选项2</OCheckbox>
+  </section>
+
+  <section>
+    <OCheckboxGroup v-model="checkBoxVal2" @change="handleChange2">
+      <OCheckbox ref="checkBoxRef2" :value="1">选项1</OCheckbox>
+      <OCheckbox :value="2">选项2</OCheckbox>
+      <OCheckbox :value="3">选项3</OCheckbox>
+    </OCheckboxGroup>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroup.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroup.vue
index 563fe224..700ebcc6 100644
--- a/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroup.vue
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroup.vue
@@ -4,12 +4,10 @@ import { OCheckbox } from '../index';
 import { OCheckboxGroup } from '../../checkbox-group';
 const checkboxVal1 = ref([1]);
 const checkboxVal2 = ref(['a']);
-const handleChange = (val: Array<string | number>) => {
-  console.log(val);
-};
 </script>
 
 <template>
+  <h4>多选框组</h4>
   <section>
     <OCheckboxGroup v-model="checkboxVal1">
       <OCheckbox :value="1">选项1</OCheckbox>
@@ -19,7 +17,7 @@ const handleChange = (val: Array<string | number>) => {
   </section>
 
   <section>
-    <OCheckboxGroup v-model="checkboxVal2" direction="vertical" @change="handleChange">
+    <OCheckboxGroup v-model="checkboxVal2" direction="vertical">
       <OCheckbox value="a">选项A</OCheckbox>
       <OCheckbox value="b">选项B</OCheckbox>
       <OCheckbox value="c">选项C</OCheckbox>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxSlots.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxSlots.vue
index 8597f785..ccf80cbf 100644
--- a/packages/opendesign/src/components/checkbox/__demo__/CheckboxSlots.vue
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxSlots.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OCheckbox } from '../index';
-const checkboxVal = ref(['1']);
+const checkboxVal = ref([1]);
 </script>
 
 <template>
+  <h4>插槽</h4>
   <section>
-    <OCheckbox v-model="checkboxVal" value="1">
+    <OCheckbox v-model="checkboxVal" :value="1">
       <template #checkbox="{ checked }">
-        {{ `自定义checkbox1 ${checked}` }}
+        {{ `自定义checkbox1: ${checked}` }}
       </template>
     </OCheckbox>
-    <OCheckbox v-model="checkboxVal" value="2">
+    <OCheckbox v-model="checkboxVal" :value="2">
       <template #checkbox="{ checked }">
-        {{ `自定义checkbox2 ${checked}` }}
+        {{ `自定义checkbox2: ${checked}` }}
       </template>
     </OCheckbox>
   </section>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/IndexCheckbox.vue b/packages/opendesign/src/components/checkbox/__demo__/IndexCheckbox.vue
index 2dd11fa8..d78d6934 100644
--- a/packages/opendesign/src/components/checkbox/__demo__/IndexCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/__demo__/IndexCheckbox.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import '../style';
 import '../../checkbox-group/style';
+
 import CheckboxBasic from './CheckboxBasic.vue';
 import CheckboxDisabled from './CheckboxDisabled.vue';
 import CheckboxSlots from './CheckboxSlots.vue';
 import CheckboxGroup from './CheckboxGroup.vue';
+import CheckboxEvents from './CheckboxEvents.vue';
 </script>
+
 <template>
   <div class="page-demo">
-    <h4>基础用法</h4>
     <CheckboxBasic />
-    <h4>禁用状态</h4>
     <CheckboxDisabled />
-    <h4>插槽</h4>
     <CheckboxSlots />
-    <h4>多选框组</h4>
     <CheckboxGroup />
+    <CheckboxEvents />
   </div>
 </template>
diff --git a/packages/opendesign/src/components/checkbox/style/index.scss b/packages/opendesign/src/components/checkbox/style/index.scss
index 9881bc7c..188b4f51 100644
--- a/packages/opendesign/src/components/checkbox/style/index.scss
+++ b/packages/opendesign/src/components/checkbox/style/index.scss
@@ -20,20 +20,6 @@
     opacity: 0;
   }
 
-  .o-checkbox-icon {
-    width: 16px;
-    height: 16px;
-    border: 1px solid var(--o-color-border1);
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--o-color-text1_inverse);
-  }
-
-  .o-checkbox-label {
-    margin-left: 8px;
-  }
-
   &:hover {
     .o-checkbox-icon {
       border-color: var(--checkbox-icon-checked);
@@ -62,3 +48,17 @@
     }
   }
 }
+
+.o-checkbox-icon {
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--o-color-border1);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--o-color-text1_inverse);
+}
+
+.o-checkbox-label {
+  margin-left: 8px;
+}
diff --git a/packages/opendesign/src/components/divider/ODivider.vue b/packages/opendesign/src/components/divider/ODivider.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/opendesign/src/components/link/OLink.vue b/packages/opendesign/src/components/link/OLink.vue
index 59b8318d..d36ddeb0 100644
--- a/packages/opendesign/src/components/link/OLink.vue
+++ b/packages/opendesign/src/components/link/OLink.vue
@@ -65,7 +65,7 @@ const onClick = (e: MouseEvent) => {
     @click="onClick"
   >
     <span v-if="props.icon || $slots.icon || props.loading" class="o-link-icon prefix">
-      <IconLoading v-if="props.loading" class="o-roating" />
+      <IconLoading v-if="props.loading" class="o-rotating" />
       <slot v-else-if="$slots.icon" name="icon"></slot>
       <IconLinkPrefix v-else />
     </span>
diff --git a/packages/opendesign/src/components/radio-group/ORadioGroup.vue b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
index fc1ab4d6..55095edc 100644
--- a/packages/opendesign/src/components/radio-group/ORadioGroup.vue
+++ b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
@@ -4,7 +4,13 @@ import { radioGroupInjectKey } from './provide';
 import type { RadioGroupDirectionT } from './types';
 
 interface RadioGroupPropT {
+  /**
+   * 双向绑定值
+   */
   modelValue?: string | boolean | number;
+  /**
+   * 单选框组是否禁用
+   */
   disabled?: boolean;
   /**
    * 单选框组方向: 'horizontal' | 'vertical'
@@ -25,12 +31,15 @@ const emits = defineEmits<{
 
 const { modelValue, disabled } = toRefs(props);
 
-const onChange = (val: string | number | boolean) => {
+const onModelValueUpdate = (val: string | number | boolean) => {
   emits('update:modelValue', val);
+};
+
+const onChange = (val: string | number | boolean) => {
   emits('change', val);
 };
 
-provide(radioGroupInjectKey, { modelValue, disabled, onChange });
+provide(radioGroupInjectKey, { modelValue, disabled, onModelValueUpdate, onChange });
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/radio-group/provide.ts b/packages/opendesign/src/components/radio-group/provide.ts
index 93ae861c..063fd0aa 100644
--- a/packages/opendesign/src/components/radio-group/provide.ts
+++ b/packages/opendesign/src/components/radio-group/provide.ts
@@ -3,5 +3,6 @@ import { InjectionKey, Ref } from 'vue';
 export const radioGroupInjectKey: InjectionKey<{
   modelValue: Ref<string | number | boolean>;
   disabled: Ref<boolean>;
+  onModelValueUpdate: (val: string | number | boolean) => void;
   onChange: (val: string | number | boolean) => void;
 }> = Symbol('provide-radio-group');
diff --git a/packages/opendesign/src/components/radio/ORadio.vue b/packages/opendesign/src/components/radio/ORadio.vue
index c0a6a355..2b43aff5 100644
--- a/packages/opendesign/src/components/radio/ORadio.vue
+++ b/packages/opendesign/src/components/radio/ORadio.vue
@@ -1,10 +1,19 @@
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
+import { computed, inject, nextTick } from 'vue';
 import { radioGroupInjectKey } from '../radio-group/provide';
 
 interface RadioPropT {
+  /**
+   * 单选框value
+   */
   value: string | boolean | number;
+  /**
+   * 双向绑定值
+   */
   modelValue?: string | boolean | number;
+  /**
+   * 是否禁用
+   */
   disabled?: boolean;
 }
 const props = withDefaults(defineProps<RadioPropT>(), {
@@ -14,7 +23,7 @@ const props = withDefaults(defineProps<RadioPropT>(), {
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string | number | boolean): void;
-  (e: 'change', rlt: { value: string | number | boolean; checked: boolean }): void;
+  (e: 'change', val: string | number | boolean): void;
 }>();
 
 const radioGroupInjection = inject(radioGroupInjectKey, null);
@@ -35,19 +44,17 @@ const onChange = () => {
   }
 
   const val = props.value;
-  radioGroupInjection?.onChange(val);
   emits('update:modelValue', val);
+  radioGroupInjection?.onModelValueUpdate(val);
+  nextTick(() => {
+    emits('change', val);
+    radioGroupInjection?.onChange(val);
+  });
 };
 
-watch(
-  () => isChecked.value,
-  () => {
-    emits('change', {
-      value: radioGroupInjection ? radioGroupInjection.modelValue.value : (props.modelValue as string | number | boolean),
-      checked: isChecked.value,
-    });
-  }
-);
+defineExpose({
+  checked: isChecked,
+});
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/radio/__demo__/IndexRadio.vue b/packages/opendesign/src/components/radio/__demo__/IndexRadio.vue
index 33532d34..1559c273 100644
--- a/packages/opendesign/src/components/radio/__demo__/IndexRadio.vue
+++ b/packages/opendesign/src/components/radio/__demo__/IndexRadio.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import '../style';
 import '../../radio-group/style';
+
 import RadioBasic from './RadioBasic.vue';
 import RadioDisabled from './RadioDisabled.vue';
 import RadioSlots from './RadioSlots.vue';
 import RadioGroup from './RadioGroup.vue';
+import RadioEvents from './RadioEvents.vue';
 </script>
+
 <template>
   <div class="page-demo">
-    <h4>基础用法</h4>
     <RadioBasic />
-    <h4>禁用状态</h4>
     <RadioDisabled />
-    <h4>插槽</h4>
     <RadioSlots />
-    <h4>单选框组</h4>
     <RadioGroup />
+    <RadioEvents />
   </div>
 </template>
diff --git a/packages/opendesign/src/components/radio/__demo__/RadioBasic.vue b/packages/opendesign/src/components/radio/__demo__/RadioBasic.vue
index c1d7c43c..ece24079 100644
--- a/packages/opendesign/src/components/radio/__demo__/RadioBasic.vue
+++ b/packages/opendesign/src/components/radio/__demo__/RadioBasic.vue
@@ -5,6 +5,7 @@ const radioVal = ref(1);
 </script>
 
 <template>
+  <h4>基础用法</h4>
   <section>
     <ORadio v-model="radioVal" :value="1">选项1</ORadio>
     <ORadio v-model="radioVal" :value="2">选项2</ORadio>
diff --git a/packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue b/packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue
index 843771e8..5f585dbd 100644
--- a/packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue
+++ b/packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue
@@ -5,6 +5,7 @@ const radioVal = ref(1);
 </script>
 
 <template>
+  <h4>禁用状态</h4>
   <section>
     <ORadio v-model="radioVal" :value="1" disabled>选项1</ORadio>
     <ORadio v-model="radioVal" :value="2" disabled>选项2</ORadio>
diff --git a/packages/opendesign/src/components/radio/__demo__/RadioEvents.vue b/packages/opendesign/src/components/radio/__demo__/RadioEvents.vue
new file mode 100644
index 00000000..0ec47e6b
--- /dev/null
+++ b/packages/opendesign/src/components/radio/__demo__/RadioEvents.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORadio } from '../index';
+import { ORadioGroup } from '../../radio-group';
+
+const radioVal1 = ref(1);
+const radioRef1 = ref<InstanceType<typeof ORadio> | null>(null);
+const handleChange1 = () => {
+  console.log('选项1 checked: ', radioRef1.value?.checked);
+};
+
+const radioVal2 = ref(1);
+const radioRef2 = ref<InstanceType<typeof ORadio> | null>(null);
+const handleChange2 = (val: string | number | boolean) => {
+  console.log('单选框model-value: ', val);
+  console.log('选项1 checked: ', radioRef2.value?.checked);
+};
+</script>
+
+<template>
+  <h4>change事件</h4>
+  <section>
+    <ORadio ref="radioRef1" v-model="radioVal1" :value="1" @change="handleChange1">选项1</ORadio>
+    <ORadio v-model="radioVal1" :value="2" @change="handleChange1">选项2</ORadio>
+  </section>
+
+  <section>
+    <ORadioGroup v-model="radioVal2" @change="handleChange2">
+      <ORadio ref="radioRef2" :value="1">选项1</ORadio>
+      <ORadio :value="2">选项2</ORadio>
+      <ORadio :value="3">选项3</ORadio>
+    </ORadioGroup>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/radio/__demo__/RadioGroup.vue b/packages/opendesign/src/components/radio/__demo__/RadioGroup.vue
index b1fb3306..a10cdff7 100644
--- a/packages/opendesign/src/components/radio/__demo__/RadioGroup.vue
+++ b/packages/opendesign/src/components/radio/__demo__/RadioGroup.vue
@@ -2,14 +2,13 @@
 import { ref } from 'vue';
 import { ORadio } from '../index';
 import { ORadioGroup } from '../../radio-group';
+
 const radioVal1 = ref(1);
 const radioVal2 = ref('a');
-const handleChange = (val: string | number | boolean) => {
-  console.log(val);
-};
 </script>
 
 <template>
+  <h4>单选框组</h4>
   <section>
     <ORadioGroup v-model="radioVal1">
       <ORadio :value="1">选项1</ORadio>
@@ -19,7 +18,7 @@ const handleChange = (val: string | number | boolean) => {
   </section>
 
   <section>
-    <ORadioGroup v-model="radioVal2" direction="vertical" @change="handleChange">
+    <ORadioGroup v-model="radioVal2" direction="vertical">
       <ORadio value="a">选项A</ORadio>
       <ORadio value="b">选项B</ORadio>
       <ORadio value="c">选项C</ORadio>
diff --git a/packages/opendesign/src/components/radio/__demo__/RadioSlots.vue b/packages/opendesign/src/components/radio/__demo__/RadioSlots.vue
index 770b8f19..7329d4a4 100644
--- a/packages/opendesign/src/components/radio/__demo__/RadioSlots.vue
+++ b/packages/opendesign/src/components/radio/__demo__/RadioSlots.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { ORadio } from '../index';
-const radioVal = ref('1');
+const radioVal = ref(1);
 </script>
 
 <template>
+  <h4>插槽</h4>
   <section>
-    <ORadio v-model="radioVal" value="1">
+    <ORadio v-model="radioVal" :value="1">
       <template #radio="{ checked }">
-        {{ `自定义radio1 ${checked}` }}
+        {{ `自定义radio1： ${checked}` }}
       </template>
     </ORadio>
-    <ORadio v-model="radioVal" value="2">
+    <ORadio v-model="radioVal" :value="2">
       <template #radio="{ checked }">
-        {{ `自定义radio2 ${checked}` }}
+        {{ `自定义radio2： ${checked}` }}
       </template>
     </ORadio>
   </section>
diff --git a/packages/opendesign/src/components/radio/style/index.scss b/packages/opendesign/src/components/radio/style/index.scss
index 439bc702..6ed649f8 100644
--- a/packages/opendesign/src/components/radio/style/index.scss
+++ b/packages/opendesign/src/components/radio/style/index.scss
@@ -7,7 +7,6 @@
   font-size: var(--radio-text-size);
   line-height: var(--radio-text-height);
   color: var(--radio-color);
-
   cursor: pointer;
 
   input[type='radio'] {
@@ -21,33 +20,6 @@
     opacity: 0;
   }
 
-  .o-radio-icon {
-    position: relative;
-    display: inline-block;
-    border-radius: 50%;
-    width: 18px;
-    height: 18px;
-    background: var(--o-color-bg2);
-    border: 1px solid var(--o-color-border1);
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background-color: transparent;
-      transition: background-color 0.3s;
-    }
-  }
-
-  .o-radio-label {
-    margin-left: 8px;
-  }
-
   &.is-checked {
     .o-radio-icon {
       &::after {
@@ -72,3 +44,30 @@
     }
   }
 }
+
+.o-radio-icon {
+  position: relative;
+  display: inline-block;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  background: var(--o-color-bg2);
+  border: 1px solid var(--o-color-border1);
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: transparent;
+    transition: background-color 0.3s;
+  }
+}
+
+.o-radio-label {
+  margin-left: 8px;
+}
diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss
index bf302ba8..8d3fefaa 100644
--- a/packages/opendesign/src/components/style/animation.scss
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -8,7 +8,7 @@
   }
 }
 
-.o-roating {
+.o-rotating {
   animation: o-rotating var(--o-transition-duration-long) var(--o-transition-function-linear) infinite;
 }
 
diff --git a/packages/opendesign/src/components/switch/OSwitch.vue b/packages/opendesign/src/components/switch/OSwitch.vue
index 5270e69b..3fe06ef1 100644
--- a/packages/opendesign/src/components/switch/OSwitch.vue
+++ b/packages/opendesign/src/components/switch/OSwitch.vue
@@ -5,28 +5,38 @@ import { defaultSize, defaultShape } from '../_shared/global';
 import type { SizeT, ShapeT } from '../_shared/global';
 import { IconLoading } from '../_shared/icons';
 
-// TODO:
-// 1. props 参数注释需要补全
-// 2. 增加chang事件的示例
 interface SwitchPropT {
   /**
-   * 开关尺寸: 'large' | 'normal' | 'small'
+   * 双向绑定值
+   */
+  modelValue?: boolean;
+  /**
+   * 开关尺寸："large" | "normal" | "small"
    */
   size?: SizeT;
   /**
-   * 开关形状: 'normal' | 'round'
+   * 开关形状："normal" | "round"
    */
   shape?: ShapeT;
-  modelValue?: boolean;
+  /**
+   * 是否禁用
+   */
   disabled?: boolean;
+  /**
+   * 是否加载中
+   */
   loading?: boolean;
+  /**
+   *
+   * 状态改变前的钩子函数
+   */
   beforeChange?: (val: boolean) => Promise<boolean> | boolean;
 }
 
 const props = withDefaults(defineProps<SwitchPropT>(), {
+  modelValue: false,
   size: undefined,
   shape: undefined,
-  modelValue: false,
   disabled: false,
   loading: false,
   beforeChange: undefined,
@@ -36,10 +46,6 @@ const emits = defineEmits<{
   (e: 'update:modelValue', val: boolean): void;
   (e: 'change', val: boolean): void;
 }>();
-// TODO：这个函数命名太宽泛了，建议明确下如：isExpectBeforeChangeType，或者如果只在一个地方使用，就不用抽取函数了
-const isExpectType = (res: unknown) => {
-  return isPromise(res) || isBoolean(res);
-};
 
 const isChangeable = (): Promise<boolean> => {
   if (props.loading || props.disabled) {
@@ -51,7 +57,7 @@ const isChangeable = (): Promise<boolean> => {
   }
 
   const res = props.beforeChange(!props.modelValue);
-  if (!isExpectType(res)) {
+  if (!(isPromise(res) || isBoolean(res))) {
     return Promise.reject('beforeChange should return  type `Promise<boolean>` or `boolean`');
   }
 
@@ -85,17 +91,14 @@ const onClick = () => {
     ]"
     @click="onClick"
   >
-    <div class="o-switch-wrapper">
-      <div class="o-switch-handler">
-        <!-- TODO：尽量不要使用语义不对应的标签，无语义的使用span就好了 -->
-        <i v-if="props.loading" class="o-switch-icon_loading">
-          <IconLoading />
-        </i>
-      </div>
-      <div v-if="$slots.on || $slots.off" class="o-switch-content">
-        <slot v-if="props.modelValue" name="on"></slot>
-        <slot v-else name="off"></slot>
-      </div>
+    <div class="o-switch-handler">
+      <span v-if="props.loading" class="o-switch-icon_loading o-rotating">
+        <IconLoading />
+      </span>
+    </div>
+    <div v-if="$slots.on || $slots.off" class="o-switch-content">
+      <slot v-if="props.modelValue" name="on"></slot>
+      <slot v-else name="off"></slot>
     </div>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue b/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
index 6bfadeb3..3f7ab97e 100644
--- a/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
+++ b/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
@@ -4,6 +4,7 @@ import '../style';
 import SwitchSizeShape from './SwitchSizeShape.vue';
 import SwitchDisabledAndLoading from './SwitchDisabledAndLoading.vue';
 import SwitchBeforeChange from './SwitchBeforeChange.vue';
+import SwitchEvents from './SwitchEvents.vue';
 import SwitchSlots from './SwitchSlots.vue';
 </script>
 <template>
@@ -11,6 +12,7 @@ import SwitchSlots from './SwitchSlots.vue';
     <SwitchSizeShape />
     <SwitchDisabledAndLoading />
     <SwitchBeforeChange />
+    <SwitchEvents />
     <SwitchSlots />
   </div>
 </template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue b/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue
index 84454288..3a34a597 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue
@@ -3,12 +3,16 @@ import { ref } from 'vue';
 import { OSWitch } from '../index';
 const switchVal1 = ref(false);
 const switchVal2 = ref(true);
+const switchVal3 = ref(false);
+const switchVal4 = ref(true);
 </script>
 
 <template>
   <h4>Disabled & Loading</h4>
   <section>
-    <OSWitch v-model="switchVal1" loading />
-    <OSWitch v-model="switchVal2" shape="round" loading />
+    <OSWitch v-model="switchVal1" disabled />
+    <OSWitch v-model="switchVal2" shape="round" disabled />
+    <OSWitch v-model="switchVal3" loading />
+    <OSWitch v-model="switchVal4" shape="round" loading />
   </section>
 </template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchShape.vue b/packages/opendesign/src/components/switch/__demo__/SwitchEvents.vue
similarity index 52%
rename from packages/opendesign/src/components/switch/__demo__/SwitchShape.vue
rename to packages/opendesign/src/components/switch/__demo__/SwitchEvents.vue
index ea2d8dab..b56a9d58 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchShape.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchEvents.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OSWitch } from '../index';
+
 const switchVal1 = ref(false);
-const switchVal2 = ref(true);
+
+const handleChange = (val: boolean) => {
+  console.log(val);
+};
 </script>
 
 <template>
+  <h4>change事件</h4>
   <section>
-    <OSWitch v-model="switchVal1" />
-    <OSWitch v-model="switchVal2" shape="round" />
+    <OSWitch v-model="switchVal1" shape="round" @change="handleChange" />
   </section>
 </template>
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index df3d321c..80e57f6c 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -1,45 +1,37 @@
 @import './var.scss';
 
 .o-switch {
-  display: inline-flex;
-  align-items: center;
+  position: relative;
   background-color: var(--switch-bg);
   color: var(--switch-color);
-  transition: all 0.3s;
+  transition: background-color var(--o-transition-duration-3);
   cursor: pointer;
-  // TODO 以o-xxx的类 不需要嵌套，尽量减少嵌套
-  .o-switch-wrapper {
-    width: 100%;
-    height: 100%;
-    position: relative;
 
-    .o-switch-handler {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      background-color: var(--switch-handler-bg);
-      transition: all 0.3s;
-
-      i {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--switch-bg);
-        animation: o-rotating 2s linear infinite;
-      }
-    }
+  .o-switch-handler {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: var(--switch-handler-bg);
+    transition: left var(--o-transition-duration-3);
 
-    .o-switch-content {
+    .o-switch-icon_loading {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
+      color: var(--switch-bg);
     }
   }
 
+  .o-switch-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   &.is-checked {
     background-color: var(--switch-bg-checked);
   }
@@ -48,159 +40,124 @@
   &.is-loading {
     cursor: not-allowed;
     background-color: var(--switch-bg_disabled);
+  }
 
-    &.is-checked {
-      background-color: var(--switch-bg-checked_disabled);
-      .o-switch-wrapper {
-        .o-switch-handler {
-          i {
-            color: var(--switch-bg-checked_disabled);
-          }
-        }
+  &.is-disabled.is-checked,
+  &.is-loading.is-checked {
+    background-color: var(--switch-bg-checked_disabled);
+    .o-switch-handler {
+      .o-switch-icon_loading {
+        color: var(--switch-bg-checked_disabled);
       }
     }
   }
 }
 
+.o-switch.o-switch-shape-round {
+  .o-switch-handler {
+    border-radius: 50%;
+  }
+}
+
 .o-switch-size-normal {
   min-width: 40px;
   height: 20px;
   border-radius: 2px;
+  font-size: var(--switch-text-size-m);
+  line-height: var(--switch-text-height-m);
+
+  .o-switch-handler {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    left: 2px;
+  }
 
-  .o-switch-wrapper {
-    font-size: var(--switch-text-size-m);
-    line-height: var(--switch-text-height-m);
+  .o-switch-content {
+    padding-left: 20px;
+    padding-right: 4px;
+  }
 
+  &.is-checked {
     .o-switch-handler {
-      width: 16px;
-      height: 16px;
-      border-radius: 2px;
-      left: 2px;
-
-      i {
-        font-size: var(--switch-text-size-m);
-      }
+      left: calc(100% - 18px);
     }
-
     .o-switch-content {
-      padding-left: 20px;
-      padding-right: 4px;
-    }
-  }
-
-  &.is-checked {
-    .o-switch-wrapper {
-      .o-switch-handler {
-        left: calc(100% - 18px);
-      }
-      .o-switch-content {
-        padding-left: 4px;
-        padding-right: 20px;
-      }
+      padding-left: 4px;
+      padding-right: 20px;
     }
   }
+}
 
-  &.o-switch-shape-round {
-    border-radius: 10px;
-    .o-switch-wrapper {
-      .o-switch-handler {
-        border-radius: 50%;
-      }
-    }
-  }
+.o-switch-size-normal.o-switch-shape-round {
+  border-radius: 10px;
 }
+
 .o-switch-size-large {
   min-width: 60px;
   height: 28px;
   border-radius: 2px;
+  font-size: var(--switch-text-size-l);
+  line-height: var(--switch-text-height-l);
+
+  .o-switch-handler {
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+    left: 4px;
+  }
 
-  .o-switch-wrapper {
-    font-size: var(--switch-text-size-l);
-    // TODO
-    line-height: --switch-text-height-l;
-    .o-switch-handler {
-      width: 20px;
-      height: 20px;
-      border-radius: 2px;
-      left: 4px;
-
-      i {
-        font-size: var(--switch-text-size-l);
-      }
-    }
-
-    .o-switch-content {
-      padding-left: 28px;
-      padding-right: 8px;
-    }
+  .o-switch-content {
+    padding-left: 28px;
+    padding-right: 8px;
   }
 
   &.is-checked {
-    .o-switch-wrapper {
-      .o-switch-handler {
-        left: calc(100% - 24px);
-      }
-
-      .o-switch-content {
-        padding-left: 8px;
-        padding-right: 28px;
-      }
+    .o-switch-handler {
+      left: calc(100% - 24px);
     }
-  }
 
-  &.o-switch-shape-round {
-    border-radius: 14px;
-    .o-switch-wrapper {
-      .o-switch-handler {
-        border-radius: 50%;
-      }
+    .o-switch-content {
+      padding-left: 8px;
+      padding-right: 28px;
     }
   }
 }
 
+.o-switch-size-large.o-switch-shape-round {
+  border-radius: 14px;
+}
+
 .o-switch-size-small {
   min-width: 30px;
   height: 16px;
   border-radius: 2px;
+  font-size: var(--switch-text-size-s);
+  line-height: var(--switch-text-height-s);
+
+  .o-switch-handler {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    left: 2px;
+  }
 
-  .o-switch-wrapper {
-    font-size: var(--switch-text-size-s);
-    line-height: var(--switch-text-height-s);
-    .o-switch-handler {
-      width: 12px;
-      height: 12px;
-      border-radius: 2px;
-      left: 2px;
-
-      i {
-        font-size: var(--switch-text-size-s);
-      }
-    }
-
-    .o-switch-content {
-      padding-left: 15px;
-      padding-right: 2px;
-    }
+  .o-switch-content {
+    padding-left: 15px;
+    padding-right: 2px;
   }
 
   &.is-checked {
-    .o-switch-wrapper {
-      .o-switch-handler {
-        left: calc(100% - 14px);
-      }
-      .o-switch-content {
-        padding-left: 2px;
-        padding-right: 15px;
-      }
+    .o-switch-handler {
+      left: calc(100% - 14px);
     }
-  }
-
-  &.o-switch-shape-round {
-    border-radius: 8px;
-    .o-switch-wrapper {
-      .o-switch-handler {
-        border-radius: 50%;
-      }
+    .o-switch-content {
+      padding-left: 2px;
+      padding-right: 15px;
     }
   }
 }
+
+.o-switch-size-small.o-switch-shape-round {
+  border-radius: 8px;
+}
-- 
Gitee