Skip to content

Commit afbbc9b

Browse files
CC11001100CC11001100
committed
refactor(hero): 重构Hero组件，将样式内联到组件文件中，优化代码结构与可维护性
1 parent e6a6da0 commit afbbc9b

File tree

3 files changed

+178
-15
lines changed

3 files changed

+178
-15
lines changed

‎office-website/src/components/Hero/CodeExample.tsx

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,54 @@
11
import React from 'react';
2-
import {
3-
CodeBox,
4-
CodeHeader,
5-
CodeDots
6-
} from '../../styles/components/CodeExample.styles';
7-
import { VisualContainer } from '../../styles/components/Hero.styles';
2+
import styled from 'styled-components';
83
import CustomCodeBlock from '../CustomCodeBlock';
94

5+
const VisualContainer = styled.div`
6+
flex: 1;
7+
max-width: 600px;
8+
9+
@media (max-width: ${({ theme }) => theme.breakpoints.md}) {
10+
width: 100%;
11+
}
12+
`;
13+
14+
const CodeBox = styled.div`
15+
border-radius: ${({ theme }) => theme.borderRadius.medium};
16+
overflow: hidden;
17+
box-shadow: ${({ theme }) => theme.boxShadow.large};
18+
font-family: 'Fira Code', monospace;
19+
`;
20+
21+
const CodeHeader = styled.div`
22+
background-color: #1e1e1e;
23+
padding: 0.75rem 1rem;
24+
display: flex;
25+
align-items: center;
26+
`;
27+
28+
const CodeDots = styled.div`
29+
display: flex;
30+
gap: 0.5rem;
31+
32+
span {
33+
display: block;
34+
width: 12px;
35+
height: 12px;
36+
border-radius: 50%;
37+
38+
&:nth-child(1) {
39+
background-color: #ff5f56;
40+
}
41+
42+
&:nth-child(2) {
43+
background-color: #ffbd2e;
44+
}
45+
46+
&:nth-child(3) {
47+
background-color: #27c93f;
48+
}
49+
}
50+
`;
51+
1052
// 示例代码
1153
const codeExample = `// ==UserScript==
1254
// @name Typescript Userscript Template

‎office-website/src/components/Hero/HeroContent.tsx

Lines changed: 87 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,93 @@
11
import React from 'react';
2-
import {
3-
ContentLeft,
4-
Title,
5-
Subtitle,
6-
ButtonGroup,
7-
PrimaryButton,
8-
SecondaryButton
9-
} from '../../styles/components/Hero.styles';
2+
import styled from 'styled-components';
103
import CodeExample from './CodeExample';
114

5+
const ContentLeft = styled.div`
6+
flex: 1;
7+
margin-right: 3rem;
8+
9+
@media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
10+
margin-right: 0;
11+
margin-bottom: 3rem;
12+
}
13+
`;
14+
15+
const Title = styled.h1`
16+
font-size: 3.5rem;
17+
font-weight: 800;
18+
margin-bottom: 1.5rem;
19+
background: linear-gradient(
20+
to right,
21+
${({ theme }) => theme.colors.primary} 0%,
22+
${({ theme }) => theme.colors.secondary} 100%
23+
);
24+
-webkit-background-clip: text;
25+
-webkit-text-fill-color: transparent;
26+
background-clip: text;
27+
text-fill-color: transparent;
28+
29+
@media (max-width: ${({ theme }) => theme.breakpoints.md}) {
30+
font-size: 2.5rem;
31+
}
32+
`;
33+
34+
const Subtitle = styled.p`
35+
font-size: 1.25rem;
36+
max-width: 500px;
37+
margin-bottom: 2rem;
38+
color: ${({ theme }) => theme.colors.darkGray};
39+
40+
@media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
41+
margin: 0 auto 2rem;
42+
}
43+
`;
44+
45+
const ButtonGroup = styled.div`
46+
display: flex;
47+
gap: 1rem;
48+
49+
@media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
50+
justify-content: center;
51+
}
52+
53+
@media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
54+
flex-direction: column;
55+
gap: 0.75rem;
56+
}
57+
`;
58+
59+
const PrimaryButton = styled.a`
60+
display: inline-block;
61+
padding: 0.75rem 1.5rem;
62+
background-color: ${({ theme }) => theme.colors.primary};
63+
color: white;
64+
font-weight: 600;
65+
border-radius: ${({ theme }) => theme.borderRadius.medium};
66+
transition: all 0.2s;
67+
68+
&:hover {
69+
background-color: ${({ theme }) => theme.colors.primaryDark};
70+
transform: translateY(-2px);
71+
box-shadow: ${({ theme }) => theme.boxShadow.medium};
72+
}
73+
`;
74+
75+
const SecondaryButton = styled.a`
76+
display: inline-block;
77+
padding: 0.75rem 1.5rem;
78+
background-color: transparent;
79+
color: ${({ theme }) => theme.colors.primary};
80+
font-weight: 600;
81+
border: 1px solid ${({ theme }) => theme.colors.primary};
82+
border-radius: ${({ theme }) => theme.borderRadius.medium};
83+
transition: all 0.2s;
84+
85+
&:hover {
86+
background-color: rgba(59, 130, 246, 0.05);
87+
transform: translateY(-2px);
88+
}
89+
`;
90+
1291
const HeroContent: React.FC = () => {
1392
return (
1493
<>

‎office-website/src/components/Hero/index.tsx

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,49 @@
11
import React from 'react';
2-
import { HeroSection, HeroContent as StyledHeroContent } from '../../styles/components/Hero.styles';
2+
import styled from 'styled-components';
33
import HeroContent from './HeroContent';
44

5+
const HeroSection = styled.section`
6+
position: relative;
7+
min-height: 100vh;
8+
display: flex;
9+
align-items: center;
10+
padding: 8rem 0 6rem;
11+
background: linear-gradient(
12+
135deg,
13+
${({ theme }) => theme.colors.background} 0%,
14+
${({ theme }) => theme.colors.backgroundAlt} 100%
15+
);
16+
overflow: hidden;
17+
18+
&:after {
19+
content: '';
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 100%;
25+
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233b82f6' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
26+
opacity: 0.5;
27+
z-index: 1;
28+
}
29+
`;
30+
31+
const StyledHeroContent = styled.div`
32+
display: flex;
33+
justify-content: space-between;
34+
align-items: center;
35+
max-width: 1200px;
36+
margin: 0 auto;
37+
padding: 0 1.5rem;
38+
position: relative;
39+
z-index: 2;
40+
41+
@media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
42+
flex-direction: column;
43+
text-align: center;
44+
}
45+
`;
46+
547
const Hero: React.FC = () => {
648
return (
749
<HeroSection id="home">

0 commit comments

Comments
 (0)