diff --git a/packages/opendesign/src/cascader/OCascader.vue b/packages/opendesign/src/cascader/OCascader.vue
index cbe9e9bd6d97c7869b417607d4953b74047f61b6..ebd66fcb7c0804bae3865f8ded7778f9ffd77e80 100644
--- a/packages/opendesign/src/cascader/OCascader.vue
+++ b/packages/opendesign/src/cascader/OCascader.vue
@@ -1,8 +1,12 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { OSelect } from '../select';
 import OCascaderPanel from './OCascaderPanel.vue';
 import type { CascaderValueT } from './types';
 import { cascaderProps } from './types';
+import { isString, isUndefined } from '../_utils/is';
+
+const props = defineProps(cascaderProps);
 
 const emits = defineEmits<{
   (e: 'change', val: CascaderValueT): void;
@@ -14,7 +18,16 @@ const handleChange = (val: CascaderValueT) => {
   emits('update:modelValue', val);
 };
 
-const props = defineProps(cascaderProps);
+const wrapClass = computed(() => {
+  const classStr = 'o-cascader';
+  if (isUndefined(props.optionWrapClass)) {
+    return classStr;
+  } else if (isString(props.optionWrapClass)) {
+    return `${classStr} ${props.optionWrapClass}`;
+  } else {
+    return [classStr, ...props.optionWrapClass].join(' ');
+  }
+});
 </script>
 
 <template>
@@ -28,6 +41,7 @@ const props = defineProps(cascaderProps);
     option-width-mode="auto"
     :unmount-on-hide="props.unmountOnHide"
     :transition="props.transition"
+    :option-wrap-class="wrapClass"
   >
     <OCascaderPanel :options="props.options" :model-value="props.modelValue" :path-mode="props.pathMode" @change="handleChange" />
   </OSelect>
diff --git a/packages/opendesign/src/cascader/style/style.scss b/packages/opendesign/src/cascader/style/style.scss
index 1b38647e588151de772bad18f786601ce0511ba0..43b47d28a1012478b216cfe3729bd69b854be27f 100644
--- a/packages/opendesign/src/cascader/style/style.scss
+++ b/packages/opendesign/src/cascader/style/style.scss
@@ -1,10 +1,14 @@
 @use '../../_styles/mixin.scss' as *;
 @use './var.scss';
 
+.o-cascader {
+  height: var(--cascader-height);
+}
+
 .o-cascader-panel {
   position: relative;
   display: inline-flex;
-  height: 200px;
+  height: calc(var(--cascader-height) - 2 * var(--scroller-padding));
 }
 
 .o-cascader-options {
@@ -13,6 +17,7 @@
   padding: 0 calc(var(--cascader-options-gap) / 2);
   min-width: 144px;
   max-width: 192px;
+  height: 100%;
   overflow-y: auto;
 
   & + .o-cascader-options {
diff --git a/packages/opendesign/src/cascader/style/var.scss b/packages/opendesign/src/cascader/style/var.scss
index e92e0de17c28a9c52f34b11065d4339388371d55..c4eabe54e7a5f518e155f78eedeb60be12148b74 100644
--- a/packages/opendesign/src/cascader/style/var.scss
+++ b/packages/opendesign/src/cascader/style/var.scss
@@ -1,3 +1,7 @@
+.o-cascader {
+  --cascader-height: 200px;
+}
+
 .o-cascader-options {
   --cascader-options-bd-clor: var(--o-color-control1-light);
   --cascader-options-gap: 8px;
diff --git a/packages/opendesign/src/cascader/types.ts b/packages/opendesign/src/cascader/types.ts
index 3211551f945d524393d5c7d88d84e260465206c8..a338899661ee169b35bb51c1f04c74c607884b9b 100644
--- a/packages/opendesign/src/cascader/types.ts
+++ b/packages/opendesign/src/cascader/types.ts
@@ -68,6 +68,12 @@ export const cascaderProps = {
     type: String as PropType<PopupPositionT>,
     default: 'bl',
   },
+  /**
+   * 下拉容器自定义类
+   */
+  optionWrapClass: {
+    type: [String, Array] as PropType<string | string[]>,
+  },
   /**
    * 是否在结束选择时，卸载下拉选项
    */
diff --git a/packages/opendesign/src/checkbox/OCheckbox.vue b/packages/opendesign/src/checkbox/OCheckbox.vue
index 3c03d9c7c0506d3a710c9bab50b6df7685269df3..7428ae246a823d5b48c4a833693583e40de445bf 100644
--- a/packages/opendesign/src/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/checkbox/OCheckbox.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, provide, ref, watch } from 'vue';
+import { checkboxInjectKey } from './provide';
 import { checkboxGroupInjectKey } from '../checkbox-group/provide';
 import { checkboxProps } from './types';
 import { IconChecked } from '../_utils/icons';
@@ -85,6 +86,11 @@ const onChange = (ev: Event) => {
 defineExpose({
   checked: isChecked,
 });
+
+provide(checkboxInjectKey, {
+  checked: isChecked,
+  disabled: isDisabled,
+});
 </script>
 
 <template>
diff --git a/packages/opendesign/src/checkbox/provide.ts b/packages/opendesign/src/checkbox/provide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9fd88ff42de5e0abc868773dfdc07e68c41bd487
--- /dev/null
+++ b/packages/opendesign/src/checkbox/provide.ts
@@ -0,0 +1,6 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+
+export const checkboxInjectKey: InjectionKey<{
+  checked: ComputedRef<boolean>;
+  disabled: ComputedRef<boolean>;
+}> = Symbol('provide-checkbox');
diff --git a/packages/opendesign/src/collapse/OCollapseItem.vue b/packages/opendesign/src/collapse/OCollapseItem.vue
index 2b6a6a3f1fbab5094c7021cdd1a84404ed7510fd..904cf5b26b90f93476b28f8bb4b5ef4f57c2760a 100644
--- a/packages/opendesign/src/collapse/OCollapseItem.vue
+++ b/packages/opendesign/src/collapse/OCollapseItem.vue
@@ -58,6 +58,10 @@ const onBeforeEnter = (el: Element) => {
 const onEnter = (el: Element) => {
   (el as HTMLUListElement).style.height = `${el.scrollHeight}px`;
 };
+// 进入动画完成后高度设置为auto，支持嵌套子菜单展开
+const onAfterEnter = (el: Element) => {
+  (el as HTMLUListElement).style.height = 'auto';
+};
 const onBeforeLeave = (el: Element) => {
   (el as HTMLUListElement).style.height = `${(el as HTMLUListElement).offsetHeight}px`;
 };
@@ -76,7 +80,7 @@ const onLeave = (el: Element) => {
         <slot name="title">{{ props.title }}</slot>
       </p>
     </div>
-    <Transition @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave">
+    <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave">
       <div v-show="isExpanded" class="o-collapse-item-body">
         <slot></slot>
       </div>
diff --git a/packages/opendesign/src/dialog/style/media.scss b/packages/opendesign/src/dialog/style/media.scss
index ff7efdb77f663be52d947cfe0a81a0e60220d8c5..40f5b9f44fa04b74651f7abe71da2cbc64086d27 100644
--- a/packages/opendesign/src/dialog/style/media.scss
+++ b/packages/opendesign/src/dialog/style/media.scss
@@ -1,10 +1,13 @@
 @use '../../_styles/mixin.scss' as *;
 
 .o-dialog-responsive {
+  @include respond-to('>phone') {
+    --layer-origin: center;
+  }
   @include respond-to('<=pad') {
     --layer-position: fixed;
   }
-  @include respond-to('phone-v') {
+  @include respond-to('phone') {
     --layer-align: flex-end;
     --dlg-width: calc(100vw - 48px);
     --layer-origin: center bottom;
@@ -13,9 +16,6 @@
       flex: 1;
     }
   }
-  @include respond-to('>phone') {
-    --layer-origin: center;
-  }
 }
 
 .o-dialog {
diff --git a/packages/opendesign/src/dropdown/__demo__/DropdownBasic.vue b/packages/opendesign/src/dropdown/__demo__/DropdownBasic.vue
index 3227b4dc823d75258fa630dd0edcdddfafdd0a8d..5a035350d28ce6786cd696bc1c368fc7fa668234 100644
--- a/packages/opendesign/src/dropdown/__demo__/DropdownBasic.vue
+++ b/packages/opendesign/src/dropdown/__demo__/DropdownBasic.vue
@@ -18,7 +18,9 @@ const options = [
     <ODropdown>
       <OButton>Click Me</OButton>
       <template #dropdown>
-        <ODropdownItem v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        <ODropdownItem v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+          <a href="https://www.mindspore.cn" target="_blank">{{ item.label }}</a>
+        </ODropdownItem>
       </template>
     </ODropdown>
   </section>
diff --git a/packages/opendesign/src/dropdown/style/index.scss b/packages/opendesign/src/dropdown/style/index.scss
index e08907a90e16584fc4585fd835bd3d80c4c8ed94..6eab681b84481c40d923ac2a6d7cbecd8fd22023 100644
--- a/packages/opendesign/src/dropdown/style/index.scss
+++ b/packages/opendesign/src/dropdown/style/index.scss
@@ -14,7 +14,7 @@
 .o-dropdown-item {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: var(--dropdown-item-justify);
   padding: var(--dropdown-item-padding);
   background-color: var(--dropdown-item-bg-color);
   font-size: var(--dropdown-item-text-size);
diff --git a/packages/opendesign/src/dropdown/style/var.scss b/packages/opendesign/src/dropdown/style/var.scss
index fd619da75cb6333a4896fad7c1585143b72b80ff..069b182b7fe2ec39531b12b7b46ea756f21a1ef6 100644
--- a/packages/opendesign/src/dropdown/style/var.scss
+++ b/packages/opendesign/src/dropdown/style/var.scss
@@ -18,7 +18,9 @@
   --dropdown-item-text-size: var(--o-font_size-text1);
   --dropdown-item-text-height: var(--o-line_height-text1);
 
-  --dropdown-item-padding: 7px 12px;
+  --dropdown-item-justify: center;
+
+  --dropdown-item-padding: 7px 0px;
   --dropdown-item-gap: 2px;
   --dropdown-item-radius: var(--o-radius_control-s);
 }
diff --git a/packages/opendesign/src/menu/OSubMenu.vue b/packages/opendesign/src/menu/OSubMenu.vue
index 9e2466484127f814bb3fae41148ffe4ea08e01df..d8b99886b20a87f87ee115390a676192fc24502f 100644
--- a/packages/opendesign/src/menu/OSubMenu.vue
+++ b/packages/opendesign/src/menu/OSubMenu.vue
@@ -98,6 +98,10 @@ const onBeforeEnter = (el: Element) => {
 const onEnter = (el: Element) => {
   (el as HTMLUListElement).style.height = `${el.scrollHeight}px`;
 };
+// 进入动画完成后高度设置为auto，支持嵌套子菜单展开
+const onAfterEnter = (el: Element) => {
+  (el as HTMLUListElement).style.height = 'auto';
+};
 const onBeforeLeave = (el: Element) => {
   (el as HTMLUListElement).style.height = `${(el as HTMLUListElement).offsetHeight}px`;
 };
@@ -123,7 +127,7 @@ const onLeave = (el: Element) => {
         <IconChevronRight />
       </span>
     </div>
-    <Transition @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave">
+    <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave">
       <ul v-show="isExpanded" class="o-sub-menu-children">
         <slot></slot>
       </ul>
diff --git a/packages/opendesign/src/menu/style/style.scss b/packages/opendesign/src/menu/style/style.scss
index 77443491c734bc811177c065f2278d67ee40f180..06282d06b01c3a37c2d6f43a14926e7e3a37c900 100644
--- a/packages/opendesign/src/menu/style/style.scss
+++ b/packages/opendesign/src/menu/style/style.scss
@@ -25,7 +25,6 @@
   & > .o-sub-menu-title {
     font-weight: 500;
     color: var(--sub-menu-color-selected);
-    background-color: var(--sub-menu-bg-color-selected);
 
     .o-sub-menu-title-icon {
       color: var(--sub-menu-icon-color-selected);
@@ -33,6 +32,10 @@
   }
 }
 
+.o-sub-menu-selected {
+  background-color: var(--sub-menu-bg-color-selected);
+}
+
 .o-sub-menu-associated-selected {
   & > .o-sub-menu-title {
     font-weight: 500;
diff --git a/packages/opendesign/src/radio/ORadio.vue b/packages/opendesign/src/radio/ORadio.vue
index 2372e2d1a12a814a5d7697e0e0e14a0c9237af63..71cfe773c61cfb2338127108d2072861d13652a1 100644
--- a/packages/opendesign/src/radio/ORadio.vue
+++ b/packages/opendesign/src/radio/ORadio.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, provide, ref, watch } from 'vue';
+import { radioInjectKey } from './provide';
 import { radioProps } from './types';
 import { radioGroupInjectKey } from '../radio-group/provide';
 import { isUndefined } from '../_utils/is';
@@ -64,6 +65,11 @@ const onChange = (ev: Event) => {
     radioGroupInjection?.onChange(val, ev);
   });
 };
+
+provide(radioInjectKey, {
+  checked: isChecked,
+  disabled: isDisabled,
+});
 </script>
 
 <template>
diff --git a/packages/opendesign/src/radio/provide.ts b/packages/opendesign/src/radio/provide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5bd66fdce29243ae077ed0b4508b761c47048b5
--- /dev/null
+++ b/packages/opendesign/src/radio/provide.ts
@@ -0,0 +1,6 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+
+export const radioInjectKey: InjectionKey<{
+  checked: ComputedRef<boolean>;
+  disabled: ComputedRef<boolean>;
+}> = Symbol('provide-radio');
diff --git a/packages/opendesign/src/toggle/OToggle.vue b/packages/opendesign/src/toggle/OToggle.vue
index ad2b2681c73e5a7a1802df51eca992d3eafde223..9386bb82e49749cec69326fb090bab9f4dcad350 100644
--- a/packages/opendesign/src/toggle/OToggle.vue
+++ b/packages/opendesign/src/toggle/OToggle.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, inject, nextTick } from 'vue';
 import { buttonToggleProps } from './types';
 import { getRoundClass } from '../_utils/style-class';
 import { isUndefined } from '../_utils/is';
+import { checkboxInjectKey } from '../checkbox/provide';
+import { radioInjectKey } from '../radio/provide';
+
+const checkboxInjection = inject(checkboxInjectKey, null);
+const radioInjection = inject(radioInjectKey, null);
 
 const props = defineProps(buttonToggleProps);
 
@@ -10,10 +15,10 @@ const round = getRoundClass(props, 'toggle');
 
 const isChecked = ref(props.checked ?? props.defaultChecked);
 
-// const emits = defineEmits<{
-//   (e: 'update:checked', val: boolean): void;
-//   (e: 'change', val: boolean, ev: MouseEvent): void;
-// }>();
+const emits = defineEmits<{
+  (e: 'update:checked', val: boolean): void;
+  (e: 'change', val: boolean, ev: MouseEvent): void;
+}>();
 
 watch(
   () => props.checked,
@@ -24,14 +29,16 @@ watch(
   }
 );
 
-// const onClick = (ev: MouseEvent) => {
-//   if (props.disabled) {
-//     return;
-//   }
-//   isChecked.value = !isChecked.value;
-//   emits('update:checked', isChecked.value);
-//   emits('change', isChecked.value, ev);
-// };
+const onClick = (ev: MouseEvent) => {
+  if (props.disabled || checkboxInjection || radioInjection) {
+    return;
+  }
+  isChecked.value = !isChecked.value;
+  emits('update:checked', isChecked.value);
+  nextTick(() => {
+    emits('change', isChecked.value, ev);
+  });
+};
 </script>
 
 <template>
@@ -44,6 +51,7 @@ watch(
         'o-toggle-checked': isChecked,
       },
     ]"
+    @click="onClick"
   >
     <span v-if="props.icon || $slots.icon" class="o-toggle-prefix">
       <slot name="icon">
diff --git a/packages/opendesign/src/toggle/__demo__/TheIndex.vue b/packages/opendesign/src/toggle/__demo__/TheIndex.vue
index d38f2a4167de5cdd3bcf82377d0a6d0eb5985784..47f5b4287e75ed0cd4af1b6bcf81dad32d911a94 100644
--- a/packages/opendesign/src/toggle/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/toggle/__demo__/TheIndex.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import '../style';
 
-import ToggleBasic from './ToggleBasic.vue';
+import ToggleCheckbox from './ToggleCheckbox.vue';
+import ToggleMinAndMax from './ToggleMinAndMax.vue';
+import ToggleOnly from './ToggleOnly.vue';
+import ToggleRadio from './ToggleRadio.vue';
 </script>
 
 <template>
   <div class="page-demo">
-    <ToggleBasic />
+    <ToggleOnly />
+    <ToggleRadio />
+    <ToggleCheckbox />
+    <ToggleMinAndMax />
   </div>
 </template>
diff --git a/packages/opendesign/src/toggle/__demo__/ToggleBasic.vue b/packages/opendesign/src/toggle/__demo__/ToggleBasic.vue
deleted file mode 100644
index a4b37722c9c1c14de9c750cc06648e20b136fd30..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/toggle/__demo__/ToggleBasic.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { OToggle } from '../index';
-</script>
-
-<template>
-  <h4>基础用法</h4>
-  <section>
-    <OToggle>筛选条件1</OToggle>
-    <OToggle>筛选条件2</OToggle>
-    <OToggle>筛选条件3</OToggle>
-    <OToggle :default-checked="true"> 筛选条件 </OToggle>
-  </section>
-</template>
diff --git a/packages/opendesign/src/toggle/__demo__/ToggleCheckbox.vue b/packages/opendesign/src/toggle/__demo__/ToggleCheckbox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f06e3895579d553f0ec9004959c2a95cc083707
--- /dev/null
+++ b/packages/opendesign/src/toggle/__demo__/ToggleCheckbox.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { OToggle, OCheckboxGroup, OCheckbox } from '@components/index';
+import { ref } from 'vue';
+const checkboxVal = ref([1]);
+</script>
+
+<template>
+  <h3>多选</h3>
+  <section>
+    <OCheckboxGroup v-model="checkboxVal" :style="{ '--checkbox-group-gap': '8px' }">
+      <OCheckbox :value="1">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件1</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="2">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件2</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="3">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件3</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="4">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件4</OToggle>
+        </template>
+      </OCheckbox>
+    </OCheckboxGroup>
+  </section>
+</template>
diff --git a/packages/opendesign/src/toggle/__demo__/ToggleMinAndMax.vue b/packages/opendesign/src/toggle/__demo__/ToggleMinAndMax.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ae9861030d182f025d5351bb2109d403d8efbc1c
--- /dev/null
+++ b/packages/opendesign/src/toggle/__demo__/ToggleMinAndMax.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OToggle } from '../index';
+import '../../checkbox/style';
+import { OCheckbox } from '../../checkbox';
+import '../../checkbox-group/style';
+import { OCheckboxGroup } from '../../checkbox-group';
+import { OIconAdd } from '../../icon-components';
+
+const checkboxVal = ref([1, 2]);
+</script>
+
+<template>
+  <h3>最少选择1个，最多选择3个</h3>
+  <section>
+    <OCheckboxGroup v-model="checkboxVal" :min="1" :max="3" :style="{ '--checkbox-group-gap': '8px' }">
+      <OCheckbox :value="1">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件1</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="2">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件2</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="3">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件3</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="4">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件4</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="5">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件5</OToggle>
+        </template>
+      </OCheckbox>
+    </OCheckboxGroup>
+  </section>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/packages/opendesign/src/toggle/__demo__/ToggleOnly.vue b/packages/opendesign/src/toggle/__demo__/ToggleOnly.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b83d65c8cb52e0d689a1129b16d2c36f9017d00
--- /dev/null
+++ b/packages/opendesign/src/toggle/__demo__/ToggleOnly.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { OToggle } from '@components/index';
+import { ref } from 'vue';
+const checked1 = ref(true);
+</script>
+
+<template>
+  <h3>单独使用</h3>
+  <section>
+    <OToggle v-model="checked1">1</OToggle>
+    <OToggle>2</OToggle>
+    <OToggle>2</OToggle>
+  </section>
+</template>
diff --git a/packages/opendesign/src/toggle/__demo__/ToggleRadio.vue b/packages/opendesign/src/toggle/__demo__/ToggleRadio.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c88b07407f5e64516e9380ce00862e13fb8cdacb
--- /dev/null
+++ b/packages/opendesign/src/toggle/__demo__/ToggleRadio.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OToggle } from '../index';
+import '../../radio/style';
+import { ORadio } from '../../radio';
+import '../../radio-group/style';
+import { ORadioGroup } from '../../radio-group';
+const radioVal = ref(1);
+</script>
+
+<template>
+  <h3>单选</h3>
+  <section>
+    <ORadioGroup v-model="radioVal" :style="{ '--radio-group-gap': '8px' }">
+      <ORadio :value="1">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件1</OToggle>
+        </template>
+      </ORadio>
+      <ORadio :value="2">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件2</OToggle>
+        </template>
+      </ORadio>
+      <ORadio :value="3">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件3</OToggle>
+        </template>
+      </ORadio>
+      <ORadio :value="4">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件4</OToggle>
+        </template>
+      </ORadio>
+    </ORadioGroup>
+  </section>
+</template>
diff --git a/packages/opendesign/src/toggle/style/var.scss b/packages/opendesign/src/toggle/style/var.scss
index 5841c7c18f986687aba03db832fe704cbc1f332f..194b46a03336aa3cf3d73f5da6bccf7e3ad434ab 100644
--- a/packages/opendesign/src/toggle/style/var.scss
+++ b/packages/opendesign/src/toggle/style/var.scss
@@ -11,15 +11,15 @@
 
   --toggle-padding: 0 15px;
 
-  --toggle-color: var(--o-color-info2);
+  --toggle-color: var(--o-color-info1);
   --toggle-color-hover: var(--o-color-info1);
   --toggle-color-active: var(--o-color-info1);
   --toggle-color-disabled: var(--o-color-info4);
 
-  --toggle-bg-color: var(--o-color-fill1);
+  --toggle-bg-color: var(--o-color-control2-light);
   --toggle-bg-color-hover: var(--o-color-control2-light);
   --toggle-bg-color-active: var(--o-color-control3-light);
-  --toggle-bg-color-disabled: var(--o-color-control4-light);
+  --toggle-bg-color-disabled: transparent;
 
   --toggle-bd-color: var(--o-color-fill1);
   --toggle-bd-color-hover: transparent;
diff --git a/packages/portal-ak/src/ak/theme/toggle.scss b/packages/portal-ak/src/ak/theme/toggle.scss
index 234f146b9250ffd8038602176f8414819775c002..0eacefcfd5b4acabdab2e481a1ac2933a4dc6a10 100644
--- a/packages/portal-ak/src/ak/theme/toggle.scss
+++ b/packages/portal-ak/src/ak/theme/toggle.scss
@@ -2,10 +2,7 @@
 
 .o-toggle {
   --toggle-bg-color: var(--o-color-fill1);
-  --toggle-bg-color-hover: var(--o-color-fill3);
-
   --toggle-bd-color: var(--o-color-fill1);
-  --toggle-bd-color-hover: var(--o-color-fill3);
 }
 
 @include respond-to('pad') {