Skip to content

Commit 5e7a0cd

Browse files
iTHuangziyiiTHuangziyi
committed
feat: 删除page文件，采用最新app方式
1 parent f065b83 commit 5e7a0cd

22 files changed

+5626
-3181
lines changed

‎README.md

-5 Bytes
Loading

‎pages/article/article.css renamed to ‎app/article/[articleId]/article.css

+430-430
Large diffs are not rendered by default.

‎pages/article/article.tsx renamed to ‎app/article/[articleId]/article.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
2-
3-
// import { Button } from '@/components/ui/button';
4-
5-
6-
export default function Article() {
7-
return (
8-
<div>
9-
<h3>我是Article的内容</h3>
10-
</div>
11-
);
12-
}
13-
1+
2+
3+
// import { Button } from '@/components/ui/button';
4+
5+
6+
export default function Article() {
7+
return (
8+
<div>
9+
<h3>我是Article的内容</h3>
10+
</div>
11+
);
12+
}
13+

‎pages/article/[articleId].tsx renamed to ‎app/article/[articleId]/page.tsx

+64-67
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,64 @@
1-
import Header from "@/components/header";
2-
import { ArticleType } from "@/lib/types";
3-
import { fetchAPI } from "@/utils/request";
4-
import { Viewer } from '@bytemd/react';
5-
import 'bytemd/dist/index.css';
6-
import { useRouter } from "next/router";
7-
import { useEffect, useState } from "react";
8-
import './article.css';
9-
10-
type ArticleTypeProps = {
11-
post?: { id: string } | null;
12-
};
13-
14-
const Article: React.FC<ArticleTypeProps> = () => {
15-
const [ articleDetail, setArticleDetail] = useState<ArticleType>();
16-
const router = useRouter()
17-
18-
// 定义一个异步函数来获取博客详情数据
19-
const fetchDetailData = async (articleId:string) => {
20-
try {
21-
if (articleId) {
22-
// 如果有传入 id，则发起 API 请求
23-
const options = {
24-
method: 'POST' as const, // POST 请求
25-
data: { article_id: articleId } // 请求参数
26-
};
27-
const response = await fetchAPI(`/api/v1/article/getArticleDetail`, options);
28-
29-
if (response.success) {
30-
setArticleDetail(response.data as ArticleType);
31-
} else {
32-
console.error('获取数据失败：', response.error);
33-
}
34-
}
35-
} catch (error: any) {
36-
console.error('获取数据失败：', error.message);
37-
}
38-
}
39-
40-
useEffect(() => {
41-
if (router.isReady) {
42-
const { articleId } = router.query
43-
fetchDetailData(articleId as string);
44-
}
45-
}, [router.isReady, router.query]);
46-
47-
if (!articleDetail) {
48-
return <div>Loading...</div>;
49-
}
50-
51-
return (
52-
<div>
53-
<Header />
54-
<header className="pt-10 w-[1200px] mx-auto">
55-
<h1 className='text-6xl font-semibold leading-none'>{articleDetail.title}</h1>
56-
<h2 className='text-2xl leading-none text-right'>{articleDetail.sub_title}</h2>
57-
</header>
58-
<section className="mt-8 break-word w-[1200px] mx-auto flex">
59-
<div className="hl-edior3 Article_CSS_Doc" id="Article_CSS">
60-
<Viewer value={articleDetail.content}></Viewer>
61-
</div>
62-
</section>
63-
</div>
64-
);
65-
};
66-
67-
export default Article;
1+
"use client"
2+
import { ArticleType } from "@/lib/types";
3+
import { fetchAPI } from "@/utils/request";
4+
import { Viewer } from '@bytemd/react';
5+
import { Spin } from 'antd';
6+
import 'bytemd/dist/index.css';
7+
import { useEffect, useState } from "react";
8+
import './article.css';
9+
10+
type ArticleTypeProps = {
11+
post?: { id: string } | null;
12+
};
13+
14+
const Article: React.FC<any> = ({ params: { articleId } }: { params: { articleId: string } }) => {
15+
const [ articleDetail, setArticleDetail] = useState<ArticleType>();
16+
17+
// 定义一个异步函数来获取博客详情数据
18+
const fetchDetailData = async (articleId:string) => {
19+
try {
20+
if (articleId) {
21+
// 如果有传入 id，则发起 API 请求
22+
const options = {
23+
method: 'POST' as const, // POST 请求
24+
data: { article_id: articleId } // 请求参数
25+
};
26+
const response = await fetchAPI(`/api/v1/article/getArticleDetail`, options);
27+
28+
if (response.success) {
29+
setArticleDetail(response.data as ArticleType);
30+
} else {
31+
console.error('获取数据失败：', response.error);
32+
}
33+
}
34+
} catch (error: any) {
35+
console.error('获取数据失败：', error.message);
36+
}
37+
}
38+
39+
useEffect(() => {
40+
fetchDetailData(articleId);
41+
},[articleId]);
42+
43+
if (!articleDetail) {
44+
return <div className="h-full w-full justify-center items-center flex">
45+
<Spin size="large" />
46+
</div>
47+
}
48+
49+
return (
50+
<div className="pt-20">
51+
<header className="pt-10 w-[1200px] mx-auto">
52+
<h1 className='text-6xl font-semibold leading-none'>{articleDetail.title}</h1>
53+
<h2 className='text-2xl leading-none text-right'>{articleDetail.sub_title}</h2>
54+
</header>
55+
<section className="mt-8 break-word w-[1200px] mx-auto flex">
56+
<div className="hl-edior3 Article_CSS_Doc" id="Article_CSS">
57+
<Viewer value={articleDetail.content}></Viewer>
58+
</div>
59+
</section>
60+
</div>
61+
);
62+
};
63+
64+
export default Article;

‎app/container.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
"use client";
3+
import Home from "@/app/home/home";
34
import { SlotID } from "@/lib/global"; // 路由列表
4-
import Home from "@/pages/home/home";
55
import { useEffect, useState } from "react";
66

77

‎pages/home/components/about.tsx renamed to ‎app/home/components/about.tsx

+95-95
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,95 @@
1-
"use client"
2-
3-
import React from "react";
4-
import styles from "./home.module.scss";
5-
import { Item } from "./more";
6-
7-
interface TopicProps {
8-
title: string;
9-
count: number;
10-
}
11-
12-
function Introduce() {
13-
return (
14-
<>
15-
<div className="flex items-center">
16-
<img src="https://journal.ghost.io/content/images/2021/06/Logo.png" alt="The Ardor" className="mr-4" />
17-
<div>
18-
<div className="text-lg font-semibold">The Ardor</div>
19-
<div className="text-slate-600">Thoughts,stories and ideas.</div>
20-
</div>
21-
</div>
22-
<div className="mt-8 text-slate-600">Sign up now to get access to the library of members-only issues.</div>
23-
{/* <Button className="w-full mt-8">Subscribe</Button> */}
24-
</>
25-
)
26-
}
27-
28-
function Topic({ title, count }: TopicProps) {
29-
const handleClick = () => {
30-
console.log("Click!")
31-
}
32-
return (
33-
<>
34-
<div className={styles.topicItem} onClick={handleClick}>
35-
<div className="text-xl font-semibold">{title}</div>
36-
<div className="px-2 text-sm border rounded-2xl">{count} issues</div>
37-
</div>
38-
</>
39-
)
40-
}
41-
42-
43-
function SiderItem({ title, children }: { title: string, children: React.ReactNode }) {
44-
return (
45-
<>
46-
<div className={styles.title}>{title}</div>
47-
{children}
48-
</>
49-
)
50-
}
51-
52-
export default function About() {
53-
const list = [
54-
{
55-
date: "JUN 28, 2021",
56-
title: "Start here for a quick overview of everything you need to know",
57-
content: "We've crammed the most important information to help you get started with Ghost into this one post. It's your cheat-sheet to get started, and your shortcut to advanced features.",
58-
readTime: "2 min"
59-
},
60-
{
61-
date: "JUN 28, 2021",
62-
title: "Start here for a quick overview of everything you need to know",
63-
content: "We've crammed the most important information to help you get started with Ghost into this one post. It's your cheat-sheet to get started, and your shortcut to advanced features.",
64-
readTime: "2 min"
65-
}
66-
]
67-
// 主题列表
68-
const topicList = [
69-
{
70-
title: "Getting Started",
71-
count: 7
72-
},
73-
{
74-
title: "Speeches",
75-
count: 1
76-
}
77-
]
78-
return (
79-
<div className="sticky pl-12 top-4 h-max">
80-
<SiderItem title="ABOUT">
81-
<Introduce></Introduce>
82-
</SiderItem>
83-
<SiderItem title="FEATURED">
84-
{list.map(it => {
85-
return <Item info={it} mini={true} />
86-
})}
87-
</SiderItem>
88-
<SiderItem title="TOPICS">
89-
{topicList.map(it => {
90-
return <Topic title={it.title} count={it.count} />
91-
})}
92-
</SiderItem>
93-
</div>
94-
)
95-
}
1+
"use client"
2+
3+
import React from "react";
4+
import styles from "./home.module.scss";
5+
import { Item } from "./more";
6+
7+
interface TopicProps {
8+
title: string;
9+
count: number;
10+
}
11+
12+
function Introduce() {
13+
return (
14+
<>
15+
<div className="flex items-center">
16+
<img src="https://journal.ghost.io/content/images/2021/06/Logo.png" alt="The Ardor" className="mr-4" />
17+
<div>
18+
<div className="text-lg font-semibold">The Ardor</div>
19+
<div className="text-slate-600">Thoughts,stories and ideas.</div>
20+
</div>
21+
</div>
22+
<div className="mt-8 text-slate-600">Sign up now to get access to the library of members-only issues.</div>
23+
{/* <Button className="w-full mt-8">Subscribe</Button> */}
24+
</>
25+
)
26+
}
27+
28+
function Topic({ title, count }: TopicProps) {
29+
const handleClick = () => {
30+
console.log("Click!")
31+
}
32+
return (
33+
<>
34+
<div className={styles.topicItem} onClick={handleClick}>
35+
<div className="text-xl font-semibold">{title}</div>
36+
<div className="px-2 text-sm border rounded-2xl">{count} issues</div>
37+
</div>
38+
</>
39+
)
40+
}
41+
42+
43+
function SiderItem({ title, children }: { title: string, children: React.ReactNode }) {
44+
return (
45+
<>
46+
<div className={styles.title}>{title}</div>
47+
{children}
48+
</>
49+
)
50+
}
51+
52+
export default function About() {
53+
const list = [
54+
{
55+
date: "JUN 28, 2021",
56+
title: "Start here for a quick overview of everything you need to know",
57+
content: "We've crammed the most important information to help you get started with Ghost into this one post. It's your cheat-sheet to get started, and your shortcut to advanced features.",
58+
readTime: "2 min"
59+
},
60+
{
61+
date: "JUN 28, 2021",
62+
title: "Start here for a quick overview of everything you need to know",
63+
content: "We've crammed the most important information to help you get started with Ghost into this one post. It's your cheat-sheet to get started, and your shortcut to advanced features.",
64+
readTime: "2 min"
65+
}
66+
]
67+
// 主题列表
68+
const topicList = [
69+
{
70+
title: "Getting Started",
71+
count: 7
72+
},
73+
{
74+
title: "Speeches",
75+
count: 1
76+
}
77+
]
78+
return (
79+
<div className="sticky pl-12 top-4 h-max">
80+
<SiderItem title="ABOUT">
81+
<Introduce></Introduce>
82+
</SiderItem>
83+
<SiderItem title="FEATURED">
84+
{list.map(it => {
85+
return <Item info={it} mini={true} />
86+
})}
87+
</SiderItem>
88+
<SiderItem title="TOPICS">
89+
{topicList.map(it => {
90+
return <Topic title={it.title} count={it.count} />
91+
})}
92+
</SiderItem>
93+
</div>
94+
)
95+
}

0 commit comments

Comments
 (0)