refactor(frontend): replace toast system with zibll notyf

This commit is contained in:
kate522 committed 2026-08-18 02:38:43 +08:00
1 parent fb11a7ed0c
commit 86614c4905
33 files changed
+603 -802

No files matched your search

+6 -98
View File
@@ -1,87 +1,10 @@
/**
* AKSRT Enhancements — 全局 UI 增强
*
* 包含:Toast 通知、骨架屏、悬停动效、暗色过渡、滚动感知
* 包含:骨架屏、悬停动效、暗色过渡、滚动感知
* 所有选择器使用 aksrt- 前缀避免冲突
*/
/* ============================================================
* 1. Toast 通知系统
* ============================================================ */
.aksrt-toast-container {
position: fixed;
bottom: 80px;
right: 16px;
max-width: 360px;
z-index: 10000;
display: flex;
flex-direction: column-reverse;
gap: 8px;
pointer-events: none;
}
.aksrt-toast {
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: var(--main-radius, 8px);
color: #fff;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
backdrop-filter: saturate(5) blur(20px);
-webkit-backdrop-filter: saturate(5) blur(20px);
transform: translateX(120%);
opacity: 0;
animation: aksrt-toast-in 0.35s cubic-bezier(0.35, 0.71, 0.46, 1.08) forwards;
cursor: pointer;
transition: transform 0.3s, opacity 0.3s;
}
.aksrt-toast.is-dismissing {
transform: translateX(120%);
opacity: 0;
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}
.aksrt-toast__icon {
font-size: 18px;
flex-shrink: 0;
}
.aksrt-toast__text {
flex: 1;
min-width: 0;
line-height: 1.4;
}
/* Toast 类型 — 对齐 zibll 纯色 */
.aksrt-toast--success {
background: rgba(16, 185, 129, 0.9);
}
.aksrt-toast--info {
background: rgba(59, 130, 246, 0.9);
}
.aksrt-toast--warning {
background: rgba(245, 158, 11, 0.9);
}
.aksrt-toast--danger,
.aksrt-toast--error {
background: rgba(239, 68, 68, 0.9);
}
.aksrt-toast--loading {
background: rgba(107, 114, 128, 0.9);
}
.aksrt-toast--loading .aksrt-toast__icon {
animation: aksrt-spin 1s linear infinite;
}
.aksrt-modal-auth__error.is-success {
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.22);
@@ -103,24 +26,13 @@
line-height: 1.6;
}
@keyframes aksrt-toast-in {
from {
transform: translateX(120%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes aksrt-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ============================================================
* 2. 骨架屏加载动画
* 1. 骨架屏加载动画
* ============================================================ */
.aksrt-skeleton {
background: linear-gradient(
@@ -192,7 +104,7 @@
}
/* ============================================================
* 3. 悬停交互动效
* 2. 悬停交互动效
* ============================================================ */
/* 卡片放大 */
@@ -271,7 +183,7 @@
}
/* ============================================================
* 4. 暗色模式过渡 (View Transitions API)
* 3. 暗色模式过渡 (View Transitions API)
* ============================================================ */
::view-transition-old(root),
::view-transition-new(root) {
@@ -307,14 +219,10 @@ body.dark-theme::view-transition-new(root) {
--aksrt-blur-bg: var(--surface-1);
}
.aksrt-toast {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
/* ============================================================
* 5. 滚动方向感知
* 4. 滚动方向感知
* ============================================================ */
/* 向下滚动时隐藏导航栏 */
@@ -348,7 +256,7 @@ body.aksrt-body-scroll .aksrt-show-on-scroll {
}
/* ============================================================
* 6. 图片灯箱
* 5. 图片灯箱
* ============================================================ */
.aksrt-lightbox {
position: fixed;