加了个页码，下次还打算加个修改字体的功能

main.js

@@ -22,8 +22,8 @@ app.on("ready", () => {
     })
 
     //添加VueDevtools
-    // const extension = `${__dirname}/node_modules/vue-devtools/vender`
-    // BrowserWindow.addDevToolsExtension(extension)
+    const extension = `${__dirname}/node_modules/vue-devtools/vender`
+    BrowserWindow.addDevToolsExtension(extension)
     mainWindow.webContents.openDevTools()
 
     mainWindow.loadURL(`file://${__dirname}/src/index.html`)

src/components/SideBar.vue

@@ -66,6 +66,7 @@
     import toLib from './buttons/toLib.vue'
     import content from './buttons/Content.vue'
     import bookmark from './buttons/Bookmark.vue'
+    import progress from './buttons/Progress.vue'
     import Hover from '../mixins/hover.vue'
 
     export default {
@@ -96,7 +97,8 @@
             "line-height": lineHeightButton,
             "to-lib": toLib,
             "toc": content,
-            "bookmark": bookmark
+            "bookmark": bookmark,
+            "read-progress": progress
         },
         mounted() {
             this.computeHeight()

src/components/buttons/Progress.vue

@@ -0,0 +1,51 @@
+<template>
+    <hovershow-button icon="../static/progress.svg" :hideIcon="true">
+        <div class="hovershow-selector" style="padding-right:0.5em">
+            <input style="width:auto;font-size: 1.25em;padding-right:0.5em" v-if="current" type="number" min="1" :max="total" step="1" v-model="current" @change="changeFontSize()">
+            <span v-else>…</span>
+            <span>{{"/ "+(total||"…")}}</span>
+        </div>
+    </hovershow-button>
+</template>
+<style>
+</style>
+<script>
+    import hoverShowButton from '../HoverShowButton.vue'
+    import hoverShow from '../../mixins/hovershow.vue'
+    import { setTimeout } from 'timers';
+    export default {
+        data() {
+            return {
+                total: undefined,
+                current: undefined,
+                bookLoaded: false
+            }
+        },
+        mixins: [hoverShow],
+        components: {
+            "hovershow-button": hoverShowButton
+        },
+        methods: {
+            changeFontSize() {
+                this.$bus.emit("changePage",this.current)
+            }
+        },
+        mounted() {
+            //应该改成异步获取事件来修改值，暂时先循环检查
+            // this.changeFontSize()
+            this.$bus.on("currentProgress", ({ total, current }) => {
+                this.bookLoaded = true
+                if (total && current) {
+                    this.total = total
+                    this.current = current
+                }
+                else {
+                    console.log("进度读取错误")
+                    this.total = undefined
+                    this.current = undefined
+                }
+            })
+        }
+    }
+</script>
+

src/router.js

@@ -20,7 +20,7 @@ export default new VueRouter({
         meta:{
           title:"加载中...",
           sideBarButtons:[
-            "font-size","line-height","toc","bookmark","to-lib"
+            "font-size","line-height","toc","bookmark","read-progress","to-lib"
           ]
         }
       }

src/store/modules/reader.js

@@ -9,6 +9,7 @@ const getters = {
 }
 
 const actions = {
+    // getPage
     getStyles({ state }, { styleName, comp }) {
         if (state.book.config && state.book.config[styleName]) {
             return state.book.config[styleName]

src/view/Reader.vue

@@ -22,11 +22,11 @@
     }
 
     /* .buttonlist{
-                                                                            flex: 0;
-                                                                            bottom: 2em;
-                                                                            left: 2em;
-                                                                            -webkit-app-region: no-drag;
-                                                                        } */
+                                                                                                                        flex: 0;
+                                                                                                                        bottom: 2em;
+                                                                                                                        left: 2em;
+                                                                                                                        -webkit-app-region: no-drag;
+                                                                                                                    } */
 
     .reader {
         max-width: 100%;
@@ -80,13 +80,26 @@
                     this.$store.commit("DELETE_BOOKMARK", { time: time })
                 }
             })
+            this.$bus.on("getProgress", () => {
+                if (this.book) {
+                    let currentCfi = this.book.getCurrentLocationCfi()
+                    this.$bus.emit("currentProgress", { total: this.book.pagination.lastPage, current: this.book.pagination.pageFromCfi(currentCfi) })
+                }
+            })
+            this.$bus.on("changePage", (page) => {
+                if (this.book) {
+                    let cfi = this.book.pagination.cfiFromPage(page)
+                    this.book.gotoCfi(cfi)
+                }
+            })
         },
         destroy() {
             this.$bus.off()
         },
         data() {
             return {
-                book: null
+                book: null,
+                paginationLoaded: false
             }
         },
         beforeDestroy() {
@@ -104,6 +117,8 @@
             this.book.setStyle("font-family", "defaultText")
             this.book.setStyle("background-color", "rgba(0,0,0,0)")
 
+            this.generatePages()
+
             if (this.book) {
                 this.setStyle(this.$store.state.reader.book)
             }
@@ -118,6 +133,13 @@
 
             this.$el.addEventListener('wheel', this.keyEvent, false)
             document.addEventListener('keydown', this.keyEvent, false)
+
+            Rx.Observable.fromEvent(window, 'resize')
+                .debounceTime(1000)
+                .subscribe((event) => {
+                    this.generatePages()
+                })
+
             this.book.on("renderer:keydown", _this.keyEvent.bind(_this))
 
             //初始化store监听
@@ -142,16 +164,28 @@
             // 初始化阅读位置自动保存
             this.book.on('renderer:locationChanged', (location) => {
                 this.$store.commit("SET_LASTREAD", { cfi: location })
+                if (this.paginationLoaded) {
+                    this.$bus.emit("getProgress")
+                }
             })
 
         },
         methods: {
+            generatePages() {
+                this.paginationLoaded = false
+                this.$bus.emit("currentProgress", {})
+                this.book.generatePagination().then(() => {
+                    this.paginationLoaded = true
+                    this.$bus.emit("getProgress")
+                })
+            },
             syncStore(mutation, state) {
                 if (this.$route.path == "/reader") {
                     if (mutation.type == "SET_STYLE") {
                         let book = state.reader.book
                         this.setStyle(book)
                         updateBook(book)
+                        this.generatePages()
                     }
                     //if (mutation.type == "SET_LASTREAD") {
                     else {