@xingwangzhe/stalux 1.2.0

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

@@ -0,0 +1,156 @@
+.postContainer {
+    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;
+    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%;
+    height: 180px;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    flex-shrink: 0;
+    margin-bottom: 0.5rem;
+}
+
+.postCover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform var(--transition-fast) ease;
+}
+
+.postContainer:hover .postCover img,
+.postContainer:focus-within .postCover img {
+    transform: scale(1.05);
+}
+
+/* 文章元数据布局 */
+.postMeta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+
+/* 卡片悬停和焦点效果 */
+.postContainer {
+    transition:
+        transform var(--transition-fast) ease,
+        box-shadow var(--transition-fast) ease,
+        opacity var(--transition-fast) ease;
+}
+.postContainer:hover,
+.postContainer:focus-within {
+    transform: translateY(-6px);
+    box-shadow: var(--card-box-shadow-hover);
+}
+
+.time {
+    display: inline-flex;
+    gap: 0.45rem;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+/* 日期和更新标签 */
+.postDate,
+.postUpdated {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    width: fit-content;
+    padding: 0.28rem 0.6rem;
+    border-radius: 10px;
+    font-size: 0.9rem;
+    line-height: 1.1;
+    color: #e8f2ff;
+}
+.postDate {
+    background: var(--date-bg);
+    border: 1px solid var(--date-border);
+    color: #e8f2ff;
+}
+.postUpdated {
+    background: var(--updated-bg);
+    border: 1px solid var(--updated-border);
+    color: #fff7de;
+}
+
+/* 标签：胶囊形状 */
+.postTags {
+    display: flex;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+    align-items: center;
+}
+.postTags a {
+    text-decoration: none;
+}
+.postTag {
+    display: inline-block;
+    padding: 0.22rem 0.7rem;
+    border-radius: 9999px;
+    background: var(--tag-bg);
+    color: #fff;
+    font-size: 0.85rem;
+    line-height: 1;
+}
+.postTag:focus,
+.postTag:hover {
+    background: var(--tag-bg-hover);
+}
+
+/* 分类：矩形块 */
+.postCategories {
+    display: flex;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+    align-items: center;
+}
+.postCategories a {
+    text-decoration: none;
+}
+.postCategory {
+    display: inline-block;
+    padding: 0.18rem 0.5rem;
+    border-radius: 6px;
+    background: var(--category-bg);
+    color: #fff;
+    font-size: 0.84rem;
+    line-height: 1;
+}
+.postCategory:focus,
+.postCategory:hover {
+    background: var(--category-bg-hover);
+}
+
+/* 阅读更多链接对齐 */
+.readMore {
+    margin-top: 0.6rem;
+    align-self: flex-start;
+}

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

@@ -0,0 +1,50 @@
+.categoriesContainer {
+    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);
+}
+
+.categoryList {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.category {
+    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);
+}
+
+.category:hover {
+    transform: translateX(4px);
+}
+
+.category:active {
+    transform: translateX(2px);
+}
+
+.empty {
+    color: var(--white-50p);
+    font-size: var(--font-size-small);
+    text-align: center;
+    padding: var(--space-md) 0;
+}

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

@@ -0,0 +1,230 @@
+/* 文章内容 - 主要文章区域 */
+/* 注意：正文内容的排版样式（标题、段落、代码块、表格、引用块等）
+   统一在 src/styles/components/markdown.css 中管理。
+   本文件只负责文章区域的布局容器样式。 */
+
+.articleContent {
+    flex: 1;
+    width: 100%;
+    min-height: 100vh;
+    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;
+}
+
+/* 文章标题 */
+.articleHeader {
+    margin-bottom: 3rem;
+    padding-bottom: 2rem;
+    animation: fadeInUp 0.6s ease forwards;
+    opacity: 0;
+}
+
+.title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--white-full);
+    margin: 0 0 1.5rem;
+    line-height: 1.2;
+    text-align: center;
+    word-break: break-word;
+    text-shadow: var(--stalux-text-shadow);
+}
+
+.metadata {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1.5rem;
+    font-size: 0.95rem;
+    color: #ffffffb3;
+}
+
+.metaItem {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: color var(--transition-fast) ease;
+}
+
+/* 文章阅读量统计 */
+.pageStats {
+    margin-top: 1rem;
+    padding-top: 0.8rem;
+    border-top: 1px solid var(--white-10p);
+    font-size: 0.9rem;
+    color: #ffffffb3;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+.pageStats span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.readingTime {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+#vercount_value_page_pv {
+    font-weight: 600;
+    color: #ffffffb3;
+}
+
+#vercount_container_page_pv {
+    transition: opacity 0.3s ease;
+}
+
+/* 阅读量单独一行并居中 */
+.metaRow {
+    flex-basis: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+/* 文章身体 */
+.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;
+}
+
+/* “查看 Markdown 原文”按钮 */
+.sourceLinkRow {
+    margin-top: 1.2rem;
+    display: flex;
+    justify-content: center;
+}
+
+.sourceLink {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.5rem 1.1rem;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--white-full);
+    text-decoration: none;
+    background: var(--white-10p);
+    border-top: 1px solid var(--white-20p);
+    border-right: 1px solid var(--white-20p);
+    border-left: 1px solid var(--white-20p);
+    border-bottom: 0;
+    border-radius: var(--radius-full, 999px);
+    transition:
+        background var(--transition-fast) ease,
+        transform var(--transition-fast) ease;
+}
+
+.sourceLink:hover,
+.sourceLink:focus,
+.sourceLink:active {
+    background: var(--accent, #ffffff22);
+    border-top-color: var(--accent, #ffffff44);
+    border-right-color: var(--accent, #ffffff44);
+    border-left-color: var(--accent, #ffffff44);
+    transform: translateY(-1px);
+    text-decoration: none;
+}
+
+/* 覆盖全局 a::after 伪元素下划线动画 */
+.sourceLink::after {
+    display: none !important;
+}
+
+/* 文章页脚 */
+.articleFooter {
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 1px solid var(--white-10p);
+    animation: fadeInUp 0.6s ease 0.2s forwards;
+    opacity: 0;
+}
+
+.footerContent {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+}
+
+/* ---------- 响应式设计 ---------- */
+
+@media (max-width: 1024px) {
+    .title {
+        font-size: 2rem;
+    }
+
+    .metadata {
+        gap: 1rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .articleContent {
+        margin: 0;
+        width: 100%;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    .body {
+        width: 100%;
+        margin: 0;
+        padding: 0 0.75rem;
+    }
+
+    .articleHeader {
+        margin-bottom: 2rem;
+        padding: 1rem 1rem 0;
+    }
+
+    .title {
+        font-size: 1.75rem;
+    }
+
+    .metadata {
+        flex-direction: column;
+        gap: 0.75rem;
+        font-size: 0.85rem;
+    }
+
+    .articleFooter {
+        margin-top: 2rem;
+        padding-top: 1.5rem;
+    }
+
+    /* 响应式设计 */
+    .pageStats {
+        font-size: 0.85rem;
+        margin-top: 0.8rem;
+        padding-top: 0.6rem;
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

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

@@ -0,0 +1,142 @@
+/* 文章布局 - 文章页面的三列布局 */
+
+.postLayout {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.container {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 280px 1fr 280px;
+    gap: 4rem;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 1.5rem 1rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* 三列布局间距调整 */
+.container > :nth-child(1) {
+    /* 左侧边栏 */
+    margin: 0;
+}
+
+.container > :nth-child(2) {
+    /* 中间内容 */
+    min-width: 0;
+    /* 防止长内容溢出 */
+    margin: 0;
+}
+
+.container > :nth-child(3) {
+    /* 右侧边栏 */
+    margin: 0;
+}
+
+/* 响应式设计 */
+
+/* 大屏幕 */
+@media (min-width: 1600px) {
+    .container {
+        grid-template-columns: 300px 1fr 300px;
+        gap: 4.5rem;
+        padding: 2rem 1.5rem;
+    }
+}
+
+/* 中大屏幕 */
+@media (max-width: 1400px) {
+    .container {
+        grid-template-columns: 260px 1fr 260px;
+        gap: 3.5rem;
+        padding: 1.5rem 1rem;
+    }
+}
+
+/* 中屏幕 - 侧栏隐藏后改为单列 */
+@media (max-width: 1200px) {
+    .container {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+        padding: 1rem 0.75rem;
+    }
+}
+
+/* 手机端 */
+@media (max-width: 768px) {
+    .postLayout {
+        padding: 0;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        padding: 0;
+        margin: 0;
+    }
+
+    /* 手机端重排：先内容，后侧栏 */
+    .container > :nth-child(2) {
+        order: 1;
+    }
+
+    .container > :nth-child(1) {
+        order: 2;
+    }
+
+    .container > :nth-child(3) {
+        order: 3;
+    }
+}
+
+/* 小屏幕手机 */
+@media (max-width: 480px) {
+    .postLayout {
+        padding: 0;
+    }
+
+    .container {
+        gap: 1.25rem;
+        padding: 0;
+    }
+}
+
+/* 打印样式 */
+@media print {
+    .container {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    .container > :nth-child(1),
+    .container > :nth-child(3) {
+        display: none;
+    }
+}
+
+/* 减少动画 */
+@media (prefers-reduced-motion: reduce) {
+    .postLayout * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* 高对比模式 */
+@media (prefers-contrast: more) {
+    .container {
+        gap: 2rem;
+    }
+}
+
+/* 无障碍访问焦点 */
+.container :focus-visible {
+    outline: 2px solid var(--accent-80p);
+    outline-offset: 2px;
+}

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

@@ -0,0 +1,38 @@
+/* 左侧边栏 */
+
+.leftSidebar {
+    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;
+}
+
+.leftSidebar::-webkit-scrollbar {
+    display: none;
+}
+
+@media (max-width: 1200px) {
+    .leftSidebar {
+        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;
+}

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

@@ -0,0 +1,24 @@
+.container {
+    width: 100%;
+    height: auto;
+    margin: 5px 0;
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        padding: 0;
+        margin: 3em;
+        list-style: none;
+    }
+
+    @media (max-width: 768px) {
+        ul {
+            margin: 1rem;
+        }
+    }
+
+    ul > li {
+        flex: 1 1 22rem; /* 最小宽度 22rem，自动填充每行 */
+        margin: 0;
+    }
+}