@atooyu/uxto-ui 1.0.0

package/src/components/u-tooltip/u-tooltip.vue

@@ -0,0 +1,364 @@
+<template>
+  <view
+    class="u-tooltip"
+    :class="{
+      'u-tooltip--active': visible
+    }"
+    @longpress="handleLongPress"
+    @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd"
+  >
+    <!-- 触发元素 -->
+    <view
+      class="u-tooltip__trigger"
+      :class="{
+        'u-tooltip__trigger--highlight': highlight && visible
+      }"
+      :style="highlight ? highlightStyle : {}"
+    >
+      <slot />
+    </view>
+
+    <!-- 提示气泡 -->
+    <view
+      v-if="visible"
+      class="u-tooltip__popup"
+      :class="[`u-tooltip__popup--${placement}`, `u-tooltip__popup--${actualPlacement}`]"
+      :style="popupStyle"
+    >
+      <!-- 箭头 -->
+      <view class="u-tooltip__arrow" :class="`u-tooltip__arrow--${actualPlacement}`"></view>
+
+      <!-- 内容 -->
+      <view class="u-tooltip__content">
+        <!-- 操作按钮 -->
+        <view v-if="actions.length" class="u-tooltip__actions">
+          <view
+            v-for="(action, index) in actions"
+            :key="index"
+            class="u-tooltip__action"
+            :class="{ 'u-tooltip__action--disabled': action.disabled }"
+            @click.stop="handleActionClick(action, index)"
+          >
+            <text class="u-tooltip__action-text">{{ action.text }}</text>
+          </view>
+        </view>
+
+        <!-- 自定义内容 -->
+        <slot v-else name="content">
+          <text class="u-tooltip__text">{{ content }}</text>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+// 检测是否在 uniapp 环境中
+const isUniApp = typeof uni !== 'undefined'
+
+interface Action {
+  text: string
+  disabled?: boolean
+  [key: string]: any
+}
+
+interface Props {
+  content?: string
+  placement?: 'top' | 'bottom'
+  actions?: Action[]
+  highlight?: boolean
+  highlightColor?: string
+  autoAdjust?: boolean
+  showDuration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  content: '',
+  placement: 'top',
+  actions: () => [],
+  highlight: false,
+  highlightColor: 'rgba(25, 137, 250, 0.1)',
+  autoAdjust: true,
+  showDuration: 0
+})
+
+const emit = defineEmits<{
+  show: []
+  hide: []
+  select: [action: Action, index: number]
+}>()
+
+const visible = ref(false)
+const actualPlacement = ref(props.placement)
+let hideTimer: ReturnType<typeof setTimeout> | null = null
+let triggerRect = { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 }
+
+const highlightStyle = computed(() => ({
+  backgroundColor: props.highlightColor
+}))
+
+const popupStyle = computed(() => ({}))
+
+const handleTouchStart = (event: any) => {
+  const touch = event.touches?.[0]
+  if (isUniApp) {
+    // uni-app 使用 createSelectorQuery
+    const query = uni.createSelectorQuery()
+    query.select('.u-tooltip__trigger').boundingClientRect((rect: any) => {
+      if (rect) {
+        triggerRect = {
+          top: rect.top,
+          bottom: rect.bottom,
+          left: rect.left,
+          right: rect.right,
+          width: rect.width,
+          height: rect.height
+        }
+      }
+    }).exec()
+  } else if (event.currentTarget) {
+    // 小程序/鸿蒙环境：使用 uni.createSelectorQuery 作为 fallback
+    uni.createSelectorQuery()
+      .select('.u-tooltip__trigger')
+      .boundingClientRect((rect: any) => {
+        if (rect) {
+          triggerRect = {
+            top: rect.top,
+            bottom: rect.bottom,
+            left: rect.left,
+            right: rect.right,
+            width: rect.width,
+            height: rect.height
+          }
+        }
+      })
+      .exec()
+  }
+}
+
+const handleTouchEnd = () => {
+  // touch end handled
+}
+
+const handleLongPress = () => {
+  show()
+}
+
+const show = () => {
+  visible.value = true
+  emit('show')
+
+  if (props.autoAdjust) {
+    adjustPlacement()
+  }
+
+  if (props.showDuration > 0) {
+    hideTimer = setTimeout(() => {
+      hide()
+    }, props.showDuration)
+  }
+}
+
+const hide = () => {
+  visible.value = false
+  emit('hide')
+  if (hideTimer) {
+    clearTimeout(hideTimer)
+    hideTimer = null
+  }
+}
+
+const adjustPlacement = () => {
+  // 简化的位置调整逻辑
+  if (isUniApp) {
+    // uni-app 中使用系统信息获取窗口高度
+    const systemInfo = uni.getSystemInfoSync()
+    const windowHeight = systemInfo.windowHeight
+    const spaceAbove = triggerRect.top
+    const spaceBelow = windowHeight - triggerRect.bottom
+
+    if (props.placement === 'top' && spaceAbove < 50) {
+      actualPlacement.value = 'bottom'
+    } else if (props.placement === 'bottom' && spaceBelow < 50) {
+      actualPlacement.value = 'top'
+    } else {
+      actualPlacement.value = props.placement
+    }
+  } else {
+    const windowHeight = window.innerHeight
+    const spaceAbove = triggerRect.top
+    const spaceBelow = windowHeight - triggerRect.bottom
+
+    if (props.placement === 'top' && spaceAbove < 50) {
+      actualPlacement.value = 'bottom'
+    } else if (props.placement === 'bottom' && spaceBelow < 50) {
+      actualPlacement.value = 'top'
+    } else {
+      actualPlacement.value = props.placement
+    }
+  }
+}
+
+const handleActionClick = (action: Action, index: number) => {
+  if (action.disabled) return
+  emit('select', action, index)
+  hide()
+}
+
+const handleClickOutside = (event: TouchEvent | MouseEvent) => {
+  if (visible.value) {
+    hide()
+  }
+}
+
+onMounted(() => {
+  if (isUniApp) {
+    // uni-app 中使用页面生命周期事件处理
+  } else {
+    document.addEventListener('click', handleClickOutside)
+    document.addEventListener('touchstart', handleClickOutside)
+  }
+})
+
+onUnmounted(() => {
+  if (isUniApp) {
+    // uni-app 清理
+  } else {
+    document.removeEventListener('click', handleClickOutside)
+    document.removeEventListener('touchstart', handleClickOutside)
+  }
+  if (hideTimer) {
+    clearTimeout(hideTimer)
+  }
+})
+
+defineExpose({
+  show,
+  hide
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-tooltip {
+  position: relative;
+  display: inline-block;
+
+  &--active {
+    z-index: 999;
+  }
+
+  &__trigger {
+    display: inline;
+    transition: background-color 0.15s;
+
+    &--highlight {
+      border-radius: 2px;
+    }
+  }
+
+  &__popup {
+    position: absolute;
+    z-index: 1000;
+    padding: 8px 12px;
+    background: #323233;
+    border-radius: 8px;
+    white-space: nowrap;
+    animation: u-tooltip-fade-in 0.15s ease-out;
+
+    &--top {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-bottom: 8px;
+    }
+
+    &--bottom {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 8px;
+    }
+  }
+
+  &__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+
+    &--top {
+      bottom: -12px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-top-color: #323233;
+      border-bottom: none;
+    }
+
+    &--bottom {
+      top: -12px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-bottom-color: #323233;
+      border-top: none;
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+  }
+
+  &__text {
+    font-size: 14px;
+    color: #fff;
+    line-height: 1.4;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 16px;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+    padding: 4px 0;
+
+    &--disabled {
+      opacity: 0.5;
+    }
+
+    &:not(&--disabled):active {
+      opacity: 0.7;
+    }
+  }
+
+  &__action-text {
+    font-size: 14px;
+    color: #fff;
+  }
+}
+
+@keyframes u-tooltip-fade-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}
+</style>

package/src/components/u-transition/u-transition.vue

@@ -0,0 +1,216 @@
+<template>
+  <view
+    v-show="visible"
+    class="u-transition"
+    :class="transitionClass"
+    :style="transitionStyle"
+    @transitionend="onTransitionEnd"
+  >
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+type TransitionMode =
+  | 'fade'
+  | 'fade-up'
+  | 'fade-down'
+  | 'fade-left'
+  | 'fade-right'
+  | 'slide-up'
+  | 'slide-down'
+  | 'slide-left'
+  | 'slide-right'
+  | 'zoom'
+  | 'zoom-fade'
+
+interface Props {
+  show?: boolean
+  mode?: TransitionMode
+  duration?: number
+  delay?: number
+  customStyle?: Record<string, string | number>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: false,
+  mode: 'fade',
+  duration: 300,
+  delay: 0
+})
+
+const emit = defineEmits<{
+  (e: 'after-enter'): void
+  (e: 'after-leave'): void
+}>()
+
+const visible = ref(false)
+const animationPhase = ref<'enter' | 'leave'>('enter')
+
+// 监听 show 变化
+watch(
+  () => props.show,
+  (val) => {
+    if (val) {
+      visible.value = true
+      animationPhase.value = 'enter'
+    } else {
+      animationPhase.value = 'leave'
+    }
+  },
+  { immediate: true }
+)
+
+const transitionClass = computed(() => {
+  const classes: string[] = []
+
+  if (animationPhase.value === 'enter') {
+    classes.push(`u-transition--${props.mode}-enter`)
+  } else {
+    classes.push(`u-transition--${props.mode}-leave`)
+  }
+
+  return classes
+})
+
+const transitionStyle = computed(() => {
+  const style: Record<string, string | number> = {
+    transitionDuration: `${props.duration}ms`,
+    transitionDelay: `${props.delay}ms`,
+    transitionProperty: 'opacity, transform',
+    transitionTimingFunction: 'ease-out'
+  }
+
+  if (props.customStyle) {
+    Object.assign(style, props.customStyle)
+  }
+
+  return style
+})
+
+const onTransitionEnd = () => {
+  if (animationPhase.value === 'leave') {
+    visible.value = false
+    emit('after-leave')
+  } else {
+    emit('after-enter')
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-transition {
+  // 基础状态
+  opacity: 1;
+  transform: none;
+
+  // 淡入淡出
+  &--fade-enter {
+    opacity: 0;
+  }
+  &--fade-leave {
+    opacity: 0;
+  }
+
+  // 上滑淡入
+  &--fade-up-enter {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  &--fade-up-leave {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  // 下滑淡入
+  &--fade-down-enter {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  &--fade-down-leave {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  // 左滑淡入
+  &--fade-left-enter {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  &--fade-left-leave {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  // 右滑淡入
+  &--fade-right-enter {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  &--fade-right-leave {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  // 上滑进入
+  &--slide-up-enter {
+    transform: translateY(100%);
+  }
+  &--slide-up-leave {
+    transform: translateY(-100%);
+  }
+
+  // 下滑进入
+  &--slide-down-enter {
+    transform: translateY(-100%);
+  }
+  &--slide-down-leave {
+    transform: translateY(100%);
+  }
+
+  // 左滑进入
+  &--slide-left-enter {
+    transform: translateX(100%);
+  }
+  &--slide-left-leave {
+    transform: translateX(-100%);
+  }
+
+  // 右滑进入
+  &--slide-right-enter {
+    transform: translateX(-100%);
+  }
+  &--slide-right-leave {
+    transform: translateX(100%);
+  }
+
+  // 缩放
+  &--zoom-enter {
+    transform: scale(0);
+  }
+  &--zoom-leave {
+    transform: scale(0);
+  }
+
+  // 缩放淡入
+  &--zoom-fade-enter {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  &--zoom-fade-leave {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+</style>