优化

monisuo-admin/src/pages/users/components/user-delete.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { toast } from 'vue-sonner'
+
+import { ModalClose, ModalDescription, ModalFooter, ModalHeader, ModalTitle } from '@/components/prop-ui/modal'
+
+import type { User } from '../data/schema'
+
+const { user } = defineProps<{
+  user: User
+}>()
+
+const emits = defineEmits<{
+  (e: 'remove'): void
+}>()
+
+function handleRemove() {
+  toast(`The following task has been deleted:`, {
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(user, null, 2))),
+  })
+
+  emits('remove')
+}
+</script>
+
+<template>
+  <div>
+    <ModalHeader>
+      <ModalTitle>
+        Delete this user: {{ user.username }} ?
+      </ModalTitle>
+
+      <ModalDescription>
+        You are about to delete a user with the ID {{ user.id }}. This action cannot be undone.
+      </ModalDescription>
+    </ModalHeader>
+
+    <ModalFooter>
+      <ModalClose as-child>
+        <UiButton variant="outline">
+          Cancel
+        </UiButton>
+      </ModalClose>
+
+      <ModalClose as-child>
+        <UiButton variant="destructive" @click="handleRemove">
+          Delete
+        </UiButton>
+      </ModalClose>
+    </ModalFooter>
+  </div>
+</template>