添加展示目录功能

package.json

@@ -29,6 +29,7 @@
     "electron-updater": "^5.3.0",
     "epubjs": "^0.3.93",
     "framer-motion": "^10.12.16",
+    "jotai": "^2.2.1",
     "postcss": "^8.4.23"
   },
   "devDependencies": {

src/renderer/src/App.tsx

@@ -5,11 +5,14 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
-import Viewer from "./components/Viewer";
+import Viewer from './components/Viewer'
+import { useAtom } from 'jotai'
+import { tocAtom } from './books/epubToc'
+import ItemToc from './components/ItemToc'
 
 function App(): JSX.Element {
   const [isDropDownOpen, setIsDropDownOpen] = useState(false)
-  const [isBookOpen, setIsBookOpen] = useState(false)
+  const [toc] = useAtom(tocAtom)
 
   return (
     <div className="w-screen h-screen flex flex-col bg-cyan-700/50">
@@ -67,12 +70,7 @@ function App(): JSX.Element {
         <div className="flex flex-[1_1_auto] outline m-2">
           <NavigationMenu.Root orientation="horizontal">
             <NavigationMenu.List>
-              <NavigationMenu.Item>目录</NavigationMenu.Item>
-
-              <NavigationMenu.Item>章节一</NavigationMenu.Item>
-
-              <NavigationMenu.Item>章节二</NavigationMenu.Item>
-
+              <ItemToc toc={toc}></ItemToc>
               <NavigationMenu.Indicator />
             </NavigationMenu.List>
 

src/renderer/src/books/epubToc.tsx

@@ -0,0 +1,6 @@
+import { atom } from 'jotai'
+
+// 创建目录状态原子
+const tocAtom = atom([])
+
+export { tocAtom }

src/renderer/src/components/ItemToc.tsx

@@ -0,0 +1,20 @@
+import * as NavigationMenu from '@radix-ui/react-navigation-menu'
+
+const ItemToc = ({ toc }: tocType) => {
+  return (
+    <>
+      {toc.map((item) => (
+        <NavigationMenu.Item key={item.href}>
+          {item.label}
+          {item.subitems && <ItemToc toc={item.subitems} />}
+        </NavigationMenu.Item>
+      ))}
+    </>
+  )
+}
+
+interface tocType {
+  toc: any
+}
+
+export default ItemToc

src/renderer/src/components/Viewer.tsx

@@ -1,15 +1,21 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import ePub from 'epubjs'
+import { tocAtom } from "../books/epubToc";
+import { useAtom } from 'jotai'
 
 const useEpubRenderer = () => {
   const books = useRef(ePub('../src/assets/angel01.epub'))
   const isMounted = useRef(false)
+  const [, setTocAtom] = useAtom(tocAtom)
 
   useEffect(() => {
     const { current: epubInstance } = books
 
     if (!isMounted.current) {
       console.log('sta')
+      epubInstance.ready.then(() => {
+        setTocAtom(epubInstance.navigation.toc)
+      })
       epubInstance.renderTo('epub-viewer', {
         width: '100%',
         height: '100%',
@@ -44,23 +50,23 @@ const useEpubRenderer = () => {
 const Viewer = React.memo(() => {
   const { books } = useEpubRenderer()
 
-  const clickBooks = (event) => {
-    const rect = event.currentTarget.getBoundingClientRect()
-    const clickX = event.clientX - rect.left
-
-    // 根据点击位置判断是左侧还是右侧区域
-    const isLeftArea = clickX < rect.width / 2
-
-    if (isLeftArea) {
-      books.current.rendition.prev() // 点击左侧区域进行上一页翻页操作
-    } else {
-      books.current.rendition.next() // 点击右侧区域进行下一页翻页操作
-    }
-  }
+  // const clickBooks = (event) => {
+  //   const rect = event.currentTarget.getBoundingClientRect()
+  //   const clickX = event.clientX - rect.left
+  //
+  //   // 根据点击位置判断是左侧还是右侧区域
+  //   const isLeftArea = clickX < rect.width / 2
+  //
+  //   if (isLeftArea) {
+  //     books.current.rendition.prev() // 点击左侧区域进行上一页翻页操作
+  //   } else {
+  //     books.current.rendition.next() // 点击右侧区域进行下一页翻页操作
+  //   }
+  // }
 
   return (
     <div className="flex flex-[4_1_auto] outline m-2">
-      <div className="w-96 h-96 bg-white m-2 z-50" onClick={clickBooks} id="epub-viewer"></div>
+      <div className="w-96 h-96 bg-white m-2 z-50" id="epub-viewer"></div>
     </div>
   )
 })