feat(about): 优化夜间模式样式和数据加载逻辑

- 为夜间模式下的兴趣项添加悬停效果和阴影样式
- 优化文本在夜间模式下的渐变色和发光效果
- 添加骨架屏和淡入动画的CSS类
- 使用setTimeout延迟执行GitHub和博客数据获取
- 缓存用户和仓库数据时进行精简处理
- 在渲染项目和博客容器时添加淡入动画效果

css/about.css

@@ -2231,6 +2231,18 @@ body {
     border-color: rgba(108, 92, 231, 0.25);
 }
 
+[data-theme="night"] .interest-item {
+    background: rgba(30, 30, 35, 0.35);
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+[data-theme="night"] .interest-item:hover {
+    background: rgba(30, 30, 35, 0.5);
+    border-color: var(--accent);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
+}
+
 .i-emoji {
     font-size: 1.6rem;
     color: var(--text-primary);
@@ -2990,4 +3002,43 @@ body {
     background-clip: initial !important;
     -webkit-text-fill-color: initial !important;
     color: #374151 !important;
-}
+}
+:root {
+:not([data-theme="night"]) .i-text strong {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    -webkit-text-fill-color: initial !important;
+    color: #111827 !important;
+}
+:not([data-theme="night"]) .i-text span:not(.i-emoji) {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    -webkit-text-fill-color: initial !important;
+    color: #374151 !important;
+}
+
+[data-theme="night"] .i-text strong {
+    background: var(--gradient-1) !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    color: transparent !important;
+    text-shadow: 0 0 10px var(--accent-glow);
+}
+[data-theme="night"] .i-text span:not(.i-emoji) {
+    background: var(--gradient-2) !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    color: transparent !important;
+    text-shadow: 0 0 8px var(--accent-glow);
+}
+/* Loading Skeleton */
+.skeleton-card { height: 60px; background: rgba(128,128,128,0.1); border-radius: 10px; animation: pulse 1.5s infinite; }
+@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
+
+/* Loading Transition */
+.fade-in { animation: fadeIn 0.3s ease both; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(2px);} to { opacity: 1; transform: none;} }

js/about.js

@@ -219,8 +219,8 @@ class DataManager {
     }
 
     init() {
-        this.fetchGithub();
-        this.fetchBlog();
+        setTimeout(() => this.fetchGithub(), 0);
+        setTimeout(() => this.fetchBlog(), 0);
     }
 
     // 优先缓存 -> API -> 默认值
@@ -264,12 +264,24 @@ class DataManager {
                     .slice(0, 12); // 只取前12个
             }
 
-            // Cache & Render
+            const slimUser = {
+                created_at: userData.created_at || (window.SiteConfig?.defaults?.user?.created),
+                public_repos: userData.public_repos || (window.SiteConfig?.defaults?.user?.repos),
+                followers: userData.followers || (window.SiteConfig?.defaults?.user?.followers)
+            };
+            const slimRepos = Array.isArray(repoData) ? repoData.map(r => ({
+                name: r.name || '',
+                stargazers_count: (r.stargazers_count !== undefined ? r.stargazers_count : (r.stars || 0)),
+                forks_count: (r.forks_count !== undefined ? r.forks_count : (r.forks || 0)),
+                description: r.description || r.desc || '',
+                html_url: r.html_url || r.url || '#'
+            })) : [];
+
             localStorage.setItem(cacheKey, JSON.stringify({
-                user: userData, repos: repoData, time: now
+                user: slimUser, repos: slimRepos, time: now
             }));
-            this.renderUser(userData);
-            this.renderRepos(repoData);
+            this.renderUser(slimUser);
+            this.renderRepos(slimRepos);
 
         } catch (e) {
             console.warn("GH API Fail", e);
@@ -308,7 +320,10 @@ class DataManager {
                 <div class="repo-desc">${escapeHtml(dShort)}</div>
             </div>`;
         });
-        $('#projects-container').html(html);
+        const pc = $('#projects-container');
+        pc.removeClass('fade-in');
+        pc.html(html);
+        pc.addClass('fade-in');
     }
 
     // 从RSS获取博客文章
@@ -416,7 +431,10 @@ class DataManager {
                 <div class="b-cat">${escapeHtml(cat)}</div>
             </div>`;
         });
-        $('#blog-container').html(html);
+        const bc = $('#blog-container');
+        bc.removeClass('fade-in');
+        bc.html(html);
+        bc.addClass('fade-in');
     }
 }