u

code/base-project/base-vue/packages/ao-design/package.json

@@ -15,6 +15,7 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.1.9"
   },
   "devDependencies": {
     "sass": "^1.90.0",

code/base-project/base-vue/packages/ao-design/src/popup/index.scss

@@ -1,58 +1,31 @@
-.popup-reference {
-  display: inline-block; /* keeps reference size */
-}
+@use '../_styles/_variables.scss' as *;
+@use 'sass:color';
 
-.popup {
+$popup-prefix: "#{$prefix}-popup";
+
+.#{$popup-prefix} {
   position: absolute;
-  background: #333;
+  background-color: #333;
   color: #fff;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 13px;
-  white-space: nowrap;
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 2px;
   z-index: 1000;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+  box-sizing: border-box;
 
-  .popup-content {
-    pointer-events: none;
-  }
-
-  .popup-arrow {
+  &-arrow {
     position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
+    width: 8px;
+    height: 8px;
   }
 
-  &.popup-top .popup-arrow {
-    bottom: -6px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 6px 6px 0 6px;
-    border-color: #333 transparent transparent transparent;
-  }
-
-  &.popup-bottom .popup-arrow {
-    top: -6px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 0 6px 6px 6px;
-    border-color: transparent transparent #333 transparent;
-  }
-
-  &.popup-left .popup-arrow {
-    right: -6px;
-    top: 50%;
-    transform: translateY(-50%);
-    border-width: 6px 0 6px 6px;
-    border-color: transparent transparent transparent #333;
-  }
-
-  &.popup-right .popup-arrow {
-    left: -6px;
-    top: 50%;
-    transform: translateY(-50%);
-    border-width: 6px 6px 6px 0;
-    border-color: transparent #333 transparent transparent;
+  &-arrow::before {
+    position: absolute;
+    content: '';
+    width: 8px;
+    height: 8px;
+    background: #333;
+    transform: rotate(45deg);
+    box-sizing: border-box;
   }
 }

code/base-project/base-vue/packages/ao-design/src/popup/index.tsx

@@ -1,216 +1,113 @@
-import type { PropType } from 'vue'
-import { cloneVNode, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, Teleport } from 'vue'
+import type { VNode } from 'vue'
+import { arrow, offset, useFloating } from '@floating-ui/vue'
+import { cloneVNode, defineComponent, ref, Teleport, onMounted } from 'vue'
 
-type Placement = 'top' | 'bottom' | 'left' | 'right'
-type Trigger = 'hover' | 'click'
+import { getPrefixCls } from '../_utils/getPrefixCls'
 
 export default defineComponent({
   name: 'APopup',
   props: {
-    placement: { type: String as PropType<Placement>, default: 'top' },
-    trigger: { type: String as PropType<Trigger>, default: 'hover' },
-    content: { type: String, required: true },
-    attach: { type: [String, Object] as PropType<string | HTMLElement>, default: 'body' },
+    /**
+     * 触发方式
+     * - 'hover': 鼠标悬停显示/隐藏
+     * - 'click': 点击切换显示/隐藏
+     * - 'focus': 聚焦显示，失焦隐藏
+     */
+    trigger: {
+      type: String as () => 'hover' | 'click' | 'focus',
+      default: 'hover',
+    },
   },
   setup(props, { slots }) {
-    const reference = ref<HTMLElement | null>(null)
-    const popup = ref<HTMLElement | null>(null)
+    const prefixCls = getPrefixCls('popup')
+    const triggerRef = ref<HTMLElement | null>(null)
+    const floatingRef = ref<HTMLElement | null>(null)
+    const arrowRef = ref<HTMLElement | null>(null)
     const visible = ref(false)
 
-    const getAttachTarget = (): HTMLElement => {
-      if (typeof props.attach === 'string') {
-        const el = document.querySelector(props.attach)
-        return (el as HTMLElement) || document.body
-      }
-      return props.attach as HTMLElement || document.body
-    }
-
-    const show = async () => {
-      if (visible.value)
-        return
-      visible.value = true
-      await nextTick()
-      updatePosition()
-      attachPopupHover()
-      if (props.trigger === 'click')
-        document.addEventListener('click', onClickOutside)
-    }
-
-    const hide = () => {
-      if (!visible.value)
-        return
-      visible.value = false
-      if (props.trigger === 'click')
-        document.removeEventListener('click', onClickOutside)
-    }
-
-    const toggle = () => (visible.value ? hide() : show())
-
-    const onClickOutside = (e: MouseEvent) => {
-      const t = e.target as Node
-      if (!reference.value || !popup.value)
-        return
-      if (!reference.value.contains(t) && !popup.value.contains(t))
-        hide()
-    }
-
-    const updatePosition = () => {
-      if (!reference.value || !popup.value)
-        return
-
-      const attachTarget = getAttachTarget()
-      const rect = reference.value.getBoundingClientRect()
-      const attachRect = attachTarget === document.body ? { left: 0, top: 0 } : attachTarget.getBoundingClientRect()
-      const scrollX = attachTarget === document.body ? window.scrollX : attachTarget.scrollLeft
-      const scrollY = attachTarget === document.body ? window.scrollY : attachTarget.scrollTop
-
-      const tip = popup.value
-      const gap = 8
-
-      const prevDisplay = tip.style.display
-      tip.style.display = 'block'
-      tip.style.visibility = 'hidden'
-      const tipRect = tip.getBoundingClientRect()
-      tip.style.visibility = ''
-      tip.style.display = visible.value ? 'block' : prevDisplay || 'none'
-
-      let left = 0
-      let top = 0
-      let finalPlacement = props.placement
-
-      const baseX = rect.left - attachRect.left + scrollX
-      const baseY = rect.top - attachRect.top + scrollY
-
-      // 自动翻转逻辑
-      if (props.placement === 'top') {
-        left = baseX + rect.width / 2 - tipRect.width / 2
-        top = baseY - tipRect.height - gap
-        if (top < 0) {
-          finalPlacement = 'bottom'
-          top = baseY + rect.height + gap
-        }
-      }
-      else if (props.placement === 'bottom') {
-        left = baseX + rect.width / 2 - tipRect.width / 2
-        top = baseY + rect.height + gap
-        const maxY = attachTarget === document.body ? window.innerHeight + scrollY : attachTarget.clientHeight + scrollY
-        if (top + tipRect.height > maxY) {
-          finalPlacement = 'top'
-          top = baseY - tipRect.height - gap
-        }
-      }
-      else if (props.placement === 'left') {
-        left = baseX - tipRect.width - gap
-        top = baseY + rect.height / 2 - tipRect.height / 2
-        if (left < 0) {
-          finalPlacement = 'right'
-          left = baseX + rect.width + gap
-        }
-      }
-      else {
-        left = baseX + rect.width + gap
-        top = baseY + rect.height / 2 - tipRect.height / 2
-        const maxX = attachTarget === document.body ? window.innerWidth + scrollX : attachTarget.clientWidth + scrollX
-        if (left + tipRect.width > maxX) {
-          finalPlacement = 'left'
-          left = baseX - tipRect.width - gap
-        }
-      }
-
-      left = Math.max(6, left)
-      top = Math.max(6, top)
-
-      tip.style.left = `${left}px`
-      tip.style.top = `${top}px`
-
-      const arrow = tip.querySelector('.popup-arrow') as HTMLElement
-      if (arrow) {
-        const minOffset = 12
-        if (finalPlacement === 'top' || finalPlacement === 'bottom') {
-          let arrowOffset = baseX + rect.width / 2 - left
-          arrowOffset = Math.min(Math.max(arrowOffset, minOffset), tipRect.width - minOffset)
-          arrow.style.left = `${arrowOffset}px`
-          arrow.style.top = ''
-        }
-        else {
-          let arrowOffset = baseY + rect.height / 2 - top
-          arrowOffset = Math.min(Math.max(arrowOffset, minOffset), tipRect.height - minOffset)
-          arrow.style.top = `${arrowOffset}px`
-          arrow.style.left = ''
-        }
-      }
-
-      tip.className = `popup popup-${finalPlacement}`
-    }
-
-    const attachPopupHover = () => {
-      if (!popup.value || props.trigger !== 'hover')
-        return
-      popup.value.addEventListener('mouseenter', show)
-      popup.value.addEventListener('mouseleave', hide)
-    }
-
-    const detachPopupHover = () => {
-      if (!popup.value)
-        return
-      popup.value.removeEventListener('mouseenter', show)
-      popup.value.removeEventListener('mouseleave', hide)
-    }
+    // 使用 useFloating 管理浮动层和箭头
+    const { floatingStyles, middlewareData } = useFloating(
+      triggerRef,
+      floatingRef,
+      {
+        placement: 'top',
+        middleware: [offset(10), arrow({ element: arrowRef })],
+      },
+    )
 
+    // 监听 triggerRef 挂载完成
     onMounted(() => {
-      if (reference.value) {
-        if (props.trigger === 'hover') {
-          reference.value.addEventListener('mouseenter', show)
-          reference.value.addEventListener('mouseleave', hide)
-        }
-        else {
-          reference.value.addEventListener('click', (e) => {
-            e.stopPropagation()
-            toggle()
-          })
-        }
-      }
-      window.addEventListener('resize', updatePosition)
-      window.addEventListener('scroll', updatePosition, true)
+      console.log('triggerRef 已挂载:', triggerRef.value) // 正确打印
+      // 可以在此处调用 useFloating 的更新逻辑（如果有需要）
     })
 
-    onBeforeUnmount(() => {
-      if (reference.value) {
-        reference.value.removeEventListener('mouseenter', show)
-        reference.value.removeEventListener('mouseleave', hide)
-        reference.value.removeEventListener('click', toggle)
-      }
-      detachPopupHover()
-      document.removeEventListener('click', onClickOutside)
-      window.removeEventListener('resize', updatePosition)
-      window.removeEventListener('scroll', updatePosition, true)
-    })
+    // 显示/隐藏/切换浮动层
+    const showPopup = () => (visible.value = true)
+    const hidePopup = () => (visible.value = false)
+    const togglePopup = () => (visible.value = !visible.value)
 
-    return () => {
-      const defaultSlot = slots.default?.()
-      if (!defaultSlot || defaultSlot.length !== 1)
-        return null
+    // 绑定事件
+    const eventProps: Record<string, (e: Event) => void> = {}
+    if (props.trigger === 'hover') {
+      eventProps.onMouseenter = () => showPopup()
+      eventProps.onMouseleave = () => hidePopup()
+    }
+    else if (props.trigger === 'click') {
+      eventProps.onClick = () => togglePopup()
+    }
+    else if (props.trigger === 'focus') {
+      eventProps.onFocus = () => showPopup()
+      eventProps.onBlur = () => hidePopup()
+    }
 
-      // 克隆触发元素并绑定 ref 和事件
-      const triggerEl = cloneVNode(defaultSlot[0], { ref: reference })
+    // 获取 reference 插槽或默认插槽
+    const slotContent = slots.reference?.() || slots.default?.() || []
+    let triggerSlot: VNode | null = null
 
-      return (
-        <>
-          {triggerEl}
-          <Teleport to={getAttachTarget()}>
-            <div
-              ref={popup}
-              class={['popup', `popup-${props.placement}`]}
-              style={{ position: 'absolute', display: visible.value ? 'block' : 'none' }}
-              aria-hidden={!visible.value}
-              role="tooltip"
-            >
-              <div class="popup-content">{props.content}</div>
-              <div class="popup-arrow" />
-            </div>
-          </Teleport>
-        </>
+    // 单元素直接绑定事件，多元素套 span
+    if (slotContent.length === 1) {
+      triggerSlot = cloneVNode(slotContent[0], {
+        ref: triggerRef,
+        ...eventProps,
+      })
+    }
+    else if (slotContent.length > 1) {
+      triggerSlot = (
+        <span ref={triggerRef} style="display: inline-flex;">
+          {slotContent.map(vnode => cloneVNode(vnode, { ...eventProps }))}
+        </span>
       )
     }
+
+    return () => (
+      <>
+        {/* 原位渲染触发元素 */}
+        {triggerSlot}
+
+        {/* 浮动层挂载到 body */}
+        <Teleport to="body">
+          {visible.value && (
+            <div ref={floatingRef} class={prefixCls} style={floatingStyles}>
+              Popup 内容
+              <div
+                class={`${prefixCls}-arrow`}
+                ref={arrowRef}
+                style={{
+                  position: 'absolute',
+                  left:
+                    middlewareData.value.arrow?.x != null
+                      ? `${middlewareData.value.arrow.x}px`
+                      : undefined,
+                  top:
+                    middlewareData.value.arrow?.y != null
+                      ? `${middlewareData.value.arrow.y}px`
+                      : undefined,
+                }}
+              />
+            </div>
+          )}
+        </Teleport>
+      </>
+    )
   },
 })