登录组件风格调整

This commit is contained in:
j m 2024-12-05 20:59:20 +08:00
parent 09d7249977
commit ed586a9f95
7 changed files with 47 additions and 35 deletions

View File

@ -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'

View File

@ -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);
}
}
}
}

View File

@ -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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

@ -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"
# 许可