diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
index 78a23715ac5ab67635c515c499ac811e1a4da334..30cd6db2adab3ce6aeabca66b1069be0f773c977 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
@@ -9,12 +9,12 @@ const link = 'www.openeuler.org';
 </script>
 
 <template>
-  <h4>红点徽章</h4>
+  <h4>点状徽章</h4>
   <section>
-    <OBadge dot>
+    <OBadge color="danger" dot>
       <OButton variant="solid" />
     </OBadge>
-    <OBadge dot>
+    <OBadge color="danger" dot>
       <OLink :href="link">普通链接</OLink>
     </OBadge>
   </section>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue b/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
index 472adc082677f8cedb8485b027a87c839f1b6b07..f2f23a11e630c406bca2fdede7f2ec9fbb849969 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
@@ -7,13 +7,13 @@ import { OBadge } from '../index';
 <template>
   <h4>徽章位置偏移</h4>
   <section>
-    <OBadge :value="9" :offset="[5, 10]">
+    <OBadge :value="9" :offset="[5, 10]" color="danger">
       <OButton variant="solid" />
     </OBadge>
-    <OBadge :value="9" :offset="[5, 20]">
+    <OBadge :value="9" :offset="[5, 20]" color="danger">
       <OButton variant="solid" />
     </OBadge>
-    <OBadge :value="9" :offset="['50%', '20%']">
+    <OBadge :value="9" :offset="['50%', '20%']" color="danger">
       <OButton variant="solid" />
     </OBadge>
   </section>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue b/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue
index 0340a7bbe0fe95f3e6f9e2e27a5f9725370db17d..21ae52cf48e51c5123c47fbdf760a2c6221d2086 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue
@@ -7,9 +7,9 @@ import { OBadge } from '../index';
 <template>
   <h4>单独使用</h4>
   <section>
-    <OBadge :value="9" />
-    <OBadge :value="100" />
-    <OBadge value="hot" />
-    <OBadge dot />
+    <OBadge :value="9" color="danger" />
+    <OBadge :value="100" color="danger" />
+    <OBadge value="hot" color="danger" />
+    <OBadge dot color="danger" />
   </section>
 </template>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
index 9fd9967433d6583e195e826a198355e05944cfff..ee7a4c2d04f0c5e45b857855576012a41c516e90 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
@@ -8,9 +8,11 @@ import { OBadge } from '../index';
 <template>
   <h4>自定义徽章内容</h4>
   <section>
-    <OBadge>
+    <OBadge color="danger">
       <OButton variant="solid" />
-      <template #content> <IconAdd /></template>
+      <template #content>
+        <IconAdd />
+      </template>
     </OBadge>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/badge/style/var.scss b/packages/opendesign/src/components/badge/style/var.scss
index 43581227bb300c25b613238c09bd617faa335233..8cf92c680e1b739c46a3c034943c96c6b73a49c5 100644
--- a/packages/opendesign/src/components/badge/style/var.scss
+++ b/packages/opendesign/src/components/badge/style/var.scss
@@ -6,6 +6,7 @@
   --badge-bg-color: var(--o-color-control1);
 
   --badge-radius: var(--o-size-l);
+
   --badge-padding: 8px;
 
   --badge-dot-size: 8px;
diff --git a/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue b/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
index 1be9187d1ee35fe6ad9ba82dc24ae8aaac0afee8..8f37f5cdb3a4bd7d65bc287164a742bf18bc1d3f 100644
--- a/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
+++ b/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
@@ -7,26 +7,18 @@ import { IconChevronRight } from '../_shared/icons';
 defineProps(breadcrumbItemProps);
 
 const breadcrumbInjection = inject(breadcrumbInjectKey, null);
-
-const emits = defineEmits<{
-  (e: 'click'): void;
-}>();
-
-const onClick = () => {
-  emits('click');
-};
 </script>
 
 <template>
   <div class="o-breadcrumb-item">
     <!-- label -->
-    <a v-if="href" :href="href" :target="target" class="o-breadcrumb-item-label" @click="onClick">
+    <a v-if="href" :href="href" :target="target" class="o-breadcrumb-item-label">
       <slot></slot>
     </a>
-    <router-link v-else-if="to" :to="to" :replace="replace" @click="onClick">
+    <router-link v-else-if="to" :to="to" :replace="replace">
       <slot></slot>
     </router-link>
-    <span v-else class="o-breadcrumb-item-label" @click="onClick">
+    <span v-else class="o-breadcrumb-item-label">
       <slot></slot>
     </span>
     <!-- separator -->
diff --git a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
index 95dbdd7805a8f1afd5728a67df63154238280012..7ad11cd76ba091dd2464767b5aa1c5bb9afd409f 100644
--- a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
+++ b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
@@ -8,10 +8,10 @@ const props = defineProps(checkboxGroupProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: Array<string | number>): void;
-  (e: 'change', val: Array<string | number>): void;
+  (e: 'change', val: Array<string | number>, ev: Event): void;
 }>();
 
-const realValue = ref(props.modelValue ?? props.defaultValue);
+const realValue = ref(isArray(props.modelValue) ? props.modelValue : props.defaultValue);
 
 watch(
   () => props.modelValue,
@@ -27,11 +27,12 @@ const isMinimum = computed(() => (isUndefined(props.min) ? false : realValue.val
 const isMaximum = computed(() => (isUndefined(props.max) ? false : realValue.value.length >= props.max));
 
 const updateModelValue = (val: Array<string | number>) => {
+  realValue.value = val;
   emits('update:modelValue', val);
 };
 
-const onChange = (val: Array<string | number>) => {
-  emits('change', val);
+const onChange = (val: Array<string | number>, ev: Event) => {
+  emits('change', val, ev);
 };
 
 provide(checkboxGroupInjectKey, {
diff --git a/packages/opendesign/src/components/checkbox-group/provide.ts b/packages/opendesign/src/components/checkbox-group/provide.ts
index c761b6681194132187c591b417a73285dabc2972..d22eeb7bcb0925452bd08ce67fdcd37d851bfe6c 100644
--- a/packages/opendesign/src/components/checkbox-group/provide.ts
+++ b/packages/opendesign/src/components/checkbox-group/provide.ts
@@ -6,5 +6,5 @@ export const checkboxGroupInjectKey: InjectionKey<{
   isMinimum: Ref<boolean>;
   isMaximum: Ref<boolean>;
   updateModelValue: (val: Array<string | number>) => void;
-  onChange: (val: Array<string | number>) => void;
+  onChange: (val: Array<string | number>, ev: Event) => void;
 }> = Symbol('provide-checkbox-group');
diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
index b684a61076a5bf9601b34bedcce21c89b70dae38..2348aa4ab81c725a858f2469085a7ee6bf6db96b 100644
--- a/packages/opendesign/src/components/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue
@@ -9,7 +9,7 @@ const props = defineProps(checkboxProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: Array<string | number>): void;
-  (e: 'change', val: Array<string | number>): void;
+  (e: 'change', val: Array<string | number>, ev: Event): void;
 }>();
 
 const checkboxGroupInjection = inject(checkboxGroupInjectKey, null);
@@ -75,8 +75,8 @@ const onChange = (ev: Event) => {
   emits('update:modelValue', val);
   checkboxGroupInjection?.updateModelValue(val);
   nextTick(() => {
-    emits('change', val);
-    checkboxGroupInjection?.onChange(val);
+    emits('change', val, ev);
+    checkboxGroupInjection?.onChange(val, ev);
   });
 };
 
diff --git a/packages/opendesign/src/components/dropdown/ODropdownItem.vue b/packages/opendesign/src/components/dropdown/ODropdownItem.vue
index 54c0ca1cc8eaccb15ecf14bcf4e7cac95d70f539..85f49e8571949fce6fdd1ac51e85b9c4a685d284 100644
--- a/packages/opendesign/src/components/dropdown/ODropdownItem.vue
+++ b/packages/opendesign/src/components/dropdown/ODropdownItem.vue
@@ -7,6 +7,7 @@ const props = defineProps(dropdownItemProps);
 const dropdownInjection = inject(dropdownInjectKey, null);
 
 const onItemClick = () => {
+  console.log(1);
   if (props.disabled) {
     return;
   }
diff --git a/packages/opendesign/src/components/menu/OMenu.vue b/packages/opendesign/src/components/menu/OMenu.vue
index 32d5fbefe7d6c6333ff43c94bef47bf97376948a..729453141d888b5c23b11d2172169df8c3a6bb3b 100644
--- a/packages/opendesign/src/components/menu/OMenu.vue
+++ b/packages/opendesign/src/components/menu/OMenu.vue
@@ -3,7 +3,7 @@ import { onMounted, provide, ref, toRefs, watch } from 'vue';
 import { menuInjectKey } from './provide';
 import { menuProps } from './types';
 import MenuTree from './menu';
-import { isUndefined } from '../_shared/is';
+import { isArray, isUndefined } from '../_shared/is';
 
 const props = defineProps(menuProps);
 
@@ -23,11 +23,14 @@ const realValue = ref(modelValue?.value ?? defaultValue.value);
 watch(
   () => modelValue?.value,
   (val) => {
-    realValue.value = isUndefined(val) ? '' : val;
+    if (!isUndefined(val)) {
+      realValue.value = val;
+    }
   }
 );
 
 const updateModelValue = (val: string) => {
+  realValue.value = val;
   emits('update:modelValue', val);
   emits('change', val);
 };
@@ -46,15 +49,18 @@ onMounted(() => {
 });
 
 // 展开节点列表
-const realExpanded = ref(expanded?.value ?? defaultExpanded.value);
+const realExpanded = ref(isArray(expanded?.value) ? expanded?.value : defaultExpanded.value);
 watch(
   () => expanded?.value,
   (val) => {
-    realExpanded.value = isUndefined(val) ? [] : val;
+    if (isArray(val)) {
+      realExpanded.value = val;
+    }
   }
 );
 
 const updateExpanded = (val: Array<string>) => {
+  realExpanded.value = val;
   emits('update:expanded', val);
   emits('expanded-change', val);
 };
diff --git a/packages/opendesign/src/components/menu/OMenuItem.vue b/packages/opendesign/src/components/menu/OMenuItem.vue
index 2fc28b7084d6dad82c2f56cf9067c7a29b23e132..4da6ea2448300d3deba2282b3af0b8883fdf29b9 100644
--- a/packages/opendesign/src/components/menu/OMenuItem.vue
+++ b/packages/opendesign/src/components/menu/OMenuItem.vue
@@ -7,7 +7,7 @@ import { isUndefined } from '../_shared/is';
 const props = defineProps(menuItemProps);
 
 const emits = defineEmits<{
-  (e: 'click'): void;
+  (e: 'click', ev: Event): void;
 }>();
 
 const menuInjection = inject(menuInjectKey, null);
@@ -20,7 +20,7 @@ const isActive = computed(() => {
   return false;
 });
 
-const onItemClick = (ev: Event) => {
+const onItemClick = (ev: MouseEvent) => {
   ev.stopPropagation();
 
   if (props.disabled) {
@@ -31,7 +31,7 @@ const onItemClick = (ev: Event) => {
     return;
   }
 
-  emits('click');
+  emits('click', ev);
 
   menuInjection?.updateModelValue(props.value);
 };
diff --git a/packages/opendesign/src/components/menu/style/index.scss b/packages/opendesign/src/components/menu/style/index.scss
index 9a5012006d403d91c5f1c314dbd5c930a60b4ce4..6796624cb98bfda5f9e398a724b8211d56d143b2 100644
--- a/packages/opendesign/src/components/menu/style/index.scss
+++ b/packages/opendesign/src/components/menu/style/index.scss
@@ -35,7 +35,7 @@
   display: flex;
   align-items: center;
   padding: 16px 48px 16px 24px;
-  border-radius: 8px;
+  border-radius: var(--sub-menu-radius);
   margin-bottom: 4px;
   cursor: pointer;
   transition: background-color var(--o-duration-m2) var(--o-easing-standard);
@@ -76,7 +76,7 @@
 .o-menu-item {
   font-size: var(--menu-item-text-size);
   line-height: var(--menu-item-text-height);
-  border-radius: 8px;
+  border-radius: var(--menu-item-radius);
   padding: 12px 16px 12px 36px;
   cursor: pointer;
   overflow: hidden;
diff --git a/packages/opendesign/src/components/menu/style/var.scss b/packages/opendesign/src/components/menu/style/var.scss
index 044682569be0fe5eb472919a493c487a8bdbdb71..9719d272ceeaa936b73df592bdf30c246e4595bc 100644
--- a/packages/opendesign/src/components/menu/style/var.scss
+++ b/packages/opendesign/src/components/menu/style/var.scss
@@ -9,6 +9,7 @@
   --sub-menu-text-size: var(--o-font_size-h4);
   --sub-menu-text-height: var(--o-line_height-h4);
   --sub-menu-icon-height: var(--o-font_size-h1);
+  --sub-menu-radius: var(--o-radius-control-s);
 }
 
 .o-menu-item {
@@ -17,4 +18,5 @@
   --menu-item-bg-active: var(--o-color-control2);
   --menu-item-bg-hover: var(--o-color-control2-light);
   --menu-item-color-disabled: var(--o-color-info4);
+  --menu-item-radius: var(--o-radius-control-s);
 }
diff --git a/packages/opendesign/src/components/radio-group/ORadioGroup.vue b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
index 23ce853537566542e3b9bc739069fefc0eef66c7..0593e7cd2342c6438676ea9ea3015e547ec4d381 100644
--- a/packages/opendesign/src/components/radio-group/ORadioGroup.vue
+++ b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
@@ -8,7 +8,7 @@ const props = defineProps(radioGroupProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string | number | boolean): void;
-  (e: 'change', val: string | number | boolean): void;
+  (e: 'change', val: string | number | boolean, ev: Event): void;
 }>();
 
 const realValue = ref(props.modelValue ?? props.defaultValue);
@@ -23,11 +23,12 @@ watch(
 );
 
 const updateModelValue = (val: string | number | boolean) => {
+  realValue.value = val;
   emits('update:modelValue', val);
 };
 
-const onChange = (val: string | number | boolean) => {
-  emits('change', val);
+const onChange = (val: string | number | boolean, ev: Event) => {
+  emits('change', val, ev);
 };
 
 provide(radioGroupInjectKey, {
diff --git a/packages/opendesign/src/components/radio-group/provide.ts b/packages/opendesign/src/components/radio-group/provide.ts
index 2e32cd96d1c772e9cfb796363cb55a73d92e19a2..513274434ebddc34971b387e5c2b3ad477cc9989 100644
--- a/packages/opendesign/src/components/radio-group/provide.ts
+++ b/packages/opendesign/src/components/radio-group/provide.ts
@@ -4,5 +4,5 @@ export const radioGroupInjectKey: InjectionKey<{
   realValue: Ref<string | number | boolean>;
   disabled: Ref<boolean>;
   updateModelValue: (val: string | number | boolean) => void;
-  onChange: (val: string | number | boolean) => void;
+  onChange: (val: string | number | boolean, ev: Event) => void;
 }> = Symbol('provide-radio-group');
diff --git a/packages/opendesign/src/components/radio/ORadio.vue b/packages/opendesign/src/components/radio/ORadio.vue
index f58b7a41f1ee0d2c3cdd0bd3fd72364c16985a96..d474afc8f214659c1a3753c70338d155fbcd0e55 100644
--- a/packages/opendesign/src/components/radio/ORadio.vue
+++ b/packages/opendesign/src/components/radio/ORadio.vue
@@ -8,7 +8,7 @@ const props = defineProps(radioProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string | number | boolean): void;
-  (e: 'change', val: string | number | boolean): void;
+  (e: 'change', val: string | number | boolean, ev: Event): void;
 }>();
 
 const radioGroupInjection = inject(radioGroupInjectKey, null);
@@ -47,7 +47,7 @@ const onClick = (ev: Event) => {
   ev.stopPropagation();
 };
 
-const onChange = () => {
+const onChange = (ev: Event) => {
   if (isDisabled.value) {
     return;
   }
@@ -58,8 +58,8 @@ const onChange = () => {
   emits('update:modelValue', val);
   radioGroupInjection?.updateModelValue(val);
   nextTick(() => {
-    emits('change', val);
-    radioGroupInjection?.onChange(val);
+    emits('change', val, ev);
+    radioGroupInjection?.onChange(val, ev);
   });
 };
 </script>
diff --git a/packages/opendesign/src/components/rate/ORate.vue b/packages/opendesign/src/components/rate/ORate.vue
index a7810a4265ffe4a8c103fc31503aa6d9c8bf7c22..1667b3f9a17a79021b1c88f178860b52b866bfd5 100644
--- a/packages/opendesign/src/components/rate/ORate.vue
+++ b/packages/opendesign/src/components/rate/ORate.vue
@@ -3,6 +3,7 @@ import { computed, ref, watch } from 'vue';
 import { rateProps } from './types';
 import { defaultSize } from '../_shared/global';
 import { IconStar } from '../icons';
+import { isUndefined } from '../_shared/is';
 
 const props = defineProps(rateProps);
 
@@ -16,7 +17,9 @@ const realValue = ref(props.modelValue ?? props.defaultValue);
 watch(
   () => props.modelValue,
   (val) => {
-    realValue.value = val ?? props.defaultValue;
+    if (!isUndefined(val)) {
+      realValue.value = val;
+    }
   }
 );
 
diff --git a/packages/opendesign/src/components/switch/OSwitch.vue b/packages/opendesign/src/components/switch/OSwitch.vue
index eb804e054cebcc58a99ebc1cff25d24104186949..4cdd01388eb092800522f6288e84d83c0d518b33 100644
--- a/packages/opendesign/src/components/switch/OSwitch.vue
+++ b/packages/opendesign/src/components/switch/OSwitch.vue
@@ -10,7 +10,7 @@ const props = defineProps(switchProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string | number | boolean): void;
-  (e: 'change', val: string | number | boolean): void;
+  (e: 'change', val: string | number | boolean, ev: Event): void;
 }>();
 
 const round = getRoundClass(props, 'switch');
@@ -50,7 +50,7 @@ const isChangeable = (): Promise<boolean> => {
   return isBoolean(res) ? Promise.resolve(res) : res;
 };
 
-const onClick = () => {
+const onClick = (ev: Event) => {
   isChangeable()
     .then((flag) => {
       if (flag) {
@@ -58,7 +58,7 @@ const onClick = () => {
         _checked.value = checked;
         const val = checked ? props.checkedValue : props.uncheckedValue;
         emits('update:modelValue', val);
-        emits('change', val);
+        emits('change', val, ev);
       }
     })
     .catch((err) => {
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue b/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue
index 94a815ae8d17edd751b782146899bab09e54bcc5..56bf2965fca39446e2f3aa27a250df9ead58698e 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue
@@ -5,7 +5,7 @@ const switchVal1 = ref(false);
 const switchVal2 = ref(true);
 const switchVal3 = ref(true);
 
-const r2 = '2px';
+const r2 = '6px';
 const r4 = '4px';
 </script>
 
@@ -23,7 +23,7 @@ const r4 = '4px';
 
     <div>
       <section>
-        <p>round="2px"</p>
+        <p>round={{ r2 }}</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" />
@@ -32,7 +32,7 @@ const r4 = '4px';
 
     <div>
       <section>
-        <p>round="4px"</p>
+        <p>round={{ r4 }}</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" />
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index 1d771e491592f4fbe605b0ec9bf335b314caf64e..2ee22e46268994d8b51a22e29ec768ed02c8f184 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -12,16 +12,6 @@
   cursor: pointer;
 }
 
-.o-switch-checked {
-  background-color: var(--switch-bg-color-checked);
-}
-
-.o-switch-disabled,
-.o-switch-loading {
-  cursor: not-allowed;
-  background-color: var(--switch-bg-color-disabled);
-}
-
 .o-switch-disabled.o-switch-checked,
 .o-switch-loading.o-switch-checked {
   background-color: var(--switch-bg-color-checked-disabled);
@@ -43,9 +33,10 @@
   transform: translateY(-50%);
   width: var(--switch-handler-size);
   height: var(--switch-handler-size);
-  border-radius: var(--switch-handler-radius);
+  border-radius: calc(var(--switch-radius) - 2px);
   background-color: var(--switch-handler-bg-color);
   transition: left var(--o-duration-s) var(--o-easing-standard);
+  left: var(--switch-handler-offset);
 
   .o-switch-icon-loading {
     width: 100%;
@@ -63,73 +54,37 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  padding-left: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-content-padding));
+  padding-right: var(--switch-content-padding);
 }
 
-.o-switch-large {
-  min-width: 60px;
+.o-switch-checked {
+  background-color: var(--switch-bg-color-checked);
+
   .o-switch-handler {
-    left: 4px;
+    left: calc(100% - var(--switch-handler-offset) - var(--switch-handler-size));
   }
 
   .o-switch-content {
-    padding-left: 28px;
-    padding-right: 8px;
+    padding-left: var(--switch-content-padding);
+    padding-right: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-content-padding));
   }
+}
 
-  &.o-switch-checked {
-    .o-switch-handler {
-      left: calc(100% - 24px);
-    }
+.o-switch-disabled,
+.o-switch-loading {
+  cursor: not-allowed;
+  background-color: var(--switch-bg-color-disabled);
+}
 
-    .o-switch-content {
-      padding-left: 8px;
-      padding-right: 28px;
-    }
-  }
+.o-switch-large {
+  min-width: 60px;
 }
 
 .o-switch-medium {
   min-width: 40px;
-
-  .o-switch-handler {
-    left: 2px;
-  }
-
-  .o-switch-content {
-    padding-left: 20px;
-    padding-right: 4px;
-  }
-
-  &.o-switch-checked {
-    .o-switch-handler {
-      left: calc(100% - 18px);
-    }
-    .o-switch-content {
-      padding-left: 4px;
-      padding-right: 20px;
-    }
-  }
 }
 
 .o-switch-small {
   min-width: 30px;
-
-  .o-switch-handler {
-    left: 2px;
-  }
-
-  .o-switch-content {
-    padding-left: 15px;
-    padding-right: 2px;
-  }
-
-  &.o-switch-checked {
-    .o-switch-handler {
-      left: calc(100% - 14px);
-    }
-    .o-switch-content {
-      padding-left: 2px;
-      padding-right: 15px;
-    }
-  }
 }
diff --git a/packages/opendesign/src/components/switch/style/var.scss b/packages/opendesign/src/components/switch/style/var.scss
index 0dd36036d06dbbc984974cfb2cf4ff35dc1cd0d2..4251299c247afb375101739995c7e13f968b23a9 100644
--- a/packages/opendesign/src/components/switch/style/var.scss
+++ b/packages/opendesign/src/components/switch/style/var.scss
@@ -11,29 +11,32 @@
 
 .o-switch-large {
   --switch-height: 28px;
-  --switch-radius: 2px;
+  --switch-radius: 8px;
   --switch-text-size: var(--o-font_size-h4);
   --switch-text-height: var(--o-line_height-h4);
   --switch-handler-size: 20px;
-  --switch-handler-radius: 2px;
+  --switch-content-padding: 8px;
+  --switch-handler-offset: 4px;
 }
 
 .o-switch-medium {
   --switch-height: 20px;
-  --switch-radius: 2px;
+  --switch-radius: 6px;
   --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-content-padding: 6px;
+  --switch-handler-offset: 4px;
 }
 
 .o-switch-small {
   --switch-height: 16px;
-  --switch-radius: 2px;
+  --switch-radius: 4px;
   --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-content-padding: 4px;
+  --switch-handler-offset: 2px;
 }
 
 .o-switch-round-pill {
diff --git a/packages/opendesign/src/components/tag/OTag.vue b/packages/opendesign/src/components/tag/OTag.vue
index 7b5fa5585af74d40a08824c275141c8ac454c2eb..6ca956340c5a3c9da063c96f3735b3441a0fe019 100644
--- a/packages/opendesign/src/components/tag/OTag.vue
+++ b/packages/opendesign/src/components/tag/OTag.vue
@@ -1,88 +1,32 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { defaultSize, defaultShape } from '../_shared/global';
-import type { SizeT, ShapeT } from '../_shared/global';
-import type { TagStatusT } from './types';
+import { defaultSize } from '../_shared/global';
+import { getRoundClass } from '../_shared/style-class';
+import { tagProps } from './types';
 import { IconClose } from '../_shared/icons';
 import { isUndefined } from '../_shared/is';
 
-interface TagPropT {
-  /**
-   * 标签状态
-   * 'normal' | 'success' | 'warning' | 'danger'
-   */
-  status?: TagStatusT;
-  /**
-   * 是否有边框
-   */
-  bordered?: boolean;
-  /**
-   * 标签尺寸
-   * 'normal' | 'large' | 'small'
-   */
-  size?: SizeT;
-  /**
-   * 标签形状
-   * 'normal' | 'round'
-   */
-  shape?: ShapeT;
-  /**
-   * 是否可关闭
-   */
-  closable?: boolean;
-  /**
-   * 是否可选中
-   */
-  checkable?: boolean;
-  /**
-   * 是否被选中(标签可选中时该属性生效)
-   */
-  checked?: boolean;
-  /**
-   * 非受控状态时，默认是否选中(标签可选中时该属性生效)
-   */
-  defaultChecked?: boolean;
-}
-
-const props = withDefaults(defineProps<TagPropT>(), {
-  status: 'normal',
-  bordered: false,
-  size: undefined,
-  shape: undefined,
-  closable: false,
-  checkable: false,
-  checked: undefined,
-  defaultChecked: false,
-});
+const props = defineProps(tagProps);
 
 const emits = defineEmits<{
   (e: 'update:checked', val: boolean): void;
-  (e: 'change', val: boolean): void;
-  (e: 'close'): void;
+  (e: 'change', val: boolean, ev: MouseEvent): void;
+  (e: 'close', ev: MouseEvent): void;
 }>();
 
+const round = getRoundClass(props, 'tag');
+
 // 是否可见
 const isVisible = ref(true);
 
-// 监听checked属性改变
-const isCheckedPropChange = ref(false);
-
-watch(
-  () => props.checked,
-  () => {
-    isCheckedPropChange.value = true;
-  }
-);
-
 // 是否选中
 const _checked = ref(props.defaultChecked);
 const isChecked = computed(() => {
   if (!props.checkable) {
     return false;
   }
-
-  if (!isUndefined(props.checked) || isCheckedPropChange.value) {
-    return props.checked ?? false;
+  if (!isUndefined(props.checked)) {
+    return props.checked;
   }
 
   return _checked.value;
@@ -96,19 +40,19 @@ watch(
   { immediate: true }
 );
 
-const onClick = () => {
+const onClick = (ev: MouseEvent) => {
   if (props.checkable) {
     const checked = !isChecked.value;
     _checked.value = checked;
     emits('update:checked', checked);
-    emits('change', checked);
+    emits('change', checked, ev);
   }
 };
 
-const onClose = (ev: Event) => {
+const onClose = (ev: MouseEvent) => {
   ev.stopPropagation();
   isVisible.value = false;
-  emits('close');
+  emits('close', ev);
 };
 </script>
 
@@ -117,13 +61,14 @@ const onClose = (ev: Event) => {
     v-if="isVisible"
     class="o-tag"
     :class="[
-      `o-tag-status-${props.status}`,
-      `o-tag-size-${props.size || defaultSize}`,
-      `o-tag-shape-${props.shape || defaultShape}`,
-      { 'o-tag-bordered': props.bordered },
+      `o-tag-${props.color}`,
+      `o-tag-${props.size || defaultSize}`,
+      `o-tag-${props.variant}`,
+      round.class.value,
       { 'o-tag-checkable': props.checkable },
       { 'o-tag-checked': isChecked },
     ]"
+    :style="round.style.value"
     @click="onClick"
   >
     <span v-if="$slots.icon" class="o-tag-icon prefix">
diff --git a/packages/opendesign/src/components/tag/__demo__/IndexTag.vue b/packages/opendesign/src/components/tag/__demo__/IndexTag.vue
index 2862b691c56751cf635c1f0df85efd8c2ba44b1e..072a3d9a72849fc8fe47cd0ef20e999345d07001 100644
--- a/packages/opendesign/src/components/tag/__demo__/IndexTag.vue
+++ b/packages/opendesign/src/components/tag/__demo__/IndexTag.vue
@@ -2,22 +2,22 @@
 import '../style';
 
 import TagBasic from './TagBasic.vue';
-import TagClosable from './TagClosable.vue';
-import TagShape from './TagShape.vue';
+import TagColor from './TagColor.vue';
 import TagSize from './TagSize.vue';
-import TagStatus from './TagStatus.vue';
-import TagBordered from './TagBordered.vue';
+import TagShape from './TagRound.vue';
+import TagOutline from './TagOutline.vue';
+import TagClosable from './TagClosable.vue';
 import TagCheckable from './TagCheckable.vue';
 </script>
 
 <template>
   <div class="page-demo">
     <TagBasic />
-    <TagClosable />
-    <TagShape />
+    <TagColor />
     <TagSize />
-    <TagStatus />
-    <TagBordered />
+    <TagShape />
+    <TagClosable />
+    <TagOutline />
     <TagCheckable />
   </div>
 </template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue b/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue
index 810737ca780320537e128194273a720b54846112..6e47fd73c876585f0a18fc6e72be48780a787adf 100644
--- a/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue
+++ b/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue
@@ -15,12 +15,12 @@ const handleChange = (val: boolean) => {
   <h4>可选中标签</h4>
   <section>
     <OTag v-model:checked="tagVal1" checkable @change="handleChange">Tag1</OTag>
-    <OTag v-model:checked="tagVal2" status="success" checkable @change="handleChange">Tag2</OTag>
-    <OTag v-model:checked="tagVal3" status="warning" checkable @change="handleChange">Tag3</OTag>
-    <OTag v-model:checked="tagVal4" status="danger" checkable @change="handleChange">Tag4</OTag>
-    <OTag :default-checked="true" checkable bordered @change="handleChange">Tag5</OTag>
-    <OTag :default-checked="true" status="success" checkable bordered @change="handleChange">Tag6</OTag>
-    <OTag :default-checked="true" status="warning" checkable bordered @change="handleChange">Tag7</OTag>
-    <OTag :default-checked="true" status="danger" checkable bordered @change="handleChange">Tag8</OTag>
+    <OTag v-model:checked="tagVal2" color="success" checkable @change="handleChange">Tag2</OTag>
+    <OTag v-model:checked="tagVal3" color="warning" checkable @change="handleChange">Tag3</OTag>
+    <OTag v-model:checked="tagVal4" color="danger" checkable @change="handleChange">Tag4</OTag>
+    <OTag :default-checked="true" variant="outline" checkable @change="handleChange">Tag5</OTag>
+    <OTag :default-checked="true" color="success" variant="outline" checkable @change="handleChange">Tag6</OTag>
+    <OTag :default-checked="true" color="warning" variant="outline" checkable @change="handleChange">Tag7</OTag>
+    <OTag :default-checked="true" color="danger" variant="outline" checkable @change="handleChange">Tag8</OTag>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagStatus.vue b/packages/opendesign/src/components/tag/__demo__/TagColor.vue
similarity index 42%
rename from packages/opendesign/src/components/tag/__demo__/TagStatus.vue
rename to packages/opendesign/src/components/tag/__demo__/TagColor.vue
index 4c6be2435c8006b1ae5e0d8cb81e8db8cf44a179..cca7728a8486ddf837df56bb090bc9101f171395 100644
--- a/packages/opendesign/src/components/tag/__demo__/TagStatus.vue
+++ b/packages/opendesign/src/components/tag/__demo__/TagColor.vue
@@ -3,17 +3,12 @@ import { OTag } from '../index';
 </script>
 
 <template>
-  <h4>Status</h4>
+  <h4>Color</h4>
   <section>
     <OTag>Normal Tag</OTag>
-    <OTag status="success">Success Tag</OTag>
-    <OTag status="warning">Warning Tag</OTag>
-    <OTag status="danger">Danger Tag</OTag>
+    <OTag color="primary">Primary Tag</OTag>
+    <OTag color="success">Success Tag</OTag>
+    <OTag color="warning">Warning Tag</OTag>
+    <OTag color="danger">Danger Tag</OTag>
   </section>
 </template>
-
-<style>
-a {
-  color: #b2c0e4;
-}
-</style>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagBordered.vue b/packages/opendesign/src/components/tag/__demo__/TagOutline.vue
similarity index 35%
rename from packages/opendesign/src/components/tag/__demo__/TagBordered.vue
rename to packages/opendesign/src/components/tag/__demo__/TagOutline.vue
index 9cfdfe4831e11c70e554bfecf2ac746151cd749f..666206d11faa6a6ba0ebee95ea0c32012214305f 100644
--- a/packages/opendesign/src/components/tag/__demo__/TagBordered.vue
+++ b/packages/opendesign/src/components/tag/__demo__/TagOutline.vue
@@ -5,9 +5,10 @@ import { OTag } from '../index';
 <template>
   <h4>带边框标签</h4>
   <section>
-    <OTag bordered>Tag1</OTag>
-    <OTag status="success" bordered>Tag2</OTag>
-    <OTag status="warning" bordered>Tag3</OTag>
-    <OTag status="danger" bordered>Tag4</OTag>
+    <OTag variant="outline">Tag1</OTag>
+    <OTag color="primary" variant="outline">Tag2</OTag>
+    <OTag color="success" variant="outline">Tag2</OTag>
+    <OTag color="warning" variant="outline">Tag3</OTag>
+    <OTag color="danger" variant="outline">Tag4</OTag>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagRound.vue b/packages/opendesign/src/components/tag/__demo__/TagRound.vue
new file mode 100644
index 0000000000000000000000000000000000000000..85edc9cc3a307335ae33b549cbdb1e9e7b1e7f52
--- /dev/null
+++ b/packages/opendesign/src/components/tag/__demo__/TagRound.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { OTag } from '../index';
+</script>
+
+<template>
+  <h4>Round</h4>
+  <section>
+    <div>
+      <section>
+        <p>round="pill"</p>
+        <OTag round="pill" color="primary">Primary Tag</OTag>
+      </section>
+    </div>
+    <div>
+      <section>
+        <p>round="2px"</p>
+        <OTag round="2px" color="primary">Primary Tag</OTag>
+      </section>
+    </div>
+    <div>
+      <section>
+        <p>round="4px"</p>
+        <OTag round="4px" color="primary">Primary Tag</OTag>
+      </section>
+    </div>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/tag/__demo__/TagShape.vue b/packages/opendesign/src/components/tag/__demo__/TagShape.vue
deleted file mode 100644
index 322d54e269f86873816d471b9de2f06ac8a8f9fb..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/tag/__demo__/TagShape.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { OTag } from '../index';
-</script>
-
-<template>
-  <h4>Shape</h4>
-  <section>
-    <OTag shape="normal">Normal Tag</OTag>
-    <OTag shape="round">Round Tag</OTag>
-  </section>
-</template>
diff --git a/packages/opendesign/src/components/tag/style/index.scss b/packages/opendesign/src/components/tag/style/index.scss
index 2476fe195fffe3d9ba41e7f40400849701fdb695..3561e8d55ebed543dbfce0d0fed230115e00d07c 100644
--- a/packages/opendesign/src/components/tag/style/index.scss
+++ b/packages/opendesign/src/components/tag/style/index.scss
@@ -4,11 +4,10 @@
   font-size: var(--tag-text-size);
   line-height: var(--tag-text-height);
   height: var(--tag-height);
-  border: 1px solid var(--tag-border);
+  border: 1px solid var(--tag-bd-color);
   border-radius: var(--tag-radius);
   padding: var(--tag-padding);
-  transition: all var(--o-duration-s) var(--o-easing-standard);
-  background-color: var(--tag-bg);
+  background-color: var(--tag-bg-color);
   color: var(--tag-color);
   white-space: nowrap;
 
@@ -17,42 +16,6 @@
   justify-content: center;
 }
 
-.o-tag-size-small {
-  --tag-padding: 0 7px;
-  --tag-height: var(--tag-height-s);
-  --tag-radius: var(--tag-radius-s);
-}
-
-.o-tag-size-medium {
-  --tag-padding: 4px 15px;
-  --tag-height: var(--tag-height-m);
-  --tag-radius: var(--tag-radius-m);
-}
-
-.o-tag-size-large {
-  --tag-padding: 4px 19px;
-  --tag-height: var(--tag-height-l);
-  --tag-radius: var(--tag-radius-l);
-}
-
-.o-tag-status-success {
-  --tag-color: var(--tag-color-success);
-  --tag-bg: var(--tag-bg-success);
-  --tag-border: var(--tag-border-success);
-}
-
-.o-tag-status-warning {
-  --tag-color: var(--tag-color-warning);
-  --tag-bg: var(--tag-bg-warning);
-  --tag-border: var(--tag-border-warning);
-}
-
-.o-tag-status-danger {
-  --tag-color: var(--tag-color-danger);
-  --tag-bg: var(--tag-bg-danger);
-  --tag-border: var(--tag-border-danger);
-}
-
 .o-tag-icon {
   display: inline-flex;
   align-items: center;
@@ -73,36 +36,6 @@
   cursor: pointer;
 }
 
-.o-tag-shape-round {
-  --tag-radius: var(--tag-height-l);
-}
-
-.o-tag-bordered {
-  --tag-bg: transparent;
-  &.o-tag-status-success {
-    --tag-color: var(--tag-bg-success);
-  }
-  &.o-tag-status-warning {
-    --tag-color: var(--tag-bg-warning);
-  }
-  &.o-tag-status-danger {
-    --tag-color: var(--tag-bg-danger);
-  }
-}
-
 .o-tag-checkable {
   cursor: pointer;
-  &:not(.o-tag-checked) {
-    --tag-bg: transparent;
-    --tag-border: transparent;
-    &.o-tag-status-success {
-      --tag-color: var(--tag-bg-success);
-    }
-    &.o-tag-status-warning {
-      --tag-color: var(--tag-bg-warning);
-    }
-    &.o-tag-status-danger {
-      --tag-color: var(--tag-bg-danger);
-    }
-  }
 }
diff --git a/packages/opendesign/src/components/tag/style/var.scss b/packages/opendesign/src/components/tag/style/var.scss
index 5601dc939ab5253dbf900767998cf0301e36a74e..58789c56096e9217bb78ebda5c81318ec5ab8259 100644
--- a/packages/opendesign/src/components/tag/style/var.scss
+++ b/packages/opendesign/src/components/tag/style/var.scss
@@ -1,27 +1,102 @@
-.o-tag {
+.o-tag-normal {
   --tag-color: var(--o-color-info1);
-  --tag-color-success: var(--o-color-info1-inverse);
-  --tag-color-warning: var(--o-color-info1-inverse);
-  --tag-color-danger: var(--o-color-info1-inverse);
+  --tag-bg-color: var(--o-color-control1-light);
+  --tag-bd-color: var(--o-color-control1-light);
+}
+
+.o-tag-primary {
+  --tag-color: var(--o-color-info1-inverse);
+  --tag-bg-color: var(--o-color-primary1);
+  --tag-bd-color: var(--o-color-primary1);
+}
+
+.o-tag-success {
+  --tag-color: var(--o-color-info1-inverse);
+  --tag-bg-color: var(--o-color-success1);
+  --tag-bd-color: var(--o-color-success1);
+}
+
+.o-tag-warning {
+  --tag-color: var(--o-color-info1-inverse);
+  --tag-bg-color: var(--o-color-warning1);
+  --tag-bd-color: var(--o-color-warning1);
+}
 
-  --tag-bg: var(--o-color-control1-light);
-  --tag-bg-success: var(--o-color-success1);
-  --tag-bg-warning: var(--o-color-warning1);
-  --tag-bg-danger: var(--o-color-danger1);
+.o-tag-danger {
+  --tag-color: var(--o-color-info1-inverse);
+  --tag-bg-color: var(--o-color-danger1);
+  --tag-bd-color: var(--o-color-danger1);
+}
 
-  --tag-border: var(--o-color-control1-light);
-  --tag-border-success: var(--o-color-success1);
-  --tag-border-warning: var(--o-color-warning1);
-  --tag-border-danger: var(--o-color-danger1);
+.o-tag-small {
+  --tag-padding: 0 7px;
+  --tag-radius: var(--o-radius-control-s);
+  --tag-text-size: var(--o-font_size-tip1);
+  --tag-text-height: var(--o-line_height-tip1);
+}
 
+.o-tag-medium {
+  --tag-padding: 0 15px;
+  --tag-radius: var(--o-radius-control-m);
   --tag-text-size: var(--o-font_size-text);
   --tag-text-height: var(--o-line_height-text);
+}
+
+.o-tag-large {
+  --tag-padding: 4px 19px;
+  --tag-radius: var(--o-radius-control-l);
+}
+
+.o-tag-round-pill {
+  --tag-radius: var(--o-size-l);
+}
+
+.o-tag-outline {
+  --tag-bg-color: transparent;
+
+  &.o-tag-normal {
+    --tag-color: var(--o-color-info1);
+  }
+
+  &.o-tag-primary {
+    --tag-color: var(--o-color-primary1);
+  }
+
+  &.o-tag-success {
+    --tag-color: var(--o-color-success1);
+  }
+
+  &.o-tag-warning {
+    --tag-color: var(--o-color-warning1);
+  }
+
+  &.o-tag-danger {
+    --tag-color: var(--o-color-danger1);
+  }
+}
+
+.o-tag-checkable {
+  &:not(.o-tag-checked) {
+    --tag-bg-color: transparent;
+    --tag-bd-color: transparent;
+    &.o-tag-normal {
+      --tag-color: var(--o-color-info1);
+    }
+
+    &.o-tag-primary {
+      --tag-color: var(--o-color-primary1);
+    }
+
+    &.o-tag-success {
+      --tag-color: var(--o-color-success1);
+    }
 
-  --tag-height-s: var(--o-size-s);
-  --tag-height-m: var(--o-size-m);
-  --tag-height-l: var(--o-size-l);
+    &.o-tag-warning {
+      --tag-color: var(--o-color-warning1);
+    }
 
-  --tag-radius-s: var(--o-radius-control-s);
-  --tag-radius-m: var(--o-radius-control-s);
-  --tag-radius-l: var(--o-radius-control-s);
+    &.o-tag-danger {
+      --tag-color: var(--o-color-danger1);
+    }
+  }
 }
diff --git a/packages/opendesign/src/components/tag/types.ts b/packages/opendesign/src/components/tag/types.ts
index 0d963e640912659ef9ed3c3632c0a3e3ff741f84..4652b89abc38563a6d6a44b049da50c854e568b0 100644
--- a/packages/opendesign/src/components/tag/types.ts
+++ b/packages/opendesign/src/components/tag/types.ts
@@ -1 +1,66 @@
-export type TagStatusT = 'normal' | 'success' | 'warning' | 'danger';
+import { ExtractPropTypes, PropType } from 'vue';
+import { SizeT, RoundT, ColorT, VariantT } from '../_shared/global';
+
+export type TagVariantT = 'solid' | 'outline';
+
+export const tagProps = {
+  /**
+   * 标签颜色
+   * 'normal' | 'primary' | 'success' | 'warning' | 'danger';
+   */
+  color: {
+    type: String as PropType<ColorT>,
+    default: 'normal',
+  },
+  /**
+   * 标签类型
+   * 'solid' | 'outline'
+   */
+  variant: {
+    type: String as PropType<VariantT>,
+    default: 'solid',
+  },
+  /**
+   * 标签尺寸
+   * 'large' | 'medium' | 'small'
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 圆角值
+   */
+  round: {
+    type: String as PropType<RoundT>,
+  },
+  /**
+   * 是否可关闭
+   */
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否可选中
+   */
+  checkable: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 双向绑定值，是否被选中(标签可选中时该属性生效)
+   */
+  checked: {
+    type: Boolean,
+    default: undefined,
+  },
+  /**
+   * 非受控状态时，默认是否选中(标签可选中时该属性生效)
+   */
+  defaultChecked: {
+    type: Boolean,
+    default: true,
+  },
+};
+
+export type TagPropsT = ExtractPropTypes<typeof tagProps>;