更新：登录功能

uni_modules/wot-design-uni/components/wd-switch/index.scss

@@ -0,0 +1,58 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(switch) {
+  display: inline-block;
+  position: relative;
+  width: $-switch-width;
+  height: $-switch-height;
+  border-radius: $-switch-circle-size;
+  background: $-switch-inactive-color;
+  font-size: $-switch-size;
+  transition: all .3s;
+
+  @include e(checkbox) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+  }
+  @include e(circle) {
+    box-sizing: border-box;
+    position: absolute;
+    display: inline-block;
+    width: $-switch-circle-size;
+    height: $-switch-circle-size;
+    top: 2px;
+    left: 2px;
+    background: #fff;
+    border-radius: 50%;
+    transition: left .3s ease-out;
+    box-shadow: 0 2px 4px 0 $-switch-inactive-shadow-color;
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: calc(200% - 2px);
+      height: calc(200% - 2px);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.5);
+      border: 1px solid $-switch-border-color;
+      border-radius: 50%;
+    }
+  }
+  @include when(checked) {
+    background: $-switch-active-color;
+    border-color: $-switch-active-color;
+
+    .wd-switch__circle {
+      left: calc($-switch-width - $-switch-circle-size - 2px);
+      box-shadow: 0 2px 4px 0 $-switch-active-shadow-color
+    }
+  }
+  @include when(disabled) {
+    opacity: 0.5;
+  }
+}

uni_modules/wot-design-uni/components/wd-switch/types.ts

@@ -0,0 +1,58 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, numericProp } from '../common/props'
+
+export type SwitchBeforeChangeOption = {
+  value: number | string | boolean
+  resolve: (pass: boolean) => void
+}
+
+export type SwitchBeforeChange = (option: SwitchBeforeChangeOption) => void
+
+export const switchProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: [Boolean, String, Number],
+    required: true,
+    default: false
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 激活值
+   */
+  activeValue: {
+    type: [Boolean, String, Number],
+    default: true
+  },
+  /**
+   * 非激活值
+   */
+  inactiveValue: {
+    type: [Boolean, String, Number],
+    default: false
+  },
+  /**
+   * 激活颜色
+   */
+  activeColor: String,
+  /**
+   * 非激活颜色
+   */
+  inactiveColor: String,
+  /**
+   * 大小
+   */
+  size: {
+    type: numericProp
+  },
+  /**
+   * 在改变前执行的函数
+   */
+  beforeChange: Function as PropType<SwitchBeforeChange>
+}
+export type SwitchProps = ExtractPropTypes<typeof switchProps>

uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue

@@ -0,0 +1,83 @@
+<template>
+  <view :class="rootClass" :style="rootStyle" @click="switchValue">
+    <view class="wd-switch__circle" :style="circleStyle"></view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-switch',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties, onBeforeMount } from 'vue'
+import { addUnit, isFunction, objToStyle } from '../common/util'
+import { switchProps } from './types'
+
+const props = defineProps(switchProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const rootClass = computed(() => {
+  return `wd-switch ${props.customClass} ${props.disabled ? 'is-disabled' : ''} ${props.modelValue === props.activeValue ? 'is-checked' : ''}`
+})
+
+const rootStyle = computed(() => {
+  const rootStyle: CSSProperties = {
+    background: props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor,
+    'border-color': props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor
+  }
+  if (props.size) {
+    rootStyle['font-size'] = addUnit(props.size)
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+const circleStyle = computed(() => {
+  const circleStyle: string =
+    (props.modelValue === props.activeValue && props.activeColor) || (props.modelValue !== props.activeValue && props.inactiveColor)
+      ? 'box-shadow: none;'
+      : ''
+  return circleStyle
+})
+
+function switchValue() {
+  if (props.disabled) return
+  const newVal = props.modelValue === props.activeValue ? props.inactiveValue : props.activeValue
+
+  if (props.beforeChange && isFunction(props.beforeChange)) {
+    props.beforeChange({
+      value: newVal,
+      resolve: (pass: boolean) => {
+        if (pass) {
+          emit('update:modelValue', newVal)
+          emit('change', {
+            value: newVal
+          })
+        }
+      }
+    })
+  } else {
+    emit('update:modelValue', newVal)
+    emit('change', {
+      value: newVal
+    })
+  }
+}
+
+onBeforeMount(() => {
+  if ([props.activeValue, props.inactiveValue].indexOf(props.modelValue) === -1) {
+    emit('update:modelValue', props.inactiveValue)
+    emit('change', {
+      value: props.inactiveValue
+    })
+  }
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>