feat: npm install 'SvelteToast" && deploy.

package-lock.json

 {
-  "name": "daisyui-svelte-vite",
+  "name": "rrpg.link_frontend",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "daisyui-svelte-vite",
+      "name": "rrpg.link_frontend",
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^2",
+        "@zerodevx/svelte-toast": "^0.9.5",
         "autoprefixer": "^10",
         "daisyui": "^3",
         "postcss": "^8",
@@ -477,6 +478,15 @@
         "vite": "^4.0.0"
       }
     },
+    "node_modules/@zerodevx/svelte-toast": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.9.5.tgz",
+      "integrity": "sha512-JLeB/oRdJfT+dz9A5bgd3Z7TuQnBQbeUtXrGIrNWMGqWbabpepBF2KxtWVhL2qtxpRqhae2f6NAOzH7xs4jUSw==",
+      "dev": true,
+      "peerDependencies": {
+        "svelte": "^3.57.0 || ^4.0.0"
+      }
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -2005,6 +2015,13 @@
         "vitefu": "^0.2.4"
       }
     },
+    "@zerodevx/svelte-toast": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.9.5.tgz",
+      "integrity": "sha512-JLeB/oRdJfT+dz9A5bgd3Z7TuQnBQbeUtXrGIrNWMGqWbabpepBF2KxtWVhL2qtxpRqhae2f6NAOzH7xs4jUSw==",
+      "dev": true,
+      "requires": {}
+    },
     "any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",

package.json

@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2",
+    "@zerodevx/svelte-toast": "^0.9.5",
     "autoprefixer": "^10",
     "daisyui": "^3",
     "postcss": "^8",

src/App.svelte

 <script>
   import { onMount } from 'svelte';
   import { _theme } from './stores';
+  import { SvelteToast, toast } from '@zerodevx/svelte-toast';
+
+  /**
+   * NOTE: 配置 svelteToast
+   * @url {url} 文档 <https://github.com/zerodevx/svelte-toast>
+   * @url {url} 示例 <https://zerodevx.github.io/svelte-toast/>
+   */
+  window.toast = toast;
+
   /**主题*/
   const themes = [
     'light',
@@ -51,8 +60,8 @@
       text: '存档操作',
       hint: '导入/导出存档或使用云存档',
       click: () => {
-        console.warn('跳转到存档配置页面.');
-        // window.open('/save_export/');
+        if (location.host == 'rrpg.duels.link') window.open('/save_export/');
+        else toast.push('域名不正确, 无法跳转到指定页面.');
       }
     },
     {
@@ -161,3 +170,32 @@
     </ul>
   </div>
 </div>
+
+<!-- toast container -->
+<div class="toastHolder">
+  <SvelteToast
+    options={{
+      // Optionally set default options here
+      theme: {
+        // NOTE: 整个 daisyUI 的 css颜色变量 都是 hsl 写的, 要用 hsl(var(--xxx)) 写
+        '--toastColor': 'hsl(var(--bc) / var(--tw-text-opacity, 1))',
+        '--toastBackground': 'hsl(var(--b1) / var(--tw-bg-opacity, 1))',
+        '--toastBarBackground': 'hsl(var(--p))',
+        '--toastBorderRadius': 'var(--rounded-box)'
+      },
+      reversed: true
+    }}
+  />
+</div>
+
+<!-- ----------------------------------------------- STYLE ----------------------------------------------- -->
+
+<style>
+  /* NOTE: 这里 SvelteToast 的方向只能在 root 里设置, 不能在 option->theme 里设置  */
+  .toastHolder {
+    --toastContainerTop: auto;
+    --toastContainerBottom: 1rem;
+    --toastWidth: auto;
+    font-size: 14px;
+  }
+</style>