feat(about): 优化移动端社交链接与悬浮按钮交互

- 重构兴趣列表样式，适配不同屏幕尺寸
- 增强移动端社交链接黑夜模式下的视觉效果
- 实现悬浮按钮可拖拽功能，提升用户体验
- 集成 Artalk 评论组件并定制主题样式
- 调整移动端布局与响应式设计细节
- 更新页面标题与功能按钮文本描述
- 修复部分组件在黑夜模式下的显示问题

css/about.css

@@ -903,62 +903,82 @@ body {
     padding: 20px;
 }
 
-.interest-list {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 15px;
-    /*height: 100%; */
-    margin-top: 1rem;
-    align-content: center;
+@media (min-width: 769px) {
+  .interest-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 12px;
+      margin-top: 1rem;
+  }
+  
+  .interest-item {
+      background: rgba(128, 128, 128, 0.05);
+      padding: 12px 16px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      transition: background 0.3s;
+  }
+  
+  .interest-item:hover {
+      background: rgba(128, 128, 128, 0.1);
+  }
+  
+  .i-emoji {
+      font-size: 2rem;
+      color: var(--text-primary);
+      -webkit-text-fill-color: initial;
+  }
+  
+  .i-text {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      gap: 4px;
+  }
+  
+  /* 添加 min-width: 0 防止溢出 */
+  .i-text strong {
+      font-size: 1.1rem;
+      color: var(--text-primary);
+      /* 为兴趣标签添加渐变色彩 */
+      background: var(--gradient-1);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      white-space: nowrap;
+  }
+  
+  .i-text span:not(.i-emoji) {
+      font-size: 0.9rem;
+      color: var(--text-tertiary);
+      /* 为兴趣描述添加渐变色彩 */
+      background: var(--gradient-2);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      white-space: normal;
+  }
 }
 
-.interest-item {
-    background: rgba(128, 128, 128, 0.05);
-    padding: 5px;
-    border-radius: 2px;
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    transition: background 0.3s;
-}
-
-.interest-item:hover {
-    background: rgba(128, 128, 128, 0.1);
-}
-
-.i-emoji {
-    font-size: 1.6rem;
-    color: var(--text-primary);
-    -webkit-text-fill-color: initial;
-}
-
-.i-text {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-}
-
-/* 添加 min-width: 0 防止溢出 */
-.i-text strong {
-    font-size: 0.9rem;
-    color: var(--text-primary);
-    /* 为兴趣标签添加渐变色彩 */
-    background: var(--gradient-1);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    -webkit-text-fill-color: transparent;
-}
-
-.i-text span:not(.i-emoji) {
-    font-size: 0.75rem;
-    color: var(--text-tertiary);
-    /* 为兴趣描述添加渐变色彩 */
-    background: var(--gradient-2);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    -webkit-text-fill-color: transparent;
+@media (min-width: 769px) and (max-width: 1024px) {
+  .interest-list {
+      grid-template-columns: 1fr;
+      max-height: none;
+  }
+  
+  .i-text {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 4px;
+  }
+  
+  .i-text strong, .i-text span {
+      white-space: normal;
+  }
 }
 
 /* =========================================
@@ -1169,32 +1189,39 @@ body {
         flex-direction: column;
     }
 
-    /* 修复平板模式下兴趣模块的高度问题 */
     .interest-list {
-        grid-template-columns: 1fr 1fr;
-        max-height: 150px; /* 限制高度 */
-        overflow: hidden;
+        grid-template-columns: 1fr;
+        gap: 12px;
+        max-height: none;
     }
-
+    
+    .interest-item {
+        padding: 12px 16px;
+        border-radius: 12px;
+        gap: 15px;
+    }
+    
+    .i-emoji {
+        font-size: 2rem;
+    }
+    
     .i-text {
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
+        flex-direction: column;
+        gap: 4px;
     }
-
-    .i-text strong, .i-text span {
-        white-space: nowrap;
-    }
-
-    /* 兴趣模块文本渐变色彩 */
+    
     .i-text strong {
+        font-size: 1.1rem;
+        white-space: nowrap;
         background: var(--gradient-1);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
     }
-
+    
     .i-text span {
+        font-size: 0.9rem;
+        white-space: normal;
         background: var(--gradient-2);
         -webkit-background-clip: text;
         background-clip: text;
@@ -1524,20 +1551,71 @@ body {
     .i-text span:not(.i-emoji) { flex: 1 1 100%; white-space: normal; }
 }
 
-@media (min-width: 769px) {
-    .social-dock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; }
-    .s-icon { width: 42px; height: 42px; }
-    .s-icon i { font-size: 1.6rem; }
+@media (max-width: 768px) {
+    .quote-box p.quote-collapsed { 
+        display: -webkit-box; 
+        -webkit-line-clamp: 2; 
+        -webkit-box-orient: vertical; 
+        overflow: hidden; 
+    }
+    
+    /* 增强移动端社交链接黑夜模式下的发光效果 */
+    [data-theme="night"] .ms-btn:nth-child(1) {
+        box-shadow: 0 0 20px rgba(132, 250, 176, 0.8);
+    }
+    
+    [data-theme="night"] .ms-btn:nth-child(2) {
+        box-shadow: 0 0 20px rgba(246, 211, 101, 0.8);
+    }
+    
+    [data-theme="night"] .ms-btn:nth-child(3) {
+        box-shadow: 0 0 20px rgba(255, 154, 158, 0.8);
+    }
+    
+    [data-theme="night"] .ms-btn:nth-child(4) {
+        box-shadow: 0 0 20px rgba(168, 237, 234, 0.8);
+    }
+    
+    [data-theme="night"] .ms-btn:nth-child(5) {
+        box-shadow: 0 0 20px rgba(210, 153, 194, 0.8);
+    }
+    
+    [data-theme="night"] .ms-btn:nth-child(6) {
+        box-shadow: 0 0 20px rgba(161, 196, 253, 0.8);
+    }
 }
 
-@media (max-width: 768px) {
-    .quote-box p.quote-collapsed { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+/* 确保在非移动端隐藏 .mobile-social */
+@media (min-width: 769px) {
+    .mobile-social {
+        display: none !important;
+    }
+    
+    .social-dock { 
+        display: grid; 
+        grid-template-columns: repeat(3, 1fr); 
+        gap: 12px; 
+        justify-items: center; 
+    }
+    
+    .s-icon { 
+        width: 42px; 
+        height: 42px; 
+    }
+    
+    .s-icon i { 
+        font-size: 1.6rem; 
+    }
 }
 
+
+
 .interest-list { grid-auto-rows: minmax(80px, auto); }
 .interest-item { padding: 14px; border-radius: 12px; gap: 12px; }
 .i-emoji { font-size: 1.6rem; }
 .i-text strong { display: block; }
+
+
 .i-text span:not(.i-emoji) { display: block; }
 
 /* =========================================
@@ -1646,10 +1724,11 @@ body {
 }
 .social-dock .s-icon { color: var(--text-primary); }
 .social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; }
-.mobile-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1100; }
-css
-编辑
-    /* ========== 全局基础样式（白天 & 黑夜通用） ========== */
+
+
+
+
+/* ========== 全局基础样式（白天 & 黑夜通用） ========== */
 .fab-main {
     display: flex;
     align-items: center;
@@ -1686,8 +1765,61 @@ css
     padding: 8px 12px;
     border: var(--glass-border);
     box-shadow: var(--glass-shadow);
-    opacity: 0.9;
-    transition: opacity 0.2s;
+}
+
+/* 添加Artalk评论组件的自定义样式 */
+.artalk-comment {
+  --at-color-main: var(--accent) !important;
+  --at-color-font: var(--text-primary) !important;
+  --at-color-meta: var(--text-secondary) !important;
+  --at-color-border: rgba(128, 128, 128, 0.1) !important;
+  --at-color-bg: var(--glass-bg) !important;
+  --at-color-bg-grey: rgba(128, 128, 128, 0.05) !important;
+  --at-color-bg-hover: rgba(128, 128, 128, 0.1) !important;
+  --at-color-bg-light: var(--glass-bg) !important;
+  --at-color-shadow: var(--glass-shadow) !important;
+}
+
+[data-theme="night"] .artalk-comment {
+  --at-color-font: var(--text-primary) !important;
+  --at-color-meta: var(--text-secondary) !important;
+  --at-color-border: rgba(255, 255, 255, 0.08) !important;
+  --at-color-bg: var(--glass-bg) !important;
+  --at-color-bg-grey: rgba(255, 255, 255, 0.05) !important;
+  --at-color-bg-hover: rgba(255, 255, 255, 0.1) !important;
+  --at-color-bg-light: var(--glass-bg) !important;
+  --at-color-shadow: var(--glass-shadow) !important;
+}
+
+.artalk-comment .atk-main-editor {
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border-radius: var(--radius) !important;
+}
+
+.artalk-comment .atk-comment-wrap {
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border-radius: var(--radius) !important;
+}
+
+/* 确保评论区域适配白天/黑夜模式 */
+#artalk-container {
+  border-radius: var(--radius);
+}
+
+#artalk-container .atk-main-editor {
+  background: var(--glass-bg);
+  border: var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
+#artalk-container .atk-comment-wrap {
+  background: var(--glass-bg);
+  border: var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  opacity: 0.9;
+  transition: opacity 0.2s;
 }
 
 .fab-menu.open {
@@ -2402,6 +2534,24 @@ body {
     color: var(--text-secondary);
 }
 
+/* --- Mobile Social --- */
+.mobile-social {
+    display: flex;
+    justify-content: space-around;
+    padding: 20px;
+}
+
+.ms-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: rgba(128, 128, 128, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+}
+
 .mbti-tags .tag {
     background: none;
     border: none;
@@ -2624,6 +2774,67 @@ body {
     padding: 20px;
 }
 
+@media (min-width: 1025px) {
+  .interest-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 15px;
+      margin-top: 1rem;
+  }
+  
+  .interest-item {
+      background: rgba(128, 128, 128, 0.05);
+      padding: 15px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      transition: background 0.3s;
+  }
+  
+  .interest-item:hover {
+      background: rgba(128, 128, 128, 0.1);
+  }
+  
+  .i-emoji {
+      font-size: 2rem;
+      color: var(--text-primary);
+      -webkit-text-fill-color: initial;
+  }
+  
+  .i-text {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      gap: 5px;
+  }
+  
+  /* 添加 min-width: 0 防止溢出 */
+  .i-text strong {
+      font-size: 1.1rem;
+      color: var(--text-primary);
+      /* 为兴趣标签添加渐变色彩 */
+      background: var(--gradient-1);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      white-space: nowrap;
+  }
+  
+  .i-text span:not(.i-emoji) {
+      font-size: 0.9rem;
+      color: var(--text-tertiary);
+      /* 为兴趣描述添加渐变色彩 */
+      background: var(--gradient-2);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      white-space: normal;
+  }
+}
+
 .interest-list {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -2682,6 +2893,11 @@ body {
     -webkit-text-fill-color: transparent;
 }
 
+/* 移动端社交链接 */
+.mobile-social {
+    display: none;
+}
+
 /* =========================================
    5. Content Sections (Blog/Github)
    ========================================= */
@@ -3367,8 +3583,10 @@ body {
 }
 .social-dock .s-icon { color: var(--text-primary); }
 .social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; }
-.mobile-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1100; }
-.fab-main { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 22px; padding: 10px 14px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); opacity: 0.8; }
+.mobile-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1100; cursor: move; user-select: none; display: block !important; }
+.fab-main { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 22px; padding: 10px 14px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); opacity: 0.9; transition: all 0.3s ease; }
+.fab-main:hover { opacity: 1; transform: scale(1.05); }
+.fab-main:active { transform: scale(0.95); }
 .fab-label { font-size: 12px; }
 .fab-menu { display: none; flex-direction: column; gap: 10px; margin-top: 10px; }
 .fab-item { display: flex; align-items: center; gap: 6px; background: var(--glass-bg); border-radius: 18px; padding: 8px 12px; border: var(--glass-border); box-shadow: var(--glass-shadow); opacity: 0.8; }