opt table truncate style

2025-10-12 12:12:43 +08:00
parent 5cf56be14d
commit 73eba0d7c6
5 changed files with 68 additions and 10 deletions
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+
+interface Props {
+  text: string
+  previewTitle?: string
+  wrapperClass?: string
+}
+
+defineProps<Props>()
+const open = ref(false)
+
+const handleClick = () => {
+  open.value = true
+}
+</script>
+
+<template>
+  <span
+    class="inline-block truncate align-middle cursor-pointer"
+    :class="wrapperClass"
+    :title="text"
+    @click="handleClick"
+  >
+    {{ text || '-' }}
+  </span>
+
+  <Dialog v-model:open="open">
+    <DialogContent class="w-[90vw] sm:max-w-xl lg:max-w-2xl">
+      <DialogHeader>
+        <DialogTitle class="text-sm font-medium text-foreground">{{ previewTitle || '内容' }}</DialogTitle>
+      </DialogHeader>
+      <div class="mt-1">
+        <div class="rounded-lg p-4 bg-muted/40 dark:bg-white/5 ring-1 ring-border/50 shadow-sm max-h-[65vh] overflow-auto">
+          <pre class="whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground">{{ text }}</pre>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
+
+