feat(ui): 添加学术平台社交图标及支持配置

- 新增 SocialIcon 组件，支持常见社交平台及学术平台图标展示
- 扩展配置示例文件，加入学术平台社交链接注释示例
- 依赖中新增 react-icons 库用于图标显示
- 修改 Footer 组件，替换纯文本为图标加名称展示社交链接
- 增加 Footer 样式，优化社交链接图标与文字布局及交互样式

Author: wsqstar

config.example.yml

@@ -24,6 +24,11 @@ profile:
 # ========================================
 # 社交链接
 # ========================================
+# 支持的图标类型：
+# 常见社交平台: github, twitter, linkedin, facebook, instagram, youtube, email, 
+#               website, medium, reddit, stackoverflow, wechat, weibo, zhihu
+# 学术平台: scholar/google-scholar (Google Scholar), orcid (ORCID), 
+#          researchgate/research-gate (ResearchGate)
 social:
   - name: "GitHub"
     icon: "github"
@@ -34,6 +39,16 @@ social:
   - name: "Twitter"
     icon: "twitter"
     url: "https://twitter.com/yourusername"
+  # 学术平台示例：
+  # - name: "Google Scholar"
+  #   icon: "scholar"
+  #   url: "https://scholar.google.com/citations?user=YOUR_ID"
+  # - name: "ORCID"
+  #   icon: "orcid"
+  #   url: "https://orcid.org/YOUR-ORCID-ID"
+  # - name: "ResearchGate"
+  #   icon: "researchgate"
+  #   url: "https://www.researchgate.net/profile/YOUR_PROFILE"
 
 # ========================================
 # 导航菜单配置

package-lock.json

@@ -33,6 +33,7 @@
     "markdown-it-task-lists": "^2.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.11.0"
   },
   "devDependencies": {

package.json

@@ -16,6 +16,11 @@ profile:
   location: "City, Country"
 
 # 社交链接
+# 支持的图标类型：
+# 常见社交平台: github, twitter, linkedin, facebook, instagram, youtube, email, 
+#               website, medium, reddit, stackoverflow, wechat, weibo, zhihu
+# 学术平台: scholar/google-scholar (Google Scholar), orcid (ORCID), 
+#          researchgate/research-gate (ResearchGate)
 social:
   - name: "GitHub"
     icon: "github"
@@ -26,6 +31,13 @@ social:
   - name: "Twitter"
     icon: "twitter"
     url: "https://twitter.com/yourusername"
+  # 学术平台示例（取消注释即可使用）：
+  # - name: "Google Scholar"
+  #   icon: "scholar"
+  #   url: "https://scholar.google.com/citations?user=YOUR_ID"
+  # - name: "ORCID"
+  #   icon: "orcid"
+  #   url: "https://orcid.org/YOUR-ORCID-ID"
 
 # 导航菜单
 # showInMobile: 控制在移动端是否默认显示(false则放入汉堡菜单)

public/config.yml

@@ -0,0 +1,86 @@
+import React from 'react'
+import {
+  FaGithub,
+  FaTwitter,
+  FaLinkedin,
+  FaFacebook,
+  FaInstagram,
+  FaYoutube,
+  FaEnvelope,
+  FaGlobe,
+  FaMedium,
+  FaReddit,
+  FaStackOverflow,
+  FaWeixin,
+  FaWeibo,
+} from 'react-icons/fa'
+import {
+  SiGooglescholar,
+  SiOrcid,
+  SiResearchgate,
+  SiZhihu,
+} from 'react-icons/si'
+
+/**
+ * 社交媒体图标映射
+ * 支持常见的社交平台和学术平台
+ */
+const iconMap = {
+  // 常见社交平台
+  github: FaGithub,
+  twitter: FaTwitter,
+  linkedin: FaLinkedin,
+  facebook: FaFacebook,
+  instagram: FaInstagram,
+  youtube: FaYoutube,
+  email: FaEnvelope,
+  website: FaGlobe,
+  medium: FaMedium,
+  reddit: FaReddit,
+  stackoverflow: FaStackOverflow,
+  wechat: FaWeixin,
+  weibo: FaWeibo,
+  zhihu: SiZhihu,
+
+  // 学术平台
+  scholar: SiGooglescholar,
+  'google-scholar': SiGooglescholar,
+  'google scholar': SiGooglescholar,
+  orcid: SiOrcid,
+  researchgate: SiResearchgate,
+  'research-gate': SiResearchgate,
+}
+
+/**
+ * 社交媒体图标组件
+ * @param {string} icon - 图标名称（小写）
+ * @param {number} size - 图标大小（默认 20）
+ * @param {object} props - 其他传递给图标的属性
+ */
+export function SocialIcon({ icon, size = 20, ...props }) {
+  // 转换为小写并查找对应的图标组件
+  const iconKey = icon?.toLowerCase() || ''
+  const IconComponent = iconMap[iconKey]
+
+  // 如果找不到对应图标，返回默认的全局图标
+  if (!IconComponent) {
+    return <FaGlobe size={size} {...props} />
+  }
+
+  return <IconComponent size={size} {...props} />
+}
+
+/**
+ * 获取所有支持的图标名称列表
+ */
+export function getSupportedIcons() {
+  return Object.keys(iconMap)
+}
+
+/**
+ * 检查图标名称是否被支持
+ */
+export function isIconSupported(icon) {
+  const iconKey = icon?.toLowerCase() || ''
+  return iconKey in iconMap
+}

src/components/common/SocialIcon.jsx

@@ -1,16 +1,17 @@
-import React from 'react';
-import { useSiteConfig, useSocialConfig } from '../../config/ConfigContext';
-import { useI18n } from '../../i18n/I18nContext';
-import styles from './Footer.module.css';
+import React from 'react'
+import { useSiteConfig, useSocialConfig } from '../../config/ConfigContext'
+import { useI18n } from '../../i18n/I18nContext'
+import { SocialIcon } from '../common/SocialIcon'
+import styles from './Footer.module.css'
 
 /**
  * 页面底部组件
  */
 export function Footer() {
-  const siteConfig = useSiteConfig();
-  const socialLinks = useSocialConfig();
-  const { t } = useI18n();
-  const currentYear = new Date().getFullYear();
+  const siteConfig = useSiteConfig()
+  const socialLinks = useSocialConfig()
+  const { t } = useI18n()
+  const currentYear = new Date().getFullYear()
 
   return (
     <footer className={styles.footer}>
@@ -20,15 +21,17 @@ export function Footer() {
           {socialLinks && socialLinks.length > 0 && (
             <div className={styles.social}>
               {socialLinks.map((link, index) => (
-                <a 
+                <a
                   key={index}
                   href={link.url}
                   className={styles.socialLink}
                   target="_blank"
                   rel="noopener noreferrer"
                   aria-label={link.name}
+                  title={link.name}
                 >
-                  {link.name}
+                  <SocialIcon icon={link.icon} size={20} />
+                  <span className={styles.socialName}>{link.name}</span>
                 </a>
               ))}
             </div>
@@ -37,19 +40,21 @@ export function Footer() {
           {/* 版权信息 */}
           <div className={styles.copyright}>
             <p>
-              © {currentYear} {siteConfig?.author || siteConfig?.title}. 
-              {' '}{t('footer.poweredBy')} <a 
-                href="https://github.com/mappedinfo/ppage" 
-                target="_blank" 
+              © {currentYear} {siteConfig?.author || siteConfig?.title}.{' '}
+              {t('footer.poweredBy')}{' '}
+              <a
+                href="https://github.com/mappedinfo/ppage"
+                target="_blank"
                 rel="noopener noreferrer"
                 className={styles.link}
               >
                 {t('footer.poweredByLink')}
-              </a>{t('footer.poweredBySuffix') && ` ${t('footer.poweredBySuffix')}`}
+              </a>
+              {t('footer.poweredBySuffix') && ` ${t('footer.poweredBySuffix')}`}
             </p>
           </div>
         </div>
       </div>
     </footer>
-  );
+  )
 }

src/components/layout/Footer.jsx

@@ -26,14 +26,24 @@
 }
 
 .socialLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
   color: var(--text-secondary);
   text-decoration: none;
   font-size: var(--font-size-sm);
   transition: color var(--transition-base);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
 }
 
 .socialLink:hover {
   color: var(--primary-color);
+  background-color: var(--bg-primary);
+}
+
+.socialName {
+  font-size: var(--font-size-sm);
 }
 
 .copyright {