文集改为路由嵌套

dashboard/src/Router.tsx

@@ -33,6 +33,7 @@ import LibraryDictShow from "./pages/library/dict/show";
 import LibraryDictRecent from "./pages/library/dict/recent";
 import LibraryAnthology from "./pages/library/anthology";
 import LibraryAnthologyShow from "./pages/library/anthology/show";
+import LibraryAnthologyList from "./pages/library/anthology/list";
 import LibraryArticle from "./pages/library/anthology/article";
 
 import LibraryBlog from "./pages/library/blog";
@@ -121,9 +122,11 @@ const Widget = () => {
 				<Route path="recent" element={<LibraryDictRecent />} />
 			</Route>
 
-			<Route path="anthology" element={<LibraryAnthology />} />
-			<Route path="anthology/:id" element={<LibraryAnthologyShow />} />
-			<Route path="anthology/:id/by_channel/:tags" element={<LibraryAnthologyShow />} />
+			<Route path="anthology" element={<LibraryAnthology />}>
+				<Route path="list" element={<LibraryAnthologyList />} />
+				<Route path=":id" element={<LibraryAnthologyShow />} />
+				<Route path=":id/by_channel/:tags" element={<LibraryAnthologyShow />} />
+			</Route>
 			<Route path="article/show/:id" element={<LibraryArticle />} />
 
 			<Route path="blog/:studio" element={<LibraryBlog />}>

dashboard/src/components/article/AnthologyCard.tsx

@@ -40,7 +40,7 @@ const Widget = (prop: IWidgetAnthologyCard) => {
 		<>
 			<Card hoverable bordered={false} style={{ width: "100%" }}>
 				<Title level={4}>
-					<Link to={prop.data.id}>{prop.data.title}</Link>
+					<Link to={`/anthology/${prop.data.id}`}>{prop.data.title}</Link>
 				</Title>
 				<div>
 					<Text type="secondary">{prop.data.subTitle}</Text>

dashboard/src/components/article/AnthologyDetail.tsx

@@ -35,11 +35,11 @@ const Widget = (prop: IWidgetAnthologyDetail) => {
 
 	useEffect(() => {
 		console.log("useEffect");
-		fetchData();
-	}, [setTableData]);
+		fetchData(prop.aid);
+	}, [prop.aid]);
 
-	function fetchData() {
-		ApiFetch(`/anthology/${prop.aid}`)
+	function fetchData(id: string) {
+		ApiFetch(`/anthology/${id}`)
 			.then((response) => {
 				const json = response as unknown as IAnthologyListApiResponse2;
 
@@ -61,7 +61,6 @@ const Widget = (prop: IWidgetAnthologyDetail) => {
 					updated_at: item.updated_at,
 				};
 				setTableData(newTree);
-				//setTreeData(newTree.articles);
 				console.log("toc", newTree.articles);
 			})
 			.catch((error) => {

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

@@ -1,21 +1,16 @@
 import { Space } from "antd";
 import { useParams } from "react-router-dom";
 
-import HeadBar from "../../../components/library/HeadBar";
-import FooterBar from "../../../components/library/FooterBar";
-
 const Widget = () => {
 	// TODO
 	const { article_id } = useParams(); //url 参数
 
 	return (
 		<div>
-			<HeadBar />
 			<div>文章阅读器{article_id}</div>
 			<div>
 				<Space>主显示区</Space>
 			</div>
-			<FooterBar />
 		</div>
 	);
 };

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

@@ -1,59 +1,14 @@
-import { Space, Input } from "antd";
-import { Layout, Affix, Col, Row } from "antd";
+import { Outlet } from "react-router-dom";
+import { Layout } from "antd";
 
 import HeadBar from "../../../components/library/HeadBar";
 import FooterBar from "../../../components/library/FooterBar";
-import AnthologyList from "../../../components/article/AnthologyList";
-import AnthologStudioList from "../../../components/article/AnthologStudioList";
-
-const { Content, Header } = Layout;
-const { Search } = Input;
 
 const Widget = () => {
-	// TODO
-	const onSearch = (value: string) => console.log(value);
 	return (
 		<Layout>
 			<HeadBar selectedKeys="anthology" />
-			<Layout>
-				<Header style={{ color: "#FFF" }}>
-					<h2>composition</h2>
-					<p>
-						Make the Pāḷi easy to read <br />
-						solution of Pāḷi glossary For translating <br />
-						Pāḷi in Group Show the source reference in Pāḷi
-					</p>
-				</Header>
-				<Affix offsetTop={0}>
-					<Header style={{ backgroundColor: "gray", height: "3.5em" }}>
-						<Row style={{ paddingTop: "0.5em" }}>
-							<Col span="8" offset={8}>
-								<Search placeholder="input search text" onSearch={onSearch} style={{ width: "100%" }} />
-							</Col>
-						</Row>
-					</Header>
-				</Affix>
-
-				<Content>
-					<Row>
-						<Col flex="auto"></Col>
-						<Col flex="1260px">
-							<Row>
-								<Col span="18">
-									<AnthologyList />
-								</Col>
-								<Col span="6">
-									<AnthologStudioList />
-								</Col>
-							</Row>
-						</Col>
-						<Col flex="auto"></Col>
-					</Row>
-
-					<Space></Space>
-				</Content>
-			</Layout>
-
+			<Outlet />
 			<FooterBar />
 		</Layout>
 	);

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

@@ -0,0 +1,56 @@
+import { Space, Input } from "antd";
+import { Layout, Affix, Col, Row } from "antd";
+
+import AnthologyList from "../../../components/article/AnthologyList";
+import AnthologStudioList from "../../../components/article/AnthologStudioList";
+
+const { Content, Header } = Layout;
+const { Search } = Input;
+
+const Widget = () => {
+	// TODO
+	const onSearch = (value: string) => console.log(value);
+	return (
+
+			<Layout>
+				<Header style={{ height: 200 }}>
+					<h2>composition</h2>
+					<p>
+						Make the Pāḷi easy to read <br />
+						solution of Pāḷi glossary For translating <br />
+						Pāḷi in Group Show the source reference in Pāḷi
+					</p>
+				</Header>
+				<Affix offsetTop={0}>
+					<Header style={{ backgroundColor: "gray", height: "3.5em" }}>
+						<Row style={{ paddingTop: "0.5em" }}>
+							<Col span="8" offset={8}>
+								<Search placeholder="input search text" onSearch={onSearch} style={{ width: "100%" }} />
+							</Col>
+						</Row>
+					</Header>
+				</Affix>
+
+				<Content>
+					<Row>
+						<Col flex="auto"></Col>
+						<Col flex="1260px">
+							<Row>
+								<Col span="18">
+									<AnthologyList />
+								</Col>
+								<Col span="6">
+									<AnthologStudioList />
+								</Col>
+							</Row>
+						</Col>
+						<Col flex="auto"></Col>
+					</Row>
+
+					<Space></Space>
+				</Content>
+			</Layout>
+	);
+};
+
+export default Widget;

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

@@ -1,7 +1,5 @@
 import { useParams } from "react-router-dom";
 import { Layout, Affix, Col, Row } from "antd";
-import HeadBar from "../../../components/library/HeadBar";
-import FooterBar from "../../../components/library/FooterBar";
 import AnthologyDetail from "../../../components/article/AnthologyDetail";
 
 const { Content, Header } = Layout;
@@ -15,37 +13,32 @@ const Widget = () => {
 	const pageMaxWidth = "1260px";
 	return (
 		<Layout>
-			<HeadBar selectedKeys="anthology" />
-			<Layout>
-				<Affix offsetTop={0}>
-					<Header style={{ backgroundColor: "gray", height: "3.5em" }}>
-						<Col flex="auto"></Col>
-						<Col flex={pageMaxWidth}>
-							<div>
-								{aid}@{channel}
-							</div>
-						</Col>
-						<Col flex="auto"></Col>
-					</Header>
-				</Affix>
+			<Affix offsetTop={0}>
+				<Header style={{ backgroundColor: "gray", height: "3.5em" }}>
+					<Col flex="auto"></Col>
+					<Col flex={pageMaxWidth}>
+						<div>
+							{aid}@{channel}
+						</div>
+					</Col>
+					<Col flex="auto"></Col>
+				</Header>
+			</Affix>
 
-				<Content>
-					<Row>
-						<Col flex="auto"></Col>
-						<Col flex={pageMaxWidth}>
-							<Row>
-								<Col span="18">
-									<AnthologyDetail aid={aid} />
-								</Col>
-								<Col span="6"></Col>
-							</Row>
-						</Col>
-						<Col flex="auto"></Col>
-					</Row>
-				</Content>
-			</Layout>
-
-			<FooterBar />
+			<Content>
+				<Row>
+					<Col flex="auto"></Col>
+					<Col flex={pageMaxWidth}>
+						<Row>
+							<Col span="18">
+								<AnthologyDetail aid={aid} />
+							</Col>
+							<Col span="6"></Col>
+						</Row>
+					</Col>
+					<Col flex="auto"></Col>
+				</Row>
+			</Content>
 		</Layout>
 	);
 };