From ff520549aad4e9042669c98ec45d5e7fa1b7c09a Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Tue, 20 Dec 2022 17:20:55 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9ESwitch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/switch.md                       |  20 +-
 packages/opendesign/package.json              |   3 +
 packages/opendesign/src/components/index.ts   |   2 +
 .../src/components/style/animation.scss       |   9 +
 .../opendesign/src/components/style/index.ts  |   1 +
 .../src/components/switch/OSwitch.vue         |  90 ++++++++
 .../switch/__demo__/SwitchBeforeChange.vue    |  46 ++++
 .../__demo__/SwitchDisabledAndLoading.vue     |  13 ++
 .../switch/__demo__/SwitchShape.vue           |  13 ++
 .../components/switch/__demo__/SwitchSize.vue |  17 ++
 .../switch/__demo__/SwitchSlots.vue           |  32 +++
 .../opendesign/src/components/switch/index.ts |  12 ++
 .../src/components/switch/style/index.scss    | 204 ++++++++++++++++++
 .../src/components/switch/style/index.ts      |   1 +
 .../src/components/switch/style/var.scss      |  16 ++
 .../opendesign/src/components/switch/types.ts |   5 +
 .../src/icons/svgs/stroke/loading.svg         |  12 ++
 packages/portal/src/pages/TheSwitch.vue       |  23 ++
 packages/portal/src/router.ts                 |  17 +-
 pnpm-lock.yaml                                |  33 +--
 20 files changed, 541 insertions(+), 28 deletions(-)
 create mode 100644 packages/opendesign/src/components/style/animation.scss
 create mode 100644 packages/opendesign/src/components/switch/OSwitch.vue
 create mode 100644 packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue
 create mode 100644 packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue
 create mode 100644 packages/opendesign/src/components/switch/__demo__/SwitchShape.vue
 create mode 100644 packages/opendesign/src/components/switch/__demo__/SwitchSize.vue
 create mode 100644 packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue
 create mode 100644 packages/opendesign/src/components/switch/index.ts
 create mode 100644 packages/opendesign/src/components/switch/style/index.scss
 create mode 100644 packages/opendesign/src/components/switch/style/index.ts
 create mode 100644 packages/opendesign/src/components/switch/style/var.scss
 create mode 100644 packages/opendesign/src/components/switch/types.ts
 create mode 100644 packages/opendesign/src/icons/svgs/stroke/loading.svg
 create mode 100644 packages/portal/src/pages/TheSwitch.vue

diff --git a/packages/docs/switch.md b/packages/docs/switch.md
index ee3d32f6..258b3827 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 01cc3986..dc0c51bf 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 db800875..fa182398 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 00000000..33bcff72
--- /dev/null
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -0,0 +1,9 @@
+@keyframes 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 67aac616..84b269b2 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 00000000..3ef1d678
--- /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 00000000..a549c3f9
--- /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 00000000..04f1651c
--- /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 00000000..d0aa90f9
--- /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 00000000..83f4ac2d
--- /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 00000000..28a72ccc
--- /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 00000000..1210b8a0
--- /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 00000000..cc92240c
--- /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: 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 00000000..67aac616
--- /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 00000000..2d97423c
--- /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 00000000..ce22157d
--- /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 00000000..5cff7c74
--- /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 00000000..5db6a02f
--- /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 31158594..e5911eed 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 ca2bc389..54988091 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
-- 
Gitee


From a73d5719cd6895081732b3083b52b4ca48d3d271 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Tue, 20 Dec 2022 19:27:31 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=8A=A8=E7=94=BB=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=8A=A0o-ani=E5=89=8D=E7=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/style/animation.scss    | 4 +++-
 packages/opendesign/src/components/switch/style/index.scss | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss
index 33bcff72..fd25de4c 100644
--- a/packages/opendesign/src/components/style/animation.scss
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -1,4 +1,6 @@
-@keyframes rotating {
+$ani-prefix: 'o-ani';
+
+@keyframes #{$ani-prefix}-rotating {
   0% {
     transform: rotate(0);
   }
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index cc92240c..6408f4b7 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -27,7 +27,7 @@
         align-items: center;
         justify-content: center;
         color: var(--switch-bg);
-        animation: rotating 2s linear infinite;
+        animation: o-ani-rotating 2s linear infinite;
       }
     }
 
-- 
Gitee