@xingwangzhe/stalux 1.2.0

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

@@ -0,0 +1,187 @@
+/* 文章导航样式 */
+
+.postNavigation {
+    width: 100%;
+    margin: var(--space-lg) 0;
+    border-top: var(--border-thin) solid var(--white-20p);
+    border-bottom: var(--border-thin) solid var(--white-20p);
+    padding-top: var(--space-lg);
+    padding-bottom: var(--space-lg);
+}
+
+.postNavigationInner {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-md);
+}
+
+.postNavLink {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    background: var(--black-10p);
+    border-radius: var(--radius-md);
+    color: var(--white-90p);
+    text-decoration: none;
+    transition:
+        background-color var(--transition-normal),
+        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);
+    flex: 1 1 0;
+    min-width: 0;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.postNavLink::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(120deg, transparent, var(--accent-20p), transparent);
+    transition: transform var(--transition-slow);
+    transform: scaleX(0);
+    transform-origin: left;
+    pointer-events: none;
+}
+
+.postNavLink:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 16px var(--shadow-dark);
+}
+
+.postNavLink:hover::before {
+    transform: scaleX(1);
+}
+
+.postNavLink.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+    background: var(--black-15p);
+}
+
+.postNavLink.prevPost {
+    text-align: left;
+    margin-left: var(--space-xs);
+}
+
+.postNavLink.nextPost {
+    text-align: right;
+    justify-content: flex-end;
+    margin-right: var(--space-xs);
+}
+
+.postNavContent {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.postNavArrow {
+    flex-shrink: 0;
+    color: var(--white-70p);
+    transition: color var(--transition-normal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.postNavLabel {
+    font-size: var(--font-size-small);
+    color: var(--accent-90p);
+    margin-bottom: var(--space-xs);
+    font-weight: 500;
+}
+
+.postNavTitle {
+    font-size: var(--font-size-base);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    color: var(--white-90p);
+}
+
+/* 响应式样式 */
+@media (max-width: 768px) {
+    .postNavigation {
+        margin: var(--space-md) 0;
+    }
+
+    .postNavigationInner {
+        gap: var(--space-sm);
+    }
+
+    .postNavLink {
+        padding: var(--space-sm) var(--space-md);
+        flex-direction: column;
+        align-items: flex-start;
+        min-height: 120px;
+        justify-content: center;
+    }
+
+    .postNavLink.nextPost {
+        align-items: flex-end;
+    }
+
+    .postNavArrow {
+        transform: scale(0.85);
+    }
+
+    .postNavLabel {
+        font-size: 0.75rem;
+        margin-bottom: var(--space-xs);
+    }
+
+    .postNavTitle {
+        font-size: var(--font-size-small);
+        white-space: normal;
+        max-width: 100%;
+    }
+}
+
+/* 移动端适配 */
+@media (max-width: 480px) {
+    .postNavigation {
+        margin: var(--space-md) 0;
+    }
+
+    .postNavigationInner {
+        flex-direction: column;
+        gap: var(--space-sm);
+    }
+
+    .postNavLink {
+        width: 100%;
+        padding: var(--space-sm) var(--space-md);
+        flex-direction: row;
+        align-items: center;
+        min-height: 100px;
+        justify-content: flex-start;
+        gap: var(--space-md);
+    }
+
+    .postNavLink.prevPost,
+    .postNavLink.nextPost {
+        margin-left: 0;
+        margin-right: 0;
+        text-align: left;
+        align-items: center;
+    }
+
+    .postNavLink.nextPost {
+        justify-content: flex-start;
+    }
+
+    .postNavTitle {
+        white-space: normal;
+    }
+}

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

@@ -0,0 +1,60 @@
+/* 右侧边栏 - 文章纲要和元数据 */
+
+.rightSidebar {
+    position: sticky;
+    top: 20px;
+    width: 100%;
+    height: fit-content;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+    padding: var(--space-lg) 0;
+
+    /* 为 scrollIntoView 预留底部空间，确保长目录的激活项不会被裁切 */
+    scroll-padding-bottom: 8rem;
+
+    /* 隐藏滚动条但保留滚动功能 */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.rightSidebar::-webkit-scrollbar {
+    display: none;
+}
+
+.sidebarContainer {
+    display: flex;
+    flex-direction: column;
+    background: var(--black-10p);
+    border-radius: var(--radius-lg);
+    padding: var(--space-md);
+    box-shadow: var(--shadow-sidebar);
+    transition: all var(--transition-normal) ease;
+}
+
+/* 响应式设计 */
+
+@media (max-width: 1400px) {
+    .rightSidebar {
+        width: 240px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .rightSidebar {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .rightSidebar {
+        position: static;
+        width: 100%;
+        max-height: none;
+        top: auto;
+        order: 2;
+        padding: 1rem 0;
+    }
+}

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

@@ -0,0 +1,57 @@
+/* 通用侧边栏 — 合并自 postLeft.module.css + postRight.module.css */
+
+.sidebar {
+    position: sticky;
+    top: 20px;
+    width: 100%;
+    height: fit-content;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+    padding: var(--space-lg) 0;
+
+    /* 隐藏滚动条但保留滚动功能 */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.sidebar::-webkit-scrollbar {
+    display: none;
+}
+
+/* 右侧边栏需要底部留白让 scrollIntoView 不裁切 */
+.sidebarRight {
+    composes: sidebar;
+    scroll-padding-bottom: 8rem;
+}
+
+.sidebarContainer {
+    display: flex;
+    flex-direction: column;
+    background: var(--black-10p);
+    border-radius: var(--radius-lg);
+    padding: var(--space-md);
+    box-shadow: var(--shadow-sidebar);
+    transition: all var(--transition-normal) ease;
+}
+
+@media (max-width: 1400px) {
+    .sidebarRight {
+        width: 240px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .sidebar {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .sidebar,
+    .sidebarRight {
+        display: none;
+    }
+}

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

@@ -0,0 +1,51 @@
+.tagsContainer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+
+.title {
+    margin: 0;
+    font-size: var(--font-size-base);
+    font-weight: 600;
+    color: var(--white-90p);
+    padding-bottom: var(--space-sm);
+    border-bottom: var(--border-thin) solid var(--white-20p);
+}
+
+.tagList {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+}
+
+.tag {
+    display: inline-block;
+    padding: 0.4rem 0.8rem;
+    background: var(--white-10p);
+    border: none;
+    border-radius: var(--radius-full);
+    font-size: var(--font-size-smaller);
+    text-decoration: none;
+    transition:
+        color var(--transition-medium),
+        transform var(--transition-medium);
+    white-space: nowrap;
+    transform: translateY(0);
+    color: var(--white-85p);
+}
+
+.tag:hover {
+    transform: translateY(-2px);
+}
+
+.tag:active {
+    transform: translateY(-1px);
+}
+
+.empty {
+    color: var(--white-50p);
+    font-size: var(--font-size-small);
+    text-align: center;
+    padding: var(--space-md) 0;
+}

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

@@ -0,0 +1,87 @@
+/* 文章分类/标签共用样式 — 合并自 postCategories.module.css + postTags.module.css */
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+
+.title {
+    margin: 0;
+    font-size: var(--font-size-base);
+    font-weight: 600;
+    color: var(--white-90p);
+    padding-bottom: var(--space-sm);
+    border-bottom: var(--border-thin) solid var(--white-20p);
+}
+
+.list {
+    display: flex;
+    gap: var(--space-sm);
+}
+
+/* 分类变体：垂直列 + 左边框 */
+.listColumn {
+    composes: list;
+    flex-direction: column;
+}
+
+.itemColumn {
+    display: inline-flex;
+    padding: var(--space-sm) var(--space-xs);
+    background: var(--white-05p);
+    color: var(--white-80p);
+    border-left: var(--border-thick) solid var(--accent-60p);
+    text-decoration: none;
+    transition:
+        color var(--transition-medium),
+        transform var(--transition-medium);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    font-size: var(--font-size-small);
+    transform: translateX(0);
+}
+
+.itemColumn:hover {
+    transform: translateX(4px);
+}
+
+.itemColumn:active {
+    transform: translateX(2px);
+}
+
+/* 标签变体：水平换行 + 药丸形状 */
+.listWrap {
+    composes: list;
+    flex-wrap: wrap;
+}
+
+.itemPill {
+    display: inline-block;
+    padding: 0.4rem 0.8rem;
+    background: var(--white-10p);
+    border: none;
+    border-radius: var(--radius-full);
+    font-size: var(--font-size-smaller);
+    text-decoration: none;
+    transition:
+        color var(--transition-medium),
+        transform var(--transition-medium);
+    white-space: nowrap;
+    transform: translateY(0);
+    color: var(--white-85p);
+}
+
+.itemPill:hover {
+    transform: translateY(-2px);
+}
+
+.itemPill:active {
+    transform: translateY(-1px);
+}
+
+.empty {
+    color: var(--white-50p);
+    font-size: var(--font-size-small);
+    text-align: center;
+    padding: var(--space-md) 0;
+}

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

@@ -0,0 +1,74 @@
+.title {
+    margin: 0 0 var(--space-xs);
+    font-size: var(--font-size-base);
+    font-weight: 600;
+    color: var(--white-90p);
+    padding-bottom: var(--space-sm);
+    border-bottom: var(--border-thin) solid var(--white-20p);
+}
+
+.list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.item {
+    display: block;
+    padding: var(--space-sm) var(--space-xs);
+    color: var(--white-70p);
+    text-decoration: none;
+    font-size: var(--font-size-small);
+    border-left: var(--border-thick) solid transparent;
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    transition:
+        color var(--transition-medium),
+        background-color var(--transition-medium),
+        border-left-color var(--transition-medium),
+        transform var(--transition-medium);
+    line-height: 1.4;
+    word-break: break-word;
+}
+
+.item:hover {
+    transform: translateX(calc(-1 * var(--space-sm)));
+}
+
+.item:active,
+.item.active {
+    color: var(--accent-90p);
+    background-color: var(--accent-20p);
+    border-left-color: var(--accent-80p);
+    font-weight: 500;
+}
+
+/* 层级缩进 */
+.depth-1 {
+    padding-left: var(--space-xs);
+}
+
+.depth-2 {
+    padding-left: var(--space-lg);
+    font-size: var(--font-size-smaller);
+}
+
+.depth-3 {
+    padding-left: 2.25rem;
+    font-size: var(--font-size-tiny);
+}
+
+.depth-4,
+.depth-5,
+.depth-6 {
+    padding-left: var(--space-2xl);
+    font-size: 0.75rem;
+    color: var(--white-60p);
+}
+
+.empty {
+    color: var(--white-60p);
+    font-size: var(--font-size-small);
+}

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

@@ -0,0 +1,131 @@
+.container {
+    transition:
+        background-color 0.3s ease,
+        border-color 0.3s ease;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1em;
+    padding-bottom: 0.75em;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
+}
+
+.title {
+    margin: 0;
+    font-size: 1.1em;
+    font-weight: 600;
+    color: var(--foreground-60p, #333);
+}
+
+.refreshButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2em;
+    height: 2em;
+    padding: 0;
+    border: none;
+    border-radius: 0.375em;
+    background: transparent;
+    color: var(--foreground-60p, #333);
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.refreshButton:hover {
+    color: var(--accent-60p, #0066cc);
+}
+
+.refreshButton:active {
+    opacity: 0.7;
+}
+
+.refreshButton svg {
+    width: 1em;
+    height: 1em;
+}
+
+.refreshButton.rotating svg {
+    animation: spin 0.6s linear;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+    transition: opacity 0.3s ease;
+}
+
+.loading,
+.error,
+.noMore {
+    padding: 1em;
+    text-align: center;
+    color: var(--foreground-60p, #666);
+    font-size: 0.95em;
+}
+
+.error {
+    color: var(--accent-60p, #e74c3c);
+}
+
+.list > li > a {
+    display: block;
+    padding: 0.75em 1em;
+    border-radius: 0.375em;
+    background: transparent;
+    color: var(--foreground-60p, #333);
+    text-decoration: none;
+    transition:
+        color 0.2s ease,
+        transform 0.2s ease;
+    word-break: break-word;
+}
+
+.list > li > a:hover {
+    transform: translateX(0.25em);
+}
+
+.list > li > a:active {
+    transform: translateX(0.125em);
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+    .header {
+        border-bottom-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .title {
+        color: var(--foreground-60p, #e0e0e0);
+    }
+
+    .refreshButton {
+        color: var(--foreground-60p, #e0e0e0);
+    }
+
+    .loading,
+    .error,
+    .noMore {
+        color: var(--foreground-60p, #b0b0b0);
+    }
+
+    .list > li > a {
+        color: var(--foreground-60p, #e0e0e0);
+    }
+}

package/src/styles/components/tags/tagHeader.module.css

@@ -0,0 +1,44 @@
+/* 页面标题部分 */
+.pageHeader {
+    margin-bottom: 2.5rem;
+    position: relative;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--white-10p);
+    margin: 3em;
+}
+
+.pageHeader .pageTitle {
+    font-size: 1.8rem;
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    color: var(--white-full);
+}
+
+.pageHeader .pageTitle .categoryIcon {
+    margin-right: 0.8rem;
+    color: var(--accent-80p);
+}
+
+.pageHeader .pageTitle .categoryName {
+    color: var(--accent-90p);
+    font-weight: 500;
+}
+
+.pageHeader .pageDescription {
+    font-size: 1rem;
+    color: var(--white-70p);
+    margin-bottom: 0.5rem;
+}
+
+.pageHeader .backLink {
+    font-size: 0.9rem;
+    color: var(--white-60p);
+    text-decoration: none;
+    display: inline-block;
+    transition: all var(--transition-fast) ease;
+}
+
+.pageHeader .backLink:hover {
+    color: var(--accent-90p);
+}