u

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')