fix bug

Former-commit-id: 0fdd976124312dd6ef574ae5cebdb680f4ad2e86
2026-06-19 13:20:50 -04:00 · 2020-09-06 16:36:18 +08:00
parent b0f89ca0f5
commit b148cca2ff
50 changed files with 388 additions and 256 deletions
--- a/main.ts
+++ b/main.ts
@@ -9,28 +9,21 @@ const {
 const isDev = require("electron-is-dev");
 const path = require("path");
 const fontList = require("font-list");
-// ipcMain.on("is-fonts-ready", (event, arg) => {
-//   console.log(arg, "arg");

-// });
 ipcMain.on("fonts-ready", (event, arg) => {
-  console.log(arg); // prints "ping"
  fontList
    .getFonts()
    .then((fonts) => {
      event.returnValue = fonts;
-      // event.reply("fonts-ready", "pong");
    })
    .catch((err) => {
-      console.log("epub");
+      console.log(err);
    });
 });

 let mainWindow;

 app.on("ready", () => {
-  // console.log("before message box");
-
  mainWindow = new BrowserWindow({
    width: 1030,
    height: 660,
--- a/src/assets/locales/cn/translation.json
+++ b/src/assets/locales/cn/translation.json
@@ -16,6 +16,7 @@
  "Downloading": "下载中，请稍候",
  "Uploading": "上传中，请稍候",
  "Loading": "加载中",
+  "Current Font Size": "当前大小",
  "Import from Local": "从本地导入",
  "Backup and Restore": "备份和恢复",
  "Search My Library": "搜索我的书库",
@@ -41,6 +42,7 @@
  "Ultra Large": "超大",
  "Reading Option": "阅读选项",
  "Current Progress": "当前进度",
+  "Current Chapter": "当前章节",
  "Exit": "退出阅读",
  "Empty Shelf Title": "书架名为空",
  "Enter Fullscreen": "进入全屏",
@@ -76,8 +78,8 @@
  "Backup Successfully": "备份成功",
  "Restore Successfully": "恢复成功",
  "Try refresh or restart": "退出阅读后生效",
-  "Turn On scroll mode": "开启滚动模式",
-  "Turn Off scroll mode": "关闭滚动模式",
+  "Turn on scroll mode": "开启滚动模式",
+  "Turn off scroll mode": "关闭滚动模式",
  "Search the book": "全书搜索",
  "Wrong bookmark": "书签出问题了",
  "Last Step": "上一步",
--- a/src/assets/locales/en/translation.json
+++ b/src/assets/locales/en/translation.json
@@ -85,6 +85,8 @@
  "Search the book": "Search the book",
  "Turn on scroll mode": "Turn on scroll mode",
  "Loading": "Loading",
+  "Current Font Size": "Current Font Size",
+  "Current Chapter": "Current Chapter",
  "Turn off scroll mode": "Turn off scroll mode",
  "Wrong bookmark": "Wrong bookmark",
  "Last Step": "Last Step",
--- a/src/assets/locales/tw/translation.json
+++ b/src/assets/locales/tw/translation.json
@@ -97,6 +97,8 @@
  "Turn on scroll mode": "開啟滾動模式",
  "Turn off scroll mode": "關閉滾動模式",
  "Less": "收起",
+  "Current Font Size": "當前大小",
+  "Current Chapter": "當前章節",
  "Loading": "加載中",
  "Pick Up Color": "選擇顏色",
  "Highlight Successfully": "高亮成功",
--- a/src/components/book/component.tsx
+++ b/src/components/book/component.tsx
@@ -41,7 +41,6 @@ class Book extends React.Component<BookProps, BookState> {
  handleMoreAction = (event: any) => {
    const e = event || window.event;
    let x = e.clientX;
-    console.log(e.clientX, document.body.clientWidth);
    if (x > document.body.clientWidth - 100) {
      x = x - 80;
    }
--- a/src/components/bookmarkList/bookmarkList.css
+++ b/src/components/bookmarkList/bookmarkList.css
@@ -10,13 +10,20 @@
 .book-bookmark-digest {
  margin: 15px 5px 10px;
  width: 236px;
-  max-height: 183px;
+  max-height: 186px;
  font-size: 14px;
  line-height: 14px;
  color: rgba(75, 75, 75, 1);
  opacity: 1;
-  overflow: hidden;
  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  white-space: normal;
+  word-break: keep-all;
+  overflow: hidden;
+  position: relative;
 }
 .book-bookmark-index {
  float: left;
@@ -42,7 +49,8 @@
  margin-left: 12px;
  /* margin-top: 8px; */
  position: relative;
-  bottom: 10px;
+  bottom: 15px;
+  left: 10px;
  font-size: 14px;
  color: rgba(161, 161, 161, 1);
  opacity: 1;
@@ -63,5 +71,6 @@
  margin: 0px 12px 0px;
  cursor: pointer;
  position: relative;
-  bottom: 15px;
+  bottom: 5px;
+  left: 10px;
 }
--- a/src/components/bookmarkList/component.tsx
+++ b/src/components/bookmarkList/component.tsx
@@ -31,6 +31,7 @@ class BookmarkList extends React.Component<
        .filter((item) => {
          return item.bookKey === this.props.currentBook.key;
        })
+        .reverse()
        .map((item, index) => {
          const bookmarkProps = {
            itemKey: item.key,
@@ -48,7 +49,9 @@ class BookmarkList extends React.Component<
              }}
            >
              <p className="book-bookmark-digest">{item.label}</p>
-              <span className="book-bookmark-index">{item.chapter}</span>
+              <span className="bookmark-page-list-item-title">
+                {item.chapter}
+              </span>
              {this.state.deleteIndex === index ? (
                <DeleteIcon {...bookmarkProps} />
              ) : null}
--- a/src/components/cardList/cardList.css
+++ b/src/components/cardList/cardList.css
@@ -126,6 +126,7 @@
 }
 .card-list-item-title {
  float: left;
+  /* width: 100px; */
 }
 .card-list-container-box {
  margin-top: 35px;
--- a/src/components/cardList/component.tsx
+++ b/src/components/cardList/component.tsx
@@ -40,7 +40,6 @@ class CardList extends React.Component<CardListProps, CardListStates> {
        break;
      }
    }
-    console.log(cfi, "cfi");
    this.props.handleReadingBook(book!);
    this.props.handleReadingEpub(epub);
    this.props.handleReadingState(true);
@@ -116,7 +115,9 @@ class CardList extends React.Component<CardListProps, CardListStates> {
                <div className="card-list-item-chapter card-list-item-title">
                  {this.handleBookName(item.bookKey)}
                </div>
-                <div className="card-list-item-title">》{item.chapter}</div>
+                <div className="card-list-item-chapter card-list-item-title">
+                  》<Trans>{item.chapter}</Trans>
+                </div>
              </div>
              <div
                onClick={() => {
--- a/src/components/contentList/component.tsx
+++ b/src/components/contentList/component.tsx
@@ -8,14 +8,10 @@ class ContentList extends React.Component<ContentListProps, ContentListState> {
    this.state = { chapters: [] };
    this.handleJump = this.handleJump.bind(this);
  }
+
  componentWillMount() {
-    console.log(
-      this.props.currentEpub.navigation,
-      "this.props.currentEpub.navigation"
-    );
    this.props.currentEpub.loaded.navigation
      .then((chapters: any) => {
-        console.log(chapters.toc, "chapters");
        this.setState({ chapters: chapters.toc });
      })
      .catch(() => {
@@ -46,25 +42,11 @@ class ContentList extends React.Component<ContentListProps, ContentListState> {
        );
      });
    };
-    // return (
-    //   <li className="book-content-list" key={index}>
-    //     <a
-    //       href={item.href}
-    //       onClick={this.handleJump}
-    //       className="book-content-name"
-    //     >
-    //       {item.label}
-    //     </a>
-    //     {item.subitems.length > 0 ? (
-    //       <ul>{renderSubContentList(item.subitems)}</ul>
-    //     ) : null}
-    //   </li>
-    // );

    return (
      <div className="book-content-container">
        <ul className="book-content">
-          {renderContentList(this.state.chapters)}
+          {this.state.chapters && renderContentList(this.state.chapters)}
        </ul>
      </div>
    );
--- a/src/components/contentList/index.tsx
+++ b/src/components/contentList/index.tsx
@@ -3,7 +3,10 @@ import { connect } from "react-redux";
 import { stateType } from "../../redux/store";
 import ContentList from "./component";
 const mapStateToProps = (state: stateType) => {
-  return { currentEpub: state.book.currentEpub };
+  return {
+    currentEpub: state.book.currentEpub,
+    chapters: state.reader.chapters,
+  };
 };
 const actionCreator = {};
 export default connect(mapStateToProps, actionCreator)(ContentList);
--- a/src/components/contentList/interface.tsx
+++ b/src/components/contentList/interface.tsx
@@ -1,5 +1,6 @@
 export interface ContentListProps {
  currentEpub: any;
+  chapters: any;
 }
 export interface ContentListState {
  chapters: any;
--- a/src/components/fontSizeList/component.tsx
+++ b/src/components/fontSizeList/component.tsx
@@ -1,6 +1,5 @@
 //字体大小选择页面
 import React from "react";
-import { fontSizeList } from "../../utils/readerConfig";
 import { Trans } from "react-i18next";
 import { FontSizeListProps, FontSizeListState } from "./interface";
 import "./fontSizeList.css";
@@ -13,51 +12,52 @@ class FontSizeList extends React.Component<
  constructor(props: FontSizeListProps) {
    super(props);
    this.state = {
-      currentFontSizeIndex: fontSizeList.findIndex((item) => {
-        return item.value === (OtherUtil.getReaderConfig("fontSize") || "17");
-      }),
+      fontSize: OtherUtil.getReaderConfig("fontSize") || "17",
    };
  }

-  handleFontSize(value: string, index: number) {
-    OtherUtil.setReaderConfig("fontSize", value);
-    this.setState({
-      currentFontSizeIndex: index,
-    });
+  onFontChange = (event: any) => {
+    const fontSize = event.target.value;
+    OtherUtil.setReaderConfig("fontSize", fontSize);
    this.props.handleMessage("Try refresh or restart");
    this.props.handleMessageBox(true);
-  }
-
+  };
+  //使进度百分比随拖动实时变化
+  onFontInput = (event: any) => {
+    this.setState({ fontSize: event.target.value });
+  };
  render() {
-    const renderFontSizeDescription = () => {
-      return fontSizeList.map((item, index) => {
-        return (
-          <li className="font-size-description" key={item.id}>
-            <div
-              className={
-                index === this.state.currentFontSizeIndex
-                  ? "active-font-size font-size-circle"
-                  : "font-size-circle"
-              }
-              onClick={() => this.handleFontSize(item.value, index)}
-            ></div>
-            <p className="font-size-text">
-              <Trans>{item.size}</Trans>
-            </p>
-          </li>
-        );
-      });
-    };
    return (
      <div className="font-size-setting">
        <div className="font-size-title">
          <Trans>Font Size</Trans>
        </div>
        <span className="ultra-small-size">A</span>
-        <div className="font-size-line"></div>
-        <ul className="font-size-selector">{renderFontSizeDescription()}</ul>
-
+        <div className="font-size-selector">
+          <input
+            className="input-progress"
+            defaultValue={this.state.fontSize}
+            type="range"
+            max="30"
+            min="15"
+            step="1"
+            onMouseUp={(event) => {
+              this.onFontChange(event);
+            }}
+            onChange={(event) => {
+              this.onFontInput(event);
+            }}
+          />
+        </div>
        <span className="ultra-large-size">A</span>
+        <div
+          style={{ fontSize: `${this.state.fontSize}px` }}
+          className="font-size-demo"
+        >
+          <Trans>Current Font Size</Trans>
+          {": "}
+          {this.state.fontSize}
+        </div>
      </div>
    );
  }
--- a/src/components/fontSizeList/fontSizeList.css
+++ b/src/components/fontSizeList/fontSizeList.css
@@ -16,25 +16,15 @@
  line-height: 27px;
  color: rgba(75, 75, 75, 1);
 }
-.font-size-line {
-  float: left;
-  width: 173px;
-  height: 0px;
-  border: 2px solid rgba(112, 112, 112, 1);
-  opacity: 1;
-  border-top: none;
-  margin-top: 12px;
-  margin-left: 14px;
-}
+
 .ultra-large-size {
  float: right;
  font-size: 40px;
-  font-weight: 300;
  line-height: 68px;
  color: rgba(75, 75, 75, 1);
  position: relative;
-  bottom: 66px;
-  right: -20px;
+  bottom: 49px;
+  left: 5px;
 }
 .font-size-selector {
  width: 205px;
@@ -42,40 +32,11 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin-left: 12px;
-}
-
-.font-size-description {
-  float: left;
-  width: 25px;
+  margin-left: 0px;
  position: relative;
-  bottom: 4px;
-  right: 2px;
-  cursor: pointer;
-}
-.font-size-circle {
-  display: flex;
-  justify-content: center;
-  float: left;
-  margin: 0 8px;
-  width: 12px;
-  height: 12px;
-  background: rgba(255, 255, 255, 1);
-  border: 2px solid rgba(0, 0, 0, 1);
-  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.16);
-  border-radius: 50%;
-  font-size: 10px;
-  color: rgba(75, 75, 75, 1);
-  text-align: center;
-  box-sizing: border-box;
+  right: 40px;
 }

-.active-font-size {
-  width: 17px;
-  height: 17px;
-  margin: 0 4px;
-  background: black;
-}
 .font-size-text {
  width: 100%;
  text-align: center;
@@ -83,5 +44,11 @@
  float: left;
  display: block;
  font-size: 12px;
-  color: rgba(75, 75, 75, 1);
+}
+.font-size-demo {
+  text-align: center;
+  color: rgba(75, 75, 75, 1);
+  margin-left: 19px;
+  position: relative;
+  top: 10px;
 }
--- a/src/components/fontSizeList/interface.tsx
+++ b/src/components/fontSizeList/interface.tsx
@@ -3,5 +3,5 @@ export interface FontSizeListProps {
  handleMessage: (message: string) => void;
 }
 export interface FontSizeListState {
-  currentFontSizeIndex: number;
+  fontSize: string;
 }
--- a/src/components/importLocal/component.tsx
+++ b/src/components/importLocal/component.tsx
@@ -8,7 +8,6 @@ import { Trans } from "react-i18next";
 import Dropzone from "react-dropzone";
 import { ImportLocalProps, ImportLocalState } from "./interface";
 import RecordRecent from "../../utils/recordRecent";
-import axios from "axios";
 import Epub from "epubjs";

 declare var window: any;
@@ -29,7 +28,6 @@ class ImportLocal extends React.Component<ImportLocalProps, ImportLocalState> {
    }
    bookArr.push(book);
    RecordRecent.setRecent(book.key);
-    console.log(bookArr, "bookArr");
    localforage.setItem("books", bookArr).then(() => {
      this.props.handleFetchBooks();
    });
@@ -79,54 +77,6 @@ class ImportLocal extends React.Component<ImportLocalProps, ImportLocalState> {
      //this.handleOtherFormat(file, file.name);
    }
  };
-  toBase64 = (file: any) =>
-    new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result);
-      reader.onerror = (error) => reject(error);
-    });
-  handleOtherFormat = async (file: any, name: string) => {
-    const option = {
-      apikey: "47f9a3ea69b4f01bc1c54ee2d17b4c2a",
-      input: "base64",
-      outputformat: "epub",
-      filename: "老人与海.txt",
-      file: await this.toBase64(file),
-    };
-    const data = await axios.post("https://api.convertio.co/convert", option);
-    console.log(data, "data1");
-    if (data.data.data.id) {
-      axios
-        .get(`https://api.convertio.co/convert/${data.data.data.id}/dl`)
-        .then((res) => {
-          fetch(
-            "data:" +
-              "application/epub+zip" +
-              ";base64," +
-              res.data.data.content
-          )
-            .then((res: any) => res.blob())
-            .then((blob: any) => {
-              console.log(blob, "blob");
-              const file = new File([blob], "老人与海.epub", {
-                type: "application/epub+zip",
-              });
-              this.doIncrementalTest(file);
-            })
-            .catch((err) => {
-              console.log(err, "err");
-            });
-        })
-        .catch((err) => {
-          console.log(err);
-          return;
-        });
-    } else {
-      this.props.handleMessage("Import Failed");
-      this.props.handleMessageBox(true);
-    }
-  };
  handleBook = (file: any, md5: string) => {
    //md5重复不导入
    if (this.props.books) {
@@ -182,7 +132,7 @@ class ImportLocal extends React.Component<ImportLocalProps, ImportLocalState> {
            this.doIncrementalTest(item);
          });
        }}
-        accept={[".epub", ".mobi", ".txt"]}
+        accept={[".epub"]}
        multiple={true}
      >
        {({ getRootProps, getInputProps }) => (
--- a/src/components/popupNote/component.tsx
+++ b/src/components/popupNote/component.tsx
@@ -23,7 +23,6 @@ class PopupNote extends React.Component<PopupNoteProps> {
          item.notes = notes;
        }
      });
-      console.log(this.props.notes, "notes");
      localforage.setItem("notes", this.props.notes).then(() => {
        this.props.handleOpenMenu(false);
        this.props.handleMessage("Add Successfully");
@@ -35,12 +34,11 @@ class PopupNote extends React.Component<PopupNoteProps> {
      });
    } else {
      let bookKey = this.props.currentBook.key;
-      let epub = this.props.currentEpub;
-      const currentLocation = epub.rendition.currentLocation();
+      const currentLocation = this.props.currentEpub.rendition.currentLocation();
      let chapterHref = currentLocation.start.href;
      let chapterIndex = currentLocation.start.index;
      let chapter = "Unknown Chapter";
-      let currentChapter = this.props.chapters.filter(
+      let currentChapter = this.props.flattenChapters.filter(
        (item: any) => item.href.split("#")[0] === chapterHref
      )[0];
      if (currentChapter) {
@@ -50,7 +48,7 @@ class PopupNote extends React.Component<PopupNoteProps> {
      const cfi = RecordLocation.getCfi(this.props.currentBook.key).cfi;

      let iframe = document.getElementsByTagName("iframe")[0];
-      if(!iframe)return;
+      if (!iframe) return;
      let doc = iframe.contentDocument;
      if (!doc) {
        return;
@@ -59,11 +57,6 @@ class PopupNote extends React.Component<PopupNoteProps> {
        .getSelection(iframe)
        .saveCharacterRanges(doc.body)[0];
      let range = JSON.stringify(charRange);
-      console.log(
-        charRange,
-        doc.getSelection(),
-        doc.getSelection()!.toString()
-      );
      let text = doc.getSelection()?.toString();
      if (!text) {
        return;
--- a/src/components/popupNote/index.tsx
+++ b/src/components/popupNote/index.tsx
@@ -11,7 +11,7 @@ const mapStateToProps = (state: stateType) => {
    currentBook: state.book.currentBook,
    notes: state.reader.notes,
    color: state.reader.color,
-    chapters: state.reader.chapters,
+    flattenChapters: state.reader.flattenChapters,
    noteKey: state.reader.noteKey,
  };
 };
--- a/src/components/popupNote/interface.tsx
+++ b/src/components/popupNote/interface.tsx
@@ -4,7 +4,7 @@ export interface PopupNoteProps {
  currentEpub: any;
  currentBook: BookModel;
  notes: NoteModel[];
-  chapters: any;
+  flattenChapters: any;
  color: number;
  noteKey: string;
  handleNoteKey: (key: string) => void;
@@ -12,5 +12,5 @@ export interface PopupNoteProps {
  handleMessage: (message: string) => void;
  handleOpenMenu: (isOpenMenu: boolean) => void;
  handleMenuMode: (menu: string) => void;
-  handleFetchNotes:()=>void;
+  handleFetchNotes: () => void;
 }
--- a/src/components/popupOption/component.tsx
+++ b/src/components/popupOption/component.tsx
@@ -15,7 +15,7 @@ class PopupOption extends React.Component<PopupOptionProps> {
    this.props.handleMenuMode("note");
    let rect = this.props.rect;
    let x = rect.x % this.props.currentEpub.rendition._layout.width;
-    let y= rect.y % this.props.currentEpub.rendition._layout.height;
+    let y = rect.y % this.props.currentEpub.rendition._layout.height;
    let height = 200;
    let posX = x + rect.width / 2 - 20;
    //防止menu超出图书
@@ -64,12 +64,11 @@ class PopupOption extends React.Component<PopupOptionProps> {
  };
  handleDigest = () => {
    let bookKey = this.props.currentBook.key;
-    let epub = this.props.currentEpub;
-    const currentLocation = epub.rendition.currentLocation();
+    const currentLocation = this.props.currentEpub.rendition.currentLocation();
    let chapterHref = currentLocation.start.href;
    let chapterIndex = currentLocation.start.index;
    let chapter = "Unknown Chapter";
-    let currentChapter = this.props.chapters.filter(
+    let currentChapter = this.props.flattenChapters.filter(
      (item: any) => item.href.split("#")[0] === chapterHref
    )[0];
    if (currentChapter) {
@@ -91,7 +90,6 @@ class PopupOption extends React.Component<PopupOptionProps> {
      .getSelection(iframe)
      .saveCharacterRanges(doc.body)[0];
    let range = JSON.stringify(charRange);
-    console.log(doc.getSelection(), "propscontents");
    let text = doc.getSelection()?.toString();
    if (!text) return;
    text = text.replace(/\s\s/g, "");
@@ -110,7 +108,6 @@ class PopupOption extends React.Component<PopupOptionProps> {
      percentage,
      color
    );
-    console.log(digest, "digest");
    let noteArr = this.props.notes;
    noteArr.push(digest);
    localforage.setItem("notes", noteArr).then(() => {
--- a/src/components/popupOption/index.tsx
+++ b/src/components/popupOption/index.tsx
@@ -19,7 +19,7 @@ const mapStateToProps = (state: stateType) => {
    selection: state.viewArea.selection,
    notes: state.reader.notes,
    color: state.reader.color,
-    chapters: state.reader.chapters,
+    flattenChapters: state.reader.flattenChapters,
  };
 };
 const actionCreator = {
--- a/src/components/popupOption/interface.tsx
+++ b/src/components/popupOption/interface.tsx
@@ -6,7 +6,7 @@ export interface PopupOptionProps {
  selection: string;
  digests: NoteModel[];
  notes: NoteModel[];
-  chapters: any;
+  flattenChapters: any;
  color: number;
  rect: DOMRect;
  cfiRange: string;
--- a/src/components/searchBox/component.tsx
+++ b/src/components/searchBox/component.tsx
@@ -8,9 +8,7 @@ class SearchBox extends React.Component<SearchBoxProps> {
    if (this.props.isNavSearch) {
      let searchBox: any = document.querySelector(".header-search-box");
      searchBox && searchBox.focus();
-      console.log(searchBox, "searchBox");
    }
-    console.log(this.props.isNavSearch, "this.props.isNavSearch");
  }
  handleMouse = () => {
    let value = (this.refs.searchBox as any).value;
@@ -48,7 +46,6 @@ class SearchBox extends React.Component<SearchBoxProps> {
        );
        return item;
      });
-      console.log(searchList, "searchListtest");
      // this.$refs.searchInput.blur();
      this.props.handleSearchList(searchList);
    });
--- a/src/components/singleControl/component.tsx
+++ b/src/components/singleControl/component.tsx
@@ -21,6 +21,9 @@ class SingleControl extends React.Component<
    this.props.handleSingle(mode);
    this.setState({ isSingle: mode === "single" });
    OtherUtil.setReaderConfig("isSingle", mode);
+    if (mode !== "single") {
+      OtherUtil.setReaderConfig("isScroll", "no");
+    }
    this.props.handleMessage("Try refresh or restart");
    this.props.handleMessageBox(true);
  };
--- a/src/components/tokenDialog/component.tsx
+++ b/src/components/tokenDialog/component.tsx
@@ -27,7 +27,6 @@ class TokenDialog extends Component<TokenDialogProps, TokenDialogState> {
    this.props.handleMessageBox(true);
  };
  handleOAuth(driveName: string) {
-    console.log(driveName, "onedrive");
    if (driveName === "onedrive") {
      OnedriveUtil.GetAccessToken();
    }
--- a/src/containers/actionDialog/component.tsx
+++ b/src/containers/actionDialog/component.tsx
@@ -5,7 +5,6 @@ import { ActionDialogProps } from "./interface";

 class ActionDialog extends React.Component<ActionDialogProps> {
  handleDeleteBook = () => {
-    console.log("tests");
    this.props.handleReadingBook(this.props.currentBook);
    this.props.handleDeleteDialog(true);
    this.props.handleActionDialog(false);
--- a/src/containers/bookList/component.tsx
+++ b/src/containers/bookList/component.tsx
@@ -68,7 +68,6 @@ class BookList extends React.Component<BookListProps> {
    arr.forEach((item) => {
      items[item] && itemArr.push(items[item]);
    });
-    console.log(items, itemArr, "filter");
    return itemArr;
  };
  renderBookList = () => {
--- a/src/containers/bookmarkPage/bookmarkPage.css
+++ b/src/containers/bookmarkPage/bookmarkPage.css
@@ -76,8 +76,7 @@
 .bookmark-page-list-item-title {
  float: left;
  font-size: 14px;
-  height: 15px;
-
+  height: 16px;
  line-height: 15px;
  color: rgba(75, 75, 75, 1);
  opacity: 1;
--- a/src/containers/bookmarkPage/component.tsx
+++ b/src/containers/bookmarkPage/component.tsx
@@ -36,7 +36,6 @@ class BookmarkPage extends React.Component<
  };
  render() {
    let { bookmarks, books, covers } = this.props;
-    console.log(bookmarks, "bookmarks");
    let bookKeyArr: string[] = [];
    //获取bookmarks中的图书列表
    bookmarks.forEach((item) => {
@@ -70,9 +69,11 @@ class BookmarkPage extends React.Component<
      return false;
    });
    const renderBookmarklistItem = (item: BookModel) => {
-      return bookmarkObj[item.key].map((item: BookmarkModel) => (
+      return bookmarkObj[item.key].reverse().map((item: BookmarkModel) => (
        <li className="bookmark-page-list-item" key={item.key}>
-          <div className="bookmark-page-list-item-title">{item.chapter}</div>
+          <div className="bookmark-page-list-item-title">
+            <Trans>{item.chapter}</Trans>
+          </div>
          <div className="bookmark-page-progress">
            {Math.round(item.percentage * 100)}%
          </div>
--- a/src/containers/operationPanel/component.tsx
+++ b/src/containers/operationPanel/component.tsx
@@ -65,11 +65,10 @@ class OperationPanel extends React.Component<
  }
  handleAddBookmark() {
    let bookKey = this.props.currentBook.key;
-    let epub = this.props.currentEpub;
-    const currentLocation = epub.rendition.currentLocation();
+    const currentLocation = this.props.currentEpub.rendition.currentLocation();
    let chapterHref = currentLocation.start.href;
    let chapter = "Unknown Chapter";
-    let currentChapter = this.props.chapters.filter(
+    let currentChapter = this.props.flattenChapters.filter(
      (item: any) => item.href.split("#")[0] === chapterHref
    )[0];
    if (currentChapter) {
@@ -85,7 +84,7 @@ class OperationPanel extends React.Component<
    const cfiRange = `epubcfi(${cfibase}!,${cfistart},${cfiend})`;
    const cfi = RecordLocation.getCfi(this.props.currentBook.key).cfi;

-    epub.getRange(cfiRange).then((range: any) => {
+    this.props.currentEpub.getRange(cfiRange).then((range: any) => {
      let text = range.toString();
      text = text.replace(/\s\s/g, "");
      text = text.replace(/\r/g, "");
--- a/src/containers/operationPanel/index.tsx
+++ b/src/containers/operationPanel/index.tsx
@@ -19,7 +19,7 @@ const mapStateToProps = (state: stateType) => {
    currentEpub: state.book.currentEpub,
    currentBook: state.book.currentBook,
    bookmarks: state.reader.bookmarks,
-    chapters: state.reader.chapters,
+    flattenChapters: state.reader.flattenChapters,
  };
 };
 const actionCreator = {
--- a/src/containers/operationPanel/interface.tsx
+++ b/src/containers/operationPanel/interface.tsx
@@ -5,7 +5,7 @@ export interface OperationPanelProps {
  currentEpub: any;
  currentBook: BookModel;
  bookmarks: BookmarkModel[];
-  chapters: any;
+  flattenChapters: any;
  handleBookmarks: (bookmarks: BookmarkModel[]) => void;
  handleReadingState: (isReading: boolean) => void;
  handleFetchBookmarks: () => void;
--- a/src/containers/popupMenu/component.tsx
+++ b/src/containers/popupMenu/component.tsx
@@ -148,6 +148,7 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
    let highlighters: any = this.props.notes;
    if (!highlighters) return;
    const currentLocation = this.props.currentEpub.rendition.currentLocation();
+    if (!currentLocation.start) return;
    let chapterIndex = currentLocation.start.index;
    let highlightersByChapter = highlighters.filter(
      (item: any) => item.chapterIndex === chapterIndex
--- a/src/containers/progressPanel/component.tsx
+++ b/src/containers/progressPanel/component.tsx
@@ -12,12 +12,29 @@ class ProgressPanel extends React.Component<
    super(props);
    this.state = {
      displayPercentage: this.props.percentage ? this.props.percentage : 0,
+      currentChapter: "",
    };
  }
+  componentWillReceiveProps(nextProps: ProgressPanelProps) {
+    if (nextProps.currentEpub.rendition.location) {
+      const currentLocation = this.props.currentEpub.rendition.currentLocation();
+      if (!currentLocation.start) {
+        return;
+      }
+      let chapterHref = currentLocation.start.href;
+      let chapter = "Unknown Chapter";
+      let currentChapter = this.props.flattenChapters.filter(
+        (item: any) => item.href.split("#")[0] === chapterHref
+      )[0];
+      if (currentChapter) {
+        chapter = currentChapter.label.trim(" ");
+      }
+      this.setState({ currentChapter: chapter });
+    }
+  }
  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  onProgressChange = (event: any) => {
    const percentage = event.target.value / 100;
-    console.log(this.props.locations, "locations");
    const location = percentage
      ? this.props.locations.cfiFromPercentage(percentage)
      : 0;
@@ -57,16 +74,28 @@ class ProgressPanel extends React.Component<
  };

  render() {
+    if (!this.props.locations) {
+      return (
+        <div className="progress-panel">
+          <p className="progress-text">
+            <Trans>Loading</Trans>
+          </p>
+        </div>
+      );
+    }
    return (
      <div className="progress-panel">
        <p className="progress-text">
-          <Trans>Current Progress</Trans>:{" "}
-          {Math.round(
-            this.state.displayPercentage > 1
-              ? 100
-              : this.state.displayPercentage * 100
-          )}
-          %
+          <span>
+            <Trans>Current Progress</Trans>:{" "}
+            {Math.round(
+              this.state.displayPercentage > 1
+                ? 100
+                : this.state.displayPercentage * 100
+            )}
+            {"%  "}
+          </span>
+          <span>{this.state.currentChapter}</span>
        </p>

        <input
--- a/src/containers/progressPanel/index.tsx
+++ b/src/containers/progressPanel/index.tsx
@@ -9,6 +9,7 @@ const mapStateToProps = (state: stateType) => {
    currentBook: state.book.currentBook,
    percentage: state.progressPanel.percentage,
    locations: state.progressPanel.locations,
+    flattenChapters: state.reader.flattenChapters,
  };
 };
 const actionCreator = {};
--- a/src/containers/progressPanel/interface.tsx
+++ b/src/containers/progressPanel/interface.tsx
@@ -5,7 +5,9 @@ export interface ProgressPanelProps {
  currentBook: BookModel;
  percentage: number;
  locations: any;
+  flattenChapters: any;
 }
 export interface ProgressPanelState {
  displayPercentage: number;
+  currentChapter: string;
 }
--- a/src/containers/progressPanel/progressPanel.css
+++ b/src/containers/progressPanel/progressPanel.css
@@ -5,6 +5,8 @@
  width: 100%;
  margin-top: 9px;
  text-align: center;
+  height: 15px;
+  overflow: hidden;
 }
 .progress-slide-container {
  width: 309px;
@@ -151,3 +153,7 @@ input[type="range"]::-ms-thumb {
  z-index: 10;
  animation: fade-up 0.1s ease-in-out 0s 1;
 }
+.input-progress {
+  position: absolute;
+  bottom: 3px;
+}
--- a/src/containers/viewArea/component.tsx
+++ b/src/containers/viewArea/component.tsx
@@ -51,7 +51,6 @@ class ViewArea extends React.Component<ViewAreaProps, ViewAreaStates> {
      this.props.handleOpenMenu(false);
      const currentLocation = this.rendition.currentLocation();
      const cfi = currentLocation.start.cfi;
-
      this.props.handleShowBookmark(
        this.props.bookmarks &&
          this.props.bookmarks.filter(
@@ -105,6 +104,9 @@ class ViewArea extends React.Component<ViewAreaProps, ViewAreaStates> {
  }
  showImage = (event: any) => {
    console.log("click");
+    if (!event.target.src) {
+      return;
+    }
    if (this.state.isShowImage) {
      this.setState({ isShowImage: false });
    }
@@ -112,19 +114,17 @@ class ViewArea extends React.Component<ViewAreaProps, ViewAreaStates> {
    const handleDirection = (direction: string) => {
      this.setState({ imageRatio: direction });
    };
-    if (event.target.src) {
-      var img = new Image();
-      img.addEventListener("load", function () {
-        handleDirection(
-          this.naturalWidth / this.naturalHeight > 1 ? "horizontal" : "vertical"
-        );
-      });
-      img.src = event.target.src;
-      let image: HTMLImageElement | null = document.querySelector(".image");
-      if (image) {
-        image.src = event.target.src;
-        this.setState({ isShowImage: true });
-      }
+    var img = new Image();
+    img.addEventListener("load", function () {
+      handleDirection(
+        this.naturalWidth / this.naturalHeight > 1 ? "horizontal" : "vertical"
+      );
+    });
+    img.src = event.target.src;
+    let image: HTMLImageElement | null = document.querySelector(".image");
+    if (image) {
+      image.src = event.target.src;
+      this.setState({ isShowImage: true });
    }
  };
  hideImage = (event: any) => {
--- a/src/containers/welcomePage/component.tsx
+++ b/src/containers/welcomePage/component.tsx
@@ -28,7 +28,6 @@ class WelcomePage extends React.Component<WelcomePageProps, WelcomePageState> {
  render() {
    const renderWelcome = () => {
      return welcomeMessage.map((item, index) => {
-        console.log(this.state.currentIndex, index, "index");
        return (
          <div
            className={
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,9 +4,15 @@ import App from "./App";
 import { Provider } from "react-redux";
 import "./i18n";
 import store from "./redux/store";
+import * as serviceWorker from "./serviceWorker";
+
 ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
 );
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.register();
--- a/src/pages/reader/component.tsx
+++ b/src/pages/reader/component.tsx
@@ -133,6 +133,7 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
              : {
                  transition: "transform 0.6s ease",
                  transform: "translateX(309px)",
+                  display: "none",
                }
          }
        >
@@ -149,6 +150,7 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
              : {
                  transform: "translateX(-309px)",
                  transition: "transform 0.6s ease",
+                  display: "none",
                }
          }
        >
@@ -165,6 +167,7 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
              : {
                  transform: "translateY(90px)",
                  transition: "transform 0.5s ease",
+                  display: "none",
                }
          }
        >
@@ -181,6 +184,7 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
              : {
                  transform: "translateY(-90px)",
                  transition: "transform 0.5s ease",
+                  display: "none",
                }
          }
        >
--- a/src/redux/actions/reader.tsx
+++ b/src/redux/actions/reader.tsx
@@ -25,6 +25,9 @@ export function handleSingle(mode: string) {
 export function handleChapters(chapters: any) {
  return { type: "HANDLE_CHAPTERS", payload: chapters };
 }
+export function handleFlattenChapters(flattenChapters: any) {
+  return { type: "HANDLE_FLATTEN_CHAPTERS", payload: flattenChapters };
+}
 export function handleNoteKey(key: string) {
  return { type: "HANDLE_NOTE_KEY", payload: key };
 }
@@ -48,12 +51,24 @@ export function handleFetchNotes() {
    });
  };
 }
-
+export function flatChapter(chapters: any) {
+  let newChapter: any = [];
+  for (let i = 0; i < chapters.length; i++) {
+    if (chapters[i].subitems[0]) {
+      newChapter.push(chapters[i]);
+      newChapter = newChapter.concat(flatChapter(chapters[i].subitems));
+    } else {
+      newChapter.push(chapters[i]);
+    }
+  }
+  return newChapter;
+}
 export function handleFetchChapters(epub: any) {
  return (dispatch: (arg0: { type: string; payload: any }) => void) => {
    epub.loaded.navigation
      .then((chapters: any) => {
        dispatch(handleChapters(chapters.toc));
+        dispatch(handleFlattenChapters(flatChapter(chapters.toc)));
      })
      .catch(() => {
        console.log("Error occurs");
--- a/src/redux/reducers/reader.tsx
+++ b/src/redux/reducers/reader.tsx
@@ -5,6 +5,7 @@ const initState = {
  digests: [],
  locations: null,
  chapters: null,
+  flattenChapters: null,
  color: 0,
  noteKey: "",
  originalText: "",
@@ -65,6 +66,11 @@ export function reader(
        ...state,
        chapters: action.payload,
      };
+    case "HANDLE_FLATTEN_CHAPTERS":
+      return {
+        ...state,
+        flattenChapters: action.payload,
+      };
    default:
      return state;
  }
--- a/src/redux/store.tsx
+++ b/src/redux/store.tsx
@@ -68,6 +68,7 @@ export type stateType = {
    locations: any[];
    color: number;
    chapters: any[];
+    flattenChapters: any;
    isSingle: string;
    noteKey: string;
    originalText: string;
--- a/src/serviceWorker.ts
+++ b/src/serviceWorker.ts
@@ -0,0 +1,149 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(
+      process.env.PUBLIC_URL,
+      window.location.href
+    );
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then(registration => {
+        registration.unregister();
+      })
+      .catch(error => {
+        console.error(error.message);
+      });
+  }
+}
--- a/src/utils/addFavorite.tsx
+++ b/src/utils/addFavorite.tsx
@@ -31,7 +31,6 @@ class AddFavorite {
        ? JSON.parse(localStorage.getItem("favoriteBooks") || "")
        : [];
    const index = bookArr.indexOf(bookKey);
-    console.log(bookArr, index, "clear");
    if (index > -1) {
      bookArr.splice(index, 1);
    }
--- a/src/utils/deleteUtil.tsx
+++ b/src/utils/deleteUtil.tsx
@@ -4,7 +4,6 @@ import BookmarkModel from "../model/Bookmark";
 class DeleteUtil {
  static deleteBook(books: BookModel[], bookKey: string) {
    books = books.filter((item) => item.key !== bookKey);
-    console.log(books, "books");
    return books;
  }
  static deleteBookmarks(bookmarks: BookmarkModel[], bookKey: string) {
--- a/src/utils/mouseEvent.tsx
+++ b/src/utils/mouseEvent.tsx
@@ -62,8 +62,8 @@ export const MouseEvent = (rendition: any) => {
      return false;
    }
  };
-
-  rendition.on("rendered", () => {
+  let rebind = () => {
+    console.log("rebind");
    let iframe = document.getElementsByTagName("iframe")[0];
    if (!iframe) return;
    let doc = iframe.contentDocument;
@@ -72,11 +72,33 @@ export const MouseEvent = (rendition: any) => {
    }
    doc.addEventListener("keydown", arrowKeys); // 箭头按键翻页
    // 鼠标滚轮翻页
-    window.addEventListener("keydown", arrowKeys, false);
    if (isFirefox) {
      doc.addEventListener("DOMMouseScroll", mouseFirefox, false);
    } else {
      doc.addEventListener("mousewheel", mouseChrome, false);
    }
+  };
+  let bindEvent = (doc: any) => {
+    doc.addEventListener("keydown", arrowKeys); // 箭头按键翻页
+    // 鼠标滚轮翻页
+    if (isFirefox) {
+      doc.addEventListener("DOMMouseScroll", mouseFirefox, false);
+    } else {
+      doc.addEventListener("mousewheel", mouseChrome, false);
+    }
+  };
+  rendition.on("locationChanged", () => {
+    let iframe = document.getElementsByTagName("iframe")[0];
+    if (!iframe) return;
+    let doc = iframe.contentDocument;
+    if (!doc) {
+      return;
+    }
+    // 鼠标滚轮翻页
+    window.addEventListener("keydown", arrowKeys);
+    window.addEventListener("mousewheel", rebind);
+    window.addEventListener("DOMMouseScroll", rebind);
+    window.onmousewheel = rebind;
+    bindEvent(doc);
  });
 };
--- a/src/utils/otherUtil.tsx
+++ b/src/utils/otherUtil.tsx
@@ -61,7 +61,6 @@ class OtherUtil {
  static setSortCode(sortCode: number, orderCode: number) {
    let json =
      localStorage.getItem("sordCode") || JSON.stringify({ sort: 2, order: 2 });
-    console.log(json, json, "json");
    let obj = json ? JSON.parse(json) : { sort: 2, order: 2 };
    obj.sort = sortCode;
    obj.order = orderCode;
--- a/src/utils/readerConfig.tsx
+++ b/src/utils/readerConfig.tsx
@@ -14,7 +14,9 @@ class readerConfig {
      "style",
      `background-color:${OtherUtil.getReaderConfig("theme")}`
    );
-
+    if (!doc.head) {
+      return;
+    }
    if (!style) {
      style = doc.createElement("style");
      style.id = "default-style";
@@ -38,27 +40,18 @@ export const themeList = [
  { id: 3, theme: "rgba(242,219,187,0.8)" },
  { id: 4, theme: "rgba(255,254,252,1)" },
 ];
-export const fontSizeList = [
-  { id: 1, size: "Small", value: "15" },
-  { id: 2, size: "Medium", value: "17" },
-  { id: 3, size: "Large", value: "20" },
-  { id: 4, size: "Extra Large", value: "23" },
-  { id: 5, size: "Ultra Large", value: "26" },
-];
+
 export const updateLog = {
-  date: "2020.8.23",
+  date: "2020.9.6",
  new: [
-    "现在您可以给喜爱的图书添加心形标记，并且可以在我的喜爱中找到所有标记过的图书",
-    "添加书签之后，这一页的右上角会出现书签图标",
-    "图书操作的UI优化",
-  ],
-  fix: [
-    "修复笔记，书摘，书签跳转位置不准确的问题",
-    "修复删除书签导致阅读器崩溃的问题",
-    "修复阅读进度为NaN的问题",
-    "修复笔记弹窗超出阅读器范围的问题",
-    "修复导入图书失败后，图书页面闪烁问题",
+    "现在 Koodo Reader 支持全书搜索啦",
+    "客户端版本支持使用本地字体",
+    "单页模式新增滚动阅读功能",
+    "新增对epub文件内置样式的支持",
+    "字体支持任意大小的调节",
+    "UI细节优化",
  ],
+  fix: ["修复图片错页显示的问题", "修复批量导入时，部分图书无法导入的问题"],
 };

 export const dropdownList = [