diff --git a/packages/docs/switch.md b/packages/docs/switch.md
index ee3d32f644a36cfa485fd2fd9572f78d0116e254..258b3827c3c0792c9ad667064049283b250f7265 100644
--- a/packages/docs/switch.md
+++ b/packages/docs/switch.md
@@ -2,14 +2,14 @@
 
 # props
 
-| name         | type     | 默认值        | 说明                                                          |
-| :----------- | :------- | :------------ | ------------------------------------------------------------- |
-| model:value  | Boolean  | false         | 开关状态                                                      |
-| type         | ShapeT   | ShapeT.NORMAL | 形状                                                          |
-| size         | SizeT    | SizeT.NORMAL  | 形状                                                          |
-| disabled     | Boolean  | false         | 形状                                                          |
-| loading      | Boolean  | false         | 加载状态                                                      |
-| beforeChange | Function | ()=>true      | return Promise. resolve(true)继续切换，resolve(false)阻止切换 |
+| name         | type     | 默认值        | 说明                                                         |
+| :----------- | :------- | :------------ | ------------------------------------------------------------ |
+| model:value  | Boolean  | false         | 开关状态                                                     |
+| shape        | ShapeT   | ShapeT.NORMAL | 形状                                                         |
+| size         | SizeT    | SizeT.NORMAL  | 尺寸                                                         |
+| disabled     | Boolean  | false         | 是否禁用                                                     |
+| loading      | Boolean  | false         | 加载状态                                                     |
+| beforeChange |(val: boolean): Promise\<boolean\>\|boolean| -     | return Promise.resolve(true)继续切换，resolve(false)阻止切换 |
 
 ```
 enum SizeT {
@@ -36,5 +36,5 @@ enum ShapeT {
 
 | name | 说明     |
 | :--- | :------- |
-| on   | 开关状态 |
-| off  | 关闭的   |
+| on   | 开启状态 |
+| off  | 关闭状态 |
diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 01cc3986299743569ef7acb58d4585048329c35e..dc0c51bfc0893c1e6e46cc45f35671baf7a93e21 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -28,5 +28,8 @@
     "typescript": "^4.6.4",
     "vue": "^3.2.41",
     "vue-tsc": "^1.0.13"
+  },
+  "dependencies": {
+    "@vue/shared": "^3.2.45"
   }
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index db80087527218bb0b153032836678a8288ed38d1..fa18239882fe2850987cc17773c5a834865c448c 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -1,3 +1,5 @@
 export * from './_shared/global';
 
 export * from './button';
+
+export * from './switch';
diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fd25de4c3a8058bc80dad58aaf17d52debad9181
--- /dev/null
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -0,0 +1,11 @@
+$ani-prefix: 'o-ani';
+
+@keyframes #{$ani-prefix}-rotating {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/opendesign/src/components/style/index.ts b/packages/opendesign/src/components/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..84b269b263a9eed41b13555521a780183e8b1149 100644
--- a/packages/opendesign/src/components/style/index.ts
+++ b/packages/opendesign/src/components/style/index.ts
@@ -1 +1,2 @@
+import './animation.scss';
 import './index.scss';
diff --git a/packages/opendesign/src/components/switch/OSwitch.vue b/packages/opendesign/src/components/switch/OSwitch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3ef1d678b7e2945defcd1436dcb489afcc7c6eba
--- /dev/null
+++ b/packages/opendesign/src/components/switch/OSwitch.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { isPromise } from '@vue/shared';
+
+import { defaultSize, defaultShape } from '../_shared/global';
+import { SwitchSizeT, SwitchShapeT } from './types';
+import { IconLoading } from '../icons';
+
+interface PropT {
+  size?: SwitchSizeT;
+  shape?: SwitchShapeT;
+  modelValue?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  beforeChange?: (val: boolean) => Promise<boolean> | boolean;
+}
+
+const props = withDefaults(defineProps<PropT>(), {
+  size: defaultSize.value,
+  shape: defaultShape.value,
+  modelValue: false,
+  disabled: false,
+  loading: false,
+  beforeChange: undefined,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean, ev: MouseEvent): void;
+  (e: 'change', val: boolean, ev: MouseEvent): void;
+}>();
+
+const isExpectType = (res: unknown) => {
+  return isPromise(res) || typeof res === 'boolean';
+};
+
+const isChangeable = () => {
+  if (props.loading || props.disabled) {
+    return Promise.resolve(false);
+  }
+
+  if (!props.beforeChange) {
+    return Promise.resolve(true);
+  }
+
+  const res = props.beforeChange(!props.modelValue);
+  if (!isExpectType(res)) {
+    return Promise.reject('beforeChange should return  type `Promise<boolean>` or `boolean`');
+  }
+  return typeof res === 'boolean' ? Promise.resolve(res) : res;
+};
+
+const onClick = (ev: MouseEvent) => {
+  isChangeable()
+    .then((flag) => {
+      if (flag) {
+        const val = !props.modelValue;
+        emit('update:modelValue', val, ev);
+        emit('change', val, ev);
+      }
+    })
+    .catch((err) => {
+      console.warn(`${err}`);
+    });
+};
+</script>
+
+<template>
+  <div
+    class="o-switch"
+    :class="[
+      `o-switch-size-${props.size}`,
+      `o-switch-shape-${props.shape}`,
+      { 'is-checked': props.modelValue },
+      { 'is-disabled': props.disabled },
+      { 'is-loading': props.loading },
+    ]"
+    @click="onClick"
+  >
+    <div class="o-switch-wrapper">
+      <div class="o-switch-handler">
+        <i v-if="props.loading" class="o-switch-icon_loading">
+          <IconLoading />
+        </i>
+      </div>
+      <div v-if="$slots.on || $slots.off" class="o-switch-content">
+        <slot v-if="props.modelValue" name="on"></slot>
+        <slot v-else name="off"></slot>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue b/packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a549c3f9887dc6c6d942b8f953aa2cfd15907dc7
--- /dev/null
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSWitch, SwitchShapeT } from '../index';
+
+const switchVal1 = ref(false);
+const loading1 = ref(false);
+const beforeChange1 = (): Promise<boolean> => {
+  loading1.value = true;
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      loading1.value = false;
+      return resolve(true);
+    }, 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);
+  });
+};
+</script>
+
+<template>
+  <section>
+    <OSWitch
+      v-model="switchVal1"
+      :shape="SwitchShapeT.NORMAL"
+      :loading="loading1"
+      :before-change="beforeChange1"
+    />
+    <OSWitch
+      v-model="switchVal2"
+      :shape="SwitchShapeT.ROUND"
+      :loading="loading2"
+      :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
new file mode 100644
index 0000000000000000000000000000000000000000..04f1651c45c736a2d52b08fc24f45785d6ef45d0
--- /dev/null
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSWitch, SwitchShapeT } from '../index';
+const switchVal1 = ref(false);
+const switchVal2 = ref(true);
+</script>
+
+<template>
+  <section>
+    <OSWitch v-model="switchVal1" :shape="SwitchShapeT.NORMAL" loading />
+    <OSWitch v-model="switchVal2" :shape="SwitchShapeT.ROUND" loading />
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchShape.vue b/packages/opendesign/src/components/switch/__demo__/SwitchShape.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d0aa90f9ebee01c18a29c9ed98f2676a3111b823
--- /dev/null
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchShape.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSWitch, SwitchShapeT } from '../index';
+const switchVal1 = ref(false);
+const switchVal2 = ref(true);
+</script>
+
+<template>
+  <section>
+    <OSWitch v-model="switchVal1" :shape="SwitchShapeT.NORMAL" />
+    <OSWitch v-model="switchVal2" :shape="SwitchShapeT.ROUND" />
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchSize.vue b/packages/opendesign/src/components/switch/__demo__/SwitchSize.vue
new file mode 100644
index 0000000000000000000000000000000000000000..83f4ac2dd054ac08739b248304baf3b633beddb0
--- /dev/null
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchSize.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSWitch, SwitchShapeT, SwitchSizeT } from '../index';
+const switchVal1 = ref(false);
+const switchVal2 = ref(true);
+</script>
+
+<template>
+  <section>
+    <OSWitch v-model="switchVal1" :shape="SwitchShapeT.NORMAL" :size="SwitchSizeT.SMALL" />
+    <OSWitch v-model="switchVal1" :shape="SwitchShapeT.NORMAL" :size="SwitchSizeT.NORMAL" />
+    <OSWitch v-model="switchVal1" :shape="SwitchShapeT.NORMAL" :size="SwitchSizeT.LARGE" />
+    <OSWitch v-model="switchVal2" :shape="SwitchShapeT.ROUND" :size="SwitchSizeT.SMALL" />
+    <OSWitch v-model="switchVal2" :shape="SwitchShapeT.ROUND" :size="SwitchSizeT.NORMAL" />
+    <OSWitch v-model="switchVal2" :shape="SwitchShapeT.ROUND" :size="SwitchSizeT.LARGE" />
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue b/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
new file mode 100644
index 0000000000000000000000000000000000000000..28a72ccc3305ab23a8c6059ac36f82b570e97dae
--- /dev/null
+++ b/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSWitch, SwitchShapeT } from '../index';
+import { IconDone, IconX } from '../../icons';
+
+const switchVal1 = ref(false);
+const switchVal2 = ref(true);
+</script>
+
+<template>
+  <section>
+    <OSWitch v-model="switchVal1" :shape="SwitchShapeT.NORMAL">
+      <template #on>开</template>
+      <template #off>关</template>
+    </OSWitch>
+
+    <OSWitch v-model="switchVal1" :shape="SwitchShapeT.NORMAL">
+      <template #on><IconDone /></template>
+      <template #off><IconX /></template>
+    </OSWitch>
+
+    <OSWitch v-model="switchVal2" :shape="SwitchShapeT.ROUND">
+      <template #on>开</template>
+      <template #off>关</template>
+    </OSWitch>
+
+    <OSWitch v-model="switchVal2" :shape="SwitchShapeT.ROUND">
+      <template #on><IconDone /></template>
+      <template #off><IconX /></template>
+    </OSWitch>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/switch/index.ts b/packages/opendesign/src/components/switch/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1210b8a014c63a393980bab7b803bf73e9e350d5
--- /dev/null
+++ b/packages/opendesign/src/components/switch/index.ts
@@ -0,0 +1,12 @@
+import _OSWitch from './OSwitch.vue';
+import type { App } from 'vue';
+
+export * from './types';
+
+const OSWitch = Object.assign(_OSWitch, {
+  install(app: App) {
+    app.component(_OSWitch.name, _OSWitch);
+  },
+});
+
+export { OSWitch };
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6408f4b7a4076659c02a131732c0eea9cb93a9e1
--- /dev/null
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -0,0 +1,204 @@
+@import './var.scss';
+
+.o-switch {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--switch-bg);
+  color: var(--switch-color);
+  transition: all 0.3s;
+  cursor: pointer;
+
+  .o-switch-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .o-switch-handler {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: var(--switch-handler-bg);
+      transition: all 0.3s;
+
+      i {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--switch-bg);
+        animation: o-ani-rotating 2s linear infinite;
+      }
+    }
+
+    .o-switch-content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &.is-checked {
+    background-color: var(--switch-bg-checked);
+  }
+
+  &.is-disabled,
+  &.is-loading {
+    cursor: not-allowed;
+    background-color: var(--switch-bg_disabled);
+
+    &.is-checked {
+      background-color: var(--switch-bg-checked_disabled);
+      .o-switch-wrapper {
+        .o-switch-handler {
+          i {
+            color: var(--switch-bg-checked_disabled);
+          }
+        }
+      }
+    }
+  }
+}
+
+.o-switch-size-normal {
+  min-width: 40px;
+  height: 20px;
+  border-radius: 2px;
+
+  .o-switch-wrapper {
+    font-size: var(--switch-text-size-m);
+    line-height: var(--switch-text-height-m);
+    .o-switch-handler {
+      width: 16px;
+      height: 16px;
+      border-radius: 2px;
+      left: 2px;
+
+      i {
+        font-size: var(--switch-text-size-m);
+      }
+    }
+
+    .o-switch-content {
+      padding-left: 20px;
+      padding-right: 4px;
+    }
+  }
+
+  &.is-checked {
+    .o-switch-wrapper {
+      .o-switch-handler {
+        left: calc(100% - 18px);
+      }
+      .o-switch-content {
+        padding-left: 4px;
+        padding-right: 20px;
+      }
+    }
+  }
+
+  &.o-switch-shape-round {
+    border-radius: 10px;
+    .o-switch-wrapper {
+      .o-switch-handler {
+        border-radius: 50%;
+      }
+    }
+  }
+}
+.o-switch-size-large {
+  min-width: 60px;
+  height: 28px;
+  border-radius: 2px;
+
+  .o-switch-wrapper {
+    font-size: var(--switch-text-size-l);
+    line-height: --switch-text-height-l;
+    .o-switch-handler {
+      width: 20px;
+      height: 20px;
+      border-radius: 2px;
+      left: 4px;
+
+      i {
+        font-size: var(--switch-text-size-l);
+      }
+    }
+
+    .o-switch-content {
+      padding-left: 28px;
+      padding-right: 8px;
+    }
+  }
+
+  &.is-checked {
+    .o-switch-wrapper {
+      .o-switch-handler {
+        left: calc(100% - 24px);
+      }
+
+      .o-switch-content {
+        padding-left: 8px;
+        padding-right: 28px;
+      }
+    }
+  }
+
+  &.o-switch-shape-round {
+    border-radius: 14px;
+    .o-switch-wrapper {
+      .o-switch-handler {
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+.o-switch-size-small {
+  min-width: 30px;
+  height: 16px;
+  border-radius: 2px;
+
+  .o-switch-wrapper {
+    font-size: var(--switch-text-size-s);
+    line-height: var(--switch-text-height-s);
+    .o-switch-handler {
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+      left: 2px;
+
+      i {
+        font-size: var(--switch-text-size-s);
+      }
+    }
+
+    .o-switch-content {
+      padding-left: 15px;
+      padding-right: 2px;
+    }
+  }
+
+  &.is-checked {
+    .o-switch-wrapper {
+      .o-switch-handler {
+        left: calc(100% - 14px);
+      }
+      .o-switch-content {
+        padding-left: 2px;
+        padding-right: 15px;
+      }
+    }
+  }
+
+  &.o-switch-shape-round {
+    border-radius: 8px;
+    .o-switch-wrapper {
+      .o-switch-handler {
+        border-radius: 50%;
+      }
+    }
+  }
+}
diff --git a/packages/opendesign/src/components/switch/style/index.ts b/packages/opendesign/src/components/switch/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67aac616fc2524b146b7b078fd3b67c1bd3b4a6e
--- /dev/null
+++ b/packages/opendesign/src/components/switch/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/switch/style/var.scss b/packages/opendesign/src/components/switch/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2d97423c86436d2449ae1241035686ba96aaf534
--- /dev/null
+++ b/packages/opendesign/src/components/switch/style/var.scss
@@ -0,0 +1,16 @@
+.o-switch {
+  --switch-bg: var(--o-color-info1);
+  --switch-bg_disabled: var(--o-color-info4);
+  --switch-bg-checked: var(--o-color-primary1);
+  --switch-bg-checked_disabled: var(--o-color-primary4);
+  --switch-handler-bg: var(--o-color-bg2);
+  --switch-color: var(--o-color-text1_inverse);
+
+  --switch-text-size-l: var(--o-font_size-h4);
+  --switch-text-size-m: var(--o-font_size-tip1);
+  --switch-text-size-s: var(--o-font_size-tip2);
+
+  --switch-text-height-l: var(--o-line_height-h4);
+  --switch-text-height-m: var(--o-line_height-tip1);
+  --switch-text-height-s: var(--o-line_height-tip2);
+}
diff --git a/packages/opendesign/src/components/switch/types.ts b/packages/opendesign/src/components/switch/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce22157d0d86a689799b15b7d3ec8fe703c9593a
--- /dev/null
+++ b/packages/opendesign/src/components/switch/types.ts
@@ -0,0 +1,5 @@
+import { SizeT as SwitchSizeT, ShapeT as SwitchShapeT } from '../_shared/global';
+
+export { SwitchSizeT, SwitchShapeT };
+
+
diff --git a/packages/opendesign/src/icons/svgs/stroke/loading.svg b/packages/opendesign/src/icons/svgs/stroke/loading.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5cff7c7401c17cff7a2b604c0d5c29cafbc9dfca
--- /dev/null
+++ b/packages/opendesign/src/icons/svgs/stroke/loading.svg
@@ -0,0 +1,12 @@
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>loading</title>
+<path fill="currentColor" d="M15.673 0c0.812 0 1.469 0.658 1.469 1.469v6.857c0 0.812-0.658 1.469-1.469 1.469s-1.469-0.658-1.469-1.469v-6.857c0-0.812 0.658-1.469 1.469-1.469z"></path>
+<path fill="currentColor" opacity="0.6" d="M15.673 21.551c0.812 0 1.469 0.658 1.469 1.469v6.857c0 0.812-0.658 1.469-1.469 1.469s-1.469-0.658-1.469-1.469v-6.857c0-0.812 0.658-1.469 1.469-1.469z"></path>
+<path fill="currentColor" d="M0 15.673c0-0.812 0.658-1.469 1.469-1.469h6.857c0.812 0 1.469 0.658 1.469 1.469s-0.658 1.469-1.469 1.469h-6.857c-0.812 0-1.469-0.658-1.469-1.469z"></path>
+<path fill="currentColor" opacity="0.3" d="M21.551 15.673c0-0.812 0.658-1.469 1.469-1.469h6.857c0.812 0 1.469 0.658 1.469 1.469s-0.658 1.469-1.469 1.469h-6.857c-0.812 0-1.469-0.658-1.469-1.469z"></path>
+<path fill="currentColor" opacity="0.2" d="M26.756 4.591c0.574 0.574 0.574 1.504 0 2.078l-4.849 4.849c-0.574 0.574-1.504 0.574-2.078 0s-0.574-1.504 0-2.078l4.849-4.849c0.574-0.574 1.504-0.574 2.078 0z"></path>
+<path fill="currentColor" opacity="0.8" d="M11.517 19.83c0.574 0.574 0.574 1.504 0 2.078l-4.849 4.849c-0.574 0.574-1.504 0.574-2.078 0s-0.574-1.504 0-2.078l4.849-4.849c0.574-0.574 1.504-0.574 2.078 0z"></path>
+<path fill="currentColor" d="M4.591 4.591c0.574-0.574 1.504-0.574 2.078 0l4.849 4.849c0.574 0.574 0.574 1.504 0 2.078s-1.504 0.574-2.078 0l-4.849-4.849c-0.574-0.574-0.574-1.504 0-2.078z"></path>
+<path fill="currentColor" opacity="0.4" d="M19.83 19.83c0.574-0.574 1.504-0.574 2.078 0l4.849 4.849c0.574 0.574 0.574 1.504 0 2.078s-1.504 0.574-2.078 0l-4.849-4.849c-0.574-0.574-0.574-1.504 0-2.078z"></path>
+</svg>
diff --git a/packages/portal/src/pages/TheSwitch.vue b/packages/portal/src/pages/TheSwitch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5db6a02f7b7f34d37f162e6bcb5d5372d991ab78
--- /dev/null
+++ b/packages/portal/src/pages/TheSwitch.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import '@opensig/opendesign/es/switch/style';
+
+import SwitchShape from '@demo/switch/__demo__/SwitchShape.vue';
+import SwitchSize from '@demo/switch/__demo__/SwitchSize.vue';
+import SwitchDisabledAndLoading from '@demo/switch/__demo__/SwitchDisabledAndLoading.vue';
+import SwitchBeforeChange from '@demo/switch/__demo__/SwitchBeforeChange.vue';
+import SwitchSlots from '@demo/switch/__demo__/SwitchSlots.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <h4>Shape</h4>
+    <SwitchShape />
+    <h4>Size</h4>
+    <SwitchSize />
+    <h4>Disabled & Loading</h4>
+    <SwitchDisabledAndLoading />
+    <h4>阻止切换</h4>
+    <SwitchBeforeChange />
+    <h4>插槽</h4>
+    <SwitchSlots />
+  </div>
+</template>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 311585943a1159e7a64b054c824cbf35677078c2..e5911eed885f48ec1bf308543212ddef239cc0b3 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -1,15 +1,25 @@
-import {createRouter, createWebHashHistory} from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import TheHome from './pages/TheHome.vue';
 
 export const routes = [
   {
-    'path': '/', name: 'Home', label: '首页',
+    path: '/',
+    name: 'Home',
+    label: '首页',
     component: TheHome,
   },
   {
-    'path': '/button', name: 'Button', label: '按钮',
+    path: '/button',
+    name: 'Button',
+    label: '按钮',
     component: () => import('./pages/TheButton.vue'),
   },
+  {
+    path: '/switch',
+    name: 'Switch',
+    label: '开关',
+    component: () => import('./pages/TheSwitch.vue'),
+  },
 ];
 
 export const router = createRouter({
@@ -26,4 +36,3 @@ export const router = createRouter({
     }
   },
 });
-
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca2bc389499cf2c13ca25a9b906f9f22f365cb22..549880912614dc7e6847792fd4f33ef512480a72 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,9 +21,12 @@ importers:
   packages/opendesign:
     specifiers:
       '@opensig/opensig-scripts': workspace:^0.0.1
+      '@vue/shared': ^3.2.45
       typescript: ^4.6.4
       vue: ^3.2.41
       vue-tsc: ^1.0.13
+    dependencies:
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
     devDependencies:
       '@opensig/opensig-scripts': link:../scripts
       typescript: 4.9.3
@@ -545,7 +548,7 @@ packages:
       '@vue/compiler-dom': 3.2.45
       '@vue/compiler-sfc': 3.2.45
       '@vue/reactivity': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
       minimatch: 5.1.1
       vue-template-compiler: 2.7.14
     dev: true
@@ -561,7 +564,7 @@ packages:
     resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==}
     dependencies:
       '@babel/parser': 7.20.5
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
       estree-walker: 2.0.2
       source-map: 0.6.1
 
@@ -569,7 +572,7 @@ packages:
     resolution: {integrity: sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==}
     dependencies:
       '@vue/compiler-core': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
 
   /@vue/compiler-sfc/3.2.45:
     resolution: {integrity: sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==}
@@ -579,7 +582,7 @@ packages:
       '@vue/compiler-dom': 3.2.45
       '@vue/compiler-ssr': 3.2.45
       '@vue/reactivity-transform': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
       estree-walker: 2.0.2
       magic-string: 0.25.9
       postcss: 8.4.19
@@ -589,7 +592,7 @@ packages:
     resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==}
     dependencies:
       '@vue/compiler-dom': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
 
   /@vue/devtools-api/6.4.5:
     resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
@@ -600,26 +603,26 @@ packages:
     dependencies:
       '@babel/parser': 7.20.5
       '@vue/compiler-core': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
       estree-walker: 2.0.2
       magic-string: 0.25.9
 
   /@vue/reactivity/3.2.45:
     resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
     dependencies:
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
 
   /@vue/runtime-core/3.2.45:
     resolution: {integrity: sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==}
     dependencies:
       '@vue/reactivity': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
 
   /@vue/runtime-dom/3.2.45:
     resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==}
     dependencies:
       '@vue/runtime-core': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
       csstype: 2.6.21
 
   /@vue/server-renderer/3.2.45_vue@3.2.45:
@@ -628,12 +631,9 @@ packages:
       vue: 3.2.45
     dependencies:
       '@vue/compiler-ssr': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
       vue: 3.2.45
 
-  /@vue/shared/3.2.45:
-    resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
-
   /acorn-jsx/5.3.2_acorn@8.8.1:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -2184,7 +2184,7 @@ packages:
       '@vue/compiler-sfc': 3.2.45
       '@vue/runtime-dom': 3.2.45
       '@vue/server-renderer': 3.2.45_vue@3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
 
   /which/2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
@@ -2226,3 +2226,8 @@ packages:
     optionalDependencies:
       commander: 2.20.3
     dev: false
+
+  registry.npmmirror.com/@vue/shared/3.2.45:
+    resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vue/shared/-/shared-3.2.45.tgz}
+    name: '@vue/shared'
+    version: 3.2.45