- {rank &&
{rank}
}
-
-
-
-
-
-
- {hasLineStats ? (
- <>
- +{formatNumber(additions)}
- -{formatNumber(deletions)}
-
- ) : (
- 行数统计暂未显示
- )}
-
-
- 总贡献: {formatNumber(contributor.contributions)} 次提交
+ // 优先使用详细统计中的增删行数，如果没有则使用贡献数
+ const additions = contributor.additions || 0;
+ const deletions = contributor.deletions || 0;
+ const totalContribution = additions + deletions;
+
+ // 判断是否有增删行数数据
+ const hasLineStats = additions > 0 || deletions > 0;
+
+ return (
+
+ {rank &&
{rank}
}
+
+
+
+
+
+
+ {hasLineStats ? (
+ <>
+ +{formatNumber(additions)}
+ -{formatNumber(deletions)}
+
+ ) : (
+ 行数统计暂未显示
+ )}
+
+
总贡献: {formatNumber(contributor.contributions)} 次提交
+
-
-
- );
+ );
}
/**
* 贡献者卡片列表组件
*/
export default function ContributorCard({ repo = "Cubic-Project/NitWikit" }) {
- const [contributors, setContributors] = useState([]);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
-
- // 获取所有贡献者数据并处理
- useEffect(() => {
- async function loadAllContributorData() {
- try {
- setLoading(true);
-
- // 首先尝试从静态JSON文件加载
- try {
- const response = await fetch('/data/contributors.json');
- if (response.ok) {
- const staticData = await response.json();
- console.log(`从静态JSON加载了 ${staticData.length} 位贡献者数据`);
- setContributors(staticData);
- setLoading(false);
- return; // 成功加载静态数据，直接返回
- }
- } catch (staticError) {
- console.warn('无法加载静态贡献者数据，将尝试从GitHub API获取:', staticError);
- }
-
- // 静态数据加载失败，回退到直接请求GitHub API
- const contributorsData = await fetchContributors(repo);
-
- // 过滤掉机器人账户
- const filteredContributors = contributorsData.filter(contributor => !isBot(contributor.login));
-
- // 尝试获取详细统计数据
- let statsData = [];
- try {
- statsData = await fetchAllContributorStats(repo);
- } catch (statsError) {
- console.warn('获取详细统计数据失败，将使用基本贡献数据:', statsError);
+ const [contributors, setContributors] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ // 获取所有贡献者数据并处理
+ useEffect(() => {
+ async function loadAllContributorData() {
+ try {
+ setLoading(true);
+
+ // 首先尝试从静态JSON文件加载
+ try {
+ const response = await fetch("/data/contributors.json");
+ if (response.ok) {
+ const staticData = await response.json();
+ console.log(`从静态JSON加载了 ${staticData.length} 位贡献者数据`);
+ setContributors(staticData);
+ setLoading(false);
+ return; // 成功加载静态数据，直接返回
+ }
+ } catch (staticError) {
+ console.warn("无法加载静态贡献者数据，将尝试从GitHub API获取:", staticError);
+ }
+
+ // 静态数据加载失败，回退到直接请求GitHub API
+ const contributorsData = await fetchContributors(repo);
+
+ // 过滤掉机器人账户
+ const filteredContributors = contributorsData.filter((contributor) => !isBot(contributor.login));
+
+ // 尝试获取详细统计数据
+ let statsData = [];
+ try {
+ statsData = await fetchAllContributorStats(repo);
+ } catch (statsError) {
+ console.warn("获取详细统计数据失败，将使用基本贡献数据:", statsError);
+ }
+
+ // 合并统计数据到贡献者数据
+ const contributorsWithStats = filteredContributors.map((contributor) => {
+ const stats = getContributorStats(statsData, contributor.login);
+
+ return {
+ ...contributor,
+ additions: stats.additions || 0,
+ deletions: stats.deletions || 0,
+ total: contributor.contributions || 0
+ };
+ });
+
+ // 确保所有贡献者有非零贡献值进行排序
+ const validContributors = contributorsWithStats.filter((c) => c.contributions > 0 || c.total > 0);
+
+ // 按照贡献总量排序
+ const sorted = validContributors.sort(
+ (a, b) => (b.contributions || b.total) - (a.contributions || a.total)
+ );
+
+ console.log(`处理后共有 ${sorted.length} 位有效贡献者`);
+ setContributors(sorted);
+ } catch (err) {
+ console.error("加载贡献者数据出错:", err);
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
}
-
- // 合并统计数据到贡献者数据
- const contributorsWithStats = filteredContributors.map(contributor => {
- const stats = getContributorStats(statsData, contributor.login);
-
- return {
- ...contributor,
- additions: stats.additions || 0,
- deletions: stats.deletions || 0,
- total: contributor.contributions || 0
- };
- });
-
- // 确保所有贡献者有非零贡献值进行排序
- const validContributors = contributorsWithStats.filter(c => c.contributions > 0 || c.total > 0);
-
- // 按照贡献总量排序
- const sorted = validContributors.sort((a, b) => (b.contributions || b.total) - (a.contributions || a.total));
-
- console.log(`处理后共有 ${sorted.length} 位有效贡献者`);
- setContributors(sorted);
- } catch (err) {
- console.error('加载贡献者数据出错:', err);
- setError(err.message);
- } finally {
- setLoading(false);
- }
+
+ loadAllContributorData();
+ }, [repo]);
+
+ if (loading) {
+ return
正在加载贡献者数据，这可能需要一些时间...
;
+ }
+
+ if (error) {
+ return
获取贡献者数据出错: {error}
;
}
-
- loadAllContributorData();
- }, [repo]);
-
- if (loading) {
- return
正在加载贡献者数据，这可能需要一些时间...
;
- }
-
- if (error) {
- return
获取贡献者数据出错: {error}
;
- }
-
- if (!contributors || contributors.length === 0) {
- return
在访问github时遇到问题，请稍后再试
;
- }
-
- return (
-
- {contributors.map((contributor, index) => (
-
- ))}
-
- );
-}
\ No newline at end of file
+
+ if (!contributors || contributors.length === 0) {
+ return
在访问github时遇到问题，请稍后再试
;
+ }
+
+ return (
+
+ {contributors.map((contributor, index) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/ContributorCard/styles.css b/src/components/ContributorCard/styles.css
index f466bb46e..1d8cf504c 100644
--- a/src/components/ContributorCard/styles.css
+++ b/src/components/ContributorCard/styles.css
@@ -1,234 +1,234 @@
/* 贡献者容器样式 */
.contributor-container {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
- gap: 18px;
- margin: 24px 0;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 18px;
+ margin: 24px 0;
}
/* 贡献者卡片样式 */
.contributor-card {
- display: flex;
- padding: 16px;
- background-color: var(--ifm-card-background-color);
- border-radius: 10px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
- transition: all 0.25s ease;
- position: relative;
- border-left: 3px solid var(--ifm-color-emphasis-300);
+ display: flex;
+ padding: 16px;
+ background-color: var(--ifm-card-background-color);
+ border-radius: 10px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+ transition: all 0.25s ease;
+ position: relative;
+ border-left: 3px solid var(--ifm-color-emphasis-300);
}
.contributor-card:hover {
- transform: translateY(-3px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
- border-left-color: var(--ifm-color-primary);
+ transform: translateY(-3px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+ border-left-color: var(--ifm-color-primary);
}
/* 前三名特殊样式 */
.contributor-card:nth-child(1) {
- border-left-color: #FFD700;
+ border-left-color: #ffd700;
}
.contributor-card:nth-child(2) {
- border-left-color: #C0C0C0;
+ border-left-color: #c0c0c0;
}
.contributor-card:nth-child(3) {
- border-left-color: #CD7F32;
+ border-left-color: #cd7f32;
}
/* 排名标识 */
.contributor-rank {
- position: absolute;
- top: 10px;
- right: 10px;
- width: 24px;
- height: 24px;
- border-radius: 6px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 12px;
- font-weight: 600;
- background-color: var(--ifm-color-emphasis-300);
- color: var(--ifm-color-emphasis-900);
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 24px;
+ height: 24px;
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ font-weight: 600;
+ background-color: var(--ifm-color-emphasis-300);
+ color: var(--ifm-color-emphasis-900);
}
/* 前三名排名特殊样式 */
.contributor-card:nth-child(1) .contributor-rank {
- background-color: #FFD700;
- color: #333;
+ background-color: #ffd700;
+ color: #333;
}
.contributor-card:nth-child(2) .contributor-rank {
- background-color: #C0C0C0;
- color: #333;
+ background-color: #c0c0c0;
+ color: #333;
}
.contributor-card:nth-child(3) .contributor-rank {
- background-color: #CD7F32;
- color: #333;
+ background-color: #cd7f32;
+ color: #333;
}
/* 头像容器样式 */
.contributor-avatar-wrapper {
- margin-right: 14px;
- flex-shrink: 0;
+ margin-right: 14px;
+ flex-shrink: 0;
}
/* 头像样式 */
.contributor-avatar {
- width: 50px;
- height: 50px;
- border-radius: 8px;
- object-fit: cover;
- transition: transform 0.3s ease;
+ width: 50px;
+ height: 50px;
+ border-radius: 8px;
+ object-fit: cover;
+ transition: transform 0.3s ease;
}
.contributor-card:hover .contributor-avatar {
- transform: scale(1.05);
+ transform: scale(1.05);
}
/* 贡献者信息容器 */
.contributor-info {
- display: flex;
- flex-direction: column;
- justify-content: center;
- flex-grow: 1;
- overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ flex-grow: 1;
+ overflow: hidden;
}
/* 贡献者名称 */
.contributor-name {
- font-size: 15px;
- font-weight: 600;
- margin-bottom: 8px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ font-size: 15px;
+ font-weight: 600;
+ margin-bottom: 8px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.contributor-name a {
- color: var(--ifm-color-primary);
- text-decoration: none;
- transition: color 0.2s ease;
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ transition: color 0.2s ease;
}
.contributor-name a:hover {
- color: var(--ifm-color-primary-darker);
+ color: var(--ifm-color-primary-darker);
}
/* 贡献统计 */
.contributor-stats {
- display: flex;
- gap: 12px;
- font-size: 14px;
- align-items: center;
- margin-bottom: 6px;
+ display: flex;
+ gap: 12px;
+ font-size: 14px;
+ align-items: center;
+ margin-bottom: 6px;
}
.additions {
- color: #28a745;
- font-weight: 500;
+ color: #28a745;
+ font-weight: 500;
}
.deletions {
- color: #d73a49;
- font-weight: 500;
+ color: #d73a49;
+ font-weight: 500;
}
/* 总贡献量样式 */
.contributor-total {
- font-size: 13px;
- color: var(--ifm-color-emphasis-700);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ font-size: 13px;
+ color: var(--ifm-color-emphasis-700);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
/* 贡献次数图标 */
.contributor-total::before {
- content: '';
- display: inline-block;
- width: 12px;
- height: 12px;
- background-image: url('data:image/svg+xml;utf8,
');
- background-repeat: no-repeat;
- background-position: center;
- background-size: contain;
- margin-right: 4px;
- opacity: 0.7;
- vertical-align: middle;
+ content: "";
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ background-image: url('data:image/svg+xml;utf8,
');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ margin-right: 4px;
+ opacity: 0.7;
+ vertical-align: middle;
}
/* 加载状态 */
.contributor-loading {
- padding: 18px;
- text-align: center;
- color: var(--ifm-color-primary);
- background-color: var(--ifm-color-emphasis-100);
- border-radius: 10px;
- margin: 20px 0;
+ padding: 18px;
+ text-align: center;
+ color: var(--ifm-color-primary);
+ background-color: var(--ifm-color-emphasis-100);
+ border-radius: 10px;
+ margin: 20px 0;
}
/* 错误状态 */
.contributor-error {
- padding: 18px;
- text-align: center;
- color: var(--ifm-color-danger);
- background-color: var(--ifm-color-danger-contrast-background);
- border-radius: 10px;
- margin: 20px 0;
+ padding: 18px;
+ text-align: center;
+ color: var(--ifm-color-danger);
+ background-color: var(--ifm-color-danger-contrast-background);
+ border-radius: 10px;
+ margin: 20px 0;
}
/* 无数据状态 */
.contributor-empty {
- padding: 18px;
- text-align: center;
- color: var(--ifm-color-emphasis-600);
- background-color: var(--ifm-color-emphasis-100);
- border-radius: 10px;
- margin: 20px 0;
+ padding: 18px;
+ text-align: center;
+ color: var(--ifm-color-emphasis-600);
+ background-color: var(--ifm-color-emphasis-100);
+ border-radius: 10px;
+ margin: 20px 0;
}
/* 未能加载行数样式 */
.no-stats {
- font-size: 13px;
- color: var(--ifm-color-emphasis-600);
- font-style: italic;
- background-color: var(--ifm-color-emphasis-100);
- padding: 2px 8px;
- border-radius: 4px;
+ font-size: 13px;
+ color: var(--ifm-color-emphasis-600);
+ font-style: italic;
+ background-color: var(--ifm-color-emphasis-100);
+ padding: 2px 8px;
+ border-radius: 4px;
}
/* 响应式布局 */
@media (max-width: 996px) {
- .contributor-container {
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
- }
+ .contributor-container {
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ }
}
@media (max-width: 768px) {
- .contributor-container {
- grid-template-columns: 1fr;
- }
-
- .contributor-avatar {
- width: 45px;
- height: 45px;
- }
+ .contributor-container {
+ grid-template-columns: 1fr;
+ }
+
+ .contributor-avatar {
+ width: 45px;
+ height: 45px;
+ }
}
/* 黑暗模式适配 */
-[data-theme='dark'] .contributor-card {
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+[data-theme="dark"] .contributor-card {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
-[data-theme='dark'] .contributor-card:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+[data-theme="dark"] .contributor-card:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
-[data-theme='dark'] .contributor-rank {
- background-color: var(--ifm-color-emphasis-400);
- color: var(--ifm-color-emphasis-1000);
-}
\ No newline at end of file
+[data-theme="dark"] .contributor-rank {
+ background-color: var(--ifm-color-emphasis-400);
+ color: var(--ifm-color-emphasis-1000);
+}
diff --git a/src/components/GitHubButton.js b/src/components/GitHubButton.js
index 12c55bf32..4ba697cc6 100644
--- a/src/components/GitHubButton.js
+++ b/src/components/GitHubButton.js
@@ -1,24 +1,24 @@
-import React from 'react';
+import React from "react";
export default function GitHubButton() {
- return (
-
-
-
- );
-}
\ No newline at end of file
+ return (
+
+
+
+ );
+}
diff --git a/src/components/GlobalContent.js b/src/components/GlobalContent.js
index 30d811a63..81f1330cf 100644
--- a/src/components/GlobalContent.js
+++ b/src/components/GlobalContent.js
@@ -1,15 +1,15 @@
-import React from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-const IS_CHINA_SITE = process.env.CHINA === 'true';
+const IS_CHINA_SITE = process.env.CHINA === "true";
/**
* A component that conditionally renders its children based on the CHINA environment variable.
* If CHINA is 'true', the children (typically Markdown content) will not be rendered.
*/
export default function GlobalContent({ children }) {
- if (IS_CHINA_SITE) {
- return null; // Do not render children if in China site context
- }
- return <>{children}; // Render children otherwise
-}
\ No newline at end of file
+ if (IS_CHINA_SITE) {
+ return null; // Do not render children if in China site context
+ }
+ return <>{children}; // Render children otherwise
+}
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index ab3a92a19..ed7eadc55 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -2,32 +2,32 @@ import React from "react";
import styles from "./styles.module.css";
const features = [
- {
- title: "简单易懂",
- description: "从零开始的教程，新手友好",
- },
- {
- title: "内容全面",
- description: "涵盖 Java 版和基岩版所有内容",
- },
- {
- title: "持续更新",
- description: "跟随最新版本和社区动态",
- },
+ {
+ title: "简单易懂",
+ description: "从零开始的教程，新手友好"
+ },
+ {
+ title: "内容全面",
+ description: "涵盖 Java 版和基岩版所有内容"
+ },
+ {
+ title: "持续更新",
+ description: "跟随最新版本和社区动态"
+ }
];
export default function HomepageFeatures() {
- return (
-
- 为什么选择 Cubic Wiki
-
- {features.map((feature, idx) => (
-
-
{feature.title}
-
{feature.description}
-
- ))}
-
- );
+ return (
+
+ 为什么选择 Cubic Wiki
+
+ {features.map((feature, idx) => (
+
+
{feature.title}
+
{feature.description}
+
+ ))}
+
+ );
}
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index 7bd21a0b2..48bbac94e 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@@ -1,66 +1,66 @@
.features {
- padding: 120px 24px;
- background: var(--bg);
- text-align: center;
+ padding: 120px 24px;
+ background: var(--bg);
+ text-align: center;
}
.title {
- font-size: clamp(32px, 5vw, 48px);
- font-weight: 700;
- color: var(--text);
- margin: 0 0 80px;
+ font-size: clamp(32px, 5vw, 48px);
+ font-weight: 700;
+ color: var(--text);
+ margin: 0 0 80px;
}
.grid {
- max-width: 1200px;
- margin: 0 auto;
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: 32px;
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 32px;
}
.card {
- padding: 48px 32px;
- background: var(--bg-subtle);
- border: 1px solid var(--border);
- border-radius: 12px;
- transition: all 0.2s;
+ padding: 48px 32px;
+ background: var(--bg-subtle);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ transition: all 0.2s;
}
.card:hover {
- border-color: var(--accent);
- transform: translateY(-4px);
+ border-color: var(--accent);
+ transform: translateY(-4px);
}
.card h3 {
- font-size: 20px;
- font-weight: 600;
- color: var(--text);
- margin: 0 0 12px;
+ font-size: 20px;
+ font-weight: 600;
+ color: var(--text);
+ margin: 0 0 12px;
}
.card p {
- font-size: 15px;
- color: var(--text-muted);
- margin: 0;
- line-height: 1.6;
+ font-size: 15px;
+ color: var(--text-muted);
+ margin: 0;
+ line-height: 1.6;
}
@media (max-width: 768px) {
- .features {
- padding: 80px 20px;
- }
+ .features {
+ padding: 80px 20px;
+ }
- .title {
- margin-bottom: 48px;
- }
+ .title {
+ margin-bottom: 48px;
+ }
- .grid {
- grid-template-columns: 1fr;
- gap: 16px;
- }
+ .grid {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ }
- .card {
- padding: 32px 24px;
- }
+ .card {
+ padding: 32px 24px;
+ }
}
diff --git a/src/components/SponsorCard/index.jsx b/src/components/SponsorCard/index.jsx
index cb9a90bb6..798ff0176 100644
--- a/src/components/SponsorCard/index.jsx
+++ b/src/components/SponsorCard/index.jsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import clsx from 'clsx';
-import './styles.css';
+import React, { useState, useEffect } from "react";
+import clsx from "clsx";
+import "./styles.css";
/**
* 获取QQ头像URL
@@ -8,94 +8,85 @@ import './styles.css';
* @returns {string} 头像URL
*/
function getQQAvatar(qq) {
- // QQ号为空或非数字时返回默认头像
- if (!qq || !/^\d+$/.test(qq)) {
- return 'https://q.qlogo.cn/g?b=qq&nk=10000&s=100';
- }
- // 使用QQ自带的头像API
- return `https://q.qlogo.cn/g?b=qq&nk=${qq}&s=100`;
+ // QQ号为空或非数字时返回默认头像
+ if (!qq || !/^\d+$/.test(qq)) {
+ return "https://q.qlogo.cn/g?b=qq&nk=10000&s=100";
+ }
+ // 使用QQ自带的头像API
+ return `https://q.qlogo.cn/g?b=qq&nk=${qq}&s=100`;
}
/**
* 单个赞助者卡片组件
*/
export function SponsorCardItem({ name, amount, qq, note }) {
- const [avatarUrl, setAvatarUrl] = useState('');
- const [imageError, setImageError] = useState(false);
+ const [avatarUrl, setAvatarUrl] = useState("");
+ const [imageError, setImageError] = useState(false);
- useEffect(() => {
- if (qq) {
- setAvatarUrl(getQQAvatar(qq));
- }
- }, [qq]);
+ useEffect(() => {
+ if (qq) {
+ setAvatarUrl(getQQAvatar(qq));
+ }
+ }, [qq]);
- // 头像加载失败时使用备用头像
- const handleImageError = () => {
- if (!imageError) {
- setImageError(true);
- setAvatarUrl('https://nitwikit.com/img/icon.svg');
- }
- };
+ // 头像加载失败时使用备用头像
+ const handleImageError = () => {
+ if (!imageError) {
+ setImageError(true);
+ setAvatarUrl("https://nitwikit.com/img/icon.svg");
+ }
+ };
- // 如果没有提供QQ号，使用默认头像
- useEffect(() => {
- if (!qq && !avatarUrl) {
- setAvatarUrl('https://nitwikit.com/img/icon.svg');
- }
- }, [qq, avatarUrl]);
+ // 如果没有提供QQ号，使用默认头像
+ useEffect(() => {
+ if (!qq && !avatarUrl) {
+ setAvatarUrl("https://nitwikit.com/img/icon.svg");
+ }
+ }, [qq, avatarUrl]);
- const amountClass = clsx('sponsor-amount', {
- 'amount-s': amount >= 10 && amount < 50,
- 'amount-m': amount >= 50 && amount < 100,
- 'amount-l': amount >= 100 && amount < 500,
- 'amount-xl': amount >= 500,
- });
+ const amountClass = clsx("sponsor-amount", {
+ "amount-s": amount >= 10 && amount < 50,
+ "amount-m": amount >= 50 && amount < 100,
+ "amount-l": amount >= 100 && amount < 500,
+ "amount-xl": amount >= 500
+ });
- return (
-
-
-
-
-
-
{name}
-
¥{amount}
- {note &&
{note}
}
-
-
- );
+ return (
+
+
+
+
+
+
{name}
+
¥{amount}
+ {note &&
{note}
}
+
+
+ );
}
/**
* 赞助者卡片列表组件
*/
export default function SponsorCard({ sponsors }) {
- if (!sponsors || sponsors.length === 0) {
- return (
-
- 暂无赞助者，成为第一个赞助者吧！
-
- );
- }
+ if (!sponsors || sponsors.length === 0) {
+ return
暂无赞助者，成为第一个赞助者吧！
;
+ }
- // 按金额从高到低排序
- const sortedSponsors = [...sponsors].sort((a, b) => b.amount - a.amount);
+ // 按金额从高到低排序
+ const sortedSponsors = [...sponsors].sort((a, b) => b.amount - a.amount);
- return (
-
- {sortedSponsors.map((sponsor, index) => (
-
- ))}
-
- );
-}
\ No newline at end of file
+ return (
+
+ {sortedSponsors.map((sponsor, index) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/SponsorCard/styles.css b/src/components/SponsorCard/styles.css
index 638dbcc33..0dbdb8445 100644
--- a/src/components/SponsorCard/styles.css
+++ b/src/components/SponsorCard/styles.css
@@ -1,187 +1,187 @@
/* 赞助卡片容器 */
.sponsor-container {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
- gap: 1.5rem;
- margin: 2rem 0;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+ gap: 1.5rem;
+ margin: 2rem 0;
}
/* 单个赞助卡片 */
.sponsor-card {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 1.5rem;
- border-radius: 12px;
- background: var(--ifm-card-background-color, var(--ifm-background-surface-color));
- box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
- transition: all 0.3s ease;
- position: relative;
- overflow: hidden;
- text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 1.5rem;
+ border-radius: 12px;
+ background: var(--ifm-card-background-color, var(--ifm-background-surface-color));
+ box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+ text-align: center;
}
/* 卡片悬停效果 */
.sponsor-card:hover {
- transform: translateY(-5px);
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
+ transform: translateY(-5px);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
/* 卡片底部渐变色条 */
.sponsor-card::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 4px;
- background: linear-gradient(90deg, var(--ifm-color-primary), var(--ifm-color-primary-lighter));
- transition: opacity 0.3s ease;
- opacity: 0.7;
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg, var(--ifm-color-primary), var(--ifm-color-primary-lighter));
+ transition: opacity 0.3s ease;
+ opacity: 0.7;
}
.sponsor-card:hover::after {
- opacity: 1;
+ opacity: 1;
}
/* 头像容器 */
.sponsor-avatar-wrapper {
- width: 80px;
- height: 80px;
- border-radius: 50%;
- overflow: hidden;
- margin: 0 auto 1rem auto; /* 居中并保持底部间距 */
- border: 3px solid var(--ifm-color-primary-lightest);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- transition: all 0.3s ease;
- position: relative;
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ overflow: hidden;
+ margin: 0 auto 1rem auto; /* 居中并保持底部间距 */
+ border: 3px solid var(--ifm-color-primary-lightest);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
+ position: relative;
}
.sponsor-card:hover .sponsor-avatar-wrapper {
- transform: scale(1.05);
+ transform: scale(1.05);
}
/* 头像样式 */
.sponsor-avatar {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: transform 0.5s ease;
- display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.5s ease;
+ display: block;
}
.sponsor-card:hover .sponsor-avatar {
- transform: scale(1.1);
+ transform: scale(1.1);
}
/* 赞助者信息 */
.sponsor-info {
- width: 100%;
+ width: 100%;
}
/* 赞助者名称 */
.sponsor-name {
- font-size: 1.25rem;
- font-weight: 600;
- color: var(--ifm-heading-color);
- margin-bottom: 0.5rem;
- transition: color 0.3s ease;
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--ifm-heading-color);
+ margin-bottom: 0.5rem;
+ transition: color 0.3s ease;
}
.sponsor-card:hover .sponsor-name {
- color: var(--ifm-color-primary);
+ color: var(--ifm-color-primary);
}
/* 赞助金额 */
.sponsor-amount {
- font-weight: 600;
- margin-bottom: 0.5rem;
- color: var(--ifm-color-primary);
- padding: 0.25rem 0.75rem;
- border-radius: 50px;
- background: var(--ifm-color-primary-lightest);
- display: inline-block;
- font-size: 0.9rem;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ color: var(--ifm-color-primary);
+ padding: 0.25rem 0.75rem;
+ border-radius: 50px;
+ background: var(--ifm-color-primary-lightest);
+ display: inline-block;
+ font-size: 0.9rem;
}
/* 不同级别的赞助金额样式 */
.amount-s {
- background: rgba(156, 163, 175, 0.15);
- color: #6b7280;
+ background: rgba(156, 163, 175, 0.15);
+ color: #6b7280;
}
.amount-m {
- background: rgba(249, 115, 22, 0.15);
- color: #d97706;
+ background: rgba(249, 115, 22, 0.15);
+ color: #d97706;
}
.amount-l {
- background: rgba(37, 99, 235, 0.15);
- color: #2563eb;
+ background: rgba(37, 99, 235, 0.15);
+ color: #2563eb;
}
.amount-xl {
- background: rgba(220, 38, 38, 0.15);
- color: #dc2626;
+ background: rgba(220, 38, 38, 0.15);
+ color: #dc2626;
}
/* 赞助备注 */
.sponsor-note {
- font-size: 0.9rem;
- color: var(--ifm-color-emphasis-700);
- margin-top: 0.5rem;
- line-height: 1.4;
- font-style: italic;
+ font-size: 0.9rem;
+ color: var(--ifm-color-emphasis-700);
+ margin-top: 0.5rem;
+ line-height: 1.4;
+ font-style: italic;
}
/* 空状态提示 */
.sponsor-empty {
- text-align: center;
- padding: 3rem 1rem;
- color: var(--ifm-color-emphasis-600);
- font-style: italic;
- background: var(--ifm-card-background-color, var(--ifm-background-surface-color));
- border-radius: 12px;
- border: 1px dashed var(--ifm-color-emphasis-300);
+ text-align: center;
+ padding: 3rem 1rem;
+ color: var(--ifm-color-emphasis-600);
+ font-style: italic;
+ background: var(--ifm-card-background-color, var(--ifm-background-surface-color));
+ border-radius: 12px;
+ border: 1px dashed var(--ifm-color-emphasis-300);
}
/* 暗色模式适配 */
-html[data-theme='dark'] .sponsor-card {
- box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
+html[data-theme="dark"] .sponsor-card {
+ box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
-html[data-theme='dark'] .sponsor-card:hover {
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
+html[data-theme="dark"] .sponsor-card:hover {
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
-html[data-theme='dark'] .sponsor-avatar-wrapper {
- border-color: var(--ifm-color-primary-darker);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+html[data-theme="dark"] .sponsor-avatar-wrapper {
+ border-color: var(--ifm-color-primary-darker);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* 移动端适配 */
@media (max-width: 576px) {
- .sponsor-container {
- grid-template-columns: 1fr 1fr;
- gap: 1rem;
- }
-
- .sponsor-card {
- padding: 1rem;
- }
-
- .sponsor-avatar-wrapper {
- width: 60px;
- height: 60px;
- margin: 0 auto 0.75rem auto; /* 调整移动端的margin */
- }
-
- .sponsor-name {
- font-size: 1rem;
- }
-
- .sponsor-amount {
- font-size: 0.8rem;
- padding: 0.2rem 0.5rem;
- }
-}
\ No newline at end of file
+ .sponsor-container {
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ }
+
+ .sponsor-card {
+ padding: 1rem;
+ }
+
+ .sponsor-avatar-wrapper {
+ width: 60px;
+ height: 60px;
+ margin: 0 auto 0.75rem auto; /* 调整移动端的margin */
+ }
+
+ .sponsor-name {
+ font-size: 1rem;
+ }
+
+ .sponsor-amount {
+ font-size: 0.8rem;
+ padding: 0.2rem 0.5rem;
+ }
+}
diff --git a/src/components/comment/index.jsx b/src/components/comment/index.jsx
index ba8f1fa8e..cf6eb9566 100644
--- a/src/components/comment/index.jsx
+++ b/src/components/comment/index.jsx
@@ -1,55 +1,51 @@
-import React, { forwardRef, useEffect, useState } from 'react';
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import Giscus from '@giscus/react';
-import {
- useThemeConfig,
- useColorMode,
-} from '@docusaurus/theme-common';
+import React, { forwardRef, useEffect, useState } from "react";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import Giscus from "@giscus/react";
+import { useThemeConfig, useColorMode } from "@docusaurus/theme-common";
export const Comment = forwardRef((props, ref) => {
- const { giscus } = useThemeConfig();
- const { colorMode } = useColorMode();
- const { theme = 'light', darkTheme = 'dark_dimmed' } = giscus;
- const giscusTheme = colorMode === 'dark' ? darkTheme : theme;
- const [routeDidUpdate, setRouteDidUpdate] = useState(false);
-
- useEffect(() => {
- function eventHandler(e) {
- setRouteDidUpdate(true);
+ const { giscus } = useThemeConfig();
+ const { colorMode } = useColorMode();
+ const { theme = "light", darkTheme = "dark_dimmed" } = giscus;
+ const giscusTheme = colorMode === "dark" ? darkTheme : theme;
+ const [routeDidUpdate, setRouteDidUpdate] = useState(false);
+
+ useEffect(() => {
+ function eventHandler(e) {
+ setRouteDidUpdate(true);
+ }
+
+ window.emitter.on("onRouteDidUpdate", eventHandler);
+
+ return () => {
+ window.emitter.off("onRouteDidUpdate", eventHandler);
+ };
+ }, []);
+
+ if (!routeDidUpdate) {
+ return null;
}
- window.emitter.on('onRouteDidUpdate', eventHandler);
-
- return () => {
- window.emitter.off('onRouteDidUpdate', eventHandler);
- };
- }, []);
-
- if (!routeDidUpdate) {
- return null;
- }
-
- return (
-
Loading Comments...
+
+