Skip to content

Commit 1e714d8

Browse files
CC11001100CC11001100
committed
重构：将Footer组件模块化，拆分样式和功能代码
1 parent fd3df1f commit 1e714d8

File tree

5 files changed

+252
-213
lines changed

5 files changed

+252
-213
lines changed

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

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

‎office-website/src/components/Footer/FooterBottomSection.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import {
3+
FooterBottom,
4+
Copyright
5+
} from '../../styles/components/Footer.styles';
6+
7+
const FooterBottomSection: React.FC = () => {
8+
const currentYear = new Date().getFullYear();
9+
10+
return (
11+
<FooterBottom>
12+
<Copyright>© {currentYear} Typescript Userscript Template. 保留所有权利。</Copyright>
13+
</FooterBottom>
14+
);
15+
};
16+
17+
export default FooterBottomSection;

‎office-website/src/components/Footer/FooterTopSection.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import {
3+
FooterTop,
4+
FooterColumn,
5+
FooterLogo,
6+
FooterDescription,
7+
SocialLinks,
8+
SocialLink,
9+
FooterHeading,
10+
FooterLinkList,
11+
FooterLinkItem,
12+
FooterLink
13+
} from '../../styles/components/Footer.styles';
14+
15+
const FooterTopSection: React.FC = () => {
16+
return (
17+
<FooterTop>
18+
<FooterColumn>
19+
<FooterLogo href="https://github.com/JSREI/typescript-userscript-template" target="_blank">
20+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
21+
<path d="M12 2L2 7L12 12L22 7L12 2Z" fill="#3B82F6" />
22+
<path d="M2 17L12 22L22 17" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
23+
<path d="M2 12L12 17L22 12" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
24+
</svg>
25+
<span>Typescript Userscript Template</span>
26+
</FooterLogo>
27+
<FooterDescription>
28+
Typescript Userscript Template是一个用于开发油猴脚本的现代化模板，帮助开发者轻松创建高质量的用户脚本。
29+
</FooterDescription>
30+
<SocialLinks>
31+
<SocialLink href="https://github.com/JSREI/typescript-userscript-template" target="_blank" aria-label="GitHub">
32+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
33+
<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" />
34+
</svg>
35+
</SocialLink>
36+
</SocialLinks>
37+
</FooterColumn>
38+
39+
<FooterColumn>
40+
<FooterHeading>项目</FooterHeading>
41+
<FooterLinkList>
42+
<FooterLinkItem>
43+
<FooterLink href="#features">特性</FooterLink>
44+
</FooterLinkItem>
45+
<FooterLinkItem>
46+
<FooterLink href="#workflow">工作流程</FooterLink>
47+
</FooterLinkItem>
48+
<FooterLinkItem>
49+
<FooterLink href="#installation">安装指南</FooterLink>
50+
</FooterLinkItem>
51+
<FooterLinkItem>
52+
<FooterLink href="#typescript">Typescript支持</FooterLink>
53+
</FooterLinkItem>
54+
</FooterLinkList>
55+
</FooterColumn>
56+
57+
<FooterColumn>
58+
<FooterHeading>资源</FooterHeading>
59+
<FooterLinkList>
60+
<FooterLinkItem>
61+
<FooterLink href="https://github.com/JSREI/typescript-userscript-template" target="_blank">GitHub</FooterLink>
62+
</FooterLinkItem>
63+
<FooterLinkItem>
64+
<FooterLink href="https://github.com/JSREI/typescript-userscript-template#readme" target="_blank">文档</FooterLink>
65+
</FooterLinkItem>
66+
<FooterLinkItem>
67+
<FooterLink href="https://github.com/JSREI/typescript-userscript-template/issues" target="_blank">问题反馈</FooterLink>
68+
</FooterLinkItem>
69+
<FooterLinkItem>
70+
<FooterLink href="https://github.com/JSREI/typescript-userscript-template/releases" target="_blank">版本发布</FooterLink>
71+
</FooterLinkItem>
72+
</FooterLinkList>
73+
</FooterColumn>
74+
75+
<FooterColumn>
76+
<FooterHeading>相关链接</FooterHeading>
77+
<FooterLinkList>
78+
<FooterLinkItem>
79+
<FooterLink href="https://www.typescriptlang.org/" target="_blank">TypeScript</FooterLink>
80+
</FooterLinkItem>
81+
<FooterLinkItem>
82+
<FooterLink href="https://www.tampermonkey.net/" target="_blank">Tampermonkey</FooterLink>
83+
</FooterLinkItem>
84+
<FooterLinkItem>
85+
<FooterLink href="https://greasyfork.org/" target="_blank">Greasy Fork</FooterLink>
86+
</FooterLinkItem>
87+
<FooterLinkItem>
88+
<FooterLink href="https://github.com/JSREI/" target="_blank">JSREI</FooterLink>
89+
</FooterLinkItem>
90+
</FooterLinkList>
91+
</FooterColumn>
92+
</FooterTop>
93+
);
94+
};
95+
96+
export default FooterTopSection;

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import {
3+
FooterContainer,
4+
FooterContent
5+
} from '../../styles/components/Footer.styles';
6+
import FooterTopSection from './FooterTopSection';
7+
import FooterBottomSection from './FooterBottomSection';
8+
9+
const Footer: React.FC = () => {
10+
return (
11+
<FooterContainer>
12+
<FooterContent>
13+
<FooterTopSection />
14+
<FooterBottomSection />
15+
</FooterContent>
16+
</FooterContainer>
17+
);
18+
};
19+
20+
export default Footer;

0 commit comments

Comments
 (0)