style: 为后台导航栏图标添加悬停动画效果
continuous-integration/drone/push Build is passing

This commit is contained in:
seahi committed 2026-09-29 21:00:28 +08:00
1 parent b862a7e91a
commit 4834d3d5f1
1 file changed
+99 -9
+99 -9
View File
@@ -66,7 +66,7 @@
<div class="nav-group">
<a
href={resolve('/admin')}
class="nav-item {$page.url.pathname === '/admin' ? 'active' : ''}"
class="nav-item nav-dashboard {$page.url.pathname === '/admin' ? 'active' : ''}"
>
<LayoutDashboard size={18} />
<span>仪表盘</span>
@@ -77,7 +77,7 @@
<div class="nav-group-title">创作库</div>
<a
href={resolve('/admin/posts')}
class="nav-item {$page.url.pathname === '/admin/posts' ? 'active' : ''}"
class="nav-item nav-posts {$page.url.pathname === '/admin/posts' ? 'active' : ''}"
>
<FileText size={18} />
<span>全部{$page.data.aliases?.post || '文章'}</span>
@@ -85,7 +85,7 @@
<a
href={resolve('/admin/pages')}
class="nav-item {$page.url.pathname.startsWith('/admin/pages') &&
class="nav-item nav-pages {$page.url.pathname.startsWith('/admin/pages') &&
$page.url.pathname !== '/admin/pages/new'
? 'active'
: ''}"
@@ -99,21 +99,25 @@
<div class="nav-group-title">集合与归类</div>
<a
href={resolve('/admin/categories')}
class="nav-item {$page.url.pathname.startsWith('/admin/categories') ? 'active' : ''}"
class="nav-item nav-categories {$page.url.pathname.startsWith('/admin/categories')
? 'active'
: ''}"
>
<FolderTree size={18} />
<span>{$page.data.aliases?.category || '分类'}目录</span>
</a>
<a
href={resolve('/admin/series')}
class="nav-item {$page.url.pathname.startsWith('/admin/series') ? 'active' : ''}"
class="nav-item nav-series {$page.url.pathname.startsWith('/admin/series')
? 'active'
: ''}"
>
<Library size={18} />
<span>专题{$page.data.aliases?.series || '系列'}</span>
</a>
<a
href={resolve('/admin/tags')}
class="nav-item {$page.url.pathname.startsWith('/admin/tags') ? 'active' : ''}"
class="nav-item nav-tags {$page.url.pathname.startsWith('/admin/tags') ? 'active' : ''}"
>
<Tags size={18} />
<span>{$page.data.aliases?.tag || '标签'}库</span>
@@ -124,7 +128,9 @@
<div class="nav-group-title">资源库</div>
<a
href={resolve('/admin/files')}
class="nav-item {$page.url.pathname.startsWith('/admin/files') ? 'active' : ''}"
class="nav-item nav-files {$page.url.pathname.startsWith('/admin/files')
? 'active'
: ''}"
>
<ImageIcon size={18} />
<span>媒体与文件</span>
@@ -136,13 +142,15 @@
<div class="sidebar-footer">
<a
href={resolve('/admin/settings')}
class="site-link {$page.url.pathname.startsWith('/admin/settings') ? 'active' : ''}"
class="site-link link-settings {$page.url.pathname.startsWith('/admin/settings')
? 'active'
: ''}"
title="站点设置"
>
<Settings size={15} aria-hidden="true" />
<span>站点设置</span>
</a>
<a href={resolve('/')} target="_blank" class="site-link" title="访问前台">
<a href={resolve('/')} target="_blank" class="site-link link-frontend" title="访问前台">
<ExternalLink size={15} aria-hidden="true" />
<span>访问前台</span>
</a>
@@ -426,6 +434,88 @@
}
}
/* --- 图标 Hover 动画 --- */
.nav-item :global(svg),
.site-link :global(svg) {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 仪表盘: 弹性脉冲 */
@keyframes pulse-icon {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
.nav-item.nav-dashboard:hover :global(svg) {
animation: pulse-icon 0.4s ease-in-out;
transform: scale(1.1); /* 停留在略大状态 */
}
/* 全部文章: 书页点头 */
.nav-item.nav-posts:hover :global(svg) {
transform-origin: bottom center;
transform: rotate(10deg);
}
/* 独立页面: 窗口悬浮 */
.nav-item.nav-pages:hover :global(svg) {
transform: translateY(-3px);
}
/* 分类目录: 层级延展 */
.nav-item.nav-categories:hover :global(svg) {
transform: translateX(3px) scale(1.05);
}
/* 专题系列: 书架倾斜 */
.nav-item.nav-series:hover :global(svg) {
transform-origin: bottom left;
transform: rotate(8deg);
}
/* 标签库: 挂件摇摆 */
@keyframes swing-icon {
0%,
100% {
transform: rotate(0);
}
25% {
transform: rotate(15deg);
}
75% {
transform: rotate(-10deg);
}
}
.nav-item.nav-tags:hover :global(svg) {
transform-origin: top left;
animation: swing-icon 0.6s ease-in-out;
transform: rotate(5deg);
}
/* 媒体与文件: 相框聚焦 */
.nav-item.nav-files:hover :global(svg) {
transform: scale(1.15);
}
/* 站点设置: 齿轮运转 */
@keyframes spin-icon {
100% {
transform: rotate(360deg);
}
}
.site-link.link-settings:hover :global(svg) {
animation: spin-icon 2s linear infinite;
}
/* 访问前台: 离站飞出 */
.site-link.link-frontend:hover :global(svg) {
transform: translate(2px, -2px);
}
.sidebar-overlay {
position: fixed;
top: 0;