更新：登录功能

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

@@ -0,0 +1,116 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(fab) {}
+}
+
+@include b(fab) {
+  position: fixed;
+  z-index: 99;
+
+  @include edeep(trigger) {
+    min-width: auto !important;
+    box-sizing: border-box;
+    width: $-fab-trigger-width !important;
+    height: $-fab-trigger-height !important;
+    border-radius: calc($-fab-trigger-height / 2) !important;
+  }
+
+  :deep() {
+    @include e(actions) {
+      position: absolute;
+      z-index: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: $-fab-actions-padding 0;
+
+      @include m(left, right) {
+        height: 100%;
+        top: 0;
+        padding: 0 $-fab-actions-padding;
+      }
+
+      @include m(left) {
+        flex-direction: row-reverse;
+        right: 100%;
+      }
+
+      @include m(right) {
+        flex-direction: row;
+        left: 100%;
+      }
+
+      @include m(top, bottom) {
+        width: 100%;
+        left: 0;
+      }
+
+      @include m(top) {
+        flex-direction: column-reverse;
+        bottom: 100%;
+      }
+
+      @include m(bottom) {
+        flex-direction: column;
+        top: 100%;
+      }
+    }
+
+    // 动画
+    @include e(transition-enter-active, transition-leave-active) {
+      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    }
+
+
+    @include e(transition-enter) {
+      @include m(top) {
+        opacity: 0;
+        transform: translateY(40px);
+      }
+
+      @include m(bottom) {
+        opacity: 0;
+        transform: translateY(-40px);
+      }
+
+      @include m(left) {
+        opacity: 0;
+        transform: translateX(40px);
+      }
+
+      @include m(right) {
+        opacity: 0;
+        transform: translateX(-40px);
+      }
+    }
+
+    @include e(transition-leave-to) {
+      @include m(top) {
+        opacity: 0;
+        transform: translateY(40px);
+      }
+
+      @include m(bottom) {
+        opacity: 0;
+        transform: translateY(-40px);
+      }
+
+      @include m(left) {
+        opacity: 0;
+        transform: translateX(40px);
+      }
+
+      @include m(right) {
+        opacity: 0;
+        transform: translateX(-40px);
+      }
+    }
+
+  }
+
+  @include edeep(icon) {
+    font-size: $-fab-icon-fs;
+  }
+}

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

@@ -0,0 +1,66 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { PropType } from 'vue'
+
+export type FabType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'
+export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'
+export type FabDirection = 'top' | 'right' | 'bottom' | 'left'
+export type FabGap = Partial<Record<FabDirection, number>>
+export const fabProps = {
+  ...baseProps,
+  /**
+   * 是否激活
+   */
+  active: makeBooleanProp(false),
+  /**
+   * 类型，可选值为 default primary info success warning error
+   */
+  type: makeStringProp<FabType>('primary'),
+  /**
+   * 悬浮按钮位置，可选值为 left-top right-top left-bottom right-bottom left-center right-center top-center bottom-center
+   */
+  position: makeStringProp<FabPosition>('right-bottom'),
+  /**
+   * 悬浮按钮菜单弹出方向，可选值为 top bottom left right
+   */
+  direction: makeStringProp<FabDirection>('top'),
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 悬浮按钮未展开时的图标
+   */
+  inactiveIcon: makeStringProp('add'),
+  /**
+   * 悬浮按钮展开时的图标
+   */
+  activeIcon: makeStringProp('close'),
+  /**
+   * 自定义悬浮按钮层级
+   */
+  zIndex: makeNumberProp(99),
+  /**
+   * 是否可拖动
+   */
+  draggable: makeBooleanProp(false),
+  gap: {
+    type: Object as PropType<FabGap>,
+    default: () => ({})
+  },
+  /**
+   * 用于控制点击时是否展开菜单
+   */
+  expandable: makeBooleanProp(true)
+}
+
+export type FabProps = ExtractPropTypes<typeof fabProps>
+
+export type FabExpose = {
+  // 展开菜单
+  open: () => void
+  // 收起菜单
+  close: () => void
+}
+
+export type FabInstance = ComponentPublicInstance<FabProps, FabExpose>

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

@@ -0,0 +1,276 @@
+<template>
+  <view
+    @touchmove.stop.prevent="handleTouchMove"
+    @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd"
+    :class="`wd-fab ${customClass}`"
+    :style="rootStyle"
+    @click.stop=""
+  >
+    <view @click.stop="" :style="{ visibility: inited ? 'visible' : 'hidden' }" id="trigger">
+      <slot name="trigger" v-if="$slots.trigger"></slot>
+      <wd-button v-else @click="handleClick" custom-class="wd-fab__trigger" round :type="type" :disabled="disabled">
+        <wd-icon custom-class="wd-fab__icon" :name="isActive ? activeIcon : inactiveIcon"></wd-icon>
+      </wd-button>
+    </view>
+    <wd-transition
+      v-if="expandable"
+      :enter-class="`wd-fab__transition-enter--${fabDirection}`"
+      enter-active-class="wd-fab__transition-enter-active"
+      :leave-to-class="`wd-fab__transition-leave-to--${fabDirection}`"
+      leave-active-class="wd-fab__transition-leave-active"
+      :custom-class="`wd-fab__actions wd-fab__actions--${fabDirection}`"
+      :show="isActive"
+      :duration="300"
+    >
+      <slot></slot>
+    </wd-transition>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-fab',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdButton from '../wd-button/wd-button.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+import { type CSSProperties, computed, ref, watch, inject, getCurrentInstance, onBeforeUnmount, onMounted, nextTick } from 'vue'
+import { getRect, isDef, isH5, objToStyle } from '../common/util'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { fabProps, type FabExpose } from './types'
+import { reactive } from 'vue'
+import { useRaf } from '../composables/useRaf'
+
+const props = defineProps(fabProps)
+const emit = defineEmits(['update:active', 'click'])
+const inited = ref<boolean>(false) // 是否初始化完成
+const isActive = ref<boolean>(false) // 是否激活状态
+const queue = inject<Queue | null>(queueKey, null)
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.active,
+  (newValue) => {
+    isActive.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => isActive.value,
+  (newValue) => {
+    if (newValue) {
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy)
+      } else {
+        closeOther(proxy)
+      }
+    }
+  }
+)
+
+const fabDirection = ref(props.direction)
+
+watch(
+  () => props.direction,
+  (direction) => (fabDirection.value = direction)
+)
+
+watch(
+  () => props.position,
+  () => initPosition()
+)
+
+const top = ref<number>(0)
+const left = ref<number>(0)
+const screen = reactive({ width: 0, height: 0 })
+const fabSize = reactive({ width: 56, height: 56 })
+const bounding = reactive({
+  minTop: 0,
+  minLeft: 0,
+  maxTop: 0,
+  maxLeft: 0
+})
+
+async function getBounding() {
+  const sysInfo = uni.getSystemInfoSync()
+  try {
+    const trigerInfo = await getRect('#trigger', false, proxy)
+    fabSize.width = trigerInfo.width || 56
+    fabSize.height = trigerInfo.height || 56
+  } catch (error) {
+    console.log(error)
+  }
+
+  const { top = 16, left = 16, right = 16, bottom = 16 } = props.gap
+  screen.width = sysInfo.windowWidth
+  screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
+  bounding.minTop = isH5 ? sysInfo.windowTop + top : top
+  bounding.minLeft = left
+  bounding.maxLeft = screen.width - fabSize.width - right
+  bounding.maxTop = screen.height - fabSize.height - bottom
+}
+
+function initPosition() {
+  const pos = props.position
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  const centerY = (maxTop + minTop) / 2
+  const centerX = (maxLeft + minLeft) / 2
+
+  switch (pos) {
+    case 'left-top':
+      top.value = minTop
+      left.value = minLeft
+      break
+    case 'right-top':
+      top.value = minTop
+      left.value = maxLeft
+      break
+    case 'left-bottom':
+      top.value = maxTop
+      left.value = minLeft
+      break
+    case 'right-bottom':
+      top.value = maxTop
+      left.value = maxLeft
+      break
+    case 'left-center':
+      top.value = centerY
+      left.value = minLeft
+      break
+    case 'right-center':
+      top.value = centerY
+      left.value = maxLeft
+      break
+    case 'top-center':
+      top.value = minTop
+      left.value = centerX
+      break
+    case 'bottom-center':
+      top.value = maxTop
+      left.value = centerX
+      break
+  }
+}
+
+// 按下时坐标相对于元素的偏移量
+const touchOffset = reactive({ x: 0, y: 0 })
+const attractTransition = ref<boolean>(false)
+function handleTouchStart(e: TouchEvent) {
+  if (props.draggable === false) return
+
+  const touch = e.touches[0]
+  touchOffset.x = touch.clientX - left.value
+  touchOffset.y = touch.clientY - top.value
+  attractTransition.value = false
+}
+
+function handleTouchMove(e: TouchEvent) {
+  if (props.draggable === false) return
+
+  const touch = e.touches[0]
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  let x = touch.clientX - touchOffset.x
+  let y = touch.clientY - touchOffset.y
+
+  if (x < minLeft) x = minLeft
+  else if (x > maxLeft) x = maxLeft
+
+  if (y < minTop) y = minTop
+  else if (y > maxTop) y = maxTop
+
+  top.value = y
+  left.value = x
+}
+
+function handleTouchEnd() {
+  if (props.draggable === false) return
+
+  const screenCenterX = screen.width / 2
+  const fabCenterX = left.value + fabSize.width / 2
+  attractTransition.value = true
+  if (fabCenterX < screenCenterX) {
+    left.value = bounding.minLeft
+    fabDirection.value = 'right'
+  } else {
+    left.value = bounding.maxLeft
+    fabDirection.value = 'left'
+  }
+}
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    top: top.value + 'px',
+    left: left.value + 'px',
+    transition: attractTransition.value ? 'all ease 0.3s' : 'none'
+  }
+  if (isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+onMounted(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+
+  const { start } = useRaf(async () => {
+    await getBounding()
+    initPosition()
+    inited.value = true
+  })
+  start()
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function handleClick() {
+  if (props.disabled) {
+    return
+  }
+  if (!props.expandable) {
+    emit('click')
+    return
+  }
+  isActive.value = !isActive.value
+  emit('update:active', isActive.value)
+}
+
+function open() {
+  isActive.value = true
+  emit('update:active', true)
+}
+
+function close() {
+  isActive.value = false
+  emit('update:active', false)
+}
+
+defineExpose<FabExpose>({
+  open,
+  close
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>