From 6095e9c9bddea55defe12f4265bf9d9fcc0c541d Mon Sep 17 00:00:00 2001
From: wangruidong <940853815@qq.com>
Date: Fri, 18 Jul 2025 15:50:50 +0800
Subject: [PATCH] perf: Modify the layout to flex

---
 .../templates/authentication/login.html       | 75 ++++++++--------
 apps/templates/_base_only_content.html        | 46 ++++++----
 apps/templates/_foot_js.html                  | 11 +--
 apps/templates/_without_nav_base.html         | 86 ++++++++++++-------
 apps/templates/base.html                      | 42 ++++-----
 5 files changed, 148 insertions(+), 112 deletions(-)

diff --git a/apps/authentication/templates/authentication/login.html b/apps/authentication/templates/authentication/login.html
index aea72a6ee..c09efb911 100644
--- a/apps/authentication/templates/authentication/login.html
+++ b/apps/authentication/templates/authentication/login.html
@@ -69,23 +69,27 @@
         }
 
         .login-content {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
             height: 500px;
             width: 1000px;
+            margin-top: auto;
+            margin-bottom: auto;
         }
 
 
         body {
-            position: relative;
+            box-sizing: border-box;
+            min-height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
             width: 100vw;
             height: 100vh;
             background-color: #f3f3f3;
-            {#height: calc(100vh - (100vh - 470px) / 3);#}
+        {#height: calc(100vh - (100vh - 470px) / 3);#}
         }
 
+
         .captcha {
             float: right;
         }
@@ -138,7 +142,7 @@
         }
 
         .jms-title {
-            {#padding: 22px 10px 10px;#}
+        {#padding: 22px 10px 10px;#}
         }
 
         .more-login-items {
@@ -318,7 +322,7 @@
     </div>
     <div class="left-form-box {% if not form.challenge and not form.captcha %} no-captcha-challenge {% endif %}">
         <div class="mobile-logo" style="padding-bottom: 45px; box-sizing: border-box">
-	        <div class="jms-title">
+            <div class="jms-title">
                 <img style="width: 60px; height: 60px" src="{{ INTERFACE.logo_logout }}" alt="Logo"/>
                 <span style="padding-left: 10px">{{ INTERFACE.login_title }}</span>
             </div>
@@ -330,17 +334,18 @@
                 </h2>
                 <ul class=" nav navbar-top-links navbar-right">
                     <li class="dropdown">
-                        <a class="dropdown-toggle login-page-language" data-bs-toggle="dropdown" href="#" target="_blank">
+                        <a class="dropdown-toggle login-page-language" data-bs-toggle="dropdown" href="#"
+                           target="_blank">
                             <i class="fa fa-globe fa-lg" style="margin-right: 2px"></i>
                             <span>{{ current_lang.title }}<b class="caret"></b></span>
                         </a>
                         <ul class="dropdown-menu profile-dropdown dropdown-menu-right">
                             {% for lang in langs %}
                                 <li>
-                                <a href="{% url 'i18n-switch' lang=lang.code %}">
-                                    <span>{{ lang.title }}</span>
-                                </a>
-                            </li>
+                                    <a href="{% url 'i18n-switch' lang=lang.code %}">
+                                        <span>{{ lang.title }}</span>
+                                    </a>
+                                </li>
                             {% endfor %}
                         </ul>
                     </li>
@@ -350,11 +355,11 @@
                 <form id="login-form" action="" method="post" role="form" novalidate="novalidate">
                     {% csrf_token %}
                     <div style="line-height: 17px;margin-bottom: 20px;color: #999999;">
-                    {% if form.non_field_errors %}
-                        <p class="help-block red-fonts">
-                            {{ form.non_field_errors.as_text }}
-                        </p>
-                    {% endif %}
+                        {% if form.non_field_errors %}
+                            <p class="help-block red-fonts">
+                                {{ form.non_field_errors.as_text }}
+                            </p>
+                        {% endif %}
                     </div>
 
                     {% bootstrap_field form.username show_label=False %}
@@ -365,15 +370,15 @@
                                name="{{ form.password.html_name }}">
                         {% if form.password.errors %}
                             <p class="help-block" style="text-align: left">
-                            {{ form.password.errors.as_text }}
-                        </p>
+                                {{ form.password.errors.as_text }}
+                            </p>
                         {% endif %}
                     </div>
                     {% if form.challenge %}
                         {% bootstrap_field form.challenge show_label=False %}
                     {% elif form.mfa_type %}
                         <div class="form-group" style="display: flex">
-                        {% include '_mfa_login_field.html' %}
+                            {% include '_mfa_login_field.html' %}
                         </div>
                     {% elif form.captcha %}
                         <div class="captcha-field">
@@ -403,25 +408,25 @@
                     </div>
 
                     {% if demo_mode %}
-                    <div>
-                        <p class="red-fonts" style='text-align: center;'>
-                            {% trans 'Username' %}: demo {% trans 'Password' %}: jumpserver
-                        </p>
-                    </div>
+                        <div>
+                            <p class="red-fonts" style='text-align: center;'>
+                                {% trans 'Username' %}: demo {% trans 'Password' %}: jumpserver
+                            </p>
+                        </div>
                     {% endif %}
 
                     <div class="more-login">
                         {% if auth_methods %}
                             <div class="more-methods-title {{ current_lang.code }}">
-                                    {% trans "More login options" %}
+                                {% trans "More login options" %}
                             </div>
                             <div class="more-login-items">
-                            {% for method in auth_methods %}
-                                <a href="{{ method.url }}" class="more-login-item">
-                                    <i class="fa"><img src="{{ method.logo }}" height="15" width="15"/> </i>
-                                    {{ method.name }}
-                                </a>
-                            {% endfor %}
+                                {% for method in auth_methods %}
+                                    <a href="{{ method.url }}" class="more-login-item">
+                                        <i class="fa"><img src="{{ method.logo }}" height="15" width="15"/> </i>
+                                        {{ method.name }}
+                                    </a>
+                                {% endfor %}
                             </div>
                         {% else %}
                             <div class="text-center" style="display: inline-block;">
@@ -447,14 +452,16 @@
         $('#password-hidden').val(passwordEncrypted); //返回给密码输入input
         $('#login-form').submit(); //post提交
     }
+
     function checkHealth() {
-        let url =  "{% url 'health' %}";
+        let url = "{% url 'health' %}";
         requestApi({
             url: url,
             method: "GET",
             flash_message: false,
         })
     }
+
     setInterval(checkHealth, 30 * 1000);
 </script>
 </html>
diff --git a/apps/templates/_base_only_content.html b/apps/templates/_base_only_content.html
index 9b441299e..385a1d152 100644
--- a/apps/templates/_base_only_content.html
+++ b/apps/templates/_base_only_content.html
@@ -15,41 +15,55 @@
     <style>
         .passwordBox {
             max-width: 560px;
-            margin: 0 auto;
+            margin-bottom: auto;
             padding: 100px 20px 20px 20px;
+            width: 100%;
         }
 
         .ibox-content {
             padding: 30px;
         }
+
         .ibox-context-margin {
             margin: 20px 0 0 0;
         }
+
+        body {
+            box-sizing: border-box;
+            min-height: 100%;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .wrapper {
+            margin: auto;
+        }
     </style>
     {% block custom_head_css_js %} {% endblock %}
 </head>
 
 <body class="gray-bg">
-    <div class="passwordBox animated fadeInDown">
-        <div class="row">
-            <div class="col-md-12">
-                <div class="ibox-content">
-                    <h2 class="font-bold">
-                        {% block title %}{% endblock %}
-                    </h2>
-                    <div class="ibox-context-margin">
-                        {% block content %} {% endblock %}
-                    </div>
+<div class="passwordBox animated fadeInDown">
+    <div class="row">
+        <div class="col-md-12">
+            <div class="ibox-content">
+                <h2 class="font-bold">
+                    {% block title %}{% endblock %}
+                </h2>
+                <div class="ibox-context-margin">
+                    {% block content %} {% endblock %}
                 </div>
             </div>
         </div>
-        <hr/>
-        <div class="row">
-            <div class="col-md-12">
-                 {% include '_copyright.html' %}
-            </div>
+    </div>
+    <hr/>
+    <div class="row">
+        <div class="col-md-12">
+            {% include '_copyright.html' %}
         </div>
     </div>
+</div>
 </body>
 {% include '_foot_js.html' %}
 {% block custom_foot_js %} {% endblock %}
diff --git a/apps/templates/_foot_js.html b/apps/templates/_foot_js.html
index 5c17c7ac4..6eb916ea8 100644
--- a/apps/templates/_foot_js.html
+++ b/apps/templates/_foot_js.html
@@ -18,14 +18,9 @@
         }
 
         .markdown-footer {
-            position: absolute;
-            bottom: 0;
-            left: 50%;
+            flex-grow: 0;
+            flex-shrink: 0;
             width: 285px;
-            transform: translate(-50%, -50%);
-            @media (min-width: 768px) {
-                top: 97%;
-            }
         }
 
         .markdown-footer p {
@@ -55,7 +50,7 @@
         });
         const markdownContent = `{{ INTERFACE.footer_content|escapejs }}`;
         const markdownRef = document.getElementById('markdown-output');
-        
+
         if (markdownRef && markdownContent) {
             const renderedContent = md.render(markdownContent.trim());
             markdownRef.innerHTML = renderedContent;
diff --git a/apps/templates/_without_nav_base.html b/apps/templates/_without_nav_base.html
index 1f29ba17b..3e4b0dafa 100644
--- a/apps/templates/_without_nav_base.html
+++ b/apps/templates/_without_nav_base.html
@@ -3,39 +3,59 @@
 
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="UTF-8">
-		<title> {{ INTERFACE.login_title }} </title>
-        <link rel="shortcut icon" href="{{ INTERFACE.favicon }}" type="image/x-icon">
-        {% include '_head_css_js.html' %}
-        <link href="{% static 'css/jumpserver.css' %}" rel="stylesheet">
-        <link href="{% static 'css/style.css' %}" rel="stylesheet">
-        <link rel="stylesheet" href="{% static 'css/otp.css' %}" />
-        <script src="{% static "js/plugins/qrcode/qrcode.js" %}"></script>
-	</head>
+<head>
+    <meta charset="UTF-8">
+    <title> {{ INTERFACE.login_title }} </title>
+    <link rel="shortcut icon" href="{{ INTERFACE.favicon }}" type="image/x-icon">
+    {% include '_head_css_js.html' %}
+    <link href="{% static 'css/jumpserver.css' %}" rel="stylesheet">
+    <link href="{% static 'css/style.css' %}" rel="stylesheet">
+    <link rel="stylesheet" href="{% static 'css/otp.css' %}"/>
+    <script src="{% static "js/plugins/qrcode/qrcode.js" %}"></script>
+    <style>
+        body {
+            box-sizing: border-box;
+            min-height: 100%;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
 
-	<body style="background-color: #f3f3f4">
-		 <header>
-		 	<div class="logo">
-		 		<a href="{% url 'index' %}">
-                    <img src="{{ INTERFACE.logo_logout }}" alt="" width="50px" height="50px"/>
-                </a>
-		 		<span style="font-size: 21px; line-height: 50px">{{ INTERFACE.login_title }}</span>
-		 	</div>
-		 	<div>
-                <a href="{% url 'index' %}">{% trans 'Home page' %}</a>
-		 	</div>
-		 </header>
-         <body>
-         {% block body %}
-         {% endblock %}
-         </body>
-         <footer>
-             <div style="margin-top: 100px;">
-                 {% include '_copyright.html' %}
-             </div>
-         </footer>
-         {% include '_foot_js.html' %}
-	</body>
+        header {
+            width: 100%;
+            flex-grow: 0;
+            flex-shrink: 0;
+        }
+
+        .wrapper {
+            margin: auto;
+        }
+    </style>
+
+</head>
+
+<body style="background-color: #f3f3f4">
+<header>
+    <div class="logo">
+        <a href="{% url 'index' %}">
+            <img src="{{ INTERFACE.logo_logout }}" alt="" width="50px" height="50px"/>
+        </a>
+        <span style="font-size: 21px; line-height: 50px">{{ INTERFACE.login_title }}</span>
+    </div>
+    <div>
+        <a href="{% url 'index' %}">{% trans 'Home page' %}</a>
+    </div>
+</header>
+<div class="wrapper">
+    {% block body %}
+    {% endblock %}
+</div>
+<footer>
+    <div style="margin-top: 100px;">
+        {% include '_copyright.html' %}
+    </div>
+</footer>
+{% include '_foot_js.html' %}
+</body>
 </html>
 
diff --git a/apps/templates/base.html b/apps/templates/base.html
index fb15cc79b..4dd169822 100644
--- a/apps/templates/base.html
+++ b/apps/templates/base.html
@@ -20,11 +20,11 @@
 <div id="wrapper">
     <div id="page-wrapper" class="gray-bg">
         {% include '_header_bar.html' %}
-         <div class="alert alert-info help-message alert-dismissable page-message" style="display: none">
-             <button aria-hidden="true" data-dismiss="alert" class="close hide-btn" type="button">×</button>
-             {% block help_message %}
-             {% endblock %}
-         </div>
+        <div class="alert alert-info help-message alert-dismissable page-message" style="display: none">
+            <button aria-hidden="true" data-dismiss="alert" class="close hide-btn" type="button">×</button>
+            {% block help_message %}
+            {% endblock %}
+        </div>
         {% include '_message.html' %}
         {% block content %}{% endblock %}
         {% include '_footer.html' %}
@@ -35,23 +35,23 @@
 {% include '_foot_js.html' %}
 {% block custom_foot_js %} {% endblock %}
 <script>
-function getMessagePathKey() {
-    var path = window.location.pathname;
-    var key = 'message_' + btoa(path);
-    return key
-}
-
-$(document).ready(function () {
-    var pathKey = getMessagePathKey();
-    var hidden = window.localStorage.getItem(pathKey);
-    var hasMessage = $('.page-message').text().trim().length > 5;
-    if (!hidden && hasMessage) {
-        $(".help-message").show();
+    function getMessagePathKey() {
+        var path = window.location.pathname;
+        var key = 'message_' + btoa(path);
+        return key
     }
-}).on('click', '.hide-btn', function () {
-    var pathKey = getMessagePathKey();
-    window.localStorage.setItem(pathKey, '1')
-})
+
+    $(document).ready(function () {
+        var pathKey = getMessagePathKey();
+        var hidden = window.localStorage.getItem(pathKey);
+        var hasMessage = $('.page-message').text().trim().length > 5;
+        if (!hidden && hasMessage) {
+            $(".help-message").show();
+        }
+    }).on('click', '.hide-btn', function () {
+        var pathKey = getMessagePathKey();
+        window.localStorage.setItem(pathKey, '1')
+    })
 
 </script>
 </html>