Skip to content

Commit da7560b

Browse files
CC11001100CC11001100
committed
重构：将Features组件模块化，拆分样式和功能代码
1 parent 3286e82 commit da7560b

File tree

6 files changed

+241
-191
lines changed

6 files changed

+241
-191
lines changed

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

Lines changed: 0 additions & 191 deletions
This file was deleted.

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import {
3+
FeatureCard as StyledFeatureCard,
4+
IconWrapper,
5+
CardTitle,
6+
CardDescription
7+
} from '../../styles/components/Features.styles';
8+
9+
interface FeatureCardProps {
10+
title: string;
11+
description: string;
12+
icon: React.ReactNode;
13+
}
14+
15+
const FeatureCard: React.FC<FeatureCardProps> = ({ title, description, icon }) => {
16+
return (
17+
<StyledFeatureCard>
18+
<IconWrapper>{icon}</IconWrapper>
19+
<CardTitle>{title}</CardTitle>
20+
<CardDescription>{description}</CardDescription>
21+
</StyledFeatureCard>
22+
);
23+
};
24+
25+
export default FeatureCard;

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
3+
export const ModuleIcon = () => (
4+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
5+
<path d="M3 3H9V9H3V3Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
6+
<path d="M15 3H21V9H15V3Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
7+
<path d="M3 15H9V21H3V15Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
8+
<path d="M15 15H21V21H15V15Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
9+
</svg>
10+
);
11+
12+
export const HotReloadIcon = () => (
13+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
14+
<path d="M17.6569 16.6569C16.7202 17.5935 15.4891 18.2473 14.1336 18.5323C12.778 18.8173 11.3636 18.7181 10.0759 18.2488C8.78826 17.7795 7.6791 16.9612 6.8791 15.8915C6.0791 14.8219 5.62908 13.5479 5.57703 12.2222C5.52497 10.8966 5.87392 9.58936 6.58156 8.46636C7.28921 7.34336 8.32228 6.45229 9.54452 5.90922C10.7668 5.36615 12.1223 5.19823 13.4433 5.42822C14.7642 5.6582 15.9926 6.27506 16.9497 7.1964" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
15+
<path d="M19 8L17 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
16+
<path d="M19 8L16 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
17+
<path d="M19 8L19 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
18+
</svg>
19+
);
20+
21+
export const SingleFileIcon = () => (
22+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
23+
<path d="M4 6H20M4 12H12M4 18H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
24+
</svg>
25+
);
26+
27+
export const TypescriptIcon = () => (
28+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
29+
<path d="M16.5 9.40001L7.5 4.21001" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
30+
<path d="M21 16V8.00001C20.9996 7.6493 20.9071 7.30483 20.7315 7.00121C20.556 6.69758 20.3037 6.44539 20 6.27001L13 2.27001C12.696 2.09449 12.3511 2.00208 12 2.00208C11.6489 2.00208 11.304 2.09449 11 2.27001L4 6.27001C3.69626 6.44539 3.44398 6.69758 3.26846 7.00121C3.09294 7.30483 3.00036 7.6493 3 8.00001V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3024 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9056 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9056 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3024 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
31+
<path d="M3.27002 6.95999L12 12.01L20.73 6.95999" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
32+
<path d="M12 22.08V12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
33+
</svg>
34+
);
35+
36+
export const SimpleIcon = () => (
37+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
38+
<path d="M8 12L11 15L16 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
39+
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
40+
</svg>
41+
);
42+
43+
export const ApiIcon = () => (
44+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
45+
<path d="M18 18H20C21.1046 18 22 17.1046 22 16V5C22 3.89543 21.1046 3 20 3H9C7.89543 3 7 3.89543 7 5V7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
46+
<path d="M4 21H15C16.1046 21 17 20.1046 17 19V8C17 6.89543 16.1046 6 15 6H4C2.89543 6 2 6.89543 2 8V19C2 20.1046 2.89543 21 4 21Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
47+
</svg>
48+
);

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
import {
3+
SectionHeading,
4+
Title,
5+
Subtitle,
6+
FeaturesGrid
7+
} from '../../styles/components/Features.styles';
8+
import FeatureCard from './FeatureCard';
9+
import {
10+
ModuleIcon,
11+
HotReloadIcon,
12+
SingleFileIcon,
13+
TypescriptIcon,
14+
SimpleIcon,
15+
ApiIcon
16+
} from './FeatureIcons';
17+
18+
const FeaturesContent: React.FC = () => {
19+
return (
20+
<>
21+
<SectionHeading>
22+
<Title>强大的功能特性</Title>
23+
<Subtitle>
24+
使用Typescript Userscript Template，享受现代化前端开发体验的同时，轻松构建高质量的用户脚本
25+
</Subtitle>
26+
</SectionHeading>
27+
28+
<FeaturesGrid>
29+
<FeatureCard
30+
title="模块化开发"
31+
description="支持使用ES模块和TypeScript类型系统，让你的代码更具可维护性和可扩展性。"
32+
icon={<ModuleIcon />}
33+
/>
34+
35+
<FeatureCard
36+
title="热重载开发"
37+
description="支持开发环境热重载，修改代码后自动重新加载脚本，提高开发效率。"
38+
icon={<HotReloadIcon />}
39+
/>
40+
41+
<FeatureCard
42+
title="单文件输出"
43+
description="使用Rollup打包，将多文件项目打包成单一的JS文件，符合油猴脚本规范。"
44+
icon={<SingleFileIcon />}
45+
/>
46+
47+
<FeatureCard
48+
title="Typescript支持"
49+
description="内置TypeScript配置，享受类型检查和智能提示的好处，避免常见错误。"
50+
icon={<TypescriptIcon />}
51+
/>
52+
53+
<FeatureCard
54+
title="简单易用"
55+
description="提供简洁的开发流程和清晰的项目结构，让新手也能快速上手开发。"
56+
icon={<SimpleIcon />}
57+
/>
58+
59+
<FeatureCard
60+
title="API类型定义"
61+
description="包含常用油猴API的TypeScript定义，智能提示让你写代码更高效。"
62+
icon={<ApiIcon />}
63+
/>
64+
</FeaturesGrid>
65+
</>
66+
);
67+
};
68+
69+
export default FeaturesContent;

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { SectionContainer, SectionInner } from '../../styles/components/Features.styles';
3+
import FeaturesContent from './FeaturesContent';
4+
5+
const Features: React.FC = () => {
6+
return (
7+
<SectionContainer id="features">
8+
<SectionInner>
9+
<FeaturesContent />
10+
</SectionInner>
11+
</SectionContainer>
12+
);
13+
};
14+
15+
export default Features;

0 commit comments

Comments
 (0)