From 48b1db5880b43a29024ffa90c3875896a8e15490 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Mon, 21 Jul 2025 20:51:26 +0800
Subject: [PATCH] feat: add flex wrap for mobile

---
 open-isle-cli/src/assets/toast.css | 20 +++++++++++---------
 open-isle-cli/src/main.js          | 12 +++++++++++-
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/open-isle-cli/src/assets/toast.css b/open-isle-cli/src/assets/toast.css
index 4c120af62..22e79415a 100644
--- a/open-isle-cli/src/assets/toast.css
+++ b/open-isle-cli/src/assets/toast.css
@@ -1,4 +1,7 @@
-/* Custom styles for vue-toastification */
+.Vue-Toastification__toast {
+  border-radius: 20px;
+}
+
 .Vue-Toastification__toast--info {
   background-color: #d0e9ff;
   color: #1b6ec2;
@@ -8,26 +11,25 @@
   color: #2b7a2b;
 }
 .Vue-Toastification__toast--error {
-  background-color: #ffe4e4;
+  background-color: #f99a9a;
   color: #b73737;
 }
 
-@media (max-width: 600px) {
-  .Vue-Toastification__container {
+@media (max-width: 768px) {
+  .Vue-Toastification__container.open-isle-toast-style-v1 {
     width: auto;
     max-width: 90vw;
     right: 0.5em;
     left: auto;
   }
-  .Vue-Toastification__toast {
-    padding: 12px 14px;
-  }
+
   .Vue-Toastification__toast-body {
     font-size: 14px;
     line-height: 20px;
   }
+
   .Vue-Toastification__close-button {
-    font-size: 20px;
-    line-height: 20px;
+    font-size: 18px;
+    line-height: 18px;
   }
 }
diff --git a/open-isle-cli/src/main.js b/open-isle-cli/src/main.js
index e0f79b3bc..7a48c5a4d 100644
--- a/open-isle-cli/src/main.js
+++ b/open-isle-cli/src/main.js
@@ -30,7 +30,17 @@ initTheme()
 
 const app = createApp(App)
 app.use(router)
-app.use(Toast, { position: POSITION.TOP_RIGHT })
+app.use(
+  Toast, 
+  { 
+    position: POSITION.TOP_RIGHT,
+    containerClassName: "open-isle-toast-style-v1",
+    transition: "Vue-Toastification__fade",
+    // closeButton: false,
+    timeout: 2000,
+  }, 
+)
+
 app.mount('#app')
 
 checkToken().then(valid => {