feat(about): 添加推荐分享模块和社交链接样式优化

- 新增推荐分享模块，包含动画效果和夜间模式适配
- 优化社交图标样式，统一设计风格
- 调整移动端社交布局，提升用户体验
- 修复夜间模式下文字阴影显示问题
- 移除重复的桌面端社交样式定义

about.html

@@ -129,6 +129,15 @@
                         <a href="javascript:void(0);" onclick="toggleWechat()" class="s-icon" aria-label="WeChat QR code" tabindex="0"><i class="ri-wechat-fill"></i></a>
                         <a href="https://juejin.cn/user/3659591622878503" target="_blank" class="s-icon" aria-label="Juejin profile" tabindex="0"><i class="ri-code-box-line"></i></a>
                     </div>
+                    <!-- 推荐分享模块 TRAE 链接：https://www.trae.ai/s/8HSXCa -->
+                    <div class="recommend-share-module">
+                        <a href="https://www.trae.ai/s/8HSXCa" target="_blank" class="share-link" aria-label="推荐分享">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18" class="share-icon">
+                                <path stroke="#32F08C" stroke-width="1.35" d="M3.75 9H3V6h12v3h-.75M3.75 9v6h10.5V9M3.75 9h10.5M9 6V4.75M9 6H7.75a2.5 2.5 0 0 1-2.5-2.5c0-.69.56-1.25 1.25-1.25A2.5 2.5 0 0 1 9 4.75M9 6h1.25a2.5 2.5 0 0 0 2.5-2.5c0-.69-.56-1.25-1.25-1.25A2.5 2.5 0 0 0 9 4.75M9 6v9"></path>
+                            </svg>
+                            <span class="badge-dot"></span>
+                        </a>
+                    </div>
                 </div>
             </div>
 

css/about.css

@@ -584,8 +584,6 @@ body {
     contain: layout style;
 }
 
-
-
 .avatar-ring {
     position: relative;
     width: 120px;
@@ -638,6 +636,48 @@ body {
     justify-content: center;
     gap: 4px;
 }
+/* Social Links */
+.social-dock {
+    display: flex;
+    gap: 12px;
+    margin-top: 20px;
+}
+
+.s-icon {
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    background: rgba(128, 128, 128, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    transition: all 0.3s;
+    text-decoration: none;
+}
+
+.s-icon:hover {
+    background: var(--accent);
+    color: #fff;
+    transform: translateY(-3px);
+}
+.s-icon:hover i {
+    color: transparent !important;
+    -webkit-text-fill-color: transparent;
+}
+.s-icon i {
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+}
+.s-icon[href*="github.com"] i { background: var(--gradient-7); }
+.s-icon[href^="mailto:"] i { background: var(--gradient-6); }
+.s-icon[href*="blog.hehouhui.cn"] i { background: var(--gradient-3); }
+.s-icon[href*="zhihu.com"] i { background: var(--gradient-4); }
+.s-icon[href*="juejin.cn"] i { background: var(--gradient-1); }
+.s-icon[onclick*="toggleWechat"] i { background: var(--gradient-5); }
+
 /* Tablet Profile Layout */
 @media (min-width: 769px) and (max-width: 1024px) {
     .area-profile {
@@ -689,6 +729,40 @@ body {
     .desktop-social {
         display: none;
     }
+
+    /* 移动端推荐分享模块调整 */
+    .recommend-share-module {
+        right: 15px;
+        bottom: 15px;
+        opacity: 0;
+        transform: translateY(10px);
+        animation: shareModuleFadeIn 0.5s ease-out 0.5s forwards;
+    }
+
+    @keyframes shareModuleFadeIn {
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .share-link {
+        width: 36px;
+        height: 36px;
+    }
+
+    .share-icon {
+        width: 16px;
+        height: 16px;
+    }
+
+    .badge-dot {
+        width: 6px;
+        height: 6px;
+        top: 1px;
+        right: 1px;
+        border-width: 1px;
+    }
 }
 
 /* Night Theme Profile Styles */
@@ -704,10 +778,10 @@ body {
     background-clip: text !important;
     color: transparent !important;
     text-shadow:
-            0 0 10px rgba(255, 126, 179, 0.8),
+            0 0 2px rgba(255, 126, 179, 0.3),
-            0 0 20px rgba(255, 117, 140, 0.7),
+            0 0 6px rgba(255, 117, 140, 0.1),
-            0 0 30px rgba(255, 107, 107, 0.6),
+            0 0 32px rgba(255, 107, 107, 0.4),
-            0 0 40px rgba(255, 154, 139, 0.5);
+            0 0 10px rgba(255, 154, 139, 0.5);
     transform: translateZ(0);
     -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.3);
 }
@@ -725,16 +799,29 @@ body {
     -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.2);
 }
 
-/* Social Links */
+
-.social-dock {
+
-    display: flex;
+/* 推荐分享模块 */
-    gap: 12px;
+.recommend-share-module {
-    margin-top: 20px;
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    opacity: 0;
+    transform: translateY(10px);
+    animation: shareModuleFadeIn 0.5s ease-out 0.5s forwards;
 }
 
-.s-icon {
+@keyframes shareModuleFadeIn {
-    width: 46px;
+    to {
-    height: 46px;
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.share-link {
+    position: relative;
+    width: 42px;
+    height: 42px;
     border-radius: 50%;
     background: rgba(128, 128, 128, 0.1);
     display: flex;
@@ -743,29 +830,51 @@ body {
     color: var(--text-secondary);
     transition: all 0.3s;
     text-decoration: none;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
 
-.s-icon:hover {
+.share-link:hover {
     background: var(--accent);
     color: #fff;
     transform: translateY(-3px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
-.s-icon:hover i {
+
-    color: transparent !important;
+.share-icon {
-    -webkit-text-fill-color: transparent;
+    width: 18px;
+    height: 18px;
 }
-.s-icon i {
+
-    -webkit-background-clip: text;
+.share-icon path {
-    background-clip: text;
+    stroke: #32F08C;
-    color: transparent;
+}
-    -webkit-text-fill-color: transparent;
+
+.badge-dot {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 8px;
+    height: 8px;
+    background: #ff4757;
+    border-radius: 50%;
+    border: 2px solid var(--bg-base);
+}
+
+/* 夜间模式下的推荐分享模块 */
+[data-theme="night"] .share-link {
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme="night"] .share-link:hover {
+    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
+}
+
+/* 夜间模式下的SVG图标 */
+[data-theme="night"] .share-icon path {
+    stroke: #32F08C;
+    filter: drop-shadow(0 0 4px rgba(50, 240, 140, 0.4));
 }
-.s-icon[href*="github.com"] i { background: var(--gradient-7); }
-.s-icon[href^="mailto:"] i { background: var(--gradient-6); }
-.s-icon[href*="blog.hehouhui.cn"] i { background: var(--gradient-3); }
-.s-icon[href*="zhihu.com"] i { background: var(--gradient-4); }
-.s-icon[href*="juejin.cn"] i { background: var(--gradient-1); }
-.s-icon[onclick*="toggleWechat"] i { background: var(--gradient-5); }
 
 /* Night Theme Social Styles */
 [data-theme="night"] .s-icon {
@@ -785,9 +894,19 @@ body {
         display: none !important;
     }
 
-    .social-dock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; }
+    .social-dock {
-    .s-icon { width: 42px; height: 42px; }
+        display: grid;
-    .s-icon i { font-size: 1.6rem; }
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+        justify-items: center;
+    }
+    .s-icon {
+        width: 42px;
+        height: 42px;
+    }
+    .s-icon i {
+        font-size: 1.6rem;
+    }
 }
 
 /* Mobile Social Layout */
@@ -801,9 +920,8 @@ body {
         justify-content: space-around;
         padding: 20px;
     }
-    .desktop-social {
+
-        display: none;
+
-    }
     .ms-btn {
         width: 40px;
         height: 40px;