Skip to content

Commit c7535ae

Browse files
CC11001100CC11001100
committed
feat: 添加讲解视频按钮和模态框播放功能
1 parent 6c1ef20 commit c7535ae

File tree

2 files changed

+179
-32
lines changed

2 files changed

+179
-32
lines changed

‎src/components/Header.module.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,37 @@
1919
color: #4fc3f7;
2020
}
2121

22+
.rightSection {
23+
display: flex;
24+
align-items: center;
25+
gap: 12px;
26+
}
27+
28+
.videoButton {
29+
display: flex;
30+
align-items: center;
31+
gap: 6px;
32+
padding: 6px 12px;
33+
border: none;
34+
border-radius: 6px;
35+
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
36+
color: #fff;
37+
font-size: 0.875rem;
38+
font-weight: 500;
39+
cursor: pointer;
40+
transition: all 0.2s;
41+
}
42+
43+
.videoButton:hover {
44+
background: linear-gradient(135deg, #ff5252, #d63031);
45+
transform: translateY(-1px);
46+
box-shadow: 0 4px 12px rgba(238, 90, 36, 0.3);
47+
}
48+
49+
.videoButton svg {
50+
fill: currentColor;
51+
}
52+
2253
.github {
2354
display: flex;
2455
align-items: center;
@@ -48,3 +79,75 @@
4879
.starCount svg {
4980
fill: #ffd700;
5081
}
82+
83+
/* 视频模态框样式 */
84+
.modalOverlay {
85+
position: fixed;
86+
top: 0;
87+
left: 0;
88+
right: 0;
89+
bottom: 0;
90+
background: rgba(0, 0, 0, 0.85);
91+
display: flex;
92+
align-items: center;
93+
justify-content: center;
94+
z-index: 1000;
95+
animation: fadeIn 0.2s ease;
96+
}
97+
98+
@keyframes fadeIn {
99+
from {
100+
opacity: 0;
101+
}
102+
to {
103+
opacity: 1;
104+
}
105+
}
106+
107+
.modalContent {
108+
position: relative;
109+
max-width: 90vw;
110+
max-height: 90vh;
111+
animation: scaleIn 0.2s ease;
112+
}
113+
114+
@keyframes scaleIn {
115+
from {
116+
transform: scale(0.9);
117+
opacity: 0;
118+
}
119+
to {
120+
transform: scale(1);
121+
opacity: 1;
122+
}
123+
}
124+
125+
.closeButton {
126+
position: absolute;
127+
top: -40px;
128+
right: 0;
129+
width: 32px;
130+
height: 32px;
131+
border: none;
132+
border-radius: 50%;
133+
background: rgba(255, 255, 255, 0.1);
134+
color: #fff;
135+
font-size: 1rem;
136+
cursor: pointer;
137+
transition: all 0.2s;
138+
display: flex;
139+
align-items: center;
140+
justify-content: center;
141+
}
142+
143+
.closeButton:hover {
144+
background: rgba(255, 255, 255, 0.2);
145+
transform: scale(1.1);
146+
}
147+
148+
.video {
149+
max-width: 100%;
150+
max-height: 80vh;
151+
border-radius: 8px;
152+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
153+
}

‎src/components/Header.tsx‎

Lines changed: 76 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import styles from './Header.module.css'
55

66
export function Header({ title, leetcodeUrl, githubUrl }: HeaderProps) {
77
const [stars, setStars] = useState<number>(0)
8+
const [showVideo, setShowVideo] = useState(false)
89

910
useEffect(() => {
1011
// 从GitHub URL中提取owner和repo
@@ -15,39 +16,82 @@ export function Header({ title, leetcodeUrl, githubUrl }: HeaderProps) {
1516
}
1617
}, [githubUrl])
1718

19+
// 关闭模态框时停止视频播放
20+
const handleCloseModal = () => {
21+
setShowVideo(false)
22+
}
23+
1824
return (
19-
<header className={styles.header}>
20-
<a
21-
href={leetcodeUrl}
22-
target="_blank"
23-
rel="noopener noreferrer"
24-
className={styles.title}
25-
>
26-
{title}
27-
</a>
28-
<a
29-
href={githubUrl}
30-
target="_blank"
31-
rel="noopener noreferrer"
32-
className={styles.github}
33-
aria-label="GitHub 仓库"
34-
title="点击去GitHub仓库Star支持一下"
35-
>
36-
<svg
37-
viewBox="0 0 24 24"
38-
width="24"
39-
height="24"
40-
fill="currentColor"
25+
<>
26+
<header className={styles.header}>
27+
<a
28+
href={leetcodeUrl}
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
className={styles.title}
4132
>
42-
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
43-
</svg>
44-
<span className={styles.starCount}>
45-
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
46-
<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z" />
47-
</svg>
48-
{stars}
49-
</span>
50-
</a>
51-
</header>
33+
{title}
34+
</a>
35+
<div className={styles.rightSection}>
36+
<button
37+
className={styles.videoButton}
38+
onClick={() => setShowVideo(true)}
39+
aria-label="观看讲解视频"
40+
title="观看讲解视频"
41+
>
42+
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
43+
<path d="M8 5v14l11-7z" />
44+
</svg>
45+
讲解视频
46+
</button>
47+
<a
48+
href={githubUrl}
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
className={styles.github}
52+
aria-label="GitHub 仓库"
53+
title="点击去GitHub仓库Star支持一下"
54+
>
55+
<svg
56+
viewBox="0 0 24 24"
57+
width="24"
58+
height="24"
59+
fill="currentColor"
60+
>
61+
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
62+
</svg>
63+
<span className={styles.starCount}>
64+
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
65+
<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z" />
66+
</svg>
67+
{stars}
68+
</span>
69+
</a>
70+
</div>
71+
</header>
72+
73+
{/* 视频模态框 */}
74+
{showVideo && (
75+
<div className={styles.modalOverlay} onClick={handleCloseModal}>
76+
<div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
77+
<button
78+
className={styles.closeButton}
79+
onClick={handleCloseModal}
80+
aria-label="关闭视频"
81+
>
82+
✕
83+
</button>
84+
<video
85+
className={styles.video}
86+
controls
87+
autoPlay
88+
src="/video.mp4"
89+
>
90+
您的浏览器不支持视频播放
91+
</video>
92+
</div>
93+
</div>
94+
)}
95+
</>
5296
)
5397
}

0 commit comments

Comments
 (0)