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

- 添加MBTI特性标签的渐变色彩效果
- 实现响应式评论系统，支持PC、平板和移动端
- 完善Artalk评论系统的设备适配配置
- 优化GitHub项目获取逻辑，支持分页加载
- 增加提交统计的历史总计数据显示
- 更新用户个人简介内容
- 调整导航链接和.commit-module-nums的网格布局
- 微调页面元素间距和样式细节

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;
     }
 

data/github_user.json

@@ -9,7 +9,7 @@
   "name": "Honesty",
   "blog": "https://www.hehouhui.cn",
   "hireable": true,
-  "bio": "Honesty Shanghai Student",
+  "bio": "Hi, I’m Honesty—Shanghai Java/AI Dev (7+ yrs). Spring AI, LLM, TensorFlow, Faiss. Write tech content, cycle for inspiration. AI-obsessed.",
   "public_repos": 165,
   "public_gists": 0,
   "followers": 6,

index.html

@@ -42,7 +42,7 @@
 <!-- style="background: url(https://blog-file.hehouhui.cn/bj/1.jpg) center center / cover no-repeat rgb(102, 102, 102);" -->
 <header id="panel" class="panel-cover">
     <!--星空背景-->
-<!--    <canvas id="bg"></canvas>-->
+    <!--    <canvas id="bg"></canvas>-->
     <!--天气-->
     <!-- <div id="he-plugin-simple"></div> -->
     <script>
@@ -202,7 +202,7 @@
                                     <span class="label">微信</span>
                                 </a>
                             </div>
-                            
+
                             <div class="social-icon">
                                 <a href="mailto:hehouhui@hehouhui.cn" title="Email">
                                     <svg width="20" height="20" viewBox="0 0 24 24">
@@ -236,44 +236,44 @@
                 <button class="weixin-qrcode-close" onclick="closeWeixin()">关闭</button>
             </div>
         </div>
-    <script>
-        function weixin() {
-            const overlay = document.getElementById('weixinOverlay');
-            overlay.style.display = 'flex';
+        <script>
+            function weixin() {
+                const overlay = document.getElementById('weixinOverlay');
+                overlay.style.display = 'flex';
 
-            // 防止滚动穿透
-            document.body.style.overflow = 'hidden';
-            // 添加ESC键关闭
-            document.addEventListener('keydown', closeOnEsc);
-        }
-        
-        function closeWeixin() {
-            const overlay = document.getElementById('weixinOverlay');
-            overlay.style.display = 'none';
-            // 恢复滚动
-            document.body.style.overflow = '';
-            // 移除ESC键监听
-            document.removeEventListener('keydown', closeOnEsc);
-        }
-        
-        function closeOnEsc(e) {
-            if (e.key === 'Escape') {
-                closeWeixin();
+                // 防止滚动穿透
+                document.body.style.overflow = 'hidden';
+                // 添加ESC键关闭
+                document.addEventListener('keydown', closeOnEsc);
             }
-        }
-        
-        // 点击空白处关闭
-        document.getElementById('weixinOverlay').addEventListener('click', function(e) {
-            if (e.target === this) {
-                closeWeixin();
+
+            function closeWeixin() {
+                const overlay = document.getElementById('weixinOverlay');
+                overlay.style.display = 'none';
+                // 恢复滚动
+                document.body.style.overflow = '';
+                // 移除ESC键监听
+                document.removeEventListener('keydown', closeOnEsc);
             }
-        });
-        
-        // 阻止点击弹框内容时关闭
-        document.querySelector('.weixin-qrcode-container').addEventListener('click', function(e) {
-            e.stopPropagation();
-        });
-    </script>
+
+            function closeOnEsc(e) {
+                if (e.key === 'Escape') {
+                    closeWeixin();
+                }
+            }
+
+            // 点击空白处关闭
+            document.getElementById('weixinOverlay').addEventListener('click', function(e) {
+                if (e.target === this) {
+                    closeWeixin();
+                }
+            });
+
+            // 阻止点击弹框内容时关闭
+            document.querySelector('.weixin-qrcode-container').addEventListener('click', function(e) {
+                e.stopPropagation();
+            });
+        </script>
     </div>
     <div class="remark iUp">
         <p class="power">

js/about.js

@@ -180,31 +180,59 @@ function initProjects() {
     localStorage.removeItem(cacheKey);
     localStorage.removeItem(cacheTimeKey);
     
-    // 使用jQuery AJAX获取项目数据
-    $.ajax({
-        url: 'https://api.github.com/users/' + username + '/repos?sort=stars&per_page=30',
-        method: 'GET',
-        timeout: 10000,
-        success: function(repos) {
-            // 过滤并排序：优先显示原创项目（非fork），按星数排序
-            var filteredRepos = repos.filter(function(repo) {
-                return repo.stargazers_count > 0 || repo.forks_count > 0; // 过滤掉fork的项目
-            }).sort(function(a, b) {
-                return b.stargazers_count - a.stargazers_count; // 按星数降序排序
-            }).slice(0, 12); // 只取前12个
-            
-            // 缓存数据
-            localStorage.setItem(cacheKey, JSON.stringify(filteredRepos));
-            localStorage.setItem(cacheTimeKey, now.toString());
-            displayProjects(filteredRepos);
-        },
-        error: function() {
-            fetch('data/github_repos.json')
-                .then(function(res) { return res.json(); })
-                .then(function(json) { displayProjects(json); })
-                .catch(function() { displayProjects([]); });
-        }
-    });
+    // 使用分页获取所有项目数据
+    var allRepos = [];
+    var page = 1;
+    var perPage = 100;
+    
+    function fetchReposPage() {
+        $.ajax({
+            url: 'https://api.github.com/users/' + username + '/repos?sort=stars&page=' + page + '&per_page=' + perPage + '&visibility=public',
+            method: 'GET',
+            timeout: 10000,
+            success: function(repos) {
+                if (!repos || repos.length === 0) {
+                    // 如果没有返回数据，则说明没有更多项目
+                    processAllRepos(allRepos);
+                    return;
+                }
+                // 将当前页的项目添加到总列表中
+                allRepos = allRepos.concat(repos);
+                
+                // 如果当前页返回的项目数量小于请求的数量，说明已经到最后一页
+                if (repos.length < perPage) {
+                    // 处理所有获取到的项目数据
+                    processAllRepos(allRepos);
+                } else {
+                    // 继续获取下一页
+                    page++;
+                    fetchReposPage();
+                }
+            },
+            error: function() {
+                // 出错时只显示已获取到的项目
+                processAllRepos(allRepos);
+            }
+        });
+    }
+    
+    // 开始获取第一页数据
+    fetchReposPage();
+    
+    // 处理所有获取到的项目数据
+    function processAllRepos(repos) {
+        // 过滤并排序：保留原创项目（非fork），按星数排序
+        var filteredRepos = repos.filter(function(repo) {
+            return !repo.fork && (repo.stargazers_count > 0 || repo.forks_count > 0); // 过滤掉fork的项目
+        }).sort(function(a, b) {
+            return b.stargazers_count - a.stargazers_count; // 按星数降序排序
+        }).slice(0, 12); // 只取前12个
+        
+        // 缓存数据
+        localStorage.setItem(cacheKey, JSON.stringify(filteredRepos));
+        localStorage.setItem(cacheTimeKey, now.toString());
+        displayProjects(filteredRepos);
+    }
 }
 
 function displayProjects(repos) {
@@ -427,7 +455,12 @@ function initArtalkComments() {
             return res.json();
           })
           .then(function() {
-            Artalk.init({
+            // 检测设备类型
+            var isMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth <= 768;
+            var isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
+            
+            // 根据设备类型设置不同的配置
+            var artalkConfig = {
                 el: '#artalk-container',
                 pageKey: window.location.pathname,
                 pageTitle: document.title,
@@ -443,7 +476,36 @@ function initArtalkComments() {
                 imgUpload: false,
                 preview: true,
                 versionCheck: true
-            });
+            };
+            
+            // 根据设备类型调整配置
+            if (isMobile) {
+                // 移动端配置
+                artalkConfig.editor = {
+                    draft: { enable: true },
+                    emoji: { show: true },
+                    upload: { enable: false }
+                };
+                artalkConfig.pagination = { pageSize: 10, readMore: true, autoLoad: true };
+            } else if (isTablet) {
+                // 平板端配置
+                artalkConfig.editor = {
+                    draft: { enable: true },
+                    emoji: { show: true },
+                    upload: { enable: false }
+                };
+                artalkConfig.pagination = { pageSize: 15, readMore: true, autoLoad: true };
+            } else {
+                // PC端配置
+                artalkConfig.editor = {
+                    draft: { enable: true },
+                    emoji: { show: true },
+                    upload: { enable: false }
+                };
+                artalkConfig.pagination = { pageSize: 20, readMore: true, autoLoad: true };
+            }
+            
+            Artalk.init(artalkConfig);
           })
           .catch(function() { renderCommentsFallback('评论系统暂不可用'); });
     } catch (e) {
@@ -1076,7 +1138,7 @@ var githubStyles = '<style>' +
     '}' +
     '.commit-module-nums {' +
         '    display: grid;' +
-        '    grid-template-columns: repeat(3, minmax(0,1fr));' +
+        '    grid-template-columns: repeat(4, minmax(0,1fr));' +
         '    gap: 16px;' +
         '    align-items: end;' +
     '}' +
@@ -1239,15 +1301,16 @@ function fetchCommitCounts(username) {
     var yearStart = new Date(today.getFullYear(), 0, 1);
     var h = { 'Accept': 'application/vnd.github.cloak-preview+json' };
     function q(start,end){
-        var url = 'https://api.github.com/search/commits?q=author:'+encodeURIComponent(username)+'+author-date:'+fmt(start)+'..'+fmt(end);
+        var url = 'https://api.github.com/search/commits?q=author:'+encodeURIComponent(username)+(start != null && end != null ? '+author-date:'+fmt(start)+'..'+fmt(end) : '');
         return fetch(url,{ headers: h, method:'GET' }).then(function(r){ return r.json(); }).then(function(j){ return (j && typeof j.total_count==='number')? j.total_count : 0; });
     }
     return Promise.all([
         q(weekStart,today),
         q(monthStart,today),
-        q(yearStart,today)
+        q(yearStart,today),
+        q(null,null)
     ]).then(function(arr){
-        return { week: arr[0], month: arr[1], year: arr[2], range: { week:{start:fmt(weekStart),end:fmt(today)}, month:{start:fmt(monthStart),end:fmt(today)}, year:{start:fmt(yearStart),end:fmt(today)} }, generated_at: new Date().toISOString() };
+        return { week: arr[0], month: arr[1], year: arr[2], total: arr[3], range: { week:{start:fmt(weekStart),end:fmt(today)}, month:{start:fmt(monthStart),end:fmt(today)}, year:{start:fmt(yearStart),end:fmt(today)} }, generated_at: new Date().toISOString() };
     });
 }
 
@@ -1255,6 +1318,7 @@ function renderCommitStats(stats) {
     var w = parseInt(stats.week||0,10);
     var m = parseInt(stats.month||0,10);
     var y = parseInt(stats.year||0,10);
+    var t = parseInt(stats.total||0,10);
 
     Array.from(document.querySelectorAll('.commit-inline-title, .commit-inline, .commit-inline-matrix, .commit-inline-group')).forEach(function(el){ el.remove(); });
 
@@ -1264,6 +1328,7 @@ function renderCommitStats(stats) {
         '<div class="commit-num"><span class="num">'+w+'</span><span class="lab">本周</span></div>'+
         '<div class="commit-num"><span class="num">'+m+'</span><span class="lab">本月</span></div>'+
         '<div class="commit-num"><span class="num">'+y+'</span><span class="lab">今年</span></div>'+
+        '<div class="commit-num"><span class="num">'+t+'</span><span class="lab">历史</span></div>'+
       '</div>'+
     '</div>';
     $('#github-commits').html(html);