"添加前端模板和运行代码模块"

qiming-xagi-frontend-templates/packages/vue3-vite/src/components/ui/dialog.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+} from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+interface DialogProps {
+  open?: boolean;
+  title?: string;
+  description?: string;
+  class?: string;
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  open: false,
+});
+
+const emit = defineEmits<{ 'update:open': [value: boolean] }>();
+const contentClass = computed(() =>
+  cn('w-full max-w-lg rounded-lg bg-white p-6 shadow-lg', props.class)
+);
+</script>
+
+<template>
+  <DialogRoot :open="open" @update:open="emit('update:open', $event)">
+    <DialogPortal>
+      <DialogOverlay class="fixed inset-0 z-50 bg-black/50" />
+      <DialogContent
+        :class="
+          cn(
+            'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 p-6',
+            contentClass
+          )
+        "
+      >
+        <div v-if="title || description" class="grid gap-1.5">
+          <DialogTitle
+            v-if="title"
+            class="text-lg font-semibold text-gray-900"
+            >{{ title }}</DialogTitle
+          >
+          <DialogDescription v-if="description" class="text-sm text-gray-500">{{
+            description
+          }}</DialogDescription>
+        </div>
+        <slot />
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>