u

code/base-project/App.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { ref } from 'vue';
+import { arrow, useFloating, offset } from '@floating-ui/vue';
+
+// 4 个方向按钮的 refs
+const referenceBottom = ref(null);
+const referenceTop = ref(null);
+const referenceLeft = ref(null);
+const referenceRight = ref(null);
+
+const floatingBottom = ref(null);
+const floatingTop = ref(null);
+const floatingLeft = ref(null);
+const floatingRight = ref(null);
+
+const arrowBottom = ref(null);
+const arrowTop = ref(null);
+const arrowLeft = ref(null);
+const arrowRight = ref(null);
+
+// useFloating 分别初始化
+const { floatingStyles: bottomStyles, middlewareData: bottomData } = useFloating(
+  referenceBottom,
+  floatingBottom,
+  { placement: 'bottom-start', middleware: [offset(10), arrow({ element: arrowBottom })] }
+);
+
+const { floatingStyles: topStyles, middlewareData: topData } = useFloating(
+  referenceTop,
+  floatingTop,
+  { placement: 'top', middleware: [offset(10), arrow({ element: arrowTop })] }
+);
+
+const { floatingStyles: leftStyles, middlewareData: leftData } = useFloating(
+  referenceLeft,
+  floatingLeft,
+  { placement: 'left', middleware: [offset(10), arrow({ element: arrowLeft })] }
+);
+
+const { floatingStyles: rightStyles, middlewareData: rightData } = useFloating(
+  referenceRight,
+  floatingRight,
+  { placement: 'right', middleware: [offset(10), arrow({ element: arrowRight })] }
+);
+</script>
+
+<template>
+   <t-tooltip content="这是Tooltip内容">
+    <t-button>hover me</t-button>
+    <t-button>hover me</t-button>
+  </t-tooltip>
+  <div class="demo">
+    <!-- Bottom -->
+    <div class="item">
+      <button ref="referenceBottom">Bottom</button>
+      <div ref="floatingBottom" :style="bottomStyles" class="floating-box">
+        Bottom Floating
+        <div
+          ref="arrowBottom"
+          class="floating-arrow"
+          :style="{
+            left: bottomData.arrow?.x != null ? `${bottomData.arrow.x}px` : '',
+            top: bottomData.arrow?.y != null ? `${bottomData.arrow.y}px` : '',
+          }"
+        ></div>
+      </div>
+
+    </div>
+
+    <!-- Top -->
+    <div class="item">
+      <button ref="referenceTop">Top</button>
+      <div ref="floatingTop" :style="topStyles" class="floating-box">
+        Top Floating
+        <div
+          ref="arrowTop"
+          class="floating-arrow"
+          :style="{
+            left: topData.arrow?.x != null ? `${topData.arrow.x}px` : '',
+            top: topData.arrow?.y != null ? `${topData.arrow.y}px` : '',
+          }"
+        ></div>
+      </div>
+    </div>
+
+    <!-- Left -->
+    <div class="item">
+      <button ref="referenceLeft">Left</button>
+      <div ref="floatingLeft" :style="leftStyles" class="floating-box">
+        Left Floating
+        <div
+          ref="arrowLeft"
+          class="floating-arrow"
+          :style="{
+            left: leftData.arrow?.x != null ? `${leftData.arrow.x}px` : '',
+            top: leftData.arrow?.y != null ? `${leftData.arrow.y}px` : '',
+          }"
+        ></div>
+      </div>
+    </div>
+
+    <!-- Right -->
+    <div class="item">
+      <button ref="referenceRight">Right</button>
+      <div ref="floatingRight" :style="rightStyles" class="floating-box">
+        Right Floating
+        <div
+          ref="arrowRight"
+          class="floating-arrow"
+          :style="{
+            left: rightData.arrow?.x != null ? `${rightData.arrow.x}px` : '',
+            top: rightData.arrow?.y != null ? `${rightData.arrow.y}px` : '',
+          }"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.demo {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 120px;
+  padding: 40px;
+  justify-content: center;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.floating-box {
+  position: absolute;
+  background-color: #333;
+  color: #fff;
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  z-index: 10;
+}
+
+/* 箭头 */
+.floating-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+}
+
+.floating-arrow::before {
+  position: absolute;
+  content: "";
+  width: 8px;
+  height: 8px;
+  background: #333;
+  transform: rotate(45deg);
+  box-sizing: border-box;
+}
+</style>

code/base-project/base-vue/.vscode/vue3.code-snippets

@@ -0,0 +1,39 @@
+{
+    "Print AoDesignComponent TSX": {
+      "scope": "typescriptreact",
+      "prefix": "atsx",
+      "body": [
+        "import { defineComponent } from 'vue';",
+        "import { getPrefixCls } from '../_utils/getPrefixCls';",
+        "",
+        "export default defineComponent({",
+        "  name: '${1:AoComponent}',",
+        "  props: {",
+        "  },",
+        "  emits: [],",
+        "  setup(props, { slots, emit }) {",
+        "    const prefixCls = getPrefixCls('${2:component}');",
+        "    return () => (",
+        "      <div class={prefixCls}>",
+        "        {slots.default?.()}",
+        "      </div>",
+        "    );",
+        "  }",
+        "})"
+      ]
+    },
+    "Print AoDesignComponent SCSS": {
+        "scope": "scss",
+        "prefix": "ascss",
+        "body": [
+          "@use '../_styles/_variables.scss' as *;",
+          "@use 'sass:color';",
+          "",
+          "$${1:component}-prefix: #{$prefix}-${1:component};",
+          "",
+          ".#{${1:component}-prefix} {",
+          "}"
+        ]
+      }
+  }
+  

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>
+      </>
+    )
   },
 })

code/base-project/base-vue/pnpm-lock.yaml

@@ -69,6 +69,9 @@ importers:
 
   packages/ao-design:
     dependencies:
+      '@floating-ui/vue':
+        specifier: ^1.1.9
+        version: 1.1.9(vue@3.5.19(typescript@5.8.3))
       '@iconify/vue':
         specifier: 5.0.0
         version: 5.0.0(vue@3.5.19(typescript@5.8.3))

code/base-project/base-vue/src/App.vue

@@ -1,112 +1,22 @@
-<!-- <script setup>
-import { arrow, offset, useFloating } from '@floating-ui/vue'
-import { ref } from 'vue'
+<script lang="ts">
 
-const reference = ref(null) // 按钮
-const floating = ref(null) // tooltip
-const floatingArrow = ref(null)
-
-// 使用 useFloating 计算浮动位置
-const { floatingStyles, middlewareData } = useFloating(reference, floating, {
-  middleware: [offset(8), arrow({ element: floatingArrow })],
-  placement: 'top',
-})
 </script>
 
 <template>
-  <div style="padding: 100px;">
-    <APopup />
-    <button
-      ref="reference" style="width: 200px;"
-    >
-      Button
-    </button>
-
-    <div ref="floating" class="floating" :style="floatingStyles">
-      Tooltip
-      <div
-        ref="floatingArrow"
-        class="arrow"
-        :style="{
-          position: 'absolute',
-          left:
-            middlewareData.arrow?.x != null
-              ? `${middlewareData.arrow.x}px`
-              : '',
-          top:
-            middlewareData.arrow?.y != null
-              ? `${middlewareData.arrow.y}px`
-              : '',
-        }"
-      />
-    </div>
-
-    <APopup content="提示内容" placement="left" trigger="hover">
-      <button>悬停或聚焦</button>
+  <div class="page-center">
+    <APopup trigger="click">
+      <AButton style="margin-right: 12px;">
+        测试
+      </AButton>
     </APopup>
   </div>
 </template>
 
 <style scoped>
-/* tooltip 样式 */
-.floating {
-  padding: 6px 12px;
-  background-color: #000;
-  color: #fff;
-  border-radius: 2px;
-  font-size: 12px;
-  white-space: nowrap;
+.page-center {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  height: 800px; /* 高度撑满整个视口 */
 }
-/* 箭头 */
-.arrow {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background-color: #000;
-  transform: rotate(45deg);
-}
-</style> -->
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const containerRef = ref<HTMLElement | null>(null)
-</script>
-
-<template>
-  <div style="padding: 20px; display: flex; flex-direction: column; gap: 20px;">
-    <!-- 1. placement: 控制弹出方向 -->
-    <APopup placement="top" trigger="hover" content="上方 Tooltip">
-      <button>Hover Top</button>
-    </APopup>
-
-    <APopup placement="bottom" trigger="hover" content="下方 Tooltip">
-      <button>Hover Bottom</button>
-    </APopup>
-
-    <APopup placement="left" trigger="hover" content="左侧 Tooltip">
-      <button>Hover Left</button>
-    </APopup>
-
-    <APopup placement="right" trigger="hover" content="右侧 Tooltip">
-      <button>Hover Right</button>
-    </APopup>
-
-    <!-- 2. trigger: hover 或 click -->
-    <APopup placement="top" trigger="click" content="点击触发 Tooltip">
-      <button>Click Me</button>
-    </APopup>
-
-    <!-- 3. content: 弹出内容 -->
-    <APopup placement="bottom" trigger="hover" content="这是自定义内容">
-      <button>Hover Custom Content</button>
-    </APopup>
-
-    <!-- 4. attach: 弹出挂载容器 -->
-    <!-- 使用 ref 挂载 -->
-    <div ref="containerRef" style="position: relative; margin-top: 50px; height: 100px; border: 1px solid #ccc; padding: 10px;">
-      <APopup placement="right" trigger="hover" content="挂载到 ref 容器" :attach="containerRef">
-        <button>Hover Ref Container</button>
-      </APopup>
-    </div>
-  </div>
-</template>
+</style>

code/base-project/base-vue/src/main.ts

@@ -1,6 +1,6 @@
+import naive from 'naive-ui'
 import { createApp } from 'vue'
 import App from './App.vue'
 import './style.scss'
 
-
-createApp(App).mount('#app')
+createApp(App).use(naive).mount('#app')