Skip to content

Commit 9a1a451

Browse files
OweQianOweQian
committed
feat: 调整组件结构
1 parent dd6b9c4 commit 9a1a451

File tree

7 files changed

+133
-135
lines changed

7 files changed

+133
-135
lines changed

‎components/footer/index.tsx‎

Lines changed: 110 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import {FC} from "react";
1+
import {FC, JSXElementConstructor, ReactElement, ReactFragment, ReactNode, ReactPortal} from "react";
22
import Image from "next/image";
33
import publicLogo from "@/public/public_logo.png";
44
import styles from "./styles.module.scss";
55
import cName from "classnames";
6-
6+
import {isEmpty} from "lodash";
7+
import QRCode from "@/public/code.jpg";
8+
import { useTranslation } from 'next-i18next'
79
interface ILink {
810
label: string;
911
link?: string;
@@ -19,34 +21,115 @@ interface IQRCode {
1921
text: string;
2022
}
2123

22-
export interface IFooterProps {
23-
title: string;
24-
linkList: ILinkList[];
25-
qrCode: IQRCode;
26-
copyRight: string;
27-
siteNumber: string; // 站点备案号
28-
publicNumber: string; // 公安备案号
29-
}
24+
export interface IFooterProps {}
3025

31-
const Footer: FC<IFooterProps> = ({
32-
title,
33-
linkList,
34-
qrCode,
35-
copyRight,
36-
siteNumber,
37-
publicNumber,
38-
}) => {
26+
const Footer: FC<IFooterProps> = ({}) => {
27+
const { t } = useTranslation('footer');
28+
const data = {
29+
"title": "IoTSharp",
30+
"qr_code": "",
31+
"copy_right": "Copyright © 2022 The IoTSharp Authors",
32+
"site_number": "",
33+
"public_number": "冀ICP备18039206号",
34+
"qr_code_image": {
35+
"data": {
36+
"name": "code.png",
37+
"alternativeText": "code.png",
38+
"caption": "code.png",
39+
"width": 56,
40+
"height": 56,
41+
"formats": {},
42+
"hash": "code_67191e1aba",
43+
"ext": ".png",
44+
"mime": "image/png",
45+
"size": 1.45,
46+
"url": "/uploads/code_67191e1aba.png",
47+
"previewUrl": {},
48+
"provider": "local",
49+
"provider_metadata": {}
50+
}
51+
},
52+
"link_lists": {
53+
"data": [
54+
{
55+
"title": t('about'),
56+
"links": {
57+
"data": [
58+
{
59+
"label": "Demo",
60+
"link": "http://demo.iotsharp.net/"
61+
},
62+
{
63+
"label": "Docs",
64+
"link": "https://docs.iotsharp.net/",
65+
},
66+
]
67+
}
68+
},
69+
{
70+
"title": "了解更多",
71+
"links": {
72+
"data": [
73+
{
74+
"label": "Github",
75+
"link": "https://github.com/IoTSharp"
76+
},
77+
{
78+
"label": "Gitee",
79+
"link": "https://gitee.com/IoTSharp"
80+
},
81+
]
82+
}
83+
},
84+
{
85+
"title": "联系我们",
86+
"links": {
87+
"data": [
88+
{
89+
"label": "QQ",
90+
"link": "https://jq.qq.com/?_wv=1027&k=u1ZzTmVd"
91+
}, {
92+
"label": "微博",
93+
"link": "https://weibo.com/iotsharp"
94+
}, {
95+
"label": "Discord",
96+
"link": "https://discord.com/invite/My6PaTmUvu"
97+
}
98+
]
99+
}
100+
}
101+
]
102+
}
103+
}
104+
const {copy_right, link_lists, public_number, qr_code, qr_code_image, site_number, title} = data || {};
105+
const footerData = {
106+
title,
107+
linkList: link_lists?.data?.map((item: any) => ({
108+
title: item.title,
109+
list: item?.links?.data?.map((_item: any) => ({
110+
label: _item.label,
111+
link: isEmpty(_item.link) ? '' : _item.link,
112+
})),
113+
})),
114+
qrCode: {
115+
image: QRCode,
116+
text: qr_code,
117+
},
118+
copyRight: copy_right,
119+
siteNumber: site_number,
120+
publicNumber: public_number,
121+
}
39122
return (
40123
<div className={styles.footer}>
41124
<div className={styles.topArea}>
42125
<h1 className={styles.footerTitle}>{title}</h1>
43126
<div className={styles.linkListArea}>
44-
{linkList?.map((item, index) => {
127+
{footerData?.linkList?.map((item, index) => {
45128
return (
46129
<div className={styles.linkArea} key={`linkArea${index}`}>
47130
<span className={styles.title}>{item.title}</span>
48131
<div className={styles.links}>
49-
{item.list?.map((_item, _index) => {
132+
{item.list?.map((_item: { link: string | URL | undefined; label: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | Iterable<ReactNode> | null | undefined; }, _index: any) => {
50133
return (
51134
<div
52135
className={cName({
@@ -77,17 +160,17 @@ const Footer: FC<IFooterProps> = ({
77160
<div className={styles.codeArea}>
78161
<div>
79162
<Image
80-
src={qrCode?.image}
81-
alt={qrCode?.text}
163+
src={footerData?.qrCode?.image}
164+
alt={footerData?.qrCode?.text}
82165
width={120}
83166
height={120}
84167
></Image>
85168
</div>
86-
<div className={styles.text}>{qrCode?.text}</div>
169+
<div className={styles.text}>{footerData?.qrCode?.text}</div>
87170
</div>
88171
<div className={styles.numArea}>
89-
<span>{copyRight}</span>
90-
<span>{siteNumber}</span>
172+
<span>{footerData?.copyRight}</span>
173+
<span>{footerData?.siteNumber}</span>
91174
<div className={styles.publicLogo} onClick={(): void => {
92175
window.open(
93176
"https://beian.miit.gov.cn/",
@@ -98,12 +181,12 @@ const Footer: FC<IFooterProps> = ({
98181
<div className={styles.logo}>
99182
<Image
100183
src={publicLogo}
101-
alt={publicNumber}
184+
alt={footerData?.publicNumber}
102185
width={20}
103186
height={20}
104187
></Image>
105188
</div>
106-
<span>{publicNumber}</span>
189+
<span>{footerData?.publicNumber}</span>
107190
</div>
108191
</div>
109192
</div>

‎components/layout/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ const Layout: FC<ILayoutProps & { children: JSX.Element }> = ({
1717
}) => {
1818
return (
1919
<div className={styles.layout}>
20-
<NavBar {...navbarData} />
21-
<main className={styles.main}>{children}</main>
22-
<Footer {...footerData} />
20+
{children}
2321
</div>
2422
);
2523
};

‎pages/_app.tsx‎

Lines changed: 1 addition & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -44,103 +44,9 @@ const MyApp = (data: AppProps & ILayoutProps & IComponentProps): JSX.Element =>
4444

4545
MyApp.getInitialProps = async (context: AppContext) => {
4646
const pageProps = await App.getInitialProps(context);
47-
const data = {
48-
"title": "IoTSharp",
49-
"qr_code": "",
50-
"copy_right": "Copyright © 2022 The IoTSharp Authors",
51-
"site_number": "",
52-
"public_number": "冀ICP备18039206号",
53-
"qr_code_image": {
54-
"data": {
55-
"name": "code.png",
56-
"alternativeText": "code.png",
57-
"caption": "code.png",
58-
"width": 56,
59-
"height": 56,
60-
"formats": {},
61-
"hash": "code_67191e1aba",
62-
"ext": ".png",
63-
"mime": "image/png",
64-
"size": 1.45,
65-
"url": "/uploads/code_67191e1aba.png",
66-
"previewUrl": {},
67-
"provider": "local",
68-
"provider_metadata": {}
69-
}
70-
},
71-
"link_lists": {
72-
"data": [
73-
{
74-
"title": "关于",
75-
"links": {
76-
"data": [
77-
{
78-
"label": "Demo",
79-
"link": "http://demo.iotsharp.net/"
80-
},
81-
{
82-
"label": "Docs",
83-
"link": "https://docs.iotsharp.net/",
84-
},
85-
]
86-
}
87-
},
88-
{
89-
"title": "了解更多",
90-
"links": {
91-
"data": [
92-
{
93-
"label": "Github",
94-
"link": "https://github.com/IoTSharp"
95-
},
96-
{
97-
"label": "Gitee",
98-
"link": "https://gitee.com/IoTSharp"
99-
},
100-
]
101-
}
102-
},
103-
{
104-
"title": "联系我们",
105-
"links": {
106-
"data": [
107-
{
108-
"label": "QQ",
109-
"link": "https://jq.qq.com/?_wv=1027&k=u1ZzTmVd"
110-
}, {
111-
"label": "微博",
112-
"link": "https://weibo.com/iotsharp"
113-
}, {
114-
"label": "Discord",
115-
"link": "https://discord.com/invite/My6PaTmUvu"
116-
}
117-
]
118-
}
119-
}
120-
]
121-
}
122-
}
123-
const {copy_right, link_lists, public_number, qr_code, qr_code_image, site_number, title} = data || {};
47+
12448
return {
12549
...pageProps,
126-
navbarData: {},
127-
footerData: {
128-
title,
129-
linkList: link_lists?.data?.map((item: any) => ({
130-
title: item.title,
131-
list: item?.links?.data?.map((_item: any) => ({
132-
label: _item.label,
133-
link: isEmpty(_item.link) ? '' : _item.link,
134-
})),
135-
})),
136-
qrCode: {
137-
image: QRCode,
138-
text: qr_code,
139-
},
140-
copyRight: copy_right,
141-
siteNumber: site_number,
142-
publicNumber: public_number,
143-
},
14450
isMobile: getIsMobile(context),
14551
isSupportWebp: getIsSupportWebp(context),
14652
};

‎pages/components/banner/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import IoTIcon from "@/public/iot.svg";
88
import logoText from "@/public/logo-text.svg";
99
import {ThemeContext} from "@/stores/theme";
1010

11-
export interface IBannerProps {
12-
}
11+
export interface IBannerProps {}
1312

1413
const Banner: FC<IBannerProps> = ({}) => {
1514
const mainRef = useRef<HTMLDivElement>(null);

‎pages/index.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import cName from 'classnames';
1010
import {ThemeContext} from '@/stores/theme';
1111
import {IComponentProps} from './_app';
1212
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
13+
import NavBar from "@/components/navbar";
14+
import Footer from "@/components/footer";
1315
interface IProps {
1416
}
1517

@@ -25,14 +27,18 @@ const Home: NextPage<IProps & IComponentProps> = ({}) => {
2527
}, [theme]);
2628

2729
return (
28-
<div className={styles.container}>
29-
<main className={cName([styles.main, styles.withAnimation])} ref={mainRef}>
30-
<Banner />
31-
<Technology />
32-
<Features />
33-
<Platform />
34-
<Contributors />
35-
</main>
30+
<div>
31+
<NavBar />
32+
<div className={styles.container}>
33+
<main className={cName([styles.main, styles.withAnimation])} ref={mainRef}>
34+
<Banner />
35+
<Technology />
36+
<Features />
37+
<Platform />
38+
<Contributors />
39+
</main>
40+
</div>
41+
<Footer />
3642
</div>
3743
);
3844
};

‎public/locales/en/footer.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"about": "About"
3+
}

‎public/locales/zh-CN/footer.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"about": "关于"
3+
}

0 commit comments

Comments
 (0)