feat: 赞助者列表 perf: 关于我们页面

.gitignore

@@ -1,5 +1,6 @@
 # Dependencies
 /node_modules
+package-lock.json
 
 # Production
 /build

docs/sponsor.md

@@ -0,0 +1,34 @@
+---
+sidebar_position: 8
+hide_table_of_contents: true
+---
+
+# 赞助社区
+
+感谢赞助了社区的玩家。
+
+***
+
+## 赞助玩家名单
+
+import SponsorList from '@site/src/components/SponsorList/SponsorList';
+
+<SponsorList
+sponsors={[
+{ name: "Suifengsama520", amount: "¥10", date: "2026-07-12" },
+{ name: "DARKMATTERZ", amount: "¥20", date: "2026-08-03" },
+{ name: "waibibabo2009", amount: "¥50", date: "2026-08-03" },
+{ name: "NMDHTX", amount: "¥15", date: "2026-08-27" },
+]}
+/>
+
+## 社区赞助规定
+
+1. 赞助社区为玩家自愿行为，赞助前请确认您的赞助完全出于自愿且未受奖励性诱导；
+2. 本社区为公益，赞助行为不会获得任何特权、道具、称号或特殊权限，社区保障所有玩家的游戏体验完全一致；
+3. 赞助统一使用人民币核算；
+4. 为了方便管理组统计和联络，赞助满 15 元的可以在页面留言；
+5. 赞助满 50 元的，如果赞助方有需要，可以跟管理组商量约定这笔钱是用于某个特定活动、或者在某个时间内用完。如果时间到了或活动搞完了还有剩余，自动转为无限制赞助，用于社区其他运营开支；
+6. 提供实物作为赞助的，以赞助时确定的价格为准。
+
+请联系管理员进行赞助。

src/components/SponsorList/SponsorList.jsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const SponsorList = ({ sponsors = [] }) => {
+    const [visible, setVisible] = useState([]);
+    const cardRefs = useRef([]);
+
+    useEffect(() => {
+        if (!('IntersectionObserver' in window)) {
+            setVisible(sponsors.map(() => true));
+            return;
+        }
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    const index = Number(entry.target.dataset.index);
+                    if (entry.isIntersecting) {
+                        setVisible((prev) => {
+                            const next = [...prev];
+                            next[index] = true;
+                            return next;
+                        });
+                        observer.unobserve(entry.target);
+                    }
+                });
+            },
+            { threshold: 0.15, rootMargin: '0px 0px -20px 0px' }
+        );
+        cardRefs.current.forEach((el) => el && observer.observe(el));
+        return () => observer.disconnect();
+    }, [sponsors]);
+
+    useEffect(() => {
+        setVisible(sponsors.map(() => false));
+        const timer = setTimeout(() => {
+            if (cardRefs.current.length && 'IntersectionObserver' in window) {
+                const observer = new IntersectionObserver(
+                    (entries) => {
+                        entries.forEach((entry) => {
+                            const index = Number(entry.target.dataset.index);
+                            if (entry.isIntersecting) {
+                                setVisible((prev) => {
+                                    const next = [...prev];
+                                    next[index] = true;
+                                    return next;
+                                });
+                                observer.unobserve(entry.target);
+                            }
+                        });
+                    },
+                    { threshold: 0.15, rootMargin: '0px 0px -20px 0px' }
+                );
+                cardRefs.current.forEach((el) => el && observer.observe(el));
+                return () => observer.disconnect();
+            }
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [sponsors]);
+
+    return (
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-6 max-w-6xl mx-auto my-8 px-4">
+            {sponsors.map((sponsor, index) => {
+                const isVisible = visible[index] || false;
+                const delay = (index % 6) * 60;
+
+                return (
+                    <div
+                        key={index}
+                        ref={(el) => (cardRefs.current[index] = el)}
+                        data-index={index}
+                        className='bg-white dark:bg-[#1f262b] rounded-2xl p-5 text-center border border-gray-200 dark:border-[#354048] shadow-sm transition-all duration-300 ease-out hover:-translate-y-1.5 hover:shadow-lg hover:border-[#f08a7f]"}'
+                        style={{ transitionDelay: isVisible ? `${delay}ms` : '0ms' }}
+                    >
+                        {/* 名称：强制单行，不换行，且留足空间 */}
+                        <div className="text-lg font-semibold text-gray-800 dark:text-gray-100 whitespace-nowrap overflow-visible">
+                            {sponsor.name || '匿名赞助者'}
+                        </div>
+
+                        {/* 金额 + 日期 */}
+                        {(sponsor.amount || sponsor.date) && (
+                            <div className="flex justify-center gap-2 mt-1 flex-wrap">
+                                {sponsor.amount && (
+                                    <span className="text-xs bg-gray-100 dark:bg-[#2a333a] text-gray-600 dark:text-gray-300 px-2 py-0.5 rounded-full">
+                                        {sponsor.amount}
+                                    </span>
+                                )}
+                                {sponsor.date && (
+                                    <span className="text-xs bg-gray-100 dark:bg-[#2a333a] text-gray-600 dark:text-gray-300 px-2 py-0.5 rounded-full">
+                                        {sponsor.date}
+                                    </span>
+                                )}
+                            </div>
+                        )}
+
+                        {/* 留言 */}
+                        {sponsor.message && (
+                            <div className="text-sm text-gray-600 dark:text-gray-400 mt-2 static border-t border-dashed border-gray-200 dark:border-[#354048] pt-2">
+                                “{sponsor.message}”
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default SponsorList;

src/pages/about.md

@@ -8,26 +8,17 @@ hide_table_of_contents: true
 
 ## 简介
 
-我们 （ 即 RedStarMC社区 / RedStarMCCommunity / 红星我的世界社区 ） 目前正依托单一服务器，开展核心社区运营工作。  
+我们 （ 即 RedStarMC社区 / RedStarMCCommunity / 红星我的世界社区 ） 目前正依托 Minecraft 服务器，开展核心社区运营工作。  
 但我们的发展愿景不止于此，我们不仅希望能为玩家提供优质的生存游戏体验，还计划拓展多元化游戏玩法，包括各类小游戏、模组生存、创造服务器等。  
 同时，我们希望能组建由玩家组成的建筑玩家社区、开发玩家社区、动画制作玩家社区等各类玩家玩家社区，为各位玩家提供一个快乐游玩、共同创造的平台。
 
 目前，社区已搭建维基和 Github 组织，为社区发展与玩家互动提供坚实支撑。未来，我们计划进一步开发用户系统，以支持外置登录等相关功能，持续完善社区服务体系。
 
 我们郑重承诺，社区将始终保持公益性质，不在游戏内设置任何收费项目及氪金内容，保障每一位玩家的公平游戏权益。
 
-我们致力于打造一个和谐友爱的社区环境，坚决杜绝各类不良行为，包括但不限于低俗言论、不良图片传播、不雅行为及网络暴力等，共同守护健康、积极的社区氛围。
+我们致力于打造一个和谐友爱的社区环境，坚决杜绝各类不良行为，包括但不限于发表低俗言论、传播不良图片、制作不雅建筑及网络暴力等，共同守护健康、积极的社区氛围。
 
-我们以 Minecraft 游戏服务器作为构成社区的组成部分，社区的组成部分同时还包括
-
-* 维基
-* QQ 群/频道
-* Github 组织
-* 外置登陆身份系统 （未开发完毕，未投入使用）
-
-我们目前致力于为 Minecraft:Java Edition 多人游戏服务器的创作。
-
-对于我们的 Minecraft 游戏服务器 通常被称为 “红星服务器”。
+我们目前致力于为 Minecraft:Java Edition 多人游戏服务器的创作，通常称为 “红星服务器”。
 
 :::info 我们的宗旨
 
@@ -41,55 +32,53 @@ hide_table_of_contents: true
 
 ### 组成部分
 
-社区下辖以下部分：
+社区由以下部分组成：
 
 * 管理组
 * Minecraft 服务器
-* 官网、维基
+* 官网
+* 维基
 * 社区所管辖的 QQ 群/频道
 * RedStarMC Github 组织
 * 外置登陆身份系统 （未开发完毕，未投入使用）
 
-除第一项 `管理组` 外，均为实际存在的社区公共场所。 
+:::note 社区所有权
 
-:::note 社区所有权 
+社区归全体玩家所有，社区利益即为全体玩家利益。社区由管理组领导，管理组实行民主集中制。
 
-社区归全体玩家所有，社区利益即为全体玩家利益。
+`管理组` 是社区的管理机构，管理其他各部分，对社区和玩家负责，受玩家监督，保证社区正常运转。管理组以全体玩家利益为自己的利益。
 
 :::
 
-:::tip
+### 玩家
 
-`管理组` 是社区的管理机构，管理其他各部分，对社区和玩家负责，受玩家监督，保证社区正常运转。
+所有正式加入社区且未被封禁的成员均为玩家，担任社区职务或加入管理组的前提是一名玩家。
 
-`管理组` 是从玩家中而来，`管理组` 成员均为社区玩家。
+### 社区职务
 
-:::
+社区职务包括以下职务：
 
-### 社区人员
-
-除因其他原因留在社区管辖范围内的其他社区代表，社区内所有人均为 `玩家`。
-
-### 社区职务 
-
-社区职务包括下列内容
-
-* `腐竹` 社区的主要管理者，负责社区各个方面。
-* `运行维护`（简称 `运维` ） 社区的主要管理者，主要负责运营，社区管理，保障社区各项服务正常运转。
+* `腐竹` 社区的主要管理者，负责统筹社区全面工作。
+* `运行维护`（简称 `运维` ） 社区的主要管理者，主要负责运营，社区维护，保障社区各项服务正常运转。
 * `管理` 社区的主要管理者，协助 `腐竹` 和 `运维` ，主要负责社区管理和运营。
 * `协管` 主要负责社区管理，协助 `腐竹` 和 `运维`。
 * `建筑师` 主要负责社区内 Minecraft 服务器的建筑等内容创作。
-* `核心玩家` 社区的主要监督者，监督其他职务，和许多玩家深入交流，确保管理组能准确执行全体玩家的意愿。
-* `开发 / 技术人员` 社区负责其他方面的人员。
+* `核心玩家` 社区的主要监督者，监督其他职务，和玩家深入交流，确保管理组能准确执行全体玩家的意愿。
+* `开发 / 技术人员` 社区负责其他方面的人员，单独列出。
+
+除 `腐竹` 和 `运行维护` 外，其他职位正式担任前均可设置一段实习期。实习期的长度、是否实行、是否转正由管理组决定。实习期职务在原职务名前加 `实习` 或 `见习` 。  
+`协管`、`建筑师`、`开发 / 技术人员` 直接由社区玩家自行申请担任。
 
-### 管理组
+### 管理组 {#Management-Committee}
 
-管理组由以下人员组成
+管理组由以下人员组成：
 
 * 组长
 * 副组长若干人
 * 组员若干人
-* 核心玩家若干
+
+管理组实行集体领导、民主集中、个别酝酿、会议决定。  
+管理组的职权包括：任免 `腐竹`、`运行维护`、`管理`，制定社区规则，决定是否封禁玩家，决定其他社区重大事项。
 
 ## 其他