Better book info display

src/manage.tsx

@@ -8,6 +8,7 @@ import QdBooks from "./manage/qd/Books";
 import { Result } from 'antd';
 import { DbContext } from "./manage/dbProvider";
 import QdBook from "./manage/qd/Book";
+import QdBookIndex from "./manage/qd/BookIndex";
 
 const router = createHashRouter([
     {
@@ -21,6 +22,12 @@ const router = createHashRouter([
     {
         path: "/qd/book/:id",
         element: <QdBook />,
+        children: [
+            {
+                index: true,
+                element: <QdBookIndex />
+            }
+        ],
     }
 ]);
 

src/manage/qd/Book.tsx

@@ -1,8 +1,9 @@
 import { Breadcrumb, Result, Button, Skeleton } from "antd";
-import { NavLink, useParams } from "react-router";
+import { NavLink, Outlet, useParams } from "react-router";
 import { useDb } from "../dbProvider";
 import type { QdBookInfo } from "../../types";
 import { useEffect, useState } from "react";
+import { BookInfoContext } from "./BookInfoProvider";
 
 export default function Book() {
     const db = useDb();
@@ -44,6 +45,9 @@ export default function Book() {
                 title="数据加载失败"
                 subTitle={err}
                 extra={<Button type="primary" onClick={() => { setErr(null); handle(); }}>重试</Button>} />}
+            {book && (<BookInfoContext.Provider value={book}>
+                <Outlet />
+            </BookInfoContext.Provider>)}
         </>
     );
 }

src/manage/qd/BookIndex.module.css

@@ -0,0 +1,22 @@
+.c .img {
+    width: 180px;
+    height: auto;
+}
+
+.c .info {
+    min-width: 300px;
+}
+
+.c .name {
+    margin: 0 8px;
+    text-align: center;
+}
+
+.c .author {
+    margin: 0 8px;
+    text-align: right;
+}
+
+.c .author > span {
+    font-weight: bold;
+}

src/manage/qd/BookIndex.tsx

@@ -0,0 +1,20 @@
+import { Flex, Space, Typography } from "antd";
+import { useBookInfo } from "./BookInfoProvider";
+import styles from './BookIndex.module.css';
+
+const { Paragraph } = Typography;
+
+export default function BookIndex() {
+    const bookInfo = useBookInfo();
+    return (
+        <div className={styles.c}>
+            <Flex justify="center">
+                <img className={styles.img} src={bookInfo.bookInfo.imgUrl} />
+                <Space orientation="vertical" className={styles.info}>
+                    <h2 className={styles.name}>{bookInfo.bookName}</h2>
+                    <Paragraph className={styles.author}><span>{bookInfo.bookInfo.pageJson.authorInfo.authorName}</span> 著</Paragraph>
+                </Space>
+            </Flex>
+        </div>
+    );
+}

src/manage/qd/BookInfoProvider.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+import type { QdBookInfo } from "../../types";
+
+export const BookInfoContext = createContext<QdBookInfo>(null as any);
+
+export function useBookInfo() {
+    return useContext(BookInfoContext);
+}