diff --git a/packages/opendesign/src/components/badge/OBadge.vue b/packages/opendesign/src/components/badge/OBadge.vue
index 35b1aff4f72d8d917bfea968dda93a6f1e060d7c..19a74e32086b7c2ea441554c3ff22900ee312a6a 100644
--- a/packages/opendesign/src/components/badge/OBadge.vue
+++ b/packages/opendesign/src/components/badge/OBadge.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { isNumber } from '../_shared/is';
 import { badgeProps } from './types';
 
+import { isNumber } from '../_shared/is';
+
 const props = defineProps(badgeProps);
 
 const content = computed(() => {
diff --git a/packages/opendesign/src/components/badge/index.ts b/packages/opendesign/src/components/badge/index.ts
index 8df457451177ca8d7162cd3bb4252c668a7def17..7ff1738e8901e7ed02aba68c21c7fa17a2e65d2a 100644
--- a/packages/opendesign/src/components/badge/index.ts
+++ b/packages/opendesign/src/components/badge/index.ts
@@ -2,12 +2,12 @@ import type { App } from 'vue';
 
 import _OBadge from './OBadge.vue';
 
-export * from './types';
-
 const OBadge = Object.assign(_OBadge, {
   install(app: App) {
     app.component(_OBadge.name, _OBadge);
   },
 });
 
+export * from './types';
+
 export { OBadge };
diff --git a/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue b/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue
index 844d4cb33785ac66095150b4ed1ad653882047d2..79553264fe85b20f0e608f887e03a1b3e8e5170b 100644
--- a/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue
+++ b/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue
@@ -1,17 +1,13 @@
 <script setup lang="ts">
-import { provide, reactive, toRefs } from 'vue';
+import { provide, toRef } from 'vue';
 import { breadcrumbProps } from './types';
 import { breadcrumbInjectKey } from './provide';
 
 const props = defineProps(breadcrumbProps);
-const { separator } = toRefs(props);
 
-provide(
-  breadcrumbInjectKey,
-  reactive({
-    separator,
-  })
-);
+provide(breadcrumbInjectKey, {
+  separator: toRef(props, 'separator'),
+});
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue b/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
index 957b0e97117d1c26a600ef1f64b993ad22072c30..1be9187d1ee35fe6ad9ba82dc24ae8aaac0afee8 100644
--- a/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
+++ b/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { inject } from 'vue';
-
 import { breadcrumbItemProps } from './types';
 import { breadcrumbInjectKey } from './provide';
 import { IconChevronRight } from '../_shared/icons';
@@ -34,7 +33,7 @@ const onClick = () => {
     <span class="o-breadcrumb-item-separator">
       <slot v-if="$slots.separator" name="separator"></slot>
       <span v-else-if="separator"> {{ separator }}</span>
-      <template v-else-if="breadcrumbInjection?.separator">{{ breadcrumbInjection?.separator }} </template>
+      <template v-else-if="breadcrumbInjection?.separator.value">{{ breadcrumbInjection?.separator.value }} </template>
       <IconChevronRight v-else />
     </span>
   </div>
diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue
index bbd3e03e3ab3868568d2f63146c4a8cdd3ed6386..c535768e71762be40a1b57fd962a772febba2260 100644
--- a/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue
+++ b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue
@@ -16,7 +16,7 @@ const handleClick = () => {
       <OBreadcrumbItem @click="handleClick">面包屑</OBreadcrumbItem>
     </OBreadcrumb>
 
-    <OBreadcrumb separator="/">
+    <OBreadcrumb separator="=">
       <OBreadcrumbItem :to="{ name: 'Home' }" @click="handleClick">
         首页
         <template #separator>
diff --git a/packages/opendesign/src/components/breadcrumb/index.ts b/packages/opendesign/src/components/breadcrumb/index.ts
index d3cf4d9be6af1ad173aefc9c36ad75b5dc513e3b..8beaad780fbc4f9c1af9932f967d047ef9752f6e 100644
--- a/packages/opendesign/src/components/breadcrumb/index.ts
+++ b/packages/opendesign/src/components/breadcrumb/index.ts
@@ -3,8 +3,6 @@ import type { App } from 'vue';
 import _OBreadcrumb from './OBreadcrumb.vue';
 import _OBreadcrumbItem from './OBreadcrumbItem.vue';
 
-export * from './types';
-
 const OBreadcrumb = Object.assign(_OBreadcrumb, {
   install(app: App) {
     app.component(_OBreadcrumb.name, _OBreadcrumb);
@@ -17,4 +15,6 @@ const OBreadcrumbItem = Object.assign(_OBreadcrumbItem, {
   },
 });
 
+export * from './types';
+
 export { OBreadcrumb, OBreadcrumbItem };
diff --git a/packages/opendesign/src/components/breadcrumb/provide.ts b/packages/opendesign/src/components/breadcrumb/provide.ts
index 08f1678fc1245869170b9d0d18d536c7a140d125..8917c07fad290e2ea0075413265b314cb5de3ee7 100644
--- a/packages/opendesign/src/components/breadcrumb/provide.ts
+++ b/packages/opendesign/src/components/breadcrumb/provide.ts
@@ -1,7 +1,7 @@
-import { InjectionKey } from 'vue';
+import { InjectionKey, Ref } from 'vue';
 
 interface BreadcrumbInjectT {
-  separator: string | number;
+  separator: Ref<string | number>;
 }
 
 export const breadcrumbInjectKey: InjectionKey<BreadcrumbInjectT> = Symbol('provide-breadcrumb');
diff --git a/packages/opendesign/src/components/breadcrumb/types.ts b/packages/opendesign/src/components/breadcrumb/types.ts
index f5eee09fa769597a04c76c2f779e138ee0101292..ac9d91bb21c4ff33bb9abc686e7a8e7f5f8ed3c5 100644
--- a/packages/opendesign/src/components/breadcrumb/types.ts
+++ b/packages/opendesign/src/components/breadcrumb/types.ts
@@ -48,4 +48,4 @@ export const breadcrumbItemProps = {
 
 export type BreadcrumbPropsT = ExtractPropTypes<typeof breadcrumbProps>;
 
-export type BreadcrumbItemProps = ExtractPropTypes<typeof breadcrumbProps>;
+export type BreadcrumbItemPropsT = ExtractPropTypes<typeof breadcrumbProps>;
diff --git a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
index 38bda83d39c37397ffddbcfc68ffbb47cb9d50c6..32e7a3049649d7de1456dba2111fbf157e289aab 100644
--- a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
+++ b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
@@ -1,61 +1,30 @@
 <script lang="ts" setup>
-import { computed, provide, ref, toRefs, watch } from 'vue';
+import { computed, provide, ref, toRef, watch } from 'vue';
+import { checkboxGroupProps } from './types';
 import { checkboxGroupInjectKey } from './provide';
-import type { DirectionT } from '../_shared/global';
 import { isArray, isUndefined } from '../_shared/is';
 
-interface CheckboxGroupPropT {
-  /**
-   * 多选框组双向绑定值
-   */
-  modelValue?: Array<string | number>;
-  /**
-   * 非受控状态时，多选框组默认值
-   */
-  defaultValue?: Array<string | number>;
-  /**
-   * 多选框组是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 多选框组方向
-   * 'horizontal' | 'vertical'
-   */
-  direction?: DirectionT;
-  /**
-   * 多选框组支持选中的最小多选框数量
-   */
-  min?: number;
-  /**
-   * 多选框组支持选中的最大多选框数量
-   */
-  max?: number;
-}
-
-const props = withDefaults(defineProps<CheckboxGroupPropT>(), {
-  modelValue: undefined,
-  defaultValue: () => [],
-  disabled: false,
-  direction: 'horizontal',
-  min: undefined,
-  max: undefined,
-});
+const props = defineProps(checkboxGroupProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: Array<string | number>): void;
   (e: 'change', val: Array<string | number>): void;
 }>();
 
-const { modelValue, disabled, min, max } = toRefs(props);
+const realValue = ref(props.modelValue ?? props.defaultValue);
 
-const realValue = ref(modelValue.value ?? props.defaultValue);
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (isArray(val)) {
+      realValue.value = val;
+    }
+  }
+);
 
-watch(modelValue, (val) => {
-  realValue.value = val as Array<string | number>;
-});
+const isMinimum = computed(() => (isArray(props.min) ? false : realValue.value.length <= props.min));
 
-const isMinimum = computed(() => (isUndefined(min.value) || !isArray(realValue.value) ? false : realValue.value.length <= min.value));
-const isMaximum = computed(() => (isUndefined(max.value) || !isArray(realValue.value) ? false : realValue.value.length >= max.value));
+const isMaximum = computed(() => (isUndefined(props.max) ? false : realValue.value.length >= props.max));
 
 const updateModelValue = (val: Array<string | number>) => {
   emits('update:modelValue', val);
@@ -65,7 +34,14 @@ const onChange = (val: Array<string | number>) => {
   emits('change', val);
 };
 
-provide(checkboxGroupInjectKey, { realValue, disabled, isMinimum, isMaximum, updateModelValue, onChange });
+provide(checkboxGroupInjectKey, {
+  realValue,
+  disabled: toRef(props, 'disabled'),
+  isMinimum,
+  isMaximum,
+  updateModelValue,
+  onChange,
+});
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/checkbox-group/index.ts b/packages/opendesign/src/components/checkbox-group/index.ts
index abc21ee4e8f16d504c9705e9a4ec677e7960a0d4..8c21b489b08cd7ec4028736108c3c7cff10efcba 100644
--- a/packages/opendesign/src/components/checkbox-group/index.ts
+++ b/packages/opendesign/src/components/checkbox-group/index.ts
@@ -8,4 +8,6 @@ const OCheckboxGroup = Object.assign(_OCheckboxGroup, {
   },
 });
 
+export * from './types';
+
 export { OCheckboxGroup };
diff --git a/packages/opendesign/src/components/checkbox-group/types.ts b/packages/opendesign/src/components/checkbox-group/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bffd3e619e7db252e3d5af90f8cecf6a4c98c68
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox-group/types.ts
@@ -0,0 +1,49 @@
+import type { DirectionT } from '../_shared/global';
+import type { ExtractPropTypes, PropType } from 'vue';
+
+export const checkboxGroupProps = {
+  /**
+   * 多选框组双向绑定值
+   */
+  modelValue: {
+    type: Array as PropType<Array<string | number>>,
+  },
+  /**
+   * 非受控状态时，多选框组默认值
+   */
+  defaultValue: {
+    type: Array as PropType<Array<string | number>>,
+    default: () => [],
+  },
+  /**
+   * 多选框组是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 多选框组方向
+   * 'horizontal' | 'vertical'
+   */
+  direction: {
+    type: String as PropType<DirectionT>,
+    default: 'horizontal',
+  },
+  /**
+   * 多选框组支持选中的最小多选框数量
+   */
+  min: {
+    type: Number,
+    default: undefined,
+  },
+  /**
+   * 多选框组支持选中的最大多选框数量
+   */
+  max: {
+    type: Number,
+    default: undefined,
+  },
+};
+
+export type CheckboxGroupPropsT = ExtractPropTypes<typeof checkboxGroupProps>;
diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
index 43e643881c1337df7bcb6b98e4893ac66beb8a60..20f45b0302d0e85446e00466385a856c314913b4 100644
--- a/packages/opendesign/src/components/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue
@@ -1,36 +1,11 @@
 <script lang="ts" setup>
 import { computed, inject, nextTick, ref, watch } from 'vue';
 import { checkboxGroupInjectKey } from '../checkbox-group/provide';
+import { checkboxProps } from './types';
 import { IconDone, IconMinus } from '../_shared/icons';
-import { isArray } from '../_shared/is';
+import { isArray, isUndefined } from '../_shared/is';
 
-interface CheckboxPropT {
-  /**
-   * 多选框value
-   */
-  value: string | number;
-  /**
-   * 多选框双向绑定值
-   */
-  modelValue?: Array<string | number>;
-  /**
-   * 非受控状态时，默认是否选中
-   */
-  defaultChecked?: boolean;
-  /**
-   * 是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 是否为半选状态
-   */
-  indeterminate?: boolean;
-}
-const props = withDefaults(defineProps<CheckboxPropT>(), {
-  modelValue: undefined,
-  defaultChecked: false,
-  disabled: false,
-});
+const props = defineProps(checkboxProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: Array<string | number>): void;
@@ -39,25 +14,18 @@ const emits = defineEmits<{
 
 const checkboxGroupInjection = inject(checkboxGroupInjectKey, null);
 
-// 监听modelValue改变
-const isModelValueChanged = ref(false);
-watch(
-  () => props.modelValue,
-  () => {
-    isModelValueChanged.value = true;
-  },
-  { deep: true }
-);
-
 // 是否选中
 const _checked = ref(props.defaultChecked);
 const isChecked = computed(() => {
+  if (isUndefined(props.value)) {
+    return false;
+  }
   if (checkboxGroupInjection) {
-    return isArray(checkboxGroupInjection.realValue.value) ? checkboxGroupInjection.realValue.value.includes(props.value) : false;
+    return checkboxGroupInjection.realValue.value.includes(props.value);
   }
 
-  if (isArray(props.modelValue) || isModelValueChanged.value) {
-    return isArray(props.modelValue) ? props.modelValue.includes(props.value) : false;
+  if (isArray(props.modelValue)) {
+    return props.modelValue.includes(props.value);
   }
 
   return _checked.value;
@@ -85,6 +53,10 @@ const onClick = (ev: Event) => {
 };
 
 const onChange = (ev: Event) => {
+  if (isUndefined(props.value)) {
+    return;
+  }
+
   const { checked } = ev.target as HTMLInputElement;
 
   const set = checkboxGroupInjection
diff --git a/packages/opendesign/src/components/checkbox/index.ts b/packages/opendesign/src/components/checkbox/index.ts
index c3c566cc96777ecfc540f90c6ee505507773a668..f499a976882868b82b1066c0d0d3e1f84f7511eb 100644
--- a/packages/opendesign/src/components/checkbox/index.ts
+++ b/packages/opendesign/src/components/checkbox/index.ts
@@ -8,4 +8,6 @@ const OCheckbox = Object.assign(_OCheckbox, {
   },
 });
 
+export * from './types';
+
 export { OCheckbox };
diff --git a/packages/opendesign/src/components/checkbox/types.ts b/packages/opendesign/src/components/checkbox/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ebab02de5b8134e8c0331191e97c55f43ddb2d6
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/types.ts
@@ -0,0 +1,40 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const checkboxProps = {
+  /**
+   * 多选框value
+   */
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  /**
+   * 多选框双向绑定值
+   */
+  modelValue: {
+    type: Array as PropType<Array<string | number>>,
+  },
+  /**
+   * 非受控状态时，默认是否选中
+   */
+  defaultChecked: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否为半选状态
+   */
+  indeterminate: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type CheckboxPropsT = ExtractPropTypes<typeof checkboxProps>;
diff --git a/packages/opendesign/src/components/divider/ODivider.vue b/packages/opendesign/src/components/divider/ODivider.vue
index 188e87ac988288bc32edbda4da7f9e4726a63117..6d17459e4efa758a670e65bb0dc362986fade765 100644
--- a/packages/opendesign/src/components/divider/ODivider.vue
+++ b/packages/opendesign/src/components/divider/ODivider.vue
@@ -1,30 +1,7 @@
 <script setup lang="ts">
-import type { DividerTypeT, DividerContentPositionT } from './types';
-import type { DirectionT } from '../_shared/global';
+import { dividerProps } from './types';
 
-interface DividerPropT {
-  /**
-   * 分割线类型
-   * 'solid' | 'dashed' | 'dotted'
-   */
-  type?: DividerTypeT;
-  /**
-   * 分割线方向
-   * 'horizontal' | 'vertical'
-   */
-  direction?: DirectionT;
-  /**
-   * 自定义内容位置
-   * 'left' | 'center' | 'right'
-   */
-  contentPosition?: DividerContentPositionT;
-}
-
-const props = withDefaults(defineProps<DividerPropT>(), {
-  type: 'solid',
-  direction: 'horizontal',
-  contentPosition: 'center',
-});
+const props = defineProps(dividerProps);
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/divider/index.ts b/packages/opendesign/src/components/divider/index.ts
index a1df53057a3d1c9503ef714f7b4ed65b9544ae61..d02d0ffab4dccaa4dcccf2817aba043af345f1e4 100644
--- a/packages/opendesign/src/components/divider/index.ts
+++ b/packages/opendesign/src/components/divider/index.ts
@@ -2,12 +2,12 @@ import type { App } from 'vue';
 
 import _ODivider from './ODivider.vue';
 
-export * from './types';
-
 const ODivider = Object.assign(_ODivider, {
   install(app: App) {
     app.component(_ODivider.name, _ODivider);
   },
 });
 
+export * from './types';
+
 export { ODivider };
diff --git a/packages/opendesign/src/components/divider/types.ts b/packages/opendesign/src/components/divider/types.ts
index c277e8645b078e980e05fb96fb37fa147cc695da..7e84fbee615a34865a0615b1684e06e8492b2da8 100644
--- a/packages/opendesign/src/components/divider/types.ts
+++ b/packages/opendesign/src/components/divider/types.ts
@@ -1,2 +1,34 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import type { DirectionT } from '../_shared/global';
+
 export type DividerTypeT = 'solid' | 'dashed' | 'dotted';
 export type DividerContentPositionT = 'left' | 'center' | 'right';
+
+export const dividerProps = {
+  /**
+   * 分割线类型
+   * 'solid' | 'dashed' | 'dotted'
+   */
+  type: {
+    type: String as PropType<DividerTypeT>,
+    default: 'solid',
+  },
+  /**
+   * 分割线方向
+   * 'horizontal' | 'vertical'
+   */
+  direction: {
+    type: String as PropType<DirectionT>,
+    default: 'horizontal',
+  },
+  /**
+   * 自定义内容位置
+   * 'left' | 'center' | 'right'
+   */
+  contentPosition: {
+    type: String as PropType<DividerContentPositionT>,
+    default: 'center',
+  },
+};
+
+export type DividerPropsT = ExtractPropTypes<typeof dividerProps>;
diff --git a/packages/opendesign/src/components/menu/OMenu.vue b/packages/opendesign/src/components/menu/OMenu.vue
index a058cb7bb7d59f9e77f813c32995142428079695..32d5fbefe7d6c6333ff43c94bef47bf97376948a 100644
--- a/packages/opendesign/src/components/menu/OMenu.vue
+++ b/packages/opendesign/src/components/menu/OMenu.vue
@@ -47,7 +47,6 @@ onMounted(() => {
 
 // 展开节点列表
 const realExpanded = ref(expanded?.value ?? defaultExpanded.value);
-
 watch(
   () => expanded?.value,
   (val) => {
diff --git a/packages/opendesign/src/components/menu/style/index.scss b/packages/opendesign/src/components/menu/style/index.scss
index f4fe0d6200ddd2a3d763857f44c0a26ffce8b241..9a5012006d403d91c5f1c314dbd5c930a60b4ce4 100644
--- a/packages/opendesign/src/components/menu/style/index.scss
+++ b/packages/opendesign/src/components/menu/style/index.scss
@@ -2,17 +2,17 @@
 
 .o-menu {
   list-style: none;
-  width: var(--o-menu-width);
-  color: var(--o-menu-color);
-  background-color: var(--o-menu-bg);
+  width: var(--menu-width);
+  color: var(--menu-color);
+  background-color: var(--menu-bg);
   margin: 0;
   padding: 0;
 }
 
 // submenu
 .o-sub-menu {
-  font-size: var(--o-sub-menu-text-size);
-  line-height: var(--o-sub-menu-text-height);
+  font-size: var(--sub-menu-text-size);
+  line-height: var(--sub-menu-text-height);
   font-weight: 400;
 }
 
@@ -41,13 +41,13 @@
   transition: background-color var(--o-duration-m2) var(--o-easing-standard);
 
   &:hover {
-    background-color: var(--o-sub-menu-bg-hover);
+    background-color: var(--sub-menu-bg-hover);
   }
 }
 
 .o-sub-menu-title-icon {
   margin-right: 4px;
-  font-size: var(--o-sub-menu-icon-height);
+  font-size: var(--sub-menu-icon-height);
 }
 
 .o-sub-menu-title-content {
@@ -60,7 +60,7 @@
   position: absolute;
   right: 16px;
   transform: rotate(0);
-  font-size: var(--o-sub-menu-icon-height);
+  font-size: var(--sub-menu-icon-height);
   transition: transform var(--o-duration-m2) var(--o-easing-standard);
 }
 
@@ -74,8 +74,8 @@
 
 //menu-item
 .o-menu-item {
-  font-size: var(--o-menu-item-text-size);
-  line-height: var(--o-menu-item-text-height);
+  font-size: var(--menu-item-text-size);
+  line-height: var(--menu-item-text-height);
   border-radius: 8px;
   padding: 12px 16px 12px 36px;
   cursor: pointer;
@@ -85,7 +85,7 @@
   transition: background-color var(--o-duration-s) var(--o-easing-standard);
 
   &:not(.o-menu-item-disabled):hover {
-    background-color: var(--o-menu-item-bg-hover);
+    background-color: var(--menu-item-bg-hover);
   }
 
   & + .o-menu-item {
@@ -94,10 +94,10 @@
 }
 
 .o-menu-item-active {
-  background-color: var(--o-menu-item-bg-active);
+  background-color: var(--menu-item-bg-active);
 }
 
 .o-menu-item-disabled {
   cursor: not-allowed;
-  color: var(--o-menu-item-color-disabled);
+  color: var(--menu-item-color-disabled);
 }
diff --git a/packages/opendesign/src/components/menu/style/var.scss b/packages/opendesign/src/components/menu/style/var.scss
index b97c4874532fb9d87787ba2ae71383224caafb6b..044682569be0fe5eb472919a493c487a8bdbdb71 100644
--- a/packages/opendesign/src/components/menu/style/var.scss
+++ b/packages/opendesign/src/components/menu/style/var.scss
@@ -1,20 +1,20 @@
 .o-menu {
-  --o-menu-width: 260px;
-  --o-menu-bg: var(--o-color-fill2);
-  --o-menu-color: var(--o-color-info1);
+  --menu-width: 260px;
+  --menu-bg: var(--o-color-fill2);
+  --menu-color: var(--o-color-info1);
 }
 
 .o-sub-menu {
-  --o-sub-menu-bg-hover: var(--o-color-control2-light);
-  --o-sub-menu-text-size: var(--o-font_size-h4);
-  --o-sub-menu-text-height: var(--o-line_height-h4);
-  --o-sub-menu-icon-height: var(--o-font_size-h1);
+  --sub-menu-bg-hover: var(--o-color-control2-light);
+  --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);
 }
 
 .o-menu-item {
-  --o-menu-item-text-size: var(--o-font_size-text);
-  --o-menu-item-text-height: var(--o-line_height-text);
-  --o-menu-item-bg-active: var(--o-color-control2);
-  --o-menu-item-bg-hover: var(--o-color-control2-light);
-  --o-menu-item-color-disabled: var(--o-color-info4);
+  --menu-item-text-size: var(--o-font_size-text);
+  --menu-item-text-height: var(--o-line_height-text);
+  --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);
 }
diff --git a/packages/opendesign/src/components/radio-group/ORadioGroup.vue b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
index 1d7c4161441bab721e9e111d8e60851b0b82b561..23ce853537566542e3b9bc739069fefc0eef66c7 100644
--- a/packages/opendesign/src/components/radio-group/ORadioGroup.vue
+++ b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
@@ -1,47 +1,26 @@
 <script lang="ts" setup>
-import { provide, ref, toRefs, watch } from 'vue';
+import { provide, ref, toRef, watch } from 'vue';
+import { radioGroupProps } from './types';
 import { radioGroupInjectKey } from './provide';
-import type { DirectionT } from '../_shared/global';
-
-interface RadioGroupPropT {
-  /**
-   * 单选框组双向绑定值
-   */
-  modelValue?: string | number | boolean;
-  /**
-   * 非受控状态时，单选框组默认值
-   */
-  defaultValue?: string | number | boolean;
-  /**
-   * 单选框组是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 单选框组方向
-   * 'horizontal' | 'vertical'
-   */
-  direction?: DirectionT;
-}
-
-const props = withDefaults(defineProps<RadioGroupPropT>(), {
-  modelValue: undefined,
-  defaultValue: '',
-  disabled: false,
-  direction: 'horizontal',
-});
+import { isUndefined } from '../_shared/is';
+
+const props = defineProps(radioGroupProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string | number | boolean): void;
   (e: 'change', val: string | number | boolean): void;
 }>();
 
-const { modelValue, disabled } = toRefs(props);
+const realValue = ref(props.modelValue ?? props.defaultValue);
 
-const realValue = ref(modelValue.value ?? props.defaultValue);
-
-watch(modelValue, (val) => {
-  realValue.value = val as string | number | boolean;
-});
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!isUndefined(val)) {
+      realValue.value = val;
+    }
+  }
+);
 
 const updateModelValue = (val: string | number | boolean) => {
   emits('update:modelValue', val);
@@ -51,7 +30,12 @@ const onChange = (val: string | number | boolean) => {
   emits('change', val);
 };
 
-provide(radioGroupInjectKey, { realValue, disabled, updateModelValue, onChange });
+provide(radioGroupInjectKey, {
+  realValue,
+  disabled: toRef(props, 'disabled'),
+  updateModelValue,
+  onChange,
+});
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/radio-group/index.ts b/packages/opendesign/src/components/radio-group/index.ts
index 87fec21f05f79d8d04c89cfbb4f73d165bc7b111..2d876dff1e2ddc7d9f631d915f8e055d1692881a 100644
--- a/packages/opendesign/src/components/radio-group/index.ts
+++ b/packages/opendesign/src/components/radio-group/index.ts
@@ -8,4 +8,6 @@ const ORadioGroup = Object.assign(_ORadioGroup, {
   },
 });
 
+export * from './types';
+
 export { ORadioGroup };
diff --git a/packages/opendesign/src/components/radio-group/types.ts b/packages/opendesign/src/components/radio-group/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ac84ac25694b3506aae4c80bd549ca9f618c395
--- /dev/null
+++ b/packages/opendesign/src/components/radio-group/types.ts
@@ -0,0 +1,35 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { DirectionT } from '../_shared/global';
+
+export const radioGroupProps = {
+  /**
+   * 单选框组双向绑定值
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+  },
+  /**
+   * 非受控状态时，单选框组默认值
+   */
+  defaultValue: {
+    type: [String, Number, Boolean],
+    default: '',
+  },
+  /**
+   * 单选框组是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 单选框组方向
+   * 'horizontal' | 'vertical'
+   */
+  direction: {
+    type: String as PropType<DirectionT>,
+    default: 'horizontal',
+  },
+};
+
+export type RadioGroupPropsT = ExtractPropTypes<typeof radioGroupProps>;
diff --git a/packages/opendesign/src/components/radio/ORadio.vue b/packages/opendesign/src/components/radio/ORadio.vue
index 7a28e6eee8000950284c7951b32018d81a45b3d5..f70bb37b03512d012b65e19cb6b564d89bfd2536 100644
--- a/packages/opendesign/src/components/radio/ORadio.vue
+++ b/packages/opendesign/src/components/radio/ORadio.vue
@@ -1,32 +1,10 @@
 <script lang="ts" setup>
 import { computed, inject, nextTick, ref, watch } from 'vue';
+import { radioProps } from './types';
 import { radioGroupInjectKey } from '../radio-group/provide';
 import { isUndefined } from '../_shared/is';
 
-interface RadioPropT {
-  /**
-   * 单选框value
-   */
-  value: string | number | boolean;
-  /**
-   * 单选框双向绑定值
-   */
-  modelValue?: string | number | boolean;
-  /**
-   * 非受控状态时，默认是否选中
-   */
-  defaultChecked?: boolean;
-  /**
-   * 是否禁用
-   */
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<RadioPropT>(), {
-  modelValue: undefined,
-  defaultChecked: false,
-  disabled: false,
-});
+const props = defineProps(radioProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string | number | boolean): void;
@@ -35,24 +13,16 @@ const emits = defineEmits<{
 
 const radioGroupInjection = inject(radioGroupInjectKey, null);
 
-// 监听modelValue改变
-const isModelValueChanged = ref(false);
-watch(
-  () => props.modelValue,
-  () => {
-    isModelValueChanged.value = true;
-  }
-);
-
 // 是否选中
 const _checked = ref(props.defaultChecked);
+
 const isChecked = computed(() => {
   if (radioGroupInjection) {
-    return props.value === radioGroupInjection.realValue.value;
+    return radioGroupInjection.realValue.value === props.value;
   }
 
-  if (!isUndefined(props.modelValue) || isModelValueChanged.value) {
-    return props.value === props.modelValue;
+  if (!isUndefined(props.modelValue)) {
+    return props.modelValue === props.value;
   }
 
   return _checked.value;
@@ -84,7 +54,7 @@ const onChange = () => {
 
   _checked.value = true;
 
-  const val = props.value;
+  const val = props.value ?? true;
   emits('update:modelValue', val);
   radioGroupInjection?.updateModelValue(val);
   nextTick(() => {
diff --git a/packages/opendesign/src/components/radio/index.ts b/packages/opendesign/src/components/radio/index.ts
index a54b9b4770765008411d3c427aa4f152a49f8536..98bae88519359ca49bd6a4b863817d9727ff6773 100644
--- a/packages/opendesign/src/components/radio/index.ts
+++ b/packages/opendesign/src/components/radio/index.ts
@@ -8,4 +8,6 @@ const ORadio = Object.assign(_ORadio, {
   },
 });
 
+export * from './types';
+
 export { ORadio };
diff --git a/packages/opendesign/src/components/radio/types.ts b/packages/opendesign/src/components/radio/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5538d6f733de63e28f3adc60d73e8f3555d2fa9
--- /dev/null
+++ b/packages/opendesign/src/components/radio/types.ts
@@ -0,0 +1,33 @@
+import { ExtractPropTypes } from 'vue';
+
+export const radioProps = {
+  /**
+   * 单选框value
+   */
+  value: {
+    type: [String, Number, Boolean],
+    required: true,
+  },
+  /**
+   * 单选框双向绑定值
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+  },
+  /**
+   * 非受控状态时，默认是否选中
+   */
+  defaultChecked: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type RadioPropsT = ExtractPropTypes<typeof radioProps>;
diff --git a/packages/opendesign/src/components/rate/ORate.vue b/packages/opendesign/src/components/rate/ORate.vue
index 5a14b00aeb061e165944ee7224bb2ab5c2ac4677..8bf5fd4ff2406ae54a352032574eabdc25ddb6c5 100644
--- a/packages/opendesign/src/components/rate/ORate.vue
+++ b/packages/opendesign/src/components/rate/ORate.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { defaultSize } from '../_shared/global';
 import { rateProps } from './types';
-
-import { IconStar } from '../_shared/icons';
+import { defaultSize } from '../_shared/global';
+import { IconStar } from '../icons';
 
 const props = defineProps(rateProps);
 
@@ -13,10 +12,11 @@ const emits = defineEmits<{
 }>();
 
 const realValue = ref(props.modelValue ?? props.defaultValue);
+
 watch(
   () => props.modelValue,
   (val) => {
-    realValue.value = val ?? 0;
+    realValue.value = val ?? props.defaultValue;
   }
 );
 
diff --git a/packages/opendesign/src/components/rate/index.ts b/packages/opendesign/src/components/rate/index.ts
index 04a152fa22524ae682a5bf4001d5196c584e4951..bc28bf6256f452d456b56a890af2d48d360cff09 100644
--- a/packages/opendesign/src/components/rate/index.ts
+++ b/packages/opendesign/src/components/rate/index.ts
@@ -2,12 +2,12 @@ import type { App } from 'vue';
 
 import _ORate from './ORate.vue';
 
-export * from './types';
-
 const ORate = Object.assign(_ORate, {
   install(app: App) {
     app.component(_ORate.name, _ORate);
   },
 });
 
+export * from './types';
+
 export { ORate };
diff --git a/packages/opendesign/src/components/switch/OSwitch.vue b/packages/opendesign/src/components/switch/OSwitch.vue
index 7cfa52ababb685111c361450d6c783a82facc30b..1216e73a6cbd796719d695c75b6f554c6525022b 100644
--- a/packages/opendesign/src/components/switch/OSwitch.vue
+++ b/packages/opendesign/src/components/switch/OSwitch.vue
@@ -1,83 +1,21 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+import { switchProps } from './types';
 import { defaultSize, defaultShape } from '../_shared/global';
-import type { SizeT, ShapeT } from '../_shared/global';
 import { IconLoading } from '../_shared/icons';
 import { isPromise, isBoolean, isUndefined } from '../_shared/is';
 
-interface SwitchPropT {
-  /**
-   * 双向绑定值
-   */
-  modelValue?: string | number | boolean;
-  /**
-   * 选中状态对应值
-   */
-  checkedValue?: string | number | boolean;
-  /**
-   * 未选中状态对应值
-   */
-  uncheckedValue?: string | number | boolean;
-  /**
-   * 非受控状态时，默认是否选中
-   */
-  defaultChecked?: boolean;
-  /**
-   * 开关尺寸
-   * 'large' | 'normal' | 'small'
-   */
-  size?: SizeT;
-  /**
-   * 开关形状
-   * 'normal' | 'round'
-   */
-  shape?: ShapeT;
-  /**
-   * 是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 是否加载中
-   */
-  loading?: boolean;
-  /**
-   *
-   * 状态改变前的钩子函数
-   */
-  beforeChange?: (val: boolean) => Promise<boolean> | boolean;
-}
-
-const props = withDefaults(defineProps<SwitchPropT>(), {
-  modelValue: undefined,
-  checkedValue: true,
-  uncheckedValue: false,
-  defaultChecked: false,
-  size: undefined,
-  shape: undefined,
-  disabled: false,
-  loading: false,
-  beforeChange: undefined,
-});
+const props = defineProps(switchProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string | number | boolean): void;
   (e: 'change', val: string | number | boolean): void;
 }>();
 
-// 监听modelValue改变
-const isModelValueChanged = ref(false);
-
-watch(
-  () => props.modelValue,
-  () => {
-    isModelValueChanged.value = true;
-  }
-);
-
 // 是否选中
 const _checked = ref(props.defaultChecked);
 const isChecked = computed(() => {
-  if (!isUndefined(props.modelValue) || isModelValueChanged.value) {
+  if (!isUndefined(props.modelValue)) {
     return props.checkedValue === props.modelValue;
   }
 
diff --git a/packages/opendesign/src/components/switch/index.ts b/packages/opendesign/src/components/switch/index.ts
index ba1b88676da9e992c5991865773692bdd9fbcbb3..158930781399c5da87147662288f62c6b945ef4a 100644
--- a/packages/opendesign/src/components/switch/index.ts
+++ b/packages/opendesign/src/components/switch/index.ts
@@ -8,4 +8,6 @@ const OSWitch = Object.assign(_OSWitch, {
   },
 });
 
+export * from './types';
+
 export { OSWitch };
diff --git a/packages/opendesign/src/components/switch/style/var.scss b/packages/opendesign/src/components/switch/style/var.scss
index 4f02d5a3c3c9f7f07e2e7b1ac8cd93618daa54b5..12ab231aa2bd502d8f28064b96a2309f3fb57fc4 100644
--- a/packages/opendesign/src/components/switch/style/var.scss
+++ b/packages/opendesign/src/components/switch/style/var.scss
@@ -4,7 +4,7 @@
   --switch-bg-checked: var(--o-color-primary1);
   --switch-bg-checked-disabled: var(--o-color-primary4);
 
-  --switch-handler-bg: var(--o-color-fill2);
+  --switch-handler-bg: rgb(var(--o-color-white));
 
   --switch-color: var(--o-color-info1-inverse);
 
diff --git a/packages/opendesign/src/components/switch/types.ts b/packages/opendesign/src/components/switch/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82af6009a054e26d55d15ae002712a1d571a7504
--- /dev/null
+++ b/packages/opendesign/src/components/switch/types.ts
@@ -0,0 +1,69 @@
+import type { SizeT, ShapeT } from '../_shared/global';
+import type { ExtractPropTypes, PropType } from 'vue';
+
+export const switchProps = {
+  /**
+   * 双向绑定值
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+  },
+  /**
+   * 非受控状态时，默认是否选中
+   */
+  defaultChecked: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 选中状态对应值
+   */
+  checkedValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  /**
+   * 未选中状态对应值
+   */
+  uncheckedValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
+  /**
+   * 开关尺寸
+   * 'large' | 'normal' | 'small'
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 开关形状
+   * 'normal' | 'round'
+   */
+  shape: {
+    type: String as PropType<ShapeT>,
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否加载中
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   *
+   * 状态改变前的钩子函数
+   */
+  beforeChange: {
+    type: Function as PropType<(val: boolean) => Promise<boolean> | boolean>,
+  },
+};
+
+export type SwitchPropsT = ExtractPropTypes<typeof switchProps>;