diff options
Diffstat (limited to 'frontend/src/components/Modal.svelte')
| -rw-r--r-- | frontend/src/components/Modal.svelte | 33 |
1 files changed, 7 insertions, 26 deletions
diff --git a/frontend/src/components/Modal.svelte b/frontend/src/components/Modal.svelte index 209d1ab..efe98da 100644 --- a/frontend/src/components/Modal.svelte +++ b/frontend/src/components/Modal.svelte @@ -1,6 +1,7 @@ <script lang="ts"> import type { Snippet } from 'svelte'; import { Button } from '$lib/components/ui/button'; + import * as Card from '$lib/components/ui/card'; interface Props { title: string; @@ -25,40 +26,20 @@ </script> <div - class="overlay" + class="fixed inset-0 bg-black/40 grid place-items-center z-50 p-4" onclick={onBackdrop} role="presentation" onkeydown={onKeydown} tabindex="-1" bind:this={container} > - <div class="dialog card" role="dialog" aria-modal="true" aria-label={title}> - <div class="spread"> - <h2>{title}</h2> + <Card.Root class="w-[min(760px,100%)] max-h-[88vh] overflow-auto p-4"> + <div class="flex justify-between items-center gap-2"> + <h2 class="text-lg font-semibold">{title}</h2> <Button variant="ghost" size="icon-sm" onclick={onClose} aria-label="关闭">✕</Button> </div> - <div class="content"> + <div class="mt-2"> {@render children?.()} </div> - </div> + </Card.Root> </div> - -<style> - .overlay { - position: fixed; - inset: 0; - background: rgba(15, 30, 35, 0.35); - display: grid; - place-items: center; - z-index: 50; - padding: 1rem; - } - .dialog { - width: min(760px, 100%); - max-height: 88vh; - overflow: auto; - padding: 1.1rem 1.2rem; - } - - .content { margin-top: 0.6rem; } -</style> |