我发现一个极简的桌面端epub阅读器，但是不太完美

起因是这样的，我这个人有收集书籍电子版的癖好🙂，看到别人推荐的好书我又感兴趣的我就会去Z-Library上去找，找到我觉得最好的版本就把他下载下来，同步到我的手机、ipad的阅读器上。

但是我的电脑不能上一直没有阅读器打不开，因为市面上的阅读器都需要注册且有很多广告，我就想有没有离线的工具，又轻巧又便捷不需要联网就可以打开epub格式书籍文件。

于是皇天不负有心人。终于在GitHub上找到了一款开源工具——mess-reader，由皮皮仔开发,使用epub.js在浏览器上就可以打开本地的书籍文件。而且，还可以将安装成网页应用，通过双击本地的.epub 文件就可以直接打开。真是太轻应用了😍

使用起来页面非常简洁。长这样⬇️

但是，它同样存在显著的问题

在阅读的时候我发现，它不完整，侧边导航栏并没有正确显示出全部的目录。

因为阅读器只支持分页浏览，不能一次性显示整个文档，只能通过点击侧边导航栏的目录或者书页内容里的目录查看章节内容，这就导致书里面目录没有跳转指定章节的情况下，很多就看不到了。

于是，我就想修复这个bug。

我先使用命令ls -r递归列出项目的所有子目录文件，然后丢给Chat-GPT。告诉它问题，让他去分析哪部分是可能与目录bug相关的文件。它告诉我文件路径后，我就发给他文件的代码，

他告诉我目录的目录解析相关的逻辑似乎在 src/service/book.coffee 文件中的以下部分：

# 书的目录
useState_toc = create_external_state()
useState_book_instance.subscribe (book) ->
  useState_toc.set2 null
  navigation = await book.loaded.navigation
  useState_toc.set2 navigation.toc
export useValue_toc = -> useState_toc().value

通过在src/service/book.coffee 这个文件中的useState_toc.set2 navigation.toc前面加了这段代码console.log('Navigation:', navigation.toc) 用控制台输出了解析到的目录信息层级。发现解析到的目录是完整的，说明解析的是对的，只是侧边导航栏渲染的时候没有完整显示。

然后我就让它帮我找到了src/ui目录下有一些与 UI 相关的文件，特别是可能负责渲染目录的部分。找到 src/ui/nav 文件夹其中的 index.coffee 和 index.styl 文件。

检查这些文件，看看是否有涉及目录的渲染逻辑。特别是查看 src/ui/nav/index.coffee 文件中的代码，看看是否有处理子目录渲染的逻辑，以确保所有级别的目录都被正确地展示。我提供了相应的代码，它给了我修改后的代码：

Toc = ->
  state_expand = useExpand true
  list = useValue_toc()
  current_target = useValue_display_target()

  return list && E(style: state_expand.style,
    E(
      plass: 'title',
      onClick: state_expand.toggle,
      E '本书目录',
      E(plass: 'triangle')
    ),
    E(plass: 'body',
      list.map (item) ->
        E.a(
          key: item.id,
          href: item.href,
          title: item.label,
          plass: [current_target == item.href && 'selected'],
          onClick: (evt) ->
            evt.preventDefault()
            display item.href,
          E(item.label)  # 使用 E 组件包裹 item.label
        )
      )
  )

它告诉我Toc 组件是负责渲染书籍目录的部分。在这里，使用了 list.map 对目录进行渲染。在 list.map 中，返回的 E.a 的子元素是 item.label，但是应该使用 E 组件将 item.label 包裹起来，以确保正确的渲染。

我只需要将原来的代码注释掉，复制这段代码粘到下面，这让我一个产品经理也能够轻松的处理程序上的问题，真欣喜若狂。

就在我暗自窃喜马上就大功告成了！

——吗？

事实证明高兴早了，这段修复并没有起作用。（但也没报错😅）

于是我又问了更多的问题，一晃俩小时过去了。无奈水平有限， 我还是选择去求助我的前端工程师朋友。

——“哦，我的伙计，近来可好。”😁

转手甩给他整个过程的详细描述。

于是在他三下五除二等于几的操作下，目录终于可以正常显示了。

只是又出现了别的bug……

—— end ——