Skip to content

Commit 04a6543

Browse files
CC11001100CC11001100
committed
添加GitHub Star数量显示功能，一小时内缓存数据避免重复请求
1 parent 585d3d9 commit 04a6543

File tree

4 files changed

+133
-7
lines changed

4 files changed

+133
-7
lines changed

‎office-website/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@types/react-dom": "^18.2.18",
1212
"@types/react-syntax-highlighter": "^15.5.13",
1313
"@types/styled-components": "^5.1.34",
14+
"axios": "^1.9.0",
1415
"prismjs": "^1.30.0",
1516
"react": "^18.2.0",
1617
"react-dom": "^18.2.0",

‎office-website/src/components/Header/GitHubStarButton.tsx

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React, { useEffect, useState } from 'react';
2+
import styled from 'styled-components';
3+
import { getRepositoryStarCount } from '../../services/github';
4+
5+
const StarButtonContainer = styled.a`
6+
display: inline-flex;
7+
align-items: center;
8+
justify-content: center;
9+
margin-left: 1.5rem;
10+
padding: 0.5rem 1.25rem;
11+
background-color: ${({ theme }) => theme.colors.primary};
12+
color: white;
13+
border-radius: ${({ theme }) => theme.borderRadius.medium};
14+
font-weight: 600;
15+
transition: all 0.2s;
16+
17+
svg {
18+
margin-right: 0.5rem;
19+
}
20+
21+
&:hover {
22+
background-color: ${({ theme }) => theme.colors.primaryDark};
23+
transform: translateY(-2px);
24+
}
25+
`;
26+
27+
const StarCount = styled.span`
28+
display: inline-flex;
29+
align-items: center;
30+
margin-left: 0.5rem;
31+
32+
svg {
33+
margin-right: 0.25rem;
34+
}
35+
`;
36+
37+
interface GitHubStarButtonProps {
38+
repoOwner: string;
39+
repoName: string;
40+
}
41+
42+
const GitHubStarButton: React.FC<GitHubStarButtonProps> = ({ repoOwner, repoName }) => {
43+
const [starCount, setStarCount] = useState<number | null>(null);
44+
const repoUrl = `https://github.com/${repoOwner}/${repoName}`;
45+
46+
useEffect(() => {
47+
const fetchStarCount = async () => {
48+
try {
49+
const count = await getRepositoryStarCount(repoOwner, repoName);
50+
setStarCount(count);
51+
} catch (error) {
52+
console.error('获取Star数量失败:', error);
53+
}
54+
};
55+
56+
fetchStarCount();
57+
}, [repoOwner, repoName]);
58+
59+
// 格式化星星数量，超过1000用k表示
60+
const formatStarCount = (count: number): string => {
61+
if (count >= 1000) {
62+
return `${(count / 1000).toFixed(1)}k`;
63+
}
64+
return count.toString();
65+
};
66+
67+
return (
68+
<StarButtonContainer href={repoUrl} target="_blank">
69+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
70+
<path d="M12 2C6.477 2 2 6.477 2 12C2 16.419 4.865 20.166 8.839 21.489C9.339 21.581 9.5 21.27 9.5 21.006V19.505C6.735 20.126 6.151 18.141 6.151 18.141C5.681 17.021 5.031 16.711 5.031 16.711C4.151 16.105 5.101 16.117 5.101 16.117C6.101 16.19 6.651 17.141 6.651 17.141C7.551 18.542 9.101 18.19 9.541 17.939C9.631 17.293 9.901 16.839 10.201 16.591C7.975 16.339 5.651 15.486 5.651 11.677C5.651 10.55 6.051 9.631 6.676 8.901C6.576 8.651 6.226 7.626 6.776 6.227C6.776 6.227 7.626 5.961 9.501 7.281C10.301 7.061 11.151 6.951 12.001 6.949C12.851 6.949 13.701 7.061 14.501 7.281C16.376 5.959 17.226 6.227 17.226 6.227C17.776 7.626 17.426 8.651 17.326 8.901C17.952 9.631 18.347 10.55 18.347 11.677C18.347 15.496 16.018 16.335 13.786 16.581C14.151 16.886 14.486 17.491 14.486 18.421V21.006C14.486 21.271 14.646 21.586 15.156 21.486C19.135 20.162 21.996 16.417 21.996 12C21.996 6.477 17.52 2 12 2Z" fill="currentColor" />
71+
</svg>
72+
GitHub
73+
{starCount !== null && (
74+
<StarCount>
75+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
76+
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor" />
77+
</svg>
78+
{formatStarCount(starCount)}
79+
</StarCount>
80+
)}
81+
</StarButtonContainer>
82+
);
83+
};
84+
85+
export default GitHubStarButton;

‎office-website/src/components/Header/NavBar.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { NavLinks, NavLink, GitHubButton } from '../../styles/components/Header.styles';
2+
import { NavLinks, NavLink } from '../../styles/components/Header.styles';
3+
import GitHubStarButton from './GitHubStarButton';
34

45
interface NavBarProps {
56
activeSection: string;
@@ -13,12 +14,7 @@ const NavBar: React.FC<NavBarProps> = ({ activeSection }) => {
1314
<NavLink href="#installation" active={activeSection === 'installation'}>安装指南</NavLink>
1415
<NavLink href="#typescript" active={activeSection === 'typescript'}>Typescript支持</NavLink>
1516
<NavLink href="#community" active={activeSection === 'community'}>加入社区</NavLink>
16-
<GitHubButton href="https://github.com/JSREI/typescript-userscript-template" target="_blank">
17-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
18-
<path d="M12 2C6.477 2 2 6.477 2 12C2 16.419 4.865 20.166 8.839 21.489C9.339 21.581 9.5 21.27 9.5 21.006V19.505C6.735 20.126 6.151 18.141 6.151 18.141C5.681 17.021 5.031 16.711 5.031 16.711C4.151 16.105 5.101 16.117 5.101 16.117C6.101 16.19 6.651 17.141 6.651 17.141C7.551 18.542 9.101 18.19 9.541 17.939C9.631 17.293 9.901 16.839 10.201 16.591C7.975 16.339 5.651 15.486 5.651 11.677C5.651 10.55 6.051 9.631 6.676 8.901C6.576 8.651 6.226 7.626 6.776 6.227C6.776 6.227 7.626 5.961 9.501 7.281C10.301 7.061 11.151 6.951 12.001 6.949C12.851 6.949 13.701 7.061 14.501 7.281C16.376 5.959 17.226 6.227 17.226 6.227C17.776 7.626 17.426 8.651 17.326 8.901C17.952 9.631 18.347 10.55 18.347 11.677C18.347 15.496 16.018 16.335 13.786 16.581C14.151 16.886 14.486 17.491 14.486 18.421V21.006C14.486 21.271 14.646 21.586 15.156 21.486C19.135 20.162 21.996 16.417 21.996 12C21.996 6.477 17.52 2 12 2Z" fill="currentColor" />
19-
</svg>
20-
GitHub
21-
</GitHubButton>
17+
<GitHubStarButton repoOwner="JSREI" repoName="typescript-userscript-template" />
2218
</NavLinks>
2319
);
2420
};

‎office-website/src/services/github.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import axios from 'axios';
2+
3+
// 缓存键
4+
const STAR_COUNT_CACHE_KEY = 'github_star_count_cache';
5+
const CACHE_EXPIRY_KEY = 'github_star_count_cache_expiry';
6+
7+
// 缓存时间为1小时（毫秒）
8+
const CACHE_DURATION = 60 * 60 * 1000;
9+
10+
// 获取仓库的star数量
11+
export async function getRepositoryStarCount(owner: string, repo: string): Promise<number> {
12+
// 检查缓存是否存在且有效
13+
const cachedCount = localStorage.getItem(STAR_COUNT_CACHE_KEY);
14+
const cachedExpiry = localStorage.getItem(CACHE_EXPIRY_KEY);
15+
16+
const now = new Date().getTime();
17+
18+
// 如果缓存存在且未过期，则使用缓存的值
19+
if (cachedCount && cachedExpiry && now < parseInt(cachedExpiry)) {
20+
return parseInt(cachedCount);
21+
}
22+
23+
try {
24+
// 发送请求获取仓库信息
25+
const response = await axios.get(`https://api.github.com/repos/${owner}/${repo}`);
26+
const starCount = response.data.stargazers_count;
27+
28+
// 更新缓存
29+
localStorage.setItem(STAR_COUNT_CACHE_KEY, starCount.toString());
30+
localStorage.setItem(CACHE_EXPIRY_KEY, (now + CACHE_DURATION).toString());
31+
32+
return starCount;
33+
} catch (error) {
34+
console.error('获取仓库star数量失败:', error);
35+
36+
// 如果请求失败但缓存存在，则返回缓存的值（即使已过期）
37+
if (cachedCount) {
38+
return parseInt(cachedCount);
39+
}
40+
41+
// 如果完全没有数据，则返回0
42+
return 0;
43+
}
44+
}

0 commit comments

Comments
 (0)