登录组件风格调整

settings.yaml

@@ -135,8 +135,8 @@ spec:
               help: '输入后台管理按钮图标class，清空不显示图标。'
             - $formkit: text
               name: console_logout_class
-              label: 注销登录按钮图标
-              help: '输入注销登录按钮图标class，清空不显示图标。'
+              label: 退出登录按钮图标
+              help: '输入退出登录按钮图标class，清空不显示图标。'
         - $formkit: group
           name: console
           if: $get(show_console).value != 'false'

src/css/style.less

@@ -5328,6 +5328,7 @@ button.swiper-pagination-bullet {
     position: absolute;
     width: auto;
     min-width: 8rem;
+    right: -6.8rem;
     top: 60px;
     z-index: 5;
     opacity: 0;
@@ -5348,21 +5349,19 @@ button.swiper-pagination-bullet {
       & > a {
         color: var(--title);
         font-size: 15px;
-      }
 
-      & > i {
-        margin-right: 5px;
+        i {
           color: var(--title);
           font-size: 18px;
         }
-
+      }
     }
 
     &::before {
       content: "";
       position: absolute;
       top: -10px;
-      right: 1.8rem;
+      left: 50%;
       transform: translateX(-50%);
       width: 0;
       height: 0;
@@ -5372,21 +5371,19 @@ button.swiper-pagination-bullet {
     }
   }
 
-}
-
-.navbar-logon:hover .navbar-logon-group,
-.navbar-logon:focus-within .navbar-logon-group {
+  &.active {
+    .navbar-logon-group {
       visibility: visible;
       opacity: 1;
       transform: translateX(-50%) perspective(600px) rotateX(0);
     }
 
-.navbar-logon-group-menu:hover ,
-.navbar-logon-group-menu:focus-within {
+    .navbar-logon-group-menu:hover {
       background: var(--bg-a);
 
       a, i {
         color: var(--theme);
       }
-
+    }
+  }
 }

src/js/common.js

@@ -143,6 +143,25 @@ const commonContext = {
       }
     })
   },
+  /* 激活登录窗口下拉框功能 */
+  initLogonMenu() {
+    $('.navbar-logon').each(function (index, item) {
+      const trigger = $(item).attr('trigger') || 'click'
+      if (trigger === 'hover') {
+        $(this).hover(
+          () => $(this).addClass('active'),
+          () => $(this).removeClass('active')
+        )
+      } else {
+        $(this).on('click', function (e) {
+          e.stopPropagation()
+          $(this).toggleClass('active')
+          $(document).one('click', () => $(this).removeClass('active'))
+          e.stopPropagation()
+        })
+      }
+    })
+  },
   /* 处理滚动 */
   initScroll() {
     window.initTop = 0

templates/common/navbar.html

@@ -75,7 +75,7 @@
                th:title="${theme.config.basic_style.console.console_title}">
                 <i th:class="${#strings.defaultString(theme.config.basic_style.console.console_icon, 'ri-equalizer-line')}"></i>
             </a>
-            <div th:if="${theme.config.basic_style.show_console == 'logon'}" class="navbar-logon" th:with="currentUser = ${contributorFinder.getContributor(#authentication.name)}">
+            <div th:if="${theme.config.basic_style.show_console == 'logon'}" class="navbar-logon" trigger="hover" th:with="currentUser = ${contributorFinder.getContributor(#authentication.name)}">
                 <div class="navbar-logon-head">
                     <img th:src="${currentUser.avatar ?: #theme.assets('/img/avatar.svg')}"
                          th:alt="${currentUser.displayName}"
@@ -83,20 +83,16 @@
                 </div>
                 <ul class="navbar-logon-group">
                     <li sec:authorize="isAuthenticated()" class="navbar-logon-group-menu">
-                        <i th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_person_class)}" th:class="${theme.config.basic_style.logon.console_person_class}"></i>
-                        <a href="/uc" target="_blank">个人中心</a>
+                        <a href="/uc" target="_blank"><i th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_person_class)}" th:class="${theme.config.basic_style.logon.console_person_class}"></i> 个人中心</a>
                     </li>
                     <li sec:authorize="isAuthenticated()" class="navbar-logon-group-menu">
-                        <i th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_manage_class)}" th:class="${theme.config.basic_style.logon.console_manage_class}"></i>
-                        <a href="/console" target="_blank">后台管理</a>
+                        <a href="/console" target="_blank"><i th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_manage_class)}" th:class="${theme.config.basic_style.logon.console_manage_class}"></i> 后台管理</a>
                     </li>
                     <li sec:authorize="isAuthenticated()" class="navbar-logon-group-menu">
-                        <i th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_logout_class)}" th:class="${theme.config.basic_style.logon.console_logout_class}"></i>
-                        <a href="/logout">注销登录</a>
+                        <a href="/logout"><i th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_logout_class)}" th:class="${theme.config.basic_style.logon.console_logout_class}"></i> 退出登录</a>
                     </li>
                     <li sec:authorize="isAnonymous()" class="navbar-logon-group-menu">
-                        <i th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_login_class)}" th:class="${theme.config.basic_style.logon.console_login_class}"></i>
-                        <a href="/login" onclick="this.href = '/login?redirect_uri=' + encodeURIComponent(window.location.href)">登录</a>
+                        <a href="/login" onclick="this.href = '/login?redirect_uri=' + encodeURIComponent(window.location.href)"><i th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_login_class)}" th:class="${theme.config.basic_style.logon.console_login_class}"></i> 登录</a>
                     </li>
                 </ul>
             </div>

theme.yaml

@@ -30,7 +30,7 @@ spec:
   settingName: theme-dream2-plus-setting
   configMapName: theme-dream2-plus-configMap
   # 版本号
-  version: 1.3.2.beta6
+  version: 1.3.2.beta8
   # 最低支持的 Halo 版本
   require: ">=2.20.0"
   # 许可