feat(i18n): 优化i18n实现逻辑，调整index.ts及首页相关样式和逻辑

Author: CC11001100

office-website/src/i18n/index.ts

@@ -94,6 +94,16 @@ const zhTranslation = {
       description: "完全开源，社区驱动，持续改进"
     }
   },
+  contributors: {
+    title: "贡献者与感谢",
+    description: "感谢以下用户帮助我们不断完善产品：",
+    list: [
+      {
+        name: "mazp99",
+        profile: "https://github.com/mazp99"
+      }
+    ]
+  },
   install: {
     title: "安装指南",
     step1: {
@@ -250,6 +260,16 @@ const enTranslation = {
       description: "Support quick copying of node content with right-click menu while preserving original formatting"
     }
   },
+  contributors: {
+    title: "Contributors & Thanks",
+    description: "Thanks to the following users for reporting issues and suggesting improvements, helping us to continuously enhance our product:",
+    list: [
+      {
+        name: "mazp99",
+        profile: "https://github.com/mazp99"
+      }
+    ]
+  },
   whyUse: {
     title: "Why Use AST Explorer Helper?",
     efficiency: {

office-website/src/pages/Home/Home.module.css

@@ -752,31 +752,52 @@
   text-align: center;
   border: 1px solid var(--border-color);
   transition: all 0.3s ease;
-  width: 280px;
+  width: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
 }
 
 .contributorItem:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-hover);
   border-color: var(--primary);
+  background-color: var(--bg-lighter);
 }
 
-.contributorItem h3 {
-  color: var(--text-primary);
-  font-size: 1.4rem;
-  font-weight: 600;
+.contributorAvatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
   margin-bottom: var(--space-3);
+  border: 2px solid var(--border-color);
+  transition: all 0.3s ease;
 }
 
-.contributorItem h3 a {
+.contributorAvatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.contributorItem:hover .contributorAvatar {
+  border-color: var(--primary);
+  transform: scale(1.05);
+}
+
+.contributorItem h3 {
   color: var(--primary);
-  text-decoration: none;
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin: 0;
   transition: color 0.2s ease;
 }
 
-.contributorItem h3 a:hover {
+.contributorItem:hover h3 {
   color: var(--primary-dark);
-  text-decoration: underline;
 }
 
 .contributorItem p {

office-website/src/pages/Home/index.tsx

@@ -195,16 +195,46 @@ const Home: React.FC = () => {
           <h2 className="text-center">{t('contributors.title')}</h2>
           <p className="text-center">{t('contributors.description')}</p>
           <div className={styles.contributorsGrid}>
-            {(t('contributors.list', { returnObjects: true }) as Array<{name: string; profile: string; contribution: string}>).map((contributor, index) => (
-              <div className={styles.contributorItem} key={index}>
-                <h3>
-                  <a href={contributor.profile} target="_blank" rel="noopener noreferrer">
-                    {contributor.name}
+            {(() => {
+              const contributorsList = t('contributors.list', { returnObjects: true });
+              // 检查是否为数组且至少有一个元素
+              if (Array.isArray(contributorsList) && contributorsList.length > 0) {
+                return contributorsList.map((contributor, index) => (
+                  <a 
+                    href={contributor.profile} 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className={styles.contributorItem} 
+                    key={index}
+                  >
+                    <div className={styles.contributorAvatar}>
+                      <img 
+                        src={`https://github.com/${contributor.name}.png`} 
+                        alt={`${contributor.name}'s avatar`} 
+                      />
+                    </div>
+                    <h3>{contributor.name}</h3>
                   </a>
-                </h3>
-                <p>{contributor.contribution}</p>
-              </div>
-            ))}
+                ));
+              }
+              // 默认显示一个固定的贡献者项（备用方案）
+              return (
+                <a 
+                  href="https://github.com/mazp99" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className={styles.contributorItem}
+                >
+                  <div className={styles.contributorAvatar}>
+                    <img 
+                      src="https://github.com/mazp99.png" 
+                      alt="mazp99's avatar" 
+                    />
+                  </div>
+                  <h3>mazp99</h3>
+                </a>
+              );
+            })()}
           </div>
         </div>
       </section>