From c25befd531d39566ee6173df684a9a1a971c122e Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 8 Mar 2023 10:17:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=84=E8=8C=83=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/badge/__demo__/BadgeBasic.vue  |   6 +
 .../components/badge/__demo__/BadgeColor.vue  |   8 +-
 .../src/components/badge/style/index.scss     |  16 +--
 .../src/components/badge/style/var.scss       |  16 +--
 .../src/components/breadcrumb/style/var.scss  |   4 +-
 .../src/components/checkbox/OCheckbox.vue     |  15 ++-
 .../checkbox/__demo__/CheckboxEvents.vue      |   2 +-
 .../src/components/checkbox/style/index.scss  |  62 ++++-----
 .../src/components/checkbox/style/var.scss    |  10 +-
 .../src/components/divider/ODivider.vue       |   2 +-
 .../src/components/divider/style/index.scss   |  25 ++--
 .../src/components/divider/style/var.scss     |  13 +-
 .../components/menu/__demo__/MenuBasic.vue    |   6 +
 .../src/components/radio-group/style/var.scss |   2 +
 .../src/components/radio/ORadio.vue           |  12 +-
 .../components/radio/__demo__/RadioEvents.vue |   2 +-
 .../src/components/radio/style/index.scss     |  48 +++----
 .../src/components/radio/style/var.scss       |  20 +--
 .../opendesign/src/components/rate/ORate.vue  |   2 +-
 .../src/components/rate/style/var.scss        |   4 +-
 .../opendesign/src/components/rate/types.ts   |   4 +-
 .../src/components/switch/OSwitch.vue         |  18 ++-
 .../switch/__demo__/IndexSwitch.vue           |   7 +-
 .../{SwitchSizeShape.vue => SwitchBasic.vue}  |  12 +-
 .../switch/__demo__/SwitchEvents.vue          |   4 +-
 .../switch/__demo__/SwitchRound.vue           |  42 ++++++
 .../switch/__demo__/SwitchSlots.vue           |   4 +-
 .../src/components/switch/style/index.scss    | 127 +++++++-----------
 .../src/components/switch/style/var.scss      |  48 +++++--
 .../opendesign/src/components/switch/types.ts |  11 +-
 30 files changed, 317 insertions(+), 235 deletions(-)
 rename packages/opendesign/src/components/switch/__demo__/{SwitchSizeShape.vue => SwitchBasic.vue} (53%)
 create mode 100644 packages/opendesign/src/components/switch/__demo__/SwitchRound.vue

diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue b/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue
index 48a38f4a..dbc79427 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue
@@ -18,3 +18,9 @@ import { OBadge } from '../index';
     </OBadge>
   </section>
 </template>
+
+<style lang="scss" scoped>
+.o-badge + .o-badge {
+  margin-left: 20px;
+}
+</style>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue b/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue
index 78ac6645..8b1ba3ef 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue
@@ -5,7 +5,7 @@ import { OBadge } from '../index';
 </script>
 
 <template>
-  <h4>基础用法</h4>
+  <h4>不同颜色</h4>
   <section>
     <OBadge :value="9" color="primary">
       <OButton variant="solid" />
@@ -21,3 +21,9 @@ import { OBadge } from '../index';
     </OBadge>
   </section>
 </template>
+
+<style lang="scss" scoped>
+.o-badge + .o-badge {
+  margin-left: 20px;
+}
+</style>
diff --git a/packages/opendesign/src/components/badge/style/index.scss b/packages/opendesign/src/components/badge/style/index.scss
index 871e247f..cfd05e63 100644
--- a/packages/opendesign/src/components/badge/style/index.scss
+++ b/packages/opendesign/src/components/badge/style/index.scss
@@ -11,22 +11,22 @@
   right: 0;
   transform: translate(50%, -50%);
   transform-origin: 100% 0;
-  color: var(--badge-color);
-  background-color: var(--badge-bg);
   min-width: 20px;
   font-size: var(--badge-text-size);
   line-height: var(--badge-text-height);
-  text-align: center;
   height: var(--badge-text-height);
-  padding-left: 4px;
-  padding-right: 4px;
-  border-radius: var(--badge-border);
+  text-align: center;
+  color: var(--badge-color);
+  background-color: var(--badge-bg-color);
+  padding-left: var(--badge-padding);
+  padding-right: var(--badge-padding);
+  border-radius: var(--badge-radius);
 }
 
 .o-badge-dot {
   .o-badge-content {
-    height: 8px;
-    width: 8px;
+    height: var(--badge-dot-size);
+    width: var(--badge-dot-size);
     padding: 0;
     border-radius: 50%;
     min-width: unset;
diff --git a/packages/opendesign/src/components/badge/style/var.scss b/packages/opendesign/src/components/badge/style/var.scss
index 664ae2ee..43581227 100644
--- a/packages/opendesign/src/components/badge/style/var.scss
+++ b/packages/opendesign/src/components/badge/style/var.scss
@@ -2,31 +2,31 @@
   --badge-text-size: var(--o-font_size-tip1);
   --badge-text-height: var(--o-line_height-tip1);
 
-  --badge-border: var(--o-radius-control-l);
-
   --badge-color: var(--o-color-info1);
+  --badge-bg-color: var(--o-color-control1);
 
-  --badge-bg: var(--o-color-control1);
+  --badge-radius: var(--o-size-l);
+  --badge-padding: 8px;
 
-  --badge-padding: 20px;
+  --badge-dot-size: 8px;
 }
 
 .o-badge-primary {
   --badge-color: var(--o-color-fill1);
-  --badge-bg: var(--o-color-primary1);
+  --badge-bg-color: var(--o-color-primary1);
 }
 
 .o-badge-success {
   --badge-color: var(--o-color-fill1);
-  --badge-bg: var(--o-color-success1);
+  --badge-bg-color: var(--o-color-success1);
 }
 
 .o-badge-warning {
   --badge-color: var(--o-color-fill1);
-  --badge-bg: var(--o-color-warning1);
+  --badge-bg-color: var(--o-color-warning1);
 }
 
 .o-badge-danger {
   --badge-color: var(--o-color-fill1);
-  --badge-bg: var(--o-color-danger1);
+  --badge-bg-color: var(--o-color-danger1);
 }
diff --git a/packages/opendesign/src/components/breadcrumb/style/var.scss b/packages/opendesign/src/components/breadcrumb/style/var.scss
index a0a014c6..f235992a 100644
--- a/packages/opendesign/src/components/breadcrumb/style/var.scss
+++ b/packages/opendesign/src/components/breadcrumb/style/var.scss
@@ -2,8 +2,8 @@
   --breadcrumb-color: var(--o-color-info3);
   --breadcrumb-color-active: var(--o-color-info1);
 
-  --breadcrumb-gap: var(--o-gap-1);
-
   --breadcrumb-text-size: var(--o-font_size-text);
   --breadcrumb-text-height: var(--o-line_height-text);
+
+  --breadcrumb-gap: var(--o-gap-1);
 }
diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
index 20f45b03..b684a610 100644
--- a/packages/opendesign/src/components/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue
@@ -86,13 +86,20 @@ defineExpose({
 </script>
 
 <template>
-  <label class="o-checkbox" :class="{ 'is-checked': isChecked, 'is-disabled': isDisabled, 'is-indeterminate': indeterminate }">
-    <div class="o-checkbox-wrapper">
-      <input type="checkbox" :value="value" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
+  <label
+    class="o-checkbox"
+    :class="{
+      'o-checkbox-checked': isChecked,
+      'o-checkbox-disabled': isDisabled,
+      'o-checkbox-indeterminate': props.indeterminate,
+    }"
+  >
+    <div class="o-checkbox-wrap">
+      <input type="checkbox" :value="props.value" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
       <slot v-if="$slots.checkbox" name="checkbox" :checked="isChecked" :disabled="isDisabled"></slot>
       <template v-else>
         <span class="o-checkbox-input">
-          <IconMinus v-if="indeterminate" />
+          <IconMinus v-if="props.indeterminate" />
           <IconDone v-else-if="isChecked" />
         </span>
         <span class="o-checkbox-label">
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue
index 7fc04986..cc99e049 100644
--- a/packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue
@@ -18,7 +18,7 @@ const handleChange2 = (val: Array<string | number>) => {
 </script>
 
 <template>
-  <h4>change事件</h4>
+  <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>
diff --git a/packages/opendesign/src/components/checkbox/style/index.scss b/packages/opendesign/src/components/checkbox/style/index.scss
index fa4636cf..37d3df4c 100644
--- a/packages/opendesign/src/components/checkbox/style/index.scss
+++ b/packages/opendesign/src/components/checkbox/style/index.scss
@@ -17,39 +17,9 @@
     bottom: 0;
     opacity: 0;
   }
-
-  &:hover {
-    .o-checkbox-input {
-      // border-color: var(--checkbox-icon-checked);
-    }
-  }
-
-  &.is-checked,
-  &.is-indeterminate {
-    .o-checkbox-input {
-      background-color: var(--checkbox-input-bg-checked);
-      border-color: var(--checkbox-input-border-checked);
-    }
-  }
-
-  &.is-disabled {
-    cursor: not-allowed;
-    color: var(--checkbox-color-disabled);
-    .o-checkbox-input {
-      border-color: var(--checkbox-input-border-disabled);
-    }
-  }
-
-  &.is-checked.is-disabled,
-  &.is-indeterminate.is-disabled {
-    .o-checkbox-input {
-      background-color: var(--checkbox-input-bg-checked-disabled);
-      border-color: var(--checkbox-input-bg-checked-disabled);
-    }
-  }
 }
 
-.o-checkbox-wrapper {
+.o-checkbox-wrap {
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -60,13 +30,37 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  width: 16px;
-  height: 16px;
+  width: var(--checkbox-input-size);
+  height: var(--checkbox-input-size);
   background-color: var(--checkbox-input-bg);
   color: var(--checkbox-input-color);
-  border: 1px solid var(--checkbox-input-border);
+  border: 1px solid var(--checkbox-input-bd-color);
 }
 
 .o-checkbox-label {
   margin-left: 8px;
 }
+
+.o-checkbox-checked,
+.o-checkbox-indeterminate {
+  .o-checkbox-input {
+    background-color: var(--checkbox-input-bg-checked);
+    border-color: var(--checkbox-input-bd-color-checked);
+  }
+}
+
+.o-checkbox-disabled {
+  cursor: not-allowed;
+  color: var(--checkbox-color-disabled);
+  .o-checkbox-input {
+    border-color: var(--checkbox-input-bd-color-disabled);
+  }
+}
+
+.o-checkbox-checked.o-checkbox-disabled,
+.o-checkbox-indeterminate.o-checkbox-disabled {
+  .o-checkbox-input {
+    background-color: var(--checkbox-input-bg-checked-disabled);
+    border-color: var(--checkbox-input-bg-checked-disabled);
+  }
+}
diff --git a/packages/opendesign/src/components/checkbox/style/var.scss b/packages/opendesign/src/components/checkbox/style/var.scss
index 80bb23d0..a0c07b50 100644
--- a/packages/opendesign/src/components/checkbox/style/var.scss
+++ b/packages/opendesign/src/components/checkbox/style/var.scss
@@ -7,12 +7,14 @@
 
   --checkbox-input-color: var(--o-color-fill1);
 
-  --checkbox-input-border: var(--o-color-control1);
-  --checkbox-input-border-disabled: var(--o-color-control4);
-  --checkbox-input-border-checked: var(--o-color-primary1);
-  --checkbox-input-border-checked-disabled: var(--o-color-primary4);
+  --checkbox-input-bd-color: var(--o-color-control1);
+  --checkbox-input-bd-color-disabled: var(--o-color-control4);
+  --checkbox-input-bd-color-checked: var(--o-color-primary1);
+  --checkbox-input-bd-color-checked-disabled: var(--o-color-primary4);
 
   --checkbox-input-bg: var(--o-color-fill1);
   --checkbox-input-bg-checked: var(--o-color-primary1);
   --checkbox-input-bg-checked-disabled: var(--o-color-primary4);
+
+  --checkbox-input-size: 16px;
 }
diff --git a/packages/opendesign/src/components/divider/ODivider.vue b/packages/opendesign/src/components/divider/ODivider.vue
index 6d17459e..9e6f8521 100644
--- a/packages/opendesign/src/components/divider/ODivider.vue
+++ b/packages/opendesign/src/components/divider/ODivider.vue
@@ -8,7 +8,7 @@ const props = defineProps(dividerProps);
   <div
     role="separator"
     class="o-divider"
-    :class="[`o-divider-${props.type}`, `o-divider-direction-${props.direction}`, { [`o-divider-content-${props.contentPosition}`]: $slots.default }]"
+    :class="[`o-divider-${props.type}`, `o-divider-${props.direction}`, { [`o-divider-content-${props.contentPosition}`]: $slots.default }]"
   >
     <template v-if="props.direction === 'horizontal'">
       <div class="o-divider-line"></div>
diff --git a/packages/opendesign/src/components/divider/style/index.scss b/packages/opendesign/src/components/divider/style/index.scss
index 5de2a1e7..cd82a86e 100644
--- a/packages/opendesign/src/components/divider/style/index.scss
+++ b/packages/opendesign/src/components/divider/style/index.scss
@@ -7,19 +7,18 @@
   font-weight: 500;
 }
 
-.o-divider-direction-horizontal {
+.o-divider-horizontal {
   display: flex;
   align-items: center;
   width: 100%;
-  margin: var(--o-divider-gap-horizontal) 0;
+  margin: var(--o-divider-gap) 0;
 }
 
 .o-divider-line {
   width: 100%;
   height: 1px;
   border-width: 1px 0 0 0;
-  border-style: solid;
-  border-color: var(--o-divider-line-color);
+  border-color: var(--o-divider-bd-color);
 }
 
 .o-divider-content {
@@ -43,26 +42,32 @@
   }
 }
 
-.o-divider-direction-vertical {
+.o-divider-vertical {
   display: inline-block;
   width: 1px;
   height: 1em;
-  margin: 0 var(--o-divider-gap-vertical);
+  margin: 0 var(--o-divider-gap);
   vertical-align: middle;
   border-width: 0 0 0 1px;
-  border-style: solid;
-  border-color: var(--o-divider-line-color);
+  border-color: var(--o-divider-bd-color);
+}
+
+.o-divider-solid {
+  &.o-divider-vertical,
+  .o-divider-line {
+    border-style: solid;
+  }
 }
 
 .o-divider-dashed {
-  &.o-divider-direction-vertical,
+  &.o-divider-vertical,
   .o-divider-line {
     border-style: dashed;
   }
 }
 
 .o-divider-dotted {
-  &.o-divider-direction-vertical,
+  &.o-divider-vertical,
   .o-divider-line {
     border-style: dotted;
   }
diff --git a/packages/opendesign/src/components/divider/style/var.scss b/packages/opendesign/src/components/divider/style/var.scss
index 66cf2a81..af9e6c3c 100644
--- a/packages/opendesign/src/components/divider/style/var.scss
+++ b/packages/opendesign/src/components/divider/style/var.scss
@@ -1,11 +1,16 @@
 .o-divider {
   --o-divider-color: var(--o-color-info1);
 
-  --o-divider-line-color: var(--o-color-control1);
-
-  --o-divider-gap-horizontal: var(--o-gap-4);
-  --o-divider-gap-vertical: var(--o-gap-2);
+  --o-divider-bd-color: var(--o-color-control1);
 
   --o-divider-text-size: var(--o-font_size-text);
   --o-divider-text-height: var(--o-line_height-text);
 }
+
+.o-divider-horizontal {
+  --o-divider-gap: var(--o-gap-4);
+}
+
+.o-divider-vertical {
+  --o-divider-gap: var(--o-gap-2);
+}
diff --git a/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue b/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue
index 1d8f778d..f211c504 100644
--- a/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue
+++ b/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue
@@ -71,3 +71,9 @@ const activeVal2 = ref('1-1');
     </div>
   </section>
 </template>
+
+<style lang="scss" scoped>
+section {
+  align-items: flex-start;
+}
+</style>
diff --git a/packages/opendesign/src/components/radio-group/style/var.scss b/packages/opendesign/src/components/radio-group/style/var.scss
index 520e6ea9..54ecc611 100644
--- a/packages/opendesign/src/components/radio-group/style/var.scss
+++ b/packages/opendesign/src/components/radio-group/style/var.scss
@@ -1,3 +1,5 @@
 .o-radio-group {
   --radio-group-gap: var(--o-gap-2);
 }
+
+
diff --git a/packages/opendesign/src/components/radio/ORadio.vue b/packages/opendesign/src/components/radio/ORadio.vue
index f70bb37b..f58b7a41 100644
--- a/packages/opendesign/src/components/radio/ORadio.vue
+++ b/packages/opendesign/src/components/radio/ORadio.vue
@@ -65,9 +65,15 @@ const onChange = () => {
 </script>
 
 <template>
-  <label class="o-radio" :class="{ 'is-checked': isChecked, 'is-disabled': isDisabled }">
-    <div class="o-radio-wrapper">
-      <input type="radio" :value="value" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
+  <label
+    class="o-radio"
+    :class="{
+      'o-radio-checked': isChecked,
+      'o-radio-disabled': isDisabled,
+    }"
+  >
+    <div class="o-radio-wrap">
+      <input type="radio" :value="props.value" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
       <slot v-if="$slots.radio" name="radio" :checked="isChecked" :disabled="isDisabled"></slot>
       <template v-else>
         <span class="o-radio-input"></span>
diff --git a/packages/opendesign/src/components/radio/__demo__/RadioEvents.vue b/packages/opendesign/src/components/radio/__demo__/RadioEvents.vue
index 0ec47e6b..07a103d2 100644
--- a/packages/opendesign/src/components/radio/__demo__/RadioEvents.vue
+++ b/packages/opendesign/src/components/radio/__demo__/RadioEvents.vue
@@ -18,7 +18,7 @@ const handleChange2 = (val: string | number | boolean) => {
 </script>
 
 <template>
-  <h4>change事件</h4>
+  <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>
diff --git a/packages/opendesign/src/components/radio/style/index.scss b/packages/opendesign/src/components/radio/style/index.scss
index 9eddfbd1..29d0a140 100644
--- a/packages/opendesign/src/components/radio/style/index.scss
+++ b/packages/opendesign/src/components/radio/style/index.scss
@@ -17,33 +17,33 @@
     bottom: 0;
     opacity: 0;
   }
+}
 
-  &.is-checked {
-    .o-radio-input {
-      &::after {
-        background-color: var(--radio-input-color-checked);
-      }
-    }
+.o-radio-disabled {
+  cursor: not-allowed;
+  color: var(--radio-color-disabled);
+  .o-radio-input {
+    border-color: var(--radio-input-bd-color-disabled);
   }
+}
 
-  &.is-disabled {
-    cursor: not-allowed;
-    color: var(--radio-color-disabled);
-    .o-radio-input {
-      border-color: var(--radio-input-border-disabled);
+.o-radio-checked {
+  .o-radio-input {
+    &::after {
+      background-color: var(--radio-input-inner-bg-color-checked);
     }
   }
+}
 
-  &.is-checked.is-disabled {
-    .o-radio-input {
-      &::after {
-        background-color: var(--radio-input-color-disabled);
-      }
+.o-radio-checked.o-radio-disabled {
+  .o-radio-input {
+    &::after {
+      background-color: var(--radio-input-inner-bg-color-checked-disabled);
     }
   }
 }
 
-.o-radio-wrapper {
+.o-radio-wrap {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -53,11 +53,11 @@
 .o-radio-input {
   position: relative;
   display: inline-block;
+  width: var(--radio-input-size);
+  height: var(--radio-input-size);
+  background-color: var(--radio-input-bg-color);
+  border: 1px solid var(--radio-input-bd-color);
   border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  background-color: var(--radio-input-bg);
-  border: 1px solid var(--radio-input-border);
 
   &::after {
     content: '';
@@ -65,10 +65,10 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    width: 12px;
-    height: 12px;
+    width: var(--radio-input-inner-size);
+    height: var(--radio-input-inner-size);
     border-radius: 50%;
-    background-color: transparent;
+    background-color: var(--radio-input-inner-bg-color);
     transition: background-color var(--o-duration-s) var(--o-easing-standard);
   }
 }
diff --git a/packages/opendesign/src/components/radio/style/var.scss b/packages/opendesign/src/components/radio/style/var.scss
index 2f0e0ff7..0aa09208 100644
--- a/packages/opendesign/src/components/radio/style/var.scss
+++ b/packages/opendesign/src/components/radio/style/var.scss
@@ -1,15 +1,19 @@
 .o-radio {
-  --radio-color: var(--o-color-info1);
-  --radio-color-disabled: var(--o-color-info4);
-
   --radio-text-size: var(--o-font_size-text);
   --radio-text-height: var(--o-line_height-text);
 
-  --radio-input-bg: var(--o-color-fill2);
+  --radio-input-size: 18px;
+  --radio-input-inner-size: 12px;
+
+  --radio-color: var(--o-color-info1);
+  --radio-color-disabled: var(--o-color-info4);
+
+  --radio-input-bg-color: var(--o-color-control-light);
 
-  --radio-input-color-checked: var(--o-color-primary1);
-  --radio-input-color-disabled: var(--o-color-primary4);
+  --radio-input-bd-color: var(--o-color-control1);
+  --radio-input-bd-color-disabled: var(--o-color-control4);
 
-  --radio-input-border: var(--o-color-control1);
-  --radio-input-border-disabled: var(--o-color-control4);
+  --radio-input-inner-bg-color: transparent;
+  --radio-input-inner-bg-color-checked: var(--o-color-primary1);
+  --radio-input-inner-bg-color-checked-disabled: var(--o-color-primary4);
 }
diff --git a/packages/opendesign/src/components/rate/ORate.vue b/packages/opendesign/src/components/rate/ORate.vue
index 8bf5fd4f..a7810a42 100644
--- a/packages/opendesign/src/components/rate/ORate.vue
+++ b/packages/opendesign/src/components/rate/ORate.vue
@@ -75,7 +75,7 @@ const iconStatus = computed(() => {
 </script>
 
 <template>
-  <div class="o-rate" :class="[`o-rate-${props.color}`, `o-rate-size-${props.size || defaultSize}`]" @mouseleave="resetHoverIndex">
+  <div class="o-rate" :class="[`o-rate-${props.color}`, `o-rate-${props.size || defaultSize}`]" @mouseleave="resetHoverIndex">
     <div
       v-for="(item, key) in count"
       :key="key"
diff --git a/packages/opendesign/src/components/rate/style/var.scss b/packages/opendesign/src/components/rate/style/var.scss
index 6938ef23..cb369f90 100644
--- a/packages/opendesign/src/components/rate/style/var.scss
+++ b/packages/opendesign/src/components/rate/style/var.scss
@@ -3,11 +3,13 @@
   --rate-color-active: var(--o-color-warning1);
 
   --rate-gap: var(--o-gap-2);
+}
 
+.o-rate-medium {
   --rate-height: var(--o-font_size-h1);
 }
 
-.o-rate-size-large {
+.o-rate-large {
   --rate-height: var(--o-font_size-display3);
 }
 
diff --git a/packages/opendesign/src/components/rate/types.ts b/packages/opendesign/src/components/rate/types.ts
index d5e17431..81e2d6ca 100644
--- a/packages/opendesign/src/components/rate/types.ts
+++ b/packages/opendesign/src/components/rate/types.ts
@@ -24,11 +24,11 @@ export const rateProps = {
   },
   /**
    * 尺寸
-   * "normal" | "small" | "large"
+   * "small"| "medium"  | "large"
    */
   size: {
     type: String as PropType<SizeT>,
-    default: 'normal',
+    default: 'medium',
   },
   /**
    * 颜色类型
diff --git a/packages/opendesign/src/components/switch/OSwitch.vue b/packages/opendesign/src/components/switch/OSwitch.vue
index 1216e73a..eb804e05 100644
--- a/packages/opendesign/src/components/switch/OSwitch.vue
+++ b/packages/opendesign/src/components/switch/OSwitch.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { switchProps } from './types';
-import { defaultSize, defaultShape } from '../_shared/global';
+import { defaultSize } from '../_shared/global';
+import { getRoundClass } from '../_shared/style-class';
 import { IconLoading } from '../_shared/icons';
 import { isPromise, isBoolean, isUndefined } from '../_shared/is';
 
@@ -12,6 +13,8 @@ const emits = defineEmits<{
   (e: 'change', val: string | number | boolean): void;
 }>();
 
+const round = getRoundClass(props, 'switch');
+
 // 是否选中
 const _checked = ref(props.defaultChecked);
 const isChecked = computed(() => {
@@ -68,15 +71,16 @@ const onClick = () => {
   <div
     class="o-switch"
     :class="[
-      `o-switch-size-${props.size || defaultSize}`,
-      `o-switch-shape-${props.shape || defaultShape}`,
-      { 'is-checked': isChecked },
-      { 'is-disabled': props.disabled },
-      { 'is-loading': props.loading },
+      `o-switch-${props.size || defaultSize}`,
+      round.class.value,
+      { 'o-switch-checked': isChecked },
+      { 'o-switch-disabled': props.disabled },
+      { 'o-switch-loading': props.loading },
     ]"
+    :style="round.style.value"
     @click="onClick"
   >
-    <div class="o-switch-wrapper">
+    <div class="o-switch-wrap">
       <div class="o-switch-handler">
         <span v-if="props.loading" class="o-switch-icon-loading o-rotating">
           <IconLoading />
diff --git a/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue b/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
index 3f7ab97e..fe679a0f 100644
--- a/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
+++ b/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import '../style';
 
-import SwitchSizeShape from './SwitchSizeShape.vue';
+import SwitchBasic from './SwitchBasic.vue';
+import SwitchRound from './SwitchRound.vue';
 import SwitchDisabledAndLoading from './SwitchDisabledAndLoading.vue';
 import SwitchBeforeChange from './SwitchBeforeChange.vue';
 import SwitchEvents from './SwitchEvents.vue';
 import SwitchSlots from './SwitchSlots.vue';
 </script>
+
 <template>
   <div class="page-demo">
-    <SwitchSizeShape />
+    <SwitchBasic />
+    <SwitchRound />
     <SwitchDisabledAndLoading />
     <SwitchBeforeChange />
     <SwitchEvents />
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchSizeShape.vue b/packages/opendesign/src/components/switch/__demo__/SwitchBasic.vue
similarity index 53%
rename from packages/opendesign/src/components/switch/__demo__/SwitchSizeShape.vue
rename to packages/opendesign/src/components/switch/__demo__/SwitchBasic.vue
index 4663c2bb..7c8a3cd9 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchSizeShape.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchBasic.vue
@@ -9,13 +9,11 @@ const switchVal2 = ref(true);
   <h4>Size</h4>
   <section>
     <OSWitch v-model="switchVal1" size="small" />
-    <OSWitch v-model="switchVal1" size="normal" />
+    <OSWitch v-model="switchVal1" size="medium" />
     <OSWitch v-model="switchVal1" size="large" />
-  </section>
-  <h4>Round</h4>
-  <section>
-    <OSWitch v-model="switchVal2" shape="round" size="small" />
-    <OSWitch v-model="switchVal2" shape="round" size="normal" />
-    <OSWitch v-model="switchVal2" shape="round" size="large" />
+
+    <OSWitch v-model="switchVal2" round="pill" size="small" />
+    <OSWitch v-model="switchVal2" round="pill" size="medium" />
+    <OSWitch v-model="switchVal2" round="pill" size="large" />
   </section>
 </template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchEvents.vue b/packages/opendesign/src/components/switch/__demo__/SwitchEvents.vue
index b56a9d58..9fb90f48 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchEvents.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchEvents.vue
@@ -4,13 +4,13 @@ import { OSWitch } from '../index';
 
 const switchVal1 = ref(false);
 
-const handleChange = (val: boolean) => {
+const handleChange = (val: string | number | boolean) => {
   console.log(val);
 };
 </script>
 
 <template>
-  <h4>change事件</h4>
+  <h4>Change事件</h4>
   <section>
     <OSWitch v-model="switchVal1" shape="round" @change="handleChange" />
   </section>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue b/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue
new file mode 100644
index 00000000..94a815ae
--- /dev/null
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSWitch } from '../index';
+const switchVal1 = ref(false);
+const switchVal2 = ref(true);
+const switchVal3 = ref(true);
+
+const r2 = '2px';
+const r4 = '4px';
+</script>
+
+<template>
+  <h4>Round</h4>
+  <section>
+    <div>
+      <section>
+        <p>round="pill"</p>
+        <OSWitch v-model="switchVal1" round="pill" size="small" />
+        <OSWitch v-model="switchVal1" round="pill" size="medium" />
+        <OSWitch v-model="switchVal1" round="pill" size="large" />
+      </section>
+    </div>
+
+    <div>
+      <section>
+        <p>round="2px"</p>
+        <OSWitch v-model="switchVal2" :round="r2" size="small" />
+        <OSWitch v-model="switchVal2" :round="r2" size="medium" />
+        <OSWitch v-model="switchVal2" :round="r2" size="large" />
+      </section>
+    </div>
+
+    <div>
+      <section>
+        <p>round="4px"</p>
+        <OSWitch v-model="switchVal3" :round="r4" size="small" />
+        <OSWitch v-model="switchVal3" :round="r4" size="medium" />
+        <OSWitch v-model="switchVal3" :round="r4" size="large" />
+      </section>
+    </div>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue b/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
index f96d607c..4b144b7f 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
@@ -20,12 +20,12 @@ const switchVal2 = ref(true);
       <template #off><IconX /></template>
     </OSWitch>
 
-    <OSWitch v-model="switchVal2" shape="round">
+    <OSWitch v-model="switchVal2" round="pill">
       <template #on>开</template>
       <template #off>关</template>
     </OSWitch>
 
-    <OSWitch v-model="switchVal2" shape="round">
+    <OSWitch v-model="switchVal2" round="pill">
       <template #on><IconDone /></template>
       <template #off><IconX /></template>
     </OSWitch>
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index 07cafb6e..1d771e49 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -2,33 +2,37 @@
 
 .o-switch {
   display: inline-block;
-  background-color: var(--switch-bg);
+  height: var(--switch-height);
+  font-size: var(--switch-text-size);
+  line-height: var(--switch-text-height);
   color: var(--switch-color);
+  background-color: var(--switch-bg-color);
+  border-radius: var(--switch-radius);
   transition: background-color var(--o-duration-s) var(--o-easing-standard);
   cursor: pointer;
+}
 
-  &.is-checked {
-    background-color: var(--switch-bg-checked);
-  }
+.o-switch-checked {
+  background-color: var(--switch-bg-color-checked);
+}
 
-  &.is-disabled,
-  &.is-loading {
-    cursor: not-allowed;
-    background-color: var(--switch-bg-disabled);
-  }
+.o-switch-disabled,
+.o-switch-loading {
+  cursor: not-allowed;
+  background-color: var(--switch-bg-color-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-disabled.o-switch-checked,
+.o-switch-loading.o-switch-checked {
+  background-color: var(--switch-bg-color-checked-disabled);
+  .o-switch-handler {
+    .o-switch-icon-loading {
+      color: var(--switch-bg-color-checked-disabled);
     }
   }
 }
 
-.o-switch-wrapper {
+.o-switch-wrap {
   position: relative;
   height: 100%;
 }
@@ -37,7 +41,10 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background-color: var(--switch-handler-bg);
+  width: var(--switch-handler-size);
+  height: var(--switch-handler-size);
+  border-radius: var(--switch-handler-radius);
+  background-color: var(--switch-handler-bg-color);
   transition: left var(--o-duration-s) var(--o-easing-standard);
 
   .o-switch-icon-loading {
@@ -46,7 +53,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--switch-bg);
+    color: var(--switch-bg-color);
   }
 }
 
@@ -58,92 +65,56 @@
   justify-content: center;
 }
 
-.o-switch.o-switch-shape-round {
-  .o-switch-handler {
-    border-radius: 50%;
-  }
-}
-
-.o-switch-size-medium {
-  min-width: 40px;
-  height: 20px;
-  border-radius: 2px;
-  font-size: var(--switch-text-size-m);
-  line-height: var(--switch-text-height-m);
-
+.o-switch-large {
+  min-width: 60px;
   .o-switch-handler {
-    width: 16px;
-    height: 16px;
-    border-radius: 2px;
-    left: 2px;
+    left: 4px;
   }
 
   .o-switch-content {
-    padding-left: 20px;
-    padding-right: 4px;
+    padding-left: 28px;
+    padding-right: 8px;
   }
 
-  &.is-checked {
+  &.o-switch-checked {
     .o-switch-handler {
-      left: calc(100% - 18px);
+      left: calc(100% - 24px);
     }
+
     .o-switch-content {
-      padding-left: 4px;
-      padding-right: 20px;
+      padding-left: 8px;
+      padding-right: 28px;
     }
   }
 }
 
-.o-switch-size-medium.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-medium {
+  min-width: 40px;
 
   .o-switch-handler {
-    width: 20px;
-    height: 20px;
-    border-radius: 2px;
-    left: 4px;
+    left: 2px;
   }
 
   .o-switch-content {
-    padding-left: 28px;
-    padding-right: 8px;
+    padding-left: 20px;
+    padding-right: 4px;
   }
 
-  &.is-checked {
+  &.o-switch-checked {
     .o-switch-handler {
-      left: calc(100% - 24px);
+      left: calc(100% - 18px);
     }
-
     .o-switch-content {
-      padding-left: 8px;
-      padding-right: 28px;
+      padding-left: 4px;
+      padding-right: 20px;
     }
   }
 }
 
-.o-switch-size-large.o-switch-shape-round {
-  border-radius: 14px;
-}
-
-.o-switch-size-small {
+.o-switch-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;
   }
 
@@ -152,7 +123,7 @@
     padding-right: 2px;
   }
 
-  &.is-checked {
+  &.o-switch-checked {
     .o-switch-handler {
       left: calc(100% - 14px);
     }
@@ -162,7 +133,3 @@
     }
   }
 }
-
-.o-switch-size-small.o-switch-shape-round {
-  border-radius: 8px;
-}
diff --git a/packages/opendesign/src/components/switch/style/var.scss b/packages/opendesign/src/components/switch/style/var.scss
index 12ab231a..0dd36036 100644
--- a/packages/opendesign/src/components/switch/style/var.scss
+++ b/packages/opendesign/src/components/switch/style/var.scss
@@ -1,18 +1,42 @@
 .o-switch {
-  --switch-bg: var(--o-color-control1);
-  --switch-bg-disabled: var(--o-color-control4);
-  --switch-bg-checked: var(--o-color-primary1);
-  --switch-bg-checked-disabled: var(--o-color-primary4);
+  --switch-color: var(--o-color-info1-inverse);
 
-  --switch-handler-bg: rgb(var(--o-color-white));
+  --switch-bg-color: var(--o-color-control1);
+  --switch-bg-color-disabled: var(--o-color-control4);
+  --switch-bg-color-checked: var(--o-color-primary1);
+  --switch-bg-color-checked-disabled: var(--o-color-primary4);
 
-  --switch-color: var(--o-color-info1-inverse);
+  --switch-handler-bg-color: rgb(var(--o-color-white));
+}
+
+.o-switch-large {
+  --switch-height: 28px;
+  --switch-radius: 2px;
+  --switch-text-size: var(--o-font_size-h4);
+  --switch-text-height: var(--o-line_height-h4);
+  --switch-handler-size: 20px;
+  --switch-handler-radius: 2px;
+}
+
+.o-switch-medium {
+  --switch-height: 20px;
+  --switch-radius: 2px;
+  --switch-text-size: var(--o-font_size-tip1);
+  --switch-text-height: var(--o-line_height-tip1);
+  --switch-handler-size: 16px;
+  --switch-handler-radius: 2px;
+}
 
-  --switch-text-size-l: var(--o-font_size-h4);
-  --switch-text-size-m: var(--o-font_size-tip1);
-  --switch-text-size-s: var(--o-font_size-tip2);
+.o-switch-small {
+  --switch-height: 16px;
+  --switch-radius: 2px;
+  --switch-text-size: var(--o-font_size-tip2);
+  --switch-text-height: var(--o-line_height-tip2);
+  --switch-handler-size: 12px;
+  --switch-handler-radius: 2px;
+}
 
-  --switch-text-height-l: var(--o-line_height-h4);
-  --switch-text-height-m: var(--o-line_height-tip1);
-  --switch-text-height-s: var(--o-line_height-tip2);
+.o-switch-round-pill {
+  --switch-radius: var(--o-size-l);
+  --switch-handler-radius: var(--o-size-l);
 }
diff --git a/packages/opendesign/src/components/switch/types.ts b/packages/opendesign/src/components/switch/types.ts
index 82af6009..1b703878 100644
--- a/packages/opendesign/src/components/switch/types.ts
+++ b/packages/opendesign/src/components/switch/types.ts
@@ -1,4 +1,4 @@
-import type { SizeT, ShapeT } from '../_shared/global';
+import type { SizeT, RoundT } from '../_shared/global';
 import type { ExtractPropTypes, PropType } from 'vue';
 
 export const switchProps = {
@@ -31,17 +31,16 @@ export const switchProps = {
   },
   /**
    * 开关尺寸
-   * 'large' | 'normal' | 'small'
+   * 'large' | 'medium' | 'small'
    */
   size: {
     type: String as PropType<SizeT>,
   },
   /**
-   * 开关形状
-   * 'normal' | 'round'
+   * 圆角值
    */
-  shape: {
-    type: String as PropType<ShapeT>,
+  round: {
+    type: String as PropType<RoundT>,
   },
   /**
    * 是否禁用
-- 
Gitee