diff --git a/packages/opendesign/src/components/button/__demo__/BtnLoading.vue b/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
index 479056e92365f40a795be7b22a48a62c74fb7649..d90811ebeda155f6ec8d7aaa9840b445a68db65d 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
@@ -22,7 +22,7 @@ const showLoading = (key: 'loading1' | 'loading2' | 'loading3', val: boolean) =>
       <template #icon><IconAdd /></template>Outline Button
     </OButton>
     <OButton type="text" :loading="rlt.loading3" @click="showLoading('loading3', true)">Text Button</OButton>
-    <OButton type="link" :loading="rlt.loading3" @click="showLoading('loading3', true)">Link Button</OButton>
+    <OButton type="link" :loading="!rlt.loading3" @click="showLoading('loading3', true)">Link Button</OButton>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue
index 7a249cc0a5ff1e2a3fba97e896e1f3fa0745828e..dd13980a4640fba19d0127417ed50c921ed92c36 100644
--- a/packages/opendesign/src/components/popover/OPopover.vue
+++ b/packages/opendesign/src/components/popover/OPopover.vue
@@ -40,10 +40,16 @@ const props = defineProps({
     type: [String, Object] as PropType<string | HTMLElement>,
     default: document.body,
   },
+  /**
+   * 是否在隐藏时卸载
+   */
   unmountOnClose: {
     type: Boolean,
     default: true,
   },
+  /**
+   * 距离触发元素的偏移量
+   */
   offset: {
     type: Number,
     default: 8,
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index 285ee01c7cd3e4c2fb0b99d6ff634f9fe8fae1c9..d707d32e482f65bbea0220c1a74fc393933b7bc6 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -3,20 +3,53 @@ import { provide, ref } from 'vue';
 import { defaultSize, defaultShape } from '../_shared/global';
 import type { SizeT, ShapeT } from '../_shared/global';
 import { IconArrowTraingleDown } from '../icons';
-import { OPopup, PopupPositionT } from '../popup';
+import { OPopup, PopupPositionT, PopupTriggerT } from '../popup';
 import { selectOptionInjectKey } from './provide';
 import { SelectOptionT } from './types';
 
 interface SelectPropT {
+  /**
+   * 下拉框的值
+   * v-model
+   */
   modelValue: string | number;
+  /**
+   * 大小
+   */
   size?: SizeT;
+  /**
+   * 形状
+   */
   shape?: ShapeT;
+  /**
+   * 提示文本
+   */
   placeholder?: string;
+  /**
+   * 下拉选项触发方式
+   */
+  trigger?: PopupTriggerT;
+  /**
+   * 是否禁用
+   */
   disabled?: boolean;
-
+  /**
+   * 下拉选项位置
+   */
   optionPosition?: PopupPositionT;
+  /**
+   * 下拉选项宽度自适应规则
+   * 'auto':自动 | 'min-width':最小宽度与选择框一致 | 'width': 宽度与选择框一致
+   */
   optionWidthMode?: 'auto' | 'min-width' | 'width';
+  /**
+   * 下拉容器自定义类
+   */
   optionWrapClass?: string;
+  /**
+   * 是否在结束选择时，卸载下拉选项
+   * v-model
+   */
   unmountOnClose?: boolean;
   /**
    * 默认初始值对应的label显示，不传则使用modelValue
@@ -29,6 +62,7 @@ const props = withDefaults(defineProps<SelectPropT>(), {
   size: undefined,
   shape: undefined,
   placeholder: 'please select...',
+  trigger: 'click',
   optionPosition: 'bl',
   optionWidthMode: 'min-width',
   optionWrapClass: '',
@@ -84,7 +118,7 @@ provide(selectOptionInjectKey, {
       :unmount-on-close="props.unmountOnClose"
       :position="props.optionPosition"
       :target="selectRef"
-      trigger="click"
+      :trigger="props.trigger"
       :offset="4"
       :adjust-min-width="props.optionWidthMode === 'min-width'"
       :adjust-width="props.optionWidthMode === 'width'"
diff --git a/packages/opendesign/src/components/select/__demo__/IndexSelect.vue b/packages/opendesign/src/components/select/__demo__/IndexSelect.vue
index c9b842f0d166db282b8268473df479bc2e244f75..736151f7d54067994409454ffd004544cebbf4f6 100644
--- a/packages/opendesign/src/components/select/__demo__/IndexSelect.vue
+++ b/packages/opendesign/src/components/select/__demo__/IndexSelect.vue
@@ -2,13 +2,13 @@
 import '../style';
 import '../../option/style';
 
-import SelectSize from './SelectSize.vue';
+import SelectSizeShape from './SelectSizeShape.vue';
 import SelectDisabled from './SelectDisabled.vue';
 import SelectPopupposition from './SelectPopupposition.vue';
 </script>
 <template>
   <div class="page-demo">
-    <SelectSize />
+    <SelectSizeShape />
     <SelectDisabled />
     <SelectPopupposition />
   </div>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue b/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue
index 3ff67101d94745a56edd9244a68cc3ae12e56d43..ac3c4203e7475a40b788c74ce6674fa1cacba20a 100644
--- a/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue
+++ b/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue
@@ -15,6 +15,13 @@ const options = [
 <template>
   <h4>Disabled</h4>
   <section>
+    <OSelect v-model="selectVal2" disabled>
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <OOption :label="options[2].label" :value="options[2].value" disabled />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+
     <OSelect v-model="selectVal">
       <OOption :label="options[0].label" :value="options[0].value" />
       <OOption :label="options[1].label" :value="options[1].value" disabled />
@@ -26,13 +33,6 @@ const options = [
       <OOption :value="options[0].value" />
       <OOption :value="options[1].value" disabled />
     </OSelect>
-
-    <OSelect v-model="selectVal2" disabled>
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-      <OOption :label="options[2].label" :value="options[2].value" disabled />
-      <OOption :label="options[3].label" :value="options[3].value" />
-    </OSelect>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
index fea66fbc519c69715c117b96c5ce424ffb969ace..0fc7aaab5a83c04588b09285ab5b2a8f5f58ae73 100644
--- a/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
+++ b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
@@ -11,62 +11,101 @@ const options = [
 ];
 </script>
 <template>
-  <h4>popup position</h4>
+  <h4>Option Position</h4>
   <section>
-    <OSelect v-model="selectVal" option-position="tl">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
-    <OSelect v-model="selectVal2" option-position="top">
-      <OOption :value="options[0].value" />
-      <OOption :value="options[1].value" disabled />
-    </OSelect>
-    <OSelect v-model="selectVal2" option-position="tr">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
-    <OSelect v-model="selectVal2" option-position="bl">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
-    <OSelect v-model="selectVal2" option-position="bottom">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
-    <OSelect v-model="selectVal2" option-position="br">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
-
-    <OSelect v-model="selectVal2" option-position="lt">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
-    <OSelect v-model="selectVal2" option-position="left">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
-    <OSelect v-model="selectVal2" option-position="lb">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
-
-    <OSelect v-model="selectVal2" option-position="rt">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
-    <OSelect v-model="selectVal2" option-position="right">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
-    <OSelect v-model="selectVal2" option-position="rb">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-    </OSelect>
+    <div>
+      <span>TL:</span
+      ><OSelect v-model="selectVal" option-position="tl">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>TOP:</span
+      ><OSelect v-model="selectVal2" option-position="top" trigger="hover">
+        <OOption :value="options[0].value" />
+        <OOption :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>TR:</span
+      ><OSelect v-model="selectVal2" option-position="tr">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>BL:</span
+      ><OSelect v-model="selectVal2" option-position="bl">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>BOTTOM:</span
+      ><OSelect v-model="selectVal2" option-position="bottom">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>BR:</span
+      ><OSelect v-model="selectVal2" option-position="br">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>LT:</span
+      ><OSelect v-model="selectVal2" option-position="lt">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>LEFT:</span
+      ><OSelect v-model="selectVal2" option-position="left">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>LB:</span
+      ><OSelect v-model="selectVal2" option-position="lb">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>RT:</span
+      ><OSelect v-model="selectVal2" option-position="rt">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>RIGHT:</span
+      ><OSelect v-model="selectVal2" option-position="right">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
+    <div>
+      <span>RB:</span
+      ><OSelect v-model="selectVal2" option-position="rb">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      </OSelect>
+    </div>
   </section>
 </template>
 <style lang="scss" scoped>
-section > * {
-  margin: 40px;
+section {
+  span {
+    display: inline-block;
+    width: 100px;
+    text-align: right;
+    margin-right: 12px;
+  }
 }
 </style>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectSize.vue b/packages/opendesign/src/components/select/__demo__/SelectSize.vue
index 139ef9538c2c4461dc275a2cbac8d31fb99b337b..b07a073441a5ca0b22c5f7bef829353d9ecbbf02 100644
--- a/packages/opendesign/src/components/select/__demo__/SelectSize.vue
+++ b/packages/opendesign/src/components/select/__demo__/SelectSize.vue
@@ -21,7 +21,7 @@ const selectVal = ref(options[0].value);
       <OOption :label="options[3].label" :value="options[3].value" />
     </OSelect>
 
-    <OSelect v-model="selectVal2">
+    <OSelect v-model="selectVal2" placeholder="click to select...">
       <OOption :value="options[0].value" />
       <OOption :value="options[1].value" disabled />
     </OSelect>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectSizeShape.vue b/packages/opendesign/src/components/select/__demo__/SelectSizeShape.vue
new file mode 100644
index 0000000000000000000000000000000000000000..16ed27a7e77cc174dbfdc68296f996967346dd9c
--- /dev/null
+++ b/packages/opendesign/src/components/select/__demo__/SelectSizeShape.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSelect } from '../index';
+import { OOption } from '../../option';
+const selectVal2 = ref('');
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+const selectVal = ref(options[0].value);
+</script>
+<template>
+  <h4>Size</h4>
+  <section>
+    <OSelect v-model="selectVal" size="large" :default-label="options[0].label">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" placeholder="click to select...">
+      <OOption :value="options[0].value" />
+      <OOption :value="options[1].value" disabled />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" size="small">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+  </section>
+  <h4>Round</h4>
+  <section>
+    <OSelect v-model="selectVal" size="large" :default-label="options[0].label" shape="round">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" shape="round">
+      <OOption :value="options[0].value" />
+      <OOption :value="options[1].value" disabled />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" size="small" shape="round">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss
index 6b4f9d060df349787190880e61117687e99a01dc..7e252450e935c5b08f7d47d3ea6e961a76a3c9f0 100644
--- a/packages/opendesign/src/components/select/style/index.scss
+++ b/packages/opendesign/src/components/select/style/index.scss
@@ -1,8 +1,32 @@
 @import './var.scss';
 @import '../../popup/style/index.scss';
 
+.o-select {
+  border: 1px solid var(--select-border);
+  border-radius: 4px;
+  padding: 0 12px;
+  cursor: pointer;
+  color: var(--select-color);
+  display: inline-flex;
+  height: var(--select-height-m);
+
+  &:hover {
+    border-color: var(--select-border_hover);
+    background-color: var(--select-bg_hover);
+  }
+  &.is-selecting {
+    border-color: var(--select-border_hover);
+    background-color: var(--select-bg_hover);
+  }
+  &.is-disabled {
+    cursor: not-allowed;
+    border-color: var(--select-border_disabled);
+    background-color: var(--select-bg_disabled);
+    color: var(--select-color_disabled);
+  }
+}
 .o-select-size-small {
-  padding: 0 4px 0 8px;
+  padding: 0 6px 0 12px;
   height: var(--select-height-s);
   border-radius: var(--select-radius-s);
 }
@@ -28,32 +52,14 @@
   background-color: transparent;
   display: inline-flex;
 }
-.o-select {
-  border: 1px solid var(--select-border);
-  border-radius: 4px;
-  padding: 0 12px;
-  cursor: pointer;
-  color: var(--select-color);
-  display: inline-flex;
-  height: var(--select-height-m);
-
-  &:hover {
-    border-color: var(--select-border_hover);
-    background-color: var(--select-bg_hover);
-  }
-  &.is-disabled {
-    cursor: not-allowed;
-    border-color: var(--select-border_disabled);
-    background-color: var(--select-bg_disabled);
-    color: var(--select-color_disabled);
-  }
-}
 .o-select-suffix {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
 }
 .o-select-icon-arrow {
+  font-size: 24px;
+  color: var(--select-icon-color);
   display: inline-flex;
   align-items: center;
   transition: transform var(--o-transition-duration-2);
@@ -64,6 +70,9 @@
     transform: rotateX(180deg);
   }
 }
+.o-select-shape-round {
+  border-radius: 100px;
+}
 
 .o-select-options {
   background-color: var(--select-options-bg);
diff --git a/packages/opendesign/src/components/select/style/var.scss b/packages/opendesign/src/components/select/style/var.scss
index 525a0aaf6d97358155a867797540304b32b9f999..3788e559e340edeb8d8c7a98a1c158801905a709 100644
--- a/packages/opendesign/src/components/select/style/var.scss
+++ b/packages/opendesign/src/components/select/style/var.scss
@@ -21,6 +21,8 @@
 
   --select-color: var(--o-color-text2);
   --select-color_disabled: var(--o-color-text4);
+
+  --select-icon-color: var(--o-color-text3);
 }
 
 .o-select-options {
diff --git a/packages/opendesign/src/components/switch/OSwitch.vue b/packages/opendesign/src/components/switch/OSwitch.vue
index 4fe72f99d49bddf8ef9c2aa8f4bf046bc83e35fe..5270e69be51bebe94a471d5df775cf9da7ad0c1c 100644
--- a/packages/opendesign/src/components/switch/OSwitch.vue
+++ b/packages/opendesign/src/components/switch/OSwitch.vue
@@ -5,6 +5,9 @@ import { defaultSize, defaultShape } from '../_shared/global';
 import type { SizeT, ShapeT } from '../_shared/global';
 import { IconLoading } from '../_shared/icons';
 
+// TODO:
+// 1. props 参数注释需要补全
+// 2. 增加chang事件的示例
 interface SwitchPropT {
   /**
    * 开关尺寸: 'large' | 'normal' | 'small'
@@ -33,7 +36,7 @@ const emits = defineEmits<{
   (e: 'update:modelValue', val: boolean): void;
   (e: 'change', val: boolean): void;
 }>();
-
+// TODO：这个函数命名太宽泛了，建议明确下如：isExpectBeforeChangeType，或者如果只在一个地方使用，就不用抽取函数了
 const isExpectType = (res: unknown) => {
   return isPromise(res) || isBoolean(res);
 };
@@ -84,6 +87,7 @@ const onClick = () => {
   >
     <div class="o-switch-wrapper">
       <div class="o-switch-handler">
+        <!-- TODO：尽量不要使用语义不对应的标签，无语义的使用span就好了 -->
         <i v-if="props.loading" class="o-switch-icon_loading">
           <IconLoading />
         </i>
diff --git a/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue b/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
index 4123a14580982d461dc1c55f04465f8a31f37e25..6bfadeb39c437e14abb8d00699928eb39bcfc3ea 100644
--- a/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
+++ b/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
@@ -1,23 +1,16 @@
 <script setup lang="ts">
 import '../style';
 
-import SwitchShape from './SwitchShape.vue';
-import SwitchSize from './SwitchSize.vue';
+import SwitchSizeShape from './SwitchSizeShape.vue';
 import SwitchDisabledAndLoading from './SwitchDisabledAndLoading.vue';
 import SwitchBeforeChange from './SwitchBeforeChange.vue';
 import SwitchSlots from './SwitchSlots.vue';
 </script>
 <template>
   <div class="page-demo">
-    <h4>Shape</h4>
-    <SwitchShape />
-    <h4>Size</h4>
-    <SwitchSize />
-    <h4>Disabled & Loading</h4>
+    <SwitchSizeShape />
     <SwitchDisabledAndLoading />
-    <h4>阻止切换</h4>
     <SwitchBeforeChange />
-    <h4>插槽</h4>
     <SwitchSlots />
   </div>
 </template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue b/packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue
index d7b2d4da2e9727ae2208ccc3a34d5df9336343fa..68ed61f266fc49671579880232998dee2d689dad 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue
@@ -4,33 +4,29 @@ import { OSWitch } from '../index';
 
 const switchVal1 = ref(false);
 const loading1 = ref(false);
+let cnt = 0;
 const beforeChange1 = (): Promise<boolean> => {
   loading1.value = true;
-
+  cnt += 1;
   return new Promise((resolve) => {
     setTimeout(() => {
       loading1.value = false;
-      return resolve(true);
+      return resolve(cnt % 2 === 0);
     }, 1000);
   });
 };
 
 const switchVal2 = ref(true);
-const loading2 = ref(false);
-const beforeChange2 = (): Promise<boolean> => {
-  loading2.value = true;
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      loading2.value = false;
-      return reject(new Error('Error'));
-    }, 1000);
-  });
+const beforeChange2 = () => {
+  cnt += 1;
+  return cnt % 2 === 0;
 };
 </script>
 
 <template>
+  <h4>阻止切换</h4>
   <section>
-    <OSWitch v-model="switchVal1" shape="normal" :loading="loading1" :before-change="beforeChange1" />
-    <OSWitch v-model="switchVal2" shape="round" :loading="loading2" :before-change="beforeChange2" />
+    <OSWitch v-model="switchVal1" :loading="loading1" :before-change="beforeChange1" />
+    <OSWitch v-model="switchVal2" shape="round" :before-change="beforeChange2" />
   </section>
 </template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue b/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue
index 29967256f1076e21c96894d20187afa27a2bcc51..84454288fa8f56436dbe565d2de32c2d4558e7ea 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue
@@ -6,8 +6,9 @@ const switchVal2 = ref(true);
 </script>
 
 <template>
+  <h4>Disabled & Loading</h4>
   <section>
-    <OSWitch v-model="switchVal1" shape="normal" loading />
+    <OSWitch v-model="switchVal1" loading />
     <OSWitch v-model="switchVal2" shape="round" loading />
   </section>
 </template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchShape.vue b/packages/opendesign/src/components/switch/__demo__/SwitchShape.vue
index ee40f473b27fc54078279a889ffa8acbd20513c3..ea2d8dabf644cb916c2426a002b40d2c80ccf86b 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchShape.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchShape.vue
@@ -7,7 +7,7 @@ const switchVal2 = ref(true);
 
 <template>
   <section>
-    <OSWitch v-model="switchVal1" shape="normal" />
+    <OSWitch v-model="switchVal1" />
     <OSWitch v-model="switchVal2" shape="round" />
   </section>
 </template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchSize.vue b/packages/opendesign/src/components/switch/__demo__/SwitchSizeShape.vue
similarity index 65%
rename from packages/opendesign/src/components/switch/__demo__/SwitchSize.vue
rename to packages/opendesign/src/components/switch/__demo__/SwitchSizeShape.vue
index 788ee383f171cee539320468c14b3edbb9412c8f..4663c2bb4a6c8e2896ebedd53ce6022d573ba740 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchSize.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchSizeShape.vue
@@ -6,10 +6,14 @@ const switchVal2 = ref(true);
 </script>
 
 <template>
+  <h4>Size</h4>
+  <section>
+    <OSWitch v-model="switchVal1" size="small" />
+    <OSWitch v-model="switchVal1" size="normal" />
+    <OSWitch v-model="switchVal1" size="large" />
+  </section>
+  <h4>Round</h4>
   <section>
-    <OSWitch v-model="switchVal1" shape="normal" size="small" />
-    <OSWitch v-model="switchVal1" shape="normal" size="normal" />
-    <OSWitch v-model="switchVal1" shape="normal" size="large" />
     <OSWitch v-model="switchVal2" shape="round" size="small" />
     <OSWitch v-model="switchVal2" shape="round" size="normal" />
     <OSWitch v-model="switchVal2" shape="round" size="large" />
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue b/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
index 133e81b00c52dd86c7f2f6fee5d34baf8409b7f3..f96d607cb2062301811aff63f2139640ae0950e7 100644
--- a/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
@@ -8,13 +8,14 @@ const switchVal2 = ref(true);
 </script>
 
 <template>
+  <h4>插槽</h4>
   <section>
-    <OSWitch v-model="switchVal1" shape="normal">
+    <OSWitch v-model="switchVal1">
       <template #on>开</template>
       <template #off>关</template>
     </OSWitch>
 
-    <OSWitch v-model="switchVal1" shape="normal">
+    <OSWitch v-model="switchVal1">
       <template #on><IconDone /></template>
       <template #off><IconX /></template>
     </OSWitch>
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index 507f2c21163c77c2cb9f7c7a0cf6c5e8fb217a9d..df3d321c86f46a389a7f51a6545159d684016ae7 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -7,7 +7,7 @@
   color: var(--switch-color);
   transition: all 0.3s;
   cursor: pointer;
-
+  // TODO 以o-xxx的类 不需要嵌套，尽量减少嵌套
   .o-switch-wrapper {
     width: 100%;
     height: 100%;
@@ -116,6 +116,7 @@
 
   .o-switch-wrapper {
     font-size: var(--switch-text-size-l);
+    // TODO
     line-height: --switch-text-height-l;
     .o-switch-handler {
       width: 20px;