个人空间静态建立

dashboard/src/components/library/blog/BlogNav.tsx

@@ -0,0 +1,63 @@
+import { Link } from "react-router-dom";
+import { useIntl } from "react-intl";
+import { MailOutlined } from "@ant-design/icons";
+import type { MenuProps } from "antd";
+import { Menu, Row, Col } from "antd";
+
+interface IWidgetBlogNav {
+	selectedKey: string;
+	studio: string;
+}
+const Widget = (prop: IWidgetBlogNav) => {
+	//Library head bar
+	const intl = useIntl(); //i18n
+	// TODO
+
+	const items: MenuProps["items"] = [
+		{
+			label: <Link to={`/blog/${prop.studio}/overview`}>{intl.formatMessage({ id: "blog.overview" })}</Link>,
+			key: "overview",
+			icon: <MailOutlined />,
+		},
+		{
+			label: <Link to={`/blog/${prop.studio}/palicanon`}>{intl.formatMessage({ id: "blog.palicanon" })}</Link>,
+			key: "palicanon",
+			icon: <MailOutlined />,
+		},
+		{
+			label: (
+				<Link to={`/blog/${prop.studio}/course`}>
+					{intl.formatMessage({ id: "columns.library.course.title" })}
+				</Link>
+			),
+			key: "course",
+			icon: <MailOutlined />,
+		},
+		{
+			label: (
+				<Link to={`/blog/${prop.studio}/anthology`}>
+					{intl.formatMessage({ id: "columns.library.anthology.title" })}
+				</Link>
+			),
+			key: "anthology",
+			icon: <MailOutlined />,
+		},
+		{
+			label: (
+				<Link to={`/blog/${prop.studio}/term`}>{intl.formatMessage({ id: "columns.library.term.title" })}</Link>
+			),
+			key: "term",
+			icon: <MailOutlined />,
+		},
+	];
+	return (
+		<Row>
+			<Col flex="300px"></Col>
+
+			<Col flex="auto">
+				<Menu selectedKeys={[prop.selectedKey]} mode="horizontal" items={items} />
+			</Col>
+		</Row>
+	);
+};
+export default Widget;

dashboard/src/components/library/blog/HeadBar.tsx

@@ -1,33 +0,0 @@
-import { Link } from "react-router-dom";
-import { Space } from "antd";
-import { useIntl } from "react-intl";
-
-const Widget = () => {
-	//Library head bar
-	const intl = useIntl();//i18n
-	// TODO
-  return (
-	<Space>
-		<Link to="/community">
-			{intl.formatMessage({ id: "columns.library.community.title" })}
-		</Link>
-		<Link to="/palicanon">
-			{intl.formatMessage({ id: "columns.library.palicanon.title" })}
-		</Link>
-		<Link to="/course">
-			{intl.formatMessage({ id: "columns.library.course.title" })}
-		</Link>
-		<Link to="/term">
-			{intl.formatMessage({ id: "columns.library.term.title" })}
-		</Link>
-		<Link to="/dict">
-			{intl.formatMessage({ id: "columns.library.dict.title" })}
-		</Link>
-		<Link to="/anthology">
-			{intl.formatMessage({ id: "columns.library.anthology.title" })}
-		</Link>
-	</Space>
-  );
-};
-
-export default Widget;

dashboard/src/components/library/blog/Profile.tsx

@@ -0,0 +1,20 @@
+import { Card } from "antd";
+
+const Widget = () => {
+	return (
+		<>
+			<Card title="简介" bordered={false} style={{ width: "100%" }}>
+				<p>Card content</p>
+				<p>Card content</p>
+				<p>Card content</p>
+			</Card>
+			<Card title="团队" bordered={false} style={{ width: "100%" }}>
+				<p>Card content</p>
+				<p>Card content</p>
+				<p>Card content</p>
+			</Card>
+		</>
+	);
+};
+
+export default Widget;

dashboard/src/components/library/blog/TimeLine.tsx

@@ -0,0 +1,49 @@
+import { Timeline } from "antd";
+
+interface IAuthorTimeLine {
+	lable: string;
+	content: string;
+	type: string;
+}
+const Widget = () => {
+	const a: string[] = new Array(10);
+
+	const data: IAuthorTimeLine[] = [
+		{
+			lable: "2015-09-1",
+			content: "Technical testing",
+			type: "translation",
+		},
+		{
+			lable: "2015-09-1",
+			content: "Technical testing",
+			type: "translation",
+		},
+		{
+			lable: "2015-09-1",
+			content: "Technical testing",
+			type: "translation",
+		},
+		{
+			lable: "2015-09-1",
+			content: "Technical testing",
+			type: "translation",
+		},
+	];
+
+	return (
+		<>
+			<Timeline mode={"left"} style={{ width: "100%" }}>
+				{data.map((item, id) => {
+					return (
+						<Timeline.Item key={id} label={item.lable}>
+							{item.content}
+						</Timeline.Item>
+					);
+				})}
+			</Timeline>
+		</>
+	);
+};
+
+export default Widget;

dashboard/src/components/library/blog/TopArticleCard.tsx

@@ -0,0 +1,73 @@
+import { Card } from "antd";
+import { AppstoreOutlined, LikeOutlined, FieldTimeOutlined } from "@ant-design/icons";
+
+import { Space } from "antd";
+import { Link } from "react-router-dom";
+
+interface IIconParamListData {
+	label: React.ReactNode;
+	key: string;
+	icon: React.ReactNode;
+}
+interface IWidgetIconParamList {
+	data: IIconParamListData[];
+}
+const IconParamList = (prop: IWidgetIconParamList) => {
+	return (
+		<><Space>
+			{prop.data.map((item, id) => {
+				return (
+					<Space>
+						{item.icon} {item.label}
+					</Space>
+				);
+			})}
+			</Space>
+		</>
+	);
+};
+
+export interface ITopArticleCardData {
+	title: string;
+	link: string;
+	like: number;
+	hit: number;
+	updatedAt: string;
+}
+interface IWidgetTopArticleCard {
+	data: ITopArticleCardData;
+}
+const Widget = (prop: IWidgetTopArticleCard) => {
+	const items: IIconParamListData[] = [
+		{
+			label: "经藏",
+			key: "sutta",
+			icon: <AppstoreOutlined />,
+		},
+		{
+			label: prop.data.like,
+			key: "like",
+			icon: <LikeOutlined />,
+		},
+		{
+			label: prop.data.updatedAt,
+			key: "updated",
+			icon: <FieldTimeOutlined />,
+		},
+	];
+
+	return (
+		<>
+			<Card>
+				<h4>
+					<Link to={prop.data.link}>{prop.data.title}</Link>
+				</h4>
+				<div>
+					<IconParamList data={items} />
+				</div>
+			</Card>
+		</>
+	);
+};
+
+export default Widget;

dashboard/src/components/library/blog/TopArticles.tsx

@@ -0,0 +1,30 @@
+import { Row, Col } from "antd";
+import TopArticleCard, { ITopArticleCardData } from "./TopArticleCard";
+interface IWidgetTopArticles {
+	studio: string;
+}
+const Widget = (prop: IWidgetTopArticles) => {
+	const data: ITopArticleCardData[] = [
+		{
+			title: "法句心品",
+			link: "/my/article/12345",
+			like: 50,
+			hit: 100,
+			updatedAt: "2022-12-3",
+		},
+		{ title: "法句心品", link: "/my/article/12345", like: 50, hit: 100, updatedAt: "2022-12-3" },
+		{ title: "疑惑度脱-应学法", link: "/my/article/12345", like: 50, hit: 100, updatedAt: "2022-12-3" },
+		{ title: "法句心品", link: "/my/article/12345", like: 50, hit: 100, updatedAt: "2022-12-3" },
+	];
+
+	const list = data.map((item, id) => {
+		return (
+			<Col flex="400px">
+				<TopArticleCard data={item} key={id} />
+			</Col>
+		);
+	});
+	return <Row>{list}</Row>;
+};
+
+export default Widget;

dashboard/src/locales/zh-Hans/blog/index.ts

@@ -0,0 +1,6 @@
+const items = {
+	"blog.overview": "概览",
+	"blog.palicanon": "译文",
+};
+
+export default items;

dashboard/src/pages/library/blog/anthology.tsx

@@ -1,22 +1,14 @@
-import { Space } from "antd";
-import { useParams, Link } from "react-router-dom";
-import HeadBar from "../../../components/library/blog/HeadBar";
-import FooterBar from "../../../components/library/FooterBar";
+import { useParams } from "react-router-dom";
+import BlogNav from "../../../components/library/blog/BlogNav";
+
 const Widget = () => {
 	// TODO
-	const { courseid } = useParams(); //url 参数
+	const { studio } = useParams(); //url 参数
+
 	return (
-		<div>
-			<HeadBar />
-			<div>课程{courseid} 详情</div>
-			<div>
-				<Space>
-					<Link to="/course/lesson/12345">lesson 1</Link>
-					<Link to="/course/lesson/23456">lesson 2</Link>
-				</Space>
-			</div>
-			<FooterBar />
-		</div>
+		<>
+			<BlogNav selectedKey="anthology" studio={studio ? studio : ""} />
+		</>
 	);
 };
 

dashboard/src/pages/library/blog/course.tsx

@@ -1,21 +1,14 @@
-import { Space } from "antd";
 import { useParams } from "react-router-dom";
-import HeadBar from "../../../components/library/blog/HeadBar";
-import FooterBar from "../../../components/library/FooterBar";
+import BlogNav from "../../../components/library/blog/BlogNav";
 
 const Widget = () => {
 	// TODO
-	const { lessonid } = useParams(); //url 参数
+	const { studio } = useParams(); //url 参数
 
 	return (
-		<div>
-			<HeadBar />
-			<div>课 {lessonid} 详情</div>
-			<div>
-				<Space>主显示区</Space>
-			</div>
-			<FooterBar />
-		</div>
+		<>
+			<BlogNav selectedKey="course" studio={studio ? studio : ""} />
+		</>
 	);
 };
 

dashboard/src/pages/library/blog/index.tsx

@@ -1,22 +1,27 @@
-import { Space } from "antd";
-import { Link } from "react-router-dom";
-import HeadBar from "../../../components/library/blog/HeadBar";
+import { Outlet } from "react-router-dom";
+import { Col, Layout, Row } from "antd";
+
+import HeadBar from "../../../components/library/HeadBar";
 import FooterBar from "../../../components/library/FooterBar";
 
 const Widget = () => {
 	// TODO
 	return (
-		<div>
+		<Layout>
 			<HeadBar />
-			<div>课程首页</div>
-			<div>
-				<Space>
-					<Link to="/course/show/12345">课程1</Link>
-					<Link to="/course/show/23456">课程2</Link>
-				</Space>
-			</div>
+			<div>cover</div>
+			<Layout>
+				<Row>
+					<Col flex="auto"></Col>
+					<Col flex="1260px">
+						<Outlet />
+					</Col>
+					<Col flex="auto"></Col>
+				</Row>
+			</Layout>
+
 			<FooterBar />
-		</div>
+		</Layout>
 	);
 };
 

dashboard/src/pages/library/blog/overview.tsx

@@ -0,0 +1,37 @@
+import { useParams } from "react-router-dom";
+import { Row, Col } from "antd";
+import { Affix } from "antd";
+import BlogNav from "../../../components/library/blog/BlogNav";
+import Profile from "../../../components/library/blog/Profile";
+import AuthorTimeLine from "../../../components/library/blog/TimeLine";
+import TopArticles from "../../../components/library/blog/TopArticles";
+
+const Widget = () => {
+	// TODO
+	const { studio } = useParams(); //url 参数
+
+	return (
+		<>
+			<Affix offsetTop={0}>
+				<BlogNav selectedKey="overview" studio={studio ? studio : ""} />
+			</Affix>
+
+			<Row>
+				<Col flex="300px">
+					<Profile />
+				</Col>
+
+				<Col flex="900px">
+					<div>
+						<TopArticles studio={studio ? studio : ""} />
+					</div>
+					<div>
+						<AuthorTimeLine />
+					</div>
+				</Col>
+			</Row>
+		</>
+	);
+};
+
+export default Widget;

dashboard/src/pages/library/blog/term.tsx

@@ -1,21 +1,14 @@
-import { Space } from "antd";
 import { useParams } from "react-router-dom";
-import HeadBar from "../../../components/library/blog/HeadBar";
-import FooterBar from "../../../components/library/FooterBar";
+import BlogNav from "../../../components/library/blog/BlogNav";
 
 const Widget = () => {
 	// TODO
-	const { lessonid } = useParams(); //url 参数
+	const { studio } = useParams(); //url 参数
 
 	return (
-		<div>
-			<HeadBar />
-			<div>课 {lessonid} 详情</div>
-			<div>
-				<Space>主显示区</Space>
-			</div>
-			<FooterBar />
-		</div>
+		<>
+			<BlogNav selectedKey="term" studio={studio ? studio : ""} />
+		</>
 	);
 };
 

dashboard/src/pages/library/blog/translation.tsx

@@ -1,22 +1,14 @@
-import { Space } from "antd";
-import { useParams, Link } from "react-router-dom";
-import HeadBar from "../../../components/library/blog/HeadBar";
-import FooterBar from "../../../components/library/FooterBar";
+import { useParams } from "react-router-dom";
+import BlogNav from "../../../components/library/blog/BlogNav";
+
 const Widget = () => {
 	// TODO
-	const { courseid } = useParams(); //url 参数
+	const { studio } = useParams(); //url 参数
+
 	return (
-		<div>
-			<HeadBar />
-			<div>课程{courseid} 详情</div>
-			<div>
-				<Space>
-					<Link to="/course/lesson/12345">lesson 1</Link>
-					<Link to="/course/lesson/23456">lesson 2</Link>
-				</Space>
-			</div>
-			<FooterBar />
-		</div>
+		<>
+			<BlogNav selectedKey="palicanon" studio={studio ? studio : ""} />
+		</>
 	);
 };