feat(about): 优化项目展示和评论系统

- 添加MBTI特性标签的渐变色彩效果 - 实现响应式评论系统，支持PC、平板和移动端 - 完善Artalk评论系统的设备适配配置 - 优化GitHub项目获取逻辑，支持分页加载 - 增加提交统计的历史总计数据显示 - 更新用户个人简介内容 - 调整导航链接和.commit-module-nums的网格布局 - 微调页面元素间距和样式细节
2025-11-23 15:06:08 +08:00
parent 21909ef117
commit ab4f9dd1c0
4 changed files with 467 additions and 75 deletions
--- a/css/about.css
+++ b/css/about.css
@@ -932,20 +932,47 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
 }

 .mbti-traits {
-    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
 }

 .trait {
-    background: rgba(255, 255, 255, 0.15);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: #667eea;
+    /* 添加文字渐变效果 */
+    background: linear-gradient(135deg, #a5b4fc, #67e8f9, #a5f3fc);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
 }

+/* 为不同的trait添加不同的清新淡雅的渐变颜色 */
+.trait:nth-child(1) {
+    background: linear-gradient(135deg, #a5b4fc, #67e8f9);
+    -webkit-background-clip: text;
+    background-clip: text;
+}
+
+.trait:nth-child(2) {
+    background: linear-gradient(135deg, #c7d2fe, #a5f3fc);
+    -webkit-background-clip: text;
+    background-clip: text;
+}
+
+.trait:nth-child(3) {
+    background: linear-gradient(135deg, #bfdbfe, #93c5fd);
+    -webkit-background-clip: text;
+    background-clip: text;
+}
+
+.trait:nth-child(4) {
+    background: linear-gradient(135deg, #a5f3fc, #67e8f9);
+    -webkit-background-clip: text;
+    background-clip: text;
+}

 .hero-title {
    font-size: 4rem;
@@ -2185,6 +2212,298 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 }

+/* PC端评论系统样式 */
+@media (min-width: 1025px) {
+    #artalk-container {
+        padding: 2.5rem;
+    }
+    
+    #artalk-container .artalk-editor {
+        border-radius: 18px;
+        margin-bottom: 2rem;
+    }
+    
+    #artalk-container .artalk-editor .artalk-editor-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 1px solid var(--glass-border);
+    }
+    
+    #artalk-container .artalk-editor .artalk-editor-textarea {
+        min-height: 120px;
+        padding: 1.2rem;
+    }
+    
+    #artalk-container .artalk-list {
+        margin-top: 2rem;
+    }
+    
+    #artalk-container .artalk-list-item {
+        border-radius: 18px;
+        margin-bottom: 1.5rem;
+        padding: 1.5rem;
+        transition: all 0.3s ease;
+    }
+    
+    #artalk-container .artalk-list-item:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        background: rgba(255, 255, 255, calc(var(--glass-alpha) + 0.05));
+    }
+    
+    #artalk-container .artalk-list-item .artalk-comment-body {
+        padding: 1rem 0;
+    }
+}
+
+/* 平板端评论系统样式 */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .comments-section {
+        padding: 1.5rem;
+        margin: 1.5rem;
+        border-radius: 30px;
+    }
+    
+    #artalk-container {
+        padding: 2rem;
+    }
+    
+    #artalk-container .artalk-editor {
+        border-radius: 15px;
+        margin-bottom: 1.5rem;
+    }
+    
+    #artalk-container .artalk-editor .artalk-editor-header {
+        padding: 0.8rem 1.2rem;
+    }
+    
+    #artalk-container .artalk-editor .artalk-editor-textarea {
+        min-height: 100px;
+        padding: 1rem;
+    }
+    
+    #artalk-container .artalk-list-item {
+        border-radius: 15px;
+        margin-bottom: 1.2rem;
+        padding: 1.2rem;
+    }
+    
+    #artalk-container .artalk-list-item .artalk-comment-body {
+        padding: 0.8rem 0;
+    }
+}
+
+/* 移动端评论系统样式 */
+@media (max-width: 768px) {
+    .comments-section {
+        padding: 1rem;
+        margin: 1rem;
+        border-radius: 20px;
+    }
+    
+    .comments-container {
+        padding: 0 0.5rem;
+    }
+    
+    .comments-container .section-title {
+        font-size: 1.8rem;
+    }
+    
+    .comments-container .section-subtitle {
+        font-size: 1rem;
+        margin-bottom: 1.5rem;
+    }
+    
+    #artalk-container {
+        padding: 1.2rem;
+        border-radius: 18px;
+    }
+    
+    #artalk-container .artalk-editor {
+        border-radius: 12px;
+        margin-bottom: 1rem;
+    }
+    
+    #artalk-container .artalk-editor .artalk-editor-header {
+        padding: 0.6rem 1rem;
+        flex-wrap: wrap;
+    }
+    
+    #artalk-container .artalk-editor .artalk-editor-textarea {
+        min-height: 80px;
+        padding: 0.8rem;
+    }
+    
+    #artalk-container .artalk-list-item {
+        border-radius: 12px;
+        margin-bottom: 1rem;
+        padding: 1rem;
+    }
+    
+    #artalk-container .artalk-list-item .artalk-comment-body {
+        padding: 0.6rem 0;
+    }
+    
+    #artalk-container .artalk-pagination {
+        padding: 1rem 0;
+    }
+}
+
+/* 评论系统通用美化样式 */
+#artalk-container .artalk-editor {
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid var(--glass-border);
+    transition: all 0.3s ease;
+}
+
+#artalk-container .artalk-editor:focus-within {
+    background: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+#artalk-container .artalk-editor .artalk-editor-textarea {
+    background: transparent;
+    color: var(--text-strong);
+    font-family: 'Inter', 'SF Pro Text', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 1rem;
+    line-height: 1.6;
+    resize: none;
+    border: none;
+    outline: none;
+}
+
+#artalk-container .artalk-editor .artalk-editor-textarea::placeholder {
+    color: var(--text-soft);
+    opacity: 0.7;
+}
+
+#artalk-container .artalk-editor .artalk-editor-bottom {
+    padding: 0.8rem 1.2rem;
+    border-top: 1px solid var(--glass-border);
+}
+
+#artalk-container .artalk-editor .artalk-editor-bottom .artalk-send-btn {
+    background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
+    border: none;
+    border-radius: 20px;
+    padding: 0.5rem 1.5rem;
+    color: white;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 10px rgba(58, 160, 255, 0.3);
+}
+
+#artalk-container .artalk-editor .artalk-editor-bottom .artalk-send-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(58, 160, 255, 0.4);
+}
+
+#artalk-container .artalk-list-item {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--glass-border);
+}
+
+#artalk-container .artalk-list-item .artalk-comment-header {
+    padding-bottom: 0.5rem;
+}
+
+#artalk-container .artalk-list-item .artalk-comment-header .artalk-comment-nick {
+    color: var(--text-strong);
+    font-weight: 600;
+}
+
+#artalk-container .artalk-list-item .artalk-comment-header .artalk-comment-date {
+    color: var(--text-soft);
+    font-size: 0.85rem;
+}
+
+#artalk-container .artalk-list-item .artalk-comment-body {
+    color: var(--text-soft);
+    font-size: 1rem;
+    line-height: 1.7;
+}
+
+#artalk-container .artalk-list-item .artalk-comment-body a {
+    color: var(--accent-a);
+    text-decoration: none;
+}
+
+#artalk-container .artalk-list-item .artalk-comment-body a:hover {
+    text-decoration: underline;
+}
+
+#artalk-container .artalk-pagination {
+    margin-top: 1.5rem;
+}
+
+#artalk-container .artalk-pagination .artalk-page-item {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--glass-border);
+    color: var(--text-strong);
+    border-radius: 8px;
+    padding: 0.4rem 0.8rem;
+    margin: 0 0.2rem;
+    transition: all 0.3s ease;
+}
+
+#artalk-container .artalk-pagination .artalk-page-item:hover,
+#artalk-container .artalk-pagination .artalk-page-item.active {
+    background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
+    color: white;
+    border-color: transparent;
+}
+
+/* 夜间模式适配 */
+.theme-night #artalk-container .artalk-editor .artalk-editor-textarea {
+    color: var(--text-strong);
+}
+
+.theme-night #artalk-container .artalk-list-item .artalk-comment-nick {
+    color: var(--text-strong);
+}
+
+.theme-night #artalk-container .artalk-list-item .artalk-comment-body {
+    color: var(--text-soft);
+}
+
+/* 白天模式适配 */
+.theme-day #artalk-container {
+    background: rgba(255, 255, 255, 0.7);
+}
+
+.theme-day #artalk-container .artalk-editor {
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.theme-day #artalk-container .artalk-list-item {
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.theme-day #artalk-container .artalk-list-item .artalk-comment-nick {
+    color: var(--day-text-primary);
+}
+
+.theme-day #artalk-container .artalk-list-item .artalk-comment-date {
+    color: var(--day-text-secondary);
+}
+
+.theme-day #artalk-container .artalk-list-item .artalk-comment-body {
+    color: var(--day-text-secondary);
+}
+
+.theme-day #artalk-container .artalk-editor .artalk-editor-textarea {
+    color: var(--day-text-primary);
+}
+
+.theme-day #artalk-container .artalk-editor .artalk-editor-textarea::placeholder {
+    color: var(--day-text-tertiary);
+}
+
+.theme-day #artalk-container .artalk-pagination .artalk-page-item {
+    background: rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    color: var(--day-text-primary);
+}
+
 /* 加载动画 */

 .loading-placeholder {
@@ -2247,7 +2566,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
    }

    .nav-links {
-        gap: 1rem;
+        gap: 0.3rem;
    }

    .hero-title {
@@ -2411,6 +2730,14 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info

    .mbti-traits {
        justify-content: center;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0,1fr));
+    }
+    .trait {
+        padding: 0.1rem 0.2rem;
+        border-radius: 20px;
+        font-size: 0.7rem;
+        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .infj-decoration {
@@ -2495,11 +2822,11 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
    }

    .nav-links {
-        padding: 0.1rem 0.3rem;
+        padding: 0.2rem 0.3rem;
    }

    .nav-links a {
-        padding: 0.1rem 0.3rem;
+        padding: 0.2rem 0.3rem;
        font-size: 0.7rem;
    }