diff --git a/build.gradle.kts b/build.gradle.kts
index 354282bf..22cbbef6 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -56,7 +56,7 @@ apply(plugin = "kotlin")
 apply(plugin = "io.github.fvarrui.javapackager.plugin")
 
 group = "com.htmake"
-version = "2.5.3"
+version = "2.5.4"
 
 java {
     sourceCompatibility = JavaVersion.VERSION_1_8
diff --git a/cli.gradle b/cli.gradle
index 600d20cf..97998ea7 100644
--- a/cli.gradle
+++ b/cli.gradle
@@ -17,7 +17,7 @@ apply plugin: 'io.spring.dependency-management'
 apply plugin: 'kotlin'
 
 group = 'com.htmake'
-version = '2.5.3'
+version = '2.5.4'
 sourceCompatibility = '1.8'
 
 repositories {
diff --git a/src/main/java/com/htmake/reader/api/YueduApi.kt b/src/main/java/com/htmake/reader/api/YueduApi.kt
index 6d60ea00..de098e00 100644
--- a/src/main/java/com/htmake/reader/api/YueduApi.kt
+++ b/src/main/java/com/htmake/reader/api/YueduApi.kt
@@ -228,6 +228,7 @@ class YueduApi : RestVerticle() {
         router.get("/reader3/getBookGroups").coroutineHandler { bookController.getBookGroups(it) }
         router.post("/reader3/saveBookGroup").coroutineHandler { bookController.saveBookGroup(it) }
         router.post("/reader3/deleteBookGroup").coroutineHandler { bookController.deleteBookGroup(it) }
+        router.post("/reader3/saveBookGroupOrder").coroutineHandler { bookController.saveBookGroupOrder(it) }
 
         // 书仓功能
         // 获取书仓文件列表
diff --git a/src/main/java/com/htmake/reader/api/controller/BookController.kt b/src/main/java/com/htmake/reader/api/controller/BookController.kt
index 68b1ab2d..04ad30d1 100644
--- a/src/main/java/com/htmake/reader/api/controller/BookController.kt
+++ b/src/main/java/com/htmake/reader/api/controller/BookController.kt
@@ -78,6 +78,7 @@ import io.legado.app.model.analyzeRule.AnalyzeUrl
 import java.nio.file.Paths
 import kotlinx.coroutines.withContext
 import kotlinx.coroutines.async
+import kotlinx.coroutines.sync.Mutex
 import kotlinx.coroutines.Deferred
 import kotlinx.coroutines.CoroutineScope
 import me.ag2s.epublib.domain.*
@@ -1587,10 +1588,16 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
         }
         var userNameSpace = getUserNameSpace(context)
         var bookGroupList: JsonArray? = asJsonArray(getUserStorage(userNameSpace, "bookGroup"))
-        if (bookGroupList != null) {
-            return returnData.setData(bookGroupList.getList())
+        if (bookGroupList == null) {
+            bookGroupList = asJsonArray("""
+            [{"groupId":-1,"groupName":"全部","order":-10,"show":true},{"groupId":-2,"groupName":"本地","order":-9,"show":true},{"groupId":-3,"groupName":"音频","order":-8,"show":true},{"groupId":-4,"groupName":"未分组","order":-7,"show":true}]
+            """)
+            if (bookGroupList == null) {
+                return returnData.setData(arrayListOf<Int>())
+            }
+            saveUserStorage(userNameSpace, "bookGroup", bookGroupList)
         }
-        return returnData.setData(arrayListOf<Int>())
+        return returnData.setData(bookGroupList.getList())
     }
 
     suspend fun saveBookGroup(context: RoutingContext): ReturnData {
@@ -1646,6 +1653,40 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
         return returnData.setData("")
     }
 
+    suspend fun saveBookGroupOrder(context: RoutingContext): ReturnData {
+        val returnData = ReturnData()
+        if (!checkAuth(context)) {
+            return returnData.setData("NEED_LOGIN").setErrorMsg("请登录后使用")
+        }
+        val bookGroupOrder = context.bodyAsJson.getJsonArray("order", null)
+        if (bookGroupOrder == null) {
+            return returnData.setErrorMsg("参数错误")
+        }
+
+        var userNameSpace = getUserNameSpace(context)
+        var bookGroupList: JsonArray? = asJsonArray(getUserStorage(userNameSpace, "bookGroup"))
+        if (bookGroupList == null) {
+            bookGroupList = JsonArray()
+        }
+        var orderMap: MutableMap<Int, Int> = mutableMapOf()
+        for (i in 0 until bookGroupOrder.size()) {
+            orderMap.put(bookGroupOrder.getJsonObject(i).getInteger("groupId"), bookGroupOrder.getJsonObject(i).getInteger("order"))
+        }
+        // 遍历判断书本是否存在
+        var groupList = bookGroupList.getList()
+        for (i in 0 until bookGroupList.size()) {
+            var bookGroup = bookGroupList.getJsonObject(i).mapTo(BookGroup::class.java)
+            if (orderMap.containsKey(bookGroup.groupId)) {
+                bookGroup.order = orderMap.get(bookGroup.groupId) as? Int ?: bookGroup.order
+                groupList.set(i, JsonObject.mapFrom(bookGroup))
+            }
+        }
+        bookGroupList = JsonArray(groupList)
+
+        // logger.info("bookGroupList: {}", bookGroupList)
+        saveUserStorage(userNameSpace, "bookGroup", bookGroupList)
+        return returnData.setData("")
+    }
 
     suspend fun deleteBookGroup(context: RoutingContext): ReturnData {
         val returnData = ReturnData()
@@ -1658,7 +1699,7 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
         if (bookGroupList == null) {
             bookGroupList = JsonArray()
         }
-        // 遍历判断书本是否存在
+        // 遍历判断分组是否存在
         var existIndex: Int = -1
         for (i in 0 until bookGroupList.size()) {
             var _bookGroup = bookGroupList.getJsonObject(i).mapTo(BookGroup::class.java)
@@ -1706,6 +1747,7 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
         var bookList = arrayListOf<Book>()
         val concurrentCount = 16
         val userBookSourceStringList = loadBookSourceStringList(userNameSpace)
+        val mutex = Mutex()
         limitConcurrent(concurrentCount, 0, bookshelf.size()) {
             var book = bookshelf.getJsonObject(it).mapTo(Book::class.java)
             if (!book.isLocalBook() && book.canUpdate && refresh) {
@@ -1713,7 +1755,7 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
                     var bookSource = getBookSourceStringBySourceURL(book.origin, userNameSpace, userBookSourceStringList)
                     if (bookSource != null) {
                         withContext(Dispatchers.IO) {
-                            var bookChapterList = getLocalChapterList(book, bookSource, refresh, userNameSpace, false)
+                            var bookChapterList = getLocalChapterList(book, bookSource, refresh, userNameSpace, false, mutex)
                             if (bookChapterList.size > 0) {
                                 var bookChapter = bookChapterList.last()
                                 book.latestChapterTitle = bookChapter.title
@@ -1735,7 +1777,7 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
     }
 
 
-    suspend fun getLocalChapterList(book: Book, bookSource: String, refresh: Boolean = false, userNameSpace: String, debugLog: Boolean = true): List<BookChapter> {
+    suspend fun getLocalChapterList(book: Book, bookSource: String, refresh: Boolean = false, userNameSpace: String, debugLog: Boolean = true, mutex: Mutex? = null): List<BookChapter> {
         val md5Encode = MD5Utils.md5Encode(book.bookUrl).toString()
         var chapterList: JsonArray? = asJsonArray(getUserStorage(userNameSpace, book.name + "_" + book.author, md5Encode))
 
@@ -1769,7 +1811,7 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
                 }
             }
             saveUserStorage(userNameSpace, getRelativePath(book.name + "_" + book.author, md5Encode), newChapterList)
-            saveShelfBookLatestChapter(book, newChapterList, userNameSpace)
+            saveShelfBookLatestChapter(book, newChapterList, userNameSpace, mutex)
             return newChapterList
         }
         var localChapterList = arrayListOf<BookChapter>()
@@ -1879,21 +1921,26 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
         }
     }
 
-    fun saveShelfBookLatestChapter(book: Book, bookChapterList: List<BookChapter>, userNameSpace: String) {
-        editShelfBook(book, userNameSpace) { existBook ->
-            if (bookChapterList.size > 0) {
-                var bookChapter = bookChapterList.last()
-                existBook.latestChapterTitle = bookChapter.title
-            }
-            if (bookChapterList.size - existBook.totalChapterNum > 0) {
-                existBook.lastCheckCount = bookChapterList.size - existBook.totalChapterNum
-                existBook.lastCheckTime = System.currentTimeMillis()
-            }
-            existBook.totalChapterNum = bookChapterList.size
-            // TODO 最新章节更新时间
-            // existBook.latestChapterTime = System.currentTimeMillis()
-            // logger.info("saveShelfBookLatestChapter: {}", existBook)
-            existBook
+    suspend fun saveShelfBookLatestChapter(book: Book, bookChapterList: List<BookChapter>, userNameSpace: String, mutex: Mutex? = null) {
+        try {
+            mutex?.lock()
+            editShelfBook(book, userNameSpace) { existBook ->
+                if (bookChapterList.size > 0) {
+                    var bookChapter = bookChapterList.last()
+                    existBook.latestChapterTitle = bookChapter.title
+                }
+                if (bookChapterList.size - existBook.totalChapterNum > 0) {
+                    existBook.lastCheckCount = bookChapterList.size - existBook.totalChapterNum
+                    existBook.lastCheckTime = System.currentTimeMillis()
+                }
+                existBook.totalChapterNum = bookChapterList.size
+                // TODO 最新章节更新时间
+                // existBook.latestChapterTime = System.currentTimeMillis()
+                // logger.info("saveShelfBookLatestChapter: {}", existBook)
+                existBook
+            }
+        } finally {
+            mutex?.unlock()
         }
     }
 
@@ -2890,19 +2937,19 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
     private fun setAssets(book: Book, epubBook: EpubBook): String {
         epubBook.resources.add(
             Resource(
-                BookController::class.java.getResource("${File.separator}epub${File.separator}fonts.css").readBytes(),
+                BookController::class.java.getResource("/epub/fonts.css").readBytes(),
                 "Styles/fonts.css"
             )
         )
         epubBook.resources.add(
             Resource(
-                BookController::class.java.getResource("${File.separator}epub${File.separator}main.css").readBytes(),
+                BookController::class.java.getResource("/epub/main.css").readBytes(),
                 "Styles/main.css"
             )
         )
         epubBook.resources.add(
             Resource(
-                BookController::class.java.getResource("${File.separator}epub${File.separator}logo.png").readBytes(),
+                BookController::class.java.getResource("/epub/logo.png").readBytes(),
                 "Images/logo.png"
             )
         )
@@ -2914,7 +2961,7 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
                 book.getDisplayIntro(),
                 book.kind,
                 book.wordCount,
-                String(BookController::class.java.getResource("${File.separator}epub${File.separator}cover.html").readBytes()),
+                String(BookController::class.java.getResource("/epub/cover.html").readBytes()),
                 "Text/cover.html"
             )
         )
@@ -2926,12 +2973,12 @@ class BookController(coroutineContext: CoroutineContext): BaseController(corouti
                 book.getDisplayIntro(),
                 book.kind,
                 book.wordCount,
-                String(BookController::class.java.getResource("${File.separator}epub${File.separator}intro.html").readBytes()),
+                String(BookController::class.java.getResource("/epub/intro.html").readBytes()),
                 "Text/intro.html"
             )
         )
 
-        return String(BookController::class.java.getResource("${File.separator}epub${File.separator}chapter.html").readBytes())
+        return String(BookController::class.java.getResource("/epub/chapter.html").readBytes())
     }
 
     private suspend fun setCover(book: Book, epubBook: EpubBook, bookSourceString: String) {
diff --git a/src/main/java/com/htmake/reader/utils/VertExt.kt b/src/main/java/com/htmake/reader/utils/VertExt.kt
index 5cd80e2b..4aa1bf09 100644
--- a/src/main/java/com/htmake/reader/utils/VertExt.kt
+++ b/src/main/java/com/htmake/reader/utils/VertExt.kt
@@ -73,8 +73,10 @@ fun getWorkDir(subPath: String = ""): String {
         var currentDir = System.getProperty("user.dir")
         logger.info("osName: {} currentDir: {}", osName, currentDir)
         // MacOS 存放目录为用户目录
-        if (osName.startsWith("Mac OS") && !currentDir.startsWith("/Users/")) {
+        if (osName.startsWith("Mac OS", true) && !currentDir.startsWith("/Users/")) {
             workDirPath = Paths.get(System.getProperty("user.home"), ".reader").toString()
+        } else {
+            workDirPath = currentDir
         }
         workDirInit = true
     }
@@ -141,7 +143,7 @@ fun saveStorage(vararg name: String, value: Any, pretty: Boolean = false) {
     val filename = name.last()
     val file = File(getRelativePath(storagePath, *name.copyOfRange(0, name.size - 1), "${filename}.json"))
     // val file = File(storagePath + "/${name}.json")
-    logger.info("storage key: {} path: {}", name, file.absoluteFile)
+    logger.info("Save file to storage name: {} path: {}", name, file.absoluteFile)
 
     if (!file.parentFile.exists()) {
         file.parentFile.mkdirs()
@@ -162,7 +164,7 @@ fun getStorage(vararg name: String): String?  {
 
     val filename = name.last()
     val file = File(getRelativePath(storagePath, *name.copyOfRange(0, name.size - 1), "${filename}.json"))
-    logger.info("storage key: {} path: {}", name, file.absoluteFile)
+    logger.info("Read file from storage name: {} path: {}", name, file.absoluteFile)
     if (!file.exists()) {
         return null
     }
diff --git a/src/main/java/io/legado/app/constant/BookType.kt b/src/main/java/io/legado/app/constant/BookType.kt
index 0e48ffc8..c51d102f 100644
--- a/src/main/java/io/legado/app/constant/BookType.kt
+++ b/src/main/java/io/legado/app/constant/BookType.kt
@@ -3,6 +3,7 @@ package io.legado.app.constant
 object BookType {
     const val default = 0           // 0 文本
     const val audio = 1             // 1 音频
-    const val image = 3             //图片
+    const val image = 2            // 2 图片
+    const val file = 3               // 3 只提供下载服务的网站
     const val local = "loc_book"
 }
\ No newline at end of file
diff --git a/src/main/java/io/legado/app/help/DefaultData.kt b/src/main/java/io/legado/app/help/DefaultData.kt
index ba2044a0..ab920222 100644
--- a/src/main/java/io/legado/app/help/DefaultData.kt
+++ b/src/main/java/io/legado/app/help/DefaultData.kt
@@ -10,7 +10,7 @@ object DefaultData {
     const val txtTocRuleFileName = "txtTocRule.json"
 
     val txtTocRules: List<TxtTocRule> by lazy {
-        val json = String(DefaultData::class.java.getResource("${File.separator}defaultData${File.separator}$txtTocRuleFileName").readBytes())
+        val json = String(DefaultData::class.java.getResource("/defaultData/${txtTocRuleFileName}").readBytes())
         GSON.fromJsonArray<TxtTocRule>(json).getOrNull() ?: emptyList()
     }
 
diff --git a/src/main/java/io/legado/app/model/Debugger.kt b/src/main/java/io/legado/app/model/Debugger.kt
index faaaa129..9af8568c 100644
--- a/src/main/java/io/legado/app/model/Debugger.kt
+++ b/src/main/java/io/legado/app/model/Debugger.kt
@@ -48,6 +48,7 @@ class Debugger(val logMsg: (String) -> Unit) : DebugLog {
     suspend fun startDebug(webBook: WebBook, key: String) {
         val bookSource = webBook.bookSource
         webBook.debugLogger = this@Debugger
+        startTime = System.currentTimeMillis()
         when {
             key.isAbsUrl() -> {
                 val book = Book()
diff --git a/src/main/java/io/legado/app/utils/SourceAnalyzer.kt b/src/main/java/io/legado/app/utils/SourceAnalyzer.kt
index 51671993..4f98c6dc 100644
--- a/src/main/java/io/legado/app/utils/SourceAnalyzer.kt
+++ b/src/main/java/io/legado/app/utils/SourceAnalyzer.kt
@@ -88,8 +88,19 @@ object SourceAnalyzer {
                     header = uaToHeader(jsonItem.readString("httpUserAgent"))
                     searchUrl = toNewUrl(jsonItem.readString("ruleSearchUrl"))
                     exploreUrl = toNewUrls(jsonItem.readString("ruleFindUrl"))
-                    bookSourceType =
-                        if (jsonItem.readString("bookSourceType") == "AUDIO") BookType.audio else BookType.default
+                    val sourceType = jsonItem.readString("bookSourceType")
+                    bookSourceType = when(sourceType) {
+                        "AUDIO" -> BookType.audio
+                        "audio" -> BookType.audio
+                        "1" -> BookType.audio
+                        "IMAGE" -> BookType.image
+                        "image" -> BookType.image
+                        "2" -> BookType.image
+                        "FILE" -> BookType.file
+                        "file" -> BookType.file
+                        "3" -> BookType.file
+                        else -> BookType.default
+                    }
                     enabled = jsonItem.readBool("enable") ?: true
                     if (exploreUrl.isNullOrBlank()) {
                         enabledExplore = false
diff --git a/web/package.json b/web/package.json
index 2684fd1c..708aaff8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reader",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -16,6 +16,7 @@
     "localforage": "^1.10.0",
     "prismjs": "^1.25.0",
     "register-service-worker": "^1.7.1",
+    "sortablejs": "^1.15.0",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "vue": "^2.6.10",
diff --git a/web/public/bookSourceDebug/index.js b/web/public/bookSourceDebug/index.js
index 03910ca1..20006d56 100644
--- a/web/public/bookSourceDebug/index.js
+++ b/web/public/bookSourceDebug/index.js
@@ -173,9 +173,8 @@ function rule2json() {
   RuleJSON.customOrder =
     RuleJSON.customOrder == "" ? 0 : parseInt(RuleJSON.customOrder);
   RuleJSON.weight = RuleJSON.weight == "" ? 0 : parseInt(RuleJSON.weight);
-  (RuleJSON.bookSourceType == RuleJSON.bookSourceType) == ""
-    ? 0
-    : parseInt(RuleJSON.bookSourceType);
+  RuleJSON.bookSourceType =
+    RuleJSON.bookSourceType == "" ? 0 : parseInt(RuleJSON.bookSourceType);
   RuleJSON.enabled =
     RuleJSON.enabled == "" ||
     String(RuleJSON.enabled)
diff --git a/web/public/index.html b/web/public/index.html
index 592100c0..9807833d 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -20,7 +20,6 @@
     <meta name="x5-page-mode" content="app">
     <meta name="msapplication-tap-highlight" content="no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2841133_2ey3idoaxcg.css" />
     <title>阅读</title>
     <script>
       // 通用加载脚本方法
diff --git a/web/src/App.vue b/web/src/App.vue
index f3b9a0ea..684f8f76 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -128,6 +128,7 @@ import { CodeJar } from "codejar";
 import Prism from "prismjs";
 import "prismjs/components/prism-json";
 import "prismjs/themes/prism.css";
+import "./assets/fonts/iconfont.css";
 import {
   cacheFirstRequest,
   isMiniInterface,
diff --git a/web/src/assets/fonts/iconfont.css b/web/src/assets/fonts/iconfont.css
index 105323d3..0f66d652 100644
--- a/web/src/assets/fonts/iconfont.css
+++ b/web/src/assets/fonts/iconfont.css
@@ -3,3 +3,55 @@
   font-family: "iconfont";
   src: url("./iconfont.woff") format("woff");
 }
+
+@font-face {
+  font-family: "reader-iconfont"; /* Project id 2841133 */
+  src: url('./reader-iconfont.woff2?t=1657702223137') format('woff2'),
+       url('./reader-iconfont.woff?t=1657702223137') format('woff'),
+       url('./reader-iconfont.ttf?t=1657702223137') format('truetype');
+}
+
+.reader-iconfont {
+  font-family: "reader-iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.reader-icon-shezhi:before {
+  content: "\e654";
+}
+
+.reader-icon-volume-off:before {
+  content: "\e631";
+}
+
+.reader-icon-volume:before {
+  content: "\e632";
+}
+
+.reader-icon-15s:before {
+  content: "\e61f";
+}
+
+.reader-icon-jian15s:before {
+  content: "\e620";
+}
+
+.reader-icon-player-pause:before {
+  content: "\ea2b";
+}
+
+.reader-icon-player-forward-step:before {
+  content: "\ea2c";
+}
+
+.reader-icon-player-backward-step:before {
+  content: "\ea2d";
+}
+
+.reader-icon-player-play:before {
+  content: "\ea2e";
+}
+
diff --git a/web/src/assets/fonts/reader-iconfont.ttf b/web/src/assets/fonts/reader-iconfont.ttf
new file mode 100644
index 00000000..4a2a8b1d
Binary files /dev/null and b/web/src/assets/fonts/reader-iconfont.ttf differ
diff --git a/web/src/assets/fonts/reader-iconfont.woff b/web/src/assets/fonts/reader-iconfont.woff
new file mode 100644
index 00000000..8e771494
Binary files /dev/null and b/web/src/assets/fonts/reader-iconfont.woff differ
diff --git a/web/src/assets/fonts/reader-iconfont.woff2 b/web/src/assets/fonts/reader-iconfont.woff2
new file mode 100644
index 00000000..2596c0d8
Binary files /dev/null and b/web/src/assets/fonts/reader-iconfont.woff2 differ
diff --git a/web/src/components/BookGroup.vue b/web/src/components/BookGroup.vue
index 53d8273f..9373551f 100644
--- a/web/src/components/BookGroup.vue
+++ b/web/src/components/BookGroup.vue
@@ -8,7 +8,7 @@
     :class="
       isWebApp && !$store.getters.isNight ? 'status-bar-light-bg-dialog' : ''
     "
-    @opened="$refs.bookGroupTableRef.doLayout()"
+    @opened="opened"
     v-if="$store.getters.isNormalPage"
     :before-close="cancel"
   >
@@ -23,17 +23,14 @@
         <el-table-column
           type="selection"
           width="25"
-          :fixed="$store.state.miniInterface"
           v-if="isShowBookGroupSettingDialog"
         >
         </el-table-column>
-        <el-table-column
-          property="groupName"
-          label="分组名"
-          min-width="100"
-          :fixed="$store.state.miniInterface"
-        >
+        <el-table-column property="groupName" label="分组名" min-width="100">
           <template slot-scope="scope">
+            <div class="drag-icon">
+              <i class="el-icon-rank"></i>
+            </div>
             <span> {{ displayBookGroupName(scope.row) }}</span>
           </template>
         </el-table-column>
@@ -83,6 +80,14 @@
         @click="saveBookGroup()"
         >添加分组</el-button
       >
+      <el-button
+        type="primary"
+        size="medium"
+        class="float-left"
+        @click="saveOrder()"
+        v-if="isShowSaveOrderButton"
+        >保存排序</el-button
+      >
       <el-button
         type="primary"
         size="medium"
@@ -98,6 +103,7 @@
 <script>
 import Axios from "../plugins/axios";
 import { mapGetters } from "vuex";
+import Dragable from "sortablejs";
 
 export default {
   model: {
@@ -108,17 +114,17 @@ export default {
   data() {
     return {
       isShowBookGroupSettingDialog: false,
+      showBookGroupList: [],
+      sortedBookGroupList: [],
+      refreshCounter: 0,
       bookGroupSelection: []
     };
   },
   props: ["show", "isSet"],
   computed: {
     ...mapGetters(["dialogWidth", "dialogTop", "dialogContentHeight"]),
-    showBookGroupList() {
-      if (!this.isShowBookGroupSettingDialog) {
-        return this.$store.state.bookGroupList;
-      }
-      return this.$store.state.bookGroupList.filter(v => v.groupId > 0);
+    bookGroupList() {
+      return this.$store.state.bookGroupList;
     },
     shelfBooks() {
       return this.$store.getters.shelfBooks;
@@ -130,6 +136,12 @@ export default {
       set(val) {
         this.$store.commit("setShowBookInfo", val);
       }
+    },
+    isShowSaveOrderButton() {
+      return (
+        this.showBookGroupList.reduce((p, c) => p + "" + c.groupId, "") !==
+        this.sortedBookGroupList.reduce((p, c) => p + "" + c.groupId, "")
+      );
     }
   },
   watch: {
@@ -137,6 +149,7 @@ export default {
       if (isVisible) {
         this.isShowBookGroupSettingDialog = this.isSet;
         this.bookGroupSelection = [];
+        this.computeBookGroupList();
         if (this.isSet) {
           this.$nextTick(() => {
             this.$refs.bookGroupTableRef.clearSelection();
@@ -146,6 +159,14 @@ export default {
           });
         }
       }
+    },
+    isSet(value) {
+      if (this.dragableElement) {
+        this.dragableElement.option("disabled", value);
+      }
+    },
+    bookGroupList() {
+      this.computeBookGroupList();
     }
   },
   methods: {
@@ -153,6 +174,19 @@ export default {
       this.isShowBookGroupSettingDialog = false;
       this.$emit("setShow", false);
     },
+    computeBookGroupList() {
+      this.showBookGroupList = [];
+      this.$nextTick(() => {
+        this.showBookGroupList = this.isSet
+          ? this.$store.state.bookGroupList.filter(v => v.groupId > 0)
+          : this.$store.state.bookGroupList;
+        this.sortedBookGroupList = this.showBookGroupList;
+      });
+    },
+    opened() {
+      this.$refs.bookGroupTableRef.doLayout();
+      this.setDragable();
+    },
     loadBookGroup(refresh) {
       return this.$root.$children[0].loadBookGroup(refresh);
     },
@@ -297,6 +331,44 @@ export default {
         }
       });
       return groups;
+    },
+    setDragable() {
+      const el = this.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
+      this.dragableElement = Dragable.create(el, {
+        handler: ".drag-icon",
+        setData: function(dataTransfer) {
+          dataTransfer.setData("Text", "");
+        },
+        onEnd: evt => {
+          if (evt.oldIndex === evt.newIndex) return;
+          const list = [...this.showBookGroupList];
+          const targetRow = list.splice(evt.oldIndex, 1)[0];
+          list.splice(evt.newIndex, 0, targetRow);
+          this.sortedBookGroupList = list;
+        }
+      });
+      window.bookGroupComp = this;
+      this.dragableElement.option("disabled", this.isSet);
+    },
+    async saveOrder() {
+      Axios.post(this.api + "/saveBookGroupOrder", {
+        order: this.sortedBookGroupList.map((v, index) => ({
+          groupId: v.groupId,
+          order: index
+        }))
+      }).then(
+        res => {
+          if (res.data.isSuccess) {
+            this.$message.success("保存成功");
+            this.loadBookGroup(true);
+          }
+        },
+        error => {
+          this.$message.error("保存失败" + (error && error.toString()));
+        }
+      );
     }
   }
 };
@@ -306,4 +378,10 @@ export default {
   display: block;
   margin: 0 auto;
 }
+.drag-icon {
+  cursor: move;
+  display: inline-block;
+  margin-right: 5px;
+  user-select: none;
+}
 </style>
diff --git a/web/src/components/Content.vue b/web/src/components/Content.vue
index 8d9f8d5b..46b9ea07 100644
--- a/web/src/components/Content.vue
+++ b/web/src/components/Content.vue
@@ -8,6 +8,7 @@ export default {
       audioDuration: 0,
       playing: false,
       currentSpeed: 1,
+      audioVolume: 100,
       startTime: 0,
       iframeStyle: {}
     };
@@ -339,6 +340,38 @@ export default {
               }}
             ></i>
           </div>
+          <div class="book-operation">
+            <span
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center"
+              }}
+            >
+              <i
+                class={[
+                  "reader-iconfont",
+                  this.audioVolume > 0
+                    ? "reader-icon-volume"
+                    : "reader-icon-volume-off"
+                ]}
+                vOn:click_stop_prevent={() => {
+                  this.setAudioVolume(this.audioVolume > 0 ? 0 : 100);
+                }}
+                style={{ marginRight: this.audioVolume > 0 ? "15px" : "25px" }}
+              ></i>
+              <el-slider
+                vModel={this.audioVolume}
+                min={0}
+                max={100}
+                style={{ width: "180px" }}
+                show-tooltip={false}
+                vOn:change={val => {
+                  this.setAudioVolume(val);
+                }}
+              ></el-slider>
+            </span>
+          </div>
           <div
             class="book-info"
             style={{
@@ -520,6 +553,14 @@ export default {
         }
       }
     },
+    setAudioVolume(val) {
+      if (!isNaN(val) && val !== Infinity) {
+        this.audioVolume = val;
+        if (this.$refs.audio) {
+          this.$refs.audio.volume = val / 100;
+        }
+      }
+    },
     ensureSeekTime(val) {
       this.startTime = val;
     },
@@ -539,30 +580,7 @@ export default {
       }
       if (init) {
         this.$refs.audio.load();
-
-        this.stateTimer && clearInterval(this.stateTimer);
-
-        this.stateTimer = setInterval(() => {
-          if (this.$refs.audio) {
-            let duration = this.$refs.audio.duration;
-            if (
-              this.$refs.audio.readyState >= 1 &&
-              !isNaN(duration) &&
-              duration !== Infinity &&
-              duration
-            ) {
-              clearInterval(this.stateTimer);
-              this.stateTimer = null;
-              this.audioDuration = parseInt(duration);
-              this.$refs.audio.playbackRate = this.currentSpeed;
-              this.$refs.audio.currentTime = this.startTime;
-              // 有时会失败（看浏览器）
-              if (this.autoPlay) {
-                this.$refs.audio.play();
-              }
-            }
-          }
-        }, 100);
+        this.computeDuration();
       }
       if (!init || this.autoPlay) {
         this.$refs.audio.play();
@@ -576,6 +594,33 @@ export default {
       this.autoPlay = true;
       this.$emit("nextChapter");
     },
+    computeDuration() {
+      if (!this.$refs.audio) {
+        setTimeout(() => {
+          this.computeDuration();
+        }, 100);
+        return;
+      }
+      let duration = this.$refs.audio.duration;
+      if (
+        this.$refs.audio.readyState >= 1 &&
+        !isNaN(duration) &&
+        duration !== Infinity &&
+        duration
+      ) {
+        this.audioDuration = parseInt(duration);
+        this.$refs.audio.playbackRate = this.currentSpeed;
+        this.$refs.audio.currentTime = this.startTime;
+        // 有时会失败（看浏览器）
+        if (this.autoPlay) {
+          this.$refs.audio.play();
+        }
+      } else {
+        setTimeout(() => {
+          this.computeDuration();
+        }, 50);
+      }
+    },
     onProgress() {
       // 记录缓存进度。触发事件包括缓存数据更新时的 progress 事件，以及各种播放动作会触发的 playing 事件
     },
@@ -587,7 +632,6 @@ export default {
     },
     onPlay() {
       this.playing = true;
-      this.stateTimer && clearInterval(this.stateTimer);
     },
     onPause() {
       this.playing = false;
@@ -598,13 +642,11 @@ export default {
       this.audioDuration = 0;
       this.autoPlay = true;
       this.$emit("nextChapter");
-      this.stateTimer && clearInterval(this.stateTimer);
     },
     onError(event) {
       // console.log(arguments);
       this.$message.error(event.toString());
       this.playing = false;
-      this.stateTimer && clearInterval(this.stateTimer);
     },
     onSeeked() {},
     onSeeking() {},
@@ -712,6 +754,7 @@ h3.reading {
       display: inline-block;
       cursor: pointer;
       font-size: 24px;
+      line-height: 1;
     }
   }
 
diff --git a/web/src/components/ReadSettings.vue b/web/src/components/ReadSettings.vue
index 60168c82..c3564cd7 100644
--- a/web/src/components/ReadSettings.vue
+++ b/web/src/components/ReadSettings.vue
@@ -441,7 +441,6 @@
 </template>
 
 <script>
-import "../assets/fonts/iconfont.css";
 import Axios from "../plugins/axios";
 import settings from "../plugins/config";
 import eventBus from "../plugins/eventBus";
diff --git a/web/src/views/Reader.vue b/web/src/views/Reader.vue
index 5161c38b..ae2e2587 100644
--- a/web/src/views/Reader.vue
+++ b/web/src/views/Reader.vue
@@ -364,6 +364,20 @@
                 >重置</span
               >
             </div>
+            <div class="progress">
+              <span class="progress-tip">定时</span>
+              <div class="progress-bar">
+                <el-slider
+                  v-model="speechMinutes"
+                  :min="0"
+                  :max="180"
+                  :step="1"
+                  :show-tooltip="false"
+                  @change="changeSpeechMinutes"
+                ></el-slider>
+              </div>
+              <span class="setting-btn">{{ speechMinutes }}分钟</span>
+            </div>
           </div>
         </div>
       </div>
@@ -717,7 +731,10 @@ export default {
 
       scrollStartChapterIndex: 0,
       showNextChapterSize: 1,
-      showPrevChapterSize: 0
+      showPrevChapterSize: 0,
+
+      speechMinutes: 0,
+      speechEndTime: 0
     };
   },
   computed: {
@@ -2186,6 +2203,14 @@ export default {
     changeSpeechPitch(pitch) {
       this.speechPitch = pitch;
     },
+    changeSpeechMinutes(minute) {
+      this.speechMinutes = minute;
+      if (minute) {
+        this.speechEndTime = new Date().getTime() + minute * 60 * 1000;
+      } else {
+        this.speechEndTime = 0;
+      }
+    },
     startSpeech() {
       if (this.error) {
         return;
@@ -2202,6 +2227,16 @@ export default {
         return;
       }
 
+      if (this.speechSpeaking) {
+        if (
+          this.speechEndTime > 0 &&
+          new Date().getTime() > this.speechEndTime
+        ) {
+          this.$message.info("定时关闭朗读");
+          return;
+        }
+      }
+
       const paragraph = this.getCurrentParagraph();
       if (!paragraph.innerText) {
         this.speechNext();