feat: 优化 switch 组件

src/component/switch/index.less

@@ -5,11 +5,10 @@
   height: 22px;
   line-height: 22px;
   min-width: 35px;
-  padding: 0 5px;
-  border: 1px solid @global-neutral-color-6;
+  padding: 0 4px;
   border-radius: 20px;
   cursor: pointer;
-  background-color: #fff;
+  background-color: @global-neutral-color-6;
   -webkit-transition: 0.1s linear;
   transition: 0.1s linear;
 }
@@ -19,13 +18,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  left: 5px;
-  top: 3px;
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
+  left: 3px;
+  top: 2px;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
   border-radius: 20px;
-  background-color: @global-neutral-color-6;
+  background-color: #fff;
+  box-shadow: 0 2px 4px #00230b33;
   -webkit-transition: 0.1s linear;
   transition: 0.1s linear;
 }

src/component/switch/index.vue

@@ -10,15 +10,13 @@ import "./index.less";
 
 export interface LaySwitchProps {
   disabled?: boolean;
-  activeText?: string;
   modelValue?: boolean;
-  inactiveText?: string;
+  onswitchText?: string;
+  unswitchText?: string;
 }
 
 const props = withDefaults(defineProps<LaySwitchProps>(), {
-  disabled: false,
-  activeText: "启用",
-  inactiveText: "禁用",
+  disabled: false
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
@@ -50,7 +48,7 @@ const handleClick = function () {
         'layui-switch-disabled': disabled,
       }"
     >
-      <em>{{ isActive == true ? activeText : inactiveText }}</em>
+      <em>{{ isActive == true ? onswitchText : unswitchText }}</em>
       <span>
         <div>
           <slot v-if="isActive" name="onswitch-icon"></slot>