Skip to content

Commit fad2606

Browse files
CC11001100CC11001100
committed
重构: 将样式从全局样式文件移到各个组件内部，提高组件内聚性和维护性
1 parent ae03b23 commit fad2606

File tree

6 files changed

+185
-32
lines changed

6 files changed

+185
-32
lines changed

‎office-website/src/components/Features/FeatureCard.tsx

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,42 @@
11
import React from 'react';
2-
import {
3-
FeatureCard as StyledFeatureCard,
4-
IconWrapper,
5-
CardTitle,
6-
CardDescription
7-
} from '../../styles/components/Features.styles';
2+
import styled from 'styled-components';
3+
4+
// 将样式移入组件文件中
5+
const StyledFeatureCard = styled.div`
6+
background-color: ${({ theme }) => theme.colors.background};
7+
border-radius: ${({ theme }) => theme.borderRadius.medium};
8+
padding: 2rem;
9+
box-shadow: ${({ theme }) => theme.boxShadow.small};
10+
transition: all 0.3s ease;
11+
12+
&:hover {
13+
transform: translateY(-5px);
14+
box-shadow: ${({ theme }) => theme.boxShadow.medium};
15+
}
16+
`;
17+
18+
const IconWrapper = styled.div`
19+
width: 52px;
20+
height: 52px;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
margin-bottom: 1.5rem;
25+
background-color: rgba(59, 130, 246, 0.1);
26+
color: ${({ theme }) => theme.colors.primary};
27+
border-radius: ${({ theme }) => theme.borderRadius.small};
28+
`;
29+
30+
const CardTitle = styled.h3`
31+
font-size: 1.25rem;
32+
font-weight: 700;
33+
margin-bottom: 0.75rem;
34+
`;
35+
36+
const CardDescription = styled.p`
37+
color: ${({ theme }) => theme.colors.darkGray};
38+
margin-bottom: 0;
39+
`;
840

941
interface FeatureCardProps {
1042
title: string;
@@ -22,4 +54,4 @@ const FeatureCard: React.FC<FeatureCardProps> = ({ title, description, icon }) =
2254
);
2355
};
2456

25-
export default FeatureCard;
57+
export default FeatureCard;

‎office-website/src/components/Features/FeaturesContent.tsx

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import React from 'react';
2-
import {
3-
SectionHeading,
4-
Title,
5-
Subtitle,
6-
FeaturesGrid
7-
} from '../../styles/components/Features.styles';
2+
import styled from 'styled-components';
83
import FeatureCard from './FeatureCard';
94
import {
105
ModuleIcon,
@@ -15,6 +10,43 @@ import {
1510
ApiIcon
1611
} from './FeatureIcons';
1712

13+
// 将样式移入组件文件中
14+
const SectionHeading = styled.div`
15+
text-align: center;
16+
margin-bottom: 4rem;
17+
`;
18+
19+
const Title = styled.h2`
20+
font-size: 2.5rem;
21+
font-weight: 800;
22+
margin-bottom: 1rem;
23+
24+
@media (max-width: ${({ theme }) => theme.breakpoints.md}) {
25+
font-size: 2rem;
26+
}
27+
`;
28+
29+
const Subtitle = styled.p`
30+
font-size: 1.125rem;
31+
max-width: 700px;
32+
margin: 0 auto;
33+
color: ${({ theme }) => theme.colors.darkGray};
34+
`;
35+
36+
const FeaturesGrid = styled.div`
37+
display: grid;
38+
grid-template-columns: repeat(3, 1fr);
39+
gap: 2rem;
40+
41+
@media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
42+
grid-template-columns: repeat(2, 1fr);
43+
}
44+
45+
@media (max-width: ${({ theme }) => theme.breakpoints.md}) {
46+
grid-template-columns: 1fr;
47+
}
48+
`;
49+
1850
const FeaturesContent: React.FC = () => {
1951
return (
2052
<>

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
11
import React from 'react';
2-
import { SectionContainer, SectionInner } from '../../styles/components/Features.styles';
2+
import styled from 'styled-components';
33
import FeaturesContent from './FeaturesContent';
44

5+
// 将样式移入组件文件中
6+
const SectionContainer = styled.section`
7+
padding: 6rem 0;
8+
background-color: ${({ theme }) => theme.colors.backgroundAlt};
9+
`;
10+
11+
const SectionInner = styled.div`
12+
max-width: 1200px;
13+
margin: 0 auto;
14+
padding: 0 1.5rem;
15+
`;
16+
517
const Features: React.FC = () => {
618
return (
719
<SectionContainer id="features">
@@ -12,4 +24,4 @@ const Features: React.FC = () => {
1224
);
1325
};
1426

15-
export default Features;
27+
export default Features;

‎office-website/src/components/TypescriptSupport/TypescriptCodeExample.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import React from 'react';
2-
import { CodeContainer } from '../../styles/components/TypescriptSupport.styles';
2+
import styled from 'styled-components';
33
import CustomCodeBlock from '../CustomCodeBlock';
44

5+
// 将样式移入组件文件中
6+
const CodeContainer = styled.div`
7+
border-radius: ${({ theme }) => theme.borderRadius.medium};
8+
overflow: hidden;
9+
box-shadow: ${({ theme }) => theme.boxShadow.medium};
10+
11+
@media (max-width: ${({ theme }) => theme.breakpoints.md}) {
12+
order: 1;
13+
}
14+
`;
15+
516
const tsCode = `// 类型定义
617
interface UserScriptOptions {
718
name: string;

‎office-website/src/components/TypescriptSupport/TypescriptFeature.tsx

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,31 @@
11
import React from 'react';
2-
import {
3-
FeatureItem,
4-
FeatureIcon,
5-
FeatureText,
6-
FeatureTitle,
7-
FeatureDescription
8-
} from '../../styles/components/TypescriptSupport.styles';
2+
import styled from 'styled-components';
3+
4+
const FeatureItem = styled.li`
5+
display: flex;
6+
margin-bottom: 1.5rem;
7+
`;
8+
9+
const FeatureIcon = styled.div`
10+
color: ${({ theme }) => theme.colors.primary};
11+
margin-right: 1rem;
12+
flex-shrink: 0;
13+
`;
14+
15+
const FeatureText = styled.div``;
16+
17+
const FeatureTitle = styled.h3`
18+
font-size: 1.125rem;
19+
font-weight: 600;
20+
margin-bottom: 0.5rem;
21+
`;
22+
23+
const FeatureDescription = styled.p`
24+
color: ${({ theme }) => theme.colors.darkGray};
25+
font-size: 1rem;
26+
line-height: 1.6;
27+
margin: 0;
28+
`;
929

1030
interface TypescriptFeatureProps {
1131
title: string;

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

Lines changed: 55 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
import React from 'react';
2-
import {
3-
TypescriptContainer,
4-
TypescriptContent,
5-
Title,
6-
Subtitle,
7-
ContentGrid,
8-
TextContent,
9-
FeatureList
10-
} from '../../styles/components/TypescriptSupport.styles';
2+
import styled from 'styled-components';
113
import TypescriptFeature from './TypescriptFeature';
124
import TypescriptCodeExample from './TypescriptCodeExample';
135
import {
@@ -17,6 +9,60 @@ import {
179
ModernSyntaxIcon
1810
} from './FeatureIcons';
1911

12+
// 将样式移入组件文件中
13+
const TypescriptContainer = styled.section`
14+
padding: 6rem 0;
15+
background-color: ${({ theme }) => theme.colors.background};
16+
`;
17+
18+
const TypescriptContent = styled.div`
19+
max-width: 1200px;
20+
margin: 0 auto;
21+
padding: 0 1.5rem;
22+
`;
23+
24+
const Title = styled.h2`
25+
font-size: 2.5rem;
26+
font-weight: 800;
27+
text-align: center;
28+
margin-bottom: 1.5rem;
29+
30+
@media (max-width: ${({ theme }) => theme.breakpoints.md}) {
31+
font-size: 2rem;
32+
}
33+
`;
34+
35+
const Subtitle = styled.p`
36+
font-size: 1.125rem;
37+
text-align: center;
38+
max-width: 700px;
39+
margin: 0 auto 3rem;
40+
color: ${({ theme }) => theme.colors.darkGray};
41+
`;
42+
43+
const ContentGrid = styled.div`
44+
display: grid;
45+
grid-template-columns: 1fr 1fr;
46+
gap: 3rem;
47+
align-items: center;
48+
49+
@media (max-width: ${({ theme }) => theme.breakpoints.md}) {
50+
grid-template-columns: 1fr;
51+
}
52+
`;
53+
54+
const TextContent = styled.div`
55+
@media (max-width: ${({ theme }) => theme.breakpoints.md}) {
56+
order: 2;
57+
}
58+
`;
59+
60+
const FeatureList = styled.ul`
61+
margin: 0;
62+
padding: 0;
63+
list-style: none;
64+
`;
65+
2066
const TypescriptSupport: React.FC = () => {
2167
return (
2268
<TypescriptContainer id="typescript">

0 commit comments

Comments
 (0)