fix(ajax): show the reference skeleton on every load-more surface
Clicking 加载更多 in the 多栏目文章 widget showed no skeleton at all — the
list simply stayed still until the response arrived, then the new cards
appeared. The homepage stream, archives and comments already had a working
skeleton; the widget's AJAX load goes through a different client and never
found its loader.
Root cause was DOM placement, not visibility: ContentRenderer emitted
.post_ajax_loader as a *sibling* of .widget-ajaxpager, while the widget REST
client resolves it with container.querySelector('.post_ajax_loader'). The
node existed but could never match, so .is-loading was never added and the
skeleton stayed display:none. Inactive tab panes had the same shape, and the
direct-load branch of ajaxpager() emitted no loader at all.
Changes, all following the reference theme's post_ajax() contract in
zibll/js/main.js (beforeSend anchors the loader to the end of the list;
success only hides it, never removes it):
- ContentRenderer: nest the loader inside .widget-ajaxpager for both the
direct-load and inactive-tab branches, and drop the sibling append.
- widgets/frontend.js: anchorLoader() moves the loader to the end of the
list before .ajax-pag on every request; appended cards are inserted before
it; a replace preserves the node instead of wiping it with innerHTML; a
fallback loader is created when the DOM has none; loadItems() now returns
its promise; drop the unreachable is-loading auto-load branch.
- Message centre, user-home panels and the search page switch from spinner /
opacity feedback to the same .posts-item-shaped skeleton, so all AJAX
surfaces share one loading contract.
- Remove the second, never-wired skeleton system (.aksrt-skeleton-* in
core-ui.css) and the dead spinner stylesheets/rules (skeleton.css,
ajax-spinner.css, .load-more__*, --skeleton-base/--skeleton-shine) plus the
unregistered assets/js/waterfall.js.
- Extend the widget, message-centre, user-home and asset-ledger contract
tests to pin the loader inside the container, the class-only visibility
switch, and the absence of the deleted dead code.
Verified: 470 node tests, 136 PHP widget assertions, admin-contract and
widget-system audits all green; rebuilt public assets after the CSS/JS
removals.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed
1 parent
271e7f0518
commit
cf4554e7c8
25 files changed
+330
-981
No files matched your search
+5
-384
@@ -166,10 +166,6 @@ Full admin panel preserved (settings, OAuth, content tools, etc).
|
||||
--card-gap: 16px;
|
||||
--card-gap-lg: 20px;
|
||||
|
||||
/* ===== Skeleton loader ===== */
|
||||
--skeleton-base: var(--surface-2);
|
||||
--skeleton-shine: var(--surface-1);
|
||||
|
||||
/* ===== Extended tokens (used by components) ===== */
|
||||
--color-primary-light: var(--color-primary-soft);
|
||||
--color-surface: var(--surface-1);
|
||||
@@ -397,9 +393,6 @@ body.dark-theme {
|
||||
--footer-color: var(--color-ink-4);
|
||||
--shadow-md: var(--shadow);
|
||||
|
||||
--skeleton-base: #3a3b3e;
|
||||
--skeleton-shine: #444548;
|
||||
|
||||
/* Multi-color palette — dark mode: same hue, softer tint backgrounds */
|
||||
--aksrt-rose-soft: rgba(244, 63, 94, 0.18);
|
||||
--aksrt-blue-soft: rgba(59, 130, 246, 0.18);
|
||||
@@ -5105,8 +5098,11 @@ body:has(.modal.in) .float-right.position-center,
|
||||
/**
|
||||
* AKSRT Enhancements — 全局 UI 增强
|
||||
*
|
||||
* 包含：骨架屏、悬停动效、暗色过渡、滚动感知
|
||||
* 包含：悬停动效、暗色过渡、滚动感知
|
||||
* 所有选择器使用 aksrt- 前缀避免冲突
|
||||
*
|
||||
* 骨架屏不在此文件：唯一契约是 .placeholder 块 + .post_ajax_loader 容器
|
||||
* （inc/helpers/posts-renderer/markup.php 的 aksrt_render_placeholder）。
|
||||
*/
|
||||
|
||||
@keyframes aksrt-spin {
|
||||
@@ -5115,79 +5111,7 @@ body:has(.modal.in) .float-right.position-center,
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 1. 骨架屏加载动画
|
||||
* ============================================================ */
|
||||
.aksrt-skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(121, 121, 121, 0.08) 25%,
|
||||
rgba(121, 121, 121, 0.15) 37%,
|
||||
rgba(121, 121, 121, 0.08) 63%
|
||||
);
|
||||
background-size: 400% 100%;
|
||||
animation: aksrt-skeleton-shimmer 1.5s ease infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.aksrt-skeleton--image {
|
||||
height: 0;
|
||||
padding-bottom: 66.67%; /* 3:2 aspect ratio */
|
||||
}
|
||||
|
||||
.aksrt-skeleton--avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.aksrt-skeleton--title {
|
||||
height: 22px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.aksrt-skeleton--text {
|
||||
height: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aksrt-skeleton--text-short {
|
||||
height: 16px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.aksrt-skeleton--button {
|
||||
height: 36px;
|
||||
width: 100px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@keyframes aksrt-skeleton-shimmer {
|
||||
0% { background-position: 100% 50%; }
|
||||
100% { background-position: 0 50%; }
|
||||
}
|
||||
|
||||
/* 骨架屏组合：文章卡片骨架 */
|
||||
.aksrt-skeleton-card {
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.aksrt-skeleton-card .aksrt-skeleton--image {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.aksrt-skeleton-card__body {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 2. 悬停交互动效
|
||||
* 1. 悬停交互动效
|
||||
* ============================================================ */
|
||||
|
||||
/* 卡片放大 */
|
||||
@@ -5916,149 +5840,6 @@ body.aksrt-body-scroll .aksrt-show-on-scroll {
|
||||
color: var(--color-ink-4, #8A8F98);
|
||||
}
|
||||
|
||||
/* source: assets/css/frontend/skeleton.css */
|
||||
/* ========== 骨架屏加载 — 对齐 legacy skeleton loading ========== */
|
||||
.skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--surface-2, #eee);
|
||||
border-radius: var(--radius, 8px);
|
||||
}
|
||||
|
||||
.skeleton::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: skeleton-shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* 骨架屏变体 */
|
||||
.skeleton-text {
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.skeleton-text--title {
|
||||
height: 20px;
|
||||
width: 60%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeleton-text--short {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.skeleton-text--medium {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-avatar--sm {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.skeleton-avatar--lg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.skeleton-thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--radius, 8px);
|
||||
}
|
||||
|
||||
.skeleton-thumb--square {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.skeleton-thumb--card {
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
|
||||
}
|
||||
|
||||
/* 卡片骨架屏 */
|
||||
.skeleton-card {
|
||||
background: var(--surface-1, #fff);
|
||||
border-radius: var(--radius, 8px);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeleton-card__thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
}
|
||||
|
||||
.skeleton-card__body {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.skeleton-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 评论骨架屏 */
|
||||
.skeleton-comment {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
||||
}
|
||||
|
||||
.skeleton-comment__body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.skeleton-comment__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 通用骨架屏容器 */
|
||||
.skeleton-list .skeleton-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
||||
}
|
||||
|
||||
.skeleton-list .skeleton-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 减弱动画偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.skeleton::after {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* source: assets/css/frontend/empty-state.css */
|
||||
/* ========== 空状态 — 对齐 legacy empty state ========== */
|
||||
.empty-state {
|
||||
@@ -6320,50 +6101,6 @@ body.aksrt-body-scroll .aksrt-show-on-scroll {
|
||||
border-color: var(--color-primary, #f04494);
|
||||
}
|
||||
|
||||
/* AJAX 加载更多 */
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.load-more__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 24px;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line, rgba(50, 50, 50, 0.06));
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.load-more__btn:hover {
|
||||
color: var(--color-primary, #f04494);
|
||||
border-color: var(--color-primary, #f04494);
|
||||
}
|
||||
|
||||
.load-more__btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.load-more__spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--surface-3, #e8e8e8);
|
||||
border-top-color: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 移动端 */
|
||||
@media (max-width: 767px) {
|
||||
.pagination a,
|
||||
@@ -6397,122 +6134,6 @@ body.aksrt-body-scroll .aksrt-show-on-scroll {
|
||||
}
|
||||
}
|
||||
|
||||
/* source: assets/css/frontend/ajax-spinner.css */
|
||||
/* ========== AJAX 加载指示器 — 对齐 legacy loading spinner ========== */
|
||||
.aksrt-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
color: var(--color-ink-4, #999);
|
||||
font-size: 13px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-loading__spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--surface-3, #e8e8e8);
|
||||
border-top-color: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: aksrt-spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes aksrt-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 全屏加载遮罩 */
|
||||
.aksrt-loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.aksrt-loading-overlay__content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.aksrt-loading-overlay__spinner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid var(--surface-3, #e8e8e8);
|
||||
border-top-color: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: aksrt-spin 0.6s linear infinite;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
.aksrt-loading-overlay__text {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3, #777);
|
||||
}
|
||||
|
||||
/* 行内加载（替换内容时） */
|
||||
.aksrt-loading-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
color: var(--color-ink-4, #999);
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: aksrt-dot-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes aksrt-dot-pulse {
|
||||
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||
40% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
/* 页面加载进度条 */
|
||||
.aksrt-progress-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary, #f04494);
|
||||
z-index: 10000;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 减弱动画偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.aksrt-loading__spinner,
|
||||
.aksrt-loading-overlay__spinner {
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot {
|
||||
animation: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* source: assets/css/frontend/modal-runtime.css */
|
||||
/**
|
||||
* Modal runtime + ajax list primitives (shared).
|
||||
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
:root{--color-primary: #f04494;--color-primary-hover: #e0307e;--color-primary-active: #c9206d;--color-primary-soft: rgba(240, 68, 148, .1);--color-primary-softer: rgba(240, 68, 148, .05);--color-on-primary: #FFFFFF;--color-ink: #333333;--color-ink-2: #4e5358;--color-ink-3: #777777;--color-ink-4: #999999;--surface-page: #f5f6f7;--surface-1: #FFFFFF;--surface-2: #eeeeee;--surface-3: #e9ecef;--surface-4: #f8f8f8;--color-line: rgba(50, 50, 50, .06);--color-line-soft: rgba(0, 0, 0, .03);--color-line-stronger: rgba(50, 50, 50, .12);--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-info: #3B82F6;--color-accent: #18a058;--color-accent-soft: rgba(24, 160, 88, .12);--color-accent-shadow: rgba(24, 160, 88, .28);--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: .875rem;--text-md: 1.125rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 1.875rem;--text-3xl: 2.25rem;--text-4xl: 3rem;--text-5xl: 3.75rem;--leading-tight: 1.2;--leading-snug: 1.4;--leading-normal: 1.6;--leading-relaxed: 1.6;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--space-9: 48px;--space-10: 64px;--space-11: 80px;--space-12: 96px;--radius-xs: 3px;--radius-sm: 4px;--radius: 8px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-pill: 100px;--radius-avatar: 50%;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);--shadow-sm: 0 0 10px rgba(116, 116, 116, .08);--shadow: 0 0 10px rgba(116, 116, 116, .12);--shadow-lg: 0 12px 32px rgba(18, 18, 18, .1);--shadow-drawer: 0 18px 60px rgba(0, 0, 0, .2);--nav-height: 60px;--container: 1200px;--container-wide: 1440px;--container-read: 760px;--container-page: 880px;--sidebar-width: 311px;--content-gap: 24px;--section-gap: 24px;--sidebar-bp: 992px;--ease: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--dur-fast: .15s;--dur: .25s;--dur-slow: .4s;--focus-ring: 0 0 2px 3px rgba(253, 83, 161, .4);--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-overlay: 400;--z-modal: 500;--z-popover: 600;--z-toast: 700;--z-tooltip: 800;--radius-btn: 4px;--btn-sm-h: 28px;--btn-md-h: 34px;--btn-lg-h: 44px;--card-padding: 15px;--card-padding-sm: 10px;--card-gap: 16px;--card-gap-lg: 20px;--skeleton-base: var(--surface-2);--skeleton-shine: var(--surface-1);--color-primary-light: var(--color-primary-soft);--color-surface: var(--surface-1);--color-line-strong: var(--color-line);--color-bg-hover: var(--surface-2);--color-border-light: var(--color-line-soft);--color-fill: var(--surface-2);--color-warning-bg: #fffbe6;--color-warning-text: #ad6800;--text-secondary: var(--color-ink-3);--text-tertiary: var(--color-ink-4);--surface-active: var(--surface-2);--surface-card: var(--surface-1);--surface-hover: var(--surface-2);--surface-secondary: var(--surface-2);--radius-code: var(--radius);--radius-full: 100px;--shadow-xl: 0 0 10px rgba(116, 116, 116, .12);--space-16: 64px;--z-floating: 900;--transition-fast: .15s ease;--transition-base: .25s ease;--header-bg: var(--blur-bg);--header-color: var(--color-ink-2);--footer-bg: var(--surface-1);--footer-color: var(--color-ink-4);--blur-bg: rgba(255, 255, 255, .8);--float-btn-bg: rgba(200, 200, 200, .4);--font-heading: var(--font-ui);--radius-card: var(--radius);--radius-md: var(--radius);--color-primary-50: var(--color-primary-soft);--color-primary-dark: var(--color-primary-active);--shadow-md: var(--shadow);--mini-radius: calc(var(--radius) / 1.4);--aksrt-avatar-size-xs: 24px;--aksrt-avatar-size-sm: 32px;--aksrt-avatar-size: 40px;--aksrt-avatar-size-lg: 56px;--aksrt-avatar-size-xl: 80px;--aksrt-card-thumb-scale: 56.25%;--aksrt-rose: #f43f5e;--aksrt-rose-soft: rgba(244, 63, 94, .12);--aksrt-blue: #3b82f6;--aksrt-blue-soft: rgba(59, 130, 246, .12);--aksrt-green: #10b981;--aksrt-green-soft: rgba(16, 185, 129, .12);--aksrt-orange: #f97316;--aksrt-orange-soft:rgba(249, 115, 22, .12);--aksrt-purple: #8b5cf6;--aksrt-purple-soft:rgba(139, 92, 246, .12);--aksrt-cyan: #06b6d4;--aksrt-cyan-soft: rgba(6, 182, 212, .12);--aksrt-yellow: #eab308;--aksrt-yellow-soft:rgba(234, 179, 8, .12);--aksrt-red: #ef4444;--aksrt-red-soft: rgba(239, 68, 68, .12);--aksrt-teal: #14b8a6;--aksrt-teal-soft: rgba(20, 184, 166, .12);--aksrt-indigo: #6366f1;--aksrt-indigo-soft:rgba(99, 102, 241, .12);--aksrt-pink: #ec4899;--aksrt-pink-soft: rgba(236, 72, 153, .12);--aksrt-vip-gold-1: #f6d365;--aksrt-vip-gold-2: #fda085;--akLine truncated
|
||||
:root{--color-primary: #f04494;--color-primary-hover: #e0307e;--color-primary-active: #c9206d;--color-primary-soft: rgba(240, 68, 148, .1);--color-primary-softer: rgba(240, 68, 148, .05);--color-on-primary: #FFFFFF;--color-ink: #333333;--color-ink-2: #4e5358;--color-ink-3: #777777;--color-ink-4: #999999;--surface-page: #f5f6f7;--surface-1: #FFFFFF;--surface-2: #eeeeee;--surface-3: #e9ecef;--surface-4: #f8f8f8;--color-line: rgba(50, 50, 50, .06);--color-line-soft: rgba(0, 0, 0, .03);--color-line-stronger: rgba(50, 50, 50, .12);--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-info: #3B82F6;--color-accent: #18a058;--color-accent-soft: rgba(24, 160, 88, .12);--color-accent-shadow: rgba(24, 160, 88, .28);--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: .875rem;--text-md: 1.125rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 1.875rem;--text-3xl: 2.25rem;--text-4xl: 3rem;--text-5xl: 3.75rem;--leading-tight: 1.2;--leading-snug: 1.4;--leading-normal: 1.6;--leading-relaxed: 1.6;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--space-9: 48px;--space-10: 64px;--space-11: 80px;--space-12: 96px;--radius-xs: 3px;--radius-sm: 4px;--radius: 8px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-pill: 100px;--radius-avatar: 50%;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);--shadow-sm: 0 0 10px rgba(116, 116, 116, .08);--shadow: 0 0 10px rgba(116, 116, 116, .12);--shadow-lg: 0 12px 32px rgba(18, 18, 18, .1);--shadow-drawer: 0 18px 60px rgba(0, 0, 0, .2);--nav-height: 60px;--container: 1200px;--container-wide: 1440px;--container-read: 760px;--container-page: 880px;--sidebar-width: 311px;--content-gap: 24px;--section-gap: 24px;--sidebar-bp: 992px;--ease: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--dur-fast: .15s;--dur: .25s;--dur-slow: .4s;--focus-ring: 0 0 2px 3px rgba(253, 83, 161, .4);--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-overlay: 400;--z-modal: 500;--z-popover: 600;--z-toast: 700;--z-tooltip: 800;--radius-btn: 4px;--btn-sm-h: 28px;--btn-md-h: 34px;--btn-lg-h: 44px;--card-padding: 15px;--card-padding-sm: 10px;--card-gap: 16px;--card-gap-lg: 20px;--color-primary-light: var(--color-primary-soft);--color-surface: var(--surface-1);--color-line-strong: var(--color-line);--color-bg-hover: var(--surface-2);--color-border-light: var(--color-line-soft);--color-fill: var(--surface-2);--color-warning-bg: #fffbe6;--color-warning-text: #ad6800;--text-secondary: var(--color-ink-3);--text-tertiary: var(--color-ink-4);--surface-active: var(--surface-2);--surface-card: var(--surface-1);--surface-hover: var(--surface-2);--surface-secondary: var(--surface-2);--radius-code: var(--radius);--radius-full: 100px;--shadow-xl: 0 0 10px rgba(116, 116, 116, .12);--space-16: 64px;--z-floating: 900;--transition-fast: .15s ease;--transition-base: .25s ease;--header-bg: var(--blur-bg);--header-color: var(--color-ink-2);--footer-bg: var(--surface-1);--footer-color: var(--color-ink-4);--blur-bg: rgba(255, 255, 255, .8);--float-btn-bg: rgba(200, 200, 200, .4);--font-heading: var(--font-ui);--radius-card: var(--radius);--radius-md: var(--radius);--color-primary-50: var(--color-primary-soft);--color-primary-dark: var(--color-primary-active);--shadow-md: var(--shadow);--mini-radius: calc(var(--radius) / 1.4);--aksrt-avatar-size-xs: 24px;--aksrt-avatar-size-sm: 32px;--aksrt-avatar-size: 40px;--aksrt-avatar-size-lg: 56px;--aksrt-avatar-size-xl: 80px;--aksrt-card-thumb-scale: 56.25%;--aksrt-rose: #f43f5e;--aksrt-rose-soft: rgba(244, 63, 94, .12);--aksrt-blue: #3b82f6;--aksrt-blue-soft: rgba(59, 130, 246, .12);--aksrt-green: #10b981;--aksrt-green-soft: rgba(16, 185, 129, .12);--aksrt-orange: #f97316;--aksrt-orange-soft:rgba(249, 115, 22, .12);--aksrt-purple: #8b5cf6;--aksrt-purple-soft:rgba(139, 92, 246, .12);--aksrt-cyan: #06b6d4;--aksrt-cyan-soft: rgba(6, 182, 212, .12);--aksrt-yellow: #eab308;--aksrt-yellow-soft:rgba(234, 179, 8, .12);--aksrt-red: #ef4444;--aksrt-red-soft: rgba(239, 68, 68, .12);--aksrt-teal: #14b8a6;--aksrt-teal-soft: rgba(20, 184, 166, .12);--aksrt-indigo: #6366f1;--aksrt-indigo-soft:rgba(99, 102, 241, .12);--aksrt-pink: #ec4899;--aksrt-pink-soft: rgba(236, 72, 153, .12);--aksrt-vip-gold-1: #f6d365;--aksrt-vip-gold-2: #fda085;--aksrt-grad-sunset-1: #f093fb;--aksrt-grad-sunset-2: #f5576c;--aksrt-graLine truncated
|
||||
@@ -141,10 +141,6 @@
|
||||
--card-gap: 16px;
|
||||
--card-gap-lg: 20px;
|
||||
|
||||
/* ===== Skeleton loader ===== */
|
||||
--skeleton-base: var(--surface-2);
|
||||
--skeleton-shine: var(--surface-1);
|
||||
|
||||
/* ===== Extended tokens (used by components) ===== */
|
||||
--color-primary-light: var(--color-primary-soft);
|
||||
--color-surface: var(--surface-1);
|
||||
@@ -372,9 +368,6 @@ body.dark-theme {
|
||||
--footer-color: var(--color-ink-4);
|
||||
--shadow-md: var(--shadow);
|
||||
|
||||
--skeleton-base: #3a3b3e;
|
||||
--skeleton-shine: #444548;
|
||||
|
||||
/* Multi-color palette — dark mode: same hue, softer tint backgrounds */
|
||||
--aksrt-rose-soft: rgba(244, 63, 94, 0.18);
|
||||
--aksrt-blue-soft: rgba(59, 130, 246, 0.18);
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
/* ========== AJAX 加载指示器 — 对齐 legacy loading spinner ========== */
|
||||
.aksrt-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
color: var(--color-ink-4, #999);
|
||||
font-size: 13px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-loading__spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--surface-3, #e8e8e8);
|
||||
border-top-color: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: aksrt-spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes aksrt-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 全屏加载遮罩 */
|
||||
.aksrt-loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.aksrt-loading-overlay__content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.aksrt-loading-overlay__spinner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid var(--surface-3, #e8e8e8);
|
||||
border-top-color: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: aksrt-spin 0.6s linear infinite;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
.aksrt-loading-overlay__text {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3, #777);
|
||||
}
|
||||
|
||||
/* 行内加载（替换内容时） */
|
||||
.aksrt-loading-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
color: var(--color-ink-4, #999);
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: aksrt-dot-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes aksrt-dot-pulse {
|
||||
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||
40% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
/* 页面加载进度条 */
|
||||
.aksrt-progress-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary, #f04494);
|
||||
z-index: 10000;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 减弱动画偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.aksrt-loading__spinner,
|
||||
.aksrt-loading-overlay__spinner {
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot {
|
||||
animation: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,11 @@
|
||||
/**
|
||||
* AKSRT Enhancements — 全局 UI 增强
|
||||
*
|
||||
* 包含：骨架屏、悬停动效、暗色过渡、滚动感知
|
||||
* 包含：悬停动效、暗色过渡、滚动感知
|
||||
* 所有选择器使用 aksrt- 前缀避免冲突
|
||||
*
|
||||
* 骨架屏不在此文件：唯一契约是 .placeholder 块 + .post_ajax_loader 容器
|
||||
* （inc/helpers/posts-renderer/markup.php 的 aksrt_render_placeholder）。
|
||||
*/
|
||||
|
||||
@keyframes aksrt-spin {
|
||||
@@ -11,79 +14,7 @@
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 1. 骨架屏加载动画
|
||||
* ============================================================ */
|
||||
.aksrt-skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(121, 121, 121, 0.08) 25%,
|
||||
rgba(121, 121, 121, 0.15) 37%,
|
||||
rgba(121, 121, 121, 0.08) 63%
|
||||
);
|
||||
background-size: 400% 100%;
|
||||
animation: aksrt-skeleton-shimmer 1.5s ease infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.aksrt-skeleton--image {
|
||||
height: 0;
|
||||
padding-bottom: 66.67%; /* 3:2 aspect ratio */
|
||||
}
|
||||
|
||||
.aksrt-skeleton--avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.aksrt-skeleton--title {
|
||||
height: 22px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.aksrt-skeleton--text {
|
||||
height: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aksrt-skeleton--text-short {
|
||||
height: 16px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.aksrt-skeleton--button {
|
||||
height: 36px;
|
||||
width: 100px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@keyframes aksrt-skeleton-shimmer {
|
||||
0% { background-position: 100% 50%; }
|
||||
100% { background-position: 0 50%; }
|
||||
}
|
||||
|
||||
/* 骨架屏组合：文章卡片骨架 */
|
||||
.aksrt-skeleton-card {
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.aksrt-skeleton-card .aksrt-skeleton--image {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.aksrt-skeleton-card__body {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 2. 悬停交互动效
|
||||
* 1. 悬停交互动效
|
||||
* ============================================================ */
|
||||
|
||||
/* 卡片放大 */
|
||||
|
||||
@@ -106,10 +106,20 @@
|
||||
}
|
||||
|
||||
.messages-center.is-loading .messages-center__content {
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 加载态由消息骨架承担（与文章列表 .post_ajax_loader 同一契约），
|
||||
不再让按钮 spinner 与内容透明度抢反馈。 */
|
||||
.messages-list > .post_ajax_loader {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.messages-list > .post_ajax_loader.is-loading {
|
||||
display: block;
|
||||
animation: aksrtFadeIn 0.2s ease both;
|
||||
}
|
||||
|
||||
.messages-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -455,22 +465,36 @@ html.dark .message-detail {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.messages-center.is-loading .messages-pagination__more span::before {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 7px;
|
||||
border: 2px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
vertical-align: -2px;
|
||||
animation: messages-pagination-spin 0.7s linear infinite;
|
||||
/* 消息骨架：复用真实 .message-item 结构与 .placeholder 动画契约，
|
||||
只把内容换成灰块（参考主题 post_ajax loader 的同构思路）。 */
|
||||
.messages-list > .post_ajax_loader .message-item--placeholder {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@keyframes messages-pagination-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
.messages-list > .post_ajax_loader .message-item--placeholder .message-item__icon {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.messages-list > .post_ajax_loader .message-item--placeholder .message-item__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.messages-list > .post_ajax_loader .message-item--placeholder .placeholder {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.messages-list > .post_ajax_loader .message-item--placeholder .placeholder.s1 {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.messages-list > .post_ajax_loader .message-item--placeholder .message-item__actions {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.messages-list > .post_ajax_loader .placeholder {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -479,10 +503,6 @@ html.dark .message-detail {
|
||||
.messages-pagination__more {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.messages-center.is-loading .messages-pagination__more span::before {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- 响应式 ---- */
|
||||
|
||||
@@ -155,50 +155,6 @@
|
||||
border-color: var(--color-primary, #f04494);
|
||||
}
|
||||
|
||||
/* AJAX 加载更多 */
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.load-more__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 24px;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line, rgba(50, 50, 50, 0.06));
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.load-more__btn:hover {
|
||||
color: var(--color-primary, #f04494);
|
||||
border-color: var(--color-primary, #f04494);
|
||||
}
|
||||
|
||||
.load-more__btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.load-more__spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--surface-3, #e8e8e8);
|
||||
border-top-color: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 移动端 */
|
||||
@media (max-width: 767px) {
|
||||
.pagination a,
|
||||
|
||||
Vendored
-141
@@ -1,141 +0,0 @@
|
||||
/* ========== 骨架屏加载 — 对齐 legacy skeleton loading ========== */
|
||||
.skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--surface-2, #eee);
|
||||
border-radius: var(--radius, 8px);
|
||||
}
|
||||
|
||||
.skeleton::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: skeleton-shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* 骨架屏变体 */
|
||||
.skeleton-text {
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.skeleton-text--title {
|
||||
height: 20px;
|
||||
width: 60%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeleton-text--short {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.skeleton-text--medium {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-avatar--sm {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.skeleton-avatar--lg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.skeleton-thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--radius, 8px);
|
||||
}
|
||||
|
||||
.skeleton-thumb--square {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.skeleton-thumb--card {
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
|
||||
}
|
||||
|
||||
/* 卡片骨架屏 */
|
||||
.skeleton-card {
|
||||
background: var(--surface-1, #fff);
|
||||
border-radius: var(--radius, 8px);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeleton-card__thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
}
|
||||
|
||||
.skeleton-card__body {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.skeleton-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 评论骨架屏 */
|
||||
.skeleton-comment {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
||||
}
|
||||
|
||||
.skeleton-comment__body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.skeleton-comment__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 通用骨架屏容器 */
|
||||
.skeleton-list .skeleton-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
||||
}
|
||||
|
||||
.skeleton-list .skeleton-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 减弱动画偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.skeleton::after {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -548,7 +548,21 @@
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard-panel.is-loading {
|
||||
opacity: .6;
|
||||
transition: opacity var(--dur-fast, .15s) var(--ease, ease);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 面板翻页的加载态由列表骨架承担（与文章列表 .post_ajax_loader 同一契约）。 */
|
||||
.aksrt-user-home .dashboard-panel .post_ajax_loader {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard-panel.is-loading .post_ajax_loader {
|
||||
display: block;
|
||||
animation: aksrtFadeIn 0.2s ease both;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.aksrt-user-home .dashboard-panel .post_ajax_loader .placeholder {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
+25
-1
@@ -70,11 +70,18 @@
|
||||
currentList.querySelectorAll('[data-notification-id]').forEach(function (item) {
|
||||
existingIds.add(item.dataset.notificationId);
|
||||
});
|
||||
// 骨架常驻列表末尾：新条目一律插到它之前，形状与参考主题一致
|
||||
// （post_ajax 的 beforeSend 把 loader 挪到最后一张卡片之后）。
|
||||
var skeleton = currentList.querySelector(':scope > .post_ajax_loader');
|
||||
var firstAdded = null;
|
||||
incomingList.querySelectorAll('.message-item').forEach(function (item) {
|
||||
if (existingIds.has(item.dataset.notificationId)) return;
|
||||
if (!firstAdded) firstAdded = item;
|
||||
currentList.appendChild(item);
|
||||
if (skeleton) {
|
||||
currentList.insertBefore(item, skeleton);
|
||||
} else {
|
||||
currentList.appendChild(item);
|
||||
}
|
||||
});
|
||||
|
||||
var currentPagination = content.querySelector('.messages-pagination');
|
||||
@@ -93,6 +100,9 @@
|
||||
var settings = options || {};
|
||||
root.classList.add('is-loading');
|
||||
content.setAttribute('aria-busy', 'true');
|
||||
// 骨架只在 AJAX 请求期间展开（.is-loading），与文章列表翻页同一契约。
|
||||
var skeleton = content.querySelector('.messages-list > .post_ajax_loader');
|
||||
if (skeleton) skeleton.classList.add('is-loading');
|
||||
|
||||
return post('aksrt_load_message_center', {
|
||||
view: requested.view,
|
||||
@@ -111,7 +121,19 @@
|
||||
if (settings.append && state.paginateType === 'ajax_lists') {
|
||||
firstAdded = appendMessagePage(result.data.content);
|
||||
} else {
|
||||
// 替换时保留骨架容器（参考主题 success 后只 hide() 不删除），
|
||||
// 让后续翻页复用同一节点而不是回到无骨架状态。
|
||||
var keep = content.querySelector('.post_ajax_loader');
|
||||
content.innerHTML = result.data.content;
|
||||
var nextSkeleton = content.querySelector('.post_ajax_loader');
|
||||
if (keep && !nextSkeleton) {
|
||||
var list = content.querySelector('.messages-list');
|
||||
if (list) {
|
||||
list.appendChild(keep);
|
||||
} else {
|
||||
content.appendChild(keep);
|
||||
}
|
||||
}
|
||||
}
|
||||
updateHeaderBadge(result.data.unread);
|
||||
|
||||
@@ -131,6 +153,8 @@
|
||||
}).finally(function () {
|
||||
root.classList.remove('is-loading');
|
||||
content.removeAttribute('aria-busy');
|
||||
var loader = content.querySelector('.messages-list > .post_ajax_loader');
|
||||
if (loader) loader.classList.remove('is-loading');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,173 +0,0 @@
|
||||
/**
|
||||
* AKSRT Waterfall — 瀑布流/异步列表
|
||||
*
|
||||
* 提供纯 CSS column-based 瀑布流布局和无限滚动加载能力。
|
||||
* 无外部依赖。
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Initialize waterfall layout on a container.
|
||||
*
|
||||
* @param {HTMLElement} container - The container element
|
||||
* @param {Object} options
|
||||
* @param {number} options.columns - Number of columns (default: auto from CSS)
|
||||
* @param {string} options.itemSelector - Child item selector (default: '.waterfall-item')
|
||||
* @param {number} options.gap - Gap between items in px (default: 16)
|
||||
*/
|
||||
function Waterfall(container, options) {
|
||||
if (!container) return;
|
||||
|
||||
this.container = container;
|
||||
this.options = Object.assign({
|
||||
columns: 0,
|
||||
itemSelector: '.waterfall-item',
|
||||
gap: 16,
|
||||
}, options || {});
|
||||
|
||||
this._resizeHandler = this.layout.bind(this);
|
||||
window.addEventListener('resize', this._resizeHandler);
|
||||
this.layout();
|
||||
}
|
||||
|
||||
Waterfall.prototype.layout = function () {
|
||||
var items = this.container.querySelectorAll(this.options.itemSelector);
|
||||
if (items.length === 0) return;
|
||||
|
||||
var cols = this.options.columns;
|
||||
if (cols <= 0) {
|
||||
var containerWidth = this.container.offsetWidth;
|
||||
cols = Math.max(1, Math.floor(containerWidth / 280));
|
||||
}
|
||||
|
||||
var gap = this.options.gap;
|
||||
var colWidth = (this.container.offsetWidth - gap * (cols - 1)) / cols;
|
||||
var colHeights = new Array(cols).fill(0);
|
||||
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i];
|
||||
item.style.width = colWidth + 'px';
|
||||
item.style.position = 'absolute';
|
||||
|
||||
// Find shortest column
|
||||
var minHeight = Infinity;
|
||||
var minCol = 0;
|
||||
for (var c = 0; c < cols; c++) {
|
||||
if (colHeights[c] < minHeight) {
|
||||
minHeight = colHeights[c];
|
||||
minCol = c;
|
||||
}
|
||||
}
|
||||
|
||||
item.style.left = (minCol * (colWidth + gap)) + 'px';
|
||||
item.style.top = colHeights[minCol] + 'px';
|
||||
|
||||
colHeights[minCol] += item.offsetHeight + gap;
|
||||
}
|
||||
|
||||
// Set container height to tallest column
|
||||
var maxHeight = Math.max.apply(null, colHeights);
|
||||
this.container.style.height = maxHeight + 'px';
|
||||
this.container.style.position = 'relative';
|
||||
};
|
||||
|
||||
Waterfall.prototype.relayout = function () {
|
||||
this.layout();
|
||||
};
|
||||
|
||||
Waterfall.prototype.destroy = function () {
|
||||
window.removeEventListener('resize', this._resizeHandler);
|
||||
};
|
||||
|
||||
/**
|
||||
* Infinite scroll loader.
|
||||
*
|
||||
* @param {Object} options
|
||||
* @param {string} options.containerSelector - List container selector
|
||||
* @param {string} options.loadMoreSelector - Load-more button selector
|
||||
* @param {Function} options.loadMore - Async function that loads more items
|
||||
* @param {number} options.threshold - Distance from bottom to trigger (default: 200)
|
||||
*/
|
||||
function InfiniteScroll(options) {
|
||||
this.options = Object.assign({
|
||||
containerSelector: '.aksrt-infinite-list',
|
||||
loadMoreSelector: '.aksrt-load-more',
|
||||
loadMore: null,
|
||||
threshold: 200,
|
||||
}, options || {});
|
||||
|
||||
this.loading = false;
|
||||
this.hasMore = true;
|
||||
this._scrollHandler = this._check.bind(this);
|
||||
|
||||
window.addEventListener('scroll', this._scrollHandler);
|
||||
this._check();
|
||||
}
|
||||
|
||||
InfiniteScroll.prototype._check = function () {
|
||||
if (this.loading || !this.hasMore) return;
|
||||
|
||||
var loadMoreBtn = document.querySelector(this.options.loadMoreSelector);
|
||||
if (!loadMoreBtn) {
|
||||
this.hasMore = false;
|
||||
return;
|
||||
}
|
||||
|
||||
var rect = loadMoreBtn.getBoundingClientRect();
|
||||
if (rect.top < window.innerHeight + this.options.threshold) {
|
||||
this._load();
|
||||
}
|
||||
};
|
||||
|
||||
InfiniteScroll.prototype._load = function () {
|
||||
if (!this.options.loadMore) return;
|
||||
|
||||
this.loading = true;
|
||||
var self = this;
|
||||
|
||||
this.options.loadMore().then(function (hasMore) {
|
||||
self.hasMore = hasMore !== false;
|
||||
self.loading = false;
|
||||
if (self.hasMore) {
|
||||
self._check();
|
||||
}
|
||||
}).catch(function () {
|
||||
self.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
InfiniteScroll.prototype.destroy = function () {
|
||||
window.removeEventListener('scroll', this._scrollHandler);
|
||||
};
|
||||
|
||||
// Auto-init
|
||||
var waterfallInstances = [];
|
||||
|
||||
function relayoutAll() {
|
||||
waterfallInstances.forEach(function (instance) {
|
||||
if (instance && typeof instance.relayout === 'function') {
|
||||
instance.relayout();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function autoInit() {
|
||||
document.querySelectorAll('[data-aksrt-waterfall]:not([data-aksrt-waterfall-bound])').forEach(function (el) {
|
||||
el.dataset.aksrtWaterfallBound = '1';
|
||||
var cols = parseInt(el.dataset.aksrtWaterfallColumns) || 0;
|
||||
var gap = parseInt(el.dataset.aksrtWaterfallGap) || 16;
|
||||
waterfallInstances.push(new Waterfall(el, { columns: cols, gap: gap }));
|
||||
});
|
||||
relayoutAll();
|
||||
}
|
||||
|
||||
jQuery(document).off('auto_fun.aksrt-waterfall').on('auto_fun.aksrt-waterfall', autoInit);
|
||||
jQuery(document).off('lazyloaded.aksrt-waterfall').on('lazyloaded.aksrt-waterfall', relayoutAll);
|
||||
|
||||
// Export to global
|
||||
window.AksrtWaterfall = Waterfall;
|
||||
window.AksrtInfiniteScroll = InfiniteScroll;
|
||||
})();
|
||||
@@ -109,16 +109,27 @@
|
||||
}
|
||||
|
||||
function loaderOf(container) {
|
||||
if (!container) return null;
|
||||
return container.querySelector('.post_ajax_loader');
|
||||
}
|
||||
|
||||
function fallbackLoader() {
|
||||
var text = (window.aksrtData && aksrtData.ajaxLoading) || '加载中...';
|
||||
var node = document.createElement('div');
|
||||
node.className = 'post_ajax_loader';
|
||||
node.setAttribute('role', 'status');
|
||||
node.innerHTML = '<div class="mb20"><div class="text-center muted-2-color mt20"><i class="loading mr10"></i>' + text + '</div></div>';
|
||||
return node;
|
||||
}
|
||||
|
||||
function setBusy(container, busy) {
|
||||
if (!container) return;
|
||||
if (busy) {
|
||||
container.dataset.loading = '1';
|
||||
container.setAttribute('aria-busy', 'true');
|
||||
var loader = loaderOf(container);
|
||||
// 骨架开关走 .is-loading 类（modal-runtime.css），不写 inline display。
|
||||
if (loader) loader.classList.add('is-loading');
|
||||
var loader = loaderOf(container) || container.appendChild(fallbackLoader());
|
||||
loader.classList.add('is-loading');
|
||||
} else {
|
||||
delete container.dataset.loading;
|
||||
container.setAttribute('aria-busy', 'false');
|
||||
@@ -127,6 +138,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 参考主题 post_ajax 的 beforeSend 语义：骨架每次请求都挪到列表末尾
|
||||
// （最后一个条目之后、分页控件之前），请求成功后只隐藏而不删除，
|
||||
// 下一轮翻页复用同一个节点。
|
||||
function anchorLoader(container) {
|
||||
var pag = container.querySelector(':scope > .ajax-pag');
|
||||
var loader = loaderOf(container);
|
||||
if (!loader) return null;
|
||||
if (pag) {
|
||||
pag.parentNode.insertBefore(loader, pag);
|
||||
} else {
|
||||
container.appendChild(loader);
|
||||
}
|
||||
return loader;
|
||||
}
|
||||
|
||||
function loadItems(container, page, append) {
|
||||
var owner = container.closest('[data-widget]') || container;
|
||||
var widget = owner.dataset.widget || container.dataset.widget;
|
||||
@@ -134,28 +160,49 @@
|
||||
var segment = container.dataset.segment || owner.dataset.segment || '';
|
||||
if (!widget || !instance || !config.restUrl || container.dataset.loading === '1') return;
|
||||
setBusy(container, true);
|
||||
fetch(itemsUrl(widget, instance, page, segment), { credentials: 'same-origin', headers: { Accept: 'application/json' } })
|
||||
anchorLoader(container);
|
||||
return fetch(itemsUrl(widget, instance, page, segment), { credentials: 'same-origin', headers: { Accept: 'application/json' } })
|
||||
.then(function (response) { if (!response.ok) throw new Error('items'); return response.json(); })
|
||||
.then(function (data) {
|
||||
var fragment = document.createElement('div');
|
||||
fragment.innerHTML = String(data.html || '');
|
||||
Array.prototype.slice.call(container.querySelectorAll(':scope > .ajax-pag')).forEach(function (node) { node.remove(); });
|
||||
if (append) {
|
||||
Array.prototype.slice.call(fragment.children).forEach(function (node) { container.appendChild(node); });
|
||||
// 追加方向为底部：新条目插到骨架之前，骨架始终贴住最后一张卡片。
|
||||
var anchor = loaderOf(container) || container.querySelector(':scope > .ajax-pag');
|
||||
Array.prototype.slice.call(fragment.children).forEach(function (node) {
|
||||
if (anchor && anchor.parentNode === container) {
|
||||
container.insertBefore(node, anchor);
|
||||
} else {
|
||||
container.appendChild(node);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
container.innerHTML = fragment.innerHTML;
|
||||
// 替换时保留骨架节点本身（参考主题 success 后只 hide() 不删除）。
|
||||
var loader = loaderOf(container);
|
||||
Array.prototype.slice.call(container.children).forEach(function (child) {
|
||||
if (child !== loader && !child.classList.contains('ajax-pag')) child.remove();
|
||||
});
|
||||
Array.prototype.slice.call(fragment.children).forEach(function (node) { container.appendChild(node); });
|
||||
}
|
||||
Array.prototype.slice.call(container.querySelectorAll(':scope > .ajax-pag')).forEach(function (node) { node.remove(); });
|
||||
if (data.paginate_html) container.insertAdjacentHTML('beforeend', data.paginate_html);
|
||||
container.dataset.page = String(data.page || page);
|
||||
anchorLoader(container);
|
||||
scan(container);
|
||||
})
|
||||
.catch(function () { container.innerHTML = errorMarkup(); })
|
||||
.catch(function () {
|
||||
var loader = loaderOf(container);
|
||||
if (loader && loader.parentNode === container) {
|
||||
loader.insertAdjacentHTML('beforebegin', errorMarkup());
|
||||
} else {
|
||||
container.insertAdjacentHTML('afterbegin', errorMarkup());
|
||||
}
|
||||
})
|
||||
.finally(function () { setBusy(container, false); });
|
||||
}
|
||||
|
||||
function initItems(container) {
|
||||
if (!once(container, 'Items')) return;
|
||||
if (container.classList.contains('is-loading')) loadItems(container, 1, false);
|
||||
container.addEventListener('click', function (event) {
|
||||
var retry = event.target.closest('[data-widget-retry]');
|
||||
var trigger = event.target.closest('[data-next-page]');
|
||||
|
||||
Reference in new issue
Block a user