@xingwangzhe/stalux 1.28.4 → 1.29.0

package/src/scripts/waline.ts

@@ -1,6 +1,3 @@
-import type { WalineInitOptions } from "@waline/client";
-import walineCss from "@waline/client/style?inline";
-import staluxWalineCss from "../styles/components/posts/waline.css?inline";
 import { createClientLogger } from "./logger";
 import { registerPageLifecycle } from "./page-runtime";
 
@@ -34,32 +31,39 @@ registerPageLifecycle("waline", () => {
 
     let disposed = false;
     let destroy: (() => void) | undefined;
+    let observer: IntersectionObserver | undefined;
 
-    void import("@waline/client")
-        .then((waline) => {
-            if (disposed || !commentElement.isConnected) return;
-            const style = document.createElement("style");
-            style.dataset.staluxWaline = "true";
-            style.textContent = `${walineCss}\n${staluxWalineCss}`;
-            document.head.append(style);
-            const options = {
-                ...decoded,
-                el: commentElement,
-                serverURL: decoded.serverURL,
-                path: typeof decoded.path === "string" ? decoded.path : window.location.pathname,
-            } as WalineInitOptions;
-            const instance = waline.init(options);
-            destroy = () => instance?.destroy();
-            logger.debug("comment widget initialized");
-        })
-        .catch((error) => {
-            logger.warn(
-                `comment assets failed to load (${error instanceof Error ? error.name : "unknown error"})`,
-            );
-        });
+    const load = () => {
+        observer?.disconnect();
+        observer = undefined;
+        void import("./waline-client")
+            .then(({ mountWaline }) => {
+                if (disposed || !commentElement.isConnected) return;
+                destroy = mountWaline(decoded, commentElement);
+                logger.debug("comment widget initialized near viewport");
+            })
+            .catch((error) => {
+                logger.warn(
+                    `comment assets failed to load (${error instanceof Error ? error.name : "unknown error"})`,
+                );
+            });
+    };
+
+    if ("IntersectionObserver" in window) {
+        observer = new IntersectionObserver(
+            (entries) => {
+                if (entries.some((entry) => entry.isIntersecting)) load();
+            },
+            { rootMargin: "1000px 0px" },
+        );
+        observer.observe(container);
+    } else {
+        load();
+    }
 
     return () => {
         disposed = true;
+        observer?.disconnect();
         destroy?.();
     };
 });

package/src/styles/base/init.css

@@ -56,7 +56,7 @@ a::after {
     bottom: -2px;
     height: 1px;
     width: 100%;
-    background: linear-gradient(90deg, var(--stalux-accent-color), rgba(100, 255, 218, 0.5));
+    background: linear-gradient(90deg, var(--stalux-accent-color), var(--accent-50p));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.25s cubic-bezier(0.25, 0.9, 0.2, 1);
@@ -110,14 +110,17 @@ ul {
 :root {
     --stalux-bg-color: #202020;
     --stalux-bg-filter: none;
-    --stalux-text-shadow: #64ffda 0.1rem 0.1rem 0.2rem;
-    --stalux-accent-color: #64ffda;
+    --stalux-text-shadow: var(--stalux-accent-color) 0.08rem 0.08rem 0.18rem;
+    --stalux-accent-color: #eab308;
+    --stalux-accent-rgb: 234, 179, 8;
+    --surface-glass: var(--black-10p);
+    --surface-glass-shadow: var(--shadow-sidebar);
 
     /* 卡片和标签颜色 Token（可在这里统一调整主题色/透明度） */
-    --card-bg: rgba(0, 0, 0, 0.2);
+    --card-bg: var(--surface-glass);
     --card-border: rgba(255, 255, 255, 0.1);
-    --card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    --card-box-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.5);
+    --card-box-shadow: var(--shadow-sidebar);
+    --card-box-shadow-hover: var(--shadow-raised-hover);
 
     --tag-bg: rgba(255, 255, 255, 0.12);
     --tag-bg-hover: rgba(255, 255, 255, 0.18);
@@ -152,15 +155,15 @@ ul {
     --black-10p: rgba(0, 0, 0, 0.1);
 
     /* 强调色变体 */
-    --accent-90p: rgba(100, 255, 218, 0.9);
-    --accent-85p: rgba(100, 255, 218, 0.85);
-    --accent-80p: rgba(100, 255, 218, 0.8);
-    --accent-70p: rgba(100, 255, 218, 0.7);
-    --accent-60p: rgba(100, 255, 218, 0.6);
-    --accent-50p: rgba(100, 255, 218, 0.5);
-    --accent-40p: rgba(100, 255, 218, 0.4);
-    --accent-30p: rgba(100, 255, 218, 0.3);
-    --accent-20p: rgba(100, 255, 218, 0.2);
+    --accent-90p: rgba(var(--stalux-accent-rgb), 0.9);
+    --accent-85p: rgba(var(--stalux-accent-rgb), 0.85);
+    --accent-80p: rgba(var(--stalux-accent-rgb), 0.8);
+    --accent-70p: rgba(var(--stalux-accent-rgb), 0.7);
+    --accent-60p: rgba(var(--stalux-accent-rgb), 0.6);
+    --accent-50p: rgba(var(--stalux-accent-rgb), 0.5);
+    --accent-40p: rgba(var(--stalux-accent-rgb), 0.4);
+    --accent-30p: rgba(var(--stalux-accent-rgb), 0.3);
+    --accent-20p: rgba(var(--stalux-accent-rgb), 0.2);
 
     /* 常用过渡和动画 */
     --transition-fast: 0.18s ease;
@@ -193,7 +196,14 @@ ul {
     --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.2);
     --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.3);
     --shadow-xl: 0 12px 26px rgba(0, 0, 0, 0.28);
-    --shadow-sidebar: 0 4px 6px rgba(0, 0, 0, 0.753);
+    --shadow-sidebar:
+        0 16px 20px -12px rgba(0, 0, 0, 0.84),
+        10px 4px 16px -12px rgba(0, 0, 0, 0.58),
+        -10px 4px 16px -12px rgba(0, 0, 0, 0.58);
+    --shadow-raised-hover:
+        0 20px 24px -13px rgba(0, 0, 0, 0.9),
+        12px 5px 18px -13px rgba(0, 0, 0, 0.68),
+        -12px 5px 18px -13px rgba(0, 0, 0, 0.68);
     --shadow-dark: rgba(0, 0, 0, 0.753);
 
     /* 语义化颜色 */
@@ -269,5 +279,8 @@ footer {
     padding: var(--space-lg) var(--space-md);
     text-align: center;
     color: var(--muted-text);
-    background: transparent;
+    background: linear-gradient(180deg, rgba(12, 14, 18, 0.18), rgba(12, 14, 18, 0.72));
+    border-top: 1px solid var(--white-10p);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
 }

package/src/styles/components/archives/archivesList.module.css

@@ -9,6 +9,7 @@
     --tl-line: var(--radius-sm);
     --tl-pad: var(--space-xl);
     padding-left: var(--tl-pad);
+    animation: contentReveal 220ms ease 360ms both;
 }
 
 .timelineContainer::before {
@@ -78,118 +79,7 @@
     background-color: var(--black-10p);
     border-radius: 0.5rem;
     width: 100%;
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes fadeInLeft {
-    from {
-        opacity: 0;
-        transform: translateX(-15px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-/* yearSection 子元素通用入场动画 */
-[data-year-header],
-[data-month-section],
-[data-post-item] {
-    animation: fadeInUp 0.53s ease both;
-}
-
-[data-year-header] {
-    animation-duration: 0.38s;
-}
-
-[data-post-item] {
-    animation-name: fadeInLeft;
-    animation-duration: 0.38s;
-}
-
-/* yearSection 内部阶梯延迟（yearHeader + monthSections 同为子元素） */
-[data-year-header]:nth-child(1) {
-    animation-delay: 0s;
-}
-
-[data-month-section]:nth-child(2) {
-    animation-delay: 0.18s;
-}
-[data-month-section]:nth-child(3) {
-    animation-delay: 0.24s;
-}
-[data-month-section]:nth-child(4) {
-    animation-delay: 0.3s;
-}
-[data-month-section]:nth-child(5) {
-    animation-delay: 0.36s;
-}
-[data-month-section]:nth-child(6) {
-    animation-delay: 0.42s;
-}
-[data-month-section]:nth-child(7) {
-    animation-delay: 0.48s;
-}
-[data-month-section]:nth-child(8) {
-    animation-delay: 0.54s;
-}
-[data-month-section]:nth-child(9) {
-    animation-delay: 0.6s;
-}
-[data-month-section]:nth-child(10) {
-    animation-delay: 0.66s;
-}
-[data-month-section]:nth-child(11) {
-    animation-delay: 0.72s;
-}
-[data-month-section]:nth-child(12) {
-    animation-delay: 0.78s;
-}
-
-/* postItem 阶梯延迟 */
-[data-post-item]:nth-child(1) {
-    animation-delay: 0s;
-}
-[data-post-item]:nth-child(2) {
-    animation-delay: 0.045s;
-}
-[data-post-item]:nth-child(3) {
-    animation-delay: 0.09s;
-}
-[data-post-item]:nth-child(4) {
-    animation-delay: 0.135s;
-}
-[data-post-item]:nth-child(5) {
-    animation-delay: 0.18s;
-}
-[data-post-item]:nth-child(6) {
-    animation-delay: 0.225s;
-}
-[data-post-item]:nth-child(7) {
-    animation-delay: 0.27s;
-}
-[data-post-item]:nth-child(8) {
-    animation-delay: 0.315s;
-}
-[data-post-item]:nth-child(9) {
-    animation-delay: 0.36s;
-}
-[data-post-item]:nth-child(10) {
-    animation-delay: 0.405s;
-}
-[data-post-item]:nth-child(n + 11) {
-    animation-delay: 0.45s;
+    animation: stalux-content-reveal 220ms ease 360ms both;
 }
 
 /* 懒加载指示器样式 */
@@ -374,3 +264,12 @@
         font-size: 1.1rem;
     }
 }
+
+@keyframes contentReveal {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

package/src/styles/components/categories/categoriesCard.module.css

@@ -4,11 +4,14 @@
     display: flex;
     flex-direction: column;
     padding: var(--space-lg);
-    background-color: var(--white-05p);
+    background-color: var(--surface-glass);
     border-radius: 0.8rem;
-    border: var(--border-thin) solid var(--white-10p);
     color: var(--white-full);
-    transition: all var(--transition-slow);
+    box-shadow: var(--shadow-sidebar);
+    transition:
+        transform 220ms ease,
+        background-color 220ms ease,
+        box-shadow 220ms ease;
     overflow: hidden;
     height: fit-content;
 }
@@ -27,15 +30,14 @@
         rgba(255, 255, 255, 0)
     );
     transform: translateX(-100%);
-    transition: transform 0.6s;
+    transition: transform 360ms ease;
     z-index: 1;
 }
 
 .categoryCard:hover {
     transform: translateY(-3px);
     background-color: rgba(255, 255, 255, 0.08);
-    border-color: var(--accent-50p);
-    box-shadow: var(--shadow-lg);
+    box-shadow: var(--shadow-raised-hover);
 }
 
 .categoryCard:hover::before {
@@ -71,7 +73,11 @@
     width: 28px;
     height: 28px;
     color: var(--white-50p);
-    transition: all var(--transition-slower) var(--easing-bounce);
+    transition:
+        transform 240ms ease,
+        background-color 240ms ease,
+        color 240ms ease,
+        box-shadow 240ms ease;
     z-index: 2;
     transform-origin: center center;
     background: var(--black-15p);

package/src/styles/components/categories/categoriesList.module.css

@@ -11,17 +11,14 @@
 }
 
 .item {
-    animation: fadeInUp 0.5s ease both;
-    opacity: 0;
+    animation: contentReveal 220ms ease 360ms both;
 }
 
-@keyframes fadeInUp {
+@keyframes contentReveal {
     from {
         opacity: 0;
-        transform: translateY(20px);
     }
     to {
         opacity: 1;
-        transform: translateY(0);
     }
 }

package/src/styles/components/layout/navs.module.css

@@ -24,7 +24,7 @@ nav {
     min-width: 0;
     max-width: 100%;
     box-sizing: border-box;
-    transition: transform 0.3s ease;
+    transition: transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1);
     /* 当导航项总宽度超过视口时允许横向滚动，防止右侧项被裁剪 */
     flex-wrap: wrap;
     width: 100%;
@@ -213,7 +213,8 @@ nav {
     .navList {
         position: fixed;
         top: 0;
-        right: 0;
+        left: 0;
+        right: auto;
         width: min(220px, calc(100vw - 1rem));
         height: 100vh;
         background: var(--black-20p);
@@ -223,7 +224,7 @@ nav {
         justify-content: flex-start;
         gap: 0;
         padding: 0.5rem 1rem 2rem 1rem;
-        transform: translateX(100%);
+        transform: translateX(-100%);
         z-index: 1000;
         overflow-y: auto;
         pointer-events: none;

package/src/styles/components/links/linkCard.module.css

@@ -3,7 +3,7 @@
 .card {
     display: flex;
     flex-direction: column;
-    background: var(--white-10p) !important;
+    background: var(--surface-glass);
     border-radius: 10px;
     padding: 16px;
     text-decoration: none;
@@ -12,16 +12,17 @@
     width: 180px;
     overflow: visible;
     transition:
-        transform var(--transition-normal) ease,
-        box-shadow var(--transition-normal) ease,
-        background var(--transition-normal) ease;
-    box-shadow: var(--shadow-md);
+        transform 220ms ease,
+        box-shadow 220ms ease,
+        background-color 220ms ease,
+        border-color 220ms ease;
+    box-shadow: var(--shadow-sidebar);
 }
 
 .card:hover {
-    transform: translateY(-6px);
+    transform: translateY(-3px);
     background: #ffffff26;
-    box-shadow: var(--shadow-xl);
+    box-shadow: var(--shadow-raised-hover);
 }
 
 .avatar {
@@ -38,13 +39,13 @@
     border: 2px solid var(--accent-60p);
     transform-origin: center;
     transition:
-        transform 0.8s ease,
-        box-shadow 0.3s ease,
-        border-color 0.3s ease;
+        transform 220ms ease,
+        box-shadow 220ms ease,
+        border-color 220ms ease;
 }
 
 .card:hover .avatar img {
-    transform: rotate(360deg) scale(1.1);
+    transform: rotate(5deg) scale(1.04);
     box-shadow: 0 0 20px var(--accent-50p);
     border-color: var(--accent-85p);
 }
@@ -59,7 +60,7 @@
 .title {
     font-size: 1.1rem;
     margin: 0 0 8px 0;
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(1, 162, 190, 0.9));
+    background: linear-gradient(90deg, var(--white-95p), var(--accent-90p));
     background-clip: text;
     -webkit-text-fill-color: transparent;
     white-space: nowrap;

package/src/styles/components/links/linkList.module.css

@@ -12,22 +12,9 @@
 }
 
 .item {
-    animation: fadeInUp 0.5s ease forwards;
-    opacity: 0;
     display: flex;
 }
 
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
 /* 大屏幕：5个卡片一行 */
 @media (min-width: 1400px) {
     .list {

package/src/styles/components/posts/postCard.module.css

@@ -8,6 +8,7 @@
 .postTitle {
     margin: 0;
     line-height: 1.35;
+    overflow-wrap: anywhere;
 }
 
 .postTitle a {
@@ -18,41 +19,38 @@
 .postDescription {
     color: var(--white-70p);
     line-height: 1.6;
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.postContainer > a:first-child {
+    display: block;
+    width: 100%;
+    min-width: 0;
 }
 
 .postContainer {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     background-color: var(--card-bg);
     border-radius: var(--radius-lg);
-    border: var(--border-thin) solid var(--card-border);
     box-shadow: var(--card-box-shadow);
     padding: var(--space-lg);
     transition:
-        transform var(--transition-fast) ease,
-        box-shadow var(--transition-fast) ease;
+        transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1),
+        box-shadow 220ms ease;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     height: 100%;
     gap: var(--space-lg);
-    box-sizing: border-box;
-    opacity: 0;
-    animation: fadeInUp 0.6s ease-in-out forwards;
-}
-
-@keyframes fadeInUp {
-    from {
-        transform: translateY(12px);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
 }
 
 /* 封面图片 */
 .postCover {
     width: 100%;
+    min-width: 0;
     height: 180px;
     border-radius: var(--radius-md);
     overflow: hidden;
@@ -62,6 +60,7 @@
 
 .postCover img {
     width: 100%;
+    max-width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-fast) ease;
@@ -82,13 +81,12 @@
 /* 卡片悬停和焦点效果 */
 .postContainer {
     transition:
-        transform var(--transition-fast) ease,
-        box-shadow var(--transition-fast) ease,
-        opacity var(--transition-fast) ease;
+        transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1),
+        box-shadow 220ms ease;
 }
 .postContainer:hover,
 .postContainer:focus-within {
-    transform: translateY(-6px);
+    transform: translateY(-3px);
     box-shadow: var(--card-box-shadow-hover);
 }
 

package/src/styles/components/posts/postContent.module.css

@@ -10,19 +10,18 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    background: var(--black-10p);
-    border-radius: var(--radius-lg);
-    padding: var(--space-xl);
-    box-shadow: var(--shadow-sidebar);
-    transition: all var(--transition-normal) ease;
+    background: var(--surface-glass);
+    border-radius: 18px;
+    padding: clamp(1.25rem, 3vw, 2.5rem);
+    box-shadow: var(--surface-glass-shadow);
 }
 
 /* 文章标题 */
 .articleHeader {
     margin-bottom: 3rem;
     padding-bottom: 2rem;
-    animation: fadeInUp 0.6s ease forwards;
-    opacity: 0;
+    border-bottom: 1px solid var(--white-10p);
+    animation: contentReveal 220ms ease 360ms both;
 }
 
 .title {
@@ -96,14 +95,13 @@
 /* 文章身体 */
 .body {
     flex: 1;
-    animation: fadeInUp 0.6s ease 0.1s forwards;
-    opacity: 0;
     /* 限制 Markdown 内容最大宽度，居中显示，避免侵占左右侧栏 */
     width: min(900px, 100%);
     max-width: 100%;
     margin: 0 auto;
     box-sizing: border-box;
     padding: 0 1rem 2rem;
+    animation: contentReveal 220ms ease 360ms both;
 }
 
 /* “查看 Markdown 原文”按钮 */
@@ -154,8 +152,16 @@
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid var(--white-10p);
-    animation: fadeInUp 0.6s ease 0.2s forwards;
-    opacity: 0;
+    animation: contentReveal 220ms ease 360ms both;
+}
+
+@keyframes contentReveal {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .footerContent {
@@ -182,6 +188,8 @@
         width: 100%;
         padding: 0;
         box-sizing: border-box;
+        background: transparent;
+        box-shadow: none;
     }
 
     .body {

package/src/styles/components/posts/postLayout.module.css

@@ -10,9 +10,9 @@
 .container {
     flex: 1;
     display: grid;
-    grid-template-columns: 280px 1fr 280px;
-    gap: 4rem;
-    max-width: 100%;
+    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) minmax(220px, 250px);
+    gap: clamp(1.5rem, 3vw, 3.5rem);
+    max-width: 1680px;
     margin: 0 auto;
     padding: 1.5rem 1rem;
     width: 100%;
@@ -42,8 +42,8 @@
 /* 大屏幕 */
 @media (min-width: 1600px) {
     .container {
-        grid-template-columns: 300px 1fr 300px;
-        gap: 4.5rem;
+        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(240px, 280px);
+        gap: 4rem;
         padding: 2rem 1.5rem;
     }
 }

package/src/styles/components/posts/postList.module.css

@@ -18,7 +18,8 @@
     }
 
     ul > li {
-        flex: 1 1 22rem; /* 最小宽度 22rem，自动填充每行 */
+        flex: 1 1 min(22rem, 100%);
+        min-width: 0;
         margin: 0;
     }
 }

package/src/styles/components/posts/postNavigation.module.css

@@ -29,8 +29,7 @@
         transform var(--transition-normal),
         box-shadow var(--transition-normal),
         color var(--transition-normal);
-    border: var(--border-thin) solid var(--white-20p);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    box-shadow: var(--shadow-sidebar);
     flex: 1 1 0;
     min-width: 0;
     position: relative;
@@ -53,7 +52,7 @@
 
 .postNavLink:hover {
     transform: translateY(-3px);
-    box-shadow: 0 8px 16px var(--shadow-dark);
+    box-shadow: var(--shadow-raised-hover);
 }
 
 .postNavLink:hover::before {