[+] Dialog

bun.lock

@@ -7,6 +7,7 @@
       "dependencies": {
         "@fontsource/roboto": "^5.2.8",
         "@iconify-json/material-symbols": "^1.2.46",
+        "@iconify-json/svg-spinners": "^1.2.4",
         "@neteasecloudmusicapienhanced/api": "^4.29.17",
         "@unocss/core": "^66.5.6",
         "@unocss/extractor-svelte": "^66.5.6",
@@ -151,6 +152,8 @@
 
     "@iconify-json/material-symbols": ["@iconify-json/material-symbols@1.2.46", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-cNWdSAa5Z3f0TlqdCt28rmeYWGKwe68J1ORdyHyqC4D6H7CWiVKBJXV3TDTocOQVDO372bz+cmsFeo4+pbRy+A=="],
 
+    "@iconify-json/svg-spinners": ["@iconify-json/svg-spinners@1.2.4", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-ayn0pogFPwJA1WFZpDnoq9/hjDxN+keeCMyThaX4d3gSJ3y0mdKUxIA/b1YXWGtY9wVtZmxwcvOIeEieG4+JNg=="],
+
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
 
     "@iconify/utils": ["@iconify/utils@3.0.2", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@antfu/utils": "^9.2.0", "@iconify/types": "^2.0.0", "debug": "^4.4.1", "globals": "^15.15.0", "kolorist": "^1.8.0", "local-pkg": "^1.1.1", "mlly": "^1.7.4" } }, "sha512-EfJS0rLfVuRuJRn4psJHtK2A9TqVnkxPpHY6lYHiB9+8eSuudsxbwMiavocG45ujOo6FJ+CIRlRnlOGinzkaGQ=="],

package.json

@@ -35,6 +35,7 @@
 	"dependencies": {
 		"@fontsource/roboto": "^5.2.8",
 		"@iconify-json/material-symbols": "^1.2.46",
+		"@iconify-json/svg-spinners": "^1.2.4",
 		"@neteasecloudmusicapienhanced/api": "^4.29.17",
 		"@unocss/core": "^66.5.6",
 		"@unocss/extractor-svelte": "^66.5.6",

src/components/status/Dialog.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Layer } from "m3-svelte"
+  import { fade } from "svelte/transition"
+
+  let { open = $bindable(), ...p }: {
+    title: string,
+    children?: any,
+    buttons?: {
+      text: string,
+      onclick: () => void
+    }[]
+    open: boolean
+  } = $props()
+
+  let buttons = $derived(p.buttons ?? [{
+    text: '取消', onclick: () => open = false
+  }])
+</script>
+
+{#if open}
+<div class="cbox absolute inset-0 drop-shadow-xl" transition:fade>
+  <div class="vbox rounded-28px mbg-surface-container-high w-312px">
+    <div class="vbox gap-16px p-26px pb-0">
+      <div class="m3-font-headline-small mfg-on-surface">{p.title}</div>
+      <div class="m3-font-body-medium mfg-on-surface-variant">
+        {@render p.children?.()}
+      </div>
+    </div>
+    <div class="hbox gap-16px p-26px py-20px pl-8px pr-24px justify-end">
+      {#each buttons as button}
+        <button class="px-16px py-10px mfg-primary relative rounded-12px" onclick={button.onclick}>
+          <Layer />
+          {button.text}
+        </button>
+      {/each}
+    </div> 
+  </div>
+</div>
+{/if}