feat: 表格展示优化

2026-05-23 01:49:15 +08:00
parent cc7125e681
commit a3b1fba3ea
18 changed files with 417 additions and 18 deletions
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useMediaQuery } from "@vueuse/core";
+import type { HTMLAttributes } from "vue";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "@/components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "@/components/ui/tooltip";
+
+const props = defineProps<{
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  open?: boolean;
+  class?: HTMLAttributes["class"];
+}>();
+
+const isMobile = useMediaQuery("(max-width: 640px)");
+</script>
+
+<template>
+  <div>
+    <!-- 移动端 Popover -->
+    <Popover v-if="isMobile">
+      <PopoverTrigger as-child>
+        <slot name="trigger" />
+      </PopoverTrigger>
+      <PopoverContent
+        :side="side"
+        :align="align"
+        class="w-fit px-0 py-2 relative top-2! rounded-lg! border-none!"
+        :class="props.class"
+      >
+        <slot />
+      </PopoverContent>
+    </Popover>
+
+    <!-- PC Tooltip -->
+    <TooltipProvider v-else :delay-duration="150">
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <slot name="trigger" />
+        </TooltipTrigger>
+        <TooltipContent
+          :side="side"
+          :align="align"
+          class="w-fit px-0 py-2 relative top-2! bg-popover text-popover-foreground border rounded-lg! [&>svg]:hidden [&>span>svg]:opacity-0!"
+          :class="props.class"
+        >
+          <slot />
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  </div>
+</template>