refactor: improve ui of logout page (#6810)

#### What type of PR is this?

/area core
/kind improvement
/milestone 2.20.x

#### What this PR does / why we need it:

优化退出登录页面的 UI。

<img width="568" alt="image" src="https://github.com/user-attachments/assets/dd3b405b-e200-478a-ba87-b0d474e6ee1f">


#### Does this PR introduce a user-facing change?

```release-note
None
```

application/src/main/java/run/halo/app/security/LogoutSecurityConfigurer.java

@@ -11,6 +11,8 @@ import org.springframework.http.HttpStatus;
 import org.springframework.http.MediaType;
 import org.springframework.security.config.web.server.ServerHttpSecurity;
 import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.ReactiveSecurityContextHolder;
+import org.springframework.security.core.context.SecurityContext;
 import org.springframework.security.web.server.WebFilterExchange;
 import org.springframework.security.web.server.authentication.logout.DelegatingServerLogoutHandler;
 import org.springframework.security.web.server.authentication.logout.RedirectServerLogoutSuccessHandler;
@@ -21,6 +23,7 @@ import org.springframework.web.reactive.function.server.RouterFunction;
 import org.springframework.web.reactive.function.server.RouterFunctions;
 import org.springframework.web.reactive.function.server.ServerResponse;
 import reactor.core.publisher.Mono;
+import run.halo.app.core.user.service.UserService;
 import run.halo.app.security.authentication.SecurityConfigurer;
 import run.halo.app.security.authentication.rememberme.RememberMeServices;
 
@@ -55,13 +58,18 @@ public class LogoutSecurityConfigurer implements SecurityConfigurer {
         }
 
         @Bean
-        RouterFunction<ServerResponse> logoutPage() {
+        RouterFunction<ServerResponse> logoutPage(UserService userService) {
             return RouterFunctions.route()
                 .GET("/logout", request -> {
+                    var user = ReactiveSecurityContextHolder.getContext()
+                        .map(SecurityContext::getAuthentication)
+                        .map(Authentication::getName)
+                        .flatMap(userService::getUser);
                     var exchange = request.exchange();
                     var contextPath = exchange.getRequest().getPath().contextPath().value();
                     return ServerResponse.ok().render("logout", Map.of(
-                        "action", contextPath + "/logout"
+                        "action", contextPath + "/logout",
+                        "user", user
                     ));
                 })
                 .build();

application/src/main/resources/templates/gateway_fragments/logout.html

@@ -1,5 +1,16 @@
 <form th:fragment="form" class="halo-form" id="logout-form" name="logout-form" th:action="@{/logout}" method="post">
+    <div class="user-info" th:object="${user}">
+        <img th:if="*{spec.avatar}" th:src="*{spec.avatar}" class="user-avatar" />
+        <div class="user-details">
+            <span th:text="#{form.currentUser.label}"></span>
+            <span class="user-name" th:text="|*{spec.displayName}(@*{metadata.name})|"></span>
+        </div>
+    </div>
     <div class="form-item">
         <button type="submit" th:text="#{form.submit}"></button>
     </div>
-</form>
+
+    <div class="form-item">
+        <a href="javascript:history.back()" class="cancel-link" th:text="#{form.cancel}"> </a>
+    </div>
+</form>

application/src/main/resources/templates/gateway_fragments/logout.properties

@@ -1 +1,3 @@
-form.submit=退出登录
+form.submit=退出登录
+form.cancel=取消
+form.currentUser.label=当前登录的用户：

application/src/main/resources/templates/gateway_fragments/logout_en.properties

@@ -1 +1,3 @@
-form.submit=Logout
+form.submit=Logout
+form.cancel=Cancel
+form.currentUser.label=Currently logged in user:

application/src/main/resources/templates/gateway_fragments/logout_es.properties

@@ -1 +1,3 @@
-form.submit=Cerrar Sesión
+form.submit=Cerrar Sesión
+form.cancel=Cancelar
+form.currentUser.label=Usuario actualmente conectado:

application/src/main/resources/templates/gateway_fragments/logout_zh_TW.properties

@@ -1 +1,3 @@
-form.submit=退出登入
+form.submit=退出登入
+form.cancel=取消
+form.currentUser.label=當前登入的使用者：

application/src/main/resources/templates/logout.html

@@ -1,14 +1,55 @@
-<!doctype html>
+<!DOCTYPE html>
 <html
     xmlns:th="https://www.thymeleaf.org"
-    th:replace="~{gateway_fragments/layout:: layout(title = |#{title} - ${site.title}|, head = null, body = ~{::body})}"
+    th:replace="~{gateway_fragments/layout:: layout(title = |#{title} - ${site.title}|, head = ~{::head}, body = ~{::body})}"
 >
     <th:block th:fragment="body">
-        <div class="gateway-wrapper">
+        <div class="gateway-wrapper logout-page-wrapper">
+            <div th:replace="~{gateway_fragments/common::haloLogo}"></div>
             <div class="halo-form-wrapper">
                 <h1 class="form-title" th:text="#{form.title}"></h1>
                 <form th:replace="~{gateway_fragments/logout::form}"></form>
             </div>
+            <div th:replace="~{gateway_fragments/common::languageSwitcher}"></div>
         </div>
     </th:block>
+
+    <th:block th:fragment="head">
+        <style>
+            .logout-page-wrapper .user-info {
+                border-radius: var(--rounded-lg);
+                padding: var(--spacing-xs);
+                gap: var(--spacing-lg);
+                display: flex;
+                margin-bottom: 2em;
+                align-items: center;
+                border: 1px dashed #dfe6ecb3;
+            }
+
+            .logout-page-wrapper .user-avatar {
+                width: 4em;
+                border-radius: 100%;
+            }
+
+            .logout-page-wrapper .user-details {
+                color: var(--color-text);
+                font-size: var(--text-sm);
+                gap: var(--spacing-xs);
+                display: flex;
+                flex-direction: column;
+            }
+
+            .logout-page-wrapper .user-name {
+                font-weight: 600;
+                color: #333;
+            }
+
+            .logout-page-wrapper .cancel-link {
+                color: var(--color-link);
+                font-size: var(--text-sm);
+                text-decoration: none;
+                text-align: center;
+            }
+        </style>
+    </th:block>
 </html>