feat: 优化闪现消息的显示

app/__init__.py

@@ -1,4 +1,4 @@
-from flask import Flask
+from flask import Flask, Blueprint, get_flashed_messages
 from waitress import serve
 
 from conf import Config
@@ -12,6 +12,23 @@ app: Optional["App"] = None
 
 class App:
     app: Optional["App"] = None
+    base = Blueprint("base", __name__)
+
+    @staticmethod
+    @base.app_context_processor
+    def inject_base():
+        return {"loc": Config.base_location,
+                "copy_right": "SuperHuan",
+                "github_link": r"https://github.com/SuperH-0630/HGSSystem"}
+
+    @staticmethod
+    @base.app_context_processor
+    def inject_flash_message():
+        msg = []
+        for i in get_flashed_messages():
+            msg.append(i)
+        return {"flash_msg": msg,
+                "flash_height": len(msg)}
 
     def __new__(cls, *args, **kwargs):
         if App.app is not None:
@@ -20,6 +37,7 @@ class App:
 
     def __init__(self):
         self._app = Flask(__name__)
+        self._app.register_blueprint(self.base)
 
     def conf(self, db: DB):
         self._app.config["SECRET_KEY"] = Config.wtf_secret  # FlaskForm 需要使用

app/index/views.py

@@ -1,4 +1,3 @@
-from conf import Config
 from flask import render_template, Blueprint, Flask
 from tool.type_ import Optional
 
@@ -26,13 +25,6 @@ def error_403(e):
     return render_template("hello/error.html", error_code="403", error_info=e), 403
 
 
-@hello.app_context_processor
-def inject_base():
-    return {"loc": Config.base_location,
-            "copy_right": "SuperHuan",
-            "github_link": r"https://github.com/SuperH-0630/HGSSystem"}
-
-
 def creat_hello_website(app_: Flask):
     global app
     if app is None:

app/static/styles/base.css

@@ -72,18 +72,37 @@ a.nav-top-item:hover, a.nav-top-item:active {
 }
 
 /* 闪现消息 */
+
+@keyframes show_flash_message {
+    0% {
+        color: white;
+        background-color: #FFFFFF;
+    }
+    50% {
+        color: black;
+        background-color: rgba(221, 160, 221);
+    }
+    100% {
+        color: white;
+        background-color: #FFFFFF;
+    }
+
+}
+
 .top-msg {
     display: block;
     width: 60%;
     text-align: center;
 
     border-radius: 15px;
-    background-color: rgba(64, 224, 208);
 
     font-size: 25px;
     height: 50px;
     line-height: 50px;
     margin: 5px auto;
+
+    animation-name: show_flash_message;
+    animation-duration: 3s;
 }
 
 /* 内容 */

app/templates/base.html

@@ -57,22 +57,29 @@
 
 <article>
     {% block flash %}
-        <section class="top-msg-section">
-            {% for message in get_flashed_messages() %}
-                <p class="top-msg"> {{ message }} </p>
+        <style>
+            .top-msg-section {
+                height: calc({{ flash_height }}px * 55);
+                transition: height 1.5s;
+            }
+        </style>
+
+        <ul class="top-msg-section">
+            {% for message in flash_msg %}
+                <li class="top-msg"> {{ flash_height }} {{ message }} </li>
             {% endfor %}
             <script>
-                console.log("doneA")
                 setTimeout(function () {
-                    console.log("doneB")
-                    let p_flash = document.querySelectorAll("p.top-msg");
-                    for (let i = 0; i < p_flash.length; i += 1) {
-                        p_flash[i].style.display = 'none';
-                        console.log("doneC")
+                    let ul_flash = document.querySelector("ul.top-msg-section");
+                    ul_flash.style.height = "20px";
+
+                    let li_flash = document.querySelectorAll("li.top-msg");
+                    for (let i = 0; i < li_flash.length; i += 1) {
+                        li_flash[i].style.display = 'none';
                     }
                 }, 3000)
             </script>
-        </section>
+        </ul>
     {% endblock %}
 
     {% block h1_title_ %}