From 969b32ab68efb5df260b904b647c38575b809777 Mon Sep 17 00:00:00 2001
From: Koha9 <36852125+Koha9@users.noreply.github.com>
Date: Sun, 13 Jul 2025 06:56:26 +0900
Subject: [PATCH] feat(ui): add bootstrap toast for messages

---
 app/main.py                 |  5 +++--
 app/templates/base.html     | 20 ++++++++++++++++++++
 app/templates/login.html    |  3 ---
 app/templates/playlist.html |  3 ---
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/main.py b/app/main.py
index f800ce5..4387724 100644
--- a/app/main.py
+++ b/app/main.py
@@ -85,7 +85,7 @@ async def login(
             {
                 "request": request,
                 "message": "连接成功",
-                "success": True,
+                "message_type": "success",
                 "theme": server_config.theme,
                 "path": "/login",
                 "token": token,
@@ -100,7 +100,7 @@ async def login(
             {
                 "request": request,
                 "message": f"连接失败：{str(e)}",
-                "success": False,
+                "message_type": "danger",
                 "theme": server_config.theme,
                 "path": "/login",
                 "scheme": scheme,
@@ -128,6 +128,7 @@ async def set_playlist(
         {
             "request": request,
             "message": f"设置成功：地址 {address}，间隔 {interval} 分钟",
+            "message_type": "info",
             "theme": server_config.theme,
             "path": "/playlist",
         },
diff --git a/app/templates/base.html b/app/templates/base.html
index 828078a..6921acf 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -87,6 +87,18 @@
             <main class="col ms-sm-auto px-md-4 py-4">
                 {% block content %}{% endblock %}
             </main>
+            {% if message %}
+            <div class="position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 1055; margin-top: 20px;">
+                <div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="d-flex">
+                        <div class="toast-body">
+                            {{ message }}
+                        </div>
+                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                </div>
+            </div>
+            {% endif %}
         </div>
     </div>
 
@@ -106,6 +118,14 @@
             // listen for system theme changes
             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyAutoTheme);
         }
+        // show toast message
+        document.addEventListener('DOMContentLoaded', () => {
+            const toastEl = document.getElementById('messageToast');
+            if (toastEl) {
+                const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
+                toast.show();
+            }
+        });
     </script>
 </body>
 
diff --git a/app/templates/login.html b/app/templates/login.html
index c5bfd43..24de3f8 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -35,9 +35,6 @@
     <button type="submit" class="btn btn-primary">连接</button>
 </form>
 
-{% if message %}
-<div class="alert alert-{{ 'success' if success else 'danger' }} mt-4">{{ message }}</div>
-{% endif %}
 <script>
     document.addEventListener('DOMContentLoaded', () => {
         const tokenInput = document.getElementById('token');
diff --git a/app/templates/playlist.html b/app/templates/playlist.html
index 4d4db62..aeaa3e4 100644
--- a/app/templates/playlist.html
+++ b/app/templates/playlist.html
@@ -20,7 +20,4 @@
     <button type="submit" class="btn btn-success">保存设置</button>
 </form>
 
-{% if message %}
-<div class="alert alert-info mt-4">{{ message }}</div>
-{% endif %}
 {% endblock %}
\ No newline at end of file